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

Прислать задачу/вопрос в дар: @cyberJohnny
Сотрудничество: @cyberJohnny
Download Telegram
🚀 Динамические рабочие процессы для Pi

Расширение для Pi, позволяющее создавать динамические рабочие процессы с помощью JavaScript. Вместо последовательного выполнения задач, модель распределяет работу между изолированными подагентами, обеспечивая синтез результатов. Идеально подходит для аудитов кода и многоперспективных обзоров.

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

📌 GitHub: https://github.com/Michaelliv/pi-dynamic-workflows
This media is not supported in your browser
VIEW IN TELEGRAM
Gooey Navigation

При наведении на элементы меню задействуются CSS-трансформации, параметры которых задаются через CSS-переменные.

https://codepen.io/simeydotme/pen/LYLxJqV
👍3
Million.js — это оптимизирующий компилятор, который снижает накладные расходы React reconciliation и ускоряет компоненты до 70%.

• Работает с существующим React-кодом, миграция на другой фреймворк не нужна
• Тонко настроенный Virtual DOM уменьшает нагрузку на diffing
• CLI-инструмент для автоматической установки и настройки
• Производительность проверяли на js-framework-benchmark

Посмотреть можно здесь:

https://github.com/aidenybai/million
💡HTML-элемент в действии
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Пример кастомных курсоров на CSS 🧑‍💻🚀
👍1
🎨 Симулятор заклинаний из Witch Hat Atelier

Этот браузерный симулятор позволяет рисовать заклинания, вдохновленные мангой *Witch Hat Atelier*. Пользователи могут создавать диаграммы заклинаний, которые преобразуются в анимации и выводы для анализа. Проект находится на стадии экспериментов и открыт для обсуждений в сообществе.

🚀Основные моменты:
- Рисование заклинаний на бумажном холсте.
- Поддержка основных сигилов и модификаторов.
- Генерация анимаций и диагностических выводов.
- Инструменты для тестирования и настройки эффектов.
- Открытое сообщество для обсуждения и улучшений.

📌 GitHub: https://github.com/ytnrvdf/wha-spell-simulator
Визуализация методов массивов JavaScript 🚀
👍7
Компилятор как суперсила: state machine без хаоса в коде

Интересная мысль про конечные автоматы в TypeScript.

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

Справа уже больше похоже не просто на код, а на маленький язык внутри TypeScript. Ты описываешь состояния, события и переходы декларативно, а компилятор начинает работать как страховка.

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

Вот в этом и сила хорошего дизайна API: ты не просто пишешь функции, ты заставляешь TypeScript понимать правила своей предметной области.

State machine становится не схемой в голове разработчика, а контрактом, который проверяется компилятором.
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS 💡

Я недавно обнаружил, что мы можем изменять размеры любого блочного элемента, а не только textarea!
👍2
AnyCrawl превращает сайты в структурированные данные, готовые для LLM.

Инструмент берёт любой сайт и быстро приводит его к чистому JSON, который можно сразу использовать в AI-пайплайнах, RAG, агентах и автоматизации.

Что умеет:

• извлекать данные из поисковой выдачи Google, Bing и Baidu

• краулить сайт целиком

• парсить страницы в несколько потоков

• доставать нужные данные с помощью AI

По сути, это способ быстро превратить хаотичный веб в нормальные данные для языковых моделей.

GitHub: https://github.com/any4ai/AnyCrawl
This media is not supported in your browser
VIEW IN TELEGRAM
Image gallery with flex-grow

Пример галереи изображений на CSS + HTML с эффектом наведения.

https://codepen.io/ahmadghoniem/pen/QWJdMMe
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Знаете ли вы, что в CSS можно определить поворот с помощью блока turn? 🤩
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
VoCSSels - Easily create 3D CSS & HTML Voxel Models

Это JavaScript-приложение, разработанное для упрощения создания трехмерных воксельных моделей с использованием CSS и HTML. Это приложение использует библиотеку dom-to-image для преобразования ваших творческих идей в потрясающие изображения, делая его неотъемлемым инструментом для дизайнеров и разработчиков.

