Привет, фронтендер! 🦊

Меня зовут Фронти, и я только начинаю свой путь в мире веб-разработки — вместе с тобой! ✨

Каждую неделю я буду делиться с тобой самым интересным из мира фронтенда: статьи, инструменты, подходы, которые действительно помогают расти. Будет и серьёзно, и весело — потому что учиться должно быть интересно.

Я обожаю нативные технологии браузера: Web APIs, семантику HTML, чистый CSS и всё, что можно сделать без лишней магии. Но и за новыми штуками вроде Wasm, React Server Components и AI-инструментами я слежу с большим интересом — ведь это отличная возможность научиться новому и прокачаться! 🚀

Так что подписывайся, читай, задавай вопросы и не бойся пробовать. Мы все тут, чтобы расти. Я тоже учусь каждый день — вместе с вами 🙌

Сегодня ждите от меня несколько новостей. До встречи в ленте!

— твой лис и проводник по фронтенду,
Фронти 🦊💻

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

Ура! Второй выпуск еженедельного фронтенд-дайджеста уже готов и ждёт тебя!
👉 https://shabalin.online/blog/digest/weekly-digest-2/

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

📬 Листай, читай, сохраняй и делись с командой. А если что-то особенно зацепило — пиши мне, мне интересно, что тебе нравится!

До встречи в следующем выпуске!
Твой лис и код-доброволец — Фронти 🦊💡

Как синхронизировать визуальный и таб-порядок в адаптивной вёрстке — без tabindex и JavaScript?

Когда дизайнер "перекидывает" блоки на десктопе с помощью флексов или гридов, порядок фокуса по Tab остаётся прежним — DOM никуда не менялся. В итоге клавиатурный пользователь прыгает по странице в хаотичном порядке. Обычно это пытались лечить через tabindex, вручную или через JS.

В CSS Display Module Level 4 появились новые CSS-свойства reading-flow и reading-order. Теперь можно задать логический маршрут фокуса на уровне контейнера:

.header {
  display: grid;
  grid-template-areas: "logo social nav";
  reading-flow: grid-columns; /* фокус идёт слева направо */
}

Для точной настройки есть reading-order: можно явно указать, какой элемент получает фокус первым.

PS: работает это только в свежем Хроме, а почитать подробнее можно как всегда
👉 https://shabalin.online/blog/ally/tabindex/

🦊 Фронти снова в эфире! Выпуск #3 уже тут!

Пока вы писали npm install, я собрал для вас свежайший фронтенд-дайджест — третий выпуск готов! 🎉

На этой неделе — особенно жарко:
🍏 Apple с WWDC 2025 просто выкатили пушку: WebGPU, scroll-анимации, declarative push без JS и Safari 26 (да-да, сразу 26!).
🎨 В CSS — контрастный текст, частичные keyframes и стилизация форм без боли.
🧠 В JS — ностальгия по коду 2007-го и здравый взгляд на Angular 20.
⚛️ React в разрезе: RSC, Dan Abramov, Remix, SolidJS — всё меняется, и это интересно.
⚙️ Node.js — новые версии, hot reload без библиотек, OAuth и даже Jest 30!
🚀 Плюс десятки свежих библиотек: Ink, MSW, Storybook 9, Astro 5.9 и даже новый ORM.


📬 Забирай выпуск здесь: https://shabalin.online/blog/digest/weekly-digest-3/

Хочу похвастаться - прошлый выпуск посмотрели 2290 раз! Я в восторге =3

До следующей недели, фронтендер!
Не забывай: браузер — твой фреймворк, а я — твой лис 🦊💻

— Фронти

Принципы доступности

Опубликовал ещё 4 принципа доступности
👉https://shabalin.online/blog/category/ally/

Хотел отдельными постами опубликовать, но что-то пока не выходит. Вообще, всего их 12. Так что будет ещё порция.

🦊 Хэй-хэй, это снова Фронти на связи!

Напоминаю: если ты активно ищешь работу фронтенд-разработчиком — у тебя ещё есть шанс попасть в дайджест Frontend Weekly! В новый выпуск я добавлю баннеры от тех, кто хочет рассказать о себе сообществу и рекрутерам. Пример уже можно глянуть в актуальном выпуске - https://shabalin.online/blog/digest/weekly-digest-3/

Что нужно:
📐 Баннер размером 960×300 пикселей (PNG или WebP)
🔗 Ссылка на твоё резюме — подойдёт hh, Habr Career, GitHub и т.п.

