Що таке React Suspense?

Памʼятаємо, що в React 18 нам підвезли concurrent mode, який може паралельно рендерити ваші компоненти.

React Suspense - це компонента, яка дозволяє показувати резервний варіант (наприклад, індикатор завантаження), поки його дочірні компоненти ще завантажуються. Виглядає це приблизно отак:

<Suspense fallback={<p>loading…</p>}>
<Children />
</Suspense>

Зараз такий функціонал використовується у двох випадках: для компонент, які обгорнуті в React.lazy, та у таких фреймворках як Next.js, Remix чи Relay. Проте з часом планують додавати нові способи використання Suspense.

👉 Читати більше

А ще, забігаючи наперед, в експериментальній версії React ви вже можете спробувати нові хуки: use та useEffectEvent. Звісно, вони ще можуть сильно змінитись, але ви вже можете слідкувати за їх розробкою.

А от саме хук use працює у парі з Suspense і дозволяє дочекатись завантаження ваших даних.

👉 Дивитись відео про use
👉 Дивитись відео про useEffectEvent

#interview

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

Наприклад:
[1, 2, 3, 4, 5], N=1 => [5, 1, 2, 3, 4]
[1, 2, 3, 4, 5], N=2 => [4, 5, 1, 2, 3]

Bard ✨

На днях я отримав доступ до Bard - чат з штучним інтелектом від Google. Зараз він працює тільки в США та Об'єднаному Королівстві. Це ще досі експерементальний режим, проте цікаво, куди це все піде з урахуванням баз даних Google.

І ще коротка новина: Ілон Маск, Стів Возняк та інші відомі люди, які мають відношення до даної індустрії, написали листа з проханням призупинити розробки систем ШІ через ризики 🤔

#news

Welcome 👋

Let's practice our English! So...

👉 Tell us about stereotypes about programmers that you think are truth/lie.

Як завжди, можете писати свої відповіді тут або в чаті.

Have a nice Friday! 💛

#english_friday

Jotai 👻

Ще тільки недавно ми розповідали про Zustand, а сьогодні ділимося новим і дуже схожим допоміжним інструментом.

Jotai - бібліотека React, що використовує атомарний підхід до роботи з глобальним станом. З нею ви зможете відчутно зменшити кількість простих Context у своїх застосунках. Створіть атом у глобальному просторі і використовуйте його за допомогою useAtom.

Також ви отримуєте багато різних допоміжних утиліт, наприклад: зберігання стану в localStorage/sessionStorage, робота з асинхронними даними та інші.

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

#tips

Хей-хей 👋

Друзі, беремо на тиждень відпустку. Хочемо набратися сил і повернутись до вас з новими ідеями та корисними матеріалами. У разі чого, ми завжди на звʼязку в чаті 💛

Привііііт 👋

Дуже за вами сумували! І за традицією тиждень починаємо з цікавої задачки 💛

#todo знайти приховану помилку в коді, пояснити та виправити її.

ts-reset 🧽

Якщо ви працюєте з TypeScript, ви могли помітити, що в деяких місцях він присвоює неочікувані типи. Не завжди виходить отримати бажаний тип, коли використовуєте .filter метод з Boolean, або коли хочете перевіряти константний масив на деякі значення, або коли виконуєте JSON.parse і отримуєте any, тощо.

Matt Pocock створив корисний модуль, який допоможе вам виправити такі помилки. Все, що потрібно зробити - додати один імпорт в свій застосунок. Ви навіть можете інсталювати цей модуль як devDependency, адже в ньому містяться лише типи.

Співіснуйте з TypeScript в гармонії 💛

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

#library

Що таке webhooks? 🪝

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

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

Ще такий спосіб дуже зручний для створення різних автоматизацій та інтеграцій. Тому, багато сучасних застосунків підтримують веб-хуки і ви легко можете додавати свій функціонал.

#interview

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

Наприклад:
[1, 2, 3, 4, 5], N=1 => [[1], [2], [3], [4], [5]]
[1, 2, 3, 4, 5], N=2 => [[1, 2], [3, 4], [5]]
[1, 2, 3, 4, 5], N=3 => [[1, 2, 3], [4, 5]]

Програмістом можна стати самостійно, частина 2 💻

Колись ми робили підбірку з корисними платформами, які точно зайдуть новачкам. Сьогодні хочемо доповнити її, щоб запевнити вас, що навчитись програмувати самостійно більше, ніж реально!

👉 Читати частину 1

Ну що ж, почнемо:

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

MDN - це веб-сайт з документаціями, статтями та ресурсами для веб-розробників. Сайт містить детальну інформацію з веб-технологій, таких як HTML, CSS, JavaScript, Web APIs та інших.

JavaScript.info - це один з найкращих ресурсів для вивчення мови програмування JavaScript, який містить велику кількість матеріалів на різні теми, включаючи основи програмування, взаємодію з HTML та CSS, об'єктно-орієнтоване програмування та інші техніки.

А ще, давайте не забувати, що під час вивчення програмування дуже важлива дисципліна та покроковий план. Тому нагадуємо про Roadmaps, в якому зібрані готові роадмапи на безліч сфер в ІТ.

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

#tips

Chakra UI ⚡️

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

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

Загалом, Chakra UI - це потужна та проста у використанні бібліотека для створення сучасних веб-додатків, яка за останні роки набула великої популярності у React-спільноті.

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

#library

Welcome 👋

Let's practice our English! So...

👉 Tell us about your life hacks that help you to focus on studying/working.

Як завжди, можете писати свої відповіді тут або в чаті.

Have a nice Friday! 💛

#english_friday

В нас з'явилась ідея! 💡

Ідея створити свій Discord сервер!
Тому, нам цікаво, чи вам це буде актуально.

Для чого це? 🤔

- окреме середовище для спілкування;
- чат з музикою, яка допоможе фокусуватись на роботі/навчанні;
- чат з розвагами (будемо грати в gartic phone чи шахи, дивитись разом супермаму 😅 та інше);
- окремий чат для допомоги з різними тасками;
- зможемо ідентифікувати стек та досвід кожного учасника за ролями, тощо.

Прикріплюємо опитування нижче 💛

🚀 30+ Top Node.js Interview Questions and Answers

Ділимось з вами корисною шпаргалкою по Node.js, яка містить понад 30 найрізноманітніших питань та відповідей на них! З нею ви зможете легко підготуватись до будь-якої співбесіди.

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

#interview