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

📋 Копирование в буфер обмена в 2025 Clipboard API - это уже стандарт для работы с буфером обмена. А старый document.execCommand('copy') официально deprecated ещё с 2020 года. Поддержка Clipboard API: ✔ Chrome 66+ ✔ Firefox 63+ ✔ Safari 13.1+ ✔ Opera 53+ ⚠️ Важные различия между браузерами: Chrome / Edge — Не требует user gesture — Работает только в активной вкладке Firefox / Safari — Требуется пользовательское действие (клик/тап) — Вызов должен быть внутри обработчика этого события 🔐 Общие требования — Только HTTPS или localhost — Для readText() нужно явное разрешение пользователя Где применять Clipboard API — Кнопки «Скопировать код» — Промокоды — Токены доступа — Быстрое копирование ссылок 💡 Совет Всегда вызывайте navigator.clipboard.writeText() внутри обработчика клика — это гарантированно работает во всех современных браузерах.

🎉 JavaScript празднует 30-летие! 🕺 Язык, на котором держатся веб-приложения, UI, фронтенд-фреймворки и половина интернета - появился ровно 30 лет назад. И забавный факт: первую версию языка создали всего за 10 дней. А потом он внезапно стал стандартом веба, пережил мемы про «какой ужас», вырос, оброс экосистемой и теперь управляет всем — от браузеров до серверов и IoT 🚀 С днём рождения, JavaScript. Как ни странно, ты только начинаешь 😉 #JavaScript #WebDev #History #Programming

Совет по CSS! ✨ Вы можете сделать стили компонентов портативными с помощью контейнерных запросов 😎 Изменение макета карты в зависимости от размера 🔥 Удаление текста кнопки, если она маленькая 🤏 .card {container-type: inline-size;} @ container (min-width: 50ch) {.info { grid-column: 2; }} https://codepen.io/jh3y/pen/JjZavRJ

