REST API — это шесть ограничений, а не просто HTTP с JSON

Большинство «REST»-сервисов выполняют 2–3 ограничения из шести, которые Рой Филдинг описал в диссертации 2000 года. Клиент-сервер и stateless — обычно на месте. Остальные — реже.

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

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

Разбор всех шести ограничений и зачем они нужны — на Tproger.

@tproger_web
Читайте также в VK и Max

Ванильный CSS вместо Tailwind: система из девяти частей

Джулия Эванс провела неделю, переводя несколько сайтов с Tailwind обратно на семантический HTML и CSS, и задокументировала конкретную структуру, которая заменяет фреймворк.

Система состоит из девяти слоёв: reset, компоненты (один класс, один CSS-файл), цветовая палитра и шкала шрифтов через custom properties, утилиты, базовые стили и адаптивная сетка на grid auto-fit + minmax() без единого media query. В dev-режиме сборщик не нужен: браузер понимает нативные @import и вложенные селекторы. Для production достаточно одной команды esbuild.

Практическая проблема Tailwind v2 без JIT: 2,8 МБ CSS (270 КБ gzip) на каждый проект. В v3 JIT-компилятор обязателен, grid-template-areas через arbitrary values неудобен, container queries и @layer не вписываются в синтаксис.

Разбор с примерами структуры.

@tproger_web
Читайте также в VK и Max

Vite+ — один бинарник vp вместо пяти конфиг-файлов

VoidZero выпустили Vite+ (Node.js 20.19+ или 22.12+): CLI-инструмент, который объединяет Vite, Vitest, Oxlint, Oxfmt, Rolldown и менеджмент версий Node.js под одной командой vp.

До этого типичный проект держал отдельно .eslintrc, .prettierrc, vitest.config.ts и .nvmrc, у каждого свой релиз-цикл и режим отказа. Vite+ сводит всё в vite.config.ts. Одна команда vp check запускает форматирование, линтинг и проверку типов за раз.

Для новых Vite-проектов переход выглядит прямолинейно. Для production-кодовых баз с кастомными ESLint-плагинами лучше сначала протестировать: Oxlint совместим с большинством правил, но не со всеми.

@tproger_web
Читайте также в VK и Max

Pica 10.0 — качественный image resize в браузере

После пятилетнего перерыва вышла Pica 10.0 — библиотека ресайза картинок на клиенте с качеством на уровне GraphicsMagick. Ядро на WebAssembly, fallback на Web Workers, в крайнем случае — pure JS.

В 10.0:
— Полная миграция на TypeScript, типы для всего API.
— ESM как первый-класс, отдельные сборки для node/browser.
— Старое CommonJS-API сохранили — миграция не блокирующая.

Кейс: загрузить фото на 20 MP, отресайзить в 800×600 для аватарки, отправить хеш на бэк. Никакого ImageMagick на сервере, никакой нагрузки на CPU — Pica делает Lanczos-фильтр прямо в браузере. MIT, 7k+ звёзд.

@tproger_web
Читайте также в VK и Max

Откуда взялся Рунет: 7 апреля 1994 и далее

На Tproger вышла вторая часть истории российского IT, и веб-кусок там получился плотным.

7 апреля 1994 года зарегистрировали домен .RU. В тот же день появился первый сайт российской доменной зоны, 1-9-9-4․ru, со списком из нескольких десятков адресов и описаниями, что можно узнать в новом русском интернете.

Первый внемосковский интернет-канал страны проложила компания «Стек» из подмосковного Пущино: пятеро инженеров-радиотехников из НИИ в 1991 году подняли IP-канал к сети Курчатовского института, а потом свои ftp-, mail- и www-серверы.

8 октября 1996 запустился Rambler. Он проиндексировал около 100 тысяч документов, при том что весь Рунет тогда был на 30–50 сайтов. 23 сентября 1997 анонсировали Яндекс, и его сильной стороной стала русская морфология: система понимала, что «купить», «купил» и «куплю» — одно слово. В 1998 году на Yandex․ru появился контекстный баннер, меняющийся под запрос. Позже это станет основной бизнес-моделью.

