Щось ми зовсім забули про найголовнішу мережу!

#todo поділитись своїм профілем на LinkedIn 🤓

Парадокс бета-регіону 🤓

Парадокс бета регіону полягає у тому, що іноді гірші ситуації дозволяють людині швидше відновитись/покращити ситуацію.

Наприклад, вам потрібно подолати 1 км. Ви швидше за все оберете пішу ходу для цього і витратите, нехай, 15 хв. Коли ж потрібно подолати 2 км, ви схилитесь до вибору велосипеду, і подолаєте цю відстань за 10 хв. Виходить, що відстань - довша, а часу витрачено менше.

Інший приклад: якщо персона X орендує квартиру, в якій поганий напір води, дуже висока ймовірність, що вона нічого змінювати не буде, адже для чого змінювати цілу квартиру через це. Проте, якщо б води не було зовсім, дії почнуться одразу.

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

А що ви думаєте з цього приводу? Чи помічали подібне у власному житті?

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

#localhost

Welcome!

Let's practice our English! So...

👉 If AI could automate one task in your life, what would you choose?

Have a nice #english_friday 💛

TailwindCSS v4 💅

Чи не найпопулярніший на сьогодні інструмент для стилізації вебу отримав оновлення. Багато змін спрямовані саме на покращення DX: встановлення стало простішим, а робота — швидшою.

Одне з важливих оновлень — container query. Раніше його потрібно було додавати як плагін, а тепер він доступний одразу.

Змінилася робота з динамічними значеннями, тож якщо використовуєте grid, ви точно це помітите.

І, варто додати, що в чаті ці новини зʼявляються швидше. Тож долучайтеся і туди!

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

#news

#todo написати функцію на будь-якій мові програмування, яка приймає масив чисел arr та число N. Функція має повернути масив, кожен елемент якого є підмасивом розміром N. Винятком є останній підмасив, який може мати розмір [1, N]. Порядок усіх чисел має зберігатись.

Наприклад:

[1, 2, 3, 4, 5, 6, 7, 8, 9], 3 => [[1, 2, 3], [4, 5, 6], [7, 8,9]]
[1, 2, 3, 4, 5, 6, 7, 8, 9], 2 => [[1, 2], [3, 4], [5, 6], [7, 8], [9]]

Welcome!

Let's practice our English! So...

👉 What’s one common IT myth you think needs to be debunked?

Have a nice #english_friday 💛

AI Code Editors 🤖

Так, так, це вже далеко не нова річ. Просто або воно нам не подобається, або ми ще не доросли до цього. Я іноді використовую ChatGPT і працюю в VS Code + Copilot. Юра теж часом шукає щось у ChatGPT, працює у vim і досі налаштовує Copilot.

Ми знаємо, що кілька людей з нашої команди використовують AI-обгортки для VS Code — Cursor та Trae.

Як ви вже зрозуміли, ми не надто заглиблювалися в цю тему, тому нам цікава саме ваша думка. Чи варто спробувати щось із цього?

#localhost

Query Key Factory 🏭

Останнім часом у нашому проєкті активно використовуємо Tanstack Query. Загалом, багато продуктів Tanstack виглядають дуже цікаво. Але сьогодні хочемо поговорити саме про Query, а точніше — про queryKey.

Все наче доволі просто - ключ до наших даних. Ми завжди прописували його прямо в useQuery:

const usePokemon = (id: string) => 
  useQuery({
    queryKey: ["pokemons", id],
    queryFn: () => PokemonService.getById(id),
  })

Якщо ж у нас є окремий хук для оновлення, після успішного завершення можна "змусити" useQuery перевантажити дані за певним ключем:

const useUpdatePokemon = (id: string) => {
  const client = useQueryClient()

  return useMutation({
    mutationFn: (name: string) => PokemonService.update(id, { name }),
    onSuccess: () => {
      client.invalidateQueries({ queryKey: ['pokemons', id] })
    },
  })
}

При виклику invalidateQueries потрібно передати queryKey. Якщо ми хочемо оновити конкретного покемона, потрібно вказати той самий ключ.

Схожа ситуація виникає, коли ви викликаєте prefetchQuery у серверній компоненті, щоб швидко завантажити дані для користувача.

Як це можна покращити? Одне з рішень - створювати та зберігати queryKey у певному обʼєкті. На сторінці Community Projects ми знайшли бібліотеку @lukemorales/query-key-factory. Вона містить кілька допоміжних функцій, які допоможуть організувати параметри для useQuery.

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

#library

#todo знайти баг та виправити помилку 🤓

UAParser.js 🧑‍💻

Іноді буває корисно дізнатися трохи більше про відвідувача вашого веб-сайту: який у нього браузер, операційна система чи навіть сам пристрій. Багато такої інформації міститься у User-Agent, і її можна отримати як на клієнті, так і з HTTP-заголовків запиту.

Але навряд чи ви захочете вручну розбирати щось таке:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Бібліотека UAParser.js допоможе вам розібрати User-Agent і витягти інформацію про браузер, процесор, пристрій та операційну систему.

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

#library

Welcome!

Let's practice our English! So...

❤️ How do you plan to spend Valentine’s Day?

Have a nice #english_friday ❤️

#how_to увімкнути автоформатування коду.

👉 VS Code
👉 JetBrains

WebP to PNG 🥴

У нашому проєкті виникла потреба генерувати PDF-файли. Для цього ми використовуємо бібліотеку react-pdf - інструмент для створення PDF. Працювати над таким типом завдань — це ще той квест, тому краще оминайте такі задачі.

Нам потрібно вставляти динамічні зображення (на даний момент підтримуємо лише JPG, PNG та WebP). Ми розчарувалися, коли виявилося, що PDF не підтримує формат WebP, а обробка таких зображень була надзвичайно необхідною.

Тому ми обрали, мабуть, найпростішу та найшвидшу стратегію — відмалювати WebP-зображення на canvas і отримати з нього PNG. Виглядає код приблизно так:

function toPNGUsingCavas(src: string) {
  const image = new Image()

  const { promise, resolve, reject } = Promise.withResolvers<string>()

  image.onload = function () {
    const canvas = document.createElement('canvas')
    canvas.width = image.naturalWidth
    canvas.height = image.naturalHeight

    const context = canvas.getContext('2d')
    if (!context) {
      reject(new Error('Could not get canvas context'))
    } else {
      context.drawImage(image, 0, 0)
      resolve(canvas.toDataURL('image/png'))
    }
  }

  image.onerror = reject

  image.src = src

  return promise
}

Тут, до речі, можете побачити приклад використання Promise.withResolvers, про який ми розповідали раніше.

#experience

Sunsetting create-react-app 👋

Закінчилася ціла епоха! Найпопулярніший спосіб створення React-застосунків від минулої п’ятниці офіційно вважається застарілим. Команда React ухвалила таке рішення, оскільки create-react-app має обмеження, які вже вирішені в багатьох інших інструментах.

Цікаво, що саме в п’ятницю @Yurets7777 написав у чаті, що помітив, як create-react-app не спрацював.

Пишіть у коментарях, яким способом тепер будете створювати React-застосунки!

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

#news