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/

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

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

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

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 читателей.

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