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

Задайте источник света один раз, и все тени на странице посчитаются сами

Ambient CSS предлагает вместо ручных shadow-sm, shadow-md и shadow-lg описать свет: направление, интенсивность ключевого и заполняющего света, оттенок, высоту. Каждый элемент получает пятислойный box-shadow: тень, блики, фаски и внутренние затемнения, и все они согласованы между собой, потому что источник один.

У элемента задаётся только высота над поверхностью, elevation от 0 до 3, и толщина, thickness от 0 до 2. Пакет @ambientcss/css работает без зависимостей в любом HTML, есть отдельная обёртка для React. Автор выложил третью версию 1 сентября, на HN у неё 94 очка. В комментариях жалуются на мобильную версию демо, так что смотреть лучше с десктопа: ambientcss.vercel.app.

#css #фронтенд

Cloudflare начала отключать D1 на бесплатном плане после 5 млн прочитанных строк в сутки

С 1 сентября превышение дневного лимита на Workers Free больше не проходит незаметно: запросы к базе возвращают ошибки до полуночи UTC (03:00 МСК), данные не удаляются. Лимиты прежние: 5 млн прочитанных и 100 тысяч записанных строк в сутки, 5 ГБ хранилища. Изменился только режим: раньше мягко, теперь жёстко.

Ловушка в учёте: считаются строки, которые прошёл движок, а не строки в ответе. SELECT без индекса по таблице в 100 тысяч записей съедает 100 тысяч чтений за один вызов. Сколько реально прочитал запрос, D1 показывает в meta.rows_read.

Что сделать: пройтись EXPLAIN QUERY PLAN по частым запросам и добавить индексы там, где SCAN; кэшировать горячие ответы в KV; писать батчами, лимит записей в 50 раз меньше лимита чтений.

Тарифы платного плана и чек-лист собрали на сайте.

@tproger_web

Уберите тормозящую задержку из многоуровневого меню — её заменяет геометрия

Пользователь ведёт курсор по диагонали от пункта к подменю, задевает по дороге соседнюю строку, и содержимое переключается прямо под мышью. Обычное лечение — задержка перед сменой подменю, из-за которой интерфейс ощущается медленным. В большом меню Shop by Department на Amazon задержки нет, и промаха тоже.

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

Механизм разобрал Бен Кеймeнс в 2013 году и выпустил по мотивам плагин jQuery-menu-aim, который позже применили в меню Khan Academy. Приём описывает геометрию намерения пользователя, поэтому живёт дольше любой библиотеки.

#javascript #фронтенд

Firefox 155 добавил CSS-функцию progress() и Promise.allKeyed(), а на iOS браузер получил встроенный блокировщик рекламы

Для вёрстки главное: progress(value, start, end) возвращает долю от 0 до 1 между двумя границами, так что адаптивные размеры пишутся без ручного calc(); alpha() меняет прозрачность любого цвета; attr() теперь работает в любом свойстве, а не только в content; font-width заменил font-stretch, старое имя осталось псевдонимом.

В JavaScript появились Promise.allKeyed() и Promise.allSettledKeyed(): на вход объект с промисами, на выход объект с теми же ключами, без сопоставления по индексам. В сети добавили согласование QUIC v2 для HTTP/3, DevTools научились читать NDJSON построчно.

На iPhone у Firefox нет привычных расширений, поэтому Mozilla встроила блокировщик на Apple Content Blocker и EasyList прямо в настройки; выключен по умолчанию.

Примеры кода и список закрытых уязвимостей разобрали на сайте.

@tproger_web

Переведите SVG-контур в CSS-функцию shape() за один вставленный путь

Функция shape() описывает произвольный контур прямо в CSS: её можно анимировать, задавать в ней проценты и единицы вроде em, использовать в clip-path и offset-path. Проблема ровно одна: писать её руками мучительно, а все реальные контуры уже нарисованы и лежат в виде d-атрибута внутри SVG.

