Writing More Expressive and Readable jQuery Code with Method Chaining


jQuery LogoYou can chain jQuery methods in a way that makes your code more readable, and allows you to be more expressive in the way that you traverse and manipulate DOM elements

Most of us are introduced to jQuery via the following scenario: when the user clicks an element, you want something to happen to that element. You Google the code, you copy the code, you edit the code so that it matches your DOM elements, it works, you are hooked, you add “jQuery” to your resume. An oft-told tale.

But, what about when the user clicks an element, and we want numerous thing to happen to elements that are in the neighborhood? Perhaps we want the parent element to turn blue, and then we want the <a> inside of the <span> that is a sibling to change it’s href attribute….etc. Sure, we can do all this using jQuery methods such as parent(), find() and end(). But the code starts to get a little verbose. One way in which we can write this kind of code in a slightly more elegant manner is by chaining method calls together. It makes the code more expressive and a little easier to read.

Example # 1

In example # 1, we query a specific selector, change its background color, use the parent() method to find the element’s parent, and then change the parent element’s background color to red. Pretty simple stuff. But, this code can be written better.

Example # 2 A

Example # 2 B

In example # 2 A, because $(this) returns a jQuery object, we can avoid further queries by simply “chaining” subsequent method calls. Chaining refers to using the return value of one method to kick off another method call, and so on. The concept is like that of a “chain reaction” in that one return value drives the call to the next method, and so on. In example # 2 B, we have the exact same code, but we break each of the “chained” methods calls to a new line, which makes the code even more expressive and easier to follow (comments have been added as well). JavaScript does not care about this white space, so you are free to organize your code in any way you like, which allows you to “express” your thoughts, or “logic” in a way that you feel works best.

This next example is a bit long, but what I wanted to accomplish was:

  • Provide full page markup so that you can copy the entire code, paste it into notepad and run the file, or use jsfiddle.net
  • Create an example where we chain methods together that walk up and then down the DOM, mutating multiple elements, without ever having to create another query

Example # 3


In example # 3, we use the jQuery parent(), find(), and end() methods to move up and then back down the DOM, mutating elements along the way, without ever having to write a second query. The next example is the exact same code, but heavily commented, to make it easier to follow-along.

Example # 4


In example # 4, we have the exact same code as example # 3, with comments added.


When a jQuery method returns a jQuery object, you can take advantage of that behavior by “chaning” subsequent method calls to the return value of the previous method. When using this approach, you can execute multiple DOM statements from the result of one query. The end result is code that is more expressive and easier to read.

Helpful links for chaining jQuery methods






Book Review: Professional JavaScript for Web Developers 2nd Edition


Professional JavaScript for Web Developers 2nd Edition CoverEven at nearly 3 years old, this book is surprisingly relevant and more importantly, it is an excellent resource for Front-End Web Developers

I came across Nicholas C. Zakas’ Professional JavaScript for Web Developers, 2nd Edition recently. As usual, my first instinct was to check the publication date; “hmmmm 2009… I was looking for something a little more current..” I flipped through a few pages, and the next thing I knew, a half-hour had flown by.

This title is an excellent resource for any front-end web developer who is new to JavaScript. While it does cover a few advanced topics such as Object-Oriented JavaScript, it does  a very nice job of discussing the language from the absolute basics, assuming no prior knowledge. Even if you are fairly familiar and comfortable with JavaScript, this book is time well spent. I particularly recommend it for those of you who feel a little out of place without the magic wand that is the jQuery dollar sign ($). Zakas leaves no stone un-turned with regards to native JavaScript DOM traversal and manipulation.

References to “….the new Internet Explorer ver 8…”” and a discussion of up-coming HTML5 features will feel a little out of date, but at the time of publication, the content was more than spot-on.

  • Title: Professional JavaScript for Web Developers, 2nd Edition
  • Author: Nicholas C. Zakas
  • Number of pages: 840
  • Publisher: Wrox
  • Published Date: January 14, 2009(2 edition)
  • Language: English
  • ISBN-10: 047022780X
  • ISBN-13: 978-0470227800


