Welcome!

Let's practice our English! So...

👉 What was the last photo you took? Why did you take it?

Have a nice #english_friday 💛

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