Стилизуем найденный текст 🔥

Думаю все знают, что при помощи комбинации клавиш
Ctrl + F можно осуществлять поиск по странице в браузере. Найденный текст выделяется цветом, определённым браузером по-умолчанию. Но что делать, если мы хотим его переопределить?

Chrome в 144 версии добавил такую возможность:

// Все найденные совпадения
::search-text {
  background: blue;
}

// Текущее совпадение
::search-text:current {
  background: red;
  font-weight: bold;
}

Псевдоэлемент ::search-text можно также вешать на другие селекторы, чтобы сузить конечную выборку.

Например:

div::search-text { }

Спецификация помимо :current зарезервировала также :past и :future для будущих доработок, но пока что они нигде не реализованы. Они предполагают стилизацию всех элементов до и после :current, соответственно.

🔗 Ссылка на спецификацию
⚙️ Поддерживается пока что только в Chrome

Меняем тип каретки в поле ввода 🔥

Что ни день, то революция в вебе!

Chrome в 144 версии выпустил новое свойство — caret-shape, которое позволяет менять тип каретки в редактируемых элементах.

Возможные значения:
auto (по-умолчанию) — стандартное значение зависящее от платформы
bar — вертикальная полоска
block — прямоугольник
underscore — горизонтальная полоска снизу

ℹ️ Напомню, что это не первое свойство из данной серии. Ранее уже были представлены caret-color и caret-animation, которые позволяют менять цвет и анимацию каретки, соответственно.

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

В Chrome завезли Temporal API 🔥

После Firefox данный API появился и в Chrome, на очереди остаётся лишь Safari.

Если вы не в курсе, то Temporal пришёл на смену стандартному Date для работы с датами, временем и всем связанным с этим. Он решает множество старых проблем, даёт более удобный API, а также открывает новые и недоступные ранее возможности.

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

Возможно вы задумались:
— А может ли Temporal заменить библиотеки для работы с датами, вроде dayjs?

Ответ:
— И да, и нет

В простых кейсах, как и раньше с Date, вполне можно обойтись и браузерными возможностями, но в сложных вам по-прежнему придётся писать в разы кода без использования библиотек.

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

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

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

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

Огромное всем спасибо!

Вышла 25 версия Node.js ⚡️

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

Из интересного:
🐥 Обновили движок V8 до версии 14.1, что, к примеру, дало прирост к скорости выполнения JSON.stringify на 30-50%

🐥 localStorage и sessionStorage теперь доступны "из коробки"

🐥 Добавлен ErrorEvent по аналогии с браузером:

window.addEventListener('error', (event) => {
  // ...
});

🐥 Uint8Array получил браузерные методы декодирования в base64 и hex:

const data = new Uint8Array([72, 101, 108, 108, 111]);

const base64 = data.toBase64();
const hex = data.toHex();

🐥 TypeScript выходит из экспериментального режима и становится общедоступным.

ℹ️ Напомню, что в Node.js теперь не нужен build этап для работы TypeScript, он самостоятельно удаляется при запуске скрипта, но для запуска проверок по-прежнему нужен tsc.

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

Забытые и неизведанные атрибуты формы

Сегодня сделал для себя внезапное открытие.

Оказывается, у кнопки существует атрибут formmethod, который позволяет переопределить используемый метод.

К примеру, в следующем коде первая кнопка заменяет POST на GET запрос, а вторая оставляет всё как есть:

<form method="post" action="/search">
  <button formmethod="get">Отправить форму как GET</button>
  <button>Отправить форму как POST</button>
</form>

ℹ️ Напомню, что в HTML форма поддерживает только POST и GET запросы. Никакие другие методы (DELETE, например) работать не будут.

ℹ️ Также важно понимать, что данный атрибут предназначен только для submit-кнопок. То есть, если в ней будет указано type="button", то работать не будет. Если не указать атрибут type, то он по-умолчанию будет submit.

