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

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

https://www.drawably.dev/

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

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

https://github.com/thoughtbot/roux

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

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

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

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

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

Демо

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

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

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

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

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

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

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

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

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

На практике это упрощает сборку графики, генерацию PNG или MP4 без браузера и перенос шейдерной логики между клиентом и сервером.

https://vgpu.sh/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

А в конце ответит на твои вопросы

Эфир проходит в рамках менторской программы от ШОРТКАТ для разработчиков, которые хотят повысить грейд, ЗП и прокачать скиллы

Участие бесплатное 🔥

Зарегаться на эфир можно в боте → @shortcut_front_bot

Реклама.
О рекламодателе.

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

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

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

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

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

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

Как 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/

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

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

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

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

Я веду канал, в котором уже 15 тыс разработчиков. Регулярно публикую полезные материалы по подготовке к собесам. А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме)

Забирайте в закрепленном сообщении

Полные разборы реальных собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ

Сборники вопросов по темам:
Кибербезопасность на собеседовании
Все вопросы по React на собеседовании
Все вопросы по TypeScript на собеседовании
Как решать задачи двумя указателями
Вопросы с Vue собеседований
Вопросы по сетям и методологиям с 200 собесов
Вопросы по JS с 200 собесов
Какие задачи спрашивают на livecoding чаще

Полезные посты:
Job-борды для поиска работы
Запись нашего самого кринжового собеса
Новый HTTP метод QUERY

🏆Статистика по рынку:
Июль, Июнь, Май, Апрель, Март

Подписывайся 👇
frontend_punks

Реклама, erid: 2W5zFHUNGNm ИП Галактионов Тихон Витальевич, ИНН 771618975809

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

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

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

Size Limit: инструмент для контроля бюджета производительности JavaScript

Size Limit позволяет задать лимит на размер бандла или время загрузки кода и автоматически завалить CI или пометить PR, если изменения выходят за бюджет. Подходит для разовых проверок, показывает, куда уходят байты, и не привязан ни к фреймворку, ни к конкретному сборщику или CI.

https://github.com/ai/size-limit

Next.js 16.4: lazy compilation, меньше Turbopack и новые возможности React 19.3

В Next.js 16.4 добавили lazy compilation, уменьшили размер сборки Turbopack, подтянули возможности React 19.3 и доработали Cache Components и инструменты для разработки. Это ускоряет старт и сборку проекта, а также делает работу с кэшем и отладкой удобнее в повседневной разработке.

https://nextjs.org/blog/next-16-4

Vite+ 1.0: единая CLI для runtime, package manager и frontend toolchain

Vite+ 1.0 объединяет Node.js runtime, package manager и frontend toolchain в одной CLI. Это сокращает количество разрозненных конфигов, команд и обновлений, а в проектах с несколькими репозиториями и монорепами упрощает поддержку, миграции и CI.

https://voidzero.dev/posts/announcing-vite-plus-1-0