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.

A couple years back Steve Souders gave a great talk at Fluent Conf titled Your Script Just Killed My Site ( video). During the talk Steve explained front-end SPOF and pointed towards a nice tool for detecting it. Fast-forward a couple of years and front-end SPOF is still a concern in web development. And, when building a single-page app, SPOF is an even bigger deal as it can cause an entire web app to become unresponsive, putting users at the mercy of the browser to download and execute 3rd-party scripts prior to bootstrapping. Read on to learn how to avoid front-end SPOF using Trunk Club’s single-page app skeleton, Brunch with Panache (BWP).

Learn how to avoid front-end SPOF using Trunk Club’s single-page app skeleton, Brunch with Panache

My team at work is currently porting an e-commerce SPA from an older framework over to Brunch with Panache (BWP), our open source development framework for web clients. Like the old framework, BWP uses both Backbone and CoffeeScript. But to make composing applications easier BWP kicks it up a notch and adds in Chaplin, giving us Collection Views.

One of the downsides with the out-of-the-box Collection Views provided with Chaplin is that they use JavaScript-based animation to fade-in the item views once the collection has been fetched. And while this may be OK for many applications, it’s not ideal for apps with pages which have many collection views, or for mobile user agents in general.

Here’s the presentation given at Google I/O this year by Paul Irish and Pavel Feldman that got me to switch to Chrome Developer Tools promptly after watching. If you’re a front-end web developer and haven’t seen this yet take a look. It just may change the way you work.

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.

Though modal dialogs are not a new concept in UI design, the number of homegrown  Lightbox clones ( source) appearing on the Web since major JavaScript libraries like Prototype and jQuery hit the scene has been staggering. Unfortunately, many of the clones developed leave some key usability considerations unaddressed, and struggle with common problems in accessibility.

Some key usability features that should be considered during creation of a Web-based modal dialog include (1) manage focus and allow tab navigation (2) disable elements outside the modal dialog (3) give users an out and (4) provide graceful error recovery.