🔥 Фронтенд будущего: ИИ-инструменты и Docs-as-Code в ЮMoney Фронтендеры из ЮMoney поделятся опытом 6 декабря, онлайн, на бесплатной IT-конференции ЮMoneyDay, который помогает делать быстрее и качественнее: 🟣 Вайб-кодинг в финтехе: как мы используем ИИ-инструменты в ежедневных задачах, ускоряем проверку гипотез и возвращаем в работу творчество. 🟣 Docs-as-Code на фронтенде: почему выбрали Markdoc и как мы решаем практические задачи с помощью этого инструмента. Подробнее о программе и регистрации — на сайте конференции (https://events.yoomoney.ru/yoomoneyday-2025-conf?utm_source=tg&utm_medium=post&utm_campaign=yoomoney_day2025&utm_term=paid&utm_content=javascriptv&erid=2VtzqxmMwmB) ™️

⚡️ Крупное обновление легендарной библиотеки иконок для фронтенда Для фронтенд-разработчиков вышло масштабное обновление одной из самых известных библиотек иконок. Экосистема заметно выросла и теперь включает: - 63 119 иконок и 30 стилей — от минимализма до детальной графики; - полноценную SVG-библиотеку и шрифтовые лигатуры, которые работают как обычный текст; - обновлённый дизайн и новые тематические наборы; - официальные NPM-пакеты для React и других фреймворков; - удобные варианты поставки: CDN, SVG-пакеты, шрифты; - полностью переработанную архитектуру без legacy-зависимостей. Инструмент стал универсальным решением: подходит для интерфейсов, дизайн-систем, прототипов и продакшн-приложений. https://github.com/FortAwesome/Font-Awesome

Если JavaScript у вас пока живёт в консоли и учебных задачках, самое время вытащить его в «настоящий мир». На открытом вебинаре соберём мини-приложение, которое очень похоже на реальный продуктовый интерфейс: каталог с карточками, фильтрами и поиском по данным с внешнего API. Что будем делать на вебинаре: - Подключим внешний API и загрузим реальные данные — без фейковых «заглушек». - Построим каталог с карточками: изображение, название, описание — как в интернет-магазинах или сервисах подбора. - Добавим поиск, фильтры и индикатор загрузки, чтобы интерфейс выглядел и вёл себя живо. - Покажем, как обрабатывать ошибки и показывать корректные UI-состояния, а не просто «ничего не происходит». - Разберём структуру приложения на чистом JS: где хранятся данные, где бизнес-логика, как устроен рендеринг. 9 декабря, 20:00 МСК. Открытый урок проходит в преддверии старта курса «JavaScript Developer. Basic». Регистрация открыта: https://clck.ru/3QdHEp Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

🌍 Twitter Location Flags Extension Расширение для Chrome, которое добавляет флаги стран к именам пользователей на Twitter/X, основываясь на их местоположении. Оно автоматически определяет пользователей и запрашивает информацию о местоположении через GraphQL API Twitter. 🚀Основные моменты: - Отображает флаги стран рядом с именами пользователей - Работает с динамически загружаемым контентом - Кэширует данные о местоположении для снижения нагрузки на API - Не требует передачи данных третьим лицам 📌 GitHub: https://github.com/RhysSullivan/twitter-account-location-in-username #javascript https://github.com/RhysSullivan/twitter-account-location-in-username/

🎨 Инструменты для создания и редактирования изображений Kims — это мощный инструмент для работы с изображениями, позволяющий легко редактировать и создавать графику. Он предлагает интуитивно понятный интерфейс и множество функций, которые делают процесс редактирования простым и эффективным. 🚀 Основные моменты: - Поддержка различных форматов изображений - Интуитивно понятный пользовательский интерфейс - Множество инструментов для редактирования и фильтров - Возможность создания графики с нуля - Активное сообщество и регулярные обновления 📌 GitHub: https://github.com/kimkulling/kims #javascript

````typescript type Status = "draft" | "published" | "archived"; type ActiveStatus = // как исключить статус archived? ```` Задумался? Или сразу ответил "Omit"? Если так – этот пост для тебя 😉 Эта задача с реального собеседования в крупную госкорпорацию в сфере атомной энергетики. На таком собесе даже небольшая заминка может стоить тебе оффера. Всё из-за тонкостей TypeScript, которые не всегда встречаются в повседневной работе. Чтобы быть в тонусе и щёлкать такие задачки как орешки — заходи в JavaScript Portal (https://t.me/js_portal). Каждый день там публикуются новые задачи по JS и TS, которые точно прокачают твои практические и теоретические навыки. Подписывайся и будешь готов к любому собесу! 👉 P.S. Правильный ответ и разбор уже ждут тебя тут (https://t.me/js_portal/73?erid=2W5zFGUh8Mn)

⚡️ Отличный гайд по тому, как прокачать навык работы с дейтпикерами в JavaScript. В нём есть примеры, ясные объяснения и наглядный формат, который помогает быстро разобраться во всех нюансах создания собственных дейтпикеров на чистом JS. Читать здесь (https://pikaday.dbushell.com/)👍

‍👩‍💻 Всем программистам посвящается! Вот 16 авторских обучающих IT каналов по самым востребованным областям программирования: Выбирай своё направление: 👩‍💻 Frontend — t.me/frontend_ready (https://t.me/+K3r2jUIrt7w1MDIy) 📱 JavaScript — t.me/javascript_ready (https://t.me/+XCj128XpvnA1ZGEy) 👩‍💻 IT Новости — t.me/it_ready (https://t.me/+Yu6lzx83Er4yY2Ey) 👩‍💻 Python — t.me/python_ready (https://t.me/+B2WFOBc6RxwxNGQy) 🤔 InfoSec & Хакинг — t.me/hacking_ready (https://t.me/+ymM442jKY-tjNTIy) 🖥 SQL & Базы Данных — t.me/sql_ready (https://t.me/+97MAN3odXWo3ZWM6) 🤖 Нейросети — t.me/neuro_ready (https://t.me/+MSC0ahB-wk0wYTA6) 👩‍💻 C/C++ — https://t.me/cpp_ready (https://t.me/+w_QMBcoTD31kZjUy) 👩‍💻 C# & Unity — t.me/csharp_ready (https://t.me/+XoaKKfEew6IxOWMy) 👩‍💻 Java — t.me/java_ready (https://t.me/+I2Xj6A9nLFxlNDky) 👩‍💻 Linux — t.me/linux_ready (https://t.me/+vJTkdJ3FVkUzZWZi) 🖼️ DevOps — t.me/devops_ready (https://t.me/+OU8Cw3LFZUI0Zjcy) 🖥 Data Science — t.me/data_ready (https://t.me/+0o8c0wP4sWtiMzJk) 🐞 QA-тестирование — t.me/qa_ready (https://t.me/+6wAXxbkHPpxmMzZk) 📖 IT Книги — t.me/books_ready (https://t.me/+n2PCTkRMpdk2MTEy) 🖥 Design — t.me/design_ready (https://t.me/+48_eKEFpBW5mYTVi) 📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!

Будьте осторожны и предупредите коллег

📕Angular SSR за час: превращаем SPA в ракету 👤Подходит разработчикам JavaScript/TypeScript, Junior/Middle разработчикам, желающим освоить Angular, Frontend-разработчикам на других фреймворках (React, Vue) На открытом уроке 2 декабря в 20:00 мск мы освоим внедрение SSR в приложение: серверный рендеринг, SEO-метаданные, работа с API и базовое понимание hydration: 📗 На вебинаре разберем: 1. Понимание базовой архитектуры SSR в Angular. 2. Понимание поведения приложения до и после hydration. 📘 В результате на практике изучите и освоите умение подключить SSR к существующему приложению, работу с серверным рендерингом данных и настройку SEO-метаданных. 👉 Регистрация на урок и подробности о курсе Angular Developer: https://clck.ru/3QZgQG Все участники открытого урока получат скидку на курс "Angular Developer" с промокодом ANGULAR12 Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

🖥 (https://t.me/+cFLtJ_U2cbZjYzUy)Bash Академия (https://t.me/+-Dm7V9sQgw5iNGNi): секреты командной строки, которые нигде не рассказывают Олег Шелест - профессионал по информационной безопасности, раскрывает скрытые механики Linux, с помощью наглядных картинок и коротких, максимально понятных разборов у себя в тг канале. - Без воды. - Без лишней теории. Только практические приёмы, которые реально используют профи. Если хочешь уверенно владеть Bash - здесь ты получишь всё, что нужно: t.me/bashmastter (https://t.me/+-Dm7V9sQgw5iNGNi)

🚀 Креативные подсказки для Nano Banana Pro Собрание уникальных и креативных подсказок для работы с Google Nano Banana Pro. Идеально подходит для вдохновения и генерации идей, этот репозиторий предлагает разнообразные варианты для создания визуального контента. 🚀 Основные моменты: - Более 500 тщательно отобранных подсказок - Поддержка динамических аргументов для Raycast - Разнообразные стили генерации: от фотореалистичных до художественных - Регулярные обновления и возможность участия в сообществе 📌 GitHub: https://github.com/YouMind-OpenLab/awesome-nano-banana-pro-prompts #javascript

‍Реальные кейсы AI во фронтенде: что происходит в Яндексе Бизнес-группа Поисковых сервисов и ИИ Яндекса приглашает на Yet Another Frontend Night 29 ноября. Закрытая встреча полностью посвящена внедрению нейросетевых инструментов во фронтенд. Коллеги из Яндекса обсудят, какие AI-технологии работают у них, как изменился разработческий цикл и с какими трудностями пришлось столкнуться на практике. Темы экспертов Яндекса: — Иван Артамонов, руководитель группы конверсионных инструментов в Яндекс Бизнесе, расскажет про преимущества AI-ассистентов — Павел Осташкин, старший разработчик интерфейсов в международной Рекламе, объяснит, как он со своей командой написал и встроил MCP в рабочие процессы и что из этого получилось — Валерий Баранов, AI-оптимист и тимлид группы технологий фронтенда в Яндекс 360, разберет инструменты управления контекстом во фронтенде и покажет, как MCP-серверы снижают галлюцинации и делают дизайн-систему AI-ready — Александр Иванков, руководитель группы развития инфраструктуры поисковых интерфейсов в Яндекс Поиске, поделится опытом разработки AI-помощника и подходами промпт-инжиниринга под разные роли — Андрей Дегтярев, разработчик интерфейсов в Яндекс Браузере, рассмотрит в докладе агентские сценарии по частям, чтобы наглядно показать, какие реальные задачи пользователя они решают Где и когда: 29 ноября, 15:00, Москва, офис Яндекса на Льва Толстого Yet Another Frontend Night пройдет только в offline-формате, трансляция не планируется. Регистрация и подробная программа (https://events.yandex.ru/events/yet-another-frontend-night-2025?utm_source=tg&utm_medium=cpp&utm_campaign=grechka_yafn_promo&utm_content=javascriptv)

🔍 Проверка доступности доменов с GoDaddy API Инструмент на Node.js для проверки доступности доменных имен. Позволяет находить короткие комбинации доменов, используя API GoDaddy. Удобен для генерации и проверки доменов по заданной длине и TLD. 🚀Основные моменты: - Проверка доступности доменов в реальном времени - Генерация комбинаций заданной длины - Поддержка нескольких TLD - Результаты сохраняются в available.json - Уважение к лимитам API с задержками между запросами 📌 GitHub: #nodejs https://github.com/akinloluwami/domains-lookup

Drag&Drop-конструктор интерфейсов на чистом JavaScript. Хватит писать калькуляторы и «todo-листы». Пора собрать что-то, что выглядит и ведёт себя как реальный UI-конструктор. На открытом уроке вы создадите полноценный мини-конструктор с интерактивными элементами. Без фреймворков и библиотек — только чистый JS, события мыши и немного архитектурной логики. Разберём механику drag&drop: как двигать элементы по экрану, управлять DOM, координатами и рендерингом, а также организовать плавный отклик интерфейса. Вы поймёте, как работает визуальное взаимодействие в браузере, как создавать живые интерфейсы, которые «реагируют» на пользователя, и почему архитектура даже простого проекта важнее кода. Занятие будет полезно начинающим разработчикам, которые хотят почувствовать JavaScript и перейти от теории к практике. 27 ноября, 20:00 МСК. Открытый урок проходит в преддверии старта курса «JavaScript Developer. Basic». Регистрация открыта: https://clck.ru/3QNv8S Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Библиотека, которая включает офлайн-режим на сайте буквально одной строкой JS 💻 Что делает: - Показывает сайт даже без интернета - в самолёте, лифте или на парковке 🤣 - Кэширует любые файлы, которые вы укажете - Работает с обычными статичными сайтами, без сборки и танцев с бубном - Запускает офлайн-режим одним вызовом: UpUp.start() Единственное требование — HTTPS (Let’s Encrypt подойдёт идеально). Отлично подходит для лендингов, документации, блогов и любых проектов, которым важно не зависеть от качества сети. https://github.com/TalAter/UpUp

🧳 MCPorter: TypeScript Toolkit for Model Context Protocol MCPorter — это инструмент для работы с Model Context Protocol, позволяющий легко взаимодействовать с MCP-серверами. Он автоматически находит настроенные серверы, генерирует CLI и создает типизированные клиенты, упрощая автоматизацию и интеграцию. 🚀 Основные моменты: - Автообнаружение MCP-серверов без конфигурации. - Генерация CLI с помощью одной команды. - Создание типизированных клиентов для взаимодействия с серверами. - Удобный API для работы с методами и валидацией аргументов. - Поддержка OAuth и различных транспортов. 📌 GitHub: #typescript https://github.com/steipete/mcporter