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

Удачная возможность для веб-разработчиков выучить язык программирования Си — HTML5-парсер Gumbo, реализованный в виде небольшой библиотеки C99 без внешних зависимостей. Парсер создан как строительный блок для создания других инструментов и библиотек, таких как валидаторы, языки шаблонов, инструменты рефакторинга и анализа кода.

Особенности:

• Полная совместимость со спецификациями HTML5.
• Устойчивость к некачественным входным данным.
• Простые API, которые могут быть легко обработаны программами на других ЯП.
• Поддержка исходных позиций и указателей в оригинальном коде, при навигации по дереву зависимостей.
• Проходит все тесты html5lib-0.95.
• Проверен на более чем 2,5 млрд страниц в индексе Google.

Один из моих любимых комиксов на theoatmeal.com, непонятно почему еще никто не запостил его, хотя довольно старый.

Флэш-плеер Shumway, написанный на HTML5, сегодня добавлен в кодовую базу Firefox. С помощью Shumway можно воспроизводить флэш-файлы (в формате SWF) без Adobe Flash Player, см. демки. Для просмотра демок не нужно даже ставить расширение, Shumway загружается как JS-файл.

Уважаемые хабровчане, представляю вам вольный перевод статьи Avoiding common HTML5 mistakes. Здесь мы рассмотрим частые ошибки в HTML5 разметке с точки зрения семантики, и как их избежать.

Microsoft наконец-то огласила результаты конкурса HTML5 приложений dev:unplugged с задержкой на 2 с половиной недели от первоначальных сроков. А ведь я чуть ли не каждый час обновлял браузер начиная с 23-его мая в надежде узнать результаты =) но статья не об этом…

Наш проект браузерной стратегии The Fate of Nation получил место среди «Honorable Mentions». Топовых победителей можно посмотреть на сайте конкурса.

По поводу окончания конкурса хочу немного рассказать про нашу игру, историю ее создания, особенности браузерных игр, ботов, «мультоводство» и о наших планах на будущее.

(Это вторая статья из серии статей, посвященных обзору различных тестов браузеров. Ранее в серии: Погружение в ACID3.)

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



В простонародье это зовется пузомерками, а как метко подметили примерно год назад в Lenta.ru (см. ниже) — «у кого HTML5 длинее».

Программист, именующий себя Stuffit, опубликовал исходный код на портале Codepen. Код симулирует физику ткани. Использует HTML5, Canvas, CSS и JavaScript, приблизительно 300 строчек кода. Ткань без текстуры, простая сетка, но демонстрационным целям служит отлично.



Есть возможность испытать код прямо на Codepen
Если потянуть мышкой очень сильно, полотно может и порваться. Впечатляет простота кода, которому для работы нужен только браузер. Дает представление о том, в каком направлении будут развиваться веб-игры. Staffit уже создал несколько подобных игрушек.

Перевод с чешского источника

Недавно полез я на сайт auto.ru, в поисках авто. И в друг увидел очень интересный виджет галереи который я уже где-то видел, выглядит он примерно так:



То есть снизу под фотографией есть некие «селекторы», переход по которым помогает посмотреть все изображения, относящиеся к товару.

(Это первая статья из серии статей, посвященных обзору различных тестов браузеров.)

Что такое Acid3? Кто его придумал? Как он устроен и как он работает? Что он измеряет на самом деле? Этими и другими вопросами мы зададимся в данной статье и попробуем найти ответы.

Что такое Acid3?

Acid3 — это третий из серии специальных тестов (до этого были Acid1 и Acid2), написанных «в помощь производителям браузеров, чтобы те могли проверить поддержку стандартов в своих продуктах». Конкретно ACID3 нацелен на тестирование спецификаций, связаных с разработкой динамичных «Web 2.0»-приложений.



Acid3 включает 100 специальных тестов, проверяющих 19 различных спецификаций.

Среди специалистов отношение к этому тесту весьма неоднозначное: с одной стороны, все знающие веб-разработчики понимаю, что этот тест мало что показывает и наврядли может выступать в роли абсолютного критерия поддержки веб-стандартов, с другой, наврядли, кто-то возьмется утверждать, что этот тест не имел никакого влияния.

Всем привет! Зовут меня Дмитрий Григоров. Работаю фронтедером в Райффайзенбанке в команде RBO PRO. Я расскажу и покажу вам, как можно творчески применять данные возможности CSS. В статье мы рассмотрим следующие темы:

• Фоны и рамки;
• Фигуры;
• Визуальные эффекты.

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

