Free Algorithms Course 🔥

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

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

#news

Pi-hole 🕳️

@anastasiia_tarasenko якось подарувала мені Raspberry, і я спочатку не знав, що з ним робити. Були ідеї хостити невеликі сервери на ньому чи налаштувати щось для розумного будинку. Але якось я натрапив на пост про Raspberry, у якому майже в кожному коментарі радили встановити на нього Pi-hole. Тоді я вирішив дізнатися, що це таке.

Pi-hole — це DNS sinkhole (дослівно — "раковина"), якщо читати README на GitHub.

Чим це може бути корисним? У першу чергу, це дозволяє блокувати багато реклами. Ви резервуєте для своєї машини (у моєму випадку це Raspberry) статичну IP-адресу на роутері, після чого налаштовуєте роутер використовувати цю IP як DNS-сервер. Тепер, коли будь-який вебсайт захоче завантажити рекламний банер, DNS-сервер просто заблокує його.

Як сервер знає, що блокувати? Дуже просто: використовується список заборонених доменів. На щастя, вже є готові списки, які можна просто завантажити.

І найцікавіше: для цього вам зовсім не обов’язково мати Raspberry — Pi-hole працює на багатьох Linux-дистрибутивах.

Що ще круто — реклама блокуватиметься на всіх пристроях, підключених до мережі. А ще, це може працювати навіть у встановлених застосунках.

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

#localhost

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

#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