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

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

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

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

Що таке service workers? 👨‍🔧

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

Давайте розглянемо деякі особливості роботи service workers:

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

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

Офлайн-підтримка. Це одна з великих переваг service workers. Кешуючи HTML, CSS, JS та інші ресурси веб-сторінки, ви можете забезпечити її завантаження навіть за умови відсутності зʼєднання з мережею.

Push-сповіщення. Завдяки фоновому режиму роботи, service-worker може отримувати сповіщення від серверу та показувати їх користувачеві, навіть коли сторінка невідкрита, подібно до нативних застосунків.

Загалом, service workers - це потужний механізм для вдосконалення веб-застосунків, що робить їх важливою частиною розробки.

#interview

#todo знайти всі локації неподалік 🗺

Потрібно написати функцію на будь-якій мові програмування, яка на вхід приймає масив локацій типу { lat: number; lng: number }, поточну локацію типу { lat: number; lng: number } та радіус числового типу. Функція має повернути відфільтровані локації, які знаходяться у даному радіусі від поточної локації.