ts-reset 0.6.0 🧽

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

Коротко пригадаємо, що це взагалі таке.

ts-reset - це як css-reset, тільки для TypeScript. З ним .filter(Boolean) повертатиме правильний тип, у вас не буде зайвих any від JSON.parse, а в includes можна буде передати будь-який string, навіть, якщо сам масив протипізований строгіше.

В останньому ж оновленні error в promise.catch має тип unknown, а не any, як раніше. Те саме стосується і Map, який створений без явного типізування:

const map = new Map()

map.get("key") // раніше any, тепер unknown

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

#news

Welcome!

Let's practice our English! So...

👉 If you could redesign any website or app, which one would it be and why?

Have a nice #english_friday 💛

#how_to додати більше одного ref до елемента в React? 👀

function mergeRefs<T = unknown>(
  ...refs: (React.MutableRefObject<T> | React.LegacyRef<T>)[]
): React.RefCallback<T> {
  return function (value) {
    refs.forEach((ref) => {
      if (typeof ref === 'function') {
        ref(value)
      } else if (ref !== null) {
        ;(ref as React.MutableRefObject<T | null>).current = value
      }
    })
  }
}

// Example
const forwardedRef: React.ForwardedRef<HTMLInputElement>
const localRef = useRef<HTMLInputElement>()

<input ref={mergeRefs(forwarderRef, localRef)} />

Next.js Conference 🎙️

24 жовтня 2024 відбудеться конференція Next.js. Поки точних деталей немає, але ми впевнені, що буде цікаво.

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

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

#news

🚀 Top 50+ React Interview Questions and Answers 2024

У цій статті було розглянуто питання на співбесіді з React, які охоплюють все, від базових до просунутих концепцій React, таких як Virtual DOM, компоненти, стан та пропси, JSX, хуки, маршрутизація та багато іншого. Незалежно від того, чи ви новачок, чи досвідчений розробник, дана стаття може стати вам в нагоді.

👉 Читати статтю

Зберігайте та користуйтесь 💛

#interview

#quiz
#post_from @MatiGreen

#todo розповісти про останню бібліотеку, яку ви додали до свого проекту або розбирались з нею 👀

React Email 3.0 📧

Ми вже розказували вам про цю бібліотеку раніше, але нещодавно на світ зʼявився реліз версії 3.

Кажуть, що відбувся великий приріст в продуктивності, підтримка компонент з React 19 та зовсім нові компоненти. Щодо останнього - це не все зовсім так, адже компоненти не було додано в саму бібліотеку, а лише на сайті, де ви просто можете CTRL+C CTRL+V код у свій проєкт. Підхід насправді непоганий, що вже довела бібліотека компонент snadcn/ui.

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

До речі, автор React Email також засновник Resend - платформи для відправки емейлів, та автор Dracula theme - доволі популярної теми серед розробників.

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

#news

Welcome!

Let's practice our English! So...

👉 If you could swap lives with someone for a week, who would it be and what would you do?

Have a nice #english_friday 💛

Prettify TypeScript: Better Type Previews 🤩

Коли працюєте з TypeScript і хочете підглянути, що ж за властивості є в певному типі, часто там можна побачити просто type AB = A & B, і треба копати далі, щоб просто дізнатись про існування кількох полів.

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

👉 Дивитись відео
👉 Відкрити посилання на розширення

#shorts

Framer Motion 🖼️

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

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

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

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

#library

"use server" ⚙️

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

У відео нижче автор розповідає як вони працюють та які небезпеки можуть на вас чекати.

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

#interview

#todo написати функцію на будь-якій мові програмування, яка приймає два параметри типу string та перевіряє чи є вони анаграмами (складаються з однакових літер, незалежно від регістру).

Наприклад:
silent, listen => true

Biome 📐

Не одними Prettier та ESlint.

Biome - це швидкий форматувальник та статичний аналізатор коду. Тобто він один може замінити і Prettier, і ESLint. Зʼявився він як fork від Rome, іншого схожого інструменту.

Зараз Biome підтримує приблизно 97% того, що робить Prettier і майже 270 правил з ESLint.

Ми самі подумуємо над переходом, а то щось надто довго проганяються усі перевірки на поточних інструментах. А що думаєте ви?

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

#tips

Welcome!

Let's practice our English! So...

👉 What’s the strangest thing you’ve ever eaten?

Have a nice #english_friday 💛