В данной статье я хочу рассказать, о том, как можно сверстать «хорошо» (по крайней мере структурировано ;), а заодно рассказать и о методологии, которая может «упростить жизнь» при верстке. Структура поста будет следующей:

• BEM
• Собственно пример — как сверстать страницу

В 2013 году я начал писать конвертер mammoth.js для экспорта вордовских документов в HTML. Это небольшая библиотека на 3000 строк кода. И хотя в ней ничего выдающегося, меня не покидает ощущение, что простенький проект важнее и принёс больше пользы, чем десять лет работы в индустрии программного обеспечения.

Первую версию я написал в пятницу днём на работе, когда обратил внимание, как много времени коллеги тратят на копипаст текста из Word в CMS и последующее форматирование. Такие однотипные действия еженедельно забирают часы рабочего времени. Я написал утилиту для автоматизации этого процесса, с учётом нашей стройной рабочей системы конвертации стилей Word в нужные классы CSS вместо мешанины HTML-тегов, которые выдаёт нативный экспорт Word. Программка получилась не идеальной — коллегам всё равно приходилось что-то поправлять, но ускорила рутинные операции примерно на порядок.

Читая публикации о верстке для вэба, вы не раз натыкались на рекомендацию не использовать пикселы в media queries. Например, вот цитата из совсем недавней статьи на Хабре:

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

Что, если я скажу вам, что использование пикселов в media queries не только не причиняет никакого вреда верстке, но и имеет преимущества над использованием em'ов?

Часто ли ты вставлял <blink> в <marquee> тег? Это сейчас Pixar получает все награды, а тогда в 90-х именно этот метод был наивысшим искусством в анимации. Ты был новатором, если совмещал эти теги; личностью, создающей инновацию; человеком, которому все подражали.

Ты был разработчиком в 1990-х.

Но с таким статусом ты понимал, что делал полную хрень, поскольку распространял ужасные стандарты по всему интернету, к которым мы не возвращались с тех самых пор.

Отложим jQuery в сторону, отвлечемся от нереляционных баз данных… У нас есть более важные вещи, о которых и пойдет разговор.

Фреймворк Twitter Bootstrap уже давно стал одним из самых любимых средств ленивых сторонников быстрого прототипирования и разработки интерфейсов, а где популярность там много разных сторонних интересных штук.
На этот раз я случайно попал на пополняющуюся коллекцию сниппетов.
Думаю многим пригодится, сейчас там набор небольшой (23 штуки), но уже достаточно полезный чтобы поделиться.
Кликабельные картинки:

Интерфейс аля gmail

Привет, Хабр.

Мне всегда нравились красивые и удобные интерфейсы. Желая сделать лучше для пользователя, я потратил не один день. Так я начал коллекционировать HTML и CSS лайфхаки, которые улучшают впечатление пользователя от интерфейса. В итоге у меня получился внушительный список.

Сегодня хочу поделиться с вами некоторыми практиками из него. Я постарался собрать наиболее простые, чтобы вы могли быстро и безболезненно внедрить их.

Давайте посмотрим, что я вам подготовил.

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



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

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

Вступление

Много лет я работал с AngularJS и по сей день использую его в продакшене. Несмотря на то, что идеальным, в силу своей исторически сложившейся архитектуры, его назвать нельзя — никто не станет спорить с тем, что он стал просто вехой в процессе эволюции не только JS фреймворков, но и веба в целом.

На дворе 2017ый год и для каждого нового продукта/проекта встает вопрос выбора фреймворка для разработки. Долгое время я был уверен, что новый Angular 2/4 (далее просто Angular) станет главным трендом enterprise разработки еще на несколько лет вперед и даже не сомневался что буду работать только с ним.

Сегодня я сам отказываюсь использовать его в своем следующем проекте.

Дисклеймер: данная статья строго субъективна, но таков мой личный взгляд на происходящее и касается разработки enterprise-level приложений.

Сколько раз говорили об ожирении софта и сайтов, а воз и ныне там. Ситуация совершенно не улучшается. В 1993 году Word открывался за секунду, а сейчас за пять. Простейшие странички обвешаны десятками скриптов и грузятся бесконечно долго даже на многоядерной рабочей станции.

Такая ситуация напрягает и самих веб-разработчиков. Приходится тратить кучу времени на оптимизацию, тестирование новомодных фич в разных браузерах, осваивать сложные CMS. Зачем? На самом деле HTML и CSS — исключительно мощные инструменты, если ими умело пользоваться.