👁 Что нового в Chrome DevTools 144

В 144-й версии DevTools без революций, но с точечными улучшениями, которые реально упрощают отладку:

🟣 Request Conditions
Network request blocking переименовали и прокачали — теперь можно троттлить отдельные запросы, а не весь Network целиком. Удобно для edge-кейсов и нестабильных API.

🟣 DevTools MCP server 0.12.1
Появился auto connection: можно подключиться к уже открытому браузерному сеансу и продолжить отладку с того же места. Меньше ресетов — быстрее дебаг.

🟣 Шрифты
@font-face и @font-feature-values теперь редактируются прямо в Styles. Без прыжков между панелями.

🟣 Adopted stylesheets
В Elements теперь видно adopted stylesheets под shadow roots и document root. Полезно, если стили «не применяются и непонятно почему».

🔗 Источник

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#release_digest

⚠️ sort() ломает state (тихий баг)

const sorted = data.sort(byDate);

На вид — нормально.

На деле:

• sort() мутирует data
• ссылка на массив не меняется
• React / Zustand / Redux не видят изменений
• UI начинает вести себя случайно

ℹ️ Почему это происходит:

sort() — in-place операция. Она меняет существующий массив, а не создаёт новый.

Как делать безопасно:

🟣 Современный способ (ES2023)

const sorted = data.toSorted(byDate);

🟣 toSorted() поддерживается:

Chrome 110+, Safari 16+, Firefox 115+

🟣 Для старых браузеров работает везде:

const sorted = [...data].sort(byDate);

🟣 Если нужен deep copy

const sorted = structuredClone(data).sort(byDate);

🐸 Библиотека фронтендера

#hotfix #js

🎼 Что нового в WebGPU

Chrome 144 продолжает аккуратно прокачивать WebGPU: меньше костылей, больше прямого контроля над GPU.

🈶 WGSL: subgroup_id и num_subgroups

Появился доступ к ID сабгруппы и их количеству внутри workgroup.
Раньше это приходилось восстанавливать через атомики — теперь есть нативные built-in. Основа для более эффективных compute-шейдеров и тонкой работы с памятью.

🈶 WGSL: uniform_buffer_standard_layout

Uniform-буферы больше не требуют 16-байтных паддингов.
Можно шарить одинаковые структуры между uniform и storage buffers без лишних полей и @align.

🈶 WebGPU на Linux

Начался постепенный rollout: сначала Intel Gen12+, дальше планируют AMD и NVIDIA.
Под капотом — WebGPU через Vulkan, Chromium остаётся на OpenGL.

🈶 Быстрее writeBuffer() и writeTexture()

Оптимизации дали до 2× прироста производительности при копировании данных. Важно для стриминга и real-time графики.

🈶 Dawn / Android

Вышла alpha Kotlin-биндингов WebGPU через Jetpack (androidx.webgpu).
Современный GPU-API без боли OpenGL и сложности Vulkan.

🔗 Источник

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#release_digest

✏️ Почему я сознательно ушёл от Next.js

За последние месяцы я целенаправленно выносил код из Next.js. Не потому что он плохой — а потому что его сложность перестала оправдываться.

🔴 Где Next.js реально хорош

Next.js даёт быстрый старт и мощные возможности из коробки. Он отлично подходит для сложных fullstack-сценариев и больших систем. Но дальше начинается проблема.

🔴 Mental model слишком тяжёлый

App Router, магия файлов, директивы, экспериментальные флаги.

Трудно понять:

• где заканчивается React и начинается Next.js
• по какому пути реально идёт код
• почему поведение меняется после «невинного» экспорта

Без постоянного чтения документации работать становится сложно.

😂 Отладка превращается в квест

Кэш, кэш, ещё один кэш. Поведение меняется — причины неочевидны. Стек-трейсы плохо отражают реальность, а абстракций больше, чем точек контроля.

😳 Dev-сервер — отдельная боль

Долгие сборки, медленные перезагрузки, ощущение «тяжёлого» окружения. После этого возвращаться к Vite — как снять рюкзак с камнями.

Что оказалось проще и честнее:

TanStack + Vite дали ровно то, что я ожидал от современного фронтенд-стека:

• понятный флоу данных и роутинга
• минимум магии
• typesafe-роутинг и работа с данными «в лоб»
• быстрый dev-сервер
• отладка без шаманства

Ты видишь, что происходит, и можешь это контролировать.

🔤 Next.js — мощный инструмент, но не универсальный дефолт. Для большинства фронтенд-команд он добавляет больше когнитивной нагрузки, чем пользы.

Для моих задач и команды TanStack + Vite оказались просто спокойнее и быстрее в разработке.

Если Next.js работает у вас — отлично. Для меня — нет.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#code_battle

🎨 CSS Relative Colour (Часть 1): палитра как система

Большинство дизайн-систем ломаются в одном месте — при смене базового цвета. Есть foundation, есть тени, светлые версии, акценты. Меняете один цвет — пересчитываете всё руками.

CSS Relative Colour в пространстве OKLCH решает эту проблему.

🔴 В чем идея:

Цвет — это не список значений, а формула.

oklch(from <color> <L> <C> <H>)

Берём базовый цвет и вычисляем все остальные относительно него.

