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

📌Добавляем 3 сентября в календари! Авито устраивает IT-квест и вечеринку для инженеров в секретном месте в честь открытия офиса в Нижнем Новгороде. Обещают много нетворка, Fuckup Night и инсайты о том, что у Авито «под капотом». Пересылайте пост друзьям, с которыми пойдёте, и не забудьте зарегистрироваться по ссылке (https://clc.to/cE8KZg/?erid=2Vtzqvy3E1G).

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

27 августа встречаемся на DrinkUp от Авито для backend-разработчиков в Нижнем Новгороде. Уже предчувствуем горячие споры… ☄️ В планах в формате дискуссий обсудить: ➡️ как правильно структурировать проекты; ➡️ кому и как проще вкатиться в Go и почему он такой странный; ➡️ как LLM помогает разработчикам. Остальные темы раскрывать не будем — можете посмотреть их по ссылке (https://clc.to/_tDcJw/?erid=2VtzqwyFyso)! Там же, кстати, и регистрация на ивент.

⚙️ Metro UI — это современный фронтенд-фреймворк, который помогает разработчикам создавать быстрые и отзывчивые веб-приложения с приятным интерфейсом в стиле Metro. Его компоненты оптимизированы для мобильных устройств, а гибкость позволяет легко адаптировать проекты под любые экраны. Фреймворк активно развивается: новые версии выходят почти каждую неделю, а сообщество в Discord всегда готово помочь. Хотя долгосрочная поддержка старых версий не предусмотрена, разработчики могут оставаться на проверенных релизах или оперативно обновляться для доступа к новым функциям. 🤖 GitHub (https://github.com/olton/metroui)

Полезный сервис для прокачки JavaScript — формат квестов и кода в одной геймифицированной платформе. Похоже на Codewars, но с вайбом мини-игры: Особенности: — Задания создают реальные пользователи — Пишешь JS прямо в браузере, сразу проверяется — Платформа open-source — можно форкнуть и сделать свою версию 🟣 Попробовать (https://jsdares.com/?)

🖥 Прокачай JavaScript без тонны скучных туториалов Опенсорсный челлендж на 30 дней (на самом деле более 120 😂) с понятным роадмапом и десятками проектов — от драм-машины и часов до Flappy Bird, 2048 и визуализации алгоритмов. Что внутри: - 30 стартовых задач + 96 продвинутых проектов с анимациями, играми и утилитами - Демо и полный исходник к каждому проекту - Мини-приложения: генератор паролей, погодный виджет, анимация частиц - Постепенный рост сложности — комфортно и новичкам, и прокачанным Как работать: 1. Иди по плану или выбирай интересные проекты 2. Разбирай код, переписывай и улучшай 3. Делай по 1 проекту в день — и уже через месяц увидишь результат Запускай челлендж сегодня — через 30 дней твой JavaScript будет на новом уровне. Начать учиться (https://30daysofjs.netlify.app/)

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

⌨️ Хотите научиться создавать полноценные API-серверы с использованием Node.js и TypeScript? Приглашаем на открытый урок «Как создать API-сервер с TypeScript и Node.js». (https://otus.pw/Bo2Z/?erid=2W5zFJVQFPN) 🗓 4 августа в 20:00 МСК 🆓 Бесплатно. Урок в рамках старта курса «Node.js Developer». На открытом уроке мы покажем, как быстро настроить сервер с помощью Express, создать маршруты для работы с данными и обрабатывать запросы от клиентов. Вы освоите основы TypeScript и API-разработки, получите знания для работы с типами данных и ошибок. 🎯 Погрузитесь в мир востребованной backend-разработки: создайте API-сервер, научитесь писать чистый и безопасный код и откройте для себя возможности Node.js. 🔗 Ссылка на регистрацию: https://otus.pw/Bo2Z/ (https://otus.pw/Bo2Z/?erid=2W5zFJVQFPN)