Опубликовано руководство по дизайну Веб 2.0
2 мин
На дизайнерском сайте Web Design From Scratch опубликовано подробное руководство по дизайну Веб 2.0. Это руководство представляет собой список из 15 дизайнерских приемов, которые чаще всего используются на сайтах нового поколения, с конкретными примерами и скриншотами.
Малоизвестные, но крутые атрибуты в HTML
4 мин
Спросите случайного фронтендера, какие атрибуты HTML он использует — и услышите что-то вроде «src, href, style, class...» и прочую чепуху, которую всем ещё в младенчестве вживили на чипе агенты IETF. Между тем, стандарты веба не стоят на месте, и с каждым годом в браузерах появляются всё более крутые фичи не только для монструозного CSS, но и для обычных элементов HTML. Вы знали, что с помощью атрибутов можно пинговать* произвольный адрес, а элементы формы могут многократно переопределять её поведение? Вряд ли.
Голые пятницы #1
3 мин
Туториал
Всем доброго времени суток. Сегодня мы поговорим о том, как красиво оформить выделенный текст, совладать с отступами в кнопках, прокачать скролл в мобильных браузерах, скрестить цвет текста с цветом границ, а также рассмотрим интересные новые единицы измерения.
Broadway — GTK+ 3.0 backend для HTML5
1 мин
Собственно, вот screencast: в браузере можно порулить даже Evince. Это, немного, кажется, даже не побоюсь этих слов, весьма круто.
Интересные трюки HTML. Экстремальный минимализм
Средний
8 мин
Обзор
Мы уже много говорили про оптимизацию сайтов до минимального размера, преимущества статичного HTML, а также упаковку сайта (и веб-сервера) в портативный формат одного исполняемого файла, который нативно исполняется под любой ОС.
Но стремление к минимизации может пойти дальше, если вы хотите поместить весь сайт в адресную строку браузера. А с помощью сокращателя ссылок даже большой сайт сжимается до восьми байт. В этом случае и хостинг не нужен (то есть роль хостинга выполняет сервис сокращения ссылок).
Браузеры наши меньшие, или Нам нужно серьёзно поговорить
15 мин
Вадим Макеев (Opera Software)
Меня зовут Вадим Макеев (pepelsbey). Я работаю в компании «Opera Software». Мы выпускаем браузеры, в частности, десктопные, мобильные и т.д.
Сегодня речь пойдет о браузере, который мы выпускаем, он называется «Opera mini», но я пришел не продавать вам его, я пришел рассказать про браузеры и про вещи, о которых мало кто думает.
Разговор будет не только технологический, но еще и серьезный. Я попытаюсь рассказать про серьезные вещи, чтобы вы думали о своей профессии ни «херак-херак – и в продакш», а в смысле «что и зачем» вы делаете. Это моя основная мысль.
Я, как пользователь Интернет (регулярно, много, года с 2001-го только этим и занимаюсь) испытываю проблемы, когда пользуюсь вебом. Главные проблемы состоят в том, что люди, которые разрабатывают веб (т.е. мы с вами и я лично), в некоторых ситуациях закрывают информацию от пользователя, не дают людям нормально ею пользоваться, блокируют доступ… Каждый день так или иначе это делают. Решают ли они не поддерживать «ie 6», решают ли сделать клиентский рендеринг или еще что-нибудь такое – то, что хорошо для одних, но плохо для других, и решают вместо сайта запустить нативное приложение… Это все приводит к некоторым проблемам.
Сколько может стоить один лишний пробел?
2 мин
Recovery Mode
Произошла курьезная и очень болезненная ситуация одновременно.
У нас много зарегистрированных клиентов и много из них тех, кто ни разу не входил в систему.
Писать клиентам по таким вопросами бесполезно — мало кто из обиженных клиентов ответит почему он обиделся.
Поэтому мы не поленились и начали тупо всем звонить и спрашивать, почему, мол, так и не зашли?
Ответ был почти у всех одинаковый:
Результат расследования отправил всех в глубоких шок.
У нас много зарегистрированных клиентов и много из них тех, кто ни разу не входил в систему.
Писать клиентам по таким вопросами бесполезно — мало кто из обиженных клиентов ответит почему он обиделся.
Поэтому мы не поленились и начали тупо всем звонить и спрашивать, почему, мол, так и не зашли?
Ответ был почти у всех одинаковый:
-Мы не смогли ввести логин пароль.
Результат расследования отправил всех в глубоких шок.
Элемент HTML <time>
4 мин
Туториал
Перевод
Элемент
Жизненный путь этого элемента был нелёгким. Его добавили в спецификацию HTML5 в 2009 году. Два года спустя, в 2011, его убрали и заменили на гораздо более широкий <data>. Однако в этом же году его вернули и добавили новых возможностей. Сейчас его можно уверенно использовать.
Ситуацию хорошо описал Брюс Лоусон (убрали, вернули, текущее положение дел). [Та же история на Хабре: убрали, вернули]. Классический пример того, как реакция сообщества разработчиков влияет на развитие HTML.
<time> представляет собой дату, время или период времени, представленные в машинночитаемом формате. Он может быть полезен для создания расписаний, архивов или других функций, связанных со временем. WordPress использует этот элемент в базовой теме оформления. Ещё один пример использования <time> — Reddit:Краткая история
Жизненный путь этого элемента был нелёгким. Его добавили в спецификацию HTML5 в 2009 году. Два года спустя, в 2011, его убрали и заменили на гораздо более широкий <data>. Однако в этом же году его вернули и добавили новых возможностей. Сейчас его можно уверенно использовать.
Ситуацию хорошо описал Брюс Лоусон (убрали, вернули, текущее положение дел). [Та же история на Хабре: убрали, вернули]. Классический пример того, как реакция сообщества разработчиков влияет на развитие HTML.
Maxmertkit. Идеальный css-фреймворк
29 мин
Всю документацию на английском языке вы сможете прочесть на maxmert.com.
Требования и задачи
При создании версии 1.0 мне пришлось пересмотреть основные требования к фреймворку:
- Возможность легко добавить/удалить размер или тему. Json-файл с прописанными темами и размерами для каждого виджета. Таким образом можно конфигурировать фреймворк исправляя json-файл.
- Модульность. При отключении или добавлении любого виджета фреймворк должен стабильно работать (привет bootstrap).
- Особое именование классов для избежания переопределения пользовательских классов.
- Javascript компоненты без jQuery (но с возможностью его использования, если он подключен).
Конечно это не единственные требования, а приоритетные. Их, поверьте, было очень-очень много. В итоге у меня получился фреймворк, которым я сам с большим наслаждением пользуюсь. Так каковы же его основные отличия от уже существующих?
Осторожно! Трафик.
«LibCanvas» — фреймворк для работы с Javascript Canvas
7 мин
Здравствуй, Хабр! Думаю, люди, которые следят за моим творчеством, заметили, что я очень увлекся рисованием на Canvas в JavaScript. Возможно это немного излишне, но ничего не могу с собой поделать, уж очень нравится эта технология. Так нравится, что я аж буду выступать на конференции с докладом о ней (Пономаренко Павел).Но это сейчас неважно, потому что я хочу презентовать фреймворк, который, хотя, только родился и еще не оброс функциональностью, но уже сейчас выглядит вполне завершенным, интересным и, главное, удобным.
XHTML 2 против HTML 5
10 мин
Перевод
Вернемся в прошлое на десять с небольшим лет, в 18 декабря 1997. Internet Explorer 4 был выпущен 3 месяца назад, The Mozilla Foundation еще не сформирована и до выхода Firefox еще далеко. Здесь нет XMLHttpRequest, нет даже XML. В этот день, больше десятилетия назад, HTML 4.0 был опубликован как рекомендация W3C.
Он и стал базой, на основе которой были разработаны современные web-стандарты. Конечно, были и усовершенствования. В 2000 году как официальная рекомендация был принят XHTML 1.0, а CSS 2 был реализован большинством производителей браузеров. Но основа Web – костяк, на котором построен каждый сайт, от простых визиток до комплексных приложений – по существу осталась неизменной.
По крайней мере, до сегодняшнего дня. После долгого затишья, кажется, уклад вещей в W3C меняется – в разработке находятся две конкурирующие спецификации, призванные заменить устаревшие стандарты HTML 4.x и XHTML 1.x. Обе инициативы работают под эгидой W3C (пусть так было и не всегда) и обе, по моему мнению, значительно превосходят текущую подборку языков web-разметки. Это HTML 5 и XHTML 2.0. И если вы читаете эту статью, скорее всего, в течение нескольких следующих лет вам придется работать с одной (или обеими) из них.
Самый большой секрет HTML: тег <output>
Простой
5 мин
Перевод
Все разработчики знают о теге <input>, это рабочая лошадка веба.
Но что такое <output>? Большинство его никогда не касались. Кто-то даже не подозревает о его существовании.
И очень жаль, ведь этот тег решает проблему, которую мы годами пытались решить связкой <div> и ARIA: динамические результаты, по умолчанию объявляемые программам для чтения экрана.
Этот тег уже много лет находится в спецификации, но почему-то скрывается у всех на виду.
Ближайшие события
Facebook признал, что разработка мобильных приложений на HTML5 была ошибкой
2 мин
Буду краток, господа, так как хочу лишь донести до вас на мой взгляд достаточно интересное событие: Facebook отказывается от разработки мобильных приложений на HTML 5 и переходит на нативную разработку под каждую платформу.
Марк Цукерберг в свой речи признался, что стратегия разработки HTML 5 приложений не оправдала себя. Он признал, что использование HTML 5 было самой большой ошибкой компании, а итогом стало лишь потерянное время. Как он выразился, «We just were never able to get the quality of it we wanted...» — «мы так и не смогли добиться от приложений такого качества, которое хотели бы». Он не говорит, что HTML 5 — это плохо. Это лишь констатация факта, что в конкретной ситуации данная технология не смогла решать поставленные задачи на должном уровне.
Заинтересовавшиеся могут ознакомиться с более полным текстом тут (текст на английском).
Марк Цукерберг в свой речи признался, что стратегия разработки HTML 5 приложений не оправдала себя. Он признал, что использование HTML 5 было самой большой ошибкой компании, а итогом стало лишь потерянное время. Как он выразился, «We just were never able to get the quality of it we wanted...» — «мы так и не смогли добиться от приложений такого качества, которое хотели бы». Он не говорит, что HTML 5 — это плохо. Это лишь констатация факта, что в конкретной ситуации данная технология не смогла решать поставленные задачи на должном уровне.
Заинтересовавшиеся могут ознакомиться с более полным текстом тут (текст на английском).
Про вычислительную сложность алгоритмов HTML и CSS
3 мин
HTML документ загруженный в browser есть дерево DOM элементов и набор CSS правил. Каждое CSS правило это пара — селектор (selector) и список свойств (list of properties).
Мы мало задумываемся над тем, а собственно чего стоит нарисовать HTML документ c вычислительной точки зрения? Знания про то что думатель — думает, а неонка у нея унутре ярко светит сквозь opacity:0.5 элементы бывает явно не достаточно.
Собственно про это и есть данные статьи — про вычислительную сложность (computational complexity) отображения HTML и CSS. Хочу отметить что я использую свой собственный опыт имплементации HTML/CSS rendering engines (HTMLayout и Sciter), но вычислительные проблемы в данной области универсальны — определяются самой природой HTML и CSS спецификаций.
Мы мало задумываемся над тем, а собственно чего стоит нарисовать HTML документ c вычислительной точки зрения? Знания про то что думатель — думает, а неонка у нея унутре ярко светит сквозь opacity:0.5 элементы бывает явно не достаточно.
Собственно про это и есть данные статьи — про вычислительную сложность (computational complexity) отображения HTML и CSS. Хочу отметить что я использую свой собственный опыт имплементации HTML/CSS rendering engines (HTMLayout и Sciter), но вычислительные проблемы в данной области универсальны — определяются самой природой HTML и CSS спецификаций.
Бесконечный Mario на HTML5
1 мин
Если вам интересно изучить разработку игр на HTML5/JavaScript, можете посмотреть на Бесконечного Mario на HTML5 (временно не работает: привышен лимит у хостера; зеркало).
Игра является клоном этого проекта Minecraft: уровни генерируются до бесконечности, только там игра была на Java (тоже с исходниками), а здесь переписана на HTML5.
Гладкая игра без тормозов и хорошо читаемый код. Правда, есть некоторые глюки, например, фоновая музыка играет вроде только в Firefox 4.
Если жизней не хватает, можете добавить через JS-консоль браузера:
Исходники на github: github.com/robertkleffner/mariohtml5
Игра является клоном этого проекта Minecraft: уровни генерируются до бесконечности, только там игра была на Java (тоже с исходниками), а здесь переписана на HTML5.
Гладкая игра без тормозов и хорошо читаемый код. Правда, есть некоторые глюки, например, фоновая музыка играет вроде только в Firefox 4.
Если жизней не хватает, можете добавить через JS-консоль браузера:
Mario.MarioCharacter.Lives += 1024Исходники на github: github.com/robertkleffner/mariohtml5
Новости LibCanvas
2 мин
Где-то полгода назад я выкладывал несколько топиков про LibCanvas. Потом было затишье на Хабре, но не в репозитории. Работа активно продвигалась и библиотека обрела новые силы, возможности и базовую документацию.
Записываем музыку при помощи CSS Grid
Средний
8 мин
Кейс
Перевод
Слишком часто я наблюдал за тем, как импровизирующий музыкант трясущимися руками пытается увеличить pdf размером A4 на крошечном экране телефона в самом разгаре исполнения. Мы обязаны создать плавный и отзывчивый рендеринг музыки для веба!
В вебе нотная запись должна быть столь же доступной и плавной, как текст; однако пока это не так, и это уязвляет мои чувства. Давайте решим эту актуальную проблему.
SVG, отрендеренный Scribe 0.2
Несколько лет назад я создал прототип рендерера музыки, который назвал Scribe. Он выполняет преобразование JSON в SVG. Изначально я стремился к созданию адаптивного рендерера музыки. Это было хорошее демо, но для дальнейшего развития пришлось бы писать сложный многопроходный движок генерации макетов, а у меня тогда возникли другие дела.
Вскоре после этого я занялся адаптированием Grid под проекты компании, и тут мне почудилось нечто знакомое: я задался вопросом, а не станет ли он решением некоторых проблем, с которыми я столкнулся при разработке Scribe?
В вебе нотная запись должна быть столь же доступной и плавной, как текст; однако пока это не так, и это уязвляет мои чувства. Давайте решим эту актуальную проблему.
Прототип Scribe
Несколько лет назад я создал прототип рендерера музыки, который назвал Scribe. Он выполняет преобразование JSON в SVG. Изначально я стремился к созданию адаптивного рендерера музыки. Это было хорошее демо, но для дальнейшего развития пришлось бы писать сложный многопроходный движок генерации макетов, а у меня тогда возникли другие дела.
Вскоре после этого я занялся адаптированием Grid под проекты компании, и тут мне почудилось нечто знакомое: я задался вопросом, а не станет ли он решением некоторых проблем, с которыми я столкнулся при разработке Scribe?
Не стоит недооценивать HTML
Простой
6 мин
Обзор
Перевод
«HTML – это просто», «Разрабатывать фронтенд проще, чем бэкенд», «После реализации бэкенда обновление UI не должно составлять труда», – за время работы в сфере веб-разработки вокруг меня то и дело звучали эти и другие аналогичные утверждения.
И очень часто они вызывали у меня грусть.
Дело в том, что бо́льшую часть времени я проводила за написанием фронтенда, включая работу с HTML, CSS и JavaScript (по факту в основном TypeScript). Когда кто-нибудь говорит мне о «простоте» моей работы, я начинаю думать, что мои навыки не представляют высокой ценности, и меня может легко заменить любой разработчик…
В статье же я решила описать свои размышления, которые рождались в течение последних двух лет во время работы с людьми из разных команд с разным опытом в HTML-разработке и фронтенд-технологиях в целом. Здесь я озвучу несколько основных своих вопросов «Почему?», сопроводив их возможными ответами.
Исчерпывающее руководство по использованию HTTP/2 Server Push
14 мин
Перевод
Привет! Меня зовут Александр, и я – фронтенд-разработчик в компании Badoo. Пожалуй, одной из самых обсуждаемых тем в мире фронтенда в последние несколько лет является протокол HTTP/2. И не зря – ведь переход на него открывает перед разработчиками много возможностей по ускорению и оптимизации сайтов. Этот пост посвящён как раз одной из таких возможностей – Server Push. Cтатья Джереми Вагнера показалась мне интересной, и поэтому делюсь полезной информацией с вами.