Setting Up a 301 Redirect

Instead of having to bother with a plethora of settings in cPanel itself, I came up with the following to stick at the top of .htaccess. A quick look around on the Internet brought up Fayaz Miraz’s blog, but while the solution suggestion was close, it misses one crucial aspect: it only redirects from the main page as far as I can tell. This is fixed easily by the addition of $1 (i.e. everything that was added after the main page).

<IfModule mod_rewrite.c>
RewriteEngine On

RewriteCond %{HTTP_HOST} !^fransdejonge\.com$
RewriteRule ^(.*)$ http://fransdejonge.com/$1 [R=301,L]

</IfModule>

Simply put, it matches all possible routes of approach (whether through www or through a subdomain of another domain) and if it’s not fransdejonge.com, it will 301 redirect to fransdejonge.com. The L means no further rewriting will occur after that rule. Mostly because it would just be inefficient, and partially because something else further down the line might mess things up.

Preventing .htaccess Hell

Another problem is that cPanel automatically creates a /public_html/addondomain directory. This is bad, because /public_html already contains a .htaccess file for the main domain. When accessing /public_html/addondomain, it would first parse the .htaccess file in /public_html before moving on and overriding it in /public_html/addondomain, and that’s assuming none of the rules in /public_html make anything go awry!

To prevent this kind of nightmare from occurring I took the simple precaution of creating a new directory /domains. This domain is contained in /domains/fransdejonge.com, for instance, and any other add-on or subdomains can reside in their own /domains/domain.com directory to prevent any added load from needlessly parsing .htaccess files.

A malamanteau (plural malamanteaux) is a neologism for a portmanteau created by incorrectly combining a malapropism with a neologism. It is itself a portmanteau of malapropism and portmanteau. In a less strict definition, a portmanteau of a malapropism with another word can also be considered a malamanteau. The contained malapropism must be typically a very common one, probably most people are not aware of, in order to be able to regain the meaning of a malamanteau.

A malamanteau often is created when somebody tries to use a neologism (alternatively, an idiom) but mistakenly confuses a word with another one. However, unlike a malapropism or an eggcorn, the fumbled word is not completely replaced, but merely transfixed to the new one. A famous example is: “misunderestimate” which was popularized by the 43rd President of the United States, George W. Bush. Probably it was intended to be “underestimate” but mistakenly jumbled with “misunderstand.”

Examples

• Somebody describes his misunderstanding of what someone was saying by stating, “I misconscrewed it up.”
• Somenone explains his inability to talk while being upset by saying he was “flustrated.”
• A meaningful malamanteau is “ambiviolent,” as in: “Beatrix Kiddo in Kill Bill was ambiviolent. She didn’t know who to kill first.”

I was going to write more about it when I made this draft, but by now it’s two weeks later and I’ve lost interest. Booyah.

On the other hand, you might prefer all links to external sites to open in a new tab. I recently wrote a script that does just that for someone on the MyOpera forum.

I don’t block Flash as it typically crashes separately from Opera on Linux, nor does it seem to slow things down for me. I don’t typically block ads, either — though it is really annoying if one ad is making the entire page load slowly. However, I will generally close a page while it’s loading if I am annoyed by the ads. When do ads annoy me? Simple: when they do not fit the type of content I’m looking at. If I want to read some text, I’m fine with static textual or image-based ads. I don’t want animation, although I suppose it’s possible to change ads now and then without it being too obtrusive. Anything that utilizes Flash typically breaks these rules and comes with distracting animation. Worse, it often even comes with sound. It doesn’t really matter what I’m doing; as long as I’ve got my sound system turned on I don’t want any sound to come from my speakers that I did not explicitly ask for.

Now if I’m going to watch a video, like on Uitzendinggemist, then I’m perfectly fine with a video-based advertisement with audio. Uitzendinggemist literally means “missed broadcast.” It’s an online archive of most of Dutch public television broadcasts. After all, I’m requesting video with sound. A 10-15 second advertisement prior to actually viewing the particular video I requested is perfectly acceptable. Similarly, I welcome short audio clips or endorsements in podcasts if they help pay for the podcast. But don’t start playing such messages at random. Although I don’t frequently use Firefox for regular browsing, my favorite extension is StopAutoPlay. This isn’t just about ads of course and applies just as much to people who decide to stick background music on their site, or to start playing videos automatically (I’m looking at you, YouTube), though if I opened a video somewhere it’s usually not too hard to figure out where the noise is coming from.

