Веб-страница

Вынесли логику в кастомный хук и получили лишние перерисовки

Инстинкт понятный: компонент оброс полусотней строк состояния и запросов, вы вытаскиваете это в аккуратный useDashboardFilters(), родитель худеет до десяти строк JSX. Выглядит как чистая победа.

Ловушка в том, что кастомный хук это обычная функция. Компонент, который его вызывает, выполняет код хука как часть собственного рендера. Состояние вы не спрятали, а перенесли: любой useState внутри хука по-прежнему перерисовывает того, кто хук позвал.

Я бы прошёлся по своим «чистым» хукам с этим текстом рядом, особенно там, где один хук зовут сразу несколько компонентов. Разбор показывает, как это выглядит в профайлере.

#перформанс

У вас есть широта и долгота: что с ними делать, кроме метки на карте

Пара чисел вроде 40.7128 и −74.0060 обычно заканчивается маркером на карте, и на этом всё. А достать из неё можно заметно больше: найти заведения рядом, определить город и район, посчитать расстояние до другой точки.

Для новичка это удобная тренировка работы с внешним API: отправить запрос с координатами, получить JSON, разобрать его и показать результат. Заодно всплывают вещи, о которых туториалы обычно молчат: что делать, если сервис ничего не нашёл, и почему расстояние по прямой не равно расстоянию пешком.

Разбор на JavaScript годится как основа для маленького проекта «что рядом со мной»: одна форма, один запрос, один список результатов.

#javascript

Достаньте точный цвет пикселя из картинки прямо в браузере

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

Работает это через Canvas — элемент HTML, на котором можно рисовать и, что важнее, читать нарисованное по пикселям. Порядок такой: загрузить изображение, нарисовать его на canvas, забрать массив пикселей и достать нужный. В массиве каждый пиксель занимает четыре числа: красный, зелёный, синий и прозрачность.

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

#javascript

Подсветка фрагментов текста без единого лишнего span в разметке

Люди страницу не читают, а сканируют, поэтому подсветка нужных кусков работает. В CSS для этого целое семейство псевдоэлементов: ::selection для выделенного мышью текста, ::target-text для перехода из поиска и самый гибкий из них, ::highlight(), который красит произвольный фрагмент по вашему выбору.

Подкупает то, что оборачивать текст в разметку не надо: диапазон задаётся в JavaScript, а стили живут в CSS. В DOM не появляется ни одного лишнего узла, а значит, ничего не ломается ни в вёрстке, ни в доступности.

Поддержка пока не везде, поэтому Сюнками Фафовора показывает, как включать это через progressive enhancement: браузер без поддержки просто не покрасит, и страница останется рабочей.

#css

Каждая цепочка filter и map создаёт два лишних массива

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

Методы массивов жадные: выполняются сразу и возвращают новый полностью заполненный массив. Iterator helpers ленивые: тянут значения по одному и ровно столько, сколько попросили. Для потоков и бесконечных последовательностей это разница между работающим кодом и упавшей вкладкой.

Приятная часть: это уже нативно, без библиотек, полифилов и шага сборки. Chrome 122, Firefox 131, Safari 18.2. Разбор с примерами.

#javascript

Ваш веб-компонент приезжает клиенту пустым, и серверный рендер тут ни при чём

У Shadow DOM не было способа отрендериться на сервере. Не «трудно», а структурно отсутствовало: сколько ни настраивай серверный рендер, веб-компонент уезжает клиенту пустой коробкой и наполняется, только когда доедет и отработает JavaScript.

Увидеть это можно за минуту: curl по собственной странице с аккордеоном или табами и поиск по тексту изнутри компонента. В ответе кастомный элемент без содержимого и тег <template> рядом, который ничего не делает. На медленном соединении пользователь видит ту же пустую коробку, которая потом схлопывается.

Поэтому и привычные лечения мимо: инлайн критического CSS не спасает, ведь содержимое теневого дерева не «без стилей», его вообще нет. Что теперь писать в разметке, показано в разборе.

#фронтенд

Звуки модема, статусы в аське, бесконечная загрузка страниц — с этого начинался рунет, и SpaceWeb был там с самого начала, аж с 2001-го. Теперь компании 25, и вместе с Типичным программистом они сделали анкету-ностальгию: школьные вопросы про спорт, друзей и обои на рабочий стол, а между ними — история веба и самой компании.

