Gonzo

Gonzo is a lightweight, open source markdown editor written for Adobe Air for desktop using Flex 4 and AS3. Its a stripped-to-the-bone application that serves one purpose: helping you deliver well formed and easy to proofread web content.

Why use markdown, I already know HTML?

Rather than drone on about the pros and cons of each, I’ll just present you with a simple example. You let me know which version you would rather proofread.

HTML version

Here's a header

Here's some content in a paragraph. And here's a link to Google and another to my Github account.

And here's another paragraph
    
this time it contains a blockquote



    
One of these lists' syntax
    
has the following attributes:
    

        

            
intrusive
            
ugly
            
very hard to read
        
    
    
which one do you think it is?

Markdown version

## Here's a header

Here's some content in a paragraph. And here's a link to [Google][] and another to my [Github][] account.

And here's another paragraph
> this time it contains a blockquote

* One of these lists' syntax
* has the following attributes:
    * intrusive
    * ugly
    * very hard to read
* which one do you think it is? 

[Google]: http://www.google.com
[Github]: https://github.com/tonylukasavage

Why should you use Gonzo?

Well, unless you are writing content for the web, you probably shouldn’t. Gonzo is written specifically for those who want to leverage the readability of markdown over HTML when publishing web content. So whether you are writing a WordPress blog post, editing a wiki, or even just an answering a question on StackOverflow, Gonzo can make your life a whole lot easier.

In the spirit of markdown, I’ve added just enough features to increase efficiency while maintaining a content-driven writing experience. The idea is to only add features necessary for making web publishing easier. All the effort saved by not implementing useless features was redirected into usability.

Just Give Me The Feature List Already

Yeah, I tend to skip the text and go right for the feature list too. Kudos to anyone who actually read the previous content before coming here.

• Live HTML preview – You can actually see the raw and rendered HTML generated by your markdown in a preview pane.
• Multi-tab editing – Edit many documents at the same time.
• Cross platform – Works on any desktop that supports Adobe Air.
• Keyboard and (context) menu shortcuts – Creating markdown is even easier now with multiple was to create it.
• HTML Export – Export your generated HTML to a file so it can easily be uploaded or shared.
• Cheat Sheet – integrated markdown cheat sheet for beginners and vets alike.

Coming soon…

This is the list of features I personally would like to have, as I’m the only user so far. Please let me know what you think would be a good addition to Gonzo’s functionality.

• yfrog integration – Wouldn’t it be nice to browse to a file on your desktop, upload it as an image, and get a markdown link placed in your document in one click? I think so too.
• bit.ly integration – see above
• Markdown toolbar shortcuts – Just in case the keyboard, context menu, and native menu shortcuts aren’t enough…
• Preferences – Let users set things like fonts, colors, editor sizes, and eventually maybe even theming.
• Local settings – For persisting preferences between Gonzo sessions

What else do you have in mind?

Want to Contribute?

Good! Like most open source projects, ongoing development will be heavily motivated by contributions and feedback from its community of developers and users. While Gonzo will continue to grow as I use and find features I want, its going to be you who determines if it matures into an application for the masses.

There’s a number of ways you can contribute:

• Use it and let me know what you think.
  • What is it missing?
  • What am I doing wrong
  • What am I doing right?
• Fork , start hacking away, and send me some pull requests. I’m very open to help, but bear in mind that its lightweight nature and usability should not be sacrificed for the sake of features.
• Design help is very welcome. I’m a dev through and through, so it will remain spartan in frills unless someone else decides to add the polish.

Summary

There’s a lot to come yet for Gonzo. I still need to get the wiki up and running for basic docs. I may even take the time to make a web page for it if it garners enough interest. Or none of this could happen and I could just continue to use it myself. Only time and feedback will tell.

If you do start using or hacking Gonzo, you can let me know here, on , or on . I’d love to hear about your experience. In the meantime I’ll continue using it to write my web content and keep improving it as I see fit.

Oh, and this entire post was written in markdown using Gonzo. Here’s a link to the original markdown for the blog post.

Gonzo

