Неостановимый

Привет! Рад сообщить о создании нового проекта — https://webpatterns.ru/

Веб-паттерны — это когда разработчик использует уже существующие решения, которые проверены временем и сообществом, и признаны стабильными.

В целом идея проекта не новая, но есть несколько причин, по которым я хотел бы, чтобы такой ресурс существовал в интернете:
- современные подходы;
- мнение сообщества, а не одного разработчика;
- возможность повлиять на паттерны — своеобразная база данных, объясняющая, почему одно решение может оказаться плохим, а другое, пусть даже очень старое, — лучше.

Проект будет смотреть в будущее, чтобы тянуть отрасль вперёд и не давать ей стагнировать. Поэтому могут использоваться современные свойства, методы — да что угодно. =) Ну как современные. Некоторым свойства уже десять лет, а они всё ещё могут игнорироваться =(

На первое время упор будет делаться на UI: пагинация, хлебные крошки, навигация, логотипы, кнопки, модальные окна, попапы, дроверы и прочее. Далее UX: копирование, работа с файлами, сетки, PWA. В целом, посмотрим как пойдёт, но с планом лучше, чем без плана.

Сейчас проект находится в бета-версии для сбора обратной связи. У меня есть куча идей по улучшению, но вместо того, чтобы всё это варилось только в моей голове, я хочу воспользоваться вашим мнением. Приходите и делитесь своими идеями — я всё выслушаю.

Первый паттерн самый простой — центрирование контента на странице. Я начал с элементарного однострочного решения для центрирования.
https://webpatterns.ru/patterns/centering-page/

PS: я уже писал, что есть парочка идей для проектов. Это один из них. Второй ждём всем селом =)

"Ты не хлеб, но без тебя жизнь пустая, крошка"

Привет. Верстал хоть раз хлебные крошки? Давай вместе придумаем отличное решение для хлебных крошек.

Приходи обсуждать https://github.com/nikolai-shabalin/webpatterns/discussions/3, а я потом паттерн создам на https://webpatterns.ru/

Что такое scroll chaining и как его контролировать?

Вчера ковырялся с хлебными крошками и случайно откопал CSS-свойство, которое как-то прошло мимо меня — overscroll-behavior.
Оказалось, его внедрили в браузеры ещё в 2017, а в 2019 появилась логическая версия.

Представьте: вы скроллите модалку, доезжаете до конца и… вместо остановки браузер начинает прокручивать основной документ. Это и есть scroll chaining. На мобильных это ещё и сопровождается bounce-эффектом или pull-to-refresh. Для некоторых интерфейсов такое поведение выглядит странно и даже ломает UX.

overscroll-behavior позволяет взять это под контроль, избавиться от костылей вроде overflow: hidden с JavaScript и аккуратно управлять поведением прокрутки.

Всё что узнал запаковал в статью https://shabalin.online/blog/css/overscroll-behavior/

Приятного чтения!

Аутлайны

Аутлайны нужны. Аутлайны не нужны. Если нужны, то должны быть красивыми. Если отключить, то придумать замену. Если сложный многогранный элемент, то не нужны, но надо что-то придумывать.
На проекте есть тёмная тема. Какое там медиавыражение было? А теперь менять для всех элементов?

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

https://webpatterns.ru/patterns/focus-outline/

Божечки-кошечки

Мой любимый пет-проект (https://nikolai-shabalin.github.io/css-properties/) попал в популярную рассылку по фронтенду.

Я так счастлив вы бы знали 😊

State of CSS 2025

Прошёл State of CSS 2025. Я с ним ознакомился и собрал для вас выжимку. Почитать можно всё там же https://shabalin.online/blog/css/stateofcss-2025/

Из интересного:

Среди всех функций наибольшую популярность и положительные оценки получил селектор :has(). Его применяли 80 % участников, при этом 51,5 % высказывают о нём положительное мнение. Второе место по любви занял Subgrid, а третье — aspect‑ratio.

Завтра подводим итоги розыгрыша.

У нас целых два участника. Шансы 50/50 =)

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

У нас было два участника с их интересными историями про IT. Нужно с помощью рандомайзера выбрать победителя.

Коля: запускает рандомайзер
Рандомайзер: «Коля, их всего двое. Ты меня заставляешь использовать процессорное время, чтобы выбрать 1 или 2? Ты совсем уже? Отдай ребятам билеты и не беспокой меня больше по таким пустякам».
Коля: Ладно.

@Mishok21 и @IISergey, спасибо за участие и ваши истории. Поздравляю с победой! Обязательно с пользой проведите время: заведите новые знакомства и узнайте что-нибудь новое.

А все положительные эмодзи к этому посту адресованы вам! Грац! 🎉

Как делаем masonry раскладку?

Вышла вторая часть про masonry в блоге вебкита. Ребята всё ещё собирают обратную связь от разработчиков интерфейсов.

Предпочтение они до сих отдают ItemFlow во флексовом и гридовом контекстах, вместо нового display: masonry

Ознакомиться можно тут
https://shabalin.online/blog/css/item-flow-2/

Добрый день

Провёл доклад на Подлодке про View Transition API в браузере и в React, но это не отменяет свеженький выпуск дайджеста. Благо мне помогает Фронти.

На этой неделе Фронти выпустит новый дайджест, а я подготовлю новый паттерн. На следующей неделе, с Божьей помощью, запущу новый проект =) ждёмс

🦊 Привет, фронтендеры!
Фронти снова на связи — и принёс тебе дайджест #13. Не суеверный, а наоборот — полный вкусных новостей 🚀

SVG больше не магия — интерактивный гайд по path.
CSS-функции с @function — будущее уже в Chrome.
Anchor Positioning и 👀 Scrollspy на CSS — меньше JS, больше магии стилей.
Intl API — интернационализация без тяжёлых библиотек.
Lambda без холодных стартов — AOT-компиляция для молниеносного запуска.
jQuery 4.0 RC1 — живее всех живых.
Жёлтый и фиолетовый — могут дружить (и быть доступными).
Custom Highlight API — подсветка текста нативно в браузере.
React Native 0.81 и Next.js 15.5 — новые версии с ускорением.
Node 24.6.0 и Express в Cloudflare Workers — ещё удобнее и безопаснее.


📬 Читай полный выпуск с большим количеством новостей на frontend-weekly.ru

А я пойду проверю, не спрятался ли 14-й выпуск за дивом с hidden=until-found 🦊

Вопросик на ночь вам: зачем нам кастомные свойства в :root, вместо html?

👉 https://shabalin.online/blog/css/why-root/

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

На этой неделе можно оценить, а лучше обсудить хлебные крошки: 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/