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

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

Телеграм:
⭐️ @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);

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

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

Этот месяц был рекордным на донаты, спасибо всем огромное за вашу поддержку! 🤗

У меня грандиозные планы на развитие проекта и каждый такой шаг с вашей стороны сильно приближает нас к их осуществлению!

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

Телеграм:
🤩 @maunsh 102 звёздочки
⭐️ @EmberIsReal 10 звёздочек
⭐️ @donaks 3 звёздочки
⭐️ @Roody_Roodpecker 1 звёздочка

Сегодня в 18:00 мск пройдёт первая встреча с подписчиками Boosty, жду с нетерпением ваших вопросов!

Новые мультиколоночные CSS свойства 🔥

Chrome в 145 версии добавил column-height и column-wrap, расширив тем самым возможности мультиколоночной вёрстки.

column-height задаёт высоту каждой колонки текста, а column-wrap указывает, будет ли происходить перенос текста в колонки ниже при переполнении этой высоты.

Значения column-height:
1) auto (по-умолчанию) — высота рассчитывается автоматически на основе других свойств
2) Численные значения от 0 до бесконечности, например 100px

Значения column-wrap:
1) auto (по-умолчанию) — если column-height не установлен в auto, то также как и с wrap, иначе nowrap
2) wrap — перенос происходит
3) nowrap — перенос не происходит

⚙️ Поддержка браузерами (column-height, column-wrap)