• Stars
    star
    198
  • Rank 196,898 (Top 4 %)
  • Language
  • Created over 2 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

โœ๐Ÿป The drawing app to express, grasp, and organize your thoughts and ideas. Draw to explain. Draw to grasp.

Ok! So... The drawing app

OkSo App

TL;DR

The OkSo app is the drawing app to express, grasp, and organize your thoughts and ideas. Draw to explain. Draw to grasp.

Instructions on how to Add your showcase example to okso.app

Concept

Some of you are visual learners. You need to see pictures and visualizations to explain and grasp concepts. You keep a pencil and a piece of paper at hand. Sometimes it feels like connecting two circles with an arrow would speak more apparent than describing such circles' relationship with words. Visualizations, drawings, and sketches help you organize your thoughts and knowledge.

okso.app demo

The process of visualization is not always easy. It requires some thinking and energy. That's why you might find yourself taking a deep breath, and saying "Ok! So..." to yourself or your vis-ร -vis before diving deep into the concept. That's the reason for the Thinker with the "Ok! So..." in the logo.

The physical paper or the notepad is good but it has its limitations:

  • You may forget it at home.
  • The page space might not be enough to contain all the details.
  • Often you only have pens of one or two colors.
  • If you made a typo you can't just undo/redo it, the sketch is not really editable.

The OkSo app tries to overcome these limitations and gives users the possibility to "Draw to explain" and "Draw to grasp".

Features

The limitations mentioned above are being addressed as follows:

  • The OkSo app is available online and thus it is always with you. Currently, you may export all your drawings to the file and share them between devices manually (i.e. via Google Docs or Dropbox). All your drawings are stored in your browser. We don't send your data to the back-end. The possibility to automatically sync your drawings between devices is in our Roadmap.
  • It gives you an "infinite" canvas.
  • No color limits.
  • You may edit your drawings and undo/redo your edits.

okso.app demo

Many online drawing apps give you these (and not only) possibilities. Take a look at tldraw or excalidraw, for example. These apps are awesome! Even more, the OkSo app is built on top of the @tldraw/tldraw NPM package itself.

However, what the OkSo app tries to do on top of that is to experiment with the way you organize your drawings. It uses the concept of nested pages. The page (to be more precise the link to a page) is a first-class citizen of your drawing along with other shapes like freehand curves, rectangles, ellipses, or texts. So you may embed/draw links to sub-pages inside the page. It means that you may organize your drawings in the nested tree structure.

For example, here is one of the variants you may organize your drawings/pages:

Root drawing
  โ”œโ”€ Goals
  โ”‚     โ”œโ”€ 2021
  โ”‚     โ”œโ”€ 2022
  โ”‚     โ””โ”€ ...
  โ”œโ”€ Career
  โ””โ”€ Learning
        โ”œโ”€ Machine Learning
        โ””โ”€ Algorithms breakdown
              โ”œโ”€ Binary search
              โ”œโ”€ Power Set
              โ””โ”€ ...

Each item in this tree is a separate drawing/page itself. The content of each page might be anything you are using your notepad for. For example:

  • My 2022 goals
  • My career plans
  • The "Drawing App" system design
  • Binary search algorithm breakdown
  • Brainstorming the startup ideas
  • The AI learning path
  • Logistics for my next trip
  • You name it...

The fact that the link to the sub-page is just a regular shape allows you to use size- and color-coding, to group the links together, and to easily distinguish them visually.

okso.app demo

Also, compared to the flat lists, you'll not be overwhelmed by a large number of pages, since they may be organized in a tree structure. You will only see the links to the sub-pages of a particular level. You can "travel" easily between the sub-pages back and forth, deeper and deeper until you find a page you need.

okso.app demo

Another approach, that the OkSo app takes compared to the other drawing apps is to be as simple and as minimalist as possible (just like your physical notepad). This relates not only to the UI but to the list of tools and features in particular (therefore the rectangle, the ellipse, and the arrow are hidden from the tools panel by default). For example, instead of having a reach collection of primitives, what about just drawing the "DataBase Cylinder" icon from scratch? Yes, one of the real reasons for that is plain simple laziness and desire to code less :D However, I believe, this approach also feels more authentic and artistic. When you use a whiteboard during the technical interview or during the brainstorming you draw such primitives easily, aren't you? Plus, having such basic functionalities as copy-pasting, cloning, and resizing should allow you to deliver your thought fast and easily.

