Tailwind-merge 👉👈

Сьогодні Tailwind чи не найпопулярніший спосіб стилізації веб-застосунків. І якщо ви використовували його з будь-яким компонентним фреймворком, то, швидше за все, відчували наступну проблему.

Уявімо, що у вас є свій компонент Button і за замовчуванням його фоновий колір - блакитний. Але ви ж хороший програміст, ваш компонент може бути перевикористаний з різними опціями. Тож в одному місці ви хочете отримати зелену кнопку, тому передаєте відповідний tailwind-клас.

Тепер у вас є два конфліктні класи і в результаті ви все одно бачите блакитну кнопку.

На щастя, існує бібліотека tailwind-merge, яка з легкістю вирішить вашу проблему. Вона автоматично надасть пріоритет тим класам, які прописані останніми, тож тепер ви зможете отримувати передбачувані стилі.

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

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

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

#library

Fern 🌿

Всі ми використовуємо різні API для свої проектів.

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

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

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

#library

Drizzle ORM 🤓

Рік тому ми розповідали вам про Prisma. Якщо хтось пропустив, читайте пост тут. Напевно, саме час розповісти і про іншу ORM 😅

Drizzle - це легка, швидка і типізована ORM. Чим вона може вас зацікавити? Тут сама задумка (ну і реалізація) побудована за принципом SQL-like. Тобто, якщо ви вже знаєте SQL, ви знаєте Drizzle.

Тут немає інших залежностей та кодогенерації та все працює одразу з діалектом SQL. Також тут вже все готово для роботи в різних середовищах (наприклад, serverless). Ну і все відправляється одним запитом (Prisma відправляє кілька запитів, якщо є join).

Тому, маєте ще один спосіб для роботи з базою даних у ваших Node.js застосунках.

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

#library

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