In case you haven’t heard me talking about it on , I’m creating my own markdown editor called . If you don’t know what markdown is, read up on it at John Gruber’s (creator) blog. It was created as a way to make web based writing more readable from a writer’s perspective.

Here’s some of the highlights of the VERY young Gonzo:

• Its open source and
• Its written using Adobe Air for desktop, Flex 4, and AS3
• The markdown to HTML parsing is done using
• Uses Grant Skinner’s StringUtils.as
• Its 3 days old as of the publishing date of the article
• It generates HTML as you type markdown and shows it live in a preview panel
• Counts your words for those web writers trying to hit quotas

Test Run

Rather than ramble on from a beginner’s stand point, I’ll leave you with the notes I took last night at the meetup using Gonzo. First, I’ll show you the notes as I entered into Gonzo. Like I said at the beginning, if markdown is unfamiliar, read up. Just one glance shows you how much more readable and editable it is than typical HTML markup.

My Notes in Markdown

## Node.js 
 
### Overview
 
* Server side JS. 
* HTTP/TCP built in
* non-blocking, event driven, 1 thread (launches process into event queue)
* not suitable for CPU intensive work
* Node.js is alpha and changes a lot between revisions
* for unix, not Windows friendly
* everything is a callback and gets its own process
        * lots of nested callbacks
* has to run from command line, no GUI for management.
* you can use it as a scripting language like ruby or perl
        * does not have to be event driven if ran this way.
* Having it server side allows you to use JS up and down your whole technology stack
 
### NPM
 
* Node package managaer
* A lot like CPAN for perl
 
### Modules
 
