Archive for December, 2010

Course Explorer Refresh, with Inspiration

Dec 23 2010 Published by under CourseTree

Coursetree 1.5


New Features:

  • Successor relationships
  • Textbooks by ISBN from the bookstore
  • Department requirements
  • 2 clicks at most to look up information on a course
  • Intelligent back button behavior
  • Links to Wikipedia
  • HTML5 semantic markup


  • All issues listed in the previous release notes
  • Phrase “one of” being missed by the scraper
  • Parser can handle phrases such as “taken prior to”
  • M(y)isunderstanding regarding commas corrected
    • CS 136 or 145, MATH 135
    • now becomes (CS 136 or 145) and MATH 135
    • should see more prerequisites listed as a result
  • Courses being overwritten by labs


  • A couple of quirks showing up as errors in the parser
    • EARTH 121, 121L or 122, 122L should be interpreted as EARTH 121/EARTH 122
    • CHEM 264 or 28/262 should be interpreted as CHEM 264/CHEM 282/CHEM262
  • Courses overlapping in the prerequisite graph

Waterloo Course Planner has been tested and works on IE8, Firefox 3.6, Chrome 9, Safari 5, and Opera 11.

No responses yet

ASAP Loading with LABjs

Dec 02 2010 Published by under Programming

Plan 1

Let’s start off with some dull code to introduce the subject:

base_url = 'http://localhost/';
function loadfile(filename, filetype){
    if (filetype=="js"){
        var fileref=document.createElement('script')
        fileref.setAttribute("src", base_url + 'js/' + filename + '.js')
    else if (filetype=="css"){
        var fileref=document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", base_url + 'css/' + filename + '.css')
    if (typeof fileref!="undefined")

A typical base template for loading the CSS and JS files using Django:

<!-- CSS Files -->
<script type="text/javascript">
var css = {% block css %}{% endblock %};
for (i in css) {
    loadfile(css[i], 'css');

<!-- JS Files -->
<script type="text/javascript">
var js = {% block js %}{% endblock %};
if (navigator.userAgent.indexOf('MSIE') != -1){
for (i in js) {
    loadfile(js[i], 'js');

The actual template for the page specifying the files only needs to be two lines long:

{% block css %}['glaze', 'fancy']{% endblock %}
{% block js %}['jquery', 'yui', 'dojo']{% endblock %}

As the bootstrapping code cannot use any libraries itself, this is definitely as manageable as it gets, unless you prefer to merge CSS and JS files into one array. That would acually add more bloat with the ‘.css’ and ‘.js’ extensions. Except there’s just one minor bug with the smaller files being loaded first, resulting in “Uncaught ReferenceError: $ is not defined” for JQuery’s document ready.

Plan Z

The problem with the above scheme is that the files are loaded asynchronously, all at the same time. The usual script tag loading ensures the files are loaded in order. So is there a way to load them asynchronously and still make sure dependencies are met?
The idea is to check document status for complete, then load files that depend on them. LABjs does just about everything I expected. Except it wouldn’t load itself. So to put it all together, I used a mini-loader for LABjs itself. The design decision here is to keep the code As Short As Possible. Code for generating script tags only fits into the template in the MTV pattern. Naturally, JavaScript turns out to be be the best way to load JS files, offering more features than traditional loading schemes with server generated headers. Now, this is all I have to manage with the dependencies:

{% block js %}
{% endblock %}

No responses yet