Как стать автором
Обновить
0
0
Егор Огурцов @mrdubz

Front-end developer

Отправить сообщение

Хороший дизайн интерфейсов. Часть 3

Время на прочтение5 мин
Количество просмотров76K
Это третья часть переведённых заметок «Good User Interface». Первые 16 частей уже ранее перевели наши коллеги из ADV на Хабре, а вторые 11 перевели мы.

Идея 28


Используйте варианты по-умолчанию, не заставляя людей выбирать


Выбор по-умолчанию или самозаполняющиеся поля с обучением сокращают объем работы, которую должен проделать пользователь. Это стандартная техника, помогающая людям продвигаться по формам быстрее, учитывая, что их время ограничено. Одна из наиболее отвратительных вещей с точки зрения дизайна интерфейсов и конверсии посетителей в клиентов — это снова и снова просить пользователей предоставить данные, которые они уже указали ранее. Старайтесь делать поля, которые будут сами заполняться самыми популярными или уже известными значениями, а не просите людей их каждый раз заполнять. Чем меньше работы — тем лучше.

Остальные 10 заметок далее
Всего голосов 88: ↑81 и ↓7+74
Комментарии36

Бесплатный CSS3-генератор EnjoyCSS

Время на прочтение2 мин
Количество просмотров24K
EnjoyCSS — это бесплатный онлайн CSS-генератор, который предназначен для быстрого создания богатых графических стилей и мгновенного получения их кода. Этот инструмент позволяет добавлять к элементам тени, 3D и 2D трансформации, многочисленные сложные переходы, линейные и радиальные градиенты, тени текста, шрифты из Google Fonts, CSS3 код которых вы можете скопировать и вставить в ваш проект.

image

Кроме того, пользователь может получить как CSS для всех стилей элемента, так и для отдельных его аспектов (например, код только конкретного градиента или тени).
Читать дальше →
Всего голосов 23: ↑21 и ↓2+19
Комментарии14

Сравнение сервисов для автодополнения адресов в форме

Время на прочтение3 мин
Количество просмотров94K
Автодополнение адреса


На Хабре не раз поднимался вопрос автодополнения адресов в форме (раз, два, три).

Но вот и перед мной появилась задача реализовать такое автодополнение для небольшого интернет магазина. Критерии были такие:
  • Автодополнение адресов только Москвы
  • Автодополнение адреса одной строкой
  • Решение должно быть бесплатно (лимит запросов не менее 1000 в сутки)
  • Возможность подключить без дополнительных JS библиотек. (Я использую AngularJS Bootstrap-UI, в котором есть директива Typeahead, реализующая автодополнение формы)
  • Стопроцентный uptime не обязателен


Но какой источник данных выбрать? Я выбрал целых четыре, и решил их сравнить: в одном углу ринга заморские Google Geocode и Google Autococomplete, а в другом отечественные КЛАДР в облаке и DaData подсказки.

DISCLAIMER: Автор никак не причастен к разработчикам ни одного из представленных сервисов.
Интересно? Тогда прошу под кат
Всего голосов 56: ↑53 и ↓3+50
Комментарии56

60 FPS? Легко! pointer-events:none!

Время на прочтение2 мин
Количество просмотров98K


Вы, наверное, уже читали интересную статью о том, как можно отключать эффекты :hover при скроле – это позволяет здорово сохранить отзывчивость сайта, но имеет один недостаток – вам приходится опираться на один общий класс, и это плохо.

.hover .element:hover {
  box-shadow: 1px 1px 1px #000;
}
Читать дальше →
Всего голосов 144: ↑138 и ↓6+132
Комментарии58

Несколько полезных CSS-трюков

Время на прочтение3 мин
Количество просмотров56K
Во время работы над последним проектом накопилось несколько интересных CSS-трюков, о которых хочу рассказать. Хотя, возможно, это уже придумано до нас и все об этом уже знают. В примерах используется LESS, а не чистый CSS.

