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

Совет по CSS 💡 Знаете ли вы, что свойство gap можно использовать и для макета flexbox? ✨

⚡️ CSS Spinners. - 3 разных анимации загрузки для сайта. https://codepen.io/timhilton/pen/ZEVzRgG

📚🚀 Siftly: AI-управляемый менеджер закладок для Twitter/X Siftly позволяет организовать ваши закладки из Twitter/X в удобную и визуально привлекательную базу знаний. Все данные остаются на вашем устройстве, а AI помогает в поиске и категоризации контента. 🚀Основные моменты: - Импорт закладок без расширений - AI-теги и семантический поиск - Визуальная карта закладок - Фильтрация по категориям и типам медиа - Экспорт данных в CSV/JSON/ZIP 📌 GitHub: #typescript https://github.com/viperrcrypto/Siftly

🧩 Collaborator: Инновационная среда для разработки с агентами Collaborator — это приложение для macOS, которое объединяет терминалы, файлы и код на одном бесконечном холсте. Упрощает работу, устраняя необходимость в переключении между вкладками. Приложение активно разрабатывается и предназначено для локального использования. 🚀 Основные моменты: - Интуитивно понятный интерфейс с многофункциональным холстом - Поддержка нескольких рабочих пространств - Интерактивные терминалы и редакторы кода - Локальное хранение данных без необходимости в учетных записях 📌 GitHub: https://github.com/collaborator-ai/collab-public #javascript

