Коля Шабалин и великий аттрактор кода
338 subscribers
230 photos
2 videos
328 links
Некий Коля Шабалин рассказывать про фронтенд, обучение, CSS-спецификации и фичи

Чат для общения: https://t.me/+W80kxMBPKvAwNzBi

Поддержать на Бусти - https://boosty.to/css-space
Download Telegram
Сегодня в Т-Технологиях программируем совместно с ИИ :)
🔥9
🦊 Привет, это Фронти!

Я принёс свежий выпуск #40 и собрал главное за неделю

В этом выпуске: Pretext с новым взглядом на измерение текста и живые layout’ы, мартовский срез веб-платформы и свежие CSS-эксперименты с contain и даже DOOM на CSS, напоминание о реальной цене supply chain через компрометацию axios, разбор signals и причин JavaScript bloat, React Joyride 3.0, Storybook MCP и Next.js 16.2 с Adapter API, новые строгие дефолты TypeScript 6.0, Node.js 25.9 с контролем памяти и новым streams API.

🧪 HTML и платформа
- Pretext предлагает по-новому измерять многострочный текст и собирать по-настоящему живые layout’ы.
- Мартовский обзор веб-платформы помогает быстро сверить, что уже дозрело в браузерах.
- Появился удобный обозреватель возможностей платформы с фильтрами по поддержке и стадиям.
- popover=hint напомнил, что наличие поддержки ещё не гарантирует предсказуемое поведение.
- История про сохранение веба снова поднимает важный вопрос: интернет не только строят, но и постепенно теряют.

🎨 CSS и дизайн
- CSS Containment всё ещё недооценён, хотя может заметно помочь с производительностью и изоляцией перерисовок.
- В draft для CSS Image Animation предлагают более явный контроль над анимированными изображениями.
- DOOM в 3D на CSS выглядит как шутка, но отлично показывает, насколько далеко зашли современные возможности платформы.
- Дизайн в коде снова звучит не как компромисс, а как способ стать сильнее в самой профессии.

Доступность и UX
- Accessibility полезнее встраивать маленькими шагами в обычную работу, а не держать отдельной задачей «на потом».
- data-testid часто оказывается симптомом того, что интерфейс плохо выражен через доступные роли и элементы.
- Разобрали предзагрузку изображений, cookie consent в 2026 году, подводные камни magic links и аккуратную автоматизацию форм.

🔐 Безопасность
- Компрометация axios стала главным напоминанием недели о том, что supply chain-риск никуда не делся.
- Даже если axios не стоит у вас напрямую, стоит проверить дерево зависимостей и радиус поражения.
- В фокусе также безопасная публикация npm-пакетов, Secretlint и обход permission model в Node.js через Brotli.

📦 JavaScript
- Подробно разобрали, как внутри работают signals и почему современная реактивность устроена именно так.
- JavaScript bloat по-прежнему растёт из старой совместимости, микробиблиотек и инерции с ponyfills.
- Есть понятный вводный материал по npm Workspaces и живой кейс, где переход с Node.js на Bun дал резкий прирост пропускной способности.

⚛️ React и фреймворки
- Next.js 16.2 делает Adapter API всё более важной частью своей платформенной стратегии.
- Storybook MCP для React показывает, как UI-инструменты начинают готовиться к эпохе AI-агентов.

📘 TypeScript
- TypeScript 6.0 делает конфигурацию заметно строже и подталкивает команды пересмотреть старые tsconfig, которые годами жили на исторических дефолтах.
- Рядом ещё ts-blank-space, numpy-ts и новость о бесплатной JS/TS-поддержке в IntelliJ IDEA.

⚙️ Node.js
- Node.js 25.9.0 добавил --max-heap-size, новый экспериментальный stream/iter и улучшения тестового раннера.
- Внимание также на security releases Node.js от 24 марта 2026 года.

🤖 ИИ
- Transformers.js v4 ещё ближе подводит серьёзные AI-сценарии прямо в браузер через WebGPU.
- Дэн Абрамов показал спокойный, взрослый способ использовать Claude для фикса в React.
- Заодно неделя напомнила про риски: обучение на данных из Copilot, странная реклама в PR и утечка исходников Claude Code через source maps.

🦊 Лисья шутка недели:
После истории с axios даже мой package-lock.json стал выглядеть как тревожный триллер, где любой минорный релиз может внезапно оказаться главным злодеем.

Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-40/
264🔥3😍1
Что там стало Widely available в марте 2026?

- Clear-Site-Data
- contain-intrinsic-size
- @counter-style
- Device orientation events
- hyphenate-character
- hyphens
- image-set()
- <link rel="modulepreload">
- Overflow media queries
- Storage manager
- Update frequency media query
- subgrid

В этом месяце закрепилось 12 фич, а в следующем будет четыре.

https://habr.com/ru/articles/1018200/
🔥9👍1
🦊 Привет, это Фронти!

Я принёс свежий выпуск #41 и собрал главное за неделю

В этом выпуске: view-transitions-toolkit и JetStream 3.0, нативный lazy-loading для <video>/<audio>, новые практики в CSS (от subgrid до name-only containers), тревожный WebAIM Million 2026, JSIR от Google и Minimum Release Age для supply chain-защиты, постмортем по компрометации axios, большой React-кейс от GitHub, Ink 7.0 и security-релизы React, tsdown с исполняемыми файлами для Node.

🧪 HTML и платформа
- view-transitions-toolkit собрал типовые сценарии View Transitions в удобный набор.
- JetStream 3.0 обновил бенчмарки JS/WASM впервые за 7 лет.
- Нативный lazy-loading для <video> и <audio> становится практичным стандартом.
- Обфускация e-mail в HTML всё ещё работает, но многие старые трюки уже мимо.
- В фокусе недели: HTML in Canvas и новый процесс апелляций в Chrome Web Store.

🎨 CSS и дизайн
- Вместо !important — слои, специфичность и более предсказуемая архитектура стилей.
- subgrid всё увереннее решает реальные CMS/layout-боли без лишних обёрток.
- Name-only containers выглядят как очень рабочий нативный скоупинг.
- Chrome 145 прокачал multi-column через column-wrap и column-height.
- Ещё из интересного: проверка поддержки @`-правил, `pointer-box-offset, The Great CSS Expansion, CSS-эксперименты уровня x86 и DOOM.

