github goes ace (and demos)

A week ago GitHub announced they were incorporating the Ace editor (which powers the Cloud9 IDE).  Since I am a fan of both Cloud9 and GitHub, I gave it a whirl on my GitHub Pages site and was not disappointed.  As advertised one can easily open a file for editing, preview the diff of your changes and commit.  I think it will likely become useful to edit posts when (if) I finally decide to move my blog from here at Blogger to Octopress (just because it looks fun).  For me, this is particularly useful for simple changes like those I have made to my demos and experiments.  Speaking of demos, I had created a simple drawing app using HTML5 canvas for my preschooler which evolved into a demo of the HTML5 History API thanks to a tweet by Christian Heilmann and subsequent read of his blog post.  I decided to use this History API to create the undo/redo functionality that I rely on heavily if i'm trying to draw something in a painting tool.  As a bonus I added a localStorage call that will recreate your last drawing if your browser closes or you are forced to leave the site for a while.  What does that look like:

 I entered the demo in the DevDerby, you can find it here.  I hope you 'like' it too.  (note: I've only really tested my demo on firefox 5, 6, 7, and 8 as well as chrome 13 & 14, so your results may vary if you use a different browser)

Chrome Dev Tools as an IDE

I've spent a lot of time trying to find the best development method in Chrome OS.  Recently I decided I wanted to create a chrome extension using Chrome OS.  My first stop was CodeRun IDE which has a sample Chrome Extension project so I thought it would be great for a starter.  The development is pretty mess free, but the problem comes once its downloaded.  It comes downloaded and zipped.  When loading an unpackaged Chrome Extension you can point Chrome to a directory, but not a zipped directory.  So I had to unzip the files...which was pretty easy to do once I found wobzip.

Now that I had a skeleton Chrome Extension up and running, I could start to make it my own.  I decided on a simple calculator for starters, plus I thought it might be useful.  I have to admit it had been a while since I'd used the user 'chronos' in Developer mode, but once I got it there I found that Chrome OS had a new default text editor (thankfully) in 'vi'.  This is where it got really fun.  I edited my popup.html file to have a stylesheet and JavaScript file and loaded the html directly in Chrome.  Enter the best web app ever... Chrome Dev Tools.

With Dev tools I am able to make changes to my stylesheets through the inspector to get the style just how I want, then save the modified .css file to the extension directory.
 Similarly, I can edit and save versions of my JavaScript file directly from Dev tools.  The only issue with this is when I overlooked some invalid code which prevented Chrome from loading the JavaScript file.  This was not much of an issue the one time it happened to me, as I was able to enter vi and quickly rectify the rogue curly brace and was back to Dev Tools in no time.  So If you ask me what my choice is for rapid JavaScript development, I'll say Chrome Dev Tools.

 The result from blank files to:


and

Duostack: Cloud Platform as a Service

I have been using and trying many of the all-in-one solutions for web-based development on my Cr-48, but what happens when your favorite editor does not deploy directly to where you want your app to live (cloud9)?  I tried this recently with a NodeJS app and a cloud platform (currently in beta) called Duostack.  For my NodeJS app, just as everyone else toying with Node, I reinvented reworked the wheel and used Ryan Dahl's (creator of NodeJS) basic chat application.  All I did was partition the client to act like it had multiple rooms rather than one group room as in the original.  That is not what this post is about. This post is about how easy it is to get a node instance up and running on Duostack.

Duostack is a super easy to use cloud platform as a service for Node and Ruby apps.  Databases that are available by default are MySQL, MongoDB, and Redis (the documentation states external DBs are welcome).  The deployments live on the Amazon EC2 by default, but there is 'cross-cloud reliability' that will allow for fail over to the Proactive Cloud in case of a possible Amazon outage.  Deployment is as simple as it could get with a cloud platform (well it could get simpler, but its super easy as you can read below). 

To setup Duostack I had to move away from Chrome OS and into Ubuntu on my Cr-48.  I followed the simple steps to get the command line interface installed.  I used the curl method versus the node package manager install and had my Duostack instance configured shortly thereafter.  So now to create a Duostack app.  This is even easier then setup of the command line client, simply type 'duostack create <yourappnamehere>' and you have it. Duostack uses Git to control deployment so deploying is also a snap, just feed the command 'git push duostack master' from your git repository, wait a few seconds while Duostack works the deployment magic, and you have your Duostack application deployed.  Mine lives here.  So far I am more than pleased with my Duostack beta access and invite anyone with interest in deploying a Node or Ruby app to a cloud platform to signup and give it a try.  I have a few other betas for platform as a service solutions to check out, but Duostack got first dibs by granting me beta access before the others.

changing old habits

I have been doing a lot of development on my Cr-48 lately.  And as I sit here coding away I wanted to note how useful chrome is to me as a developer.  As I have written about previously there is a plethora of web-based IDEs to develop with in Chrome OS.  So what I have been finding particularly useful regardless of the development environment is something any chrome user (I'm talking browser now, not OS) can utilize...the Chrome Developer Tools.  Before I received my Cr-48, the majority of my browser based debug sessions lived in Firefox with the amazing and powerful tool Firebug, but thanks to Google I was forced to try something new.  I thought nothing else compared to Firebug (I am not going to speak out against Firefox or Firebug as both are spectacular), but as I have familiarized myself with the Chrome tools I find they are just as powerful and robust.  I love how easy it is to inspect an element on the page and edit CSS and JavaScript, check network events, record a timeline, or just drill through local variables in the console.  So if you are like I was, before you move from chrome to some other tool just to step through your JavaScript in the console, stop and give the Chrome Developer Tools a try, you might decide to stay.

ShiftEdit web-based IDE

I have come to the conclusion that there is plenty of selection for online application development using a web-based development environment.  After trying out several online IDE's over the last few months I was asked by a reader to check out ShiftEdit.  I had read that this was an editor of choice for many on some of the Chrome OS forums where the question of what is used to develop on the Cr-48 usually shows up.  So I decided I would try out another IDE to get a feel for how it compares to others I have tried.


First off, bonus points for allowing Google (or Facebook) login.  After authentication, this feels like a desktop IDE similar to what I feel like in CodeRun, Cloud9, or Akshell (I usually test this by going full screen on my Cr-48 and say its good if it isn't obvious I am in a web browser).  Selection of file formats is diverse and allows for PHP, HTML, JavaScript, CSS, Perl, Python, Ruby, Java, or Text with built-in FTP support, which is nice for those who enjoy diverse development.  I tried to create a trivial web page and was pleased with the HTML editor with the exception of when I tried the split view (HTML and Design viewed at the same time) I found it hard to keep the focus on the HTML screen and ended up navigating away from the editor when hitting backspace to delete a <div>.  This is not a huge deal as I would likely not develop full time in split view.  


JavaScript editing is almost too full featured for my taste by default.  There is an auto complete feature that will auto close brackets in your code as you type.  I found that I was creating double closing brackets so I turned that feature off which was easy enough in the Edit -> Preferences menu.  However,  JSLint is a wonderful addition to any JavaScript Editor, and is fully configurable in the Preferences section (so if you don't like to be forced to use === instead of == you can allow that).


A feature that I've recently learned is important to me in an online IDE is allowing for multiple tabs to be opened at once.  ShiftEdit does this well. (I have been working a lot in Akshell for some recent development and the lack of tab support is nearly a deal breaker...along with the times when I log in and all the open files disappear and I have to select the current project again to restore the view).  There are many other features that I have yet to try in ShiftEdit which could be handy, though I'm not sure I'll try them out anytime soon.  Perhaps I will never need to utilize them.  


I have found I'm no longer sure what I'll be using as my web-based development environment (most likely a combination of many, just as I develop in a desktop environment).  I am fairly certain I have seen enough for now (of course if you have found "the best" one, let me know, I'll check it out) that I will be able to find the one (or two, or three) that suits my needs best.  Recently I've been trying all these IDE's out and sticking with the current flavor of the week only to later find out certain limitations or something that I preferred in a different editor.  This is no different than using a full featured text editor outside of Visual Studio for example to edit JavaScript or XML files because I don't particularly care for the way these appear in Visual Studio.  What I really need or want in a cloud-based IDE is still being defined as each one's limitations or offerings reveal themselves through  repeated use.

Cloud9 revisited

A while ago I tried to use Cloud9 IDE to code in the cloud on my Cr-48 and it was too buggy to even try to accomplish anything in it.  It now appears that the issues have been resolved.  I have been interested in learning some of the awesome that is node.js.  I could easily move to my Ubuntu partition, install and build node, and try it there.  However, I really like Chrome OS and I've really been enjoying my other Google V8 JavaScript engine based development with Akshell so why not try Node.js in the cloud too.  Cloud9 is the perfect place for this.

First let me say the the github integration with Cloud9 is super smooth.  To start editing a github based project just enter the github url and click "start editing".  So I created a new github repository and started a simple web server with node to see how it would go.  I checked out one of Ryan Dahl's (the creator of node.js) introductory videos to get a simple server created in my server JavaScript file.   Then I setup the server configuration in Cloud9 which only required me to tell it which JavaScript file to use and what command line arguments to send it (i.e. "node server.js") to get it running.  Cloud9 does not let you specify a port number like one would in a desktop environment, but they add a helpful hint when running a server "Important: in your scripts, use 'process.env.C9_PORT' as port and '0.0.0.0' as host."  So I modified the server file with the tip, clicked run and sure enough I created a node.js server.

I think using node.js on Cloud9 is up to par with any other web-based IDE.  One thing it lacks versus something like Akshell or Kodingen is the ability to deploy to a subdomain directly.  I can however build my app up (if I continue to use Cloud9 versus Akshell) and then deploy to a node.js hosting platform like duostack.  For now I plan on using Cloud9 to learn some node.js and see what things I can make with that.

A Better Web-Based IDE

After a few days this week without Chrome OS due to a fun error in the Dev build (though its never bad to be able to revert to Ubuntu), I am able to be a Cr-48 nerd again.  The other day one of the three readers of this blog tipped me off on Akshell, another online development environment, which I quickly dove into in order to compare it against some of my other favorites which I have checked out previously here, here, and here.  By far my favorite has been Kodingen, I still go to it to code around and generally geek it up.  This all may change.

Akshell is a brilliant development environment that utilizes JavaScript for not only the client-side programming, but also the Server-side.  There are many cool features to how apps are developed and integrated in Akshell, which can be found in their documentation here.  I have found the environment to be amazing to use utilizing the default "ak" library and their Model-View-Controller framework.  For my first test I tried to remake (and improve) the test site I created on Kodingen with Akshell.  I found it was super fast to build with the Akshell environment and enabled me to test and preview just as smoothly as Kodingen though I think the interface with Akshell is much easier to navigate (perhaps because most of the features in Kodingen are still disabled in its current Beta state).  I must admit that I did utilize jsFiddle to quickly enhance my HTML5 canvas that I had created in Kodingen and then simply copied the JavaScript to Akshell.  So what does a quick Akshell site look like?  See mine here.

One of the promising things about Akshell that I'll be getting into soon, is their relational database (PostgreSQL) that is accessible with their "Simple JavaScript API".  From the documentation and the quick test I did with their relation variables I have to agree it is simple to use.  I hope to get some time to get an app going that utilizes this database functionality soon.

I don't know if I like Akshell an better than Kodingen as far as functionality and features (they both let you code, use a database, and deploy directly within their apps) but I can say that Akshell seems to be a more elegant solution to the online coding environment so I will definitely be using it for my next online coding endeavor.

JavaScript Heaven with jsFiddle

I may have finally found the perfect tool to build and test JavaScript concoctions on the fly (or at least a really cool one). I have been utilizing Kodingen (which is awesome) to code on my Cr48 and then flipping between the JavaScript code, css, html (I know I could put these all in the same document but navigating that is more exhausting to me that toggling windows) and rendered pages to test my script, styles, and html quickly.  This can get a bit cumbersome, and flipping between tabs or workspaces can get old very quickly.

So I was reading through the Chromium blog and I watched a video of Paul Irish, a developer advocate for the Chrome team, discussing some of the cool tools using Google Chrome to develop quicker.  This sparked my interest in Paul Irish and the first post I saw on his site had an embedded example from jsFiddle.  This led me to jsFiddle.net.  Perfect.  Clean.  Awesome. 

The setup of the editor reminds me of the HTML5 playground at HTML5Rocks, only without the need to switch between views of CSS, HTML, and JavaScript.  In jsFiddle the concurrent views of HTML, CSS, JavaScript, and the current render are all visible because they are each contained in their own iframe.  I decided to try it out with a quick "hello world" test which due to the ease of use and another Paul Irish contribution CSS3Please, I was able to quickly generate this little fiddle:

Another great feature is the 'TidyUp' button which will clean up your code's indents and spacing, which is super handy if you are like me and you have moved things around or copied text in from outside sources (css3please).  Also included is JSLint which is a great utility that will examine the quality of your code and "will hurt your feelings" as it tells the user exactly what is wrong with their JavaScript.  I used jQuery as my JavaScript library of choice, but also included are Mootools, YUI, Prototype, Dojo, Glow, Procession.js, ExtJS, RightJS,  Raphael, and No Library (pure JS)... so just about any flavor you might care for.   I am sold on jsFiddle and I will likely be using it as my primary tool to fiddle with JavaScript.