Як розробка додатку для Jira надихнула мене створити зручний нотатник для macOS

💡 Усі статті, обговорення, новини про дизайн — в одному місці. Приєднуйтесь до Design спільноти!

Привіт! Я — UX/UI дизайнер, який одного разу вирішив вийти за межі макетів і зануритися у світ коду. Так, зокрема, з’явився Risk Radar для Jira — створений без жодних знань JavaScript (про його розробку я нещодавно писав). Під час роботи над цим проєктом у мене виникла ще одна ідея: створити інструмент для macOS, який вирішує цілком реальну щоденну проблему розробника, з якою я сам зіткнувся під час створення Risk Radar.

Так народився PeekNote — мінімалістичний нотатник для збереження та редагування фрагментів тексту або коду, який завжди поверх інших вікон.

Ця ідея з’явилася не випадково. Під час розробки Risk Radar я постійно копіював, редагував і вставляв шматки коду: формули, API-запити, приклади з документації. Мене дратувало, що доводилось постійно перемикатися між десятками вікон, вкладок, нотаток, VS Code та браузера. В якийсь момент я подумав:

«А чому б не зробити щось маленьке, зручне, що буде завжди на екрані і дозволить зберігати мої робочі чернетки?»

Так почалась розробка PeekNote.

Проблема: куди зручно кидати чернетки під час розробки?

Я не знаю, як у вас, але коли я працюю над новим застосунком, мій робочий простір перетворюється на хаос із вкладок і тимчасових нотаток. Усе це живе у VS Code, Notion, Apple Notes, десь у Google Docs, десь у Slack... і, звісно, я ніколи не можу згадати, де саме я бачив отой алгоритм або фрагмент коду, який спрацював.

Я шукав інструмент, який:

• буде завжди поверх усіх вікон;
• дозволить швидко зберігати шматки тексту чи коду;
• не буде важким монстром на кшталт Notion чи Obsidian;
• виглядатиме акуратно та просто.

Не знайшов.

І вирішив зробити свій.

PeekNote — що це взагалі?

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

PeekNote завжди на екрані, не закривається іншими вікнами, не заважає, але завжди під рукою. Я зробив його таким, щоб можна було:

• можна було зберігати нотатки у кількох вкладках — наприклад, окремо для API, UI, формул чи запитів;
• легко й швидко редагувати ці нотатки прямо у вікні;
• копіювати будь-який текст одним кліком;
• при потребі — змінювати розмір вікна, щоб мати більше простору для роботи.

Назад у Swift

Під час роботи з JavaScript і Forge мені весь час хотілося повернутись у рідне середовище — SwiftUI для macOS (там хоча б усе ламається по-іншому — знайомо і по-домашньому).

Я вже мав досвід із Type Switch (застосунок для зручного перемикання мов на macOS), тому знав, як працює SwiftUI, SceneDelegate, AppKit-біндінги тощо.

І чесно кажучи, після знайомства з Forge API, його обмеженнями та постійними console.log(…), мені почало трохи бракувати знайомого та зрозумілого досвіду роботи з Cocoa. Тому я з радістю повернувся до Swift і паралельно взявся за новий проєкт для macOS.

PeekNote побудований на SwiftUI + трохи AppKit — без зайвих залежностей і з простим, зрозумілим кодом. Я прагнув зробити його максимально стабільним, естетичним і водночас легким для системи.

Особливості реалізації

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

Я додав власний компонент для введення тексту — ResizableTextView, який можна вручну розтягувати чи стискати мишкою. Стандартний редактор тексту в SwiftUI такого не дозволяє, тому довелося зробити своє рішення, щоб було зручніше працювати з великими фрагментами.

Є підтримка вставки тексту з буфера обміну: можна, наприклад, скопіювати код із браузера або з редактора на кшталт Visual Studio Code (IDE), вставити у вкладку, зберегти й повернутися до нього пізніше, коли буде потрібно.

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

У підсумку

PeekNote — це маленький експеримент, який виріс із реальної потреби. Я створив його для себе, але зараз користуюсь ним щоразу, коли працюю над новим проєктом, будь то щось на JavaScript чи додаток для macOS.

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

PeekNote — це про фокус, мінімалізм і швидкість. Нічого зайвого. Іноді цього достатньо, щоб бути продуктивним.

Якщо вам цікаво спробувати його в роботі — можете завантажити PeekNote з App Store