Converting Vimeo and YouTube embedded HTML to XHTML

Handy if, like me, you can't bear to put a site live without that nice green tick in the Firefox statusbar on every page!

Convert Vimeo embed code to XHTML (instructions)

Convert YouTube embed code to XHTML (generator)

Delay before action in jQuery

(pk)blog highlights a very easy way to simulate a delay before an action in jQuery.

Because setTimeout doesn't work in jQuery (at least not without some messing around) and there isn't a built-in delay() function (shame), the simplest method is to create the illusion of a delay by calling an action that doesn't have any visible effect.

For example, if you want a confirmation message to fade out after a certain number of seconds, you could use the following jQuery:

$('#message').fadeTo(4000, 1).fadeOut(2000);

The fadeTo method has no visible effect on the message box because its visibility is already 100%. However, the browser will still wait, giving the effect of delaying the fadeOut action by 4 seconds.

A neat little trick.

Ajax Contact Form

Tutorial Blog have a nice tutorial on how to create a simple Ajax contact form using PHP and jQuery.

jQuery definitely makes Ajax a lot simpler to use than 'raw' javascript.

typeface.js

One worth watching - typeface.js is a work in progress but aims to allow you to embed fonts directly into your website, removing the need for image/Flash text replacement.

Upcoming new WYSIWYG editor from 37signals

37signals have announced that they are working on a new open source javascript WYSIWYG editor. I'm going to be keeping a close eye on this as I'm not a big fan of existing WYSIWYG editors (TinyMCE et al), and Textile is just not user-friendly enough for the majority of people, simple though it is.

My biggest bugbears with existing WYSIWYG solutions is they're a pain to install and configure and they generate messy markup. If 37signals can overcome these issues I think they'll be onto a winner.

Template inheritance in Django

I've just discovered a killer feature of Django... template inheritance, using the {% block %} and {% extends %} tags.

It's probably there in other templating systems and frameworks so I'm probably coming late to the party but for someone who is more than a bit obsessive about nice clean structures in website development, avoidance of repetition in code, etc. it really appeals to me, more than all the other nifty things I've seen that Django can do.

To quote from the Django documentation:

One common way of using inheritance is the following three-level approach:

• Create a base.html template that holds the main look-and-feel of your site.
• Create a base_SECTIONNAME.html template for each "section" of your site. For example, base_news.html, base_sports.html. These templates all extend base.html and include section-specific styles/design.
• Create individual templates for each type of page, such as a news article or blog entry. These templates extend the appropriate section template.

Note to self: Must learn AJAX!

I know its embarrassing to admit, being a web developer and all, but while I've skim-read through a number of AJAX tutorials in the past, I've never really got round to properly learning it - by which I mean actually writing some code 'in anger'. I've always been able to get away without it or relied on colleagues to look after those particular bits of a project.

So Smashing Magazine's list of 50 AJAX tutorials looks like a good place to dive in when I next have a spare moment.

List comprehensions in Python

Just came across this concept in the Django documentation, but without any background in Python or maths it wasn't immediately obvious what it was.

The basic syntax is:

L = [expression for variable in sequence]

L is the name of a the resulting variable containing the list of items generated by the loop
expression is the python expression that will be evaluated on each iteration of the for loop, using the given variable
variable refers to each item in the list to pass to the expression as we loop through it
sequence is the set of items we're looping through

An example:

toppings = ('ham', 'pineapple', 'beef', 'chicken')
x = ', '.join([toppings.loop_count() for t in toppings])

Totally pointless operation I know, as it simply copies the list in the 'toppings' variable to a new variable called 'x', but it illustrates the point! In reality it would make more sense if the initial list was a queryset object from a database that we want to loop through and list the values.

The for...in loop syntax already made sense to me, but I'd not come across this shorter way of writing it before. Apparently it's also the most efficient in terms of system resources.

Font sizes in CSS

Just now I wanted to adjust the font sizes in Django's built-in admin interface so I had a look at the CSS. In the global stylesheet, as expected, there's a font-size defined on the body tag. First thing to note - it's a fixed pixel size rather than a relative size which isn't ideal (for accessibility it's better to make this relative to the user's system/browser default). Anyway, when I changed it, none of the fonts actually changed size, because there are seperate (fixed-pixel) font sizes defined for each type of element.

This is a common error and one that winds me up. I just want to change the font size in one place, not search through a load of files looking for all the font-size properties. And when they've all been defined as fixed-pixel sizes it's worse because then I've got to try to work out by how many pixels each size should be adjusted to keep everything in proportion.

If all the font-sizes were set relative to the body font-size (using % or em values), then I could simply adjust the body font-size and everything else would resize accordingly - a 10 second job instead of 10 minutes!

Lists, tuples, dictionaries etc. in Python

I'm currently learning Django and found a useful reference explaining the different types of 'collection' structures in Python.

In brief:

List - contained in square brackets - like a PHP array - contents are editable.

Tuple - contained in round brackets - like a PHP array but contents are fixed (can't be edited). If only one item is specified, it must be followed by a comma.

Dictionary - contained in curly brackets - like an associative array in PHP

String - contained in quotes - can refer to individual characters by their position in the string like in a list/tuple

Iterator - a list temporarily created from an object to allow looping through each value using 'for ... in ...' syntax

With all of these, when referring to a specific item within the collection, you use square brackets.