Back

The Overly-Complicated and Useless

Welcome to my first installment of How Not to Write Javascript, or HNWJ! I’ve been keeping an eye out for horrible examples of code that have caused me to cringe. In each installment of HNWJ, I will go through each code block and explain why the code is bad and its result.

How HNWJ Works

For dignity and privacy reasons, I’m not going to name the developer or the site the code was added to. I’ll also change some of it (class names, domain names, etc.), but leave the good stuff. I’ll do my best not to humiliate, or mention the gender of the developer. (I don’t want comments like, “well, no wonder it’s crap, it was written by a man/woman!”) My goal with this series is to educate other developers/coders on what not to do, so I will try to emphasize how bad it is if it’s really that bad.

The Ugly

$rootURL = "http://domain/";
$( "article.section1" ).mouseover(function() {
  $(this).wrap( "<a href=" + $rootURL +"section1/ class="btnsection1"></a>" );
  $('a.btnsection1').addClass('hovering');
});
$( "article.section2" ).mouseover(function() {
  $(this).wrap( "<a href=" + $rootURL +"section2/ class="btnsection2"></a>" );
  $('a.btnsection2').addClass('hovering');
});
$( "article" ).mouseout(function() {
  $("article a").removeClass('hovering');
});

Disclaimer: I made almost no modifications to this code. I promise. I couldn’t even make this up if I tried.

Any developer reading this who has experience with jQuery must have just facepalmed. (I honestly forgot what it did, then I re-read it and did the same.)

What’s wrong with it?

  1. Least serious offense: Syntax. The link tags don’t use quotes around the href attribute. In fact, the type of quotes (double vs. single) changes quite sporadically and for no apparent reason throughout the script. There are specific uses for both types of quotes, but there’s no obvious reason for changing them here. There are also randomly placed spaces within parenthesis, but now I’m getting nit-picky.

  2. The code adds a ‘hovering’ class to a link tag inside of an article tag when the mouse passes over the link. It’s removed again when the mouse leaves the link. This one is pretty self-explanatory. This is easily replaced by the :hover pseudo-class in CSS.

  3. It adds a link tag wrapper around those two articles every time the mouse passes over it and they’re not ever removed. This is how I first noticed this code. Testing the page, I ended up with a bunch of link tags around that one element. As if adding that wrapper on every mouse over was bad enough, this developer had full access to the markup. They built it. They could have just placed the link tag statically around the object being linked.

Wait, so what needed to be accomplished?

All they were trying to do was change a background image on hover. That’s it. I mean, that wasn’t the whole task. They were tasked with building the whole page. Needless to say, we had some cleaning to do later.

TL;DR

This code was not only way overly complicated, but it was also useless, because the same functionality can be accomplished using just CSS. With the popularity of Javascript code on the web right now, the last thing we need is the useless kind. I understand where they were coming from, though the technique of using Javascript to replace a link image on hover has long been obsolete.

This code is very far gone in git’s history of that project at this point, and hopefully no one will ever pull it back in.

If you noticed something else that I missed, point it out in the comments section below. Otherwise, happy coding everyone!