Friday, January 9th, 2009
Category: Examples
, Prototype
Thomas Fuchs has created defaultValueActsAsHint, an implementation of the Input Prompt pattern:
An often occuring UI pattern is “use the value of a textfield as hint what to input”. These fields all auto-clear when the user first focuses it (by clicking or tabbing it), and if nothing it entered, the hint will be shown once again once the user leaves it.
Because we decided to go this path for the “Quick entry” box we’re using for freckle time tracking, I dug out an older script I wrote and refreshed it a bit, and I present you defaultValueActsAsHint.
JAVASCRIPT:
-
-
$('element_id').defaultValueActsAsHint();
-
This is all there’s to it, and the file to include is merely 18 lines of code. It works with textareas, too. Just specify whatever should be displayed as hint in the value attribute of the input (or as text within the textarea tag) and off you go. Define a ‘hint’ style if you like to show the text in gray, italics or whatever you fancy.
Check out the test sample that lives in his prototype_helpers library that also includes deferUntil.
Thursday, January 8th, 2009
Category: Component, Examples, jQuery
Scott Robbin (Songza co-founder) has created a very cool jQuery plugin for pageSlide, an interaction based off of Aza's prototypes for Firefox Mobile and Ubiquity mouse gestures. The plugin wraps body content into a container and shifts it off of the page whenever a click event is fired, revealing a secondary interaction pane.
This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript. By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.
HTML:
-
-
-
$(document).ready(function() {
-
$('a.pageslide').pageSlide({
-
width: "300px"
-
});
-
});
-
</script>
-
For some reason I enjoy thinking of my desktop as a virtual area that I can shift around.... so this can suite me well.
Wednesday, January 7th, 2009
Category: Examples, Security
Earlier this week I blogged about a proof of concept that you can detect if a user is logged in to twitter and display their data with a few lines of JavaScript. This could be used to show for example "tweet this" buttons in a blog application.
The trick is easy: use the user_timeline to get the correct data back and provide it with a callback:
JAVASCRIPT:
-
function hasTwitter(data){
-
// gets the user's real name
-
alert(data[0].user.name);
-
// other data is .screen_name, .location and
-
// data[0].text is the latest update
-
}
HTML:
-
-
src="'http://twitter.com/statuses/user_timeline.json&count=1&callback=hasTwitter">
-
</script>
You can see the proof of concept here. The only problem with the code above is that if the user is not authenticated, Twitter's API will prompt an authentication dialog. You can work around this one by providing an extra parameter called "suppress_response_codes" which is meant to be used with apps that can only handle 200 response codes and don't allow for authentication (Flash apps for example):
HTML:
-
-
src="'http://twitter.com/statuses/user_timeline.json&count=1&hasTwitter&suppress_response_codes">
-
</script>
This also means that you need to do your own error handling for cases where the user is not authenticated:
JAVASCRIPT:
-
function hasTwitter(data){
-
if(data.error){
-
alert('No authenticated user');
-
} else {
-
// gets the user's real name
-
alert(data[0].user.name);
-
// other data is .screen_name, .location and
-
// data[0].text is the latest update
-
}
-
}
HTML:
-
-
src="'http://twitter.com/statuses/user_timeline.json&count=1&hasTwitter&suppress_response_codes">
-
</script>
Now, this is pretty cool, but it also caused quite a stir on the twitter developer mailing list as it is a privacy concern. Using this technique I could simulate a user's homepage, fake an error, ask for re-authentication and phish their login data.
Whilst this is a problem, it is not really Twitter's fault - if anything then browsers and the lack of secure sandboxes are to blame. Some questions a proof of concept like this throws up are:
- Do we need something like "tweet this" buttons (as a call to action they can be very effective)?
- If we do, isn't it better to only show them when the user is a twitter user instead of cluttering the interface with all kind of buttons?
- Is a provider-unknown secret like Yahoo's sign in seal a step in the right direction (educating users instead of patching technology)?
- Is oAuth the answer?
Wednesday, December 17th, 2008
Category: Examples
Remon de Boer sent us a link to Achmea.nl, a Dutch website that brought back memories of Thomas Fuch's Ajax makeover of Gucci's website some time ago.
Ironically, Achmea.nl starts out by displaying a Flash-powered "Loading" graphic:
But once the site loads, it's all Ajax. Powered by YUI, the site sports animated roll-overs, smooth transitions, and otherwise feels like Flash. Nice work!
Monday, December 15th, 2008
Category: Examples, Sound, jQuery
Eric Wahlforss, the founder of SoundCloud, wrote in to tell us about "The Cloud Player", a iTunes / Songbird clone written entirely in Ajax:
we just released an open-source itunes-clone built in jquery (and app engine, soundmanager 2, soundcloud api), complete with smart playlists, drag'n'drop, keyboard shortcuts, load-as-you-scroll playlists, playlist sharing, waveform display of tracks, etc. we've extended jquery ui a bit for this to happen.
It's using soundcloud.com as the primary music source, and the SoundCloud JSONP API to access the track metadata, available at http://soundcloud.com/api.
I like how it shows the waveform of the entire track at the bottom of the screen. Unfortunately, it's limited to the rather tiny music selection on soundcloud's service, but since it's open-source, the future is interesting indeed.
Eric sent along a playlist with some of his electronic playlists: http://www.thecloudplayer.com/share/3e718.
Nice work!
Friday, December 12th, 2008
Category: Examples, JavaScript
Steffen Rusitschka has a nice detailed post on inheritance with JavaScript, different ways you can go, and side effects of the decision.
From,
JAVASCRIPT:
-
-
var A = function(){}; // This is the constructor of "A"
-
A.prototype.value = 1;
-
A.prototype.test = function() { alert(this.value); }
-
var a = new A(); // create an instance of A
-
alert(a.value); // => 1
-
alert(a.test()); // => 1
-
to,
JAVASCRIPT:
-
-
var C = function() {
-
// a private function
-
var print = function(msg) {
-
alert(msg);
-
};
-
this.value = 1;
-
this.test = function() {
-
print(this.value); // calls our private function
-
};
-
};
-
var c = new C();
-
alert(c.value); // => 1
-
alert(c.test()); // => 1
-
He then goes on to share two helpers PClass and CClass that give you an easy way to choose which method you are looking for.
It is your choice which way of inheritance to chose for your specific problem. Speed+low memory = PClass; privacy = CClass.
Friday, December 5th, 2008
Category: Examples, Framework, Mozilla
Mozilla is big on tinkering--making things your own. They recently released a marketplace for their community to upload its own shirt designs. But because they based it on the Ajax-heavy Zazzle platform, consumers can customize the shirts in a variety of ways. We thought this made for a good opportunity to take a closer look at Zazzle.
Easy Zooming
In the overview page showing different shirt designs, simply mousing over a shirt lets you zoom in on it in a smooth, easy motion.
Clicking into a shirt gives more Ajax goodness, like an alternate zooming interface showing the full-view and the detail simultaneously:
And finally, it has a shirt manipulation interface, though most of the design manipulation occurs on the server, it is sent back without a page reload, as we would expect:
Zazzle is built on the UIZE (pronounced "you-eyes") Ajax framework which we covered briefly in 2006 and have yet to revisit. We're not sure if UIZE is used by anyone but Zazzle, but it's got a pretty nice website, docs, widgets, basic effects, an event system, and an inheritance system. We'll have to give it a closer look!
Friday, November 28th, 2008
Category: Examples, JavaScript, Showcase
Now this could only fly on a Friday ;)
Ed Spencer has coded up a bra size calculator in JavaScript:
One of the more mesmerizing websites I've worked on recently was for a lingerie boutique in the UK. Aside from the unenviable task of having to look at pictures of women in lingerie all day, I was also forced (forced!) to write a bra size calculator.
The theory behind bra size calculation is arcane and somewhat magical. Understanding of it does not come easily to man nor beast, so it is lucky that I, falling cleanly into neither category, have passed through pain and torment to save you the trouble.
After hours of testing he came up with the BraCalculator:
JAVASCRIPT:
-
-
var BraCalculator = {
-
-
/**
-
* The string to be returned when the result could not be calculated. Overwrite to change this
-
*/
-
unknownString: "Unknown",
-
-
cupSizes: ["A", "B", "C", "D", "DD", "E", "EE", "F", "FF", "G", "GG", "H", "HH",
-
"J", "JJ", "K", "KK", "L", "LL", "M", "MM", "N", "NN"],
-
-
/**
-
* Returns the correct bra size for given under bust and over bust measurements
-
* @param {Number} underBust The measurement taken under the bust (in inches)
-
* @param {Number} overBust The measurement taken over the bust (in inches)
-
* @return {String} The correct bra size for the given measurements (e.g. 32C, 40DD, etc)
-
*/
-
calculateSize: function(underBust, overBust) {
-
var bandSize = this.calculateBandSize(underBust);
-
var cupSize = this.calculateCupSize(bandSize, overBust);
-
-
if (bandSize && cupSize) {
-
return bandSize + cupSize;
-
} else {
-
return this.unknownString;
-
};
-
},
-
-
/**
-
* Calculates the correct band size for a given under bust measurement
-
* @param {Number} underBust The measurement under the bust
-
* @return {Number} The correct band size
-
*/
-
calculateBandSize: function(underBust) {
-
var underBust = parseInt(underBust, 10);
-
return underBust + (underBust % 2) + 2;
-
},
-
-
/**
-
* Calculates the Cup size required given the band size and the over bust measurement
-
* @param {Number} bandSize The measured band size (should be an even number)
-
* @param {Number} overBust The measurement taken over the bust
-
* @return {String} The appropriate alphabetical cup size
-
*/
-
calculateCupSize: function(bandSize, overBust) {
-
var bandSize = parseInt(bandSize, 10);
-
var overBust = parseInt(overBust, 10);
-
var diff = overBust - bandSize;
-
-
var result = this.cupSizes[diff];
-
-
//return false if we couldn't lookup a cup size
-
return result ? result : false;
-
}
-
};
-
Check it out in action
Monday, November 10th, 2008
Category: Examples, JSON, JavaScript, Yahoo!
BOSS - Build Your Own Search Service (the your is silent for reasons I cannot tell you as it would endanger the lives of our agents in the field) is a Yahoo! API to access their search index and get the data back either as XML or JSON. Whilst there is ample documentation available it can still be a bit daunting to use the API purely in JavaScript - especially when you want to have several asynchronous calls - for example when you want to search the images, news and web sites for a certain query.
I've had several complaints of Hackers at the Open Hack Day in Brazil about this and wanted to make their lives easier by writing a wrapper for the API.
This wrapper is yboss and it was a big success at the Hack Day with the winning hack in the BOSS category actually being based on it.
To use the wrapper all you need to do is to embed it in your document
HTML:
-
-
<script type="text/javascript" src="yboss-lib.js"></script>
Then you have access to the get method of the wrapper which searches all the defined search options with the query you provided. You can define a callback method that will be called when all searches have been successfully performed.
JAVASCRIPT:
-
YBOSS.get(
-
{
-
searches:'search,images,news',
-
query:'obama',
-
count:10,
-
callback:seeddata
-
}
-
);
-
function seeddata(o){
-
var all = '<h4>Web Sites</h4>' + o.webHTML +
-
'<h4>News</h4>' + o.newsHTML +
-
'<h4>Images</h4>' + o.imagesHTML;
-
var out = document.getElementById('results');
-
out.innerHTML = all;
-
}
The data is provided either as a JSON object with all the mandatory properties for a BOSS result display or - as shown here - as HTML lists that can be written out via innerHTML.
Tuesday, November 4th, 2008
Category: Examples
Noupe keeps the roundups going with Most Wanted Ajax Techniques: 50+ Examples and Tutorials that consists of a lot of projects we have covered over time, but some new ones, and the added touch of putting it together in one place.
Ajax Forms
ShoutBox
Validate a Username AJAX
Ajax Instant Messenger
Ajax Tabs Content
Ajax Shopping Carts
Ajax Star Ratings
Ajax Inline Edit