Мэтью Морете год возился со спецификацией и выложил три маленьких инструмента, которые закрывают эту работу:

— Path to Shape переводит d из SVG-пути в синтаксис shape();
— Shape to Polygon делает обратный ход в polygon(). Пригодится как запасной вариант для браузеров без поддержки shape(), а иногда и как прямая замена: polygon() часто выходит компактнее;
— Minify Shape сжимает готовый код shape() примерно так же, как SVGO поступает с SVG.

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

#css

Векторизуйте логотип в SVG прямо во вкладке браузера, не отправляя файл на сервер

Онлайн-сервисы просят за трассировку растра деньги или подписку, а бесплатные выдают контуры, будто их обводили во время землетрясения. Vectron решает этот случай локально: внутри открытый движок VTracer на Rust, собранный в WebAssembly и запущенный в Web Worker, поэтому картинка никуда не уходит.

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

В нашем канале «Инструменты программиста» разобрали подробнее, включая настройку фильтров по выделенному участку.

#фронтенд

Браузер научится подтверждать почту без письма с кодом — разбор Email Verification API

Каждая регистрация с подтверждением почты теряет людей на одном шаге: отправили код или magic link, пользователь ушёл во вкладку почты — и не факт, что вернулся. Email Verification API — новое предложение, которое убирает этот шаг: браузер подтверждает сайту, что адрес принадлежит пользователю, не выпуская его со страницы.

Как это устроено: у адреса есть провайдер почты (gmail.com) и издатель — issuer, сервис, управляющий учётной записью (accounts.google.com). Браузер находит issuer, тот проверяет активную сессию пользователя и выпускает подписанный токен подтверждения, а сервер сайта проверяет токен у себя. Вместе с кодами исчезают и опечатки в адресах с мёртвыми ящиками, которые портят репутацию отправителя.

Статус ранний: это proposal, браузерная часть доступна через origin trial в Chrome, из почтовых провайдеров участвует Gmail. Подключать можно уже сейчас как progressive enhancement — с фолбэком на обычный код.

Разбор с примерами кода

#фронтенд

Как работает облако в эпоху AI, почему в RecSys происходит незаметная революция и с какими вызовами сталкиваются инженеры при трансформации генеративных агентов в массовый продукт.

Эти и другие темы эксперты разберут 5 сентября на deep tech night — онлайн-конференции о вызовах, с которыми IT-индустрия сталкивается в эпоху AI. Это мероприятие о том, как ИИ меняет устройство инфраструктуры, продуктов и самой разработки.

Мо Гавдат, ex‑Chief Business Officer Google X, расскажет, как генеративные нейросети меняют разработку и работу инженеров. 

Также выступят эксперты Яндекса: Александр Сафронов — про архитектуру модели в Яндекс Музыке, которая умеет строить персональную Мою волну по запросу пользователя; Станислав Макеев — про встраивание агентных контуров в работающий бизнес на примере Лавки; Андрей Попов — о том, как AI влияет на скорость и эффективность разработчиков.

Регистрируйтесь, чтобы подключиться к онлайн-трансляции, задать вопросы экспертам на Q&A-сессии и получить запись докладов после события.

«В приложении удобнее» — а потом вас выкидывает в браузер

Терранс Иден описал бытовую сцену, знакомую любому, кто делает продукт с приложением и сайтом. Он хотел подписаться на календарь событий. У него была ссылка, Pixel с Android 17 и обновлённое приложение «Календарь». Добавить календарь по ссылке из приложения оказалось нельзя. Он открыл calendar.google.com в браузере в режиме desktop, подписался — и календарь тут же появился в приложении.

Задача не из сложных: кнопка, поле ввода, валидация, сохранение. Функциональность на бэкенде уже есть, приложение её просто не показывает.

Дальше автор обобщает по своему опыту разработки под Symbian, BlackBerry и Palm Pilot. Приложение тяжело обновлять: каждая новая возможность или даже новый экран требуют проверки на тысяче устройств и потом медленно расходятся по пользователям. Единственный способ это обойти — научить приложение подтягивать функциональность с сервера. На этом месте вы уже написали браузер.