What could be an acceptable form of a video-based advertisement on a non-moving Internet page would be something akin to YouTube embedded videos. These don’t autoplay, but you have to click the play button first.

Everything I said applies just as much to things that aren’t advertisements, but too many advertisements seem to be made as annoyingly as possible on purpose. I hope that nobody has ever gained any business from such advertisements. They sure haven’t from me.

Anyway, I wanted to subscribe to the UN News podcast. To my surprise, gPodder was incapable of handling it. No surprise, as it turns out, because it’s not even proper according to the iTunes enclosure specification (although I imagine it works in iTunes). SimplePie had a nice get_enclosure() function already, so the first step, adding a proper enclosure to my Tube’s output feed, was a matter of minutes. The UN also fails to specify any size information, however, which I can’t say I was too enthused about in my trusty gPodder interface. Another 10 minutes or so later, I finished adding some cURL magic to my application. I should probably stash it away into a class later and see if I can somehow make it utilize SimplePie’s cache system to minimize useless traffic, but for now I just stuck it straight in the feed generation code. Now the UN feed is transformed from something gPodder couldn’t handle into something that essentially fixes all the UN did wrong. Thank you SimplePie for providing this great foundation!

Before (RSS):

<item>
  <title>UN Daily News 12 March 2010</title>
  <itunes:author>United Nations Radio</itunes:author>
  <itunes:subtitle>News and features from United Nations Radio.</itunes:subtitle>
  <itunes:summary></itunes:summary>
  <enclosure url="http://downloads.unmultimedia.org/radio/en/ltd/mp3/2010/10031200.mp3" length="" type="audio/mpeg" />
  <guid>http://downloads.unmultimedia.org/radio/en/ltd/mp3/2010/10031200.mp3</guid>
  <pubDate>Fri, 12 Mar 2010 11:42:32 EST</pubDate>
  <itunes:duration>0:00</itunes:duration>
</item>

After (Atom):

<entry>
  <author>
   <name>United Nations Radio</name>
  </author>
  <title>UN Daily News 12 March 2010</title>
  <summary> </summary>
  <published>2010-03-12T11:42:32-05:00</published>
  <updated>2010-03-12T11:42:32-05:00</updated>
  <id>http://downloads.unmultimedia.org/radio/en/ltd/mp3/2010/10031200.mp3</id>
  <link rel="enclosure" type="audio/mpeg" href="http://downloads.unmultimedia.org/radio/en/ltd/mp3/2010/10031200.mp3" length="6720384" />
  <link rel="alternate" type="text/html" href="http://downloads.unmultimedia.org/radio/en/ltd/mp3/2010/10031200.mp3"/>
</entry>

I realize the alternate link currently has the wrong type attribute, which I’ll look into fixing, but at least my gPodder can handle the feed now.

I also set up a little demo so you can check the difference with the original feed for yourselves. I’d be curious to hear how different podcatchers handle both feeds.

I know you are a patent licensor in the MPEG LA, and this would actually make your actions even more powerful and meaningful. You could show just how serious you are about interoperability on the Web by supporting the free and open codec rather than the one that would best suit your short-term interests.

This is a unique opportunity for you to win back the hearts and minds of people who might have otherwise dismissed you as carrying on with “business as usual”.

Are you up for it?

This entry only deals with the basics of getting Lighttpd up and running with PHP. To get started, use:

sudo apt-get install lighttpd php5-cgi

Then run lighty-enable-mod and enter fastcgi.

Then you can edit /etc/lighttpd/lighttpd.conf. Stick the following at the end:

fastcgi.server = ( “.php” => ((
“bin-path” => “/usr/bin/php5-cgi”,
“socket” => “/tmp/php.socket”
)))

Recommended: sudo apt-get install php5-curl php5-tidy to be able to run Tubes with all functionality, and of course any other modules you might like. There’s nothing to it; you don’t even have to edit php.ini.

When you’re done customizing things to your liking, use sudo /etc/init.d/lighttpd restart to see the changes.

As I wrote a few months ago, Yahoo Pipes is a nice tool. Nonetheless, it has a few shortcomings which annoyed me because I could neither fix nor work around them. Therefore, I decided to write my own mashup tool. For the impatient, you can download the file right now before reading anything else.

