Загалом, довайбкодив я таймер, який починав раніше.

Під моїм пильним наглядом АІ не встиг повністю налажати, але косяків було більш ніж достатньо. Чим довше я працював над апкою, тим більше прокидався в мені старий добрий АІ-скептик. Але так як я не перший рік в цьому бізнесі, то вчасно надавав LLM по руках — мовляв, отут не імпровізуй, отут не вигадуй, а отут просто мовчи.

З приємного — іноді навіть приносив користь. Наприклад, запропонував фічу з таймер-пресетами. Ну і загалом апка вийшла досить пристойна. Працює стабільно, баги які знайшов — пофіксив, збілдив, підписав своїм дев-сертифікатом, а ще відкрив репозиторій.

Можна вважати це деанон-моментом — бо раніше я вів цей канал без імені. Але раз вже ділюсь апкою, то автоматично ділюсь і своїм GitHub.

🧱 Репозиторій тут:
👉 https://github.com/bohdanbirdie/time-to-stretch-app

Можна скачати .dmg або збілдити собі самому. Якщо хочете щось покрутити, додати чи пофіксити — будь ласка, велкам.

Фічі:

⏱️ Редагування інтервалів таймера

🔁 Зациклення таймера

🔔 Системні сповіщення коли таймер завершується

🎹 Глобальні шорткати з можливістю редагування

🌗 Темна і світла тема

🚀 Автозапуск при старті macOS

Я точно буду користуватись, щоб не забувати рухатись під час роботи. Сподіваюсь, і вам стане в пригоді.

Накидайте зірочок ⭐

Так як я вже вчора поділився з вами своїм гітхабом, то сьогодні можна і поділитись своїм веб блогом.

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

Так от, в одній зі статей я писав про GraphQL, з акцентом на Apollo Client. Це був основний елемент, який у нас відповідав за шар даних на попередній роботі, і під собою він агрегував більше двох десятків мікросервісів.

Найбільше що мені подобається — це нормалізація даних на клієнті, яку повністю бере на себе Apollo. Тут у них є перевага, бо graphql-схема вже описує всі можливі об’єкти, і за ID кожного об’єкта його можна зберігати у вигляді key-value, відтворювати дерево і діставати дані по цьому ж ключу.

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

Зрештою, читайте статтю, буду радий отримати якийсь фідбек!

https://www.bohdanptyts.com/blog/efficient-data-handling-with-graphql-and-apollo

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

З власного досвіду — коли я перейшов на віддалену роботу, ще до ковіду, то відволікаючих факторів стало суттєво більше. Теніс в офісі я грав нечасто, не сильно втягнувся у всякі забавки, не виходив курити з колегами і т.д. А в опен спейсах якось і незручно робити собі перерви, щоб повтикати в ютуб. Ну а вдома — все інакше. Ніхто над тобою не стоїть, сам плануєш час, і легко піддаєшся різним подразникам — тим же ютубам чи інстаграмам. А я ще люблю поприбирати — як в тих відосах про ADHD, де починаєш одне, а потім уже цілий стек дрібних справ.

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

З часом я таки виробив кілька правил, які підходять особисто мені. І тут важливо підкреслити — кожен сам собі господар, і те, як ви покращуєте свою продуктивність, може бути зовсім інше.

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

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

І тут важливо не впасти в пастку, коли ти витрачаєш більше часу на організацію, ніж на саме виконання. Типу не намагатись зробити якусь мега-дошку зі стікерами на всі випадки життя. Просто пишеш і клеїш — і все.

Більшість з того, що я клею — це щось позаробоче: ідеї, дрібні справи. Але завдяки цьому я не відволікаюсь від основної роботи.

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

Написати цей текст мене надихнуло відео з одного каналу, на який я останнім часом підсів — про продуктивність. Там було про правило 5 хвилин. Хоч воно й дещо інше від того, що я описав вище, але ідея теж цікава.

https://www.youtube.com/watch?v=CnQVe-nXq50

Вчора була презентація по Skia, в стилі Apple (це зараз дуже модно). Бачу, що я про це раніше не писав, тому якщо коротко: Skia — це рушій для 2D-графіки, особливо популярний у React Native (завдяки зусиллям Shopify).

