Expa

Mar 13 11:58

План статей на ближайшее время

Сейчас передо мной стоит задача разобраться с CSS-спецификациями посвещённые работе скролов.

CSS Overflow Module Level 3, Level 4, Level 5
✅ CSS Scroll Snap Module Level 1, Level 2 (Статья в блоге)
✅ Scroll-driven Animations
✅ CSS Scroll Anchoring Module Level 1 (Статья в блоге)
✅ CSS Overscroll Behavior Module Level 1 (Статья в блоге)
✅ CSS Scrollbars Styling Module Level 1 (Статья в блоге)

In bundle

plan

frontend

css

scroll

Oct 11 22:04

Дайджест #66

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

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

В этом выпуске: Cloudflare открыла данные о реальной скорости веба, Chrome 155 получил JPEG XL, CSS учится сам ставить tooltip’ы на место, Deno присоединяется к Cloudflare, Next.js включает Cache Components по умолчанию, Preact 11 и Remix 3.0 выходят на новый виток, а TypeScript 7 уже пытаются переписать на Rust.

🧪 HTML и платформа

Cloudflare открыла ежедневно обновляемый набор реальных Core Web Vitals с 10 000 крупных сайтов — в том числе с данными Safari/WebKit.
Chrome 155 получил JPEG XL: компактнее изображения, HDR и современные возможности сжатия.
Открыт State of HTML 2026: можно повлиять на приоритеты развития браузерной платформы.
progress(), alpha() и revert-rule теперь доступны во всех основных браузерах.
SVG 2 приблизился к статусу рекомендации W3C.
Свежий опрос WebAIM напоминает: доступность нельзя сводить к одному автоматическому прогону.
95% сайтов авиакомпаний не проходят Core Web Vitals на мобильных — хороший повод тестировать не только на своём MacBook.
Платформа снова предлагает перед установкой библиотеки проверить, не умеет ли это уже браузер.

🎨 CSS и интерфейсы

CSS Anchor Positioning берёт на себя привязку tooltip’ов и выпадающих меню: меньше измерений, подписок и JavaScript.
Dart Sass 2.0 выйдет в декабре, а нынешние предупреждения о старом синтаксисе станут ошибками.
Panda CSS 2.0 получил Rust-компилятор, дизайн-системы и поддержку View Transitions.
children-count() позволяет адаптировать стили к числу дочерних элементов.
CSS Doodle продолжает доказывать, что CSS — ещё и отличный генератор узоров, фонов и иконок.
Появились удобные заготовки для доступных bottom sheet на CSS Scroll Snap и scroll-driven animations.

📦 JavaScript

Deno присоединяется к Cloudflare: рантайм и edge-инфраструктура становятся ещё ближе.
astromd4x обещает ускорить Markdown-рендеринг в Astro в 50–70 раз.
µsignal предлагает реактивность в примерно 816 байтах с Brotli.
wasm-git переносит Git на WebAssembly — использовать его можно и в Node.js, и прямо в браузере.
Amber компилирует типобезопасный язык в Bash, помогая поймать ошибки до запуска скрипта.

⚛️ React и фреймворки

Next.js 16.4 рекомендует Cache Components по умолчанию для новых приложений.
Preact 11 принёс Hydration 2.0 и автоматическую передачу ref.
Remix 3.0 вышел из стабильной ветки и больше не построен на React.
TanStack Charts 1.0 предлагает типизированные графики для SVG и Canvas.
React Aria Sheet добавляет доступную свайпаемую нижнюю панель на scroll snapping и view timelines.
MSW 3.0 стал ESM-only, получил GraphQL-подписки и похудел.
Lexical 0.51 тоже перешёл только на ESM — эпоха require() продолжает сдавать позиции.

📘 TypeScript

digest

frontend digest

html

css

javascript

node.js

react

typescript

yandex

Oct 07 18:03

Дайджест #65

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

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

В этом выпуске: Chrome готовит контроль подключений страницы, GitHub ускорил серверный рендеринг с помощью CSS Modules, у JavaScript скоро появятся новые методы итераторов, Remix 3 вышел без обязательного React, а Vite+ собрал инструменты разработки под одной командой.

🧪 HTML и браузерная платформа

Chrome 152 получит Connection-Allowlist: сайт сможет указать, к каким серверам странице разрешено подключаться.
Разработчики обсуждают будущие возможности браузеров — от Sanitizer API до новых способов управления фокусом и CSS-сетками. Пока это предложения.
Нолан Лоусон напоминает: прежде чем ставить библиотеку, стоит проверить, не умеет ли браузер уже решать эту задачу.

🎨 CSS и интерфейсы

