CSS совет 💡

Возможно, ты не знал об этом новом и самом простом способе вертикально центрировать контент в блочном макете.

@javascriptv

Читать полностью…

🧠 Gemini Fullstack LangGraph — умный AI, который реально умеет гуглить

Этот проект — готовый fullstack-пример с фронтендом на React и backend-агентом на LangGraph, который умеет проводить глубокие исследования по пользовательскому запросу. И делает это по-взрослому: генерирует поисковые фразы, гуглит, анализирует пробелы в знании и уточняет запросы, пока не соберёт обоснованный ответ с источниками.

🚀 Что под капотом:

💬 Fullstack-приложение: React + LangGraph
🧠 LangGraph-агент, управляемый Google Gemini
🔍 Динамическая генерация поисковых запросов
🌐 Поиск через Google Search API
🤔 Умная самооценка: где не хватает знаний — туда и копает
📄 Ответы с цитатами и источниками
🔄 Горячая перезагрузка — удобно в разработке (и фронт, и бэк)

📦 Подходит для тех, кто хочет собрать исследовательского AI-ассистента с реальным выходом в веб.

🔗 Репозиторий

@javascriptv

Читать полностью…

Релиз через два дня. Код готов. Почти...
Остались тесты. Ну, точнее — покрытие. Потому что QA уже дышит в затылок, а ты сидишь и выбираешь: спать или корпеть до утра.
Explyt Test умеет создавать тесты под твой код — сам. Быстро. В IDE. Без плясок.
Хочешь, чтобы релиз прошёл, а не пролетел? Попробуй бесплатно! 👉 explyt.ai

Читать полностью…

🚀 Вышел 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

Читать полностью…

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

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

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

Читать полностью…

🕵️‍♂️ 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

Читать полностью…

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

#страница404

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

Читать полностью…

🌐 Руководство: Как создать онлайн-конвертер изображений в PDF с помощью HTML, CSS, JS и NodeJS!

🔗 Ссылка: *клик*

@javascriptv

Читать полностью…

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

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

🤖 GitHub

@javascriptv

Читать полностью…

🚀 Почему пользователи платят $30 за простой конвертер картинок? Давайте разберемся.

Кирилл из комьюнити создал простой продукт всего за один месяц, внедрив метод, которой уже принес результат.

Как он это сделал:
1️⃣ Анализ спроса: через поисковые запросы он увидел, что много людей ищут конвертацию «HEIC to JPG».
2️⃣ Фокус на главном: удалил всё лишнее, оставив только функцию конвертации в один клик.
3️⃣ Скорость внедрения: за 30 дней сделал запуск без перфекционизма.

Посты про конвертер (ч.1, ч.2)

Что из этого получилось:
— Доход $500 в месяц с тенденцией роста.
— Более $10K заработано на конвертере.
— $0 на рекламу, всего $40 в месяц на сервер.

Выводы:
— Люди платят за удобство, даже если есть бесплатные аналоги.
— Продукт функционирует автоматически с минимальной поддержкой.
— Быстрая и экономичная проверка идеи может быть успешной.

Результаты из комьюнити билдеров:
— Более 400 запусков по этой методике.
— Некоторые продукты уже набрали от 50К до 100К+ пользователей.

Присоединяйтесь к @its_capitan — следите за процессом разработки, продвижения и узнайте, сколько можно заработать на таких микро-продуктах.

Реклама: ИП Зуев Игорь Владимирович, ИНН: 360408359441, Erid: 2VtzqwE5pP6

Читать полностью…

🔥 В Qwen теперь есть песочницы для генерации и запуска кода.

Web Dev — новый инструмент для создания готовых фронтенд-страниц и приложений в Qwen Chat.

🎨 Просто напишите: «Создай сайт как ...» — и готово! Вы получаете код приложения.

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

➡️ Попробовать: https://chat.qwen.ai/?inputFeature=web_dev
@ai_machinelearning_big_data


#qwen #codegenerator #online

Читать полностью…

Pokemon Slide Gallery

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

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

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

@javascriptv

Читать полностью…

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

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

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

Читать полностью…

📱 expo-app-template — современный шаблон для React Native и Expo

