html

Tools for Building Rich Web Apps

3 minute read Updated

After recently planning to do a survey of tools for building rich web apps I stumbled across github.com/codylindley/frontend-tools, which claims to be an opinionated list of tools for building front-end applications. For those new to building modern web applications, it’s certainly easier to take in than larger lists like github.com/joyent/node/wiki/modules. But lists aren’t necessarily the best place to start for putting an application together. At least not where the rubber hits the road.

Update 2017-04-09: This post is out of date. Lately it seems Marko JS may become the new hotness following React and, for Web dev in general, look into JAMstack.

The Holy Grail of Rich Internet Applications

2 minute read Updated

Learning about Isomorphic Web Applications from Airbnb.

One of the largest perceived drawbacks to creating a SPA or other Rich Internet Application is that they’re not SEO friendly or very accessible. With the advent of technologies such as ARIA, HTML5 and Node.js, things are changing. Web apps are becoming more usable and accessible, though also making them crawlable and highly performant is a formidable challenge.

Web Development and Debugging Tools

2 minute read Updated

Useful development and debugging tools for web devs and front-end coders.

Following is a list of cross-browser/platform web development and debugging tools useful for client-side developers. Depending on the application, one or all of these tools can be valuable in completing work on a website front-end.

Developing Web Apps on Windows with Vagrant

12 minute read Updated

How to set up a Node.js development workflow on Windows using a Linux VM.

I earlier this month I spent way too much time writing an article on how to SFTP to Ubuntu Server with Sublime Text. The purpose of the SFTP effort was to set myself up for developing modern web applications on a new Windows 8 machine I bought to play SimCity 2013. And after getting everything working I realized the SFTP method had some gremlins and the file syncing reminded me of Dreamweaver—it simply wasn’t fast enough.

Lately, unless you were running a Linux machine or had the pleasure of owning a Mac with OS X, developing modern web applications has been a bit of a kludge. Enter Vagrant.

Vagrant is a tool for building complete development environments. With an easy-to-use workflow and focus on automation, Vagrant lowers development environment setup time, increases development/production parity, and makes the “works on my machine” excuse a relic of the past.

In this article I’ll explain how to set up a development environment in Windows using a virtualized Linux box, suitable for rapid prototyping. Then I’ll take it a step further and explain how to integrate a Backbone-based application framework with Vagrant and Sublime Text, greatly increasing the speed for developing modern web applications on Windows.

The Holy Grail: Full-stack JavaScript MVC with Rendr

1 minute read Published

The quest for the Holy Grail of JavaScript revealed by Airbnb Engineering.

Spike at Airbnb just mentioned during a live TechTalk webcast that the Rendr framework they built was open sourced earlier this month: github.com/airbnb/rendr. The framework leverages Node.js and Backbone.js to allow full-stack JavaScript MVC using a common set of code–greatly improving time to content, improving crawability, and reduces overall application complexity.

During the talk, Meteor and Derby were mentioned, and Mojito *sigh*. And Stitch was also mentioned, as a part of the stack they’re using. So anyway, there you have it. The Holy Grail I talked about. It’s out, but admittedly, according to Spike, not quite finished. Caveat emptor.

HTML5 Cross Browser Polyfills

1 minute read Published

Recently ran across this impressive list of HTML5 cross-browser shim/polyfills on GitHub on the Modernizer Wiki. A perfect excuse to try out the Link format in the WordPress Twenty Eleven theme.

Get Sideways with HTML5 in Eclipse

3 minute read Published

How to use HTML5 coding syntax with syntax highlighting in Eclipse IDE.

There are few front-end web developers I know who actually use the Eclipse editor for development. Whether it’s the complexity of the IDE or simply resistance to change I cannot say. Working with Eclipse on enterprise apps has some serious advantages when it comes to working in multidisciplinary teams. And wrenching on a UI is no exception.

As of late HTML5 is beginning to bear the shine of a recently waxed Tesla Roadster. It’s hard not to want to jump right in and hit the gas. But wait, the HTML5 spec is still in draft. Is it safe to turn over the ignition? Well, it depends. But here are 5 Reasons Why You Can Use HTML5 Today (archive).

Last year when Eclipse Helios was released HTML5 didn’t validate within the IDE. But somewhere between that release and the latest Helios service release, support was added for actual *native* HTML5 (archive) elements in Eclipse, no plugin required! And you don’t need to be running Aptana either. Awesomesauce!

The following instructions will help Eclipse newcomers and experienced client-side developers alike get started, kinda like a big smokey burnout.