10 apps pushing HTML5 to the limit

HTML5 is breathing new life into Web applications, hinting at major shifts in programming to come

1 2 3 4 Page 3
Page 3 of 4

HTML5-optimized app No. 4: Aviary

Does Photoshop still cost hundreds if not thousands of dollars? There are fewer and fewer reasons to buy it because of the burgeoning world of HTML5-based image editors that are following quickly on the heels of the Flash-based tools. If you want to diddle with the pixels and build up images from layers, these HTML5 image editors are hard to distinguish from Photoshop.

A true professional will find that many of the features aren't as powerful or as sophisticated as the high-end product from Adobe, but most of us aren't professionals who watch the pixels so closely. Aviary is just one of several great tools for editing images in an HTML5 canvas object. It's like Photoshop without the price or the installation hassles. It may not have as many features as Photoshop, but it comes with many of the most important ones to suit your needs.

HTML5-optimized app No. 5: Scribd

A document storage site, Scribd now sends out HTML5 versions of documents that don't require Flash. The company started out with Flash because its font support was much better than raw HTML. Now that HTML5 supports many fonts, documents are more likely to look correct. Is it perfect? It looks pretty good, but fonts are one of the hardest elements to get correct.

The look isn't the only advantage. Scribd's HTML5-rendered documents behave more like regular HTML -- because they are HTML. It's possible to cut and paste the letters even if they're plopped at strange angles in weird parts of the canvas object. They're not a drawing or a PDF; they're just letters that react to the mouse. Scribd uses the tagline, "All the world's documents, living online as part of the fabric of the Web."

HTML5-optimized app No. 6: Basecamp Mobile

37Signals is known for building good Web applications that help people organize their work. When the smartphone market came along, the company invested in native applications because it knew people would want to check off tasks with their phone. After hiring a native developer for the iPhone, the company watched Android bloom. Then the team started wondering about the BlackBerry and other phones.

"Eventually we came to the conclusion that we should stick with what we're good at: Web apps," said Jason Fried. "We know the technologies well, we have a great development environment and workflow, we can control the release cycle, and everyone at 37signals can do the work."

As a result, the company's mobile version targets WebKit browsers and delivers most of the slick HTML5 features that the desktop version does in a package that's tuned to the small screen size of smartphones.

HTML5-optimized app No. 7: PhobosLab

The road for most HTML5 applications usually goes through the browser, and PhobosLab took the standard path when creating games like Biolab Disaster and Drop JS. But when PhobosLab ported the Web-based games to the iPhone using UIWebView, performance wasn't as good as it expected. UIWebView, the standard module for displaying full HTML, JavaScript, and CSS in native iPhone apps, wasn't as nimble as PhobosLab wanted for its games.

The trouble was PhobosLab didn't want to rewrite the game because the company wanted to reach people in browsers everywhere too. It dug a bit deeper and excised the unnecessary parts of the equation by linking the Core JavaScript engine with the OpenGL engine. All of the HTML rendering and CSS decoding is cut out of the loop. Now you can play the company's games in two ways: as a native app that interprets JavaScript or as a Web application. Both run the same code base.

"I only used a very small subset of the Canvas API, most important drawImage(), which works almost the same everywhere as far as I can tell," said Dominic Szablewski. "For 2D games there's not much else you need."

1 2 3 4 Page 3
Page 3 of 4
How to choose a low-code development platform