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

Прислать задачу/вопрос в дар: @cyberJohnny
Сотрудничество: @cyberJohnny
Download Telegram
🐳 VibeTunnel — превращай любой браузер в терминал macOS

VibeTunnel от amantus‑ai позволяет запускать терминал Mac прямо в браузере — без сложных SSH‑конфигураций. Идеально, когда нужно удалённо vibe‑кодить или следить за сборками и AI‑агентами.

🔹 Особенности:
• Поддержка Apple Silicon (M1/M2/M3), macOS Sonoma+ :contentReference[oaicite:1]{index=1}
• Zero‑config: никаких SSH‑ключей или порт‑форвардинга :contentReference[oaicite:2]{index=2}
• Браузер‑доступ: HTTP‑сервер на localhost:4020, адаптивный UI + iOS‑приложение
• Сессии записываются в формате asciinema — можно пересматривать позже
• Безопасность: доступ только по localhost или через Tailscale/ngrok, есть пароль
📥 Установка и старт:
1. Скачай и помести приложение VibeTunnel в папку Applications (только Apple Silicon)
2. Запусти из меню macOS, и приложение поднимет сервер
3. Используй CLI vt, например:

vt --shell
vt npm run dev
vt claude --dangerously-skip-permissions
:contentReference[oaicite:6]{index=6}
4. Открой https://localhost:4020 в браузере или iOS‑приложении

⚙️ Архитектура:
• Меню‑приложение на Swift запускает сервер
• Сервер на TypeScript/Bun рендерит терминальные сессии через xterm.js
• Web UI — лёгкий фронтенд на Lit и Bun :contentReference[oaicite:7]{index=7}

🛠 Новое в `v1.0‑beta.2` (19 июня 2025):
• Новый веб‑фронтенд, ускоренный рендер терминала
• Поддержка открытия новых терминальных окон (AppleScript + Accessibility permissions)


🌍 Linux‑поддержка в пути: pull‑request открывает сервер на Go — скоро можно будет поднимать его и на Linux/macOS с одним бинарником :contentReference[oaicite:9]{index=9}

🙋 Кому подойдёт:
• Разработчики, хотят кодить через браузер с любого устройства
• Специалисты, запускающие долгие сборки или AI‑агентов
• Тимлиды, нуждающиеся в быстрой демонстрации рабочего процесса

🔗 GitHub::


Вывод: VibeTunnel — простой, но мощный инструмент для мобильного терминального доступа. Он объединяет нативный macOS-клиент, лёгкий сервер на Bun и отзывчивый Web UI — идеально для vibe-coding и контроля процессов на ходу.



https://github.com/amantus-ai/vibetunnel
🌐 isomorphic-git — Git на чистом JavaScript для браузера и Node.js. Уникальный проект, который переосмысливает работу с Git — теперь операции с репозиториями возможны прямо в браузере без серверных зависимостей. Библиотека воссоздает поведение классического Git, работая с файловой системой через адаптеры.

Удобно реализованы сложные операции: клонирование, коммиты и даже push/pull работают через Web-интерфейс, правда требуют CORS-прокси для внешних репозиториев. Есть встроенный CLI isogit для тестирования функциональности.

