JavaScript задачи с собеседований

Всплывающие скроллеры изображений с анимацией, управляемой прокруткой CSS 🤙

.pop {
view-timeline-name: --pop;
}
img {
animation: slide both;
animation-timeline: --pop;
animation-range: entry 100% cover 50%;
}
.skateboarder {
--x: 0;
--y: -45%;
}
@ keyframes slide {
to { translate: var(--x) var(--y); }
}


https://codepen.io/jh3y/pen/abPgrGR

🧑‍💻 Google Closure Compiler — мощный инструмент для оптимизации JavaScript. Этот компилятор не просто минифицирует код, а глубоко анализирует его, удаляя мёртвые ветки и переписывая логику для максимальной эффективности. В отличие от обычных минификаторов, он проверяет типы, синтаксис и предупреждает о потенциальных ошибках, что делает его полезным для крупных проектов.

В компиляторе есть ADVANCED-режим, который агрессивно оптимизирует код, переименовывая переменные и свойства для уменьшения размера. Однако для его использования код должен быть написан с учётом специфики компилятора, включая модульную систему goog.module и аннотации.

🤖 GitHub (https://github.com/google/closure-compiler)

🚀 Cloudflare Workers SDK — инструментарий для разработки серверных приложений на edge-платформе Cloudflare. Он позволяет развертывать код в глобальной сети Cloudflare без необходимости управления инфраструктурой.

Этот проект будет особенно интересен fullstack-разработчикам, так как поддерживает различные языки и интегрируется с другими сервисами. Главный инструмент в нем — это Wrangler CLI, предоставляющий все необходимое для сборки, тестирования и деплоя Workers. Для локальной разработки доступен Miniflare, эмулирующий работу production-окружения.

🤖 GitHub (https://github.com/cloudflare/workers-sdk)

⏰ Croner — кросс-платформенный планировщик задач для JavaScript/TypeScript. Этот инструмент предлагает свежий взгляд на работу с cron-выражениями, поддерживая Node.js, Deno, Bun и даже браузеры. Croner имеет уникальные возможности вроде вычисления следующих N запусков и контроля временных зон через `Europe/Stockholm`-формат.

Что выделяет проект:
— Поддержка сложных выражений с модификаторами L (последний день месяца) иенный(N-й день недели)
— Встроенная защита от наложений
— Гибкое управление задачами через pause/resume/stop
— Работа с датами через ISO 8601 и JS Date
— Полная TypeScript-поддержка

🤖 GitHub (https://github.com/Hexagon/croner)

🧩 GenAIScript — библиотека для программирования промптов и работы с LLM. Проект предлагает необычный подход: вместо написания статичных текстовых запросов, вы конструируете их программно, используя JavaScript.

Скрипты поддерживают работу с файлами, валидацию данных через схемы и интеграцию с внешними API. Инструмент имеет встроенную поддержку различных провайдеров (OpenAI, Anthropic, GitHub Copilot) и возможность запуска локальных моделей через Ollama.

🤖 GitHub (https://github.com/microsoft/genaiscript)

⚙️ Проверяй совместимость JavaScript-кода за секунды

🔍 Runtime-compat — это удобный инструмент, который быстро подскажет, какие JS-фичи из вашего проекта поддерживаются в разных средах выполнения, а какие могут сломаться.

Просто запусти его — и получишь отчёт о том, что будет работать в Node.js, Deno, Bun, Cloudflare Workers и других рантаймах.
Отлично помогает ещё до деплоя понять, что нужно переписать или полифилить.

📦 Поддерживает:
- Node.js
- Deno
- Bun
- Cloudflare Workers
- и другие

Если ты пишешь кросс-рантайм код — это must-have инструмент.

https://runtime-compat.unjs.io/

#инструменты #javascript

‍🧠 Mastra — фреймворк на TypeScript для создания AI-агентов

⚡ Ассистенты, RAG, наблюдаемость, интеграции

📌 Что умеет Mastra (1.9K⭐ на GitHub):

🔗 Унифицированный интерфейс для LLM
— Поддержка OpenAI, Anthropic, Gemini и других через Vercel AI SDK
— Потоковые ответы, переключение моделей без боли

🛠 Агенты с действиями и инструментами
— LLM сам выбирает действия
— Доступ к функциям, внешним API, инструментам, базе знаний
— Работа с типизированными функциями (Tools), валидация аргументов

🔄 Сценарии и графы (Workflows)
— Состояния, циклы, ветвления, ожидание человека
— Обработка ошибок, повторы, вложенные сценарии
— Визуальный редактор + поддержка кода
— Встроенный OpenTelemetry для трейсинга

📚 RAG-пайплайны
— Создание базы знаний: чанкинг, эмбеддинги, векторный поиск

🔌 Интеграции с внешними сервисами
— Автоматическая генерация типизированных API-клиентов
— Можно использовать как инструменты или шаги в сценариях

🧪 Оценка (Evals) LLM-ответов
— Поддержка: модельная, по правилам, статистическая
— Баллы от 0 до 1, с возможностью кастомных промптов и логики

🔧 GitHub (https://github.com/mastra-ai/mastra)

#TypeScript #AIagents #RAG #OpenAI #Gemini #Mastra #DevTools

CSS совет 💡

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

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

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


https://omatsuri.app/

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

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

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

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

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

🔗 Репозиторий (https://github.com/google-gemini/gemini-fullstack-langgraph-quickstart)

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

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

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

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

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

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

https://github.com/dgmjs/dgmjs

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

Проект (https://github.com/Alchemyst-ai/awesome-saas) — это коллекция готовых шаблонов для создания 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

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

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

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

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

#страница404

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

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

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

🤖 GitHub (https://github.com/beholdr/maska)

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

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

🤖 GitHub (https://github.com/trynova/nova)

Плавное выделение карточек при клике на них, а также при переходе с помощью клавиши Tab.

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

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

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

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

Документация уже доступна по адресу (https://zizigy.github.io/vue-dnd-kit/), а в ближайшем будущем планируется выпуск новых пакетов и интеграция с DevTools. #Vue3 #DragAndDrop #Frontend #WebDev

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