TypeScript для фізичних девайсів 📟

Екосистема JavaScript виходить за межі інтернету. Спочатку придумали TypeScript, який перевернув розробку на JS, а тепер ще й з'явився DeviceScript 😱

DeviceScript був створений компанією Microsoft на основі TypeScript. Назва говорить сама за себе: тепер ми можемо створювати нові додатки не тільки у браузерах, на серверах, десктопах чи мобільних, а ще й на фізичних пристроях.

Чи каже вам про щось назва Raspberry Pi? Якщо так, тоді ви вже розумієте, до чого йде діло. 😉 Raspberry Pi - це фізична плата, до якої можна під'єднувати різні речі, такі як:

- лампочки
- датчики температури
- датчики вітру
- вібромоторчики
- тощо

Список девайсів, як і драйверів, неймовірно великий. Тому ми наполегливо рекомендуємо ознайомитися із DeviceScript.

А якщо у вас немає часу або вам взагалі не цікава розробка на фізичних девайсах, тоді можете подивитися принаймні приклад зі створенням показу температури на дісплей 🤫

Ви тільки уявіть, знаючи лише один JavaScript, ми можемо стільки всього створювати, хіба це не чудово? 🤩

@wannabe_javascript

Як розширити вже існуючий глобальний інтерфейс в TypeScript?

1️⃣ Якщо в TypeScript ви спробуєте записати будь-яку змінну в глобальний об'єкт, то отримаєте помилку:

window.newVariable = 'Hello';
// Property 'newVariable' does not exist

2️⃣ Або нам треба розширити вже існуючий глобальний інтерфейс:

Array.prototype.filterMap = function (callback) {
  return this
    .map(callback)
    .filter((value) => value);
};
// Property 'filterMap' does not exist

3️⃣ Чи якимось чином TS інтерфейс бібліотеки не має опису змінної:

import { userInfo } from 'lib';

userInfo.fullName
// Property 'fullName' does not exist

Для всіх цих кейсів існують способи розширення TypeScript інтерфейсів❗️

1️⃣ В першому прикладі нам допоможе розширення інтерфейсу Window, в нього ми можемо записувати будь-що:

declare global {
  interface Window {
    testVariable: string;
  }
}

2️⃣ Другий приклад розширює існуючий клас Array, бо нам захотілося створити свій метод роботи з масивами:

declare global {
  interface Array<T> {
    filterMap(
      callback: (
        value: T,
        index: number,
        array: T[]
      ) => unknown): unknown[];
  }
}

3️⃣ А якщо нам треба розширити інтерфейс бібліотеки, то код стає більш цікавішим, оскільки нам треба знайти оригінальний інтерфейс, імпортувати його ➡️ і тільки після цього ми зможемо розширяти. Без імпорту така схема працювати не буде:

import { UserInfo } from 'lib';

declare module 'lib' {
  interface UserInfo {
    fullName: string;
  }
}

Глобальні розширення зазвичай створюють в файлах global.d.ts або declarations.d.ts 😉

@wannabe_javascript

Усім привіт! Сьогодні не зовсім навчальний контент, але це напряму з ним повʼязано 😉

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

Зараз ми хочемо зрозуміти, які у вас є поточні запити щодо розвитку в програмуванні і поглибленні знань, щоб робити актуальні навчальні продукти.

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

⭐️ З нас буде велика подяка у вигляді промокоду на знижку 50% на будь-який наш продукт, які почнуть виходити вже на початку весни.

Заздалегідь дуже дякуємо кожному, хто зможе долучитися і допомогти нам в цьому!

Посилання на опитування: https://forms.gle/S67K6oNvk3ZQPjFs8

Як правильно іменувати гілки та коміти?

Всі ми використовуємо Git, проте як часто ви задумуєтеся, чи правильно ви це робите? 😉

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

Іменування гілок 🤓

Найкращий спосіб - це додавання префіксів та номерів ваших задач, якщо вони є, наприклад:

type/PRJCT-NUM

type - це префікс, замість якого ви підставите тип своєї задачі.

Основними типами є:

📌 feature, bugfix, hotfix, release, docs

Також PRJCT-NUM може замінюватися на назву тікету, наприклад, в Jira або GitHub Issue. А якщо ви працюєте без тікетів, то можна легко придумати зрозумілу назву до вашої задачі.

Приклади коректних імен гілок:

📌 bugfix/WNB-100, feature/add-header, release/1.0.0, hotfix/101

Іменування комітів 😏

Правила іменування комітів схожі на іменування гілок, але з додаванням деталей.

