Веб-страница | frontend, backend, fullstack, react, vue, javascript, typescript, css, html

TanStack тихо съел половину вашего React-стека Если начинаете новый проект на React — посмотрите, из чего его собираете. За два года TanStack превратился из одной библиотеки (Query) в платформу из восьми: Router заменяет React Router и роутинг Next.js, Form вытесняет React Hook Form, Store — Zustan…

TanStack тихо съел половину вашего React-стека Если начинаете новый проект на React — посмотрите, из чего его собираете. За два года TanStack превратился из одной библиотеки (Query) в платформу из восьми: Router заменяет React Router и роутинг Next.js, Form вытесняет React Hook Form, Store — Zustand и Redux, Table — все табличные библиотеки, а Start — это RC-альтернатива Next.js без привязки к Vercel. Главный аргумент — сквозная типизация: Router типизирует не только пути, но и search params, контекст маршрута и данные лоадеров. По State of React 2026 у Query 68% использования и всего 1% негатива — против 17% у Next.js при том же охвате. Практичный расклад: Query ставьте уже сегодня — самый дешёвый апгрейд React-кодбазы. Router берите на следующем greenfield, миграция существующего приложения болезненная. Start пока наблюдайте, RSC в проде по-прежнему только у Next.js. Разбор на Tproger. @tproger_web Читайте также в VK и Max

9 браузерных API, которые делают половину вашего package.json лишней Перевод Sylwia Łask с практическими заменами npm-пакетов на нативные фичи. Только то, что уже работает в стабильных версиях. — <dialog> вместо react-modal: focus trap, Esc, backdrop и a11y бесплатно — crypto.randomUUID() вместо u…

9 браузерных API, которые делают половину вашего package.json лишней Перевод Sylwia Łask с практическими заменами npm-пакетов на нативные фичи. Только то, что уже работает в стабильных версиях. — <dialog> вместо react-modal: focus trap, Esc, backdrop и a11y бесплатно — crypto.randomUUID() вместо uuid и nanoid — :focus-within вместо ручных focus/blur-слушателей — Container queries для карточек в разных местах лейаута — requestIdleCallback для аналитики без блокировки main thread — requestAnimationFrame вместо setInterval(16) — navigator.onLine и события offline для PWA-синка — Web Speech API (в Safari — webkitSpeechRecognition) — @supports для внедрения :has() и backdrop-filter Читать перевод — с примерами и разбором, когда библиотека всё-таки нужна. @tproger_web Читайте также в VK и Max

Chrome 146 привязал сессии к TPM — что делать бэкенду Device Bound Session Credentials (DBSC) включили по умолчанию в Chrome 146 на Windows: приватный ключ сессии живёт в TPM-чипе, и даже сам Chrome его не читает. Инфостилеры вроде LummaC2 и Vidar, которые жили за счёт кражи cookies из профиля брау…

Chrome 146 привязал сессии к TPM — что делать бэкенду Device Bound Session Credentials (DBSC) включили по умолчанию в Chrome 146 на Windows: приватный ключ сессии живёт в TPM-чипе, и даже сам Chrome его не читает. Инфостилеры вроде LummaC2 и Vidar, которые жили за счёт кражи cookies из профиля браузера, остаются с бесполезным куском base64. Фронтенд трогать не нужно — браузер сам перехватывает обновление cookie. Бэкенду придётся добавить два эндпоинта: регистрация сессии принимает публичный ключ и привязывает его к рефреш-токену, refresh валидирует подпись challenge. Не сошлась подпись — сессия мертва. DBSC — открытый стандарт W3C, его тянут Google и Microsoft, дальше macOS через Secure Enclave. Firefox и Safari пока в стороне — нужна graceful degradation по заголовку Sec-Session-Registration. Пошаговый план внедрения разобрали на Tproger. @tproger_web Читайте также в VK и Max

Mozilla переписала фронтенд MDN Web Docs — стало быстрее и удобнее Если вы каждый день открываете MDN за документацией по HTML, CSS, JS или Web API — справочник обновился. Mozilla полностью переписала фронтенд, чтобы избавиться от технического долга, устаревших зависимостей и медленной навигации. …

Mozilla переписала фронтенд MDN Web Docs — стало быстрее и удобнее Если вы каждый день открываете MDN за документацией по HTML, CSS, JS или Web API — справочник обновился. Mozilla полностью переписала фронтенд, чтобы избавиться от технического долга, устаревших зависимостей и медленной навигации. Главные изменения: быстрее работает поиск, улучшена навигация по разделам, вырос общий перфоманс страниц. Контент при этом не трогали — он по-прежнему живёт в mdn/content на GitHub. Фронтенд — mdn/yari — открытый. Подробнее о том, что под капотом нового MDN @tproger_web Читайте также в VK и Max

Railway перешёл с Next.js на Vite + TanStack Start — сборка ускорилась в 5 раз PaaS-платформа Railway мигрировала с Next.js на Vite + TanStack Start. Время сборки упало с 10 минут до 2. Проблема не в Next.js как таковом — он работает, пока проект не начинает расти. На масштабе Railway холодный ста…

Railway перешёл с Next.js на Vite + TanStack Start — сборка ускорилась в 5 раз PaaS-платформа Railway мигрировала с Next.js на Vite + TanStack Start. Время сборки упало с 10 минут до 2. Проблема не в Next.js как таковом — он работает, пока проект не начинает расти. На масштабе Railway холодный старт и непредсказуемость билдов стали узким местом. Об архитектурных проблемах Next.js писали и раньше — Railway подтвердил это на практике. Vite выиграл не фичами, а поведением: быстрый старт, детерминированные билды, минимум магии. @tproger_web Читайте также в VK и Max