Я вже трохи пробував Skia, але дуже поверхнево, бо слабо розуміюсь у графіці. Та після вчорашньої презентації ентузіазм повернувся — і ось чому:

З’явилась підтримка WebGPU в React Native, що відкриває можливості для однорідного API між вебом та RN. Можна буквально скопіювати код із вебу й запускати на телефоні. Це також покращує перформанс і дозволяє використовувати окремий потік для графіки, не блокуючи інтерфейс.

Суттєво вища підтримка 3D.

Показали колаборації з іншими командами, як-от Software Mansion, їхній TypeGPU та інші інструменти.

Заделіверили 0 нових фіч, але сильно попрацювали над продуктивністю.

І трохи розповіли про майбутнє Skia Graphite — рушія поверх WebGPU.

Приклади виглядають круто, але я часто розчаровуюсь, коли починаю сам щось робити — бо це вимагає глибшого розуміння графіки та шейдерів 💅

Але думаю, я таки повернусь до Skia.

До речі, знали, що весь інтерфейс Flutter-додатків — це саме Skia? Вони повністю обходять нативні інтерфейси. Пішли своїм шляхом, так би мовити.

https://www.youtube.com/watch?v=t9t-VXwIc4I

Нещодавно мав багато роботи по оптимізації й автоматизації релізу пакетів. У таких PR легко випадково зламати package-lock.json, коли з’являється кілька десятків тисяч змін — весь CI червоний, важко зрозуміти, що саме спричинило проблему. Найпростіше рішення в такому випадку — взяти lock-файл з main і перезапустити npm install, щоб усе синхронізувалось.

Але не раз бачив, як такі зміни залишались непоміченими, і хтось мерджив pull request з величезним diff'ом у lock-файлі. Потім у когось щось не працює, і починається відлов проблем. Один із типових сценаріїв — коли у вас локально різні версії NPM, і через це змінюється формат package-lock.json.

Тому я вирішив зробити простий «захист від дурня». За один вечір накинув і релізнув GitHub Action, який перевіряє, чи не занадто великі зміни, і якщо так — залишає коментар у PR.

Тестував на окремому репозиторії — все працює швидко, бо перевірка доволі проста. Коментар можна вимкнути, а CI навіть може фейлити, якщо перевищено ліміт. Є кілька варіантів конфігурації, тому якщо цікаво — спробуйте!

https://github.com/bohdanbirdie/fat-lock-action

Zed editor нарешті релізнув Agent Panel. До цього я, коли треба було поюзати АІ, користувався Windsurf, доводилось переключатись.
Але схоже, що це вже позаду. Pro підписка за 20$ виглядає непогано, дуже імовірно що перейду з Windsurf.

https://zed.dev/blog/fastest-ai-code-editor

Довго думав що про це написати, але навіть не зміг зібрати слів
Це або якийсь вайб кодинг або новий рівень нахабності

https://github.com/krzyzanowskim/ObjectivePGP/pull/236

До речі, коли я захотів зробити таймер на Mac, то задумався: яку ж анімацію він має мати? Можна було вибрати щось типу аналогового годинника, pie chart і т.д. Але я згадав, що є дуже гарний стиль анімації для змінного тексту. Не знаю, хто це першим придумав, але я давно зберіг собі один пакет для вебу. Дивно, що він досі не потрапив у Shadcn.

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

Поділюсь і з вами: https://number-flow.barvian.me/

Безпощадний ринок ІТ — ніколи не знаєш, звідки буде наступний удар.

Microsoft звільнили (layoff) одного з початкових та довготривалих розробників TypeScript. Одразу зазначу, що він не був головним автором, але давно працював над цим проєктом. А в Microsoft взагалі пропрацював 18 років.

Впевнений, що після цього твіту Рон швидко знайде нову позицію — якщо матиме бажання. Але сам факт того, що навіть із таким довгим досвідом у компанії тебе можуть звільнити, просто нагадує нам про крихкість поточного ринку.

Не знаю коли я вже використаю Drizzle десь в проекті, але їх вайб це бомба!

https://mssql.drizzle.team/

https://x.com/DrizzleORM/status/1922728686089904554

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

