Веб-разработка *

Год назад я писал об одном фееричном вопросе в ЕГЭ по обществознанию. Сегодня я решил посмотреть, что там нового приготовили школьникам разработчики ЕГЭ. Зашёл на официальный сайт (www1.ege.edu.ru) и обнаружил аж цельный ОНЛАЙН тест по обществознанию! Ну, я не мог мимо него пройти.

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

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

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

Однако, в зависимости от вида, каждые 7, 11, 13 или 17 лет периодические цикады одновременно массово вылезают на свет и превращаются в шумных летающих тварей, спариваются и вскоре умирают.

Хотя наши странные цикады весело уходят в иной мир, возникает очевидный вопрос: это просто случайность, или числа 7, 11, 13 и 17 какие-то особенные?

Сразу после окончательного релиза 14 марта сырого Internet Explorer 9 в Твиттере появился аккаунт ie9bugs, в котором собираются значительные для веб-девелопера баги. И хотя есть баг-трекер Микрософта, но там чёрт ногу сломит, а тут в одном месте достаточно кратко описаны и даны ссылки на интересные нюансы. Нам скоро придётся вступить в это говно работать с передовым браузером от Microsoft, потому, имхо, вполне полезно знать все эти грабли. Особенно, зная, с какими темпами Микрософт их закрывает. Предлагаю присоединиться к этому сообществу, рассказать интересные моменты, которые у вас уже есть и прочитать то, что они уже открыли. Из того, что «порадовало» меня больше всего:

• IE9 понимает не больше 4095 селекторов в одном CSS-файле
• Можно подключить не более 31 CSS-файла
• События не цепляются к элементам, у которых background:transparent;

Особо радует первый баг, теперь большие таблицы стилей не объединишь в один файл) Микрософт нам, верстальщикам и JavaScript-программистам, приготовил ещё огромное количество работы, костылей и головной боли, выпустив IE9, радуемся)

Ну и много ещё чего найдено за две недели, читайте сами.

UPD:

A reliable exploit for Internet Explorer 9 on Win7 SP1 is now available for our Gov customers. Unpatched vuln + ASLR/DEP/Sandbox bypass

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

Кто не знает, сегодняшняя дата, а именно, 4.04 является «магической цифрой», которая ассоциируется с 404 ошибкой, именно в честь 404-ой ошибки и считают этот день праздником веб-мастера.

Поздравляю всех веб-мастеров, и тех, кто хоть как-нибудь с этим связан. С праздником!

Буду собирать тут первоапрельские шутки веб-разработчиков за 2011 год.
Если хотите найти их самостоятельно — лучше не заходите в пост.

Около пяти месяцев назад я завязал с zend framework и пересел на рельсы. Тогда же начал переписывать свой проект www.okinfo.ru. Сейчас он уже закончен и sloccount показал что количество строк в проекте уменьшилось с 15000 до 4000. Мои знакомые php разработчики попросили success story и в итоге родилась эта статья. В ней я опишу как оно было, а так же немного расскажу о своем переходе на ruby.

Недавно увидел пост Тест производительности работы браузера с HTML5 Canvas. В результатах IE9 начал показывать сумашедшие циферки — 350+ fps.

Это, конечно, хорошо, но почему-то браузеры, которые в других тестах javascript'а и canvas'a показывали не меньшую производительность, в этом тесте показывали в разы (а иногда и в десятки раз) меньший fps (при условии запуска на Windows-платформе, но об этом позже).

Под катом покажу, почему тест показывает скорость совсем не HTML5-Canvas, а в самом конце будет скрин с 470 fps для FF4 без никакого фотошопа, для начала разберем что именно не так в этом тесте.

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

Большинство примеров кода не привязаны к какому-либо конкретному языку программирования, но для наглядности я буду использовать PHP.

Итак, поехали.

Хочу рассказать поучительную историю.
Работает со мной мужик, который сразу после университета пришел в нашу компанию.
Сначала это был небольшой израильский стартап, потом его купила большая американская компания.
Мужик в фирме рос, руководил отделом. Так прошло 12 лет и мужик решил менять место работы.
И вдруг оказалось, что он никому не нужен.
Почему?
Дело в том, что в нашей фирме придумали свой язык, объектно ориентированный. И даже сделали его стандартом (IEEE) в области тестирования дизайна чипов.
Язык оказался удачным и на нём начали писать свой софт.
Так вот этот мужик, почти всё время, эти 12 лет, писал на этом нашем языке. (Кроме этого — на C++ и Perl, но немного.)

Вы 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 на сайте.

Ниже предлагается перевод статьи, обращающей внимание на, на мой взгляд, довольно острую проблему в эпоху web 2.0, а именно чистоту URL-адресов.

На примере сайта Lifehacker.com показано какими проблемами может обернуться слепое следование state-of-the-art технологиям, погоней за SEO и отрицание принципа «прогрессивного улучшения» (progressive enhancement).

На прошлой неделе, в понедельник, сайт Lifehacker.com был недоступен по причине неработающего JavaScript. Lifehacker.com, наряду с остальными сайтами компании Gawker, отображали пустую главную страницу без контента, рекламы и всего остального. Переход с результатов поиска Google на подстраницы переправлял обратно на главную.

Javascript-зависимые URL

Gawker, как и Twitter до него, перестроил свои сайты на полную зависимость от JavaScript'а, включая URLы его страниц. JavaScript не смог загрузиться, что привело к отсутствию контента и сломаным URLам.

Новые адреса страниц выглядят теперь следущим образом: http://lifehacker.com/#!5753509/hello-world-this-is-the-new-lifehacker. До понедельника, адрес был тем же, только без #!..

(В кабинете у психолога молодой мужчина...)

Понимаете, моя жизнь связана с компьютерами. Я использую компьютеры на работе, дома. Иногда ко мне обращаются друзья и знакомые. Так вот (тяжело вздыхает)… В последний год мне кажется, что меня преследуют. Время от времени я получаю странные красные окошки на всех моих компьютерах. Зачем они попадаются мне на глаза – я не знаю, но я их вижу все чаще и чаще!

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

Под катом — описание восьми сервисов, которые могут заметно облегчить жизнь веб-разработчика, верстальщика или дизайнера.

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

Ну ладно, не половина, а три четверти. Сегодня я хотел бы напомнить о том, что, опубликовав бинарные пакеты для любимых пользователей, разработчик не должен расслабляться. Особенно, если он публикует исходники. Почему же? А потому что недавно я скачал чужие исходники и вот что из этого вышло.
Сразу предупреждаю, что эта история будет не очень поучительна для людей с прямыми руками и системами контроля версий.

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

Внимание! Предполагаются базовые знания утилиты GNU make.

Прелюдия

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

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

Сегодня наткнулся на Google Body Browser. Имхо просто потрясающая вещь даже для тех, кто не занимается медициной.

Хотя действительно интересно наглядно посмотреть-покрутить где находится желудок, как идут нервы и т.д., но для меня, как веб-разработчика это первый действительно наглядный пример толкового использования WebGL — без установки никакого плагина в Chrome 9+ и FireFox4. Кроме того используется декомпрессия ресурсов на клиенте.

Отдельно отмечу возможности передачи прямых ссылок на определенный вид/орган, например вот так и возможности поиска органов с чем-то похожим на Google Instant (справа сверху — инпутбокс легко можно не заметить).

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

Видео с демонстрации Google Web Browser'a с WebGL Camp'а можно посмотреть тут.