TanStack Form 📋

Ми вже багато розповідали про продукти від TanStack — у них уже сформувалася ціла екосистема. Нещодавно вони представили ще один інструмент — TanStack Form.

Його створення мотивували відсутністю вбудованих засобів для роботи з формами у багатьох фреймворках. Через це розробникам доводиться або писати власні рішення, або використовувати сторонні бібліотеки. TanStack Form має на меті вирішити проблеми продуктивності (згадуємо redux-form), складної валідації та композиції форм.

Ось простий приклад використання TanStack Form:

const form = useForm({
  defaultValues: { ... },
  onSubmit: async ({ value }) => { ... },
})

...

<form.Field
  name="firstName"
  validators={{
    onChange: ({ value }) => !value ? 'A first name is required' : undefined,
  }}
  children={(field) => (
    <>
      <label htmlFor={field.name}>First Name:</label>
      <input
        id={field.name}
        name={field.name}
        value={field.state.value}
        onBlur={field.handleBlur}
        onChange={(e) => field.handleChange(e.target.value)}
      />
      <FieldInfo field={field} />
    </>
  )}
/>

Завдяки використанню form.Field тут є гарна підтримка TypeScript, а також можна пропускати деякі пропси (аналогічно до <Controller control /> у react-hook-form).

Валідація підтримується як для всієї форми (через useForm, зокрема зі схемами типу zod), так і для окремих полів.

Що одразу привертає увагу - підхід через children. Полю передається функція, а не JSX-елементи. Команда TanStack у коментарях зазначає, що render-пропси - "great". А що думаєте ви?

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

#library

Radashi ⚙️

Колись ми розповідали про Radash — легку й корисну бібліотеку, яка містила багато зручних методів і могла стати альтернативою Lodash. Вона була оптимізованою для TypeScript мала меншу вагу, що робило її привабливим вибором для багатьох розробників.

Проте з часом підтримку Radash припинили. На щастя, з’явилася її дочірня бібліотека, яка продовжує розвиток проєкту та зберігає ключові переваги попередника. Вона, як і раніше, пропонує безліч утиліт, які можуть стати в пригоді в будь-якому проєкті. Тому, якщо ви шукали сучасну й легку альтернативу Lodash, варто звернути на неї увагу.

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

#library

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

Наприклад:
['+', 10, 2] => 12
['*', 2, '+', 10, 2] => 24
['/', '*', 2, '+', 10, 2, 4] => 6

Spell Checker 🧙

Трішки про наболіле...

Жоден компілятор чи інтерпретатор не перевіряє ваш код на правопис. Але його читатимуть ваші колеги. Тому, щоб трішки полегшити життя собі та іншим, використовуйте spell check. Пів року тому ми вже писали про це, тож цей пост — ще одне нагадування.

👉 Читати пост

Тільки не відкривайте цю лінку - https://guthib.com/

#tips

Welcome!

Let's practice our English! So...

👉 If you had to explain your job to a 5-year-old, how would you do it?

Have a nice #english_friday 💛

#how_to створити ефект набору тексту, як у терміналі 💻

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

Ховайте свої API-ключі 🎂

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

Цього року ми хотіли запаритися й організувати різні інтерактиви. Одним із них була вікторина. Для цього є гарний вебзастосунок, тому вирішив його використати й почав складати список питань. Я хотів додати зображення та відео для інтерактивності, але виявилося, що ця функція доступна лише у PRO-акаунтах. Щоб отримати доступ, потрібно було одноразово сплатити певну суму $. Платити не дуже хотілося (київський торт сам по собі також не дешевий), тому я вже почав шукати безкоштовні альтернативи, але стало цікаво, як усе влаштовано на цьому сайті.

Перше, що помітив – весь вихідний код був відкритий (не мініфікований, не обфускований). У ньому знайшовся адмінський API-ключ для Supabase, який був доступний на клієнті. Обмежень по доменах не було, тому вдалося підключитися і отримати доступ.

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

З вихідного коду також стало відомо, що існує адмінська сторінка, доступна лише для одного акаунта – розробника. На щастя, ID цього акаунта був захардкоджений. Завдяки доступу до Supabase вдалося створити magic link, який дозволяв увійти на будь-який акаунт без пароля. Після цього залишалося лише видати собі Pro-план через адмінську панель.

Висновок: Завжди перевіряйте, які дані ви відкриваєте публічно, щоб випадково не дати доступ до своїх ресурсів.

З етичних причин посилання не публікую – збираюсь повідомити розробника про вразливість. Але сподіваюсь, що PRO-акаунт мені залишать, бо створювати вікторини мені сподобалось.

То шо, я тепер хакер, получається, чи шо?

#localhost

🔥 Next.js Interview Questions and Answers - 2025

Знайшли для вас круту шпаргалку про Next.js!

Стаття містить чудову підбірку питань і відповідей, включаючи основи SSR, SSG, ISR, а також маршрутизацію, API-роути та багато іншого. Ідеально підходить для підготовки до інтерв'ю!

Помітили, що немає питань про App Router. Тому, якщо вам буде цікаво, маякніть, спробуємо розкрити цю тему.

👉 Читати статтю

Зберігайте та користуйтесь 💛

#interview

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

Наприклад:
[0, 1] => [1, 0]
[0, 1, 0] => [1, 0, 0]
[0, 1, 0, 3, 12] => [1, 3, 12, 0, 0]
[0, 12, 0, 1, 3] => [12, 1, 3, 0, 0]

Aerospace Script 🪟

Window manager — це програма, яка керує вікнами ваших застосунків: їхнім розташуванням і розміром.

Серед таких програм (або схожих до них) можна виділити:
- Linux: i3, Hyprland;
- MacOS: Magnet, Rectangle, Yabai, Amethyst.

Зараз я тестую Aerospace. І в один момент я зрозумів, що мені дечого не вистачає.

#how_to втикати відосіки під час роботи, якщо у вас один монітор: двічі натискаєте праву клавішу на відео в YouTube та натискаєте Picture in Picture.

Проблема в тому, що через використання WM я розділяю вікна на різні воркспейси, а вікно Picture in Picture залишається тільки на одному з них. Оскільки fixed-режиму для вікон немає, єдиний варіант — змусити вікно автоматично переміщуватися під час зміни воркспейсу.

Ось як це зробив я:

exec-on-workspace-change = [
  '/bin/bash/', '-c',
  'aerospace move-node-to-workspace --window-id $(aerospace list-windows --monitor focused --app-bundle-id com.google.Chrome --format "%{window-id} %{window-title}" | awk "\$0 ~ /Picture in Picture/ {print \$1}") $AEROSPACE_FOCUSED_WORKSPACE'
]

#experience

Welcome!

Let's practice our English! So...

👉 Do you think certifications matter in software development? Why or why not?

Have a nice #english_friday 💛

#how_to створити ефект прокручування на числах.

Бібліотека NumberFlow дозволяє легко реалізувати цей ефект, не має жодних залежностей і добре кастомізується. Підтримує React, Vue, Svelte та Vanilla JS.

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

Розпочинаємо тиждень із нового опитування! 👻

Єєє! Все-таки зберіг свій безкоштовний PRO-акаунт. Як то кажуть, зекономив – значить заробив 😅