Новая неделя - новый паттерн

На этой неделе можно оценить, а лучше обсудить хлебные крошки: https://webpatterns.ru/patterns/breadcrumbs/

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

CLI

У моего любименького пет-проекта css-properties появилась CLI-версия, а значит он стал 5.0.0. Ну вот так я люблю версии

Теперь в терминале в любой момент времени можно ввести npx css-properties-list list -y 2025 и получить все CSS-свойства внедрённые в браузеры за 2025 год.
Можно также поискать какое-то CSS-свойство или значение: npx css-properties-list list -s text-wrap и посмотреть, когда они внедрились в браузеры.

Также к результатам всегда прикреплены ссылки на спецификации и MDN.

Если будут идеи по добавлению новых команд пишите =)

🦊 С днём знаний, фронтендеры!
Пусть ваш рюкзак сегодня будет набит не тетрадями, а свежими релизами и клёвыми демками. (Я — Фронти — уже выгрыз мелом «display: grid» на доске 😅)

Вот что в дайджесте #14:

🎲 CSS random() — случайности без JS, играем с задержками и цветами.
🌈 OKLCH — предсказуемые цвета и аккуратные палитры.
📊 Big O с картинками — алгоритмы наконец понятно.
🧱 Plate — собираем rich-text редактор как LEGO.
❄️ Lambda без холода — Porffor разгоняет старты функций.
🚀 Bun ускорил postMessage в 500×.
😱 Remix v3 без React — горячая тема недели.
✍️ Шрифты: как грузить правильно и быстро.
🟡 LiftKit — золотое сечение прямо в UI.
🔧 Пачка полезных либ: ImageJS 1.0, React-PDF 10.1, Headless Tree и ещё горсть апдейтов.

Лисья шутка дня: если учитель спрашивает, почему работа не сдана — скажите, что я использовал random() и домашка выпала в другую ветку релиза. 🧪🙈

Полный выпуск — https://frontend-weekly.ru/weekly-digest-14/. Всем отличного учебного (и релизного) сезона!

А почему не :root?

Доброй ночи. Не спишь? Тогда слушай...

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

Если раньше моя мысль была: «А почему :root?»,
то теперь — «А почему-то не :root?» 😅

📄 Делюсь статьёй — https://shabalin.online/blog/css/why-not-root/

🦊 Йо-хо-хо, фронтендеры! Это Фронти с дайджестом #15 — свежим как npm i после кэша 🤌

Вот что принёс в рюкзаке:

🧪 HTML & API
Beacon API — надёжно «прощаемся» при закрытии вкладки (метрики, логи) без блокировок.

🎨 CSS
- Anchor Positioning — тултипы и дропдауны без JS.
- 3D-текст слоями, «CSS Elevator» (мини-машина состояний), креативные картинки в лонгридах.
- Жидкая типографика с clamp(), спорим о судьбе light-dark().
- 10 реально полезных фич из свежего CSS.
- Пруф, что многое уже можно без JavaScript.

📦 JavaScript
- Почему браузеры душат таймеры.
- Intl.Segmenter для честной длины строк (эмодзи не сломают счётчик).
- XML читаемый без XSLT.
- Функциональные Web Components без оверхеда.
- Линт-практика: noFloatingPromises в Biome.

🅰️ Angular
Летнее обновление: курс на zone-less, новые анимации и удобный дебаг.

🧷 TypeScript
В TS 6.0 хотят включить --strict по умолчанию. Дискуссия горячая 🔥

⚛️ React
- RSC без фреймворка — пощупать механику «вчистую».
- react-window 2.0 — виртуализация списков быстрее и свежее.
- Redux Toolkit 2.9 — апгрейд RTK Query.
- Activity + Suspense: скрываем компонент, состояние остаётся.
- React on Rails 15 — ранняя гидратация, курс на RSC.
- Мнение: у Next.js «краевые случаи» на каждом шагу — хороший чек-лист.
- Expo: синхронный встроенный SQLite и когда выводить клиент-стейт из серверного.

🛠 Инструменты

Пакет обновлений: Rspack 1.5, react-json-view-lite, react-qrcode-logo 4.0, Reanimated 4.1, React Admin 5.11, React Stripe.js 4.0, BlockNote 0.37, Ink 6.2.3.

📊 Чтиво и видео
- Firefox ускорил локальный ИИ-рантайм (нативный C++ вместо WASM-слоя).
- Как восстановить удалённые файлы в VS Code.
- Chrome — 17 лет: история от V8 до site isolation.
- Стоит ли preload-ить шрифты?
- Как меняется поиск с ИИ по данным NN/g.

🧠 Лисья мысль недели: «Если тултип прыгает — пристегни его anchor-ом». А если таймеры душат — не душите пользователя спиннерами 😅

Полный выпуск — https://frontend-weekly.ru/weekly-digest-15/

🦊 Привет, это Фронти! Дайджест #16 подъехал — лёгкий, бодрый и с яркими фичами недели. Поехали 👇

