🦊 Привет-привет, фронтендеры!
Это снова я, Фронти, и у меня для тебя дайджест #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/

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

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

Будет полезно новичкам. Приходите.

PS: дайджест задерживается. Фронти уже его доделывает

✨ На PiterJS #80 выступит Валентин Ульянов с докладом:

📜 Антипаттерны и best practices карьеры в IT

Разберем основные карьерные треки: специалист, предприниматель, руководитель - выбор, от которого зависит вся остальная траектория.

Чуть детальнее разберем трек специалиста, и разработчика в частности: обсудим важнейшее изменение в профессии, о котором почти не говорят.

Посмотрим, какие стратегические решения эффективны для развития, а какие нет и почему.

Узнаем секретные схемы поиска работы, даже на конкурентном рынке.

По итогу выясним, что делать, чтобы тебя не заменила нейронка через 5 лет

Доклад будет полезен как новичкам, так и middle+ спецам, которые задумываются: куда двигаться дальше по карьере.

🌟 О спикере

Р7, Software engineer.

В IT ~10 лет. Последние 2 занимался разработкой инструментов и бэкендом на Node.js, а сейчас делает редактор схем и диаграмм.

Делает свой open source проект. Выступает на конфах и ведёт местное IT-сообщество.

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

🦊 Фух... Ну и неделька!
Промчался по всему вебу, собрал кучу горячих новостей... и чуть не проспал публикацию! 😅
Но я, Фронти, уже здесь — с дайджестом #9, свежим, хоть и с лёгким налётом опоздания. Не злись, я старался 💼✨

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

📝 HTML 2025: твой голос важен
Devographics запускает новый опрос о состоянии HTML. Помоги улучшить платформу! А Леа Веру рассказывает, зачем это вообще нужно.

🖼 SVG, но без боли
Гайд от Джоша: как использовать SVG, не страдая. Прямо для тех, кто всё ещё боится path 😅

🍏 Liquid Glass от Apple
Стеклянные интерфейсы возвращаются — красиво, но что с доступностью?

🦊 Firefox 141 с WebGPU и вертикальными вкладками!
Новая версия: мощнее, быстрее и даже с AI-подсказками 🤖

🌐 JavaScript и WASM
📦 es-toolkit — замена lodash: в 30 раз меньше, быстрее
📻 1KB-библиотека, имитирующая радиостанцию чисел (да, серьёзно!)
🔬 Когда WASM получит доступ к DOM? Уже есть идеи

⚛️ React
🧠 Обновлённая документация по React Compiler
📦 Zustand, React Router + RSC, PWA с Okta — море практики!

⚙️ Node.js
🐘 Laravel теперь можно запускать в Node.js!
🔐 Обновления безопасности Node 24, 22 и 20
📦 NPM-компрометация, поддержка прокси, lock-файлы для Node

📬 Всё это и многое другое — уже на frontend-weekly.ru
Сохраняй, делись, подписывайся.
А я пошёл настраивать будильник, чтобы больше не проспать 😴

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

Дали тестовое задание. Попросили запустить сборку. Словил вирус.

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

https://habr.com/ru/articles/928026/

🦊 Ура, понедельник!
Фронти снова с вами — на этот раз вовремя 😉 И у меня для тебя юбилейный дайджест #10! В нем: 20 лет MDN, карусели без JS, встроенная база данных для React и нативный TypeScript в Node.js!

Погнали разбираться, что нового в мире фронтенда 💥

🎉 MDN исполнилось 20 лет!
Самое надёжное место в интернете для веб-доков. 14 000 страниц, 18 000 фич — и всё это бесплатно. Спасибо команде! 🙌

🎠 CSS-карусель без JS
Scroll-snap, anchor-name и немного магии — и у тебя уже работает слайдер, даже на мобилке.

🧱 CSS Masonry и Scroll Spy
Masonry-сетки можно тестировать в Chrome 140, а scroll-спай работает прямо на CSS благодаря :target-current.

⚛️ React 19.1.1 и TanStack DB
Свежий релиз React, и TanStack DB — новая база данных, встроенная прямо в клиент. Миллисекунды задержки и живая синхронизация.

🧠 `useCallback` — нужен ли он?
Автор объясняет, почему мемоизация — не панацея, а React Compiler скоро решит большинство проблем.

🧩 Reanimated 4 и предкомпиляция React Native
В 10 раз быстрее сборка iOS, плюс выразительные анимации в стиле CSS прямо в RN.

🐧 Node.js теперь запускает TypeScript без сборщиков!
Node 22.18 поддерживает .ts по умолчанию.
Node 24.5 — ещё быстрее, надёжнее, с поддержкой прокси и OpenSSL 3.5.

📦 pnpm 10.14
Указываешь версию Node, Deno или Bun в package.json — и она ставится сама. Удобно!

🤖 Transformers.js 3.7
Запуск HuggingFace моделей в браузере. Поддержка распознавания речи, серверный инференс — всё на JavaScript!

📚 Гайды, видео и безопасность

