FrontEndDev

15 October 2026 09:30

Как ускорить страницу с демо-видео: сжатие, главы и отложенный автоплей

Демо-видео на первом экране можно сделать заметно легче, если отдельно оптимизировать сам ролик, постер и момент запуска. Такой подход позволяет показать несколько сценариев продукта сразу, не заставляя пользователя смотреть длинное видео целиком и не раздувая стартовую загрузку страницы.

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

FrontEndDev

14 October 2026 16:30

Как GitHub ускорил сайт, переведя стили с CSS-in-JS на CSS Modules

GitHub перевёл Primer и затем большую часть интерфейса с CSS-in-JS на CSS Modules, чтобы убрать клиентские и серверные накладные расходы на стили и ускорить рендеринг страниц.

https://github.blog/engineering/architecture-optimization/improving-site-performance-by-shipping-more-css/

FrontEndDev

13 October 2026 09:30

Как называть UI-компоненты, токены и фичи без путаницы

Подборка практических подходов и инструментов для нейминга в интерфейсах: от HTML-классов и функций до design tokens, компонентов, цветов и новых фич. Это помогает сократить путаницу в команде, сделать систему именования более устойчивой и быстрее находить нужные сущности в коде и дизайн-системе.

https://smashingmagazine.com/2026/10/how-name-things/

FrontEndDev

12 October 2026 16:30

Как определить пересечение элементов только на CSS

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

https://ishadeed.com/article/css-detect-overlap/

FrontEndDev

11 October 2026 16:30

CSS в почте как канал атак

Разбор показывает, как CSS и HTML в webmail могут использоваться для обхода sanitization, подмены интерфейса, утечки токенов и даже захвата аккаунтов. Для фронтенда это важно как напоминание, что безопасный рендеринг untrusted content ломается на расхождениях между тем, что считает безопасным sanitizer, и тем, как браузер реально интерпретирует разметку.

Нельзя полагаться только на allowlist CSS и HTML, если в интерфейсе есть кликабельные элементы, псевдоэлементы и прокси для изображений.

https://portswigger.net/research/css-the-bomb-inside-your-inbox

FrontEndDev

10 October 2026 14:50

vgpu для WebGPU в браузере и Node.js

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

https://vgpu.sh/

FrontEndDev

09 October 2026 09:30

Chrome снова сохраняет данные Google-сайтов

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

https://lapcatsoftware.com/articles/2026/9/1.html

FrontEndDev

08 October 2026 14:50

Почему агентный кодинг возвращает нас к примитивам

Агентный кодинг делает дешевле собственную реализацию, поэтому для многих UI-задач выгоднее брать примитивы вроде D3, SVG и design tokens, чем тащить тяжёлый charting framework с его ограничениями и обходными путями.

https://www.robinwieruch.de/agentic-coding-bet-on-primitives/

FrontEndDev

07 October 2026 16:30

Drawably: рукописные контролы для интерфейсов

Набор UI-контролов в стиле ручного скетча, который можно подключить в React или через обычный JS. Он даёт кнопки, checkbox, input, card, radio, toggle, divider и arrow с нарочито неровной отрисовкой, чтобы интерфейс выглядел как набросок, а не как стандартная библиотека компонентов.

https://www.drawably.dev/

FrontEndDev

07 October 2026 11:25

⚡️ JavaScript, архитектура и ИИ: о чем будут говорить на юбилейной HolyJS 2026 Autumn

📆 23-24 октября в Санкт-Петербурге и онлайн пройдет юбилейная HolyJS 2026 Autumn — IT-конференция для всех, кто использует JavaScript-технологии для фронтенда и бэкенда. 

В этом году в программе остается все, за что любят HolyJS: JavaScript, браузер, React, архитектура, производительность и инструменты. Но все это теперь существует в мире, где ИИ становится частью разработки — от написания кода до проектирования и работы с production.

Поэтому в программе есть и фундаментальный JS-инжиниринг, и практические кейсы с ИИ, и доклады, после которых можно сразу что-то попробовать в работе. А еще — воркшопы, где про новые подходы можно не только послушать, но и «потрогать» их руками.

Полное расписание и подробности смотрите в карточках и на сайте.

🌟По промокоду frontenddev персональные билеты дешевле

