Presentation for the San Francisco Sandstorm Meetup. Overview of design process in creating TextEditor. Principles for designing Sandstorm Apps.

1. TextEditor
Designing open source apps
March 24, 2016
San Francisco, Sandstorm Meetup
By Richard Caceres

3. About Me
● Richard Caceres
● Designer & Developer
● @rchrd2
● http://rchrd.net
● Currently:
○ Archive.org
● Previously
○ Wowlist (co-founder)
○ Cargo Collective

4. Summary
Free open source software is great. If I want to alter the features, I can just fork it,learn
the code, modify it, build it, upload it, and maintain a fork...
So we can avoid this, let's build customizability into our apps.
Let's also follow a simple set of design principles to create a more cohesive user
experience across apps.
TextEditor is a working example of this approach.

5. What is "free software"?
● You have the freedom to run the program, for any purpose.
● You have the freedom to modify the program to suit your needs (eg access to
source code).
● You have the freedom to redistribute copies, either gratis or for a fee.
● You have the freedom to distribute modified versions of the program, so that the
community can benefit from your improvements.
(from New Media Reader, intro to The GNU Manifesto by Richard Stallman)

6. What makes "good" free software?
● It works!
● The features are simple and do not try to do too much.
● The source code is simple and easy to modify.
● It's extensible or configurable.
○ A lot of times this is all that's needed, rather than forking to modify.
○ For example, custom CSS.

7. Why Sandstorm?
Sandstorm makes it easy to:
● Build your own tools
● Share the tools you build
● Use other open source tools
It's also simpler to have everything on one machine rather than
scattered across many services around the world.

9. The importance of "design" for apps
● Design ≠ Decoration
● Functional, efficient and ergonomic
● Emotional enjoyment (makes users happy)
● Focus on the tool. Good design is invisible.
● Consistency is also important, because it reduces cognitive load when switching
between applications

10. Mac OS X
Mac OS X is an example of a cohesive system of apps that use same building blocks for
user interface
● Safari
● Notes
● Mail
● Maps, etc
On the web, Google Apps is another example.

14. Examples of successful open source design
● Atom Editor
○ Good defaults
○ Extremely customizable
● Processing
○ Simple and intuitive for people learning to program
○ Subtle design choices
● Wekan (for Sandstorm)
○ Very intuitive
○ Feels polished
○ Some customizability (change color, title)

19. What are some visual guidelines for a Sandstorm application?
● Use a single column
○ Sandstorm places the grain into an iframe within existing columns.
○ The visual hierarchy is too complex with nested column layouts.
○ A single column is also responsive
● Use system fonts when possible
○ eg: "font-family: sans-serif;" or "font-family: monospace;", etc.
○ These look the best whether you're on a Mac, PC, Chromebook, phone, etc.
○ (I break this rule a little for TextEditor, which uses "Menlo, monospace;")

20. What are some visual guidelines for a Sandstorm application?
● Avoid heavy use of graphics, icons, or other visual elements that overly stylize the
application.
○ The goal is to be simple and strive for the essence of a tool.
○ Strip away ornamentation and focus on functionality.
● Allow user to customize CSS
○ If the application structure is simple, it should be easy for someone to edit the CSS.
○ This allows a user to make the software their own and fit their needs.
If application developers follow these guidelines, this could lead to a cohesive user
experience between Sandstorm applications.

21. TextEditor, an example of these methods
Github
https://github.com/rchrd2/TextEditor
App market
https://apps.sandstorm.
io/app/n4n49dkfyskmhcmg5h0mfzk4kjvce2j
cs8ravr7y7uw9xs2pzghh

28. TextEditor's stack
● Sandstorm handles document lifecycle
● Meteor handles real-time data sync and persistence
● Polymer is used for web component building blocks for UI
● CSS Flexbox is used for layout.

29. Why Polymer (Web Components)?
Framework fatigue
● React
● Ember
● Blaze (Meteor)
● Plain HTML
Re-use the same components across development stacks
It works! See (`static-html`) package for blaze-less Meteor. Not sure if I'll continue to
use it, though. Currently working on a new app in Blaze, but might switch to Polymer.

30. <paper-drawer-panel disable-swipe="true" disable-edge-swipe="true"
force-narrow right-drawer>
<div drawer class="drawer">
<form>
<div class="drawer-title"><b>Document Settings</b></div>
<!- ... -->
</form>
</div>
<div main class="flex layout vertical">
<textarea id="Textarea"></textarea>
<div class="footer layout horizontal"><!-- ... --></div>
</div>
</paper-drawer-panel>
This is using the "paper-drawer-panel" Polymer Web
Component.
Web Component Example

31. <html>
<head>
<style>
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0;}
body { display: flex; flex-direction: column; }
textarea { flex: 1; width: 100%; }
</style>
</head>
<body>
<textarea>Hello</textarea>
<footer>Footer stuff</footer>
</body>
</html>
Flexbox Example

33. Sandstorm app technical concerns
● Once you publish, you have to support that version
○ If it was your web service, you could migrate and forget.
○ From here on out, I have to make sure TextEditor supports MongoDB.
● DDP header issues are fixed thanks to Kenton's Accounts-Sanstorm package!
○ Previously handling Sandstorm permissions with Meteor was difficult. Now it is easy.

34. What's next?
● Make TextEditor more efficient
● Bookmarks app (see next slide)

36. The end.
● These are my opinions. What do you think?
● TextEditor on Github: https://github.com/rchrd2/TextEditor
● Follow me on Twitter: @rchrd2
● Visit my website: http://rchrd.net
● Thanks!