Since SimplePie seems to be the feed aggregation library of choice for many projects, I decided to go with it. I ran into a few minor issues, but nothing I couldn’t handle easily. The code I wrote is based on the multifeeds.php demo file and SimplePie 1.1.3, because in 1.2 it didn’t work (the multifeeds demo, that is — by extension I suppose this file won’t either). It’s a little rough around the edges, and SimplePie is clearly meant for HTML output rather than XML (although its HTML isn’t quite decent either, even if the input feed is), so I decided to fix the whole thing up with Tidy, which takes care of low quality input material as well. Hopefully that makes this whole thing more robust than it would otherwise be. The code is based around bringing various Opera feeds I read together in one big feed, but this can very easily be changed.

So now that I’ve got the basics of output into a feed taken care of, I can easily duplicate other functionality of Yahoo Pipes if I want. Much better.

I dug into the Internet Archive and I was pleasantly surprised to discover that the 30 Days series for Opera 6 is available through the archive in a nice ZIP file. The original Opera 6 lover pages do not seem to have been preserved, but the ZIP file is easier to use regardless.

The 30 Days series for Opera 8 was also preserved. The Opera 8 series is still available in the archives of TnT Luoma, but the pictures and some other things are broken. Besides, I like the old layout better; it used to be blue, however, which was even better — you probably don’t want to read the oldest text available, though. While I would not recommend a detailed read (it is quite outdated after all), I would certainly recommend skimming through most of it.

By the time Opera 8 came out — and consequently, the 30 Days to Becoming an Opera 8 Lover series — I was already a seasoned Opera user, so the series didn’t do much for me. I did discover one very important Opera feature thanks to it, however. In the default keyboard setup, Shift + F2 is bound to go to nickname. If you don’t know what nicknames are, you can give bookmarks so-called nicknames; if you type them out in the address bar and press enter it will take you to the bookmark, and it will offer autocomplete suggestions while you’re typing. Useful, but not a huge time saver.

Go to nickname is better, because it starts going to the nickname as soon as it’s got a match. So if you have only one bookmark with a nickname that starts with a, you’ll only have to type a and you’ll be on your way. I had not realized this prior to reading the Opera 8 Lover series, and it wasn’t actually written in the series, but without it I might very well never have tried this feature again. After some consideration and major inspiration by Moose I rebound F2 to new page & go to nickname, which means that ever since, pressing F2 automatically opened a new page and this tremendously useful dialog. The introduction of speed dial didn’t do much for me thanks to this keyboard shortcut. It might take a few seconds more to configure, but it’s worth it. Additionally, new tabs will open even faster if you disable speed dial.

Initially I tried the WP API:

add_rewrite_rule('date/(\d{1,2})/(\d{4})', 'index.php?m=$matches[2]$matches[1]', 'top');

This kept giving me an error which I couldn’t (be bothered to) debug since it went several functions deep into the WP core, so I gave up on the API and circumvented it with the help of something I found.

Anyhow, here’s the plugin. Save in a file named rewrite-day-month-year.php or just name it whatever you like.

<?php
/*
Plugin Name: Rewrite Rules for Day/Month/Year
Plugin URI: http://frans.lowter.us/2010/01/22/teaching-wordpress-some-manners-enabling-daymonthyear-archives
Description: WordPress can't cope with /%day%/%monthnum%/%year%/ for some reason. That is to day, it fails when you try to go for an archive in the form of /date/month/year/ This teaches it some manners. Probably/hopefully shouldn't interfere with other structures, but why you'd activate it if you don't need it I wouldn't know.
Version: 1.0
License: GPL
Author: Frans
Author URI: http://frans.lowter.us

Based on http://dd32.id.au/files/wordpress/test-rewrite.php
*/

function test_add_rewrite_rules( $wp_rewrite ) {
	$new_rules = array(
		"date/(\d{2})/(\d{4})" => 'index.php?m=' . $wp_rewrite->preg_index(2) . $wp_rewrite->preg_index(1),
		"date/(\d{4})" => 'index.php?year=' . $wp_rewrite->preg_index(1)
	);
	$wp_rewrite->rules = $new_rules + $wp_rewrite->rules; //NOTE: You must add it to the start of the array, Else WP's greedy rules at the end of the array will eat the request
}

register_activation_hook( __FILE__, 'flush_rules_initiate' );
register_deactivation_hook( __FILE__, 'test_flush_rules' );
// add_action('init','test_flush_rules'); // for testing

function flush_rules_initiate() {
	// Add the permalink override stuff
	add_action('generate_rewrite_rules', 'test_add_rewrite_rules');
	test_flush_rules();
}

