Как стать автором
Обновить
114
Карма
0
Рейтинг
Ihor Zenich @Delka

Frontend Developer for EPAM Systems

Видео доклада «Пишем #b_ правильно» с WebCamp 2015

Время прочтения 1 мин
Просмотры 10K
Разработка веб-сайтов *CSS *HTML *
Туториал
«Пиратское» видео доклада «Пишем #b_ правильно» с конференции «WebCamp 2015: Front-end Developers Day», прошедшей 4 июля в Одессе.

Как сверстать сайт вручную «по-БЭМ» без классов «block__element__element», и на реальном примере со всеми его проблемами, а не меню-пункт_меню-ссылочка, как вы видели раньше. Без BEMJSON, BEM Tools, но с миксованием, модификаторами и разбором ошибок.

Я знаком с БЭМ давно и все эти годы встречался с множеством заблуждений и стереотипов в использовании. В докладе постарался развеять популярные мифы и рассказал о своём трехлетнем опыте внедрения и использования БЭМ и связанным с этим наступании на грабли.

Слайды: delka.github.io/talks/webcamp/2015/bem


Читать дальше →
Всего голосов 21: ↑18 и ↓3 +15
Комментарии 19

Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать

Время прочтения 20 мин
Просмотры 306K
Разработка веб-сайтов *CSS *Совершенный код *HTML *IT-стандарты *
Идеальная вёрсткаВы PM. Как узнать – готова ли вёрстка к реальному использованию?
Вы заказчик. Как убедиться, что работа выполнена качественно?
Как оценить качество вёрстки?

Когда я стал тим-лидом, а позже PM, передо мной стала задача проверять вёрстку наших проектов. Нужно было выработать формальные, легкопроверяемые критерии, соответствие кода которым, должно было давать некую гарантию, что не будет факапов и ни клиент, ни программеры не сказажут потом “WTF?”.

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

Требования должны были быть такие, что соблюсти их легче, создавая качественную вёрстку, а не говнокод. Я составлял такой чек-лист в течении полутора лет. За последние полгода в него не добавилось ничего. Значит самое главное учтено.

Итак что же это за список?

Краткая версия теперь доступна на html5checklist.com (github), где можно вносить pull-request'ы.

История обновлений:
  • 2015/08/11: Актуализировал рекомендации по оптимизации скорости загрузки. Добавил требование поддержки Retina. Дополнил «19. Мелочи» требованием что изображения должны масштабироваться в зависимости от размера окна.
  • 2015/08/10: актуализирован список исключений для CSSLint
  • 2015/07/29: актуализирован пункт №13 «плохо»/«хорошо»
  • 2015/04/08: добавлено требование использования препроцессоров и рекомендация использования систем сборки
  • 2013/04/25: добавлены анализаторами качества кода: CSSLint и JSHint, указан сайт подбора css font stack (спасибо @fliptheweb), мелкие уточнения (работу интерактивных элементов страницы, что не пропадает фон на высоких разрешениях, не должно быть пустых презентационных блоков, при проверках контента — пробовать удалять заголовки, менять местами блоки)
  • 2013/04/24: добавил пункт об минимизации каскада (БЭМ-техники, MCSS, SMACSS), необходимости вписывания в экран моб. устройства, заменил ссылку на проверочный текст отображения стандартного html на код с normalize.css, поправил пример где в рекомендации встречался длинный каскад, упомянул про Opera на Presto и новый уровень семантики — в именах классов BEM.
  • 2012/04/12: отсортировал пункты проверки в порядке важности, выделил главные, дополнил статью подробностями
  • 2011/12/07: дополнил согласно доклада на WSD Минск'2011.
  • 2011/07/19: добавлено про повышение надёжности вёрстки благодаря html5-тэгам, про необходимость favicon/apple-touch-icon, отсутствие багов при ресайзе textarea
  • 2011/06/15: добавил пояснения какие ошибки валидации допустимы, рассказал про отсутствие официальной кнопки «HTML5 Valid» и про официальное лого HTML5 на сайте.


