jQuery is a fantastic library, learning AJAX techniques with jQuery will definitely help you learn some solid fundementals.

Part 1: The Architecture

In order to get around restrictions on Cross Site Scripting we’ll have to setup a proxy for the twitter API that lives on our own domain.  Relax, it’s not that hard. This proxy will pull down information from the API and make it available to a bit of javascript that we’ll run on our site to display the status. Got it? Good.

Part 2: The Proxy - use python to get twitter status

The Twitter Api will send back results as XML or JSON.  Personally i greatly prefer working with JSON so that’s what i’m using for this example.  All the proxy really does is grab the data at the url we specify and make it available for us from within our own domain.  Let’s take a look at the code:

#!/usr/bin/python
import urllib2

print "Content-type: text\n\n"

req = urllib2.Request("http://twitter.com/users/show/henryrose.json");

response = urllib2.urlopen(req)

the_page = response.read()

print the_page

You don’t have to know Python to understand what’s going on here.  The first two lines simply set the path for Python and then import the urllib2 library.

Then we print  content type to tell the browser what we’re sending them.

The interesting stuff comes when we form an http request and assign it to the ‘req’ variable.  We then get the response, read it and print the output. You’ll need to run this as a cgi on your server and make sure it’s executable.

Part 3: The Client - use jQuery to display external json

Our client will be a bit of javascript that calls our proxy and prints the output into an element on our page. Let’s jump right in to the code:

var TwitterManager = {
                twitterProxyUrl: "path-to-proxy-cgi",
                getLastUpdate : function () {
                        $.getJSON(this.twitterProxyUrl, this.myCallback);
                },
                myCallback : function (data) {
                        $("#twitter-status").text(data.status.text);
                },
                currentStatus : ''
        };
    TwitterManager.getLastUpdate();

To run this you’ll obviously need to have jQuery included on the page. The getLastUpdate function uses jQuery’s getJSON to grab the data from our proxy, and apply the call back which replaces the content of an element with the id ‘twitter-status’ to the most recent twitter update for the user you defined in the proxy.

And voile! You’ve got your twitter status.

Enjoy.

First off I’m going to ask you to make a change in your mental model of what we’re doing. Instead of thinking that we’re using Javascript to change the way an element appears take a step back and say “I want to change the way an element appears on the page, how do I do that?”.

If you answer was CSS then congrats!  CSS is always how you should style your html.  Javascript is used to add interactions.  To show and hide an element we will 1) make a css class that hides the element 2) use Javascript to add and remove that class from the element.

Part 1: The CSS

In more complicated web applications the need to hide an element will come up all the time, so let’s make a class that we can apply to any element that will make sure the user never sees it while that class is applied.

/** Hide Class **/
.hide {
        display: none;
        position: absolute;
        left: -9999px;
}

Now you may think that simply applying display:none; would have done the trick and in most cases you’d be right.  But adding the absolute positioning that moves the element offscreen ensures that we’ll never see that guy.

Part 2: The Javascript

Now that we can show and hide things with CSS we need to write some javascript that will apply or remove the “.hide” class when we ask it to. To do this we’ll be accessing the “className” attribute on the element that we want to show or hide, and setting it either to “.hide” or to blank.  For clarity sake we’ll do this in two functions that look like this:

function showElement(elId) {
	var el = document.getElementById(elId);
	el.className = '';
}

function hideElement(elId) {
	var el = document.getElementById(elId);
	el.className = 'hide';
}

Each of these functions takes a string as an argument. This string is the id of the element that you’re looking to show (or hide). Inside each function we grab the element that has that id using document.getElementById() and set the className accordingly.

Click here to see an example. (View source to see the html)

As you can see I also created a function that allows you to toggle an element. That is, if the element is currently shown hide it, and if it’s currently hidden show it. The code for that looks like so:

function toggleElement(elId) {
	var el = document.getElementById(elId); 

	if (el.className == 'hide') {
		showElement(elId);
	} else {
		hideElement(elId);
	}
}

Part 3: Going a little further