function test_flush_rules(){
	//Flush the rewrite rules so that the new rules from this plugin get added,
	//This should only be done when the rewrite rules are changing, Ie. When this plugin is activated(Or Deactivated), For simplicity while developing using WP Rewrite, I flush the rules on every page load
	global $wp_rewrite;
	$wp_rewrite->flush_rules();
}
?>

The WordPress theme I’m modifying for my wife had the following HTML in it:

<input type="text" value="Search this site" onfocus="if (this.value == 'Search this site') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this site...';}" name="s" id="searchbox" />

There are three main problems with this.

1. It prefills the search box with “Search this site.” This is incredibly annoying and obnoxious behavior for people with Javascript disabled. If you must add such text, add it through Javascript.
2. The values don’t even match up, so if you focus on the INPUT, deselect it and select it again the text stays there. Even for users with Javascript enabled. Errors of this type could easily be avoided if the text value were stored in a variable.
3. Which brings me to the third problem. The script should be external so it can be cached. That would save bandwidth for both you and your visitors and if there are people with Javascript disabled, they won’t even have to load the junkscript once.

Because just about every such box I have ever encountered is complete and utter crap (this is actually one of the better ones), I decided to reproduce its functionality in an unobtrusive manner, eliminating all of the mistakes I outlined above.

The HTML is now reduced to this:

<input name="s" id="searchbox"/>

You could remove the trailing slash if you’re writing HTML, or put a space in between if that’s the way you write XHTML, but that’s of no consequence otherwise. The type="text" is not essential because it’s the default, but it shouldn’t hurt to leave it in. Also see Anne van Kesteren’s Optimizing Optimizing HTML for some tips on going somewhat over the top with minimalism.

The Javascript that changes the text to “Search this site…” is now in an external file:

(function() {
	function searchbox_text_change() {
		var s = document.getElementById('searchbox');
		var s_text = 'Search this site...'
		if (s.value == '') s.value = s_text;
		else if (s.value == s_text) s.value = '';
	}
	document.addEventListener('DOMContentLoaded',
	function(){
		var s = document.getElementById('searchbox');
		searchbox_text_change();
		s.addEventListener('focus', searchbox_text_change, false);
		s.addEventListener('blur', searchbox_text_change, false);
	},
	false);
})();

All of this took me about five minutes. There’s a tiny bit of redundancy going on, but I can’t be bothered to fix that. It’s superior to just about any stupid such script I ever encountered and likely to most of the same type that I will encounter in the future. Use this script as much as you please. You don’t even have to link back to me, since I just want those bloody things to work in a way that doesn’t make me cringe.

The same kind of principle applies to autofocus junk. Never ever do any such thing if I started typing something. I’d rather you never did it at all, but if you really feel that you must do it for some masochistic reason, at the very least check if the value is still empty with if (s.value=='').

The script I wrote to supply non-Opera browsers with faux-media-query functionality assumes that any browser not Opera should have the script applied to it, because at the time Opera 7+ was the only browser that supported media queries. I knew this wasn’t exactly the proper way to write scripts, but it was meant to be updated to use some more intelligent detection at some point. As such things go, however, it never was. In my defense, the worst the script did was duplicate some functionality that was already provided by media queries, so I rather doubt anybody noticed any adverse effects. Heck, they might have noticed positive effects, since as I wrote at the time, “For now, it might even be the best solution to apply the Javascript to Opera as well, because Opera does not reapply media queries on resize yet (and it does fire the onresize event as every browser does).” For good measure I’m also including the script as I used it on my website since 2006. It has this nifty little added feature that it doesn’t actually do anything if there are no sidenotes present, which is something media queries cannot do. I think I considered writing a more intelligent check based on style features that would be set by the media query back in early ’06, but I can’t recall why I never did. For those interested in hacking the old script, the way I set it up it should be possible to determine whether media queries are supported very easily by combining a test for at least medium width with the marginRight style property on the sidenotes. If set, media queries are working; if not, go ahead and do some scripting magic.

Now, on to the updated sidenotes. I abandoned absolute positioning in favor of going completely for float. I believe I wanted to do this originally, but there were too many float bugs in all kinds of browsers to make it viable (that means everything not Presto or KHTML). Since these appear to be fixed, there is no reason not to take full advantage of floats, which most important means using clear so that sidenotes will not overlap. Previously I had to seriously consider the placement and frequency of sidenotes. Now I can just add them whenever I want. I still think my original reasoning is quite valid, however, which means I don’t think sidenotes should be inserted lightly or contain overly long texts.

