Web Page - Frontend Backend DevOps

Ваш веб-компонент приезжает клиенту пустым, и серверный рендер тут ни при чём У 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

Задержка анимации по номеру элемента теперь одна строка 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 принимает ввод, отдельный слой сверху рисует подсветку синтаксиса, а Tree-sitter обрабатывает только видимые строки, потому что слишком много CSS Highlights само становится узким местом. Бонус для тех, кто считает символы: "🍋🟩".length даёт 5, spread даёт 3, а Intl.Segmenter честно видит один графем. Разбор у автора. #javascript