Доступность и UX
- WebAIM Million 2026 снова показывает: доступность не «починится сама».
- Как делать emoji и иконки дружелюбными для скринридеров.
- Скринридер полезен, но не заменяет полноценное a11y-тестирование.

📦 JavaScript
- JSIR от Google может стать базой для нового поколения JS-инструментов.
- Большой обзор «что важно знать в JavaScript в 2026 году».
- Minimum Release Age — простой, но мощный щит против свежих supply chain-атак.
- Из практики: Intl для локализации единиц, опыт миграции на Solid 2.0, QuickBEAM и официальный xdk-typescript.

🔐 Безопасность
- Axios подробно разобрал компрометацию в npm и цепочку событий вокруг атаки.
- Bug bounty-программа Node.js поставлена на паузу из-за финансирования.
- Отдельный сигнал недели: кейсы с postinstall`-инъекциями и напоминание про `ignore-scripts (в pnpm v10+ это уже дефолт).

⚛️ React и фреймворки
- GitHub показал, как ускорял тяжёлый React-интерфейс diff-ов в PR.
- MDN рассказал о зрелой миграции фронтенда: от CRA к Lit и web components.
- Ink 7.0 укрепляет React-подход для CLI/TUI.
- Вышли security-релизы React 19.2.5, 19.1.6 и 19.0.5.
- Также в ленте: Mantine 9.0, React Native 0.85, React Paris 2026 talks и кейс Railway (с Next.js на Vite + TanStack Router).

⚙️ Node.js
- Нестандартный, но рабочий паттерн «отмены» через hanging promise.
- tsdown теперь умеет собирать самостоятельные Node-исполняемые файлы.
- Web Audio API приходит в Node ещё увереннее.
- Из экосистемы: TinyTTS, grammY с Telegram Bot API 9.6, tokenu и многое другое.
- Node.js 25.9.0 добавил --max-heap-size, развивает stream/iter; рядом обновились ky 2.0, ESLint 10.2, Undici 8.0, pnpm v11 beta 8.

🦊 Лисьи шутки недели:
Пока я обновлял резюме, Wildberries, кажется, купил ещё пару бизнесов.
Работы больше не стало, но экосистема растёт так быстро, что скоро вакансии будут выдавать вместе с заказом в ПВЗ.
А после истории с axios я понял, что самая романтичная фраза весны 2026 — это не «давай перейдём на новый стек», а «давай включим `ignore-scripts`».

Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-41/
24🔥73
Коля Шабалин и великий аттрактор кода
Управление прокруткой с помощью CSS Scroll Snap Module Level 1 Продолжаю разбирать спецификации, связанные со скролом. Scroll Snap позволяет задавать точки прилипания внутри scroll-контейнера и управлять тем, как происходит перемещение между ними. Под капотом…
Управляем анимацией с помощью скролла в CSS

Я всё ещё продолжаю разбирать спецификации, связанные со скроллом.

👉 https://shabalin.online/blog/css/scroll-driven/

В этот раз Scroll-driven Animations. Если у вас в проекте есть анимации, которые завязаны не на время, а на скролл, эта спецификация поможет упростить их реализацию.

В спецификации определяются два вида шкал: scroll progress и view progress. Первая привязана к прогрессу прокрутки, а вторая — к моменту, когда элемент появляется в зоне видимости.

Я уже разобрал пять спецификаций связанные со скролами. Кажется осталась одна CSS Overflow Module =) Кто понял, тот поймёт.
🔥52
🦊 Привет, это Фронти!

Я принёс свежий выпуск #42 и собрал главное за неделю

В этом выпуске: Google решила бороться с сайтами, которые ломают кнопку «Назад», MDN показала большой фронтенд без React, контейнерные запросы и SVG-эффекты становятся всё практичнее, Bun 1.3.12 продолжает собирать «всё в одном», TanStack Start пробует свой путь с React Server Components, Temporal всё ближе к включению по умолчанию в Node.js.

🧪 HTML и платформа
- Google начнёт понижать сайты, которые перехватывают кнопку «Назад» и ломают нормальную навигацию.
- MDN подробно рассказала, как переписала большой фронтенд и ушла от старого React-стека в сторону web components.
- Всё громче звучит тема Agentic Engine Optimization: сайты начинают оптимизировать не только для людей и поисковиков, но и для AI-агентов.
- Заодно есть красивый повод оглянуться назад: идее JavaScript-модулей в веб-платформе уже десять лет.

🎨 CSS и интерфейсы
- Name-only @container queries и контейнерная типографика делают компоненты ещё самостоятельнее и умнее.
- SVG-фильтры, squash and stretch и CSS-свечение показывают, как выразительные интерфейсы всё чаще собираются без тяжёлой JS-обвязки.
- font-variant-emoji помогает лучше контролировать текстовую и emoji-версию символов.

Доступность и UX
- AI-сгенерированные интерфейсы по-прежнему часто ломаются на базовых вещах: семантике, клавиатурной навигации и читаемости.
- Главный вывод недели простой: AI может ускорить черновик, но здравый UX и доступность всё ещё требуют внимательной ручной проверки.

📦 JavaScript
- Bun 1.3.12 добавил встроенную headless-автоматизацию браузера и Bun.cron, ещё сильнее качнув идею «один рантайм на всё».
- Неделя напомнила, что асинхронность в JavaScript всё ещё полна тонкостей: nested promises и «отмена» promise оказались интереснее, чем кажется.
- Intl API всё ещё недооценён и умеет куда больше, чем многие привыкли думать.

📘 TypeScript
- Parse, don’t validate: TypeScript особенно полезен тогда, когда хранит знание о корректных данных, а не просто раскрашивает типы.

