This was presented at Devnest 9

Developers of Twitter probably heard of @Anywhere when it was launched at Chirp, it includes componants which will enhanch a web page. Which for twitter increases the engagement for their users. These componants are cool, but hardly anything to get excitited about. @Anywhere contains a fantastic secret underneth it’s hood and thats a fully JS-API. Thats right a method to interface with the Twitter API entirely in JavaScript. This is because @Anywhere provides the means to authenticate a user via OAuth using their new Twitter Connect window.

Authenticated users can achieve a lot more using the API, therefore the JS-API now lets you practically do anything that the regular API can. This is really exciting because it means that i can finally turn TweetTabs into a fully Twitter client built entirely in JavaScript.

Here’s a quick example of how easy it is to post a status update using @Anywhere:

twttr.anywhere(function(T) {
if (T.isConnected()) {
T.status.Update(‘hello world’);
}
});

You can find a lot more information regarding @Anywhere over on the @Anywhere dev page. You can also get a full list of support methods.

TweetTabs

So how does this all fit in with TweetTabs? Quite simply TweetTabs was never quite finished, i always intended it to be a fully Twitter Client and not just the search client that it became, this is because Twitter at the time of writing TweetTabs didn’t support any methods of OAuth through JavaScript. But now it does, so i’ve implemented it.

You can check out a very alpha version (which is my proof of concept) at http://beta.tweettabs.com. Please give feedback, I fully intend on integrating @Anywhere fully into TweetTabs.

Downsides

The real big problem with the JS-API part of @Anywhere is that it is not supported (at all), there is very little documentation and most of it has changed since it was released. So it really is down to trial and error!

Slides

Here are the slides from the talk.

Next week I will be presenting the first, of what I hope to be many, presentation on what I do. This one will be focusing on Tweettabs and integrating @Anywhere support. It should be a interesting talk with lots of surprises.

Tuesday 6th July, 6pm-9pm

The Guardian
King’s Place
90 York Way
N1 9AG London
United Kingdom

Come along and check it out, you can get tickets here and find more information about the event on their website.

JavaScript is in the middle of a massive comeback and developers are abusing it. JavaScript addons and widgets are becoming are the norm for large sites and are so easy to install, in large numbers and quantities. For example Mashable loads nearly a mega byte in JavaScript files. In this article I will go through some tips to help you optimize your JavaScript and reduce both the load on your servers and make your pages respond faster.

Cut code

The first and biggest thing you should do in optimizing your JavaScript is to cut down on the size, cut out functions that don’t do a lot and try and reduce the size of your file. This goes along side with the question do you need a framework? Think it through, is your site big enough to warrant loading a full framework (typically in excess of 3000 lines), if you just want to do some very simple functions write them in JavaScript without a framework.

If you really need to load a framework use the ones available on the Google AJAX libraries API, most frameworks are available. These are just the frameworks hosted on Google, they work of the principle that if one website uses these files then the user will still have the files in the browser cache and won’t need load them again.

Minimize

Run your code through a JavaScript minimiser, this will shrink all the files to be really small there are a number of popular ones available (this is also applicable for CSS):

• Bundle Fu – http://code.google.com/p/bundle-fu/
• Pack:tag – http://sourceforge.net/projects/packtag/
• JSMIN – http://www.crockford.com/javascript/jsmin.html
• YUI Compressor – http://yuilibrary.com/downloads/#yuicompressor

Expires headers

Set your expires headers, this should be standard for all your static content like CSS and Images as well. A browser may need to make many requests to your server in order to get all the content, by using an expires header you make those components cacheable for a set period of time, therefore the browser will need to make less HTTP requests. For a more detailed explanation, as well other components which need improving reading the Yahoo Developer Network Guide on optimisation.

Loading Scripts Asynchronously

Browsers are only single threaded, this means that it can only really load one thing at a time. However there are ways around this, and ways you can load multiple files without locking up the browser. Give Steve Souders articles on Loading Scripts without Blocking if you are interested in implementing this. I am currently working on a prototype based class to do this which will be published on this blog in the coming months.

Defer JavaScript Loading

Steve Souders talks about deferring JavaScript loading in his series about high performance websites. It’s quite a simple idea really, don’t load up the JavaScript until you require it. Therefore if your JavaScript is not needed on page load this should be deferred to be loaded up later.

Evaluate

Make sure you evaluate your performance when trying to optimize JavaScript. I personally love the Firefox plugin FireBug, and it’s plugin YSlow. However there are lots of other methods and tools you can use to evaluate you performance, the best by far is the firebug profiler. Micheal Sync has a fantastic tutorial on the FireBug profiler which is well worth a read.

Original Source: http://giancarlo.dimassa.net

There have been many examples of bouncing effects in scriptaculous but this one has to be one of the most realistic. It uses the equations developed by Robert Penner to accurately represent a bounce, and it does look cool.

What you need

As with most of my tutorials this is based on scriptaculous and prototype, but the equations could easily be porter to other animation frameworks.

The code

This is really simple, basically what we are going to be doing is to add a new transitional effect to scriptaculous. To do this we just extend the Effect class.

Add this to your own JavaScript file instead of scriptaculous, so you don’t loose it when you update.

/*Based on Easing Equations v2.0
(c) 2003 Robert Penner, all rights reserved.
This work is subject to the terms in http://www.robertpenner.com/easing_terms_of_use.html

Adapted for Scriptaculous by Ken Snyder (kendsnyder ~at~ gmail ~dot~ com) June 2006
*/

Effect.Transitions.Bounce = function (pos) {
    if (pos < 0.36363636363636365) {
        return 7.5625 * pos * pos;
    } else if (pos < 0.7272727272727273) {
        return 7.5625 * (pos -= 0.5454545454545454) * pos + 0.75;
    } else if (pos < 0.9090909090909091) {
        return 7.5625 * (pos -= 0.8181818181818182) * pos + 0.9375;
    } else {
        return 7.5625 * (pos -= 0.9545454545454546) * pos + 0.984375;
    }
}

