Welcome!

Let's practice our English! So...

👉 Where do you prefer to live - in a city or a village? 🌍

Have a nice #english_friday 💛

#how_to створити анімацію виділення тексту 💬

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

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

Is HTML a programming language? 🤨

Початок нового тижня і, щоб до кінця прокинутись, попрограмуємо на HTML. Насправді, ми довго тримались, але нарешті вирішили детальніше розглянути htmx. Так, так, саме htmx.

Сам по собі HTML може небагато, тому майже завжди в нас є JavaScript, а в більшості випадків - бібліотеки та фреймворки: jQuery, React, Angular, Vue…

htmx - це теж бібліотека JavaScript, проте вона має дещо інші ідеї. Одна з них - розширення функціоналу HTML. htmx зазвичай працює за допомогою атрибутів. Наприклад, додайте hx-post="/like" до <button />, щоб змусити кнопку відправляти POST запит за посиланням /like. Ще, тут дуже важлива відповідь сервера, адже саме шмат HTML, який сервер повертає буде додано в поточну сторінку. Інші атрибути, такі як hx-target чи hx-swap визначають, що саме і де потрібно замінити.

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

А ще, коли ми розповідали про shadcn/ui, то згадували рейтинг проектів, що отримали найбільшу кількість зірок за 2023. htmx посів 10 місце у загальному рейтингу і 2 місце серед front-end фреймворків/бібліотек після React.

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

Там є багато прикладів, які наглядно показують роботу htmx. А нижче ще додаємо короткий огляд від Fireship.

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

#library

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

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

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

#interview

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

Буває ж таке, що потрібно годинку повчитись літати на дроні, вибігти за кавою чи просто подивитись супермаму. Але ж треба світитись в 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