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

📄🚀 Удобный просмотр кода с rendergit

С помощью rendergit вы можете легко преобразовать любой репозиторий GitHub в статическую HTML-страницу с подсветкой синтаксиса и навигацией. Идеально подходит для быстрого просмотра, анализа кода и удобного поиска.

🚀Основные моменты:
- Два режима просмотра: Человеческий и LLM
- Подсветка синтаксиса и рендеринг Markdown
- Умное фильтрование больших файлов
- Адаптивный дизайн для мобильных устройств
- Удобная навигация по файлам

📌 GitHub: https://github.com/karpathy/rendergit

🚀 Qwen Chat Web Dev Prompt — мощный промпт для frontend-разработки с упором на дизайн.

Он помогает разработчикам быстро создавать сайты на React или HTML с использованием TailwindCSS, анимаций и современных UI-паттернов — всё в одном чистом кодовом блоке.

✨ Зачем нужен:
✅ Генерация React/HTML в одном файле
✅ Поддержка популярных библиотек: React, Tailwind, Recharts, Framer Motion, p5.js, Three.js
✅ Никаких внешних зависимостей — только чистый, готовый к запуску код

Идеально для быстрых прототипов и создания полноценных проектов.

👉 Попробовать: https://chat.qwen.ai/?inputFeature=web_dev
👉В хорошем качестве: https://x.com/Alibaba_Qwen/status/1960960780947611957 (https://x.com/Alibaba_Qwen/status/1960960780947611957)

color cycling воскресили на HTML5 Canvas.

КРутейшая, но забытая технология из 8-битной эпохи, когда видеокарты умели максимум в 256 цветов. Художник задавал палитру, а программист просто сдвигал её — и картинка оживала: вода текла, огонь горел, туман плыл. Ни анимации, ни альфы — один спрайт и картина готова.

Вообще, обыычно это выглядело как кислотный ад, но Марк Дж. Феррари (LucasArts, Loom, Monkey Island) сделал из трюка искусство: снег, дождь, океаны, облака, водопады — и всё это на плоской картинке.

В проекте — 35 оригинальных артов Феррари с атмосферным саундом. Можно залипнуть, а можно скачать движок и прикрутить к своим проектам.