🧪 HTML & API
- headingoffset в HTML — контейнер сам смещает уровни заголовков, иерархия не ломается.
- Reciprocate для Web Components — сигнальная реактивность и зеркалирование атрибутов ↔️ свойств (демка и репо внутри статьи).

🎨 CSS & дизайн
- Liquid Glass: эффект «яблочного» преломления на чистых CSS + SVG.
- Color Shifting: как плавно «переливать» цвета и не словить странные переходы.
- Interpolation 101: почему пространство цвета важно для градиентов и mix().
- Learn CSS от Google обновили — есть nesting, anchor positioning, container queries и др.
- Гайд по выравниванию (flex/grid/box) и чек-лист по тестированию на бюджетных смартфонах — ближе к реальности.

📦 JavaScript

- Andromeda (движок Nova на Rust): рантайм с упором на single-file, GPU-ускоренный Canvas и мост к Rust.
- «Безопасные» методы массивов: toSorted, toSpliced, toReversed — без мутаций и сюрпризов.
- Песочница по Intl.* (форматы дат/чисел) — быстро проверить опции.

⚛️ React
- Storybook 10 (beta) → только ESM. Если где-то живут CJS-конфиги — готовим миграцию.
- React Three Timeline — задаём поведение 3D сцен «историями» через async-генераторы.
- Нодовый тест-раннер + TS/React — старт без Jest/Vitest.

⚙️ Node.js
- Крупная supply-chain атака на npm: включайте 2FA, проверяйте changelog’и.
- Node HTTP-серверы в Cloudflare Workers — привычные API на edge без переписывания.
- Как ухаживать за package.json, и что происходит «под капотом» у bun install.

## 🧰 Инструменты

- Mediabunny — медиа без FFmpeg: превью, метаданные, процедурное видео.
- Splide — лёгкий доступный слайдер без зависимостей.
- Feedsmith 2.0 — парсинг/генерация RSS/Atom/JSON Feed.
- BlazeDiff — быстрый покадровый image-diff.
- Ещё: github-script 8.0, sqs-consumer 13, Peaks.js 4, Cosmic UI, React Bits и др.

🔄 Обновления

Deno 2.5, ESLint 9.35, Node 24.8 (Current), Electron 38, Expo Router v6, Fastify 5.6, MongoDB Node 6.19, Ink 6.3 и пачка мелких релизов.

🦊 Лисья шутка недели: «Цвета в CSS теперь такие плавные, что я перестал путать orange и fox — но IDE всё ещё подчёркивает хвост, видимо, по *lint*ам» 🧡

📝 Кстати, если в норе завалялась классная статья — можешь прислать её мне, и я добавлю её в следующий выпуск! Именно так в этот раз и сделал Сергей Артёмов 🦊📨 (да, теперь у нас дайджест с народным хвостом 🦴)

Полный выпуск - https://frontend-weekly.ru/weekly-digest-16/

🦊 Привет, это Фронти! Дайджест #17 подъехал — свежий, бодрый и с кучей полезных ссылок. Поехали 👇

⏰ Немного опоздали из‑за человеческого фактора: человек просто забыл закоммитить изменения. Бывает. Фронти погладил, всё ок 🧡

🧪 HTML & API
- Safari 26.0: новый <model> для 3D, мощные апдейты CSS и проще жизнь PWA на iOS/iPadOS при добавлении на домашний экран.
- Нужно обновить Safari без полной macOS? Есть лайфхак-гайд.

♿️ Доступность
- WCAG 3.3.8: как сделать логин без боли для когнитивных пользователей.
- Почему индикаторы фокуса важны и как их стилизовать.
- «Скринридеры не спасёт ИИ»: что реально улучшать уже сегодня.

🎨 CSS & дизайн
- corner-shape: углы по‑новому — декоративно и практично (следим за поддержкой).
- Anchor positioning: «следящий» элемент с привязкой к разным якорям.
- Subgrid без магии: когда он реально выручает.
- Breakpoint columns: 5 подходов и что проще поддерживать.
- Когда анимации не нужны, и почему SVG лучше GIF для анимаций.
- CSS zoom: старый недооценённый приём с реальной пользой.

📦 JavaScript
- Deno идёт в бой за «освобождение» торговой марки JavaScript от Oracle.
- WebAssembly 3.0 — официальный стандарт: сборка мусора, исключения, строки.
- Исследование npm: у кого самый «космический» номер версии?

⚛️ React
- Авария в Cloudflare из‑за неаккуратного useEffect: вспоминаем идемпотентность и зависимости.
- Гигиена package.json: как не превратить node_modules в болото.
- Матрица поддержки RSC в фреймворках + тест-репо.
- В канареечной ветке появился <Activity /> — ждём в Next.js.
- Шпаргалка React 19 — всё ещё годная.
- React Router 7.9: стабильные middleware.
- Solid.js против React — свежая спорная колонка.
- Expo SDK 54: предсобранные iOS‑билды, Liquid Glass, RN 0.81, React 19.1 и стабильный File System.
- Conform 1.10 и TanStack Form 1.20 — типобезопасные формы без лишней боли.