Let’s start out. How do we markup a sidenote? Well, as HTML contains no way whatsoever to markup a foot- or sidenote, the logical choice is small. Why small? Well, it means that the content of small is less important. A footnote should not be a footnote at all if it’s as important, or more important than the text itself, right? Thus, the markup of the sidenote is as follows:

<small class="sidenote">A sidenote</small>

This is still what I use, but ASIDE would be more appropriate in HTML 5.

The sidenote as I created it is meant to be put at the end of a sentence, inside a paragraph. Therefore it would be displayed at its original position in the text if author CSS was disabled, or read at its intended location on screenreaders. If it wouldn’t be put as a separate sentence, it would look strange if not displayed the intended way. The sidenote is placed inside the paragraph with the other text, for if it would require multiple paragraphs, should it be a sidenote?

There is one issue I didn’t take into account five years ago. For example, including two paragraphs or so of background information on a country or city in a sidenote would be an appropriate use of sidenotes since it’s not really a part of the text. My original stance (although not explicitly written) was that this should be solved with hyperlinks, but I have somewhat revised this stance. The markup would then become something like:

<div class="sidenote">
	<h3>Were Sidenotes Always Compatible With Any Element?</h3>
	<p>You could always apply the <code>sidenote</code> class to any element, such as <code>P</code> or <code>DIV</code>.</p>
</div>

Or in HTML 5:

<aside>
	<h3>Were Sidenotes Always Compatible With Any Element?</h3>
	<p>You could always apply the <code>sidenote</code> class to any element, such as <code>P</code> or <code>DIV</code>.</p>
</aside>

The main sidenote CSS is still very similar to what it was in 2005.

.sidenote {
	background: #efd;
	display: block;
	float: right;
	clear: right;
	width: 200px;
	border: 1px solid #eee;
	border-right: 0;
	margin: 2px;
	margin-right: -20px;
	padding: 3px;
	text-indent: 0;
	cursor: help;
}
.sidenote:before { content: '\2190' ' '; }
.sidenote:hover {
	background: #ff0;
}
/* enable usage of code in sidenotes without the layout breaking  */
.sidenote code {
	white-space: normal;
}

There are a few minor differences, but other than the addition of the .sidenote code line nothing worth mentioning. Only a few weeks ago I noticed that adding a line of code to a sidenote somewhat broke my layout because it stretched beyond the viewport. A few more global ways to accomplish normal white space in sidenotes come to mind (such as !important in the main class or .sidenote *), but from what I understand using such methods increases parsing time, if only ever so slightly.

The media queries performing the sidenote magic were significantly slimmed down, and a low-resolution in-line display was added:

@media all and (max-width: 350px) {
	.sidenote {
		display: inline;
		float: none;
		border: 0;
		margin: 0;
	}
	.sidenote:before {content:"";}
}
@media all and (min-width: 750px) {
	#wrapper{margin-right:207px}
	.sidenote {
		border-right:1px;
		margin: 0;
		margin-right:-228px;
	}
}
@media all and (min-width: 980px) {
	#wrapper{margin-right:auto}
}

#wrapper is just in there to keep IE from embarrassing itself; if I were creating my blog’s design today I’d just go with body. Switching completely to float makes it possible to keep the overrides to a minimum, but that’s not the important change here. I switched to simple media queries for two reasons.

1. It’s much easier to maintain and change. No more duplication.
2. I don’t think most media types are as relevant anymore as I did back then. Specifically, in regard to such things as handheld devices what I want to do is offer different layouts based on screen size, not on whether they consider themselves to be handheld, screen, or some other fancy media type. Safari on the iPhone considers itself a big browser, for instance, but should it really get the “big” layout? None of this is especially relevant for my sidenotes, but it does reflect my opinion on it. Additionally, specifically overriding for certain media types rather than being specifically inclusive makes sure that no one is left out. In other words, this is future-safe. If the media type magazine ever emerges (they already did a magazine with an eInk cover, didn’t they?), my media query is ready for it now. And for those who care about such things, it also avoids an IE bug or two.

That’s it. My sidenotes are ready for the nearby future. They’re so 2010. Feel free to use or expand on my ideas, but please add a link back to me somewhere if you do.

