Заметки верстальщика

Плиточная раскладка, вероятно, самый распространённый вид раскладки в фронтэнде. Особенно, для материалов. И свойства minmax и auto-fit, которые пришли вместе с CSS-гридами, сделали такую раскладку, как никогда, лёгкой для создания. Позвольте показать новый лёгкий способ создания адаптивной плиточной раскладкой на CSS-грид.

Читать далее Плиточная раскладка на гридах с помощью auto-fit и minmax

Одно из преимуществ одностраничных приложений (SPA) — это очень быстрый переход между страниц. К несчастью, контент в наших компонентах иногда бывает доступен только после того, как мы перешли на какую-то часть нашего приложения. Мы можем улучшить восприятие пользователем производительности приложения, разделив компонент на две части: на контейнер (который отображает скелет пока контента нет) и сам контент. Если мы отложим рендеринг контента до тех пор, пока он полностью не загрузится и отобразим скелет компонента, то мы уменьшим воспринимаемое время ожидания. Читать далее Создание скелета компонента в React

Я много рассказывал о теге <use> в SVG и использовал его для вывода иконок. Прелесть в том, что с помощью <use> можно ссылаться на часть SVG и выводить только её. Это позволяет использовать схему «много изображений за один запрос, потому что это суперэффективно», которую раньше решали с помощью CSS-спрайтов и иконочных шрифтов. Читать далее Как работает SVG ID?

Элемент <path> в SVG является основным способом рисования. С помощью него можно нарисовать всё что угодно! Я слышал, что на самом деле все другие элементы для рисования, в конечном счёте, используют path. Он имеет один атрибут для описания того, что рисуется: аттрибут <d>. Его значение — это мини-синтаксис и он выглядит довольно непонятно: это длинная строка с кучей цифр и букв. Я не эксперт, но решил поковыряться в нём. Читать далее Синтаксис SVG «path»: иллюстрированное руководство

Настройка сборщика для сборки Pug/Stylus, создания SVG-спрайтов и ещё чего-то там. Если интересно — читай.
Читать далее Gulp: инструкция для начинающих