Практический вывод для тех, кто отвечает за веб-версию: приложение обычно покрывает узкий сценарий, всё остальное всё равно возвращается в браузер. Значит, мобильный сайт стоит держать полнофункциональным — включая те операции, которые «по логике» должны жить в приложении. Проверить у себя просто: возьмите список действий пользователя и отметьте те, что с телефона выполняются только через desktop-режим браузера.

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

#фронтенд

Типичный Программист снова откладывает отпуск. В этот раз аргумент новый, но узнаваемый: релиз вот-вот стабилизируется. Спойлер: не стабилизируется.

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

Поехали → https://tprg.ru/SEVh

Firefox начал догонять Chrome в предварительной загрузке страниц

Firefox Nightly получил ограниченную поддержку Speculation Rules API. Этот API позволяет прямо в HTML указать ссылки для предварительной загрузки, чтобы браузер подготовил переход заранее. В Chrome механизм работает давно, поэтому его отсутствие в Firefox оставалось одним из заметных расхождений в скорости навигации.

Сейчас реализация Mozilla покрывает только same-origin prefetch, режим immediate и правила-источники list. Браузер умеет заранее загружать ресурсы в пределах того же источника по явно заданному списку. Остальная часть API пока за рамками заявленной поддержки.

Правила задаются блоком script type="speculationrules" прямо в HTML: браузеры без поддержки его просто игнорируют, так что добавить его безопасно уже сейчас — в Chrome предзагрузка заработает сразу, а Firefox подтянется. Пока это Nightly 157: Mozilla предупреждает, что функции оттуда могут не дойти до стабильного выпуска.

Connection Allowlist в Chrome может отключить вход через FedCM

Chrome добавил сайтам способ заранее ограничить все сетевые подключения страницы. Механизм включается добровольно через заголовок Connection-Allowlist, но после включения любое забытое направление блокируется. Под удар попадает и FedCM — браузерный протокол для кнопок федеративного входа.

В Chrome 152 владельцу сайта нужно вручную разрешить все адреса поставщика удостоверений. В список входят конечные точки .well-known, Config, Accounts, ID assertion, Disconnect и Client metadata. Запись может выглядеть так: ("https://idp.example/*" response-origin).

Без этих разрешений интеграция FedCM может повести себя не так, как ожидается, вплоть до того, что пользователь не сможет войти. Google описала этот побочный эффект отдельно. Для сайта с таким входом нужно сопоставить заголовок со всеми конечными точками провайдера до включения механизма. Пока Connection-Allowlist не задан, сетевое поведение страницы остаётся прежним.

pnpm закрыл глобальную подмену реестра через файл проекта

pnpm — пакетный менеджер для JavaScript и TypeScript с общим хранилищем пакетов на диске и строгим деревом зависимостей. В версии 12.1.0 он перестал принимать настройку scope из pnpm-workspace.yaml: закоммиченный в репозиторий файл через неё дотягивался до глобальной конфигурации разработчика.

Цепочка срабатывала на обычном pnpm login. Репозиторий держал в pnpm-workspace.yaml строку вида scope: acme, логин подхватывал её наравне с флагом --scope и дописывал маршрут @acme:registry в машинно-глобальный auth.ini — файл вне репозитория, который pnpm считает доверенным источником и который перебивает ~/.npmrc в каждом проекте на машине. В выводе команды при этом было видно только Logged in on https://registry.npmjs.org/, про scope ни слова. Дальше пакеты @acme/* резолвились с записанного реестра и в проектах, к тому репозиторию отношения не имеющих.

Теперь такой scope игнорируется, а pnpm подсказывает, где его задавать: флагом --scope, переменной PNPM_CONFIG_SCOPE или в глобальном конфиге. Поведение унаследовано от npm CLI и повторяется в pacquet, поэтому в трекере это завели обычной задачей на укрепление, без security-advisory.