⚛️ React и фреймворки
- TanStack Start добавил React Server Components, но делает ставку на более data-oriented модель без привычного use server.
- The Vertical Codebase снова поднимает важную тему: структура по доменам часто живёт лучше, чем папки вида components/, hooks/ и utils/.
- GitHub показал сильный инженерный разбор оптимизации тяжёлого React-интерфейса на примере diff view.

⚙️ Node.js
- Temporal всё ближе к тому, чтобы стать нормой в Node.js, и это одна из самых приятных новостей для всех, кто устал от Date.
- Node.js 24.15.0 LTS принёс в стабильный мир полезные вещи вроде require(esm) и module compile cache.
- OWASP выпустил очень приземлённый cheat sheet по npm-безопасности, который точно стоит сохранить.
- Для WebAssembly есть короткий и понятный маршрут от C-функции до запуска в Node.

🎮 Игры, графика и визуальные эксперименты
- Phaser 4.0 вышел с упором на производительность, современную разработку, миграцию с v3 и огромную пачку демо.
- FluidCAD тянет параметрический CAD в JavaScript-мир через OpenCascade.js.
- Можно даже погулять по цифровой археологии: Windows 95 в Electron, v86 и свежий JSPaint всё ещё напоминают, что веб умеет быть очень странным и очень весёлым.

🔐 Безопасность и supply chain
- История о том, как кто-то купил 30 WordPress-плагинов и встроил во все backdoor, снова напоминает, что supply chain-риски никуда не делись.
- На этом фоне особенно полезно читать про dependency cooldowns и внимательнее смотреть не только на обновления, но и на доверие к их источнику.

🦊 Лисья шутка недели:
Google начала наказывать сайты за захват кнопки «Назад», и где-то одна слишком уверенная SPA впервые услышала от поисковика: «нет, это не relationship, это hostage situation».
MDN спокойно ушла от React к web components, а старый create-react-app в этот момент, кажется, тихо прошептал: «я просто хотел быть полезным».

Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-42/
26❤‍🔥31
Настала рубрика просить прощения и извиняться

Если вы до сих пор ставите точки в конце описания элементов, например <img alt="Балкон с цветами.">, <span class="visually-hidden">Черно-красные деревья.</span>, то это можно не делать =)

Простите меня

Если вы ничего не поняли, то и замечательно
🤣13👍4😁1
🦊 Привет, это Фронти!

Я принёс свежий выпуск #43 и собрал главное за неделю

В этом выпуске: Firefox 150 и Soft Navigations двигают веб-платформу вперёд, HTML пробует жить внутри canvas, адаптивные интерфейсы всё чаще обходятся без глобальных брейкпоинтов, TypeScript 7 beta обещает большой скачок скорости, в Node-мире появился пакетный менеджер aube, Playwright научился гибче записывать скринкасты, а Vercel напомнил, что OAuth и supply chain требуют очень внимательного отношения.

🧪 HTML и платформа
- Firefox 150 принёс полезные штуки для разработчиков: light-dark() для изображений, улучшения color-mix() и новые media-зависимые псевдоклассы.
- Soft Navigations API вышел на финальный origin trial и помогает браузерам лучше понимать SPA-переходы.
- HTML-in-Canvas API показывает интересное направление: описывать интерфейс привычной разметкой, но рендерить его в более управляемой графической среде.
- А ещё есть хороший разбор того, почему fallback-шрифты в font-family работают не так очевидно, как кажется.

🎨 CSS и интерфейсы
- UI без глобальных breakpoints становится всё практичнее: clamp(), container queries и auto-fit помогают компонентам подстраиваться под реальное окружение.
- Главный сдвиг мышления простой: адаптивность всё меньше похожа на набор магических ширин экрана и всё больше на поведение самого компонента.

UX и доступность
- box-shadow всё ещё не честная замена outline: focus state должен быть не только красивым, но и надёжным для клавиатуры и специальных режимов отображения.
- Подборка маленьких интерфейсных деталей напоминает, что хороший UX часто складывается из микрорешений: отступов, состояний и понятной обратной связи.
- Дизайн-системы всё чаще обсуждают не только консистентность, но и устойчивость: вес страниц, поддержку компонентов и энергопотребление.

📦 JavaScript и архитектура
- Вертикальная структура проекта снова набирает очки: группировка по фичам и доменам часто живёт лучше, чем вечные components/, hooks/ и utils/.
- История про 15 тысяч циклических зависимостей показывает, как архитектурные проблемы можно распутывать постепенно, не останавливая весь монорепозиторий.
- Неделя также напомнила, что длинные цепочки методов не всегда делают код лучше, а type guards и assertion functions в TypeScript имеют свои границы доверия.

⚛️ React и фреймворки
- VoidZero показала, как ускоряла Angular compiler с помощью AI: без магии, зато с нормальным инженерным процессом и проверкой гипотез.
- Salesforce теперь позволяет собирать нативные React-приложения на своей платформе.
- crates.io уходит с Ember.js на Svelte 5, а вокруг Vue, Vapor Mode, Vite 8, Vite+ и Void продолжается заметное движение.

📘 TypeScript
- TypeScript 7 beta принёс нативный компилятор на Go и обещает ускорение примерно в десять раз.
- Но обновляться всё равно стоит аккуратно: нужно учитывать изменения из TypeScript 6.0, новые настройки по умолчанию и отличия в поведении JavaScript-кода.

⚙️ Node.js и рантаймы
- aube появился как новый пакетный менеджер от автора mise и делает ставку на скорость и более безопасные настройки по умолчанию.
- Playwright 1.59 добавил page.screencast, и это полезно не только для тестов, но и для продуктовых демо и документации.
- Node продолжает двигаться к включению Temporal API по умолчанию, Yarn экспериментирует с package maps, а Bun 1.3.13 стал чуть экономнее по памяти.

🤖 ИИ и агентный веб
- Сайты всё активнее готовят не только для людей и поисковиков, но и для LLM: появляются практичные советы по видимости сайта для моделей.
- Claude Design показывает, что AI-инструменты всё глубже заходят и в дизайн-процесс, но пока особенно интересно смотреть не на обещания, а на реальные сценарии работы.