Событие автоподстановки в инпут поля


Проблема: узнать, что пользователь воспользовался функцией автоподстановки. Задача была в том, чтобы подсвечивать кнопку Login, если в полях e-mail и password введено что-либо. Проблема в том, что если эти поля заполняются автоподстановкой из ключницы браузера, то событие change на инпутах не выстреливает.

Решение: использовать псевдокласс :valid. Он срабатывает у инпута, если в нем есть контент, который удовлетворяет типу инпута (text, e-mail) и если у этого инпута стоит атрибут required. Правда решение не работает в IE, но нам не требуется поддержка этого браузера.

<input required="required" class="email-input" type="email" />
<input required="required" class="password-input" type="password"/>
<div class="go">Login</div>

.email-input:valid ~  .password-input:valid ~ .go {
	//стили для активной кнопки Login
}


Читать дальше →
Всего голосов 75: ↑64 и ↓11+53
Комментарии10

Генератор иконок по геоданным MIG

Время на прочтение4 мин
Количество просмотров9.1K
Приветствую хабросообщество. Хочу поделиться с вами одним из своих последних мини-проектов — генератором иконок по геоданным MIG. С его помощью можно сгенерировать векторные (SVG) и растровые (PNG) иконки, с заданными параметрами (цвет, размер, обводка и прочее).

MIG demopage

Всё это работает прямо в браузере и распространяется под лицензией MIT. Под катом можно узнать, как этим пользоваться и как оно работает.
Читать дальше →
Всего голосов 40: ↑40 и ↓0+40
Комментарии10

10+ полезных jQuery сниппетов на каждый день

Время на прочтение5 мин
Количество просмотров86K


Спустя годы библиотека jQuery стала неотъемлемой частью в работе каждого web-разработчика. Ведь она простая в использовании, быстрая и имеет очень широкие возможности. В этой статье я собрал список из более чем десяти сниппетов, которые вы можете свободно брать для использования. Их очень легко адаптировать под нужды ваших собственных проектов.
Читать дальше →
Всего голосов 194: ↑109 и ↓85+24
Комментарии55

Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю № 88 (15 — 21 декабря 2013)

Время на прочтение5 мин
Количество просмотров45K

Читать дальше →
Всего голосов 61: ↑53 и ↓8+45
Комментарии7

Набор социальных иконок

Время на прочтение1 мин
Количество просмотров133K


Доброго времени суток! Сегодня я хочу поделиться шестью наборами социальных иконок ICON.PACK, которые отрисовал на днях. Все иконки разбиты на 6 групп, отличающихся по форме.
Лицезреть иконки
Всего голосов 96: ↑69 и ↓27+42
Комментарии54

06 Collector: ссылки для дизайнеров и разработчиков

Время на прочтение2 мин
Количество просмотров30K


В этой подборке вы найдете много материалов для вдохновения с последниями тенденциями в веб-разработке и веб-дизайне. И в преддверие праздника этот пост будет разбавлен ресурсами на новогоднюю тематику.
Читать дальше →
Всего голосов 45: ↑41 и ↓4+37
Комментарии7

Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю № 81 (27 октября — 2 ноября 2013)

Время на прочтение6 мин
Количество просмотров45K

Читать дальше →
Всего голосов 100: ↑81 и ↓19+62
Комментарии14

Чем тестировать адаптивный дизайн?

Время на прочтение4 мин
Количество просмотров267K
image

Хватит менять размер окна браузера, хватит его насиловать! Готов спорить, вы не раз слышали это. Хорошо, возможно и не слышали. Но если вы профессионально занимаетесь разработкой адаптивных сайтов, вы понимаете о чем я: любое изменение DOM или правка CSS, и вы снова начинаете тянуть край браузера вперед, назад, тестируя изменения и просматривая ничего ли не сломалось.

