Since form submission buttons and hyperlinks do different things, it makes sense that browsers display them differently (by default).

Default appearance of buttons and hyperlinks in Safari on Mac OS X

Web applications, however, sometimes blur the line between doing things and going places; visually distinguishing links from buttons, therefore, is not always appropriate. As Stephen Anderson explains in his article In Defense of Eye Candy on A List Apart, an element's appearance should suggest appropriate modes of interaction.

In WordPress's Publish pane "Save Draft" is a submit input, "Preview" is a link; both are styled as buttons

Styling links to look like buttons

Beware! There's quite a bit involved in styling form elements – be sure that there's a compelling reason to override default browser styling before doing so.

An unstyled submit input and an unstyled hyperlink are displayed below. One must declare a number of rules in order to have the two elements rendered in the same way.

Unstyled submit input and hyperlink

border: 1px solid #850; color: #850;

background: #fc6; text-decoration: none;

padding: 0.25em 0.5em; font: bold 12px/15px "Lucida Grande", "Lucida Sans Unicode", sans-serif;

Progressive enhancement

The submit input and the link now look the same, and somewhat button-like. Even antiquated browsers such as Internet Explorer 6 understand the rules defined thus far. The next step is to make the elements more appealing and more button-like in modern browsers.

-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;

Rounded corners