Базовые правила:

 • Lightness — двигаем (add / subtract)
 • Chroma — масштабируем (multiply)
 • Hue — вращаем (градусы)

🔤 Что это даёт:

— одна точка управления цветом
— автоматический пересчёт всей палитры
— устойчивые темы и состояния UI
— смена настроения без пересборки

Палитра перестаёт быть набором оттенков и становится системой.

🔗 Читать статью

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#read_watch

🖍 Публичный URL для localhost за минуту

Нужно показать фронт с localhost — без деплоя и с HTTPS? Делается одной командой:

brew install cloudflared
cloudflared tunnel --url http://localhost:3000

Что получаете:

— публичный HTTPS-адрес
— работает для OAuth, cookies и mobile-тестов
— без регистрации и бесплатно

Удобная альтернатива ngrok для демо и локальной разработки фронта 💃

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack

🐸 Библиотека фронтендера

#pixel_pause

🔍 Узнам, кто занял порт

lsof -i :3000

Показывает какой процесс держит порт 3000: команду и PID.

🔤 Типичный кейс:

— dev-сервер не стартует
— ошибка EADDRINUSE
— порт «занят», но непонятно кем

🔴 Пример вывода:

node 48231 user TCP *:3000 (LISTEN)

node — процесс
48231 — PID
LISTEN — порт реально используется

🔢 Если процесс лишний:

kill 48231

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#readme

🧩 Как собрать портфолио в виде 2D-игры

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

ℹ️ Как это работает:

— Персонаж перемещается по комнатам
— Подходит к объектам (компьютер, книжная полка, постеры)
— При взаимодействии появляется информация: навыки, описание проектов, ссылки на GitHub

Используется стек: JavaScript, Kaboom.js, Vite, HTML/CSS. Автор разбирает: настройку проекта, карту, коллизии, анимации, диалоги.

📎 Ссылка на GitHub

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#read_watch

📱 CSS: колонки без горизонтального скролла

В Chrome 145 появились column-wrap и column-height. Теперь multi-column может переносить колонки вниз, а не вправо.

Раньше:

— фиксированная высота → колонки вправо
— горизонтальный скролл

Теперь:

— задаёте высоту ряда
— переполнение уходит вниз
— нормальный UX для текста

Где полезно:

— статьи и документация
— контентные блоки
— вертикальные «карусели»

⚠️ Без визуальных разделителей легко сломать чтение; не замена Grid/Flex, а инструмент под контент.

🐸 Библиотека фронтендера

#release_digest

🔍 React Scan — автоматический поиск проблем производительности в React

Удобный инструмент для React-разработчиков, который визуально показывает, какие компоненты тормозят ваше приложение.

Главные фичи:

— Не требует изменений в коде
— Подсвечивает компоненты, которые нужно оптимизировать
— Работает везде: script tag, npm, Next.js, Vite, Remix

ℹ️ Как использовать:

Просто добавьте один script tag:

<script src="//unpkg.com/react-scan/dist/auto.global.js"></script>

🔗 Cсылка на GitHub

🐸 Библиотека фронтендера

#stack #react

🤯 React до сих пор веет безумием, но все молчат

Автор вернулся к React после перерыва. И вот что его поразило:

🔴 «Архитектура» на компонентах

Любой компонент может использовать любое состояние через хуки. По сути — глобальные переменные с красивым названием «редьюсер». Назвали заумно — и вдруг это стало Good Architecture™?

🔴 useEffect — король хаков

Хук для «побочных эффектов» используется для инициализации компонентов. Но постойте... он же ещё и состояние меняет! А если нужна зависимость? Добавляем ещё один useEffect.

Результат? Цепочки асинхронных функций, которые надо читать снизу вверх. Ад обратных вызовов отдыхает.

🔴 «Паттерны» вместо простоты

Обещали простоту в Hello World. На практике — статьи про сложнейшие паттерны просто для отрисовки элементов на экране. И никто даже не признаёт безумие происходящего!

ℹ️ Но вот что интересно:

Автор считает, что виноват не React. И не Angular. И не jQuery. Проблема в том, что создание интерактивного UI, где любой компонент может обновлять любой другой — это один из сложнейших аспектов разработки ПО.

Сравните: у крана 2 входа и 1 выход. У UI — потенциально бесконечное число входов и выходов.

🖍 Решение:

Меньше кнопок
SSR везде, где возможно
React только «островками интерактивности»

P.S. Если бэкенд-инженер смотрит на ваш код и спрашивает «Неужели нельзя проще?» — возможно, он прав.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#code_battle

❤️, если жизненно

🐸 Библиотека фронтендера

#pixel_pause

👋 Легендарный код Konami в CSS и JavaScript

Помните чит-код ↑↑↓↓←→←→BA из игр 90-х? Создали интерактивную визуализацию этой культовой комбинации.

Что внутри:

— Стилизованные D-pad клавиши с градиентами
— Отслеживание последовательности нажатий
— Визуальная подсветка при правильном вводе
— Чистый CSS без фреймворков

Технически:

— Event listeners для keyboard input
— Валидация через массив
— CSS-анимации для обратной связи

🔗 Ссылка на CodePen

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#readme #css