Встроенная функция генерации UUID v4

Ранее для генерации подобных айдишников писал собственную функцию или брал библиотечные решения, но оказывается можно было делать проще:

window.crypto.randomUUID();

⚙️ Поддержка браузерами широкая

Управляем внешним видом кнопки Enter

Глобальный атрибут enterkeyhint может быть применён к любому редактируемому элементу (<input>, <textarea>, contententeditable)

Он меняет внешний вид кнопки Enter на мобильных устройствах:

<input enterkeyhint="search">

Возможные значения: enter, done, go, next, previous, search и send

Если его не указать, то браузер самостоятельно попытается угадать значение на основе других атрибутов

При этом, события, генерируемые нажатием на кнопку, не меняются, меняется только её внешний вид

⚙️ Поддержка браузерами полная

100 способов отцентрировать элемент в CSS

Если вас в следующий раз спросят на собесе как отцентрировать элемент при помощи CSS, можете скинуть им это:

https://css-generators.com/center/

Общедоступные бэкенд апишки

Если вы пишите pet проект и не хотите заморачиваться с бекендом, то на этой странице github собрано огромное количество готовых API под любой вкус и цвет.

Оптимизируем анимацию при помощи CSS 🚀

Рассмотрим малоизвестное свойство will-change

Оно позволяет заранее предупредить браузер о том, что элемент будет каким-либо образом изменяться или перемещаться и его нужно заранее оптимизировать

Возможные значения:
auto - значение по-умолчанию, ничего не меняет
scroll-position - предупреждает браузер о том, что элемент будет перемещаться при скролле (например, у него position: fixed)
contents - предупреждает браузер об изменениях внутри элемента (например, удаление или добавление дочерних элементов)
изменяющееся свойство - transform, opacity или другое свойство, которое будет впоследствии изменено

Важные правила:
1) Не стоит добавлять will-change всем элементам подряд, это вызовет большой расход ресурсов и ещё больше усугубит ситуацию
2) По возможности will-change нужно удалять сразу после использования при помощи JS

Браузер для оптимизации опционально может вынести помеченный элемент на отдельный композитный слой (на видео видно)

⚙️ Поддержка браузерами широкая

Как попасть во Frontend в 2025-2026 году?

В последнее время пишут очень много вопросов по этой теме. Причём даже разработчики с 3-5 годами опыта. Решил поделиться своим мнением на этом счёт.

🔗 Ссылка на YouTube
🔗 Ссылка на RuTube
🔗 Ссылка на VK Видео

Топ донатов месяца 😉

Итак, месяц подошёл к концу. Хотелось бы поблагодарить @maunsh за поддержку звёздами.

Это сильно мотивирует продолжать дальше, а также повышать качество контента!

Как я понял, эти звёзды можно позже будет направить на рекламу внутри самого Telegram, обязательно буду этим пользоваться.

Также не могу не упомянуть @EmberIsReal и @waffuru_moon, они поддержали канал в сентябре и июне, соответственно.

Пост буду и дальше кидать раз в месяц, если будут звёздочки.

Прощаемся с display: masonry

Если вы не в курсе, то уже много лет рабочая группа пытается добавить в CSS такую же крутую сетку, как и у pinterest (они её делают с помощью JS)

Фичу никак не могут выкатить из-за разногласий в сообществе

В последнее время они начали больше прислушиваться к обычным разработчикам и устраивать различные опросы перед внедрением

К примеру, один из споров касательно синтаксиса:
https://github.com/w3c/csswg-drafts/issues/11243

Недавно провели голосование и, перебрав кучу вариантов, утвердили новое название — display: grid-lanes:
https://github.com/w3c/csswg-drafts/issues/12022

Видимо тема масонства не понравилась большинству 😄

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

Буду держать в курсе изменений!

Срочно обновите пакеты React

29 ноября была найдена критическая уязвимость в пакетах:
1) react-server-dom-webpack
2) react-server-dom-parcel
3) react-server-dom-turbopack