* [100's of modules](https://github.com/joyent/node/wiki/modules)
* examples
        * Sizzle
                * DOM selections and traversing
        * Paperboy
                * serves static files
        * Jade 
                * templating engine
        * ExpressJS
                * web framework
                * use it to deliver RESTful services
        * zombie headless browser
                * useful for testing Node driven services
                * assertions against returned data
                * DOM traversing is all custom code (why?!)
        * Coffeescript
        * multiple cores w/ web workers
        * Node Inspector
                * debugger
                        * breakpoints
                        * call stack
                        * watch expressions
                * command line
                * runs in a webkit browser
                * based on google's v8 engine
 
### Basic Server
 
        var http = require("http");
 
        http.createServer(function (request, response) {
                response.writeHead("Content-Type: "text/html");
                response.write("");
                response.end();         
        }).listen(8081);
 
### Emitters
 
Emitters are used to counter nesting of code. Should probably use constants to define emitter names. Add parameters afer emitter name in `emit()` to pass to callback.
 
        emitter.emit('eventName', param1, param2);
        emitter.on('eventName', function(param1, param2) {
                // do stuff
        });

And now, through the magic of Gonzo and Showdown.as, we get to see the markdown translated into HTML. You can then take the translated HTML and publish it to the web, allowing it to leverage any CSS and formatting your target venue has in place. Again, notice how much more readable the markdown version is than this HTML version.

My Notes Translated to HTML via Gonzo

 
<h2>Node.js</h2> 
 
<h3>Overview</h3> 
 
<ul> 
<li>Server side JS. </li> 
<li>HTTP/TCP built in</li> 
<li>non-blocking, event driven, 1 thread (launches process into event queue)</li> 
<li>not suitable for CPU intensive work</li> 
<li>Node.js is alpha and changes a lot between revisions</li> 
<li>for unix, not Windows friendly</li> 
<li>everything is a callback and gets its own process
<ul><li>lots of nested callbacks</li></ul></li> 
<li>has to run from command line, no GUI for management.</li> 
<li>you can use it as a scripting language like ruby or perl
<ul><li>does not have to be event driven if ran this way.</li></ul></li> 
<li>Having it server side allows you to use JS up and down your whole technology stack</li> 
</ul> 
 
<h3>NPM</h3> 
 
<ul> 
<li>Node package managaer</li> 
<li>A lot like CPAN for perl</li> 
</ul> 
 
<h3>Modules</h3> 
 
<ul> 
<li><a href="https://github.com/joyent/node/wiki/modules">100's of modules</a></li> 
<li>examples
<ul><li>Sizzle
<ul><li>DOM selections and traversing</li></ul></li> 
<li>Paperboy
<ul><li>serves static files</li></ul></li> 
<li>Jade 
<ul><li>templating engine</li></ul></li> 
<li>ExpressJS
<ul><li>web framework</li> 
<li>use it to deliver RESTful services</li></ul></li> 
<li>zombie headless browser
<ul><li>useful for testing Node driven services</li> 
<li>assertions against returned data</li> 
<li>DOM traversing is all custom code (why?!)</li></ul></li> 
<li>Coffeescript</li> 
<li>multiple cores w/ web workers</li> 
<li>Node Inspector
<ul><li>debugger
<ul><li>breakpoints</li> 
<li>call stack</li> 
<li>watch expressions</li></ul></li> 
<li>command line</li> 
<li>runs in a webkit browser</li> 
<li>based on google's v8 engine</li></ul></li></ul></li> 
</ul> 
 
<h3>Basic Server</h3> 
 
<pre><code>var http = require("http");
 
http.createServer(function (request, response) {
    response.writeHead("Content-Type: "text/html");
    response.write("<html></html>");
    response.end();     
}).listen(8081);
</code></pre> 
 
<h3>Emitters</h3> 
 
<p>Emitters are used to counter nesting of code. Should probably use constants to define emitter names. Add parameters after emitter name in <code>emit()</code> to pass to callback.</p> 
 
<pre><code>emitter.emit('eventName', param1, param2);
emitter.on('eventName', function(param1, param2) {
    // do stuff
});
</code>

And finally below is the above generated HTML copied directly into my blog. The CSS that governs my blog does its work on the elements and makes it look relatively web ready. Obviously if I put a little more effort in (as I will soon), I can tailor the CSS to play well with my generated HTML. For now, though, you can see the basic formatting applied. So without cluttering your writing with HTML you can still effortlessly generate web ready content.

Gonzo Generated HTML on my Blog

Node.js

Overview

• Server side JS.
• HTTP/TCP built in
• non-blocking, event driven, 1 thread (launches process into event queue)
• not suitable for CPU intensive work
• Node.js is alpha and changes a lot between revisions
• for unix, not Windows friendly
• everything is a callback and gets its own process
  • lots of nested callbacks
• has to run from command line, no GUI for management.
• you can use it as a scripting language like ruby or perl
  • does not have to be event driven if ran this way.
• Having it server side allows you to use JS up and down your whole technology stack

NPM

• Node package managaer
• A lot like CPAN for perl

Modules

• examples
  • Sizzle
    • DOM selections and traversing
  • Paperboy
    • serves static files
  • Jade
    • templating engine
  • ExpressJS
    • web framework
    • use it to deliver RESTful services
  • zombie headless browser
    • useful for testing Node driven services
    • assertions against returned data
    • DOM traversing is all custom code (why?!)
  • Coffeescript
  • multiple cores w/ web workers
  • Node Inspector
    • debugger
      • breakpoints
      • call stack
      • watch expressions
    • command line
    • runs in a webkit browser
    • based on google's v8 engine

Basic Server

var http = require("http");

http.createServer(function (request, response) {
    response.writeHead("Content-Type: "text/html");
    response.write("");
    response.end();
}).listen(8081);

Emitters

Emitters are used to counter nesting of code. Should probably use constants to define emitter names. Add parameters after emitter name in emit() to pass to callback.

emitter.emit('eventName', param1, param2);
emitter.on('eventName', function(param1, param2) {
    // do stuff
});

Screenshot of Gonzo in Action

Summary and TODO

I'll end with the current TODO list for Gonzo. Please feel free to add your own idea in the comments.

• Add ability to edit and apply CSS within Gonzo
• More robust "project" environment to allow grouping of markdown and CSS with generated HTML
• Spell Checker, likely via Squiggly
• Major UI polish (gonna need help here)
• Create Mac and Windows native downloads on the