A Single Article
Read it, comment, and share it with your friendsDoing it wrong
The key difference between my past life as a web hobbyist and my current one as a web professional is that, unlike before when all the code I ever touched was my own and I had complete control over my projects, in the past year I have been working with a lot of code written by others. I am quickly realizing that there are a lot of people out there who claim to be professional web developers but don’t have the code skills to back it. I know this is a harsh thing to say, but every now and then I have these head-desk moments that reaffirm it. Is the lack of quality in website code due to the fact that web development is the black-sheep, catch-all, Bachelor of Arts in English of the programming industry? Are server languages and HTML to blame for being so simple, easy, and flexible in how you can write things and what will be accepted? Am I expecting too much? I don’t have any answers for these questions, but I have two WTF anecdotes that I have to share before they drive me insane.
The first is not so bad and I’m sure people have seen this before. When I started working for The College Freeway over the summer I had to learn the initial database model that had been put in place over the past school year so that I could build out the template pages in Smarty. Obviously this involved figuring out the primary keys for each table, which I naively assumed were just auto-incremented integer id’s. Was I ever wrong. You can imagine my reaction when I discovered that documents were indexed using the following process:
- Make a 52-index array of the alphabet in uppercase and lowercase
- Loop 88 times to concatenate a random index of this array to a string, generating an 88-character random string
- Check if the result is already being used for another index in the table, if so, go back to 2
- Use this final, unique, completely random string as the index, and only index, for the document
This method took about 10 lines of PHP code, made the rows for documents almost twice as large, and angered me so much that I wrote mean and dirty things in the comments and committed those things via SVN for everyone else to see. People say I’m patient but sometimes I’m just not patient enough. Needless to say, I had this code removed and someone on the team changed the table to use an auto-increment integer as the primary, unique id. Dealing with this head-desk, however, could never have prepared me for the following one, which happened yesterday.
I was working on a site with an image-based navbar across the top. This site is rather old so the navbar was made of gifs and used Javascript to handle the rollover effects. I expected that much and didn’t really mind it, since everyone used to do rollovers this way (for fun, check out a more modern way). What was surprising, however, was that the navbar was really just one big image linked to a map. Remember those? They were great for weirdly-shaped images, but I never expected people to use them for perfectly rectangular link images. I was wrong.
Worse yet, though, was that the links in this large image changed their background-color when hovered and when they were the current link. How was this done with a single large image being used for the navigation bar. Do you really want to know?
Can you handle it?
Well, there was one image for all the links when not hovered or selected. Then there was another image for all the links with the first one highlighted. The another with the second one highlighted. Another with the third. The fourth. So on.
But wait! There’s more!
What if a user is on one page and hovers the link for another one? That means two have to be highlighted. So, there was one image with the first and second link highlighted. Another with the first and third. The first and fourth…. second and third… fourth and fifth… remember those permutations we did in middle school? And then we forgot how to do them but we had to re-learn them in high school? Then, we forgot them again but some of us had to re-learn them in college… and, well, I’m so glad I didn’t go to grad school, but, well, if I had then maybe I could offer an equation for the total number of images, but just by counting them I can tell you there were OVER 20 IMAGES FOR A NAVBAR WITH 6 LINKS.At ~2.7 kB an image, that’s 50 kB for a section of the site that is only 19 pixels high… and you only have to visit 6 pages to get all of the images and use up the full 50 kB of bandwidth. Are you feeling this?
When I realized all this, I yelled out loud (I share an office) and had to get up from my chair. It was so bad that I had to get some water and step out of the office for a while. It made my heart hurt. It wasn’t hard for me to understand why this navbar was “difficult to change” and “decrepit” like some others had described it. I just couldn’t believe how little justice those words did for what I found. If head-desk were more than a figure of speech, I would have been bleeding.
The solution I came up with for the “new and improved” navbar used 7 images which altogether weighed in at less than 1.5 kB, along with 3 CSS rules that totaled to less than 10 lines. I just can’t stop thinking about the divide that sits between me and whoever built the site… there’s my expectation that web developers tend to do things the easiest and most elegant way, and there’s my realization that (some) web developers never manage to find the most elegant way and just do everything all painful and messy. I don’t even like to think about it.
I’m just fearing the next head-desk moment.
Get a Trackback link
11 Comments
Responses to my articleI feel your pain brother!
I think that the lack of quality web design education programs is partially to blame. Most colleges that offer web design courses are teaching a 1997 tables and dirty hacks approach. Not to mention they’re taught to rely on editors like Dreamweaver, so even properly indented code becomes too much to ask for. Unfortunately, so many people who learn this way become set in their ways. I feel that colleges are really the next important step in the future of the web.
I feel your pain. Working where I do we acquire a lot of sites, and with it so much nasty legacy code. Code that breaks if you breathe on it. Keep your chin up.
I have also experienced this with my current part time job and I can also share many similar stories that will make us all laugh but grimess with pain
That is an unbelievable method of creating primary keys! Why would you?!
I have just started at my first web development job and haven’t had quite the “head-desk” moments you have as the other developers I’m working with have a reasonable awareness of standards. There was one time when it took three or four of us to convince the senior front end developer that tables were tables and not lists with spans in.
Good luck in the future, though perhaps you should get the company to invest in a softer desk for you…
Holy shit!
I just… wow.
The best thing to do when you encounter anything that bad is to head over to www.worsethanfailure.com and have a good laugh. It will reassure you that things could be worse. And if it doesn’t — well, you can always submit your findings
I completely understand your frustration. I just wrote a somewhat similar post last night about the fact that a college degree should not be required for web design, because nowadays most people just go to school to get a certificate saying they’re a web designer, when in fact they can’t even tell the difference between a div and a table.
I work with some pretty stellar guys, so it’s hard to share the same frustration at work, but I have been in similar situations. If the guys I worked with now saw something like the way things were indexed on that first project you mentioned, they would probably firebomb the office and leave for the border. I just don’t understand the way people think sometimes.. all I can assume was that someone decided to really abstract things beyond what was necessary, which ended up really just causing more pain and agony for other developers such as yourself.
In terms of the permutation nav-bar, that’s flat out ridiculous. As I read your description I kept thinking… yea I’ve been there, yeah I’ve been there, WHAT?! And then it hit me, that there was a different image for every possible state and action combination on the bar. I definitely would be feeling the same way if I was working on something like that. However, lucky for me, I don’t surround myself with that kind of suicide inducing negativity anymore
My only hope is that you didn’t actually storm out of the office and scream from your desk. Yes, that was totally rediculous, but was it worth all of your frustration? Hopefully you didn’t react too harshly
But, again, I totally see where you’re coming from dude.
Thanks for the comments everyone.
Michael: I fixed the navbar and made it 100 times leaner, so I felt good about the whole thing when it was over. Plus, I called my fiancee and we talked about it, which really helped. I survived.
Phil: Maybe I should wear a helmet to work… I can never be too safe, right?
Welcome to the web industry, or maybe I should say the Software industry.
There is some incredibly bad code out there. Maintenance is the most frustrating part of the job because everyone thinks very differently about problems. And then there are the bad variable names, poorly commented code and so on…
The site I currently work on is a head-desk experience on a daily basis. There is embedded javascript, table-based layout and some horribly written server-side code.
welcome to the real world - she’s a bitch. that’s why if you can do it on your own stick with it or you’ll be dealing with crap like that as a consultant until you go damn near insane, have a nervous breakdown, and can never do web development again.
Oh jeez, the amount of similar stories I have would knock you off your feet.
One of my favourites is a site we maintain for a client that has some member-only content. Instead of just creating single alternate pages for the private content, or members-only sections on a page, the original “developer” made an exact replica of the website and simply placed it in a directory called [sitename]_members. Not only is this not secure in any way, shape or form, but means that EVERY TIME I have to update the site (which is nested tables in nested tables in nested tables, font tags, etc) I have to do it twice. It’s one of my biggest headaches, but the client doesn’t want to pay to fix it because “it works”.
Still, I love my job. Wouldn’t change it for the world.
Leave a comment
Share your thoughts with the worldYou can use Markdown, or you can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>Please keep comments respectful and on topic.
This form is guarded by Akismet, so don't waste your time trying to submit spam. It won't work. Ever.