Целью ваших движений является имитация экранов различных устройств.

В корпоративной среде зачастую, у вас есть множество гаджетов предоставленных компанией для теста. На моей работе в моем распоряжении есть iPad, iPod, другие планшеты, ноутбуки, а также настольные мониторы. Если у вас нет такой роскоши, приходится использовать то, что под рукой.

К счастью, есть внушающий набор онлайн инструментов, имитирующих различные диагонали устройств. Конечно, каждый из них имеет свои преимущества и недостатки, мы рассмотри несколько таких инструментов.

Для тестирования я выбрал реально адаптивный сайт PajamasOnYourFeet.com, сайт построено на основе HTML5 шаблона, бесплатно предоставленным EGrappler.
Читать дальше →
Всего голосов 30: ↑27 и ↓3+24
Комментарии33

Emmet LiveStyle — инструмент для удобной front-end разработки

Время на прочтение2 мин
Количество просмотров84K


На днях появился наверное самый удобный инструмент для front-end разработчиков — Emmet LiveStyle. Это плагин для двухстороннего (редактор браузер) редактирования CSS файлов, который может заметно облегчить и ускорить разработку. Восторженные отзывы по всему интернету это подтверждают (комментарии к статье Smashing Magazine и на Хабре).
Читать дальше →
Всего голосов 54: ↑48 и ↓6+42
Комментарии40

Абсолютное горизонтальное и вертикальное центрирование

Время на прочтение5 мин
Количество просмотров314K
Сколько уже было сломано копий о задачу выравнивания элементов на странице. Предлагаю вашему вниманию перевод отличной статьи с решением этой проблемы от Стефана Шоу (Stephen Shaw) для Smashing Magazine — Absolute Horizontal And Vertical Centering In CSS.

Все мы знали о margin: 0 auto; для горизонтального центрирования, но margin: auto; не работало для вертикального. Это можно легко исправить, просто задав высоту и применив следующие стили:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Я не первый, кто предложил это решение, однако такой подход редко применяется при вертикальном выравнивании. В комментариях к статье How to Center Anything With CSS Simon ссылается на пример jsFiddle, где приводится отличное решение для вертикального центрирования. Вот еще несколько источников на эту тему.

Рассмотрим способ поближе.
Читать дальше →
Всего голосов 112: ↑106 и ↓6+100
Комментарии10

Пользуетесь Ivideon? Хотите попасть в телевизор? Тогда мы идем к вам!

Время на прочтение2 мин
Количество просмотров19K


Мы очень гордимся тем, что Ivideon это самый популярный облачный сервис видеонаблюдения в мире. Уже с начала этого года мы обрабатываем больше часов входящего видео, чем, например, Youtube. Сейчас в среднем единовременно к нам в датацентры пишется видео более чем с 12 000 камер. Вроде бы не сильно впечатляет. А на самом деле это уже около 200 часов видео в минуту. Тогда как Youtube официально говорит всего лишь о 100 часах за тот же промежуток времени.

Но как бы там ни было, блог Ivideon на нашем сайте существенно менее популярен, чем блог Ivideon на Хабре. Поэтому сегодня мы решили опубликовать нашу достаточно необычную просьбу здесь. Дело в том, что вчера нам позвонили с телеканала НТВ и нам очень нужна ваша помощь!
Читать дальше →
Всего голосов 35: ↑23 и ↓12+11
Комментарии54

HabraPack возвращается

Время на прочтение1 мин
Количество просмотров64K
Я надеюсь тут остались люди, которые помнят старый и ужасный на вид HabraPack? В последнее время я начал натыкаться на свои жуткие иконки на большом количестве сайтов и даже в терминалах оплаты местной компании, в разделе «Социальная сеть». Также, совсем недавно, знакомые попросили чуть обновить иконки, что я собственно и сделал.

image

