Pull to refresh
2
0
sunsey @sunsey

Пользователь

Send message

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

Reading time20 min
Views314K
Идеальная вёрсткаВы 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, даже если вы ничего не понимаете в вёрстке.
Total votes 335: ↑318 and ↓17+301
Comments244

Ищем быстро, еще быстрее

Reading time3 min
Views22K
Натолкнулся в разделе QA на интересный вопрос. Ответ на него заставил написать эту статью как бОлее полный ответ на вопрос «как организовать поиск по множеству параметров, как в Яндекс-маркете, например».

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

Итак, что имеем в «ДАНО»
  • Имеем 120 чекбоксов — вариант 1/0
  • Имеем 30 «радио» с выбором «да/нет/не важно»
  • Имеем 2-3 слайдера для указания диапазона цен/размера чего нить
  • Имеем самое главное: 12 млн записей в БД.
  • Имеем Select * From tovar Where (wifi=true) and (led=false) and (type=3) and ….остальные параметры …; со временем выполнения близкому к истерике клиента.

Читать дальше →
Total votes 184: ↑180 and ↓4+176
Comments117

38 статей о создании закругленных углов на сайтах

Reading time4 min
Views12K
Моя статья на Временно.нет
38 статей о создании закругленных углов на сайтах
Часто сталкиваешься с необходимостью создания блоков с круглыми краями. Задавшись вопросом как вообще можно решить поставленную задачу, сделал подборку интересных статей и уроков на данную тему.

Здесь представлен обзор 38 статей, разбитых на 4 категории по способам реализации.
Читать дальше →
Total votes 4: ↑4 and ↓0+4
Comments79

Как развиваться начинающему тестировщику?

Reading time4 min
Views239K
На форуме тестировщиков и в блогах часто появляются вопросы: с чего начинать тестировщику, который только-только выбрал свою стезю?

С одной стороны, сейчас много курсов в этой области, которые проводятся на базе портала Software-Testing.Ru, УЦ Luxoft, EPAM Systems и т.д.
С другой стороны, начинающему тестировщику далеко не всегда нужны курсы. Если вы ещё не знаете, в каком направлении развиваться, какие области интересны, какие знания хочется получать – то о каких курсах идёт речь? А комплексного ВУЗовского образования для тестировщиков в СНГ пока что нет… В итоге, многие люди не могут быстро «влиться» в профессию, найти направление для развития и понять, «что и как надо изучать для быстрого старта?».

Поэтому, я составила инструкцию для начинающих тестировщиков или людей, которые только выбрали себе эту область деятельности, и снабдила её максимумом ссылок, чтобы информацию не приходилось собирать по крупицам. Надеюсь, что эта инструкция поможет Вам в выбранном начинании.

Итак, 7 шагов от чайника к тестировщику.


image
Читать дальше →
Total votes 61: ↑41 and ↓20+21
Comments43

Мой подход к проектированию веб-сайтов

Reading time4 min
Views41K

Прелюдия


image Вероятно, всем известно и все прекрасно понимают, что главной частью в работе над программным продуктом, будь то сайт или настольное приложение, является совсем не процесс написания кода. Под словом главный я не подразумеваю время, которое уходит на этапы разработки, я имею ввиду наиболее важный этап, который определяет успешность дальнейшей работы над проектом. Трудно будет получить автомобиль, если на бумаге уже расписано создание велосипеда!

В рамках данной статьи я поделюсь своим опытом проектирования сайтов средней сложности. Данный подход зарекомендовал себя понятным как разработчикам, так и клиентам. Я не собираюсь открывать Америку, представленные ниже инструменты всем прекрасно знакомы. Суть данной статьи как раз в том, что бы продемонстрировать насколько просто можно представить достаточно сложные задачи.

Читать дальше →
Total votes 177: ↑152 and ↓25+127
Comments68

Незаконченная история перехода с Delphi на C#

Reading time10 min
Views39K

Предисловие