GitHub за три года перешёл со styled-components на CSS Modules. По измерениям команды, время серверного рендеринга сократилось на 55%.
CSS-эксперименты добрались до обнаружения пересечения элементов и получения сведений о Grid без JavaScript.
Контейнерные запросы помогают подстраивать компонент под место, которое ему досталось, а не только под ширину экрана.

📦 JavaScript

Три новых метода итераторов — chunking, join и includes — достигли финальной стадии стандартизации.
Разбор объектов без прототипа показывает, как сохранить быстрый доступ к свойствам даже после удаления прототипа.
А если хочется чего-то совсем другого, Take on Me воссоздали целиком на JavaScript, включая вокал.

⚛️ Библиотеки и фреймворки

Preact 11 улучшил гидрацию и работу с ref, но теперь публикуется только как ESM.
Remix 3 вышел без обязательной зависимости от React.
Nuxt 4.6 экспериментирует со сборкой серверной части через Vite, а SvelteKit 3 приводит в порядок существующие возможности.
Angular разрабатывает компоненты нового компилятора на Rust, Vinext 1.0 переносит возможности Next.js на Vite.

📘 TypeScript

digest

frontend digest

html

css

javascript

react

typescript

node.js

Sep 26 10:59

Дайджест #64

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

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

В этом выпуске: браузеры готовят нативные превью изображений, DuckDB хранит полноценную базу прямо на клиенте, CSS продолжает избавляться от JavaScript, tinyjs собирает desktop-приложения легче 10 МБ, GitHub рендерит миллионные диффы за пределами React, а Transformers.js запускает всё больше AI-моделей через WebGPU.

🧪 HTML и платформа

Атрибут previewsrc может передать браузеру загрузку и замену размытого превью изображения.
DuckDB-Wasm вместе с OPFS превращает вкладку в приложение с полноценной локальной базой данных.
Chrome 154 научился адаптировать размер iframe под его содержимое.
Chrome, Edge и DevTools продолжают готовить веб к работе с AI-агентами через MCP и новые платформенные API.

🎨 CSS и дизайн

Нативная вложенность, :has(), современные цвета и другие возможности CSS уже закрывают задачи, ради которых раньше подключали препроцессор или JavaScript.
Scroll-triggered animations запускают эффекты в нужной точке прокрутки и дополняют scroll-driven animations.
CSS-функция round() помогла победить дрожащие индикаторы загрузки в Safari.
Хорошая дизайн-система — это ограниченные варианты и общие токены, а не компонент с сорока семью пропсами.

♿ Доступность и развитие

frontend digest

digest

html

css

javascript

typescript

node.js

react

Sep 19 12:42

Дайджест #63

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

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

В этом выпуске: Safari 27 и Chrome 153 расширяют HTML, React 19.3 стабилизирует View Transitions, Node.js 26.9 открывает дорогу к нативным библиотекам, pnpm объединяет три экосистемы, WebMCP готовит сайты к общению с агентами, а открытые Vite-серверы снова напоминают беречь .env.

🧪 HTML, браузеры и доступность

Safari 27 улучшил формы, адаптивные изображения и CSS, а top-level await теперь надёжно работает во всех основных браузерах.
Chrome 153 добавил HTML-элементы <camera> и <microphone> для более понятного запроса доступа к устройствам.
Новые <geolocation>, <install>, настраиваемый <select> и HTML внутри Canvas постепенно превращают браузер в полноценный UI-фреймворк.
Front-End Checklist вырос почти до 400 правил, а сложные таблицы всё ещё важно проверять реальными скринридерами.

🎨 CSS и дизайн

frontend digest

digest

html

css

javascript

typescript

node.js

react

Sep 14 20:34

Дайджест #62

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

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

В этом выпуске: HTML спокойно избавляется от наследия старых браузеров, CSS учится связывать компоненты почти без JavaScript, Safari наконец исправляет top-level await, React 19.3 стабилизирует Fragment Refs и View Transitions, Shopify возвращается к Swift и Kotlin, а Node.js готовит встроенные бенчмарки.

🧪 HTML и веб-платформа

В большом обзоре собрали новые HTML-возможности 2026 года: эксперименты с геолокацией, камерой, микрофоном, 3D-моделями и Canvas.
Условные комментарии, X-UA-Compatible, старые настройки ClearType и даже initial-scale=1.0 во многих случаях можно спокойно оставить в прошлом.
W3C собирает обратную связь о будущем веб-стандартов, а браузерные команды уже принимают предложения для Interop 2027.
Chrome перешёл на двухнедельный цикл обновлений. Веб-платформа теперь обновляется почти так же часто, как список зависимостей в чужом package.json.

🎨 CSS и дизайн