🤖 GitHub (https://github.com/isomorphic-git/isomorphic-git)
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Полезный сайт для обучения — roadmap.sh (roadmap.sh)

На нем собраны интерактивные, наглядные дорожные карты для разных IT-направлений, языков и навыков (работа с Git, Docker и проч).

Все карты кликабельны — для каждой собраны полезные статьи и обучалки.

Еще тут есть квизы для самопроверки и AI Tutor — помощник, который накидывает персональный курс на нужную тему, если вы не нашли подходящую на сайте, и план обучения прямо в браузере.

https://roadmap.sh/
This media is not supported in your browser
VIEW IN TELEGRAM
Импорт локальных изображений vs использование изображений из папки /public в Next.js
👍1
🚀 Chrome теперь с встроенным Gemini Nano

Начиная с версии Chrome 138+, браузер поставляется с локальной LLM Gemini Nano — прямо у 3.7 миллиарда пользователей Chrome по всему миру.

Это значит:
- Локальный inference прямо в браузере
- Работает без интернета, без API-ключей
- Возможность строить оффлайн-LLM‑фичи на стороне клиента


В этом (https://github.com/swyxio/swyxdotio/issues/536) показано гайде:
- Как активировать Nano в DevTools
- Как писать запросы к модели
- Как обойти особенности документации от Google 🙃
- Подсказки для тех, кто не чувствует себя уверенно с JavaScript

🧪 Подходит и для тестов, и для продакшна.
Если строите AI-фичи — обязательно загляните.

https://github.com/swyxio/swyxdotio/issues/536
🎨 Oh‑My‑Logo — «волшебный» генератор логотипов от shinshin86

Oh‑My‑Logo — утилита с простым интерфейсом для создания уникальных логотипов прямо в терминале. Работает быстро, без лишнего визуального шума.

🛠️ Как это работает:
- Пользователь вводит название бренда (например, “MyStartup”) и краткое описание
- Утилита генерирует цветные ASCII- или Unicode‑логотипы с эффектом паддинга, обводки, рамки или градиента
- Вы можете пробовать разные стили и цвета прямо из командной строки

💡 Зачем это нужно:
- Быстро придумать временное оформление для README, скрипта или учебного проекта
- Стильно оформить вывод утилиты или CI-лог
- Упростить создание ASCII-баннера для скриптов или серверных инструментов

⚙️ Кому понравится:
- Разработчикам и DevOps инженерам, любящим CLI-стайл
- Авторам технической документации и проектных README
- Всем, кто хочет быстро и красиво оформить свои утилиты

Вывод:
Oh‑My‑Logo — лёгкий способ добавить индивидуальности проектам в текстовом интерфейсе. Без GUI, без лишних шагов — просто командный стиль и творческий подход.

https://github.com/shinshin86/oh-my-logo
This media is not supported in your browser
VIEW IN TELEGRAM
Красивый интерактивный учебник от команды Google Chrome — он прокачает вас в веб-разработке

Внутри отличные материалы по HTML, CSS, JS, доступности, тестированию и ещё куча всякого полезного.

https://web.dev/learn
This media is not supported in your browser
VIEW IN TELEGRAM
✔️ Response-print-pdf — это UI Kit для создания PDF-файлов с использованием React и TypeScript.

С Response-print-pdf создавайте и генерируйте PDF-документы с помощью React 📄. Этот UI-набор компонентов предназначен для создания PDF и печатных документов, таких как счета, брошюры и другие документы. Используйте простые и многократно используемые компоненты и шаблоны для создания профессиональных документов.

Реализуйте свои идеи с помощью любимого фреймворка фронтенда React для создания PDF-документов следующего поколения.

Забудьте о docx, latex или устаревших библиотеках. С помощью react-print-pdf вы получите:

☑️ Простоту в использовании
☑️ Готовые компоненты и шаблоны
☑️ 100% контроль макета
☑️ Интеграция динамических данных в PDF-файл

https://github.com/OnedocLabs/react-print-pdf
🪐 Новый UI-фреймворк в стиле Sci‑Fi — Cosmic UI

🌌 Cosmic (https://github.com/rizkimuhammada/cosmic-ui) UI — это open-source библиотека футуристичных компонентов на React + TailwindCSS + TypeScript. Всё выполнено в стиле научной фантастики — идеально для проектов с «космическим» вайбом.

🔧 Внутри:
- Компоненты с анимациями и голографическими эффектами
- Документация + демо: [cosmic-ui.com](https://cosmic-ui.com/docs)
- MIT лицензия — можно использовать как угодно
- Поддержка Vite, TS, ESLint, Vercel

Почему стоит попробовать?
- Готовые стилизованные компоненты экономят кучу времени
- Идеально для игр, дашбордов, кастомных интерфейсов
- Выглядит не как все остальные boring UI-библиотеки

📦 Установка:

npm install cosmic-ui


📌Github (https://github.com/rizkimuhammada/cosmic-ui)
🧠 HASH — открытая база данных с элементами ИИ, которая самостоятельно структурирует информацию и проверяет её достоверность. Проект объединяет данные из разных источников в реальном времени, предлагая удобные инструменты для работы с ними даже не-техническим пользователям.

HASH имеет автономных агентов, которые автоматически дополняют и очищают данные, а в будущем система превратится в полноценную рабочую среду с AI-интерфейсами. Для старта можно использовать облачную версию или развернуть локально.

🤖 GitHub (https://github.com/hashintel/hash)
AWS Amplify — библиотека для фронтенд- и мобильных разработчиков, упрощающая интеграцию приложений с облачными сервисами AWS. Она предлагает готовые решения для аутентификации, хранения данных, аналитики, API и даже машинного обучения, скрывая сложность бэкенд-настроек за простым JavaScript-интерфейсом.

Хотя инструмент заточен под AWS, архитектура позволяет подключать и кастомные бэкенды. Amplify особенно удобен для React Native и веб-приложений, например, можно добавить авторизацию через Cognito или работу с S3 буквально парой строк кода.

🤖 GitHub (https://github.com/aws-amplify/amplify-js)
🌳 Fancytree — проверенная временем JavaScript-библиотека для создания интерактивных деревьев с поддержкой редактирования, drag'n'drop и ленивой загрузки. Хотя проект перешёл в режим поддержки, он остаётся стабильным решением для таблиц с иерархией и файловых менеджеров.

Интересно реализована модульная структура: можно подключать только нужные функции вроде фильтрации или чекбоксов. Для современных проектов автор рекомендует наследника — Wunderbaum, но Fancytree всё ещё активно используют в legacy-системах.

🤖 GitHub (https://github.com/mar10/fancytree)
🔺 Delaunator — молниеносная триангуляция Делоне на JavaScript. Библиотека выполняет разбиение 2D-точек на треугольники с впечатляющей скоростью — обрабатывает миллион точек за секунду. Основной алгоритм основан на оптимизированных sweep-line методах из научных работ 2010-2013 годов.

Инструмент имеет компактные структуры данных (Uint32Array для треугольников, Int32Array для рёбер), минимизирующие нагрузку на память. Поддерживает дегенеративные случаи через robust-predicates и обновление триангуляции на лету.

🤖 GitHub (https://github.com/mapbox/delaunator)
📦 Carbon Design System — дизайн-система от IBM с готовыми компонентами для React, Angular, Vue и Svelte. Проект предлагает не просто UI-кит, а полноценную экосистему: от цветовых палитр и типографики до адаптивной сетки и анимаций.

Система обладает модульностью. Можно использовать только нужные части через отдельные npm-пакеты вроде @carbon/icons или @carbon/react. Всё собрано по Atomic Design, а документация объясняет не только как работает определенный компонент, но и почему именно так, с акцентом на доступность и UX-логику.

🤖 GitHub (https://github.com/carbon-design-system/carbon)
🧮 bignumber.js — библиотека для работы с числами произвольной точности в JavaScript. Она поддерживает как десятичные, так и недесятичные числа, предлагая полный набор арифметических операций без потери точности.

Проект выделяется простым API, компактным размером и отсутствием зависимостей. Он особенно полезен в финансовых расчётах, криптографии и научных вычислениях, где важна точность. Библиотека работает даже в старых браузерах, так как использует только возможности ES3.

🤖 GitHub (https://github.com/MikeMcl/bignumber.js)
This media is not supported in your browser
VIEW IN TELEGRAM
London Tube Map - Navigation Bar Concept

Концепция панели навигации в виде схемы лондонского метро.

https://codepen.io/MrDarrenGriffin/details/gOZWmYB
👍1