Я буду обновлять иконки раз в день, большим количеством иконок. А пока можете СКАЧАТЬ и спокойно пользоваться, если вдруг найдутся люди, кому понравится.

.PSD файл прилагается.
Всего голосов 164: ↑158 и ↓6+152
Комментарии54

Как заставить сайт летать и сэкономить десятки часов системного администрирования

Время на прочтение10 мин
Количество просмотров109K
Скорость работы вашего сайта, его стабильность и отказоустойчивость всегда зависят от трех составляющих:

1. Платформа (CMS) и ее настройки, которые влияют на производительность (параметры кэширования и т.п.)
2. Конфигурация сервера (реального физического или виртуального) и настройки системного ПО (веб-сервер, база данных и т.д.)
3. Качество разработки, кода, интеграции с платформой.

Зачастую веб-разработчик может написать хороший качественный код, но при этом мало что смыслит в системном администрировании и настройке серверов. А хороший сисадмин редко бывает по совместительству еще и классным программистом.

В общем-то, это — совершенно нормально, каждый должен заниматься своим делом. Но, к сожалению, в небольших веб-студиях, которых большинство, редко есть админы в штате. Настройкам хостинга уделяется мало внимания. В лучшем случае — полагаются на суппорт хостера и настройки «по умолчанию».

В итоге сайт может «хромать» из-за проблем и «узких» мест в любой из составляющих: CMS, хостинг, разработка. Клиент в нюансы не вникает и остается не удовлетворен проектом в целом. Его негатив переносится на всех: «Тормозной хостинг! Ужасная система! Разработчики ничего не умеют!»

Такая картина нас, конечно, никогда не устраивала. И мы решили, что надо что-то делать…
Читать дальше →
Всего голосов 99: ↑57 и ↓42+15
Комментарии107

Дайджест интересных новостей и материалов из мира айти и веб-разработки за последнюю неделю №56 (4 — 10 мая 2013)

Время на прочтение7 мин
Количество просмотров30K
Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.


Читать дальше →
Всего голосов 47: ↑38 и ↓9+29
Комментарии8

Лёгкий сайт или как посадить браузер на диету

Время на прочтение14 мин
Количество просмотров144K

А что если объединить профессионалов, работавших над крупными web проектами, чтобы создать исчерпывающее руководство по оптимизации front-end разработки?
И получить в результате не скучную инструкцию, а что то поинтереснее? А если позвать Briza Bueno (Americanas.com), Davidson Fellipe (Globo.com), Giovanni Keppelen (ex-Peixe Urbano), Jaydson Gomes (Terra), Marcel Duran (Twitter), Mike Taylor (Opera), Renato Mangini (Google), и Sérgio Lopes (Caelum) чтобы собрать лучшие практики?

Именно это мы и сделали! Мы научим вас создавать быстрые сайты.

Zeno Rocha, руководитель проекта.


Читать дальше →
Всего голосов 193: ↑179 и ↓14+165
Комментарии80

Сетки без заморочек

Время на прочтение4 мин
Количество просмотров79K
Подавляющее большинство сайтов создано с использованием сеточных макетов. Они могут не использовать их в явном виде, но если на сайте присутствует блок с основным контентом, расположенный справа, и боковой блок (сайдбар), расположенный слева, то это и есть простейшая сетка.

Если требуется реализовать более сложные сетки, то люди прибегают к помощи фреймворков. Они считают, что сетки это сверх сложная вещь, которую лучше доверить настоящим знатокам CSS. Уверенность в этом укрепляется тем фактом, что большинство сеточных фреймворков, с которыми они имеют дело, являются очень сложными.

В этой статье я расскажу вам, как я верстаю сеточный макет. Это не так уж и сложно. И даже сделать резиновые сетки не составит большого труда.
Читать дальше →
Всего голосов 57: ↑49 и ↓8+41
Комментарии66

Информация

В рейтинге
Не участвует
Откуда
Украина
Зарегистрирован
Активность