#фишка дня

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

Открываете вы такие ваши девтулзы в 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/

Коллекции плохих практик и ошибок применения HTML и CSS с рекомендациями по исправлению, собранные на основе реальных сайтов:

HTMHell → https://www.htmhell.dev
CSS Hell → https://csshell.dev

Генеративный дизайн для шеринга в соцсетях: руководство по разработке конструктора картинок с генеративным фоном на SVG → https://georgefrancis.dev/writing/generative-svg-social-images/

Learn CSS, новый «вечнозелёный» курс по CSS от Google Developers: 24 модуля с теорией, интерактивными демками и проверочными заданиями → https://web.dev/learn/css

#фишка дня

А знали ли вы, что в Chrome DevTools есть возможность эмулировать различные доступные на устройствах сенсоры?

Ну из очевидного: гироскоп, компас, освещённость.

Джей, деврел в Google, замапил сенсоры на 3D-кубик и запилил для нас демо на побаловаться: https://codepen.io/jh3y/pen/KKQZQNj

Открывайте пример, врубайте DevTools, вызывайте сочетанием Ctrl(Cmd)-Shift-P панель команд и ищите там Sensors. Как найдёте — сообщите 😉

#codepen #devtools #sensors

Организуем библиотеку иконок в проекте с автоматической выгрузкой из Figma: Михаил Кононенко из Joom делится опытом автоматизации и упрощения работы с иконками → https://habr.com/ru/company/joom/blog/708286/

Доступность в дизайне: Роман Шамин рассказывает о практических приёмах, требующих 20% усилий дизайнера и обеспечивающих 80% доступности экранных интерфейсов → https://teletype.in/@romanshamin/a11y-for-designers

Почему не стоит использовать пиксели для задания размера шрифта в CSS: Джош Коллинсворт объясняет, как различные единицы измерения влияют на UX → https://joshcollinsworth.com/blog/never-use-px-for-font-size

Геометрия DOM: обширный обзор существующих методов и свойств для работы с размерами и отступами DOM-элементов и документа в JS → https://www.smashingmagazine.com/2022/11/document-object-model-geometry-guide/

Как нормально обрезать текст: Илья Бирман рассказывает о простых правилах, которые позволяют избежать казусов и улучшить UX → https://ilyabirman.ru/meanwhile/all/how-to-cut-text/

Новый синтаксис для диапазонов значений в медиавыражениях: обзор нововведения в спецификации медиавыражений, существенно упрощающего чтение стилей → https://css-tricks.com/the-new-css-media-query-range-syntax/

Как команда Wix улучшила тысячи плохо сформулированных сообщений об ошибках и как они изменили процессы, чтобы не допустить появления плохих текстов ошибок в будущем → https://scribe.rip/when-life-gives-you-lemons-write-better-error-messages-46c5223e1a2f

Критический CSS? Не так быстро! Гарри Робертс объясняет, когда стоит заморачиваться с выделением критического CSS (очень редко!) и какие сложности при этом вас ждут → https://csswizardry.com/2022/09/critical-css-not-so-fast/

System font stack, шпаргалка с кодом для использования системных шрифтов в проекте → https://systemfontstack.com

Чем плохи события готовности DOM вроде DOMContentLoaded и что использовать вместо них: объяснение и обзор альтернатив от Джейка Арчибальда и Кэсси Эванс → https://youtu.be/_iq1fPjeqMQ

Улучшаем прокрутку благодаря современному CSS: обширный обзор современных способов кастомизации как внешнего вида, так и поведения прокрутки в браузерах → https://blog.mayank.co/better-scrolling-through-modern-css

Для затравки: в современных браузерах предовтратить сдвиг страницы при блокировке скролла (например, при открытии диалога) можно одним CSS-свойством scrollbar-gutter ⚡️