The 7 Habits of Miserably Failing Web Developers

OK bad Stephen Covey references aside, we developers can often fail into bad habits while slammed with coding that eventually stop us from reaching our full potential. While some habits can help us speed up our work, others (like stuffing my face with candy as I type…) can do harm to both our business and personal life. Let’s put down the halloween candy and look at some of the bad habits you can develop in your coding life.

Habit #1: Couch-Potato-ism

Is this you?

Is this you?

We all love constant work and good downtimes. The only problem with both is that you can start developing a couch potato mentality. You either get into the habit of doing the same types of jobs day in and day out or you’re left with no work and staring at a blank computer screen. You’re not learning anything new. This is a good way to dumb yourself out of the field. You should be learning new ways of coding, tricks or even new languages every day.

I’ve heard a lot of people say to give your self “fake” client projects and practice that way. However, I don’t like to waste my time. Learning, per se,  is never a waste of time, but I’d rather learn AND make some fat cash. (Ok maybe a little cash…) It’s difficult for web developers to do this, because we can sell photographs or designs, and there aren’t any stock code snippets sites out there yet (anyone want to start one with me??), but I’ve found a few good ways to up yourinsert-your-favorite-2-4-letter-web-language-game.

  • WordPress/HTML/CMS templates – I’ve recently teamed up with a designer, and we just finished our first template (hoping it will be out by the time you read this). Although I spent FOUR times as much coding time as I would’ve a paid site, and it’s a possibility I’ll make little to no money off it, I easily quadrupled my knowledge of backend WordPress in a weekend. I don’t even do backend programming. This learning experience = way worth it.
  • Books in other fields – I love reading. I’m a real geek all around. What better thing to do in my spare time than read a new book? While programming books are impossible to follow if you’re not sitting in front of a computer, web theory books are GOLD. I’ve been interested in doing some additional marketing for my site, which is why I picked up a copy ofSix Pixels of Separation a few weeks ago. I might go back and pick up a copy of Seth Godin’s Tribes: We Need You to Lead Us next.

Habit #2: Keeping a coded bird’s nest

My favorite thing in the world is opening a website that someone else has coding and going blind instantly. No really, it’s a pastime! Just as bad as designers who neither label or organize their layers in folders, developers need to be just as organized. Code inside of code inside of code needs to be properly indented.

Now imagine how much you’d have to spend if you were missing a closing div tag somewhere….Just make sure your code is always indented and spaced well. Top level touches the side, next element gets one indent, the next another etc etc.

Habit #3: Stuck in 1993…and proud of it

I bet this guy codes in tables...

I bet this guy codes in tables...