delegatesFocus: true в Shadow DOM — одна строка вместо ручного управления фокусом Если вы пишете веб-компоненты и делаете обёртку над <button> или <input>, скорее всего у вас есть что-то вроде: focus() { this.shadowRoot?.querySelector('button')?.focus(); } Это можно удалить. При подключении shad…

delegatesFocus: true в Shadow DOM — одна строка вместо ручного управления фокусом Если вы пишете веб-компоненты и делаете обёртку над <button> или <input>, скорее всего у вас есть что-то вроде: focus() { this.shadowRoot?.querySelector('button')?.focus(); } Это можно удалить. При подключении shadow root с delegatesFocus: true браузер сам перенаправляет фокус на первый фокусируемый элемент внутри при клике на хост, хост начинает матчиться на :focus и :focus-within в CSS, а «мёртвые зоны» фокуса при клике на padding исчезают. Но есть нюансы: когда delegatesFocus ломает навигацию (roving tabindex, комбобокс, слайдер), почему нельзя ставить tabindex="0" одновременно с ним — и как правильно переиспользовать @focus/@blur handlers, которые удалять не нужно. Всё это с примерами кода в статье. @tproger_web Читайте также в VK и Max

Автор react-motion выпустил библиотеку для вёрстки текста без DOM Cheng Lou (React core, Midjourney) открыл pretext — 15 КБ, zero deps. Суть: стандартные getBoundingClientRect и offsetHeight вызывают layout reflow — браузер пересчитывает геометрию всей страницы. При 60fps бюджет кадра 16.7 мс, а од…

Автор react-motion выпустил библиотеку для вёрстки текста без DOM Cheng Lou (React core, Midjourney) открыл pretext — 15 КБ, zero deps. Суть: стандартные getBoundingClientRect и offsetHeight вызывают layout reflow — браузер пересчитывает геометрию всей страницы. При 60fps бюджет кадра 16.7 мс, а один reflow на сотне текстовых блоков легко его съедает. pretext идёт другим путём: замеряет текст через Canvas font engine один раз, а вёрстку для любой ширины считает чистой арифметикой — DOM не трогает вообще. const prepared = prepare('Hello world', '16px Inter') const { height, lineCount } = layout(prepared, 320, 20) Работает с React, Vue, Svelte, vanilla JS, в браузере и на сервере. За первые 48 часов — 14 000 звёзд. GitHub Демо #javascript #производительность

50+ браузерных инструментов для веб-разработчика — без регистрации, без трекинга, всё локально delphitools — коллекция утилит, которые работают прямо в браузере и не отправляют данные никуда. Удобно для задач, где не хочется загружать файлы на сторонние сервисы. Из полезного для повседневной работ…

50+ браузерных инструментов для веб-разработчика — без регистрации, без трекинга, всё локально delphitools — коллекция утилит, которые работают прямо в браузере и не отправляют данные никуда. Удобно для задач, где не хочется загружать файлы на сторонние сервисы. Из полезного для повседневной работы: Tailwind Shade Generator (генерирует цветовые шкалы для конфига), Contrast Checker (WCAG-совместимость), SVG Optimiser, Favicon Generator, PX → REM конвертер, Gradient Generator с mesh-градиентами, Image Tracer, PDF Preflight для проверки перед печатью и Print Imposer для вёрстки буклетов. Плюс Regex Tester, Meta Tag Generator, Base64/URL-кодировщик и Tailwind Cheat Sheet на быстром доступе. Сделано одним разработчиком на Next.js + Tailwind + shadcn/ui, исходники открыты на GitHub.

Разраб реализовал RFC 2324 на Go — 4500 строк, ноль зависимостей, полная совместимость с протоколом управления кофеваркой RFC 2324 (Hyper Text Coffee Pot Control Protocol) — апрельская шутка IETF 1998 года. Определяет методы BREW и WHEN, статус-код 418 I'm a Teapot и заголовок Accept-Additions для …

Разраб реализовал RFC 2324 на Go — 4500 строк, ноль зависимостей, полная совместимость с протоколом управления кофеваркой RFC 2324 (Hyper Text Coffee Pot Control Protocol) — апрельская шутка IETF 1998 года. Определяет методы BREW и WHEN, статус-код 418 I'm a Teapot и заголовок Accept-Additions для сливок и виски. За 27 лет production-grade реализации не существовало. Нико Туразашвили написал её на Go. Под капотом полноценный HTTP-сервер с нестандартными методами, конечный автомат кофейника (idle → grinding → brewing → pouring → ready → cooling), SSE-стриминг для дашборда, content negotiation (curl получает ASCII-арт, браузер — JSON), rate limiting для защиты от DoCS-атак (Denial of Coffee Service, если больше 10 BREW за 30 секунд) и RFC 7168 TEA extension с поддержкой чая. Каждый пятый кофейник — тайный чайник, возвращающий 418 с детской считалкой. Живой сервер и дашборд в стиле форума 90-х доступны прямо сейчас. Попробовать: curl -X BREW https://brewops.10mins.email/pot -d 'start' curl -X BREW https://brewops.10mins.email/pot-2 -d 'start' # шанс получить 418 Подробнее: https://tproger.ru/translations/razrabotchik-napisal-production-grade-htcpcp-server-na-go---potom #go #http