🦊 Лисья шутка недели:
Playwright научился гибче записывать скринкасты, и теперь тесты могут не просто падать, а падать с режиссурой, таймингом и драматичным доказательством для PR-комментария.

Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-43/
269
Поводом для написания статьи стала фраза, которую я сегодня услышал: «Пиксель неделим!» — в контексте того, что 12.5px в CSS может быть триггером для негатива.

Давайте вспомним почему один пиксель указанный в CSS может не быть равен одному пикселю на дисплее!

https://shabalin.online/blog/css/pixel/
👍124
Новый месяц - новые фичи стали Widely available. А я лишь покажу, что там уже можно использовать в проде ;)

Какие фичи в вебе стали Widely available в апреле 2026?

• <search>
• Web authentication easy public key access
• String isWellFormed() and toWellFormed()
• ARIA attribute reflection


Подробнее в статье на хабре https://habr.com/ru/articles/1028616/
👍4🔥1
🦊 Привет, это Фронти!

Я принёс свежий выпуск #44 и собрал главное за неделю

В этом выпуске: sizes="auto" делает адаптивные изображения менее болезненными, scroll-driven animations и View Transitions продолжают двигать CSS вперёд, TypeScript 7 beta и pnpm 11 ускоряют инфраструктуру, React Compiler пытается снять с нас часть ручной мемоизации, Remix 3 меняет философию, Node 26 почти доехал до Temporal по умолчанию, а AI-агенты уже просят для себя DESIGN.md.

🧪 HTML и веб-платформа
- sizes="auto" обещает сделать адаптивные картинки спокойнее: браузер сможет сам определять размер лениво загружаемого изображения.
- В апрельском обзоре веб-платформы снова видно, как маленькие браузерные улучшения постепенно становятся обычной базой фронтенда.
- <dialog> и popover помогают собирать модалки и всплывающие панели на стандартных API.

🎨 CSS и интерфейсы
- Scroll-driven animations позволяют привязывать движение элементов к прокрутке без старого набора `scroll`-слушателей и ручных расчётов.
- Compositing и blending стоит понимать до красивых экспериментов, чтобы случайно не сломать контраст и читаемость.
- loading="lazy" снова напомнил: это не волшебная кнопка ускорения, а инструмент, который легко испортит LCP, если применить его к главной картинке.

UX и доступность
- Таймауты сессий могут быть не только настройкой безопасности, но и настоящим барьером доступности.
- В React-интерфейсах по-прежнему часто ломаются базовые вещи: семантика, управление фокусом и понятные состояния компонентов.

📦 JavaScript и TypeScript
- TypeScript 7 beta принёс Go-версию компилятора с обещанием примерно десятикратного ускорения.
- pnpm 11 добавил minimumReleaseAge, SQLite-индекс хранилища, нативную публикацию пакетов и pack-app.
- Обзор ES2025/ES2026 собрал iterator helpers, Promise.try, Array.fromAsync, using, Temporal и другие свежие возможности языка.
- TSRX предлагает посмотреть на JSX с новой стороны: control flow, локальные переменные и scoped styles прямо в декларативной разметке.

⚛️ React и фреймворки
- React Compiler полезнее понимать через модель рендера, а не как магию, которая сама ускорит всё подряд.
- Out-of-order streaming показывает, как Suspense и Server Components доставляют UI кусками, а не строго сверху вниз.
- Rspack 2.0 и Rsbuild 2.0 продолжают Rust-ускорение сборки и добавляют новые возможности для RSC.

⚙️ Node.js и рантаймы
- Node 26 задержался, но главная интрига прежняя: Temporal API всё ближе к включению по умолчанию.
- Fresh 2.3 показывает хороший принцип Deno-мира: если странице не нужен интерактив, не отправляй лишний JavaScript.

🤖 AI и агентный веб
- DESIGN.md предлагает описывать визуальный стиль проекта так, чтобы его могли понимать AI-агенты.

🦊 Лисья шутка недели:
После sizes="auto" адаптивные картинки впервые посмотрели на макет и сказали: «спасибо, я сам решуууу, кем мне быть на 768 пикселях».

Scroll-driven animations пришли в CSS, и где-то один старый window.addEventListener('scroll') тихо обновил резюме на «legacy motion consultant».

Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-44/
26🔥9👍1
🦊 Привет, это Фронти!

Я принёс свежий выпуск #45 и собрал главное за неделю

В этом выпуске: Remix 3 вышел в beta и уже не выглядит как обычный React-фреймворк, Node.js 26 включил Temporal по умолчанию, Chrome 148 принёс Prompt API и новые web-возможности, React и Next.js закрыли RSC-уязвимость, Rolldown 1.0 стал стабильным, Astro готовит v7 Alpha, а CSS снова доказывает, что умеет больше, чем просто «поставить отступ».

🧪 HTML и платформа
- Chrome 148 добавил name-only @container queries, ленивые video и audio, Prompt API и новые возможности DevTools.
- Вокруг AI API в браузере разгорелась дискуссия: Gemini Nano, приватность, размер моделей и контроль пользователя стали важной частью разговора.
- Firefox Security и Cloudflare рассказали про WAICT — идею криптографически проверяемого JavaScript для открытого веба.
- Container Timing API помогает точнее измерять готовность конкретных видимых блоков, а не только общую производительность страницы.
- Отдельно полезно почитать про bfcache и dark mode: возврат назад должен быть быстрым, но интерфейс после восстановления тоже должен быть живым.

🎨 CSS и интерфейсы
- Range media queries делают брейкпоинты понятнее и помогают уйти от странностей на точных границах min-width и max-width.
- safe-area-inset снова напоминает: если кнопка спряталась под системной панелью телефона, это не минимализм, это баг.
- CSS через :has() и n of в :nth-child() уже может делать условную валидацию форм без JavaScript.

Доступность и UX
- Практический гид по ARIA напоминает: роли нужны не для украшения разметки, а когда нативного HTML действительно не хватает.
- AI не чинит доступность сам по себе — он зависит от уже понятных, семантичных и устойчивых интерфейсов.

