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

#todo написати функцію на будь-якій мові програмування, яка приймає об'єкт/словник/map, де:
- ключ — текст,
- значення — число або вкладений об'єкт/словник/map за тим самим правилом.

Функція має повернути "вирівняний" об'єкт, де всі вкладені значення рекурсивно підняті на верхній рівень, а вкладені ключі об'єднані через ".".

Наприклад:
{ "a": { "b": 1, "c": 2 }, "d": 3 } => { "a.b": 1, "a.c": 2, "d": 3 }

PS: вважаємо, що однакових ключів не виникає.

Welcome!

Let's practice our English! So...

👉 What’s the best or worst piece of tech advice you’ve ever received?

Have a nice #english_friday 💛

📩 Відправили листа – а потім згадали, що не прикріпили файл? Або випадково надіслали клієнту замість файлу з комерційною пропозицією мемчик з котиком? 🐱

На жаль, У Gmail немає чарівної кнопки "Редагувати" чи "Видалити", але можна додати невелику затримку перед відправкою. Це ваш шанс передумати та виправити помилку.

#how_to додати затримку перед відправкою електронного листа в Gmail:

1. Натискаєте іконку налаштувань;
2. Натискаєте кнопку "Переглянути всі налаштування";
3. Шукаєте "Скасувати надсилання";
4. Змінюєте значення на 30 секунд.

Тепер у вас буде час врятувати свою репутацію – або хоча б уникнути фейспалму від власного ж листа 😅

Сьогодні три роки, як Україна бореться за своє майбутнє. Три роки болю, втрат, мужності й незламності. Ми не будемо багатослівними – просто подякуємо.

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

Цей день болючий, але він про силу. Про тих, хто не здався. Про Україну, яка вистоїть!