Що сучасного є в світі JS/TS/Node розробки?

Накидайте в коментарях тули й підходи, які використовуєте для фронта й бекенда.

Почну з себе:
1. Vite для збірки.
2. Vitest для тестів фронта й бекенду.
3. React MUI для інтерфейсів.
4. MikroORM (поки ще тестую) для доменної моделі.
5. LIVR для валідації
6. chista - для шару сервісів
7. chista-express - замість шару контролерів

Цікавить чи хто юзав й які відгуки:
1. React compiler
2. Lit (веб-компоненти)
3. Bun

Також питання:
1. Які є гарні альтернативи React MUI?
2. Як тестуєте інтеграцію фронту й бекенду?
3. Що використовуєте на фронті для роботи з RestAPI/RPC/GraphQL? Чи генеруєте клієнти?
3. Які фреймворки на бекенді використовуєте?
4. Чи використовуєте DI й які ліби для цього?
5. Що для тестів бекенду?
6. Якісь корисні бібліотеки, які вам подобаються (наприклад, побудова графіків, робота з API, форматування дат й інше).

Що там нового в світі розробки окрім AI?)

Мобільний/десктопний додаток за два вечори
У мене камера від Blackmagic й там є rest api, але немає офіційного додаток. Я зазвичай через curl відправляв запит на автофокус, коли пишу відео. Й тут сів писати відео й відчуваю, що це не може бути так, треба зробити десктопний/мобільний додаток. Вирішив взяти повністю нову для мене технологію - Flutter, й відповідно мову програмування - Dart. Й спробувати зробити дадаток повністю на ШІ.

Ось, що вийшло - https://www.youtube.com/shorts/3J8VA4Y3Ba4

Й відповідно код на github - https://github.com/koorchik/blackmagic_camera_control

В 25 січня в 10:30 ранку лайв вайб-кодинг
У мене є ідея дуже цікавого пет-проекту, але поки для нього нічого немає. Буду з нуля в цю неділю вранці вайб-кодити. Доєднуйтесь до стріму, має бути цікаво. Окрім того, що поки ШІ думає, то завжди є час відповісти на питання в чаті.
https://youtube.com/live/BtHQyH6mniQ

Через годину починаємо. Налаштовую все 🙈

Дякую всім, хто доєднався. Завтра буде продовження

Сьогодні (26.01.2026) в 21:00 година вайб-кодингу

Друга частина стріма. Доєднуйтесь тут
https://www.youtube.com/watch?v=LtaOkeyq6Bc

Під час стріма питали про автоматизовані тести для фронтенду й я згадував саме цю свою доповідь

Доповідь про React, з якої все починалося
12 років тому Піт Хант зробив круту доповідь про React на 30хв, де він добре пояснює архітектурні рішення й підходи. Доповідь не втратила своєї актуальності на мою думку.

ДОПОВІДЬ: https://www.youtube.com/watch?v=x7cQ3mrcKaY

Все ще актуальна?

На тему заміни нас ШІ 😁

Вайб-кодера - новий канал про використанні ШІ
Тут мене Віталя попросив запостити посилання на свій новий канал про ШІ.
Зацініть - https://t.me/vibe_codera

Як вам канал? Як контент? Чи читаєте ще щось схоже? Можете відразу писати в коментарі тут, що подобається, а що ні. Канал молодий й фідбек буде корисним

Чи готовий ШІ залишити нам наші робочі місця?
Продовжую спілкування з Gemini 🙈

Я вже думав, що все вийшло, але остання фраза ШІ... 😁
https://youtube.com/shorts/9PNO4P82xfU?si=JgB6rL5of4KQwZpr

Ярмарка вакансій в оборонному секторі 14-го березня в Києві.
Івент від DOU й Lobby X. Вхід за донат.

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

https://arsenal.talantiv.in.ua/

Було класне обговорення про фільми про хакерів. Ось обираю собі кіно на вечір. Можете теж глянути коментарі в п'ятничний вечір 🤓