📦 JavaScript
- Remix 3 Beta сделал резкий поворот: меньше зависимости от React, больше веб-стандартов, собственная модель компонентов и full-stack runtime.
- Deno экспериментирует с import defer, чтобы точнее управлять выполнением импортированных модулей.
- Вокруг Bun снова шумно: обсуждают Rust-порт, покупку Anthropic и вопрос, куда вообще движется рантайм.
- Vitest может стать менее привязанным к Vite, что важно для долгоживущих тестовых проектов.

⚛️ React и фреймворки
- TanStack показал маленький React-совместимый рантайм примерно на 9KB, но честно объяснил, почему не превращает его в замену React.
- React и Next.js выпустили security-релизы для RSC-уязвимости, обновления лучше не откладывать.
- TanStack Form объясняет headless-подход: библиотека отвечает за состояние и валидацию, а UI остаётся вашим.
- Evil Martians рассказали, как миграция с React на Web Components сэкономила 100KB.

🛰️ Сборка и экосистема
- Rolldown 1.0 стал стабильным быстрым бандлером с совместимостью с Rollup-плагинами.
- Astro 6.2 добавил больше контроля над SVG и логированием, а Astro v7 Alpha готовит переход на Vite 8 и Rust-компилятор.
- Electron 42 изменил установку бинарника после supply chain атак: теперь скачивание не происходит через postinstall.

⚙️ Node.js
- Node.js 26 вышел с Temporal по умолчанию, V8 14.6 и Undici 8.
- Node.js 26.1 добавил экспериментальный node:ffi для прямой работы с нативными библиотеками.
- Node 20 Iron ушёл в End-of-Life, а все актуальные LTS-релизы теперь умеют запускать TypeScript через type stripping.
- Temporal в Node 26 использует Rust-библиотеку, поэтому сборка Node из исходников теперь требует Rust toolchain.


🦊 Лисья шутка недели:
Remix 3 вышел в beta и сказал React: «дело не в тебе, я просто хочу найти себя в веб-стандартах». React сделал вид, что всё нормально, но уже открыл Suspense boundary для эмоциональной поддержки.

Node 26 включил Temporal по умолчанию, и где-то один new Date() впервые почувствовал, что он legacy.

Chrome добавил Prompt API, а фронтендеры теперь боятся не только «почему bundle 4MB», но и «почему браузер сам решил, что 4GB модели — это просто лёгкий интерактив».


Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-45/
26❤‍🔥4🔥1
Современный browserlist

Ребята, поскидывайте, пожалуйста, в комментарии свои конфиги браузерлиста. Буду очень благодарен
🦊 Привет, это Фронти!

Я принёш швежий выпуск #46 и шобрал главное жа неделю
Пишу чуть шепеляво: у Лиша болит жуб, но фронтенд ждать не будет.

В этом выпуске: Safari 26.5 подтянул WebKit, браузеры пробуют встроенную уштоновку веб-приложений, TanStack пережил npm supply chain атаку, Rolldown 1.0 штал штабильным, GitHub ускорил Issues через local-first кеш, Bun 1.3.14 добавил изображения и HTTP/3, а Node.js 26 уже можно изучать глубже.

🧪 HTML и платформа
- Safari 26.5 принёш :open, доработки random(), SVG-улучшения и Origin API.
- Chrome и Edge тестируют новый <install> для уштоновки веб-приложений без лишнего JavaScript.
- Obs.js показывает, как подстраивать сайт под сеть, батарею, CPU и память пользователя.
- No-Vary-Search помогает кешам не считать каждый utm_source новой реальностью.
- Firefox DevTools учится удобнее искать внутри Shadow DOM.

🎨 CSS и интерфейшы
- Скоростью бесконечных CSS-анимаций можно управлять через переменную, а не плодить похожие @keyframes.
- Overflow-контейнеры снова напоминают: если мышью прокручивается, это ещё не значит, что клавиатурой тоже.
- Tailwind CSS v4.3 добавил утилиты для scrollbar, @container-size, zoom-* и другие практичные мелочи.
- Cascade даёт иконки для CSS-свойств, а Find Font помогает выбирать и сравнивать шрифты.

📦 JavaScript
- ShadowRealm обещает отдельное окружение для запуска JS без порчи глобального состояния.
- TanStack и другие npm-пакеты попали под supply chain атаку через CI, кеш и OIDC-токены.
- Главный вывод: шлишком швежий пакет иногда пахнет не релизом, а расследованием.
- Rolldown 1.0 стал штабильным Rust-бандлером и готовит быструю основу для Vite 8.
- Булевые параметры вида true, false, true снова доказали, что код иногда говорит: «угадай моё настроение».

⚛️ React и фреймворки
- GitHub сделал навигацию в Issues почти мгновенной через IndexedDB, local-first кеш и фоновые обновления.
- Raycast перевёл новый интерфейс на React и показал, что React давно живёт не только в браузерных вкладках.
- Evil Martians ушли с React на Web Components для небольшого виджета и сэкономили около 100 КБ.
- TanStack Form развивает headless-подход: логика формы отдельно, ваш UI отдельно.
- RSC Server Functions снова напоминают: серверная функция не заменяет нормальную API-границу.

🛰️ Сборка и фреймворки
- Astro 6.3 экспериментирует с advanced routing.
- Waku 1.0 Beta развивает минимальный RSC-фреймворк на Vite и Hono.
- Electron 42 обновился до Chromium 148, Node 24.15 и V8 14.8.


📘 TypeScript
- Свежий Valibot v1.4.0 особенно интересен тем, кто хочет проверять данные и не тащить в клиент лишний вес.

⚙️ Node.js и рантаймы
- Node.js 26 уже можно изучать через практические изменения, включая экспериментальную FFI-поддержку.
- Bun 1.3.14 добавил Bun.Image, global virtual store, HTTP/3 в Bun.serve и улучшения совместимости с Node.
- pnpm 11.1 добавил полезные команды вроде pnpm bugs и pnpm audit signatures.

Тестирование и качество
- Jest 30.4.0 улучшил поддержку ESM, Temporal и React 19.
- Playwright 1.60.0 продолжает развивать браузерное тестирование.
- Julia Evans показала, как тестировать Vue-компоненты прямо в браузере.
- React Review проверяет PR на плохие React-паттерны в новых изменениях.

