A part of CSS3 are a fantastic new range of selectors, these include the ;nth-child sudo class. These allow you to style the nth child of a parent element. Therefore you can easily style the odd:
tr:nth-child(odd)
or even elements:
tr:nth-child(even)
For example this is my table where I have styled each even row:
Link prefetching is a very little known HTML 5 tag which is currently only supported by Firefox. It utilizes browser idle time to download documents that the user might visit in the near future.
For example:
<link rel="prefetch" href="page2.html">
Once the user has loaded up that page the next page (page2.html) will being loading significantly decreasing the time it takes to visit the next page.
It’s a great idea really, and because it’s gracefully degregating it means that users in FF will get the benefit while everyone else wouldn’t see the difference. Refer to the Mozilla FAQ for more information.
The TweetMeme button is one of the most successful social media buttons, it is served to millions of websites around the web. One of the more unusual points about the TweetMeme button is it’s height, 61px. This height has now been adopted by facebook and digg.
Why 61px?
“Cause everyone knows that 61 pixels is such a normal dimension in the world of social networking – I mean everything’s 61 pixels, right? Cause it’s…a prime number!”
I would like to say that it was due to lots of research and investigation, but it was more of a accident. The button was originally designed to be 60px high but in the quest to fit an extra digit onto the button the font size was decreased and the button height was increased to 61px.
The Standard
The TweetMeme button had a massive adoption rate, and was installed on millions of sites across the web therefore it became the one to beat! Large sites have now put pressure on the other social media sites to produce their buttons to the new standard. Therefore the 61px standard (if you have a better name let me know) is now the default for all social media buttons on the internet.
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.
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.
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();
});
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.