Professional JavaScript for Web Developers 2nd Edition by Nicholas C. Zakas is an exhaustive and comprehensive education in native JavaScript that is highly recommended. The writing style is easy-going and up-beat, and there is nothing left to the imagination.

Helpful links for Professional JavaScript for Web Developers 2nd Edition








Lynda.com – An Excellent Resource for Online Web-Development Tutorials


Finally, an affordable and high-quality online training web site that allows Web Developers to learn at their own pace

In the past, whenever I have done a search for online video tutorials, I’ve usually been disappointed by what I found. Microsoft has some pretty good free tutorials, but of course, that covers only Microsoft Technologies, and mostly Microsoft Office, or their software development products. On a number of occasions, I was more than willing to spend money for a web site with tutorials that were well-produced and offered an acceptable menu of topics. Amazingly, I cannot remember too many sites I found that matched this kind of search.

And then, I somehow stumbled across lynda.com.

While I cannot remember how I came across lynda.com, I do remember my reaction after browsing the site for about an hour: I was impressed. The tutorials on lynda.com are well-produced and cover an excellent range of software-related topics.  Unlike some other software-education-related web sites, there are few tutorials that I found to be more than a few years old, and there is a strong focus on providing updated versions of topics that detail the most recent version of a software application.

For front-end web developers, this site is a particularly helpful resource. They offer a solid range of topics from core concepts such as HTML, CSS and JavaScript, to more advanced areas like Photoshp and jQyuery. There is also plenty of back-end web-development technologies covered such as PHP, MySQL and ASP.NET.

Cost: At $37.50 per month, their “Monthly Premium Subscription” is worth its weight in gold. I do not think you can find a more reasonable price for this kind of content.

Recommended Lynda.com tutorials:


XHTML and HTML Essential Training

Web Accessibility Principles


CSS Fundamentals

CSS for Developers


JavaScript Essential Training (2011)

Practical and Effective JavaScript


jQuery Essential Training

Create an Interactive Photo Gallery with jQuery and Dreamweaver


PHP with MySQL Essential Training

Installing Apache, MySQL, and PHP

PHP with MySQL Beyond the Basics


WordPress 3 Essential Training

WordPress 3: Developing Secure Sites

WordPress: Creating Custom Widgets and Plugins with PHP


ASP.NET Essential Training

Visual Studio 2010 Essential Training


lynda.com is a web site that has well-produced video tutorials, covering an impressive range of software technologies. While a number of technology profiles are serviced (i.e. designers, coders, business analysts, etc..), both front-end web development and back-end web development technologies are covered well. With regards to the bottom line, the cost of their membership is very reasonable. I am a customer and cannot recommend this product enough. If you are looking to improve your skill set in a software-based technology, there is a good chance that the topic you are looking for is included. You can browse the site and sample all of the videos for free before signing up. This is a no-brainer; lynda.com is an excellent resource for self-managed software training.

The JavaScript “for…in” Statement – Don’t Leave Home Without It


JavaScript LogoObjects in JavaScript are first class types that have become a critical component to modern front-end web development. The “for…in” statement allows you to fully examine any object at run-time<

Making objects, instantiating objects, and enjoying all the wonderful properties and methods that we baked into our objects is what advanced JavaScript is all about these days. Let’s face it… it’s hard to imagine a useful JavaScript-based application that does not, in some way, implement object oriented technology. The “for…in” statement is one of the most essential tools in our belt when it comes to introspection in JavaScript.

“Introspection” in JavaScript is the act of “looking into” an object, to discover what it has inside. The answer is: “properties and methods.” But, the thing is, you don’t always know the name of the object that you will want to “look into” or exactly when you will have to do it. Also, as we know, an object member can itself be an object, which has properties and methods, and one or more of those properties might be another object with its own properties and methods… or a method might return an object, that has properties and methods…. and so on.

So, add this all up and what you get is the need to “look into” an object without knowing anything about it. It may be an object that you did not create, so our introspection tool cannot look for a specific set of named members; it just has to be able to say:  “the object that you told me to look into contains the following properties and methods,” and based on the object that we fed to that tool, the answer can vary.