Для найкращої перевірки правильності імен комітів існує Conventional Commits, який може перевіряти ім'я вашого коміту, тож якщо помилка є, він не дасть зробити коміт.

Формат запису такий:

type: message

або

type(SCOPE): message

Основними типами є:

📌 fix, build, chore, ci, docs, style, refactor, perf, test

Приклади коректних імен комітів:

📌 feat(api): implement user login, fix: login button, docs: add login information

@wannabe_javascript

Верстати імейли можна без болі!? 😱

Кожен фронтенд розробник рано чи пізно зіштовхується із верстанням імейлів. І ще не було жодної людини, в якої не було би ніяких проблем з відображенням на різних клієнтах 😉

Тому в сучасному світі фреймворків і були створені різні допоміжні бібліотеки, як, наприклад, React Email.

Що дає React Email? 🤔

🖥️ CLI

Верстайте імейли з власним дев-сервером, використовуючи знайомі команди, як email dev, email build та email start. А для відправки згенеруйте чистий HTML, написавши email export.

🖥️ Компоненти

На даний момент React Email налічує близько 20 різних компонентів для спрощення верстки. Від чистого HTML та тайтлу до сітки та Markdown.

🖥️ Tailwind

Якщо ви звикли додавати класи, а не стилі, то React Email підтримує Tailwind.

Майте на увазі, що більшість імейл клієнтів не підтримують багато CSS властивостей.

🖥️ Різні типи рендеру

HTML - це класичний спосіб надсилання імейлів, але React Email має змогу відрендерити тільки текст, якщо в цьому є потреба.

А ви знали, що Gmail вважається інтернет експлорером серед поштових клієнтів? 🤭

@wannabe_javascript

Headless архітектура - що це таке? 🤔

Останнім часом headless архітектура все частіше починає з'являтися в JavaScript фреймворках, хоча сама вона не є новою.

Як саме можна розуміти слово headless ❓
Прямим перекладом є "безголова", проте в контексті цієї архітектури ми би радше назвали її "безінтерфейсна".

Чому? 🧐

Якщо ви слідкуєте за новими фреймворками, то вже точно чули про shadcn/ui та HeadlessUI, які в минулому році підкорили серця розробників. Вони повністю побудовані на архітектурі headless.

Головна відмінність між звичайним фреймворком - наприклад, Bootstrap, та headless - наприклад, shadcn/ui, в тому, що останній дозволяє повністю переписати інтерфейс так, як тільки вам забажається (на відміну від Bootstrap).

Головний підхід headless архітектури - це дати тільки стан та функціонал, а інтерфейс залежить лише від вас 😉

Ми можемо виділити такі приклади реалізації headless архітектури в світі JavaScript:

📌 Headless CMS під назвою Strapi
📌 Headless UI Frameworks як shadcn/ui та HeadlessUI, в яких ви зможете змінити інтерфейс під себе
📌 Headless Browser у вигляді Puppeteer та Playwright, які з легкістю можна використовувати в Node.js

REST APIs та GraphQL також є гарними прикладами headless архітектури, бо для них frontend є "головою".

@wannabe_javascript

Асинхронні хуки та покращена відправка форм в React? 👩‍💻

В новій, 19-й, версії React анонсували перший асинхронний хук під назвою use та декілька нових хуків для покращеної роботи з формами.

🔖use

Хук use має дві головні відмінності від звичайних хуків:

⚡️може бути асинхронним
⚡️його можна використовувати всередині циклів, умов тощо

При використанні з асинхронними даними вам не потрібно робити компонент async чи вказувати await. React сам зробить resolve цього промісу і поверне дані. Цей підхід ідеально підійде в комбінації з <Suspense>.

import { use } from 'react';