Всем доброго времени суток. Начиная с 2003 года, и по сегодняшний день, я профессионально занимаюсь разработкой прикладного программного обеспечения в среде Delphi 7 — Delphi 2010. И надо сказать, что эта работа позволяет мне достаточно неплохо зарабатывать на хлеб и пользоваться уважением своих коллег в нескольких организациях, с которыми я работаю.
Но многие наверняка знают о трудностях компании Borland, и как следствие провальной судьбе нескольких, вышедших подряд, версиях Delphi. Все Delphi, начиная с версии 8 (~2003 год) по 2007-ю, были не просто непопулярны. Их IDE были крайне нестабильны. Фатальные сбои среды разработки, требующие перезапуска, становились неотъемлемой частью процесса программирования. Сам язык менялся настолько незначительно, что большинство разработчиков на вопрос: “Что изменилось в новой версии?” могли только невнятно пробубнить: “Ну,… кажется, были добавлены новые компоненты…”. И только в 2009 году отделившаяся от Borland компания CodeGear смогла вывести на рынок относительно стабильную RAD Studio 2009, включающую новую версию Delphi. Подведя итоги, получаем 6 с лишним лет застоя, на фоне бурно развивающихся информационных технологий.
Поэтому и по сей день, значительный процент профессиональных разработчиков Delphi работает в 7-й версии. Могу только посочувствовать их упорству и посоветовать (если они и далее желают работать с Delphi) как можно скорее осваивать Delphi 2010. В сравнении с Delphi 7, 2010-я версия — это качественный скачек вперед. Я не стану подробно останавливаться на сравнении, поскольку это расходиться с темой статьи, но совсем промолчать не могу. Таких людей нужно чаще мотивировать, поскольку привыкание может быть существенной помехой на пути профессионального развития. Перейдя на версию 2010, вы получите стабильно работающую IDE, значительно превосходящую по комфорту работы среду Delphi 7. Из языковых возможностей вы приобретете поддержку юникода, возможность работы с обобщенными типами и анонимные методы, которые также могут плодотворно сказаться на качестве кода и скорости работы.
Читать дальше →
Total votes 118: ↑82 and ↓36+46
Comments226

Грабли при верстке HTML писем

Reading time3 min
Views103K
Довольно часто наши клиенты устраивают регулярные рассылки с новостями. Почти всегда их не устраивают текстовые рассылки или простое оформление HTML рассылок. Наши дизайнеры вовсю креативят, а мы потом набиваем шишки при верстке их макетов с корректным отображением во множестве почтовых клиентов.

Ниже список встретившихся нам особенностей и способы их разрешения (как то упорядочить их мне не удалось, поэтому всё идет единым списком)
Читать дальше →
Total votes 282: ↑273 and ↓9+264
Comments77

10 рекомендаций по html-верстке электронных писем

Reading time4 min
Views106K
Рекомендация первая: забудьте про блочную верстку. Весь лэйаут должен быть на таблицах. При этом, без крайней необходимости — их тоже лучше не использовать. Также следует выкинуть из головы представления о семантике, сокращенных css-правилах, валидации, плавающих блоках — и прочее. Самый распространенный в РФ почтовый сервис на данный момент (mail.ru) вообще не понимает стили (css). Любые тэги/атрибуты style заменяются на xstyle и не работают. Вообще все.

Так что, фактически, при вёрстке html для почтовой рассылки надо мысленно переместиться в 90-ые годы прошлого века и смело использовать все распространенные приёмы того времени.

Для тех, кто с ними не знаком (как я был) — напомню:
Читать дальше →
Total votes 124: ↑111 and ↓13+98
Comments104

Использование нескольких proxy в Opera

Reading time3 min
Views16K
В корпоративных и домашних сетях, содержащих внутренние web-ресурсы, порой возникает необходимость в наличии инструмента более функционального, чем общеизвестная опция «не использовать прокси для локальных адресов».

Однако, если Ваша корпоративная/домашняя сеть подключена к нескольким(более одного) провайдерам или же есть необходимость сэкономить на трафике наиболее часто посещаемых ресурсов, а также учитывая, что у многих провайдеров есть web-ресурсы, доступ к которым предоставляется бесплатно, то использование нескольких proxy становится оправданным.

Далее пойдет речь о том, как удобно использовать несколько, предварительно настроенных proxy, в браузере Opera, позволяющем выполнить данную задачу без установки дополнительных модулей и прочего ПО как под win так и под nix системами.
Читать дальше →
Total votes 74: ↑57 and ↓17+40
Comments43

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