The JavaScript “for…in” loop is incredibly simple and equally powerful. With its basic syntax, we can easily say: “for each X in Y… do this…”. X is the object’s property and Y is the object. So, if I had an object named “foo”, I could say “for X in foo”. If foo had 5 properties, then the loop would run 5 times. In each iteration of the loop, “X” will represent the current property that is being “looked at”. To access the property name, simply refer to X (i.e. alert(x) ), and to access the property value, refer to object[x] (i.e. alert(foo[x]) ). The reason that we use the bracket notation, and not dot notation, is that dot notation requires a string literal (i.e. foo.name), whereas with bracket notation, we can place any valid expression inside the brackets, such as a variable (e.g. foo[X] ).

Now what follows this is the “loop”, which is a set of curly brackets. So, our syntax looks as follows:

Inside “the loop”, we can do whatever we like. Typical scenarios are to do something with either the property name (i.e. X) or the property value (i.e, foo[X]). Let’s look at an example of a JavaScript “for in” loop that does something.

Example # 1

The output for Example # 1 would be:

the value of color, is: blue
the value of name, is: fred
the value of say, is: function (){ return “this is the say function” }

In Example # 1, the object “foo” has three members: two properties and one method. So, the “loop” executes three times. In each case, we output the name of the member “prop” and the value of the member “foo[prop]”.

Hmmm… ok, but what if one of the members is a function? Can’t we do more than just output what the name of the function is?

Sure! Functions are meant to be executed, so let’s execute a function if we find one!

Example # 2

In Example # 2, we examine each property courtesy of the “typeof” operator. If the property currently being “looked at” is a function, we assign the value of the property (the actual function code) to a variable, and then execute that variable. The output of Exmple # 2 is:

the value of color, is: blue
the value of name, is: fred
we found a function, and here it comes: hello from is the say function


So, as you can see, the sky is pretty much the limit with regard to the JavaScript for…in statement. It’s a very powerful introspection tool, i.e., one that gives us the ability to examine the properties and methods that an object contains. The reason that this statement is so important is that you may not always know the name of the object that you want to “look into” or much about it at all. This means that the JavaScript for…in statement allows you to abstract away the details of the future object that you will want to examine, and just say: “whatever object I reference, find out what is inside that object and tell me all  about it!”

Helpful links for the JavaScript “for…in” statement




How to return an object literal from a JavaScript constructor


JavaScript object LogoWhile it is easy enough to create an object literal, there are cases in which you may want to return one from a constructor. When doing so, you return an object literal that has added value.

Everyone knows that creating a JavaScript object literal is as simple as: var foo = {}. No problem at all. In fact, we can even add properties and methods to this object with such expressions as:


While these approaches are both simple, there is a difference between an object literal and an instance of a class. For example, var foo = new Foo() is not quite the same thing as our previous var foo = {}. The question is, can we have it both ways? On the whole, the answer is: “Yes!

Because of the very expressive nature of JavaScript, what we return from a function is really up to us. So, if we want to have a constructor function that returns an object literal, we can literally (sorry : – ) just use the “return” statement, and put an object on the other side of that.

Example # 1 – Return a simple object

In example # 1, the bar variable becomes an instance of our Foo() constructor. As a result, bar is an object literal. When we run its say() method we get the expected output, and if we were to run the following command: console.log(bar.color), we would get “blue“. But there is really not much added value here. Of course we could have accomplished the same end result by simply saying var bar = {} and including the same exact properties and methods.

But there is, in-fact, great potential for some pretty serious added value here. For example, the difference between simply assigning an object literal to bar and returning an object literal from our Foo() class is that when we instantiate Foo(), we sill have access to the outer function. This closure provides a scope in which we can store private members, to be accessed later if we wish, which is very important.

Example # 2 – Return an object with a privileged method

In example # 2, we still return an object literal, and as a result, the resulting instance is just an object literal. The added value is that we also defined one private variable:  _acctNum. In fact, translates to a new level of functionality: the _acctNum variable is not available to the outside world. Therefore, we have complete control over how it is mutated. Here we have defined two methods _getAcctNum and _SetAcctNum. Therefore, these privileged members have access to our private variable _acctNum. So, most importantly, we can change or retrieve the value of _acctNum using these two privileged methods.

