Що таке 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

#todo написати функцію на будь-якій мові програмування, яка на вхід приймає масив обʼєктів типу { "id": string } і на вихід повертає обʼєкт/map/dictionary, де ключ - це id елемента, а значення - це сам елемент.

Наприклад:
[{ "id": "1" }, { "id": "2" }] ⇒ { "1": { "id": "1" }, "2": { "id": "2" }}

Google I/O 2023 🎉

Вчора пройшла Google I/O 2023 презентація і було продемонструвано багато цікавих оновлень.

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

Розвиток відбувся не тільки у самому ШІ, Google буде інтегрувати його в свої сервіси, що полегшить роботу користувачам.

Також Bard став доступним у більш ніж 180 країнах (України там немає 😡). А якщо ви живете в США, то взагалі можете спробувати ШІ, який вбудований у стандартний пошуковик Google.

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

Загалом, цікаво буде всім 💛

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

#news

Welcome 👋

Let's practice our English! So...

👉 Do you think diploma is important for programmer and why?

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

Have a nice Friday! 💛

#english_friday

Що таке Big O? 😮

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

Давайте пройдемось по прикладах:

O(1) - постійний час: алгоритм займає постійну кількість часу або пам'яті, незалежно від розміру вхідних даних. Наприклад, час діставання першого елемента з масиву не залежить від його розміру.

O(log n) - логарифмічний час. Зазвичай спостерігається в алгоритмах, які багаторазово ділять вхідні дані навпіл, наприклад, у двійковому пошуку. Коли розмір вхідних даних подвоюється, алгоритму потрібно виконувати лише постійну кількість додаткових операцій.

O(n) - лінійний час: час виконання алгоритму або використання памʼяті зростає лінійно зі збільшенням розміру вхідних даних. Найпростіший приклад - перебір усіх елементів у масиві.

O(n^2) - Квадратичний час: час виконання алгоритму або використання пам'яті зростає квадратично зі збільшенням розміру вхідних даних. Така складність спостерігається у алгоритмах з вкладеними циклами, наприклад, бульбашкове сортування чи сортування вибіркою. Відповідно, при трьох вкладених циклах складність буде O(n^3) і тд.

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

#interview

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

* завдання з зірочкою - пройтись по масиву тільки один раз 😉

Наприклад:
[1, 2, 3], 4 ⇒ true
[1, 2, 3], 5 ⇒ true
[1, 2, 3], 6 ⇒ false

Welcome 👋

Let's practice our English! So...

👉 What is the best advice you've ever heard about programming learning?

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

Have a nice Friday! 💛

#english_friday

IT-Alias 🧩

Пропонуємо зіграти в alias, суть якої, полягає в поясненні слова іншим партнерам, не вживаючи самого слова.

Правила наступні: хто перший відгадав, той пояснює наступний ІТ-термін. Прохання до тих, чия черга загадувати - будьте на звʼязку, допоки хід не перейде до наступної людини 💛

Тож почнемо: css-властивість, яка спадає на думку, коли налили забагато води в стакан.

Маємо для вас невеличке оновлення! 🫣

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

Як це буде відбуватись?

Ви надсилаєте свій пост до нас в @web_overflow_support і ми будемо публікувати його в канал. Звичайно, він може підлягатись невеличкому редагуванню і перевірці на актуальність. Пости будуть маркуватись хештегом #post_from, після якого буде вказано ваш нік в телеграмі.

Навіщо це нам?

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

Тому давайте ділитись знаннями та розвиватись разом! 💛