I still have developers (especilly .NET developers…) that argue with me about tables. No, not a dining table – but that archaic way of laying out a page using static sliced images, Photoshop “programming” and Dreamweaver’s design view. If you ever want to be a real developer, you need to start using CSS properly. Tables should ONLY be used for tabular data…and eating on.

  • True story -> I’ve been making websites since middle school. My first website was a super cool site dedicated to my beloved Sailor Moon, beautifully laid out in frames and animated gifs (this was before image programs for me, so no slice tool!) Then along came Paint Shop Pro and it’s wonderful slice tool, hence the birth of Amber’ed Tables. I stopped making websites for a few years after I started college. I started one for my portfolio and guess what? Those few years that I’d been out of the web world, a little thing called CSS (See habit #1 above)…hence I was laughed out of a lot of web portfolio critique forums. I had to learn it like everyone else. (Yea yea, all you got out of this story was I was an anime dork, didn’t you?)

Learned the correct way, CSS IS easier than using tables (both have the same application “theory” anyways, i.e. <td> versus <div>, and:  more powerful, quicker to download, easier to make browser friendly, easier to move stuff around, easier on my eyes when I have to fix it and just plain easier…and correct.

Habit #4: One big ol’ image to rule them all

Bad developers use the slice tool in Photoshop like there’s no tomorrow. This is a horrible practice because it makes the website both static and slow loading. Only graphical data (pictures) should be an image; and the only time text should be an image is if the font isn’t web friendly and the client insists on using it. Also, if the client decides to change something after you’ve finished coding (which happens 99.9% of the time) and everything is an image…well that’s going to be a huge PIA for you. It’s also bad for SEO because like flash, a search engine can’t read an image, and an alt tag is held in less esteem that real content. Let’s take a look at some tips to reduce images:

  • Repeating Bkgs – Unless the bkg is one big image, it’s probably a plain color, which you can use a regular hex for, or a repeating image (look at my bkg). For repeating images, take the SMALLEST snip of the bkg possible that still makes it repeat correctly. I believe my background is only 1px wide and tall.
  • Buttons – If the bkg of the button can’t be rendered via CSS, it’s ok to use an image, however the text inside a button should be…text. I can’t tell you how many times I’ve had to change the text of a button!
  • 1px regular horizontal dividers should always be an hr tag instead of an image

Habit #5: Stickin it to the designer

Seriously-love your designer, ok?

Seriously-love your designer and code, ok?

Just because you’re a developer with zero sense of design, doesn’t mean you shouldn’t care about the design. When a client or designer hands you a PSD they expect the website to look EXACTLY like the PSD. It doesn’t count to just throw up some code with some of the design elements and call it a day. I’ve had a few clients come to me because their programmer just threw up the site – and it was completely off from the PSD (we’re talking 50-100s of pixels) and none of the fonts were even the correct size, style or color. That’s a good way to lose your clientele. While no website will be exactly pixel for pixel, it’s to your advantage to actually figure out how many pixels div #1 and div #2 are from each other. It’s equally as important to make sure your fonts and colors match the PSD.

Habit #6: Who cares about standards? I make the rules!

You’ll probably get tired of hearing me say this…but validation and semantics are important!! (Notice the bold?) Why are they important? Do you struggle with browser compatibility? Do you have problems getting things laid out correctly? Do you have problems with code not functioning as you thought? Do you validate and use proper semantics? I bet not. While these things don’t always fix the site up perfect (I should tell you about the doozy of the site I coded this weekend) it gives you a HUGE headstart when trying to fix it in all browsers. When you don’t validate and something is messed up – you have to use all kinds of hacks and start at the code for long hours trying to figure out why something isn’t moving to the right; but if you’ve validated, you don’t have to worry about unclosed div tags, or something overflowing into something else. Plus it gives you a HUGE heads up in the community – I’ve recently seen a HUGE uplift in validation standards (thank god) and many agencies won’t hire you if you don’t validate.

Habit #7: Their code isn’t politically correct

A great developer names their elements and images with things that make sense: header, nav, leftColumn, rightColumn, buttonHelp, navAbout etc etc. A horrible developer names their items stupid things that don’t make sense: button1, button1234, image36, fatcat etc etc. Tell me, where on the website is button 1,234? Wouldn’t it be more helpful if it were named buttonAboutLady or buttonAboutHelp? In a year, when a client comes back to you and wants to change button 1,234, are you going to remember which button that is? While you can always look at the source; it still takes an insane amount of time, especially when its a HUGE website (think a hospital website) to go through 1,000s of images to figure out which one you’re looking for. Ditto in the CSS. Here’s how I try to name my CSS elements and images:

  • What is it? A nav item? Button? Callout?
  • Where is it? The homepage? About us? Blog?
  • Description? If there’s more than one types of these I’ll also give it a description.

I.E. An image on the about page of your cat may be called aboutCat, or a button of your cat on your blog may be called buttonCat or buttonBlogCat, depending on how complex your site gets. This helps later on, believe me.

A lot of these are easy bad habits to develop, or habits already developed by beginning developers. Work on these to become a better developer and I promise you’ll see an increase in the quality and amount of paid work.

What are some of your bad habits?