Search
Write a publication
Pull to refresh
1
0

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, даже если вы ничего не понимаете в вёрстке.

Работаем с jQuery Templates. Часть третья, jQuery Templates Plus

Reading time7 min
Views7.1K
Две недели назад я рассказал об основных возможностях плагина jQuery Templates и обещал на этом не останавливаться. Обещания надо выполнять, поэтому сегодня я расскажу о дополнительных функциях, не вошедших в основной код плагина.

Дополнительные функции плагина включают:
  1. Набор команд, существенно упрощающих изменение отрендеренных шаблонов при изменении связанных с ними данных;
  2. Событие rendered, которое вызывается после того, как отрендеренный шаблон добавляется в структуру документа.

Код дополнительных функций вынесен в файл jquery.tmplPlus.js, поэтому для их использования вы должны добавить ссылку на этот файл:

<script src="Scripts/jquery-1.5.js" type="text/javascript"></script>
<script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script src="Scripts/jquery.tmplPlus.js" type="text/javascript"></script>


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

Четырехмерный рендеринг: особенности, проблемы, варианты решения

Reading time4 min
Views5.5K


В комментариях к статье «Рейтрейсер на JavaScript» ее автор ankh1989 рассказал о планах написать рейтрейсер для четырехмерного пространства. Кое-какие свои мысли на эту тему я попробую изложить здесь.

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

Что такое 1G, 2G, 3G, 4G и все что между ними

Reading time8 min
Views701K
Трудно в это поверить, но когда-то мобильные телефоны действительно называли «телефонами», не смартфонами, не суперфонами… Они входят в ваш карман и могут делать звонки. Вот и все. Никаких социальных сетей, обмена сообщениями, загрузки фотографий. Они не могут загрузить 5-Мегапиксельную фотографию на Flickr и, конечно же, не могут превратиться в беспроводную точку доступа.

Конечно, те мрачные дни уже далеко позади, но по всему миру продолжают появляться перспективные беспроводные высокоскоростные сети передачи данных нового поколения, и многие вещи начинают казаться запутанными. Что же такое «4G»? Это выше, чем 3G, но означает ли, что лучше? Почему все четыре национальных оператора США неожиданно называют свои сети 4G? Ответы на эти вопросы требуют небольшой экскурсии в историю развития беспроводных технологий.

Для начала, «G» означает «поколение», поэтому когда вы слышите, что кого-то относят к «сети 4G», это означает, что они говорят о беспроводной сети, построенной на основе технологии четвертого поколения. Применение определения «поколения» в данном контексте приводит ко всей той путанице, в которой мы попробуем разобраться.
Читать дальше →

Моноиды и их приложения: моноидальные вычисления в деревьях

Reading time20 min
Views24K
Приветствую, Хабрахабр. Сегодня я хочу, в своём обычном стиле, устроить сообществу небольшой ликбез по структурам данных. Только на этот раз он будет гораздо более всеобъемлющ, а его применения и практичность — простираться далеко в самые разнообразные области программирования. Самые красивые применения, я, конечно же, покажу и опишу непосредственно в статье.

Нам понадобится капелька абстрактного мышления, знание какого-нибудь сбалансированного дерева поиска (например, описанного мною ранее декартова дерева), умение читать простой код на C#, и желание применить полученные знания.

Итак, на повестке сегодняшнего дня — моноиды и их основное применение для кеширования вычислений в деревьях.

Моноид как концепция


Представьте себе множество чего угодно, множество, состоящее из объектов, которыми мы собираемся манипулировать. Назовём его M. На этом множестве мы вводим бинарную операцию, то есть функцию, которая паре элементов множества ставит в соответствие новый элемент. Здесь и далее эту абстрактную операцию мы будем обозначать "⊗", и записывать выражения в инфиксной форме: если a и b — элементы множества, то c = ab — тоже какой-то элемент этого множества.

Например, рассмотрим все строки, существующие на свете. И рассмотрим операцию конкатенации строк, традиционно обозначаемую в математике "◦", а в большинстве языков программирования "+": "John""Doe" = "JohnDoe". Здесь множество M — строки, а "◦" выступает в качестве операции "⊗".
Или другой пример — функция fst, известная в функциональных языках при манипуляции с кортежами. Из двух своих аргументов она возвращает в качестве результата первый по порядку. Так, fst(5, 2) = 5; fst("foo", "bar") = "foo". Безразлично, на каком множестве рассматривать эту бинарную операцию, так что в вашей воле выбрать любое.

