JSDoc на практике: как добавить типизацию в JS-проект без TypeScript

Наверное, каждый сталкивался с дилеммой: хочется типизацию, но втягивать TypeScript в проект и настраивать сборку ради этого — слишком жирно. Есть ли золотая середина?

Да, и это связка JSDoc + TypeScript Compiler. Без единого .ts файла, но с полноценной проверкой в редакторе и CI. Разобрал реализацию этого подхода в проекте Kelp (автор — Крис Фердинанди). Делюсь выводами и настройками:

🔹 Как настроить tsc для работы с ванильным JS.
🔹 Как типизировать переменные, функции и DOM без боли.
🔹 Как собирать кастомные типы через @typedef и не плодить дубли.

Код по-прежнему работает прямо в браузере, а ошибки отлавливаются на этапе написания.

🖥 Читать статью

📱 @dev_notes_ru

#jsdoc #JavaScript #TypeScript

Итераторы в JavaScript: подробное руководство с примерами

Вы точно пользуетесь итераторами каждый день — в for...of, spread-операторе, деструктуризации. Но сможете сходу объяснить, чем итерируемый объект отличается от итератора? 🤔

Если в голове каша из терминов «протокол итерации», Symbol.iterator и next(), вот чёткое объяснение с примерами:

✅ Чёткое разделение: iterable vs iterator — больше никакой путаницы
✅ Как работают keys(), values(), entries() на самом деле
✅ Почему итераторы не создают копии данных в памяти (и когда это критично)
✅ Современный Iterator.from() и ленивые методы (take, drop, filter)

И да, аналогия с книгой и закладкой действительно объясняет всё.

🖥 Читать статью

📱 @dev_notes_ru

#JavaScript #Итераторы

Обработка параметров в JavaScript обработчиках событий

Вопрос управления обработчиками событий часто недооценивают, пока не возникает проблема с утечками памяти в SPA. Когда обработчику требуется передать параметры (например, ID сущности), стандартные подходы перестают работать предсказуемо, а удаление таких обработчиков становится нетривиальной задачей.

В новой статье системно разобрали эту тему:
✅ Почему нельзя просто написать addEventListener('click', deleteTask(id))
✅ Как работают замыкания и AbortController для передачи параметров
✅ Когда делегирование событий производительнее индивидуальных обработчиков
✅ Шпаргалка: 4 вопроса, которые помогут выбрать правильный паттерн

Материал будет полезен, если вы пишете на чистом JS или хотите лучше понимать, как работают события внутри фреймворков.

🖥 Читать статью

📱 @dev_notes_ru

#JavaScript

URL Pattern API: Руководство по нативной маршрутизации в JavaScript

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

С сентября 2025 года у JavaScript-разработчиков появился встроенный инструмент для этой задачи — URL Pattern API. Он предоставляет единый синтаксис для валидации URL и извлечения параметров, который работает во всех современных браузерах и в Node.js/Deno/Bun.

В статье подробно разбираются:

✅ Синтаксис шаблонов: именованные группы, модификаторы, регулярные выражения.
✅ API: методы test() для проверки соответствия и exec() для извлечения данных.
✅ Практика: примеры использования в Service Worker, SPA и серверном приложении.

Также в материале затронуты вопросы производительности и ограничения использования API для высоконагруженных серверных проектов.

🖥 Читать статью

📱 @dev_notes_ru

#JavaScript #WebAPI

Атрибуты и свойства HTML: в чём разница

Распространённая ситуация: разработчик пытается прочитать значение поля ввода через getAttribute('value'), но получает не актуальные данные, введённые пользователем, а первоначальное значение из HTML-разметки.

Это не ошибка JavaScript, а следствие фундаментального различия между атрибутами и свойствами DOM. Атрибуты — это исходные параметры, заданные в HTML (чертёж элемента). Свойства — это текущее состояние DOM-объекта в памяти браузера (реальность). И они могут расходиться.

В новой статье детально разбирается:

✅ Почему input.value и getAttribute('value') ведут себя по-разному.
✅ Как работает defaultValue и для чего он нужен.
✅ Особенности логических атрибутов (checked, disabled).
✅ Что важно знать о свойствах и атрибутах разработчикам на React.

Материал будет полезен как начинающим, так и опытным разработчикам, желающим систематизировать знания о DOM.

🖥 Читать статью

📱 @dev_notes_ru

#HTML #JavaScript #DOM #Frontend

Проксирование fetch() в серверном JavaScript

Стандарт Fetch не специфицирует проксирование HTTP-запросов, поэтому каждый серверный JavaScript-рантайм реализует эту возможность по-своему. В результате разработчики сталкиваются с несовместимостью решений при смене среды исполнения.

В статье рассматриваются следующие подходы:

✅ Bun и Deno — встроенная поддержка прокси через опции fetch()
✅ Node.js — два пути: глобальные переменные окружения или пакет undici для per-request настройки
⚠️ Cloudflare Workers — отсутствие нативной поддержки и три архитектурных альтернативы (Docker-контейнер, TCP-сокеты, вынос логики в отдельный микросервис)

Также приведён чек-лист для проверки, действительно ли трафик идёт через прокси, и разбор типовых ошибок.

🖥 Читать статью

📱 @dev_notes_ru

#JavaScript #Nodejs

JSON в браузере: import или fetch — руководство по выбору

Спойлер: import из JSON — это не замена fetch()

Кажется, что новый синтаксис import data from './file.json' with { type: 'json' } проще и современнее. Но у него есть три жёстких ограничения:

🔹 Пожизненное кеширование — данные останутся в памяти на всю сессию
🔹 Нет отмены запроса — AbortController не подключается
🔹 Минимум информации об ошибках — не поймёшь, 404 это или CORS

В статье сравнили оба подхода по безопасности, кешу, стримингу и контролю. В конце — готовый чек-лист: когда брать import, а когда только fetch с проверкой Content-Type.

🖥 Читать статью

📱 @dev_notes_ru

#JavaScript #JSON #import #fetch