Совет по javascript 💡

Более короткий способ проверки нескольких условий OR в javascript 🤩

Credit Card Payment Form

Форма оплаты кредитной картой. Реализована с помощью CSS и JavaScript.

https://codepen.io/quinlo/pen/YONMEa

Slice vs. Splice в JavaScript

xyflow предоставляет библиотеки для создания интерфейсов на основе узлов для React и Svelte, которые готовы к использованию сразу из коробки и бесконечно настраиваемы.

- Пакеты @xyflow/react и @xyflow/svelte для создания редакторов узлов
- Включает встроенные компоненты MiniMap, Controls и Background
- Лицензирован по MIT с опциями коммерческой поддержки через React Flow Pro или GitHub Sponsors
-
https://github.com/xyflow/xyflow

Open-source мониторинг без SaaS-привязки

CheckCle выглядит как интересная self-hosted альтернатива для мониторинга инфраструктуры, сервисов и приложений.

Проект даёт uptime-мониторинг, проверки HTTP, DNS, Ping и TCP-сервисов, распределённые региональные проверки, историю инцидентов, SSL и domain monitoring, public status pages, отчёты и алерты в Telegram, Slack, Discord, Matrix и email.

Главный плюс в том, что всё можно поднять у себя через Docker. Не нужен внешний SaaS, не нужно отдавать данные третьей стороне, не нужно платить за каждый монитор или сидеть в чужой панели.

По стеку тоже интересно: основа на Go, фронт на TypeScript, лицензия MIT. На GitHub у проекта уже около 2.7k звёзд, так что это не просто заброшенная утилита на вечер.

Подойдёт тем, кто хочет свой мини-UptimeRobot/Better Stack для VPS, pet-проектов, внутренних сервисов или небольшой команды.

Репозиторий: https://github.com/operacle/checkcle

Anthropic вместе с Frontend Masters выкатили бесплатный курс по Claude Code.

И это не поверхностный обзор, а нормальный разбор инструмента для тех, кто хочет реально прокачать вайбкодинг и работу с AI-агентами.

Курс ведёт Lydia Hallie из Anthropic.

Внутри:

• основы Claude Code
• skills
• hooks
• sub-agents
• MCP
• плагины
• Agent SDK
• продвинутые сценарии работы

Хороший вход для тех, кто хочет не просто “просить ИИ написать код”, а собирать нормальный рабочий процесс вокруг Claude Code.

Ссылка:
http://frontendmasters.com/courses/claude-code

Zustand - это небольшая и быстрая библиотека для управления состоянием в React, которая корректно обрабатывает zombie children, concurrent rendering и потерю контекста.

• упрощённые принципы Flux с API на основе hooks

• не нужны providers и лишний boilerplate

• выборочно перерендеривает только при изменении состояния

• корректно решает типичные проблемы React state

https://github.com/pmndrs/zustand

5 недооцененных возможностей JavaScript

1. FlatMap
FlatMap в JavaScript — это отличная техника, с которой можно познакомиться здесь. FlatMap объединяет в себе функции map и метода массивов filter. Рекомендую использовать flatMap() вместо комбинации filter() и map().

2. Порядок использования методов массивов
Методы массивов — одни из самых важных методов, помогающих взаимодействовать с массивами. В JavaScript существует множество методов массивов.

3. Метод reduce
Я наблюдал эту проблему у многих фронтенд-разработчиков. Когда пакет типа react-charts запрашивает данные в объектоподобной структуре, а реализация react-charts запрашивает данные в формате, сгруппированном по ключу, большинство разработчиков применяют метод .forEach() или некорректно используют метод map().

4. Генераторы
Генераторы и итераторы, пожалуй, относятся к элементам кода, не используемым JavaScript-разработчиками, знания которых ограничиваются вопросами для собеседования по программированию. В сценариях извлечения данных можно столкнуться с огромным объемом данных в БД/API, которые придется передавать во фронтенд. В этом случае наиболее часто используемым решением в react является бесконечная загрузка.

5. Нативные классы JavaScript
В комплект поставки JavaScript входят нативные классы, с помощью которых можно довольно легко создавать/инстанцировать такие элементы, как URL, заголовки и т. д.