#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 💛

#how_to оголосити тип глобальної змінної в TypeScript

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

Tailwind Variants 🧣
#post_from @vova_taras

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

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

#library

Віртуалізація списків 📋

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

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

Як це працює?

Потрібно розрахувати видиму область, визначити, скільки елементів поміщається у вікні. Також потрібно відслідковувати скрол, щоб визначити, які саме елементи повинні бути видимими.

Використання віртуалізації значно покращує продуктивність та досвід користувача при роботі з довгими списками.

#interview

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

Наприклад:
[1, 2, 3] => true
[1, 1, 1] => true
[1, 3, 2] => false
[1, 1, 2] => true