👩‍💻 Паттерны для эффективного манипулирования DOM с ванильным JavaScript

В статье рассматриваются такие шаблоны работы с DOM на JavaScript, как выбор правильного querySelector, кэширование элементов и улучшение обработки событий.

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

📱 @dev_notes_ru

#JavaScript #DOM #Event

👩‍💻 Эксперимент: Автоматическое включение View Transitions с MutationObserver

Вместо того чтобы добавлять document.startViewTransition в различные места JS, используйте MutationObserver, следящий за мутациями DOM. В обратном вызове Observer'а отмените исходную мутацию и примените её снова, но на этот раз обернув во View Transition.

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

📱 @dev_notes_ru

#Frontend #JavaScript #JS #ViewTransition #MutationObserver

👩‍💻 Web Performance API: Измерьте важное

Производительность веб-сайта — это не только быстрая загрузка. Речь идёт о понимании того, что происходит с момента, когда пользователь попадает на сайт, до того, как он сможет им воспользоваться. Performance API открывает этот чёрный ящик поведения браузера.

Скорость влияет на всё. Пользователи покидают медленные сайты. Поисковые системы накладывают на них ограничения. Мобильные пользователи расстраиваются, когда приложения разряжают их батареи. Performance API помогает измерить эти реальные последствия.

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

📱 @dev_notes_ru

#Frontend #JavaScript #JS #PerformanceAPI

👩‍💻 ES2025: Атрибуты импорта JavaScript

Понимание нового синтаксиса атрибутов импорта и причин, по которым нельзя полагаться только на расширения файлов.

В ES2025 JavaScript получает новую функцию, делающую импорт модулей более явным и безопасным. Атрибуты импорта добавляют способ передачи метаданных о любом импортируемом модуле — будь то JSON, JavaScript или другие типы модулей.

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

📱 @dev_notes_ru

#JavaScript #ES2025 #Import

👩‍💻 ES2025: Promise.try — Унифицированная обработка ошибок

Прекратите смешивать try/catch с цепочками промисов — новый Promise.try в JavaScript обрабатывает возвращаемые значения, промисы и ошибки унифицировано

В JavaScript появилась новая утилита промиса, позволяющая сделать работу с потенциально асинхронными функциями чище и безопаснее. Promise.try позволяет обернуть любую функцию в промис, независимо от того, асинхронная она или нет, сохраняя оптимальное время выполнения.

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

📱 @dev_notes_ru

#JavaScript #ES2025 #Promise

👩‍💻 Понимание битовых сдвигов JavaScript: << и >>

Практическое руководство по операторам левого и правого битового сдвига JavaScript

Битовые операторы — мощные, но часто упускаемые из виду функции JavaScript. Хотя они нечасто встречаются в повседневной веб-разработке, их понимание позволяет оптимизировать производительность и лучше понять, низкоуровневую обработку чисел компьютером.

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

📱 @dev_notes_ru

#JavaScript #tips

👩‍💻 link rel='modulepreload': Оптимизация загрузки модулей JavaScript

rel='modulepreload' указывает, что скрипт модуля должен быть получен, проанализирован и откомпилирован заранее, и сохранён для последующего выполнения.


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

📱 @dev_notes_ru

#Frontend #HTML #JavaScript #Preload #Module

👩‍💻 Изучение Символов JavaScript

Глубокое погружение в JavaScript Символы — что это такое, чем они важны и как их эффективно использовать

Я помню, как впервые столкнулся с Символами в JavaScript. Это был 2015 год, как и многие разработчики, я подумал: "Отлично, ещё один примитивный тип, о котором нужно беспокоиться".

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

Symbol отличается от других примитивов JavaScript тем, что они гарантированно уникальны.

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

📱 @dev_notes_ru

#JavaScript #Symbol

👩‍💻 JavaScript Set и Map: За пределами массивов и объектов

Как эффективно обрабатывать уникальные значения и пары ключ-значение, избегая принудительного приведения типов и потери производительности?

До того как в ES6 появились Set и Map, возможности хранения коллекций данных в JavaScript были ограничены. Использовались объекты для пар ключ-значение и массивы для списков. Это приводило к распространённым проблемам.

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

📱 @dev_notes_ru

#JavaScript #Set #Map

👩‍💻 Работа с JavaScript Scheduler API

Откройте возможности управления приоритетами и контроля выполнения задач в JavaScript с помощью нового Scheduler API. Новый подход поможет вам стать более продуктивными и эффективными в своей работе.

JavaScript Scheduler API представляет стандартизированный подход к управлению приоритетами задач в веб-приложениях.

Разработчики JavaScript исторически полагались на setTimeout(0) для передачи главного потока. Новый API обеспечивает более точный контроль над тем, как и когда выполняются задачи.

Традиционному подходу setTimeout к передаче главного потока не хватает детального контроля и правильной расстановки приоритетов. API Scheduler устраняет эти недостатки, предлагая более надёжное решение.

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

📱 @dev_notes_ru

#JavaScript #Scheduler

👩‍💻 navigator.clipboard — Новый асинхронный Clipboard API в JavaScript

Копирование и вставка текста, изображений и файлов с помощью нового API navigator.clipboard

Впервые столкнувшись с новым API navigator.clipboard, я был поражён тем, насколько просто он упростил копирование и вставку в веб-приложениях. Прошли времена хаков document.execCommand.

Раньше для обработки операций с буфером обмена использовался document.execCommand("copy"). Этот подход был синхронным и ограниченным — он мог копировать текст только из выбранных элементов DOM. Кроме того, в разных браузерах он работал нестабильно.

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

📱 @dev_notes_ru

#JavaScript #Clipboard #API

👩‍💻👩‍💻 Модернизация с Web-платформой: Производительность изображений

Демонстрация того, как современная Web-платформа может радикально упростить и обогатить старую кодовую базу.

Это первая часть серии статей о силе современной Web-платформы. Я написал каждую статью, основываясь на результатах проекта, созданного в 2018 году, а затем обновлённого в 2024 году.

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

📱 @dev_notes_ru

#Frontend #HTML #JavaScript #WebPlatform

👩‍💻 Intl.DurationFormat: Форматирование временных интервалов с поддержкой локали

Хватит писать код форматирования временных интервалов вручную. Используйте новый мощный API Intl.DateTimeFormat для отображения локализированного времени.

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

Объект Intl.DurationFormat элегантно решает данную проблему. Он является частью основной спецификации языка ECMAScript — в частности, ECMAScript Internationalization API (ECMA-402). Это делает его нативной функцией JavaScript, а не API веб-браузера, хотя браузерная реализация определяет его доступность.

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

📱 @dev_notes_ru

#JavaScript

👩‍💻 Быстрая сортировка строк с `Intl.Collator`

Улучшите сортировку строк с учётом локали, заменив повторяющиеся вызовы `String.localeCompare` одним экземпляром `Intl.Collator` для более быстрого и эффективного сравнения.

Сортировка строк может создавать неожиданные проблемы с производительностью, особенно при работе с большими наборами данных, нуждающимися в соответствующей локализации. Многие разработчики полагаются на String.localeCompare для сортировки по алфавиту, но есть и более эффективный подход, заслуживающий внимания.

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

📱 @dev_notes_ru

#JavaScript