Верстка \ Статьи по верстке

Использование Google API для доступа к переменным шрифтов

От автора: веб-сайт Google Fonts является отличным ресурсом, и, учитывая постоянно растущий интерес к переменным шрифтам, часто возникает вопрос, будут ли Google Fonts иметь переменные шрифтов, и если да, то как мы будем их использовать?

Читать далее

Верстка \ Статьи по верстке

Интерактивная анимация в HTML электронных письмах

От автора: в прошлом месяце Panic анонсировала Playdate, красивую игровую систему с черно-белым экраном. Я был довольно большим поклонником Panic в течение длительного времени: от Coda для How to Count Стивена Фрэнка до одной из моих самых любимых футболок для Firewatch. И их тизерная страница действительно потрясающа, с интерактивной 3D-моделью консоли, которой вы можете управлять в браузере.

Читать далее

Верстка \ Статьи по верстке

Миллиард способов того, как использовать SVG

От автора: ранее мы рассмотрели, что такое SVG-изображения и почему они отлично подходят для использования в веб-приложениях / на сайтах. В этой статье мы рассмотрим различные способы того, как использовать SVG в браузерах. Данными методами мы располагаем в HTML, CSS и JavaScript. Это будет небыстро, так что возьмите немного содовой (или другой предпочтительный напиток) и поехали.

Читать далее

Верстка \ Статьи по верстке

Как стать современным верстальщиком и заработать на этом

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

Читать далее

Верстка \ Статьи по верстке

5 страхов веб-дизайнеров, связанных с CSS Grid

От автора: CSS Grid, наряду с многими другими функциями CSS, произвела революцию в мире веб-дизайна. К сожалению, отрасль в целом еще не подхватила это революционное решение, так как пользователи имеют много опасений по поводу CSS Grid. Причиной таких сомнений можно назвать неудовлетворительное состояние обучающих материалов по CSS Grid.

Читать далее

Верстка \ Статьи по верстке

Понятие пути критического рендеринга

От автора: после того как браузер получает HTML ответ от сервера, проходит еще множество этапов перед отрисовкой пикселей на экране. Последовательность действий, которую должен пройти браузер для первичной отрисовки страницы называется «путь критического рендеринга» или CRP.

Читать далее

Верстка \ Статьи по верстке

Битва css-in-js

От автора: мы на сайте HelloFresh постоянно боремся со стилями. Еще год назад стили на нашем сайте были плохими, запутанными, кода было слишком много, как и у множества других компаний. Мы захотели поправить эту ситуацию и нашли новенькую библиотеку css-in-js.js, очень крутая штука.

Читать далее

Верстка \ Статьи по верстке

Совет: на всякий случай именуйте линии CSS Grid

От автора: в любой CSS сетке у линий есть индексы, к которым можно обращаться для размещения элементов . Этим линиям можно назначить имена, что упростит работу и обслуживание сеточных макетов. Давайте поговорим об этом!

Читать далее

Верстка \ Статьи по верстке

Интерактивная валидация HTML форм

От автора: создание форм в HTML всегда было сложным занятием. Сперва необходимо написать разметку, затем проверить значения полей перед отправкой и, наконец, нужно уведомить пользователя о проблемах, если таковые возникли. К нашему общему счастью в HTML5 были представлены новые возможности, упрощающие валидацию форм. В частности, поля формы теперь поддерживают условия, что позволяет браузеру проводить валидацию контента форм на стороне клиента без задействования JS.

Читать далее

Верстка \ Статьи по верстке

Замена текстовым плейсхолдерам

От автора: текстовые плейсхолдеры можно добавить почти к любому полю HTML формы в качестве атрибута, и дизайнеры и разработчики, не понимая сути, не стесняются это делать. Искушение добавить текстовые подсказки в сложные формы очень велико, или, например, убрать лейблы полей, чтобы улучшить внешний вид. Однако, перекладывая задачи лейблов на текстовые плейсхолдеры, мы сталкиваемся с множеством проблем юзабилити. Эта статья иллюстрирует распространенные плохие практики и замены для них.

Читать далее