Хей-хей 👋

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

Привііііт 👋

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

#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

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

TanStack Table 🤩

Неодноразово прилітали питання в чат, яку бібліотеку для створення та відображення таблиць в застосунках можна використовувати. Тому ділимось з вами тією, яку перевірили на власних проектах. І це - TanStack Table.

Вона дозволяє легко налаштувати таблиці з можливістю сортування, фільтрації, пошуку, пагінації та інших опцій. Ця бібліотека допомагає зменшити складність коду для створення таблиць, забезпечує високу продуктивність. А ще, її можна використовувати в React, Vue, Svelte, Solid та взагалі на чистому JS/TS 🔥. Тому TanStack Table - це потужний інструмент для роботи з даними у веб-застосунках.

І взагалі, радимо переглянути бібліотеки від TanStack, сподіваємось, знайдете для себе ще щось цікаве! 💛

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

#library

Welcome 👋

Let's practice our English! So...

👉 Tell us have you ever experienced bullying/rude behaviour at you job/courses/studying?

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

Have a nice Friday! 💛

#english_friday

create-t3-app 🔥

Наступний раз, коли будете починати свій проект, зверніть увагу на create-t3-app. Метою розробників цієї програми було просте створення застосунку на Next.js фреймворку з деякими основними принципами.

Які тут є переваги? Як обовʼязковий мінімум у вас буде Next.js у парі з TypeScript. На старті ви також отримаєте можливість додати деякі основні речі в свій репозиторій, такі як NextAuth, tRPC, Prisma чи Tailwind. Все це звісно є необовʼязковим, але це те, що дійсно може стати в нагоді при розробці full-stack застосунку.

Так-так, саме full-stack, адже Next.js підтримує серверні функції. Комбінація Prisma та tRPC робить їх написання дуже зручним, де Prisma відповідає за роботу з базою даних, а tRPC - за комунікацію клієнта та сервера.

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

Тому, дуже радимо вам дати шанс create-t3-app при створенні наступного застосунку.

👉 Читати документацію
👉 Дивитись відео

#tips

#todo порефакторити код і пояснити, що з ним було не так.