🌐Ссылка на код (https://codepen.io/jcoulterdesign/details/vYyzZdo)
Node.js CLI можно запускать быстрее одной встроенной фичей.

В Node.js 22.8+ есть enableCompileCache() из node:module. Он включает on-disk V8 code cache, чтобы повторные запуски быстрее поднимали большие CLI.

Пример из бенчмарка: typescript.js стартует примерно 130ms → 80ms.

Особенно полезно для CLI, которые грузят много кода при запуске.


import nodeModule from 'node:module';

const { enableCompileCache } = nodeModule;

if (enableCompileCache) {
try {
enableCompileCache();
} catch {}
}

const { runCLI } = await import('./cli.js');

await runCLI();


Мелочь, но для тяжёлых Node.js CLI такие миллисекунды быстро складываются.
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Всплывающие скроллеры изображений с анимацией, управляемой прокруткой 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
👍2
‍⚡️ Microsoft выпустила TypeScript 7.0 - самый большой апдейт TypeScript за последние годы.

Главное: TypeScript теперь получил нативный порт на Go, который даёт почти порядок прироста скорости. По данным команды, полные сборки обычно ускоряются примерно в 8–12 раз, а на крупных проектах вроде VS Code, Sentry, Bluesky и Playwright разница доходит до 7.7x–11.9x.

Что это меняет на практике:

* быстрее открываются большие проекты
* быстрее работают diagnostics, autocomplete и find references
* tsc и --watch дают короче feedback loop
* редакторы через LSP тоже получают прирост
* крупные монорепы меньше страдают от ожидания type-checking

Отдельно завезли параллелизацию: TypeScript 7 умеет распараллеливать parsing, type-checking и emit. Для тонкой настройки появились флаги --checkers, --builders и --singleThreaded.

--watch тоже переписали: теперь он построен на новом файловом watcher’е, портированном на Go, чтобы лучше работать на больших проектах без дорогого polling.

Но есть важный нюанс: TypeScript 7.0 пока не поставляется с API. Новый API ожидается в 7.1, а для переходного периода Microsoft предлагает запускать TypeScript 7 рядом с TypeScript 6 через совместимость и aliases.

Установка обычная:


npm install -D typescript


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

https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/
Шпаргалка по выравниванию в CSS Grid 👨‍💻
👍2
PhantomLoop - визуализация BCI-декодеров прямо в браузере

Небольшая, но интересная находка для тех, кто работает с нейроданными, EEG/BCI и real-time интерфейсами.

PhantomLoop показывает поток данных от BCI-декодера в браузере: сигналы, предсказания модели, качество декодирования и разные визуализации.

Что умеет:

* подключение к EEG/BCI-источникам через WebSocket
* поддержка OpenBCI, Muse, Emotiv, NeuroSky, PiEEG, LSL и других устройств
* real-time streaming до 40 Hz
* декодеры на TensorFlow.js
* ускорение через WebGPU/WebGL
* встроенный Monaco Editor для кастомных декодеров
* визуализации вроде neural waterfall, spectral analysis и center-out arena

Важный момент: браузер не может напрямую работать с BLE, Serial, TCP и железом, поэтому PhantomLoop использует Python WebSocket bridge.

github.com/yelabb/PhantomLoop
Держать 16 разных API-ключей только ради тестов разных LLM - то ещё удовольствие.

freellmapi решает это проще: один OpenAI-compatible endpoint для бесплатных tier’ов от Google, Groq, Cerebras, NVIDIA и ещё 14 провайдеров.

Что внутри:

* около 1.7B токенов в месяц суммарно
* роутер выбирает лучшую модель под запрос
* при rate limit автоматически переключается на другого провайдера
* ключи хранятся в зашифрованном виде
* интерфейс совместим с OpenAI API

По сути, это единая точка входа для экспериментов с разными LLM без ручного жонглирования ключами и лимитами.

15.9K звёзд на GitHub, а я почему-то наткнулся только вчера.

https://github.com/tashfeenahmed/freellmapi

⭐ 15.9K

#OpenSource #DevTools