Як прохалявити? 🛀

Буває ж таке, що потрібно годинку повчитись літати на дроні, вибігти за кавою чи просто подивитись супермаму. Але ж треба світитись в Slack, щоб начальник не дав по шапці. Тому потрібно, щоб компʼютер не переходив в режим сну, а ще краще симулював роботу користувача (рухав мишкою чи натискав клавішу).

caffeinate - команда для Mac, яка запобігає входу компʼютера в режим сну. Додайте ще параметри -disu, щоб все гарно працювало в режимі роботи від батареї. Деякі Linux дистрибутиви також мають схожу утиліту, під назвою caffeine.

Проте цієї команди може бути замало, тому можна ще встановити програми, що рухають мишкою. Наприклад, Move Mouse, прямо з Windows Store. А на Linux можна симулювати натискання клавіші (наприклад, Left Shift) за допомогою xdotool (xdotool keydown Shift_L keyup Shift_L).

Це такий мінімум, тому діліться ще своїми методами в коментарях ⬇️

Тільки ми вам нічого не казали 🤫

#tips

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