Также method и formmethod имеют значение dialog, которое вместо отправки формы даёт возможность управлять диалоговым окном:

<dialog id="confirm">
  <form method="dialog">
    <p>Удалить файл?</p>

    <button value="cancel">Отмена</button>
    <button value="confirm">Удалить</button>
  </form>
</dialog>

const dialog = document.getElementById('confirm');

dialog.showModal();

dialog.addEventListener('close', () => {
  console.log(dialog.returnValue); // cancel или confirm
});

Сравнение возможностей AI Coding инструментов

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

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

🔗 Ссылка

Chrome Dev Tools внутри Chrome Dev Tools 🤯

Возможно вы не знали, но Chrome Dev Tools тоже рендерятся на HTML и CSS и их дерево DOM можно также инспектировать другими Chrome Dev Tools.

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

Windows: Ctrl + Shift + I
MacOS: Cmd + Opt + I

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

Мощный анализатор CSS стилей

Нашёл крутой инструмент для работы с CSS в проекте

Он даёт подробную информацию о:
— Размерах файлов
— Покрытии Atomic свойствами
— Количестве свойств, классов и прочего
— Подсчитывает специфичность селекторов
— Составляет палитру всех цветов
— Кучу всего по шрифтам, отступам, скруглениям, теням и прочему

В Chrome Dev Tools во вкладке CSS Overview есть похожий функционал, но он пока что не настолько масштабный и находится в экспериментальном режиме.

🔗 Ссылка

Вышел новый TypeScript 🔥

На днях опубликовали бета версию TypeScript 6, это переходная версия перед крупным портированием ядра компилятора на Go.

Из нового:
1) Добавлены типы ECMAScript 2025, Temporal API, новых методов Map и WeakMap
2) dom.iterable и dom.asynciterable перенесены в dom
3) Новый флаг --stableTypeOrdering
4) Уменьшена контекстная зависимость в функциях без this
5) Добавлена поддержка subpath imports вида #/
6) Cтала доступна комбинация из --moduleResolution bundler и --module commonjs

Изменились значения tsconfig по-умолчанию:
1) strict: true
2) module: esnext
3) target: самая актуальная ECMAScript версия (на данный момент es2025)
4) noUncheckedSideEffectImports: true
5) libReplacement: false
6) compilerOptions.rootDir: "."
7) compilerOptions.types: []

Устарело:
1) target: es5
2) --downlevelIteration
3) --moduleResolution
4) module: amd, umd, и systemjs
5) --baseUrl
6) --moduleResolution classic
7) --esModuleInterop false и --allowSyntheticDefaultImports false
8) --alwaysStrict false
9) --outFile
10) Старый синтаксис для объявления неймспейсов
11) Ключевое слово asserts в импортах
12) Директива no-default-lib

🔗 Ссылка на подробный обзор

Менторство

Приветствую всех, дорогие друзья!

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

Я так подумал, а ведь у меня есть:
1) Свободное время на выходных
2) Огромный список контактов HR (больше 300 человек), который накопился за всё время работы
3) Огромная база вопросов и задач с собеседований (с ответами), которые я старательно всегда выписывал для собственных нужд

Всем этим я могу поделиться с вами

Чем конкретно могу помочь:
1) Подготовка резюме
2) Моковые собеседования
3) Составление индивидуального плана развития
4) Консультации по вопросам поиска работы, состоянии рынка и любым другим, связанным с Frontend и IT вцелом
5) Помощь в развитии

Данный формат будет полезен как для разработчиков уровня Junior / Middle, так и для опытных — Senior / Lead

Думаю можно было бы сделать это ввиде ежемесячной подписки на Boosty или другой платформе

Хотелось бы понять сколько всего желающих. Поставьте, пожалуйста, эмодзи 🐳 на этот пост, если хотели бы попробовать.

Возможности ES модулей

Не все знают, но с приходом ES Modules нам стал доступен импорт удалённых файлов:

<script type="module">
  import { capitalize } from "https://esm.sh/lodash-es";
  import { format } from "https://esm.sh/date-fns";
  import axios from "https://esm.sh/axios";

  console.log(capitalize('hello world')); // "Hello world"
</script>

Также мы можем использовать import maps для создания алиасов:

<script type="importmap">
{
  "imports": {
    "lodash": "https://esm.sh/lodash-es",
    "date-fns": "https://esm.sh/date-fns",
    "axios": "https://esm.sh/axios"
  }
}
</script>

<script type="module">
  import { capitalize } from "lodash";
  import { format } from "date-fns";
  import axios from "axios";

  console.log(capitalize('hello world')); // "Hello world"
</script>

И динамические импорты:

<script type="module">
  async function loadModule() {
    const { capitalize } = await import('https://esm.sh/lodash-es');
    console.log(capitalize('hello world')); // "Hello world"
  }

  loadModule();
</script>

⚙️ Поддержка браузерами: ES modules, import maps, динамические импорты

Подписка на Boosty ✌🏻

Судя по реакциям под предыдущим постом, желающих обучиться фронту, поднять свою квалификацию или найти работу собралось достаточное количество, поэтому я запускаю подписку на Boosty.

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

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

База вопросов и задач для подготовки к собеседованиям сейчас находится в разработке, поэтому даже если закончится подписка, вы не потеряете к ней доступ. Срок начнёт действовать только тогда, когда я официально запущу её.

Вопрос с контактами HR нужно обсудить вместе с вами. Закон о персональных данных запрещает их передачу кому-либо без официального разрешения. Пока думаю, что можно сделать с этим. Возможно, у вас есть предложения о том, как это можно было бы организовать.

Помимо того, о чём писал ранее, добавил также и другие бонусы подписки. К примеру, доступ к закрытым постам и еженедельным общим встречам. С полным списком можно ознакомиться по ссылке ниже.

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

Также не могу не воспользоваться случаем и не отблагодарить @maunsh за поддержку канала. 20 февраля пришло от него аж 100 звёзд! Это новый рекорд! Спасибо большущее ❤️

🔗 Ссылка на Boosty

Гибкое выравнивание текста по ширине 📄

Chrome в 145 версии добавил новое свойство — text-justify, которое вместе с text-align: justify позволяет управлять типами выравнивания текста по ширине.

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

⚙️ Поддерживается в Chrome и Firefox

Отложенная отрисовка Canvas 🎨

Сегодня, к своему удивлению, узнал, что оказывается canvas можно отрисовывать в отдельном потоке при помощи OffscreenCanvas API.

Проблема стандартного canvas заключается в том, что он не работает в web worker'ах и при многочисленных вычислениях может забивать единственный поток JS, что будет вызывать провисания в приложении.

OffscreenCanvas API решает эту проблему, т.к. он существует отдельно от DOM.

📁 main.js

const canvas = document.getElementById('canvas');

const worker = new Worker('./worker.js', { type: 'module' });

const offscreen = canvas.transferControlToOffscreen();

worker.postMessage({ canvas: offscreen }, [offscreen]);

📁 worker.js

self.onmessage = (event) => {
  const canvas = event.data.canvas;
  const ctx = canvas.getContext('2d');

  ctx.fillStyle = 'royalblue';
  ctx.fillRect(50, 25, 200, 100);
};

В примере выше transferControlToOffscreen() создаёт OffscreenCanvas, связанный с теми же пикселями, что и основной canvas, а затем при помощи postMessage() передаёт управление в web worker. Этот web worker изменяет внутренний pixel buffer и, наконец, браузер отрисовывает все необходимые изменения.

Также для отрисовки мы можем напрямую использовать конструктор OffscreenCanvas:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const offscreen = new OffscreenCanvas(300, 150);
const offCtx = offscreen.getContext('2d');

offCtx.fillStyle = 'royalblue';
offCtx.fillRect(50, 25, 200, 100);

ctx.drawImage(offscreen, 0, 0);

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