Полный материал на Tproger.

@tproger_web
Читайте также в VK и Max

Firefox 151 — релиз

Mozilla выпустила Firefox 151 — стабильные ветки Release и ESR. Ничего революционного, но обновить стоит: публичный CVE-список появится в течение суток после выкатки, security-фиксы в каждом мажорном.

Из заметного для веб-разработчиков:
— Продолжается шлифовка CSS Anchor Positioning и View Transitions API.
— Убирают legacy XUL-куски в UI-движке. На рендер пользовательских страниц не влияет, но devtools могут вести себя иначе на edge-кейсах.
— ESR-ветка получит синхронный апдейт — корпоративные политики обновятся одновременно.

Проверьте сайты с :has() в сложных селекторах и container queries во вложенных гридах — Firefox добирается до Chrome/Edge feature parity не везде синхронно.

@tproger_web
Читайте также в VK и Max

Headless WordPress на Next.js и GraphQL: отдаем контент через API, рендерим на Edge

WordPress держит 43% веба, хотя backend-разработчики критикуют его за экосистему плагинов и функциональный стиль. Отрываем админку от UI: оставляем WP как CMS для редакторов, а фронт переносим на Next.js. Редакторы остаются в привычной админке, а вы получаете React с SSR и статической генерацией.

GraphQL служит связующим слоем. WordPress отдает контент через API, а Next.js забирает его на этапе сборки или по запросу. Cloudflare Pages раздает результат из ближайшего edge, и latency перестает зависеть от хостинга базы данных.

Если мигрируете легаси или строите новый проект с контентной нагрузкой, стоит разобрать, как стыкуются слои и где подстерегают подводные камни с кешированием запросов.

@tproger_web
Читайте также в VK и Max

Scroll-анимации на CSS, когда JavaScript уже не нужен

Scroll-эффекты до сих пор часто пишут через обработчики события прокрутки, хотя браузер давно лучше понимает, где находится пользователь. Новые CSS scroll features позволяют собирать продвинутые анимации декларативно и не гонять JS на каждом движении страницы.

В туториале Web Dev Simplified показывают, как использовать эти возможности для красивых scroll-driven эффектов, а рядом дают готовый код на GitHub. Это хороший материал для интерфейсов, где хочется движения, но не хочется тащить тяжёлую анимационную логику.

Если у вас есть лендинг, документация или интерактивная витрина, стоит разобрать пример. Детали помогут понять, где CSS закрывает задачу чище, чем очередной scroll listener.

@tproger_web
Читайте также в VK и Max

Фокус-кольцо, которое летает между элементами без ручной геометрии

Клавиатурная навигация часто выглядит как формальность: outline есть, но взгляд всё равно теряет, куда перескочил фокус. Новая игрушка с View Transitions показывает, как сделать «flying focus» без постоянного измерения DOM через getBoundingClientRect().

Идея такая: у focused-элементов есть дочерний span с одинаковым view-transition-name. При переходе фокуса браузер сам анимирует кольцо между состояниями. Автор отдельно проговаривает важный момент: уважать prefers-reduced-motion, потому что доступность не должна превращаться в аттракцион.

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

@tproger_web
Читайте также в VK и Max

JavaScript 2026: что учить, когда язык снова разросся

Проблема современного JS не в том, что «всё поменялось», а в том, что вокруг языка стало много слоёв: рантаймы, метафреймворки, RSC, сборщики, npm-безопасность и AI-инструменты. Поэтому полезно иногда собрать карту, где язык, а где экосистема.

В обзоре Frontend Masters есть RegExp.escape(), explicit resource management через using, Array.fromAsync, Iterator helpers, Next.js 16, React 19, Turbopack и боль npm supply chain. Хороший формат для тех, кто хочет понять приоритеты, а не читать чейнджлоги пачками.

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

@tproger_web
Читайте также в VK и Max

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

А заодно проверить вашу способность быстро запоминать новую инфу. Переходите по ссылке и играйте в нашу «Меморину». И делитесь результатами в комментариях!

Играть тут: https://tprg.ru/jB9F

