Skip to content

Instantly share code, notes, and snippets.

@dergachev

dergachev/GingkoAppReview.md Secret

Last active December 13, 2015 21:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dergachev/bbb63d6f89056a3420ac to your computer and use it in GitHub Desktop.
Save dergachev/bbb63d6f89056a3420ac to your computer and use it in GitHub Desktop.
Download ZIP
Manually exported revisions from https://beta.gingkoapp.com/#2b19d1f291c99960b6000001
Raw
GingkoAppReview.md

Initial Feedback

Session with Alex & Adriano on Feb 13, 2013 beta.gigkoapp.com

Bugs

What should just be fixed.

Mouse UI

I'd like hoverable icons that expand into the following buttons: ((Save)) ((Edit)) ((Add Child)) ((Add Sibling)).

I use keyboard shortcuts more than anyone I know, but even still to learn/explore a new UI with a mouse.

Login/Register process

  • Clicking "Signup" button should preserve user-enter values for email/password.
  • Password confirmation is useless, remove it.
  • Add "Email password reset link" functionality.
  • alex@evolvingweb.ca seems to be invalid. screenshot
  • only validate email address format on signup, not log in. screenshot

Drag & drop bugs

  • I created a level-2 "Test card" with "Kid 1" and "Kid 2" as level-3 children, then dragged "Test card" to level-1. Buggy result: screenshot
  • After this, I had trouble creating (unrelated) child cards, until I did a full page refresh.
  • IMHO, child cards should follow parent.
  • After a full page refresh, the problem seems to have been fixed:

Caching of export URL

https://beta.gingkoapp.com/api/exports/2b19d1f291c99960b6000001.txt

Because the export URL is not timestamped/unique, browsers cache it improperly.

Export of initial card

In another tree, I dragged a card to the top of the leftmost column. Although I was able to edit/save the card contents, it would not appear in the exported markdown until I deleted and re-created it anew.

Improper access control of public tree exports

This tree is public, but it's export is inaccessible to anonymous visitors:

$ curl --head https://beta.gingkoapp.com/api/exports/2b19d1f291c99960b6000001.txt
HTTP/1.1 403 Forbidden

Contact us styling

The "Contact Us" and "Who's viewing" blocks are annoyingly placed! Also, The menu wraps awkwardly at smaller screen widths. Screenshot

Feature requests

How I'd like things to be.

Auto save and deletion of cards

  • Clicking away from a card should auto-save it. Currently this only works if clicking away onto a different card.
  • Pressing escape SHOULD NOT discard changes, since this isn't what users expect.
  • Immediately, please implement "Are you sure you want to navigate away from this page" handling to avoid losing unsubmitted card edits.
  • In future, consider some kind of localStorage based autosave solution
  • {CMD-Down} and {CMD-Right} and {Cmd+Up} should auto save, and then perform their task.
  • Backspace is a browser shortcut for "Go Back", and should never be used for functionality. Card deletion should be triggered in CardNav by {Cmd+Delete} or by clicking on the ((Delete)) hover-button. In insert mode, it can be achieved as follows: {Cmd+A} {Delete} to clear all, {Esc} to save/exit/delete-empty-card.

Splitting, merging, and rearranging cards

To split a section of a card into its own card, I need to do the following: select the paragraph(s), cut it via Cmd+X, create new sibling via Cmd+Down, paste via Cmd+V, save via Cmd+Enter. Could it be streamlined as follows: select the paragraph(s), press Cmd-Enter to create a child card from it.