Реклама. ООО «Джуг Ру Груп». ИНН 7801341446

FrontEndDev

06 October 2026 17:03

Почему переключатель dark mode не нужен

Для большинства сайтов постоянный переключатель light/dark не нужен: он добавляет лишнее решение в интерфейс и хуже работает, чем автоматическое следование системной теме. Если переключатель всё же нужен, вариант с двумя вариантами лучше вариант с тремя, потому что он покрывает все сценарии без отдельного пункта System в UI.

https://lea.verou.me/blog/2026/dark-mode-toggles-2/

FrontEndDev

05 October 2026 16:30

Rslib 1.0 для сборки JS-библиотек

Rslib 1.0 даёт единый пайплайн для сборки JavaScript-библиотек: ESM, CJS, UMD, IIFE и Module Federation, генерацию declaration files, поддержку React, Vue, Svelte и Solid, а также bundle и bundleless режимы под разные сценарии публикации и интеграции.

https://rslib.rs/blog/v1-0

FrontEndDev

04 October 2026 16:46

Привет!

Чуть не забыл про итоги)

Поздравляем @m_hodeneva с победой! 🎉

Для тех, кому не так повезло, все еще действует промик на скидку - FrontEndDev

Всем добра! ✌️

FrontEndDev

02 October 2026 17:26

Сайт: появляется в интернете.
Веб-краулер: ну здравствуй.

FrontEndDev

01 October 2026 16:30

Что нового в HTML к середине 2026

В HTML появляются новые элементы для permissions, установки приложений и Web Components, а ещё расширяется стилизация select и поддержка Declarative Shadow DOM. Это важно, потому что часть сценариев вроде геолокации, камеры, микрофона и установки PWA можно делать через более семантичные и доступные интерфейсы, а не только через разрозненные JS-API и браузерные меню.

https://blog.master.dev/new-things-you-should-know-about-html-here-in-mid-2026/

FrontEndDev

14 October 2026 18:02

5 офферов получили наши ребята на прошлой неделе

Оффер на 4,2k долларов
Оффер на 5k евро
Оффер 260k рублей
Оффер на 210k рублей
Оффер на 220k рублей

И еще 19 за сентябрь... а за лето более 50... и у тебя получится!

👋 Меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и не бросаю на испытательном сроке. Вокруг меня собралось целое комьюнити из почти 300 фронтендеров.

FrontEndDev

14 October 2026 09:30

Mermaid 12.0: новый движок раскладки и UML use case диаграммы

Mermaid 12.0 по умолчанию перешёл на движок ELK для flowchart, class, state и похожих диаграмм, поэтому уже существующие схемы могут выглядеть иначе, если не указать layout: dagre. Ещё в версии появились UML use case диаграммы, что расширяет набор схем для документации и проектирования интерфейсов и систем.

https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0

FrontEndDev

12 October 2026 18:58

🏁Тестовый собес на Frontend с разработчиком из R-Vision, ex-Сбер

15 октября в 19:00 (мск) приходи посмотреть открытое онлайн-собеседование на Frontend-разработчика

Интервьюер: Даниил Дмитриев – Frontend-разработчик в R-Vision, ex-Сбер. Пишет на React и TypeScript, совмещает роль тимлида, менторит разработчиков и проводит код-ревью

На эфире нет сценария ↓
Кандидат – случайный разработчик, который не знает вопросов заранее

На обычном собесе ты не знаешь, что думает интервьюер, пока не придёт фидбек. На этом эфире Даниил проговорит всё вслух:

— какие вопросы и задачи даёт кандидатам на Frontend-собесах
— что в каждом ответе засчитал бы, а что нет — и почему

FrontEndDev

12 October 2026 09:30

12 встроенных возможностей Node.js, которые уже заменяют популярные пакеты

Node.js уже умеет заменять axios, nodemon, dotenv, jest и другие привычные зависимости встроенными API. Это сокращает число пакетов в проекте, убирает лишние установки и делает стек проще, но перед переходом стоит проверить стабильность и то, чего встроенные возможности пока не умеют.

https://flaviocopes.com/node-builtins/

FrontEndDev

10 October 2026 16:30

Виртуальный джойстик для 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/

FrontEndDev

09 October 2026 14:50

HTML-артефакты из эпохи браузерных войн

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

