Часта проблема в JavaScript — потрібно порівняти два об'єкти.

Найпростіше рішення — JSON.stringify() обох об'єктів і порівняння рядків. Працює, але…
🔸 не підходить для циклічних структур
🔸 блокує основний потік на великих об'єктах
🔸 не завжди надійне через порядок ключів

Погана ідея для продакшену, коротше.

🧠 Але TC39 (комітет, що розвиває JS) розглядає нову пропозицію — Composite.
Це новий тип об'єкта, який:
✔ виглядає як звичайний об'єкт
✔ підтримує всі стандартні API
❌ але immutable — тобто змінити його не можна

Що це дає?
🔹 Надійне порівняння
🔹 Прогнозованість
🔹 Безпека при передачі об'єктів

Composite зараз на Stage 1 — тобто комітет активно розглядає ідею і шукає альтернативи. Якщо все піде добре — перейде на Stage 2, а там і до реалізації недалеко.

Більше деталей дуже добре пояснив Matt Pocock у Twitter — рекомендую почитати, залишу лінк ⬇

https://x.com/mattpocockuk/status/1911705407233393027

Пригадую коли ще був молодим розробником, компанія де я працював вимагала проходити “екзамен” щоб піднятись на наступний рівень. Ну тобто з джуна на мідла, і тд.

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

Одна з тем яка мені була дуже цікавою — як працює JavaScript всередині? Ну там Event Loop, черга, стек, мікротаски і тд. Розбирався я в цьому читаючи статті та окрему літературу. Тоді ще був досить популярним Medium.

І от зараз, дивлюсь як змінилась ситуація — і я радий. Якщо ти зараз починаєш свій шлях — просто відкриваєш YouTube, вводиш “event loop javanoscript” і в тебе купа крутих, вилизаних відео з графікою, прикладами, іноді навіть симуляторами.

Тож для новачків сьогодні поділюсь цим класним відео, де провізуалізовано все що пов’язано з Event Loop. Я і сам переглянув повністю, щоб перевірити чи нічого не забув.

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

Вирішив знову понюхати АІ пороху і навайбкодив 💅 за один вечір простий таймер під macOS, щось типу помодоро.

Так як я молодий дід, а сидіти весь день в кріслі — не найкраще для спини, то вирішив раз на годину робити якісь вправи. Короткі, на декілька хвилин. Ідея з помодоро ніби підходить, але я полазив по App Store — нічого не знайшов, щоб мені справді сподобалось. Все або занадто складне, або негарне, або з рекламою. Ну і я вирішив — час спробувати Swift і SwiftUI.

Якщо чесно, враховуючи що я взагалі не писав на Swift до цього, все виявилось досить просто, якщо відкинути нюанси macOS-платформи (як зробити апку тільки в тулбарі, як правильно підписати для запуску тощо). Схожий принцип як і в React, тай в тому ж Flutter. Є дерево елементів (view) в цьому випадку, складаєш як треба. Ще й прев’юшки в Xcode кайфові, можна UI прямо редагувати і воно одразу з’являється в коді.

Цікавим було зробити спільний стейт між кількома View, ще цікавіше — між кількома вікнами (бо я зробив окреме Settings-вікно). Але загалом — нічого критичного, документації достатньо, гугл працює.

Мінімалку таймера зібрав за один вечір: старт, пауза, скидання, нотифікація коли час вийшов. Потім ще хвилин 10 щоб зібрати все в .dmg.

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

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

Під моїм пильним наглядом АІ не встиг повністю налажати, але косяків було більш ніж достатньо. Чим довше я працював над апкою, тим більше прокидався в мені старий добрий АІ-скептик. Але так як я не перший рік в цьому бізнесі, то вчасно надавав 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