Barryvan » Programming

Generative Music

Barry van Oudtshoorn — Sun, 21 Mar 2010 08:08:11 +0000

Continuing my HTML5 and canvas experiments, I’ve put together a generative music system. Essentially, a series of particles move across a field, occasionally triggering sounds — the sound triggered depends on their location in the field.

There is, of course, a little bit more to it than that. Under the hood, I’ve got a series of HTML5 Audio objects that are used to provide polyphonic audio using a simple round-robin algorithm (I encoded the audio in OGG, so you’ll need to use an OGG-friendly browser, like Firefox). The particles are much simpler than those in my previous canvas dalliance, in that they don’t swarm, and their motion is more linear.

View (and hear!) it live

Canvas Swarms

Barry van Oudtshoorn — Thu, 18 Mar 2010 00:27:18 +0000

I’ve been meaning to start playing with the HTML5

View it live

Essentially, 1 to 3 swarms of particles move around the canvas, reproducing when the conditions are just right, and dying of old age. Quite simple, but the patterns produced can be really quite pretty.

One interesting thing that I discovered whilst doing this is that you can’t pass around a canvas’ context at the instantiation of a MooTools class — it complains about wrapped natives. That’s why, if you like in the source JavaScript, you’ll see me pass the actual context around to various functions. I’d be interested in hearing if anyone has a workaround for this, because this is, well, a bit clunky.

HTML: IE file submission

Barry van Oudtshoorn — Tue, 23 Feb 2010 07:57:22 +0000

I’ve been bumping up against an interesting bug in Internet Explorer recently, and, having just found the solution, thought I’d share it with you.

The problem is that in Internet Explorer (tested 7 & 8), when your document is in quirks mode, uploading a file sometimes just sends through the file name, without the actual body of the request. Put the document into standards mode, and it all works. It should be noted that this is when you’re dynamically setting up the elements used with JavaScript.

The cause? In quirks mode, the enctype attribute isn’t supported. So whilst setting “encType” on the form element to the correct “multipart/form-data” will indeed set this attribute, it won’t actually cause the upload to include the file. Instead, you need to set the encoding attribute to this value, too. It certainly doesn’t help that the MSDN article on the element tells you to set “enctype”, but makes no mention of “encoding”.

I couldn’t find any reference to this problem on the intertubes (although maybe I just didn’t look hard enough), so hopefully this will help someone.

Javascript: Print a single element

Barry van Oudtshoorn — Tue, 16 Feb 2010 08:18:47 +0000

Sometimes, you’ll want to allow users the ability to print only a part of your page; for example, a table but not the various links around the page. It’s possible to use a printing stylesheet, but this can cause severe headaches when you need different parts printed at different times. Really, we want to be able to just say element.printElement(), and have it just work. That’s what the MooTools function below does. It’s loosely based around the concepts outlined at this website.

Element.implement({
	printElement: function() {
		var strName = 'printer-' + (new Date()).getTime(),
		styles = $$('link[type=text/css]').clone(),
		title = document.title,
		that = this,
		iframe = new IFrame({
			name: strName,
			styles: {
				width: 1,
				height: 1,
				position: 'absolute',
				left: -9999
			},
			events: {
				load: function() {
					var doc = this.contentDocument || window.frames[strName].document;
					doc.title = title;
					$(doc.body).adopt(styles, that.clone());
					this.contentWindow.focus(); // IE requires us to focus before printing, or the parent prints.
					this.contentWindow.print();
				}
			}
		}).inject($(document.body));
		iframe.dispose.delay(15000); // Destroy the iframe in 15s so that it doesn't hang around.
	}
});

Full-width text inputs without extraneous markup or scripting

Barry van Oudtshoorn — Tue, 05 Jan 2010 23:56:34 +0000

The problem

When styling text elements, it’s fairly common to run into a serious problem: they don’t behave like block-level elements.

Note: In all of the examples, the container element is filled with blue, and the itself is filled with red and has an opacity of 50% so that you can see it under- or over-flowing the container.

You can see how the input doesn’t automatically flow to full width, as the “display: block” style suggests it should. The kneejerk response is to set the width to 100%:

But notice now how the input overflows its container’s boundaries because of the left padding. At this point, people may resort to non-semantic markup (removing the padding on the and putting it inside a padded

) or JavaScript solutions that set the pixel width whenever the container’s width changes (by the addition of scrollbars, for example).

The (semantic) solution

But wait! There is a way to achieve this effect without resorting to an extra

or JavaScript:

Do you see what I did there? I removed the horizontal padding on the , so the 100% width now works correctly, and replaced it with “text-indent”. To the user, this looks no different, and it has the advantage of requiring no extraneous markup or tedious scripting.

Drawbacks

Should the user enter a long string, their text will bump up against the right edge. But I think that that’s a boundary condition that I can live with.
Any vertical borders on the will cause it to overflow its container. Personally, if I want a full-width , though, I generally don’t want any borders on its left or right other than those of its container.

Limiting the contents of a string via RegEx

Barry van Oudtshoorn — Thu, 24 Dec 2009 08:10:49 +0000

Often, you will need to prevent users from entering data that doesn’t conform to a specific pattern. For example, you may want to allow users to enter only numbers or only valid email addresses. To this end, I’ve written a little utility function that returns the “standardised” version of a string, according to the regex you supply.

String.implement({
	limitContent: function(allowedRegex) {
		return $splat(this.match(allowedRegex)).join('');
	}
});

Basically, the function takes the result of evaluating the regular expression on the string, converts it into an array if it isn’t one, and then joins the array’s elements together with an empty string.

Examples:

console.log("12345".limitContent(/.{4}/)); // Only allow four characters
console.log("joe@mail.com".limitContent(/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}/)); // Only allow email addresses

Google Wave & iPhone

Barry van Oudtshoorn — Sun, 15 Nov 2009 06:10:54 +0000

I just tried out Google Wave on the iPhone. Interestingly, despite an initial “your browser is not supported” message, the actual system sports a rather snazzy app-like interface on the iPhone.

I’ll be interested to see what kind of support Wave will ‘officially’ have on mobile platforms, and perhaps even more interested in what ‘unofficial’ support there’ll be.

CSS Columns

Barry van Oudtshoorn — Mon, 26 Oct 2009 13:01:09 +0000

In this post, I will walk through the new columns specification that arrived in CSS 3. I will show you the current implementation state of columns in the four major rendering engines: Gecko (Firefox), Webkit (Safari & Chrome), Trident (Internet Explorer), and Presto (Opera).

Before we get on to platform-specific issues and workarounds, though, we’ll look at the various CSS properties available for working with columns.

For more in-depth information on columns, you should check out the W3C working draft and Mozilla’s MDC page on columns. The Webkit blog also has an article, but it’s not particularly informative.

Browser capabilities
Browser bugs
- Gecko
- Webkit
Properties

I will add more to this entry as I discover more about columns — the goal is to make it an easy-to-understand reference.

Browser capabilities

Property	Gecko	Webkit	Trident	Presto
column-count	-moz-column-count	-webkit-column-count	✗	✗
column-width	-moz-column-width	-webkit-column-width	✗	✗
columns	✗	-webkit-columns	✗	✗
column-gap	-moz-column-gap	-webkit-column-gap	✗	✗
column-rule-color	-moz-column-rule-color	-webkit-column-rule-color	✗	✗
column-rule-style	-moz-column-rule-style	-webkit-column-rule-style	✗	✗
column-rule-width	-moz-column-rule-width	-webkit-column-rule-width	✗	✗
column-rule	-moz-column-rule	column-rule	✗	✗
column-span	✗	✗	✗	✗
column-fill	✗	✗	✗	✗
break-before	✗	✗	✗	✗
break-inside	✗	✗	✗	✗

Browsers used for testing: Firefox 3.5.4 (Windows), Safari 4.0.2 (Windows), Internet Explorer 8.0.6001, Opera 10.00 (Windows)

Please let me know if this table is inaccurate, and I will update it.

Browser bugs

These are the bugs that I have encountered using CSS columns — if you know of more, please let me know, and I’ll add them to these lists.

Gecko bugs

Specifying an “overflow” (or “overflow-x” or “overflow-y”) property on an element with columns prevents the column rule from being rendered at all.
Column rules occasionally don’t render, regardless of the “overflow” property.
There is no way to break columns.

Webkit bugs

Pixel creep: Pixels from a later column can creep back to the bottom of the previous column. This can happen with plain text, but it is much more noticeable when you use a non-layout altering effect like text-shadow or box-shadow.
Text that overflows the column horizontally is chopped off
There is no way to break columns.

Properties

column-count

Value: | auto
Initial value: auto

If you don’t set the column-width property, column-count specifies the number of columns into which the content should be flowed.

If you specify column-width, column-count imposes a limit on the maximum number of columns to be rendered if you supply a numeric value.

column-width

Value: | auto
Initial value: auto

This property indicates the optimal column width — columns may be rendered narrower or wider by the UA, according to the available space.

