Онлайн-додаток для малювання okso.app (та що з ним робити)

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті

Про додаток

Нещодавно я запустив мінімалістичний онлайн-додаток для малювання okso.app.

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

Вийшло ось що (https://okso.app)

Ось YouTube-версія GIF-файлу з okso.app демо про всяк випадок.

Ієрархічна структура ескізів

Ще я хотів надати можливість організувати ескізи в ієрархічну структуру «картинка-в-картинці», бо інші подібні додатки типу Excalidraw або Tldraw дають можливість створювати лише плоский список із малюнками.

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

До того ж та імплементація «картинка-в-картинці», яка виконана в okso.app надає можливість використовувати такі візуальні прийоми, як «кодінг інформації за кольором» (щось червоне, а щось чорне) та «кодінг за розміром» (більший розмір — більший акцент). Крім того, за допомогою ліній та стрілок можна показати як один ескіз залежить від іншого.

На прикладі нижче показано, що користувач може переходити з оного ескізу/сторінки в інший, натиснувши на посилання

Приклад: Ескізи структур даних

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

Вийшов ось такий Data Structure Sketches інтерактивний ескіз

Ось YouTube-версія GIF-файлу з ескізом Структур Даних про всяк випадок.

Звичайно, охоплено не всі структури даних. І, звичайно, це не вичерпний матеріал, а скоріше шпаргалка, яка створить візуальні підказки та асоціації для наступних структур даних:

• Зв'язаний список
• Двобічно зв'язаний список
• Черга
• Стек
• Хеш-таблиця (з вирішенням хеш-колізій)
• Дерево (включаючи бінарне дерево пошуку)
• Граф

Кожну сторінку (а точніше кожне посилання на сторінку) на ескізі можна натиснути, тому ви можете заглибитися в структуру даних, яка вас цікавить. Наприклад, «Heap → Max Heap», «Heap → Min Heap», або «Heap → Array Representation».

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

Кожна сторінка містить посилання на приклади JavaScript коду який реалізує певну структуру даних.

Ось кілька прикладів ескізів

Двобічно зв'язаний список

Дерево

Хеш-таблиця

Trie

Граф

Повний список ви можете знайти в ескізі Структури Даних.

Проблеми

Додаток знаходиться в Беті. Є багато недопрацьованих моментів. Одна з проблем, яку мобільні юзери, мабуть помітять першою, це некоректне збільшення канвасу. Інша проблема — швидкість роботи додатка, наприклад, при збільшенні/зменшенні або перетаскуванні канвасу. Але це в роботі, буду фіксити.

Зворотній зв'язок

Буде цікаво почути в коментах, як вам додаток (в його ранній стадії), може будуть якісь цікаві ідеї для нього, або занйдені баги.

Ті кому цікавий подальший розвиток додатку можуть підписатися на апдейти продукту, або зафаловити OkSo в Twitter.