✔️ DeepMind сделала браузер-генератор сайтов на Gemini 3.1 Flash-Lite. Концепт (https://x.com/GoogleDeepMind/status/2036483295983100314), который работает внутри AI Studio (https://aistudio.google.com/apps/bundled/flash_lite_browser?showPreview=true&showAssistant=true), пишет HTML и CSS прямо в процессе серфинга вместо загрузки готовых страниц с серверов. Внешний вид и контент формируются на основе промптов, кликов и контекста навигации. Технология органично вписывается в концепцию автономных ИИ-агентов, которым может понадобиться быстро собрать временный дашборд или вспомогательный инструмент для текущей задачи. До идеала еще очень далеко. Поскольку верстка и контент полностью генерируются на не лучшей версии Gemini, браузер уязвим, склонен немного галлюцинировать, искажать стили и тратит прорву токенов на инференс. @ai_machinelearning_big_data #news #ai #ml

Мигающие маяки Карта показывает маяки, запрашивая информацию из Overpass API. Написано на JS. https://github.com/geodienst/lighthousemap

#вопросы_с_собеседований Идентичный алфавит Напишите функцию, принимающую две строки и возвращающую true в случае если строки состоят из одинаковых букв (порядок не важен). Иначе верните false. isEqualSymbols('кит', 'тик'); // => true isEqualSymbols('мда', 'да я'); // => false Решение на картинке. Для ускорения мы сразу отбрасываем вариант, когда строки не равны по длине, далее делаем из строк массивы и сортируем по символам, затем склеиваем обратно и проверяем готовые строки на равенство.

Animated Upload Modal Автор создает модальное окно для загрузки файлов на веб-странице. Модальное окно позволяет пользователю выбрать файл для загрузки, отслеживает процесс загрузки с помощью прогресс-бара и отображает различные состояния загрузки, такие как успешная загрузка или ошибка. Для реализации данной функциональности используются HTML, CSS и JavaScript. В частности, HTML используется для создания структуры модального окна, CSS - для стилизации иконок и оформления окна, а JavaScript - для обработки действий пользователя, отслеживания состояний загрузки и визуализации этих состояний. Нет использования фреймворков, но код использует библиотеку crypto в классе Utils для генерации случайных чисел. 🌐Ссылка на код (https://codepen.io/jkantner/pen/OJEoRwK)

Houdini gradient border animation Анимация градиентной рамки, реализованная на чистом CSS. https://codepen.io/michellebarker/pen/gOMBPQj

‍☁️ ITENTIS CLOUD: топ-технологии (https://partner.itentis.cloud/?utm_source=telegram&utm_medium=march_javascriptv) без переплаты за логотип ITENTIS CLOUD (https://partner.itentis.cloud/?utm_source=telegram&utm_medium=march_javascriptv) — это тот же класс технологий, что и у крупных облаков: изолированная облачная сеть, оркестрация контейнеров Kubernetes, S3-совместимое хранилище объектов, резервные копии-снимки, автоматическое масштабирование ресурсов, отказоустойчивые дата-центры. Только без надбавки за бренд. 📣 Главное: вы как системный администратор, фрилансер, тимлид или владелец небольшой команды можете зарабатывать сами! Подключаете клиентов или свою компанию к ITENTIS CLOUD — и с каждой оплаты регулярно получаете свой процент. 🔥 Никаких странных наценок, скрытых опций и сюрпризов в конце месяца: тарифы можно спокойно сравнивать с крупными провайдерами и видеть экономию. Отдельный плюс — поддержка. Не бот и не формальная первая линия, а живой инженер 24/7, который помогает довести до результата: настроить Kubernetes, собрать нетиповую схему, аккуратно перенести сервисы. 💥 Перенесите часть проектов в ITENTIS CLOUD в тестовом режиме и посмотрите, как инфраструктура ведет себя в бою в течение бесплатных 14 дней. 👉🏻 Переходите на страницу ITENTIS CLOUD (https://partner.itentis.cloud/?utm_source=telegram&utm_medium=march_javascriptv), (https://partner.itentis.cloud/) чтобы посмотреть тарифы, условия партнерской программы и понять, как зарабатывать на инфраструктуре клиентов уже сейчас!

Search Bar Необычное поле для поиска, сделанное из svg картинки, анимированной в CSS. https://codepen.io/nexii/pen/OJOdVey

💻Angular — один из самых строгих и системных инструментов разработки пользовательских интерфейсов. Его выбирают крупные компании, где важны масштабируемость, предсказуемость кода и возможность развивать продукт долгие годы. Мы расскажем вам как работать с этим инструментом. Записывайтесь на открытые уроки в преддверии старта курса «Angular-разработчик»: 📆26 марта в 20:00 МСК на открытом уроке разберём, как LLM ускоряют фронтенд-разработку. Покажем их развитие, подготовим Angular-проект к работе с ИИ, создадим приложение и обсудим, где ИИ реально помогает разработчику. 📆9 апреля в 20:00 МСК на открытом уроке разберём сигналы в Angular: создадим реактивную форму с валидацией, обсудим управление состоянием и сравним с подходом на RxJS. 📆21 апреля в 20:00 МСК разберём архитектуру Angular-приложения: слои, feature-подход, разделение UI, логики и API, а также паттерны и структуру реального проекта. Подробности об уроках и регистрация: https://clck.ru/3SbhAc Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

🖥 React Doctor - проверка архитектуры React без боли Это инструмент, который сканирует кодовую базу и находит архитектурные косяки и анти-паттерны, которые со временем превращают проект в технический долг. Что он умеет находить: - Лишние и неправильно используемые useEffect - Проблемы с доступностью (a11y) - Prop drilling там, где лучше использовать context или композицию - Потенциальные проблемы с производительностью - Лишние ререндеры и неэффективные зависимости Работает как CLI или как агент-скилл - можно прогонять регулярно и постепенно доводить проект до «зелёного» состояния. Идея простая: запускаете проверку, исправляете замечания, повторяете - пока кодовая база не станет чистой и стабильной. Попробовать можно прямо из терминала: npx -y react-doctor@latest https://github.com/millionco/react-doctor

Идеи проектов для Frontend 💡 1. Проекты для начинающих 🔹 Интерфейс системы аутентификации 🔹 Динамический интерфейс дашборда 🔹 Многошаговая форма с валидацией 🔹 Интерфейс загрузки файлов с drag-and-drop 🔹 Интерфейс центра уведомлений 2. Проекты среднего уровня 🔸 Frontend интернет-магазина (фильтры, корзина, оформление заказа) 🔸 Интерфейс платформы для блогов (редактор, комментарии) 🔸 Интерфейс чата в реальном времени 🔸 Kanban-доска для управления задачами 🔸 Приложение для поиска фильмов / контента 3. Продвинутые проекты 🔺 Полноценный frontend социальной сети 🔺 Редактор для совместной работы в реальном времени 🔺 Продвинутый аналитический дашборд 🔺 Приложение с архитектурой micro-frontend 🔺 PWA-приложение с поддержкой работы офлайн

‍⚡️ Claude Code для Уолл-стрит Появился проект Dexter - автономный AI-финансовый аналитик, который проводит полноценное исследование компании без участия человека. Вы задаёте вопрос, например: *NVIDIA недооценена по DCF?* Дальше система работает сама: - строит план исследования - подтягивает актуальные рыночные данные - загружает финансовую отчётность за 5 лет - считает ключевые метрики и мультипликаторы - проверяет свои же расчёты на ошибки - формирует итоговый инвестиционный вывод И всё это — автономно. Как это устроено: Dexter разбивает задачу на несколько этапов: - получает текущие цены - анализирует исторические P/E - сравнивает с отраслевыми значениями - проводит оценку (включая DCF) - проверяет согласованность данных - собирает всё в финальный аналитический тезис Внутри — несколько агентов: - один планирует исследование - второй выполняет сбор и расчёты - третий проверяет корректность цифр - четвёртый пишет итоговый отчёт Система умеет: - читать отчёты SEC (10-K, 10-Q, 8-K) - работать с реальными финансовыми метриками - делать полноценную DCF-оценку По сути, это как команда аналитиков: один ставит задачи, второй ищет данные, третий проверяет расчёты, четвёртый пишет отчёт. Только вся команда - это AI, и запускается прямо в терминале. https://github.com/virattt/dexter

Что выведет этот код? console.log("A") setTimeout(() => console.log("B"), 0) Promise.resolve().then(() => console.log("C")) console.log("D") A D C B Разбор по шагам. • Сначала выполняется синхронный код (Call Stack): • console.log("A") → выводит A • setTimeout(..., 0) → колбэк отправляется в macrotask queue • Promise.resolve().then(...) → колбэк отправляется в microtask queue • console.log("D") → выводит D После этого основной поток завершён. Затем Event Loop обрабатывает microtasks (они имеют более высокий приоритет): выполняется Promise → выводит C И только потом выполняются macrotasks: • setTimeout → выводит B Итоговый порядок выполнения: Sync → Microtasks (Promise) → Macrotasks (setTimeout) Если кратко: Promise всегда выполнится раньше setTimeout, даже если timeout = 0.