Zero Wind – Jamie Wong Inside the mind of a Waterloo Software Engineering student

9Mar/103

Learn Source Control with Git

One of the gaps among my tech skills upon entering university was source/revision control.

For those of you unfamiliar, revision control is a method of tracking and storing the changes made to files. This is particularly useful when keeping track of all the changes made to source code being worked on in a group. This allows you to all work on the same set of files at once and merge together the changes later.

This doesn't mean it isn't useful for projects you're working on by yourself. If you've ever coded something up, then decided you have a better way of solving the problem, then finally realize your new solution doesn't work, you need to go back. Except the deleted code is one undo step beyond your history. Crap.

And no, allowing for more undo steps is not the solution to this problem. If you want to look at older versions across multiple files from weeks ago, undo won't help you. Revision control will.

After speaking with employers, it seems that the most commonly used source control system at the moment is git. I'd like to note that most of the people I interviewed with were small, fairly new, web or mobile based companies. Older companies may be using svn or possibly even cvs. Then there's the whole set of Microsoft source control systems such as Microsoft Visual Source Safe.

You can see a summary of source control options here: Comparison of revision control software @ Wikipedia

I'm posting about this now because I'm working on a collaborative project using git for the first time. Since this is a private project, I'm using Project Locker instead of Github. To be honest, I probably should have just set up my own private repository and I might look into that later.

You don't actually need to have a remote repository. You can use a git repository to control your source locally if you're the only one working on it. You might consider doing this for school projects so you don't accidentally overwrite your working code in an attempt to appease Marmoset (automated testing in CS at U Waterloo).

In order to learn how to use git, I can recommend two sources of information.

1. GitCasts: these are screen casts, going through git and explaining things along the way. I'm in the middle of the fourth cast right now, so I can't say for sure these are all of high quality, but I'm seeing things I didn't know before, and that's enough for me.

2. Visual Git Guide: Pictures are awesome, especially for those people of the tl;dr mindset. Or those attracted to colourful pictures. The picture at the top of the post is from the visual git guide. This is a fairly in depth explanation of some of the functionality of git and shows you what's actually happening behind the scenes.

For those of you more interested in learning Mercurial (Hg), Zameer Manji has recommended the following guide: Hg Init: a Mercurial tutorial by Joel Spolsky.

I would recommend you go grab an account of GitHub to help yourself learning. If you're in need of something to fool around with, fork one of my projects: phleet @ github.

Filed under: Uncategorized 3 Comments
5Feb/102

Jobmine Improved (Greasemonkey & jQuery)

JobmineImproved

I, like many (most) Waterloo Co-op students, am forced to use Jobmine and am extremely dissatisfied with its functionality. So I decided to kill three birds with one stone: improve Jobmine, learn Greasemonkey and learn jQuery all at the same time.

The result is, unsurprisingly, a Greasemonkey script written using jQuery that improves on some features of Jobmine.

Features

  • Table sorting - all major tables are now sortable (Interviews, Job Short List, Applications)
  • Improved navigation - no more Student -> Use ridiculousness
  • No more frames - you can refresh and it will stay on the same page!
  • Colour highlighting for tables - pictured above, you see the applications page with various statuses highlighted. Selected is green, not selected is red.
  • No more spacers - the Jobmine page is riddled with spacer images just sitting there, stealing screen real estate

How to Install
You'll either need Firefox & Greasemonkey, or a recent build of Chrome (Windows only?).
You can get Greasemonkey here: Greasemonkey @ addons.mozilla.org

Once you've done that, navigate to the script and click install.
You can get the script here: Jobmine Upgrade @ userscripts.org

Now for the part where I explain the tech I used.

Greasemonkey

Greasemonkey is a tool for customizing the way a web page displays and interacts using javascript. More or less, it overlays javascript you write on top of pages you specify by URLs with wildcards (*). It doesn't overlay it directly, but wraps it in some way as to prevent it from messing things up in the global scope. It also seems to run once the page is done loading, not when the page head is loaded. There are plenty of tutorials out there for doing cool stuff with Greasemonkey, but I started here: Dive into Greasemonkey. I know it says it's hideously outdated, but the metadata information it provides is still good enough. If you want more up to date information, go here: GreaseSpot (Greasemonkey Wiki).

jQuery

