JavaScript задачи с собеседований
4.83K subscribers
624 photos
74 videos
9 files
389 links
Задачи, тесты и теоретические вопросы по JavaScript. Так же react, vue, angular, node.js

Прислать задачу/вопрос в дар: @cyberJohnny
Сотрудничество: @cyberJohnny
Download Telegram
⚡️ 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
Идеи проектов для Frontend 💡

1. Проекты для начинающих

🔹 Интерфейс системы аутентификации
🔹 Динамический интерфейс дашборда
🔹 Многошаговая форма с валидацией
🔹 Интерфейс загрузки файлов с drag-and-drop
🔹 Интерфейс центра уведомлений

2. Проекты среднего уровня

🔸 Frontend интернет-магазина (фильтры, корзина, оформление заказа)
🔸 Интерфейс платформы для блогов (редактор, комментарии)
🔸 Интерфейс чата в реальном времени
🔸 Kanban-доска для управления задачами
🔸 Приложение для поиска фильмов / контента

3. Продвинутые проекты

🔺 Полноценный frontend социальной сети
🔺 Редактор для совместной работы в реальном времени
🔺 Продвинутый аналитический дашборд
🔺 Приложение с архитектурой micro-frontend
🔺 PWA-приложение с поддержкой работы офлайн
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 React Doctor - проверка архитектуры React без боли

Это инструмент, который сканирует кодовую базу и находит архитектурные косяки и анти-паттерны, которые со временем превращают проект в технический долг.

Что он умеет находить:
- Лишние и неправильно используемые useEffect
- Проблемы с доступностью (a11y)
- Prop drilling там, где лучше использовать context или композицию
- Потенциальные проблемы с производительностью
- Лишние ререндеры и неэффективные зависимости

Работает как CLI или как агент-скилл - можно прогонять регулярно и постепенно доводить проект до «зелёного» состояния.

Идея простая: запускаете проверку, исправляете замечания, повторяете - пока кодовая база не станет чистой и стабильной.

Попробовать можно прямо из терминала:


npx -y react-doctor@latest

https://github.com/millionco/react-doctor
This media is not supported in your browser
VIEW IN TELEGRAM
Houdini gradient border animation

Анимация градиентной рамки, реализованная на чистом CSS.

https://codepen.io/michellebarker/pen/gOMBPQj
👍1
#вопросы_с_собеседований
Идентичный алфавит

Напишите функцию, принимающую две строки и возвращающую true в случае если строки состоят из одинаковых букв (порядок не важен). Иначе верните false.

isEqualSymbols('кит', 'тик'); // => true
isEqualSymbols('мда', 'да я'); // => false

Решение на картинке. Для ускорения мы сразу отбрасываем вариант, когда строки не равны по длине, далее делаем из строк массивы и сортируем по символам, затем склеиваем обратно и проверяем готовые строки на равенство.
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Мигающие маяки

Карта показывает маяки, запрашивая информацию из Overpass API. Написано на JS.

https://github.com/geodienst/lighthousemap
👍1
🧩 Collaborator: Инновационная среда для разработки с агентами

Collaborator — это приложение для macOS, которое объединяет терминалы, файлы и код на одном бесконечном холсте. Упрощает работу, устраняя необходимость в переключении между вкладками. Приложение активно разрабатывается и предназначено для локального использования.

🚀 Основные моменты:
- Интуитивно понятный интерфейс с многофункциональным холстом
- Поддержка нескольких рабочих пространств
- Интерактивные терминалы и редакторы кода
- Локальное хранение данных без необходимости в учетных записях

📌 GitHub: https://github.com/collaborator-ai/collab-public

#javascript
📚🚀 Siftly: AI-управляемый менеджер закладок для Twitter/X

Siftly позволяет организовать ваши закладки из Twitter/X в удобную и визуально привлекательную базу знаний. Все данные остаются на вашем устройстве, а AI помогает в поиске и категоризации контента.

🚀Основные моменты:
- Импорт закладок без расширений
- AI-теги и семантический поиск
- Визуальная карта закладок
- Фильтрация по категориям и типам медиа
- Экспорт данных в CSV/JSON/ZIP

📌 GitHub:

#typescript

https://github.com/viperrcrypto/Siftly
Совет по CSS 💡

Знаете ли вы, что свойство gap можно использовать и для макета flexbox?
👍1
⚡️ Open-source NVR интерфейс для IP-камер

camera.ui — это open-source веб-интерфейс уровня NVR для управления камерами, поддерживающими RTSP-стриминг.

Что умеет:

• смотреть live-видео с камер прямо в браузере
• удобный Camview — плиточная панель всех камер
• детекция движения через video analysis, MQTT, HTTP, FTP или SMTP
• сохранение фото и видео, когда обнаружено движение
• pre-buffer — можно увидеть несколько секунд до события
• уведомления через Telegram, Webhook, Alexa и WebPush
• поддержка Apple HomeKit через Homebridge
• PWA-приложение с push-уведомлениями
• тёмная тема и несколько цветовых тем интерфей

https://github.com/seydx/camera.ui
🌟 DOOM на CSS

Представлен проект cssDOOM, подготовивший реализацию игры DOOM, использующую для отрисовки только CSS, без применения элемента canvas и WebGL.

Всё что выводится на экран, включая спрайты, текстурированные стены, уровни и эффекты, оформлено через стилизованные при помощи CSS элементы , размещаемые в 3D-пространстве при помощи CSS-свойств "transform" и"transform-style: preserve-3d". Игровая логика написана на JavaScript, используя в качестве эталона оригинальный код игры DOOM, открытый компанией id Software. Наработки проекта опубликованы под лицензией GPLv2.

https://cssdoom.wtf/
🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
🎮 Interactive Super Mario - анимация Super Mario, выполненный с помощью SCSS и JavaScript. Управление осуществляется с помощью клавиатуры

https://codepen.io/merchedev/pen/BaYqyNx
This media is not supported in your browser
VIEW IN TELEGRAM
Server Actions создают публичные конечные точки, поэтому не забудьте защитить их, как и маршруты API.
This media is not supported in your browser
VIEW IN TELEGRAM
Создаем CSS Scroll-driven текст с помощью SVG-фильтра 🥊

section { filter: url(#​knockout); }
section h1 { animation: shrink; }
@​keyframes shrink { 0% { scale: 36; }}

- Анимация изменения масштаба текста на видео-оверлее
- Выбивание текста с использованием SVG-фильтра
- Управление прокруткой
Media is too big
VIEW IN TELEGRAM
Aseprite

Анимированный редактор спрайтов и инструмент для пиксель-арта (Windows, macOS, Linux)

▫️Поддержка цветовых профилей и различных цветовых режимов
▫️Средства анимации с предварительным просмотром в реальном времени
▫️Экспорт/импорт анимации в/из листов спрайтов, файлов GIF или последовательности файлов PNG
▫️Специальные инструменты для пиксельной графики
▫️Одновременное преобразование нескольких кадров/слоев
▫️Возможности Lua-скриптинга
▫️CLI — интерфейс командной строки для автоматизации задач

https://github.com/aseprite/aseprite