Web Overflow 🇺🇦

#how_to ввімкнути inlay підказки в VSCode

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

#shorts

Welcome!

Let's practice our English! So...

👉 If you could turn any activity into an Olympic sport, what would you choose so you have a good chance of winning?

Have a nice #english_friday 💛

sherif 👮

Якщо ви працюєте з monorepo, то вважаємо, що цей пакет може стати вам як ніколи в нагоді.

Sherif - це лінтер, який допоможе вам знайти потенційні проблеми поміж ваших пакетів. Наприклад, він повідомить вас, якщо на проекті встановлені різні версії одного модуля у кількох ваших пакетах. Або може підказати вам перемістити @types/* у devDependencies.

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

#library

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

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

#quiz

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

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

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

Як це працює?

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

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

#interview

Tailwind Variants 🧣
#post_from @vova_taras

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

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

#library

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

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

Welcome!

Let's practice our English! So...

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

Have a nice #english_friday 💛

Biome 📐

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

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

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

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

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

#tips

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

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

#quiz

"use server" ⚙️

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

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

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

#interview

Framer Motion 🖼️

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

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

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

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

#library

Prettify TypeScript: Better Type Previews 🤩

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

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

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

#shorts

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 💛