Search
Write a publication
Pull to refresh
0
ИльR CepгeeBи4 @Zharskiyread⁠-⁠only

User

Send message

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

Reading time20 min
Views317K
Идеальная вёрсткаВы 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, даже если вы ничего не понимаете в вёрстке.

Обзор e-Learning трекеров или Век живи — век учись!

Reading time3 min
Views30K
Все чаще можно услышать про универсальных трекеров-монстров типа ThePirateBay.org, torrents.ru или упоминания трекеров музыкальной либо игровой тематики. Но помимо них давно существуют торрент-трекеры обучающей направленности, о которых мало что известно рядовому пользователю. В основном, это закрытые сообщества образованных людей с регистрацией по приглашениям, которые обмениваются обучающими материалами, будь-то электронные книги, обучающее видео, CBT (computer based trainings), аудио-книги, презентации с конференций или софт для обучения. Преобладающая часть материалов связана с ИТ-технологиями и поэтому будет особенно полезна ИТ-специалистам, от студента, изучающего Linux, PHP или C# и до гуру, который готовится к сдаче CCIE. Также присутствует материал, посвященный изучению иностранных языков, психологии, саморазвитию, соблазнению, развитию бизнес-навыков. Если ты подумываешь сдать на CCNA, MCSE, RHCE, CISSP, Network+, PMP, IELTS/TOEFL и так далее — то здесь можно найти все необходимое и даже больше. Под катом находится обзор англоязычных ресурсов обучающей направленности.
Поехали!

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

Reading time9 min
Views75K
Как определить, что сайт сверстан качественно?
Есть много статей о том, как делать хорошо, но совсем нет – о том, как делать не надо, ведь даже валидный и кроссбраузерный сайт может быть сверстан отвратительно.

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


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


Читать дальше →

CSS-препроцессор LESS и его интеграция с Ruby on Rails

Reading time3 min
Views5.9K
LESS — новый препроцессор для CSS. Проще говоря, LESS позволяет использовать в вашем CSS-файле переменные, операторы, классы и вложенные конструкции. В этой статье вы узнаете об основных возможностях LESS и о том, как быстро подключить его к популярному фреймворку Ruby on Rails 3.

Читать дальше →

Подслушиваем в AD

Reading time3 min
Views49K

Введение
Я только недавно столкнулся с виндовыми доменами (Active Directory) и познаю много нового и удивительного. Так уж получилось, что значительное количество пользователей в домене организации имеют права локальных админов (технические специалисты, программисты и другие) (ведь не редко так бывает?). Но последствия от этого колоссальны. В данной статье мы рассмотрим как можно подслушивать звуки (разговоры, переговоры) на удаленных машинах.
Читать дальше →

Особенности настройки git под windows

Reading time3 min
Views109K
Проблемы с русскими символами в git

Когда вы начнете работать с версией git под windows в командной строке, вы столкнётесь со следующей проблемой — все сообщения git, в которых фигурируют русские символы будут нечитаемы. Имена файлов, на русском языке, будут выглядеть так — "\362\345\361\362", а тексты коммитов примерно так — <C8><ED><E8><F6><E8><E0><EB><E8><E7><E0><F6><E8><FF> <EF><F0><EE><E5><EA><F2><E0>. Т.е. исходная строка преобразуется в utf8 в соответствии с кодировкой latin1.

далее...

Tip по использованию Git под Windows

Reading time1 min
Views13K
Продолжая статьи о Git, распределенной системе контроля версий, с помощью которой ведется разработка таких проектов как Linux и Ruby on Rails, хотелось бы сказать и несколько слов о работе с ним под Windows.

Официального порта Git под Windows нет, есть mingw+msys порт по адресу code.google.com/p/msysgit/downloads/list

