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">

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

Startup Weekend Boston and Developing PocketRoster

Last weekend, Startup Weekend Boston took over a whole floor of the Microsoft NERD Center in Cambridge and for 54 hours, entrepreneurship, development and lots of caffeine were the rule. This is my experience over the weekend and how the PocketRoster app was developed.

The weekend started on Friday evening with around 50 ideas presented in rapid fire succession, with 60 seconds being given to each idea. There were a lot of ideas, but after a round of discussion and voting on each idea only about half remained. Among them was the idea for an mobile organization directory app presented by Howie Hecht. That idea piqued my interest and I joined his team. Unfortunately, no one else shared my interest and we ended the evening with only two members on our team. After a quick meeting we decided to go ahead with the idea and got a basic plan for the app hashed out before leaving for the night.

Saturday started at 9am in the morning with and we spent the day working out the fundamentals of the application and strategies for making a profitable business out of it. From a development point of view, two days is a pretty short time for developing a working mobile site, but by paring down the required features to the bare minimum and by using a number of relatively new frameworks and technologies we were able to get a good looking and functional mobile app completed.

The first of the frameworks I used was Silex, a new PHP 5.3 micro-framework based on components from Symfony2, a popular php framework. The way Silex works is by binding closures (functions) to url paths like:

$app->get('/user/{username}', function($username) {
return "User profile for $username";

Combined with a powerful templating engine like twig that supports template inheritance, you can rapidly bind variations of a template to different url patterns. Using a base template with a standard page structure you can move all the common code for analytics, ads, etc... into it and you only have to write the page specific elements in each template. For storing data I ended up using Mongo for it's flexibility and because I could reuse components I've previously written for my foundry-core library.

For the front end I chose JQuery Mobile and was impressed by it's ease of use. It's pretty quick to get up and running with very little code required. They also have a decent amount of documentation on the basics which helped immensely when putting together the structure of the app but was lacking when it came to troubleshooting issues that popped up during development. My overall impression is definitely favorable, but I don't think it's quite good enough to replace native apps. There is a lot of loading time involved between pages that really slows down the experience. I think I could probably get around a lot of it by pre-loading templates and with some caching of content, but the effort required is probably better spent writing native apps. In it's current form it's a great tool for prototyping, but not yet a viable long term solution.

Unfortunately, we didn't win the contest on Sunday, that honor went to CaseReportal, a medical reporting/collaboration tool. But we do plan on pursuing our project since it has great applications and we were able to confirm the demand for such a product. If you want to learn more about it you can sign up for an account at and try it out on your mobile device. If you think you'd like to use our product for your team or organization or if you have feedback for us you can contact us at [email protected].


PHP Frameworks

The Boston PHP Meetup Group had a php framework bake-off yesterday that I attended. The following are my initial thoughts on the frameworks presented.

1. CakePHP and Symfony
I've bundled these two together since they seem largely based on the same philosophy: rapid development and deployment of an applications by assembling prebuild code around data models. I think they're pretty interesting and worth looking into especially when you need a rapid prototype of an application. I'll probably focus on Symfony since it seemed slightly more intriguing.

2. CodeIgniter
The description of CodeIgniter given by the presenter was that it's "a framework for web frameworks" and that seemed largely true through his demo. There's a lot more code necessary then for CakePHP and Symphony, but it seems to be a much more flexible framework then them as well. I'm definitely going to be looking into it a lot more to see what I can do with it.

3. Zend Framework
I was not really impressed by the demo of Zend Framework. It seems overly complicated without providing a significant gain in development speed. I doubt I'll look into it any further unless I come across something I need that it really excels at.

In summary:
Based on the demos I saw, I'll be looking into Symfony and CodeIgniter to be my frameworks of choice, Symfony when I need a rapid prototype and CodeIgniter when I need a very customizable base to work from. My caveat to this is that it's just a first impression and may change over time as I explore the functionality of the frameworks.