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

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

Boosty:
🔥 @EmberIsReal - бронзовая подписка

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

Новые ключевые слова для text-indent

Как вы помните, данное свойство управляет отображением текстовых абзацев. Ранее ему можно было задать только величину отступа для них, но с недавнего времени в Baseline также вошли ключевые слова hanging и each-line. Они позволяют указать тип этого самого абзаца.

Примеры:
1) text-indent: 3em each-line — отступ в 3em, но помимо абзацев для блоков текста, появляются и абзацы для текста, который был принудительно нами перенесён на следующую строку. Например, при помощи <br>.
2) text-indent: 3em hanging — здесь уже вручную перенесённый текст не учитывается, но вместо первой строки сдвигается весь остальной текст блока.
3) text-indent: 3em each-line hanging — сдвигается весь текст, кроме первой строки, но также учитываются и абзацы с принудительным переносом.

⚙️ Поддержка браузерами (each-line, hanging)

Старший брат Web Socket'ов

В марте 2026 года Web Transport API стал Baseline, а значит теперь его можно спокойно добавлять к себе в проект.

Если пропустили эту фичу, то она позволяет аналогично Web Socket'ам отправлять запросы сразу в обе стороны (от клиента к серверу и от сервера клиенту), но работает гораздо быстрее за счёт того, что построена поверх HTTP/3 и может выполняться в несколько потоков. Прошу обратить внимание, технология под капотом использует именно HTTP протокол, не WS.

Данные отправляются через datagram'ы или через stream'ы. Datagram'ы дают максимальную скорость, но не гарантируют доставку потерянных пакетов. Stream'ы же, наоборот, обеспечивают надёжную передачу, но работают медленнее (при этом они всё равно быстрее стандартных Web Socket'ов).

Если нам не нужна вся мощь данного API, мы можем создать однонаправленный поток данных по аналогии с Server Sent Events.

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

Вышла 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 пока не добавили