Как-то понадобилось написать проект на ruby под Windows — возникла проблема с виндовым переносом строки, который вставлялся во все файлы автоматически, вследствие чего проект не работал вообще. Оказалось, что для исправления нужно подправить gitconfig, в котором разработчики msysgit предусмотрительно вставили автопостановку CRLF.

Отключается она элементарной правкой gitconfig (можно найти в папке C:\Program Files\Git\etc), меняем содержимое секции core на следующее:
[core]
autocrlf = false
symlinks = false

Надеюсь, совет окажется многим полезным :)

Выбор хостинга с упором в облака и с прицелом на развёртывание Rails 3 app

Reading time9 min
Views14K
Несмотря на наличие «Rails 3» в названии топика, и рассмотрения в теле статьи специфичных для Rails 3 аспектов, она может быть интересна всем остальным из-за освещения аспектов общего характера.

На Хабре много ответов на разные мои вопросы, но ответа на вопрос «а где же мне хостится», получить я, даже при внимательном штудировании Хабра, не смог. Я даже воспользовался q&a, пытаясь определиться: раз и два, но окончательного ответа так и не получил. Пришлось проводить самостоятельное исследование.

Я решил поделиться своими скромными изысканиями на эту тему с хабрасообществом. Они не претендуют на всеохватность. Но могут внести некоторую ясность для человека, собирающегося выбрать облачно\vds-ный хостинг, но не имеющего никакого представления о рынке.

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

Список упоминаемых хостингов: 1gb.ru, Hostingrails, RackspaceCloud, Mediatemple, Heroku, Amazon Web Services (шапочно), Engine Yard (шапочно), Altnet (привет с Хабрахабра), justhost.com (лучи поноса), Linode, Hetzner online (выделенный сервер), Server4you

Читать дальше →

Очередная подборка личного опыта по поводу всем уже надоевшего «слепого десятипальцевого метода»

Reading time4 min
Views25K
Давно написал сам себе эту заметку в качестве аутотренинга.
Как думаете, это нужно куда-нибудь выложить из персонального блога?
Читать дальше →

Электронная почта на сайтах-сервисах

Reading time6 min
Views3.6K
Данный пост касается не только самих писем, но и способов их использования на пользовательских сервисах. При написании статьи я старался уходить от частностей, разве что приводя их в качестве примера.

Затрагиваемые темы:
  1. Зачем нужно посылать электронные письма пользователю
  2. Когда следует посылать почту
  3. От чьего имени должно приходить письмо
  4. Что необходимо писать в письмах
  5. Обработка ответных сообщений

Многобуквие инсайд

Вытягивание из Директа всей информации о кампаниях конкурентов

Reading time6 min
Views4.2K
В продолжение статьи Евгения Ческидова «Яндекс. Директ. Анализируем конкурентное окружение» я хочу показать, как при помощи не очень сложных расчетов и API Яндекса вытащить из Директа буквально всю информацию о рекламных кампаниях конкурентов. Сразу скажу, что идея на практике еще не проверялась, сам факт наличия всей информации и, соответственно, возможности этого расчета был показан Ческидовым только вчера, а алгоритм родился буквально сейчас. Но математически вроде бы всё сходится. Осторожно, под катом много формул.
Читать дальше →

Pimp my surf, или Отсутенёрь свой сёрфинг

Reading time3 min
Views2.3K
В этом посте я постараюсь заставить вас лишний раз задуматься над известной фразой «если вы не параноик, то это не значит, что за вами не следят». Я расскажу о некоторых аспектах приватного сёрфинга в интернете. Постараюсь расписывать всё подробно, ориентируясь на чайников.

Поисковые сервисы стараются проконтролировать все ваши действия во время сёрфинга, собирая информацию, какие сайты вы посещаете, что ищете. Я перечислю некоторые методы сбора этой информации под катом.
Читать дальше →

Организация работы с репозиториями

Reading time2 min
Views3K
цели:
— организация непрерывного внедрение нового функционала проекта
— связанная система исправления багов в процессе поддержки проекта
— повышение качества проекта в целом
— атомарность разработки отдельных частей проекта (модули / функции)

