FrontEndDev

09 November 2026 08:30

WebP наконец стало удобно использовать

WebP перестал быть экзотикой: поддержка дошла до всех основных браузеров, а в Pixelmator Pro с ним теперь удобно работать. Формат часто даёт меньший размер, чем JPEG и PNG при том же качестве, но в Photoshop его по-прежнему нельзя нормально сохранить через Save for Web и Export As.

https://anderegg.ca/2026/10/08/i-guess-im-using-webp-now

FrontEndDev

07 November 2026 15:30

ИИ-агенты научились рисовать схемы вместо простыней

Появился blueprint4llm, open-source тулза для превращения plan.md в HTML или PDF с Wiremark-скетчами и Mermaid-диаграммами. Встроенный предпросмотр пересобирает документ при сохранении, но поддержка Wiremark и Mermaid в редакторах и вьюверах остаётся не везде.

https://habr.com/ru/articles/1096958/

FrontEndDev

06 November 2026 15:30

Угадайте HTTP-статус по бытовой ситуации

Квиз по HTTP-статусам переводит 12 кодов в бытовые сцены и помогает не путать 401, 403, 429, 503 и 504. Для 429 клиенту стоит читать Retry-After, а при 413 и 304 проверьте лимиты загрузки и версионирование больших ответов.

https://habr.com/ru/articles/1097542/

FrontEndDev

06 November 2026 08:30

Конвертер кривых CSS и Spine 4.2

Riggy переводит CSS cubic-bezier и пресеты ease в массив curve для таймлайна Spine 4.2 и обратно. Кривая привязывается к первой из двух ключевых точек, а на последнем ключе она игнорируется.

https://riggyapp.com/tools/spine-bezier-curve

FrontEndDev

05 November 2026 08:30

Как проверить обработчик postMessage в iframe

postMessage в iframe позволяет виджету и родительской странице обмениваться данными, но без проверок любое окно может отправить сообщение. Для resize-обработчика нужно сверять event.origin и event.source, а затем ограничивать формат и диапазон данных.

https://blog.master.dev/testing-an-iframes-postmessage-handler/

FrontEndDev

04 November 2026 08:30

Браузеры по-разному грузят lazy-медиа

Вышел разбор того, как Chrome, Firefox и Safari заранее подгружают lazy images и media, и почему loading="lazy" на hero-изображении замедляет страницу. Для LCP-картинки оставляйте eager по умолчанию, а loading="lazy" ставьте только ниже первого экрана, иначе браузер начнёт запрос позже.

https://calibreapp.com/blog/native-lazy-loading

FrontEndDev

03 November 2026 08:30

iOS PWA унаследовали старые ограничения

Первая часть цикла о том, как PWA работают на iPhone, объясняет, откуда берутся привычные странности iOS и почему они до сих пор влияют на запуск веб-приложений. В <head> почти любого PWA в 2026 году рядом с manifest по-прежнему встречается apple-mobile-web-app-capable.

https://feeds.dzone.com/link/23564/17501497/pwa-ios-history

FrontEndDev

02 November 2026 08:30

Deno уходит в Cloudflare ради новой платформы

Команда Deno переходит в Cloudflare, потому что хочет развивать не отдельный runtime, а общую платформу для серверов, где compute, storage и communication работают вместе. Авторы прямо говорят, что Deno Deploy показал: удобный DX есть, но под ним всё ещё слишком много инфраструктурной сложности.

Сильный аргумент за этот шаг — celld и Durable Objects обещают распределённые приложения с масштабированием, встроенным в модель программирования, а не собранным вручную. Сильный аргумент против — Deno как runtime получит только год поддержки, Deno Deploy закроется через шесть месяцев, а тем, кто строил на экосистеме, придётся мигрировать.

А вы бы поставили на такую платформу вместо отдельного runtime?

https://deno.com/blog/cloudflare

FrontEndDev

31 October 2026 13:50

Что можно собрать из ::before и ::after

Псевдоэлементы ::before и ::after можно превратить в полноценные декоративные слои и фигуры без лишних узлов в HTML. box-shadow, несколько background и clip-path позволяют собрать из одного псевдоэлемента повторяющиеся объекты, сложные фоны и нестандартные формы.

https://habr.com/ru/companies/gnivc/articles/1096800/?utm_campaign=1096800&utm_source=habrahabr&utm_medium=rss

FrontEndDev

30 October 2026 13:50

Scheduler.yield() разгрузил главный поток

Современный Web API scheduler.yield() помогает дробить тяжёлые вычисления и возвращать управление браузеру без долгих блокировок интерфейса. В тесте на 500 тыс. записей задержка ввода упала с 45,4 до 0,3 мс по сравнению с синхронным запуском.

