Что не так с плавающими подписями у полей ввода, как в Material Design: обзором проблем UX от Адама Сильвера и простая альтернатива → https://www.smashingmagazine.com/2021/02/material-design-text-fields/

От библиотеки компонентов к дизайн-системе: фронтендеры ISPsystem поделились опытом реализации и развития UI-кита на веб-компонентах и Angular для использования в разных проектах компании → https://habr.com/p/507826/

CSSSR запустили сериал «История фронтенда». Первая серия «Браузер, который умел всё» о людях и инструментах, построивших веб, к которому мы привыкли → https://youtu.be/7nrDctGYOIk

Погружаемся в псевдоэлементы ::before и ::after: от способов применения до неочевидных нюансов → https://codersblock.com/blog/diving-into-the-before-and-after-pseudo-elements/

Погружаемся в тени: теория и практика применения теней в веб-дизайне → https://css-tricks.com/getting-deep-into-shadows/

В Google Fonts появилось 2 000+ бесплатных иконок Material Design в пяти стилях и различных форматах для веба, iOS и Android → https://fonts.google.com/icons

Исследуем CSS-директиву property: обзор новой директивы, позволяющей сообщить браузеру, как анимировать CSS-переменные → https://css-tricks.com/exploring-property-and-its-animating-powers/

Plaiceholder, инструмент для генерации размытых изображений-заглушек на время загрузки оригинала: поддерживает CSS, SVG, base64 и другие форматы → https://plaiceholder.co

Дорожная карта начинающего фронтенд-разработчика: что и в каком порядке изучать + ссылки на полезные материалы → https://frontendmasters.com/guides/learning-roadmap/

CSS Container Queries, или адаптация по-новому: контейнер вместо вьюпорта. Вадим Макеев на практике пробует черновую спецификацию выражений от контейнера, реализованную в Chrome Canary → https://youtu.be/bP3ceQEXMhU

Пишем стили с заделом на будущее: Стефани Эклз на примере списка комментариев демонстрирует CSS-приёмы, позволяющие адаптировать вёрстку к любым экранам и содержимому → https://moderncss.dev/developing-for-imperfect-future-proofing-css-styles/

Эффективные заголовки документов: как сделать <title> максимально полезным и как улучшить UX, обновляя его динамически → https://tomekdev.com/posts/effective-titles-and-more

Сравнение производительности обычного CSS и CSS-in-JS с неутешительными выводами для любителей styled-components и других CSS-in-JS библиотек с рантаймом → https://pustelto.com/blog/css-vs-css-in-js-perf

#статья дня

Все любят хорошие статьи по SVG.

От базового понимания координат и viewBox, через transform к clipPath и его анимации с помощью GSAP. Вот так вот просто.

Каждый шаг стильно иллюстрирован и ёмко разжёван: https://www.cassie.codes/posts/swipey-image-grids/

#svg #viewbox #clippath #gsap

#статья дня

Немного восьмибитности не желаете?

Я не так давно выкладывал целый сайт в стиле NES, а тут на глаза попалась статья о том, как сделать скруглённые уголки на блоках немного менее… кхрм, скруглёнными.

В стиле восьмибитных приставок: https://lukeb.co.uk/blog/2022/01/17/pixelated-rounded-corners-with-css-clip-path/

На самом деле в статье очень много информации о том, как использовать clip-path, рекомендую.

Ну и чтобы совсем куце не было, давайте ещё восьмибитных прелоадеров на чистом CSS: https://codepen.io/t_afif/full/PopjYgx

#css #clippath #8bit #preloader

#фишка дня

Короче, рассказываю.

Открываете вы такие ваши девтулзы в Chrome, нажимаете там Cmd-Shift-P (Ctrl-Shift-P) и видите такие панель команд. Ну типа как в Sublime Text, VS Code и прочих ровных редакторах.

И вот там, например, можно сделать скриншот всей страницы, вместе со скроллом, да-да! Просто ищете название нужной вам команды.

А чтобы не теряться и вообще побольше узнать о возможностях девтулзов Chrome, идите сюда: https://www.canidev.tools/capture-full-page-screenshot/chrome

Там много чего такого есть, разбито по категориям. Видео, скриншоты, ссылки на подробности.

#devtools #chrome

#ссылка дня

И вдогонку пусть будет ещё один проект с мозаиками, на сей раз на чистом CSS. Код каждой можно сразу скопировать.

https://css-pattern.com/

P. S. То ли в пропорциях дело, то ли лейбл наверху бесит, но реализация scroll-snap на сайте почему-то раздражает.

#css #pattern

#инструмент дня

Даже два. И оба для работы с SVG.

Одной из сильно раздражающих проблем при работе с SVG является, как ни странно, сложность кропа. Ну, обрезки полей, whitespace.

Почему? Ну, потому что многие редакторы (Inksape тот же) делают просто изменение viewBox или ещё трансформами подгоняют кривые.

Работает ли это? Ну, в целом, да. Правда, приносит с собой неожиданности вроде замыленных границ, сложности с расчётом анимаций и внезапном отсутствии поддержки в различных других редакторах.

Гарантии, что любой SVG загрузится в любом редакторе и так в принципе нет. Стандарт слишком большой, мусора напихать можно слишком много.

Так вот, к чему это я. Точно, к обрезке.

Раз: https://svgcrop.com/
Два: http://editor.method.ac/

Первая утилита обрезает по viewBox. А вот второй редактор — в него можно загрузить SVG с применёнными трансформациями сдвига, выделить и выбрать в меню Object 👉 Reorient path, что перепишет кривые с учётом трансформаций.

Вспомню, как это делать в Inkscape — напишу 🙂

#svg #crop

Анимация загрузки в виде домино

Оставляем для вас ниже код для создания анимации загрузки в виде домино на HTML и CSS.

💻Забрать код

#html #css #практика

SVG Waves, генератор SVG-волн для красивого разделения секций страницы → https://www.svgwaves.io

Сериал «История фронтенда», второй выпуск: JavaScript как отражение новой эпохи. История языка JavaScript, его стандарта ECMAScript и выросшей вокруг него экосистемы в 2000-х годах → https://blog.csssr.com/ru/article/frontend-history-java-script-as-a-reflection-of-a-new-era/