⚙️ Node.js
- «Шай‑Хулуд» атакует npm: включаем 2FA, замедляем апдейты, читаем changelog’и.
- pnpm 10.16: minimumReleaseAge — защита от свежевредоносных релизов.
- npm-check-updates 18.2: «охлаждение» версий для безопасности.
- Node 24.8 (Current): инспекция HTTP/2 прямо в DevTools + апдейты crypto и npm 11.6.
- Ещё по теме: дорожная карта QUIC, нативный тест‑раннер с TS/React, практичный прод‑сетап Express 5, автосборки Electron, и как собрать несколько CSS в один.

📊 Видео и статьи
- Как быстро грузятся сайты из Google: реальные замеры стратегий предзагрузки.

⚒️ Инструменты и библиотеки
- Feedsmith 2.0: чтение/генерация RSS/Atom/JSON Feed/OPML в браузере и Node.
- trash 10.0 — отправляет файлы в системную Корзину.
- openapi-typescript-server — типобезопасные TS‑сервера из OpenAPI.
- Volume — 3D‑палитра OKLCH для осознанного выбора цветов.

🔄 Обновления
- TanStack Query 5.89, Bun v1.2.22, jsdom 27.0, Undici 7.16, Hexo 8.0, TypeBox 1.0, wait-on 9.0, Wasp 0.18, pretty‑ms 9.3, Fresh 2.1, BlueSky Likes, IINA с JS‑плагинами, оффлайн‑MDN и многое другое.

🦊 Лисья шутка недели: «Думал, что useEffect — опасная штука, а оказалось, опаснее только git commit… когда его забывают!» 😅

Полный выпуск — https://frontend-weekly.ru/weekly-digest-17/

Если кому-то нужен инвайт в новый браузер Comet от Perplexity, то вот они:
- https://perplexity.ai/browser/claim/2H44LBKHLC
- https://perplexity.ai/browser/claim/XE79FVU5TK
- https://perplexity.ai/browser/claim/I44BFCHN3Z
- https://perplexity.ai/browser/claim/ZXEG0EYVDJ
- https://perplexity.ai/browser/claim/LV4D11JYEC

🦊 Привет, это Фронти! Дайджест #18 на месте — свежайшие новости и ссылки. Поехали 👇

🧪 HTML & API
- WebAssembly 3.0 стал стандартом — мощный апдейт для веба.
- Temporal скоро в Chrome — даты без боли.
- MDN офлайн в одном архиве.

🎨 CSS & дизайн
- Что важно в CSS 2025: if(), popover, field-sizing.
- zoom стал стандартом и попал в Interop.
- Как внедрять Cascade Layers без рефакторинга всего проекта.

📦 JavaScript
- TC39 продвигает Import Bytes, Iterator Chunking и pushAll.
- findLast() вместо reverse().find() — чище и быстрее.
- «JSON не везде одинаковый» — подводные камни совместимости.

⚛️ React
- React Router 7.9: стабильные middleware.
- TanStack Start — RC 1.0, почти релиз.
- useSyncExternalStore вместо лишних useEffect.
- Плагины: «может, эффект не нужен?» для чистого кода.

⚙️ Node.js
- Усиливают безопасность npm — план GitHub + гайд по практикам.
- Node v24.9.0 (Current) и v22.20.0 (LTS).

🤖 ИИ
- DevTools через MCP для ИИ — автоматическая отладка ближе, чем кажется.
- MCP‑сервер для DevTools: ИИ видит и дебажит в браузере.
- Copilot CLI в публичном превью.

⚒️ Инструменты
- nuqs — типобезопасное состояние в URL.
- React Old Icons — 2000+ ретро‑иконок (аккуратнее с правами).
- react-native-big-calendar — календарь как у Google.
- Repo2txt и Repomix — сжимаем репо для ИИ.
- Catalyst — современный стартер для Next.js.

🔄 Обновления
- Docusaurus 3.9, VanJS 1.6, Milkdown 7.16.
- pretty-bytes 7.1, ESLint 9.36, pnpm 10.17.
- Cap’n Web — новый RPC для веба.

и ещё 70 статей внутри дайджеста.

🦊 Лисья шутка недели: «Temporal лечит время, но дедлайны всё равно болят!» 😅

Полный выпуск — https://frontend-weekly.ru/weekly-digest-18/

CSS interest-delay: умные задержки для лучшего UX

Сегодня в спеке CSS Basic User Interface Module Level 4 обнаружил новое CSS-свойство interest-delay и скупая мужская слеза потекла по щеке я тут же решил накидать статейку.

Помните проблему: наводишь курсор на пункт меню — появляется выпадающий список, но стоит чуть «промахнуться» при переходе к этому списку, как всё тут же исчезает?

Это происходит потому, что как только курсор покидает сам пункт навигации, состояние :hover пропадает — и меню закрывается, даже если вы всё ещё пытаетесь до него добраться.

Раньше для решения приходилось городить JavaScript, менять HTML-структуру или хитро подгонять отступы… В общем, подстраиваться под ограничения CSS. По этой теме писали огромные статьи и делали доклады.

