👩‍💻 Совет по JavaScript: matchMedia()

Знаешь, как в JavaScript проверить, соответствует ли текущий viewport мобильному виду?

Не нужно городить window.innerWidth и слушать resize вручную.

Используй matchMedia — тот же самый медиа-запрос, что и в CSS:

const mq = matchMedia('(max-width: 550px)');

// Текущее состояние
console.log(mq.matches); // true / false

// Реагируем на изменения
mq.addEventListener('change', e => {
  console.log('Мобильный?', e.matches);
});

✅ Работает синхронно
✅ Использует те же условия, что и в стилях
✅ Не нужно самому отслеживать ресайз

📱 @dev_notes_ru

#JavaScript #CSS #Frontend

👩‍💻 Современный JavaScript: группировка данных

Устали вручную группировать массивы? Теперь это встроенная функция! Object.groupBy() — ваш новый лучший друг для сортировки данных по любому строковому свойству.

const tasks = [
  { description: 'Task 1', tag: 'Tag 1', project: 'Project A' },
  { description: 'Task 2', tag: 'Tag 1', project: 'Project B' },
  { description: 'Task 3', tag: 'Tag 2', project: 'Project A' },
];

const tasksByProject = Object.groupBy(tasks, (task) => task.project);
console.log(tasksByProject);

Результат:

{
  'Project A': [
    { description: 'Task 1', tag: 'Tag 1', project: 'Project A' },
    { description: 'Task 3', tag: 'Tag 2', project: 'Project A' },
  ],
  'Project B': [
    { description: 'Task 2', tag: 'Tag 1', project: 'Project B' },
  ]
}

✅ Поддержка: Все современные браузеры и JS-окружения поддерживают этот метод с марта 2024 года.
Для старых платформ доступен полифил через core-js.

🔑 Ключи любого типа: Если нужно использовать в качестве ключа не только строки, но и объекты, числа и другие типы — используйте Map.groupBy().

📱 @dev_notes_ru

#JavaScript #WebDev #Frontend

Меня никто не понимает. Может быть, я JavaScript. 🤷‍♂️

📱 @dev_notes_ru

#JavaScript #Joke

Явное управление ресурсами в JavaScript

Статья полностью переработана. Добавлены DisposableStack и AsyncDisposableStack, примеры с fetch и navigator.locks, актуальный статус поддержки.

Спецификация Explicit Resource Management (Stage 3) вводит единый языковой контракт освобождения ресурсов. Объекты с Symbol.dispose / Symbol.asyncDispose используются через using и await using — очистка происходит автоматически при выходе из области видимости.

В материале:
— Синтаксис и семантика using, await using, DisposableStack.
— Интеграция с существующими API: отмена fetch, управление navigator.locks.
— Полифилл и требования к окружению.

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

📱 @dev_notes_ru

#JavaScript #TypeScript #NodeJS

Модальное окно или диалог: как выбрать и не сломать доступность

Проектируете модальные окна? А знаете, чем они принципиально отличаются от не-модальных диалогов? 🤔

Это не просто вопрос терминологии. Неверный выбор типа компонента ломает сценарии для клавиатурных пользователей и людей со скринридерами. А неправильная реализация даже правильного выбора делает интерфейс недоступным.

В новом материале разобрали тему от и до:

✅ Алгоритм выбора: три вопроса, которые переводят проектное решение из разряда «по ощущениям» в разряд обоснованных критериев.
✅ Техническая реализация: что нативный <dialog> делает за вас, а за что всё ещё отвечаете вы (спойлер: возврат фокуса — за вами).
✅ Стилизация и анимация: важное ограничение transition и как его обойти.
✅ Чек-лист доступности: 20+ пунктов для проверки перед релизом.

Бонус: Разбор вложенных модалок, работы с кастомными контролами и обработки длинного контента.

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

📱 @dev_notes_ru

#a11y #Frontend #CSS #HTML #JavaScript

Как писать CSS с @scope: Полный разбор синтаксиса, изоляция стилей и donut scoping

Помните головную боль с переопределением стилей во вложенных компонентах? Когда в навигации нужно стилизовать ссылки, но не трогать те, что внутри выпадающих меню? Раньше — сбросы и !important. Теперь — нативный @scope.

🔥 Событие, которого мы ждали годы: последний из мейнстрим-браузеров (да, Firefox) включил поддержку @scope. Это значит, что технология получила статус Baseline и готова к продакшену.

В новом материале — только практика, без воды:
🔹 Как работает donut scoping (скоуп в виде бублика)
🔹 Где писать @scope: во внешних CSS или прямо в HTML-компонентах
🔹 Чем :scope в CSS отличается от :scope в JavaScript

Код можно копировать и вставлять в проект уже сегодня.

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

📱 @dev_notes_ru

#CSS #Frontend #JavaScript #scope

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