Finally, we can do the following:


The added value of returning an object literal from a constructor is that while you have a very simple hash table to work with as your instance, you also have access to private variables that were defined within the constructor. As a result, in this case, you can think of the returned value as bar = {}, but with added value.

Helpful Links about JavaScript Objects




How to Show the Source Code of Another Web Page, in Your Page, using JavaScript


JavaScript LogoEveryone knows you can view the source code of any web page. But you can also use JavaScript to grab the source code of a different page, and show it in yours

If for some odd reason, you wanted to view the source code of another page without having to actually browse to that page and click “page view source,” you can use JavaScript to do so. In the example below, I use the “window.prompt()” function, to prompt the user for a web page whose source code they would like to see. That function returns the value of the input. We then use the “window.location” method to open up that URL in the browser, but we pre-pend the URL with ‘view-source:’, which achieves the same result as manually browsing to that page, and clicking:  “page view source”.

(Note: As of this writing, this only works in Chrome and FireFox)

As  you can see, the second argument to the window.prompt() method is the default text that we want to appear in the text box. But what if the user accidentally deletes “http://” or simply ignores it, entering something like “google.com”? No problem. We first use the JavaScript  “substring()” method to check to see if the first seven characters of the return value are:  “http://”. If so, great; we just use the return value as is. If it is not, we pre-pend that value with “http://”, and we are all set.

Example # 1:










There may not be too many scenarios in which you need to do this, but it is handy to know now. You never know if, down the road, you might need some kind of variation on this functionality.

Helpful Links




How to Include a Function as a JavaScript Object Literal Member


JavaScript LogoJavaScript object literals can contain not only properties, but methods too

Some may automatically think of a JavaScript object as a name / value pair scheme with flat members that are essentially just scalar values. Fortunately, this is not quite the case. An object literal can also include functions among its members. Those functions can do everything that any function would otherwise do; it just happens to be a member of an object. You define a function as an object member simply by assigning an anonymous function to the key, instead of the usual scalar value.

Example # 1:

The output for Example # 1 would be: “Hi, my name is: Don Draper, my address is: 123 E. Maple Ave., and I am 36, years old” The reason for this is that in addition to the properties we have defined, we define a member that is a reference to an anonymous function. That function takes two arguments: the current year and the year Don was born. It calculates Don’s age, and then returns the result.

Some might say: “Why not just declare a function and use it?” You can certainly do that, but as I have covered in previous posts, it is usually best practice to create name-spaced objects in order to keep the global space clutter free. When doing so, you can define your members within your object. And, one or more of those members can be a function. I can think of few circumstances when this is not a good idea. It makes your code more readable and easy to manage.


There are many useful things you can do when making a function a member of an object literal. This post simply covers the basics.

Helpful Links about JavaScript Objects




What is the difference between a back end and a front end web programming language?

Web Development

You may have heard the terms “back end” and “front end” with respect to web development languages. Some may find them confusing, but there is not too much mystery to it at all.

In the most basic terms, the moniker says it all: a back language runs on the server and does all its work before the page gets to you. By the time you see the web page, any back end  technology that was used to construct and then serve up the page is no longer involved. Conversely, a front end language operates on the client side. It works in your browser and does not do anything until the page and its associated assets comes over the wire.

Back End Programming Language

An example of a back end language is PHP, which is a scripting language. When a user requests a PHP page, the server parses the PHP code, which in most cases results in dynamically created HTML. A PHP page can simply contain HTML. It is not required to include any scripting code at all, but any code that is in the page will be parsed.  Consequently, the web page viewer never sees one line of PHP code. Assuming that the web server administrator has configured the server correctly, it will surely never show you the actual PHP code.  This is because the web server parses the PHP and then generates the page. This results in HTML. Although, a web developer can use PHP to serve up any other text-related asset. For example: JavaScript, JSON, CSS or XML.

Front End Programming Languages

In web-development, many people often use the terms “front-end” and “client-side” to express the same thing. Specifically, they refer to technology that the end user’s computer executes. That is to say, the browser understands these languages and is thus able to interpret the code.

