Assignment 2: Data Sorting

This week's assignment brought me an even greater collection of data than the survey results from before. Our instructor used www.generatedata.com to populate a whole bunch of fake people with funny names and some corresponding attributes. Our job? Display the data. A really open project, I decided I wanted to try something that I had seen while working on another project.

jQuery UI has a widget called accordion. It's easier to show than explain, so here's my fiddle:

What a novel way to display the data, right? The other jQuery object we used was the template plugin, currently in beta. It allows you to create a markup template using a special kind of variable; this way, I was able to translate the data from our external js file through a template and create all this content with very little markup.

The final touches I added were a small amount of javascript to make the data a little more useable. For one, I used the date object to calculate the age of the individuals displayed. Pretty simple.

The second was to create a sort method to display them alphabetically by last name and then my first (should there be common last names, which there are in this data set). To do this, I used a special thing called a ternary operator, which by the way, is my new favourite thing. I fell in love with the ternary operator the moment I saw it; it's a succinct, elegant flow control that tests a boolean and goes one of two ways down your program. The neat thing, is that you can nest them, which I did threefold in my script. It could therefore be used as an alternative to a small switch statement, which (apparently) are pretty faux pas these days.

I'll probably get some flak for nesting that many. It borders on unreadable and thus difficult to maintain, but at this point I don't care. Something about stacking if statements makes me cringe. Here's an example:

 return (boolean) ? true : false

Nested...

 return (boolean) ? true : ((another_boolean) ? true : false))

Cool, right? I think that ternary operators and I will be pretty good friends for a long time.

All the latin in the "Notes" section of the data reminds me of the episode of The West Wing that Amy and I watched last night, which is my favourite episode in the whole series: Two Cathedrals. Now I have a script that is just like Martin Sheet calling you a feckless thug over and over via template!

YUI Theater

If you're interested in learning Javascript, one of the resources I've been absorbing a lot of lately is the collection of videos at YUI Theater. There are a lot of clips of Douglas Crockford speaking, and he has a good collection of beginner and advanced javascript lectures on there. Here's some of the things I've gone through or will be going through and are recommended:

• The Javascript Programming Language (Basics) [slides]
• Part 1 (31 mins)
• Part 2 (31 mins)
• Part 3 (29 mins)
• Part 4 (20 mins)
• An Inconvenient API: Theory of the DOM [slides]
• Part 1 (31 mins)
• Part 2 (21 mins)
• Part 3 (26 mins)
• Advanced Javascript [slides]
• Part 1 (31 mins)
• Part 2 (25 mins)
• Part 3 (11 mins)

The basics are a great intro for someone who learns quickly or already has a really basic idea on what a programming language is and basic tenants like variables, functions, objects, etc. The DOM series goes over browsers and how they parse an HTML file, and the impact that has on your scripts. The advanced one (which I'm currently watching) goes over some more in depth techniques like inheritance. For more stuff, check out the full listing!

First Assignment

When I started my P2PU course, I was asked to take a survey on my expertise in HTML, CSS, Javascript and jQuery. I responded with a descending order of skill, having actually learned them in that order. Our clever instructor not only used this for placement in our workgroups, but turned around and threw it all into a javascript array for use on our first assignment, something like this.

There's four groups in our course, and the source file has the results from all four groups as well as a master of everyone. Our assignment was to use a jQuery plugin by Keith Wood for Google Chart Tool to take the data from our surveys and make a pretty graph of our choice. The point was to bone up on pure Javascript while utilizing a pretty jQuery plugin for the fun.

If you haven't heard of jsFiddle, check it out. Like a successor to pastebin, jsFiddle lets you throw some code into your terminal and goof around with the result. It's got a spot for HTML, CSS, Javascript, and an output, plus the capability to load external libraries like jQuery or MooTools, or even your own source files. You can save your fiddles, share them, keep different revisions, and fork them to or from others to share and learn. Way cool. Plus, you can embed into your blog:

We were given a starting example from which to draw inspiration, and I chose my design goals as follows:

• Instead of a bar graph, have four pie charts for each technology, and display expertise for group 1 only (my group).
• Apply Javascript Code Conventions as per Douglas Crockford, the most challenging of which was to minimize global variable use by using Objects to store and manipulate data.
• Use a Geek Squad colour theme! Yea! Baum!

I got a little over my head iterating over the source data at one point. The most challenging and rewarding part of programming for me (so far) has been embracing "less is more" and trying to minimize code while maximizing functionality. It's like an art. A nerdy, unappreciated art. However, one of the coolest things I learned from this was having to deal with someone else's code. The source data file was not exactly ordered or organized how I would have initially thought to do it, so I had to modify my code to accommodate it. I should probably get used to that.

Nonetheless, a pretty fun assignment. The jQuery plugin is pretty cool, though it's a tad slow. There was a discussion in our forums about whether the jQuery object should be overloaded with this kind of functionality or not. I'm not quite ready to make that judgement, so for now, I'll just use it.