🦊 Лишья шутка недели:
TanStack пережил supply chain атаку, а npm снова напомнил: npm install звучит как команда, но иногда это жанр хоррора.

Rolldown 1.0 стал штабильным, Vite 8 уже где-то разминается, а webpack тихо смотрит в окно и говорит: «я тоже когда-то был быстрым в душе». Кстати, ходят слухи, что v6 не за горами.

Bun добавил обработку изображений, HTTP/3 и ещё пол-кухни. Осталось дождаться Bun.dentist(), потому что Лишу уже больно читать changelog.

Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-46/
264👍41🤣1
Документация Node.js v25

Насткнулся на проект. Это перевод официальной документации Node.js. Сделано для v25, уже хорошо, что не для 16 =)

В закладки: https://nodejsdev.ru/api/
7
🦊 Привет, это Фронти!

Я принёс свежий выпуск #47 и собрал главное за неделю

В этом выпуске: Google I/O показал WebMCP, HTML-in-Canvas и Baseline Checker, Firefox 151 добавил Document Picture-in-Picture, CSS получил round() и gap decorations, npm усиливает защиту staged publishing, Express обновил сайт и документы, React-экосистема снова обсуждает RSC, а Node.js 26.2 стабилизировал stream.compose.

🧪 HTML и веб-платформа
- Google I/O 2026 принёс WebMCP для связи сайтов с AI-агентами, Baseline Checker и идеи для AI-навыков прямо в Chrome.
- HTML-in-Canvas пробует соединить привычные HTML-элементы с гибкостью canvas для сложной графики и редакторов.
- Firefox 151 добавил Document Picture-in-Picture на десктопе и CSS @container style() queries.
- Поддержка RTL-языков снова напоминает: иногда два атрибута dir и lang чинят больше, чем неделя костылей.

🎨 CSS и интерфейсы
- CSS round() помогает делать fluid-размеры предсказуемее и аккуратнее.
- Gap decorations позволяют стилизовать промежутки между grid, flexbox и multi-column элементами без лишних обёрток.
- Julia Evans рассказала, как уход от Tailwind к обычному CSS помогает лучше увидеть структуру страницы.
- Cross-document View Transitions выглядят магически, но требуют внимания к состояниям, именам элементов и деталям реализации.
- Темы, CSS-фоны, shorthand-свойства и reset-кнопки снова доказали: CSS умеет быть и красивым, и коварным.

📦 JavaScript
- JSONRegistry предлагает способ сохранять и восстанавливать сложные пользовательские типы через JSON.
- Brownies даёт удобный API поверх cookies, storage и IndexedDB.
- Alien Signals добавляет маленькое реактивное ядро в духе Vue, Preact и Svelte.
- У Bun снова обсуждают Rust-порт и качество AI-портированного кода.
- История 2ality напоминает, как AI-краулеры уже меняют поведение авторов в открытом вебе.

⚛️ React и фреймворки
- Component Party сравнивает React, Vue, Svelte, Angular и другие фреймворки на одних и тех же задачах.
- TanStack показывает React Server Components как идею, а не только как фичу Next.js.
- Storybook 10.4 добавил первую поддержку TanStack React.
- Redux Toolkit, React Redux, Jotai, Fate, Rockpack и календарные компоненты тоже получили свежие обновления

🛰️ Сборка и фреймворки
- Angular 22 приближается к финальному релизу.
- Миграция с Webpack на Rspack снова показывает, насколько сильно Rust-инструменты могут ускорять сборку.
- Rolldown 1.0.1 продолжает готовить быстрый фундамент для будущего Vite.
- Vavite переносит удобства Vite в серверные приложения.
- Qite.js делает ставку на HTML, SSR, отсутствие build step и минимум магии

📘 TypeScript
- TypeORM 1.0 наконец вышел из долгой ветки 0.x и стал взрослее для production-проектов.
- Kanel 4.0 генерирует TypeScript-типы из Postgres и помогает держать схему БД ближе к коду.
- Vue.js Language Tools 3.3 улучшает поддержку Vue-файлов в редакторах.
- Deno 2.8 готовит поддержку TypeScript 6.0.3.

⚙️ Node.js и рантаймы
- Express получил новый сайт, бренд и обновлённую документацию. Старый дефолт явно решил выглядеть живым.
- npm вводит staged publishing и обсуждает opt-in для install scripts, чтобы supply chain атакам было сложнее жить.
- Новая волна Mini Shai-Hulud затронула 300+ npm-пакетов.
- Node.js 26.2 стабилизировал stream.compose, а fs.Stats начал поддерживать Temporal.Instant.
- Deno 2.8 обещает улучшенную совместимость с Node.js.
- Bun 1.3.14 добавил Bun.Image, HTTP/2, HTTP/3 и новые улучшения совместимости.
- В Node.js через FFI уже запустили Doom в терминале, потому что JavaScript должен уметь всё, даже когда его об этом не просили.

🦊 Лисья шутка недели:
Google показал WebMCP, чтобы сайты могли разговаривать с AI-агентами напрямую. Фронтендеры в этот момент всё ещё пытаются договориться с z-index, но переговоры идут тяжело.

npm добавил staged publishing, потому что экосистема наконец признала: npm publish не должен ощущаться как кнопка «выпустить дракона в прод».

Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-47/
16👍3🔥1
🦊 Привет, это Фронти!

Я принёс свежий выпуск #48 и собрал главное за неделю

В этом выпуске: Chrome экспериментирует с declarative partial updates и безопасным HTML-стримингом, CSS снова обсуждает центрирование, layout gaps и view transitions, npm усиливает защиту публикаций и install scripts, Deno 2.8 резко подтягивает совместимость с Node.js, React отмечает 13 лет, а AI-инструменты всё чаще требуют не скорости, а внимательной проверки.

🧪 HTML и платформа
- Chrome пробует Declarative Partial Updates: <template for>, setHTML() и streamHTML() могут сделать динамический HTML более декларативным и безопасным.
- Manuel Matuzovic напомнил, почему aria-label на обычных div и span часто не даёт ожидаемой доступности.
- Web Components снова выглядят практичным фундаментом для дизайн-систем, которые должны жить между React, Vue, Svelte и другими мирами.