Но теперь появилось новое CSS-свойство — interest-delay, которое решает проблему элегантно: оно даёт пользователю время «додумать» действие.

Мы буквально говорим браузеру:

Не торопись скрывать меню — подожди немного, вдруг человек просто ведёт курсор к выпадашке?

Свойства interest-delay-start и interest-delay-end позволяют задать задержку на включение и на выключение такого «состояния внимания». Например:

.nav-item {
  interest-delay: 100ms 300ms;
}

Первое значение — сколько ждать, прежде чем показывать меню.
Второе — сколько ждать, прежде чем скрывать его после ухода курсора.

👉 https://shabalin.online/blog/css/interest-delay/

🦊 Привет, это Фронти! Хррррр. Ой-ой, простите. Хрррр. Я кажется, что-то приготовил вам. Ах да, дайджест #19 на месте — свежайшие новости и ссылки. Поехали 👇

🧪 HTML & API
- Экономика усилий пользователя: как делать «выгодный» UX.
- Почему WCAG устаревают и где болит доступность.
- Липкая навигация и автоматические a11y‑тесты: риски и ограничения.

🎨 CSS & дизайн
- Медиа‑запросы на новом уровне: от aspect‑ratio до viewport‑segments.
- Safari 26 привёз свежие фичи и новое corner-shape.
- Соседи в CSS: sibling-count/sibling-index и практичный стартовый файл от Койера.

📦 JavaScript
- State of JS 2025 открыт — можно голосовать.
- findLast() вместо .reverse().find() — чище и быстрее.
- TC39 двигает Import Bytes, Iterator Chunking и pushAll.

⚛️ React
- React 19.2: <Activity/>, useEffectEvent, PPR и апгрейд DevTools.
- Управление состоянием в 2025: автор рекомендует Zustand.
- TanStack Start — RC, плюс гайд и демо с TanStack Table v8.

⚙️ Node.js
- Node v24.9.0 (Current) и v22.20.0 (LTS) — обновления и безопасность.
- Cloudflare Workers: ближе к Node.js, даже HTTP‑серверы завелись.
- GitHub усиливает безопасность npm; Deno — «безопасно по умолчанию».

📊 Видео и статьи
- SVG‑«скриншоты» HTML, история WWW от Тим Бернерс‑Ли, «пьяный CSS».

🤖 ИИ
- Copilot CLI — публичное превью для команд в терминале.
- Chrome DevTools через MCP: ИИ‑агенты видят и дебажат браузер.

⚒️ Инструменты
- npm‑check‑updates 19.0: умные апдейты с «возрастом» пакетов.
- Skia Canvas 3.0: 2D‑рендеринг в Node.js как в браузере.
- ffetch: обёртка над fetch с ретраями, circuit breaker и типами.

и ещё десятки статей и ссылок внутри дайджеста.

🦊 Лисья шутка недели: «findLast() нашёл баг последним — а дедлайн первым!» 😅

Полный выпуск — https://frontend-weekly.ru/weekly-digest-19/

🦊 Привет, это Фронти! Сегодня у меня для вас особенный дайджест #20 — он просто ломится от невероятных обновлений! React стал независимым от Meta, Vite выпустил enterprise-версию, а Core Web Vitals сэкономили пользователям целых 30 000 лет ожидания!
Готовы погрузиться в мир фронтенда? Тогда поехали! 🚀

🧪 HTML & API
- Core Web Vitals сэкономили пользователям 30 000 лет ожидания!
- История метрик: от AMP до открытого стандарта.

🎨 CSS & дизайн
- View Transitions 2025: автоматические имена и scoped-переходы.
- Современные цвета в CSS: color() и oklch() для лучшего контроля.
- shape-outside для нестандартных обтеканий текста.

📦 JavaScript
- Vite: документальный фильм с создателями фреймворков.
- Vite+ — enterprise-версия для команд.
- Playwright Agents: автономные тесты как настоящие пользователи.
- Object.groupBy() вместо reduce() — чище и проще.
- Prettier: 10 лет без споров о стиле кода.

⚛️ React
- React Foundation: независимость от Meta! 🎉
- React 19.2: <Activity/>, useEffectEvent, PPR и DevTools.
- Next.js 16 Beta: Turbopack по умолчанию.
- Coinbase Design System — открытый код с анимированными компонентами.

⚙️ Node.js
- 15 встроенных функций Node.js вместо npm-пакетов.
- Обработка 14 ГБ данных на 78% быстрее с Buffer.
- Deno vs npm: безопасность по умолчанию.
- Удаление 120 неиспользуемых зависимостей в монорепозитории.

📊 Видео и статьи
- «Хватит игнорировать браузер» — больше нативных API.
- Mirrow — анимация SVG с CSS-подобным языком.
- WebGPU для параллельных вычислений в браузере.

🤖 ИИ
- Google AI Studio генерирует Angular-приложения.
- Heroku Vibes — AI-инструмент для быстрой сборки.
- «Вайб-инженерия» — генерация кода через LLM.

