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() внутри обработчика клика — это гарантированно работает во всех современных браузерах.

Совет по CSS! ✨

Вы можете сделать стили компонентов портативными с помощью контейнерных запросов 😎

Изменение макета карты в зависимости от размера 🔥
Удаление текста кнопки, если она маленькая 🤏

.card {container-type: inline-size;}
@ container (min-width: 50ch) {.info { grid-column: 2; }}

https://codepen.io/jh3y/pen/JjZavRJ

⚡️ Крупное обновление легендарной библиотеки иконок для фронтенда

Для фронтенд-разработчиков вышло масштабное обновление одной из самых известных библиотек иконок. Экосистема заметно выросла и теперь включает:

- 63 119 иконок и 30 стилей — от минимализма до детальной графики;
- полноценную SVG-библиотеку и шрифтовые лигатуры, которые работают как обычный текст;
- обновлённый дизайн и новые тематические наборы;
- официальные NPM-пакеты для React и других фреймворков;
- удобные варианты поставки: CDN, SVG-пакеты, шрифты;
- полностью переработанную архитектуру без legacy-зависимостей.

Инструмент стал универсальным решением: подходит для интерфейсов, дизайн-систем, прототипов и продакшн-приложений.


https://github.com/FortAwesome/Font-Awesome

🌍 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

⚡️ Отличный гайд по тому, как прокачать навык работы с дейтпикерами в JavaScript.

В нём есть примеры, ясные объяснения и наглядный формат, который помогает быстро разобраться во всех нюансах создания собственных дейтпикеров на чистом JS.

Читать здесь (https://pikaday.dbushell.com/)👍

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

🚀 Креативные подсказки для Nano Banana Pro

Собрание уникальных и креативных подсказок для работы с Google Nano Banana Pro. Идеально подходит для вдохновения и генерации идей, этот репозиторий предлагает разнообразные варианты для создания визуального контента.

🚀 Основные моменты:
- Более 500 тщательно отобранных подсказок
- Поддержка динамических аргументов для Raycast
- Разнообразные стили генерации: от фотореалистичных до художественных
- Регулярные обновления и возможность участия в сообществе

📌 GitHub: https://github.com/YouMind-OpenLab/awesome-nano-banana-pro-prompts

#javascript

🔍 Проверка доступности доменов с GoDaddy API

Инструмент на Node.js для проверки доступности доменных имен. Позволяет находить короткие комбинации доменов, используя API GoDaddy. Удобен для генерации и проверки доменов по заданной длине и TLD.

🚀Основные моменты:
- Проверка доступности доменов в реальном времени
- Генерация комбинаций заданной длины
- Поддержка нескольких TLD
- Результаты сохраняются в available.json
- Уважение к лимитам API с задержками между запросами

📌 GitHub:

#nodejs

https://github.com/akinloluwami/domains-lookup

Библиотека, которая включает офлайн-режим на сайте буквально одной строкой 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

CSS border values

🌟 Кроссплатформенный UI-фреймворк Valdi

Valdi — это мощный кроссплатформенный UI-фреймворк, который обеспечивает нативную производительность и быструю разработку. Пишите интерфейсы на TypeScript, и они компилируются в нативные представления для iOS, Android и macOS без использования веб-вью и JavaScript мостов.

🚀 Основные моменты:
- Нативная производительность без компромиссов
- Мгновенная горячая перезагрузка для быстрой разработки
- Легкая интеграция в существующие приложения
- Автоматическая генерация типобезопасных привязок
- Поддержка сложных анимаций и жестов

📌 GitHub:

#typescript

https://github.com/Snapchat/Valdi

Совет по использованию инструментов Chrome Dev Tools 💡

Знаете ли вы, что с помощью Chrome Dev Tools можно легко отслеживать, какие события срабатывают на элементе, и просматривать свойства этих событий?

🌪 useEffect и зависимости

На картинке 3 кейса:

➡️ Забыли проп в deps → эффект не срабатывает при изменении данных

➡️ Положили объект/функцию → эффект запускается каждый ререндер

➡️ Скаляр в deps → всё стабильно, эффект срабатывает ровно при нужном изменении

⌨️ Совет:

— Всегда указывайте все зависимости эффекта

— Если зависимость нестабильна (объект/функция) → мемоизируйте (useMemo, useCallback)

— Примитивы (строка, число) в deps — самый безопасный вариант

#hotfix #react

🧩 OpenTalent: Оценка и развитие талантов на основе Git-данных

OpenTalent — это открытая платформа для оценки разработчиков, основанная на их вкладе в проекты с использованием данных Git. Платформа предлагает объективные метрики и отчеты, помогающие как разработчикам, так и работодателям в поиске и развитии талантов.

🚀 Основные моменты:
- Анализ вкладов в код, документацию и тестирование.
- Оценка влияния разработчиков с помощью алгоритма OpenRank.
- Отчеты о взаимодействии в сообществе и карьерные рекомендации.
- Поддержка индивидуальных отчетов для разработчиков и компаний.

📌 GitHub:

#javascript

https://github.com/OS-HUBU/opentalent-new

Возможно, вы не знаете о блоке lh в CSS 🤩

🚀 StyleX — Open Source Styling Library for CSS at Scale!

Facebook представили StyleX - систему стилизации, сочетающую удобство CSS-in-JS с производительностью статического CSS.
Она генерирует коллизионно-устойчивые атомарные стили и позволяет писать выразительный, типобезопасный и сверхбыстрый код.

StyleX уже используется во всех продуктах компании.

Главная идея - компиляция стилей во время сборки, чтобы CSS-код не рос вместе с приложением.

👉 Подробнее: https://engineering.fb.com/2025/11/11/web/stylex-a-styling-library-for-css-at-scale
⚡️ Github: https://github.com/facebook/stylex



#WebDev #CSS #StyleX #OpenSource

🧩 Умные диаграммы с Excalidraw

Создавайте профессиональные графики с помощью AI, просто описывая их на естественном языке. Интеграция с Excalidraw позволяет редактировать и настраивать диаграммы, обеспечивая гибкость и удобство.

🚀Основные моменты:
- AI генерирует диаграммы на основе текстовых описаний.
- Поддержка более 20 типов графиков, включая ER и архитектурные диаграммы.
- Уникальный алгоритм соединений для чистоты и логики графиков.
- Полная интеграция с Excalidraw для редактирования.
- Легкая настройка с использованием API ключа.

📌 GitHub:

#javascript

https://github.com/liujuntao123/smart-excalidraw-next