Создаем искусство (https://github.com/jhuckaby/canvascycle)

🔥 Библиотека GeoAI.js теперь поддерживает Image Feature Extraction — поиск похожих объектов на спутниковых снимках.

Работает полностью локально в браузере благодаря Transformers.js.

👉 https://docs.geobase.app/geoai-live/tasks/image-feature-extraction

#gischat #javascript #geoai #transformersjs

✍️ Шпаргалка по всем CSS-брейкпоинтам для веб разработчиков

➡️ Для мобильных устройств: до 480 пикселей

➡️ Для очень маленьких устройств: от 481 до 767 пикселей

➡️ Для маленьких планшетов: от 768 до 991 пикселей

➡️ Большие планшеты /ноутбуки: от 992 до 1199 пикселей

➡️ Настольные компьютеры: от 1200 до 1919 пикселей

➡️ Очень большие экраны: от 1920 пикселей и выше

Сократите свой CSS-код с помощью :where()

Используйте псевдокласс-функцию :where(), когда нужно применить одинаковые стили к нескольким элементам, не беспокоясь о том, что порядок селекторов повлияет на специфичность правил. Это простой способ сделать CSS более предсказуемым и удобным для поддержки.


/* Without :where() */
.container > h1,
.container > .card h1,
.container > .card:last-child {
border: 2px solid red;
padding: 10px;
}

/* With :where() */
.container > :where(h1, .card .h1, .card:last-child) {
border: 2px solid red;
padding: 10px;
}

🎯 Browserable — открытый инструмент для автоматизации браузера с помощью AI-агентов.

Что делает:
• Управляет браузером как человек: переходит по сайтам, кликает, заполняет формы, вытаскивает данные.
• Достигает 90.4 % на тесте Web Voyager — один из лучших результатов среди подобных решений.
• Работает локально (self-hosted) или через удалённые браузеры.
• Запуск в 1 команду (`npx browserable`) или в полном окружении через Docker.
• В комплекте: админ-панель, REST API, JavaScript/TypeScript SDK, интеграция с LLM (OpenAI, Claude, Gemini и др.).

Зачем полезно:
— Автопарсинг и мониторинг сайтов
— Автоматизация тестирования веб-приложений
— Интеграция с агентами для сложных сценариев в интернете

GitHub: https://github.com/browserable/browserable

🌱 turfjs — это javascript библиотека позволяющая выполнять пространственный анализ прямо в браузере или через node.js.

Проект включает более 200 модулей для различных операций с geojson от простых измерений расстояний до сложных геостатистических расчетов. Библиотека работает в современных браузерах и поддерживает актуальные версии node.js. Инструмент также имеет модульную структуру и активную аудиторию сообщества.

🤖 Github (https://github.com/Turfjs/turf)

⚙️ Metro UI — это современный фронтенд-фреймворк, который помогает разработчикам создавать быстрые и отзывчивые веб-приложения с приятным интерфейсом в стиле Metro. Его компоненты оптимизированы для мобильных устройств, а гибкость позволяет легко адаптировать проекты под любые экраны.

Фреймворк активно развивается: новые версии выходят почти каждую неделю, а сообщество в Discord всегда готово помочь. Хотя долгосрочная поддержка старых версий не предусмотрена, разработчики могут оставаться на проверенных релизах или оперативно обновляться для доступа к новым функциям.

🤖 GitHub (https://github.com/olton/metroui)

Полезный сервис для прокачки JavaScript — формат квестов и кода в одной геймифицированной платформе. Похоже на Codewars, но с вайбом мини-игры:

Особенности:
— Задания создают реальные пользователи
— Пишешь JS прямо в браузере, сразу проверяется
— Платформа open-source — можно форкнуть и сделать свою версию

🟣 Попробовать (https://jsdares.com/?)

🌿 Tagify — удобный инструмент для превращения обычного поля ввода в компонент тегов с поддержкой React, Vue и Angular.

Библиотека предлагает гибкую настройку, высокую производительность и компактный код. Она умеет работать с ванильным JS и популярными фреймворками, поддерживает валидацию, редактирование тегов и даже подгрузку предложений через AJAX.

🤖 GitHub (https://github.com/yairEO/tagify)

💎 RisuAI — кроссплатформенный клиент для общения с ИИ. Этот проект объединяет поддержку разных языковых моделей в одном интерфейсе с необычными функциями. Например, можно создавать групповые чаты с несколькими персонажами, добавлять эмоциональные изображения в диалоги и использовать TTS для озвучки ответов.

Проект имеет встроенный редактор regex для кастомизации вывода моделей и система «Lorebook» для сохранения контекста беседы. Есть версии для веба, ПК и Docker.

🤖 GitHub (https://github.com/kwaroran/RisuAI)

London Tube Map - Navigation Bar Concept

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

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

🧮 bignumber.js — библиотека для работы с числами произвольной точности в JavaScript. Она поддерживает как десятичные, так и недесятичные числа, предлагая полный набор арифметических операций без потери точности.

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

🤖 GitHub (https://github.com/MikeMcl/bignumber.js)

📦 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)

🔺 Delaunator — молниеносная триангуляция Делоне на JavaScript. Библиотека выполняет разбиение 2D-точек на треугольники с впечатляющей скоростью — обрабатывает миллион точек за секунду. Основной алгоритм основан на оптимизированных sweep-line методах из научных работ 2010-2013 годов.

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

🤖 GitHub (https://github.com/mapbox/delaunator)

🌳 Fancytree — проверенная временем JavaScript-библиотека для создания интерактивных деревьев с поддержкой редактирования, drag'n'drop и ленивой загрузки. Хотя проект перешёл в режим поддержки, он остаётся стабильным решением для таблиц с иерархией и файловых менеджеров.

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

🤖 GitHub (https://github.com/mar10/fancytree)