I thought I’d share some of my CSS habits/top tips, some of my habits may be more controversial than others, but it’s always good to share.

(more…)

Of all the CSS3 selectors the structural pseudo-classes have to be my favourite. In particular I love :last-child selector, the :last-child CSS selector is incredibly powerful especially when positioning elements in a row, I am currently finding it incredibly useful when doing menus. Instead of providing a last class on the very last element in the row, you can now use pure CSS to achieve the same effect.

CSS 2.1

/*Each Element*
.image { margin-right: 5px; height: 20px; width: 20px; float:left; background-color: red; }
/* remove the margin on the last element so it lines up
.image.last { margin-right: 0px; }

CSS 3

/* parent of the image element */
.parent div:last-child { margin-right: 0px; }

The Downside

Unfortunately the bad aspect of this selector is that it does not fail gracefully. Meaning that a user in a none CSS3 compliant browser, (IE), it would fail horribly, this means that everything will be out of line.

Example

If you look at this in anything but a browser which supports CSS3 the last element will be on the next line.

More Resources

1. W3C Selectors Level 3
2. CSS3 Compatibility Table
3. MSDN Compatibility Table (tells you what works in IE8)
4. Take Your Design To The Next Level With CSS3

Twitter is quickly gathering pace and is fast becoming one of the most popular social networks. I have been using Twitter for nearly 2 years, mostly through their use of 3rd part applications like TweetDeck or Tweetie. I thought to myself why do I, and many other ‘power’ Twitter users not use the web interface? So here are some of my suggestions on how I would improve the Twitter UI.

Twitter home page design at the time of writing the article, including some reference points.

I will be focusing on a number of parts of the home page, the main ‘tweet box’, the implementation of the ‘lists’ area, how the data is presented and the integration with search. This is not meant as a critique of Twitter, but more as some helpful suggestions on usability.

Tweet Box

For lack of a better word, the tweebox is the textarea located at the top of the twitter homepage. I would really love to see it improved in a number of really simple ways:

• The ability to press enter to submit a tweet. Tweets aren’t multi lined and there is nothing else to do so why not make enter submit the form instead of press the button. Twitter has this problem in a number of other area’s as well, OAuth screen!
• Autocomplete the usernames in the textbox.
• Auto shortening. Twitter has already partly done this for really long links, but it would be nice if you could have the option to do it on the shorter links as well.

Page improvements

The live update of tweets, you know the little yellow box which tells you how many are waiting, is a fantastic addition. But I think they are missing the key points, why wouldn’t you show the tweet? I just find it really annoying.

The page is currently geared up to just tweeting. Users probably use the Twitter interface more to manage their tweets and accounts, maybe the front page should be geared in that direction.

Other

The lists nor retweets seem to be fully integrated into the UI they just appear to be something strapped onto the edge. It would be great if you could, for example, have tabs across your timeline which listed your most popular lists.

It would be great to hear your thoughts on how you would make twitter better, you never know maybe Twitter is reading this.

Better Twitter

Hopefully my recently released Firefox plugin Better Twitter will solve most of these issues.

Halloween is just around the corner and what better to jazz your blog up than with some Halloween related JavaScript. This tutorial will focus on making images appear and disappear on the background of your blog.

For this example I will be using a ghost which will appear every two seconds in a random location and disappear again. You can preview what this will look like by clicking the button below (only viewable in a web browser).

You can download the source files for this tutorial below as well as the ghost AI file.

Source Files

For this tutorial we are going to be using Script.aculo.us effects library with the Prototype core framework.

var Ghost = Class.create({
	initialize: function() {
	}
});

First of all we need to create our Class, which is called Ghost. Inside the class Ghost we have added our initialize function. The initialize function will be called when we create a new instance of the class. Therefore we need to put in all our setup code:

 // create the element
this.ghost = new Element('div', {'class' : 'ghost'});
// hide the element
this.ghost.hide();
// add the element to the body
$(document.body).insert({top: this.ghost});
// get the size of the document
this.size = document.viewport.getDimensions();
// set up the timer
new PeriodicalExecuter(this.show.bindAsEventListener(this), 2);

In this segment we create our hidden ghost element. We then store the size of the document, and load up our periodical executer to call this.show. The second parameter in the Periodical Executer is the time between calls, we are calling the show function once every 2 seconds.