⚒️ Инструменты
- Globby 15.0: улучшенная работа с файловыми шаблонами.
- Odiff 4.0: сверхбыстрое сравнение изображений.
- Javet 5.0: Node.js и V8 внутри Java-приложений.
- EmbedPDF — лёгкий PDF-просмотрщик для любого проекта.

и ещё десятки статей и ссылок внутри дайджеста.

🦊 Лисья шутка недели: «React Foundation теперь независимый — а зависимости всё равно остались!» 😅

Полный выпуск — https://frontend-weekly.ru/weekly-digest-20/

🦊 Привет, это Фронти!
Сегодня у нас дайджест #21, и этот выпуск 🔥 — всё буквально кипит от новостей!
View Transitions теперь работают во всех браузерах, React Compiler стал стабильным, Next.js 16 уже с Turbopack, а Bun 1.3 официально идёт в фулл-стек.
Поехали смотреть, что принесла неделя! 🚀

🧪 HTML & API
* Firefox 144 догнал Chrome и Safari — теперь View Transitions API*поддерживается везде! 🎉
* Появился Interop Feature Ranking — сайт, где можно влиять на приоритеты веб-платформы.
* Новый логотип у W3C, JSON-формат Custom Elements Manifest, и напоминание про тег <output>.

🎨 CSS & дизайн
* Отличная статья «CSS Grid через линии» — переосмысливаем сетки, думаем не ячейками, а линиями 📐.
* Новые функции: shape(), contrast-color(), progress(), и продвинутые селекторы :is(), :where(), :has().
* Как сделать переключатель тёмной темы без JS — элегантное решение чисто на CSS 🌗.

📦 JavaScript
* Забавный эксперимент с pipeline-композицией через Symbol.toPrimitive.
* Райан Карниато рассказывает, куда движутся signals (видео на YouTube).
* Почему typeof null === 'object' — и как этот «баг» пережил 25 лет.
* Как находить место выделения объекта в Chrome DevTools 🕵️.

⚛️ React и экосистема
* Triplex стал опенсорсным! 🎮 Визуальный рабочий стол для React и React Three Fiber теперь под крылом Poimandres.
* React Compiler 1.0 — стабильный! ⚡ Теперь React сам заботится о мемоизации.
* Next.js 16 Beta с Turbopack и поддержкой React 19.2 — производительность на новом уровне 🚀.
* React Native 0.82 перешёл на Новую архитектуру и обновил Hermes — новая эра для RN 📱.
* Документалка о Vite и проект Vite+ — must-see для всех, кто пишет на современном JS.
* Ещё: Lit вступил в OpenJS Foundation, обновления TanStack Router и Angular на Signals.

⚙️ Node.js & Backend
* Node.js 25.0.0 — свежий релиз с Web Storage, быстрым JSON.stringify и улучшенным JIT 🟢.
* Bun 1.3 становится полноценным фулл-стек-рантаймом 💪.
* Kaluma 1.3 — запускаем JS на Raspberry Pi Pico 2!
* Мост Python ↔ Node от Platformatic — теперь можно дружить ASGI и JS 🧩.
* Плюс: Node 22 стал LTS, улучшения памяти в контейнерах и свежие советы по TypeScript.

📊 Видео и статьи
* Prettier исполнилось 10 лет! 🎨 История создания от Vjeux — ностальгия и стандарты.
* Как добавить поиск на сайте Astro и улучшить UX.
* Happy DOM 20.0 — теперь выполнение JS по умолчанию отключено для детерминизма тестов.

🤖 ИИ и автоматизация
* Playwright 1.56 добавил «агентов» для LLM 🤖 — теперь тесты можно писать вместе с ИИ.
* Гайд по GitHub Copilot CLI — как заставить ИИ помогать прямо в терминале.
* llama.ui 2.38 — минималистичный AI-интерфейс в браузере.

⚒️ Инструменты недели
* jsonriver — потоковый JSON-парсер.
* Got 14.5 и Ky 1.12 — современные HTTP-клиенты.
* Ow 3.1 — лаконичная валидация данных.
* React Chrono 3.0, React-to-Print, React Knob Headless — свежие компоненты для React-проектов.
* EmbedPDF, Dev Tools Hub и Make Graph — полезные штуки для фронтендера.
* И не забудьте: React Compiler 1.0 и Remix 3 уже на подходе!


🦊 Лисья шутка недели: «React Compiler стал стабильным — теперь он оптимизирует не только рендер, но и мои нервы!» 😅

Полный выпуск читайте на 👉 frontend-weekly.ru/weekly-digest-21

🦊 Привет, это Фронти!
Сегодня у нас дайджест #22, и этот выпуск просто взрывной! 💥
URLPattern в Baseline, Vitest 4.0 с визуальными тестами, Next.js 16 с Turbopack, Node.js 25 готов, а CSS inherit() обещает революцию в дизайн-системах!
Поехали смотреть, что принесла неделя! 🚀