Затронуты версии:
1) 19.0
2) 19.1.0
3) 19.1.1
4) 19.2.0

Чтобы проверить, есть ли они у вас в проекте, можно прогнать в консоли следующую команду:

npm ls react-server-dom-webpack react-server-dom-parcel react-server-dom-turbopack

В официальном сообщении можно найти инструкции для обновления Next.js, Expo и прочих библиотек построенных на базе React.

Anthropic купила Bun 🔥

Отличные новости!

Bun и до покупки был очень даже перспективным и интересным инструментом, но теперь с поддержкой крупной компании он имеет все шансы стать новым стандартом во Frontend

Anthropic будет использовать Bun в качестве инфраструктуры для Claude Code, Claude Agent SDK и будущих AI-продуктов

Проект продолжит развиваться как Open Source продукт под лицензией MIT

Будем и дальше следить за его развитием, но теперь у нас появился дополнительный довод о том, почему его стоит использовать

*Напомню, что Anthropic — это компания, основанная бывшими сотрудниками OpenAI, которые не были согласны с решениями руководства

🔗 Ссылка на оригинальный пост

Работать с анимациями стало проще! ⚡️

Недавно в браузеры завезли свойство animation-composition

Оно управляет тем, как будут накладываться числовые значения из @keyframes на уже заданные в элементе

🔸Значения:
replace (по-умолчанию) — значение из @keyframes перезаписывает оригинальное значение

add или accumulate — прибавляют к имеющемуся значению значение из @keyframes

add и accumulate работают одинаково при работе с обычными свойствами (height), но в них есть существенная разница при работе с CSS функциями (translateX())

🔸Рассмотрим пример:
У нас есть элемент с классом box и у него по-умолчанию установлено:

transform: translateX(25px) rotate(30deg)

в @keyframes ему применили:

transform: translateX(10px)

🔸Результат:
replace — перезапись

transform: translate(10px)


add — добавление функции в конец списка

transform: translateX(25px) rotate(30deg) translate(10px)


accumulate — прибавление значения к имеющимся функциям

transform: translateX(35px) rotate(30deg)

⚙️ Поддержка браузерами широкая

Новые свойства для управления порядком в a11y дереве

Представьте себе, что вы развернули список элементов при помощи flex-direction: row-reverse, и теперь человек с ограниченными возможностями, пользующийся скринридером и нажимающий на Tab, чтобы перемещаться по сайту, будет читать элементы не слева направо, а справа налево. Есть уйма способов это исправить, но все они не очень удобные

В 137 версии Chrome это исправили, добавив 2 новых свойства

📌 reading-flow - меняет последовательность элементов a11y дерева

Значения:
normal (по-умолчанию) - порядок основан на дереве DOM
flex-visual - порядок flex элементов, основанный на writing-mode (по-умолчанию слева направо, сверху вниз)
flex-flow - порядок, основанный на flex-direction
grid-columns - поколоночный grid порядок
grid-rows - построчный grid порядок
grid-order - порядок, основанный на order в grid
source-order - порядок, основанный на reading-order

📌 reading-order - задаёт порядковый номер элементам a11y дерева

⚙️ Поддержка браузерами пока небольшая

Side-relative values

Не все знают, но позиционировать фоновое изображение в CSS можно относительно любой из сторон элемента

К примеру, следующий код сместит картинку на 10% от левого края и на 20% от верхнего:

background-position: 10% 20%;

Но что, если мы хотим сделать отступ от правого и нижнего, соответственно?

Достаточно указать нужные стороны и всё будет работать:

background-position: right 10% bottom 20%;

Также существуют такие свойства, как background-position-x и background-position-y. Они позволяют делать то же самое, но для отдельных осей.

Side-relative синтаксис в этих свойствах долгое время поддерживался только в Safari и Firefox, но совсем недавно и Chrome решил себе добавить эту фичу

⚙️Поддержка браузерами side-relative: background-position, background-position-x, background-position-y

Новогодний стрим 🎄

Год подходит к концу, а значит время подводить итоги!