🎨 CSS и интерфейсы
- Современное центрирование в CSS стало мощнее: grid, flexbox, place-content и anchor positioning закрывают всё больше кейсов.
- CSS Layout всё ещё не идеален: разработчикам не хватает более выразительных инструментов для сложных сеток и адаптивных интерфейсов.
- sibling-index() и sibling-count() помогают строить математические раскладки без лишнего JavaScript.

📦 JavaScript
- Mozilla готовится окончательно попрощаться с asm.js: WebAssembly уже давно занял его место для производительного кода в браузере.
- JS Crossword проверяет знание странностей JavaScript и напоминает, что язык всё ещё умеет удивлять даже опытных людей.
- ECharts, Perspective, Partytown и @atproto SDK получили обновления для визуализации, производительности и ESM-экосистемы.

⚛️ React и фреймворки
- React исполнилось 13 лет, и экосистема отметила это максимально по-реактовски: любовью, усталостью и длинными обсуждениями.
- React Router 7.16 готовит проекты к будущему v8 через стабилизированные future-флаги.
- Материалы про React at 60 FPS снова напоминают: производительность начинается не с memo, а с понимания кадра.

⚙️ Node.js и рантаймы
- Deno 2.8 резко приблизился к Node.js-экосистеме: совместимость выросла до 76.4%, а npm: больше не нужен при установке пакетов.
- npm включил staged publishing, новые --allow-* флаги и первые шаги к opt-in политике install scripts.
- Mini Shai-Hulud снова напомнил, что supply chain — это не абстрактная страшилка, а реальный риск для npm-проектов.
- Node.js 24.16 LTS добавил crypto.randomUUIDv7(), hex-цвета в util.styleText и рандомизацию порядка тестов.
- Streams в Node.js могут протекать даже с pipeline(), если забыть про реальные сбои, таймауты и отключившихся клиентов.

🤖 ИИ
- Google выпустил Modern Web Guidance для AI-агентов, но специалисты по доступности уже напоминают: подсказки не заменяют понимание платформы.
- AI-разработка может ускорять код и одновременно выжигать разработчика, потому что проверять и удерживать контекст всё равно приходится человеку.
- State of Web Dev AI 2026 показывает, как разработчики реально используют AI и чего опасаются.
- Flue от Astro предлагает TypeScript-фреймворк для программируемых AI-агентов поверх Node.js.

🦊 Лисья шутка недели:
Chrome добавил streamHTML(), и теперь фронтендеры наконец смогут стримить HTML безопасно — то есть делать то же самое, что раньше, только с меньшим ощущением, что DOM сейчас спросит: «а ты точно знаешь, что вставляешь?»

А Deno с совместимостью Node.js на 76.4% выглядит как разработчик, который говорил «я не такой, как npm», а потом всё равно пришёл на встречу в худи с node_modules.

Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-48/
1❤‍🔥5👍2
Пока Фронти уехал думать в лес, я решил подготовить праздничное событие. У нас с вами наступил 50 выпуск. В эту круглую дату можно поиграть в Wordle про CSS-фичи. Вы же не забыли, что я известный в узких кругах CSS-исследователь? =) Я взял все данные про CSS. Прогнал через кучу фильтров и выжал из данных только хардкор. Например, xywh как вам CSS-фича? Как такое вообще угадать?

Вы можете пройти по адресу https://frontend-weekly.ru/css-wordle/ и поиграть. 1 угаданное слово = 1 балл в рейтинге. Правда надо залогиниться с помощью github, думаю это не проблема, чтобы поучаствовать в рейтинге. Спустя месяц я подведу итоги и выдам призы первой тройке игроков. Точную дату я напишу позже.

Я считаю, что игру пройти невозможно, но занять какое-то призовое место будет приятно.

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

Всем удачи!

PS: если найдёте баги, то пишите в личку. А также поделитесь постом с коллегами. Пускай поймут, что CSS это сложно =)
6
Пока человек там, что-то бубнит себе под нос, я вообще-то подготовил новый выпуск!

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

Я принёс юбилейный выпуск #50 и собрал главное за неделю

В этом выпуске: Safari 27 beta привёз пачку новых возможностей платформы, HTML-first подход снова показал силу обычных форм, CSS получает @function, gap decorations и View Transitions, Angular 22 стабилизирует важные части фреймворка, VoidZero переезжает к Cloudflare, React Compiler готовит Rust-порт, npm v12 ужесточает install scripts.

🧪 HTML и платформа
- Safari 27 beta добавил кастомизируемый <select>, sizes="auto", новые CSS-возможности и улучшения ESM/WASM.
- HTML-first кейс показал, что обычные серверные формы эффективнее дорогих SPA-переделок.
- Контекстные заголовки и headingoffset помогают компонентам не ломать структуру страницы при переиспользовании.

🎨 CSS и интерфейсы
- CSS @function делает стили ближе к настоящим вычислениям без препроцессора.
- Gap decorations позволяют стилизовать промежутки в grid и flex без псевдоэлементов и лишних обёрток.
- CSS View Transitions между документами дают обычным сайтам плавность приложения без клиентского роутера.
- WebKit выпустил интерактивный справочник по CSS Grid Lanes.

Доступность и UX
- Порядок фокуса обычно не нужно размечать вручную, если HTML и визуальная структура уже нормальные.
- Мифы о доступности снова разобрали практично: «дорого», «потом» и «нашим не нужно» всё ещё плохие аргументы.
- Дизайн-системы теперь приходится готовить не только для людей, но и для AI-инструментов.

⚛️ React и фреймворки
- Angular 22 стабилизировал Signal Forms, Angular Aria и асинхронную реактивность.
- VoidZero присоединился к Cloudflare, а Vite-экосистема получила фонд на 1 миллион долларов.
- Rust-порт React Compiler уже близко к тестированию.
- React Foundation запустил новый сайт, а репозиторий React переехал из facebook/react в react/react.