[expo-app-template](https://github.com/nkzw-tech/expo-app-template) от nkzw-tech — это продвинутый шаблон для быстрого старта разработки мобильных приложений на React Native с использованием Expo и TypeScript.

🚀 Основные особенности:
- Современные технологии: Expo 53, React Native 0.79 с новой архитектурой
- Маршрутизация: Expo Router для удобной навигации
- Стилизация: Tailwind CSS через NativeWind
- Встроенные библиотеки:
- @gorhom/bottom-sheet (модальные окна)
- Legend List (списки)
- react-native-svg с react-native-svg-transformer
- expo-linear-gradient (градиенты)
- Международализация через fbtee
- Поддержка TypeScript и ESM
- Управление зависимостями через pnpm
- React Compiler для оптимизации

🛠️ Установка и запуск:

Предварительные требования:
- Node.js >= 22
- pnpm >= 10
- Cocoapods (для iOS)

Установка:

pnpm install && pnpm dev:setup

▪ Github

Читать полностью…

Стань частью масштабного ИТ-события от МТС

True Tech Day 2025 — третья технологическая конференция МТС для профессионалов ИТ‑индустрии. Одна из главных тем в этом году — тренды и практики искусственного интеллекта.

В программе:
— Доклады от ученых и зарубежных спикеров с индексом Хирша более 50.
— Кейсы применения современных ИИ‑решений — от AI‑агентов, тестов LLM и бенчмарков до вопросов регулирования.
— AI-интерактивы и технологические квесты.
— Пространство для нетворкинга,
…а еще after-party со звездным лайн-апом.

Когда: 6 июня
Где: Москва, МТС Live Холл и онлайн
Участие бесплатно. Регистрируйся по ссылке.

Читать полностью…

💡 Бесплатный ресурс для веб-разработчиков: 12 удобных инструментов в одном месте.

Внутри — генераторы треугольников, теней, градиентов, оптимизация SVG, конвертеры и многое другое.
Все инструменты простые, визуальные и доступны бесплатно.


https://omatsuri.app/

@javascriptv

Читать полностью…

Необычное отображение соцсетей с анимацией при наведении на них

#кнопки #соцсети #hover

https://codepen.io/Stockin/pen/mzydLz

@javascriptv

Читать полностью…

DGM.js — библиотека для рендеринга и работы с холстами, содержащими «умные» фигуры, которые вы можете использовать в сценариях и задавать различные ограничения/свойства.

Поддерживает:

💡 Умные фигуры (скрипты, ограничения, расширенные свойства)
🔧 Безинтерфейсные компоненты (React)
🔥 Бесконечное полотно
📑 Многостраничная поддержка
👍 Рукописные стили
👥 Совместная работа в реальном времени
🎨 Тёмный режим (адаптивные цвета)
📸 Экспорт в изображение (PNG, JPEG, WebP, SVG)
📕 Экспорт в PDF
🔤 Богатый текст
🧑🏻‍💻 Экспорт/импорт в формате JSON

https://github.com/dgmjs/dgmjs

@javascriptv

Читать полностью…

🚀 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

Читать полностью…

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

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

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

@javascriptv

Читать полностью…

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

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

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

@javascriptv

Читать полностью…

Второй язык программирования для карьерного роста

Навык работы с Go — это хорошее дополнение к скиллсету опытного программиста. Освоить язык можно на курсе Нетологии. Это актуальная программа 2025 года, которую мы разработали с учётом последних трендов отрасли.
На курсе вас ждёт много практики: 4 проекта для портфолио, 32 задания и хакатон. За 6 месяцев вы освоите язык на продвинутом уровне и научитесь:

- писать эффективный код на Go,
- создавать высоконагруженные сервисы,
- работать с базами данных,
- встраивать Go-приложения в инфраструктуру.

Практикующий эксперт проведёт для вас 3 персональные консультации. Центр развития карьеры поможет упаковать весь опыт в сильные резюме и портфолио. Освойте Go как второй язык программирования и растите в карьере

Реклама. ООО "Нетология". ИНН 7726464125 Erid 2VSb5xX4kQ8

Читать полностью…

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

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

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

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

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

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

Читать полностью…

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

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

🤖 GitHub

@javascriptv

Читать полностью…

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

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

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

@javascriptv

Читать полностью…

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

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

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

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

Читать полностью…

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

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

🤖 GitHub

@javascriptv

Читать полностью…

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

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

🤖 GitHub

@javascriptv

Читать полностью…

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

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

🤖 GitHub

@javascriptv

Читать полностью…

📝 OpenSign – open-source инструмент с полным набором функций для безопасного подписания документов.

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

🤖 GitHub

@javascriptv

Читать полностью…