Организуем библиотеку иконок в проекте с автоматической выгрузкой из 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 ⚡️

Марсианка Нина Торгунакова перевела статью Андрея Ситника про новые спецификации CSS и цветовое пространство OKLCH. Читайте на портале “Вебстандарты”!

https://web-standards.ru/articles/oklch-in-css-why-quit-rgb-hsl/

Анимированная карточка товара

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

💻Забрать код

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

Пагинация страниц

Оставляем для вас ниже код, который поможет создать пагинацию страниц на HTML, CSS и JavaScript.

💻Забрать код

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

Адаптивная форма входа и регистрации

Оставляем для вас ниже видео и код, с помощью которых вы можете создать адаптивную форму входа и регистрации.

👀Смотреть видео
💻Забрать код

#html #css #javascript #практика #адаптивнаявёрстка

Анимированный фон

Оставляем для вас ниже код, который поможет создать необычный анимированный фон на HTML, CSS и JavaScript.

💻Забрать код

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

Градиентная анимация загрузки

Оставляем для вас ниже код, который поможет создать круговую анимацию загрузки с градиентом на HTML и CSS.

💻Забрать код

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

Как сократить время начальной загрузки веб-приложения

При посещении сайта на удовлетворенность пользователя влияет время ожидания до первого взаимодействия с контентом.
Поэтому делимся статьей, в которой рассказывают о способах оптимизации времени начальной загрузки веб-приложений.

👉Читать статью

#полезное

Анимация загрузки

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

💻Забрать код

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

Кнопка с эффектом при наведении

Делимся с вами ниже кодом для создания кнопки с эффектом молнии при наведении на HTML и CSS.

💻Забрать код

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

Анимированные иконки социальных сетей

Делимся ниже готовым кодом иконок социальных сетей с эффектом при наведении на HTML и CSS.

💻Забрать код

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