✨ PiterJS #85 близко!

🎉 В следующий четверг 25 декабря в 19:00 подведём итоги 2025 года по фронту, бэку, да и просто веселимся перед праздниками.

📍 Впервые соберёмся в Т-Технологиях (Свердловская набережная, д. 44, стр. 2)

📰 Программа

🗣 19:10 Николай Шабалин
🎤 CSS: Итоги 2025 года

🗣 20:10 Игорь Антонов
🎤 Что нового в Node.js в 2025 году

🗣 21:00 Ярослав Силкин
🎤 PiterJS: игрофикация 2025 года

🎫 Регистрация: https://piterjs.org/#meetup=kts3br_ofrm4j

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

Встречайте дайджест #30! 🎉
HTML5-парсер за 4,5 часа с ИИ, CSS анимации по скроллу на чистом CSS, select теперь стилизуется нативно, бандлеры: размер важнее скорости, TypeScript 7 в разработке, React RSC: патчим уязвимости, Node 24.12 с TS из коробки, 30 лет JavaScript, JSON.stringify в 2 раза быстрее. Что интересного на этой неделе? 🚀

🧪 HTML и Платформа
- Стандартные стили для h1 меняются: браузеры обновили user agent styles.
- Select теперь можно стилизовать через CSS с appearance: base-select.
- Крутые нативные HTML-элементы: kbd, datalist, progress и другие.
- Дружелюбное введение в SVG и хлебные крошки «умерли» в веб-дизайне.

🎨 CSS и дизайн
- Анимации, привязанные к прокрутке, на чистом CSS — прогресс-бары и плавное появление.
- text-box-trim: контроль отступов над и под текстом.
- Шесть CSS-сниппетов, которые должен знать каждый фронтенд-разработчик.
- Современный CSS: popover, if(), field-sizing и 25 новых возможностей.

📦 JavaScript / TypeScript
- HTML5-парсер из Python в JS за 4,5 часа с помощью GPT-5.2 — прошёл 9200+ тестов.
- Бандлеры: скорость уже не главное, теперь важен размер итогового кода.
- 30 лет JavaScript! Празднуем юбилей самого популярного языка веба.
- JSON.stringify в 2 раза быстрее благодаря переписанному алгоритму V8.
- TypeScript 7 в разработке: улучшение производительности и метапрограммирование.
- TypeScript стал самым популярным языком на GitHub.

⚛️ React и фреймворки
- React RSC: ещё две уязвимости (DoS и утечка кода) — обновляемся срочно.
- «Невозможные» компоненты: как соединить клиент и сервер от Дэна Абрамова.
- RSC Explorer — визуальный инструмент для изучения серверных компонентов.
- React Scan для поиска проблем с производительностью.
- Управление состоянием в React 2025: Zustand vs Redux vs localStorage.

⚙️ Node.js и рантаймы
- Node 24.12 LTS: официальная поддержка TypeScript «из коробки» с type stripping.
- pnpm 10.26: ужесточение безопасности, контроль над скриптами.
- Deno 2.6: dx (аналог npx), deno audit, улучшенная совместимость с Node.js.
- 15 новых возможностей Node.js, заменяющих популярные npm-пакеты.
- Современные паттерны Node.js в 2025: ES-модули, Web API, нативный тест-раннер.

🦊 Лисья шутка недели:
Если HTML5-парсер можно портировать за 4 часа,
то почему мой проект всё ещё не готов?

🦊 Важное напоминание от лиса: к праздникам новостей станет чуть меньше, но мы продолжим приносить самые важные. 🎄

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

Уже сегодня. До встречи!

🦊 Фронти на связи!

«Привет, это Фронти!» — эту фразу вы слышали целых 30 раз в 2025 году. Пришло время свернуть хвостик калачиком: новых выпусков в этом году больше не будет. Все авторы статей разбежались по теплым краям отдыхать, и я их полностью поддерживаю. Мне тоже пора в свою уютную норку — набираться сил и видеть сны про эффективный код.

Но перед тем как нырнуть в спячку, я подготовил для вас праздничный отчёт о своих лисьих подвигах в 2025 году!

