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 порефакторити код і пояснити, що з ним було не так.

Open Source Alternative To 👨‍💻

Ділимось крутим ресурсом, що допомагає знайти альтернативи програмному забезпеченню шляхом переліку відкритих аналогів. Сайт містить велику кількість категорій, серед яких "Офісні програми", "Мультимедіа", "Графічний дизайн", "Розробка програмного забезпечення" тощо. Кожна категорія містить перелік альтернатив з описом та посиланням на веб-сайти розробників.

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

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

#tips

Яка різниця між visibility:hidden та display:none? 🫣

Хмм.. Давно в нас не було CSS. Тому поїхали!

visibility:hidden і display:none - це два різних способи приховати елемент на веб-сторінці, але вони мають різні наслідки.

visibility:hidden приховує елемент, але зберігає його місце на сторінці, тому він все ще займає місце в документі, якщо розміри елемента не встановлені явно. Це означає, що інші елементи на сторінці знаходяться на своїх місцях так само, як би вони були розміщені, якщо прихований елемент все ще був видимим.

display:none, з іншого боку, повністю видаляє елемент з документа і забезпечує те, що він не займає місця на сторінці. Інші елементи на сторінці будуть зміщені, щоб заповнити простір, який залишив елемент, що був видалений.

Отже, вибір між visibility:hidden і display:none залежить від того, як ви хочете приховати елемент на сторінці і який вплив це має на інші елементи на сторінці.

#interview

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

Наприклад: "hello! what are you doing? i'm solving todo from Web Overflow." => "Hello! What are you doing? I'm solving todo from Web Overflow."

tRPC 📦

Давайте для початку розшифруємо.
tRPC - Typescript Remote Procedure Calls, або ж виклик віддалених процедур Typescript. Це альтернатива для REST, GraphQL та інших арітектур комунікації. При використанні tRPC все виглядає так, наче ви просто викликаєте серверну функцію з клієнта.

Які переваги є в такого підходу?
В першу чергу, ваші виклики є типізованими, відповідно все є безпечнішим і, зазвичай, простішим. Завдяки цим типам ви також отримуєте підказки у своєму редакторі чи IDE.

Але такий підхід підштовхує вас до використання monorepo чи навіть full-stack фреймворків. І ,звісно ж, примусовим є використання Typescript. А добре це чи ні - вирішувати вам.

З хорошого - в доступі є багато різних інтеграцій і доповнень з різними фреймворками та бібліотеками (Next.js, Remix, React Query, Svelte, Nuxt та інші).

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

#library

Hello, guys! ✨

Let's practice our English! So...

👉 How do you prepare for the interview? Do you have some plan?

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

Have a wonderful Friday! 💛

#english_friday

VIM Adventures 🕹️

Якщо ви хочете бути програмістом на всі 100500%, то ви, напевно, думали про те, щоб навчитись користуватись VIM. І ми можемо вам в цьому трішечки допомогти.

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

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

#tips