Well, it turns out that I haven’t kept this site as up-to-date as I was hoping. It’s been months since I’ve posted, for which I apologise.

If you follow @devbytes on Twitter, hopefully you’ve been enjoying the links which I’ve been posting, at least they have been a little more frequent than the posts on here!

I will be attending a masterclass on Creative JavaScript and HTML5 in Brighton in February hosted by @seb_ly after which I am hoping to play a lost with the canvas tag and other JavaScriptery, so I suspect that this blog will be turning into a bit of a JS resource with the odd server-side nugget thrown in for good measure; I’m beginning to see the server side as a means to and end and the front-end as very exciting.

Hope to see you here this year, and hope to post more snippets to keep you coming back.

Fingers crossed!

If you’ve added some custom post types or taxonomies and you get 404 pages when trying to get to your new pages, you might need to remind WordPress that it needs to update its rules for handling URLs. Luckily, you can do this in one easy step with flush_rewrite_rules().

Just make sure it’s after your custom post type definitions and everything will sort itself out.

Sometimes you don’t want to create a named function in JavaScript just so that you can call it with setTimeout. And as Doug Crockford is always saying, eval is an evil thing.

To get anonymous functions to work with setTimeout or setInterval, you can use an the arguments object to call the anonymous function again.

(function () {
	// if you have a halting condition, add it here, otherwise run forever
	if (!some_halting_condition || run_forever)
	{
		// function code to go here as normal
		setTimeout(arguments.callee, 1000);
	}
})();

It turns out that this is an amazingly useful pattern. Say you want a function to run every one second, but the function’s running time is actually two seconds. That’s not cool – so by using this pattern, the function will wait for a second after it has finished running, then call itself again.

jQuery uses a very similar pattern for (among other things, I’m sure) checking to see when the DOM has loaded in Internet Explorer by checking to see if the document body is scrollable.

Just a quick copy-paste of a custom taxonomy and post type for my site coasternerd. Currently, the site is built using categories creatively, but I thought it would be a nice exercise to rewrite it using the new features in WordPress 3.

It actually turns out that using these is much, much quicker than hacking around how categories are used to build various page types.

Won’t explain this today, but I wanted to make a note of it so that I can look back for example usage in the future.

/* to go inside functions.php
 *
 * Note: This will only work in WP3+!
 */
add_action ('init', 'register_custom_types');
 
function register_custom_types ()
{
	register_post_type ('rollercoaster',
		array (
			'label' => __('Roller coasters'),
			'singular_label' => __('Roller coaster'),
			'labels' => array (
				'not_found' => 'No coasters have been built yet!',
				'add_new' => 'Build a coaster!',
				'add_new_item' => 'Build a coaster!',
				'edit_item' => 'Modify a coaster',
				'new_item' => 'Build a coaster!',
				'search_items' => 'Find a coaster'
				),
			'description' => 'List of roller coasters',
			'public' => true,
			'menu_position' => 4,
			'supports' => array ('title', 'thumbnail', 'page-attributes', 'editor'),
			'taxonomies' => array ('themepark'),
			'publicly_queryable'=>true,
			'rewrite'=>array("slug"=>"rollercoaster")
	)); 
 
 
	register_taxonomy ('themepark', 'rollercoaster', array (
		'label' => 'Theme parks',
		'labels' => array (
			'singular_name' => 'Theme park',
			'search_items' => 'Find parks',
			'popular_items' => 'Parks with most coasters',
			'add_new_item' => 'Build a new park!',
			'add_new' => 'Build a new park!',
			'all_items' => 'All theme parks',
			'edit_item' => 'Edit a park'),
		'hierarchical' => false,
		'publicly_queryable'=>true,
		'public' => true,
		'query_var' => 'themepark',
		'rewrite'=>array('slug'=>'themepark')
	));
}

I noticed a very cool feature in WordPress today which lets you add thumbnail images to posts and pages. I used to do this with a custom field, but this makes it much, much easier.

Turn it on

Add this line to your theme’s functions.php

add_theme_support( 'post-thumbnails' );

Using it

When you write/edit a post, you’ll see a new box alongside Categories, Post Tags etc. From here, you can upload a thumbnail or choose one from the Media Library as you would for adding an image to a post.

Then inside your post templates, add this to display the thumbnail

the_post_thumbnail();

When I wanted a random number (more specifically integer), I used to do something like this (written in JavaScript):

1
2

var highest = 3,
      random = Math.round ( Math.random () * (highest-1) + 1);

Sounds good, right?

Wrong. Let’s try to make a random number between 1 and 3. It turns out that by using round, number 2 has a 50% chance of turning up with 1 and 3 having only a 25% chance.