background: -webkit-gradient(linear, left top, left bottom, from(#fc6), to(#fc6), color-stop(0.1, #fff), color-stop(0.2, #fc6), color-stop(0.5, #fc6), color-stop(0.5, #fa2));
background: -moz-linear-gradient(-90deg, #fc6 5%, #fff 15%, #fc6 25%, #fc6 50%, #fa2 50%, #fc6);

Linear gradient with colour stops creates a sense of depth

Styling different states

It is important to consider the different states a button may have. Apple's Aqua GUI provides three different effects, any or all of which may be applied to a button: a pulsating blue background indicates that return activates the button; a button with an outer glow can be activated via the space bar; and a static blue background is used for a button's "active" state (which occurs while the button is being clicked).

In Aqua, return activates the blue button; space bar activates the button with the outer glow

On the web, submit inputs and hyperlinks have several possible states, the most important of which are hover, focus, and active. When creating style rules for each of these states it's important to bear in mind that more than one state may apply at one time.

Here the OK button exhibits both a pulsating blue background and an outer glow

Hover

border-color: #740;
background: #fb4;
background: -webkit-gradient(linear, left top, left bottom, from(#fb4), to(#fb4), color-stop(0.1, #fea), color-stop(0.2, #fb4), color-stop(0.5, #fb4), color-stop(0.5, #f90));
background: -moz-linear-gradient(-90deg, #fb4 5%, #fea 15%, #fb4 25%, #fb4 50%, #f90 50%, #fb4);
color: #740;
cursor: pointer;

Hover state (right) alongside default state

Focus

-webkit-box-shadow: #740 0 1px 0.75em;
-moz-box-shadow: #740 0 1px 0.75em;
color: #740;
outline: none;

Focus state (right) alongside default state

The focus and hover states play nicely together

Active

border-color: #630;
background: #f90;
background: -webkit-gradient(linear, left top, left bottom, from(#f90), to(#f90), color-stop(0.1, #fd8), color-stop(0.3, #fb4), color-stop(0.5, #fb4), color-stop(0.5, #f90));
background: -moz-linear-gradient(-90deg, #f90 5%, #fd8 15%, #fb4 35%, #fb4 50%, #f90 50%, #f90);
color: #630;

Active state (right) alongside default state

Demo

Interact with the finished styled button on the Hyperlinks as buttons demo page.

from django.db import models

class Musician(models.Model):
	first_name = models.CharField()
	last_name  = models.CharField()
	instrument = models.CharField()

One option is to use __dict__.keys():

>>> m = Musician(first_name='Norah', last_name='Jones', instrument='piano')
>>> print m.__dict__.keys()
>>> ['last_name', 'instrument', 'first_name', 'id']

Another options is to use _meta.fields:

>>> print [f.name for f in m._meta.fields]
>>> ['id', 'first_name', 'last_name', 'instrument']

This approach also works on models directly:

>>> print [f.name for f in Musician._meta.fields]
>>> ['id', 'first_name', 'last_name', 'instrument']

Advantages of using _meta.fields

• items in returned list are correctly ordered
• applicable to both models and instances
• only fields are returned

The fact that only fields are returned is extremely useful. Django appears to add its own attributes to instances in certain circumstances; using _meta.fields prevents these from interfering with one's own code.

I've created two bookmarklets to allow the current page to be loaded in an iPhone-sized window with a single click:

• Portrait (labelled "⁑")

  javascript:open(location,'iPhone:portrait','innerWidth='+(320+15)+',innerHeight='+(480+15)+',scrollbars=yes');

• Landscape (labelled "**")

  javascript:open(location,'iPhone:landscape','innerWidth='+(480+15)+',innerHeight='+(320+15)+',scrollbars=yes');

iPhone testing bookmarklets: portrait and landscape

320x480: iPhone portrait dimensions

480x320: iPhone landscape dimensions

It appears that I need to rework this site's style sheet to better present content in these smaller viewports!

Why are short URLs required? Twitter. Tweets are limited to 140 characters, and URLs often seem recklessly long in this context. Of course, Twitter could simply allow us to apply short, meaningful labels to our links as we've been doing in HTML for years. Instead, each time one includes a link in a tweet one must either:

• spend a large number of characters on the full URL; or
• use a short URL generated by a service such as bit.ly

I'm opposed to short URLs for several reasons. First, I believe that every reference to a resource should use that resource's Uniform Resource Identifier (if it has one) in its normalized form. In other words, we should not use http://www.wikipedia.org/ to refer to http://wikipedia.org/, and we should certainly not use http://bit.ly/8RTk. Having multiple URLs for a resource is a maintenance nightmare (unless one is willing to accept URLs being temporal).

Secondly, I have a simple rule: meaningful > meaningless. Meaningful markup is wonderful, and meaningful URLs offer similar benefits (to both people and search engines).

Finally — and this point relates to URL shortening services rather than to short URLs themselves — there's no guarantee that sites which currently provide a service will continue to do so indefinitely.

Enter John Gruber

I noticed one day that Daring Fireball now has its own shorturls, using the incredibly cool domain name ✪df.ws. This got me thinking that perhaps I should procure a short domain name and do something similar. Well, last week I did.

With dċd.ws safely registered in my name I began looking for an open source URL shortener to run on that domain. I then struck upon a simple, elegant solution which took all of ten minutes to implement.

RewriteEngine On
RewriteRule ^(.*)$ http://davidchambersdesign.com/$1 [R=301,L]

The code above forms the entirety of the .htaccess file on the dċd.ws server. All it does is redirect every request to the corresponding davidchambersdesign.com URL. The key word being every. As a result, existing pages on this site gained shorter (though not necessarily short) URLs automatically, and new pages gain a short URL the instant they are published. No maintenance, no fuss. Nice!

So, for example, http://dċd.ws/twitter/ → http://davidchambersdesign.com/twitter/ (a 17 character saving).

If you're interested in acquiring your own short domain name, I suggest trying .ws as it's one of the few top level domains to allow virtually any Unicode character in its domain names. As a result, there are plenty of short .ws domain names available. I don't suggest this approach for normal use, however, as browsers will display something like http://xn--dd-7la.ws/ in their address bars.

var fruits = ['orange', 'lime'];
var colours = fruits; // naïve attempt to duplicate array
colours.append('yellow');

One might be surprised to learn that fruits now contains not just "orange" and "lime" but also "yellow". Oops! Here's how it went wrong:

var fruits = ['orange', 'lime']; // fruits points to array containing "orange" and "lime"
var colours = fruits; // colours now points to that same array!

How, then, does one create a copy of the original array? Slice!

var colours = fruits.slice();

The problem I encountered a few minutes ago fell squarely in the latter category. I simply wanted to know how to access the MySQL shell from the OS X Terminal. I expected my Google search for MySQL console Terminal "OS X" to return several useful results, but this was not the case.

I managed to find the solution in a thread with subject error 1044 and 1045:

mysql -u root -p mysql

Contents

• Behaviour
• HTML5 placeholder text
• Markup
• Styling
• Placeholder class
• Usage

Behaviour

• Placeholder text should be inserted into input field upon page load.
• Placeholder text should be targetable via CSS.
• Clicking or tabbing into input field should remove placeholder text.
• Placeholder text should be reinserted if input field is empty when it loses focus.

HTML5 placeholder text

HTML5 allows placeholder text to be specified in the markup through the placeholder attribute. In supporting browsers (currently Chrome and Safari) this produces the behaviour described above with no reliance on JavaScript.

Markup

<input type="search" id="s" name="s" placeholder="search..." />

Styling

input.placeholder { color: #a9a9a9 !important; }

I decided to use #a9a9a9 as Safari uses this colour for placeholder text.

Placeholder class

var Placeholder = Class.create({
	initialize: function (element) {
		this.element = element;
		this.placeholder = element.readAttribute('placeholder');
		this.blur();
		Event.observe(this.element, 'focus', this.focus.bindAsEventListener(this));
		Event.observe(this.element, 'blur', this.blur.bindAsEventListener(this));
	},
	focus: function () {
		if (this.element.hasClassName('placeholder'))
			this.element.clear().removeClassName('placeholder');
	},
	blur: function () {
		if (this.element.value == '')
			this.element.addClassName('placeholder').value = this.placeholder;
	},
});

The Placeholder class requires Prototype.

Usage

To create a new instance of the Placeholder class, simply pass the constructor a Prototype extended element:

new Placeholder($('s'));

Ensure that the DOM is ready by wrapping everything in Prototype's dom:loaded event listener. This also avoids polluting the global namespace.

document.observe('dom:loaded', function () {
	var Placeholder = Class.create({
		...
	});
	$$('#s', '#contactform #name', '#contactform #email').each(function (input) {
		new Placeholder(input);
	});
});

This site's search field shows the code in action.

• prototype+scriptaculous.js (≈260.6 KB)
• prototype+scriptaculous.min.js (≈154.6 KB)
• prototype+scriptaculous.min.js.gz (≈43.6 KB)

I suggest including the Prototype and script.aculo.us version numbers in the src:

<script type="text/javascript" src="/scripts/prototype+scriptaculous.min.js?p=1.6.1&amp;s=1.8.3"></script>

This prevents caching issues that might otherwise arise upon updating to a newer version of prototype+scriptaculous (I'll update the three files — and this post — each time a new version of Prototype is released).

One of the first HTML5 elements I've introduced is the time element which, through its datetime attribute, provides a machine-readable version of dates and times.

<time datetime="2009-11-01T16:41:53+13:00">1 November 2009</time>

I wrote a function to generate the machine-readable dates and times for blog comments.

/**
 * echoes comment's date and time in format 2009-11-01T03:41:53+13:00
 */
function comment_datetime()
{
	$comment = get_comment($comment);
	$local = strtotime($comment->comment_date);
	$gmt = strtotime($comment->comment_date_gmt);
	$seconds = abs($local - $gmt);
	$hours = (int) ($seconds / 3600);
	$minutes = (int) (($seconds - $hours * 3600) / 60);
	$output = get_comment_time('Y-m-d\TH:i:s');

	if ($local == $gmt)
		$output .= 'Z';
	else
		$output .= ($local > $gmt ? '+' : '-')
		        . str_pad($hours, 2, '0', STR_PAD_LEFT) . ':'
		        . str_pad($minutes, 2, '0', STR_PAD_LEFT);

	echo $output;
}

While looping through comments in your WordPress theme, call the above function to print a valid datetime string.

<time datetime="<?php comment_datetime(); ?>">

As I began writing this post, I had just completed a redesign of this site. The new design removed unnecessary distractions to allow readers to focus on the clearly presented content. I moved site navigation from the sidebar (which I axed altogether) to the header. I decided to fix the header in place so that the navigation and search form would always be visible. This required very little effort, but overcoming the problem posed by fixed-position headers took a great deal of trial and error. To save others from going through this tortuous process I'll describe my various approaches, and list the benefits and drawbacks of each.

Requirements

• An additional vertical scrollbar must not be introduced.
• Appending #example to a URL should result in the element whose id is "example" being displayed at the top of the content area (not hidden behind the header).
• Additional markup may be used only if the requirements above cannot be met without extra markup.

The CSS for the header initially looked like this:

#header
{
	position: fixed;
	top: 0;
	left: 0;
	height: 160px;
}

Approach 1: positive top padding + negative bottom margins

Here's the CSS:

h1, h2, h3, h4, h5, h6, p
{
	padding-top: 160px;
	margin-bottom: -160px;
}

This approach adds top padding (equal to the height of the header) to each of the block-level elements in the content area. This ensures that elements are in the correct position when jumped to using #id. An equal and opposite bottom margin is also applied to prevent the padding from adding unwanted white space between elements.

• No additional markup is required.
• Straightforward CSS.
• The CSS selector needs to contain all block-level elements that may have ids in some instances. This is likely to include elements such as divs and forms. Since it is hard to foresee all the situations in which a link may direct a user to a uniquely identified element, it is difficult to ensure that this approach will work in all cases.
• The negative bottom margin causes each block-level element to overlap the preceding element, making "overlapped" links unclickable!

Approach 2: preceding divs

Again, the CSS:

div.id
{
	position: relative;
	top: -160px;
}

This approach introduces meaningless markup. Where previously we may have had something like this:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc faucibus volutpat risus nec mollis. Integer dapibus dictum ultrices. Aenean vel lectus odio. Nam a mi ligula. Nam in dolor quis metus pretium imperdiet sit amet sed elit.</p>
<h3 id="example">Example</h3>
<p>Suspendisse potenti. Proin convallis lacinia nibh, nec auctor ligula mattis consectetur. Mauris vel elit sit amet nibh volutpat varius id vel sem. Pellentesque id purus ligula. Vivamus vel nulla vel justo tempor ultricies.</p>

We now have the following:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc faucibus volutpat risus nec mollis. Integer dapibus dictum ultrices. Aenean vel lectus odio. Nam a mi ligula. Nam in dolor quis metus pretium imperdiet sit amet sed elit.</p>
<div id="example" class="id"></div>
<h3>Example</h3>
<p>Suspendisse potenti. Proin convallis lacinia nibh, nec auctor ligula mattis consectetur. Mauris vel elit sit amet nibh volutpat varius id vel sem. Pellentesque id purus ligula. Vivamus vel nulla vel justo tempor ultricies.</p>

With this approach, each uniquely identified block-level element within the content area gives its id to a div which appears immediately before it in the html. Each of these divs is offset by the height of the header, ensuring that the element of interest is not obscured by the header.

• Straightforward CSS.
• Links are always clickable!
• Additional markup is required, necessitating that existing content be updated (or JavaScript used to insert the additional elements dynamically).
• Not only is this extra markup meaningless, but it actually removes ids from the elements to which they were additionally assigned. Any existing CSS selectors that refer to one of these elements will need to be updated. (For example, h3#comments would need to change to div#comments + h3.

This approach does not have any fatal flaws, but it may require template files, static html files, style sheets, and database records to be updated. Additionally, it is inelegant. In other words, it is as option, but not a good one.

Approach 3: JavaScript trickery

The previous approach got the job done, but introduced meaningless elements. This task is best performed with JavaScript.

// accommodate fixed-position header
document.observe('dom:loaded', function () {
	$$('h2[id]', 'h3[id]', 'h4[id]', 'h5[id]', 'h6[id]').each(function (e) {
		var div = new Element('div', { id: e.id });
		e.writeAttribute({ id: null });
		e.addClassName('unidentified');
		e.insert({ 'top': div });
	})
});

The above snippet locates all the h2, h3, h4, h5, and h6 elements on the page that have an id attribute. It then loops through this collection of elements and inserts an empty div element into each one. This div "steals" its parent's id.

CSS can be used to position these empty divs in such a way that headings are visible when jumped to:

h2.unidentified div, h3.unidentified div
{
	float: left;
	margin: -160px 0 0 0;
}

• No additional markup is required.
• Straightforward CSS.
• Links are always clickable.
• JavaScript (and in this case Prototype) required.
• Association between an id and the element it identifies is broken.

Summary

I have implemented the JavaScript approach, and it works nicely. I am still hopeful that there exists a simpler and/or more universal solution to the problem posed by fixed-position headers. Please let me know if you have any ideas or suggestions.