Плюс ЖЖ, торренты, файлообменники, другие вещи, которые были отражением того времени. В конце промокод на услуги SpaceWeb и ответ, какой ты накопитель.

Языковая модель во вкладке: WebLLM считает на видеокарте пользователя через WebGPU, сервер не нужен

Библиотека от команды MLC AI (18,8 тыс. звёзд, Apache-2.0) скачивает модель один раз, кладёт в Cache API, IndexedDB или OPFS и запускает инференс прямо в браузере. API повторяет OpenAI: engine.chat.completions.create({ messages, stream: true }), так что фронтенд чата переносится почти без правок. Тяжёлую работу можно вынести в Web Worker или Service Worker, чтобы не вешать интерфейс.

Что это стоит пользователю: предсобранные модели просят от 0,7 ГБ видеопамяти (gemma3-1b) до 6,4 ГБ (Qwen3.5-9B), первый запуск ждёт скачивания весов, а без WebGPU ничего не заработает. Зато промпты не уходят с устройства, а инференс не стоит вам ни копейки. Попробовать без кода можно на chat.webllm.ai. Установка, код, замеры скорости против нативного запуска и FAQ на сайте.

#javascript #ии

pnpm 12.3.1: быстрее в монорепозиториях, нативные shim и секреты, которые больше не утекают в логи

Если у вас workspace на десятки пакетов, pnpm install в 12.3 должен стать быстрее без настроек: lockfile читается во время обнаружения проектов, граф строится один раз вместо копирования lockfile целиком. Цифр команда не приводит, эффект тем больше, чем толще lockfile.

Глобальные команды node, deno, bun и shim из pnpm shim add стали нативными исполняемыми файлами, в Windows .exe вместо .cmd и .ps1. Именно эта миграция сломалась при self-update с 12.2, поэтому через несколько часов вышел 12.3.1; обновляйтесь сразу на него. Ещё: trust-флаги теперь и у remove с update, учётные данные из URL реестров скрываются в ошибках fetch, recursive run больше не зависает с --filter, а системный резолвер на Linux перестал молча ходить в Google Public DNS. Подробнее на сайте.

#nodejs

Подсказки автодополнения приходят раньше, чем пользователь отпустил клавишу

Wirewiki ищет среди 240 миллионов доменных имён, и автор сервиса добился p99 в 0 мс: запрос уходит на keydown, сервер готовит варианты для всех допустимых следующих символов, а интерфейс показывает результат на keyup. В бюджет попадают длительность нажатия и пауза до следующей клавиши, для 60 Гц это несколько кадров. Перерасход трафика ограничен алфавитом: до 312 имён в ответе, около 2,5 КБ после сжатия.

В нашем канале «Сохранёнки программиста» разобрали подробнее.

#перформанс

Автор ESLint-плагина прогнал свои правила по тестам конкурента и проиграл 51 к 71

Офри Перец вытащил из npm-пакета eslint-plugin-security 84 негативных примера и прогнал их через оба плагина. Конкурент поймал 71, его eslint-plugin-node-security 51, честные 61% покрытия. 29 из 33 промахов пришлись на одно правило, detect-buffer-noassert, которое ловит аргумент, удалённый из Node.js ещё в версии 10: в Node 24 readUInt8(0, true) просто игнорирует его.

Без этого правила счёт 51 из 55, то есть 93%. Обратная сторона: конкурент пропустил 13 примеров, которые поймал автор, а вместе два плагина закрывают 84 из 84. Но на 61 файле обычных automation-скриптов автор получил 279 срабатываний, и все проверенные оказались ложными.

Метод на 40 строк можно повторить для любой пары линтеров, а вывод универсален: «кто цитирует одно число, цитирует то, которое ему выгодно». Замер от 12 августа на eslint-plugin-security 4.0.1 и ESLint 9.39.2. Разбор на dev.to.

#безопасность #javascript

Action в React 19 это любая функция, вызванная внутри startTransition, и всё

Четыре API, useActionState, useOptimistic, useFormStatus и useTransition, обычно объясняют по отдельности, и остаётся ощущение, что нужно выбрать один. Шубхра Похария показывает, что это четыре входа в один механизм: функция становится Action, когда вызвана внутри startTransition, и это весь критерий.