🧪 HTML & API
* URLPattern и view transitions попали в Baseline — теперь можно смело использовать в продакшене! 🎯
* Google сворачивает часть Privacy Sandbox из-за низкого принятия — эпоха меняется 📉
* Safari Technology Preview 230 с новыми фиксами и экспериментами 🍎
* W3C предлагает WAICT для повышения надёжности JavaScript в Сети 🔒

🎨 CSS & дизайн
* 25 крутых возможностей CSS за 25 минут — от Адама Аргайла! Авто-подгон размеров, стили скроллбаров, матфункции 🎨
* CSS inherit() — новая функция для контекстно-зависимых компонентов без тонны пропов!
* Эволюция Masonry: от первых предложений до текущего состояния спецификаций 📐
* Anchor Positioning — актуальное состояние осенью 2025 ⚓

📦 JavaScript
* JSON: import против fetch — что выбрать? Джейк Арчибальд разбирает плюсы и минусы 📦
* Асинхронные циклы без ловушек — почему await в for...of работает по-другому 🔄
* Boa v0.21 — JS-движок на Rust с поддержкой Temporal 🦀

⚛️ React и экосистема
* Vitest 4.0 вышел! Визуальные регрессионные тесты, стабильный Browser Mode, поддержка Playwright Traces 🧪
* Next.js 16 с Turbopack и React Compiler — производительность на новом уровне! 🚀
* Angular 21 выбирает Vitest как тест-раннер по умолчанию вместо Karma/Jasmine ⚡
* Solito 5.0 — мост между React Native и Next.js без React Native Web 🌉

⚙️ Node.js & Backend
* Node.js 25.0.0 — Web Storage по умолчанию, быстрый JSON.stringify, улучшенный JIT 🟢
* Bun 1.3.1 — фулл-стек-рантайм готов к бою! 💪
* Deno Deploy с кучей улучшений платформы деплоя 🦕
* CLI на Ace (Node/Bun) — как сделать мини-приложение закладок 📌

🤖 ИИ и автоматизация
* ChatGPT Atlas — новый Chromium-браузер с встроенным ИИ-чатом и агентами! 🤖
* Web Codegen Scorer от Angular — утилита для оценки качества веб-кода от ИИ 📊

⚒️ Инструменты недели
* Biome 2.3 с поддержкой Vue, Svelte и Astro ⚡
* Wretch 3.0 — обёртка над fetch с читаемым API 📡
* Obra Icons — 1000+ иконок с настройкой толщины и размера 🎨
* Format JSON Online с ИИ-помощью для исправления JSON 🤖
* Graffle 7.3 — GraphQL-клиент с поддержкой CommonJS 📊

🦊 Лисья шутка недели: «URLPattern в Baseline — теперь можно паттернить не только URL, но и свою жизнь!» 😅

Полный выпуск читайте на 👉 frontend-weekly.ru/weekly-digest-22

Baseline timeline

Кстати, про baseline, если хотите узнать, что из последнего попало в Widely available или Newly available, то можно глянуть на специальном ресурсе пет-проекте
https://nikolai-shabalin.github.io/css-baseline-timeline/

🦊 Привет, это Фронти!

Человек забыл, что сегодня понедельник. Сегодня у нас дайджест #23, и этот выпуск просто взрывной! 💥
TypeScript стал №1 на GitHub, React Compiler 1.0 стабильный, Next.js 16 с Turbopack, пружины на чистом CSS, а Node.js 24.11 теперь LTS!
Поехали смотреть, что принесла неделя! 🚀


🧪 HTML & Платформа
* Прогрессивный рендеринг изображений: что умеем сегодня — Джейк Арчибальд проверяет AVIF, JPEG XL и другие форматы в 2025! 🖼️
* Web MIDI + Web Audio в действии — как «сыграть» Daft Punk прямо в браузере! 🎵
* HTML Tables API — оказывается, есть скрытый API для работы с таблицами! 📊
* Страничные заголовки не должны быть в <header> — напоминание по семантике 📐

🎨 CSS & дизайн
* Пружины и «отскоки» на чистом CSS — функция linear() делает анимации живыми без JS! 🎨
* Секционный лейаут решается современным CSS — clamp(), style queries, :has() и другие новинки 📐
* CSS-reset'ы в 2025 — обзор популярных ресетов и зачем они нужны сейчас 🔄
* Отладка @starting-style в Chrome DevTools — теперь проще понимать стартовые состояния 🛠️

📦 JavaScript
* Директивы и «граница платформы» — от use strict к use client, use server и use no memo 🎯
* История JavaScript — 25 минут о зарождении языка и современном инструментальном вебе 📚
* Почему NaN !== NaN — разбор IEEE 754 и странностей чисел в JS 🔢
* Переосмысление асинхронных циклов — почему await в циклах часто ведёт не туда 🔄

📘 TypeScript
* TypeScript стал №1 по использованию на GitHub! GitHub связывает это с ростом LLM-ориентированной разработки 📈
* Типизированные регексы — ArkRegex даёт типы для паттернов и групп захвата 🎯
* Пишем как в Rust, но в TS — приёмы для более «системного» кода 🦀