Далее мы на нашу операцию "⊗" накладываем ограничение ассоциативности. Это значит, что от неё требуется следующее: если с помощью "⊗" комбинируют последовательность объектов, то результат должен оставаться одинаковым вне зависимости от порядка применения "⊗". Более строго, для любых трёх объектов a, b и c должно иметь место:
(ab) ⊗ c = a ⊗ (bc)
Легко увидеть, что конкатенация строк ассоциативна: не важно, какое склеивание в последовательности строк выполнять раньше, а какое позже, в итоге все равно получится общая склейка всех строк в последовательности. То же касается и функции fst, ибо:
fst(fst(a, b), c) = a
fst(a, fst(b, c)) = a
Цепочка применений fst к последовательности в любом порядке всё равно выдаст её головной элемент.

И последнее, что мы потребуем: в множестве M по отношению к операции должен существовать нейтральный элемент, или единица операции. Это такой объект, который можно комбинировать с любым элементом множества, и это не изменит последний. Формально выражаясь, если e — нейтральный элемент, то для любого a из множества имеет место:
ae = ea = a
В примере со строками нейтральным элементом выступает пустая строка "": с какой стороны к какой строке её ни приклеивай, строка не поменяется. А вот fst в этом отношении нам устроит подлянку: нейтральный элемент для неё придумать невозможно. Ведь fst(e, a) = e всегда, и если ae, то свойство нейтральности мы теряем. Можно, конечно, рассмотреть fst на множестве из одного элемента, но кому такая скука нужна? :)

Каждую такую тройку <M, ⊗, e> мы и будем торжественно называть моноидом. Зафиксируем это знание в коде:
public interface IMonoid<T> {
    T Zero { get; }
    T Append(T a, T b);
}

Больше примеров моноидов, а также где мы их, собственно, применять будем, лежит под катом.
Читать дальше →

Стандарт разработки приложений под Android

Reading time3 min
Views18K
Разработчик Андроида сталкивается с большим количеством файлов и ресурсов предназначенных для разных частей программы. Даже он сам через месяц не может вспомнить, какой файл или ресурс к чему относится.
Предлагаемый ниже материал основан на моем опыте разработок многих проектов для Андроида и опробован уже в нескольких проектах. В результате простых правил нагромождение файлов и ресурсов превращается в удобочитаемый проект, экономит время и нервы. Особенно оказалось удобным при работе в команде, когда к проекту могут присоединяться новые программисты. В Eclipse вы легко находите любые ресурсы, поскольку они становятся уникальными, легко находимыми и сортируются в понятном порядке в любых списках. Общие удобные правила позволяют легко читать чужой код и находить нужные ресурсы.

Большинство из указанного является моими личным мнением.

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

Выпущены финальные версии ASP.NET MVC 3, WebMatrix, IIS Express, SQL Server Compact 4.0, Orchard 1.0 и Nuget

Reading time2 min
Views2.1K


Microsoft выпускает финальные версии своих инструментов веб-разработки. Для загрузки и установки доступны фреймворк ASP.NET MVC 3 (вместе с исходными кодами под опенсорс-лицензией) и среда разработки WebMatrix 1.0.

ASP.NET MVC 3 привносит следующие нововведения по сравнению со второй версией:
  • внутренняя интеграция с IoC-контейнерами и повсеместная поддержка Dependency Injection;
  • добавлен новый движок представлений Razor ViewEngine;
  • расширение механизма валидации: новые атрибуты, поддержка IValidatableObject, исключение параметров при валидации запросов;
  • поддержка динамического типа данных (зависимость от .NET 4.0);
  • глобальные фильтры;
  • встроенная поддержка JSON при работе с параметрами действий;
  • ненавязчивый JavaScript;
  • бессессионные контроллеры;
  • кэширование вложенных действий.
Более подробно обо всех этих нововведениях можно узнать из следующих статей: первая часть, вторая часть, третья часть, четвертая часть.

Нужно сказать, что финальная версия ASP.NET MVC 3 RTM отличается от предыдущей версии RC2 (выпущенной в декабре 2010 года) только исправлением пары ошибок.

Загрузить ASP.NET MVC 3 RTM можно по следующей ссылке.
Читать дальше →

Comet–приложение для Mochiweb c нагрузкой в 1 000 000 пользователей. Часть 3/3

Reading time21 min
Views4.8K
Часть 1 и Часть 2 в этом цикле статей показали, как создать приложение, используя mochiweb, и как передавать сообщения подключенным пользователям. Мы уменьшили постребление памяти до 8 Кб для каждого подключения. Мы повторили c10k тест. Мы сделали графики. Это была забава, но теперь пора повторить все для 1 миллиона соединений.

Это статья покрывает следующее:
• Использование базы данных Mnesia;
• Генерация правдоподобного набора данных вида «friends» для миллиона пользователей;
• Настройка Mnesia и ввод наших данных;
• Открытие миллиона соединений с одной машины;
• Сравнительный тест с 1 миллионом пользователей;
• Libevent + Си для обработки соединений;
• Финальные выводы.
Читать дальше →

