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

JavaScript становится понятнее, когда из него получается не учебный фрагмент, а живое приложение. Трекер привычек — хороший формат для такой практики: есть интерфейс, данные, события, состояние, прогресс и сохранение результата в браузере. 29 июля в 20:00 МСК на открытом вебинаре OTUS соберём трекер привычек на чистом JavaScript — без библиотек и фреймворков. За 90 минут пройдём полный цикл фронтенд-задачи: создадим разметку, опишем данные массивом объектов, отрисуем список привычек из кода, обработаем клики, добавим растущий прогресс-бар и анимацию конфетти. Отдельно разберём localStorage: как сохранить прогресс после перезагрузки страницы и почему этот же подход используется в реальных продуктах. По ходу занятия будет видно, как связаны HTML, CSS и JavaScript, как данные превращаются в интерфейс и почему для полноценного мини-приложения не всегда нужен фреймворк. Урок проходит в преддверии старта курса «JavaScript-разработчик. Базовый уровень». 👉 Регистрируйтесь: https://vk.cc/cZLC1N Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Серый взрыв Этот код использует HTML, CSS и JavaScript для создания анимированного графического эффекта. Он не использует никаких фреймворков, только чистый ванильный код. Вот что он делает: Определяет функцию getRandomInt, которая возвращает случайное целое число в заданном диапазоне. Определяет константу NUM_LINES, которая равна 69 и означает количество линий, которые будут нарисованы на SVG-элементе. Получает ссылку на SVG-элемент с помощью document.querySelector и сохраняет ее в переменной svg. Определяет функцию doArt, которая делает следующее: Удаляет все старые линии с SVG-элемента, если они есть. Создает новые линии с помощью цикла for и шаблонной строки. Каждая линия имеет атрибуты x1, y1, x2, y2, stroke, stroke-linecap и stroke-width. Значения этих атрибутов генерируются случайным образом с помощью функции getRandomInt. Например, x2 и y2 определяют конечную точку линии в процентах от ширины и высоты SVG-элемента. Stroke определяет цвет линии в формате RGBA, где последний компонент - это прозрачность. Stroke-width определяет толщину линии в пикселях. Добавляет новые линии в начало SVG-элемента с помощью метода insertAdjacentHTML. Вызывает функцию doArt один раз при загрузке страницы. Добавляет обработчик события click на window, который вызывает функцию doArt каждый раз, когда пользователь кликает по экрану. Определяет стили для SVG-элемента, body и line с помощью CSS. Например, он задает ширину и высоту SVG-элемента в 100%, фоновый цвет в #eee, отступ body в 0 и высоту body в 100vh (100% от высоты окна). Он также добавляет анимацию для line с помощью ключевых кадров и свойства transform. Анимация состоит из изменения масштаба линии от 1 до 0.69 за 4 секунды в бесконечном цикле с чередованием направления. Анимация также имеет разные задержки для разных линий с помощью псевдокласса nth-child. 🌐Ссылка на код (https://codepen.io/chriscoyier/pen/OJXNeyP)

Один skill-файл для AI-агента собрал больше 100K звёзд. ui-ux-pro-max-skill добавляет агенту то, чего обычно не хватает при генерации интерфейсов: дизайнерское суждение. Не просто “сделай красиво”, а правила, почему один экран выглядит как шаблон из нейросети, а другой похож на нормальный продукт. Внутри: * 161 reasoning rules под разные индустрии * 84 UI styles * 192 product types * палитры, typography pairings и UX-гайдлайны * рекомендации по React, Next.js, Vue, Tailwind, SwiftUI, Flutter и другим стекам Skill помогает агенту выбирать структуру лендинга, стиль, цвета, шрифты, эффекты и сразу подсвечивать анти-паттерны. Например, где градиент выглядит дешево, где не хватает контраста, почему spacing ломает ощущение премиальности и какие элементы лучше не использовать в конкретной нише. https://github.com/nextlevelbuilder/ui-ux-pro-max-skill #AI #Design

Совет по 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)