⚛️ React и экосистема
* React Conf 2025 — React 19.2, стабильный React Compiler 1.0, большие изменения в React Native! 🎉
* Next.js 16 вышел — стабильные Turbopack и React Compiler, новые компоненты кеширования, MCP-сервер для ИИ-отладки! 🚀
* Новая директива use no memo — помечает функцию, чтобы React Compiler не оптимизировал её 🔧
* Как починить любой баг — Дан Абрамов показывает ценность минимального «репро» 🐛
* Remix 3 показали впервые на Remix Jam — ждём релиз! 🌊

⚙️ Node.js & Backend
* Node.js 24.11 становится LTS — поддержка до апреля 2028! 🟢
* Vitest 4.0 вышел! Браузерный режим стабильный, визуальные регрессионные тесты, поддержка Playwright Traces 🧪
* Awesome Node — более 500 отобранных пакетов, ресурсов и ссылок 📚
* Что нового в Express.js — апдейт от Лизз Пэроди о состоянии проекта 📝
* Переезд Mastro с Deno на Node — опыт портирования и подводные камни 🦕→🟢

Ещё сто новостей читайте в полном выпуске!

🦊 Лисья шутка недели: «Пружины на чистом CSS — теперь даже физика подчиняется CSS! Но use no memo всё равно не оптимизирует мои переживания о багах» 😅

Полный выпуск читайте на 👉 https://frontend-weekly.ru/weekly-digest-23/

🦊 Привет, это Фронти!
Встречайте дайджест #24! 🎉
Storybook 10 легче на 29%, тултипы на Anchor Positioning, source maps под капотом, field-sizing для инпутов, а Safari 26.1 с новинками!
Что интересного произошло на этой неделе? 🚀

🎨 CSS & дизайн
* Идеальные тултипы на Anchor Positioning — ставим подсказку точно к нужной точке без костылей! 🎯
* field-sizing: подгоняем ширину/высоту инпута под содержимое — больше никаких «пляшущих» размеров! 📏
* Обрезаем текст по строкам с line-clamp — полезный гайд для карточек и лент 📐
* «Самая нелюбимая» функция: tan() в CSS — тригонометрия в CSS не страшно! 📐
* Проверка в градациях серого — недостающий шаг в контроле доступности цвета 🎨
* Как быстро добавить View Transitions на сайт и не сломать навигацию — практичный разбор ✨
* Подсветка синтаксиса без библиотек: CSS Custom Highlight API теперь поддерживается везде! 🎨
* Производительность веб-анимаций: большая памятка-«тиер-лист» по техникам и их цене 🚀

📦 JavaScript
* Внутренности source maps в JavaScript — как девтулы показывают исходники вместо минифицированного кода 🔍
* Мини-трюк от Lea Verou: ленивое создание Symbol через прокси — элегантное решение 🎩
* Почему NaN !== NaN — разбор IEEE-754 и особенностей сравнения чисел в JS 🔢

📘 TypeScript
* Андерс Хейлсберг о взлёте TypeScript — создатель TS делится мыслями о популярности, переписывании компилятора на Go и роли ИИ 📈
* Встраиваем TS/JS-движок Hako через WebAssembly — запускаем скрипты в разных средах, включая мобильные 🚀

⚛️ React и экосистема
* Storybook 10: теперь только ESM, легче на 29% и с новым automocking — быстрее сборка, проще моки в тестах! 📚
* Reddit-тред: почему у Facebook 140 слоёв контекст-провайдеров и чем это оправдано — горячее обсуждение 🧵
* Исследование: Evil Martians посмотрели на стартUPы с фандингом — React у большинства 📊
* Встраиваем Godot в RN-приложение — новый open-source мост для Android/iOS 🎮
* Как передать базу SQLite через AirDrop из RN-приложения — детальный разбор 📱
* Критическая уязвимость в React Native Community CLI — при запуске dev-сервера возможен удалённый запуск команд! ⚠️
* Запускаем Next.js внутри ChatGPT — подробный разбор «нативной интеграции» от Vercel 🤖
* Генеративное искусство в браузере — как рисовать абстракции на Three.js из React 🎨

⚙️ Node.js & Backend
* Путеводитель по миграции с Node v22 на v24 — гид от команды Node с кодмодами для автоматизации 🗺️
* Вышел Node.js v25.1.0 (Current) — новая версия 🚀
* Через неделю-две npm аннулирует классические токены — проверьте аутентификацию! 🔐
* Импорт модулей из BitTorrent — эксперимент с хуками кастомизации импортов в Node 🌐
* Node на Hugging Face Spaces — если скучаете по Glitch, можно хостить небольшие серверные приложения 🏠
* Почему мигрировали с Python на Node.js — опыт переезда и подводные камни 🐍→🟢
* URLPattern как роутер без фреймворка в Node 24 — используем стандартный API для маршрутизации 🛣️

🌐 Браузеры
* Что нового в WebKit (Safari 26.1) — поддержка улучшенного Anchor Positioning, относительные единицы в SVG, переработка CSS Units 🍎
* Обновления платформы за месяц (stable/beta) — подборка Рейчел Эндрю 📰
* Деприкация XSLT в Chrome: зачем и как это улучшит безопасность — анонс от Google 🔒

