Tailwind Variants 🧣
#post_from @vova_taras

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

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

#library

Deno 2 🦖
#post_from @vova_taras

Deno існує вже досить давно, але супер-великої популярності він не здобув, адже мав низку проблем/мінусів. Одним з них була відсутність підтримки npm-пакетів. Але ось нещодавно творець Node.js та Deno представив Deno версії 2, в якій ця проблема була вирішена.

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

Ну і для ознайомлення, додаємо відео від Fireship.

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

#news

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