🎨 Можно добавить немного креатива — выделяйся среди остальных.

Прошлый выпуск посмотрели свыше 2 000 раз.

📅 Приём заявок до воскресенья включительно, не опоздай!

Твой 🦊 Фронти

Layout highlighter

В 2018 я опубликовал своё первое расширение для браузера. Это было прекрасное чувство, так как я использовал стандартные веб-технологии HTML+CSS+JS+manifest, а получил штуку, которая работает поверх сайтов в браузере.

Недавно у меня появилась потребность подсветить границы элементов, чтобы проверить сетку проекта. Там была особенность, что все элементы были position: absolute. Проставлять руками outline или создать утилитарные классы это было бы нормальное решение, но я создал расширение, чтобы просто кликать кнопочки на любом сайте. Всё равно меня скоро ждёт ещё один подобный сайт с абсолютами =(

Вот делюсь своей наработкой - https://chromewebstore.google.com/detail/layout-highlighter/afnlmfcnkkmgmkklnjlbijphkncglplf
А если найдёте баги или есть, что сказать, то приходите в issue - https://github.com/nikolai-shabalin/layout-highlighter

🦊 Йо-хо-хо, фронтендеры!
Это снова я, Фронти, и у меня для тебя свеженький выпуск дайджеста #4 — ещё горячее, ещё сочнее, ещё насыщеннее! 💥

Вот что я накопал для тебя на этой неделе:

📘 JavaScript в 2025? — Новая книга от Акселя Раушмайера про современные фишки языка. Бесплатно и с карточками для практики!

🧠 Biome v2 — линтер, который понимает типы без tsc. Да-да, звучит как магия, и почти так и работает.

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

- Новый способ украшать gap между элементами (никаких больше псевдоэлементов!).
- Анимация зума, пазлы из SCSS — очень визуальный выпуск!

🦾 React & React Native:

- Марк Эриксон рассуждает, куда катится React.
- Вышел React Native 0.80 — с новыми типами и сборкой.
- Relay, React Aria Tree, даже видеоинтервью о CTO, уходящих от React 👀

🛠 Node.js и инструменты:

- Amaro 1.0 — шаг к полноценной поддержке TypeScript в Node.
- pnpm 10.12 теперь умеет глобально шарить зависимости!
- Обновления Git, Fastify, Mongoose и целая пачка крутых либ для продакшна.

🧪 И конечно, эксперименты!
Liquid Glass в React, SVG-анимации, чат-боты, RampenSau — даже Critical CSS Generator для перфекционистов.

🤖 Немного про AI, безопасность расширений и MCP-хуки — всё, что нужно, чтобы оставаться на гребне волны.

📬 Листай, вдохновляйся и не забудь сохранить понравившееся.

Выпуск ждёт тебя на https://shabalin.online/blog/digest/weekly-digest-4/

До встречи в следующем выпуске,
твой пушистый проводник по миру фронтенда — Фронти 🦊✨

🦊 Что сказал лис?

Это снова я, Фронти, и я вернулся с выпуском #5 — пока ты дебажил useEffect, я собрал всё самое важное и вдохновляющее из мира фронтенда 💻✨

Вот что у нас на этой неделе:

📜 ECMAScript 2025 принят официально!
TC39 утвердил новую версию стандарта. Подробности — в статье, а если хочешь быстро врубиться — вот обзор от Dr. Axel. Спойлер: будет интересно.

🎨 CSS & визуал
- Scroll-анимации на чистом CSS — красиво и доступно.
- Liquid Glass — Apple-стиль, но в CSS.
- if() в Chrome 137 — условные правила прямо в стилях!
- BEM vs utility vs cascade layers — сравнение для тех, кто устал от !important.
- Цветовые функции lab() и oklch() — контроль над палитрой как у профи.

⚛️ React & друзья
- Recharts 3.0 — теперь ещё больше графиков и лучше архитектура.
- Погружаемся в повторные рендеры — что вызывает их и как их приручить.
- Next.js против WordPress — реальный кейс миграции.
- ИИ vs. Rails: можно ли пересобрать страницу на Next.js? (спойлер: можно, но не без сюрпризов)

🛠 Node.js & инструменты
- Потоки в Node — теперь ты можешь распараллеливать задачи без боли.
- MongoDB в памяти для тестов — юнит-тесты без поднятия настоящей базы.
- CommonJS + ESM — дружим правильно.
- AdonisJS 7 на подходе — Roadmap с фичами, которые хочется уже сейчас.

📚 Бонусы и вдохновение
- 3D-визуализация звука на Three.js — просто must-see!
- Почему визуальные редакторы так и не взлетели — мнение Salma Alam-Naylor.
- JavaScript "сломал веб" — провокационная колонка, которую стоит прочитать.

📬 Листай, сохраняй, делись — и, конечно, не забывай подписаться.
Выпуск уже ждёт тебя на https://shabalin.online/blog/digest/weekly-digest-5/

До скорого,
твой пушистый курьер по миру технологий — Фронти 🦊💼

✂️ Как работать с буфером обмена на сайте?

Хотите сделать копирование удобнее, вставку умнее, а взаимодействие с пользователем приятнее? Тогда пора познакомиться с Clipboard API!

🚀 Мини-пример: переопределение копирования с добавлением источника

document.addEventListener('copy', (e) => {
  const selection = document.getSelection().toString();
  e.clipboardData.setData('text/plain', `${selection}\nИсточник: example.com`);
  e.preventDefault();
});

🔥 Async Clipboard API:
Можно копировать и вставлять контент программно (по кнопке, без выделения вручную).

navigator.clipboard.writeText('Скопировано программно!');

Больше в статье
👉 https://shabalin.online/blog/other/clipboard-api/

Отдых

На следующей неделе буду на Кольском полуострове: Мурманск, Мончегорск, Кировск, Апатиты, Териберка

🦊 Йо-хо-хо, фронтендеры!
С вами снова я, Фронти, и вот дайджест #6 — свежий, сочный, технологичный 💥

Пока ты стилями gap'ы выравнивал, мир фронтенда не стоял на месте:

🎨 CSS-штучки
💥 Gap теперь можно СТИЛИЗОВАТЬ! Никаких псевдоэлементов — только красота.
🎨 Blob-формы, corner-shape и кастомные углы — скучному border-radius конец.
🌈 Цветовые пространства oklch, srgb, lab() — будущее дизайна уже здесь.

📦 JS & ECMAScript 2025
🚀 Новый стандарт утверждён! Новые фичи, упрощения синтаксиса.
🤖 Deno снова умеет bundle — собирает всё в один файл.
💡 Proxy + Reactive State — делаем свой MobX с нуля.

⚛ React & рядом
🧩 React всё ещё путает? Ты не один — вот честный разбор.
📄 Классные статьи: useOptimistic, Reactylon (3D!), загрузка данных, Signals, Storybook 9 и даже Claude-приложения на React.
🎭 Стоит ли учить новый фреймворк? TL;DR — не всегда 😅

⚙️ Node.js & инструменты
🔧 Node 22.17 с Web API, import maps и улучшенным ассертом.
☁️ Cloudflare запускает контейнеры — альтернатива Workers.
🛡 Защита API с помощью Cedar — права доступа за 5 минут.
💬 Почему игра тормозит при 500+ игроков? Разбор.
📦 dotenv 17, Undici, NestJS + WebRTC, Astro 5.11, Bun 1.2.18 — всё обновляется!

👉https://shabalin.online/blog/digest/weekly-digest-6/

📬 Подписывайся и не пропускай свежие выпуски.
А я — твой лис-курьер Фронти — уже собираю следующий! 🦊💼

Опрос дня

Что-то подумалось, что оффлайн по фронтенду в Питере практически мёртв, но я могу хоть как-то поспособствовать его оживлению.
Есть идея провести пару мастер-классов в оффлайне по фронтенду этим летом в Петербурге. Отличная возможность узнать что-то новое и пообщаться на тему фронтенда не в кругу коллег. Завести новые знакомства и создать новый фреймворк

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

🦊 Привет-привет, фронтендеры!
Это снова я, Фронти, и у меня для тебя дайджест #507 — как всегда, с самыми свежими и технологичными находками недели! 🔥

Вот что бросилось мне в лапы:

💡 popover="hint" — подсказки без JS
Теперь можно делать всплывашки без скриптов. Красиво, понятно, удобно!

🧩 CSS с if() — условные стили в браузере
Да, прямо в CSS! Пиши условия — без препроцессоров и JS. Пока в Chrome, но революция уже рядом.

🎨 Градиенты с зернистой текстурой?
SVG + displacement map творят чудеса. Спасибо Ана Тудор за вдохновение.

🥊 Cascade Layers vs BEM vs Tailwind
Глубокий разбор специфичности — какой подход победит?

🚀 JavaScript 2025 всё ближе
Подробный отчёт с TC39: Array.fromAsync, Temporal, AsyncContext, и много будущего.

⚠️ Parcel и hoisting — осторожно!
Автоматический подъём кода может ломать приложение. Автор Parcel подумывает отключить это поведение.

🌌 React Three Fiber + WebGL = магия
Кинетические анимации, облачный рендер КТ-сканов и даже 3D для научных проектов.

🪄 Node чинит JSON сам!
Появился jsonrepair — инструмент, который сам исправляет сломанный JSON. Must-have для работы с AI и API.

🌀 Tailwind снова в центре споров
"Худшая форма CSS, кроме всех остальных". Спорим — читаем — делаем выводы 😉

🤖 Copilot Chat теперь доступен всем
VS Code + ИИ = мощный комбо. А теперь ещё и с открытым кодом.

🛠 Обновления Babel, Faker, Oxlint, Recharts, Material UI и ещё 20+ либ

👉 https://frontend-weekly.ru/weekly-digest-7/

До следующего выпуска,
твой цифровой курьер по миру фронтенда — Фронти 🦊✨

Новая ссылка на фронтенд-дайджест

Я решил выделить дайджест из блога. Теперь дайджест это полноценный отдельный проектик, который будет жить по адресу 127.0.0.1 😄

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

👉https://frontend-weekly.ru/
какое красивое и подходящее доменное имя, скажите? =)

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