Дальше роли простые. useActionState хранит результат и pending; ошибка попадает в состояние, только если action сам её вернёт, иначе это обычное исключение. useOptimistic показывает предполагаемый результат до ответа сервера. useFormStatus читает pending ближайшей формы. useTransition для Action вне формы. Функция в <form action={fn}> получает FormData, preventDefault не нужен, отправка всегда POST независимо от атрибута method.

Две ловушки. React 19 разрешил async внутри transition, но всё после await нужно оборачивать во вложенный startTransition. И useTransition не гарантирует порядок завершения конкурентных Actions, порядок держат только <form action> и useActionState. В конце квиз на 15 вопросов, чтобы проверить себя. Разбор на dev.to.

#react

Задержка анимации по номеру элемента теперь одна строка CSS, без --i и без JavaScript

sibling-index() возвращает позицию элемента среди соседей (с 1), sibling-count() общее число детей у родителя, обе работают в calc(). С Firefox 154, вышедшим 18 августа, их поддерживают все три движка: Chrome с 138, Safari с 26.2.

li { animation-delay: calc(sibling-index() * 80ms); }
.cards > * { flex-basis: calc(100% / sibling-count()); }

Оговорки, на которых можно споткнуться: считается дерево DOM, а не flat tree, поэтому слоты и Shadow DOM ведут себя иначе, а на границе теневого дерева функция может вернуть 0. Учитываются все соседи, включая скрытые; форма с фильтром of пока только обсуждается в CSSWG. Для декоративных задержек можно использовать сразу: в старом браузере правило просто не применится. Для раскладки я бы завернул в @supports. Даты по браузерам и примеры на сайте.

#css

Три попытки собрать текстовый редактор в браузере: Canvas, contenteditable и textarea

Дэвид Бушелл решил написать свой редактор и прошёл все грабли по очереди. Canvas даёт полный контроль над отрисовкой и ничего бесплатно: ни выделения, ни undo, ни вставки нескольких строк, ни прокрутки, а курсор и стрелки пришлось программировать с нуля при заметной нагрузке на CPU.

Второй заход: contenteditable="plaintext-only" с отключёнными autocapitalize, autocorrect, spellcheck и translate. Проверка орфографии давала скачки задержки ввода. Но на длинном тексте выяснилось, что обычный <textarea> заметно производительнее. Итоговая схема: textarea принимает ввод, отдельный слой сверху рисует подсветку синтаксиса, а Tree-sitter обрабатывает только видимые строки, потому что слишком много CSS Highlights само становится узким местом.

Бонус для тех, кто считает символы: "🍋‍🟩".length даёт 5, spread даёт 3, а Intl.Segmenter честно видит один графем. Разбор у автора.

#javascript

Ваш код не медленный, он просто держит главный поток

Скролл подёргивается, кнопка отвечает с задержкой, буквы в поиске появляются на полтакта позже. Первый рефлекс: искать медленный алгоритм. Автор разбора показывает, что чаще проблема не в скорости кода, а в том, что он занимает единственный поток, где живут и JavaScript, и стили, и layout, и paint.

Бюджет на кадр при 60 Гц около 16,6 мс, из которых практически доступны примерно 10; на 120 Гц вдвое меньше. Функция на 200 мс замораживает экран на 200 мс, и никакой бандл-оптимизацией это не лечится. Отсюда четыре приёма на самом потоке: делить длинные задачи, группировать частые, расставлять приоритеты, откладывать необязательное. И три способа увести работу с потока: на композитор, в worker, или не делать её вовсе.

Внутри интерактивные демо: чат, куда прилетают сотни сообщений в секунду, и разница между «рисовать сразу» и «отдавать поток каждые 20 сообщений». Yield не делает работу быстрее, но возвращает интерфейсу отзывчивость. Я бы прошёл этот текст перед следующим разбором INP. Разбор в блоге kciter.

#перформанс #javascript

Chrome 154 beta: WebSocket в локальную сеть, постквантовые ключи в Web Crypto и табы на чистом CSS