https://vale.rocks/posts/html-relics

FrontEndDev

08 October 2026 16:30

Как собрать бесконечную стеклянную сетку в браузере

Показываем, как на WebGPU и Three.js собрать бесконечную сетку стеклянных видеокарточек без постобработки и render targets: стекло фейкуется шейдером на плоскости, видео преломляется прямо в материале, а сама сетка визуально уходит в сферу.

Демо


https://tympanus.net/codrops/2026/09/08/building-an-infinite-liquid-glass-grid-with-three-js-webgpu-and-tsl/

FrontEndDev

08 October 2026 09:30

Roux: стартовый набор для нативной CSS-архитектуры

Roux даёт готовую основу для HTML и CSS: набор файлов, переменные, базовые стили и компоненты. Такой стартовый шаблон экономит время на настройке проекта и помогает сразу работать в предсказуемой структуре без лишней ручной сборки.

https://github.com/thoughtbot/roux

FrontEndDev

07 October 2026 15:42

971 логотип брендов для React и shadcn без ручного поиска

Logoforge — это набор из 971 логотипа для тех, кто собирает продукт с AI и не хочет вручную искать SVG по всему интернету. Логотип можно поставить одной командой через shadcn, получить typed React component, скачать SVG или собрать блок Trusted by за пару минут.

Есть поддержка dark mode, mono-версий и MCP server для Claude, Cursor, Windsurf и VS Code, чтобы ассистент сам искал и добавлял логотипы.

https://github.com/terravidhal/logoforge

FrontEndDev

07 October 2026 09:30

Как автоматизировать проверку cookie-banner на сотнях страниц

Внутренний cookie auditor проверяет, что на веб-страницах загружаются только те cookies, которые соответствуют выбранным privacy preferences пользователя. Такой подход превращает compliance с cookie banner в автоматизированный тест, который ловит регрессии после релизов, экспериментов и изменений на страницах.

https://dropbox.tech/security/how-our-inhouse-auditor-tests-cookie-behavior-across-hundreds-of-web-surfaces

FrontEndDev

06 October 2026 11:19

ESLint Config Inspector показывает медленные правила

ESLint Config Inspector 3.4 добавил анализ времени выполнения правил, который помогает быстро найти, какие именно правила тормозят linting. Это полезно для больших конфигов ESLint, где проверка начинает заметно замедлять сборку и локальную разработку. Теперь можно точечно отключать или упрощать самые дорогие правила и ускорять прогон линтера без гадания

https://github.com/eslint/config-inspector

FrontEndDev

05 October 2026 09:30

Fetch возвращает ответ раньше тела

Fetch promise завершается после заголовков, а тело продолжает приходить по открытому соединению. Это влияет на чтение ответа, clone, abort и таймауты: если тело не дочитать, можно потерять reuse соединения и получить лишнюю нагрузку в Node и браузере.

https://blog.gaborkoos.com/posts/2026-09-08-Half-Past-Fetch/

FrontEndDev

04 October 2026 16:30

Набор мини-библиотек для HTML, событий и fetch

Набор маленьких standalone-библиотек для веба: для усиленного HTML, inline-скриптинга и реактивности, streaming HTML и events, DOM patching и удобных fetch() wrapper'ов. Полезно, если нужен точечный инструмент вместо тяжёлого фреймворка: каждая часть подключается отдельным скриптом, а весь набор можно взять одним файлом или через npm.

https://fixiproject.org/

FrontEndDev

02 October 2026 09:30

Анимированная сетка без JavaScript и View Transitions

CSS Anchor Positioning позволяет анимировать перестройку grid при изменении размера контейнера без JavaScript и без View Transitions: элементы плавно переезжают в новые позиции и при этом анимация остаётся прерываемой во время ресайза.

https://www.bram.us/2026/09/07/animating-css-grid-layouts-with-css-anchor-positioning/

FrontEndDev

01 October 2026 14:50

CSS progress() для адаптивной логики и масштабирования

Новая фича CSS progress() переводит значение в диапазон от 0 до 1 и помогает строить адаптивные размеры, типографику и условные стили без ручных вычислений в JS. Она полезна там, где нужно сравнивать значение с порогом, а не только плавно интерполировать его.

https://blog.master.dev/comparing-values-with-css-progress/