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

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

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

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

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

📌 GitHub:

#typescript

https://github.com/Snapchat/Valdi

CSS border values

🧳 MCPorter: TypeScript Toolkit for Model Context Protocol

MCPorter — это инструмент для работы с Model Context Protocol, позволяющий легко взаимодействовать с MCP-серверами. Он автоматически находит настроенные серверы, генерирует CLI и создает типизированные клиенты, упрощая автоматизацию и интеграцию.

🚀 Основные моменты:
- Автообнаружение MCP-серверов без конфигурации.
- Генерация CLI с помощью одной команды.
- Создание типизированных клиентов для взаимодействия с серверами.
- Удобный API для работы с методами и валидацией аргументов.
- Поддержка OAuth и различных транспортов.

📌 GitHub:

#typescript

https://github.com/steipete/mcporter

Библиотека, которая включает офлайн-режим на сайте буквально одной строкой JS 💻

Что делает:
- Показывает сайт даже без интернета - в самолёте, лифте или на парковке 🤣
- Кэширует любые файлы, которые вы укажете
- Работает с обычными статичными сайтами, без сборки и танцев с бубном
- Запускает офлайн-режим одним вызовом: UpUp.start()

Единственное требование — HTTPS (Let’s Encrypt подойдёт идеально).

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

https://github.com/TalAter/UpUp

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

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

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

📌 GitHub:

#nodejs

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

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

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

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

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

#javascript

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

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

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

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

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

🎨 Инструменты для создания и редактирования изображений

Kims — это мощный инструмент для работы с изображениями, позволяющий легко редактировать и создавать графику. Он предлагает интуитивно понятный интерфейс и множество функций, которые делают процесс редактирования простым и эффективным.

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

📌 GitHub: https://github.com/kimkulling/kims

#javascript

🌍 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/

Если JavaScript у вас пока живёт в консоли и учебных задачках, самое время вытащить его в «настоящий мир». На открытом вебинаре соберём мини-приложение, которое очень похоже на реальный продуктовый интерфейс: каталог с карточками, фильтрами и поиском по данным с внешнего API.

Что будем делать на вебинаре:
- Подключим внешний API и загрузим реальные данные — без фейковых «заглушек».
- Построим каталог с карточками: изображение, название, описание — как в интернет-магазинах или сервисах подбора.
- Добавим поиск, фильтры и индикатор загрузки, чтобы интерфейс выглядел и вёл себя живо.
- Покажем, как обрабатывать ошибки и показывать корректные UI-состояния, а не просто «ничего не происходит».
- Разберём структуру приложения на чистом JS: где хранятся данные, где бизнес-логика, как устроен рендеринг.

9 декабря, 20:00 МСК. Открытый урок проходит в преддверии старта курса «JavaScript Developer. Basic».

Регистрация открыта: https://clck.ru/3QdHEp

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576