Promise.withResolvers 🤨

Чи була у вас колись потреба чи ідея створити Promise, але зарезолвити його тільки тоді, коли вам буде зручно. Насправді, реалізувати це можна доволі нескладно:

let resolve, reject;
const promise = new Promise((res, rej) => {
  resolve = res;
  reject = rej;
});

З останніми оновленнями таке можна отримати прямо зі статичного методу withResolvers:

const { promise, resolve, reject } = Promise.withResolvers();

Здається, це можна використати для того, щоб перетворити listener на async/await:

const { promise, resolve, reject } = Promise.withResolvers();
something.on('load', resolve)

return promise

Почитати про цей метод детальніше можна за посиланням внизу.

👉 Відкрити посилання

#tips

Build your own HTTP server 👀

Що може бути краще, ніж написати невелику апішку? Як щодо того, щоб написати власний HTTP-сервер з нуля?

Якщо фронтедщики подумали, що це їх не стосується, то це зовсім не так. Такі знання потрібні всім.

Тому ділимося з вами ресурсом, де ви можете знайти такий курс. Цього місяця саме він - безкоштовний!

На цій платформі ви зможете знайти ще інші курси, наприклад, Redis чи Git з нуля. Ціни звісно не найменші, але українцям є 50% знижки (якщо ми правильно зрозуміли).

👉 Відкрити посилання
👉 Відкрити пост в Twitter

#tips

PlayPhrase.me 👀

Ми вирішили добити свою англійську і записались на курси. Нас запхали в доволі високий рівень і тепер ми вчимо складні фрази, які ніколи не використаємо і які дійсно важко перекласти та запам'ятати.

Крім ChatGPT, який старається нам все пояснити, ми використовуємо PlayPhrase.me - сайт, де можна почути вживання слова або фрази в реальних фільмах чи серіалах.

Рекомендуємо!

👉 Відкрити посилання

#tips

Function overload 🥵

Можливо, ви коли-небудь працювали з мовою, яка дозволяє перевантажувати функції. В JavaScript такої потреби немає, адже немає статичної типізації. В TypeScript, хоч типи і не такі як в компільованих мовах, перевантаження функцій теж доступне.

Нехай вам чомусь потрібна функція convert, яка перетворює boolean в number, а number в string. Звісно, можна спробувати Generics, але тут можна обійтись і без них, просто перевантаживши функцію.

Спочатку, потрібно написати "голову" функції для кожного випадку. У вас обовʼязково має бути різний список аргументів (за довжиною чи за типом).

function convert(x: boolean): number;
function convert(x: number): string;

Після цього вам необхідно написати саме тіло функції. Воно обовʼязково має задовольняти кожне попереднє оголошення функції.

function convert(x: boolean | number): number | string {
  return typeof x === "boolean" ? Number(x) : String(x)
}

Зауважте, що TypeScript буде використовувати лише оголошення без тіла функції, коли працюватиме з типізацією. Виглядатиме все так, наче у вас дві різні функції, проте з однаковим іменем.

convert(Math.random() > 0.5 ? true : 1)

Отак не вийде зробити, адже немає функції convert, яка може прийняти boolean | number, вона може прийняти лише конкретно boolean або number. Саме ця частина спочатку часто може збивати з пантелику.

Якщо хочете дослідити це питання більше, нижче додаємо вам посилання на Handbook TypeScript.

👉 Відкрити посилання

#tips

string & {} 🤯

Буває ж таке, що в TypeScript вам потрібно створити тип, який наче і може бути будь-яким рядком тексту, але ви б хотіли ще додати підказки від IDE про якісь певні варіанти. От, наприклад:

type Color = "primary" | "secondary" | string

Ось оцей | string все псує і через нього немає жодних підказок. Тому, ловіть спосіб, як це можна пофіксити:

type Color = "primary" | "secondary" | (string & {})

#tips

Biome 📐

Не одними Prettier та ESlint.

Biome - це швидкий форматувальник та статичний аналізатор коду. Тобто він один може замінити і Prettier, і ESLint. Зʼявився він як fork від Rome, іншого схожого інструменту.

Зараз Biome підтримує приблизно 97% того, що робить Prettier і майже 270 правил з ESLint.

Ми самі подумуємо над переходом, а то щось надто довго проганяються усі перевірки на поточних інструментах. А що думаєте ви?

👉 Відкрити документацію

#tips

Two Slash Queries | What Is The Type 🔼

Можливо, ви бачили на відео у блогерів чи у туторіалах, як хтось під оголошенням типу додає коментар (//) + хатинку (^) + знак питання (?). А в результаті виводиться інформація про тип, на який вказує оця хатинка (^). Виявляється для цього існує розширення в популярних середовищах розробки.

У відео нижче ви знайдете короткий спосіб встановлення розширення у таких середовищах як VS Code, Jetbrains, Neovim.

👉 Відкрити посилання

#tips

Vim Motions 🕹️

Це мав бути душний пост про те, як я сетапив neovim, але він буде тільки після того, як я повністю завершу налаштування.

Хочу сьогодні розповісти про Vim Motions і я справді вважаю, що цей пост теж буде корисним, адже це напевно головна причина чому люди взагалі іноді задумуються над vim. І що найкраще - використовувати Vim Motions можна напевно в будь-якому редакторі/IDE.

Отож, що це взагалі таке?

Vim Motions - це команди для швидкої роботи з текстом. Вони дозволяють ефективно рухатись по тексту чи редагувати його без використання миші, що економить час. І найкраще в цьому те, що знаючи основну базу, можна комбінувати це все у складніші конструкції. Для прикладу, d (delete) - оператор видалення, w (word) - рух до початку наступного слова, а команда d3w (delete 3 word) - видалить три слова.

👉 Vim as your editor from ThePrimeagen
👉 Vim motions for absolute beginners
👉 Vimified
👉 Vim Adventures

👉 Vim для VS Code
👉 Vim для JetBrains

#tips

Чи знали ви, що таке rubber ducking? 🐥

Якщо ні, то ось посилання для короткого ознайомлення.

👉 Відкрити посилання

А чи є у вас гумова качечка? Якщо так, діліться фото в коментарях 🙃

#tips