Оговорка про версии: 12.1.0 и 11.25.0 вышли 29 августа под тегами next-12 и next-11, а latest на 30 августа всё ещё показывает на 11.24.0. Проверить pnpm-workspace.yaml в своих и чужих репозиториях на строку scope и заглянуть в глобальный auth.ini на лишние маршруты можно уже сейчас.

Svelte ускорил старую реактивность, которой всё ещё много в проектах

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

В Svelte 5.57.0 поиск по Map в этом месте перевели с квадратичной сложности на линейную. Изменение относится к legacy-реактивности; для кода на рунах эта оптимизация не заявлена. Процента ускорения приложения целиком авторы не приводят: в описании релиза указана только смена сложности алгоритма.

В том же выпуске кеш сеттеров перевели с массива на Set, SSR-маркеры сворачиваются в первый push, а для единственного дочернего элемента генерируется вызов only_child. Оптимизация прежде всего касается проектов, которые сохранили старый синтаксис Svelte. На GitHub релиз собрал 13 реакций к 30 августа 2026 года.

Push to deploy без долларовой карты: что выросло на месте Heroku

Схему, которую Heroku придумал в 2008-м, до сих пор трудно переплюнуть: git push — и через минуту сайт живой. Vercel, Render, Railway и Netlify выросли из той же идеи, но упираются в одно и то же: оплата долларовой картой и серверы не здесь.

На Tproger вышел разбор от команды, которая четыре года собирала российский аналог: MVP за полгода, потом деплой через MCP прямо из Codex и Claude, встроенная IDE с агентом, управляемый PostgreSQL с pgVector и прокси к API OpenAI, Anthropic и Telegram, чтобы приложение в московском регионе не упиралось в блокировки. Отдельным блоком — честное сравнение с каждым из пяти конкурентов: где похоже, где хуже, где иначе.

В нашем канале Tproger разобрали подробнее.

В Node.js завезли работу с ZIP без единой зависимости

Распаковать архив в Node до сих пор означало тащить adm-zip, yauzl или jszip — за одну операцию вы получали в дерево зависимостей чужой код, который потом надо обновлять и проверять на уязвимости.

В Node.js 26.8.0 от 26 августа в модуль zlib добавили ZipEntry, ZipFile и ZipBuffer. Читать архивы и разбирать их по записям теперь можно средствами платформы.

Что ещё в релизе:

— net.BlockList заметно ускорили, а TracingChannel в diagnostics_channel объявлен стабильным;
— в Cipher и Decipher включили режимы SIV и GCM-SIV: шифрование, устойчивое к повторному использованию nonce, что чаще всего и ломает AES-GCM в чужом коде;
— у StatementSync во встроенном sqlite появились close() и поддержка Symbol.dispose, то есть подготовленный запрос можно держать в using;
— MIMEType.parse разбирает тип и возвращает null вместо исключения на мусоре;
— в REPL появилась базовая подсветка синтаксиса;
— корневые сертификаты обновлены до NSS 3.126.

26.x — текущая линейка Current; в LTS zlib с ZIP приедет позже, так что в прод пока не тащите.

#nodejs

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

До версии 4.5 парсер интерпретировал схему прямо во время валидации: на каждый parse() Zod обходил дерево и по ходу решал, что проверять. Во вчерашнем релизе появился z.compile() — он один раз проходит схему целиком и генерирует под неё плоский JavaScript без циклов, который выполняется через new Function(). На валидных данных срабатывает быстрый путь, на невалидных Zod возвращается к обычному парсеру за подробной ошибкой.

Собирать ничего не нужно, всё происходит в рантайме: import "zod/compile" в точке входа или флаг node --import zod/compile включают компиляцию для всех схем сразу. Ускорились и отказы — .safeParse() перестал захватывать стек-трейс и на неудачном пути стал быстрее примерно в 7,5 раза.

Перед обновлением проверьте два места: z.iso.datetime() больше не принимает время без секунд (2020-01-01T06:15Z теперь ошибка), а .min(), .max() и .length() у строк считают кодовые точки Unicode вместо кодовых единиц UTF-16.

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