Lea Verou предлагает переосмыслить переключатели тёмной темы: если сайт хорошо следует системным настройкам, отдельная кнопка может быть просто не нужна.
Typed attr() вместе с container style queries позволяют передавать состояние компонента через HTML-атрибуты и принимать решения в CSS — без дополнительных классов и JS-обвязки.
CSS Anchor Positioning помогает анимировать перестроение Grid, а современные CSS-свойства заметно упрощают кастомные scrollbar.
Drawably добавляет в интерфейсы рисованные анимированные элементы всего с несколькими килобайтами JavaScript.

🔐 Безопасность и доступность

Исследование PortSwigger показало, что CSS в веб-почте может быть инструментом атаки: подменять интерфейс, обходить прокси изображений и собирать данные.
Dropbox автоматизировала аудит cookie на сотнях внутренних поверхностей.
WCAG Radar проверяет текущую страницу по WCAG 2.1 и 2.2 AA прямо в браузере.
SimpleWebAuthn 14.0 добавил поддержку постквантовых passkey.

frontend digest

digest

html

css

javascript

typescript

node.js

react

Sep 06 12:42

Дайджест #61

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

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

В этом выпуске: Firefox ускоряет доставку новых возможностей, CSS учится случайности и распознаёт составные фичи, «Сапёр» помещается в 247 байт, htmx 4 обновляет DOM прямо из HTML, Remix расстаётся с React, Bun всё ближе к Node.js, а pnpm переписывается на Rust.

🧪 HTML и веб-платформа

Firefox 155 добавил новые возможности для attr(), математические CSS-функции и переименование font-stretch в font-width.
Браузеры экспериментируют со словарём для проверки орфографии и подтверждением email без перехода по ссылке.
Google окончательно убрала расширения Manifest V2 из Chrome Web Store, а Firefox для iOS получил встроенный блокировщик рекламы.

🎨 CSS и дизайн

CSS-функцию random() уже можно использовать за пределами Safari с помощью небольшого полифила.
Новый @supports named-feature() проверяет поддержку не отдельного свойства, а целой составной возможности браузера.
Разработчики снова спорят, сколько состояний должно быть у переключателя темы: два или всё-таки три.
А ещё на чистом CSS собрали интерактивную игру — селекторы окончательно отказались признавать границы своих обязанностей.

frontend digest

html

css

javascript

browser

react

node.js

typescript

Sep 06 12:37

Город IT

13 сентября выступаю в Томске на конференции Город IT с докладом про WebMCP. Очередная спека, в которую я немного погрузился и решил поделиться тем, что я там откапал.

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

Из интересного. В Томске часовой пояс +4 к моему. Проверю будет ли джетлаг.

Ссылка на конфу: Город IT

gorod it

tomsk

Sep 06 12:37

HTML получил новые атрибуты

headingoffset и headingreset

Я в WHATWG спецификации наткнулся на новые атрибуты и решил в них разобраться. Стало только грустнее.

Помните эту проблему, когда есть компонент и в нём указан уровень заголовка. Ну например <h2>. Этот компонент можно вставить в такую структуру, в которой уровень заголовка нужно сменить на другой, ну например <h3>. Для смены уровня разработчик обычно добавляет новый пропс для этого компонента.

Я всё грезил тем, что данные решение можно автоматизировать на уровни HTML, что WHATWG дойдёт до условного тега hx, который автоматически разрулит уровни и сам поймёт вложенность, но чуда не свершилось.

headingoffset и headingreset повзволяют умно сменить уровни заголовоков, но и тут чуда не свершилось. Всё равно приходится за всем следить глазами и править руками.

Почитать подробнее можно в блоге: https://shabalin.online/blog/html/headingoffset-and-reset/

html

attributes

Aug 29 12:22

Дайджест #60

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

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

В этом выпуске: современный HTML отбирает работу у JavaScript, CSS балансирует flex-строки и готовится связывать переходы между страницами, Bun 1.4 переехал с Zig на Rust, Solid 2.0 заморозил новый API, а Node.js научился работать с ZIP без сторонних пакетов.

🧪 HTML и веб-платформа

popover, команды элементов и hidden="until-found" позволяют собирать всё больше интерактивных сценариев без JavaScript.
Firefox 154 получил новые CSS-возможности, а sibling-index() и sibling-count() добрались до Baseline.
Firefox и Chrome готовят поддержку JPEG XL с хорошим сжатием, HDR и широкой цветовой гаммой.
Исследование 657 тысяч адресов показало масштаб link rot: старые страницы переезжают, исчезают и постепенно уносят с собой знания.

🎨 CSS и дизайн

frontend

frontend digest

html

css

javascript

typescript

react

node.js

About

План статей на ближайшее время

Дайджест #66

Дайджест #65

Дайджест #64

Дайджест #63

Дайджест #62

Дайджест #61

Город IT

HTML получил новые атрибуты

Дайджест #60

<div>

<section>

<main>

h1