Designing without Javascript

This article will cover the importance of keeping content, design, and coding elements seperate. I will then explain how you can use advanced techniques to apply Javascript to an element (such as a link) without ever changing the HTML.

Before I begin, I would like to say: I hate CSS. It’s a necessary evil, but I really hate focusing my time and energy on design issues. You see, in an ideal world, designers would design, content providers would provide content, and programmers (that’s me!) would glue it together with backend stuff.

However, this was not how the world spun, my friends. That is, until today.

Keeping Things Seperate

Let’s say you were running a movie critic site. So you outsource a writer who sends you weekly critiques and you upload his content to the site. You’d get a designer who’d make you a shiny layout. And then you’d program everything else. So let’s say the critic decides, "Hey, I want to embed a picture of Keira Knightley in my article!" So he, using his rudimentary HTML "skillz," puts in a thumbnail of Keira Knightley and links it to her IMDB profile. Up to this point, there is no problem. Your designer doesn’t care because it doesn’t effect his CSS and your content provider is happy. But let’s say that after a few months, you realize things would be much better if those links were popup windows. "DOH!" you would explain, as you realize you’d have to go back through four months of reviews and redo every link. And of course the designer gets pissed because you added in a bunch of "weird Javascript stuff" into his layout that he can’t understand or manipulate. So then weeks go by and your designer comes to you and says, "Yeah, but those popups are too big. They need to be smaller." So then you’d say, "Okay, make the window.open function call use a smaller x and y value," to which your designer would look at you and stare intently. So now you have to go back through four months of awful reviews sifting for every variable and changing it.

At this point, some of my more clever readers (you!) might mumble something about template engines and object oriented design. Yea, but just as my example was so 1998, your solution is so 2005. The problem all along was that you, the programmer, started doing the content provider’s job when you went into the content and added a bunch of popup function calls. Then you did the designer’s job when you decided how big those popup windows would be. This, in the long term, caused problems because the people who are actually in charge of the content and layout could no longer do their part in ensuring quality. Meanwhile, if you’re anything like me, you suck at designing, and you made the website look and act worse, annoying your customers and content providers.

Javascript Is Buff

One thing I’ve come to understand lately is that Javascript is a lot more powerful than most people realize. In fact, there was a time (probably still today) when putting "expert Javascript" on your resumé probably made you look like an idiot. Of course, there was also a time when being an expert at CSS wasn’t that impressive either. Things change. Javascript has grown up and only a handful of people noticed. I’m not going to go into the guts of it. I’m only going to go over the little segment that we need to understand to move forward.

Javascript has a strange model when it comes to Objects. Lots of stuff are objects in Javascript. Div tags, A tags, you name it — it can be manipulated as an object. But more interesting is that functions are objects in javascript. You can declare a function without a name and then assign it to a variable, making that variable plus parentheses an instant reference to the newly created function. Observe:

function someFunction() {
  alert(‘hi’); // pops up a window that says hi
}

The above example is a very simple function in Javascript. What’s interesting is that you can assign this function to a variable:

var iHateHello = function() { // notice no function name
  alert(‘hi’); // pops up a window that says hi
}

This just created a reference to that function which can now be used as follows:

iHateHello();

Side note: This is how object oriented programming is done in Javascript. You create an object and then assign functions to its properties.

If I have a div tag with an ID equal to "header", I could access or change its parameters by calling:

document.getElementById(‘header’).className = "some new value";

This is key to understanding how you can remove Javascript from the content. There are a special set of properties that can be assigned in this way. The list of these properties is beyond the scope of this article.

Bringing It All Together

I’m sure you’re already starting to see how it works, so let’s wrap it up!

So If I wanted to add an onclick action on those Keira Knightley links earlier, how would I do it without changing the source code, which is just a normal link to the IMDB website? Like this:

document.getElementById(‘keira-link’).onClick = function() {
// make a popup window here
}

