Web Overflow 🇺🇦


Kanal geosi va tili: Ukraina, Ukraincha


Затишний блог про веб-розробку і не тільки 💛
Чат: @web_overflow_chat
Співпраця: @web_overflow_support
Автори: @lluchkaa & @anastasiia_tarasenko

Связанные каналы

Kanal geosi va tili
Ukraina, Ukraincha
Statistika
Postlar filtri


Welcome!

Let's practice our English! So...

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

Have a nice #english_friday 💛


Learn Git Branching 🕊️

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

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

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

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

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

#tips

938 1 13 12 14

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


Якого кольору буде блок box після повного завантаження сторінки?
So‘rovnoma
  •   Червоного
  •   Блакитного
  •   Прозорий
410 ta ovoz


#quiz


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


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

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

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


Welcome!

Let's practice our English! So...

👉 What do you think about online friendship?

Have a nice #english_friday 💛


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

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

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

#news


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

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


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

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


Що виведе консоль?
So‘rovnoma
  •   1 1
  •   1 undefined
  •   1 void
  •   Нічого не виведе, буде помилка
270 ta ovoz


#quiz


as const 🤨

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

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

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

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

#shorts


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


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 💛


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

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

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

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

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

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

#tips


Що виведе консоль?
So‘rovnoma
  •   [ { count: 1 }, { count: 2 }, { count: 3 }, { count: 1 } ]
  •   [ { count: 0 }, { count: 1 }, { count: 2 }, { count: 0 } ]
  •   [ undefined, { count: 1 }, { count: 2 }, null ]
  •   [ undefined, { count: 2 }, { count: 3 }, null ]
303 ta ovoz


#quiz


Що відбувається у браузері, коли ви завантажуєте веб-сторінку? 🤔

Про DOM ви вже напевно знаєте, а от як браузер будує CSSOM та як це працює разом з DOM? Яким чином це все промальовується у вас на екрані та як можна полегшити роботу браузеру? Про це все ми вам не розкажемо, але розкаже Сергій Бабіч у своїй лекції.

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

#interview

20 ta oxirgi post ko‘rsatilgan.