If column-width has the value “auto”, then the width of the columns is determined by other means (for example, column-count).

columns

Value: column-width && column-count

The columns property is a short-hand property, used to set both column-width and column-count simultaneously.

column-gap

Value: | normal
Initial value: normal

Use column-gap to specify the size of the gutter that lies between columns. Most UAs will render “normal” as 1em.

column-rule-color

Value:

When a column-rule is specified, you may use column-rule-color to set the colour for the line drawn between columns. This property is approximately equivalent to the various border-(?)-color properties.

column-rule-style

Value:

By using column-rule-style, you may determine how the line between columns is to be rendered, if at all. Similar to border-(?)-style.

column-rule-width

Value:
Initial value: medium

column-rule-width sets the width of the line rendered in the gutter between columns. Basically, it’s the same as the border-(?)-width properties.

column-rule

Value: column-rule-width && column-rule-style & & column-rule-color

Shorthand for setting all three column-rule properties.

column-span

Value: 1 | all
Initial value: 1

By using column-span, you can allow an element to span either the entire set of columns, or none at all.

Note that you cannot set an arbitrary number of columns to span — this property essentially ‘interrupts’ the column flow and restarts it below the spanned element.

column-fill

Value: auto | balance
Initial value: balance

If you have set a height for your columnified element, setting column-fill to ‘auto’ will cause the columns to be ‘filled’ in turn, rather than have the content balanced equally between them.

MooTools object messaging

Barry van Oudtshoorn — Thu, 22 Oct 2009 08:19:08 +0000

Events

In JavaScript, we often tend to use events all over the place. In MooTools, the custom ‘domready’ event is particularly prevalent. However, events suffer from a few drawbacks:

You can’t attach events to non-existent objects.

Pretty self-explanatory, really. What this means in practice, though, is that you can’t easily let object A know when object B exists.

If an object starts to listen for an event after it’s already fired, it’ll never hear it.

Because content on the web isn’t always delivered in perfect order (especially when you’re loading scripts synchronously), it’s possible for an object to try to listen for an event after it’s already been fired. Obviously, this means that your listener object will never run the code that’s dependent on that event, which could be Bad Thing™.

It’s not particularly easy to know which object is listening for which events.

There are ways around this, but you can’t just dir() the listeners in Firebug.

A messaging system

For all of these reasons (and probably a few more that I’ve forgotten about), a messaging system can be an invaluable addition to your arsenal when writing JavaScript. How does a messaging system work? Well, interested objects ‘register’ themselves as listeners for particular message ‘handles’, and other objects can send messages using those ‘handles’. Below is a very simple MooTools messaging system that I knocked up, which has a few cool features, including:

When you register() a listener, you can have its callback immediately fire if that message has ever been sent before.
You can very easily see which callbacks are associated with which messages by simply dir()-ing the ‘listeners’ member.
You can unregister() a listener at any time (provided you’ve got a reference to the function and the handle).
Handles can be any valid JavaScript type — Strings, Numbers, even Objects.

Feel free to use and extend this system — as I mentioned, this is a very simple system. If you do extend it, let me know in the comments!

Let me know what you think about this system in the comments.

barryvan.base.Messaging = new Class({
	listeners: $H(),
	sentMessages: [],

	initialize: function() {

	},

	/**
	 * Register a listener for a particular handle.
	 * handle [String]: The message 'handle' to listen for.
	 * callback [Function]: The function to be called when the handle is sent a message. The contents of the messages will be included in the function call.
	 * dontCheck [Boolean]: If falsey and the handle has had a message sent to it, immediately call the callback function (without contents), and continue to add the listener as normal.
	 */
	register: function(handle, callback, dontCheck) {
		if ($type(callback) !== 'function') return;

		if (!dontCheck && this.sentMessages[handle]) {
			callback();
		}

		if (!this.listeners.has(handle)) this.listeners[handle] = [];
		this.listeners[handle].push(callback);
	},

	/**
	 * Unregister a listener for a particular handle.
	 * handle [String]: The message 'handle' to cease listening for.
	 * callback [Function]: The function which was earlier assigned as the callback for the messages.
	 */
	unregister: function(handle, callback) {
		if (this.listeners.has(handle)) {
			this.listeners[handle].erase(callback);
		}
	},

	/**
	 * Send a message to the given handle with the given contents -- send the contents to all the registered listeners for that handle.
	 * handle [String]: The message 'handle' to transmit to.
	 * contents [Mixed]: The contents to be sent to the listeners.
	 */
	send: function(handle, contents) {
		this.sentMessages.include(handle);
		if (this.listeners.has(handle)) {
			this.listeners[handle].each(function(callback) {
				callback(contents);
			});
		}
	}
});