jQuery is a javascript framework specifically designed for doing things involving the DOM tree absurdly quickly. Example: highlighting alternating rows of a table (zebra-striping).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// Standard Javascript method:
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
    var rows = tables[i].tBodies[0].rows;
    for (var j = 0; j < rows.length; j++) {
        var rowColor;
        if (j % 2 == 1) {
            rowColor = "#eef"; 
        } else {
            rowColor = "#fff";
        }
 
        var cells = rows[j].cells;
        for (var k = 0; k < cells.length; k++) {
            cells[k].style.backgroundColor = rowColor;
            cells[k].style.borderBottom = "1px solid #ccc";
        }
    }
} 
 
// jQuery way:
$("td").css("border-bottom","1px solid #ccc");
$("tr:even > td").css("background-color","#fff");
$("tr:odd > td").css("background-color","#eef");

Now before someone says it, I know usually you can set the background-color for the whole row, and the cells will inherit it. But since, for some crazy reason, each cell is assigned a background colour on Jobmine, each cell needs to be set individually. In any case, you can see that things are made substantially easier with jQuery. I figured out jQuery mostly just using the API and looking at other people's code, but this is a decent place to start: Getting Started with jQuery.

For the table sorting functionality, I decided to use a jQuery plugin as opposed to write my own (I'd rather be able to distribute this sooner). You can read all about it here: jQuery Plugin: Tablesorter 2.0

What features do you want to see in this? By the way, the source is all available on the userscripts site, so feel free to tinker with it yourself.

Filed under: Uncategorized 2 Comments
7Jan/100

Tools: ideone, RegExr, jitouch 2, open, ditaa

Through reading proggit and hearing about new technology from classmates, every once in a while, I build up a list of tools which I plan on checking out and see whether they're useful enough to add to my regular routine. The first four on this list fall into that category, and I may eventually find a use for the last.

ideone

ideoneideone is an in-browser, syntax-highlighted code editor complete with interpreters and compilers. Basically, if you've ever wanted to try out a language but really didn't feel like installing it on your system, this is the perfect place to start. The site even runs Brainf**k.

There's another site which accomplishes the same task, but less elegantly: Codepad. This site is so much less elegant that I wasn't originally planning on posting it, but decided to once I saw there was a Codepad vim plugin. There's also emacs integrations.

RegExr

regexr Regexr is an online tool, implemented in Adobe Flex, to test out regular expressions in real time. If you haven't learned about regular expressions yet, go learn right now. They're just about the most powerful text matching, user verification and error correction tool in existence. They're also implemented in nearly all languages now in some form or another. Before I saw this site, I would test out all my regular expressions just using vim, but found it frustrating when the expressions needed to be changed to be compatible with php. So I'm likely going to start using RegExr instead.

jitouch 2

Screen shot 2010-01-07 at 11.09.43 AM Jitouch 2 is an application expanding on the multi-touch gestures available to MacBook Pro users who want to do more with just the touch pad. The two big things that this enables me to do that I love are opening links in new tabs using only taps on the keypad, and switching tabs using a gesture equivalent to ctrl-tab to switch tabs. I actually saw this reading Randal Munroe's blag.

Mac OS X/Gnome open

Screen shot 2010-01-07 at 11.16.08 AMopen & gnome-open are terminal commands in Mac OS X and gnome respectively, but they do the same thing. Whenever you double click on a file in Finder or Nautilus, the operating system has a database of which extensions are opened by which applications. What's actually happening here is that it's called open. Examples:

open "Office Space.avi"

Open up Office Space in your default viewer.

open http://www.jamie-wong.com

Visit my website from the commandline, opening in your default browser

open -a "Adobe Photoshop CS3"

Launch Photoshop. Open -a opens files with an application.

ditaa

Screen shot 2010-01-07 at 11.44.21 AM ditaa is a tool for converting ASCII art diagrams into graphical diagrams. This is pretty well illustrated in the picture to the left. I haven't actually found much of a use for this yet, but some of you might.

Filed under: Uncategorized No Comments
12Dec/092

Manual Sorting

cards

The basis for this post is the following question: what is the fastest algorithm for sorting a deck of cards by hand?

TL:DR advisor - skip to the end of the post for a challenge.

In terms of algorithmic complexity, merge sort and quick sort are two of the fastest widely used sorting algorithms - both running at an average case of O(n log n). But if you've ever sorted a deck of cards, ordering primarily by suit and secondly by number, I doubt you used either of these algorithms. You might unknowingly be doing bucket sort, dividing the cards into 4 "buckets" - one for each suit, then sorting each suit using a different algorithm and joining all the suits together at the end.

If I had a deck of cards in my room right now, I would be inclined to take videos of me sorting them using various different algorithms and comparing the time required. I have a feeling that the fastest algorithm would involve drawing out a 4x13 grid on a big piece of paper with each cell labeled with the exact card that fits there, then running through the deck, placing all the cards on their grid cell and just picking them up in order at the end. Of course, this could be accomplished without the grid but requires a spacial sense which I simply do not possess.

As a followup, I have another question: what if the cards were labeled with a number system you've never seen before? Assume you have some visual reference allowing you to understand the system, but also assume that the number system is not intuitive. Does your approach change? Of course, the fastest approach here depends on what I'm really asking by "fastest". Given enough time and practice, you would be able to become familiar enough with the numeral system to use any approach you would with regular cards or regular decimal numbers. When I say "fastest", I'm asking how you would minimize the time between receiving the cards and the visual reference and the cards being sorted. In terms of computation, the introduction of this numeral system has drastically increased the time for a comparison or enumeration while not affecting the time for movement or swapping at all. The reverse would be to use the standard deck of cards but make them orders of magnitude larger - say 1 meter wide each. In this case a move or a swap is extremely costly, but a comparison is very cheap.

A more realistic scenario in which the cost of comparison is drastically increased comes about when the criteria used for sorting is not an absolute. Example: sort these pictures by aesthetic appeal. Even by yourself this may be a long process, as you second guess your original decision about the relative appeal of a picture. In the world of web 2.0 though, it's a much much longer process. Sorting by crowd-sourced opinion is the basis of many websites, such as bash.org and reddit. Most of these systems work by providing users with the ability or increase or decrease the item's value by small amounts. Is there some better way of ensuring that the articles which will be the most valuable to the readers will show up at the top?

Returning to the point of manual sorting, I have 2 more things to say.

The first is an idea - competitive sorting. I'm sure this sounds nerdy as hell, but I think I'd still find it fairly entertaining. Groups of people would be given sets of objects and told to sort by some criteria, the fastest group being the victor, with penalties dished out for people falsely claiming their list is sorted. The criteria could be size, weight, volume, buoyancy, color saturation, retail price, alcohol content, power consumption or even something as obscure as average salary of a worker for the company manufacturing the product. Given that I'm at Waterloo, I feel that organizing such a competition isn't all that unlikely. Anyone feel like coming up with a plan for making this actually happen?

The second is a challenge. I challenge everyone reading this to make a video of them sorting a deck of 52 cards (no jokers) as fast as they can, then post the video in the comment section. As soon as I actually get a deck of cards, I'll take part in this challenge myself.

Rules.

  1. The video must be all in one take
  2. The deck must be shuffled thoroughly on screen, then fanned towards the camera to demonstrate the randomized order of the cards.
  3. Once the cards have been fanned towards the camera, you can have a maximum of 10 seconds of review time looking through the cards before the sorting starts. All cards must stay in contact and in order during this review time.
  4. The timer starts the second a card is separated from the rest of the deck.
  5. The timer stops when the deck has been reassembled into a single sorted deck.
  6. A deck is considered sorted if the cards are primarily ordered by suit in the order diamonds, clubs, hearts, spades, and secondarily ascending numerically.
  7. You must fan the deck towards the camera after it is sorted.
  8. You are allowed any setup you want before starting to sort (e.g. the grid I talked about above,) provided that the setup does not contain moving parts - no robots.
  9. You must be the only one handling the cards - no team efforts.

That's all. I fully expect to receive no responses to this challenge, but would love to see the things people come up with if someone does try it.

EDIT: Woohoo! Someone attempted!
Timothy Armstrong Sorting

Also, the claimed record according to this page is 36.1 seconds.

4Nov/090

ReBirth

This post marks the birth of yet another website I will inevitably use for about a year then run out of time and stop updating. Hopefully this one won't get eaten by a worm like the last one though. Stupid obscure javascript vulnerability.

The virus that owned the old site (along with every other index.* on my webspace) was a variant of the Gumblar.cn virus
http://blog.unmaskparasites.com/2009/05/07/gumblar-cn-exploit-12-facts-about-this-injected-script/

It infected my computer just by visiting a site, found my stored ftp credentials from FileZilla (teaches me not to store my passwords), logged into my webspace and proceeded to modify any index.* file. Very evil, very clever virus. Right on that tipping point between me being impressed and me being horrified.