Think Vitamin » JavaScript

Scrolling Made Fun

Mat Helme — Wed, 25 Jan 2012 20:00:31 +0000

Just when you thought scrolling your web page was getting boring. Scrollorama has stepped the scroll game up with this remarkable jQuery Plugin. Scrollorama allows you to manipulate text when you scroll the page. You can do everything from Transitions to Zoom to Parallax. Check out the Scrollorama site to view some great examples and the plugin’s documentation.

This Plugin is great for landing pages and highly interactive web applications. Like CSS3 transitions, use your animations sparingly.

Ember.js: A More Lightweight SproutCore

Jim Hoskins — Wed, 14 Dec 2011 20:41:48 +0000

Ember.js is a new JavaScript framework that was formerly SproutCore 2.0. When I tried out SproutCore for the first time a few years ago, I was impressed with it’s data binding and templates, but I found it included a lot of things I didn’t need or want, like a large UI framework and it’s own recommended toolchain and workflow. I wished I could just use the few core parts of SproutCore easily and leave out the rest. Ember.js is that wish coming true. Its main focuses are: data binding, computed properties, and auto-updating templates.

Check out the Ember.js on Github and read the announcement here.

Ember.js had the code name Amber while in development. It was announced under the name Amber.js, but renamed to Ember.js after there was some confusion with another project

Creating Bookmarklets for Fun and Profit

Jim Hoskins — Tue, 13 Dec 2011 21:31:06 +0000

Bookmarklets are just like normal browser bookmarks, but when you click one, instead of taking you to another web page, it performs some action on the web page you are currently on.

You have probably encountered bookmarklets in some way, whether it’s in a bookmarking service like Instapaper, or maybe a cool web design tool that manipulates your page in some way. What you may not realize is that it’s very easy to create bookmarklets. So easy that you can use them not only in your large projects, but you can build quick bookmarklets to help you automate tedious online tasks.

Bookmarklet Basics

A bookmarklet is simply a snippet of JavaScript code saved as a link.
When you click the link, or click the bookmark you created from the
link, it runs the JavaScript code on the page that you are currently
looking at.

So what can you do with that? Almost anything! Let’s start, however,
with a very simple example.

So let’s take a very simple piece of JavaScript, and create a
bookmarklet.

alert('This is a rather simple example...');

This typical snippet of JavaScript simply pops up a box that says “This
is a rather simple example…”

So let’s now create a link that executes this snippet.

 href="javascript:alert('This is a rather simple example...');"> Show Alert >

So it looks kind of like a typical tag. The href however is a
little different. Instead of a typical page url, it is our JavaScript
code, preceded by javascript:. This is what allows us to run our code.

If you click the link, you will get the popup. But if you drag the link
to your bookmarks toolbar, you will then be able to click that bookmark,
and execute the code on any page.

Interacting with the Page.

The previous example isn’t very useful, it just pops up the same old
message each time. The beauty of a bookmarklet is that it runs the code
within the page you are viewing. This means your bookmarklet’s
code has access to all of the page elements, variables, and functions on
that page. This is also the reason to be careful using 3rd party
bookmarklets, they can also do malicious things like retrieve your
cookie from the page you are on and transmit it elsewhere.

Let’s jazz up our example to popup the title of the current page.

 href="javascript:alert('This page is : ' + document.title);"> Show Title >

Now this link and bookmarklet will tell us the title of the current
page. This is because the document will be the page document of the
current page.

We can do much more than just get information and pop it up in an alert,
we can apply styles to a page, add or remove elements, or even
manipulate forms to automate data entry.

If you have some long form that is tedious to fill out, but the
actions you want to take can be automated, bookmarklets can save you a lot
of time. Better yet, you can create a bookmarklet for a coworker and be a
hero who saved him or her hours of work by simply spending a few minutes
creating a bookmarklet to help.

If you are making a bookmarklet to work on a particular site, there is a
good chance that the site uses jQuery (it’s that popular). If it’s another
framework you could utilize that too. If you know jQuery is on the page
you are using your bookmarklet for, it makes building bookmarklets that
much easier.

Here is a simple example. Sometimes when confronted with dozens of checkboxes on a page, I want to
just check them all, and maybe uncheck the few that don’t apply to me.
If there is no “Check All” button, I have to do it myself.
The code for that is simple, assuming you have jQuery on the target
page.

$(':checkbox').attr('checked', true);

This selects all checkboxes, and checks them all. Just throw code in a
link, drag the link to you bookmarks bar, and you’re ready to go
checkbox crazy at a moment’s notice.

Workflow

Often when creating bookmarklets, the code requires some
experimentation, and several JavaScript statements.

Here is the workflow I use.

Step 1: Experiment in the Dev Tools or Firebug

Since your code will run on a page, pick out a target page, and open
the JavaScript console of your Dev Tools, or Firebug. This allows you to
experiment with the JavaScript code and what CSS selectors can be used to select elements (if
you are using a framework like jQuery, as shown above).

You may want to write the code snippet in a text editor, then copy and
paste it into the console, rather than try to form you statement(s) in
the console itself.

Once your code does what you want, move to step 2.

Step 2: Prepare Your Code

Since you will have to place your code in the href attribute of an
tag, there are some formatting restrictions. First take note of
any quotes in your code. I like to use only single quotes in my
bookmarklet code, so when I wrap the code in double quotes to embed it
in the HTML, I don’t break out of the href value.

Your code should also be compact. You can do this fairly easily by
removing line breaks. Make sure you are using semicolons properly, but
you already do that, right? You could also try using a JavaScript
minifier to reduce the code, but if there is that much code, you may
want to try a different technique, I will explain shortly.

Step 3: Create the Bookmarklet

There are two main ways to add a bookmarklet to your browser. You can
create an tag on a page, and drag it to your bookmarks, or you can
create a normal bookmark to any page, then edit its title and link. You
would then set the like location to your ‘javascript: …’ code. This
strategy can be a bit cumbersome, but editing an existing bookmark is
the way you have to do it on iOS.

I prefer to create a link on an HTML page. This makes it easier to
share.

We saw the syntax for this at the beginning of this article.

It’s an tag. The href is in the format "javascript: YOUR CODE HERE" and the content of the tag will be the title of the bookmarklet.

You can either create a new HTML page to create this link, or you can
use something like jsFiddle to quickly create
your link. This has the added benefit of making it easy to share with a
coworker, a friend, or the world.

Bigger Bookmarklets

If you are creating a bookmarklet that goes beyond a simple gimmick or
time saver, you may have a lot more code. While you can cram quite a bit
of code in that link, it’s often better to instead create a JavaScript
file that is hosted on the web, then have the bookmarklet load that
script into the page. Your script will execute in the page just as it
would have with the shorter bookmarklets.

Creating an external file has the added benefit of being able to update
the logic of the bookmarklet by simply updating the target file.

The readable version of the code looks like this.

(function () {
  var script = document.createElement('SCRIPT');
  script.src = 'http://example.com/the_code.js';
  document.body.appendChild(script);
})()

This creates a

`Updating More Than Just The Template Area`


A lot of dynamic applications tend to have a layout that generally stays the same regardless of the template you’re displaying, and then a content area that shows the template that you’re looking at. Maybe there’s a sidebar with some navigation in it that generally stays the same, but each time you update the main content area you also need to update the title on the page. It’s pretty easy to cheat a bit with Handlebars to make that work. Handlebars helpers are allowed to not return anything, in which case they won’t add anything to the template output. You can use a helper that doesn’t return anything to update other parts of the page!
Imagine a site that has a structure something like this:

And maybe the markup looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13

  Title
  
    
      Links
      Go
      Here
    
  
  
  	Content goes here!
  


Here’s a quick helper that will let you update the h1 for the title each time you apply content to the main content area:

1
2
3
4
5
Handlebars.registerHelper("title", function(fn) {
  $('h1').html(fn(this));
 
  return "";
});

And finally, a template that uses the helper:

1
2
3
4
5
  {{#title}}Details for {{name}}{{/title}}
 
  
    ...user details template stuff goes here...
  

When the template above is run, it will call the title helper, but since the title helper just returns an empty string, it won’t add anything to the template output. It will, though, use jQuery to update the h1 element for the page’s title.
Wrapping Up
I think this about wraps up the series on Handlebars.js. It’s been fun to share Handlebars.js with everyone, and to hear about the apps you’re writing with Handlebars.js. Please let me know in the comments if there’s anything else relating to Handlebars.js that you’d be interested in hearing about, or if you have any questions.



Have you seen requestAnimationFrame?
Alan Johnson — Fri, 08 Apr 2011 01:00:51 +0000
CSS3 Animations make a huge impact on reducing CPU and making animation more efficient in the browser, but I don’t think we’ll ever get away from sometimes having to use JavaScript to do animations.
requestAnimationFrame is a neat new draft spec that a lot of the browsers are starting to support in nighty builds. It basically sets up a global animation run loop for your entire page. It’s really useful for reducing CPU usage when doing JavaScript based animations because it allows the browser to only redraw once after all of the registered animation callbacks have been called, rather than after each individual callback. It also allows the browser to throttle the number of animation callbacks that are called for tabs in the background.
There are a ton more details about requestAnimationFrame on Paul Irish’s blog, including how to wire it up for browsers that don’t support it yet so that you can start writing JavaScript animations that use requestAnimationFrame now.



Handlebars.js Part 2: Partials and Helpers
Alan Johnson — Fri, 01 Apr 2011 16:11:33 +0000

Last week we looked at the basics of using Handlebars.js. We learned how to write a basic template to loop over a list of people. This week we’ll build on that by learning about using Handlebars’ built-in helpers, writing and using partials, and writing custom helpers. Let’s get started!

Built-In Helpers
Handlebars includes a few built in helpers that make life easier. They are {{#each}}, {{#if}}, and {{#unless}}.
The each Helper
The {{#each}} helper iterates over each item in an array. Here’s an example.

1
2
3
4
5


The above template would iterate over each item in the array named people and output the content of the block.
The if Helper
The {{#if}} helper does just what you’d expect. It allows you to implement an if block in your code. The if helper outputs the block that it contains if the value given to it is truthy.
One tricky aspect of the helper, though, is that Handlebars doesn’t support conditional statements, so code like {{#if x > y}} isn’t possible. That’s on purpose. Our take is that any tricky logic like that can be wrapped up into a helper to make sure that your template stays nice and clean.
Here’s an example:

1
2
3
4
5


That template would only output the inside of the block if people was truthy, so it wouldn’t output if people was null, 0, false, or undefined. Probably a more appropriate if statement in the above example would be {{#if people.length}}, so that the block would also not be displayed if a people array is present, but empty.
The unless Helper
The {{#unless}} helper is basically just the opposite of if. It only outputs the contained block if the given expression is false. So, for example:

1
2
3
4
5


The above template would only output the sentence There aren’t any people if people.length evaluates to a falsy value like null, 0, false, or undefined.
The else Expression
Handlebars.js includes a special expression, {{else}}, that can be used with any block helper to represent what should be output if the given expression evaluates to a falsy value. Here’s an example of how to use it:

1
2
3
4
5
6
7


Partials
Partials come in handy when you have a chunk of a Handlebars.js template that you need to use in a few different contexts. The Handlebars.registerPartial method registers a partial. It takes the name of the partial as its first argument and either a template source string or a compiled template as its second argument. The fact that it accepts a compiled template as the second argument is actually pretty useful. That allows you, for example, to use the partial in a loop that outputs a list but also append items to the list later using the partial’s template function.
To use a partial from a template, simply include {{> partialName}}. Here’s an example of using a partial:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

 

 


Writing Customer Helpers
One of our major motivations in writing Handlebars.js rather than just using mustache.js was to allow users to define global helpers. Handlebars supports defining both expression and block helpers.
Custom Expression Helpers
To register an expression helper, use the Handlebars.registerHelper method. It takes the name of the helper and the helper function as arguments. Handlebars.js takes whatever is returned from the helper function and writes it out to the template, so be sure to always return a string from your custom helpers.
To write an expression helper function to output a formatted phone number, you could define the following helper:

1
2
3
4
Handlebars.registerHelper("formatPhoneNumber", function(phoneNumber) {
  phoneNumber = phoneNumber.toString();
  return "(" + phoneNumber.substr(0,3) + ") " + phoneNumber.substr(3,3) + "-" + phoneNumber.substr(6,4);
});

You would use the formatPhoneNumber helper in a template like this:

1
{{formatPhoneNumber phoneNumber}}

Custom Block Helpers
Custom block helpers are also registered with the Handlebars.registerHelper method. When a helper is used with a block, Handlebars will pass the contents of the block compiled into a function to the helper. If an {{else}} expression is found in the block Handlebars will also pass the contents of the else block to the helper as well.
Here’s an example block helper that iterates through an array, letting the contents know whether it’s an even or odd row. The helper takes the array to iterate over, the css class name for even rows, and the css class name for odd rows as arguments. You’ll also notice the compiled template function fn for the contents of the block and the compiled else block function, elseFn are arguments to the helper function. The helper simply adds a property named stripeClass to each item in the array as we iterate over it so that we can output that class name within the block. If the array given is falsy or empty the helper just returns the contents of the else block.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Handlebars.registerHelper("stripes", function(array, even, odd, fn, elseFn) {
  if (array && array.length > 0) {
    var buffer = "";
    for (var i = 0, j = array.length; i < j; i++) {
      var item = array[i];
 
      // we'll just put the appropriate stripe class name onto the item for now
      item.stripeClass = (i % 2 == 0 ? even : odd);
 
      // show the inside of the block
      buffer += fn(item);
    }
 
    // return the finished buffer
    return buffer;
  }
  else {
    return elseFn();
  }
});

You would use the stripes helper in your template like this:

1
2
3
4
5
6
7
{{#stripes myArray "even" "odd"}}
  <div class="{{stripeClass}}">
    ... code for the row ...
  div>
{{else}}
  <em>There aren't any people.
{{/stripes}}

See It In Action
I actually wrote up a quick sample project that uses all of the techniques I’ve describe here. You can check that code out on GitHub or download a zip file of the source.
There’s More!
There’s a lot going on with Handlebars.js helpers, so we’ve got at least one more article worth of content to cover. Next week I’ll show you how to do some neat tricks with the internals of how Handlebars.js blocks work. Please feel free to email me at alan@carsonified.com if you have any questions and I can cover those as well.



Getting Started with Handlebars.js
Alan Johnson — Fri, 25 Mar 2011 13:11:42 +0000

Web apps are using JavaScript to create dynamic interfaces now more than ever before, and that’s not a trend that will change any time soon. DOM manipulation is great for simpler JavaScript apps, but what do you do when you’re changing huge chunks of the document with each change of the view? That’s where JavaScript templating comes into play.
There are quite a few amazing JavaScript templating libraries available. I started out with JavaScript templating using mustache.js, a JavaScript port of the excellent Mustache templating language and moved on to a stint using John Resig’s JavaScript Micro-Templating. jQuery has its official templating plugin, and so does Underscore.js. Even 37signals has a JavaScript templating language, although it’s for CoffeeScript, called eco. My personal favorite JavaScript templating language these days is Handlebars.js.

Why handlebars.js?
I have to disclose that I’m a little biased – I worked with Yehuda Katz on Handlebars.js. We wrote Handlebars because we loved Mustache’s approach to “logic-less templating” in general but had a rough time dealing with the hoops you had to jump through to use global helpers and the lack of support for accessing variables further up the template’s call stack. We also really wanted templates that could be precompiled instead of having to be compiled on the client and really wanted to write the fastest templating language possible. Although we didn’t end up with the absolute fastest templating framework for JavaScript, Handlebars.js is lightning fast and accomplished our other goals.
Installation and Usage
The easiest way to install Handlebars.js is to download the latest build from the GitHub project. We’re not quite to a 1.0 release yet, but Handlebars.js is being actively used by quite a few projects. Handlebars is just a JavaScript library, so you include it in your pages the same way you would any other script:

1
2


Then you can compile, process, and display that template with the following code:

1
2
3
4
5
6
7
8
  var source   = $("#some-template").html();
  var template = Handlebars.compile(source);
  var data = { users: [
      {username: "alan", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" },
      {username: "allison", firstName: "Allison", lastName: "House", email: "allison@test.com" },
      {username: "ryan", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" }
    ]};
  $("#content-placeholder").html(template(data));

I’m using jQuery for inserting the template output above, but Handlebars will work with any framework that  you’d like to use it with. One thing to note is that Handlebars always compiles templates into a JavaScript function. That makes them super easy to work with.
Basic Expressions
The simplest dynamic element in a Handlebars template is an expression. An expression is surrounded by handlebars, like {{expression}}. When an expression is reached in the template, Handlebars will look for an item in the current context that matches the expression given. If the matching item is a value, the value is output. If the matching item is a function, the function is called. If no matching item is found, nothing is written to the output. Expressions support using the dot (.) operator in expressions to output nested values. For example, {{user.firstName}} would output the firstName property on the user value in the current context.
By default Handlebars escapes the results of expressions, but using a “triple-stash”, like {{{expression}}}, will cause the expression to be output unescaped.
Blocks
Sometimes it’s helpful to focus your work on a particular expression within a template. That’s where blocks come in. Blocks are represented in Handlebars with the pound (#) symbol followed by an expression. Blocks end with a closing mustache, {{/expression}}.
If the expression given evaluates to an Array, Handlebars will iterate over each item in the Array, setting the current context to that item.  Here’s an example:

1
2
3
4
5
var data = { people: [
    {name: "Alan"}, 
    {name: "Allison"}, 
    {name: "Ryan"}
  ], group: "Bloggers" };


1
2
3
4
5
6
7


Because blocks change the current expression context, Handlebars supports using the ../ expression to access parent contexts. So in the previous example, we could have used the expression ../group while iterating over each of the people to print out the name of the group:

1
2
3
4
5
6
7


If a block’s expression evaluates to anything other than an Array, Handlebars simply sets the context to the result of evaluating the expression. This can save a lot of typing when outputting several properties of an object:

1
2
3
4
5
6
var data = { person: { 
    firstName: "Alan", 
    lastName: "Johnson", 
    email: "alan@test.com", 
    phone: "123-456-7890" 
  } };


1
2
3
4
5
6
7


What’s Next?
There’s a ton more to cover, so I’ll be posting about advanced Handlebars.js techniques next week. We’ll talk about partials, block helpers, global helpers, and how to precompile your templates so that they don’t have to be compiled on the client.



Encrypting Cookies in the Browser
James Robson — Mon, 14 Feb 2011 09:00:41 +0000
Cookies are a convenient, often necessary way to maintain state and data in web applications. Since this is well known, cookies are a target and potential vulnerability you have to be aware of when developing for the web.
There are various ways to go about improving cookie security. In this article we’ll discuss an additional method, client-side encryption.
Attacks on cookies
Cookies are stored locally on a computer, usually in clear text. If a computer is accessed by multiple people, one person might scan another’s cookie folder and look for things like passwords or long-life session IDs.

Cookies are generally set server-side using the ‘Set-Cookie’ HTTP header and sent to the client. This makes them a target for network sniffing. You can use SSL/TLS to prevent this by encrypting the network packets, but many sites, such as Facebook, only use HTTPS during login, and then switch to standard unencrypted HTTP for ensuing requests. Tools like FireSheep make sniffing and hijacking session cookies (just another cookie!) trivial in certain conditions.
Another common attack, cross-site scripting (Xss for short), is when some client-side code, usually JavaScript, is injected into a web page and executed without the user’s knowledge. When JavaScript runs in this context, it may, among other things, access user cookies. This vulnerability is especially difficult to prevent, since users are at the mercy of the websites they visit. You can only hope that site Y has taken the necessary precautions to prevent Xss injection. The only sure way for you to prevent cross-site scripting is to turn off JavaScript altogether.
Encrypting cookies in your browser
My company, CompletelyPrivateFiles.com, provides encryption solutions for the web. As part of our infrastructure we’ve built a JavaScript API that encrypts cookies with 256-bit AES encryption on the client, that is, in the browser. The API is available for free. You can find out more here.
The API works by combining a random, dynamically assigned ‘seed-key’ with a generally weaker user or application secret (like a password) to generate a strong 256-bit key. It then uses that key to encrypt and decrypt cookies on the client. It’s a very minimal, unobtrusive API by design, and should easily integrate with preexisting applications and frameworks.

You’ll need an API account so your application can obtain the seed key from our servers. After sign-up you’ll be given a ‘sub-token’ which you include in your pages. To get started with the API add our JavaScript library to your page.

1
2
3
<script type="text/javascript"
src="http://www.completelyprivatefiles.com/api/1.1/cookie/encrypt.js">
script>

Then, paste in the following code, replacing __YOUR_SUB_TOKEN__ with the sub-token you get from sign-up.

1
<script type="text/javascript">document.write(ssxdom('__YOUR_SUB_TOKEN__'));script>

Now, you’re ready to read and write encrypted cookies. To save an encrypted cookie to disk make the following call.

1
setSecureCookie(secret, cookieName, cookieVal);

The ‘secret’ parameter is determined by your application. You may require the user to enter the secret. Or, you could generate it automatically from internal application values like username, timestamp, etc. You could even provide a truly random, i.e. actual, encryption key for ‘secret’. It’s entirely based on the security/convenience trade-off you decide on.
To decrypt and access the cookie value, make the following function call. Note that ‘secret’ in this call must be the same ‘secret’ used in setSecureCookie().

1
var cookieVal = getSecureCookie(secret, cookieName);

Cookie security
Consider the vulnerability scenarios outlined at the beginning of this article. In each case, the exploit only mattered the moment the attacker obtained the cookie’s value. With encrypted cookies, accessing the cookie does not mean accessing it’s value.
In the case where someone gains local access to a computer and scans for cookies, encrypted cookies prevent the attacker from viewing the cookie contents.
Let’s say you encrypt cookies and send them in their encrypted form to the server for storage. The server can later use ‘Set-Cookie’ and the cookie remains encrypted until it reaches your client. A hijacking attack is mitigated in this case, even if the cookies are sent over clear HTTP.
Xss exploits are more difficult to stop since the attacker may have full access to the page and its dynamic elements. If the attack is specific enough, it might simply access variables in memory. In the case where an Xss exploit accesses your cookies, however, the same protections as above apply. The encryption must be circumvented first.
It should be noted that encryption doesn’t prevent a malicious user or process from damaging cookie values and making them impossible to decrypt. This would put your application in an inconsistent state, but the value of the cookies themselves won’t have been compromised.
User privacy
In addition to improving security, you can also use encrypted cookies to enhance user privacy. As more and more user data lives ‘in the cloud’, and concerns about privacy become more and more prominent, you may want to make assurances to the user that some, or perhaps all, of their data is known only to them.
One way this might be accomplished is to prompt the user for an additional secret after they’ve logged in, and use that to store sensitive information in an encrypted cookie. The problem with cookies, however, is that they expire. By storing them server-side in their encrypted form, and using the ‘Set-Cookie’ header, you can easily persist secret client-side data for longer, even indefinite periods.
An example of this would be an online check register where the transactions are stored online, but the actual bank account data is accessed through an encrypted cookie. By storing the cookie on the server and decrypting it locally, the bank information can be used within the context of the application yet remain private to the user.
Summary
Encrypting cookies on the client provides an additional level of security not just for the obvious reason, that it encrypts sensitive information before storage. It gives you another way in which to design security into your application. It’s not just a tool for security, either, but also a tool for privacy, both of which are important issues in modern web programming.



Impact JavaScript Game Engine
Alan Johnson — Tue, 08 Feb 2011 16:48:55 +0000
I’m constantly blown away by how many types of software that have traditionally only been possible to write either natively or using plugins like Flash can now be written for the web with HTML5 technologies. Lately I’ve been really impressed with Impact, a framework for developing 2D games on the canvas. It has some really helpful and well documented classes for working with sound, animations, and input including touch input on mobile devices, and works in all of the browsers that support the canvas, including IE9. There’s even a bundled browser-based editor!

Even if you’re not interested in writing a game yourself, be sure to check out the Impact demo game, BioLab Disaster. It’s amazing to see what they’re doing with just HTML5 technologies. I have to warn you, though, that Impact comes with a price tag. Impact licenses cost $99 per developer. If you’d prefer open source solutions instead, here’s a great list of JavaScript game engines on Reddit. I’m really curious to know if developers are willing to pay for JavaScript libraries, especially when those libraries are taking on more difficult to write code like graphics in the canvas, audio, and timing in games.
Paid libraries or not, it’s clear that writing really rich applications directly in the browser without the use of flash or other plugins is here to stay. I can’t wait to see what kinds of neat apps our community creates next.



Tips on Learning JavaScript
Andy Walpole — Mon, 07 Feb 2011 09:00:20 +0000
In his seminal article Style Versus Design Jeffrey Zeldman wrote The web used to look like a phone book . What he should have written is: The web used to look like a phone book sitting in a tacky 70s disco. Thanks to the combined garishness of animated GIFs, Java applets and JavaScript, many web pages were distinctly vulgar.
Fast forward to 2011 and animated GIFs and Java applets have been thrown into the dustbin of history; but, surprisingly, JavaScript has enjoyed a renaissance of epic proportions. So much so that you can’t call yourself a web designer today without some knowledge of JavaScript under your belt.
This state of affairs has come about through a number of different reasons. The introduction of AJAX as a means of updating web pages without a manual refresh, much more powerful browsers that can cope with a large amounts of scripting and the widespread use of JavaScript libraries such as jQuery, Dojo and Mootools.
At the beginning of last year I placed learning JavaScript on My Things To Do In 2010 list. A year later, I’ve made substantial progress. I would now classify my skills as intermediate. And with every new website I create, I learn more.
Below are some tips that you may find of use if you too are considering learning JavaScript.
Why You Should Learn JavaScript
If you are a web designer then knowledge of JavaScript will open up a myriad of new design possibilities for you. It’s going to be eye candy a go go! Not only that but you’ll be able to create some genuinely interesting form validation methods that would not be possible with just CSS and server-side script alone.
If you do not have a programming or development background then you will need to set aside some serious learning time as JavaScript will be quite a shock to your senses.
For all intents and purposes JavaScript is (almost) like using a fully functioning programming language, while HTML and CSS are anything but. As I was already familiar with PHP and ASP, diving into the big J wasn’t such a enormous step, but if this is your first introduction to functions, loops and variables then be prepared to suffer.
Become an expert HTML and CSS Coder First
Lets get this clear, it is unthinkable to tackle JavaScript without a sound knowledge of HTML and CSS. The three now go together like a brotherly triad.
You will need an awareness of HTML to use the DOM (more of which below) and most major JavaScript libraries now use CSS as a method of applying the script on the web page. For instance, Dojo and jQuery have incorporated the Sizzle Selector Engine to harness the power of basic and advanced CSS for their libraries.
If you know how to push CSS to its limits then you’ll be equipped to do the same to jQuery.
Use a JavaScript Library
Occasionally I read an opinion on the web that jQuery isn’t proper JavaScript, and so consequently the developer isn’t  a proper JavaScript user. This argument is complete rubbish.
jQuery, and all the others, are 100% JavaScript. They primarily exist not to solve problems in the scripting language itself but to rectify inconsistencies between browsers.
If you consider CSS issues between the legacy Internet Explorer versions and the rest of the pack to be a headache then, oh boy, you just wait for JavaScript to send you crazy.
As an example below is the code that Andy Langton uses to find the viewport width and height. Note the three different methods that are necessary for multi-browser support.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
   var viewportWidth;
    var viewportHeight;
 
    /* the more standards compliant browsers (mozilla/netscape/opera/IE8) use window.innerWidth and window.innerHeight*/
    if (typeof window.innerWidth != 'undefined') {
 
        viewportWidth = window.innerWidth;
        viewportHeight = window.innerHeight;
        /* IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) */
    } else if (
 
    typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth !== 0) {
 
        viewportWidth = document.documentElement.clientWidth;
        viewportHeight = document.documentElement.clientHeight;
 
    } else {
        viewportWidth = document.getElementsByTagName('body')[0].clientWidth;
        viewportHeight = document.getElementsByTagName('body')[0].clientHeight;
    }

Alright, so after the slow death of IE6 the above code will be redundant, but there are a multitude of similar examples that could be given because the differences between Internet Explorer and the rest can be quite maddeningly bonkers.
JavaScript libraries will provide to you an easy way of dealing with issues that affect versions of older versions of Microsoft’s browser.
Freely using them is about understanding how Open Source works. The principles behind this programming philosophy is about finding a solution to a problem, and then allowing others to replicate the solution for their own purposes. This is why the Open Source approach is so effective. It doesn’t make you a lesser developer by relying on an Open Source library.
I started my educational quest at the beginning of 2010 with a copy of David Flanagan’s ‘JavaScript: the Definitive Guide’ and enrolment on a UK Open University course. After a few months of trying learn raw JavaScript it become apparent to me that I needed the help of a library.
However, those first few formative months were extremely important as it gave me an appreciation of the DOM (Document Object Method) and problems associated therewith.
The DOM is, if you don’t know, how JavaScript interacts with the HTML page.
Follow the DOM, not the Sizzle
After several months of regularly using jQuery and Dojo I’ll now be returning to core JavaScript in 2011 and incorporating that into my code wherever possible.
Essentially, jQuery is a series of functions. It is important to understand that it is not there to replace JavaScript, but it is an aid to using it more quickly and effectively. Understand and use raw JavaScript first, and rely on jQuery or one of the other existing projects next if you must.
In jQuery this is how you would find a div with an id

1
var exampleId = jQuery(#example);

While in DOM JavaScript it is:

1
var exampleId = document.getElementById(example);

Use the DOM object method wherever possible and don’t pass it through a function unless it is necessary to do so.
There is some criticism that JavaScript libraries carry too much code bloat, but by using the DOM and the JS core you minimise this issue.
In a similar spirit, I also use the core JavaScript loops and arrays rather than anything provided by jQuery. The point is to use a library, but don’t be dependent on it. For that you’ll need to understand the differences and then make decisions about when is the appropriate moment to use a somebody else’s script, and when you shouldn’t.
There is though one good reason why you should go through all the pain of forsaking jQuery and tackling JavaScript without an aid and that is because it will make you immensely employable.
You quite likely to be head hunted by an agency if you have advanced JavaScript experience as it is a skillset that is currently much in demand, and it would be fair to forecast the future and state that JavaScript will become an increasingly dominant web technology in coming years, rather than a shrinking one.
Try to Use Object Detection, not Browser Sniffing
Even with the best equipped JavaScript library, you will still regularly run into issues with IE that needs special attention.
If the JavaScript is used for non-essential eye candy, it may well be the best option to forget about IE 6 or 7 by creating a conditional statement that blocks both or either of these browsers from using the code. After all, time is money ñ and you have your sanity to worry about.
It is possible to detect the make and version number of a browser but the code to do so can be unreliable; indeed, jQuery have recommended against its use. A more trustworthy alternative is to use object detection.
jQuery has a limited set of object detection based around support, but Modernizr is a well-loved and well-respected script.
An example of  Modernizr in action. The code below tests of HTML local.storage.

1
2
3
4
5
6
7
8
9
if (Modernizr.localstorage){
 
// For browers Chrome 4+; Firefox 3.5+; IE8+; Opera 10.5+; Safari 4+; plus iPhone 2.0+; and Android 2.0+.
 
} else {
 
// Use cookies for all the others
 
}

This is the code I use to run JS in any browser apart from Internet Explorer 6:

1
2
3
4
5
if (document.documentElement && typeof document.documentElement.style.maxHeight != "undefined") {
 
// code here
 
}

JavaScript purists might have little fit at the above slice of code as they consider objects should only be used for the object it is testing for, but you are never going to have perfection when comes to  Internet Explorer.
Use JSLint
JSLint is kind of like a JavaScript validator, or a a code quality tool as it is described on their website. If you are new to this script and are wondering why your code isn’t working then cut and paste it into JSLint and let the automatically generated suggestions help you debug your work.
Even a single wrongly placed comma can stop the whole script from running, especially in IE which is a lot less tolerant of mistakes.
Keep your Code Tidy and Use Comments
If you write JavaScript without explaining your code you are either a complete arsehole (because you couldn’t care less about the developer after you) or you are a masochist, because when you return to your code a few months later it will be difficult to understand.
Use comments liberally. It is better to have too many comments then too few, at least then you can delete unnecessary comments at the end of the job (refactoring comments?!).
In JavaScript there are two different ways to leave comments. They are:

1
2
3
4
5
// This is a single line comment
 
/*
This is a block of comments
*/

Likewise keep your code need and tidy and you can do that by using the rather wonderful JSBeautifier. This will indent your code into an easy to read pattern.
Also, I have now started to add a dollar sign to my variables akin to PHP. Unlike in PHP, there is no such requirement in JavaScript but nevertheless I find it easier on the eye when quickly scanning a document.
Conclusion
JavaScript with the DOM bumps mentioned above can be both infuriating and frustrating. But, like anything else, persistence pays off ñ and you may even grow to quite like the cantankerous old bugger.
One thing for sure though is that JavaScript is a key web technology of the present and the future. You ignore it at your peril. So buy some books, watch some Think Vitamin tutorials and get coding!
If you have any recommendations for JavaScript newbies that builds on this article, whether books, guides or techniques – then please post them below.



37signals ‘Cinco’ framework to be open-sourced
Ryan Carson — Wed, 02 Feb 2011 05:29:17 +0000
Revealed in a comment by DHH on this blog post, 37signals is definitely going to open-source their new framework for single-page JavaScript apps. Very excited to see how this develops. Here’s DHH’s comment …
Hold on for our new Cinco framework. It’s basically Rails for single-page JS apps. We just used it to introduce Basecamp Mobile. A bunch of the supporting frameworks have already been released. The template language eco and the compiler stitch. We’ll be releasing the rest of the pieces in due time.



Create JavaScript Apps with Backbone.js
Jim Hoskins — Wed, 12 Jan 2011 20:44:15 +0000
Building JavaScript applications for the browser can become really complicated. Until recently we had two main options: create your application structure from scratch, or use a JavaScript application framework like Cappucinno or SproutCore.
Building a large JavaScript application without a framework can lead to unorganized, difficult to maintain code. Libraries like jQuery and Prototype offer us great tools to normalize DOM APIs and browser quirks, but don’t offer much direction as to how to organize our application logic and data.
On the other side of the spectrum, Frameworks like SproutCore and Cappucinno offer extremely robust application tools like controllers, models, key value observing and more. However these frameworks also include a large UI library, and a very steep learning curve.
So what is there in the middle, for us writing medium to large size JavaScript applications? The SproutCore: Amber project promises to extract some of the most useful components of SproutCore to create a “light” version that can be used anywhere.
37Signals has taken the route of creating their own framework, and there is a possibility it may be released as an open source project, much like Ruby on Rails. My favorite framework that I have had the chance to use recently is Backbone.js.

Backbone.js is a very lightweight toolkit that provides things like models, controllers, and views. The models allow you to keep track of the data in your application, as well as organize your app’s business logic.
The models can also very easily interact with a RESTful API provided by your web application, making much easier to synchronize data between your frontend and backend applications.
The views offer the ability to easily update your page elements when the data in the model is updated. The controllers offer utilities for managing changes in your application state by utilizing the fragment, the part of the URL after the #.
Backbone.js provides the tools, but does not impose too much structure on your application. I have found this to be a very good balance. I am able to integrate it fairly easily into my existing applications, with great benefits.
The downside the this is that it does take a little bit of reading and experimenting to see exactly all of the pieces of Backbone.js fit together. I suggest taking a look at not only the documentation, but also the Todo List application, and its annotated source.
Backbone.js is intentionally very small (3.9kb packed and gzipped) and it’s only hard dependency is underscore.js, which provides a library of useful general purpose JavaScript functions. Backbone.js can also use jQuery or zepto.js for helping with view functionality.
What are your favorite tools for organizing JavaScript applications?



How to Build a Simple Web Service with Node.js
Ryan Carson — Wed, 12 Jan 2011 09:01:31 +0000
This 9-minute video tutorial on JavaScript Node.js, we expand upon the simple HTTP server example, and create a web service that parses the URL to perform simple functions.

This video is from Think Vitamin Membership, a high-quality video training site, curated by us at Carsonified and Think Vitamin, with hundreds of short videos on topics like …

Accessibility
CSS3
Design
Django
HTML & CSS
HTML5
JavaScript
jQuery
NoSQL
PHP
Responsive Web Design
Ruby
Ruby on Rails
SASS
UX
Version Control
WordPress Theme Design

10 new videos are added every week, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.



JavaScript DOM event tutorial
Ryan Carson — Thu, 25 Nov 2010 14:53:25 +0000
In this 8-minute JavaScript DOM tutorial video we look at how to bind event listeners to your DOM elements.

This video is from Think Vitamin Membership, a high-quality video training site, curated by us at Carsonified and Think Vitamin, with hundreds of short videos on topics like …

Accessibility
CSS3
Design
Django
HTML & CSS
HTML5
JavaScript
jQuery
NoSQL
PHP
Ruby
Ruby on Rails
SASS
UX
Version Control

10 new videos are added every week, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.



Free JavaScript & JQuery E-Book
Keir Whitaker — Tue, 23 Nov 2010 10:48:01 +0000
“Essential JavaScript & jQuery Design Patterns For Beginners” by Addy Osmani looks interesting. As Addy says “design patterns are reusable solutions to commonly occurring problems in software development and are a very useful tool to have at your disposal.”



New Mobile Web Framework
Keir Whitaker — Tue, 09 Nov 2010 09:29:59 +0000
Zepto.js is a new JavaScript framework for mobile apps and sites from Thomas Fuchs. It’s super small coming in at under 2k and features a jQuery-compatible syntax. You can learn more over on by having a quick look at a presentation from the recent vienna.js meetup.



Around the Web: Disrupt Disbands, Grouspawn, Twitter’s Javascript API
Chrissie Brodigan — Thu, 30 Sep 2010 04:54:20 +0000
It’s Wednesday, so this mid-week roundup is devoted to all things business and development, and a little focused on news around TechCrunch Disrupt. Some links are newsworthy, some retweeted across Twitter, and others just meet our “awesomeness” requirement, and regardless we hope you’ll enjoy them. Without further delay:

From TechCrunch Disrupt, on the Angel v. VC panel, Mark Suster cogently recaps and writes, “What I *Would Have* Said at TechCrunch Disrupt.
This one is for javascript API lovers The Tech Behind New Twitter (via Twitter’s Engineering blog, which I only just found by attending TC Disrupt!)
Brilliant business or just bizarre? Groupon Launched “Grouspawn” a dating service for users who meet on Groupon Dates & have a baby later (announced by ceo Andrew Mason at TC Disrupt) hint: for a javascript Easter egg – scroll to the bottom and hover over the image in the lower left.
Malcolm Gladwell writes, Why the Revolution Will Not Be Tweeted
Mailchimp on going Freemium “One Year later”

Wildcard: Thank goodness for @oatmeal, “Why You Don’t Like Changes to Your Design”
Please shoot me links to projects your working on or awesome things you’ve released! news@thinkvitamin.com
Handpicked by Chrissie (@tenaciouscb)



Twitter @Anywhere Revisited
Richard Shepherd — Mon, 06 Sep 2010 14:00:01 +0000
I must be honest, I was pretty unimpressed with Twitter @Anywhere when it first launched earlier this year. Of course I hadn’t bothered to check it out, but it seemed like ‘Integration Lite’ – just a very simple way for bloggers to include Twitter on their site.
As Wired reported back in March Twitter’s Evan Williams promised @Anywhere would “reduce friction.”
“You could be reading your favourite columnist [and] you can easily tweet from the column itself if […] you may just want to follow the columnist […] without going back to Twitter.”
Amongst the launch partners for @Anywhere were Digg, Huffington Post and The New York Times. And one of the most high profile users the little known Follow Finder from The Mighty Google.

But alas, it was more a fizzle than a firework and like many at the time I was rather nonplussed.
I’m pleased to say I’ve been completely converted. Not only is playing with Twitter inherently a cool thing to do, it can add real power to your website and more importantly your web applications. Indeed, it’s the scope for easily including Twitter functionality in web applications that’s really exciting.
So let’s take a look at some of this functionality and how you can use it. You’ll be up and running in just minutes, and after briefly looking at some of the simpler methods we’ll dive straight in to integrating Twitter right into your web app.
Registering for @Anywhere
The first thing you need to do is register for an Application ID. It’s ridiculously simply to get, but perhaps worth some explaining to the uninitiated. First head on over to http://dev.twitter.com/anywhere and click on the ‘Start using it now’ button.

You’ll be swiftly taken to a one-page form where you register your app. The first question, particularly to those new at this whole API game, is ‘what if I don’t have an app?’.
Let’s say you just want to use hovercards on your blog. Or let’s say you want your users to be able to tweet about your blog articles by providing them a tweet box at the footer of each page. Not really an ‘app’ is it? More of a feature, a widget perhaps.
Well, in the big wide world of APIs what you have is a web app my friend and you need to accept it! Even the humble ‘Linkify’ method (automatically turning all Twitter usernames into links to their profiles) makes your humble blog post a web application of sorts. Deal with this fuzzy distinction and move on. We need that app ID!!
NB: For the rest of this article I’ll use the term app/application, but it equally applies to your site/blog
Completing the Form
Application Name
Name your application wisely because users will see this name when they are asked to authorise your app; although it’s worth noting that certain functionality, like linkifying and hovercards, doesn’t require users to see this name.
Callback URL
If you intend to use some of the @Anywhere functionality which requires users to authenticate your app then Twitter needs to know which page to send the API response to (which includes lots of handy data about the user that we can tap into using JavaScript!). The callback URL is most likely the very same page that has called the authentication.

If you’re only using simple @Anywhere methods like linkify you can just put your site’s homepage in here.
Default Access Type
This defaults to Read-only, but we want to use some advanced @Anywhere methods so make sure you change this to Read & Write.
Basic functions
Okay, we’ve filled up this car with petrol/gas so it’s time to take it out for a spin! Open a new HTML document and in the  of the document include the following line of code:

1
<script src="http://platform.twitter.com/anywhere.js?id=YOUR-APP-ID-GOES-HERE&v=1">script>

Don’t forget to add your app ID into the URL.
Before I go on I feel I must address those of you who now resemble Yosamite Sam, with steam coming out of their ears at the idea of ever including a JavaScript file at the top of a page. But including the anywhere.js file in the head makes a lot of sense for a number of reasons, outlined by Twitter themselves:

It’s small. Less than 3kb to be exact, gzipped up into a tiny package.
All dependencies for @Anywhere features are loaded asynchronously, so you only get what you need when you need it.
Most importantly, when a user logs in and authenticates your app the Twitter login page redirects back to the callback URL. This happens in a pop-up window, so if anywhere.js is at the bottom of the page it’ll mean that the user sees your site in that pop-up before it disappears. Which looks bad and, as Twitter put it, ‘is a poor user experience’.

So leave it in the  and let’s move on. Now we need to initialise the a global @Anywhere object which we do with:

1
2
3
<script>
twttr.anywhere();
script>

For those who have tried to run that script, you’ll see that nothing happens. That’s because we need to give it a callback function of some sort. For example, to linkify every Twitter username on a page you simply need:

1
2
3
4
5
<script>
twttr.anywhere(function(T) {
T.linkifyUsers();
});
script>

What’s with the capital ‘T’? Well that’s just Twitter’s convention so we’ll stick with it, but you’re welcome to change it to a more descriptive name. An instance of the API client is passed into T for us to then call methods on, just as we’ve done above.
Run that puppy on a page which has a username in the markup and watch it magically turn into a link. It was roughly about now that I gave up on @Anywhere earlier this year, but stick with me here – it get’s better.
Hovercards
Another method that works in a similar way is Hovercards, which work in the same way.

1
2
3
4
5
<script>
twttr.anywhere(function(T) {
T.hovercards();
});
script>


With linkifying and hovercarding under our belts its worth looking at another couple of handy features.
Scope
You can limit the scope of a method by passing in a CSS selector. A lot of you will spot that this looks a lot like jQuery and that’s because it’s using the same Sizzle selection engine.
For example, to linkify usernames only in the DIV with an ID of ‘sidebar’ you could use the following code

1
2
3
4
5
<script>
twttr.anywhere(function(T) {
T(‘#sidebar’).linkifyUsers();
});
script>

Configuration Options
There are a number of option that we can pass to these methods, which we do in an object literal. Again, if you’ve used jQuery before then this will be nothing new to you:

1
2
3
4
5
<script>
twttr.anywhere(function(T) {
T(‘#sidebar’).hovercards({ expanded: true});
});
script>

Adding {expanded: true} does exactly what it says – it renders the Hovercard in it’s expanded form from the off, rather than waiting for the user to click ‘more’.
Moving Swiftly On
I’m going to skip a bit here, which relates to some of the other configuration options you can use with the various “Anywhere methods. I highly recommend Twitter’s own documentation which you can find at http://dev.twitter.com/anywhere/begin.
Getting more Advanced
If you’ve spent much time surfing the interweb you’ve at some point seen that pop-up window asking you if you authorise an app or a site to play with your Twitter account. 
If, like me, you blindly click yes you give that site direct access to lots of your personal (albeit public) information. Normally this isn’t a problem, but with great power comes great responsibility – as James Cunningham of Twifficiency fame (more at TechCrunch).

There are a couple of ways @Anywhere uses this connectivity. The first is with built in functions like the Tweet Box and the Follow button. Both need the user to login to Twitter and authorise your app, so both will cause the authorisation pop-up. We can call both like so:

1
2
3
4
5
6
<script>
twttr.anywhere(function(T) {
T('#follow-button').followButton("richardshepherd");
T('#tweet-box').tweetBox();
});
script>

This places a follow button in the element with an ID of ‘follow-button’ (and which is set to follow my Twitter account!), and a tweetbox in the element with an ID of ‘tweet-box’.

You’ll can find further details of the Tweet Box and Follow Buttons in the official documentation, but I think it get’s much more exciting to look at connecting your app with someone’s Twitter account and pulling information from their public profile. So let’s go ahead and crank things up! It’s surprisingly simple.

1
2
3
4
5
<script>
twttr.anywhere(function(T) {
T(‘#connect’).connectButton({ size: “medium” });
});
script>

And that’s it. Try it out, and you’ll see the familiar pop-up asking for you to authorise your app (the name you gave it when you signed up). You can change the size be replacing ‘medium’ with ‘small’, ‘large’ or ‘xlarge’.

Medium is the default, so if you’re happy with that you can remove it from the code. But how about your own custom connect button – how cool would that be? It turns out that the Twitter API has a signIn method which we can attach to any element: text, image or whatever you fancy.
Let’s say you have created your own CSS rollover button, applied to a span with and ID of twitterLogin. Here’s how you’d use JavaScript and the Twitter API to hook the signIn method to that span:

1
2
3
4
5
6
7
<script>
twttr.anywhere(function(T) {
document.getElementById(‘twitterLogin’).onclick = function() {
T.signIn();
}
});
script>

We are now freed from the shackles of Twitter’s own graphics and buttons, which makes it possible to create a unique experience for your own app or site. If the user is logged in, the pop-up window will simply ask them to authorise your app. If they aren’t logged in to Twitter it will also ask them for their login details.
I Can Haz your Details?
So your web app now has a connect button, and let’s assume your user has clicked it and logged in/authorised your app. Sweet. What next?
You should have set the Twitter callback URL to the same page as your web app, which means the pop-up will disappear and your page will be sent a bunch of new data (think of it as an AJAX request and response). This means you can use Javascript to check if the user is connected with the rather handy isConnected method. And, assuming it’s all gone to plan, the currentUser property contains lots of handy information.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
twttr.anywhere(function(T) {
if (T.isConnected()) {
// This user is connected. Awesome!
var user = T.currentUser;
var screenName = user.data(‘screen_name’);
alert(‘Hi there ‘ + screenName);
} else {
// the user isn’t connected, so probably best to show them
// a connect button!
T(‘#twitterLogin’).connectButton();
}
});
script>

Admittedly the use of a JavaScript alert here is almost criminal, but you get the idea. Include jQuery and you can start injecting the DOM with lots of Twitter goodness, personalising the user’s experience.
So what other properties can we access, apart from Screen Name? Well, pretty much all of the user’s public profile information is up for grabs. Here are some of the most useful:

description
 followers_count
 following
 profile_image_url
 location
 name
 time_zone

And you can check out a full like at http://dev.twitter.com/anywhere/begin#user-properties
So using our example above you could access the profile image with:

1
var imageHTML = ‘<img src=”’ + user.data(‘profile_image_url’) + ‘“ />’;

What Next?
Of course @Anywhere is no substitute for server side integration with the Twitter API, but it’s a lean way of enhancing your web app/web sites experience for Twitter users.
Have you started to use @Anywhere? If so, tell us how and whether you think it’s enhanced your web application or site. And which features would you like to see in @Anywhere in future releases?
Further reading
Have you been bitten by the @Anywhere bug? If so, here are some great places to find out more…


http://www.slideshare.net/toddkloots/anywhere/
http://platform.twitter.com/js-api.html


I also really like this integration of Twitter Hovercards into a WordPress blog comments

http://www.binarymoon.co.uk/2010/05/integrate-twitters-wordpress-comments/




HTML5 Video: Basic JavaScript Interaction [Video Tutorial]
Keir Whitaker — Tue, 10 Aug 2010 14:39:03 +0000
It’s Tuesday and time for our first visit of the week to the Think Vitamin Membership video library. Today Jim looks at implementing some basic HTML5 video controls via JavaScript. This video is just under 6 minutes long.
Just a quick update to mention the fact that you can now view this video on your iPhone and iPad.













How to Use jQuery Selectors [Tutorial Video]
Ryan Carson — Thu, 03 Jun 2010 07:10:47 +0000
We’ve decided to release one more video from the Think Vitamin Membership Training Library for you guys :) It’s launching next week, so get ready!
If you missed the Advanced CSS3 Box-Shadow video, feel free to check it out as well (the feedback has been amazing – everyone seems to love them).

Here is a seven minute video that will teach you how to use jQuery Selectors on your site. We will be adding 70+ videos like this per month to the Think Vitamin Membership Training Course Library. You can get access to all the videos for less than $1 per day.
The next 10 people to signup at membership.thinkvitamin.com will receive 50% off their first month. Yippee! :)

View in HD
View on iPhone or Android
View on iPad





John Resig on Advanced Javascript to Improve your Web App
Keir Whitaker — Tue, 06 Apr 2010 10:54:29 +0000

In February 2010 John Resig, the creator and lead developer of the jQuery JavaScript library, spoke at the annual Future of Web Apps Miami conference. During this 25 minute talk John outlines many of the new features and ideas behind jQuery 1.4. A full transcript is available below.

Watch this and other videos directly on our Vimeo Channel


Transcript
Thanks. I want to thank everyone for having me here today. I really appreciate it. I wanted to talk about a couple of things today, mostly around jQuery itself, but hopefully generic enough that in case you’re not using jQuery at least it will still be applicable to your web apps.
There are a couple of techniques I want to look at that hopefully all of you encounter when developing web applications. You always want to improve the performance of your JavaScript code. You always want to improve the accessibility, and you want to make your code simpler. Finally, you want to make the design process much easier.
When it comes to performance, there are a number of things in JavaScript, three of which are fairly easy, but especially so in jQuery. One is event delegation. Event delegation is a technique that routes around the traditional method of binding events. What I mean by that is typically when you attach a click handler to an element, you’re attaching a click to every single element that you want to attach to. This can be really costly. If you have a table with a couple of thousand table cells in it, that is going to be a lot of click handlers to attach.
Event delegation is whenever you attach a handler to some parent element up the tree, for example you attach it to the table itself rather than each individual table cell, and this takes advantage of the browser’s native event bubbling. What that means is when the user clicks on the table cell, the event will bubble up the tree, up to the table, and you can now handle the even there. That’s event delegation.
In this way, you only have to attach one event to the document, instead of a couple of thousand. It’s much faster and scales much better. jQuery provides a couple of methods for handling this; one is called [“dotlive”]. Another one is one that we just added the other day called “the delegate” method. What I think is really interesting about delegation is, in addition to it being much faster, it works in all current and all future elements as well. Even though there are only a thousand table cells to the document at the moment, if you add another thousand, it will continue to work on those as well. You don’t have to attach new handlers to handle them.
The delegate method is one that we just added the other day. This one embodies delegation at its very core. This is the exact example I was talking about. You’re attaching a click event to a core element, a root element such as the table. Then you’re watching for any (in this case) hovers over any table cell. It’s a very simple piece of code, and it gets you exactly what you want in the end.
Live events is a slightly different way of writing and doing delegation, but the nice thing is it works and appears to work in the same exact way as event binding does. You get to use the same syntax. You can use a selector, and then you can attach events directly to it, or seemingly directly to it. In the background, jQuery routes around and makes sure that it goes in all the right places.
For example, here we have these menus that when you mouse over, it does a little animation to toggle out the sub menu. The nice thing is if we add new menu, the animation will also work on the new one we just added. In this way, it’s live. It will continue to work with both current and future elements on the page.
Another technique is something you don’t necessarily have to do yourself, but it’s something that jQuery internalizes. It’s the ability of storing HTML fragments in DOM fragments. What this means is if you’re generating a piece of HTML on jQuery, an HTML string, we’re taking that and converting it to a number of DOM nodes, and sticking that in a DOM fragment.
What I mean by that is the DOM has this concept of, amongst other things, a document fragment. This fragment is sort of a very lightweight container for holding DOM nodes. You can put them in; it acts as a sort of collection. In this case, it’s a very simplified version of what we’re doing in jQuery core, which is if you want to take that HTML snippet and turn it into something held in a document fragment, we take it and enter HTML to generate some nodes. We extract those nodes back out and stick it in a fragment.
What’s interesting about a fragment is that you can perform operations using a fragment and they’re incredibly fast. What I mean by that is you can insert in an entire fragment into a document, but when you insert it, you’re not inserting the fragment itself but the nodes contained within the fragment. In this way, it’s very fast. We got some big speed ups by switching our code to this.
Also, we can now cache those fragments. If we have an HTML string that is coming in, and we’re generating a fragment out at the end, we can cache that result; we can cache the string to the fragment. We can use that and save having to regenerate that entire fragment again, and again. In this way, jQuery internalizes this and handles all that immediately.
Another technique that is good for performance, and is much larger than jQuery itself, is loading your JavaScript library from a CDN. A CDN is short for Content Delivery Network and what that effectively translates into is a bunch of geo-position datacenters around the globe. Not all of us have the finances to build a whole bunch of datacenters all around, but there are a number of great services that handle this. Amazon CloudFront is one of them. We use EdgeCast in jQuery, and MediaTemple is hosting EdgeCast. Additionally, many of the popular JavaScript libraries are also hosted by Google and Microsoft. They host them on their private CDNs as well.
What is really nice about the CDNs, in addition to being geo-positioned, is that the files are automatically minified and gzipped. Minifying and gzipping your JavaScript is the best way to serve your JavaScript code, absolutely. The very first step you should do when pushing JavaScript code into production is to run it through a minifier first. A typical minifier is like the recently released Google Closure or [0:49:21?], or tools like that. Those strip out all the white space, all the comments, all that stuff, and reduce your code down to the smallest possible code you can send to the browser.
Additionally, gzipping is something you can configure in your web server and this will compress your code even further. In the case of jQuery, we started out at just over 150K with raw script, but when we actually transmitted down, we were only sending about 20K with the code, since it’s been minified and gzipped along the way. This is a huge speed up and obviously, this is a big difference in the amount of data that we have to transmit. It saves us bandwidth and it loads faster for the users.
For improving accessibility, a lot of what can be done is working in a very unobtrusive manner. In this way, this is a generic technique that works in all of your JavaScripting, which is that when you override the way that a browser typically does something, for example submitting a form or clicking a link, you can then go through and implement your own functionality. This is effectively unobtrusive scripting. You’re taking something that works already, in a browser, and you layer on your own functionality.
jQuery makes this really easy in addition to providing techniques for handling that, but all your JavaScripts in jQuery code can be encapsulated in the “document ready event”. This event fires the instant your document is ready to be manipulated and traversed. This is very useful because, almost always, this event will fire before the page is visible to the user. You can get in there and make changes to the page, and change how it’s going to display. Then the user will see that modified result.
Probably the most basic example of doing unobtrusive scripting is overriding all links that are going to be clicked, and when they’re clicked we’re going to load the URL into the page itself. The central line here is “return false”, and in jQuery that is telling the browser to prevent the normal click action and we’re going to override it and do something else instead. In this case, clicking this link would normally take us to a different page, but now we click it instead and we load in that page and inject it into our document. In this case, loading and injecting is done with the jQuery load method.
One technique that can serve really well here is that jQuery provides an additional header in every single Ajax request that occurs. It’s called the “x requested with header”, so if you see in your code – this is a PHP snippet here, but it will be similar in any other language it uses. If you see that this header exists, you can then adapt your content to be displayed in a different manner. Maybe you’ll display in an XML or JSON or what have you. A better technique might be, if you want to load in an HTML fragment, is to strip off the header and footer of your page. That way you can dynamically request your page and only grab the inner contents. You can grab that and then inject it into your page.
One alternative to that is this additional trick in jQuery, which is a load method that I showed before; you can load in a file that you specify and grab the HTML contents from that file and inject it into a page. If you’ll note there, on the end, just after the file there is an H2. That is requesting the HTML file, serializing it into a DOM structure, and then searching and looking for all the H2 elements. This is really useful because you can then grab and load in chunks of a remote HTML document, and inject it into your site, without ever doing any server-side manipulation. In this way, as a front-end developer, you have an incredible amount of control over the content that you can grab and load to your page. I love this trick because I don’t ever have to touch the server in this case. It’s great.
Reducing complexity, at least in jQuery land, all relates to enhancing that relationship around the DOM element. jQuery provides a number of tools for making it easier to communicate through a DOM element. I’ll show you what I mean.
jQuery provide an API called the Data API. It provides this data method that you can use, to both access and set values on a DOM element. What’s interesting about this and what makes this different from accessing and getting DOM attributes, is that when you access and set DOM attributes, they’re visible; they’re permanently attached to the element itself, but what we’re doing in jQuery is we actually create a separate data store and store that separately, away from the element. Any time you set or get data on that element, you’re actually setting it in our data store. It’s very fast.
There are a lot of advantages to that. In jQuery, we use this central data store to store all the events that we bind to an element. Instead of attaching the handlers directly to the element itself, we store it in our separate data store. The nice thing about this is we can manage all the garbage collection issues surrounding Internet Explorer. What’s good about this is we have all our data in this separate store, and when the element is removed, we can handle that and clean up all the data we have there. In that way, you will be recapturing all the memory that is being used, every single time, instead of there being nasty memory leaks shooting all around, as want to happen in Internet Explorer.
Another cool thing we have implemented is if you set or get a data value, we trigger an event. You can override this event and implement new functionality. If you’re writing a plug-in where you’re looking for a specific value to be set or get, you can override that and implement your own values that should be set or get. This could be really cool. Then you use the Data API of setting and getting values for your plug-in.
This comes up to custom events. Custom events – what’s interesting in jQuery is we have the typical way of binding and triggering events, and it’s 100% identical to doing your own custom events, so if you have an event that is the name of your plug-in, or in this case my plug-in, it doesn’t matter; jQuery handles that identically and it works identically everywhere.
What’s nice about this is you can create and trigger your own events and use it as a way of communicating around the document. This is a bit different from the typical way in which you would see it triggered in a document, in that it’s not going to be triggered by a click; this is something you have to trigger manually. One thing that we have that is layered on top of this is the concept of event name spaces. Event name spaces allow you to, for example, attach a click or focus, but scoped within a particular name. In this case, we have a click that is within the scope within the name of a particular plug-in. What’s cool about this is you can then unbind all of the events that were bounded by a particular plug-in.
This is important because otherwise, the plug-in would have to maintain a list of all the handlers that is bound to any given element at any given time. That is very costly and something that we don’t want plug-in authors to have to worry about. This is something that you can handle completely just by giving all your handlers names.
In the end, what’s great is you can create these custom events as a way of communicating. The really nice thing about custom events in general is that it is a way of communicating from one-to-many, meaning that if you want to send a message, for example “remove”, you want to tell these DOM elements to remove, whenever that may occur; there could be any number of actions on the other end waiting to occur, based upon that trigger.
For example, here we have two different plug-ins that are both watching for a “remove” event to occur. They’ll both be triggered when the trigger runs. But, when you run the trigger, you don’t have to know that there are events actually bound. There could be zero events bound. There could be ten events bound. There could be any number and in that way it provides a very graceful way of coding. You can just trigger these events to occur, and it will just gracefully happen in your document.
jQuery also provides a way of doing what are called “special” events. These work at a more core, fundamental level compared to custom events. Special events are actually a complete way of implementing an event at a very core level. For example, if you want to simulate – at least in jQuery core, we use it to simulate the “submit” and “change” events in Internet Explorer. In Internet Explorer, those events are rather broken. We also use it to implement “mouse hunter”, “mouse leave”, “focus in” and “focus out” in all the other browsers.
Just to show you an example of what it takes, this is the total code to implement the focus in and focus out events in all browsers, except for IE. It’s actually very little code and it’s overriding the normal behavior so instead of attaching the handler to the document, we do it in a slightly different way.
One plug-in, for example, that makes use of this is a plug-in I wrote last night called “Hot Keys” where you can bind a key down, or a key up, or key press, and you can give a key combination. For example, when the key down one occurs on Ctrl A, do something. In this case, we’re returning false and that will prevent you from doing Ctrl A on the document, selecting everything presumably. You could also say Ctrl A and space Meta A to prevent on an Apple keyboard. This is the sort of thing you can do with special events.
A nice thing is being able to go in and simplify your design. What we provide in the jQuery project for that is jQuery UI. jQuery UI is a set of components and set of widgets that you can use, you can drop into your application, and they will just work. We designed them in a way that they’re not only easy to use but they have a really good API.
On top of that, they’re all themeable and customizable. I’ll show you an example here. You can completely customize them to the style of your website. This is the jQuery UI ThemeRoller. We can sort of see a selection here of jQuery UI components. For example, we have an accordion, a tabs widget, slider, date picker, dialog, progress bar, etc. These are all in jQuery UI core.
You can go in and you can actually start to customize that and load in other themes. We have a number of prebuilt themes. You can load in this orange-ish style. We can try this grayish style. There are different ones we have prebuilt, but what’s nice about this is you can go in and you can customize each of these things completely to your own desires.
If we didn’t like this particular header background and we wanted something different, we could go in and adapt the color to exactly what we wanted to see. Instead of this dark gray or something, maybe we want something much brighter. It will take that color, and actually generate all the CSS and all the images needed to view this theme, and give it to you in a single, nice, compressed CSS file right to the image file. And, it will work in all browsers, including IE6. We have all the alpha transparencies and everything already done.
I love this personally, because dealing with CSS cross-browser issues is absolutely the last thing I want to do. This is some way to route around that, that we’ve already taken care of all those problems and we’ve implemented in a very slick way. One cool thing about this is, for example, there is a number of jQuery plug-ins out there that are already themeable using the ThemeRoller, ones beyond jQuery UI.
For example, this is a jQuery plug-in called jqGrid. Since jqGrid is themeable with ThemeRoller, you can then load this tool called the ThemeRoller bookmarklet. I don’t remember the full name of it. You get this little panel, the same as what you would see in the ThemeRoller page. You can layer it on top of any page just using ThemeRoller. They’re using this bluish theme but let’s say we wanted a grid but we didn’t want that bluish theme; we wanted one that is more orange-ish. You can click it, load that theme dynamically and you can see how it will look, right inside the website. You can get there, tweak it to your heart’s content; you can tweak the header, colors, and everything. That will just work. That is something I find to be really cool.
What are we working on? In the jQuery project there are a few things we’re working on at the moment. We’re working on a better dynamic script loader that will do all sorts of dependency management. We’re working on a new templating engine so hopefully both of those will be coming up in new releases. We’re also working on a rewrite of the Ajax module, to become more extensible. And, perhaps the largest is that we’re working on good mobile support.
We want to make sure that not only is jQuery the best library for doing desktop web applications, but we want to make sure that same code base is the best library for doing mobile applications. To get there, we’re going to be testing against a whole bunch of mobile browsers on a number of different devices. I have a bunch of devices at home that I have set up and I’m already starting to go through them. We’re going to make sure that jQuery is going to work, not only in normal IE6, IE7, IE8, Opera, all the browsers, but it’s going to work in mobile IE, mobile Safari, Opera, all those mobile browsers, at least the ones that are feasible to implement jQuery on. This is something that we’re working on and we hope to make some very good progress here, very soon. There is some more information about the jQuery project if you have any questions, and I think I’m out of time but thank you all for having me today.
Q + A
Ryan: Thank you very much. While we do the switchover we probably have about a minute for a question. Are there any questions for John?
Q: Will jQuery support internationalization?
John: jQuery core probably won’t but we already do some of that for jQuery UI. I think we’ve been talking about moving the validation plug-in, for example, into jQuery UI. The validation plug-in handles a lot of that stuff, especially number formatting. That is something, that and the addition of something like get text replacement that you can use for translating chunks of strings is another thing I’ve seen requested. Again, I don’t think either of those would be in jQuery core so much as probably jQuery UI. Most of those things typically relate to building a UI component, not a jQuery UI component, but a UI component in general.
Ryan: We probably have time for another one.
Q: The need to support Internet Explorer 6 and some of those older browsers, how much of that is holding back jQuery, and one day when you can get away from that, how much more capability do you think it will bring to jQuery?
John: If we dropped support for IE6 today, absolutely nothing would change, at least for jQuery core. jQuery UI might be able to benefit more. The JavaScript engine and the DOM engine in their export did not change between 6 and 7. That is a bit of a lie. They did change. They introduced two bugs in IE7. It’s really frustrating. In our case, it would be better to drop IE7 support than IE6. The reality is that from my perspective, IE6 is the same as IE7. IE7 is shipping in IE8. IE8 is going to be around for a very long time. There is no reason to drop any of these.
You asked how much is this holding us back? At least for jQuery core, not – obviously we have to deal around all these browser issues, but it’s not degrading the performance of the code. We make sure, at the very least, that the code that we’re shipping is going to perform the best it can, regardless. You don’t have to worry about that. I think that’s the primary concern, does it affect my performance, if so, kill it with fire. The other one is can I save some bandwidth by extracting that. Obviously, we could save some file size by removal of that code, not a massive amount, but maybe a couple K. Again, I don’t think it’s holding us back.



Getting Started with Yahoo! GeoPlanet Explorer
Christian Heilmann — Mon, 08 Mar 2010 13:00:04 +0000
Where are you and what is around you?
Geolocation is a hot topic. Google just got the patent on geolocated advertising, mobile phones allow us to pinpoint ourselves on the planet and find things nearby and with augmented reality applications we can even find our way by filming our surrounding and finding hidden treasures by moving our mobile around. Using geolocation as a developer is quite easy, you can do a few things:

If you are building something in a social network, you can get the geographical location from the user’s profile.
If you work on a certain mobile platform (Android, WebOS, iPhone) you get APIs to detect the current location.
If that is not an option you can use the W3C geo location API in browsers that support it.
If everything else fails you can guess the visitor’s location from their IP number.

That is the where, but how to know what is around me?
Knowing the location is one thing, but what if you want to know more about the area? What about the geographical hierarchy? What part of the city/country are you in and which other geographical and administrative areas are nearby?
All of this has been available for you for quite a while. The GeoPlanet API and dataset released by Yahoo! has been out for a while but did not quite get the love from the mainstream developer crowd it deserves. The geo hackers, on the other hand already love it to bits and helped make it more accurate by providing feedback.
To make it a bit easier for you to understand what the GeoPlanet API allows you to do, I’ve put together the GeoPlanet Explorer – a tool that lets you explore all the GeoPlanet data in an interactive way:

The Geoplanet Explorer uses three tools: YQL for accessing and filtering data, YUI3 for the rich interaction and CSS layout, Yahoo Maps for display and PHP to glue all of that together. You can get the full source code on GitHub.
Simplifying matters using woeid
One big problem of geo location is ambiguity. If you have a location with latitude and longitude you can pinpoint it on the globe. You don’t know what it is though. The centre of a certain county, city and a point of interest could share the same latitude and longitude, but they are actually totally different things.
To fix this problem, Yahoo! a long time ago introduced the Where on Earth ID (or short woeid) which is a number that defines a place with its geographical location and describes what it is. For example my neighbourhood in London has the woeid of 36239 and that means I can get the following information from it when querying the GeoPlanet API:

Stoke Newington (Suburb):

Country: United Kingdom
WOEID: 36239
Administrative:

England (Country)
Greater London (County)


Localities:

London (Town)
Stoke Newington (Suburb)


Postal N16 (Postal Code)
Location (lat/lon): 51.561199, -0.082980
Bounding Box: NE 51.577190, -0.058070 SW 51.546692, -0.092380



The bounding box information is very useful for displaying this information on a map as it shows you which points need to be visible in order to see the whole place.
There is just something pretty about having a number instead of a lat/lon pair which is why woeid is rapidly becoming a standard. Flickr supported it for quite a while, Dopplr uses it under the hood, the Yahoo! Weather API understands it and soon Twitter will also use it for geolocating content in an unambiguous way (right now there is only support in the Twitter Trends API).
So how could you use this for your own products?
There are a lot of ways you can use the geo tools by Yahoo! in your own solutions – by far the easiest is using YQL to access the data. This, for example allowed me to write the addmap.js solution:

Using this you can can easily take the content of a page element with a certain ID and add a map of the locations it “talks about” to the document:




The API key is needed for the Google maps, not for YQL. YQL in this case under the hood uses Placemaker which is an API that finds geographical content in URLs or texts.
YQL and the geo tools offer you some other interesting options:
Geographical locations in texts/urls/RSS feeds
By using the Placemaker table in YQL you can extract geographical locations from a texts or a source on the web:

select * from geo.placemaker where documentContent =
"Hi, I am Chris, I live in London but actually I am from Germany"
and documentType="text/plain" and appid=""

This finds both “London” and “Germany” as geographical locations. You will find places and references. Places are what has been found and references where it was found. The start and end elements describe the character location in the whole string.
Placemaker also takes feed and web site URIs and finds the locations in them for you. For example to see the locations mentioned in my portfolio page you can do the following:

select * from geo.placemaker where documentURL =
"http://icant.co.uk" and documentType="text/html" and appid=""

Again, you can check the result as an XML file. As this is an HTML document there is no start and end but the references are reported as XPATHs.
Feeds are also supported, so if you want to get the locations in the BBC News feed you can use the following:

select * from geo.placemaker where documentURL =
"http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml"
and documentType="text/rss" and appid=""

Verify the result as an XML at your leisure – this time the XPATHs point to the RSS items.
The easiest way to see the power of Placemaker is using GeoMaker which gives you a simple interface to do turn a text or URL into a map or microformats to embed into your documents:

Location by IP
Getting the geographical location of an IP is possible with the following YQL statement:

select * from geo.places where woeid in (
  select place.woeid from flickr.places where (lat,lon) in (
    select Latitude,Longitude from ip.location where ip = "123.23.23.33"
  )
)What we're doing here is using the IP2location API ,get the woeid from the latitude and longitude using the Flickr findByLatLon method and run the result through the geo API to get all the information - quite some work off your hands, isn't it? Without YQL you'd have to sign up for all these APIs and understand their inner workings to get the same information.

Getting location by IP is an old trick in the book of advertisers – you probably will have encountered ads like “meet singles in your city now” and see them changing when you went to another place – this is what they use to get this information. The accuracy of IP location is not very high though. It also can feel a bit creepy.
Location by Latitude and Longitude
Therefore it is much better to use a system that allows people to opt-in to tell their geographical location. There are services for that but we also have a W3C API built into browsers. Right now Firefox and Mobile Safari support it but it also cropped up in the latest developer build of Chrome.
Using the W3C location API is easy:



You test if the browser supports navigator.geolocation and if it does you use the getCurrentPosition() method to retrieve the current position. This will cause the browser to ask the visitor if they want to share their information – normally in an information bar on top of the viewport as shown in this screenshot:

The getCurrentPosition() method takes two parameters which are function to call in the success and the failure case – meaning that the visitor allowed you to get their location or not – or that there was some other error.
You can then use YQL once more to get the location from latitude and longitude – this time using the Flickr API method as the first one:

select * from geo.places where woeid in (
  select place.woeid from flickr.places where lat=51.5142271 and lon=-0.1289602
)

See the XML output here.
Putting it all together
Let’s end with an example script how you can use this. We use the W3C geolocation API to get a visitor’s location and if it isn’t available we fall back to using the IP. In any case, we use YQL to get the location information and the areas around the current location. The solution uses JavaScript except for retrieving the IP which is done in this case by PHP. You can see the full demo in action here. See the comments // for information about what is going on.



In my case the result from the W3C geo location is:
You are in St. Giles’s which is a Suburb located at (51.516151,-0.125460)
Your location belongs to: WC1V 6 (Postal Code), London Borough of Camden (Local Administrative Area), 0207 London (Zone), Middlesex (Historical County), London (Town), Greater London (County), MMA London (MMA), South East England (Colloquial), DMA South East England (DMA), England (Country), England and Wales (Colloquial), Great Britain (Colloquial), United Kingdom (Country), Market United Kingdom and Ireland (Market), Europe/London (Time Zone), British Isles (Supername), Northern Europe (Supername), European Union (Supername), Western Europe (Supername), Europe (Continent), Eurasia (Supername), Earth (Supername)
Only using IP I get:
You are in Whitehall which is a Suburb located at (51.501831,-0.125760)
Your location belongs to: SW1A 2 (Postal Code), Westminster (Suburb), City of Westminster (Local Administrative Area), 0207 London (Zone), Middlesex (Historical County), London (Town), Greater London (County), MMA London (MMA), South East England (Colloquial), DMA South East England (DMA), England (Country), England and Wales (Colloquial), Great Britain (Colloquial), United Kingdom (Country), Market United Kingdom and Ireland (Market), Europe/London (Time Zone), British Isles (Supername), Northern Europe (Supername), European Union (Supername), Western Europe (Supername), Europe (Continent), Eurasia (Supername), Earth (Supername)
Quite a lot of information using a few lines of code, isn’t it? Geographical location is a very interesting topic and allows us to show much more useful content to our visitors. Using YQL and GeoPlanet it is pretty easy for you to do so – give it a go!



Client Side Code Highlighting Made Easy
Keir Whitaker — Thu, 05 Nov 2009 15:16:11 +0000
I have recently been working on a little out of hours PHP project called “Dummy“. The code is almost complete, apart from the obligatory prettifying of indents and comments, which means it’s time to turn my attention to the online documentation.
As part of the “How to Use” page I need to show small PHP code examples. I also want them to look very readable and be easy to copy and paste. Hand cranking each code snippet using ’s, spaces and CSS clearly isn’t the way to go, there has to be an easy way.
Server Side Options
Having used Pygments (a Python syntax highlighter) I had a quick look for PHP server side solutions and found two native PHP functions that could work.

highlight_string();
highlight_file();

Both produce HTML representations of the PHP code passed to them. However if you need to display JavaScript, HTML or CSS the output will be plain black text, albeit spaced and indented in the way that it was passed to the function. You will also need to deal with escaping certain characters in certain situations and a distinct separation between your HTML template and your code examples.
Client Side Options
My preferred approach would be to include the code examples in the HTML templates and use CSS to make them readable. After a quick Google search I came across SyntaxHighlighter by Alex Gorbatchev. It’s a JavaScript and CSS solution thats’s fully featured, easy to implement and degrades nicely.
Here’s an example of a PHP code snippet using SyntaxHighlighter

It works by including a few JavaScript and CSS files in your HTML template. You can customise the CSS or use one of the seven themes provided.
In order to apply highlighting to a section of HTML it’s recommended to wrap your example in 
 tags to preserve the formatting. The final stage is to apply a pre-defined relevant CSS class to the  tag.
For example if we wanted our example to be highlighted as PHP we would add class=”brush: php;” to the 
 tag. To turn it into a JavaScript example we would add class=”brush: jscript;”.
I have set up an example page which shows HTML, CSS, JavaScript, PHP and XML highlighting in action. View the source to see how easy it is to implement.
There’s support for a huge list of languages including:

ActionScript3
Bash/shell
C#
C++
CSS
Delphi
Diff
Groovy
JavaScript
Java
JavaFX
Perl
PHP
Plain Text
PowerShell
Python
Ruby
Scala
SQL
Visual Basic
XML

SyntaxHighlighter also provides a nice pop up tool-tip (look at the right hand side of a code example when hovering over it) enabling you to view the code in a blank page, copy it to the clipboard or print it.
There are undoubtedly other solutions out there, if you have a preferred one that works for you please link it up in the comments.