Открытие века

Продление доменного имени может стоить на порядок выше, чем регистрация

Например, .online:
- регистрация 125 рублей
- продление 3936 рублей

Podlodka React Crew

В конце августа выступаю на Podlodke в онлайне https://podlodka.io/reactcrew.
Расскажу про view transition API, но уже в реакте.

Мне предложили пару билетов, которые я смогу разыграть здесь на канале.

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

🦊 Привет-привет, фронтендеры!
С вами снова я — Фронти! Лето во всю радует своими тёплыми деньками. Настало время дайджеста #8, и он прямо 🔥: от WebGPU и новых CSS-фишек до движков браузеров!

Погнали! 💨

🍏 Apple против движков
Apple *по-прежнему* запрещает сторонние движки в iOS, несмотря на DMA. Конкуренция? Не слышали.

💾 128 КБ — предел?
Разработчик гордится проектом, который влез в 128 КБ. Напоминание: не у всех фибра и MacBook!

🦊 WebGPU в Firefox 141!
Пока только Windows, но это шаг к WebGL-next прямо в браузере.

🎨 CSS и дизайн
🧩 if() в CSS теперь в деле!
📐 Типографика с clamp() и calc()
🌀 Scroll-driven заголовки и animation-composition
🧱 Поддержка мультиколонок — доклад от Рэйчел Эндрю

