ProWeb

Progressive Web Apps, в целом, крутые. Мартин Грубингер собрал плюсы и минусы: URL и кнопка назад работают так, как задумано в вебе, приложение не занимает сотню мегабайт, а обновление доезжает до пользователя за одну перезагрузку вместо дней ревью в сторе. Из минусов — установка на iOS, непредсказуемые промты установки в Chromium, встроенный браузер для внешних ссылок и недоступное имя WiFi-сети. #pwa #browser https://grooovinger.com/notes/progressive-web-apps-mostly-rock

React Router v8: ленивые страницы и вложенные маршруты В React Router v8 пакеты объединены: react-router-dom больше нет, а ключевые API импортируются напрямую из react-router. Используйте lazy + Suspense для code-splitting по страницам, Routes/Route для матчинга ветки с ранжированием, HashRouter для удобной статики и wildcard-роут * для нормального 404. https://reactdevelopment.substack.com/p/react-router-v8-in-action-lazy-loading

Как Baseline помогает писать меньше JavaScript. Джад Джубран разбирает пять групп зависимостей, которые уже заменяются возможностями платформы: форматтеры Intl вместо timeago.js и numeral, fetch() с AbortSignal.timeout() вместо axios, <dialog> и Popover API вместо библиотек для модальных окон и подсказок, structuredClone и Object.groupBy вместо Lodash. Исключение — Temporal: его полифил на 44 КБ сводит экономию на нет. #baseline #js https://www.smashingmagazine.com/2026/08/how-baseline-can-help-ship-less-javascript/

Конец адаптивных изображений. Атрибут sizes для <img> раньше был самым сложным: его синтаксис приходилось постоянно держать в актуальном состоянии вместе с CSS. Идея в том, чтобы перейти к Client Hints: браузер подсказывает серверу нужный размер, сервер присылает подходящее изображение, а разметка сводится к простому <img src="" alt=""> (плюс не забыть про lazy loading). https://master.dev/blog/ending-responsive-images/

Гайд по 3D в CSS: perspective, preserve-3d и translateZ. Кармен Ансио разбирает, как строить полноценные 3D-сцены в CSS, показывая переход от нарисованной глубины Super Mario Bros 3 к настоящей камере Super Mario 64. В обзоре: perspective и perspective-origin для установки камеры, preserve-3d для сохранения реальной глубины, переиспользуемые кубоиды, анимация камеры и translateZ, rotateX/Y/Z, scale3d и matrix3d. Все шесть свойств — Baseline. #css #3d https://www.carmenansio.com/articles/3d-css-guide/

Лучшие состояния загрузки — это когда их нет. Вместо спиннеров и скелетонов прокачивайте стратегию preloading: заранее подгружайте данные и готовьте переходы между маршрутами, чтобы страница ощущалась как загруженная сразу. Route transitions не убирают загрузку полностью, но помогают перенести её на уровень приложения, делая UX стабильнее и предсказуемее в SPA. https://master.dev/blog/the-best-loading-states-are-no-loading-states/

Новинки WebKit в Safari 26.6. Джен Симмонс разбирает небольшое, но полезное обновление: новый параметр compileOptions позволяет использовать JS String Builtins с WebAssembly compileStreaming() и instantiateStreaming(), не переключаясь на непотоковую компиляцию. Плюс восемь багфиксов в CSS, сети, service workers, веб-расширениях и WebRTC. #safari #wasm https://webkit.org/blog/18178/webkit-features-for-safari-26-6/

Доступное модальное окно на нативном <dialog>. Агустин Барриентос использует showModal(), чтобы получить из коробки перехват фокуса, закрытие по Escape и возврат фокуса, а затем оборачивает всё в переиспользуемый Lit-компонент с типизированными событиями. Он задаёт начальный фокус, добавляет light-dismiss через атрибут closedby, анимирует псевдоклассом :open и @starting-style и уважает prefers-reduced-motion. #dialog #a11y https://agustinbarrientos.com/writing/senior-eye/accessible-modal-dialog/

Анимация In-N-Out с sibling-index() Фишка в CSS-функции sibling-index(): при добавлении/удалении элементов индекс пересчитывается, а значит меняются значения translate, и включённый transition автоматически превращает перестроение DOM в плавную анимацию. Отлично подходит для аватаров, списков и сеток. https://master.dev/blog/in-n-out-animation-using-sibling-index/