📊 Итоги в цифрах:

* 30 выпусков пролетели как одно мгновение.
* 1407 статей! Ого, сколько полезного мы натаскали в норку.
* 46.9 — среднее количество ссылок в одном выпуске.
* Июнь 2025 стал самым жарким: целых 289 статей за месяц!
* Любимые темы: После обязательных «Инструментов» вы больше всего шуршали в разделах «CSS и дизайн» (178 статей), «React и фреймворки» (170) и «Node.js» (148).


🦊 Лисья шутка недели:
— Почему лиса никогда не открывает сайты в Internet Explorer?
— Потому что даже дикий зверь знает, когда пора валить в лес!


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

Огромное лисье спасибо:
Всем читателям — за то, что вы с нами. Тем, кто пишет добрые слова — они греют лучше любого меха! И отдельные благодарности тем, кто поддерживает нас донатами и звёздами. Ваша поддержка — это важно для нас!

📅 Что дальше?
31-й выпуск выскочит из засады уже в январе 2026 года. Точную дату пока держу в секрете (на самом деле, жду, когда авторы доедят салаты и напишут что-нибудь новенькое).

Желаю всем в Новом году крепкого здоровья и невероятных успехов! Отдыхайте на полную катушку, чтобы с новыми силами вернуться в наш странный, но такой увлекательный мир фронтенда.

До встречи в 2026-м! Ваш Фронти 🦊✨

Что стало Widely available в Baseline в декабре 2025

Коротко:
• calc() keywords
• JavaScript modules in workers
• window.print() 😄

Длинно: https://habr.com/ru/articles/979276/

Когда дизайнер присылает макет с «инвертированным углом», начинаются страдания. Псевдоэлементы, абсолютное позиционирование, подгонка радиусов — и всё это разваливается, как только под карточкой появляется градиент или картинка.

Александр Першин написал nebo.css — опенсорсную библиотеку для впуклых углов. Название расшифровывается как negative border radius. По духу это как normalize.css: подключаете один CSS-файл, добавляете класс nebo — и угол готов. Работает на любых фонах, настраивается через CSS-переменные.

Разбираем, как это устроено: https://habr.com/ru/articles/987944/

GitHub: https://github.com/htmlacademy/nebo.css

В этот четверг встретимся в оффлайне

✨ Дождались! PiterJS #86 уже вот-вот!

Тематика этой встречи — интерфейсы. Так что интересно будет не только фронтендерам, но и дизайнерам.

⏰ Когда: 29 января 19:00
📍 Где: Selectel (Цветочная 19)

📰 Программа

🗣 19:10 Игорь Алексеенко
🎤 Что может фронтендер рассказать дизайнеру

🗣 20:10 Дмитрий Земляченко
🎤 Атомарные состояния в UI/UX

🗣 22:00 Александр Першин
🎤 Вырезы в блоках. Революция

🎫 Регистрация: https://piterjs.org/#meetup=16t4un_a87dnm

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

Встречайте дайджест #31.

Invoker: диалоги без JS, анимации с акселерометра, CSS Grid Lanes и @starting-style, фреймворки 2026 от Карниато, RSC и Next.js: патчи DoS, Node 25.5 и одиночный exe (SEA), AGENTS.md против скиллов, Bun быстрее, Yarn на Rust, ReliCSS для старого CSS. Что интересного на этой неделе?

🧪 HTML и Платформа
- Invoker Commands: открывать и закрывать диалоги и попапы без JavaScript.
- Анимации с акселерометра смартфона прямо в браузере — лучше смотреть на телефоне.
- Влияние производительности на UX и прогнозы по веб-доступности.
- Фокус в <dialog>: ловить его вручную больше не нужно.

🎨 CSS и дизайн
- CSS Grid Lanes: когда появятся и как пользоваться уже сейчас.
- Основы вёрстки: поток, box model и позиционирование.
- Отладка @starting-style в Chrome DevTools.
- Что нового в CSS в 2026, favicons в 2026, стекинг-контексты.