Три вещи из беты, которые меняют код. Первая: new WebSocket(url, { protocols: "soap", targetAddressSpace: "local" }) открывает сокет к устройству в локальной сети со страницы на HTTPS, если пользователь дал разрешение Local Network Access, а имя хоста резолвится в локальный IP. Раньше это было запрещено без обходных путей.

Вторая: в crypto.subtle появились ML-KEM 768/1024, ML-DSA 44/65/87, ChaCha20-Poly1305 и гибрид X-Wing. Сквозное шифрование в веб-приложении можно строить на постквантовых алгоритмах без сторонних библиотек. Третья: scroll-marker-group: tabs делает из CSS-карусели настоящий tablist для скринридеров, активный маркер единственный останавливается по Tab, а контент неактивных панелей скрыт из дерева доступности.

Что сломается: Background Fetch начал применять CORS, AbortController передаёт reason в Response и ReadableStream. Полный список на сайте.

#браузеры #css

Интерпретатор Wasm стал в 2,2 раза быстрее, и это важно там, где V8 не поможет

В браузере WebAssembly исполняет JIT, и про интерпретаторы фронтендеры обычно не думают. Но как только Wasm выходит за пределы вкладки, в плагины, edge-функции, iOS-приложения и песочницы, JIT либо запрещён, либо не помещается в память. Там живёт Wasmi, интерпретатор на Rust, и версия 2.0 по замерам проекта в 2,2 раза быстрее 1.0 по геометрическому среднему.

Внутри четыре режима dispatch вместо одного switch-loop, новое IR с аккумуляторными регистрами и структура CodeMap, где вызов функции не делает ни одного lookup. Включение SIMD больше не замедляет обычный код: в 1.0 это стоило около 8%.

Бенчмарки можно повторить из репозитория wasmi-benchmarks; сравнение с Wasm3, WAMR и Wasmtime Pulley, а также историю про Rust 1.92, который уронил CoreMark на треть, разобрали на сайте.

#wasm #перформанс

Safari наконец починил top-level await: WebKit переписал загрузчик модулей с нуля

Если модуль с await на верхнем уровне падал у вас в Safari с «Cannot access ... before initialization», это не ваш баг. WebKit сегодня рассказал, почему так было: загрузчик модулей Safari написали по черновику WHATWG Loader, заброшенному в январе 2016 года, ещё до появления async/await в языке. Top-level await из ES2022 прикрутили поверх него, и годы точечных правок проблему не закрывали.

В январе 2026-го команда удалила старый загрузчик целиком и переписала его на C++ по алгоритмам спецификации ECMAScript. В примере из блога один модуль с задержкой импортируется три раза: старый Safari завершал импорты в порядке 2, 3, 1, и два из трёх падали на неинициализированных экспортах, новый выдаёт 1, 2, 3. Проверяли тест-кейсами от команды Bun (тот же JavaScriptCore, те же баги), фаззером графов модулей со сравнением вывода с другими движками и полным набором модульных тестов test262.

Исправление уже в Safari Technology Preview 251 и бете Safari 27, в стабильный придёт с релизом 27. Обходные пути для Safari пока не убирайте, старые версии никуда не денутся. Что именно ломалось и как это чинили, разобрали подробнее.

Manifest V2 закрыт окончательно: Google удалил из Chrome Web Store все старые расширения, включая uBlock Origin

Для авторов расширений новость не про блокировщик, а про режим совместимости: закончился период, когда V2-сборки у клиентов можно было обновлять. Chrome 138 был последней версией с корпоративным ключом ExtensionManifestV2Availability, в 139 его убрали, 31 августа расширения исчезли из магазина.

Чек-лист переезда, если он ещё не завершён: сетевую фильтрацию на declarativeNetRequest со статическими правилами в JSON; фоновую страницу на service worker с состоянием в chrome.storage, а не в переменных; никакого удалённо загружаемого кода; проверка того же пакета в Edge и Firefox, у них свои отличия в поддержке V3.

Что произошло с uBlock Origin и куда переехать пользователям разобрали на сайте.

@tproger_web

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

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

Куда двигаться:
Каких спецов сейчас не хватает
Куда расти, если не хочется в менеджмент
Как попасть в QA в 2026

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

Работа в новой компании и карьерный трек:
Что нужно знать про онбординг
Почему сеньоров не слышат
Как построить карьерный трек
Как определять грейды
Как измеряют вашу удовлетворённость работой