Masonry с анимацией в CSS display: grid уже умеет раскладку в стиле masonry через grid-lanes. Чтобы получить плавную перестановку без JS-логики, анимируют не сами карточки, а их внутренний слой: он привязывается якорями и двигается за счёт inset: anchor(inside) с transition. https://master.dev/blog/masonry-with-animation-in-css/

SVG-фильтры для текста. Кармен Ансио показывает, как примитивы SVG-фильтров воссоздают исторические типографские эффекты: feMorphology рисует настоящую внешнюю обводку, наложенные слои feOffset придают буквам объём, feSpecularLighting имитирует свет на рельефе, а feDisplacementMap с feTurbulence органично искажает текст. Она собирает золочёные буквицы, хроматические сдвиги, неоновое свечение и слияние букв, с заметками о sRGB и производительности. #svg #typography https://www.carmenansio.com/articles/svg-filters-on-type/

Когда имеет смысл блокировать главный поток Кратко о том, когда правило “не тормози main thread” можно нарушать. Разбираем пример screenshot-расширения с сериализацией Base64. https://smashingmagazine.com/2026/07/when-makes-sense-block-main-thread/

Гітхаб виклав цікаві речі. Там написано "для новачків", але раджу подивитись чи все ви знаєте https://github.blog/developer-skills/github/github-for-beginners-your-roadmap-to-mastering-the-github-essentials/

FixCSS: исправляем исторические ошибки в CSS В CSS Working Group есть список старых проектных промахов, из‑за которых до сих пор приходится вручную обходить поведение вроде box-sizing: border-box в стартовых стилях. FixCSS предлагает починить эти нюансы библиотекой, чтобы не тащить постоянные костыли в код, но с понятным компромиссом по runtime‑стоимости. Если хотите прокачать понимание того, как CSS реально эволюционировал и почему многие практики закрепились, это отличный повод разобраться глубже. https://master.dev/blog/fixcss/

Shaders — дизайн-платформа для WebGPU-эффектов. Создавайте анимированные фоны, оверлеи, стеклянные поверхности, 3D-фигуры и текст как декларативные компоненты для React, Vue, Svelte, Solid, JavaScript и Framer. Визуальный редактор с бесконечным холстом позволяет собирать и настраивать эффекты без кода шейдеров. Недавняя v3 добавила более быстрый движок и уменьшила размер бандлов. #tools #animation https://shaders.com/

Как проектировать интерфейсы для уязвимых пользователей: почему ментальным health-приложениям нельзя гнаться за любыми UI-трендами Трендовые решения часто повышают когнитивную нагрузку и делают навигацию непредсказуемой — в итоге человек в стрессе просто не находит нужную помощь и быстро уходит. Важно проверять каждый модный паттерн по пяти критериям: нагрузка, эмоциональное соответствие, надежность навигации, доступность и корректность механик вовлечения без давления/стыда. https://smashingmagazine.com/2026/07/designing-distressed-users-mental-health-apps-ui/

Как сделать интерактивный элемент невидимым, но доступным Используйте hidden="until-found" для скрытия контента с сохранением доступности (поиск по странице и навигация по фрагментам работают, элемент остаётся фокусируемым), а затем компенсируйте отсутствие ховера/видимости через contain-intrinsic-size: auto none, чтобы не было layout shift. https://master.dev/blog/how-to-make-an-interactive-element-invisible-but-accessible/

Что нового в ECMAScript 2026. Павел Гжибек разбирает возможности новой спецификации: Array.fromAsync, Error.isError(), Math.sumPrecise для точного суммирования чисел с плавающей точкой, конвертация Uint8Array в Base64 и Hex, Iterator.concat() для объединения итераторов, доступ к исходному тексту в JSON.parse и Map.getOrInsert() для вставки значений. #ecmascript #js https://pawelgrzybek.com/whats-new-in-ecmascript-2026/

Стили в CSS с учетом границ Функция view() позволяет привязывать прогресс анимации к видимости элемента в ближайшем scroll-контейнере: цвет/размер/поворот меняются, когда объект приближается к краям или уходит за них. На практике так раскрашивают элементы в сетке по горизонтальному положению, меняют тон при перетаскивании и подсвечивают ползунки по мере движения. https://master.dev/blog/boundary-aware-styling-in-css/