📦 JavaScript
- Обзор JavaScript-фреймворков на 2026 год от Райана Карниато (SolidJS).

⚛️ React и фреймворки
- DoS в React Server Components: патчи в 19.2.4, 19.1.5, 19.0.4 — обновляйтесь.
- RSC для максимальной производительности: доклад с ReactNext ’25.
- Как писать хорошие unit-тесты для React.
- DoS в self-hosted Next.js: фиксы в 15.5.10, 16.1.5 и canary.

⚙️ Node.js
- Node 25.5.0: сборка одиночного exe флагом --build-sea, node:sqlite, fs.watch с ignore.
- Бенчмарки Node 16→25, проверка уязвимостей, OpenSSL CVE, Redis-клиенты.
- Bun быстрее (async/await +35%), Yarn 6 на Rust в превью.

🧠 Ещё интересное
- AGENTS.md обходит «навыки» в эвалах — выводы Vercel.
- 100k строк TypeScript на Rust с помощью Claude Code.

🌐 Браузеры и инструменты
- Chrome Canary: метатег text-scale для доступности.
- ReliCSS ищет устаревший CSS, Color Palette Pro, Typewriter Web Component, Nxtlify для Nuxt UI.
- Lodash 4.17.23 с фиксом CVE.

🦊 Лисья шутка недели:
Если диалоги можно открывать без JS,
то почему у меня до сих пор три обработчика на одну кнопку?

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

Baseline: Январь 2026

Коротко:
• animation-composition
• Array by copy
• Two-value display property

Длинно: https://habr.com/ru/articles/987464/

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

Встречайте дайджест #32.

HTML учит геолокацию, Anchor Positioning вяжет связи в CSS, AI дебажит React (но сеньор пока нужен), эмодзи уронил дашборд — боль, Node 25.6 с SIMD и новым URL, Babel 7 финал и ESLint 10 на старте, OpenClaw — TS-агент захватил GitHub, State of JS: Hono — фаворит, Gatsby жив и дружит с React 19. Что ещё интересного на этой неделе?

🧪 HTML и Платформа
- Новый элемент <geolocation> — геолокация прямо из HTML.
- Combobox vs. Multiselect vs. Listbox: как не промахнуться с выбором.
- JPEG XL: нужен ли нам ещё один формат изображений?
- Один контент — множество «версий»: полезно для мышления про доступность.

🎨 CSS и дизайн
- CSS Anchor Positioning: рисуем «связи» между элементами без JS.
- «Слишком ранний брейкпоинт»: почему мы рано схлопываемся в одну колонку.
- Shrinkwrap-решение: ширина под переносимый текст в чистом CSS.
- Оптимизированные встраивания видео без JavaScript, Nice Select.

📦 JavaScript
- Явное управление ресурсами: using и Symbol.dispose — декларативный cleanup.
- Тротлинг отдельного сетевого запроса в Chrome DevTools.

⚛️ React и фреймворки
- AI дебажит React: краш-тест от Nadia Makarevich — AI помогает, но не заменяет.
- Эмодзи уронил дашборд: ускорение в 100× одной строкой.
- React <ViewTransition> — новый компонентный API для анимаций переходов.
- Inngest переехали с Next.js на TanStack Start — разбор и грабли.
- Gatsby v5.16 с поддержкой React 19 — жив!
- Классы мешают мемоизации React Compiler — данные вперёд, методы назад.

⚙️ Node.js
- Node 25.6.0: TextEncoder ускорили через SIMD, URL обновили до Unicode 17, можно отключать трекинг Promise в async_hooks.
- State of JS 2025: Express — самый популярный, Hono — самый любимый.
- Chalk → встроенный styleText: миграция без зависимостей.
- Bun v1.3.8: нативный парсинг Markdown.

🧠 Ещё интересное
- OpenClaw: open-source TS-агент, который за неделю взорвал GitHub.
- История TypeScript от Андерса Хейлсберга: как появился TS и зачем компилятор на Go.
- Angular меняет дефолт change detection, Astro 5.17, Svelte-дайджест.

