👩‍💻 Что такое this в JavaScript

Во второй части серии Mat Marquis объясняет, что такое this на самом деле, и помогает разобраться, чему он соответствует, исходя из различных контекстов.

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

📱 @dev_notes_ru

#JavaScript

Что такое рекурсия и как использовать её в JavaScript?

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

- Как устроены рекурсивные функции
- Когда рекурсия полезнее цикла
- Примеры
- Как не попасть в бесконечный вызов

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

📱 @dev_notes_ru

#JavaScript

ECMAScript 2025 утверждён!

На 129-й Генеральной ассамблее Ecma был принят новый стандарт JavaScript. Что нас ждёт:

✅ Импорт JSON с with { type: 'json' }
✅ iterator.filter().drop().take() — полноценные цепочки итераторов
✅ Set.prototype.union(), intersection() и другие
✅ Promise.try() и RegExp.escape()
✅ Поддержка Float16Array и inline-флагов в регулярках

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

📱 @dev_notes_ru

#JavaScript #ECMAScript2025 #ES2025 #frontend #вебразработка

Что следует избегать в JavaScript

Даже опытные разработчики иногда совершают ошибки, которые ведут к багам, уязвимостям и странному поведению.
В статье — список распространённых антипаттернов, которых лучше избегать:

🚫 innerHTML вместо textContent
🚫 JSON.stringify() для сравнения объектов
🚫 == вместо ===
🚫 eval() и var
🚫 Функции с 6 аргументами подряд
…и другие ловушки, в которые попадали почти все.

🔎 Это не догмы, а практичные советы, основанные на реальных граблях.

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

📱 @dev_notes_ru

#JavaScript #tips #антипаттерны #советы

👩‍💻 Вышел Firefox 147: Полный разбор релиза для разработчиков

Новый выпуск Firefox — это не просто набор обновлений, а настоящий прорыв в инструментах для веб-разработки. Основные нововведения: CSS Anchor Positioning по умолчанию, мощный Navigation API и расширенные возможности View Transitions. Давайте разберем все детали.

🚀 Главные новинки: CSS Anchor Positioning

CSS Anchor Positioning (якорное позиционирование) — это настоящая революция в CSS. Теперь можно «привязывать» один элемент (например, тултип или выпадающее меню) к другому (якорю) прямо в CSS, без JavaScript, создавая отзывчивые интерфейсы.

Что теперь можно в Firefox 147:

Включено по умолчанию! Больше никаких флагов.

✅ Значение anchor-center: Новое, удобное значение для свойств align-self, justify-self и других, чтобы центрировать элемент относительно его якоря.
✅ position-anchor: none: Новое значение для отвязки элемента от якоря.
✅ Интеграция с Инструментами разработчика: Элементы с anchor-name получают значок «якоря» в DOM-обозревателе, а @position-try правила отображаются в панели CSS.

Практический пример создания тултипа:

/* 1. Объявляем якорь (кнопка) */
.button {
  anchor-name: --tooltip-anchor;
}

/* 2. Создаем и привязываем тултип */
.tooltip {
  position: absolute;
  position-anchor: --tooltip-anchor; /* Связываем с кнопкой */
  bottom: anchor(top); /* Размещаем тултип над кнопкой */
  left: anchor(center); /* Центрируем по горизонтали */
  translate: -50% 0; /* Точная центровка */
}

Преимущество: такой тултип автоматически адаптируется к прокрутке и границам экрана.

🛠 Улучшения для SPA: Navigation API и View Transitions

Firefox 147 делает разработку одностраничных приложений (SPA) значительно удобнее.

⚡️ Navigation API — новый стандарт для управления навигацией.
Позволяет перехватывать навигационные действия, управлять историей браузера и получать информацию о записях в истории. Он призван заменить History API и window.location, устраняя их недостатки. Подробнее об API можно узнать в полной спецификации на MDN.

🎭 View Transitions (Типы переходов)

API для плавных анимаций между состояниями страницы теперь поддерживает типы переходов (types). Это позволяет задавать разные анимации для разных обновлений контента (например, «переход вперед» и «переход назад»). Доступно свойство Document.activeViewTransition для получения активного перехода. Узнать больше можно в полном руководстве по View Transition API.

Инструменты разработчика также получили улучшения для View Transitions: псевдоэлементы ::view-transition теперь видны в DOM, а анимации — в панели анимаций.