Вероятностное Unit-тестирование. (Chaos driven Unit Testing.)

Reading time4 min
Views3.6K
Все более-менее сложные программные системы содержат ошибки (если и не собственные, то наведённые используемыми библиотеками или по причине неточного осознания поведенческих парадигм используемых фреймворков).
Часто, для тестирования системы на этапе разработки используются Unit-тесты.

Так программист может контролировать поведение системы на контрольных точках и пограничных значениях.
Часто именно неверная отработка пограничных значений приводит к проблемам. И опытные программисты это знают и учитывают при проектировании Unit-тестов.

Удобство Unit-тестов ещё и в том, что изменяя код вы ожидаете получить предсказуемые результаты и провести полностью автоматическое тестирование по имеющимся сценариям, чтобы быстро выявить наведённые изменениями неприятности.

Например, вы пишите код для работы на Intel и PPC, разрабатываете его на Intel, но учитываете порядок байтов. Потом прогоняете свои Unit-тесты, чтобы сравнить выходные данные с эталоном и обнаруживаете расхождения — понятно, где-то забыли байты перевернуть — исправляете — всё в порядке.

Однако, любой пользователь всегда несёт в себе элемент случайности.

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

Если программа делает больше чем печать «Hello World!», то скрытые ошибки в любом случае остаются.
Это могут быть ошибки и в логике в том числе.

Программа компилируется, все Warning'и устранены… но иногда что-то идёт не так… у пользователя (который живёт далеко в домике на островке в тихом океане — приехать к нему и пощупать нет возможности). Программист прокликал и протестировал со своей стороны всё что мог, но ошибки не нашёл. Что же делать?
Читать дальше →

«Вторая жизнь 40-битного ключа шифрования»

Reading time3 min
Views3.6K
Combination lockНекоторое время назад мне по работе пришлось столкнуться с проектированием и реализацией протокола аутентификации. Побочным эффектом этой работы стал протокол, назовем его для краткости MAuth, который использует симметричное шифрование с длиной ключа всего 40 бит, секретный ключ которого, получить невозможно. Речь сегодня пойдет именно о нем…
Читать дальше →

Алгоритм поведения привидений в игре Pac-Man

Reading time13 min
Views69K
Попробовал сделать перевод вчерашнего топика-ссылки на хабре. Заранее извиняюсь, если формулировки покажутся вам кривыми, я с удовольствием приму конструктивную критику. Поехали…

Мне кажется правильным начать этот блог с темы, которая вдохновила меня в первую очередь. Не так давно я наткнулся на статью Jamey Pittman «Pac-Man Dossier», в которой приводилось очень детальное описание механики игры Pac-Man. Она показалась мне очень интересной, поэтому этот сайт — попытка собрать такую же детальную информацию об остальных играх. Но в дань уважения я все же начну с Pac-Man, а в частности, с описания алгоритма поведения привидений. Это очень интересная тема и, надеюсь, мое объяснение будет немного более понятным и доступным, чем у Джейми, потому что я сосредоточусь лишь на поведении.

Об игре:
«В то время все доступные игры были очень жестокими — игры о войне и космических захватчиках. Не было ни одной игры для всех сразу, а особенно, которые понравились бы девушкам. Я хотел придумать «комическую» игру, которой могли бы наслаждаться даже девушки»
— Toru Iwatani, создатель Pac-Man


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

IPC: сокеты против именованных каналов

Reading time6 min
Views32K
Абсолютные числа большого смысла не имеют, но как сравнение информация представляет некоторую ценность

Условия


Windows 7 x64 с обновлениями
AMD Athlon X2 4600+ (2.41ГГц)
DDR2 2Гб
.Net Framework 3.5, классы из FCL.
Два 64-битных процесса без дополнительных привилегий.
Антивирус Касперского выключен. С ним результаты сокетов существенно хуже.
Сокеты и именованные каналы в асинхронном режиме.
Размеры буферов подбирались оптимальные, эксперементально для каждого вида IPC.
Читать дальше →

Анонимусов с 4Chan победили их же оружием

Reading time2 min
Views6.3K


Безликая масса анонимов с 4Chan, DDoS-ящих неугодные им сайты, прославилась довольно давно. Некоторые их действия находили широкий резонанс среди пользователей Сети — например, в тот раз, когда они «положили» сайт копирастов RIAA, или сайт индийской компании, которая занималась ддосом ресурсов с нелегальным контентом. Все это получало поддержку интернет-пользователей, на Хабре вроде как проскакивали новости с подробным раскладом кого и когда заддосили энтузиасты с 4Chan. Немного по-другому вышло, когда форум начал «наезжать» на ресурс Tumblr, обещая в скором времени «повесить» сервис всерьез и надолго.

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

Пять способов показать выпадающий список в Asp.Net MVC, с достоинствами и недостатками

