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

В Chrome 144 добавили тег <geolocation>, который представляет собой кнопку, вокруг которой построен API управления местоположением пользователя.

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

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

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

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

<geolocation id="geo" autolocate watch></geolocation>

geo.addEventListener('location', () => {
  // Изменились данные о местоположении
});

geo.addEventListener('promptaction', () => {
  // Пользователь принял или отклонил предупреждение
});

geo.addEventListener('promptdismiss', () => {
  // Пользователь закрыл предупреждение
});

geo.addEventListener('validationstatuschange', () => {
  // Данные о разрешении пользователя изменились
});

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

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

Думаю все знают, что при помощи комбинации клавиш
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