Далее с примерами - как проверить html, даже если вы ничего не понимаете в вёрстке.
Всего голосов 335: ↑318 и ↓17 +301
Комментарии 244

Web Standards Days в Киеве — доклады и отчёты

Время прочтения 1 мин
Просмотры 676
IT-стандарты *
Web Standards Days, КиевМои напарники побывали на wstdays и привезли оттуда пиратские записи докладов :)
Вадим “pepelsbey” Макеев рассказывал о столь сильном колдунстве, что рука дрогнула и запись удалилась. На последние два доклада и закрытие — аккумулятора не хватило:( Ждём конца недели, WSG Russia webstandards_ru обещают выложить всё.


Два официальных отчёта:
Всего голосов 33: ↑25 и ↓8 +17
Комментарии 10

Кроссбраузерный CSS3 градиент

Время прочтения 3 мин
Просмотры 63K
CSS *
Кроссбраузерный CSS3 градиент? с поддержкой Opera

Для FF используется -moz-linear-gradient, для Safari/Chrome — -webkit-gradient, для IE — DXImageTransform.Microsoft.gradient.

Вот только Opera 10 ещё не поддерживает CSS3 Gradient :(
Что же делать?
Всего голосов 62: ↑49 и ↓13 +36
Комментарии 34

120 dpi и шрифты в em

Время прочтения 8 мин
Просмотры 11K
CSS *
шрифт в em

Шрифты в Em/% хороши всем — возможностью пользователей IE увеличивать кегль, заботой о пользователях, что предпочитают увеличивать размер шрифта браузера по-умолчанию, чтоб лучше видеть текст, да и просто являются нормой для профессиональных верстальщиков.

Минусы: … их вроде как нет, но!
А что если у пользователя разрешение экрана выставлено не в стандартное 96 dpi, а в 120?
Сайт с увеличенными шрифтами смотрится уже не так красиво, как нарисовал дизайнер — ведь масштабируются только шрифты, а не весь сайт! А разрешение 120dpi становится всё популярней, особенно на ноутбуках! Что же делать? Возвращаться к px?

Нет!
как сделать сайт одинаковым на 96 dpi и 120
Всего голосов 157: ↑150 и ↓7 +143
Комментарии 65

Отключение CSS :)

Время прочтения 1 мин
Просмотры 454
Чулан
CSS на Вашем сайте отключен за неуплату.

или
В связи с плановыми ремонтными работами с 16.08 по 23.08 CSS на Вашем сайте будет отключён.
Всего голосов 63: ↑40 и ↓23 +17
Комментарии 11

Вредная верстка

Время прочтения 9 мин
Просмотры 73K
Accessibility *
Как определить, что сайт сверстан качественно?
Есть много статей о том, как делать хорошо, но совсем нет – о том, как делать не надо, ведь даже валидный и кроссбраузерный сайт может быть сверстан отвратительно.

Из этой статьи вы узнаете:


  • О плохих приемах современной верстки;
  • О том, как даже не будучи профессионалом, за 5 минут определить плохо ли сверстан сайт или нет.


Читать дальше →
Всего голосов 203: ↑175 и ↓28 +147
Комментарии 339

Безопасный хак для Safari

Время прочтения 1 мин
Просмотры 7.1K
CSS *
Имеем: навороченную форму без таблиц
Нужно: подвинуть съезжающий из-за сглаживания шрифтов label в Safari
Примечание: подвинуть безопасно, а не css3-свойствами.

Вуаля! есть замечательное свойство safari only позволяющее подвинуть что-угодно куда-угодно влево-вправо!
Читать дальше →
Всего голосов 18: ↑10 и ↓8 +2
Комментарии 38

Информация

В рейтинге
Не участвует
Откуда
Харьков, Харьковская обл., Украина
Дата рождения
Зарегистрирован
Активность