@tproger_web
Читайте также в VK и Max

Все современные браузеры позволяют сайту следить за вашими вкладками через SSD

Атака FROST использует Origin Private File System, API без запроса разрешений, доступное в Chromium, Firefox и Safari. Сайт создаёт в OPFS файл от 1 ГБ и измеряет задержки случайных чтений. Когда другая вкладка или приложение обращается к SSD, задержки меняются, и свёрточная нейросеть по сигнатуре определяет, что именно у вас открыто.

Полная атака продемонстрирована на Mac с M2, на Linux подтверждён базовый примитив. Windows в тестах не участвовала, но авторы не исключают, что техника сработает и там. Пока случаев применения в реальности не зафиксировано, и единственная защита пока что закрывать неиспользуемые вкладки.

Подробности о FROST.

CDATA в RSS кажется удобным, пока вы не столкнётесь с ]]> внутри контента

В RSS и Atom CDATA берут, чтобы не экранировать HTML и спецсимволы вручную. Проблема в том, что последовательность ]]>, закрывающая блок, не может быть экранирована внутри него. Приходится разбивать CDATA на куски, что сразу ломает всю простоту подхода.

При этом CDATA не делает содержимое «безопаснее» — XML-парсер выдаёт точно такой же текст, как при обычном экранировании. Вывод получается разнородным: где-то один блок, где-то несколько склеенных. А отладка превращается в головоломку, если контент сам оказывается про CDATA.

Проще сразу сериализовать XML корректно и избавиться от лишнего edge case в коде генерации фида.

Chrome пробует частичные обновления прямо в HTML

HTML снова пытается стать самостоятельнее. В Chrome тестируют Declarative Partial Updates: template for может заменить заранее оставленный маркер в документе, а новые streaming-методы — дописывать HTML в уже существующий узел.

Практический смысл простой: часть того, что сейчас делается через JS-слой или фреймворк, можно будет отдавать как поток HTML и подставлять по готовности. Для островной архитектуры, тяжёлых блоков и SPA-обновлений это очень интересный сигнал.

Пока это эксперимент: Chrome 148 с флагом, есть polyfill, ограничения тоже есть.

MDN показали, как разгрузили фронтенд после редизайна

Не знаю, обратили ли вы внимание, но у MDN изменился не только дизайн. Интереснее то, что случилось под капотом: команда рассказала, как Markdown превращается в HTML и JSON, компоненты рендерятся на сервере, а на клиент уезжает только тот JS/CSS, который нужен конкретной странице.

Ставка на Web Components и Declarative Shadow DOM здесь понятна: документация быстрее грузится и не тащит лишний runtime.

Рекомендую почитать всем, кто делает большие контентные сайты. Можно взять из их опыта пару решений или собрать себе чеклист для следующего рефакторинга.

DOM и canvas наконец-то пытаются подружить

Canvas хорош, пока вам нужна только графика. Как только появляются кнопки, формы, выделение текста, accessibility и нормальное поведение браузера, начинается второй фронтенд поверх первого. Все, кто делал редакторы, 3D-интерфейсы или игры в браузере, понимают боль.

HTML-in-Canvas API предлагает интересный компромисс: DOM-элементы можно рисовать в 2D canvas или WebGL/WebGPU texture, но сохранять интерактивность и браузерные возможности. То есть UI остаётся HTML, а жить может внутри canvas-сцены.

Пока это origin trial так что в прод не несём. Но идею я бы сохранил: если взлетит, часть canvas-костылей станет не нужна.

Oxlint — линтер на Rust, который в 50–100 раз быстрее ESLint и работает сразу после установки

Если проверка кода в вашем проекте растягивается на минуты, я бы присмотрелся к Oxlint. Это рабочий инструмент из экосистемы Oxc от VoidZero: 107 правил из коробки, конфигурировать ничего не нужно.

В репозитории Vue Core Oxlint справляется за 1,3 секунды против 133,8 у ESLint с typescript-eslint: почти в сотню раз быстрее. Для React Router: 435 мс против 29,5 с. Проверка с учётом типов при этом не требует полного прогона компилятора tsc.

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