Зарелізив дві бібліотеки для тестування UI-компонентів: dom-harness та mui-harness

В Google я постійно писав юніт-тести для фронта й основою було використання test harness. Я забув про біль від querySelector в тестах, type casts усюди, від того, що десь з'явився зайвий div, який ломає тести.

Що таке Test harness?
Це тонка обгортка навколо DOM-елемента, яка ховає селектори та взаємодії за чистим API. Саме так тестують компоненти в Angular CDK. Чомусь в світі React такого немає.

✳ dom-harness - базова бібліотека (~110 рядків), на основі якої ви будуєте харнеси для своїх компонентів. Працює з будь-яким фреймворком (є приклади в репі для React, Vue, Svelte, Angular, Solid, Preact). Під капотом - реальний DOM, реальні події, нічого замоканого.

❌ Як виглядає тест без харнесів:

const input = document.querySelector(
  '[data-testid="text-input"][name="username"]'
) as HTMLInputElement;
const button = document.querySelector(
  '[data-testid="button"]'
) as HTMLButtonElement;
await user.type(input, 'testuser');
await user.click(button);

✅ З харнесами:

const form = LoginFormHarness.first();
await form.usernameInput.type('testuser');
await form.submitButton.click();

Основна ідея, що для кожного компонента робиться харнес, який дає доступ до можливостей компонента через свій API. Тобто це, як Enzyme (який вмер вже), але працює з реальним DOM. Хоча найближча аналогія це PageObject патерн, але той не мав можливості композиції, а тут це основа. Тобто, компоненти вкладені один в одний й відповідно харнеси теж: LoginFormHarness містить TextInputHarness і ButtonHarness, з автоматичним скоупінгом запитів до this.root.

✳ mui-harness - колекція готових харнесів для Material UI: TextField, Button, Checkbox, Dialog, IconButton й інші. Побудований поверх dom-harness. Більше не потрібно лізти в MUI-шну розмітку з .MuiInputBase-root та іншими внутрішніми класами, які ламаються між версіями.

Коли це корисно:
- якщо ви пишете тести для фронту або хочете, щоб ШІ писав їх за вас й це було структуровано.
- якщо у вас в компанії є дизайн-система, то харнес до кожного компонента це взагалі must have.
- Команди, що мігрують між фреймворками. Якщо різні фреймворки рендерять ту саму розмітку, то харнеси не змінюються (тільки render).
- Якщо ти автор UI-бібліотеки, то мати харнеси до своїх компонентів це як types для TypeScript - без них можна, але з ними бібліотека стає значно зручнішою для тестування.

Отримав фідбек, що не відразу зрозуміло, що це таке. Тому написав три документи з детальним роз'ясненням концепцій:
1. https://github.com/koorchik/dom-harness/blob/master/docs/GETTING_STARTED.md
2. https://github.com/koorchik/mui-harness/blob/master/docs/GETTING_STARTED.md
3. https://github.com/koorchik/mui-harness/blob/master/docs/BEST_PRACTICES.md

Також заціність, як виглядає компонет форми логіну (й відповідно харнес й тест до нього) - https://github.com/koorchik/mui-harness/tree/master/examples/login-page/LoginPage/LoginForm

Чи зрозуміла ідея підходу? Діліться думками в коментарях.

PS: писав все AI-friendly, щоб агент міг зрозуміти, як цим користуватися. Також додав пакети до context7 індексу

Накидайте ваші улюблені тули під Linux
Особливо цікаво різні консольні. Я сьогодні відкрив для себе btop - не знаю чи зручно, але вигладає ефектно).
Моя перша рекомендація це ncdu - улюблена тула для пошуку, що займає місце на диску.

Пишіть в коментаряє, що під Linux використовуєте, як під десктоп, так й на сервері

Claude code генерує говнокод й що з цим робити.

Я використовую Claude Code й на існуючому проекті він генерує дуже крутий код й все добре працює. Також я пробив вайб-кодити додаток на Flutter й вийшло непогано, хоча довелося певну кількість разів змусити Claude рефакторити архітектуру.

