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

Всі ми використовуємо 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

Навіщо нам потрібен ще один реєстр пакетів під назвою JSR? 🧐

Всі ми використовуємо npm, який встановлюється автоматично разом з Node.js, для додавання пакетів у проєкти. Але скільки всього треба врахувати під час паблішингу пакетів в npm? 🤨

👎 Скомпілювати TS у JS
👎 Потім цей самий JS згенерувати для ESM та CJM
👎 Згенерувати .d.ts типи
👎 Написати примітивну документацію

Саме ці проблеми й вирішує JSR. Ви можете запаблішити пакет тільки в TypeScript і забути про все інше.

💪 Різні рантайми підтримуються без вашого втручання
💪 Документація генерується на основі вашого коду
💪 Щоб створити сучасний пакет, вам буде потрібно всього два файли

// jsr.json
{
  "name": "wannabe-school",
  "version": "1.0.0",
  "exports": "index.ts"
}

// index.ts
console.log('Hello, Wannabe!');

І після запуску команди npx jsr publish ваш пакет буде доступний в реєстрі JSR. Але це не означає, що ви повинні відмовитися від npm, JSR працює разом з ним 😉

Поки під питанням, чи зможе цей реєстр триматися “на плаву”. Бо не дивлячись на реально крутий функціонал, для розробників open-source проєктів це може бути ускладненням, оскільки більшість людей використовують npm, а підтримувати декілька реєстрів нікому не хочеться.

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

А яка у вас думка стосовно JSR? 🤔

@wannabe_javascript #jsr #npm

Де взяти типові хуки для проєкту? 😏

Кожного разу ми пишемо купу однакових хуків з проєкту в проєкт. Всім знайомі debounce, dark mode, clipboard, window size тощо. Так зʼявилися бібліотеки, які налічують неймовірну кількість хуків, які можуть бути корисні в будь-якому проєкті. Розглянемо деякі з них.

😎 React Use (40.2K ⭐️)

Найбільша та найпопулярніша бібліотека для React, яка налічує близько 110 хуків. Серед них є як усі базові, наприклад, useDebounce, useLocalStorage, useWindowSize, так і унікальні, як-от useFullscreen чи useGetSet.

😎 useHooks (8,5K ⭐️)

Ще одна бібліотека для React, яка налічує майже 40 різних хуків. Також має всі базові та деякі унікальні хуки. Сама бібліотека зроблена дуже просто, так як написана всього в одному файлі.

😎 useHooks.ts (5.5K ⭐️)

Схожа на минулу, бібліотека для React, яка налічує майже 35 хуків. Але на відміну від попередньої, є більш якісною, як мінімум, за рахунок наявності тестів.

😎 VueUse (18.5K ⭐️)

Бібліотека для Vue, яка налічує близько 140 composable функцій. Окрім функцій, також пропонує директиви та компоненти. Налічує як всі базові, так і деякі унікальні composable функції, як-от useDevicePixelRatio або useTextSelection.

Всі ці бібліотеки можуть в рази спростити життя. Головне уважно подивитися, які в них є хуки або composables, і вже наступного разу не треба буде винаходити велосипед 🤓

@wannabe_javascript #react #vue #hooks #composables

Друзі, певний час ми були відсутні у соцмережах, оскільки всі наші сили були направлені на розробку платформи. Але ми готові повертатися, і не з «пустими руками», ми раді анонсувати, що наш сайт wannabe.school офіційно зарелізився! 🥳

Ми вважаємо його нашою гордістю, оскільки він розроблений власноруч нашим співзасновником та експертом Валерієм Стрільцем без сторонньої допомоги. А також цей сайт - обличчя школи, бо ми навчаємо тому, що самі вміємо та відкрито це демонструємо.

Ми будемо продовжувати створювати корисний контент у Телеграм-каналі та дублювати пости в блог на сайті в розширеному форматі 👌Функціонала Телеграму не завжди вистачає, аби розкрити тему повністю, тому тепер з цією задачею будуть справлятися статті на нашому сайті, щоб ви отримували ще більше корисної інформації.

Наразі сайт у версії Beta і ми будемо ділитися із вами усіма етапами, які він буде проходити 👩‍💻

Будемо раді вашому фідбеку по будь-яким багам, які ви зможете знайти на сайті. Радо їх приймемо у будь-який зручний для вас спосіб: дірект в Інстаграм, Телеграм, e-mail форма зворотного звʼязку на сайті тощо.

А тепер, хутчіш на сайт - wannabe.school 🥳

Якщо цікаво дізнатися деталі імплементації сайту, обов'язково дайте знати в коментарях або в нашому ком'юніті @wannabe_community 🤝

@wannabe_javascript