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

#todo поділитись посиланням на свій GitHub профіль у коментарях

http.dev 💌

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

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

А щоб було трішки веселіше, ділимося з вами ресурсами, на яких ви зможете знайти різні HTTP-статуси ілюстровані картинками з котиками та собачками 🐱🐶 Вони ну прям дууужеее смішні!

👉 HTTP Cat
👉 HTTP Dog
👉 HTTP Dog 2

#article

Що таке CORS? 🛑

А скільки разів ви плакали через корси? 😅

CORS розшифровується як Cross-Origin Resource Sharing або ж спільне використання ресурсів з різних джерел. Це функція безпеки, яка дозволяє серверам захищати дані та ресурси. Сервери можуть контролювати, які домени можуть доступатись до цих ресурсів.

Уявіть собі ситуацію: заходите на сайт lox.com, щоб пограти в онлайн-казино. А там десь всередині захований скрипт, який робить запит на yourbank.com/transfer-all-money. Було б дуже недобре, якби банківський сервер дозволяв запити будь-звідки.

Якщо що, приклад притягнутий за вуха 🙉

Я б назвав CORS навіть комплексом захисту, адже в цьому беруть участь і сервери, і браузери користувачів. Якщо ви слідкуєте за запитами у своїх застосунках, то могли помітити, що перед виконанням деяких з них браузер відправляє ще один запит з методом OPTIONS. Такий запит ще називають preflight. За його допомогою браузер може зрозуміти, які методи та хедери можна відправляти на цей URL та чи допускається дане джерело (Origin) для такого запиту. І якщо у відповідь на OPTIONS ви отримали такі хедери, які не проходять цю "валідацію", оригінальний запит буде заблокований.

Якщо детальніше, то не на всі запити буде йти супутній preflight запит, і у таких випадках браузер не зможе заблокувати сам запит, АЛЕ він зможе заблокувати відповідь на нього.

Тож CORS - це справді важлива система захисту в мережі. І перед вами стоїть важливий вибір - або матюкатись на нього, або ж один раз сісти та вивчити даний підхід! 💛

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

#interview

#todo написати функцію на будь-якій мові програмування, яка на вхід приймає три числа: reg, green, blue, кожне з них у проміжку від 0 до 255, і на вихід повертає стрічку, що містить колір, закодований у hex-форматі.

Наприклад:
(255, 255, 255) ⇒ #ffffff
(0, 0, 0) ⇒ #000000
(1, 10, 100) ⇒ #010a64

TypeScript beta 🎉

Нещодавно було анонсовану бета версію TypeScript 5.1 🔥
І там є кілька досить важливих і хороших змін, про які вам потрібно знати.

Всі ми пам'ятаємо, що в JS функції, які не мають return, повертають undefined. Проте TypeScript використовує void як тип повернення і інколи з цим могли виникати проблеми. У новій версії такої проблеми більше не буде - TypeScript буде пропускати таке присвоєння типів.

Ще однією важливою зміною є розділення JSX елементів та їх типів (чи тегів, наприклад <Tag />). Зараз це працює приблизно так: ви можете використовувати функцію як елемент, якщо вона повертає JSX.Element.

const Component = () => <div />
<Component /> // ok, Component має тип () => JSX.Element

Приблизно така ж історія має бути з класами.

Проблема настає, якщо ви, наприклад, хочете спробувати React Server Components, і у вас функція компоненти асинхронна, що означає, що вона повертає Promise<JSX.Element>.

У новій версії, TypeScript виділяє окремий тип JSX.ElementType, який допоможе простим способом вирішити таку проблему.

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

#news

Welcome 👋

Let's practice our English! So...

👉 Tell us about funny/crazy things that people asked you to do because "You are a programmer"?

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

Have a nice Friday! 💛

#english_friday

NextAuth.js 🔑

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

NextAuth.js дозволяє вам дуже легко налаштовувати весь процес аутентифікації користувача. Там ви знайдете цілу купу різних провайдерів, за допомогою яких можна дозволити користувачу ввійти в систему. Мінімум коду та максимум функціоналу.

А якщо ви глянете на самий верх веб-сайту, то помітите, що кілька місяців тому NextAuth.js став Auth.js, і це означає, що більше не буде жорсткої привʼязки до Next.js.

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

#library

How To Prepare for Your Coding Interview in 10 Steps 💻

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

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

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

#interview