okso.app demo

The OkSo app is a Progressive Web App (PWA). It means that you may install it on your device (add to your home screen) for faster access (see the instructions for iOS and MacOS and also the instructions for Android).

Demo

Here is a demo of how the okso.app may be used to explain/grasp the idea behind some basic data structures:

okso.app demo

You may also check the full demo video on YouTube to get more context.

Showcase

The OkSo Showcase contains some drawings examples that were made using the okso.app:

okso.app showcase

You may also check the full demo video on YouTube to get more context.

Feedback

Note, that the app is in its early beta stage and some features from our Roadmap are still in progress and will be delivered soon.

Meanwhile:

Notes

โ—๏ธ The actual source-code of the app is not open-sourced at the moment.

Author

More Repositories

1

javascript-algorithms

๐Ÿ“ Algorithms and data structures implemented in JavaScript with explanations and links to further readings
JavaScript
173,558
star
2

homemade-machine-learning

๐Ÿค– Python examples of popular machine learning algorithms with interactive Jupyter demos and math being explained
Jupyter Notebook
21,617
star
3

learn-python

๐Ÿ“š Playground and cheatsheet for learning Python. Collection of Python scripts that are split by topics and contain code examples with explanations.
Python
14,972
star
4

state-of-the-art-shitcode

๐Ÿ’ฉState-of-the-art shitcode principles your project should follow to call it a proper shitcode
4,789
star
5

nano-neuron

๐Ÿค– NanoNeuron is 7 simple JavaScript functions that will give you a feeling of how machines can actually "learn"
JavaScript
2,192
star
6

promote-your-next-startup

๐Ÿš€ Free resources you may use to promote your next startup
2,000
star
7

js-image-carver

๐ŸŒ… Content-aware image resizer and object remover based on Seam Carving algorithm
TypeScript
1,504
star
8

machine-learning-experiments

๐Ÿค– Interactive Machine Learning experiments: ๐Ÿ‹๏ธmodels training + ๐ŸŽจmodels demo
Jupyter Notebook
1,461
star
9

machine-learning-octave

๐Ÿค– MatLab/Octave examples of popular machine learning algorithms with code examples and mathematics being explained
MATLAB
796
star
10

self-parking-car-evolution

๐Ÿงฌ Training the car to do self-parking using a genetic algorithm
TypeScript
688
star
11

use-position

๐ŸŒ React hook usePosition() for fetching and following a browser geolocation
JavaScript
298
star
12

covid-19

๐Ÿ“ˆ Coronavirus (COVID-19) dashboard to show the dynamics of ะกoronavirus distribution per country
JavaScript
265
star
13

nodejs-master-class

๐Ÿ›  This repository contains the homework assignment for Node.js Master Class that is focused on building a RESTful API, web app GUI, and a CLI in plain Node JS with no NPM or 3rd-party libraries
JavaScript
235
star
14

angular-library-seed

๐ŸŒพ Seed project for Angular libraries that are AOT/JIT compatible and that use external SCSS-styles and HTML-templates
TypeScript
203
star
15

links-detector

๐Ÿ“– ๐Ÿ‘†๐Ÿป Links Detector makes printed links clickable via your smartphone camera. No need to type a link in, just scan and click on it.
TypeScript
184
star
16

trekhleb.github.io

๐Ÿงฌ My personal website with a list of my projects that help people learn and blog posts about life, web-development, and machine-learning.
TypeScript
176
star
17

hello-docker

๐Ÿณ Example Docker project that is used as illustration for automated continuous delivery flow with DockerCloud and DigitalOcean
Python
48
star
18

micrograd-ts

๐Ÿค– A TypeScript version of karpathy/micrograd โ€” a tiny scalar-valued autograd engine and a neural net on top of it
TypeScript
42
star
19

giphygram

๐Ÿ”Ž Experimental React application for searching GIF images on GIPHY
JavaScript
24
star
20

vscode-search-tree

๐Ÿ”Ž (Draft!) VSCode extension to show the search results in a tree view
TypeScript
21
star
21

trekhleb

๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป My GitHub profile intro
15
star