FrontEndDev

27 April 2026 09:30

Name-only контейнеры в CSS для безопасного scoped стиля

Name-only контейнеры позволяют ограничивать область действия стилей по имени без условий, решая конфликт классов в больших дизайн системах и многолетних проектах. Это ближе к тому, что дают CSS modules и scoped styles в компонентах, но с поддержкой на уровне веб платформы.

https://frontendmasters.com/blog/name-only-containers-the-scoping-we-needed/

FrontEndDev

25 April 2026 16:30

View Transitions toolkit для удобной работы с продвинутыми переходами

Набор утилит для View Transitions: детект поддержки, shim для activeViewTransition, оптимизация keyframes, управление воспроизведением и автоматическая подстановка transition типов при навигации. Устанавливайте npm пакет и используйте готовые хелперы, чтобы не изобретать велосипед каждый раз при сложных анимациях.

https://www.bram.us/2026/04/02/view-transitions-toolkit/

FrontEndDev

24 April 2026 16:30

Нормализация состояния в React через Entity Registry на Zustand

Разбор паттерна Entity Registry с рекурсивным парсингом и мягкими удалениями для аккуратного UI и точечных перерендеров.

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

FrontEndDev

24 April 2026 09:30

Как правильно организовать передачу файлов через WebRTC DataChannel

Передача файлов в WebRTC зависит от многих факторов: буфер SCTP, готовность получателя, переподключения, жизненный цикл файлов. Разбираем 6 реальных проблем и практические решения для P2P с TURN fallback, чтобы прогресс и статус отправки совпадали.

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

FrontEndDev

23 April 2026 14:50

Палитра команд для UI: как победить хаос в много модульных интерфейсах

Показываем, как единая строка поиска команд по примеру VSCode резко упрощает навигацию в интерфейсах с десятками модулей и скрытыми действиями. Идея помогает уйти от инструкций вида открой слева категорию и найти нужную кнопку в бесконечных меню.

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

FrontEndDev

22 April 2026 16:30

Обфускация email адресов в 2026 году

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

https://spencermortensen.com/articles/email-obfuscation/

FrontEndDev

21 April 2026 17:04

Как frontend-разработчику вырасти в ЗП?

День сурка frontend-разработчика выглядит так

Зарплата замерла, задачи — бесконечный повтор, растет только кол-во бессмысленных созвонов

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

И самое бесящее — пока буксуешь, кто-то вокруг спокойно забирает офферы в Яндекс и VK...

Ты тоже можешь получить оффер в компанию, в которой тебя будут ценить и хорошо платить.

FrontEndDev

21 April 2026 09:30

Выбор диапазона дат в CSS с :nth-child и минимальным JS

Делаем календарь на CSS grid используя селектор :nth-child, чтобы легко подсвечивать нужные элементы. JS нужен только для логики обновления диапазона при выборе третьей даты, а не для перебора DOM.

https://css-tricks.com/selecting-a-date-range-in-css/

FrontEndDev

20 April 2026 09:30

TypeScript врёт на границе с сервером: почему нужна рантайм валидация ответов

TypeScript проверяет типы только на этапе компиляции, а в рантайме он просто доверяет тому, что вернул API. Решение это runtime-валидация через Zod, Yup или Valibot: описываете схему и сразу ловите несоответствия структуры, типов и отсутствующие поля.

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

FrontEndDev

18 April 2026 16:30

Intl API для форматирования дат, чисел и валют без библиотек

Intl позволяет форматировать даты, время, числа, списки и текст с учетом локали пользователя прямо в браузере, без добавления килобайт в бандл и без парсинга JS. Разбираем ключевые API вроде Intl.DateTimeFormat, Intl.NumberFormat и Intl.RelativeTimeFormat и типичные ограничения, чтобы не пытаться использовать Intl для вычислений.

https://polypane.app/blog/the-intl-api-the-best-browser-api-youre-not-using/

FrontEndDev

17 April 2026 16:30

Паттерны Two Pointers и HashMap для задач на собеседовании