Consequently, this is the exact opposite of a back-end programming language. Specifically, a web server does not understand HTML, CSS or JavaScript. It simply ensures that files that contain these languages can be downloaded . The web server cannot execute HTML, CSS or JavaScript. (There is an exception with regards to JavaScript, which will be discussed shortly.) But, browsers such as Internet Explorer, FireFox and Chrome do understand these languages, and are able to execute them on the front-end. Accordingly, this means that your computer parses HTML, CSS and JavaScript. In the case of JavaScript,  your computer executes that code.

JavaScript is probably the most commonly used front end web development programing language. Technically, it is a scripting language. Unless you explicitly disable JavaScript in your browser, you see and interact with it every day. When you request a web page, the JavaScript is either in the page, or is downloaded in a separate file. JavaScript runs in your browser, and most people only associate it with those annoying pop-up ads. This was true in the past, but today, JavaScript plays an integral part in creating rich user experiences.

Important Note: Although JavaScript has historically been a 100% front end technology, it is now a fully mature back end language as well. Thanks to the brilliant work and vision of Ryan Dahl, JavaScript can now be run server-side by using Node.js.

Helpful Links for Back End and Front End Languages

Front-End / Client-Side Languages & Technologies












Kevin Chisholm – Blog – Posts about: CSS

Back-End / Server-Side Languages










ASP.NET Overview

ASP.NET and Visual Studio for Web




Node.js (Server-Side JavaScript)





Immediate Functions in JavaScript – The Basics


JavaScript LogoFunctions are a very powerful feature in JavaScript; they provide modularity and scope. The immediate function, WHICH offers a heightened level of functionality, is an often overlooked feature of JavaScript

An immediate function is one that executes as soon as it is defined. Creating an immediate function is simple: you add the open/close parentheses after the closing curly bracket, and then wrap the entire function in parentheses. That’s it!

Example # 1:

In Example # 1, we have a very simple function. If you were to paste this function into your code and run it, nothing would happen. This is because the function is assigned to a variable, and that is it. We have only the function declaration here, but we never call the function. But if you were to add the line “myFunc();” to this code and run it, the output would be: “I am a simple function”.

Example # 2:

In order to turn this function into an immediate function, we add the open/close parentheses after the closing curly bracket and then wrap the entire function in parentheses. After we do this, we run the code and whatever happens in that function is executed immediately after the function declaration is complete.

So the output for Example # 2 would be: hello, I am an immediate function

Example # 3:

In Example # 3, we first declare a variable called “myName” before declaring our function. When declaring our immediate function, we take one argument: “thisName”. At the end of the immediate function declaration, the open/close parentheses pass the variable “myName” to our immediate function. So, not only does this set of open/close parentheses execute the function, it also allows you to pass an argument to that function.

The output for Example # 3 would be: “hello, my name is: bart Simpson”


In this article, we touched on what immediate functions in JavaScript are, how to construct one, and how to pass parameters into them. But immediate functions in JavaScript can get very deep, very quickly. There is a world of power and subtlety that is available to you via immediate functions. Since that is out of the scope of this post, however, it will be covered in more detail in later posts.

Helpful Links for JavaScript Immediate Functions





How to Create a Custom Object with Public and Private Members


JavaScript LogoBy making a distinction between what members of your object will be accessible to the  outside world, you can enforce a much higher degree of control and avoid unpredictable behavior

In a previous post, I discussed how to create your own name-spaced JavaScript object. This is a highly recommended approach that keeps the global name space free of clutter and helps make your code easier to read and manage. When you create your own custom JavaScript object, by default, all members are public. This is generally not to your advantage. While wrapping all of your functionality in a custom object is a smart move, because all of its members are public, other code in the page that might be out of your control has full access to your object, which cold lead to problems.

Best practice is to make a clear distinction between which members of your object are public, and which members are private. The goal is to provide the absolute minimum access possible in order to allow your code to work as intended.  This is known as “Principle of least privilege” or “Principle of least authority” (POLA).

In some programming languages, there are reserved words that easily provide scope for object or class members, such as “private”, “public”, “static” or “protected”.  There is no built-in syntax that provides scope in JavaScript. Functions are the tool you use to provide scope and they do so very well. But because there is only one tool we have in-hand to create the desired scope for object members (or variables in general), there are a few techniques you need to use that allow you to use functions to create scope.