Reading time6 min
Views114K
image

Речь пойдёт о далёком 2005 году, когда только-только вышла Civilization4 от Sid Meier. К тому времени я плотно висел в Civilization3, прошёл её раз дцать на самых разных картах, и тут вышла долгожданная четвёрка. Это были годы P3-512Mb для mid-end и P4-1Gb в hi-end. Только топовые конфиги в те годы имели два гига памяти на борту.

Civilization 4 вышла с графикой уровня года 2002-2003го, что в принципе нормально для мэинстрима тех времён, особенно учитывая что это пошаговая стратегия, а не шутер. Но жрала с течением игры до 900Mb оперативки, что приводило к жуткому свопу, особенно на больших картах, особенно к концу игры, особенно на ноутбуках. Народ недоумевал, я тоже. Учитывая, что в те же годы вышел Far Cry с куда более красивой графикой, и который вполне игрался на максимуме даже с 512Mb на борту, такое поведение Civilization 4 выглядело крайне странным. Захотелось разобраться и покарать…
Читать дальше →
Total votes 551: ↑547 and ↓4+543
Comments177

GeoIP – страны и города, декабрь 2010

Reading time1 min
Views2.7K
Вышла в свет новая версия русскоязычной базы данных стран и городов. Основные изменения:
— база maxmind.com была объединена с базой городов России ipgeobase.ru (идея sky_lord)
— с помощью Переводчика Google были переведены на русский язык ~60,000 названий (идея neytrino), а затем с помощью Яндекс.Карт из них были отсеяны артефакты типа «Инь молодых» и «Авиаторов деревня»
— были удалены дубли и произведена оптимизация структуры базы.
Результат этой работы доступен для свободного скачивания.
Читать дальше →
Total votes 67: ↑63 and ↓4+59
Comments56

PHP Performance Series: Caching Techniques

Reading time6 min
Views10K
Кеширование промежуточного кода (Opcode Caching)
Кэширование кода это один из самых легких и эффективных путей увеличения производительности в PHP. Использовании данного вида кэширования позволит избавиться от большого количества неэффективностей, возникающих при процессе запуска выполнения кода. Кэширование кода сохраняет промежуточный код в памяти для того чтобы не компилировать PHP-код каждый раз при запуске файла.
Читать дальше →
Total votes 59: ↑50 and ↓9+41
Comments66

Правда об автомобилях на Яндекс.Авто

Reading time1 min
Views22K
Для большинства людей покупка автомобиля — серьезный шаг. И готовятся к нему обычно вдумчиво и обстоятельно: покупают автомобильные журналы, читают рейтинги безопасности и длинные списки технических характеристик, спрашивают знакомых… Многим интересно узнать, а что скажут о понравившемся автомобиле сами автовладельцы, повидавшие не только красивую рекламную картинку, но и будни без прикрас. Пользователям Яндекса это действительно интересно — ежедневно мы получаем множество запросов типа [форд фокус отзывы].

Теперь тысячи интересных отзывов с сайтов наших партнеров собраны на Яндекс.Авто. Мы показываем их на тех страницах, на которых они особенно востребованы. Информер отзывов появляется на карточках моделей (например, новая Suzuki Grand Vitara) и на поиске по Яндекс.Авто (например, [Лада Калина]):

Информер отзывов на поиске Яндекс.Авто
Читать дальше →
Total votes 63: ↑54 and ↓9+45
Comments39

База GeoIP – страны и города

Reading time1 min
Views72K
При разработке одного проекта встала задача – определить по IP-адресу посетителя его страну и город, на русском языке. Поиск готового решения оказался безуспешным – русскоязычные базы стран можно найти (например, wipmania.com), но баз городов нет. Помощь пришла из-за границы, в лице англоязычного maxmind.com. База была приведена к нормальному состоянию (MySQL) и частично переведена на русский язык с помощью нескольких справочников (~6,000 названий, с учетом городов-тезок ~15,500).   Результат этой работы доступен для свободного скачивания.
Читать дальше →
Total votes 120: ↑101 and ↓19+82
Comments134
12 ...
11

Information

Rating
Does not participate
Location
Харьков, Харьковская обл., Украина
Date of birth
Registered
Activity