Using Your Browser and HTML5 "content editable" as an Editor

HTML5 has the concept of content editable which allows any DOM element to become a user-editable canvas. All you need to do is add the contenteditable="true" attribute to an element:

<div id="content" contenteditable="true">
</div>

The beauty of this feature is that the content is part of the HTML DOM and can be edited with the chrome inspector, so you have all the power of the inspector to drag and drop nodes, change the element styles from the style panel, etc...

This gives you a fantastic editor to work in with a very minimal amount of code required.

Read More

Modularized JavaScript with Backbone.js and CommonJS Modules/2.0

As part of my project to create a port of the excellent PHP Twig templating language to JavaScript I've been putting together some demos of how to use it with some of the more popular JavaScript frameworks available. Parallel to that I've been to several different conferences (Wakanday and Rich Web Experience) recently with talks about modularized JavaScript and JavaScript MVC frameworks. So I decided to put together one of the demos using what I've learned from the different talks.

You can find the completed demo in the my twig.js github project. The following are my thoughts from the experience and some instructions for setting up a project using Backbone.js and BravoJS.

Read More

FlipClock Available on the Chrome Web Store

I just published my FlipClock webapp to the Chrome Web Store.

It was remarkably easy to package it up. I have to hand it to Google, they've made it pretty easy to publish a JavaScript based webapp to their store. The process basically entailed adding a manifest.json to the project and packaging the directory into a ZIP file. If you're interested, you can check out the source on Github or bitbucket.

In short, you should install it and enjoy watching the time flip away...