🖌️ LUME — создание 2D/3D-интерфейсов на HTML. Этот набор веб-компонентов превращает обычные HTML-элементы в полноценные носители графики — от CSS3D-преобразований до WebGL-рендеринга.

Под капотом используется AssemblyScript для компиляции в WebAssembly, что обещает стабильную производительность. А в примерах есть даже заготовка для FPS-игры на движке.

🤖 GitHub

@javascriptv

🌍 FBT — фреймворк для интернационализации от Facebook без лишней сложности. Инструмент, интегрируется прямо в JSX через специальные теги <fbt> и функции fbt(), автоматически извлекая строки для перевода на этапе сборки.

Проект делает акцент на грамматическую корректность: система учитывает роды, числа и другие языковые особенности без необходимости ручного описания всех вариантов. Под капотом работает трансформация кода через Babel-плагины, а готовые переводы подгружаются во время выполнения.

🤖 GitHub

@javascriptv

Создаём 3D-модели прямо в браузере за считанные секунды — появилась мощная тулза для дизайнеров, художников и геймдев-разработчиков.

Работает по текстовому описанию: вводишь идею — на выходе готовая модель, которую можно сразу редактировать. Поддерживает все популярные форматы, плюс огромная библиотека шаблонов для вдохновения.

Доступно бесплатно — пользуйтесь.

🔌 Node-OPCUA — промышленный стандарт OPC UA для Node.js. Этот стек реализует протокол OPC UA прямо в Node.js и браузере, предлагая TypeScript-интерфейсы для работы с реальным оборудованием.

Инструмент особенно востребован в SCADA-системах и промышленной автоматизации. Поддерживает создание как OPC-серверов, так и клиентов, включая сложные сценарии подписки на данные и безопасное соединение.

🤖 GitHub

@javascriptv

Pokemon Slide Gallery

Анимация реализованп без использования JS.

Только HTML и CSS. Переключение реализовано с помощью радио-кнопок

https://codepen.io/cbolson/pen/raBJWOJ

@javascriptv

Встречайте Vue DnD Kit — новую мощную библиотеку для Vue 3, созданную для реализации функционала drag-and-drop! Она предлагает высокую производительность, гибкость и полную поддержку клавиатурного управления, мобильных устройств и кастомизации под любые задачи.

Инструмент построен на композабельных функциях Vue, что делает его идеальным выбором для разработки сложных и интерактивных интерфейсов.

Документация уже доступна, а в ближайшем будущем ожидаются новые пакеты и интеграция с DevTools. #Vue3 #DragAndDrop #Frontend #WebDev

https://habr.com/ru/news/902384/

Плавная подсветка карточек при нажатии на них, а также при переключении клавишей Tab

#формы #переключатели #чекбоксы #карточки

https://codepen.io/havardob/pen/BapJYMg

@javascriptv

🚀 Nova — новый движок JavaScript/Wasбm на Rust. Этот экспериментальный проект пытается переосмыслить архитектуру JS-движков через призму data-oriented design. Вместо классических указателей Nova использует индексы и векторы, чтобы минимизировать накладные расходы и улучшить кэширование.

Пока движок далёк от готовности, но подход к разработке вызывает интерес, например safepoint garbage collector, построенный на особенностях системы заимствований Rust — это попытка максимально приблизить структуру кода к ECMAScript-спецификации.

🤖 GitHub

@javascriptv

🎭 Maska — легковесная библиотека для масок ввода. Инструмент весит всего 3КБ кода, но с поддержкой кастомных токенов, динамических масок и даже специального режима для денежных значений.

Библиотека работает как с нативными input, так и с кастомными компонентами, а ещё поддерживает Vue, Alpine.js и Svelte из коробки.

🤖 GitHub

@javascriptv

Frontend + Летний митап + Суббота = Я.Субботник по разработке интерфейсов 💛

7 июня в Москве Яндекс Go проводит Я.Субботник по разработке интерфейсов. В программе 4 доклада и воркшоп: 

👉 Артемий Карпов расскажет,  как команда выстраивает взаимодействие между разработкой и тестированием при написании автотестов и улучшении семантики приложения
👉 Миша Колосовский покажет, как сделать статические схемы интерактивными и причем тут SVG
👉 Давид Давыдов объяснит, что мы сделали с серверным API и как пришли к одной строчке кода вместо сотни
👉 Серёжа Алейников поделится опытом портирования нативного BDUI в вебе

На воркшопе участники в командах будут исправлять некорректные интерфейсы, стараясь учесть требования дизайнеров, бэкенд-разработчиков и тестировщиков. Вместе обсудим варианты решений, а коллеги из Яндекса помогут найти самое оптимальное. 