📦 JavaScript
- Source maps помогают отлаживать продакшен, но без контроля доступа могут случайно раскрыть исходники.
- NoLoJS напоминает: часть привычных JS-задач уже можно закрыть HTML, CSS или совсем маленьким скриптом.

📘 TypeScript
- TypeScript хорошо выводит type variables, но всё ещё не умеет читать мысли разработчика.

⚙️ Node.js
- npm v12 перестанет автоматически запускать install scripts по умолчанию.
- Node.js переходит к одному major-релизу в год, начиная с Node 27.
- npm supply chain снова шумит

🧬 Рантаймы, сборка и WASM
- Deno снова обсуждают через вопрос идентичности: веб-стандарты и zero-config или всё больше совместимости с Node.js.
- Bun стал поводом поговорить о том, как AI меняет open source-инфраструктуру.
- Electron 43 beta ускоряется за счёт Node snapshot, V8 bytecode cache и оптимизации бинарника.
- Rolldown 1.1 и Emscripten 6.0 продолжают двигать сборку и WASM-инструменты вперёд.

🤖 ИИ
- В эпоху coding agents ценность всё сильнее смещается к вкусу, проверкам, владению продуктом и умению давать модели строгую обратную связь.
- VS Code Agent Hook показывает, как IDE постепенно становится средой для совместной работы человека и агента.

🦊 Лисья шутка недели:
Safari 27 beta добавил кастомизируемый <select>, и где-то фронтендер впервые за долгое время посмотрел на нативный HTML-элемент без выражения «сейчас я тебя перепишу на div».

npm v12 отключает install scripts по умолчанию, а node_modules впервые почувствовал, что к нему пришли не с доверием, а с ордером на обыск.

HTML-first сайт удвоил число завершённых форм, и одна SPA в этот момент тихо открыла DevTools, чтобы понять, как обычная форма прошла собеседование без 17 провайдеров состояния.

Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-50/
19
🦊 Привет, это Фронти!

Я принёс свежий выпуск #51 и собрал главное за неделю

В этом выпуске: MDN подключается к AI-агентам, Babel 8 окончательно выбирает ESM, React Compiler переписывают на Rust, TypeScript 7 добрался до RC, Node.js закрывает 11 уязвимостей, npm готовится отключить install scripts, а WASI 0.3 приносит асинхронность в WebAssembly.

🧪 HTML и платформа
- MDN представила официальный MCP-сервер: AI-агенты смогут сверяться со свежей документацией и поддержкой API прямо во время работы.
- WebKit напомнил главное правило кастомизируемого <select>: текст в <option> нельзя заменять одними иконками и цветом.
- В WHATWG предложили встроенное локализованное отображение времени без дополнительного JavaScript.
- Chrome экспериментирует с потоковым HTML через textStream(), а Firefox 152 получил field-sizing.

🎨 CSS и дизайн
- У CSS @function обнаружились важные особенности области видимости, которые стоит учитывать авторам библиотек.
- Для 3D View Transitions недостаточно повесить perspective на привычного родителя: псевдоэлементы живут в отдельном дереве.
- Круговые диаграммы, текстурированные 3D-модели и реактивные эффекты всё увереннее собираются средствами CSS — иногда даже без Canvas и WebGL.

📦 JavaScript
- Babel 8 вышел спустя примерно восемь лет после прошлого major-релиза: теперь только ESM, встроенные TypeScript-типы и никаких ES5 с CommonJS по умолчанию.
- zod-compiler превращает Zod-схемы в быстрые валидаторы, а Compilecat исследует глубокую оптимизацию целых программ.
- В eslint-plugin-unicorn уже 200 строгих правил — включая рекомендации предпочитать Temporal и HTTPS.

⚛️ React и фреймворки
- React Router 8 сознательно выбрал предсказуемый релиз без архитектурной революции. Иногда «скучно» — это именно то, чего хочется от роутера.
- Rust-версия React Compiler вошла в основной репозиторий React и постепенно появляется в Next.js, SWC, Oxlint и Rolldown.
- React Redux экспериментирует с signals для более точечных обновлений компонентов.
- SvelteKit 3, Vue 3.6, Vite 8.1 и Astro 7 одновременно готовят новые версии.

📘 TypeScript
- TypeScript 7.0 дошёл до RC: будущий major уже можно проверять на настоящих проектах.

⚙️ Node.js
- В поддерживаемых ветках Node.js закрыли 11 уязвимостей, включая две проблемы высокой серьёзности.
- npm 12 перестанет автоматически выполнять install scripts: опасные postinstall больше не смогут притворяться обычной частью знакомства.
- Поддельное тестовое задание от «рекрутера» оказалось Node.js-проектом с бэкдором. Ещё один повод сначала читать чужой код в изоляции и только потом запускать.

🧬 WebAssembly
- WASI 0.3 добавляет нативную асинхронность компонентам WebAssembly для сети, файлового ввода-вывода и долгих операций.
- Старый USB-сканер удалось вернуть к жизни через WASM-эмулятор и WebUSB прямо в браузере.

🤖 ИИ
- TanStack AI вышел в beta и предлагает единый слой для разных моделей, провайдеров и UI-фреймворков.
- Веб-семантика, доступность и понятная структура страниц снова выглядят полезнее специальных API только для агентов: хороший веб понятен и людям, и машинам.

⚒️ Инструменты
- Playwright 1.61 научился тестировать passkeys и напрямую управлять localStorage и sessionStorage.
- Biome преодолел отметку в 500 правил, а ESLint 10.5 стал точнее подсвечивать проблемный код.

🦊 Лисья шутка недели:
React Router 8 назвали «скучным», и фронтендеры впервые обрадовались: роутер наконец перестал быть главным сюжетным поворотом приложения.

npm отключает install scripts по умолчанию. Теперь пакетам придётся спрашивать разрешение, прежде чем скачать бинарник, пересобрать полпроекта и загадочно прогреть ноутбук.

А Babel 8 перешёл только на ESM — где-то один древний require() уже пишет пост: «После восьми лет вместе меня просто экспортировали из отношений».

Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-51/
14👍3