Web Overflow 🇺🇦

#quiz

#how_to створити Confetti Button 🎉

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

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

Welcome!

Let's practice our English! So...

👉 If you had your own business, what area would it be related to?

Have a nice #english_friday 💛

Tailwind CSS v2.0 💅

Вам може подобатись CSS, а може і не подобатись, може подобатись лише Bootstrap, MUI чи CSS-in-JS. Але світ такий, що найпопулярніший підхід зараз - це TailwindCSS. А якщо ви як @Yurets7777 пропускали пости про цей CSS-фреймворк, це означає, що точно потрібно наздоганяти.

На щастя, Max Alekseyev (хотіли нормально тегнути, але немає username 🥲) поділився в чаті офіційним плей-листом, де ви швидко та без води можете ознайомитись з TailwindCSS. Хоч там і друга версія, суть залишилась та сама.

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

#tips

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

Тип вузла:

type Node<T> = {
  value: T;
  next?: Node<T>;
}

#quiz

JavaScript ASI 🥴

Просто шматок коректного TypeScript коду:

;(variable as string).toLowerCase()

Насправді, таке ж можна знайти і в JavaScript. Для тих, кому цікава причина такого дивного форматування, додаємо посилання на коротке відео з поясненням.

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

#shorts

Bongo Cat Buddy 🙀

Котики завжди роблять речі кращими. Одного разу кіт пробігся по клавіатурі і тепер так звуть дитину Маска 😹

Ділимося з вами розширенням Bongo Cat Buddy, яке не дозволить вам засумувати. Котик буде стукати лапкою з вами в такт. Тому баги, які ви фіксаєте, вже не виглядатимуть такими страшними і серйозними.

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

#tips

#how_to створити Infinite Scroll Animation ♾️

Виконаний з допомогою React та SCSS!

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

Welcome!

Let's practice our English! So...

👉 What habits would you like to give up?

Have a nice #english_friday 💛

Як додати перевірку свого коду на GitHub Actions? 🌩️

Припустимо, що ваш застосунок написаний на JavaScript. Якщо ж ви використовуєте іншу мову, можете теж використовувати цей підхід, потрібно буде лише замінити скрипт перевірки. Отож, уявіть себе девопсом yaml-розробником і почнімо.

Власне, перед початком налаштовування GitHub Action ми зазвичай робимо ще одну річ - додаємо власний скрипт в package.json, який трохи спростить використання і запуск команди. Найчастіше ми додаємо там перевірку форматування через prettier та статичний аналіз з допомогою eslint та tsc. Виглядає це приблизно отак:

"scripts": {
  "check": "prettier --check . && eslint . && tsc --noEmit"
}

Для початку в корені свого проєкту потрібно створити директорію .github, всередині якої ще одну з назвою workflows. Тут ми і будемо розміщувати свій файл конфігурації. Створимо цей файл і дамо йому назву check.yml.

Якщо ви не знайомі з YAML, це як JSON на Python. Головне слідкуйте за відступами.

Почнемо з імені, додайте у файл:

name: Run web check

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

on:
  workflow_dispatch: # вручну на GitHub
  push: # при push в репозиторій

Почнімо ж нарешті описувати кроки перевірок. Створимо job з іменем check. Запускати це все ми будемо на останній ubuntu, а першим кроком додамо клонування вашого репозиторію.

jobs:
  check:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

Отож, на цій машині вже є наш репозиторій. А на ubuntu одразу встановлений Node.js? Не знаємо, тому краще встановити його. На всяк випадок вкажемо версію Node.js. А ще, GitHub сам вміє кешувати модулі Node.js, тому скажемо йому робити це також.

      - name: Setup Node.js 20
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

Ну тепер Node.js точно є, але немає node_modules. Ну це вже дуже просто, всі ми знаємо потрібну команду.

      - name: Install dependencies
        run: npm install

Нарешті, все готово, залишилось тільки запустити нашу перевірку. Оскільки ми вже підготували потрібний скрипт, просто запустимо його.

      - name: Run check
        run: npm run check

Усе це разом, а також з невеличким налаштуванням pnpm, concurrency, strategy та монорепо (Node.js застосунок знаходиться не в корені проєкту), можна знайти за посиланням нижче.
👉 Відкрити файл

Щоб більше почитати про GitHub Actions використовуйте посилання внизу. А від @MatiGreen чекаємо повідомлення про те, як зробити те саме на GitLab 😉
👉 Відкрити посилання

#article

#todo написати функцію на будь-якій мові програмування, яка приймає масив чисел у проміжку [0, 100]. Функція має повернути обʼєкт/map/словник з погрупованими числами за кількістю десятків та сформувати ключі у вигляді "0-9", "10-19", "20-29" і т.д.

#quiz

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

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

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

#interview

Next.js fallback 'blocking' 🧱

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

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

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

#experience

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

Welcome!

Let's practice our English! So...

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

Have a nice #english_friday 💛