Планирую 28 декабря в 17:00 МСК выйти в эфир, пообщаться со всеми

Посмотрим несколько видео, поотвечаю на ваши вопросы

Если есть какие-то конкретные видео или предложения по стриму — welcome, жду в комментариях!

upd. запись https://youtu.be/_303mufIAQc

Переходи на тёмную сторону 😈

Недавно в браузеры завезли новую функцию light-dark(), которая позволяет указать 2 цвета — светлый и тёмный

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

Для того, чтобы всё работало, нужно также добавить
color-scheme: light dark

Его чаще всего вешают на :root элемент, чтобы светлая и тёмная темы могли работать во всём документе

:root {
  color-scheme: light dark;
}

.button {
  background: light-dark(#ffffff, #1aff7a);
}

⚙️Поддержка браузерами широкая

Развиваем комьюнити! 🚀

В последнее время стало падать много сообщений в личку, и мне кажется, что настал момент для создания отдельного чата по фронту

Будем вместе решать проблемы, отвечать на вопросы, делиться полезными ссылками и обсуждать нововведения!

Подпишись, если не сложно @fe_notes_chat

Новая easing функция

Ранее, вы, скорее всего, сталкивались с такими функциями как cubic-bezier() или steps(). Относительно недавно их ряды пополнила linear()

Она не привносит чего-то нового, но позволяет работать с линейным easing'ом гораздо легче

easing, если говорить простыми словами, это ускорение или замедление анимации на отдельных этапах её выполнения

Например, мы хотим, чтобы анимация выполнилась на 70%, на 1 секунде из 5, а затем замедлилась, и оставшиеся 30% доигрывала 4 секунды

animation: move 5s linear(0 0%, 0.7 20%, 1 100%) forwards;

В коде выше числа (от 0 до 1) означают прогресс, а проценты (от 0% до 100%) - время. То есть, на 0% (0 секунде) анимация будет выполнена на 0 (на 0%), на 20% (1 секунде) будет выполнена на 0.7 (на 70%), и, наконец, на 100% (5 секунде) будет выполнена на 1 (на 100%).

Если опустить проценты, то они будут подставлены автоматически равномерно

К примеру, следующий код равнозначен:

linear(0, 0.7, 1);

linear(0 0%, 0.7 50%, 1 100%);

⚙️ Поддержка браузерами широкая

Masonry сетка всё ближе 🔥

Safari на днях выпустил Technology Preview 234 по данной фиче, а это значит, что технология уже готова, но пока ещё какое-то время будет тестироваться на наличие возможных проблем

Chrome, начиная со 140 версии, также тестирует эту фичу

Firefox с 2020 года ничего нового не публиковал, но за последнее время можно проследить подвижки и в их коде

Похоже, что Baseline уже близко!

Визуализатор серверных компонентов 🔍

После всех найденных уязвимостей в React, много кто начал погружаться в то, как RSC работает под капотом

19 декабря Ден Абрамов написал статью, в которой обозревает инструмент для визуализации работы серверных компонентов

Он позволяет пошагово увидеть все генерируемые данные (progressive JSON), которые используются внутри этого механизма

Инструмент пока что сыроват (есть 4 разные версии React на выбор и переключатель режима разработки), но для того, чтобы разобраться в сути уязвимости, пойдёт

🔗 Ссылка на github проекта

Cursor выкупил Graphitе

19 декабря на официальном сайте Cursor вышло сообщение о том, что они приобрели Graphite (ИИ-помощник, который помогает в ревью и отладке кода)

Инструментом уже пользуются такие гиганты как Shopify, Figma, X (Twitter), Vercel, Duolingo и многие другие

У стартапа, основанного в 2020 году, есть большая экспертиза и продвинутый ИИ, которые жизненно необходимы Cursor в конкурентной борьбе с другими компаниями

Обещают сделать глубокую интеграцию с Graphite, но продукт и дальше будет развиваться как отдельный

Похоже, в ближайшее время мы увидим переход Cursor от генератора кода в полноценное end-to-end решение