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

Библиотека Anime.js для анимации объектов в HTML и в SVG с красивой документацией. Поддерживаются простые движения, параметрические, различные циклы и привязка к таймлайну.

Пример результата в gif-анимации.

Живой код этого примера.

Новостной сайт «Медуза» рассказала в своём блоге какой стала система управления редакции к 2017 году. Иными словами, как выглядит CMS у интернет-СМИ.

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

Подобный рассказ о первой версии системы был опубликован в 2015 году.

Комбинация кода для всплывающих блоков при прокрутке. Блоки, попавшие в видимость при загрузке, видны сразу, без анимации. Но можно специально попросить их появиться классом .slide-up-start.

Для наглядности, горизонтальные блоки повёрнуты контейнером и обратно повёрнуты содержимым. Ещё тут интересное использование :nth-of-type, чтобы в несколько строк разнообразить задержку в анимации и раскраску контейнеров.

Из чего состоит код веб-страницы, которую загружает пользователь, сегодня?

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

Легко заметить, что основное содержимое кода это навигация, интеграция с соцсетями и счётчики.