Верстка \ HTML5

Анимированный радиальный SVG прогресс-бар

От автора: для клиентского проекта нам поручили не что иное, как сделать прогресс бар, причем радиальный. Раньше мы использовали целые Canvas графические библиотеки (156k / 44k gzip), но это казалось излишним. Я посмотрел проект Lottie от Airbnb, в котором экспортируется анимация After Effects, как JSON. Это классно для сложной анимации, но зависимости для одной этой микро-анимации оказались слишком объемными (248k / 56k gzip).

Продолжить чтение

Верстка \ HTML5

Окончательное руководство по подсказкам в браузере Preload, Prefetch и Preconnect

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

Продолжить чтение

Верстка \ HTML5

Создание изображений с помощью canvas

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

Продолжить чтение

Верстка \ HTML5

Что нового в HTML 5.2?

От автора: Меньше месяца назад HTML 5.2 стал официальной рекомендацией W3C (REC). Когда спецификация доходит до этапа REC, это значит, что она получила поддержку членов W3C и директора, и W3C официально рекомендует ее реализацию в браузерах, а также внедрение в веб-страницы авторами.

Продолжить чтение

Верстка \ HTML5

HTML5 формы: типы тега input

От автора: вторая часть статьи, посвященной типам тега input. Вы должны знать про атрибут type в поле input. Этот атрибут задает тип инпута в форме, который будет видеть пользователь. Если атрибут пропущен, или используется новое значение в старом браузере, тег все равно будет работать. Будет задан тип по умолчанию type=”text”. Это основной момент, который позволяет использовать HTML5 формы уже сегодня, даже если вы поддерживаете старые браузеры. Если у вас есть новые типы, например, email или search, то в старых браузерах отобразится простое текстовое поле.

Продолжить чтение

Верстка \ HTML5

HTML5 формы: типы тега input

От автора: вы должны знать про атрибут type в поле input. Этот атрибут задает тип инпута в форме, который будет видеть пользователь. Если атрибут пропущен, или используется новое значение в старом браузере, тег все равно будет работать. Будет задан тип по умолчанию type=”text”. Это основной момент, который позволяет использовать HTML5 формы уже сегодня, даже если вы поддерживаете старые браузеры. Если у вас есть новые типы, например, email или search, то в старых браузерах отобразится простое текстовое поле.

Продолжить чтение

Верстка \ HTML5

Валидация HTML5 документов

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

Продолжить чтение

Верстка \ HTML5

Откройте свои данные ботам с помощью микроданных

От автора: микроданные – еще одна технология, быстро набирающая популярность и поддержку. Однако в отличие от WAI-ARIA, чисто технически, микроданные являются частью HTML5. Несмотря на раннюю стадию разработки, о спецификации микроданных стоит упомянуть, так как эта технология позволяет заглянуть в возможное будущее семантики и читабельности документов.

Продолжить чтение

Верстка \ HTML5

HTML5 формы: новые элементы

От автора: мы изучили новые значения атрибута type тега input и парочку валидных для большинства элементов атрибутов. Однако HTML5 формам еще есть чем удивить! В HTML5 спецификации появилось 5 новых элементов: datalist, output, keygen, progress и meter. В предыдущей статье мы уже изучили datalist. Также мы показали вам progress и meter в последней главе, их часто используют вне форм. Давайте суммируем все и рассмотрим два оставшихся элемента.

Продолжить чтение