Example # 1:

The output for Example # 1 would be:  “My name is: Foo, My address is: 123 E. Bar St.”

This is not an optimal situation because all the members of our object are public. In order to create the desired scope, we can wrap all of the objects members in a function.

Example # 2:

The output for Example # 2 would be: “undefined, undefined”

While we have made progress by wrapping the members in a function to provide scope, we have created another problem because these members are no longer publicly accessible. By using “var” when declaring the variables, they remain local to the function (good), but un-available to the outside world. The way to correct this is to create a public member that has privileged access to these private members.

Example # 3:

The output for Example # 3 would be: “Foo, 123 E. Bar St.”

In Example # 3, the variable “obj” is set to the data member, inside of our object: “myObj”.  By using the “this” keyword, we expose the members “getMyName” and “getMyAddress” publicly. While “getMyName” and “getMyAddress” are public methods, the variables “myName” and “myAddress” are still local, which means that they are private and not available outside of the member “data”. But, and here is the part that makes all work, “getMyName” and “getMyAddress” have complete access to all the private members of “data”. So “getMyName” and “getMyAddress” can  return these private members, while they and anything else we want to protect, remain privately scoped.


This is a very basic example, but the building blocks you need are all there. Creating a name-spaced global variable is a great approach that keeps the global name space clutter free. But, it is generally good practice to keep your object’s properties and methods private to whatever degree makes sense. Exposing the minimal number of members publicly is known as “Principle of  least privilege” or “Principle of least authority”. By taking this approach, you keep your code safe from harm, easier to manage and also keep a tight leash on the behavior of your application.

Helpful Links regarding public and private Object members in JavaScript





What is the difference between GET and POST?


Depending on what you are trying to accomplish, GET and POST are used in different ways.

What is a GET?

In short, a GET is appended to the URL while a POST is embedded in the body of the request. Maybe from time to time, you have noticed something similar to this in your address bar: ?name=something&choice=something-else&category=something-more. This is a GET. Everything after the question mark is a query string. The page that processes this request strips out these values, parses them and acts upon them. The most notable thing here is that your request is public: it appears in the address bar of the browser.

A GET is very simple and easy to implement and parse, but it is 100% not secure. Also, each browser imposes its own limit on the length of an URL. There is no limit specified by a W3C RFC, but it is best to avoid depending on URLs that exceed 255 characters. So, there is a limit to how much data you can pass using a GET. Also you must take care in how you handle special characters. One advantage of a GET is that you could actually save the complete URL, including query string for later retrieval, or you could send that URL to a friend. At times, this can be useful.

What is a POST?

A POST is embedded in the actual body of the message. While not 100% secure, this is more secure than using a GET because the data passed does not appear in the address bar. Also, there is no limit to the amount of data passed. One downside to a POST request is that a page refresh looses the POST data and you cannot save or send a saved URL to a friend.

How to Create a Name-Spaced Object to Avoid Using Global Variables in JavaScript


JavaScript LogoThere are two ways to dynamically add an element to the end of a JavaScript array

Sometimes you may need variables that are available to every function in your script. While it is tempting to use global variables to achieve this kind of scope, doing so can cause unpredictable results and spaghetti code. If you create your own object, define your properties and methods, and then access them via a clean, name-spaced syntax, you control the scope as well as the code’s behavior.

Example # 1:

Here are a few examples of using global variables. In each case, it is very easy to lose track of the value of these variables throughout your script, as well as which functions have access to them.

You may want to access these variables from multiple functions in your code, and in various scenarios, change the value of those functions. This is certainly possible, but there are better ways to achieve the same functionality.

Example # 2:

In this example, we create a custom object called “bankClient”. We then define the properties of this object.

In this example, there are two ways that we could access these variables:

Example # 2A

  • object.property
  • object[‘property’]

Example # 2B

Either one of the above approaches will work just fine.

Example # 3:

You can also define a method for your object.  A method would be a function that you define within the object, and then call by using the same name-spaced syntax.  In the example below, we expand our object by adding a method. This method returns the value of the client account number.  You may notice the use of the “this” keyword. In such a case, “this” refers to the object who’s context we are currently in, which would be “bankClient”. This is something you’ll see often when working with objects in JavaScript.

