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 <input type=”file”> element tells you to set “enctype”, but makes no mention of “encoding”.

• MSDN: ‘Encoding’ property
• MSDN: ‘Enctype’ property
• MSDN: <input type=”file”> element

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.

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.
	}
});

This year, I am once again contributing. I just finished work on the track I will be contributing, so I thought it high time I let everyone know about this. Josh Whelchel, the organiser of the drive (and a fantastic musician to boot), has set a target of $10,000 for this year. If you donate $25 or more, you receive a physical copy of the (two disc!) album; otherwise, you receive the album digitally.

Here’s the official media release:

Indie Music Cancer Drive to Release Songs for the Cure ‘10 Album

Twenty-eight artists join together to raise money for the American Cancer Society and aim to raise $10,000.

Cincinnati, OH, January 24th, 2010. – The Indie Music Cancer Society will release it’s 2010 compilation, Songs for the Cure ‘10 on March 1st, 2010 and forward 100% of all donations and profits to the American Cancer Society through its Relay for Life event held on April 23rd, 2010 at the University of Cincinnati. The album will feature music from over twenty-eight (28) diverse artists, including Select Start, big giant circles, Alec Holowka, Two Seconds Away, Jay Tholen, Josh Whelchel, Renee Winter, and others. The organization is currently accepting donations, and all donors of $25 or more before MARCH 1, 2010 will receive a free physical copy of the album. Supporters with $10 or more will receive a free digital copy. Genres represented include Pop, Rock, Alternative, Chiptunes, Instrumental, Opera, Classical, Avant-Garde, Jazz, Fusion, and many others. The organization raised over $6,000 for the event last year and is still forwarding profits from last year’s album, available on iTunes, Amazon, and others. A full list of artists can be found at the Songs for the Cure ‘10 website at http://www.cancerdrive.org. The fundraiser aims to raise $10,000 by April 23rd, 2010, preceding a digital release of the album to iTunes, Amazon, CDBaby, and other retailers. Donations are accepted through http://www.cancerdrive.org.

For more information please contact:

JOSH WHELCHEL
(513) 549-2336
http://www.cancerdrive.org

So there you have it. And for good measure, here’s the promotional video:

This new one makes extensive use of CSS3 properties, such as gradients and shadows. It looks best in Firefox >= 3.6,followed by Safari >= 4, then Chrome >= 4, Opera >= 10, and IE >= 8. Theoretically, Firefox and Safari/Chrome support the same level of features, but the webkit gradient syntax is absolutely awful. It’s confusing, needlessly complex, and poorly thought-out, in my opinion. Contrast the following two lines:

background: -moz-linear-gradient(top, #111, #333);
background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#333));

See what I mean?

Gecko (Firefox), Webkit (Safari), and Trident (IE) rendering.

String.implement({
	sanitiseWord: function() {
		var s = this.replace(/\r/g, '\n').replace(/\n/g, ' ');
		var rs = [];
		rs.push(/<!--.+?-->/g); // Comments
		rs.push(/<title>.+?<\/title>/g); // Title
		rs.push(/<(meta|link|.?o:|.?style|.?div|.?head|.?html|body|.?body|.?span|!\[)[^>]*?>/g); // Unnecessary tags
		rs.push(/ v:.*?=".*?"/g); // Weird nonsense attributes
		rs.push(/ style=".*?"/g); // Styles
		rs.push(/ class=".*?"/g); // Classes
		rs.push(/(&nbsp;){2,}/g); // Redundant &nbsp;s
		rs.push(/<p>(\s|&nbsp;)*?<\/p>/g); // Empty paragraphs
		rs.each(function(regex) {
			s = s.replace(regex, '');
		});
		return s.replace(/\s+/g, ' ');
	}
});

If you’re not using MooTools, the function will look something like this:

String.prototype.sanitiseWord = function() {
// function body here...
};

Usage

var s = "(some awful Word markup)".sanitiseWord();

In one of the tests I ran, the input went from around 7000 characters to just 700.

Example

Some of the regular expressions I used were adapted from C# ones in a post by Jeff Atwood.

When styling text <input> 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 <input> itself is filled with red and has an opacity of 50% so that you can see it under- or over-flowing the container.

<div  style="background: blue; width:200px;">
  <input  style="display:block; padding:4px; background: red; opacity:0.5; border:0;" type="text" value="text input"/>
</div>

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%:

<div  style="background: blue; width:200px;">
  <input  style="display:block; padding:4px; background: red; opacity:0.5; width:100%; border:0;" type="text" value="text input"/>
</div>

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 <input> and putting it inside a padded <div>) 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 <div> or JavaScript:

<div  style="background: blue; width:200px;">
  <input  style="display:block; padding:4px 0; background: red; opacity:0.5; width:100%; border:0; text-indent:4px;" type="text" value="text input"/>
</div>

Do you see what I did there? I removed the horizontal padding on the <input>, 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

1. 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.
2. Any vertical borders on the <input> will cause it to overflow its container. Personally, if I want a full-width <input>, though, I generally don’t want any borders on its left or right other than those of its container.
]]> http://www.barryvan.com.au/2010/01/full-width-text-inputs-without-extraneous-markup-or-scripting/feed/ 1 http://www.barryvan.com.au/2009/12/limiting-the-contents-of-a-string-via-regex/ http://www.barryvan.com.au/2009/12/limiting-the-contents-of-a-string-via-regex/#comments Thu, 24 Dec 2009 08:10:49 +0000 Barry van Oudtshoorn http://www.barryvan.com.au/?p=332 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

]]> http://www.barryvan.com.au/2009/12/limiting-the-contents-of-a-string-via-regex/feed/ 0 http://www.barryvan.com.au/2009/12/open-letter-to-m-keenan-stirling-mp/ http://www.barryvan.com.au/2009/12/open-letter-to-m-keenan-stirling-mp/#comments Tue, 22 Dec 2009 22:32:31 +0000 Barry van Oudtshoorn http://www.barryvan.com.au/?p=323 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

]]> http://www.barryvan.com.au/2009/12/open-letter-to-m-keenan-stirling-mp/feed/ 0 http://www.barryvan.com.au/2009/12/music-lament/ http://www.barryvan.com.au/2009/12/music-lament/#comments Fri, 04 Dec 2009 00:12:03 +0000 Barry van Oudtshoorn http://www.barryvan.com.au/?p=319 About a month ago, I was playing around on the piano, and I came up with a fragment of melody that I couldn’t get out of my head. I played with it, twisting it around, pushing it in different directions, seeing what I could do with it. Ultimately, I turned it into a full piece of music, and this is the result.

Visit the website to listen to the audio.

Like this track? Buy it at thesixtyone, and help feed an impoverished (well, not really) programmer.

You can also listen to one of the (early) improvisations I played on this theme by downloading the recording I made on my phone here.

]]> http://www.barryvan.com.au/2009/12/music-lament/feed/ 3 http://www.barryvan.com.au/2009/11/music-ventilate/ http://www.barryvan.com.au/2009/11/music-ventilate/#comments Fri, 27 Nov 2009 01:06:52 +0000 Barry van Oudtshoorn http://www.barryvan.com.au/?p=314 Well, it’s been a fair while since I last uploaded a piece of music — over two months, in fact! So here’s my latest piece.

This piece actually started out as an experiment — I recently got my hands on all sorts of shiny new toys, and my DAW got an awesome upgrade, so I couldn’t resist seeing what I could do with them.

I managed to use all but one of the products that came with Komplete to make this track — FM8, Massive, Reaktor, Guitar Rig, Kontakt, and Battery. Much fun.

Visit the website to listen to the audio.

Hmm… For some reason, the version of this uploaded to thesixtyone gets some distortion on the bass during the intro section. I’ve tried uploading at various bitrates, multiple times, but it still keeps on happening. I think they must be doing some re-encoding. :/ Very annoying.

]]> http://www.barryvan.com.au/2009/11/music-ventilate/feed/ 2