Порция в 8192 записи укладывается примерно в 1,7 мс CPU, а setTimeout(0) в такой схеме проигрывает из-за 4 мс минимальной задержки и потери приоритета продолжения.

https://habr.com/ru/companies/domclick/articles/1090250/

FrontEndDev

29 October 2026 15:30

Полный справочник по CSS-единицам

Интерактивный справочник по CSS-единицам собрал в одном месте все основные и новые единицы измерения, от px и rem до svh, dvh и cqw. В браузере можно сразу увидеть, как меняются размеры, плюс есть PDF-верси, которую можно скачать.

https://cssunits.com/

FrontEndDev

29 October 2026 13:50

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

В Chromium тестируют Declarative Partial Updates, где новый элемент <?marker> позволяет вставлять HTML не по порядку и собирать страницу прямо на клиенте. Для длинных веток комментариев и чат-ответов это убирает необходимость сначала строить дерево на сервере и потом рендерить его целиком.

<?marker> работает один раз в конкретной точке, а для очень больших веток вроде 10K постов браузер всё равно можно перегрузить.

https://daverupert.com/2026/10/html-recursion/

FrontEndDev

28 October 2026 15:30

Расширение MD-This-Page превращает страницы в Markdown

MD-This-Page — расширение для браузера, которое в один клик превращает любую страницу в чистый Markdown и убирает лишний шум. В Firefox и Chromium-браузерах оно работает локально, а для Safari сборку нужно делать вручную на macOS с Xcode.

https://github.com/Ademking/MD-This-Page

FrontEndDev

27 October 2026 15:30

Как передать sibling-count() родительскому элементу в CSS

CSS-трюк на Scroll-Driven Animations позволяет получить количество дочерних элементов и передать это значение родителю без JavaScript. Это полезно, когда нужно строить стили и поведение интерфейса от числа элементов, а native children-count() пока еще не готов.

https://blog.master.dev/transferring-sibling-count-to-a-parent-element/

FrontEndDev

26 October 2026 08:30

Markuplint: линтер для HTML и разметки в разных фреймворках

Линтер для разметки, который проверяет HTML по стандартам, правилам доступности и вашим проектным соглашениям, а также умеет работать не только с HTML, но и с JSX, Vue, Svelte, Astro и другими форматами.

https://markuplint.dev/

FrontEndDev

08 November 2026 15:30

Levelrail заменил Vercel и Heroku на своих серверах

Levelrail — open source PaaS для self-hosted деплоя, который разворачивает приложения на Linux-сервере без Kubernetes. Он даёт HTTPS, логи, метрики и откат в один клик, а установка идёт одним Go бинарником.
На сервере нужен root и systemd, а при отсутствии Docker установщик поставит его сам.

https://github.com/glincker/levelrail

FrontEndDev

07 November 2026 13:50

Chrome 157 добавил новые CSS-возможности

Chrome 157 в бете принес corner shorthand, значение <string> для text-overflow и поддержку anchor-valid. Chrome 156 уже вышел в стабильной версии с random(), а unload больше не срабатывает по умолчанию, поэтому используйте pagehide или visibilitychange.

https://chromestatus.com/release-notes/157

FrontEndDev

06 November 2026 13:50

Визуализатор design tokens показывает связи с компонентами

Интерактивный визуализатор design tokens помогает смотреть, как токены связаны с компонентами и друг с другом в дизайн системе. В нём уже загружены Carbon, SLDS и Stellar, а свои системы можно добавить отдельно.

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

https://design-tokens-visualizer.vercel.app/

FrontEndDev

05 November 2026 15:30

Tamagui 3 добавил Tailwind-подобные пропсы

Tamagui 3 — система стилей и набор компонентов для React и React Native. В ее новой версии появились Tailwind-подобные пропсы и поддержка React Strict DOM.
Поддержка React Strict DOM пока важна для тех, кто собирает общий интерфейс для веба и нативных приложений, потому что она помогает держать один код без лишних обходных решений.

https://tamagui.dev/blog/version-three

FrontEndDev

04 November 2026 15:30

CSS научил анимации стартовать по скроллу

В CSS Animation Triggers появился animation-trigger, который запускает обычную анимацию, когда элемент входит в нужный диапазон прокрутки. Chromium уже поддерживает это в версии 146 и новее, а для старых браузеров нужен запасной вариант с JavaScript или IntersectionObserver.

https://utilitybend.com/blog/scroll-triggered-animation-as-the-missing-piece-for-scrollytelling-on-the-web

FrontEndDev

03 November 2026 15:30

TanStack AI начал стримить структурированный JSON

TanStack AI теперь умеет ограничивать ответ модели Zod-схемой и отдавать структурированный JSON по мере генерации. Для стриминга на сервере нужно включить stream: true, а на клиенте читать данные через fetchServerSentEvents.