Для достижения описанных выше целей необходимо организовать следующую структуру веток:
release
hotfixes (необязательна)
testing
fixes (необязательна)
default
developers branches (условное название)
Читать дальше →

Микроформаты АИР — бархатная революция на рынке интернет-решений

Reading time2 min
Views680
В России сейчас насчитывается тысячи веб-студий у каждой из которых десятки, а то и сотни выполненных работ. Это огромное количество проектов различного качества, стоимости, уровня сложности и направлений. Если собрать все эти работы в одном месте и предоставить потенциальным клиентам возможность фильтрации по интересующим его параметрам, то это значительно упростит поиск и выбор подрядчика.

Для того, чтобы сделать эту возможность реальной нужно собрать все проекты студий в одном месте, а для этого нужен крайне простой и удобный формат.
Читать дальше →

Google Maps: добавлена поддержка микроформата hCard

Reading time1 min
Views1.4K
Разработчики Google Maps сообщили в своём блоге о том, что отныне в выдаче Google Maps будет присутствовать информация, размеченная микроформатом hCard. Это сделано для удобства извлечения данных об адресе и контактной информации. Бонус сумеют оценить как пользователи Firefox (расширения Operator или Tails), так и пользователи IE и Safari (букмарклеты). Там же смотрите пример кода для работы с API.

Практический HTML: улучшаем семантику ссылок

Reading time4 min
Views11K

Примечание: ниже перевод статьи «Boost Your Hyperlink Power». В ней освещается использование атрибутов rel и rev, а также некоторые микроформаты.



Часть HTML-тегов и атрибуты мы используем каждый день в свой работе. Заголовки, параграфы, списки и картинки являются основой разметки каждого веб-разработчика. Но наиболее распространенным элементом, наверное, будет ссылка — простой тег, который связывает воедино все страницы, создавая ту самую беспорядочную структуру, которую мы называем Всемирная Сеть Интернет (WWW).



Ссылка как она есть



Весь потенциал ссылок заключается в атрибуте href, сокращение от hypertext reference. Он создает одностороннюю связь текущей страницы с другим ресурсом, обычно другой такой же страницей в интернете:



   <a href="http://allinthehead.com/">


Атрибут href находится в открывающем теге a, между открывающим и закрывающим тегами находится текст для описания ссылки:



   <a href="http://allinthehead.com/">Drew McLellan</a>


«Ну и что», — скажите вы. — «Это я все и так знаю», — и будете абсолютно правы! Но у ссылки есть еще кое-что, кроме атрибута href.


Читать дальше →

Идея стартапа: Синхронизация музыки телефона с музыкой на сервисе «Вконтакте»

Reading time1 min
Views253

Предыстория


После выхода новой прошивки на мой телефон Nokia 5800 решил почистить карту памяти, и заново залить всю музыку с упорядоченными ID тегами и тому подобное. Музыку (дома, на работе) я слушаю исключительно через интернет с помощью сервиса «ВКонтакте». В связи с этим подумал, что стоит просто скачать музыку с «Вконтакте» и залить на телефон, нашёл для этого специальную программу, которая может сливать музыку «пачками» и начал переносить всё на телефон.

В этот момент пришла идея о стартапе…
Читать дальше →

Запуск виртуальной машины в VirtualBox без GUI

Reading time3 min
Views63K
VirtualBoxИногда возникает необходимость запустить виртуальную машину на хосте без иксов. Я расскажу о том как это сделать, имея доступ к хостовой системе только по ssh + rdp (Remote Desktop Protocol). процесс я буду описывать для OC Ubuntu 9.10 в качестве хоста.
Читать дальше →
12 ...
15

Information

Rating
Does not participate
Location
Тольятти, Самарская обл., Россия
Date of birth
Registered
Activity