💎 Другие важные улучшения

✅ JavaScript: Iterator.concat() для объединения итераторов.
✅ CSS: Поддержка -webkit-perspective для совместимости, новые единицы измерения (rcap, rch, rex, ric) на основе шрифта корневого элемента, свойства counter-* и quotes для ::marker.
✅ API: WebGPU теперь для всех macOS на Apple Silicon, Brotli-сжатие в CompressionStream, CSS-модули (импорт стилей как CSSStyleSheet), Service Workers как ES-модули.
✅ SVG: Поддержка медиа-фрагментов в URL для контроля анимации SMIL и отображения части изображения.
✅ Для разработчиков расширений: Временно загруженные расширения MV3 могут загружать скрипты с localhost.
✅ Для пользователей: Улучшение производительности видео для AMD GPU, поддержка XDG Base Directory в Linux, безопасность.

📈 Зачем все это нужно?

Firefox 147 — это не просто обновление, а серьезный шаг к более выразительной, производительной и простой в разработке веб-платформе. CSS Anchor Positioning обещает сократить объем пользовательского JavaScript для раскладки. Navigation API и View Transitions делают навигацию в SPA предсказуемой и кинематографичной. А WebGPU и другие API открывают двери для новых классов веб-приложений.

📱 @dev_notes_ru

#Firefox #WebDev #CSS #JavaScript #AnchorPositioning #ViewTransitions #NavigationAPI #Frontend

👩‍💻 Эволюция хуков в React: от useEffect к data-first архитектуре

Используете useEffect для задач, которые можно решить иначе? React продолжает развиваться, предлагая более эффективные подходы к управлению состоянием и побочными эффектами.

В новой статье рассматривается эволюция работы с хуками в сторону data-first архитектуры. Ключевые темы:

✅ Отказ от чрезмерного использования useEffect в пользу декларативных методов работы с данными.
✅ Использование useSyncExternalStore для интеграции с внешними состояниями и API браузера.
✅ Повышение отзывчивости интерфейса с помощью useDeferredValue и механизма переходов.

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

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

📱 @dev_notes_ru

#React #Hook #JavaScript

👩‍💻 Асинхронные циклы в JavaScript: как избежать ловушек

Вы тоже сталкивались с тем, что асинхронные запросы в цикле выполняются последовательно и медленно, хотя должны работать параллельно? 🤔
Частая причина — неочевидное поведение await в forEach, map и for…of.

В новой статье разбираем:
🔹 Почему циклы ведут себя не так, как мы ожидаем
🔹 4 рабочие стратегии — от Promise.all() до управляемого параллелизма
🔹 Готовые шаблоны кода, чтобы сразу применять

Выберите правильный подход и перестаньте бороться с асинхронностью.

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

📱 @dev_notes_ru

#JavaScript #NodeJS #Async #Await

👩‍💻 jQuery 4.0.0: релиз к 20-летию библиотеки и ключевые изменения

Команда jQuery выпустила первую за почти 10 лет мажорную версию — jQuery 4.0.0, приуроченную к 20-летию библиотеки. Это масштабное обновление, которое модернизирует код, удаляет устаревшие API и вносит ряд изменений ломающих совместимость.

📅 Сроки поддержки браузеров:

jQuery 4.0 перестаёт поддерживать IE10 и старше, Edge Legacy (не-Chromium), очень старые версии iOS, Firefox и Android Browser. Поддержка IE11 пока остаётся, но будет удалена в jQuery 5.0.

⚡️ Ключевые изменения и улучшения:

1️⃣ Удалены давно устаревшие методы (их следует заменить на нативные аналоги):

🔹 jQuery.isArray → Array.isArray()
🔹 jQuery.parseJSON → JSON.parse()
🔹 jQuery.trim → String.prototype.trim()
🔹 jQuery.type, jQuery.now, jQuery.isNumeric и другие.
🔹 Это сократило размер библиотеки более чем на 3 КБ в gzip.

2️⃣ Модернизация кодовой базы:

🔹 Исходный код переведён с AMD на ES-модули, что улучшает совместимость с современными сборщиками.
🔹 Добавлена поддержка Trusted Types для безопасной работы с HTML под строгими политиками CSP.

3️⃣ Изменения в поведении:

🔹Порядок событий фокуса (focus, blur, focusin, focusout) теперь соответствует актуальной спецификации W3C, а не старому решению jQuery.
🔹Автоматическое добавление "px" к unitless-значениям в .css() сильно ограничено. Теперь px добавляется только к известному набору свойств.
🔹Slim-сборка стала ещё меньше: из неё удалены модули Deferred и Callbacks (размер ~19.5 КБ в gzip), так как в поддерживаемых браузерах (кроме IE11) можно использовать нативные Promise.

🛠 Как обновляться? Важные шаги:

1️⃣ Внимательно изучите официальное руководство по обновлению до версии 4.0.
2️⃣ Используйте плагин jQuery Migrate для выявления проблем в существующем коде.
3️⃣ Если нужна поддержка удалённых старых браузеров (IE10 и др.) — оставайтесь на ветке 3.x.

💾 Ссылки для скачивания:

Полная версия: https://code.jquery.com/jquery-4.0.0.js
Slim-версия: https://code.jquery.com/jquery-4.0.0.slim.js
Через npm: npm install jquery@4.0.0

Это историческое обновление очищает библиотеку от исторического багажа, делая её более современной и ориентированной на будущее. Для новых проектов стоит рассматривать нативные API браузеров, но для поддержки legacy-кода jQuery 4.0 — отличный путь вперёд.

📱 @dev_notes_ru

#jQuery #JavaScript #Frontend #WebDev #jQuery4

👩‍💻 Ленивые итераторы в JavaScript: руководство с примерами

Знаете ли вы, что классическая цепочка items.filter().map().slice(0,10) обрабатывает тысячи элементов, хотя нужны лишь первые десять? Это как перелопатить тонну песка ради щепотки золота.

В статье разбираем нативное решение — хелперы итераторов (Iterator Helpers). Они позволяют:

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

Это меняет подход к оптимизации в JavaScript. Разбираемся, как их внедрять и каких подводных камней избегать.

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

📱 @dev_notes_ru

#JavaScript #IteratorHelpers

👩‍💻 Управляйте spread-синтаксисом: Практическое применение Symbol.iterator

Что, если ваш объект мог бы быть и структурой с понятными свойствами, и коллекцией для мгновенного разворачивания через ...? Оказывается, в JavaScript это встроенная возможность через Symbol.iterator.

В статье разбираем на конкретной задаче:
🔹 Как работает spread «под капотом» и почему Map разворачивается парами.
🔹 Решаем дилемму «объект или массив» — пишем утилиту, результат которой можно и читать как fileInit.bytes, и подставить в new File(...fileInit).
🔹 Плюсы, минусы и когда это реально нужно — чтобы не усложнять код без дела.

Инструмент мощный, но требует осмысленного применения.

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

📱 @dev_notes_ru

#JavaScript #SymbolIterator #Symbol

👩‍💻 Типизация JavaScript: почему JSDoc — это полноценная альтернатива TypeScript

А вы знали, что можно получить все преимущества TypeScript, оставаясь в рамках чистого JavaScript? Всё благодаря JSDoc — системе типизации, которая работает через комментарии. В обновлённой статье:

✅ Добавили больше практических примеров аннотаций
✅ Расширили сравнение рабочих процессов (workflow)
✅ Включили ответы на частые вопросы из комментариев

Этот подход идеален для легаси-проектов, скриптов и случаев, где важна скорость разработки без настройки сборки. Обновление делает материал ещё более прикладным.

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

📱 @dev_notes_ru

#JavaScript #JSDoc #TypeScript

👩‍💻 Типизация JavaScript через JSDoc: Руководство по настройке TypeScript Compiler

Используете JSDoc только для подсказок в редакторе? Тогда вы теряете главное: сквозную проверку типов от локальной разработки до продакшена.

В свежей статье рассматриваем профессиональную настройку системы типов через TypeScript Compiler:

🔹 Как за 5 минут включить проверку типов во всём проекте.
🔹 Автоматическая генерация .d.ts файлов для ваших библиотек.
🔹 Интеграция строгой проверки в CI/CD — код с ошибками не попадёт в main.

Это не хак, а легитимный подход для больших проектов. Если вы до сих пор просто ставите // @ts-check и думаете, что это всё — вам сюда.

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

📱 @dev_notes_ru

#JavaScript #JSDoc #TypeScript

👩‍💻 Совет по 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 #Итераторы