CSS minifier and alphabetiser

Barry van Oudtshoorn — Thu, 27 Aug 2009 08:27:30 +0000

Update: This project is now hosted on GitHub: http://barryvan.github.com/CSSMin/

There are quite a few CSS minifiers out there, which can bring the raw size of your CSS files down substantially. Very few of them, however, will also optimise your CSS for gzip compression. To that end, I’ve written a small Java application that will read in a CSS file and output its contents to stdout or another file in a format that’s optimised for gzipping.

The problem

A file will be most compressed when there are many recurring strings in the file. This means that when writing CSS files, this code:

.pony {
border: solid red 1px;
font-weight: bold;
}
.lemur {
border: solid red 1px;
font-weight: normal;
}

will be better-compressed than this:

.pony {
border: solid red 1px;
font-weight: bold;
}
.lemur {
font-weight: normal;
border: red solid 1px;
}

What it does

Specifically, my CSS minifier will perform the following transformations on the file:

All comments are removed.
The properties within all selectors are ordered alphabetically.
The values for all properties are ordered alphabetically.
All unnecessary whitespace is removed.

By way of example, the following CSS snippet:

body {
padding: 8px;
margin: 0;
background-color: blue;
color: white;
font-family: "Trebuchet MS", sans-serif;
}

h1 {
margin: 0;
padding: 0;
font-size: 200%;
color: #0F0;
font-weight: bold;
}

p {
margin: 0 0 2em;
line-height: 2em;
}

would be formatted to:

body{background-color:blue;color:white;font-family:"Trebuchet MS",sans-serif;margin:0;padding:8px;}h1{color:#0F0;font-size:200%;font-weight:bold;margin:0;padding:0;}p{line-height:2em;margin:0 0 2em;}

Compression results

A (very) large real-world CSS file of 78.2KB has a minified size of 63.7KB, which is a size decrease of nearly 20%. GZipping these two files, the un-minified file is reduced to 13.2KB, whilst the minified file weighs in at just 11.5KB — nearly 13% smaller.

Clearly, removing unnecessary whitespace and reordering the contents of the CSS selectors can greatly improve the compression of your CSS files, and thus make your pages deliver more quickly.

Comparison with YUI CSS Compression

As you can see in the chart below, the YUI compressor manages to make the original file around 1KB smaller than my minifier. However, when the two minified files are gzipped, my compression results in a file that is 11.5KB in size, whilst YUI only reduces down to 11.8KB.

Download

The source for this applet is available freely, and is a single Java file. It’s not particularly pretty, because I knocked this together in about half an hour.
Download
License: Mozilla Public License (In other words, do whatever you like with it. Credit is greatly appreciated, but not required.

Usage

First, if you haven’t done so yet, compile the code:

# javac CSSMin.java

Then, you can call the minifier by running

# java CSSMin in.css [out.css]

If you do not specify an output file, the resultant CSS will be printed to stdout (and can then be redirected as you wish).

Contact

If you have any questions or comments about this app, or if you find a bug or some weird behaviour, just comment on this post, and I’ll see what I can do.

If you find this utility useful, let me know! If you want to extend it, you’re free to do whatever you like with it, as it’s under the MPL. It would be nice, though, if you dropped me a line to let me know what you’re doing with it.

Future work

Replace “0[px,em,%,etc]” with “0″.
Replace “0 [0 [0 [0]]]” with “0″.
Replace “0.6″ with “.6″ wherever possible.
Replace all “rgb(64, 64, 64)” with “#404040″.
Shorten colours from #112233 to #123 wherever possible.
Remove all empty rules.
Ordering of property valus according to the CSS spec, not just alphabetically.
A cleaner interface, including the ability to stream and process from stdin.

Barryvan » Programming

Generative Music

Canvas Swarms

HTML: IE file submission

Javascript: Print a single element

Full-width text inputs without extraneous markup or scripting

The problem

The (semantic) solution

Drawbacks

Limiting the contents of a string via RegEx

Examples:

Google Wave & iPhone

CSS Columns

Contents

MooTools object messaging

Events

You can’t attach events to non-existent objects.

If an object starts to listen for an event after it’s already fired, it’ll never hear it.

It’s not particularly easy to know which object is listening for which events.

A messaging system

CSS minifier and alphabetiser

The problem

What it does

Compression results

Comparison with YUI CSS Compression

Download

Usage

Contact

Future work