Full Stack Web Developer

Code Play

June 27, 2013 0 Comments

One day, my fiance, Donna Vitan, asked me to make her a web page where she can just paste code and the code had to be colour-coded.  I gave her a few products that did this, but she wanted it in her web browser. She was being super picky! An amazing JavaScript project came to mind: Ace Editor. I made a quick set up at http://codesummoner.com/play/ and that satisfied Donna’s need for a temporary place to dump code.

After doing this, my mind started wandering on what kind of other features I could add to this to make it more interesting. GitHub came to mind and so did the experience of grabbing code snippets from blog/forums which I’ve done so much of over the years. So I started adding some PHP and MySQL to it.

http://play.codesummoner.com/ is the next evolution of the simple editor window I made for Donna. It will allow you to save your code snippets and come back to them later, or allow you to share. Simply start writing your code and click the save button at the bottom (or hotkey Ctrl+S/Cmd+S). Saving will send the snippet to a database and return a unique hash and URL for you to save/share.

Embedding these snippets is one of my goals, along with more saving features like custom hashes and giving more credit to the creators. Here’s an example!

Above snippet is http://play.codesummoner.com/snippet/view/html5boilerplate/. The iframe source is http://play.codesummoner.com/snippet/view/html5boilerplate/?embed=true&wrap=false.

Custom parameters:

embed: true | false
Setting to true will remove the menu bar at the bottom. Default is false.

wraptrue | false
Setting to false will disable word wrapping. Default is true.


What other features should I add? Looking for your thoughts in the comments below!