Как автоматизировать проверку 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
Внутренний 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-инжиниринг, и практические кейсы с ИИ, и доклады, после которых можно сразу что-то попробовать в работе. А еще — воркшопы, где про новые подходы можно не только послушать, но и «потрогать» их руками.
Полное расписание и подробности смотрите в карточках и на сайте.
🌟По промокоду
Реклама. ООО «Джуг Ру Груп». ИНН 7801341446
📆 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
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/
Набор 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
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/
Агентный кодинг делает дешевле собственную реализацию, поэтому для многих 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/
Показываем, как на 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
В 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
Подборка старых 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/
Либ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/
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
Разбор показывает, как CSS и HTML в webmail могут использоваться для обхода sanitization, подмены интерфейса, утечки токенов и даже захвата аккаунтов. Для фронтенда это важно как напоминание, что безопасный рендеринг untrusted content ломается на расхождениях между тем, что считает безопасным sanitizer, и тем, как браузер реально интерпретирует разметку.
Нельзя полагаться только на allowlist CSS и HTML, если в интерфейсе есть кликабельные элементы, псевдоэлементы и прокси для изображений.
https://portswigger.net/research/css-the-bomb-inside-your-inbox
❤8🤔3🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
12 встроенных возможностей Node.js, которые уже заменяют популярные пакеты
Node.js уже умеет заменять axios, nodemon, dotenv, jest и другие привычные зависимости встроенными API. Это сокращает число пакетов в проекте, убирает лишние установки и делает стек проще, но перед переходом стоит проверить стабильность и то, чего встроенные возможности пока не умеют.
https://flaviocopes.com/node-builtins/
Node.js уже умеет заменять axios, nodemon, dotenv, jest и другие привычные зависимости встроенными API. Это сокращает число пакетов в проекте, убирает лишние установки и делает стек проще, но перед переходом стоит проверить стабильность и то, чего встроенные возможности пока не умеют.
https://flaviocopes.com/node-builtins/
❤16👍2
Как определить пересечение элементов только на CSS
CSS теперь позволяет отследить момент, когда декоративный элемент начинает пересекаться с контентом, и скрыть его без JavaScript. Для этого используются anchor positioning, scroll-driven animations и style container queries, а срабатывание завязано не на скролл, а на появление overflow в измеряющем элементе.
https://ishadeed.com/article/css-detect-overlap/
CSS теперь позволяет отследить момент, когда декоративный элемент начинает пересекаться с контентом, и скрыть его без JavaScript. Для этого используются anchor positioning, scroll-driven animations и style container queries, а срабатывание завязано не на скролл, а на появление overflow в измеряющем элементе.
https://ishadeed.com/article/css-detect-overlap/
❤🔥7
🏁Тестовый собес на Frontend с разработчиком из R-Vision, ex-Сбер
15 октября в 19:00 (мск) приходи посмотреть открытое онлайн-собеседование на Frontend-разработчика
Интервьюер: Даниил Дмитриев – Frontend-разработчик в R-Vision, ex-Сбер. Пишет на React и TypeScript, совмещает роль тимлида, менторит разработчиков и проводит код-ревью
На эфире нет сценария ↓
Кандидат – случайный разработчик, который не знает вопросов заранее
На обычном собесе ты не знаешь, что думает интервьюер, пока не придёт фидбек. На этом эфире Даниил проговорит всё вслух:
А в конце ответит на твои вопросы
Эфир проходит в рамках менторской программы от ШОРТКАТ для разработчиков, которые хотят повысить грейд, ЗП и прокачать скиллы
Участие бесплатное 🔥
Зарегаться на эфир можно в боте → @shortcut_front_bot
Реклама.
О рекламодателе.
15 октября в 19:00 (мск) приходи посмотреть открытое онлайн-собеседование на Frontend-разработчика
Интервьюер: Даниил Дмитриев – Frontend-разработчик в R-Vision, ex-Сбер. Пишет на React и TypeScript, совмещает роль тимлида, менторит разработчиков и проводит код-ревью
На эфире нет сценария ↓
Кандидат – случайный разработчик, который не знает вопросов заранее
На обычном собесе ты не знаешь, что думает интервьюер, пока не придёт фидбек. На этом эфире Даниил проговорит всё вслух:
— какие вопросы и задачи даёт кандидатам на Frontend-собесах
— что в каждом ответе засчитал бы, а что нет — и почему
А в конце ответит на твои вопросы
Эфир проходит в рамках менторской программы от ШОРТКАТ для разработчиков, которые хотят повысить грейд, ЗП и прокачать скиллы
Участие бесплатное 🔥
Зарегаться на эфир можно в боте → @shortcut_front_bot
Реклама.
О рекламодателе.
👍3👎3🔥2🤣1
Как называть UI-компоненты, токены и фичи без путаницы
Подборка практических подходов и инструментов для нейминга в интерфейсах: от HTML-классов и функций до design tokens, компонентов, цветов и новых фич. Это помогает сократить путаницу в команде, сделать систему именования более устойчивой и быстрее находить нужные сущности в коде и дизайн-системе.
https://smashingmagazine.com/2026/10/how-name-things/
Подборка практических подходов и инструментов для нейминга в интерфейсах: от HTML-классов и функций до design tokens, компонентов, цветов и новых фич. Это помогает сократить путаницу в команде, сделать систему именования более устойчивой и быстрее находить нужные сущности в коде и дизайн-системе.
https://smashingmagazine.com/2026/10/how-name-things/
🔥12❤2❤🔥1