For merging, this should be done via dragging a card onto a specific zone in another card (at which point an icon would appear showing that we're about to merge).

Drag and drop rearranging also needs to support making a card a child of another card, which could also be done by dropping it in a specific zone. It's not clear if this is currently implemented, or not.

Automatically manage card headings.

Card titles should always be h1. Have Gigko's CSS style h1s in column 3 to be smaller than H1 in column 2.

A newly created card should look as follows: Screenshot

Public trees

When visiting a public tree he doesn't own, a user should be prompted to clone it. Like forking a gist

When visiting a public tree a user owns, he should have a link to edit it.

Exporting markdown

The "Save as text" feature is great! Related ideas:

  • Export to http://socrates.io/?#jjtaWY6 instead, or implement similar functionality in Gignko
  • Support importing of trees. Would need to figure out how to demarcate cards. (Easy if each card has only 1 heading, whose level corresponds to hierarchy).
    • Implement bookmarklet that automates importing markdown/cards, like TrelloBookmarklet
    • consider converting from other formats into markdown using pandoc
  • Once you have importing is implemented, consider making Gigko into simply an alternative view of a markdown doc. Allow users to switch from Socrates-style view to Gigko-style view.
  • Other markdown tools to check out:

Revisioning

I want version control on my documents. Examples include Google Docs and Gist revision handling

Both are too busy. I'd like to have automatically creating a restorable/diffable revision whenever:

  • user asks to "tag" current state, with optional commit message
  • user exports tree to markdown
  • at the end of each day, when there are un-committed edits
  • after each card save, but keeping only X card saves, and since the last daily commit

Alternatively you can keep every edit (like most wikis and gist do), but this could be a premium feature.

Improved "Feedback" tab

duolingo.com has an "Feedback" tab just like Gingko's "Contact us", and when you click on it you see this:

Tree Metadata card

  • This tree ("GingkoApp Review") wastest the first column, since I only included a single card containing the tree title and description.
  • This might be avoided by implementing a "Primary card" which can live at the top of the first column, and display/edit tree metadata fields (eg title/description as separate fields) Screenshot.
  • How gist does it

Exporting slideshows

I am using Gingko as a slideshow maker! I even wrote a tool called url2mdpress to automate this.

Something in the middle

Misc goes here.

Card Styling

  • In card HTML content, add top and bottom margins around separate paragraphs.
  • Add a subtle (2px grey line) separator between any two cards.
  • Add a less subtle (15px grey line) separator between cards that are cousins, not siblings.
  • Currently greyed-out cards with images aren't greyed out properly. Consider setting the CSS opacity property, instead of text-color.

Tutorial

  • The current tutorial assumes you're following it exactly. Most users don't do that. Most users hate typing, and even copying-and-pasting is no fun.

  • I recommend replacing the tutorial with one that involves modifying an existing tree.

  • Make it very hard (or impossible) to lose/hide the tutorial if you're at "My First Tree". Consider only having the tutorial on this tree.

  • If the tutorial ever is dismissed and then re-shown, make it remember what step it was on.

  • Add a 45 sec video intro/tutorial, like on https://workflowy.com/

Navigation

  • Moving the cursor (eg from child to parent) shouldn't make the child inactive. I would prefer if all parents, siblings, and children of current card were active.
  • Scrolling should change active card; like [Bootstrap Docs menu[(http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem)
  • I feel that scrolling should be synced across columns, somehow, in real time. "Elastic scrolling"?
  • Hitting {Right} on a child-less card should make it possible to jump to a nephew node that's visually closest. I propose creating an empty placeholder node, which you can either edit, or leave via {Up} or {Down}
  • Maybe we should fix the number of columns to 3 or 4. Side scrolling might be ugly.

Visual styling tweaks

  • Gingko's current yellow favicon is too pale, especially on background tabs. Screenshot
  • This tree's document.title should be "GingkoApp Review | Gingko App". Currently just "Gingko App".

URL structure

Inspiration

Other things to check out.

Other web apps

Keynote

Keynote (and Powerpoint) might be the most popular card-hierarchy based mind-mapping tools out there.

Keynote Screenshot

Writing and communicating.

  • "Structure", John McPhee's New Yorker article about his card-based writing process.
  • Minto Pyramid Principle

Drupal Sun

Drupal Sun is Evolving Web's take on an RSS reader UI, all in javascript.

Thoughts

Conclusions, questions, etc.

Gingko and screenshots

I use Dropbox and Copy Public Url to automatically upload my screenshots and copy their URL into the clipboard. It's freaking awesome combined with Gignko!

Screenshot

Because screenshots are automatically resized (which is great!) you should provide a way to view full size, either as a link, or as a lightbox.

Gingko is awesome!!!!

After using it for the last hour, I feel it's what I wanted workflowy and keynote to be. I love it already!

Versioning

This sub-tree can contain links to (manually exported) revisions of this tree.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment