Вышла 26 версия Node.js

Из нового:
1) Temporal API вышел из экспериментального режима
2) Добавлены методы:
— Map.prototype.getOrInsert()
— Map.prototype.getOrInsertComputed()
— Iterator.concat()
3) Добавлена поддержка raw key formats в KeyObject API

Удалено:
1) http.Server.prototype.writeHeader()
2) _stream_wrap
3) _stream_readable
4) _stream_writable
5) _stream_duplex
6) _stream_transform
7) _stream_passthrough
3) --experimental-transform-types

Помечено как устаревшее:
1) module.register()

🔗 Список всех изменений

Контейнерные запросы стали проще

Теперь необязательно использовать container-type, можно оставить только container-name и ошибки не будет:

.card-list {
  container-name: cards;
  container-type: inline-size; /* Можно удалить */
}

@container cards (width > 600px) {
  .card {
    flex-direction: row;
  }
}

⚙️ Поддержка браузерами средняя

Чат взаимопомощи потерявшим и ищущим работу

Уже ни для кого ни секрет, что 2026 год для рынка IT в России стал переломным. Массовые сокращения, урезания бюджетов и вытекающие из этого проблемы с наймом.

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

Большинство сейчас пытается выжить в одиночку, но, как мне кажется, сделать это будет гораздо сложнее, нежели объединившись и помогая друг другу в этот сложный момент.

Именно поэтому я решил создать чат, в котором вы сможете:
— Помогать друг другу с собеседованиями и резюме
— Находить заказы и совместно выполнять их
— Обсуждать рынок и происходящее
— Нетворкаться и делиться рефералками
— Собирать команду в стартап или pet-проект
— Пробовать выходить на зарубежные рынки
— И многое-многое другое...

🔗 Ссылка на чат

Проапргрейдили at-правило supports

В Chrome 148 версии завезли возможность проверять не только свойства и значения, но и другие at-правила:

@supports at-rule(@starting-style) {
  @starting-style {
    .toast {
      opacity: 0;
      transform: translateY(8px);
    }
  }
}

⚙️ Таблицу на caniuse ещё не завезли

Новое значение для отката стилей

Chrome в 148 версии дополнил старый список значением revert-rule. Оно, как вы уже наверное догадываетесь, позволяет откатить любое свойство до предыдущего значения в каскаде:

.card {
  padding: 24px;
}

.card.compact {
  padding: 8px;
}

.card.compact.reset {
  padding: revert-rule; // 24px
}

⚙️ Поддержка браузерами средняя

Новые элементы нативного Lazy Loading

Ранее нам были доступны <img> и <iframe>, но со 148 версии Chrome атрибут loading="lazy" теперь может быть передан и для элементов <audio> и <video>

⚙️ Поддерживается пока что только в Chrome

Прокачали подчёркивание текста

В Chrome 148 версии свойству text-decoration-skip-ink добавили значение all. Если ещё не сталкивались, то оно управляет тем, будет ли полоса подчёркивания проходить через символы насквозь или будут использоваться небольшие промежутки.

Значения:
auto (по-умолчанию) — браузер самостоятельно решает (для латиницы обычно появляются промежутки, а для иероглифов нет)
none — промежутки не добавляются, подчёркивание идёт сплошной полосой через весь текст
all — промежутки добавляются для любых языков

⚙️ Поддержка браузерами широкая

HTML в Canvas

В Chrome 148 версии добавили возможность рисовать Canvas при помощи обыкновенного HTML.

Для того, чтобы это работало, необходимо <canvas> элементу передать специальный атрибут layoutsubtree и положить внутрь него любой HTML код.

Для перерисовки всех состояний элемента, скажем :hover эффекта или выделения текста, используются следующие методы:
1) 2D API — ctx.drawElementImage(element)
2) WebGL — gl.texElementImage2D(element)
3) WebGPU — copyElementImageToTexture(...)

Для того, чтобы элемент всегда совпадал с фактическим расположением отрисованной картинки (на видео показал разницу), его сдвигают при помощи transform, полученным из одного из перечисленных выше методов.

Всё это оборачивается в обработчик paint, который реагирует на изменения внутренних DOM элементов и вызывает переданный колбек.

<canvas id="canvas" layoutsubtree>
  <input id="input-element" type="text">
</canvas>

const ctx = document.getElementById('canvas').getContext('2d');
const inputElement = document.getElementById('input-element');
const canvas = document.getElementById('canvas');

canvas.addEventListener('paint', () => {
  ctx.reset();

  const transform = ctx.drawElementImage(inputElement, 50, 50);

  inputElement.style.transform = transform.toString();
});

Также при помощи метода canvas.requestPaint(), мы можем при надобности принудительно вызвать событие paint.

⚙️ Таблицу на caniuse ещё не завезли

Топ донатов месяца

Месяц подошёл к концу, поэтому хочу поблагодарить всех, кто поддержал канал в этот раз!

Boosty:
❗️Подписки временно решил приостановить

Телеграм:
⭐️ @maunsh 4 звёздочки

Новый HTML элемент 🔥

В Chrome 148 версии добавили тег <install>, который представляет собой кнопку, по нажатию на которую, браузер предложит скачать ваше PWA приложение на устройство.

<install></install>

Подобно ранее представленному <geolocation>, внешний вид кнопки может быть изменён стилями, а вот текст и другое содержимое внутри неё изменить уже не получится (они устанавливаются браузером автоматически). Также не получится её скрыть, сделать прозрачной или как-то по-другому "заставить" пользователя нажать на неё неосознанно. Она просто перестанет работать.

Если необходимо установить стороннее PWA приложение, то можно указать его URL в атрибуте installurl:

<install installurl="https://awesome-app.com/">
</install>

Данный элемент генерирует 3 типа событий:
1) promptaction — пользователь установил приложение
2) promptdismiss — пользователь отменил установку
3) validationstatuschanged — кнопка стала доступна / недоступна по причине перекрытия другим элементом или по какой-то другой

installButton.addEventListener('promptaction', () => {
  console.log('Приложение установлено');
});

⚙️ Таблицу на caniuse пока не добавили

Решена проблема со сбросом кеша 🔥

Ранее, если вы передавали в параметре URL обновлённое значение или меняли порядок нескольких параметров, то браузер считал, что старый HTTP-кеш этой страницы переиспользовать уже нельзя и создавал новый, в результате чего все ресурсы повторно скачивались с сервера.

К примеру, у нас есть параметр utm_source, который позволяет отследить, с какого ресурса к нам пришёл пользователь. Он является всего лишь информационным маркером для нашей аналитики и никак не влияет на отображаемый контент, но из-за него кеширование на странице работать не будет:

https://mysite.com/storages/732?utm_source=chatgpt.com
https://mysite.com/storages/732?utm_source=telegram
https://mysite.com/storages/732?utm_source=google

В 148 версии Chrome добавили новый заголовок No-Vary-Search, который позволяет задать исключения из этих правил:

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
No-Vary-Search: params=("utm_source" "utm_medium" "utm_campaign")
Cache-Control: max-age=300

Возможные значения:
1) key-order — изменение порядка параметров URL не влияет на кеш
2) params=("utm_source" "utm_campaign") — изменение значений указанных параметров не влияет на кеш
3) params — изменение значений любых параметров не влияет на кеш
4) except=("id" "utm_source") — изменение всех значений, кроме конкретных параметров не влияет на кеш

Через запятую можно указывать сразу несколько подобных конструкций:

No-Vary-Search: key-order, params, except=("id")

⚙️ Поддержка браузерами пока что небольшая

Сервис поиска альтернативных библиотек

Позволяет найти аналоги устаревшим, плохо оптимизированным или небезопасным npm-пакетам. Помимо стандартного поиска, есть сканер package.json, который указывает на плохие зависимости в проекте.

🔗 Ссылка на сервис

Lazy loading HTML фрагментов 🤯

