Blinded By JavaScript
Posted by Kurt on Tuesday, May 12, 2009 in category:
Before about a month ago I had never touched JavaScript, I thought it unnecessary. I had been able to do everything I ever wanted in CSS, and if some task could only be done in JavaScript, then it was not a task worth persuing. Well as of a month or so ago, I began a project at work to create an invoicing system. I’ll get into the specifics of the project in some other post, but a large part of it was using jQuery to create a true dynamic web application. Picking up jQuery does not strictly imply that you pick up JavaScript, but they are rather close enough that you begin to see the majesty and wonder of being able to manipulate the DOM so freely.
This is a trap. I fell for the trap.
A large part of the web designer’s job is to translate a mockup of a design from Photoshop or something into HTML/CSS. This means looking for logical divisions of content and thinking about how the box model can help you achieve this layout. When I created the current design, I saw two columns separated by the fake 3D effect and said “Ah! I will have two columns! One of them will have the repeating background trick and an image each at the top and bottom!” Easy to think, impossible to implement. First off, the sidebar needs to scale with the content, or the 3D illusion is broken. And thus begins my descent (the highest form of patriotic) into the trap. I turned to JavaScript.
All I need to do is grab the heights of the sidebar and content, find which is bigger, and resize the other! Oh, but I need to take into account the offset. Oh but I need to move that bottom image as well. And after not too long, I’ve created something that functions. Hooray. Unfortunately, this is a problem for a number of reasons,
- It is highly inelegant. It’s overly complicated and the browser should be doing it for me.
- The syntax highlighting code breaks it because it takes longer to execute
- It can be easily solved in CSS with a little more creativity
Look, all that needs to happen is have the content div be the combined width of the current content and sidebar divs, images at the top and bottom (use an inner footer div that clears both and has an image background), and then have the two columns with no image backgrounds just take up however much height they need and let the browser sort it all out. That’s what browsers do best.
I got caught up in the shine. I saw what JavaScript could do and was tempted to make bad layout choices by the fact that JavaScript can be used to crutch almost any situation. Learn from this. Think long and hard about each thing you want JavaScript to do. Can it be done no other way? Could you handle it in either the PHP/ASP/Perl/Python or the CSS? Because you should. Here are some things which you can and sometimes should use JavaScript for:
- Animation. This is a whole can of worms, another post maybe.
- AJAX and all that cool web 2.0 stuff
- Form validation. Can be used with number 2
If it’s not one of those things, think again.
This post brought to you once again by the <ol> tag.
Great post! Just wanted to let you know you have a new subscriber- me!
good stuff — let’s see more of it