Browser Size works best on web pages with a fixed layout aligned to the left (emphasis added). If the content reflows as the width is adjusted or it is centered, then the results can be misleading. In this case, you can obtain more accurate results by reducing the browser width to a percentage column, e.g. 90% and seeing what content falls below the 90% horizontal line.

I realize it would be hard to implement it any other way, and I would certainly hope that most people understand you have to play around with the size of your window to use the tool in a meaningful way without having read the preceding message — those that don’t probably won’t read the message either. It seems to me that this should certainly be the preferred way to use the tool — how it works best. Don’t encourage those who produce such annoying designs by saying their methods work best. What they hopefully meant to say is that it works best to expose web pages with a fixed layout for the excrements they are.

I’ll start by dropping a major bomb. Here is the script.

// Checks if there is deleted text in post entries. Adds a Show or hide deleted text button if there is.
// Copyright © Frans de jonge 2009. Licensed under a Creative Commons Atrribution 2.0 license.
function AddShowHideDeletedTextButton() {
	var postEntries = document.getElementsByClassName('postentry');
	var postEntry = postEntries[0];
	if ( postEntries.length == 1 && postEntry.getElementsByTagName('del').length > 0 ) {
		var hideText = 'Hide deleted text', showText = 'Show deleted text';
		var button = document.createElement('input');
		button.setAttribute('type', 'button');
		button.setAttribute('value', hideText);
		button.addEventListener('click',
		function () {
			var e = postEntry.getElementsByTagName('del');
			for ( var i = 0; i<e.length; i++ ) {
				if (e[i].style.display == 'none') {
					e[i].style.display = 'inline';
					this.setAttribute('value', hideText);
				}
				else {
					e[i].style.display = 'none';
					this.setAttribute('value', showText);
				}
			}
		}
		,false);
		postEntry.insertBefore(button,postEntry.firstChild);
	}
}

