string & {} 🤯

Буває ж таке, що в TypeScript вам потрібно створити тип, який наче і може бути будь-яким рядком тексту, але ви б хотіли ще додати підказки від IDE про якісь певні варіанти. От, наприклад:

type Color = "primary" | "secondary" | string

Ось оцей | string все псує і через нього немає жодних підказок. Тому, ловіть спосіб, як це можна пофіксити:

type Color = "primary" | "secondary" | (string & {})

#tips

String as Component 🎭

А ви знали, що в React можна string відрендерити як компоненту?

const Component = "div";

return <Component>some content</Component>

Тут зовсім ніякої магії, просто JSX закриває від нас React.createElement.

Decorators in JS 🎄

І хоч в самій специфікації ECMAScript декоратори на стадії пропозиції та плану, їх вже можна спробувати завдяки TypeScript чи Babel.

Отож, що воно таке? Почнемо з маленьких аналогій. Якщо ви працювали з Python, то можливо вже зустрічали там декоратори, і там вони працюють десь з таким ж принципом. Або ж, можливо, ви вивчали патерни і зустрічали там однойменний структурний патерн. Мета декораторів - динамічно навішати певний функціонал. Стандартний приклад - вивести повідомлення перед початком виконання функції та після її завершення.

Синтаксис використання декораторів. Перед оголошенням класу, його методу чи властивості необхідно додати імʼя декоратора з префіксом @. Наприклад:

class Pokemon {
  @log
  attack() { }
}

Декоратори можуть створюватись динамічно, тому наступний синтаксис теж цілком можливий:

class Pokemon {
  @log({ level: "debug" })
  attack() { }
}

Як написати свої декоратори? Тут трохи більше деталей, тому ми думаємо, що краще використати документацію 🙂

Декоратори можна зустріти, наприклад, у NestJS, де зокрема з їх допомогою працює Dependency Injection.

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

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

#interview

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

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

?n=u&q=s ❓

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

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

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

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

#library

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 💛

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

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

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

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

Що таке 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

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

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