Файл про офисных котов прошёл все четыре «доказательства» пользы llms․txt

Последний год клиентам продают llms․txt — файл в корне сайта, который якобы помогает попасть в ответы языковых моделей. Доказательства всегда одни и те же: ботам файл скачали, Google его проиндексировал, модель пересказала его содержимое, ChatGPT подтвердил, что это помогает ранжированию.

Марк Уильямс-Кук проверил эту логику так: придумал стандарт cats․txt, в котором сайт формально декларирует своих офисных котов — имена, должности, породы и обязательную метрику привязанности PurrLevel по десятибалльной шкале. Написал спецификацию, опубликовал в блоге и отдельно вынес в LinkedIn, потому что модели к этой площадке по непонятной причине благосклонны.

Все четыре «доказательства» файл прошёл, не запнувшись. Боты его скачали, Google проиндексировал, модели начали пересказывать подробности про кота Odd, который не существует нигде, кроме этого файла, а ChatGPT пространно подтвердил, что cats․txt может помочь ранжированию. Идею подхватили: кто-то добавил файл себе на сайт, кто-то поднял catstxt.org с более аккуратной спецификацией, чем оригинал.

Про сам llms․txt автор отдельно оговаривает: ни OpenAI, ни Anthropic, ни Google не документировали его использование в поиске. Джон Мюллер из Google высказался прямее: ни один чат-бот файл не скачивает, это видно по логам сервера. Ahrefs прогнал 100 000 доменов и увидел, что краулеры, ради которых файл кладут, в основном его игнорируют; отдельные крупные исследования не нашли и прироста цитирования.

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

#seo #ии

htmx 4.0 вышел и намеренно не стал версией по умолчанию

Восемь месяцев работы, релиз сегодня. Для пользователя четвёртая версия почти совпадает со второй, но внутри библиотека переехала с XMLHttpRequest на fetch() — ради этого всё и затевалось.

Главных изменений авторы называют три, и заметнее прочих наследование атрибутов. В htmx 2 атрибут на родителе по умолчанию действовал на потомков, как в CSS: hx-confirm на div спрашивал подтверждение у каждой кнопки внутри. В htmx 4 наследование включается явным суффиксом:

<div hx-confirm:inherited="Точно?">
<button hx-delete="/item/1">Удалить</button>
</div>

hx-disinherit при этом исчез, его следует убрать. Дальше — имена событий, приведённые к схеме htmx:<фаза>:<система>, и история навигации, которая перестала по умолчанию храниться локально: авторы называют старый кэш источником многих обращений в поддержку. Полный список несовместимостей длиннее трёх пунктов и лежит в руководстве по миграции.

Тег latest в npm остался на ветке 2.x примерно до начала 2027 года, чтобы не переключить силой тех, кто подключает htmx с CDN без указания версии; четвёртая ветка живёт под next. Места, которые надо чинить, ищет команда upgrade-check из комплекта.

#javascript #фронтенд

Разница между «у нас есть бэкап» и «мы готовы к аварии» — примерно как между наличием огнетушителя и умением им пользоваться при пожаре. Первое не гарантирует второе, а узнают об этом обычно в момент, когда сервис лежит у всех на глазах, включая руководство и клиентов. На самом деле готовность инфраструктуры к сбою определяет не факт хранения копий, а расчёт допустимого времени простоя, структура плана восстановления и техническая настройка репликации, которую проверяют заранее регулярными учениями переключения на резервную площадку. Будет полезно инфраструктурным инженерам, техлидам и руководителям, которые хотят сделать свои системы реально устойчивыми к авариям.

Больше об аварийном восстановлении:
1. Почему бэкап есть, а восстановиться не получится: разбор точек отказа
2. Как должен выглядеть DR-план, который сработает в аварию
3. Аварийное восстановление до аварии: как настроить DRaaS, пока ничего не упало