Жоден юзер не хоче дивитись на спіннери, скелетони та інші хаки й шпаги від девелопера. Юзер хоче бачити одразу цінну для себе інформацію. До речі, local-first підхід намагається максимально наблизити нас до того, щоб кількість випадків, коли потрібен спіннер, була менша за умовний 1%.

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

І ось, щоб менше тригерити своїх юзерів — іноді можна їх трошки обманути (заради їхнього ж блага).

Проста ідея: не показувати спіннер одразу. Наприклад, якщо запит триває менше 150 мс — взагалі нічого не показуй. Бо з точки зору юзера, спіннер навіть на 150 мс привертає увагу й дратує більше, ніж якби нічого не відбулося і все просто плавно оновилось.

А для прикладу — от вам зручний пакет: https://www.npmjs.com/package/spin-delay

Local-first підхід набирає все більше популярності — і мене це дуже пре.

Але підсвідомо є відчуття, що за цим трендом буде важко встигнути без практики на реальному проєкті. З іншого боку, це не AI-хайп, де кожен день новий інструмент — тому є шанс, що підходи будуть розвиватися більш стабільно й глибоко, без біганини.

Я паралельно ще слідкую за Zero (про який писав раніше) — вони активно розвиваються й додають багато цікавого. А з появою нових open-source конкурентів все стане ще цікавіше.

https://x.com/DavidKPiano/status/1923740185520378365

Натрапив на ще один симпатичний генератор mesh-градієнтів — і знову крута робота!

Цього разу з цікавою фічею: можна закинути фото, і він згенерує mesh-градієнт на основі нього. Може стати крутою альтернативою для blurred placeholders під час завантаження зображень — виглядає стильно й сучасно.

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

https://photogradient.com/

🔧 Storybook 9 перейшов із Beta у Release Candidate!
Я якраз у процесі міграції на декількох проєктах.

Що цікавого й корисного:

✅ Можна запускати декілька тестів одночасно прямо з UI

✅ Підтримка локального запуску visual tests
(але все одно деплоїться на Chromatic, і це влітає в квоту)

✅ Менший білд — особливо приємно на великих проєктах

У нас на проєкті багато тестів + платна підписка на Chromatic — тому можливість запускати тести локально та в групах суттєво спрощує життя. Хоча очевидно, що другий пункт — це теж про бізнес: запуск хоч локальний, але виконання в хмарі Chromatic.

🧪 Ще одна цікава новинка (ще з середини Storybook v8.*) — Vitest як тест-раннер.
До цього все було жорстко зав’язано на Jest, але будьмо чесні — він вже давно програє Vitest за швидкістю та UX. Я вже перевів кілька проектів — працює щонайменше не гірше, а в деяких випадках навіть приємніше. Думаю, рух у цьому напрямку продовжиться.

https://storybook.js.org/blog/storybook-9-beta/

🔄 Netflix, пошта і автоматизація, яка реально полегшує життя

Дивитесь Netflix у спільному акаунті з друзями? У нас 5 профілів на одному акаунті. Всі використовують одні й ті самі креденшали. І це ще півбіди.

📧 Але час від часу Netflix присилає лист:

"Підтвердіть свою тимчасову локацію"
Це через їхню політику — профілі мають бути в одному "домогосподарстві", тобто на одному Wi-Fi. А ми, звісно, живемо в різних локаціях.

🙅 Ділитися основною поштою незручно. Заводити окрему під це ок, але все ще не достатньо.

🧠 Тому я зробив просту автоматизацію:

1. Листи від Netflix приходять на окрему пошту.
2. Якщо в темі чи тілі листа є певні ключові слова — скрипт парсить його.
3. Посилання для підтвердження локації надсилається в Telegram через бота.
4. Усі учасники мають доступ до цього бота.

📆 Плюс:
Раз на місяць бот тегне того, хто платить за акаунт. І далі йде ротація по учасниках.

Використав https://www.relay.app/

Хто хоче повну автоматизацію - пишіть в коментарях ⬇️

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

А тепер щей багато хто використовує shadcn registry, а зверху щей registry MCP.

І вчора випадково натрапив ще один UI kit який дистрибютиться через shadcn - Animate UI.

