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

Houdini gradient border animation Анимация градиентной рамки, реализованная на чистом CSS. https://codepen.io/michellebarker/pen/gOMBPQj

‍☁️ ITENTIS CLOUD: топ-технологии (https://partner.itentis.cloud/?utm_source=telegram&utm_medium=march_javascriptv) без переплаты за логотип ITENTIS CLOUD (https://partner.itentis.cloud/?utm_source=telegram&utm_medium=march_javascriptv) — это тот же класс технологий, что и у крупных облаков: изолированная облачная сеть, оркестрация контейнеров Kubernetes, S3-совместимое хранилище объектов, резервные копии-снимки, автоматическое масштабирование ресурсов, отказоустойчивые дата-центры. Только без надбавки за бренд. 📣 Главное: вы как системный администратор, фрилансер, тимлид или владелец небольшой команды можете зарабатывать сами! Подключаете клиентов или свою компанию к ITENTIS CLOUD — и с каждой оплаты регулярно получаете свой процент. 🔥 Никаких странных наценок, скрытых опций и сюрпризов в конце месяца: тарифы можно спокойно сравнивать с крупными провайдерами и видеть экономию. Отдельный плюс — поддержка. Не бот и не формальная первая линия, а живой инженер 24/7, который помогает довести до результата: настроить Kubernetes, собрать нетиповую схему, аккуратно перенести сервисы. 💥 Перенесите часть проектов в ITENTIS CLOUD в тестовом режиме и посмотрите, как инфраструктура ведет себя в бою в течение бесплатных 14 дней. 👉🏻 Переходите на страницу ITENTIS CLOUD (https://partner.itentis.cloud/?utm_source=telegram&utm_medium=march_javascriptv), (https://partner.itentis.cloud/) чтобы посмотреть тарифы, условия партнерской программы и понять, как зарабатывать на инфраструктуре клиентов уже сейчас!

Search Bar Необычное поле для поиска, сделанное из svg картинки, анимированной в CSS. https://codepen.io/nexii/pen/OJOdVey

💻Angular — один из самых строгих и системных инструментов разработки пользовательских интерфейсов. Его выбирают крупные компании, где важны масштабируемость, предсказуемость кода и возможность развивать продукт долгие годы. Мы расскажем вам как работать с этим инструментом. Записывайтесь на открытые уроки в преддверии старта курса «Angular-разработчик»: 📆26 марта в 20:00 МСК на открытом уроке разберём, как LLM ускоряют фронтенд-разработку. Покажем их развитие, подготовим Angular-проект к работе с ИИ, создадим приложение и обсудим, где ИИ реально помогает разработчику. 📆9 апреля в 20:00 МСК на открытом уроке разберём сигналы в Angular: создадим реактивную форму с валидацией, обсудим управление состоянием и сравним с подходом на RxJS. 📆21 апреля в 20:00 МСК разберём архитектуру Angular-приложения: слои, feature-подход, разделение UI, логики и API, а также паттерны и структуру реального проекта. Подробности об уроках и регистрация: https://clck.ru/3SbhAc Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

🖥 React Doctor - проверка архитектуры React без боли Это инструмент, который сканирует кодовую базу и находит архитектурные косяки и анти-паттерны, которые со временем превращают проект в технический долг. Что он умеет находить: - Лишние и неправильно используемые useEffect - Проблемы с доступностью (a11y) - Prop drilling там, где лучше использовать context или композицию - Потенциальные проблемы с производительностью - Лишние ререндеры и неэффективные зависимости Работает как CLI или как агент-скилл - можно прогонять регулярно и постепенно доводить проект до «зелёного» состояния. Идея простая: запускаете проверку, исправляете замечания, повторяете - пока кодовая база не станет чистой и стабильной. Попробовать можно прямо из терминала: npx -y react-doctor@latest https://github.com/millionco/react-doctor

Идеи проектов для Frontend 💡 1. Проекты для начинающих 🔹 Интерфейс системы аутентификации 🔹 Динамический интерфейс дашборда 🔹 Многошаговая форма с валидацией 🔹 Интерфейс загрузки файлов с drag-and-drop 🔹 Интерфейс центра уведомлений 2. Проекты среднего уровня 🔸 Frontend интернет-магазина (фильтры, корзина, оформление заказа) 🔸 Интерфейс платформы для блогов (редактор, комментарии) 🔸 Интерфейс чата в реальном времени 🔸 Kanban-доска для управления задачами 🔸 Приложение для поиска фильмов / контента 3. Продвинутые проекты 🔺 Полноценный frontend социальной сети 🔺 Редактор для совместной работы в реальном времени 🔺 Продвинутый аналитический дашборд 🔺 Приложение с архитектурой micro-frontend 🔺 PWA-приложение с поддержкой работы офлайн

‍⚡️ Claude Code для Уолл-стрит Появился проект Dexter - автономный AI-финансовый аналитик, который проводит полноценное исследование компании без участия человека. Вы задаёте вопрос, например: *NVIDIA недооценена по DCF?* Дальше система работает сама: - строит план исследования - подтягивает актуальные рыночные данные - загружает финансовую отчётность за 5 лет - считает ключевые метрики и мультипликаторы - проверяет свои же расчёты на ошибки - формирует итоговый инвестиционный вывод И всё это — автономно. Как это устроено: Dexter разбивает задачу на несколько этапов: - получает текущие цены - анализирует исторические P/E - сравнивает с отраслевыми значениями - проводит оценку (включая DCF) - проверяет согласованность данных - собирает всё в финальный аналитический тезис Внутри — несколько агентов: - один планирует исследование - второй выполняет сбор и расчёты - третий проверяет корректность цифр - четвёртый пишет итоговый отчёт Система умеет: - читать отчёты SEC (10-K, 10-Q, 8-K) - работать с реальными финансовыми метриками - делать полноценную DCF-оценку По сути, это как команда аналитиков: один ставит задачи, второй ищет данные, третий проверяет расчёты, четвёртый пишет отчёт. Только вся команда - это AI, и запускается прямо в терминале. https://github.com/virattt/dexter

Что выведет этот код? console.log("A") setTimeout(() => console.log("B"), 0) Promise.resolve().then(() => console.log("C")) console.log("D") A D C B Разбор по шагам. • Сначала выполняется синхронный код (Call Stack): • console.log("A") → выводит A • setTimeout(..., 0) → колбэк отправляется в macrotask queue • Promise.resolve().then(...) → колбэк отправляется в microtask queue • console.log("D") → выводит D После этого основной поток завершён. Затем Event Loop обрабатывает microtasks (они имеют более высокий приоритет): выполняется Promise → выводит C И только потом выполняются macrotasks: • setTimeout → выводит B Итоговый порядок выполнения: Sync → Microtasks (Promise) → Macrotasks (setTimeout) Если кратко: Promise всегда выполнится раньше setTimeout, даже если timeout = 0.

🎨 Excalidraw MCP App: Интерактивные диаграммы в чате Сервер для потоковой передачи нарисованных от руки диаграмм Excalidraw с возможностью управления камерой и редактирования в полноэкранном режиме. Идеально подходит для создания визуализаций и архитектурных схем прямо в ваших беседах. 🚀 Основные моменты: - Поддержка интерактивных диаграмм в чате - Легкая интеграция с Claude.ai - Возможность локального развертывания - Удобный интерфейс для рисования - Постоянные обновления и улучшения 📌 GitHub: https://github.com/antonpk1/excalidraw-mcp-app #javascript

ЧИСТЫЙ 100% JAVASCRIPT БЭКЕНД БЕЗ ФРЕЙМВОРКОВ ВРЕМЯ СТАРТА 0.05 СЕКУНД

🕹️ Discord ID Bypass Tool: Управляйте 3D-аватарами в реальном времени! Этот инструмент позволяет контролировать голову и рот 3D-аватара с помощью геймпада или клавиатуры, что помогает обойти проверки Discord. Поддерживает форматы VRM, FBX и GLB, с автоматическим определением костей и возможностью тестирования морфов. 🚀Основные моменты: - Поддержка нескольких форматов моделей - Автоматическое определение костей - Тестирование морфов для управления выражениями - Управление с помощью геймпада и клавиатуры - Никакой установки — работает в любом современном браузере 📌 GitHub: https://github.com/promptpirate-x/discord-id-bypass-tool

Уложить карту, графики, фильтры и таблицы на один экран, дать пользователю гибкость, при этом не сломать UX и не перегрузить браузер — звучит мощно. Так мы переделали интерфейс 2ГИС Про (это наш сервис геоаналитики для бизнеса) от визуальной модели до архитектуры. Ниже — лишь часть наших обновлений. 🔰 Сетка и адаптивность 🔰 Карта теперь виджет 🔰 Без потери событий 🔰 Кастомные ручки изменения размера карточки 🔰 Виртуализация и производительность 🔰 Плавные анимации и скрытие виджетов Наш опыт будет точно полезен для разработчиков UI, веб-инженеров, работающих с дашбордами и тем, кто строит большие аналитические продукты. Полный разбор с кодом и архитектурными решениями в нашей статье на Хабр (https://tglink.io/225e5da7104d65?erid=2W5zFJkH5WH) Другие инженерные инсайты от 2ГИС → в Telegram-канале RnD (https://t.me/+tlIC-01HJwllZWEx?erid=2W5zFJkH5WH)

Я смотрю, как AI-скептики вручную верстают лендинг, потому что «LLM - это всего лишь предсказание следующего токена».

‍🖥 5 маленьких, но полезных библиотек React ▶️1. Urlcat Urlcat — это крошечная JavaScript-библиотека, которая делает очень удобным построение URL и предотвращает распространенные ошибки. Да, для построения URL можно использовать URL API. Но вам все равно придется позаботиться о некоторых деталях вместо того, так что используйте Urlcat. Вы ее подключаете, и она просто работает. Не нужно изучать сложные шаблоны или тратить часы на документацию. 🖥 Смело пробуйте, GitHub (https://github.com/balazsbotond/urlcat) ▶️2. UseHooks-ts UseHooks — это небольшая библиотека с хорошо написанными, задокументированными и полностью типизированными (для пользователей TypeScript) хуками для всех этих вещей. Использование этой библиотеки позволит вам не отвлекаться на мелочи и сосредоточиться на самом проекте. 🖥 GitHub (https://github.com/juliencrn/usehooks-ts) ▶️3. Logt Когда я пишу код фронтенда, я хочу иметь логи. Но с некоторыми требованиями: — логи должны быть полностью типизированными (чтобы использовать в Typescript) — они должны быть небольшими — у логов должны быть цветные ярлыки — мне нужны разные уровни логов — должна быть возможность скрывать некоторые логи в зависимости от условий (мб, в продакшен-сборке) — должна быть возможность отправлять эти логи куда-то еще (мб, в Sentry). После долгих поисков подходящей библиотеки, я нашел Logt, которая отвечает всем моим требованиям. 🖥 Рекомендую на 100%, GitHub (https://github.com/sidhantpanda/logt) ▶️4. Loadable Components Несколько ключевых моментов: Loadable Components поддерживает SSR (рендеринг на стороне сервера), Library Splitting (разделение библиотеки) и даже полный динамический импорт. Неплохо, да? Библиотека действительно проста в использовании. Практически plug-and-play. 🖥 GitHub (https://github.com/gregberge/loadable-components) ▶️5. Emoji Mart Работая над различными проектами, мне часто приходится иметь дело с эмодзи. Так что держите эту маленькую библиотеку. 🖥 Позвольте вам представить Emoji Mart, GitHub (https://github.com/missive/emoji-mart)

🚀 X/Twitter Research Agent for AI Эффективный CLI-инструмент для работы с X API. Позволяет искать, фильтровать и мониторить твиты, получая исследовательские данные без лишних усилий. Идеален для взаимодействия с AI-агентами и анализа контента. 🚀Основные моменты: - Поиск твитов с сортировкой и фильтрацией - Мониторинг аккаунтов через списки наблюдения - Быстрый режим для экономии ресурсов - Кэширование запросов для снижения затрат - Прозрачность расходов на каждую операцию 📌 GitHub: https://github.com/rohunvora/x-research-skill #typescript

🤖 Запустите Moltbot в Cloudflare Sandbox Moltworker позволяет запускать персонального AI-ассистента Moltbot в среде Cloudflare, обеспечивая управляемую и всегда доступную среду без необходимости самостоятельного хостинга. Проект демонстрирует возможность работы Moltbot в облачной песочнице, включая поддержку нескольких платформ для общения. 🚀 Основные моменты: - Персональный AI-ассистент с поддержкой Telegram, Discord и Slack - Веб-интерфейс для управления чатами - Безопасная аутентификация и управление устройствами - Хранение истории чатов для постоянного доступа - Опциональное использование R2 для хранения данных 📌 GitHub: https://github.com/cloudflare/moltworker

⚡️ Cloudflare переписали альтернативу Next.js… за неделю. Компания представила vinext - фреймворк, примерно на 94% совместимый с Next.js, но построенный на Vite и работающий напрямую в Cloudflare Workers. Самое интересное - скорость разработки. Проект был создан всего за одну неделю и разрабатывался вместе с AI. Что это значит: - крупные фреймворки теперь можно пересобирать заново очень быстро - стоимость разработки таких проектов резко падает - инфраструктурные и платформенные эксперименты становятся дешевыми https://x.com/Cloudflare/status/2026415441149571095

🎨 Превратите диаграммы Mermaid в красивые SVG и ASCII Pretty-Mermaid Skills — это инструмент для рендеринга диаграмм Mermaid, поддерживающий SVG и ASCII. Он предлагает множество тем и высокую производительность, идеально подходит для интеграции с AI-инструментами. 🚀 Основные моменты: - Поддержка нескольких форматов: SVG и ASCII - 15 встроенных тем для разных сценариев - Полная поддержка диаграмм: потоки, последовательности и др. - Высокая производительность с параллельным рендерингом - Готовые шаблоны и подробная документация 📌 GitHub: https://github.com/imxv/Pretty-mermaid-skills #javascript