JS

Объект Date в JavaScript считается одной из худших частей языка: месяцы нумеруются с нуля, парсинг строк непредсказуем, объект мутабельный, а работа с таймзонами — отдельная боль. Поэтому многие проекты тянут библиотеки вроде date-fns или Luxon. Temporal — это новый встроенный API дат, который проектировали с нуля, учтя все ошибки Date.

Обычный fetch работает так: браузер ждёт, пока сервер отправит весь ответ, и только потом отдаёт данные вашему коду. Для небольших JSON-ов это нормально. Но если ответ большой, или сервер генерирует его постепенно (как это делают языковые модели при стриминге), ждать полного ответа — плохая идея. Streams API позволяет читать ответ прямо по мере поступления.

В ReadableStream каждый ответ fetch имеет свойство body — это ReadableStream. Из него можно читать данные кусками (chunks) по мере их поступления:

const response = await fetch('/api/stream');
const reader = response.body.getReader();
const decoder = new TextDecoder();

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  console.log(decoder.decode(value));
}

Метод reader.read() возвращает промис с объектом { done, value }. value — это Uint8Array (сырые байты), поэтому нужен TextDecoder для перевода в строку. Когда данные кончаются, done становится true.

Когда вы запрашиваете данные через curl или читаете конфигурационный файл, JSON в терминале выглядит примерно так: одна длинная строка без переносов и отступов, которую невозможно читать. А если ответ весит несколько килобайт с вложенными объектами — найти нужное поле глазами нереально.

jq — инструмент командной строки для работы с JSON: форматирует, фильтрует, извлекает нужные поля и преобразует данные. Работает как конвейер: передаёте JSON на вход, получаете нужный кусок на выходе.

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

Присвоить объект через = — не копирование. Это просто ещё одна ссылка на тот же объект. Измените копию — изменится оригинал:

const original = { name: 'Иван', scores: [10, 20, 30] };
const copy = original;

copy.name = 'Пётр';
console.log(original.name); // 'Пётр' — изменился оригинал!

Для поверхностного копирования используют Object.assign() или spread-оператор {...obj}. Но они копируют только первый уровень. Вложенные объекты и массивы по-прежнему остаются общими.

В 2022 году JavaScript получил structuredClone() — стандартный способ сделать полную глубокую копию.

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

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

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

Можно писать arr[arr.length - 1] — работает, но громоздко. Можно использовать arr.slice(-1)[0] — ещё хуже. Оба варианта требуют знать длину массива или создавать промежуточный массив ради одного элемента.

В 2022 году в JavaScript появился метод .at(), который решает это элегантно.

Вышел Vite 8 — самое крупное изменение архитектуры с версии 2. Главное: под капотом теперь работает единственный бандлер Rolldown, написанный на Rust. Раньше их было два — esbuild для разработки и Rollup для финальной сборки. Теперь один инструмент делает всё.

После продолжительного изучения темы выяснилось, что Popover API и Dialog API кардинально отличаются с точки зрения доступности. Если вы стоите перед выбором, придерживайтесь такого правила:

• Используйте Popover API для большинства поповеров.
• Используйте Dialog API только для модальных диалогов.

Firefox 148 стал первым браузером, реализовавшим стандартизированный Sanitizer API — новый инструмент, который встраивает санитизацию HTML непосредственно в процесс вставки содержимого в DOM и делает защиту от XSS доступной по умолчанию.

Межсайтовый скриптинг (XSS) по-прежнему остаётся одной из наиболее распространённых уязвимостей в интернете. Новый стандартизированный Sanitizer API даёт веб-разработчикам простой способ очищать ненадёжный HTML перед его вставкой в DOM. Firefox 148 стал первым браузером, поставившим этот API в стабильную версию, — ожидается, что остальные браузеры последуют примеру в ближайшее время.

XSS-уязвимость возникает, когда сайт непреднамеренно позволяет злоумышленникам внедрять произвольный HTML или JavaScript через пользовательский контент. С её помощью атакующий может отслеживать и подменять действия пользователей и систематически похищать их данные — до тех пор, пока уязвимость не будет устранена. XSS исторически крайне сложен в предотвращении и на протяжении почти десяти лет стабильно входит в тройку самых опасных веб-уязвимостей (CWE-79).

Mozilla участвовала в борьбе с XSS с самого начала: ещё в 2009 году Firefox инициировал разработку стандарта Content-Security-Policy (CSP). CSP позволяет сайтам ограничивать, какие ресурсы (скрипты, стили, изображения и т. д.) браузер вправе загружать и исполнять, формируя надёжный рубеж обороны. Тем не менее, несмотря на постоянные улучшения, CSP так и не получил широкого распространения: его внедрение требует существенных архитектурных изменений и регулярного внимания специалистов по безопасности.

Sanitizer API призван заполнить этот пробел, предоставляя стандартизированный механизм преобразования вредоносного HTML в безопасный. Метод setHTML() встраивает санитизацию непосредственно в процесс вставки HTML, обеспечивая защиту на уровне умолчаний. Пример очистки небезопасного HTML:

document.body.setHTML(`<h1>Hello my name is <img src="x" 
onclick="alert('XSS')">`);

При такой санитизации элемент <h1> будет сохранён, а элемент <img> вместе с атрибутом onclick — удалён, что устраняет XSS-атаку. В результате останется следующий безопасный HTML:

<h1>Hello my name is</h1>

Разработчики могут усилить защиту от XSS с минимальными изменениями в коде, заменив подверженные ошибкам присваивания innerHTML на вызовы setHTML(). Если настройки по умолчанию окажутся слишком строгими или, напротив, недостаточно строгими для конкретного случая, можно передать пользовательскую конфигурацию, определяющую, какие элементы и атрибуты следует сохранить или удалить. Для экспериментов до внедрения API на продакшн-сайте рекомендуется воспользоваться песочницей Sanitizer API.

Для ещё более надёжной защиты Sanitizer API можно сочетать с Trusted Types, которые централизуют контроль над разбором и вставкой HTML. После перехода на setHTML() включить принудительное применение Trusted Types становится проще — зачастую без необходимости создавать сложные пользовательские политики. Строгая политика может разрешать setHTML(), блокируя остальные небезопасные способы вставки HTML, что помогает предотвращать регрессии в безопасности.

Sanitizer API упрощает замену присваиваний innerHTML на вызовы setHTML() в существующем коде, устанавливая новый безопасный стандарт и защищая пользователей от XSS-атак. Firefox 148 поддерживает как Sanitizer API, так и Trusted Types. Принятие этих стандартов позволит любому разработчику предотвращать XSS без выделенной команды безопасности и масштабных архитектурных изменений.

Наверняка вы сто раз видели кнопку Скопировать, например, возле блоков кода в любимой нейронке, чтобы быстро их скопипастить. Давайте разберемся, как самостоятельно сделать такую же (кнопку, а не нейронку).