The initial application was written in about 2 hours entirely in JavaScript, it later went through a number of huge revisions especially over the Easter weekend. It gained quite a lot of features, and then lost them. I wrote an entire OAuth module in JavaScript, then realised that you can’t authenticate headers. The project was basically done apart from one of the most complicated features. Then my life changed, I broke up with my long term girlfriend, of 5 years, and had to move back home with my parents. Even though this didn’t dent my enthusiasm for the project it definitely affected the timescales.

How it works

TweetTabs is a very simple idea, but it takes a very long time to solve the problems it presents. The entire application is written in JavaScript, this gets around the notion of having a API limit for your twitter searches, you are now only limited by your I.P. address, which has a much higher (not declared) limit. For every tab TweetTab hits twitter to fetch the data, this is controlled by our adaptive pollrate. Put simply this means that each tab can work out the optimum time to fetch more data from twitter. We try and limit the number of times TweetTabs hits twitter in the hour, mostly so that you don’t reach your API limit (it is possible, and I did it a lot in testing), and we don’t overload twitter.

TweetTabs Screencast from Daniel Saxil-Nielsen on Vimeo.

Coverage

So now TweetTabs has been launched and has had loads of positive feedback and has been covered on loads of huge sites:

• http://www.techcrunch.com/2009/06/16/tweettabs-is-an-awesome-way-to-search-twitter/
• http://mashable.com/2009/06/16/tweettabs/

Dedications

I don’t know whether this is normally done for releasing products, but I feel it is appropriate, I would like to mention everyone who helped with the process along the way. Starting firstly with @nickhalstead, who supported me the whole way (and sorry it took so long). @nicktelford who was there to bounce ideas of and to find lots of bugs just before we were about the launch. @alexforrow for writing a really good deployment script, which merges all the files and obfuscates them. All the great people that tested it along the way: @chris_alexander, @craigyd, @amykate and @girlygeekdom (who is probably the one who answers @tweettabs questions online).

TweetTabs is built using Prototype and the JavaScript framework, and is powered by TweetMeme, and Twitter.

Related posts:

1. What’s wrong with Tweetdeck I design lots of user interfaces for varying different...
2. Building JavaScript Widgets Little pieces of JavaScript you embed onto your website...
3. New Year, New Design It has been a long time since I have touched...

Dilbert 404 Error Page

South by Sou’wester

The Mind of a Web Developer mingle²

The Brads - WiFi

Small talk with a web designer – The Man In Blue

Web Development Project Management Cartoon – The Project Management Cartoon via Andy Sowards

No related posts.

I design lots of user interfaces for varying different types of products on different platforms. So I find it very annoying when I encounter a product which is functionally brilliant but lacks an easy to use interface. I find the user interface for the popular twitter client Tweetdeck is lacking the necessary interface for it to become a brilliant application.

Loading Tweetdeck

When Tweetdeck initially loads up there are no loading symbols in any of the columns, this is also true when you create a new column or a new search. Ideally Tweetdeck would show a loading spinner to give you the idea that the program is actually doing something.

The Tweets

Each tweet is of a uniformed height which really doesn’t make use of the space available. This becomes even more apparent when you switch on the option of narrow columns. Why can’t the columns be resizable? This would allow you to have as many as you want within the viewport of your screen. One of the biggest flaws in Tweetdeck are in the tweets, links do not have a rollover! There is also no way of knowing if you have actually clicked on the link and it’s opening a webpage.

Notifications

The Tweetdeck notification system is not only annoying, it is also useless, they are trying the mimic the GROWL notification system for Mac, but without any of the benefits. The notifications contain no real information, like who tweeted what, it only contains a count. There is also no way for you to choose the location of the notification, by default it pops up in the top right of the screen. The major place, especially on windows, where important buttons are positioned. There is also no setting to adjust the time the notification would display for.

Summary

Don’t get me wrong, I love Tweetdeck, I use it everyday but i would just like to see a number of improvements so that I am able to use it everyday all day, without continually looking for a new solution for the Twitter client problem.

Do you have any problems with Tweetdeck, any little problems which you think would make a big difference? Or have you found a great replacement for Tweetdeck? Let me know in the comments below.

Related posts:

1. Building JavaScript Widgets Little pieces of JavaScript you embed onto your website...

