Human User Interface

Assignment 2: Data Sorting

2011-02-12T11:33:00.002-05:00

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

2011-02-04T12:16:00.002-05:00

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

2011-02-01T09:13:00.005-05:00

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.

How I Got Here

2011-01-31T10:46:00.007-05:00

I must start with a story.

In December, my wife kicked my ass into gear about preparing for my own future. The clock's ticking on her educational career; in fact, she graduates from college in April, and will only have about 3 semesters left at university to hammer out a degree. Until then, I'd only ever really thought about getting her there. My job as a computer repair supervisor at a local Geek Squad has served me quite well in doing so.

So we sat down, took some career quizzes, explored some universities, yada yada yada, and here I am today with an application in progress to Brock University for a degree in Computer Science with a minor in Business. Awesome. However, I can't go full-time until Amy graduates. What do I do 'til then? I mean, besides part-time classes (I'll get a good head start...with transfer credits and a couple years of part time study, I hope I can trim a year off my full-time degree).

The answer, of course, is self study.

Computer Science has a lot to do with programming, or otherwise getting computers to do what we want them to do. Like anything to do with computers, there are a hundred different kinds of programming languages, and each one of them expires not long after it's fully quantified and standardized. This is why most Comp. Sci. programs minimize actual language learning and focus more on programming theory and technique. A lot of the actual language learning is on your own. So why not get a head start?

I've got some background in HTML and CSS. When I was 13, I dug out a giant HTML 3.2 reference book from my dad's library and thought "omg making web pages is kewl". The best part about my HTML 3.2 past is that my first website, entitled "Link's Oracle", is still live! It was about the Legend of Zelda: Ocarina of Time, pretty much the best Nintendo game every made. And yes, I use an awesome URL shortener. I think I had seven or eight of them, to be honest, but I can only remember ZAP.TO!

I dropped out of web development during most of my teens, not doing anything really substantial. When I moved to Edmonton for music school, I met a friend through D&D who was a computer science major. This really revitalized my interest in programming and computers in general. He showed me Linux (yay!) and taught me about XHTML and how it tried desperately to put some standards over a markup language battered and bruised by the first browser wars. He showed me CSS, the new way to paint a site, and taught me the importance of design.

I was running a home campaign of The Shackled City, and it became apparent I needed a web site to centralize some information flow and storage. Using my newfound powers and some generously donated server space off my friend's Debian box, The Cauldron Chronicle was born. Sadly, she no longer graces the web, but it was my first experience with building an XHTML website with CSS, and I also got to play around with SSIs (something that served a purpose but didn't impress me greatly).

Once again, however, as the campaign finished and Amy and moved to Ontario, so too did my web development. We did some travel, searched for jobs, and eventually planted Amy at a local college while I got the job at Best Buy. Since then, my interest has floated mainly to computer hardware as I started with Geek Squad and focused on repairing and servicing consumer laptops and desktops. I built a sweet rig by using some great retail reward programs through Intel and Microsoft, and played a lot of video games. My life was coasting along pretty good. Until December, when Amy virtually slapped me upside the head and said "your life is important, too". But don't worry, I bought something like 8 new games during Steam's holiday sale, so my gaming will continue for awhile.

I began researching programming and web development and all the things I thought it would be useful to know going into a computer science program. It turns out that there is a metric ton of different stuff to learn. I began making a list, and wondered how I would do it all in time. Panic set in! I didn't know javascript, or any of its popular libraries, or C, C++, C#, Java, Ruby, Python, .NET or PHP or MySQL. I've never set up a LAMP stack, I've never done databases, and I hadn't even heard of AJAX.

I decided that it would be prudent to make sure I liked programming. Amy's school was running a continuing education course called "Programming for Absolute Beginners". I was an absolute beginner. I had never programmed anything. So, I signed up, and started brushing up on C, which the course was using. Found a nice C tutorial and began learning the basics. Figured out some real fundamental stuff like variables, functions and arrays. But, it turns out I was a bit overzealous, because when I started the course, I realized I had taught myself virtually everything on the syllabus in the 2 weeks leading up to it. Oops. Withdrew. Got my money back.

Luckily, I had a backup plan. Since I had a background in web development, I decided it was finally time to complete the trifecta of web technologies and learn javascript. After all, you can't realistically write any webpage worth visiting without knowing javascript. And as you guessed, there are a lot of javascript tutorials online.

Eventually, I stumbled across something really quite amazing. It's called P2PU (Peer to Peer University), and it's an online, community-driven free university run by volunteers on a variety of subjects. They have a special branch called the School of Webcraft, which is sponsored by Mozilla (maybe you've heard of them). And, they were starting a semester on January 26th. BAUM!

So today, I am starting my first assignment in a course entitled "jQuery: For the Love of Dollar". And so begins my journey to a computer science degree.