Релизнулся Chrome 149! Наконец-то появилась возможность стилизовать gaps в CSS Grid и Flexbox.

Внешний вид календаря теперь тоже можно легко реализовать с помощью CSS Grid

➡️ @FrontendPortal

Cloudflare купила компанию, стоящую за Vite!

Компанию создателя Vue — Эвана Ю.

Теперь Cloudflare также владеет проектами Vitest, Rolldown, Oxc... Ранее у них уже был Astro. Теперь ещё и Vite.

Это даёт Cloudflare контроль над всем стеком. У них теперь есть все примитивы: frontend/backend-фреймворк, линтинг, тестирование, форматирование, JS runtime, база данных, KV, инференс, blob storage, access и так далее.

Умный ход. Аккуратно упакованный набор, который можно скормить LLM, чтобы она собрала сайт ✌️

➡️ @FrontendPortal

Метод для возврата элемента массива по указанному индексу

Он действует почти как скобочная запись array[index], за исключением того, что индекс может быть отрицательным

➡️ @FrontendPortal | #js

Принес небольшую коллекцию красивых переходов 😳

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

https://transitions.dev/

➡️ @FrontendPortal

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

https://colorflow.ls.graphics/

➡️ @FrontendPortal

React Compiler на Rust почти готов

Команда React практически завершила перенос React Compiler с TypeScript на Rust. Новая версия уже используется внутри компании и показывает очень уверенные результаты:

• 99,9% паритета с текущей реализацией на TypeScript
• около 25% прироста производительности
• более глубокая интеграция с экосистемой Rust-инструментов, включая SWC и OXC

Отдельно интересно, что часть портирования проходов компилятора выполнялась с помощью вайб-кодинга

Сейчас команда занимается финальной полировкой, тестированием и сбором обратной связи. По словам разработчиков, уровень уверенности в новой реализации уже достаточно высок, и PR планируют смержить в ближайшие недели

Параллельно экосистема уже готовится к переходу на новую версию. Для React Compiler на Rust появились черновые интеграционные PR для:

• Oxc
• SWC
• Bun

➡️ @FrontendPortal

Есть повод отпраздновать!

facebook/react → react/react

➡️ @FrontendPortal

Откопал интересную штуку для UI

Набор кастомизируемых pixel-grid спиннеров в стиле retro flip-dot дисплеев: можно выбрать готовый вариант, собрать свой в визуальном редакторе и экспортировать в SVG, React, Flutter и другие форматы

https://flicker.laurie.fyi/gallery

➡️ @FrontendPortal

Совет по JS: возможно, вы не знали про способ автоматически экранировать обратные слэши в строке

Используйте String.raw, она возвращает строку как есть, без обработки escape-последовательностей вроде \t, \n и т.д.
Она трактует \ и t как отдельные символы и автоматически экранирует обратный слэш в выходной строке.

➡️ @FrontendPortal | #tip by Shripal Soni

Что, если «Следствие вели…» снимали бы в офисном сеттинге в IT-компании? Мы могли бы об этом только фантазировать, если бы… Авито взял и не снял свой выпуск с Леонидом Каневским 🔥

Мы ещё не успели посмотреть: планируем оставить на вечер. Говорят, легенда тру-крайма там расследует внезапный рост ошибок 404 на endpoint аватарок (реальный кейс команды AvitoTech, кстати!).

Смотрим, чтобы услышать будущие легендарные цитаты... ну и чтобы в вашей команде такого не случилось!

📱 YouTube
📱 Rutube
📱 VK Видео

Отличная JS-либа для слайдеров и каруселей, которая избавляет от необходимости собирать всё с нуля.

Хорошая, лёгкая альтернатива Swiper 👍

https://splidejs.com/

➡️ @FrontendPortal | #resourse

Очередная новинка в CSS на подходе — display: grid-lanes

Это решение для того самого Pinterest-лайаута: карточки разной высоты, которые плотно заполняют пространство без пустых дыр.

До сих пор подобные сетки обычно собирали через JavaScript и библиотеки вроде Masonry.js. Это добавляло лишние вычисления в рантайме, а при изменении размеров окна такие раскладки нередко начинали тормозить или ломаться.

Ребята из Apple подготовили отдельный сайт с примерами и подробным гайдом по grid-lanes:
https://gridlanes.webkit.org

Пока фича доступна только в Safari, но позже должна появиться и в других браузерах.

➡️ @FrontendPortal

Свойство scroll-padding

Позволяет остановить прокрутку на определённом расстоянии от края контейнера

Можно воспользоваться сокращённым свойством scroll-padding или альтернативными ему более конкретными свойствами scroll-padding-*

➡️ @FrontendPortal | #CSS