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

мар
24
2020

Pug - интерполяция, фильтрация, текст

By Oleg
plug and filter
Как правильно подставлять в шаблон переменные и теги. Как управлять пробелами. Какой текст и куда можно подставлять. Как использовать различные языки программирования в шаблонах Pug.
мар
16
2020

Pug - комментарии, условия, итерации

By Oleg
Pug - case, each, while, if
Про миксины уже всё знаем. Здесь разбирали как определять, вызывать и прочее. Но что такое миксин? По сути это функция, а где функции там циклы, условия, итерации.
фев
14
2020

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

By Oleg
Pug - Includes, Extends & Blocks, Mixin
Более простой в редактировании и понятный синтаксис упрощает создание и чтение и разметки, но кроме этого Pug, избавляет нас от дублирования. В Pug можно содержимое одного файла добавлять в другой, создавать шаблоны и использовать миксины. Благодаря этому мы можем выносить в отдельные файлы часто используемые блоки (футер, меню, хедер и т. д.). Генерировать схожие по разметки но разные по содержанию блоки, без повторения всей разметки блока.
янв
29
2020

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

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

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

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

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

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

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

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

SVG путь <path>

By Oleg
svg path

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

фев
23
2017

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

By Oleg
SVG анимация основы

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

Подписаться на создание сайта