Багато не писатиму, самі спробуйте. Але якщо коротко, то тут багато гарно анімованих компонент. І це прям відчувається як відполірований дизайн анімацій з вже звичними та популярними компонентами shadcn, тай не тільки. А під капотом використовує досить популярну лібу motion. Ніби не підвисає, ну може разок помітив.

Дуже хотілось би десь таке використати.

https://animate-ui.com/

Вкрав у твіттері

В Chrome завезли чергову CSS-функцію — if.

Виглядає досить просто та зручно. Можливостей застосування дуже багато, може навіть здатися, що скоро можна буде назвати CSS мовою програмування.

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

Загалом, круто, як CSS розвивається останні роки — багато класних речей, які дозволяють деліверити відполіровані інтерфейси.

https://www.youtube.com/watch?v=Apn8ucs7AL0

https://developer.chrome.com/blog/reading-flow

Вчора експериментував із міграцією npm на pnpm. В основному заради того, щоб трохи пришвидшити CI. Не сказав би, що відчув суттєві зміни, але в проєкті багато пакетів, тому поки забив на це.

Але в процесі використав цікаву штуку — $npm_execpath.

Якщо коротко, то це змінна, яка завжди посилається на executable менеджер, яким ви запустили скрипт — тобто npm, pnpm, bun і т. д.

Часто можна побачити package.json, у якому є скрипти, що викликають інші скрипти:

"build": "npm run build:ts && npm run build:css"

Ну і це можна замінити на версію з $npm_execpath:

"build": "$npm_execpath run build:ts && $npm_execpath run build:css"

Зручно, бо тепер завжди використовується той самий менеджер.

А в додачу ще можна додати preinstall скрипт, який викине помилку, якщо юзер використовує неправильний менеджер для встановлення пакетів:

"preinstall": "npx only-allow npm"

https://www.npmjs.com/package/only-allow

Помітив на просторах Твіттера цікавий інструмент, називається RedwoodSDK. Ну як помітив — LiveStore, про який я недавно писав, репостнув твіт про фінансову підтримку від перших.

Переглянув їхню документацію — виглядає як цікава ідея. Ось коротка інформація:

RedwoodSDK — це React-інструмент, який покладається на різні фічі Cloudflare, такі як Durable Object, Worker і так далі. На перший погляд звучить як типовий vendor lock. Але бенефіт від цього — легка інтеграція з Cloudflare (а на фоні останніх скандалів із Vercel — Cloudflare зміг переманити чимало проєктів до себе).

Автор на демо показує набір цікавих прикладів, але мені особливо сподобалося про Durable Object з лайв-синхронізацією.

Не знаю, чи я був би готовий до такої зав'язки на вендора, але виглядає цікаво для невеликих проєктів.

Демо: https://www.youtube.com/watch?v=omKvO9KoPLs

Сайт: https://docs.rwsdk.com/

Декілька днів тому в твіттері була чергова драма. Один користувач опублікував коміт з react-router або remix, вже не можу знайти той твіт. Там був "злив" того, що команда планує робити з Remix надалі, але в незавершеному форматі, такий собі чорновий варіант. Цей твіт дуже розлетівся, бо деякі розробники побачили в майбутніх змінах зраду, і основні контрибютори цих бібліотек, а саме Майкл Джексон та Раян Флоренс, почали на це відповідати.

Але це вже не так важливо, бо швидко після цього вийшов пост про те, що Remix після відносно тривалої паузи повертається, але в формі окремого рішення, а не як відгалуження react-router, як це було раніше.

https://remix.run/blog/wake-up-remix

Я раніше користувався Remix, коли розробляв волонтерський проект, ще десь у 2022 році. Загалом мені сподобалось, не бачив суттєвих проблем.
Але зараз Remix, схоже, буде чимось іншим. Основний фокус буде на тому, щоб у майбутньому кількість залежностей була нульовою, був відсутній бандлінг і все було тільки рантайм. А під капотом взагалі не React, а Preact, та ще й не пакет, а форк.

Загалом цікаво буде за цим слідкувати, бо, враховуючи досвід людей, які взялись за це, можна очікувати щось суттєве, але побачимо.
На додачу, автор Vite - Evan You теж поділився своїми думками і тим, що йому такий підхід не подобається. Ну, час розсудить.

https://x.com/youyuxi/status/1927992416075927659