Скидка на подписку Boosty 🤟🏻

Судя по реакциям под предыдущим постом было много желающих, поэтому в этом месяце я решил сделать скидку и по самой дешёвой подписке дать сразу 4 часа на личные встречи (~4 моковых собеседования или ~6 встреч по прочим вопросам).

Количество ограничено, больше трёх человек не смогу набрать. Тем, кто уже оформил подписку, время также докину, чтобы было честно.

Если вы новенький на канале, то напомню, что я помогаю с:
1) Подготовкой к собеседованиям (провожу сам)
2) Карьерным ростом
3) Обучением с нуля
4) Генерацией технических собеседований
5) Составлением резюме
6) Составлением легенды
7) И многим другим

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

🔗 Ссылка на Boosty

Новый meta тег

Chrome в 146 версии добавил

<meta name="text-scale" content="scale" />

Он позволяет указать браузеру, что при расчёте размеров на странице, он должен учитывать системный размер текста пользователя и автоматически в соответствии с этим увеличивать или уменьшать корневой font-size. То есть, если пользователь в настройках браузера или устройства установил шрифт в 30 пикселей, то и font-size для <html> элемента на странице в обязательном порядке должен стать 30px.

Проблема заключается в том, что даже если вы пользуетесь rem и em единицами измерения, современные мобильные браузеры могут самостоятельно решить какого размера будет итоговый шрифт и, к примеру, пользователь с проблемами со зрением, включивший увеличенный шрифт в настройках своего устройства, может получить такой же мелкий текст, как и обычный пользователь.

🔗 Видео обзор от канала HTMHell
⚙️ Поддержка браузерами (пока таблицу на caniuse не завезли)

Итераторам добавлен новый метод

Chrome в 146 версии представил Iterator.concat, с помощью которого теперь можно объединять несколько итераторов в один по аналогии с массивами.

Кстати, возможно вы не знали, но при помощи генераторов и итераторов мы можем строить "ленивые цепочки" операций над массивами.

Представим следующий код:

Array.from({ length: 10 }, (_, i) => i)  
  .map(a => a + 10)                      
  .filter(a => a % 2 === 0)             
  .slice(0, 2)                          
  .forEach(a => console.log(a));        

На каждом этапе мы снова и снова проходимся по одним и тем же элементам, а также вновь создаём новые и новые массивы на основе предыдущих, хотя по итогу нам понадобятся только первые 2 элемента. Оптимизация страдает, не так ли?

При помощи генераторов и итераторов мы можем реализовать что-то вроде этого:

pipe(
  range(10),
  map((a) => a + 10),
  filter((a) => a % 2 === 0),
  take(2),
  each((a) => console.log(a)),
);

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

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

Modern CSS

Нашёл интересный сайт с наглядным представлением того, как HTML и CSS уже не нужно писать в 2026 году.

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

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

Basewatch

Инструмент предоставляет возможность подписаться на тот или иной браузерный API и получить push уведомление или сообщение на почту, когда его поддержка переступит определённый процент.

В поиске можно найти любую фичу и получить информацию о её поддержке.

Данные собираются из:
1) CanIUse
2) Web Platform Baseline
3) MDN Browser Compat Data
4) Chrome Status

🔗 Ссылка на инструмент

Новая цветовая функция

Chrome в 147 версии добавил функцию contrast-color(), которая возвращает контрастный цвет переданному цветовому значению.

Всего возвращаемых цвета два: чёрный и белый.

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

.button {
  background: var(--button-color);
  color: contrast-color(var(--button-color));
}

Ранее подобные манипуляции нам были доступны при помощи свойств filter и mix-blend-mode, но их возможности были сильно ограничены.

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

Квадратный web уже в прошлом

Chrome в 147 версии добавил свойство border-shape (не путать с corner-shape, о котором писал ранее). Оно позволяет задать рамку элементу, не опираясь на 4 угла прямоугольника. Можно сделать хоть треугольник, хоть звезду, хоть облачко. Что душе угодно.

Например, нарисуем пятиконечную звезду:

.star {
  border: 15px solid #8ab4ff;
  border-shape: path("M 50 5 L 61 35 L 95 35 L 67 57 L 78 90 L 50 70 L 22 90 L 33 57 L 5 35 L 39 35 Z");
 }

Возможные значения почти все те же, что мы ранее использовали с clip-path (circle(), ellipse(), inset() и другие), но, в отличие от clip-path, мы не обрезаем элемент по форме, а самостоятельно рисуем ему рамку.

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

border-shape: circle(50%) padding-box;

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

border-shape: inset(10%) circle(50%); 

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

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

Революция в мире псевдоэлементов

Chrome в 147 версии завёз нам CSSPseudoElement, а это значит, что теперь мы можем обращаться к псевдоэлементам программно через JS.

Ранее мы не могли:
1) Напрямую получить / перезаписать стили псевдоэлемента
2) Отследить его существование или изменение
3) Использовать Web Animations
4) Получить getBoundingClientRect()
5) И многое другое

Теперь это делается парой строчек:

const div = document.querySelector('div');
const before = div.pseudo('::before');

console.log(before.type);    // "::before"
console.log(before.element);  // исходный <div>
console.log(before.parent);   // непосредственный родитель

Также теперь появилась возможность отслеживать был ли клик или другое событие произведено по псевдоэлементу, наравне с привычным event.target:

box.addEventListener('click', (event) => {
  console.log(event.target);        // <div class="box">
  console.log(event.pseudoTarget);  // CSSPseudoElement или null
});

На данный поддерживается 3 типа событий:
1) UIEvent
2) AnimationEvent
3) TransitionEvent

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

Точные вычисления

Chrome в 147 версии завезли новую функцию Math.preсise(), которая решает проблему сложения больших чисел.

Раньше:

const sum = 1e20 + 0.1 - 1e20; // 0

Сейчас:

const sum = Math.sumPrecise([1e20, 0.1, -1e20]); 
// 0.1

Но стоит упомянуть, что он по-прежнему не решает проблему сложения чисел с плавающей точкой:

console.log(Math.sumPrecise([0.1, 0.2])); 
// 0.30000000000000004

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

Забытые и неизведанные методы JSON

Только сегодня узнал, что оказывается существуют такие методы как JSON.rawJSON() и JSON.isRawJSON()

Первый позволяет пометить JSON как "неэкранируемый" и при JSON.stringify() вставить его как есть, а второй — проверить, была ли ранее строка пропущена через JSON.rawJSON().

Без JSON.rawJSON():

JSON.stringify({ data: '{"a":1}' });

// '{"data":"{\"a\":1}"}'

С ним:

const raw = JSON.rawJSON('{"a":1}');

JSON.stringify({ data: raw });

// '{"data":{"a":1}}'

⚙️ Поддержка браузерами (JSON.rawJSON(), JSON.isRawJSON())

Git на стероидах

Скотт Чакон, сооснователь Github и автор той самой книги Pro Git, привлёк $17млн на новый клиент Git (GitButler), который учитывает все современные потребности разработчиков при работе с кодом.

Это не только визуальный интерфейс, как у GitLens, но и консольная обёртка поверх оригинального Git.

Главные фишки на данный момент:
1) Теперь не обязательно делать stash незакомиченных изменений, чтобы переключиться на другую ветку, можно вести сразу несколько веток параллельно.
2) Автоматическая синхронизация веток. При влитии коммитов в первую ветку, они автоматически попадут и во вторую, но встроятся не в конец, как при обычном merge, а пойдут именно туда, где они и должны быть.
3) Автоматическая генерация названия и описания коммита.
4) Автоматическое создание "снимков" проекта. Теперь вы просто не сможете случайно удалить все свои изменения без возможности их вернуть. Перед любыми важными действиями автоматически будет создан "снимок" проекта, к которому можно будет откатится позже.
5) Упрощённое удаление, редактирование, перемещение и разделение коммитов
6) Доступ к pull request'ам напрямую из клиента

🔗 Ссылка на инструмент

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

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

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-проект
— Пробовать выходить на зарубежные рынки
— И многое-многое другое...

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