Ещё более 100 новостей ждут вас в полном выпуске!

🦊 Лисья шутка недели: на этой неделе не будет

Полный выпуск читайте на 👉 https://frontend-weekly.ru/weekly-digest-24/

Основы реакта - визуально

Интересный по задумке и реализации сайт https://react.gg/visualized

Показывает визуально базовые концепции React. Если уже немного погружены в React, то это позволит немного повысить понимание

А 6 декабря можем встретиться на Я.Субботнике в оффлайне

https://events.yandex.ru/events/ya-subbotnik-2025-12-06

Мелихова в живую посмотрим

🦊 Привет, это Фронти!

Неделя выдалась насыщенной! Сегодня у нас дайджест #25, и этот выпуск полон открытий! 🎯

CSS Highlight API для подсветки без библиотек, зоопарк из 100+ JS-движков, ESLint для Baseline JavaScript, pnpm 10.21 с умной установкой Node, а Node.js теперь с официальными рекомендациями по безопасности!

Поехали смотреть, что принесла неделя! 🚀

🧪 HTML & Платформа
- Семантический HTML — объяснение "по-человечески", зачем нужны семантические теги и как они помогают скринридерам
- Миф про длину alt-текста — разбор того, что важнее не количество символов, а полезность описания

🎨 CSS & дизайн
- Список производительности веб-анимаций — какие анимации нагружают браузер, а какие почти бесплатные
- CSS Custom Highlight API — подсветка синтаксиса без тяжёлых библиотек, уже поддерживается во всех браузерах!
- Странности position: sticky — почему "липкие" элементы иногда ведут себя не так, как ожидаем
- CSS-миры без JS — целые "миры" с рельефом на чистом CSS, используя стековые гриды и 3D-трансформации
- width: 100% без overflow — новое значение stretch устраняет раздражающий оверфлоу без calc()
- SVG pathLength для анимаций — проще управлять анимацией линий в SVG
- Идеальные тултипы к углам — как аккуратно отрисовать "хвостик" подсказки

📦 JavaScript
- Зоопарк JS-движков — больше 100 JavaScript-движков в одной таблице с сортировкой по производительности!
- ESLint для Baseline JavaScript — автоматическая проверка, можно ли использовать фичу без полифиллов
- Таблица совместимости ECMAScript — проверка поддержки фич в движках и браузерах
- TC39 встреча #111 — плотная повестка по будущим фичам JS
- Безопасный JavaScript — советы по защите от типичных атак
- Visual Types — визуальный гид по TypeScript через картинки и примеры
- Развитие GC в V8 — как сборщик мусора стал быстрее за последние годы
- Error chaining — использование Error.cause для цепочки причин ошибок

⚛️ React
* Не используйте useTransition повсюду — когда переходы помогают, а когда только усложняют код
* Your URL is Your State — как хранить состояние приложения в URL для шаринга и навигации
* nuqs — type-safe менеджер состояния через query-параметры
* Concurrent Hydration с useSyncExternalStore — правильная подписка на глобальное хранилище
* React Source Lens — выбрать компонент в браузере и открыть файл в редакторе

⚙️ Node.js & Backend
* Node.js Security Best Practices — официальные рекомендации по безопасности от самой команды Node
* Node.js v25.2.0 — type-stripping стал стабильным, можно запускать TS без сборки!
* Bun v1.3.2 — альтернатива Node.js и npm в одном инструменте
* State of Node.js 2025 — получасовой доклад от Matteo Collina о состоянии платформы
* Изменения в безопасности npm-токенов — классические токены больше нельзя создавать
* Массовое тестирование пакетов против свежих сборок Node — автоматическ

🌐 Браузеры
- 32 года Mosaic — первому популярному графическому браузеру уже больше 32 лет! 🎂
- GitHub отказывается от "тостов" — убирают всплывающие уведомления из-за проблем с доступностью 🚫
- Polypane с код-агентами — DevTools можно связать с ИИ-агентами для автоматизации 🤖
- Новый маскот Firefox — знакомьтесь, "Kit" 🦊
- Horizon — текущий вид неба в виде CSS-градиента, обновляется через meta refresh 🌅

Ещё больше новостей читайте в полном выпуске!

🦊 Лисья шутка недели: «CSS Highlight API — теперь даже подсветка синтаксиса подчиняется CSS! Но position: sticky всё равно не объясняет, почему мой код иногда "прилипает" к багам» 😅

Полный выпуск читайте на 👉 https://frontend-weekly.ru/weekly-digest-25/

Custom media queries

Рассказал про кастомные медиавыражения в CSS на хабре https://habr.com/ru/articles/966950/

@custom-media --mobile (min-width >= 480px);

.text {
  font-size: 20px;
}

@media (--mobile) {
  .text {
    font-size: 24px;
  }
}

или даже с CSS Nesting

@custom-media --mobile (min-width >= 480px);

.text {
  font-size: 20px;

  @media (--mobile) {
    font-size: 24px;
  }
}