show: function() {
	// randomly set where the ghost is going
	var x = Math.floor(Math.random()*(this.size['width']-200));
	var y = Math.floor(Math.random()*(this.size['height']-200));
	// set the style
	this.ghost.setStyle({
		'left': x + 'px',
		'top': y + 'px'
	});

	// show the object
	this.ghost.appear({
		afterFinish: function() {
			this.ghost.fade();
		}.bind(this)
	});
}

The show function needs to be added to the Ghost class. The show function first calculates where we want our ghost to appear, so we work out random x and y co-ordinates using the document sizes we gathered in our initialize function. We then position the element and call the Script.aculo.us appear effect which will slowly fade in the image. After the appear effect has finish we want to hide the ghost so we call fade.

Ok, now we have all the code complete we need to call the class. We can do this in a number of ways, you could bind the event to a button:

BOO

Or you can bind it into your document load function, which means it will start when the page loads:

document.observe("dom:loaded", function() {
	new Ghost();
});

CSS

The CSS is a really simple one line.

.ghost { width: 100px; height: 100px; position: absolute; background: url('yourimage.png') no-repeat; }

This tutorial is just a brief outline with what you can do with JavaScript this Halloween. If you have any other ideas you would like me to implement, please tell me in the comments below.

We all love CSS it’s fundamental to the web. However most of us do not use the full power of CSS. A quick rummage around the W3C specification and you will see how powerful CSS can really be. I’m talking about the CSS selector, sure we all use the basic selectors, but what about the more complicated ones.

Well here’s my guide to the most useful not very used CSS selectors (as well as what they are currently supported in).

CSS2

Pattern	Meaning	IE6	IE7	FF	SF	OP
E > F	Matches any F element that is a child of an element E.
E:first-child	Matches element E when E is the first child of its parent.
E:link E:visited	Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).
E:active E:hover E:focus	Matches E during certain user actions.
E + F	Matches any F element immediately preceded by an element E.
E[foo]	Matches any E element with the “foo” attribute set (whatever the value).
E[foo="warning"]	Matches any E element whose “foo” attribute value is exactly equal to “warning”.
E[foo~="warning"]	Matches any E element whose “foo” attribute value is a list of space-separated values, one of which is exactly equal to “warning”.

CSS3

Pattern	Meaning	IE6	IE7	FF	SF	OP
E ~ F	Matches any F element preceded by an element E.
E:empty	Matches element E where E has no children, including text nodes

If you need a detailed walkthrough on how these selectors work, please refer to the W3C Specification on CSS3 Selectors (which includes all the CSS2 selectors).

A Couple of Examples

I couldn’t just give all these CSS selectors without giving you some great examples of how they can be used.

E:first-child/E:last-child – You have a ul list of elements which you float horizontally. With first child and last child you can easily set the margins for the first and last child different from the remaining items:

ul { list-style: none; margin: 0px; padding: 0px; }
ul li { float: left; margin: 0px 10px; }
ul li:first-child { margin: 0px 10px 0px 0px; }
ul li:last-child { margin: 0px 0px 0px 10px; }

E:empty – You may have a situation where you have an empty paragraph. Paragraphs will always have a margin top and a margin bottom, which could look unsightly. So lets remove it.

p:empty { display:none; }

What’s your favourite selector? Do you care that they are not always supported?

I’ve just had this crazy idea, what would happen if all the <div> tags in the world were converted into <d> tags. Image how much space it would save, well you don’t need to imagine I have broken out my calculator and worked it all out.

(more…)

There is a very little used and unknown method which allows you to utilise JavaScript within a CSS file. The CSS Expression property allows you to assign a JavaScript expression to a CSS property. For example, this allows you to set the position of an element according to the browser size.

[code="css"]
width:expression(document.body.clientWidth > 950 ? "950px": "100%" );
[/code]

Do not use CSS Expression, they are unreliable, slow and are only supported in IE!

CSS Expression suddenly came to me as a solution for the currently much debated feature (here and here) of variables in CSS3. This could theoretically be currently achieved through the use of CSS Expressions.

[code="css"]
function blue() {
return 'blue';
}

body { background: expression(blue()); }
[/code]

CSS Expressions are horrible and unsupported, so please don’t use them in development. They do, however, highlight a interesting and little known feature of CSS.