Жабаскрипт (веде Віктор Турський)
4.65K subscribers
22 photos
3 videos
287 links
Авторський контент для JavaScript розробників, але не завжди про JS:). Пишу про архітектуру, best practices, продуктивність, безпеку, інструментарій.

Viktor Turskyi (@koorchik), Cofounder at Webbylab, SWE at Google

Рекламу не розміщую!
Download Telegram
Зарелізив дві бібліотеки для тестування 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 індексу
🔥5818👍6🤔1🤡1
Накидайте ваші улюблені тули під Linux
Особливо цікаво різні консольні. Я сьогодні відкрив для себе btop - не знаю чи зручно, але вигладає ефектно).
Моя перша рекомендація це ncdu - улюблена тула для пошуку, що займає місце на диску.

Пишіть в коментаряє, що під Linux використовуєте, як під десктоп, так й на сервері
22👍2🫡2
Claude code генерує говнокод й що з цим робити.

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

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

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

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

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

PS: мабуть треба планувати продовження стрімів по вайб-кодингу для демонстарції ефекту на моєму пет-проєкті 🤓
🔥182👍4912🤡3
Як шукати роботу за допомогою ШІ?

Ми звикли, що роботодавці можуть використовувати ШІ для аналізу 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 файлі**
96👍27🔥18😁1
Fwdays AI Summit 25 квітня 2026 (Київ)
З одного боку я з цього AI не вилажу, а з другого боку - живе спілкування про AI це краще, ніж спілкування про AI з AI. Тому придбав собі Full Ticket на AI Summit від Fwdays 🤓 Доповіді теж виглядають цікаво.

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

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

САЙТ ПОДІЇ: https://fwdays.com/event/fwdays-ai-summit
👍264🔥2🕊1
Інтерв'ю з автором openclaw 🤓
Інтерв'ю довге, але дуже цікаве. Багато інсайтів по використанню ШІ й не тільки.

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

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

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

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

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

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

ІНТЕРВʼЮ: https://www.youtube.com/watch?v=YFjfBk8HI5o
🔥27👍1311😭1
Буду на AI JavaScript fwdays 23 травня
Як зробити JavaScript конференцію більш привабливою? Додати "AI" в назву 😁
Але й насправді AI + JS/TS це сьогодні дуже ефективна комбінація. Братиму участь в панельній дискусії.

Попросив у організаторів знижку для підписників каналу:
Промокод AIJABASCRIPT дає 10% знижки (цей промокод взагалі ідеально для цієї конференції 🤓)

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

PS: Позавчора був на AI Fwdays й вдалося й поспілкуватися добре, й виступи були корисні. Очікую, що AI JS буде не менш актуальною й цікавою. Приходьте, буду радий понетворкатися!
🔥248
Що нам робити в часи ШІ?
Це тема моєї доповіді на DOU Day 2026, що відбудеться 15-17 травня.
Зазвичай я глибоко занурююсь в тему й намагаюся отримати обгрунтовані висновки. Це стосується технологій, але не тільки. Я в такий самий спосіб дивлюсь на бізнес й багато інших процесів. Ця доповідь не є виключення з точки зору підходу, хоча й інша по формату.

Моя задача - подивитися на вплив ШІ зі сторони інженера, підприємця, економіста (хто не знав, то я закінчував міжнародну економіку в КНУ ім. Шевченка) й обгрунтовано відповісти на наступні питання:
✴️Що робити студентам, які вчаться на розробників?
✴️Що робити розробникам, яких вже працюють на бізнес?
✴️Що робити бізнесам, які розробляють софт?
✴️Що робити державі?

Кожен DOU Day це дійсно визначна подія для українського айті. Просто зацініть програму івенту. Відчуваю, що залипну передивлятися записи доповідей після конфи ще на пару днів 🤓
До зустрічі на конфі!

САЙТ ПОДІЇ: https://dou.ua/dou-day-2026/

PS: Й як вам тема доповіді? 🙂
39🔥29
Чули про CS Osvita?
Я декілька разів чув дуже позитивні відгуки від підписників каналу про ці курси. Мені написав Іван (засновник курсів) й ми вирішили випити кави онлайн. Не так часто зустрінеш настільки професійних й захоплених людей, як Іван.
Для підписників каналу ми домовилися про знижку в 15% на всі курси. Також для військових з УБД навчання безкоштовне.

Фішка школи - лінійка фундаментальних дисциплін для мідл/сеньйор інженерів: від написання власної ОС і event loop до алгоритмів у проді та розподілених систем. Багато коду, жорсткі дедлайни по домашках (без них далі не пропускають) і ком'юніті випускників. Я завжди підримую ідею розвитку фундаментальних знань у інженерів. А тут можна написати власну операційну систему. Пробували таке?
Зараз йде набір на курс по алгортимам https://www.csosvita.com/courses/algorithms-in-practice
Окрім того CS Osvita активно донатити з власного прибутку на допомогу ЗСУ: вже понад 3 млн грн, з яких 1 млн передали на "Азов", з яким стали офіційними партнерами.

Я не знаю, як там інші викладачі (очікую, що добре), але курси, що веде сам Іван точно не розчарують.
Пишіть в коментарях, хто вже вчився на CS Osvita й як вам враження? Чи є ще курси, що дають настільки фундаментальні знання, в Україні?

САЙТ:
https://www.csosvita.com
🔥63👍157❤‍🔥4👎1