Web Overflow 🇺🇦

React Email 3.0 📧

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

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

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

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

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

#news

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

#quiz
#post_from @MatiGreen

🚀 Top 50+ React Interview Questions and Answers 2024

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

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

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

#interview

Next.js Conference 🎙️

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

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

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

#news

#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)} />

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 💛

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

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

#quiz

Що таке lock-файли та як з ними працювати? 🔒

В своїх проєктах ви часто можете помітити файл з назвою package-lock.json, yarn.lock, pnpm-lock.yaml чи bun.lockb. Ці файли містять зафіксовані версії всіх залежностей вашого проєкту, включно з версіями всіх підзалежностей. Це своєрідний "знімок" стану ваших залежностей у певний момент часу.

Нехай у вас у package.json зазначено, що вам потрібна залежність x версії ^1.0.0. Це означає, що використовуватись може будь-яка версія, сумісна з 1.0.0, наприклад 1.1.0 чи 1.0.1. Lock-файл зафіксує конкретну версію (наприклад 1.0.1) і це гарантує, що всі розробники чи сервери будуть використовувати точно цю ж саму версію.

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

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

#interview

З Днем Незалежності, рідна 💙💛

#how_to створити shimmer wave text animation 🎉

Виконаний з допомогою HTML, SASS і JavaScript!

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

Welcome!

Let's practice our English! So...

👉 If you could spend a day with any historical figure, who would it be and why?

Have a nice #english_friday 💛

?n=u&q=s ❓

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

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

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

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

#library

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

❗️Обовʼязкова умова - не використовувати сортування.