Waterford Family Bowl website (www.waterfordfamilybowl.com)

A little while ago, my aunt approached me- she needed a website for her bowling alley. “Sure,” I said. “Let’s go over what you want and we’ll build something that works for you.”  In the back of my mind, I was thinking “awesome! Perfect timing to flex my HTML5 muscles and try jQuery 1.4 in a production environment; will it work?”

The site’s now completed, and in production. Go ahead and check it out at http://www.waterfordfamilybowl.com (still waiting on a little alternate content ). I’m going to, over a series of 4 or 5 posts, go over how the site works- how and why I used PHP, jQuery, HTML 5, jQuery, WordPress, Picasa, Google Analytics and Webmaster tools, and Google Apps; and, how I merged them all to create a dynamic, easy to use and easy to edit website. I used principles from books like “The Design of Everyday Things” and “Don’t Make Me Think”, and I’ll explain how and where these came into play.   The process I took made even IE 6 compatibility a breeze!

Brief overview on how I plan to break it down:

1. Intro to series
2. Design - architecturally and graphically
3. Implementation of WordPress, Picasa, etc.
4. “Contact Us”, finishing touches
5. Google Analytics and Google Webmaster Tools overviews
6. Wrap-up (maybe?)

http://code.jquery.com/jquery-1.4.2.js

http://code.jquery.com/jquery-1.4.2.min.js (not really “minified” as much as “closure compiled”… can we get a verb for that?) The changelog isn’t up yet, but that’s generally the last thing to go (and hey, we snuck in the back door to grab the update anyway, right?) I imagine it’ll eventually find it’s way to their API page for 1.4.2.  I ran a quick diff; here’s some changes that I found notable from jQuery 1.4.1 to 1.4.2:

• Optimizations for the body selector
• A few changes to how arrays of elements selected are built, I’ll go with my gut and say that they’re optimizations too
• Trimming whitespace from JSON data responses, for good ol’ IE
• A more few various bugfixy-looking things, mostly targeting IE
• It looks like there was a lot done to the event-adding code; I think mostly internal changes. Probably more optimizations? I’ll leave it to Resig or someone to explain whenever the changelog comes out. A few (generally pretty deep) methods had some parameters changed, or were renamed (things like “jQuery.event.special.submit.remove” becoming “jQuery.event.special.submit.teardown”)
• A smattering of changes within “live” and “die” mostly centering around the usage of namespaces
• Blackberry browser bugfix concerning converting NodeLists to arrays
• jQuery.getText changed to jQuery.text
• Changes to caching fragments to help out WebKit and IE 6

I haven’t really dug too deeply in the jQuery core before, so I’m not totally qualified to give a whole lot more detail than that. I used SourceGear Diffmerge between 1.4.1 and 1.4.2 to find out what I found out.

Also, in related (and perhaps more official news),  the jQuery UI team released jQuery UI 1.8rc2 – which includes bugfixes in the already pretty stable 1.8rc1 (changelog). You can grab it:

http://jquery-ui.googlecode.com/files/jquery-ui-1.8rc2.zip (development bundle)

http://labs.crimsondeviations.com/jquery-ui-1.8rc2-min.js (I threw it into a closure compiler, it seems the dev package doesn’t include a “minified” version.)

As of right now, I’m testing it in our application at MeM. Let’s see how things go!

And, I’ve decided that Neflaria, Version 2, will be my playground.

Neflaria, for the unacquainted, is the online game that my friend and I inherited a couple years ago. You make a character, you log in, and you fight monsters and chat with other players; while there’s not a whole lot to the game, it has been around for about 10 years, and as such, has a lot of character. And a lot of characters. I mean that endearingly. (Hi, Chris)

However, to a lot of the players, and definitely to me, its 2001-era look is a little stale. Its 12px Times New Roman on 100×100 pixel repeating background. Another word might be “dated.” The server-side database and file structure is a little crazy and unorganized, and it is time for an upgrade. So, here’s where Neflaria version 2 comes in.

One of the decisions we made was to move forward and to use jQuery 1.4.1, which niftily came out just as we were restarting development, to use html 5 (by including the wonderful html 5 shiv [blog post, javascript] for backwards compatibility), and do as much as we can to bring Neflaria into 2010 while at the same time making sure that the people playing the game- who are probably still on IE6- aren’t left out in the dark. Now, I’ve always railed against IE6, and I hate IE6 support more than anything… but by building on a solid base of well-structured html, css, and javascript, we can bend the styles later on to suit IE6′s needs, while maintaining future compatibility. “Graceful Degredation” is the term of the day.

We’re developing Neflaria V2 looking for the future. We’re building our javascript more like a framework and less like a loose collection of methods called “x2″ and “j5″. We’re restructuring the database (aka normalizing the heck out of it) and using JSON served piping hot via short but precise PHP pagelets. It’ll be very client-heavy, assuring server-side performance, and it’ll be extensible for future features. We’re even working on multilingual support, using jQuery to query a language-based XML file by key.

I’m pretty excited. Get a preview here (only the home, terms of service, privacy policy, and “create” and “login” buttons do anything, and it isn’t wired up to the database): http://labs.crimsondeviations.com/NeflariaV2Preview/

I did some research, and there are some very, very compelling reasons. Here’s what I wrote to our team:

We may want to look at updating, or at least putting it in and testing, soon.

Benefits of upgrading:

• Performance updates
• IE fixes, including some fixes to IE event bubbling
• Includes extra API calls and additions to existing functions
• Maintaining possibility to use new plugins as they are created for the latest version of jQuery
• Better handling for events (outside of just IE)- we can (should) refactor and reduce a lot of our jQuery code using events
• Better support for multiple simultaneous animations
• More granular “does my browser support X” checks

The downside is that we’re going to have to do pretty thorough testing in all browsers to make sure that the update hasn’t broken anything. The main areas to hit will be places that plugins are used:

• Autocomplete for country/state
• Loading screen in DE / Admin
• Media plugin that sets up flash for Audio Guest Book in display
• Simple Uploader
• Help boxes in DE

We’ll need to spot-check around other areas of the site for javascript errors as well. jQuery still supports the same browsers- FF 2+, IE 6+, Safari 3+, Opera 9+, Chrome 1+ (http://docs.jquery.com/Browser_Compatibility) so we shouldn’t expect any new weirdness in archaic browsers like IE6.

More information about the update can be found at:

• http://css.dzone.com/articles/jquery-14-improves-code-and
• http://api.jquery.com/category/version/1.4/
• http://docs.jquery.com/JQuery_1.4_Roadmap
• http://jquery14.com/day-01/jquery-14 (the best link, in my opinion)

Also: “15 new features you must know”: http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/

(Lower is better):