Представим, что наш сервер настроен так, что HTML он нам отдаёт не целиком, а небольшими частями. Тогда кусочки, которые пришли раньше, будут анализироваться и отрисовываться сразу, не дожидаясь оставшейся части приложения. Но у нас вполне может возникнуть ситуация, когда какие-то из них мы не готовы отдать сразу, т.к. предварительно на сервере нужно произвести сложные вычисления. В таком случае оставшаяся загрузка кода может быть заблокирована до полной загрузки отдельного чанка.

Для решения этой проблемы Chrome в 148 версии ввёл специальный синтаксис, который позволяет указать место в коде, которое будет пропущено, но может быть заполнено в будущем, если вернётся <template> с таким же идентификатором:

<div>
  <?marker name="placeholder">
</div>

...

<template for="placeholder">
  Какой-то <em>HTML код</em>
</template>

Также существует дополнительный синтаксис, который позволяет на время загрузки подставить какой-то лоадер, чтобы не показывать пользователю пустой экран:

<div>
  <?start name="placeholder">
    Загрузка...
  <?end>
</div>

...

<template for="placeholder">
  Какой-то <em>HTML код</em>
</template>

Если HTML уже полностью подгрузился и мы хотим что-то подставить уже впоследствии, то мы можем воспользоваться новыми стриминговыми методами JS (в следующем посте расскажу о них подробнее):

const response = await fetch('/dashboard');

await document.body.streamHTMLUnsafe(
  response.body
);

🔗 Ссылка на полифил
⚙️ Таблицу на caniuse пока не добавили

Новые методы для работы с HTML 🔥

Предыдущие методы вроде innerHTML, insertAdjacentHTML работали по-разному, были небезопасными, а также имели неявные названия.

Chrome в 148 версии решил это исправить, добавив целый ряд новых методов:
🐥 setHTML(html, options) — заменяет внутреннее содержимое элемента на новый HTML
🐥 replaceWithHTML(html, options) — заменяет сам элемент целиком на переданный HTML
🐥 beforeHTML(html, options) — вставляет HTML перед элементом
🐥 afterHTML(html, options) — вставляет HTML после элемента
🐥 prependHTML(html, options) — вставляет HTML внутрь элемента в качестве первого дочернего узла
🐥 appendHTML(html, options) — вставляет HTML внутрь элемента в качестве последнего дочернего узла

Каждый из них внутренне прогоняет код через Sanitizer API, удаляются все вложенные скрипты и прочий потенциально вредоносный код.

Также у всех этих методов стриминговый и "небезопасный" аналоги или и то и другое вместе:
🦆 streamHTML(options)
🦆 setHTMLUnsafe(html, options)
🦆 streamHTMLUnsafe(options)
🦆 и так далее...

Небезопасные методы, как вы уже наверное догадываетесь, не имеют встроенного Sanitizer API (его нужно писать самостоятельно), а стриминговые, если у вас бекенд присылает HTML кусочками, позволяют также кусочками его и отрисовывать:

const response = await fetch('/dashboard');

await document.body.streamHTMLUnsafe(
  response.body
);

⚙️ Поддержка браузерами (пока таблицы есть только для setHTML и setHTMLUnsafe)

Исправлена древняя проблема разделения элементов 🔥

Ранее, чтобы отделить grid или flex элементы друг от друга рамкой, приходилось использовать стандартный border и это было дико неудобно.

Chrome в 149 версии решил исправить это и расширил контекст, в котором можно применять свойства семейства rule:

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

.container {
  display: flex;
  gap: 10px;
  column-rule-width: 2px;
  column-rule-style: dashed;
  column-rule-color: #000;
}

Чтобы не писать 3 отдельных свойства, их можно объединить под единым column-rule или row-rule:

row-rule: 2px dashed #000;

Можно указывать сразу несколько значений через запятую (тогда они в таком же порядке и будут применяться):

row-rule-width: 1px, 2px, 3px;

Первому промежутку будет назначен 1px, второму 2px, третьему 3px, четвёртому снова 1px и так далее.

Также, чтобы несколько раз не прописывать одно и то же значение, была добавлена специальная функция, которая первым аргументом принимает число повторений, а вторым само значение:

row-rule-width: repeat(3, 1px);
/* Аналогично */
row-rule-width: 1px 1px 1px;

⚙️ Таблицу на caniuse пока не добавили