TrackPerformer update

I’ve added in some really exciting new features to my TrackPerformer project, as well as three new performances: We Three Kings, Carol of the Bells, and Joy to the World.

Filters

It’s now possible to add filters, or effects, into the processing chain. These filters can be applied before any performers (pre-filters) or after all performers (post-filters). At the moment, the included filters are:

  • FPS: Calculates the average framerate across the performance, optionally displaying it in a DOM element.
  • Grid: Draws a grid to the canvas. The grid may be a simple intersection grid (points), or lines. Both the X and Y axes may be independently configured.
  • Pick: Probably the most interesting (and processor-intensive) part of TrackPerformer. The Pick filter will randomly swap a pixel with one of its neighbours. It’s used at full intensity on both We three Kings and Joy to the World, and, when toned down a little for Carol of the Bells, provides a softening, organic effect.

I’ve got some ideas for more filters down the track… The only difficulty is keeping performance acceptable: manipulation of the canvas pixel by pixel is quite slow in current browsers.

Performers

There are a couple of new performers, and some minor updates to some of the existing ones. The Oscillator performer, in particular, is rapidly becoming the most flexible and useful of the performers.

  • There’s a new ShimmerGrid performer, which is great for adding texture and movement to the entire canvas. You can see it in action particularly well on Joy to the World.
  • The Swarm performer can now draw its particles as knots (like the SignalTracker), as well as as dots.
  • The Oscillator now has the ability to draw sustained notes, and to increase the longevity of notes. Take a look at Carol of the Bells to see these new options in use.
  • Notes can now be filtered based not only on their pitch, but also their velocity (volume).

There are a couple of other changes here and there, but these are the main ones.

We Three Kings

The three new example tracks are all taken from We Three Kings, my new Christmas remix album. Why not go and have a listen?

Autobiography

I was asked today to write a short autobiography to go on the company website. This is what I wrote:

Barry van Oudtshoorn hails from the snow-clad plains of the Serengeti delta. Overcoming his debilitating muteness (Barry was born without a larynx), he has become an accomplished ventriloquist and master orator. He has presided over Presidential coming-of-age ceremonies and the marriages of seventeen Catholic priests, both in Uzbekistan and abroad.

The winner of the inaugural bi-annual toothbrush-depilation contest in 2010 (and a runner up the year before that), Barry leads a quiet life. Despite being married to Ariel, he has led a comfortable and well-cooked life. Barry enjoys making jellies wobble and cutting his toenails.

I’m not sure that this will be what goes up, though…

CSSMin updated

I’ve updated my CSSMin project with a couple of new features and bugfixes. Download or fork it on GitHub!

What is it?

CSSMin takes your CSS file and strips out everything that’s not needed — spaces, extra semicolons, redundant units, and so on. That’s great, but there are loads of programs that do that. A shell script could do that! So what makes CSSMin different?

When you deliver content over the web, best practice is to deliver it gzipped. CSSMin takes your CSS file, and optimises it for gzip compression. This means that there’s a smaller payload delivered over the wire, which results in a faster experience for your users. It does this optimisation by ensuring that the properties inside your selectors are ordered consistently (alphabetically) and in lower case. That way, the gzip algorithm can work at its best.

What this means in practice is that your gzipped CSSMin-ed files are significantly smaller than plain gzipped CSS, and noticeably smaller than files that have been compressed by other means (say, YUI).

In this update:

Nested properties are now fully supported.

This means that the following CSS:

@-webkit-keyframes 'fadeUp' {
  from { opacity: 0; }
  to { opacity: 1; }
}

is compressed down to

@-webkit-keyframes 'fadeUp'{from{opacity:0}to{opacity:1}}

Your nested properties will have their contents compressed with all of the other tricks in system, but their order will be retained.

Thanks to bloveridge for reporting this bug and verifying the fix.

Font weights are replaced by their numeric counterparts.

.alpha {
  font-weight: bold;
}
.beta {
  font-weight: normal;
}

becomes

.alpha{font-weight:700}.beta{font-weight:400}

Values supported are “lighter”, “normal”, “bold”, and “bolder”.

Quotes are stripped where possible.

.alpha {
  background: url('ponies.png');
  font-family: 'Times New Roman', 'Arial';
}

becomes

.alpha{background:url(ponies.png);font-family:'Times New Roman',arial}

As much text as possible is changed to lower-case.

Only selectors, quoted strings (such as ‘Times New Roman’) and url() values are left intact.

Note that this means that if you mix the case of your selectors (for example, SPAN and span), your compression will be sub-optimal.

Thanks

Some of the ideas for this update were inspired by Lottery Post’s CSS Compressor.

Start using it!

Requirements

You will need a recent version of Java and the Java compiler.

Download

Download or fork it on GitHub.

Usage

  1. Compile the Java:
    # javac CSSMin.java
  2. Run your CSS through it:
    # java CSSMin [input] [output]

If you don’t specify an output file, the result will be dumped to stdout. Warnings and errors are written to stderr.

Results

These are the results of compressing the main CSS file for one of the webapps I develop at work. Note that many of these compressors only offer an online service, which means that they can’t easily be used as part of your general build process.

  Original size (bytes) Gzipped size (bytes)
Plain 81938 12291
YUI 64434 10198
LotteryPost 63609 10165
CSS Drive 69275 10795
CSSMin 63791 9896

Feedback

Let me know how you go with it — bug reports and feature requests are always welcome!

Theme update (again!)

And so, for the third time this year, I’ve completely re-themed this site. Taking a very different tack from the last theme, I’ve tried to keep this one as simple as possible, with just a few subtle touches here and there to add interest. The palette is more subdued, which hopefully means that reading the text is a more pleasant experience. I’ve also done away with the multi-column body text in favour of a fixed-width design.