Разбираем два базовых паттерна для решения типовых задач: Two Pointers с двумя указателями и HashMap для подсчёта, группировки и быстрого поиска за один проход. На примерах вроде Valid Palindrome и First Unique Character видно, как паттерны помогают не тратить время на лишние подходы и сразу приходить к оптимальному решению.

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

FrontEndDev

17 April 2026 09:30

Предзагрузка картинок в браузере через JavaScript

Предзагрузка через new Image помогает заранее прогреть HTTP cache и быстро показать картинку без задержек, а также получить размеры до рендера. Разбираемся, когда этот подход ломается из-за Cache-Control и как подбирать стратегию под требования вашего приложения.

https://habr.com/ru/companies/timeweb/articles/1020138

FrontEndDev

16 April 2026 14:51

Wiretext - инструмент для юникодных wireframe диаграмм

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

https://wiretext.app/

FrontEndDev

15 April 2026 16:30

Моя коллекция полезных HTML-фич

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

https://habr.com/ru/companies/ruvds/articles/1021090

FrontEndDev

15 April 2026 10:03

Руководство по SVG фильтрам

Познакомимся с SVG фильтрами и посмотрим на их базовые возможности

https://frontendmasters.com/blog/svg-filters-guide-getting-started-with-the-basics/

FrontEndDev

26 April 2026 16:30

Pretext — библиотека, которая считает текстовую вёрстку в 500 раз быстрее браузера. Зачем это нужно и как работает

28 марта 2026 инженер Midjourney Cheng Lou выложил в открытый доступ движок текстовой верстки Pretext на чистом TypeScript, который обходит DOM и layout reflow. Это ускоряет сценарии с постоянными пересчётами высоты текста — от AI-стриминга до виртуализации списков.

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

FrontEndDev

25 April 2026 14:50

Как правильно реализовать кнопку Назад во Vue

Кнопка «Назад» должна возвращать по истории браузера, а не делать router.push, иначе получим дубли страниц и ловушку навигации. Разбераемся, когда использовать router.back или router.go(-1), и как добавить fallback и beforeNavigate для сложных сценариев.

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

FrontEndDev

24 April 2026 14:50

Модули JavaScript в веб платформе

Добавили недостающую семантику для <script type="module">, чтобы модули корректно резолвились и исполнялись в браузере, включая нюансы загрузки и атрибутов. Параллельно прорабатываются worker modules и готовится основа для будущих динамических API подгрузки.

https://blog.whatwg.org/js-modules

FrontEndDev

23 April 2026 16:30

Dither Image Online: генератор ретро пиксельного и точечного арта в реальном времени

Быстро превращаем фото в эффект stippling и pixel art прямо в браузере, настраивая алгоритмы Bayer, Crosshatch, Halftone и Contour, а также силу, цветовые уровни и bloom. Подходит для креаторов, веб дизайнеров и тех, кому нужны легкие текстуры и точечные ассеты без долгого пайплайна.

https://ditherimage.online/

FrontEndDev

23 April 2026 09:30

Windows 95 в виде Electron приложения

Полноценная Windows 95 в десктопном приложении на Electron поверх v86 JavaScript и WASM: монтирование папок как Z: диск, ISO как CD-ROM, общий буфер обмена и улучшенный интернет. Внутри есть готовые сценарии запуска игр и DOS приложений, а также инструкция по сборке из исходников и работе с образами диска.

https://github.com/felixrieseberg/windows95

FrontEndDev

22 April 2026 09:30

Как прервать async workflow в JavaScript без отмены промисов

В JavaScript нет универсального .cancel() для Promise, поэтому для контроля потока используют подвешивание промиса, который никогда не резолвится, и GC завершает подвешенную логику. Под капотом важно понимать, почему ошибки и try/catch могут случайно проглотить прерывание, а генераторы позволяют остановить выполнение без исключений и ловушек.

https://www.inngest.com/blog/hanging-promises-for-control-flow

FrontEndDev

21 April 2026 16:30

JS Paint, пиксельный MS Paint ремейк с темами и расширениями

Пиксель-редактор в браузере с точной копией инструментов MS Paint, поддержкой прозрачности, загрузкой из URL и экспортом истории в GIF. Есть темы, тач управление, dwell clicker и speech recognition, плюс удобные расширения вроде быстрого Undo и работы с палитрами.

