web-peeves

Web development pet peeves

We all have our coding conventions. Few of us follow every best practice known to the computer-science world, but instead follow practices that are convenient or make sense within our environment. That being said, there are a few common practices that just get under my skin! In more of a light-hearted manner of course, not one of them could be considered detrimental to any project, but they are fun to point out.
 

Every beginning has a finish

That didn't sound right! And neither would The Smashing Pumpkins' Grammy-Award winning song had it been titled The Finish is the Beginning is the Finish. Yet, I see this synonym-trading opposite frequently in code snippets:

var start = 0;
var end = mystring.length;

It doesn't look or feel so wrong when the words used in separate statements (sentences?), but there's something about it that makes me wish it would raise a compiler warning :)

 

Spaces in server-side language translate to spaces in HTML

There are two kinds of people in this world. Those that like their server-side code to look clean, and those who like the rendered HTML to look clean. I'm generally lean towards the latter, when it isn't much trouble.

So, what's wrong with the below ColdFusion statement?

<option value="#qValue#" <cfif url.value eq qValue>selected="true"</cfif>>

When the condition is true, the HTML looks great. But, when the more probable false condition occurs, we end up with a space in our option tag:

<option value="item" ></option>

By managing the space in our server-side code, the HTML looks like it was hand-written for perfection!

<option value="#qValue#"<cfif url.value eq qValue> selected="true"</cfif>>

 

My comments are my thoughts, and you can see them

As we flip between server-side code and client-side markup so often in web development, it's easy to let our good commenting practices go astray on the client side. How embarrassing is it when you unintentionally leave a comment like this on a web site your developing for an important client:

<!-- the client wants a picture of his scary looking cat on the home page for now, yikes, just poor genetics - let's remove this as soon as possible! -->
<img src="cat-fpo.png" alt="very cute cat" width="100" height="100" />

Now what if your client is just daring enough to decide to look at the HTML source code? If you really want to leave spiteful remarks, best do it on the server side:

<?php // the client wants to... ?>

That's not the pet peeve part, I wish I saw more comments like that. I'm talking about those HTML comments that really should be on the server-side:

<!-- load this script asynchronously to improve page speed -->
<!-- if the user is logged in, display My Account, otherwise, display the login button -->

JavaScript plugins are one of the biggest culprits on this front. When you do the old "copy this code, then paste it into your <head> tag" routine, you typically get some HTML comments in the mix:

<!-- Begin Coolness Widget, use the JavaScript variables below to customize -->

Is this really content that every single visitor's web browser should be downloading?

A related peeve is self-indulgent copyright comments found in many JS libraries. These comments, again, are being downloaded by every visitor's browser, each time the script is requested. A horrible waste of bandwidth. See my post on saving the environment through code optimization!

I like how jQuery does it, a simple one-line copyright, which points the viewer to a separate text file:

* Copyright (c) 2012 AUTHORS.txt; Licensed MIT, GPL */

 

According to the HTML source, someone verified this site

I understand why various web services and tools would prefer to work with the actual owner of the website. Hence, they offer you a few site-verification techniques, among them the ability to add a meta tag in your site's HTML <head> block.

<meta name="google-site-verification" content="TwzhQ6EyN8lSFgXKXw3b-gqJYwmEgUQS7kIq1mCLzLM" />

Usually, other options are available, such as adding an HTML file to the site root, or a TXT record in the DNS. So, why do so many people opt for the meta tag? It adds unnecessary clutter to the <head>, additional download bandwidth, and has absolutely no connection to what metadata actually is (data about data). The fact that the website has been verified by a web service really isn't information about the web content itself.

 

HEY, THIS IS HTML!

Your browser knows how to parse HTML, and it won't do it any faster if it's all uppercase. Does it slow down rendering of the page, probably not. Does it cause your HTML editor any parsing headaches, doubt it. But, it certainly does cost more to produce. Huh? That's right, that little LED light on your Caps Lock keyboard button sucks a little juice – about 4mW. But, if 10,000 web developers use it ever day, that's 4 watts per day. Come on guys, turn the Caps Lock button off – save the planet!  http://en.wikipedia.org/wiki/Light-emitting_diode#Miniature

 

Thanks for listening to me vent – feel free to chime in with your own peeves!

Why follow me on Twitter?

  • I tweet about new technologies, services or libraries I find interesting
  • Yeah, sometimes I'll post a pet-peeve or rant about something trivial
  • If I discover something that made my web development life easier, I share it
  • I'll shout out any handy tip that I think might be useful to other devs
  • Very rarely anything promotional


Tagged .

Updated: 2013-08-23

Phil LaNasa follow us in feedly