At the same time, though, I have endeavoured to use some of the new features available in modern web browsers — gradients, shadows, transitions, generated content, and so on. I’m fairly happy with the result — I think it’s a clean, unobtrusive theme that’s not too in your face. Feedback and criticism welcome! 😀

Internet censorship: Letter #1

The letter below is written to my local MP regarding Australia’s proposed internet censoring.

Dear Mr Keenan,

I am writing to you concerning the soon to be trialed internet filtering scheme. As a resident of the City of Stirling and a UWA-qualified computer scientist, I have reservations over the efficacy, utility, impact, and morality of this initiative.

Firstly, the internet encompasses more than just web pages and web sites. The so-called “deep web” is thought to be many times larger than the “surface web” (that which can be examined by Google, for example). Where the majority of websites use the HTTP protocol to transfer data, which is subject to filtering under the proposed system, the deep web makes use of a wide variety of alternative data interchange systems, including torrents, UseNet, and VPNs. None of these will be filtered under the scheme, yet it is here that much of the undesirable content is to be found. [1]

Prior to the change of federal government, a system was in place whereby anyone could obtain free filtering software from the Australian government. This software ran on the computers themselves, and thus placed the onus for preventing unsuitable material from arriving on those in charge of the computers. In other words, parents were responsible for the well-being and safety of their children whilst online — in my opinion, a far more desirable state of affairs. [2]

The federal government has been extolling the virtues of high-speed internet across the country. Whilst I applaud this initiative, I have to question the sense of improving internet speeds across the country, only to then drastically reduce them by the introduction of mandatory internet filtering. In tests, it has been shown that filtering can reduce access speed by 10ms, and, due to bottle-neck difficulties, much longer times. Surely this is nonsensical. [3]

My final, and perhaps most significant, issue with the proposed implementation is that the “blacklist” of blocked sites will be inaccessible to the public. Australia is a nation founded on the ideals of a free, democratic, and transparent government. To make this list unavailable suggests that the filtering may be politically or privately motivated, politicians’ assurances notwithstanding. [4]

I ask that you carefully consider the issues I have raised, and that you stand and speak against this system.

Yours faithfully,

Barry van Oudtshoorn

[1] http://www.nytimes.com/2009/02/23/technology/internet/23search.html?_r=1&th&emc=th
[2] http://www.netalert.gov.au/about_netalert.html
[3] http://www.efa.org.au/censorship/mandatory-isp-blocking/#SS_7
[4] http://www.thestandard.com/news/2008/10/13/no-opt-out-filtered-internet

Komplete

I am so excited, I’m giggling like a schoolgirl. I just unwrapped a package that I received from Germany: Native Instruments’ Komplete. It’s installing now.

In the (large and encouragingly heavy) box, I found the following exciting items:

  1. Eight (yes, eight!) DVDs full of awesomeness
  2. Seven hefty printed manuals (in a boxed seat, no less)
  3. Four large (5″x1″) ‘Native Instruments’ stickers
  4. Ten small (2.5″x0.5″) ‘Native Instruments’ stickers
  5. A neck clip thing, with a very shiny stainless steel clip and detacher thinggy

In terms of software, Komplete means that my Native Instruments collection now comprises

  • Kontakt 2
  • Kontakt 3
  • Kontakt 4
  • Battery 3
  • Guitar Rig
  • FM8
  • Reaktor
  • Massive
  • Absynth

I am SO EXCITED!!!

New theme!

Well, I spent the weekend quickly working up a new theme for my site. I wanted something was a) a lot simpler, and b) showed off some of the cool new CSS 3 features available.

Cool CSS features used:

  • Columns (Gecko, Webkit, Presto)
  • Web fonts (Gecko, Webkit, Presto, Trident)
  • CSS gradients (Webkit)
  • CSS transforms (Gecko, Webkit)
  • Text shadow (Gecko, Webkit, Presto)
  • Assorted CSS3 selectors and pseudo-selectors (Gecko, Webkit, Presto)

In case you’re wondering, Gecko is Firefox’s rendering engine, Webkit is Chrome & Safari, Presto is Opera, and Trident is Internet Explorer. Now you know. Tell your friends!

All in all, lots of fun stuff to play with.

Rendering bugs

Of course, the fun thing about playing with cutting edge features is that you get to find all sorts of bizarre glitches and rendering issues. Here are a few that I’ve noticed during development.

Missing letters (Presto)

Letters just seem to go missing randomly from words — “you” becomes “yo”, for example. I think that this is caused either wholly by the downloaded font, the use of columns, or a combination of the two. Quite annoying.

Pixel creep in columns (Webkit)

Every now and then, pixels from a word in column B will find their way to the very bottom of column A. It’s even worse when you set a box-shadow on an element — the top of the shadow is rendered in the previous column. I’m guessing that Webkit’s column-rendering algorithm basically renders the entire area in a long strip, then cuts it into chunks and shoves them on the page. Annoying.

Disappearing column rules (Gecko)

Apparently, setting the “overflow” property (or “overflow-x” or “overflow-y”) on an element that is rendered in columns prevents the column rule from being rendered in Gecko. I really have no idea why this should be the case — it’s a very strange behaviour.

HTML 5 element styling (Trident)

Internet Explorer can’t style elements that aren’t bog-standard HTML. Unless you use “document.createElement(‘elemName’)” on them first. Ridiculous.

Songpack #1

[Download archive]

I’ve uploaded an archive of my music for easier download. This archive currently contains eighteen tracks, eight of which are no longer available anywhere else! The tracks included in this pack are:

I may well create other ‘songpacks’ for download, so keep checking back. There’ll always be a couple of exclusive tracks in each pack, so it’ll be worth your while. I hope. 🙂

Download all eighteen tracks now!

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.