Use it

You can use this effect as a transition type with lots of effects.

new Effect.BlindDown(div, {
    duration: 0.5,
    transition: Effect.Transitions.Bounce
});

Check out Ken Snyder’s blog for more transitional effects.

This tutorial is a really simple one and is only a one liner in prototype (slight more in regular JavaScript). It will check all the checkboxes on a page, and a function to uncheck all checkboxes quite handy really especially if you are dealing with long lists.

Check All

$$('input[type="checkbox"]').invoke('writeAttribute', 'checked', 'checked');

What we are doing here is selecting all the inputs of type checkbox and enumerating over them writing a check attribute to each one.

Uncheck All

$$('input[type="checkbox"]').invoke('removeAttribute', 'checked');

As you can guess this just the opposite way round.

JavaScript

You can do the same basic principle without a framework:

// check all
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
	if (inputs[i].type == 'checkbox') {
		inputs[i].checked = true;
	}
}

// uncheck all
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
	if (inputs[i].type == 'checkbox') {
		inputs[i].checked = false
	}
}

That’s it there isn’t really much to it, but I thought it was worth sharing.

JSONP was proposed as grabbing data from external domains avoiding the cross script scripting limitations (see this Ajaxian article for more information). It requires a call to an external API where you specificy the a callback function, you do this through the use of script tag. For example:

<script type="text/javascript" src="http://yourdomain.com/api?callback=myfunction"></script>

When the script tag has been loaded your function would be called with the JSON data, like so.

myfunction(‘some JSON data’);

However you become reliant on that external service to always be available, if for any reason that service goes down you wouldn’t get any data and your page would be likely to hang.

Therefore I propose a system of JSONP stacking, quite simply you stack up your JSON requests if you don’t receive a response in a set time it will stop the request.

This can be easily achieved by having the following function:

// callback function
var _c = false;
// success flag
var _s = false;

function JSONPStacking(url, callback) {
	// create the element
	var script = document.createElement('script');
	// set the source
	script.src = url + '&callback=callback';
	// render the element
	document.appendChild(script);
	// start the counter, this one last for 5 seconds
	setTimeout(function() {
		if (!_s) {
			// remove the element
			document.body.removeChild(script);
		}
	}, 5000);
}

function callback(data) {
	// say the data has been received
	_s = true;
	// call the callback with the data
	_c(data);
}

Basically what we are doing here is to create a normal JSONP request by creating a script tag and loading it into the body. However we are overriding the standard callback function with our own one, callback. When the request succeeds this will call that function with the data and in turn we call our success function. If 5 seconds have past the timeout will trigger, see if the success flag has been set if not it will remove the element from the DOM thereby stopping the request.

That’s it, it is a really simple principle but will hopefully stop your site from hanging on long request, such as for the Twitter widget. It will also make your widgets that you build a lot more stable and won’t overload your site.

There are a lot of things wrong with the Twitter homepage, that’s why i created Better Twitter. Which is a Greasemonkey script which will fix some the things which really bug me with the Twitter UI. I have converted the Greasemonkey script into a standalone Firefox plugin as well using this user script complier.

Install Plugin or download the Greasemonkey Script

Release 0.1

• Fixes the tweet box, allowing you to press enter to submit the tweet
• Focuses the tweet box when the page loads

Installation

There are two options for installing the script.

1. Download the Firefox Plugin, this requires Greasemonkey to be installed (i think)
2. Download the Greasemonkey Script

Feedback

If you have any thoughts or feedback on this script, or would like to contribute please leave a comment below.

Here’s a crazy idea, what would you do if you wanted to change the background picture of your website so it matches the weather. Luckily Its really easy, and I figured out all the hard bits for you.

UPDATE – Chris Heilmann over at the Yahoo! Developer Network Blog has made this even simpler through the use of YQL.

The Data

First of all we need a data source which will provide the weather for a particular location, we can grab this from the Yahoo Weather API. Using the code UKXX0117 which is for Reading, UK I can create the an RSS feed which you can see here http://weather.yahooapis.com/forecastrss?p=UKXX0117&u=c. Great but how can we process this RSS feed? That’s where Yahoo Pipes comes in, we can take in the RSS feed extract the data we need (item.yweather.condition) and export it as JSON.

Now we can access the JSON data for the weather in Reading here.

JavaScript

The JavaScript cannot directly call the JSON script via AJAX due to cross site scripting limitations imposed by the browser. This is where JSONP comes in, JSONP is a way to retrieve data from external domains through wrapping the JSON in a function, you can read more on JSONP at from__future__import. Yahoo Pipes fully supports the JSONP format using the parameter callback, therefore in our webpage we load up the following.

<script type="text/javascript" src="http://pipes.yahoo.com/pipes/pipe.run?_id=b13966505cb6b00dd1d18ec4aafc14b4&_render=json&_callback=weather"></script>

This will call the function weather passing through a weather status code as the parameter.

That is really it, you can do whatever you want with the data, here’s a quick example of how I would use it.

function weather(data) {
        var code = data.value.items[0].content;
	switch(code) {
		case '32': $(document.body).addClassName('sunny');
		break;
	}
}

Example

For everyone who follows me on twitter or knows me personally would know that yesterday I launched something that i have been working on for a very long time. TweetTabs is a way of tracking real-time twitter trends and searches, and has been my little project since i first started on it back in Easter. The idea came from the lack on online real-time ways to interface with twitter, the premise is simple, i wanted an easy way to search for things in twitter which constantly updated, so TweetTabs was born.

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.

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.