function Message({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
  // ...

Та другий варіант використання хука use - це діставання інформації з контексту в будь-якому місці.

import { use } from 'react';

export function Divider({ show }) {
  if (show) {
    const theme = use(ThemeContext);

    return <hr className={theme} />;
  }

  return <></>;
}

🔖Також покращений DX з формами.

Тепер можна буде використовувати функції при створенні форм в атрибуті action заміть onSubmit та додавання preventDefault.

<form action={handleSubmit} />

І в додаток до цього тепер існує два нових хуки useFormState та useFormStatus, які дозволяють зручніше надсилати та слідкувати за запитами.

const [state, formAction] = useFormState(action, null);

const { pending, data, method, action } = useFormStatus();

Звичайно, це не все, що з'явилося в версії 19, але це найцікавіше 😉

@wannabe_javascript

Що цікавого додали в JavaScript протягом останнього року?

ECMAScript не стоїть на місці, тож новий синтаксис додається увесь час. Багато з нього ви вже використовуєте, а про деякі речі - навіть і не чули 🤫

🔖Object.groupBy

Тепер для того, щоб згрупувати масив по філдам, можна викликати lodash Object.groupBy. Він приймає першим параметром масив, а другим - колбек, в якому можна додати безліч умов для групування, повертаючи стрінгу, або зробити без умов, як в прикладі нижче.

const groupedByType = Object.groupBy([], ({ type }) => type);

🔖toSorted, toSpliced, toReversed

Старі методи sort, splice та reverse треба використовувати з обережністю, так як вони мутують оригінальний масив. На їх заміну прийшли ці 3 нові методи, які роблять все те ж саме, але без мутації 😉

🔖with

Бувають випадки, коли треба скопіювати масив, при цьому замінивши елемент. Метод with приймає два параметри, де перший - це індекс, а другий - значення.

const name = ['Valerii', 'Strilets'];
const newName = array.with(0, 'Anastasia');
// => ['Anastasia', 'Strilets']

🔖findLast

Метод findLast робить абсолютно те ж саме, що і метод find, проте починає пошук з кінця.

const array = [1, 2, 3];
const first = array.find(num => typeof num === 'number'); // 1
const last = array.findLast(num => typeof num === 'number'); // 3

Це все вже доступно в сучасних браузерах 💪

@wannabe_javascript

Pixel Perfect - це міф для замовників? 🫣

Деякі замовники хочуть від розробників максимальної точності кожного пікселя при перетворенні дизайну в реальний сайт 🔄 Зазвичай це бажання зʼявляється від прочитання статті про Pixel Perfect (PP) або від знайомих 😁

Але скільки ж є вагомих підстав для того, щоб вмовити замовника відмовитися від Pixel Perfect! 😱

1️⃣ Час

Звичайно, найголовніше - це час. При імплементації PP ви витратите набагато більше свого часу на відтворення дизайну, а потім - на будь-яку, навіть дрібʼязкову, переробку. А ваш час - це гроші, які сплачує замовник. Кому від цього краще? 🤔

2️⃣ Екрани

Дизайнери малюють веб-сайти, спираючись на декілька екранів: ноутбук, планшет та мобільний (хоча й таке іноді буває розкішшю). Але згадайте, яка насправді існує безліч варіацій екранів різних девайсів. А потім врахуйте, що кожен з екранів може перевертатися, ділитися навпіл і бути відкритим НЕ на весь екран 😏

3️⃣ Шрифти

Кожен браузер може рендерити шрифти по різному. Ви можете зробити ідеальний PP у себе, потім цей сайт відкриє замовник на іншій ОС або іншому моніторі і шрифт буде виглядати інакше 🥲

4️⃣ Відносні одиниці

Кожен PP вимагає дотримуватися всіх розмірів в пікселях, що абсолютно незручно при написанні стилей. Простіше написати один раз розмір у відносних одиницях, який сам буде підлаштовуватися під різні екрани, ніж створити 5 media query під різні випадки.

5️⃣ Figma

Дуже багато початківців сприймають фігму як еталон дизайну. Починають копіювати звідти всі розміри, кольори тощо, а потім дивуються, що якось не так виглядає 😁 Фігма вам пропонує розміри, а не змушує їх використовувати.
На неї треба орієнтуватися лише візуально та брати всі розміри, перевіряючи кожен.

Скільки ж болю завдав Pixel Perfect всім розробникам 😥

@wannabe_javascript #PixelPerfect

HTMX дозволяє писати інтерактивний фронтенд без JavaScript? 🤨

Next та Nuxt активно розробляють серверні компоненти. Головна їх ціль - відрендеритись на сервері та віддати готовий HTML на клієнт. Але звичайний HTML вміє надсилати тільки GET чи POST запити та не має інтерактивності.

❗️Саме для таких цілей був створений HTMX. Його основна задача - відмовитись від JS, але мати інтерактивність на клієнті й надалі з великою кількістю функціоналу.

HTMX підключається одним тегом script до вашого HTML і все, він працює. Ніяких бандлерів та всього іншого. При підключенні HTMX сканує весь HTML на наявність атрибутів, які він розуміє.

🔖 hx-get/post/patch/put/delete

Ви можете вказати будь-якому елементу, на який ендпоінт зробити запит при кліці від юзера, наприклад: <div hx-delete="/users/1">

🔖 hx-trigger

А якщо треба робити запит не на клік? 🤨 Тоді додайте атрибут hx-trigger з різними варіантами тригерів, як-от load, mouseenter, keyup або навіть динамічні every 2s, delay:1s тощо.

🔖 hx-target

Головний сенс цих AJAX атрибутів - робити запит та отримувати дані. Але де тут інтерактивність? 🤔 Сенс запитів в тому, щоб отримати від серверу HTML, який буде замінений в тому місці, де ви вкажете. Для цього потрібен hx-target.

За замовчуванням HTML від серверу буде замінений на тому елементі, де був зроблений реквест. Але це легко змінити, вказавши селектор всередину атрибута hx-target.

☄️ Та багато-багато іншого..

Окрім цього всього, HTMX має свої події, вміє працювати з вебсокетами, має логінг, анімації тощо.

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

Ось приклади для ознайомлення.

@wannabe_javascript #htmx

esbuild, в чому твоя фішка? 🤔

Нещодавно ми проводили опитування “який JavaScript бандлер є найпопулярнішим по кількості скачувань?” і несподівано для всіх, і нас також, лідером став esbuild з 27.5 мільйонами завантаженнями на тиждень 😱

⭐️ Чому він такий популярний?

Звичайно, найголовніша перевага в esbuild - це його швидкість. Він показує просто неймовірні результати в демо на сайті самого esbuild 🔥

Наприклад, команда esbuild скопіювала бібліотеку three.js 10 разів і протестувала швидкість Webpack, Rollup та Parcel. За результатами:

- Webpack справився за 41 с
- Rollup - за 34 с
- Parcel - за 15 с
- esbuild - за 0.4 с 🤯

⭐️ Як вдалося досягнути такої швидкості?

esbuild був написаний мовою Go, яка сама по собі вже є дуже швидкою. Також при створенні білда esbuild компілює файли паралельно, використовуючи всі доступні ядра процесора.

⭐️ Що підтримує з коробки?

Використовуючи тільки CLI, ви можете білдити CSS, JS, TS та навіть JSX. Звичайно, також є вбудований дев сервер та підтримка ESM та CommonJS модулів.

⭐️ Які недоліки?

Хоча й завантажень в esbuild найбільше, про нього й досі мало хто чув. Чому? Вся справа в його API, адже воно не має всіх звичних для нас речей, наприклад, того ж alias resolver. Тому його можна брати як основу, але з урахуванням, що треба буде щось під себе доробити 🤫

За таким принципом і був побудований Vite, бо він має все, до чого ми звикли, використовуючи під капотом Rollup. І, як вказано на сайті самого Vite, вони не використовують esbuild як бандлер саме тому, що їх API не сумісне з esbuild 😢

Але скоро вийде Rolldown як заміна Rollup, і Vite стане набагато швидше 😎

@wannabe_javascript #esbuild

Досить болю від налаштування Eslint та Prettier! 💪

Впевнені, у вас були складнощі з налаштуванням Eslint або Prettier, чи навіть з обома одночасно. Наприклад, ціла купа різних конфігів для Eslint, які можуть конфліктувати з Prettier. Або Prettier, який вміє форматувати за базовими правилами, які йдуть всупереч правилам Eslint. Знайомо? 😒

Чому тоді ми використовуємо Eslint та Prettier в одному проєкті? 🤔

Eslint відповідає за велику кількість правил, таких як: імпорти, типи даних, спрощення логіки тощо. А Prettier у свою чергу просто вміє форматувати з мінімальними налаштуваннями.

Ось вам декілька порад, які допоможуть використовувати тільки один Eslint та позбутися купи конфігів:

✍️ Видалити Prettier 😄
✍️ Встановити @antfu/eslint-config
✍️ Налаштувати formatOnSave, використовуючи Eslint

Звісно, вам може не сподобатися конфіг від antfu. Нам також знадобився час на звикання, бо він відрізняється від звичного для нас стайлгайду 🤓

Але ми наполегливо рекомендуємо встановити конфіг від antfu у ваші проєкти з наступних причин:

🤝 Легкість налаштування:

// eslint.config.ts
export default antfu()

Тим самим ви позбудетеся проблем з налаштуванням, оновленням та конфліктами конфігів.

🤝 Він підтримує з коробки TypeScript, React, Vue, Astro, тести і ще багато іншого

🤝 Якщо вам треба все ж таки щось додати, то виглядає це наступним чином:

export default antfu(
  {},
  ...compat.extends('plugin:tailwindcss/recommended'),
)

Тож, обов'язково спробуйте, а якщо не сподобається, завжди можна зробити git revert 😉

@wannabe_javascript #eslint #antfu

Дякуємо, все зрозуміло 🫡

@wannabe_javascript