barryvan

Author: Barry van Oudtshoorn

  • Quiet Rituals

    Completed: Thursday, April 16, 2009 (Download)

    Finally, after quite a while, I’ve got a new track out. 🙂 It’s been sitting on my computer for a couple of weeks now, and there are still a few things in it that I would like to iron out, but my inability to get the time to do so means that it’s just been bugging me. So now I’ve decided to just put it up as is.

    Anyway, the track itself is quite a simple piece: I did, in fact, try to make it simple. It’s somewhat influenced by Ravel’s Bolero and the Newsboys’ The Orphan, in that it is constantly building by both adding and removing layers. It’s also, perhaps, influenced a bit by some of Coldplay’s stuff: I was listening to Viva La Vida and Prospekt’s March recently, and I was interested to note that in lots of those tracks there’s the same ‘kick on every beat’-type thing going on.

    Let me know what you think.

    [audio:http://www.barryvan.com.au/music/Quiet%20Rituals.mp3]

  • Javascript-generated tables and rowspan

    At work, I’ve recently been putting together a nice little calendar-like utility using Javascript. Basically, it has to generate a table consisting of cells which may span multiple rows. Surely the solution is simple enough: just set the rowspan on each td as we create it. Unfortunately, that doesn’t work, at least not in Firefox.

    It appears that in Firefox, if you create a td and set its rowspan to some value when there are no rows for it to expand into, the attribute will be completely ignored, even if you add rows afterwards! Needless to say, this is very annoying. The solution? Build your table backwards.

    The code I have now is something like this (note that I’m developing using the Mootools framework):

    [sourcecode language=’javascript’]var tbl = new Element(‘table’);
    var trs = [];

    for (var i = 0; i < 4; i++) { var tr = new Element('tr'); tr.grab(new Element('td', { 'html': 'Cell ' + i })); if (i % 2 == 0) { tr.grab(new Element('td', { 'rowspan': 2, 'html': 'Span ' + (i / 2) })); } trs.push(tr); }for (var i = trs.length - 1; i >= 0; i–) {
    tbl.grab(trs[i], ‘top’);
    }[/sourcecode]

    What does this code do? Well basically, we’re creating a table with ten rows and two columns; the cells in the right-hand column each occupy two rows. The result will be something like this:

    Cell 1Span 1
    Cell 2
    Cell 3Span 2
    Cell 4

  • MooTools and OO Javascript development

    I’ve started work on a new project at my job — a fairly complex AJAX application for the education sector. For this project, I’ve been allowed to essentially choose my own direction, and I’ve chosen to implement the clientside Javascript using the MooTools framework. I’ll say it right here: I’m absolutely loving it.

    What I’m really enjoying about MooTools is the object-orientedness it brings to development. Although syntactically it’s a little bit weird at first, the ability to create, extend, and implement classes makes my development progress much more quickly, and in a more efficient way. Add to that the plethora of utilities (like the .each prototype for arrays) and shorthand functions (like $ to replace document.getElementById), and all of a sudden Javascript development becomes a bit more, well, flexible.

    I’m not saying that you can’t accomplish cool things in Javascript outside of MooTools (or other frameworks, for that matter); my point is that I believe you can accomplish cool things in Javascript more quickly using a good framework, which should really come as no surprise. Perhaps the reason I’m so enjoying this type of development, to the point of blogging about it, is that up till now, I’ve been stuck working in a non-frameworked, very non-OO Javascript development paradigm.

    I mentioned the curious syntax that accompanies MooTools.  To create a new class, for example, you would probably write something like this:
    [sourcecode language=’javascript’]var myClass = new Class({
    Implements: Options,
    options: {
    optionA: ‘monkey’,
    optionB: ‘pony’
    },
    initializer: function(options) {
    this.setOptions(options);
    this.doSomeStuff();
    },
    doSomeStuff: function() {
    alert(this.options.optionA + ‘ eats ‘ + this.options.optionsB);
    }
    });[/sourcecode]
    And then you would initialise it like this:
    [sourcecode language=’javascript’]var myInstance = new myClass({
    optionA: ‘Big Pony’
    });[/sourcecode]
    Although it looks a bit weird, it’s actually not too bad. There are really only two problems I have with it:

    1. Remembering to put commas in all the right spots.
    2. Geany, my preferred IDE (cf. Geany IDE: Tango dark colour scheme) can’t pick up classes and members properly (actually, at all) in this style.

    Other than that, though, I’m really enjoying it.

  • HTML Entity Reference

    What’sMyIP.org have a fantastic HTML Entity Reference which can optionally display every single character known to man (or seemingly so). It’s the most exhaustive and well-presented entity reference chart I’ve found on the web, so I thought it was worth pointing it out.

  • Relay for Life Cancer Drive 2009

    Josh Whelchel, a very talented composer over in the USA, has organised a great big collaborative musical fundraiser for Relay for Life. The idea is that in return for their donations, people get to hear some great music: digital tracks for donations of $10 or more, and digital+CD for donations of $25 or more. There are really talented artists contributing to this project, and I am too. Contributing, I mean. 🙂

    Head over to the official website for more information.

    Contributing artists

    (This list was lifted directly from Josh’s website)

    • Mustin of OCRemix.org fame and head of Mustin Productions,
    • Jimmy Hinson, talented composer and arranger for OCRemix.org (big giant circles),
    • Kyle Gabler, fantastic composer from 2D-Boy and for World of Goo,
    • Alec Holowka, composer for the successful independent game Aquaria,
    • David Saulesco, super talented Swedish composer known for the Eternal Daughter soundtrack,
    • Inez S. deDeugd-McComas, ultra-gifted composer from the Cincinnati Conservatory of Music,
    • Vincent Parrish, composer featured on thesixtyone.com,
    • Jay Tholen, talented and multi-faceted musician leading a successful solo career,
    • Barry van Oudtshoorn, Australian Composer Extraordinaire!
    • Josh Whelchel from The Spirit Engine 2 and Bonesaw: The Game,
    • Jussi Nieminen, a progressive-rock genius,
    • David Thatcher, composer for indie-games,
    • James Starkey, collaborating with David,
    • Shane Lu, virtuoso pianist, and
    • David “Warrior Bob” H. from Trax in Space!

  • Best WordPress Design Award

    Over at WPWebHost, they’re hosting the Best WordPress Design Award, which should produce a lot of really great designs. I recommend taking a look!

  • New theme!

    I’ve finally got around to replacing the placeholder theme I had on the site. The new theme that I’ve made is much cleaner, simpler, and fresher.

    This new theme is built around the Sandbox WordPress theme. Sandbox provides you with a really well marked-up document, with appropriate classes, ids, and so on where you need them — essentially, it lets you build the entire theme in CSS without having to worry about the markup, and in so doing, encourages you to build a CSS-only design. I’m proud to say that this design is wholly CSS — there is no extraneous markup, and there are also no browser-specific hacks or files: everything is contained in a single CSS file and about five images, for a total size of around 40kB.

    I should also note once again that Firebug is, perhaps, the best tool for web development, be it design or coding — about 90% of the styling was tested in the browser using Firebug before being applied in the CSS file itself.

    Comments, questions, or criticisms of the new design? Just leave them in the comments.

  • Ubuntu and sudo

    Ubuntu disables access to the root account by default, for reasons which have never been particularly clear to me. They deem it preferable to give users sudo access, which is all well and good, but typing a series of commands, all prefixed by ‘sudo’, can be very tedious.

    Fortunately, there are a few ways around this.

    The first is to use a super user shell. From a terminal or console, type:
    sudo bash
    This will give you a shell with full root access, and save you needlessly typing ‘sudo’. (You can, of course, use other shell flavours, like zsh or csh if you prefer.)

    A similar method is to run the ‘su’ command with sudo, thusly:
    sudo su
    which will also give you a shell with full root access, according to root’s preferred shell.

    The third method is to alter the password protecting the root account. To do this, from a terminal or console, type:
    sudo passwd root
    and enter a password for the root user. Now you will be able to log on to consoles (and, if you’re that way inclined, X sessions) as root.

  • Spheres

    Completed: Tuesday, January 27, 2009 (Download)

    Composing an ambient track is a very soothing experience for me. There’s complexity, experimentation, and simplicity, and I find that my mood is sharpened, made clearer, in the writing.

    This is how I’m feeling.

    [audio:http://www.barryvan.com.au/music/Spheres.mp3]

  • Web developer tools

    In this post, I’ll outline some of the web developer tools available in the major browsers: Firefox, Internet Explorer, Opera and Safari. This is a wholly subjective post, based on my experience as one of two developers on a very large AJAX application at Saron Education.

    Firefox

    Firefox has arguably got the best web development tools available, all of which can be downloaded from the Firefox Addons site. The two which I find most useful are the Web Developer Toolbar, by Chris Pederick, and the often-copied Firebug (official website), which itself sports a variety of addons.

    Web Developer Toolbar

    The web developer toolbar is useful for quickly enabling and disabling features of your site, checking CSS, emulating mobile browser rendering, and controlling Firefox more precisely. Personally, I find its most useful features are the ability to:

    • Disable the browser cache entirely, which removes the need for Control-Refresh or cache-clearing;
    • Outline deprecated elements, or any particular set of elements in a variety of fashions, which is very useful for updating old sites;
    • Extract colour information from the current website; and
    • View the cookie information for the current site.

    Download the Web Developer Toolbar

    Firebug

    I sometimes wonder how I ever managed to develop web applications without Firebug. Firebug allows you to alter CSS styles on the fly, edit the HTML contents of the page on the fly, visually watch the DOM being changed by your scripts, debug your scripts, type and run JavaScript straight from the browser, visualise network activity, inspect XMLHttpRequests, and much much more besides. Firebug is, in my experience, the most mature, stable, and efficient of all the tools in this survey.

    The features of Firebug which I find most useful are:

    • The ability to ‘inspect’ the DOM visually (by clicking on elements within the page), then alter their attributes, styles, and even their content dynamically;
    • The ability to watch the effects of DOM alterations by running scripts;
    • The console, with which you can craft and run JavaScript which is run as though it were part of the page itself;
    • The network monitor, which allows you to view all the POSTs and GETs your XMLHttpRequests create.

    Download Firebug

    Internet Explorer

    Until IE 8, the tools available to developers in IE were woeful at best. Fortunately, however, Microsoft has got their act together, and mimicked Firebug for version 8. The features made available in this tool include

    • The ability to interrogate the DOM to view style information about elements (changing attributes and styles hardly ever seems to work in the latest Beta, so viewing them is all you can really achieve);
    • A console, with which you can craft and run Javascript as though it were embedded in the page;
    • Javascript debugging.

    Unfortunately, these tools are still very much in beta, and are very buggy. As I mentioned, altering element attributes and styles hardly has any effect. Also, the CSS inspection system is poorly laid out and often just plain wrong. The console is well-implemented. The entire system is definitely a step in the right direction, but it suffers from bugs and lack of innovation. Also, it seems to slow down and destabilise the entire browser.

    Internet Explorer 8’s developer tools are built in; access them with the F12 key.

    Opera

    Opera’s developer tools, codenamed ‘Dragonfly’, sit between Firebug and IE in terms of functionality and facility. The DOM inspection and manipulation tools work really well (as well as Firebug), and are more immediately configurable, thanks to a variety of toolbar buttons. Dragonfly doesn’t have a console; rather, it uses a ‘command line’ interface. The difference is that where the console in Firebug and IE has seperate areas for input and output (what you type and what it does), the command line mixes these two together, much like a Unix shell or DOS. Personally, I prefer the console paradigm, but it’s much of a muchness.

    Opera’s Dragonfly is built in; access it by going to Tools -> Advanced -> Developer tools.

    Safari

    As with most Apple products, the developer tools in Safari are very pretty. There is a console akin to that in Firebug and IE, and you can inspect and manipulate the DOM. Unfortunately, however, the tools are quite buggy, and often fall down. Whilst the tools are very pretty, they don’t seem to be as stable even as IE 8’s.

    Safari’s web developer tools are built in; access them enabling the develop menu from the Advanced tab of the config, then choosing the appropriate menu item from the Develop menu.

    Conclusions

    Whilst Firebug is still by far the best tool available for web developers, the widespread development of tools by browser developers means that cross-browser debugging and development is becoming ever easier. Hopefully the tools will foster competition, so that feature sets and stability improve in all the tools.

  • Changing Windows’ default font

    You may have noticed that Windows has a rather haphazard way of applying the fonts specified in Visual Styles. That is to say, whilst a particular visual style may attempt to enforce a particular font, Windows will often ignore this in applications and dialogs.

    The problem is a registry key, which enforces font substitutions in Windows. Now, most applications specify their font as MS Shell Dlg or MS Shell Dlg 2. By default, these two fonts are replaced by Microsoft Sans Serif and Tahoma, respectively. To achieve a more uniform feel across your system, all that you need to do is edit these substitutions.

    To do this, run ‘regedit’ from your Start menu. Then navigate to HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontSubstitutes. You should see a list of key/value pairs on the right. Simply double-click on the entries for MS Shell Dlg and replace their contents with the font of your choice — make sure, however, that you spell it exactly right.

    That’s it! The change will be in effect once you restart. Bear in mind that this is a change made to the entire Windows installation, not just your user settings.

  • Evening with you

    Completed: Friday, January 23, 2009 (Download)

    I admit, I didn’t envisage this track going quite the way it did. 🙂 Comments and criticisms are, as always, more than welcome.

    [audio:http://www.barryvan.com.au/music/Evening%20with%20you.mp3]