https://blog.master.dev/structured-output-with-tanstack-ai/

FrontEndDev

02 November 2026 15:30

TypeScript перегрузки стали понятнее

Перегрузки в TypeScript позволяют одной функции поддерживать несколько сценариев вызова и точнее выводить типы аргументов и результата. Для старого API можно добавить новую сигнатуру, не ломая существующие вызовы, если реализация принимает объединённые типы.

https://habr.com/ru/articles/1096858/

FrontEndDev

01 November 2026 15:30

Сниппет для иконок через CSS-переменные

Проблема в том, что иконки в HTML быстро превращаются в шум: svg в разметке, обёртки, отдельные компоненты, а менять их по состоянию или теме неудобно. Здесь предлагается держать иконку как токен и подставлять её через CSS, чтобы переопределение было таким же простым, как смена переменной.

button.delete {
  --icon: var(--icon-trash-outlined);

  @media (prefers-color-scheme: dark) {
    --icon: var(--icon-trash-filled);
  }

  &:hover {
    background: var(--color-danger);
    color: var(--color-danger-text);
  }
}

FrontEndDev

30 October 2026 15:30

Interop 2026 показал будущее CSS

Проект Interop, в котором браузерные вендоры согласуют новые HTML, CSS и JS-возможности, собрал список CSS-фич, которые скоро могут стать общими для браузеров. Среди них есть изменения, которые упростят верстку и снизят расхождения между движками.
Interop не гарантирует мгновенный выпуск, поэтому часть возможностей сначала появится в отдельных браузерах и только потом доедет до всех.

https://www.joshwcomeau.com/css/interop-2027/

FrontEndDev

30 October 2026 08:30

Rsbuild снизил память сборки Vue-приложения на 52%

На сервере с 4 ГБ памяти Vite-сборка Vue-приложения упиралась в OOM, а переход на Rsbuild снизил пик RSS с 1681 до 802 MiB и ускорил сборку с 41 до 11,7 секунды. Лимит --max-old-space-size=1280 помог, но при 1248 MiB сборка уже стала в три раза медленнее, а отключение gzip-отчёта и перестановка этапов проблему не сняли.

https://habr.com/ru/articles/1095642/

FrontEndDev

29 October 2026 14:40

Прогулка внутри «Золотой осени» Левитана на three.js

Возможность погрузиться в картину Левитана — кадр из исходной точки выверен по картине из Третьяковки, управление от первого лица (WASD + touch-джойстик на мобильных), автопилот («режим фильма»), звук шагов и окружения через Web Audio API. Работает быстро даже на средних смартфонах.

https://neurasystems.pro/zolotaya-osen/

FrontEndDev

29 October 2026 08:30

Вышел Bun 1.4.3 с встроенной проверкой TypeScript

Вышел Bun 1.4.3, и в нём появился bun check — встроенная проверка типов TypeScript, которая читает tsconfig.json и выдаёт ошибки как tsc. bun check подключается к bun run, bun test и bun build, а в простое серверные процессы теперь расходуют заметно меньше CPU.

https://bun.com/blog/bun-v1.4.3

FrontEndDev

28 October 2026 08:30

MSW 3.0: ESM-only, плагин для Vite и перехват навигаций и отправки форм

MSW 3.0 перевёл библиотеку на ESM-only, добавил плагин для Vite, поддержку GraphQL subscriptions и перехват переходов по страницам и отправки форм. Это делает мокинг API удобнее в современных фронтенд-проектах: проще встраивать в Vite, покрывать более сложные сценарии и тестировать не только запросы, но и пользовательские действия, которые приводят к навигации или сабмиту формы.

https://github.com/mswjs/msw/releases/tag/v3.0.0

FrontEndDev

26 October 2026 15:30

GitHub добавил API для истории звёзд без приватных данных

GitHub выпустил REST API endpoint для истории звёзд репозитория с временными метками, который показывает рост star count без раскрытия списка stargazer. Это даёт возможность снова строить графики и метрики популярности репозитория после того, как выдачу списка пользователей ограничили ради приватности. Endpoint подходит для обновления аналитики и интеграций, которые раньше отслеживали динамику звёзд.

https://github.blog/changelog/2026-09-04-new-api-endpoint-provides-privacy-safe-star-history-data/

FrontEndDev

25 October 2026 15:30

Как безопасно тестировать обработчик postMessage у iframe

iframe с postMessage удобно использовать для виджетов, но без проверок любой соседний или внешний window может подменить сообщение. Для resize это особенно заметно: один фальшивый payload может свернуть или раздувать встраиваемый блок, а при неосторожной обработке данных дойти и до XSS.

https://blog.master.dev/testing-an-iframes-postmessage-handler/