I’m going to assume that you have at least a basic understanding of functions and variables, but may not be completely aware of DOM methods and how to use them. A very valuable resource is the Mozilla Developer Center, or MDC. It provides information on much more than just JavaScript and the DOM, but while I find the CSS and even HTML specifications fairly easy to get around in, the DOM specifications, with their language neutral, very extensive descriptions are quite hard in comparison. They are exactly the way they ought to be, but this makes it somewhat hard to find relevant information about actual usage and how to use it. That’s where the MDC comes in. It typically comes with a clear, concise summary at the top of the page, and if you don’t understand that, it usually comes with more extensive code samples as well.

	var postEntries = document.getElementsByClassName('postentry');
	var postEntry = postEntries[0];
	if ( postEntries.length == 1 && postEntry.getElementsByTagName('del').length > 0 ) {

DOM methods used:

• document.getElementsByClassName(className)
• element.getElementsByTagName(tagName)
• nodeList.length

In my blog, I have marked up all of the contents of my posts with a DIV element, with, as you might have guessed, a class postentry. This particular bit of code is meant to make sure that we are on the individual page of the post (i.e. not in some kind of overview) and that there are actually deleted elements around. Adding a button on an overview page would result in all kinds of problems—if you add only one it may not be anywhere near where it is needed, so you’d have to add multiple buttons, check if the post where it will be added has deleted elements, etc.—which are easy to avoid by keeping it restricted to one post.

		var button = document.createElement('input');
		button.setAttribute('type', 'button');
		button.setAttribute('value', hideText);

DOM methods used:

• document.createElement
• element.setAttribute(attribute, value)

Here we see the proper way to create an element through the DOM. First we create an element, in this case input, and then we set a few attributes to the values we want. Note that I defined hideText earlier, with the value Hide deleted text.

		button.addEventListener('click',
		function () {
			var e = postEntry.getElementsByTagName('del');
			for ( var i = 0; i<e.length; i++ ) {
				if (e[i].style.display == 'none') {
					e[i].style.display = 'inline';
					this.setAttribute('value', hideText);
				}
				else {
					e[i].style.display = 'none';
					this.setAttribute('value', showText);
				}
			}

DOM methods used:

• element.addEventListener
• element.style

Here we definitely have one of the more interesting parts of the code. Had I written this script about 8 years ago, I would have used something like var button = '<input type="button" value='+hideText+'>' and consequently added an eventListener like button.onclick = someFunction;, where someFunction would be separately defined. I am using the proper DOM method instead. This may cause problems in IE, for which there are fixes available, but since this blog is strictly personal I decided not to care about that. Notice how I did not define the function separately, but included it as an anonymous function. Since the function is not intended to be used anywhere else, it’s easier, and, ideally, it will be completely removed from memory if the button were to be removed.

The element.style property allows you to access and change style properties on an element. As the MDC says, It is generally better to use the style property than to use elt.setAttribute('style', '...'), since use of the style property will not overwrite other CSS properties that may be specified in the style attribute. I may not be defining any other styles on DEL elements yet, but this way the script won’t break my site if I do add some more style to it in the future, or if someone else wishes to adapt it for use on their own page.

		postEntry.insertBefore(button,postEntry.firstChild);

DOM methods used:

• parentElement.insertBefore(newElement, referenceElement)
• node.firstChild

To finish it off, we’ve got the insertBefore construct. It inserts a node as a child of the node to which it is applied, before a specified other child of this parent node. When I first came across it a few years ago, I thought it was somewhat confusing at first. It should be noted that node means much more than element, but in these specific examples it shouldn’t matter, so I didn’t go into it. If you wish to learn more, I recommend you try the MDC or a search engine.

In conclusion, I hope this helped someone out there a bit. I thought it was interesting to reminisce about how I would have written this script if it were 2003.

You can try the results of this yourself, but what it will look like depends on the fonts you have installed.

What I used to achieve the cohesive look of the IPA characters is this simple line of CSS.

.IPA{ font-family: "DejaVu Sans", "Lucida Grande", "Lucida Sans Unicode" }

It’s an easy concept. Slap class="IPA" on some element—I used SPAN—and it will automatically display in one of these fonts, ensuring that no characters look out of place. DejaVu Sans is a font I like a lot; It comes pre-installed on most Linux installations, and is freely available for everybody else. Lucida Grande is a font with the sufficient characters that comes with Mac OS X, and Lucida Sans Unicode is a font that, as the name implies, is very similar to Lucida Grande. It is available in Windows 98 and up.

References

“DejaVu Sans.” Wikipedia: The Free Encyclopedia. 12 Dec 2009 <http://en.wikipedia.org/w/index.php?title=DejaVu_fonts&oldid=329693253>.
“Lucida Grande.” Wikipedia: The Free Encyclopedia. 12 Dec 2009 <http://en.wikipedia.org/w/index.php?title=Lucida_Grande&oldid=314108882>.
“Lucida Sans Unicode.” Wikipedia: The Free Encyclopedia. 12 Dec 2009 <http://en.wikipedia.org/w/index.php?title=Lucida_Sans_Unicode&oldid=324714228>.

All of that was about a month ago. I’ve only got a small selection of feeds in there so far, but since I’m still catching up on literally months of old material, that’s not an issue as of now. Aside from Wil Wheaton’s, my favorite podcast right now is Stuff You Should Know. But enough about that.

When I was younger, I usually listened to the radio news at 7 or 8 AM while eating breakfast. I have long since switched to doing some quick reading of my e-mails and feeds, but that’s not the ideal way to get a quick update on what’s currently going on. The radio news does a better job of that, but it just feels too much like a waste of time. Cue the podcast. I’ve known that Dutch public radio has had its broadcasts available as podcasts since 2005 or so. Selecting the podcast most relevant to me was easy: Radio Netherlands Worldwide, specifically the Nieuwslijn (news line) program. Of course there are competitors, such as BBC’s Global News and the German ARD Tagesschau, and I may have missed some other potentially interesting sources—which would presumably mostly mean American or Flemish—, but for now I’m sticking with this. Alas, there’s one small problem: there’s a news broadcast just about each two hours. This makes the new episodes available dialog look rather cluttered. I only want to listen to the news once a day.

New episodes available in gPodder

That’s where Yahoo Pipes comes in. When I start it, it complains about Opera, but I haven’t been able to discern any difference in functionality between Opera and Firefox on the site. In only a couple of minutes, I have something that only gives me the 8 o’clock news.

If I wanted, I could easily add the BBC and ARD feeds and also strip them to just one item a day. What I can’t do, however, is output the de facto standard <itunes:image href="http://some-picture" /> with the feed. Nevertheless, I can manually link up a picture in gPodder so it doesn’t look strange in the feed display list.

For things more complicated than such simplistic mash-ups, Yahoo Pipe’s graphical programming interface quickly becomes lacking, which is strange considering that it seems to aspire to be more than just a simple mash-up tool. Nevertheless, it certainly makes life a little easier.