создание сайта

Pug — подключение файлов, блоки, миксины (includes, bloks, mixins)

Более простой в редактировании и понятный синтаксис упрощает создание и чтение и разметки, но кроме этого Pug, избавляет нас от дублирования. В Pug можно содержимое одного файла добавлять в другой, создавать шаблоны и использовать миксины. Благодаря этому мы можем выносить в отдельные файлы часто используемые блоки (футер, меню, хедер и т. д.). Генерировать схожие по разметки но разные по содержанию блоки, без повторения всей разметки блока.

Pug — синтаксис, теги, свойства, doctype

Pug, как заявлено, делает разметку более простой и читаемой. Достигается это за счёт упрощённого синтаксиса. В Pug нет закрывающих тегов, а сами теги пишутся без угловых скобок. Вложенность определяется отступами. По умолчанию текст в начале строки (или после пробела) представляет собой HTML-тег. Теги с отступом вкладываются, создавая древовидную структуру HTML.

Скрыть элемент от скринридера

Бывают ситуации когда элементы не несут никакой смысловой нагрузки и для скринридеров абсолютно не нужны. Как убрать элемент из дерева доступности? Если не брать в расчёт display:hide и атрибут hiden, которые выпиливают элементы из DOM, есть два варианта. Оба связаны с ARIA.

Как правильно прятать(ся)

Началось всё с того, что валидатор разметки, не то чтобы сильно был против, но всё же настойчиво намекал, что у каждого раздела должен быть заголовок. Ему же не объяснишь что дизайн такой. Поискав возможные варианты решения пришёл к выводу — валидатор был прав. Заголовки нужны независимо от дизайна. Даже если их никто не увидит. Вернее не увидит кому не надо. Обо всём по порядку.

Шрифтовые иконки - достойная альтернатива растру

Ты знаеш что такое иконочный шрифт? Нет? Зря. Иконочный шрифт это как обычный шрифт, только вместо букв иконки. Это даёт ряд преимуществ перед обычными jpg/png картинками.

SVG путь <path>

<path> - самый универсальный элемент. С его помощью можно нарисовать любую простую фигуру svg. По своей универсальности он обходит <polyline> за счёт того что может рисовать кривые. Для определения пути нужен один атрибут d в котором указываются координаты точек и команды определяющие как рисовать.

Анимация SVG с помощью CSS и SMIL

SVG графику можно анимировать, УРА, с помощью известного и горячо любимого CSS. Плюс к этому есть возможности самого svg описанные в спецификации SMIL Animation. Не забываем что возможности анимации зависят от способа, которым встроен svg на страницу. Наиболее полная поддержка идёт если встраиваете код непосредственно в html страницу или используя тег <object>

Поля в Drupal8. Зачем нужны и как применять.

Каждый тип контента это определённый набор полей. Можно самим создавать новые типы контента с нужным набором полей или изменять существующие, но об этом в другой раз, а пока вопрос: Зачем нужны поля? Заголовок мы можем набрать вместе с текстом выбрав шрифт покрупнее. Картинки также можем вставлять в основное содержимое, для этого есть специальная кнопка в редакторе. На первый взгляд вся эта канитель с полями кажется пустой тратой времени. Не торопитесь с выводами.

SVG формат — как растр только лучше.

SVG это графический формат как jpg. Но только этот Graphic ещё и Scalabel, да к тому же Vector. SVG файл - это не картинка в том виде, как мы к ним привыкли. Он содержит XML разметку, которая определяет все линии, цвета, слои и прочее. Такой файл мы можем менять вручную в текстовом редакторе или с помощью JavaScript и CSS кода.