Welcome!

Let's practice our English! So...

👉 Do you have a tattoo? How do you feel about it in general?

Have a nice #english_friday 💛

Чи буде валідним цей TypeScript код?

as const 🤨

Для тих, хто клікнув на "👍 Так" у попередньому пості, радимо переглянути коротке відео з поясненням. Воно дає зрозуміти, чому TypeScript такий строгий стосовно типів у такому коді.

👉 Дивитись відео

А для того, щоб краще розібратись з конструкцією as const у TypeScript, дивіться повне відео.

👉 Дивитись відео

#shorts

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

Наприклад:
["Like"] => "Like"
["Like", "Like"] => "None"
["Like", "Dislike"] => "Dislike"
["Like", "Dislike", "Like"] => "Like"
["Like", "Dislike", "Dislike"] => "None"

Вічно можна дивитись на 3 речі: вогонь, воду і як програміст налаштовує своє робоче середовище.

Діліться в коментарях, які теми в середовищах розробки ви використовуєте. А ще краще - додайте скріншот, можливо хтось перейде на вашу сторону 😈

Час порухати мізками! 🤯

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

👉 Зіграти в гру

#news

Welcome!

Let's practice our English! So...

👉 What do you think about online friendship?

Have a nice #english_friday 💛

#how_to створити CSS Typing Effect 📝

Виконаний з допомогою HTML та CSS!

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

Hydration 💦

Де знаходиться ваша відправна точка у React-застосунку? Якщо це клієнтський варіант - то це напевно буде index.ts файл, у якому буде викликано React.createRoot. Тут багато гадати не треба, цей метод отримує HTML-елемент, в який потім присобачить ваш React елемент за допомогою render методу.

А що відбувається, коли ми використовуємо серверний рендеринг (наприклад, через Next.js чи Remix)? Адже нам вже повертається готовий HTML, тож його теж потрібно якось використати. Цим займається процес hydration. Його мета - прикріпити React до вже існуючого HTML, щоб вкінці ми отримали інтерактивну сторінку. А для цього нам треба вже мінімальна кількість JS, який займеться event listener-ами чи іншою логікою застосунку.

Hydration викликається з допомогою іншого методу з React - hydrateRoot. Часто фреймворки викликають hydrateRoot замість вас, щоб не займати вас цією роботою.

Що ще потрібно знати - неспівпадіння вашого серверного HTML з React-деревом в процесі hydration буде трактуватись як помилка. Тому з цим треба бути обережним і використовувати певні техніки, такі як isMounted чи suppressHydrationWarning.

👉 Читати про hydrateRoot

#interview

#todo написати функцію на будь-якій мові програмування, яка приймає корінь дерева та повертає число, що відповідає максимальній глибині цього дерева 🌴

Learn Git Branching 🕊️

Ми прийшли вам нагадати, що знати Git дуже важливо!

Від Git ви не втечете. З ним доведеться працювати точно, але чим раніше - тим краще. 90% роботи з Git ви закриєте списком з ~10 команд, а то і менше. Навчитесь розуміти ці команди і буде вам щастя.

Ми самі зараз перепроходимо рівні в Learn Git Branching, щоб трішки освіжитись. З останнього разу як ми туди заходили тут додали роботу з remote, що точно теж вам знадобиться.

А ще, є режим пісочниці, отже можна просто гратись і практикувати свої знання Git.

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

#tips

Welcome!

Let's practice our English! So...

👉 Did you have any non-IT jobs? Tell us about that.

Have a nice #english_friday 💛

Що виведе консоль? 🙈

Next.js fallback 'blocking' 🧱

На проєкті ми використовуємо Next.js і деплоїмо застосунок на Vercel. І в певний момент проєкт перестав деплоїтись на сервер (при тому, що build проходив без проблем). Жодних деталей помилки ми знайти не могли, просто unknown error. Найвеселіше те, що спроба збілдити і задеплоїти старіші коміти теж викидала помилку.

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

getStaticPaths дозволяє повернути параметр fallback, який може бути false, true або "blocking". Якщо ви повернете false, тоді всі шляхи, які не повернулись з цієї функції будуть повертати 404. А от якщо повернути "blocking", то Next.js спробує зарендерити цю сторінку при першому запиті, і у разі успіху, збереже її у кеші. Отож, тепер ми генеруємо невелику кількість сторінок, проте, як тільки хтось спробує відкрити сторінку, яка ще не згенерована, але дані для якої існують, Next.js одразу створить все необхідне.

#experience

Що таке Content Delivery Network (CDN) і як це працює? 🕸️

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

CDN дозволяє кешувати контент, який він надає, відповідно сторінки, шрифти чи js-скрипти можуть просто перевикористовуватись із кешу. Також в результаті зменшується навантаження на оригінальні сервери.

#interview