Регистрируйтесь и зовите друзей!

Мероприятие бесплатное. Количество мест в офлайне ограничено — пожалуйста, дождитесь нашего подтверждения.

Минималистичная и красивая анимация для ненайденной страницы

#страница404

https://codepen.io/digilou/pen/vzWjJo

Минималистичный hover-эффект для ссылок навигации

#hover #меню #ссылки

https://codepen.io/jstn/pen/mdoOZJ

@javascriptv

🕵️‍♂️ Pinkerton — инструмент для поиска секретов в JavaScript

Это мощный open-source сканер, созданный для автоматического поиска чувствительных данных (API-ключей, токенов, паролей) в JavaScript-файлах на веб-сайтах.

🔍 Что делает Pinkerton:
• Краулит сайт, собирая все JS-файлы
• Ищет утечки с помощью регулярных выражений
• Находит API-ключи, JWT, access tokens, пароли и многое другое

⚙️ Как использовать:

git clone https://github.com/000pp/Pinkerton.git
pip3 install -r requirements.txt
python3 main.py -u https://example.com

🧠 Кому подойдёт:
• Пентестерам и багхантером
• DevSecOps специалистам
• Любому, кто хочет проверить, не утекли ли ключи в фронт-коде

📦 Поддерживается в BlackArch Linux
🔓 Лицензия: MIT
🌟 300+ звёзд на GitHub

💬 Pinkerton — отличный инструмент для тех, кто хочет автоматизировать безопасность своего фронта и не допустить утечек ключей.

#pentest #security #bugbounty #opensource #js #infosec #Pinkerton

https://github.com/000pp/Pinkerton

@javascriptv

🔥 Учим HTML и CSS легко и с удовольствием — вот отличный учебник для начинающих веб-разработчиков!

📘 Материал объяснён максимально доступно, с наглядными схемами, примерами и понятным языком.

Хочешь уверенно стартовать в вебе? Начни отсюда — путь к созданию крутых сайтов начинается здесь.
здесь.

@javascriptv

Формошлёп — сотни хаков для фронтендеров в одном месте

Никакой скучной теории, воды и прочей шляпы, только практические примеры, которые работают.

👉 Подписывайся на @frontbox — стань тем, кто знает, как решить проблему, пока остальные ищут ответ на Stack Overflow.

🚀 awesome-saas — подборка AI-SaaS шаблонов от Alchemyst

Проект — это коллекция готовых шаблонов для создания SaaS-приложений на базе платформы Alchemyst AI.

📦 Что внутри:
• Готовые шаблоны API-продуктов
• Примеры из сфер образования, SEO, документооборота и рекрутинга
• Поддержка от команды Alchemyst и сообщества
• Простая система добавления своих проектов через GitHub

🧠 Примеры шаблонов:
• SyllabAI — генерация учебных планов
• zendocs — AI-документация и SEO для B2B
• MASHire — автоматизация рекрутинга (от сообщества)

🔁 Обновление репозитория происходит автоматически — достаточно добавить тег alchemyst-awesome-saas к своему публичному проекту, и он появится в списке.

🎯 Цель проекта:
Показать, как быстро и просто можно построить AI-продукт с помощью Alchemyst — генеративной платформы для создания цифровых сотрудников.

🔗 Репозиторий: https://github.com/Alchemyst-ai/awesome-saas

@javascriptv

🚀 Вышел Angular v20 — крупный апдейт без лишнего шума, но с важными изменениями!

Команда Angular выкатили версию 20 — без глобальных революций, но с мощными улучшениями под капотом. Вот главное:

🧠 Что нового:

• Поддержка Zone-less Change Detection — можно работать без zone.js, что даёт прирост производительности и предсказуемость в рендеринге
• Signal-компоненты по умолчанию (в Developer Preview) — декларативный, реактивный и понятный способ управления состоянием
• Улучшенная производительность благодаря оптимизации AOT-компиляции
• Минимальные версии Node 18+ и TypeScript 5.4+
• Новый флаг standalone для упрощённой структуры проектов

🛠️ Инструменты и девэксп:

• Расширенные DevTools для отладки Signal-компонентов
• Улучшенное время сборки и поддержка CSS-компиляции
• Поддержка строгих типов в шаблонах (`strictTemplates`) по умолчанию

📦 Переходить не страшно: Angular 20 — это стабильный, обратносовместимый апдейт, фокусирующийся на DX и будущей модульности.

🔗 https://blog.angular.dev/announcing-angular-v20-b5c9c06cf301

@javascriptv