FrontEndDev

Как называть UI-компоненты, токены и фичи без путаницы Подборка практических подходов и инструментов для нейминга в интерфейсах: от HTML-классов и функций до design tokens, компонентов, цветов и новых фич. Это помогает сократить путаницу в команде, сделать систему именования более устойчивой и быстрее находить нужные сущности в коде и дизайн-системе. https://smashingmagazine.com/2026/10/how-name-things/

🏁Тестовый собес на Frontend с разработчиком из R-Vision, ex-Сбер 15 октября в 19:00 (мск) приходи посмотреть открытое онлайн-собеседование на Frontend-разработчика Интервьюер: Даниил Дмитриев – Frontend-разработчик в R-Vision, ex-Сбер. Пишет на React и TypeScript, совмещает роль тимлида, менторит разработчиков и проводит код-ревью На эфире нет сценария ↓ Кандидат – случайный разработчик, который не знает вопросов заранее На обычном собесе ты не знаешь, что думает интервьюер, пока не придёт фидбек. На этом эфире Даниил проговорит всё вслух: — какие вопросы и задачи даёт кандидатам на Frontend-собесах — что в каждом ответе засчитал бы, а что нет — и почему А в конце ответит на твои вопросы Эфир проходит в рамках менторской программы от ШОРТКАТ для разработчиков, которые хотят повысить грейд, ЗП и прокачать скиллы Участие бесплатное 🔥 Зарегаться на эфир можно в боте → @shortcut_front_bot Реклама. О рекламодателе.

Как определить пересечение элементов только на CSS CSS теперь позволяет отследить момент, когда декоративный элемент начинает пересекаться с контентом, и скрыть его без JavaScript. Для этого используются anchor positioning, scroll-driven animations и style container queries, а срабатывание завязано не на скролл, а на появление overflow в измеряющем элементе. https://ishadeed.com/article/css-detect-overlap/

12 встроенных возможностей Node.js, которые уже заменяют популярные пакеты Node.js уже умеет заменять axios, nodemon, dotenv, jest и другие привычные зависимости встроенными API. Это сокращает число пакетов в проекте, убирает лишние установки и делает стек проще, но перед переходом стоит проверить стабильность и то, чего встроенные возможности пока не умеют. https://flaviocopes.com/node-builtins/

CSS в почте как канал атак Разбор показывает, как CSS и HTML в webmail могут использоваться для обхода sanitization, подмены интерфейса, утечки токенов и даже захвата аккаунтов. Для фронтенда это важно как напоминание, что безопасный рендеринг untrusted content ломается на расхождениях между тем, что считает безопасным sanitizer, и тем, как браузер реально интерпретирует разметку. Нельзя полагаться только на allowlist CSS и HTML, если в интерфейсе есть кликабельные элементы, псевдоэлементы и прокси для изображений. https://portswigger.net/research/css-the-bomb-inside-your-inbox

Виртуальный джойстик для HTML5-игр за пару минут nippleJS позволяет быстро добавить виртуальный джойстик в HTML5-игру без зависимостей и использовать его как внутри canvas, так и вне его. Для Phaser это даёт готовый touch-контроллер: игрок двигается по силе и углу жеста, а при отпускании джойстика останавливается. https://emanueleferonato.com/2023/07/24/add-a-virtual-joystick-to-your-html5-games-in-a-matter-of-minutes-with-nipplejs-example-powered-by-phaser-and-arcade-physics/

vgpu для WebGPU в браузере и Node.js Либa vgpu даёт один API для рендера WebGPU-шейдеров в браузере, в headless Node.js и в serverless-окружениях. Она позволяет переиспользовать один и тот же WGSL-код, а модули WGSL импортируются и экспортируются по схеме, похожей на TypeScript. На практике это упрощает сборку графики, генерацию PNG или MP4 без браузера и перенос шейдерной логики между клиентом и сервером. https://vgpu.sh/

HTML-артефакты из эпохи браузерных войн Подборка старых HTML хаков, которые когда-то решали реальные проблемы с Internet Explorer, Netscape, Baidu, Skype и ранним Google crawler. Они показывают, как разработчики подстраивали разметку под конкретные браузеры, плагины, режимы рендера, фреймы, транскодинг и слабую поддержку JavaScript. https://vale.rocks/posts/html-relics

Chrome снова сохраняет данные Google-сайтов В Chrome снова обнаружился баг, из-за которого google.com сохраняет site data даже при включённой очистке данных при закрытии всех окон. Настройки приватности в браузере не всегда работают так, как ожидается, поэтому поведение кэша, cookies и storage стоит проверять отдельно. https://lapcatsoftware.com/articles/2026/9/1.html

Как собрать бесконечную стеклянную сетку в браузере Показываем, как на WebGPU и Three.js собрать бесконечную сетку стеклянных видеокарточек без постобработки и render targets: стекло имитируется шейдером на плоскости, видео преломляется прямо в материале, а сама сетка визуально уходит в сферу. Демо https://tympanus.net/codrops/2026/09/08/building-an-infinite-liquid-glass-grid-with-three-js-webgpu-and-tsl/