Создание скелета компонента в React

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

Анимированная SVG-маска своими руками

Как сделать простую анимированную SVG-фигуру и использовать её как маску? Читать далее Анимированная SVG-маска своими руками

Как работает SVG ID?

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

Синтаксис SVG «path»: иллюстрированное руководство

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

Gulp: инструкция для начинающих

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

Создание SVG-спрайта вручную

Как создать SVG-спрайт вручную, без сборщиков, онлайн-сервисов и геморроя. Ах, да! Без регистрации и СМС. Читать далее Создание SVG-спрайта вручную

Выбор типа клавиатуры для заполнения input-ов на мобильных устройствах

Почти на каждом сайте бывают какие-либо формы. И периодически их нужно бывает заполнять. Лично я ненавижу это делать, особенно с телефона. Недавно узнал, что пользователю можно чуть облегчить жизнь, подставив нужную клавиатуру. Читать далее Выбор типа клавиатуры для заполнения input-ов на мобильных устройствах