Автор 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

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

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

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

#перформанс

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

Языковая модель во вкладке: 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 #ии

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

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

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

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

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

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

#фронтенд

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

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

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

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

#javascript

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

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

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

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

#css

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

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

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

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

#javascript

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

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

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

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

#javascript

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

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

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

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

#перформанс

ИИ-краулер видит вместо вашего сайта пустой div

Откройте клиентски отрисованный сайт в браузере: всё на месте, герой отрисован, навигация работает. Теперь заберите тот же URL так, как это делает автомат, обычным GET без браузера и движка JavaScript. В ответе почти пусто: <div id="root"></div>, пара тегов <script> и никакого человеческого текста.

Раньше с этим мирились. Теперь заметная доля клиентов на ваших URL это краулеры за ответами ИИ: GPTBot, ClaudeBot, PerplexityBot, Google-Extended и фетчеры, которые обслуживают режимы поиска в вебе и живые цитаты. Многие читают начальный HTML и на этом останавливаются. Если контент появляется только после бандла, для них его не существует.

Разбор раскладывает начальный HTML на три состояния и помогает понять, в каком из них ваш сайт. Проверить себя можно одной командой curl прямо сейчас.

#spa

Браузер дорос до того, чтобы конвертировать файлы без сервера

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

Отсюда исчезает не только загрузка. Пропадают очередь на обработку, требование завести аккаунт и серверный шаг целиком, а вместе с ними и вопрос, что стало с копией вашего файла.

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

Чем заменить привычные npm-пакеты, когда сервис уезжает на Rust

Тяжёлые сервисы на Node переписывают на Rust обычно ради двух вещей: предсказуемо низких задержек и счёта за инфраструктуру. Порт API с Express или Fastify на Axum, фоновый воркер, утилита для командной строки — механика везде одна.

Спотыкаются не на языке, а сразу после Cargo.toml. В npm больше двух миллионов пакетов, в crates.io набор заметно меньше и устроен иначе, с упором на типобезопасность и контроль памяти. Прямого аналога часто нет, а искать замену каждому пакету по одному долго.

Материал и есть та самая таблица соответствий для расхожих пакетов, плюс способ держать её под рукой прямо в VS Code.

Ноль зависимостей и ноль сборки: что вышло из 59 утилит на голом JavaScript

Автор Antigravity Tools поставил себе ограничение и выдержал его 59 раз подряд: без бэкенда на Node, без пакетов npm, без webpack, vite и parcel, без аналитики и куки. Только нативные браузерные API.

Ограничение оказалось не эстетическим. Когда вы вставляете JWT в онлайновый декодер, токен уходит на чужой сервер, а когда прогоняете строку через онлайновый тестер регулярок, строку логируют. Здесь каждая операция выполняется во вкладке, потому что уходить ей просто некуда.

Автор рассказывает, что из этого получилось и чего это стоило. Отдельно любопытно как аргумент в вечном споре, нужен ли тут фреймворк.

#javascript

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

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

Hybrid and On-device Web SDK от Firebase AI Logic эту развилку снимает: он сам решает, где считать. В Chrome скачивает и запускает Gemini Nano прямо на устройстве, в остальных браузерах уходит к облачной Gemini 3.5 Flash. Какой бэкенд отработал, пользователь не знает и знать не должен.

Показано это на приложении для анализа картинок: пользователь загружает изображение и получает теги, альтернативный текст и рекомендации. Туториал собран на Angular 22, Tailwind и Node 24, с локальным эмулятором Firebase.

#фронтенд

Физика, стеклянные деформации и процедурный звук в одном эксперименте на WebGPU

Франк Райтбергер с появлением WebGPURenderer и TSL сознательно перевёл свои эксперименты на новый стек, чтобы публиковать их уже на современной технологии. «Садовая аномалия» один из них.

В сцене сходятся три вещи: физика, деформации стекла и процедурно генерируемый звук. Последнее в браузерных демках встречается редко, и именно связка звука с симуляцией отличает эксперимент от обычного шейдерного этюда.

Компактный образец того, на что уже сегодня годится WebGPU в связке с TSL, без разрастания в полноценный проект.

Разработчик натянул настоящий рельеф Альп на сайт в Webflow и собрал всё за неделю

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

Может. Вышли три сцены по настоящим маршрутам: Тре-Чиме в грозу, Монблан на переходе синего часа в розовый и Аннапурна ночью со снегом. Геометрия везде честная. Свой трек автор записал в Strava, выгрузил GPX, почистил типичные выбросы GPS и натянул на реальный склон SRTM, а наружу уезжает только нормализованная версия без точных координат.

Сайт при этом остался обычным редактируемым проектом Webflow, и весь он собран примерно за неделю через Webflow MCP.

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

Он сделал всё, чтобы никто не лез в его код