Вышла 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)

Английский для разработчика

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

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

Итак, как научиться?

1) В первый год необходимо набрать базовый словарный запас из 2000-3000 слов. Делать это гораздо проще на сервисах вроде Duolingo. Слова можно записывать в физический словарь или использовать приложения наподобие Anki. В первом случае рекомендую слова помечать цветными звёздочками (или как удобнее), чтобы каждый раз можно было чередовать их повторение. Сначала чётные, затем нечётные и куча других вариаций. Наш мозг — это очень ленивая штука и в определённый момент ты поймёшь, что по порядку слова в столбик ты помнишь, а вот в разброс не получается. Если выберешь вариант с приложением, то рекомендую заранее разобраться как он работает и всё настроить так, чтобы в будущем случайно не перетереть всю базу данных со словами. Тут придётся выбирать между удобством и риском потерять всё разом по случайности. Также рекомендую заранее позаботиться о транскрипции (записывай её рядом с каждым словом) и правильным произношением звуков. Меня до сих пор "коробит" от того, что даже переводчики с многолетним опытом, могут говорить с жёстким русским акцентом и не знают правильных ударений в словах.

2) После того, как переступишь через отметку в 2000-3000 слов, приступай к просмотру видео (любых, желательно современных) и прочтению книг. Все незнакомые слова выписывай и заучивай. Когда начнёшь чувствовать себя уверенно, можешь пробовать ставить видео на ускоренный режим и также пытаться понять о чём идёт речь. Но! Самое главное! Не включай субтитры, ты должен всё это пропускать через себя, иначе толку не будет. Параллельно, с базовым набором слов, можешь пробовать поднимать свой разговорный. В discord и других сервисах можно найти собеседников и пытаться завести с ними вести диалог. Я, например, начинал с индусов. Запускался в формате чат-рулетки или как-то ещё и общался. Но вообще это очень муторно. Каждый раз приходится представляться и отвечать на одни и те же вопросы... Откуда ты? Как тебя зовут? И так далее. Гораздо проще где-то уединиться и начать проговаривать свои мысли вслух. Возьми фигурку с полки и начни проговаривать, что ты видишь и, что ты думаешь. Произнеси вслух какая сейчас погода, какое у тебя настроение и так далее. Таким же способом, кстати, учатся ораторскому искусству и в этом нет ничего постыдного. Используя этот метод, у меня получалось не только экономить время, но и эффективно обучаться. Спустя несколько месяцев я ненадолго возвращался к живому общению и чувствовал необычайную лёгкость.

3) Грамматика. По сути из грамматики самое важное — это времена. Ты можешь знать только их, но если твой словарный запас будет достаточно большим, то по сути это уже 90% или даже 95% результата. По сути дети, которые учатся языку с рождения, вообще не притрагиваются ни к каким учебникам, они просто знают, что так правильно. Поэтому, если ты прям активно наляжешь на практику чтения, слушания и самостоятельного воспроизведения, то у тебя просто появится чуйка, что так делать можно или так делать нельзя. Я не говорю о том, что про правила нужно вообще забыть, те же неправильные глаголы и прочие штуки надо будет доучивать впоследствии, но это не настолько важно, насколько важно иметь реальный запас слов и большую практику. Из учебников горячо рекомендую старый учебник Голицынского, лучше его я ещё не находил.

4) Собственно, это всё. Дальше тебе остаётся лишь не бросать начатое. Продолжай читать книги, смотреть фильмы и общаться с иностранцами. Через какое-то время ты начнёшь мыслить и видеть сны на английском, а также понимать на 30% больше информации нежели другие (многие сложные слова в русском приходят именно с английского).