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 clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

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 clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Cross-browser div focus and blur

Internet Explorer has for some time supported giving ‘focus’ to non-focussable elements such as divs. Firefox, by contrast, does not. Whilst this makes sense semantically, it’s often still very useful to use these triggers. For example, you can use onfocus to show a popup when a div is clicked, and close the popup when anything else is clicked on the page (in the onblur event).

There are many, many workarounds which provide this functionality, using such tricks as hidden input elements, global onclick handlers, and so on, but the simplest is simply this: give your div a tabIndex attribute. For example,

<div tabindex="-1" onfocus="document.getElementById('monkey').style.display='block'" onblur="document.getElementById('monkey').style.display='none'">Click to show another div.</div>
<div id="monkey" style="display:none;">Click elsewhere to hide this div.</div>

works perfectly in Firefox, Internet Explorer, and Chrome as shown in the example below:

Click to show another div.

You can also achieve a similar effect purely with CSS:

<style>
#focus-example > .extra { display: none; }
#focus-example:focus > .extra { display: block; }</style>
<div id="focus-example" tabindex="0">
  <div>Focus me!</div>
  <div class="extra">Hooray!</div>
</div>
Focus me!
Hooray!

Because the second example shows or hides a child element, the parent element will remain focussed if the user interacts with the child element, or its children. This allows you to embed links, forms, videos, and so on in the child element.

The value of tabIndex can have significance, too:

  • -1: The user can’t tab to the element, but it can be given focus programmatically (element.focus()) or by being clicked on.
  • 0: The user can tab to the element, and its order in the tabbing is automatically determined.
  • >0: Give the element a priority, with ‘1’ being the highest priority.

I originally discovered this technique on this CodingForums.com thread.

Music for film and games

Music is one of the most powerful ways to move people’s emotions. Whilst characters and action tell the story, it’s music that largely determines how people should react to the story. Action scenes accompanied by sharp, aggressive music seem faster; moments of tension are heightened by ominous and foreboding music; and happy reunions bring a tear to the eye when accompanied by majestic, sweeping tunes.

It’s important to make sure that your movie or game has the music that you want it to have, to convey the meaning that you want to. That’s why at Barryvan, writing music is more than just putting together notes. It’s about detailed analysis of your needs and desires for the music; it’s about constant feedback; ultimately, it’s about getting it right.

We offer music in a variety of styles, to suit all genres of movie and game. Traditional orchestral pieces, floor-thumping dance anthems, catchy rock tunes: we offer them all.

Licensing & Pricing

We offer a number of different licenses for our music. Music may be licensed exclusively to you, in which case it won’t be released elsewhere, won’t be used anywhere else, and is guaranteed unique to your project. Alternatively, for a lower price, you may choose to use music which is already, or will become, available to others for use. For non-profit ventures, we can offer music for free on a non-exclusive, all rights reserved basis. In other words, you can use the music, but we retain the copyright. To find out what license is best for you, simply contact us, and we’ll work it out. Our prices are very competitive, and you can arrange to buy tracks on a track-per-track basis, on a time basis, or on a project basis.

Rebellion

Composed: Monday, October 27, 2008 (Download)

A glitchier, more off-the-beat track based around a C# pedal point. This one was fun to write, because I got to play with the various sound effect and drum kit libraries I have, and slice up some effect loops from my libraries, too.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

The call

Composed: Tuesday, October 14, 2008 (Download)

This track tells the story of a conversation between two people, with very different characters.

It also tells the story of how my musical output soars when I have lots of other work to do for university. :/

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

It’s quiet at home

Composed: Friday, April 18, 2008 (Download)

I came home one afternoon really stressed out: it hadn’t been the best day, let alone the best week. The house was empty; I dumped my things and sprawled on the couch. As I sat, I realised just how soothing a few moments of quiet can be. With the opportunity to simply relax, I felt all the stress begin to fall away. This song is how I felt when it was quiet at home.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Ink and parchment

Composed: Tuesday, November 25, 2008 (Download)

I have wrapped my heart in ink and parchment,
and cast it into your sea.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Nightfall

Composed: Monday, August 18, 2008 (Download)

A companion piece to “Drifting”. Also in 7/8, with many of the same stylistic elements. It’s much more brooding, however, and simpler in its execution.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.