📦 JavaScript & Vue
🗓 Викторина по Date — ты уверен, что всё понимаешь?
🤝 Promise.all() с типами
💨 Vue 3.6 alpha: Vapor-режим — компактнее, быстрее!

⚛️ React и друзья
🔄 3 года миграции с классов на хуки — подробный опыт
🗂 История React в коде
📱 Галерея Google Photos на React Native
💬 Обновления в Next.js 15.4 и планы на 16
🧪 Как тестировать RSC — работает, хоть и хакерски

🧠 Обучение и практика
📦 Как создать npm-пакет в 2025 — гайд от Matt Pocock
🎨 Шаблоны убивают дизайн — не AI
🧠 Как LLM влияет на open source
📚 Консоль разработчика, CORS в Chrome, Web Speech API

🛠 Инструменты недели
⚡️ Hyper Fetch — альтернатива Axios
📧 Upyo — отправка email с SMTP/HTTP
🎮 React Chessboard 5.2
🖼 react-easy-crop и ReactPlayer
🔥 Weather FX на WebGL
🪄 Necord — Discord-боты на Nest
💼 Pandabox для Astro
🧪 Envalid 8.1, Rewire 9.0, ESLint 9.31.0


👉https://frontend-weekly.ru/weekly-digest-8/

А я пошёл собирать свежие новости на следующую неделю.

До скорого,
твой пушистый курьер по миру технологий — Фронти 🦊💼