👩‍💻 Понимание битовых сдвигов 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

Модернизация с Web-платформой: Уменьшение движения

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

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

📱 @dev_notes_ru

#Frontend #CSS #JavaScript #A11y

👩‍💻 Значения по умолчанию с оператором нулевого слияния

Оператор нулевого слияния (??) предоставляет простой способ обработки null или undefined значений в JavaScript. Он просто необходим, и я расскажу, почему.

Один из важных элементов синтаксиса JavaScript, который я с удовольствием использую, — это оператор нулевого слияния (??). Оператор ?? обрабатывает значения по умолчанию более эффективно по сравнению с традиционным подходом, использующим логический оператор ИЛИ (||). Это 100-процентно необходимый приём.

Оба оператора ?? и || возвращают правый операнд, если левый операнд является «ложным». Но ключевое различие заключается в том, что считать «ложным»…

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

📱 @dev_notes_ru

#JavaScript

👩‍💻 this в JavaScript: Когда определяется this

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

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

📱 @dev_notes_ru

#JavaScript #this

👩‍💻 Преобразование значений в строки в JavaScript

Руководство по преобразованию значений в строки в JavaScript: сравнение 5 методов, работа с объектами и JSON.stringify(), практические примеры и лучшие практики.

Преобразование значений в строки в JavaScript сложнее, чем кажется:

- В большинстве подходов есть значения, которые они не могут обработать.
- Мы не всегда видим все данные.

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

📱 @dev_notes_ru

#JavaScript

👩‍💻 Error.isError(): Лучший способ проверки типов ошибки в JavaScript

Руководство по новому методу `Error.isError()` в JavaScript: почему он лучше `instanceof`, как решает проблемы кросс-контекстных ошибок и типизации в TypeScript.

Система обработки ошибок JavaScript долгое время оставалась слепым пятном при работе с ошибками в разных контекстах исполнения. Новый метод Error.isError() устраняет это ограничение, предоставляя разработчикам более надёжный способ идентификации объектов ошибок.

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

📱 @dev_notes_ru

#JavaScript

👩‍💻 Что такое 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 #антипаттерны #советы