Reading time7 min
Views46K
В большинстве интродукций к Asp.Net MVC рассказывается о том, как красиво и просто организовать привязку модели к простым полям ввода, таким, как текстовое или чекбокс. Если ты, бесстрашный кодер, осилил этот этап, и хочешь разобраться, как показывать выпадающие списки, списки чекбоксов или радиобаттонов,
этот пост для тебя.

Xcover 271: IP67, A-GPS, Google Maps, шагомер, высотомер — $200

Reading time2 min
Views43K
Наверняка многие из нас с вами довольно часто оказываются в ситуациях, когда наша техника должна вытерпеть серьезные нагрузки от окружающей среды, и в результате не подвести в самый ответственный момент. У кого-то такая ситуация может случиться во время активного отдыха на природе, а у кого-то — и во время не менее активной работы, заставляющей системных администраторов спускаться в подземные коммуникации, а инженеров-проектировщиков стоять под проливным дождем на крыше высотного здания.

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

Под хабракатом — спецификации нового сотового телефона компании, Samsung Xcover 271, сертифицированного в соответствии с практически самым надежным стандартом в области защиты оболочек устройств — IP67.
Читать дальше →

Опубликован весь архив Computer Science клуб при ПОМИ РАН

Reading time2 min
Views6.2K
Добрый день!

Как представитель проекта Лекториум рад сообщить — мы опубликовали весь архив Computer Science клуба.
Кроме того, почти год назад мы организовали запись всех лекций на хорошие камеры и микрофоны.
А в этом году планируем подключить вебинары.


Большинство лекций читается на русском языке. Все записи снабжены презентациями и описаниями.

UPD. Кратко. Старые лекции в плохом качестве, а новые с 2010 года с хорошим звуком и в 720p.
UPD 2 Расширили канал, видео грузится теперь без проблем.

Под катом перечень курсов и несколько вопросов касательно вебинаров.
Читать дальше →

Разбор исходного кода языков программирования и языков разметки

Reading time4 min
Views11K
..it is true that asking regexes to parse arbitrary HTML is like asking Paris Hilton to write an operating system..

Последние версии языка Nemerle включают в состав библиотеку для разбора языков, грамматика которых принадлежит классу PEG.

Что такое PEG?


В отличии от других инструментов для создания парсеров, PEG описывает не грамматику, а стратегию её разбора, но фактически описание стратегии разора является описанием грамматики. Для парсера описанного с помощью PEG существует алгоритм (packrat), разбирающий любой текст, удовлетворяющий грамматике из этого класса, за линейное время от длинны текста.

Класс языков, которые можно разобрать с помощью парсеров описанных подобным образом, достаточно широк, чтобы покрыть популярные языки программирования (например, C#) и языки разметки. Очевидно, что он покрывает всю функциональность регулярных выражений.
Про PEG для Nemerle и других .Net языков

Впечатляющие анимационные эффекты

Reading time2 min
Views115K
С появлением jQuery, у веб-программистов появилась возможность создавать впечатляющие визуальные эффекты, не прибегая к использованию технологии flash. В данной статье представлено несколько ярких примеров того, каких потрясающих результатов можно достичь, используя стандартные средства браузера и свое воображение.
Читать дальше →

Динамические вызовы: сравнение методов

Reading time15 min
Views8.9K

Динамические вызовы: что это и зачем?



Думаю, для каждого разработчика, работающим на статических языках программирования, иногда возникала необходимость прибегнуть к динамическим вызовам — вызвать метод чего-то, о чем пока еще ничего не известно. Или получить какое-то свойство у какого-то объекта, о котором будет известно только в run-time.

Это иногда используется в алгоритмах, основанных на так называемой «утиной типизации» (duck typing):
Если что-то выглядит как утка, плавает как утка и крякает как утка, то это, вероятно, утка и есть.


В данной статье я хотел бы рассмотреть основные доступные в Microsoft .NET 4.0 способы, сравнить их производительность и синтаксис.

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

Вы разработчик? Так почему вы до сих пор на кого-то работаете?

Reading time8 min
Views11K
Как разработчик, вы сидите на золотой жиле. Вы осознаете это?

Нет, серьезно, на @#$% золотой жиле! Никогда в истории не существовало возможностей так легко создать что-то с нуля, с маленьким или отсутствующим начальным капиталом и маркетинговой моделью, ограниченной только вашим воображением.

Подумайте о крупнейших сайтах, которые вы постоянно посещаете: Facebook, Twitter, Flickr, Foursquare, или даже Google — все они были созданы разработчиками, у которых была лишь идея. Было ли это легко? Черт, нет. Но это могло быть сделано только в наше время. Так, черт побери, почему вы просиживаете день за днем, работая на кого-то?
Читать дальше →

Information

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