Зараз я викладаю курс по React в університеті й студенти використовують ШІ (що й в вимагається) й їх проекти з одного боку відповідають формальним вимогам й треба ставити високий бал, а з другого боку - кожен проект це суцільний говнокод, який я би в житті не пропустив на код рев'ю.

Оскільки студентів багато, то вчити архітектурі кожного на курсі, де ми вчимо React, не виглядає реалістичним. Тому виникла ідея створити SKILL під Claude Code, який буде робити архітектурне рев'ю й давати конкретні рекомендації по змінам в коді.

Я зробив 7 ітерацій A/B тестування скілу й витратив десь 10-15 годин на це. Різниця між скілом й просто промптом з інлайн запитом на архітектурне рев'ю - космічна. Насправді, перші версії скліла могли навіть рекомендувати архітектурні антипатерни. Довелося повичитувати результати його роботи й модифікувати скіл ітарація за ітерацією.

Код після впровадження результатів рев'ю просто не впізнати. Звісно на студенському коді результат відразу вічувається, але навіть, якщо добре структурований проект, то рекомендації теж залишаються корисними.

PS: мабуть треба планувати продовження стрімів по вайб-кодингу для демонстарції ефекту на моєму пет-проєкті 🤓

Як шукати роботу за допомогою ШІ?

Ми звикли, що роботодавці можуть використовувати ШІ для аналізу CV кандидатів на відповідність вимог, але ж ШІ може аналізувати й вакансії на відповідність вашому CV.

✅ Підхід
Берете ваше CV (має бути якісне й деталізоване) й заливаєте в Gemini, Claude чи іншу LLM (а найкраще відразу на всіх, де є можлиість), включаєте Deep Research або Web Search + Research в Claude й просите знайти всі вакансії, що відповідають вашому CV. В результаті отримуєте список вакасній саме для вас.

✅ Приклад звіту від Claude (Web Search + Research) для мого CV з Linkedin. https://gist.github.com/koorchik/a9e580b5b0223563b2b06329ba25acf8

✅ Мій промпт для Deep Research для України, (Київ)
Але це лише приклад, ви можете сказати, що вас цікавлять інженерні позиції в FinTech по всьмоу світу, наприклад. Тобто варто ітерувати, пробувати різні LLM й так далі.

**Роль:** Ти — Senior IT Recruiter та кар'єрний стратег з глибоким розумінням ринку праці.

**Завдання:** Проведи глибокий пошук (deep research) актуальних вакансій, які максимально відповідають моєму досвіду, навичкам та профілю, описаному в резюме нижче. Моя головна ціль — знайти роботу.

**Мої обмеження та умови:**

* **Локація:** Я знаходжуся в Києві (Україна). Розглядаю лише вакансії в Україні (офіс/гібрид у Києві) або повністю віддалену роботу (Remote). Релокацію в інші країни НЕ розглядаю.
* **Ресурси для пошуку:** Проскануй популярні платформи (LinkedIn, Djinni, DOU, Work.ua, Robota.ua, Wellfound тощо) та кар'єрні сторінки компаній.
* **Актуальність (КРИТИЧНО):** Додавай ТІЛЬКИ відкриті та активні вакансії. Ти ПОВИНЕН ігнорувати результати, де є слова: "неактивна", "закрита", "архів", "closed", "inactive", "archived", "filled". Ігноруй вакансії, які не оновлювалися понад 45 днів.

**Формат виводу:**
Звіт має бути максимально компактним, без вступних слів та зайвої "води". Мене цікавить лише конкретика.

**Крок 1. Зведена таблиця (КРИТИЧНА ВИМОГА ДО ПОСИЛАНЬ ТА СТРУКТУРИ)**
Створи Markdown-таблицю. Колонки:

1. **Компанія**
2. **Позиція** 
3. **Формат роботи** 
4. **Компенсація** (якщо немає — дай власну оцінку на основі ринку)
5. **Фактори метчу** (Коротко: 2-3 ключові навички, технології чи зони відповідальності з мого CV, які ідеально збігаються з вимогою вакансії)
6. **Шанси найму** (1-10)
7. **Посилання** (*ВАЖЛИВО:* Колонка "Посилання" НЕ МОЖЕ бути порожньою. Ти повинен зберегти та вставити повний прямий URL-адрес на вакансію. Якщо ти не можеш надати пряме посилання, взагалі не додавай цю вакансію до таблиці та звіту).

**Крок 2. Аналіз вакансій (ЧІТКА ІЄРАРХІЯ)**
Після таблиці надай аналіз. Використовуй сувору структуру з заголовками третього рівня (`###`) для кожної вакансії, щоб текст не зливався у суцільний список.

Використовуй ТОЧНО такий шаблон для кожної вакансії:

### [Назва компанії] — [Позиція]

* **Чому мені це підходить:** [1-2 речення про прямий збіг навичок].
* **Мої шанси:** [1-2 речення про мої конкурентні переваги для цієї конкретної ролі].
* **Ризики відмови:** [Чесний та критичний аналіз того, чого мені об'єктивно не вистачає за вимогами вакансії, або які інші фактори (наприклад, overqualified/underqualified, відсутність специфічного доменного досвіду) можуть призвести до відмови].

**Моє CV в PDF файлі**

Fwdays AI Summit 25 квітня 2026 (Київ)
З одного боку я з цього AI не вилажу, а з другого боку - живе спілкування про AI це краще, ніж спілкування про AI з AI. Тому придбав собі Full Ticket на AI Summit від Fwdays 🤓 Доповіді теж виглядають цікаво.

Попросив у організаторів знижку для підписників каналу:
✅ Промокод AIJABASCRIPT дає 10% знижки.

Буду радий випити кави й обговорити вживу досвід використання й провадження AI - сміливо хапайте мене на івенті. Планую залишатися на автепаті 🙈

САЙТ ПОДІЇ: https://fwdays.com/event/fwdays-ai-summit

Інтерв'ю з автором openclaw 🤓
Інтерв'ю довге, але дуже цікаве. Багато інсайтів по використанню ШІ й не тільки.

✅ Я ще раз отримав підтвердження, що використання агентів потрібні навички техліда, але ти не тільки задаєш технічне бачення, а даєш певний рівень свободи агентам, задаєш питання типу "а чи зрозуміла тобі мета цього пул-реквесту", "тепер, коли це ти зробив, то робив би ти зараз по інакшому?", також додаєш трохи емпатії. Діалог замість наказів: обговорюйте архітектурні рішення з агентом, питайте його думку та варіанти реалізації перед тим, як давати команду "будуй". Все, як з командою інженерів.

✅ Також цікавий інсайт, що в дешевих підписках за 20 дол моделі повільні й в результаті розробники отримують не той досвід.

✅ Використання голосового програмування. Ніколи навіть про таке не думав.

✅ Зазвичай у мене 2-3 агенти працюють, а Пітера 4-7 й він не використовує воркспейси (хоча я більшості випадків теж, а коли використовую, то у мене є 4 заготовлених, які я перевикористовую й ніколи не створюю нові). Хоча підхід до використання у мене сильно співпадає й схожа еволюція - спочатку детальні інстуркції, потім купа інфратсруктури, а потім напрацьовується інтуїція при роботі з певними агенгтами й ти вже просто вказуєш файли й просиш про зміни й знаєш, що вимагає більш детального рев'ю, а що менш детального.

✅ Дуже цікаво було слухати про кіберсквотерів. Як під час перейменування проекту буквально за секунди крали його попередня ім'я й відразу рекламували криптотокени й розміщували посилання на малвару.

✅ Про душу агентів теж цікавий кейс, треба спробувати буде.

ІНТЕРВʼЮ: https://www.youtube.com/watch?v=YFjfBk8HI5o

Axios став жертвою атаки на ланцюг постачання
https://dou.ua/forums/topic/58693/

🔴 Як ви мінімізуєте ризики supply chain attacks? Пишіть в коментарях