You would place that in a seperate .js file and include it in your page at the very end of the document (right before you close the tag). As neat at this sample code is, it still does not do justice because in order for it to work, you would still have to go back through EVERY article and make sure it has a unique ID and then write it down so you can reference it in your js file, which by the way, would get huge. So what’s the cleaner solution?

First, let’s take a look at how the A tag SHOULD look.

<a class="popup-link" href="link-to-external-site">image or text</a>

Then you do the following:

var allLinks = document.getElementsByClassName(‘popup-link’);
for(var i = 0; i < allLinks.length; i++) {
  allLinks[i].onclick = function() { /* make popup; return false */ }
}

Note that the mysterious "make a popup" code segment was omitted because it’s beyond the scope of this article. However, I will point out that the popups must be dynamically generated and the link which the popup must open is found at allLinks[i].href. They must also return false so that the actual link is not activated. You’ll also notice I used a function you’ve probably never seen called getElementsByClassName. That’s because it doesn’t exist. If you’re wise, you will immediately download Prototype and read about it. But if this isn’t an option, you can write that function yourself using any of these links. For the record, using Prototype is wise because it can streamline your Javascript code, simplify otherwise convoluted logic loops, and shorten everything. For example, the above code using Prototype methods looks like this:

$A(document.getElementsByClassName(‘popup-link’)).each(function(e) {
  e.onclick = function() { /* make popup; return false; */ }
});

No extra variables, less text to write, and less likelihood of writing errors due to erroneous cut and pasting.

Anyway, to go back to the original problem at hand… This snippet instantly makes it so every link ever written anywhere on your site of a certain class is now also a popup link. The key is also because if the browser has no Javascript enabled, no harm no foul.

Some of the more attentative readers may notice that the designer STILL has no control over the size of the popups. There are a few ways to address this:

• Deny it and scream of feature creep
• Do the small change for him. It’s only variable in 1 line of code for your entire site
• Parse the title attribute to dynamically pass the x and y value to the onclick (e.g., title="10,20") and use default values
• Parse another field, such as the ID for the dimensions
• Create a configuration JS file and keep it well-documented for the designer to polish as he sees fit
• Place dimensions in the link which are then parsed out if they exist (e.g., "url.com/page.html#anchor|10,20")
• Etc.

As you can see, having direct access to the tag and its elements opens many possibilities. Javascript markup inline with the rest of your HTML is no longer necessary, and if properly planned, can significantly reduce long term overhead when your designers decide they want to redesign the site.

Conclusions

There are three major benefits to the implementation I am describing.

Scenario #1: Your boss decides to make the site not use Javascript

Down the road, this method means stripping out Javascript from the site is as simple as modifying the footer and you’re guaranteed basic functionality remains intact. Because you used Javascript to enhance, not replace, built in HTML functionality, everything will work even if the user’s browsers don’t have Javascript support.

Scenario #2: Changing the popup function name

Maybe you wrote a popup() function that wraps the window.open() method and now it needs to be renamed. Why? Perhaps there is a naming conflict. Or maybe you need to write a popup2() that applies to only some popups.

Or maybe you want to add in a wrapper that you should have had in the first place.

So if you mixed Javascript into your HTML, this means a whole lot of error-prone search and replace. Using my method, you avoid all that.

Scenario #3: Designers don’t program

Perhaps the single greatest reason to use this method is that designers are freed from programming. They simply tell you, the programmer, what needs to be programmed. Then they just attach a nice little class or ID to what needs to be enhanced and they move on. It means you don’t have to re-write poorly written, buggy Javascript. Most of all, this saves your company time because nobody has to delete or add in Javascript each time a comp is revised.

Application in This Site

While there is little to no need to further explain how the links at the top of this site work, it should be obvious now that the class "ajax-link" applied to any a tag on this site causes the link to become AJAX-ified. I could have easily made the entire site, including this blog, work with this system, but I excluded the blog from using this system because of its specialized header. You will notice the following demo link will NOT refresh the page when you click on it. If you doubt me, just notice that your back button will not go to this page after you click on the link. See the demo. Code:

<a href="/about.php" class="ajax-link" title="demo">demo</a>