That value is hard-coded in the object definition, but then  notice how we change the value of the property, and then retrieve it. In the same manner, the property “name” is at first empty, but we assign a value to it, and then grab that value (i.e. “Roger Sterling”).

The output for Example # 3 would be:

Account # changed to: 111-222-333
Client Name: Roger Sterling


Creating your own custom object is a good way to avoid cluttering up the global namespace. It is also an improved method of keeping tabs on your variables as they become properties of the object. You can define methods for your object and access them the same way. In doing this, you create organized code that’s easier to read, maintain, and extend.

Helpful Links about JavaScript Objects




AJAX Can Have a Negative Impact on your SEO


You heard the term, you asked your front-end web developer to implement it on your site, and then you bragged to your peers at cocktail parties about it: AJAX. While the upside is in many cases, a more pleasant UX, there could be a negative impact on your SEO.

There are many different scenarios where one might implement AJAX, but one to watch out for is when you are delivering content that is pertinent to your page. Imagine this scenario:

  • You have a page that offers a brief yet useful description about each of the 50 US states
  • Instead of making users wait for a full page refresh, you have your front-end developer implement AJAX so that when the user selects a state, the brief description is fetched from the server and displayed. No page refresh, just a quick GET that returns the information.

The good news is: Your user has a better experience than one that would have to wait for 50 page refreshes if they wanted to know about every state.

The bad news is: Your content is not being indexed but any search engines.

If you are scratching your head, think about the scenario we described above. Each time the user selects a state, the data is fetched from the server via AJAX. This means that the requested content is not part of the page. Search bots do not understand or interact with AJAX, they simply scrape the page and index the content that is contained in the markup at their discretion.  This means that when a search bot arrives at your page, it never sees the 50 descriptions about the various states.  So, while you have created a richer UX, you are doing so at the price of your SEO, which has in theory, diminished.


This is not the end of the world. It is simply a good dynamic to be aware of. There is a way to work around this. Inside of a set of <NOSCRIPT> tags, you could have the content that includes the brief descriptions on all 50 states. This way the search bots will see the content when indexing your page. Also, visitors who use screen readers will have access to that content as well. It’s a “best of both worlds” approach that allows you to continue creating a richer browsing experience for your visitors who have JavaScript enabled, but also cater to those who do not have JavaScript enabled, or use a screen reader, and also keep your SEO… well… “Optimized” !

Kevin Chisholm


High Performance Web Sites: Essential Knowledge for Front-End Engineers


High Performance Web Sites Essential Knowledge for Front-End Engineers By Steve Souders

This is a short book with a long title, but don’t let the number of pages fool you. This title packs a ton of useful information for font end web developers.

Steve Souders lays out his rules for high-performance websites and not a character is wasted. Inside these 14 rules are the street-smarts from which any front end developer can seriously benefit.  Some of these rules may be less newsworthy than others. For example, using CSS Sprites and making fewer HTTP GET requests may not be a complete revelation to some. But there are more high-performance techniques that you may not be aware of. There is particularly detailed coverage of Expires Headers and ETags, the surprising subtleties of which can greatly affect performance. Other notable areas of interest are reducing DNS lookups, minifying javascript and the advantages of CDNs.

An impressive aspect of this book is the use of graphic performance reports, with detailed explanations. Steve Souders does not just spew theory. In most cases, he uses the top 10 websites and performs speed tests using recent tools of the trade. In each case, there is an easy-to-understand graphic that makes it very simple to see how a particular website performs, with respect to component downloads and page rendering. With every graphic report there is a full play-by-play that leaves nothing to the imagination.

Summary: For even the most casual web developer, this knowledge truly is essential.

  • Title: High Performance Web Sites: Essential Knowledge for Front-End Engineers
  • Author: Steve Souders
  • Number of pages: 176
  • Publisher: O’Reilly Media
  • Published Date: September 18, 2007 (1st edition)
  • Language: English
  • ISBN-10: 9780596529307
  • ISBN-13: 978-0596529307