Web Overflow 🇺🇦
4.42K subscribers
380 photos
40 videos
3 files
518 links
Затишний блог про веб-розробку і не тільки 💛

Чат: @web_overflow_chat
Співпраця: @web_overflow_support
Автори: @lluchkaa & @anastasiia_tarasenko
加入频道
Slack save for later 🔖

Якщо ви користуєтесь Slack на роботі чи в побуті, то радимо вам звернути увагу на таку фічу як Save for later.

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

Ще одна фішка - ви можете створити нагадування на окреме повідомлення прямо в Slack.

Особисто нам цей функціонал часто стає в нагоді. Вночі буває часто багатенько повідомлень набігає, тому зранку все переглядаємо, відмічаючи ті повідомлення, на які потім обовʼязково потрібно звернути увагу.

#tips
👍63🔥1
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
👍10🔥43
Build your own HTTP server 👀

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

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

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

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

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

#tips
👍10🔥21
PlayPhrase.me 👀

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

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

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

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

#tips
👍9🔥41
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
👍10🔥31
string & {} 🤯

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

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


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

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


#tips
👍16😱52
Biome 📐

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

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

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

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

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

#tips
7👍6🤔2
Two Slash Queries | What Is The Type 🔼

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

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

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

#tips
👍53
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
👍10🤪21
Чи знали ви, що таке rubber ducking? 🐥

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

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

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

#tips
👍64