FrontEndDev
25.6K subscribers
2.72K photos
30 videos
7.95K links
🚀 Статьи, новости, туториалы по frontend разработке.

http://jem-space.ru

Admin: @jem_jem
Пишу в @five_a_m
AI и вайбкод @vibe_and_ai

Читать на парковке: https://max.ru/front_end_dev

Реклама: http://bit.ly/2NxmVDu
РКН: https://clck.ru/3GLw7G
Download Telegram
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
👍11❤2🤣1
ESLint Config Inspector показывает медленные правила

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

https://github.com/eslint/config-inspector
⚡10❤‍🔥4❤3🤣1
Почему переключатель dark mode не нужен

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

https://lea.verou.me/blog/2026/dark-mode-toggles-2/
👎22🤔10👍8🤡6🤣3
Как автоматизировать проверку 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
👍6❤1👻1
⚡️ JavaScript, архитектура и ИИ: о чем будут говорить на юбилейной HolyJS 2026 Autumn

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

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

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

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

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

Реклама. ООО «Джуг Ру Груп». ИНН 7801341446
🔥7🌭2🎃2
Forwarded from Vibe and AI
This media is not supported in your browser
VIEW IN TELEGRAM
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
❤‍🔥5👍5❤2🔥2🎃1
Drawably: рукописные контролы для интерфейсов

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

https://www.drawably.dev/
🔥9❤2👎2😁1🤯1🎃1
Roux: стартовый набор для нативной CSS-архитектуры

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

https://github.com/thoughtbot/roux
👍7🔥3🎃2❤1
Почему агентный кодинг возвращает нас к примитивам

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

https://www.robinwieruch.de/agentic-coding-bet-on-primitives/
👍8❤2
Как собрать бесконечную стеклянную сетку в браузере

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

Демо

https://tympanus.net/codrops/2026/09/08/building-an-infinite-liquid-glass-grid-with-three-js-webgpu-and-tsl/
👍7🐳5❤2💩1
Chrome снова сохраняет данные Google-сайтов

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

https://lapcatsoftware.com/articles/2026/9/1.html
😱8💩4😁1
HTML-артефакты из эпохи браузерных войн

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

https://vale.rocks/posts/html-relics
⚡9🥰2
vgpu для WebGPU в браузере и Node.js

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

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

https://vgpu.sh/
👍5🤯5
Виртуальный джойстик для 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/
🔥5❤3
CSS в почте как канал атак

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

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

https://portswigger.net/research/css-the-bomb-inside-your-inbox
❤8🤔3🔥2