🌐 Браузеры и инструменты
- Babel 7 — финальный релиз, Babel 8 RC уже готовится.
- ESLint 10.0.0 RC2 — можно трогать и готовить плагины.
- Lodash 4.17.23: security reset для вечной утилиты.
- jQuery UI 1.14.2 — теперь с jQuery 4.0.
- Rspress 2.0, Croner 10, focus-trap 8.0, jsdom 28.0.

🦊 Лисья шутка недели:
HTML теперь знает, где ты находишься,
CSS знает, к чему ты привязан,
а один эмодзи знает, как положить весь дашборд.
Фронтенд в 2026 — это детектив, а не разработка.

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

Corner-shape - проходной
Border-shape - легенда!

mlut (читается как "млат") - это CSS-фреймворк для кастомных сайтов и креативов. Он помогает верстать проекты с индивидуальным и нешаблонным дизайном, где не подходят фреймворки старой школы и плохо справляются LLM. mlut похож на Tailwind, поскольку основан на подходе Atomic CSS, но по некоторым параметрам превосходит все популярные аналоги.

Atomic CSS - это методология верстки, в которой мы используем маленькие атомарные классы, каждый из которых делает одно действие. Эти классы называют *утилитами*. Обычно они применяет одно CSS-свойство (например, цвет текста), но не обязательно одно. Выглядят они примерно так: D-ib, Bgc-blue_h.

Преимущества такого подхода

1. Тратим меньше мыслетоплива: не думаем о нейминге сущностей, структуре каталогов
2. Меньше CSS на клиенте: реиспользуем одни и те же утилиты, а новые стили почти перестают добавляться
3. Быстрее пишем стили: короткие классы, нет переключения файлов
4. Можно применять на любом стеке: JS SPA, PHP, Clojure, etc

Ключевые особенности mlut

1. Краткий и строгий нейминг. Сокращения основаны на популярности свойств CSS и составлены по единому алгоритму. Если вы знаете CSS, то вы почти знаете mlut
2. Богатый и нативный синтаксис. Это как Vim для CSS. Удобно создавать сложные стили с помощью мощного синтаксиса, концептуально близкого к CSS
3. Написан на Sass. Используйте всю мощь препроцессора для связи рукописного CSS и утилит

Что реализовано на сегодня

- генератор утилит почти любой сложности
- JIT-движок, который умеет генерировать утилиты из HTML/JSX/etc
- CLI с минификацией и автопрефиксером
- плагины для сборщиков фронтенда: Webpack, Vite и Rollup
- онлайн-песочница

Также есть обширная документация. Совместно с HTML Academy готовится интерактивный мини-курс по инструменту. Первый урок уже вышел. Это open source проект - результат глубокого ресерча и 1200+ часов труда. Больше технических деталей есть в расшифровке доклада с HolyJS.

Планы по развитию

- добавить еще возможностей CSS для сложной верстки: множественные градиенты, псевдоселекторы с аргументами, типа :has(), etc
- сделать интеграции для вайб-кодинга
- сделать плагины к IDE для автокомплита и подсказок

А недавно мы запустили проект на ProductRadar. Бодаемся там со стартапами за топ-3 продуктов этой недели. Будем благодарны за поддержку лайком на этой площадке и любой фидбек. Давайте покажем всем, что open source инструмент тоже может быть продуктом!

Боль Саши можно послушать на DUMP :)

DUMP SPB 2026 × HTML Academy

Весь внешний вид компонента — в CSS-переменных. JavaScript только переключает состояния. Звучит непривычно, но это рабочий подход.

На DUMP SPB 13 февраля Александр Першин выступит с докладом «Реактивный CSS» — про перенос логики отображения из JavaScript в стили. В докладе — сравнение двух реализаций одного компонента: классической на JS и реактивной на CSS. Можно будет оценить разницу в объёме и сложности кода.

Промокод PERSHIN — скидка 10% на билет.

Конференция · О докладе

DUMP

Завтра на весь день иду на DUMP. Программа очень обширная. Ещё даже не решил, что конкретно хочу послушать.

Мало ли кто там окажется подходите знакомиться.