Веб-страница - фронтенд бэкенд девопс

Подсветка фрагментов текста без единого лишнего 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 по собственной странице с аккордеоном или табами и поиск по тексту изнутри компонента. В ответе кастомный элемент без содержимого и тег рядом, который ничего не делает. На медленном соединении пользователь видит ту же пустую коробку, которая потом схлопывается. Поэтому и привычные лечения мимо: инлайн критического 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 вне формы. Функция в получает FormData, preventDefault не нужен, отправка всегда POST независимо от атрибута method. Две ловушки. React 19 разрешил async внутри transition, но всё после await нужно оборачивать во вложенный startTransition. И useTransition не гарантирует порядок завершения конкурентных Actions, порядок держат только и useActionState. В конце квиз на 15 вопросов, чтобы проверить себя. Разбор на dev.to. #react