Быстрый совет по CSS: при выравнивании иконок с текстом можно задать height: 1lh. Это значение равно line-height элемента, поэтому иконки выравниваются идеально.

Джош Комо снова радует – на этот раз интерактивным туториалом про скролл-зависимые анимации в современном вебе. Это когда элементы двигаются, появляются или трансформируются прямо в такт прокрутке страницы, создавая более живой и управляемый интерфейс.

Поддержка около 85%, в Firefox пока за флагом

https://www.joshwcomeau.com/animation/scroll-driven-animations/

Можно закрепить скролл чата внизу через CSS overflow-anchor, без использования MutationObserver или функций scrollTo()

<div id="scroller">
  ...
  ...
  <div id="anchor"></div>
</div>

#scroller * { overflow-anchor: none; }
#anchor    { overflow-anchor: auto; height: 1px; }

Браузеры по умолчанию используют scroll anchoring, чтобы предотвращать сдвиги лейаута

Если отключить overflow-anchor у дочерних элементов и заново включить его для 1px anchor-элемента в конце списка, скролл будет автоматически прилипать к новому контенту и следовать вниз сам по себе.

Новая статья: прокачиваем fluid sizing с помощью round()

Автор написал о том, как CSS-функция round() улучшает значения, получаемые через clamp(), при работе с размерами, типографикой и отступами. Почему это важно и как это использовать

http://ishadeed.com/article/css-round

Познакомьтесь с Datatype – шрифтом, который превращает текст в графики. Доступен в Google Fonts и в Workspace.

Простой синтаксис вроде {b:10,25,7,95} автоматически преобразуется в спарклайны, круговые диаграммы и бар-чарты, которые отлично смотрятся в ваших документах, презентациях и таблицах

Datatype на Google Fonts

Blossom — это опенсорс система каруселей с огромным количеством красивых паттернов и готовых примеров. Также в комплекте идут навыки для AI-агентов, а ещё есть поддержка React, Vue, Svelte и Web Components.

github.com/jespervos/blossom-carousel

Небольшая коллекция красивых переходов

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

https://transitions.dev/

Гайд по тому, как прокачать навык работы с дейтпикерами в JS

Ты найдёшь примеры, понятные объяснения и отличный визуальный формат, который помогает разобраться во всех тонкостях создания дейтпикеров на чистом JavaScript.

Читайте здесь

Атрибут command позволяет вызывать методы DOM-элементов.

Работает в Chrome, Edge, Firefox и скоро появится в Safari.

Вот так можно открывать/закрывать модалки всего двумя строками HTML.