https://github.com/1j01/jspaint

FrontEndDev

20 April 2026 14:55

Готовим сервис к продакшену

Open-source проект в котором собраны практики уровня production на примере Node.js/NestJS API: CI/CD, rollback, миграции, observability, metrics, terraform, AWS deployment и т.д.

https://github.com/prod-forge/backend

FrontEndDev

19 April 2026 16:30

Новые возможности CSS multi-column в Chrome 145

Chrome 145 добавил column-height и column-wrap, которые превращают много колонок из горизонтального скролла в вертикальный 2D поток с более естественным UX. Полезно для блоков фиксированной высоты, газетных макетов и даже вертикальной пагинации с scroll-snap, но поддержка пока только в Chrome 145+.

https://css-tricks.com/css-multi-column-layout-wrapping-features/

FrontEndDev

18 April 2026 14:50

Crashcat: физический движок на JavaScript для игр, симуляций и креативных веб проектов

Crashcat добавляет реалистичную физику в фронтенд. Пакет написан на чистом JavaScript и хорошо подходит для интеграции с Babylon.js, Three.js и собственными движками, поддерживая tree shaking.

https://github.com/isaac-mason/crashcat

FrontEndDev

17 April 2026 14:50

Как превращать дизайнерские требования в архитектуру UI-компонента

Разбираем, как переводить макеты и сценарии в технические требования: что отдавать UI-компоненту, что вынести в правила композиции, а что оставить бизнес-логике. На примере UIKIT показываем, где лучше держать поведение декларативным через типизацию, а где управлять состояниями в рантайме.

https://habr.com/ru/companies/moysklad/articles/1020848

FrontEndDev

16 April 2026 16:30

9 CSS лайфхаков для более дружелюбного пользовательского опыта

Собрали в одном месте практичные CSS приемы: адаптивные фоновые изображения через image-set, удобная валидация форм с :user-valid и :user-invalid, а также безопасные анимации на transform чтобы не ловить лишние перерисовки. Эти техники помогают сделать интерфейсы заметнее, быстрее и понятнее без привязки к конкретным фреймворкам.

https://habr.com/ru/companies/ruvds/articles/1018112/

FrontEndDev

16 April 2026 09:30

Радио стейт-машина в CSS

Если UI нужно переключать между несколькими визуальными режимами без JS, радио state machine на базе input type radio и селекторов позволяет держать логику прямо рядом с разметкой. Разбираем подход, который заменяет checkbox hack, когда состояний больше двух и важна чистая управляемость интерфейса.

https://css-tricks.com/the-radio-state-machine/

FrontEndDev

15 April 2026 11:03

Сидеть и работать в корпорации — страшно, жизнь-то мимо проходит. Уходить строить бизнес — страшно, а вдруг прогорит. Один из вариантов — разрабатывать свой пет-проект по вечерам. Многие успешные компании, например, Twitter, создавались именно так. Это не значит, что ваш проект обязательно заработает миллиарды, но заработать больше, чем в найме, и получить ценный опыт — вполне реально.

Перед началом разработки появляется множество вопросов, например:

– Как выбрать идею для пет-проекта?
– Что нужно знать про маркетинг?
– Как запуститься и довести до первых продаж не имея бюджета на рекламу?

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

Он рассказывает, где искать идею для нового проекта, что нужно знать о маркетинге, как запустить стартап и привлечь первых 10 клиентов, а также о многих других важных вещах.

Подписывайтесь на «Твой пет проект», получайте пользу от практиков рынка!

FrontEndDev

13 April 2026 09:30

GitHub - privatenumber/minification-benchmarks: 🏃‍♂️🏃‍♀️🏃 JS минфикация в цифрах

Сравнение популярных JS-minifier’ов (SWC, oxc-minify, esbuild, terser, uglify-js, SWC и др.) по размеру после minify и скорости работы: что реально даёт меньший bundle и быстрее ли именно на практике. Отличный ориентир перед выбором инструмента для production-сборок.

https://frontendfoc.us/link/181948/web