* Сравнение Zod и Valibot
* Почему vi.spyOn > vi.mock
* Как Astro обрабатывает JSX
* Новое API в DevTools
* Node.js MCP-сервер для LLM
* Атака через npm-пакет is и ответ Google (OSS Rebuild)

📬 Всё это уже ждёт тебя на frontend-weekly.ru
А я пойду дальше — охотиться за свежими фронтовыми находками 🦊

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

🦊 Фронти снова в эфире!
На этой неделе у нас много вкусного: HTML, который переживёт всех, каскадные слои, ленивые импорты в TypeScript, Web Workers в React и новый API для звука в React Native.

Погнали по порядку 👇

🦴 HTML живее всех живых
Семантическая разметка — не олдскул, а ключ к скорости, доступности и чистому DOM. Меньше <div> ради <div>, больше смысла.

🎨@ layer приручает каскад
Cascade Layers позволяют задать предсказуемый порядок стилей без войны !important.

📝 TypeScript 5.9
Не громкий, но полезный релиз: import defer, --module node20 и раскрывающиеся подсказки типов в IDE.

🌐 SPA vs сервер
Создатель RedwoodSDK утверждает: пора снова строить приложения с упором на сервер.

⚡️ Web Workers в React
Разносим тяжёлые вычисления по потокам, освобождаем UI и ускоряем отклик.

🚀 V8 ускорил JSON.stringify
В 2+ раза быстрее сериализация JSON. Меньше задержек при API-ответах и логах.

🔧 Node 22.18 с TypeScript в рантайме
Пишешь node app.ts — и оно просто работает.

🔍 Dependency Cruiser
Рисует наглядные графы зависимостей проекта. Идеально для ревизии архитектуры.

📬 Полный выпуск — на frontend-weekly.ru
А я пошёл копать для тебя ещё свежих фронтовых находок 🦊

Can i *

Делюсь списком сервисов, где можно проверить поддержку фич
- https://caniuse.com/ - вы же в курсе что это
- https://www.caniemail.com/ - проверяет поддержку в email-агентах
- https://compat-table.github.io/compat-table/es6/ - проверяет работоспособность JS-методов в разных движках
- https://a11ysupport.io/ - работоспособность ally-фич в разных инструментах и браузерах

и оффтопиком
- https://caninclude.onrender.com/ - проверяет вложенность тегов (работает не отлично, но хорошо). Кстати, написал студент Академии

Если у вас в загашнике есть подобные проекты - делитесь в комментариях к этому посту

Дорогие друзья спасибо, что читаете этот канал, а особенно за то, что общаетесь в комментариях

Сегодня у канала круглая и важная дата - 300 читателей.

Скоро выйдет ещё пару моих проектов. Ждите новостей

🎯Podlodka React Crew #3 — сезон о паттернах и практиках фронтенда

Как писать продуманный и масштабируемый фронтенд с помощью React? Какие паттерны реально работают, а какие — мода ради моды?

В новом сезоне Podlodka React Crew обсуждаем архитектуру, производительность, нестандартные layout'ы, системный подход к интервью и многое другое.

📌 В программе:
• Паттерны анимаций с View Transition API
• Проверка AI-ассистентов на реальных задачах
• Глубокое погружение в архитектуру React Hooks
• Практика layout'ов вне CSS Grid и Flexbox
• System Design для фронтендера: как не завалить интервью

💡Все доклады — с практикой, кейсами и интерактивом.

📆 Реактим с 25 по 29 августа. Бегом за билетами: http://podlodka.io/reactcrew

А мой промокод AttractorCode дает скидку в 500р🥳

Розыгрыш одного билета на Podlodka React Crew

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

1) Вам должен быть интересен React, иначе участие бессмысленно. Понимаете, да? =) Почитайте программу на лэндинге и напишите какую тему, кроме моей, и почему ждёте большего всего;

2) Напиши какую-нибудь интересную историю связанную с тобой и любым программированием. Это может быть любая история. Она не должна быть смешной или жизнеутверждающей. Она должна быть просто интересной лично вам. Ваша же история =) Может быть что-то связанное с микроволновкой? Шучу-шучу =)

Куда писать? А вот прям сюда в комментарии.

В следующую пятницу я запущу рандомизатор среди выполнивших условие и в тихом режиме отправлю билет для онлайн участия.

Всем участникам удачи ❤️ КШ

🦊 Привет, фронтендеры!
На этой неделе дайджест получился короче обычного. Но не переживай — как и хвост у лисы, он всё равно пушистый и полный полезностей 🦊✨

Что у нас есть:
HTML:
🔎 hidden=until-found — спрятал? Браузер найдёт.
🧩 Веб-компоненты без хаоса.
📐 SVG наконец-то встаёт на место.

CSS:
🎨 Психология цвета в UX.
🪝 Anchor-позиционирование без JS.
🔢 auto-fit и количество колонок.
🧭 Safari DevTools в деле.
📓 Чему нас научил PostCSS за 12 лет.

👉 Полный выпуск — на frontend-weekly.ru

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

Привет! Рад сообщить о создании нового проекта — 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/) попал в популярную рассылку по фронтенду.

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