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

Совет по Javascript 💡 Возможно, вы не знаете, что мы можем передавать исходную ошибку, при этом повторно выбрасывая ошибку с полезным сообщением для лучшей отладки.

Держать 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

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

Шпаргалка по выравниванию в CSS Grid 👨‍💻

‍⚡️ 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 🤙 .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

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 такие миллисекунды быстро складываются.

VoCSSels - Easily create 3D CSS & HTML Voxel Models Это JavaScript-приложение, разработанное для упрощения создания трехмерных воксельных моделей с использованием CSS и HTML. Это приложение использует библиотеку dom-to-image для преобразования ваших творческих идей в потрясающие изображения, делая его неотъемлемым инструментом для дизайнеров и разработчиков. 🌐Ссылка на код (https://codepen.io/jcoulterdesign/details/vYyzZdo)

Знаете ли вы, что в CSS можно определить поворот с помощью блока turn? 🤩

Image gallery with flex-grow Пример галереи изображений на CSS + HTML с эффектом наведения. https://codepen.io/ahmadghoniem/pen/QWJdMMe

AnyCrawl превращает сайты в структурированные данные, готовые для LLM. Инструмент берёт любой сайт и быстро приводит его к чистому JSON, который можно сразу использовать в AI-пайплайнах, RAG, агентах и автоматизации. Что умеет: • извлекать данные из поисковой выдачи Google, Bing и Baidu • краулить сайт целиком • парсить страницы в несколько потоков • доставать нужные данные с помощью AI По сути, это способ быстро превратить хаотичный веб в нормальные данные для языковых моделей. GitHub: https://github.com/any4ai/AnyCrawl

Anthropic вместе с Frontend Masters выкатили бесплатный курс по Claude Code. И это не поверхностный обзор, а нормальный разбор инструмента для тех, кто хочет реально прокачать вайбкодинг и работу с AI-агентами. Курс ведёт Lydia Hallie из Anthropic. Внутри: • основы Claude Code • skills • hooks • sub-agents • MCP • плагины • Agent SDK • продвинутые сценарии работы Хороший вход для тех, кто хочет не просто “просить ИИ написать код”, а собирать нормальный рабочий процесс вокруг Claude Code. Ссылка: http://frontendmasters.com/courses/claude-code

Совет по CSS 💡 Я недавно обнаружил, что мы можем изменять размеры любого блочного элемента, а не только textarea!

Компилятор как суперсила: state machine без хаоса в коде Интересная мысль про конечные автоматы в TypeScript. Два варианта кода могут делать одно и то же, но ощущаться совершенно по-разному. Слева обычно получается ручное управление состояниями: условия, переходы, проверки, много места для ошибки. Справа уже больше похоже не просто на код, а на маленький язык внутри TypeScript. Ты описываешь состояния, события и переходы декларативно, а компилятор начинает работать как страховка. Он может подсветить невозможный переход, поймать забытый кейс, не дать передать неправильное событие в неправильное состояние и сделать часть логики проверяемой ещё до запуска приложения. Вот в этом и сила хорошего дизайна API: ты не просто пишешь функции, ты заставляешь TypeScript понимать правила своей предметной области. State machine становится не схемой в голове разработчика, а контрактом, который проверяется компилятором.

Визуализация методов массивов JavaScript 🚀

Займи слот ИТ-Пикником от Т-Банка 8 августа — время отложить ноутбуки и встретиться офлайн на ИТ-Пикнике от Т-Банка в музее-заповеднике «Коломенское». Вот сколько всего запланировано: — научпоп-лекции; — мастер-классы; — дискуссии об ИИ и больших языковых моделях; — доклады о кибербезопасности; — примеры, как данные из логов становятся решениями; — много музыки. Бери с собой друзей, супругов и детей — каждый найдет себе что-то по душе. Зарегистрироваться и узнать больше можно здесь (https://it-picnic.ru/?utm_source=telegram&utm_medium=blg.fix&utm_campaign=mtp-spec-picnic_blg_rch_all_tg_fix_postcr_dp_0626_rus_cdev_web_cnl.javascriptv&erid=2VtzqxXaUWV)

Что, если «Следствие вели…» снимали бы в офисном сеттинге в IT-компании? Мы могли бы об этом только фантазировать, если бы… Авито взял и не снял свой выпуск с Леонидом Каневским 🔥 Мы ещё не успели посмотреть: планируем оставить на вечер. Говорят, легенда тру-крайма там расследует внезапный рост ошибок 404 на endpoint аватарок (реальный кейс команды AvitoTech, кстати!). Смотрим, чтобы услышать будущие легендарные цитаты... ну и чтобы в вашей команде такого не случилось! 📱 YouTube (https://clc.to/hnOMvA?erid=2Vtzqx7hc9f) 📱 Rutube (https://clc.to/jDl0Vw?erid=2Vtzqx7hc9f) 📱 VK Видео (https://clc.to/7RRbYg?erid=2Vtzqx7hc9f)

🎨 Симулятор заклинаний из Witch Hat Atelier Этот браузерный симулятор позволяет рисовать заклинания, вдохновленные мангой *Witch Hat Atelier*. Пользователи могут создавать диаграммы заклинаний, которые преобразуются в анимации и выводы для анализа. Проект находится на стадии экспериментов и открыт для обсуждений в сообществе. 🚀Основные моменты: - Рисование заклинаний на бумажном холсте. - Поддержка основных сигилов и модификаторов. - Генерация анимаций и диагностических выводов. - Инструменты для тестирования и настройки эффектов. - Открытое сообщество для обсуждения и улучшений. 📌 GitHub: https://github.com/ytnrvdf/wha-spell-simulator

Пример кастомных курсоров на CSS 🧑‍💻🚀

💡HTML-элемент в действии