Abrahm Coffman

The modern browser is now the most intriguing development platform and runtime environment (personal opinion), especially when you consider that many mobile browsers ship with broad support for HTML5 and related technologies.  As browsers and javascript have matured, so have the libraries available to developers for building client side web applications.  Here’s an attempt at organizing my javascript bookmarks that hopefully can be of use to somebody else.

Some Basic Resources

• New to javascript?  Have a look at the Javascript Guide from the Mozilla Developer Network
• Interested in browser support?  Read this post and checkout Quirksmode, Modernizr, HTML5 Polyfills
• Looking for coding standards and best practices?  Checkout Isobar
• Not a fan of the javascript syntax?  Checkout CoffeeScript
• Want to write a html5 mobile app that can run natively?  Checkout Phonegap
• Wondering where the core libraries are hiding?  Checkout the CommonJS project
• Want to write code in the cloud?  Checkout the Cloud9 IDE from Ajax.org
• Already an expert?  Maybe you’ll find CouchDB, Nodejs, and jslibs interesting

Those links lead you to some really cool javascript projects and communities and I highly recommend exploring the ones that interest you.  However, if you’re like me and you’re looking for a solid foundation for building client side applications then read on.  I’ve assembled a list of some of the most common and/or most intriguing frameworks and libraries that I’ve come across, in no particular order.

Frameworks

• jQuery + jQuery Plugins + jQueryUI (see: jQuery’s Best Friends, jquery-startr)
• Dojo Toolkit (see also: Cujojs, Dojo Foundation)
• Moo Tools
• Sprout Core
• Google Web Toolkit
• Yahoo User Interface (YUI3)
• Sencha
• Backbone
• JavascriptMVC
• Prototype
• Echo Web Framework

Libraries

There are a vast number of plugins for jQuery and other frameworks that I encourage you to explore. I’m not going to list any of them here.  However I have listed a somewhat random assortment of stand alone libraries that are useful to know about.

If you’re interested in testing frameworks, checkout stackoverflow for a great discussion on your options.

These lists are absolutely a work in progress so if you’ve got any suggestions for me please post in comments.  I’ll also continue to add to them as I discover new and interesting libraries.

Sites like html5test and html5rocks are great resources for getting a quick overview of html5 and related technologies.  Motivated primarily by my own desire to verse myself in these new technologies, I’ve decided to create yet another outline/ontology.  I’ve attempted to link to the working specification or the organization overseeing it’s development for most of the technologies.  Hopefully this can also be a useful reference for others navigating this space.

Core

• ECMAScript (engines, benchmarks)

Markup, Animation, Media

• HTML5 (semantic markup, canvas, audio, video, forms, etc…)
• CSS3 (advanced selectors, transitions, transforms, animations, etc…)
• SVG
• MathML
• WebGL

Interaction

• DOM3 Events (state/history, mouse, keyboard)
• Device Orientation
• Web Events (multi-touch support)
• Speech Input (Google blog)

Process Threads

• Web Workers (map/reduce library?)

Storage

• Web Storage (session storage, local storage)
• Web SQL Database
• Indexed Database

Network Interface

• XMLHttpRequest (cross-origin resource sharing)
• Web Sockets
• Web Notifications

Sensors, Awareness

• Geolocation

Widgets

• Widgets

I will probably continue to make edits to this so continue to check back if it interests you, or post in comments if you’ve got feedback or things you think I should add.

I’ve noticed that the jQuery community has started using the term Polyfill recently so here’s a brief post that helped me in thinking through this topic. It’s largely inspired by the awesome list of HTML5 Cross Browser Polyfills assembled by the Modernizr folks.

Graded Browser Support

Yahoo has published their Graded Browser Support for the last 3 years and it makes a great starting point for any web application project.  More recently jQuery Mobile published their Mobile Graded Browser Support which emulates Yahoo’s approach. Both of them have divided browsers into tiers, Yahoo choosing to provide different experiences to users in different tiers, and jQuery Mobile choosing to only support the top tier.

The tiered approach is a great way of thinking about the browser landscape and outlining a strategy for Progressive Enhancement or Graceful Degradation.  However there are still significant variances in the APIs of the browsers within a single tier, especially if you want to use any of the newer technologies.  Developers address this variance by writing Patches, Shims, and Polyfills(?) in the hopes of creating a baseline API on which to build the rest of their application or library.  Generally your baseline API should target current W3C and related specs.

Building Patches, Shims, and Polyfills

If you’re Google and you have unlimited engineering resources you can write sophisticated browser plugins like Chrome Frame and Google Gears to update older browsers.  For the rest of us, the best way to go about writing patches, shims, and polyfills is to use feature detection (as opposed to user-agent detection). Peter Michaux has a great article on how feature detection balances false positives and false negatives.  You can also learn about feature detection techniques from Dive Into HTML5.  There are a number of feature detection libraries such as jQuery.support and Modernizr.

So once you write a feature test that returns a meaningful boolean, the question is how you address the lack of a feature (a false).  If you can implement the feature using javascript and other supported technologies then you’ve got yourself a shim!  If your shim conforms to a W3C or related standard, even better!  People will disagree on what they consider “implementing” a feature, and often times shims don’t perform as well as a native browser implementation would, but even bad performance is usually preferred to no performance.

A Polyfill is essentially a shim that replicates the real API as defined by the standard/spec.

The Facebook Like Button has become one of the easiest and most prolific ways of publishing content to a Facebook users friend feed.  This form of publication creates value in three ways:

• It generates traffic back to the publisher of the content
• It generates brand awareness from the text and images in the feed
• It enables rich demographic analytics

I’m going to walk you through how I’ve implemented the Like Button on the popular fashion blog Honestly WTF so that you can publish something like the following to a users feed:

The Like Button interacts with Facebook’s graph based API using a protocol they call the Open Graph Protocol.  The quickest integration is to use their little code generator widget that spits out a snippet of javascript.  However this approach doesn’t allow for the second and third values listed above.

We’re going to use the second approach which requires that you register a Facebook Application.  Once you’ve registered your application and gotten an appid you can load Facebook’s Javascript SDK into the page and turn on Facebook’s markup language XFBML.  Let’s go ahead and walk through how that’s done. Read more…

I recently had a need to create a form where somebody entered their birthday and decided it would be a good idea to explore various ways of solving this.  I essentially had the following requirements:

• Make the data entry as easy as possible
• Do as many validations as I could on the client side
• Use jQuery

Date’s are always tricky for people to enter into forms and the best solution really depends on the situation.  Birthdays present their own unique features:

• You always know the exact date you’re entering
• The date is always in the past, and often many years in the past

Because of this a common date picker such as the jQuery Datepicker, which works great for things like airline reservations, isn’t quite as suited for choosing a birthday.  Instead most people end up creating an empty text field and adding validation to it, either on the client, on the server, or both (I strongly recommend both).

<form id="myForm" method="post">
  <input id="birthday" name="birthday" type="text" />
  <input type="submit" value="submit" />
</form>

Read more…

Hello and welcome to my home on the web.  I hope to use this site as a repository for projects, inspirations, code samples, and anything else that I think deserves to be indexed by those crazy search robots, or spiders, or web crawlers, or whatever you want to call them.  Feel free to take a look around, but don’t spend too long, otherwise I might be prompted to throw up some ads.  And really, who needs to see another ad?