1 can only be chosen if (Math.random * 2) + 1 returns something between 1 and 1.49; 2 will be chosen if the sum returns a number between 1.5 and 2.49; and 3 will be chosen if the returned number is between 2.5 and 3. You can see that the range for 2 is twice as big as 1 and 3.

The solution is to use Math.floor instead. This evens out the bias totally since 1 will be selected for numbers between 1 and 1.99, 2 will be returned for numbers between 2 and 2.99 and 3 will be chosen for values between 3 and 3.99. You can see that the interval between each of these ranges is now the same — so each number has the same probability of being chosen.

1
2

var highest = 3,
      random = Math.floor ( Math.random () * highest + 1);

Hint: ceil works just as well

A lot of things on Linux seem pretty complicated, but a lot turn out to be pretty simple. To change the timezone:

1
2

mv /etc/localtime /etc/localtime.default # just in case you need to restore it
ln -sf /usr/share/zoneinfo/Europe/London /etc/localtime #obviously replacing Europe/London with your time zone

Note: this was written for CentOS 5 – your system might vary

There are two parts to SSH keys – the public key and the private key. The public key is the one which you put onto the remote server, and the private key is the one you keep on your local machine. When you log in, some clever maths works on both to let you in.

On your local machine

ssh-keygen

It will ask you a couple of questions – just press enter to each one.

After it’s finished, it will have created two new files, ~/.ssh/id_rsa and ~/.ssh/id_rsa.pub. The first is your private key – this is only for you and should stay on your local machine. The second is your public key – this is the one which needs to go onto your remote server.

scp ~/.ssh/id_rsa.pub username@hostname.com:~

On the remote machine

Log into the remote machine then type these commands

cd ~
mv id_rsa.pub .ssh
cd .ssh
cat >> authorized_keys < id_rsa.pub
rm id_rsa.pub

Now log out then log in again – you shouldn’t need to type the password this time. Magic.

Did you know that you can get an embedded YouTube clip to start at the time you want it to start? Great for missing the fluff at the beginning of a clip! On another of my sites, coasternerd.com, that was exactly the problem I was trying to solve. At the beginning of a lot of videos, there is a lot of waffle, wouldn’t it be great if you could start the video after that? Well, you can!

Add the code &start=ss (where ss is replaced with the number of seconds you want to skip) to the <embed src="..."></embed> part of the YouTube code and you’ll cut the crap.

Code from YouTube

1
2
3
4
5
6

<object width="640" height="385">
   <param name="movie" value="http://www.youtube.com/v/0WpNSImh6Z8&hl=en_US&fs=1&"></param>
   <param name="allowFullScreen" value="true"></param>
   <param name="allowscriptaccess" value="always"></param>
   <embed src="http://www.youtube.com/v/0WpNSImh6Z8&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed>
</object>

Modified code

1
2
3
4
5
6

<object width="640" height="385">
   <param name="movie" value="http://www.youtube.com/v/0WpNSImh6Z8&hl=en_US&fs=1&"></param>
   <param name="allowFullScreen" value="true"></param>
   <param name="allowscriptaccess" value="always"></param>
   <embed src="http://www.youtube.com/v/0WpNSImh6Z8&hl=en_US&fs=1&start=27" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed>
</object>

Notice the &start=27 on line 5.

Result

I’ve wanted to play around with server-side JavaScript for a while now but never really been sure about how to go about it. Today, I took the dive.

First, I downloaded and installed node.js

1
2
3
4
5

wget http://nodejs.org/dist/node-v0.1.33.tar.gz
tar -xzvf node-v0.1.33.tar.gz && cd node-v0.1.33
./configure
make
make install

Next up is creating the classic Hello World first time app.

1
2
3
4
5
6
7
8
9
10

var sys = require("sys"),
    http = require("http");
 
http.createServer(function(request, response) {
    response.sendHeader(200, {"Content-Type": "text/html"});
    response.write("Hello World!");
    response.close();
}).listen(8080);
 
sys.puts("Server running at http://localhost:8080/");

Then start the server:

1

node helloworld.js

Go to http://localhost:8080/ and voila!

As a bonus, I’ve managed to get apache to route requests through to it (not sure if this is the best way to go about doing it…) Also remember that you need to start the JavaScript server first!

1
2
3
4
5

<VirtualHost *:80>
        ServerName js.clintonmontague.co.uk
        RewriteEngine On 
        RewriteRule ^/(.*)$ http://127.0.0.1:8080%{REQUEST_URI} [P,QSA,L]
</VirtualHost>

Now just to learn and write a decent JavaScript app!