Little pieces of JavaScript you embed onto your website are getting more popular. Every major provider of a service on the web also gives you a little widget that you can put on your blog or webpage to promote what you are doing, for example Twitter, Last FM and Digg all provide widgets which are great for you and great for the service.

I am going to talk you through the development and pitfalls associated with the design and development of widgets.

First and foremost, you need to decide what you want to show with your widget. Knowing this you can make an educated choice about which method you want to use to create a widget, there are basically two methods associated with widget development.

iframe’s

No, iframe’s aren’t dead. They are a major part of widget development. Using a iframe is the easiest way to generate a widget - you host a small file on your web site which contains the information you want to show, like the Digg button for example, and get the JavaScript on the client side to build the URL to it. In the case of Digg the client side JavaScript builds a URL based on the current posts URL.

document.write('');

To install the widget all you have to do is to point the user at your bit of JavaScript:

You can pass any variables you want through to the user at this point by simply making them JavaScript variables, and using the JavaScript to build up the iframe URL based on these variables.

If you want your widget to be able to appear multiple times on the same webpage, you need to remember to set all the variables to null at the end of your JavaScript file.

That’s it! iframe based widgets are very easy to build and to use, however they do come with their downsides. The biggest of these is that the user can’t customise the widget at all - it lives within an iframe and therefore is untouchable by CSS. That’s why certain widgets, like the twitter widget, which are made entirely on the client side in JavaScript.

Client Side

A widget that is built in JavaScript on the client side is definitely the harder option. For this you have to make the JavaScript file create all the HTML, write out a basic style to apply to the HTML and load in the data. When building this try to avoid using frameworks to build the HTML, this only creates more request for your web servers and make the widget slower to load. Instead resort to using the classical JavaScript methods for creating elements.

document.write('


');
var widget = document.getElementById('you_id');
var div = document.createElement('div');
div.innerHTML = 'Hello World';
widget.appendChild(div);

You will have to load your data in from another source, and for this I recommend extending your API to give you a JavaScript variable followed by the JSON encoded data. Here’s an example from tweetmeme.

Pitfalls

There are a lot of difficulties involved in creating widgets and here are just a few of them:

• AJAX won’t work! You cannot post information between domains.
• Don’t use a JavaScript framework - for a simple widget it’s is over kill.
• Try to keep the requests down. These widgets are coming from your servers.
• Anonymise the JavaScript, you don’t want it conflicting with other JavaScript.
• Minimize your JavaScript. This will save on bandwidth for you, and make the widget faster to load. 

Questions

If you have any questions, or want to show off any widgets you have made please comment below.

Related posts:

1. JavaScript Halloween Effects Halloween is just around the corner and what better to...
2. Designing For The iPhone Yep, we have done it again, Tweetmeme has just...

Yep, we have done it again, Tweetmeme has just landed another new feature, a mobile version specifically designed for the iPhone. How did we do it? Well it’s really easy, and just like building a normal website but with a couple of extra snippets of code.

The Design

The hardest part of building a website specifically for the iPhone is coming up with the design. The screen real estate on the iPhone is very limited so you have to start by being creative. Focus on the content, components such as sidebars, large pictures and small text should be avoided, keep in mind that buttons should be big.

If you are using photoshop i have created a template for you to easily visualise your designs, which you can download here, based on the iPhone GUI PSD, if you are not the set the canvas size of your design to 320px width and 480px height. Remember to images to a minimum and that the iPhone uses the WebKit rendering engine which supports some CSS3 tags, like rounded corners.

The Code

Lucky you are still dealing with a HTML page which uses HTML and CSS like any other webpage you may build.

<html>
<head>
    <title>My iPhone Page</title>
    <meta name="viewport" content="320; initial-scale=1.0; maximum-scale=1.0;">
    <link rel="apple-touch-icon" href="images/icon.png"/>
</head>
<body>
</body>
</html>

Notice that line 4 and 5 include some magical meta tags which you may not of seen before. Line 3 sets the width of the viewport so it matches the screen width of the iPhone the second parameter sets the scale of the page.

Line 5 is for creating webclip icons when you bookmark a site. The image should be 57px by 57px in .png format. The iPhone adds the shine and the rounded corners.

Redirect

You want to redirect users on a iPhone to be redirected to the correct version. For this you will need a nice redirect script, normally detecting browser type based on user agent shouldn’t be done, you should detect browsers based on their capabilities.

if ((navigator.userAgent.indexOf('iPhone') != -1) ||
(navigator.userAgent.indexOf('iPod') != -1)) {
document.location = "http://yoursite.com/iphone";
}

That’s it’ really just buy added a couple of extra lines of HTML and a rejig of the design and CSS you can easily optimise your website for the iPhone.

Notes

There are a few things to remember when building a website for the iPhone:

1. It’s a iPhone they are all the same, no multi browser checking, if it works in one it will work in them all! If only all web development was like this!
2. There is no :hover pseudo class in CSS
3. Keep images and JavaScript to a minimum, you don’t want to wait for ages for images/JavaScript to download.

Related posts:

1. If the web was smaller I’ve just had this crazy idea, what would happen if...
2. Building JavaScript Widgets Little pieces of JavaScript you embed onto your website...
3. JavaScript Halloween Effects Halloween is just around the corner and what better to...

See @BenjaminEllis fab photo’s of RDGTwestival http://bit.ly/sLowO

N.B. You can still buy the T-shirts.

Related posts:

1. Twitter T-Shirt Design Twestival is just around the corner (Feb. 12th) and I...

You can find a full review of the new features on the tweetmeme blog.

Minimal

Much like this website, Nick wanted the tweetmeme website to be really minimal and as far away from the old design as possible. A quick search on Kuler found the perfect colour scheme. Combine that colour scheme with a few shades of grey and we have the perfect website.

Rockwell

You will notice that Rockwell is used a lot around the website, i thought that the bold text contrasted really nicely with the small and minimal design.

Feedback

I am always interested in any feedback any can give me about my designs, so please leave feedback here, or on the tweetmeme blog.

Related posts:

1. Five Fantastic Colour Scheme Generators Picking the colour scheme is one of the hardest aspects...
2. New Year, New Design It has been a long time since I have touched...
3. Designing For The iPhone Yep, we have done it again, Tweetmeme has just...

Welcome to dtsn v4

This blog has seem a number of large changed throughout the years as I’ve improved my CSS/design skills the website has been updated. Well this is my latest design and hopefully i will always like it because it is simple, really simple.

For this design i am focusing on great content and great typography so nothing detracts from the content.

Leave Feedback

Please leave feedback on my new design, is it a bit too bare for you? Can you find the single image I am using in the entire design? Is there anything you would like to see?

Related posts:

1. Tweetmeme Revamp Over the last couple of days we have been working...
2. Twitter T-Shirt Design Twestival is just around the corner (Feb. 12th) and I...
3. TweetTabs, A Story For everyone who follows me on twitter (@dtsn) or knows...

I really wanted something that wasn’t in your face and was subtle, and preferably something that didn’t have the twitter logo on it. Therefore I chose a simple design using the original twitter bird, designed by Simon Oxley, available on iStockPhoto, and a cloud to hold the name.

There were some modifications that had to be made to the vector images, firstly none of the lines could be two small and all the objects had to be converted so that none of their paths crossed.

Using SpreadShirt

SpreadShirt was chosen to print the T-Shirts because they accept vector drawings which allow for the most flexibility when it comes to colours, they allow up the 3 colours, but I would only be using two. The uploading process is really old tech, each vector drawing has to be approved by a human before they let you use it, but this process should takes less than 24 hours.

After the design has been approved the design can then be added to products, anything from T-shirts to umbrella’s can be printed with your design. I choose 2 different forms of T-shirt one a slim fit and one a normal fit, £14.50 and £14 respectively. You can then tweak around with the designs/colours/text to get your design perfect. I also converted mine into a product for my own store.

You can currently buy this T-shirt which will be printed with your name, in one of 7 colours at http://dtsn.spreadshirt.co.uk.

N.B. The Slim-Fit Tee is really slim fit, leave a comment if you would like the design on any other products like girl tee’s, mugs, umbrella’s etc.

All the profits for this T-shirt will go to Twestival.

Roughly £1.40 - VAT will go to Twestival for every T-shirt brought, however spreadshirt will only release the money if more than 30 shirts are sold (thats just their store policy).

Related posts:

1. Twestival I would just like to say thank you to @RDGTwestival...

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.

Related posts:

1. Building JavaScript Widgets Little pieces of JavaScript you embed onto your website...
2. Super CSS, the power of the selector We all love CSS it’s fundamental to the web. However...