shadcn/ui 🗽

Якщо на секунду заглянути в 2023 і глянути, хто в світі JS отримав максимальну кількість зірочок на GitHub, то побачите саме цей проєкт - shadcn/ui.

Якому UI kit ви надаєте перевагу - написаному власноруч чи з готової бібліотеки?

Якщо писати самому - багато контролю, але і багато багів може вилізти. А якщо використовувати бібліотеки - не всі компоненти потрібні та важче щось модифікувати. Для прикладу, зараз у нашому поточному проєкту більшість компонент написані власне нами, проте деякі ж використовуємо із бібліотек (такі як селект чи календар).

Отож, що таке цей shadcn/ui?

Це місце, де ви можете просто взяти і скопіпастити собі код компонент. І це не жарт - в цьому і є суть проєкту. Тут вже реалізовані основні ui-компоненти в React і ви можете просто за інструкцією скопіювати їх собі або ж додати за допомогою cli.

В чому перевага?

Після додавання коду ви можете модифікувати його як хочете, а сама основа компонент побудована на radix-ui.

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

Тому залітайте та діліться своїми думками.

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

#library

А весь список найяскравіших зірок на просторі JS можна знайти за посиланням нижче.
👉️️️️ Відкрити посилання

Які бібліотеки зазвичай можна знайти в нас на проекті? 👀

Тут ми коротко опишемо бібліотеки для front-end застосунку, який написаний на React, або ж навіть на Next.js. Але багато з них підійдуть і до інших типів проектів написаних на JS.

Отож, всім треба різні утиліти. Для цього в нас є radash, рідше lodash. А коли говоримо про дати - тут допомагає date-fns. Майже на кожному веб-сайті є форми. Для роботи з ними - react-hook-form. А для їх валідації - yup або zod. Коли форма заповнена, потрібно відправити запит з даними, це ми робимо за допомогою axios. Ви спитаєте, а що робити, коли сервер повернув помилку? Було б дуже добре її обробити та показати повідомлення користувачу, наприклад, за допомогою react-hot-toast або react-toastify. По секрету: для роботи з env змінними використовуємо @t3-oss/env-nextjs. А щоб робити запити з React-компонент безболісно, використовуємо @tanstack/react-query.

// TODO: add @shadcn/ui, zustand

А що зазвичай можна знайти у вашому package.json?

#library

Class Variance Authority ✍️

Коли ми створюємо власний UI kit, то стикаємось з тим, що потрібно робити різні варіації стилів для однієї компоненти, наприклад, small-medium, primary-secondary, contained-outlined і тд. І зазвичай, це все перетворюється у великий обʼєкт чи switch, що повертають імена класів.

cva - це проєкт, який має на меті допомогти вирішити проблему багатьох варіантів стилів. На його створення надихнули інші бібліотеки, які вирішують схожу проблему, але через CCS-in-JS. В даному випадку ви можете використовувати просто текстові імена класів (або ж TailwindCSS).

Спробувати ми ще не встигли, але виглядає справді цікаво!

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

#library

Winston & Axiom 📝

Зі своїми програмами треба вести себе як строгий наглядач - необхідно, щоб вони доповідали про кожен свій крок. А доповідати вони мають за допомогою логів. І чим більше логів, тим краще (допоки це не порушує конфіденційність, але сьогодні не про це). Рано чи пізно це дозволить вам відстежити критичні помилки в застосунку.

Якщо перше, що ви подумаєте, коли почуєте "Winston" - це сигарети, тоді ви ще не пробували цю бібліотеку для логування в Node.js. Тут ви зможете налаштувати різні рівні логування, формати виводу і (акцентуємо увагу сьогодні тут) різні транспорти, або ж те, куди будуть ці логи виводитись. Тобто ваш застосунок може виводити лише попередження та помилки в консоль, а весь список логів можна буде побачити, наприклад, у файлі.

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

Тому, радимо вам ознайомитись з Axiom - сервісом, якому ви можете надсилати свої логи і, найголовніше, працювати з ними. За допомогою Streams ви можете переглядати все в реальному часі. А от Datasets дозволять вам формувати складні запити для пошуку потрібних логів.

А ще, в Axiom є реалізований транспорт для Winston, отже, вам потрібно лише кілька рядків коду для інтеграції цього сервісу і можете продовжувати логувати все як і раніше.

👉 Читати документацію Winston
👉 Відкрити посилання на Axiom

#library

Is HTML a programming language? 🤨

Початок нового тижня і, щоб до кінця прокинутись, попрограмуємо на HTML. Насправді, ми довго тримались, але нарешті вирішили детальніше розглянути htmx. Так, так, саме htmx.

Сам по собі HTML може небагато, тому майже завжди в нас є JavaScript, а в більшості випадків - бібліотеки та фреймворки: jQuery, React, Angular, Vue…

htmx - це теж бібліотека JavaScript, проте вона має дещо інші ідеї. Одна з них - розширення функціоналу HTML. htmx зазвичай працює за допомогою атрибутів. Наприклад, додайте hx-post="/like" до <button />, щоб змусити кнопку відправляти POST запит за посиланням /like. Ще, тут дуже важлива відповідь сервера, адже саме шмат HTML, який сервер повертає буде додано в поточну сторінку. Інші атрибути, такі як hx-target чи hx-swap визначають, що саме і де потрібно замінити.

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

А ще, коли ми розповідали про shadcn/ui, то згадували рейтинг проектів, що отримали найбільшу кількість зірок за 2023. htmx посів 10 місце у загальному рейтингу і 2 місце серед front-end фреймворків/бібліотек після React.

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

Там є багато прикладів, які наглядно показують роботу htmx. А нижче ще додаємо короткий огляд від Fireship.

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

#library

React Email 📧

Хоч електронна пошта в рази швидша за будь-яку іншу доставку, в неї теж є багато обмежень.

Ще досі найпопулярніший і найбезпечніший спосіб верстки емейлів - табличний. На додачу, всі стилі мають бути inline. Ну нікому ж не хочеться з цим гратись. Тому існують різні бібліотеки/фреймворки, які полегшують процес верстки, наприклад, mjml. Проте, сьогодні поговоримо про інше, про ще одне місце куди засунули React.

React Email - колекція компонент та методів для створення емейлів з допомогою React та TypeScript. Ви можете писати свої компоненти, використовуючи деякі вже готові, такі як Column, Row, Img, Button та інші. Після цього з допомогою render методу можна перетворити їх у готовий до відправки html. З корисного, можна відрендерити компоненти не у html форматі, а plain text.

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

#library

Radash series ⛓️

Рік тому ми розповідали про бібліотеку radash, що є набором корисних функцій. Попри повторну згадку цієї бібліотеки, хочемо звернути увагу на окрему утиліту - series.

Часто в застосунках є впорядковані списки даних, елементи яких потребують таких методів як пошук попереднього чи наступного, пошук мінімального з двох або ж перестрибування на кілька елементів. Звісно, все це можна реалізувати вручну. Проте, просте обгортання цих даних в series надасть вам увесь цей список методів.

Функція підтримує елементи, які є обʼєктами, тому точно може знайти місце у ваших застосунках.

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

#library

qs 🔗

Часто в своїх API-запитах ми додаємо query-параметри. Їх використання може бути дуже різним: вказівка на сортування/фільтрування даних, значення форми за замовчуванням, посилання, яке потрібно відкрити наступним і тд. Так само і дані, які ви туди записуєте, можуть бути зовсім різними.

Бібліотека qs дозволяє серіалізувати/парсити query-параметри та надає різні варіанти конфігурацій. Тут можна використовувати і вкладені обʼєкти, і масиви. Серед конфігурацій можна, наприклад, дозволити пусті масиви, використовувати індекси в масивах чи крапку в обʼєктах.

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

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

#library

?n=u&q=s ❓

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

Але обробляти оце все - не найлегша робота. Потрібно парсити query параметри, реагувати на зміни і власне змінювати їх в посиланні, бажано через shallow роутинг (без перезавантаження сторінки).

Тож, якщо ви використовуєте Next.js, зверніть увагу на nuqs. Дуже проста і корисна бібліотека, яка дозволить працювати з query параметрами, як з звичайним станом в React.

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

#library

Framer Motion 🖼️

Щось ця бібліотека для React останнім часом часто зʼявляється у різних блогах чи рекомендаціях. З її допомогою можна легко реалізувати роботу анімації чи обробку жестів з гарною продуктивністю.

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

Якщо ви раніше використовували цю бібліотеку чи дуже полюбляєте анімувати веб-сторінки, діліться своїм враженням.

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

#library

Tailwind Variants 🧣
#post_from @vova_taras

Tailwind Variants - бібліотека, яка з допомогою Tailwind класів дозволяє будувати API для різних варіацій стилів. Вона має різний функціонал, як, наприклад, розширення стилів чи розділення їх на слоти.

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

#library

sherif 👮

Якщо ви працюєте з monorepo, то вважаємо, що цей пакет може стати вам як ніколи в нагоді.

Sherif - це лінтер, який допоможе вам знайти потенційні проблеми поміж ваших пакетів. Наприклад, він повідомить вас, якщо на проекті встановлені різні версії одного модуля у кількох ваших пакетах. Або може підказати вам перемістити @types/* у devDependencies.

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

#library

TailwindCSS container queries 🥡

Колись давно ми розповідали про Container Query в CSS. За даними Can I use майже 91% девайсів користувачів зможуть використовувати цей функціонал.

TailwindCSS з коробки не підтримує Container Query, але вони розробили окремий плагін, який дозволяє використовувати цей функціонал, майже так само, як ви використовуєте media-query.

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

#library

next-intl 🌐

Якщо ви працюєте з Next.js і вам потрібна багатомовність, зверніть увагу на бібліотеку next-intl. Вона підтримує форматування, має хорошу інтеграцію з TypeScript, роботу з датами та числами, а також підтримує обидва роутери: pages і app.

Ми зараз додаємо її до проєкту та поки всім задоволені! 💛

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

#library

Driver.js 🚖
#post_from @vova_taras

На багатьох веб-сайтах можна побачити підказки у вигляді інтерактивних підсвічувань кнопок чи форм. Такий гід по сайту може значно полегшити ознайомлення з функціоналом.

Driver.js — бібліотека, яка дозволяє легко створити подібний тур по вашому продукту, підкреслюючи ключові елементи. Краще один раз побачити, ніж десять разів прочитати, тож перегляньте демо-тур на офіційному сайті driver.js.

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

#library

Nice Modal 💅
#post_from @vova_taras

Робота з модальними вікнами в React може бути доволі дратівливою. Потрібно тримати стан (isOpen) і продумати способи закривання (як із зовнішньої компоненти, так і всередині самого вікна).

@ebay/nice-modal-react використовує трохи інший підхід до роботи з модальними вікнами. Ви можете просто викликати функцію show та передати в неї компонент із пропсами. Це не зовсім декларативний метод, але, на нашу думку, значно зручніший.

Також великим плюсом є робота через Promise. Якщо у вас коли-небудь було модальне вікно для підтвердження, і потрібно було передавати колбеки для onConfirm та onCancel, тепер можна просто повернути значення з функції виклику.

const modal = useModal(ConfirmationModal)

const onDelete = async () => {
  const confirmed = await modal.show({text: "Are you sure?"})

  if (confirmed) {
    ...
  }
}

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

#library

Query Key Factory 🏭

Останнім часом у нашому проєкті активно використовуємо Tanstack Query. Загалом, багато продуктів Tanstack виглядають дуже цікаво. Але сьогодні хочемо поговорити саме про Query, а точніше — про queryKey.

Все наче доволі просто - ключ до наших даних. Ми завжди прописували його прямо в useQuery:

const usePokemon = (id: string) => 
  useQuery({
    queryKey: ["pokemons", id],
    queryFn: () => PokemonService.getById(id),
  })

Якщо ж у нас є окремий хук для оновлення, після успішного завершення можна "змусити" useQuery перевантажити дані за певним ключем:

const useUpdatePokemon = (id: string) => {
  const client = useQueryClient()

  return useMutation({
    mutationFn: (name: string) => PokemonService.update(id, { name }),
    onSuccess: () => {
      client.invalidateQueries({ queryKey: ['pokemons', id] })
    },
  })
}

При виклику invalidateQueries потрібно передати queryKey. Якщо ми хочемо оновити конкретного покемона, потрібно вказати той самий ключ.

Схожа ситуація виникає, коли ви викликаєте prefetchQuery у серверній компоненті, щоб швидко завантажити дані для користувача.

Як це можна покращити? Одне з рішень - створювати та зберігати queryKey у певному обʼєкті. На сторінці Community Projects ми знайшли бібліотеку @lukemorales/query-key-factory. Вона містить кілька допоміжних функцій, які допоможуть організувати параметри для useQuery.

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

#library

UAParser.js 🧑‍💻

Іноді буває корисно дізнатися трохи більше про відвідувача вашого веб-сайту: який у нього браузер, операційна система чи навіть сам пристрій. Багато такої інформації міститься у User-Agent, і її можна отримати як на клієнті, так і з HTTP-заголовків запиту.

Але навряд чи ви захочете вручну розбирати щось таке:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Бібліотека UAParser.js допоможе вам розібрати User-Agent і витягти інформацію про браузер, процесор, пристрій та операційну систему.

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

#library

TanStack Form 📋

Ми вже багато розповідали про продукти від TanStack — у них уже сформувалася ціла екосистема. Нещодавно вони представили ще один інструмент — TanStack Form.

Його створення мотивували відсутністю вбудованих засобів для роботи з формами у багатьох фреймворках. Через це розробникам доводиться або писати власні рішення, або використовувати сторонні бібліотеки. TanStack Form має на меті вирішити проблеми продуктивності (згадуємо redux-form), складної валідації та композиції форм.

Ось простий приклад використання TanStack Form:

const form = useForm({
  defaultValues: { ... },
  onSubmit: async ({ value }) => { ... },
})

...

<form.Field
  name="firstName"
  validators={{
    onChange: ({ value }) => !value ? 'A first name is required' : undefined,
  }}
  children={(field) => (
    <>
      <label htmlFor={field.name}>First Name:</label>
      <input
        id={field.name}
        name={field.name}
        value={field.state.value}
        onBlur={field.handleBlur}
        onChange={(e) => field.handleChange(e.target.value)}
      />
      <FieldInfo field={field} />
    </>
  )}
/>

Завдяки використанню form.Field тут є гарна підтримка TypeScript, а також можна пропускати деякі пропси (аналогічно до <Controller control /> у react-hook-form).

Валідація підтримується як для всієї форми (через useForm, зокрема зі схемами типу zod), так і для окремих полів.

Що одразу привертає увагу - підхід через children. Полю передається функція, а не JSX-елементи. Команда TanStack у коментарях зазначає, що render-пропси - "great". А що думаєте ви?

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

#library

Radashi ⚙️

Колись ми розповідали про Radash — легку й корисну бібліотеку, яка містила багато зручних методів і могла стати альтернативою Lodash. Вона була оптимізованою для TypeScript мала меншу вагу, що робило її привабливим вибором для багатьох розробників.

Проте з часом підтримку Radash припинили. На щастя, з’явилася її дочірня бібліотека, яка продовжує розвиток проєкту та зберігає ключові переваги попередника. Вона, як і раніше, пропонує безліч утиліт, які можуть стати в пригоді в будь-якому проєкті. Тому, якщо ви шукали сучасну й легку альтернативу Lodash, варто звернути на неї увагу.

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

#library