If you’re doing very much complicated javascript you’ll probably want to look in to using one of the many very good javascript libraries.  I personally recommend the Yahoo User Interface library and the jQuery library.  A good library will give you lots of tools for interacting with the DOM. We could make the above functions a lot more usefull if we had access to things like hasClass(), addClass() and removeClass().  If we had those things the code might look like:

function showElement(elId) {
	var el = $(elId);
	el.removeClass('hide');
}

function hideElement(elId) {
	var el = $d(elId);
	el.addClass('hide');
}

function toggleElement(elId) {
	var el = $(elId); 

	if (el.hasClass('hide') {
		showElement(elId);
	} else {
		hideElement(elId);
	}
}

Keep in mind that the above code will not work in your browser if you copy it in. You’ll need to get a library that has the necessary functions and alter the code above to call the functions in the correct way.

You’ll also note that i used $() instead of ‘document.getElementById()’.  It is common shorthand to alias document.getElementById() as $().

The benefits of spriting include a faster and more responsive user experience, reduced network traffic and server strain and improved code maintainability. What’s not to like about all that?

Read on after the cut to learn all about css image sprites.

The core concept of using sprites is to combine small images into one larger image.  Then, using the background attribute on HTML objects, displaying only the portion of the image that you need.

Imagine a cartoon strip from the newspaper if you will.  Let’s say it has five frames, each 2″ by 2″, printed from left to right. Now imagine a large piece of cardboard with a 2″x2″ square cut out of the middle.  If you were to tape the comic strip down to the table and place the cardboard on top; you would only see one frame at a time.

We can achieve a very similar effect on the web by creating one image with all the icons we might need on a given page.  I like to align those icons vertically with the top of each icon offset by some easy to remember number of pixels, say 100.

After we’ve created that image (the comic strip) we need to create our “cardboard”.  In this case it will be an html elment with a height and width defined in css. Something like this

html:

<span class="icon open" />

<span class="icon close" />

css:

.icon{
    display:block;
    height:16px;
    width:16px;
    background: url(samplesprite.gif) no-repeat;
}

.open{
    background-position: 0 0; //shows us the top image in the sprite
}

.close{
    background-position: 0 -50px; //shows us the second image in the sprite
}

See this sample css sprite here

The benefits of sprites

With traditional images the browser must make a separate request for every image that displays on a page. At scale this causes a lot of unnecessary overhead on the server side and lots of extra data going across the wire. Additionally, browsers don’t make these requests until the image is needed.  For example, if you’re using the ‘:hover’ css psudo-class to give an element a rollover effect, the browser will wait to download the rollover image until the element is moused over.  This delay makes the rollover “flicker” the first time a user activates it.

Beyond making the site load faster and react more quickly to user inputs, the use of CSS sprites makes maintaining a website a much simpler affair.  For example, if one wanted to change the icon set that they were using on a page using sprites, all they’d need to do is create another sprited image using the same offsets and change the reference in the css to point to the new image. It also makes the markup much more readable by using human friendly class names instead of inserting lots of image paths in <img> tags.

So go forth and sprite!

Tell me what you think.

That all changes with last night’s announcment  now Google crawls flash.

Personally I’m not a big fan of flash for much of anything other than delivering rich multimedia content. But getting a little love from the search engines definately makes flash a more compelling technology for the web.

Good work googlers.

CSS selectors are used to target a set of of objects in the DOM of a website (that set may only contain one object). For example if one wanted to select all of the links within paragraphs they might use the following selector:

p a{ ... }


Or if they wanted to target all links with a class of “internal-link” that were within an element with an id of “sidebar” they might use this:

#sidebar a.internal-link{ ... }

CSS selectors become particularly powerful when you begin mixing in id’s and classes as in the second example.  In a more complex website that may have several thousands lines of CSS, the specificity of a CSS rule can be very important.

Here is how parts of a selector are assigned weight

• HTML Elements (div, p, a, ul, etc) = 1
• Class Definitions (’.internal-link’) = 10
• id (’#sidebar’) = 100

Take a look at the first selector we used about (p a{ … }). This selector uses two html elements and since we know HTML elements have a specificity of 1 we can add those together and we see the specificity of this selector is 2.

For the second selector we have an id (’#sidebar’), an HTML Element (’a') and a class definition (’.internal-link’). When we add these up they have a specificity of 111.  Note that an HTML Element with a class definition counts for 11, similarly an Element with an id would count for 101 (’div#body’ for example).

Higher specificity gets priority and this is well supported in all browsers.

Enjoy!

The Editor

To write code you need a text editor. You might be used to using Microsoft Word to write up documents, but you’ll want to put that away when it comes time to build a website. As we saw in our previous post on HTTP, the elements of a website come down the wire as plain text. The beauty of Word is how it takes the plain text that you input and tranforms it in to complex and visually appealing documents. We are doing something similar here, but we want the web browser to do that transformation. As such we want the text we save in our HTML, CSS and Javascript files to be clean and as we wrote it when it gets sent to the browser. Word and other advanced text editors add lots of crazy stuff on top of your text to make the document display they way you want it, this is not what we want.

To keep our text clean we’ll take a step back and opt for a simpler text editor that is more focused on programming than creating reports.  On the Mac I use a free editor called TextWrangler, under Windows I recommend another free editor called Notepad++.  I like both of these editors because they are simple but offer some nice features like Syntax Highlighting.

The Browser

In most cases our goal is to make our web sites look and act the same in all web browsers, or at least in a certain set.  But the one I use more than any other when i’m building a site is Mozilla Firefox.  While i believe Firefox is superior to other browsers in a number of areas, I’ll focus today on why it’s the best development platform which really boils down to one thing: extensions.

Firefox extensions allow independent developers to extend the functionality of the browser. There are thousands of extensions that do many different things and i’ll mention a couple that are very useful for web developers.

Firefox Developer Toolbar

The developer toolbar gives you access to more information about the site you are currently viewing than you ever knew existed. Tools in the toolbar will let you measure DOM objects, manipulate images, enable and disable CSS and Javascript, and many other things. Install it and then play around with it, it will teach you a great deal about how websites work.

Firebug

This one is truly the holy grail. I simply do not remember how web devs functioned in the days before firebug. Firebug provides a multitude of tools to inspect and manipulate the DOM.  Additionally it allows you to log Javscript outputs and interact with the browsers javascript engine directly from a command line.  This is a very, very powerful tool.

There you have it, those are the barebones tools that I absolutely could not live without. Do you have any that aren’t on this list?

SEO is all about links. Links are how people move from page to page across the internet, not coincidentally they are also how search engines move across the internet.  I have a personal website over at henryrose.info where i have a blurb about myself and a blog that’s poorly designed and rarely updated. However, I recently started concentrating on getting that page to rank higher on Google for the term “Henry Rose”.

It’s important to have a very basic understanding of a concept called “Page Rank”.  Page Rank is google’s algorithm that determines how useful a given page is for a given query.  This algorithm essentially analyzes the pages that link to a given page and assign that page a “rank” based upon how many and which pages link to it.  In addition to the number of pages linking to your target page the Page Rank of the linking pages is also taken in to account.  Feel free to read more on the Wikipedia article on PageRank.

There are many factors that go into how much “SEO juice” a page has, but PageRank is perhaps the most important.

In order to boost the ranking of henryrose.info for the term “Henry Rose” I asked a couple of my friends to link to me from their blogs. They did that and I rose to number 2 on the google list. “Fantastic”, I thought, “What more could someone want than to be #2 to the Wikipedia article about Henry Rose, former mayor of Los Angeles?”.

Well, just the other day I made a comment on the ZillowBlog (the official blog of my employer: Zillow.com).  I signed that comment “Henry” and had that linked back to my website.  Low and behold, this morning when I checked my rank I was #1.  What appears to have happened is that the powerful PageRank of the Zilllow Blog was enough to carry me up to the top from just one little link.

There is a lot to SEO and I am certainly still learning about it myself, but it’s a fascinating topic and one that will only grow more relevant as more and more companies rely on the free marketing that search engines provide.