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

Never* use git pull ↙️

Якщо ви працюєте над проєктом не самі, то вам часто доводиться стягувати зміни з поточної гілки або з базової. Якщо ви робите це через git pull - ви кожного разу будете отримувати новий merge комміт. Наче нічого поганого, але постійно буде присутній один "зайвий" комміт.

А от як цього можна уникнути завдяки rebase - дивіться у відео за посиланням нижче.

👉 Дивитися відео

#tips

VS Code Remote tunnels 🚇

Уявіть ситуацію, що весь ваш проєкт на робочому компʼютері в офісі, а вам терміново треба з дому щось змінити. Здається у VS Code є рішення.

Яке саме? Дивіться у відео за посиланням нижче.

👉 Дивитися відео

#tips

Ollama 🤖

Ollama — це open-source платформа для запуску LLM (великих мовних моделей) безпосередньо на вашому комп'ютері. Це дає вам можливість використовувати потужність штучного інтелекту без потреби в хмарних сервісах, що не тільки підвищує швидкість обробки, але й забезпечує більший контроль за вашими даними. Ви можете вибрати з великої кількості готових моделей, а також знизити витрати, використовуючи ресурси свого пристрою.

Ollama також дозволяє налаштовувати та розширювати моделі під ваші конкретні завдання, пропонуючи спеціальний файл конфігурацій — Modelfile (нічого вам не нагадує?).

#tips

Spell Checker 🧙

Spell - це про заклинання чи орфографію?

Ми будимо кречати про це завжди! Коли ми програмуємо, то постійно використовуємо англійську. І хоча код на ламаній англійській усе одно працюватиме, це не є дуже хорошою практикою та може збивати з пантелику ваших колег.

На щастя, є дуже багато способів слідкувати за орфографією:

- VSCode має розширення;
- JetBrains, здається, має це вже вбудовано;
- для браузеру можете встановити Grammarly.

#tips

ESLint Stylistic 💅

ESLint має окремий плагін, який спрямований саме на стиль коду. Раніше ці правила були частиною самого ESLint, але тепер їх винесли окремо.

Звісно, це не зробить ваш код більш ефективним, але, можливо, ви захочете забезпечити єдиний стиль для всієї команди. У поєднанні з Prettier можна налаштувати досить суворі правила форматування. Тішить, що більшість правил підтримують auto-fix.

Ми зараз пробуємо додати цей плагін, щоб форсувати відступи під директивами ("use client"/"use server"). Можливо, це не надто корисно, але зате забезпечить узгодженість у всьому коді.

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

#tips

State of JS/React 🤨

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

Опитування щодо JavaScript і React відкриті!

На нашу думку, це не просто спроба отримати статистичні дані. Використайте це на свою користь: додавайте у свій Reading List нові речі, про які ви не чули, або ж чули, але досі не досліджували. Наприклад, у першому питанні ми для себе відзначили error.cause та hashbang grammar. Також позначайте своє ставлення до технологій у запитаннях — це дає корисний фідбек для всієї спільноти.

І, звісно, це ще одна нагода показати світу, що в Україні багато крутих спеціалістів!

👉 Відкрити State of JavaScript 2024 Survey
👉 Відкрити State of React 2024 Survey

#tips

CSS changed 🟣

Перше, що варто зазначити, — CSS отримав нове лого. Історія походження цього кольору справді унікальна. Щоб дізнатися більше, перегляньте відео нижче.

Бонусом: Fireship розповідає про фічі CSS, які мало хто знає, але більшість із них вже стали або незабаром стануть стандартними у браузерах.

👉 Дивитись відео

#tips

Warp Integrations 🔌

@MatiGreen нещодавно поділився в чаті статтею, у якій пояснюється, як додати інтеграцію Warp із VSCode, JetBrains, Raycast або навіть Docker.

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

#tips

Money 💸

Один зі способів заробітку — оплата за послуги у ваших застосунках. І один із найпопулярніших способів це зробити — підключити Stripe.

Ми ще не маємо достатнього досвіду роботи з ним, щоб давати поради. Натомість ділимося статтею від Theo Browne, який описав план інтеграції Stripe у застосунок.

Також є кілька порад, зокрема список подій, які він зазвичай обробляє, а також пояснення, чому варто відключити Cash App Pay (здається, це стосується лише проєктів у США).

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

#tips

Spell Checker 🧙

Трішки про наболіле...

Жоден компілятор чи інтерпретатор не перевіряє ваш код на правопис. Але його читатимуть ваші колеги. Тому, щоб трішки полегшити життя собі та іншим, використовуйте spell check. Пів року тому ми вже писали про це, тож цей пост — ще одне нагадування.

👉 Читати пост

Тільки не відкривайте цю лінку - https://guthib.com/

#tips

Нарешті повертаємось до вас після Великодніх свят! 🐣

З новин: Настя за цей час скуштувала 12 пасок — хто знає, до чого це? 😅

А тепер до цікавого. На просторах YouTube ми побачили відео, де Matt Pocock, переглядаючи своє старе відео з 2022 року, знову повернувся до теми type та interface у TypeScript і вніс кілька уточнень. Якщо коротко — ви й далі можете використовувати обидва варіанти, адже в більшості випадків вони взаємозамінні.

Але якщо вам цікаво:
- як одній команді вдалося вдвічі скоротити час компіляції TypeScript, просто замінивши type на interface;
- як можна уникнути автоматичних злиттів interface за допомогою ESLint;
— обов'язково перегляньте відео нижче!

👉 Дивитись відео

#tips

Refined GitHub 😺

Якщо ви часто працюєте з GitHub, це розширення може стати вам у пригоді. Розробники усунули деякі недоліки вебсайту та додали корисні покращення. Цікаво, що частину з них GitHub згодом інтегрував безпосередньо у свій інтерфейс.

Ми щойно встановили його й тестуємо — поки що все працює чудово!

👉 Встановити розширення

#tips

TypeScript tips 🪄

TypeScript — це вже невід’ємна частина сучасних JS-проєктів. Уміння ефективно використовувати його можливості зараз важливе як ніколи.

Matt Pocock знову ділиться корисними порадами щодо роботи з TypeScript.

У цьому відео ви дізнаєтесь:
— як працюють Pick/Omit та Extract/Exclude;
— як створити обгортку для зручного виведення типів;
— як отримувати підказки для рядкових типів (string literals) та інше.

👉 Дивитись відео

#tips