Practical Ecommerce

Programming Notes: Importance of Hand Coding

Let’s be honest. Most people do not go into website design because they enjoy writing code, or because they want to root through hundreds of lines of seemingly nonsensical expressions. That comes later. Most people start with a visual idea and work from there, usually taking advantage of applications like Dreamweaver or GoLive to help them avoid writing code. While great for the beginner and available to the masses, it’s important for developers to wean themselves off these tools as soon as possible.

Hand-coding, while probably not the most popular option out there, is the best way to ensure that your code is clean and compliant. Visual editors tend to make assumptions when they are automatically writing code, which can lead to code bloat (code that is unnecessarily long). For example, Dreamweaver will automatically include extra attributes on some tags, or will insert JavaScript code in order to achieve certain functionality. Even if you use these tools to make developing easier, it’s important to check the code they generate by hand, removing all extra and unnecessary code.

A larger concern is that developers tend to become dependent upon visual editors, preventing them from ever looking at the code behind their web pages. One common example is the case of a developer who edits a page on a website using the wrong document type, which leads to invalid code. Another common occurrence is orphaned or improperly nested tags in generated code, sometimes due to using “find & replace” functions or excessive visual editing.

While most of the appeal of hand-coding comes in the ability to see the details, there are some subtle advantages that may not be so obvious. I have found that hand coding sharpens my attention to optimization and clean coding. Additionally, because nobody really likes to type, I have found that hand-coding encourages cleaner and more compact code that is easier to maintain. After all, when you are typing code by hand, the goal of “Do Not Repeat Yourself” becomes much more important due to it’s implications on the amount of typing you have to do.

Brian Getting

Brian Getting

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter

  1. Legacy User December 20, 2007 Reply

    Well put. I agree 100%.

    — *Jace*

  2. Legacy User December 20, 2007 Reply

    I hand coded my entire website, I believe is XHTML 1.1 Valid, check it out at http://www.dwgt.net/

    — *Tim*

  3. Legacy User December 20, 2007 Reply

    You are correct, your site is valid XHTML 1.0 anyway. For those that are interested in checking their code, you can use the W3C validator at http://validator.w3.org/.

    — *Brian Getting*

  4. Legacy User December 20, 2007 Reply

    "Ween" is misspelled; it should be "wean." Also, "non" should not be hyphenated unless it is followed by a proper (capitalized) noun. FYI, I find that hand coding is faster than trying to use another program or a premade template. :)

    — *Barrie O.*

  5. Legacy User December 20, 2007 Reply

    Hear Hear! As a web designer, i struggle with clients that think that we can just pop things out and expect them to work right straight from a template. At the same time, other non-coders that use these shortcuts wind up making the value proposition for me- once I prove to a client why their site sucks, they have a hard time saying no to the good stuff. :-)

    — *Jay*

  6. Legacy User December 21, 2007 Reply

    Plus, with hand coding you can control which cells fall first in the code, regardless of where they will be placed on the page – a bonus when wanting keyword-laden text in the top 1/3 of the page.

    — *Jennifer*

  7. Legacy User December 21, 2007 Reply

    I started by hand coding first, then got into using visual editors and then editing the code by hand. I agree that learning code is essential.

    — *GargantulaKon*

  8. Legacy User December 27, 2007 Reply

    I believe most serious web designers are hand-coders and only use Dreamweaver-like tools for speedy assistance. I started by learning HTML with Notepad, then I learned Dreamweaver, then I pulled away from it because it created unnecessary code and I was forgetting my HTML… now that CS3 is out, DW is better for coders than before.

    If you don't know how to code, you may find yourself in a situation someday in which you can't figure out why something isn't working right.

    Tenten71

    — *Sean Collins*

  9. Legacy User December 27, 2007 Reply

    I might just be weird, but I actually love to code by hand! Or, maybe I'm just a control freak. Or it could be my huge ego– I want all the credit, not some point/click program that a trained monkey could use…

    — *Carrie McDougall*

  10. Legacy User December 28, 2007 Reply

    Hand Coding – yeah yeah yeah! I am all for it and I LOVE it. I'm with Carrie on that one. Hand coding is well – the ONLY WAY TO DEVELOP :-D

    — *Chris Luksha*

  11. Legacy User January 2, 2008 Reply

    I agree, Brian. I didn't know how to hand code but I had Frontpage. I thought it worked fine at first. Then I took an HTML class and was able to recognize exactly what you are talking about. I'm still finding extra bits of code hanging out and bloating my pages. I love it when I can get an area cleaned up. I'm still working to improve my skills but I think hand-coding is the way to go.

    — *Sandy*

  12. Legacy User January 2, 2008 Reply

    I disagree the ability of Dreamweaver to create code snippets, look up attributes, real time CSS preview, code coloring and organizing, image optimazation, . . . I could go on but I'm not a paid Adobe Evangelist so I'll stop there. The viewing options with Dreamweaver can inhibit people from learning html, I agree. But they will learn html faster with Dreamweaver codeview than with just notepad.

    You should retitle this article the dangers of WYSIWYG editing. Think about the inefficiency of coding 10 html pages and not doing a find + replace rather than getting some code bloat. I would welcome a competition between mr. notepad vs mr. dreamweaver (myself) to see who can replicate a simple site faster and more efficiently (with minimal code bloat). Cutting several kilobytes off of a page is really only cost saving with ultra high traffic sites. You would do better to rant on image optimization rather than code bloat. That's where hand coders could use a lesson or two in how to use software correctly.

    Best,
    Tim Gill
    http://www.tjgill.com

    — *Tim*

  13. Legacy User January 2, 2008 Reply

    Agreed. For me the reality is that there are "code" editors (as opposed to dedicated text editors) that make hand-coding much easier. Additionally, under the principle of DRY coding, you shouldn't be repeating yourself too much anyway, each time I need to use "find & replace" functions I am being told that my code needs to be further abstracted.

    Personally, I highly recommend using TextMate or BBEdit. Both are are great for hand coding. I'm not against Dreamweaver, but I think that eventually everyone needs to move beyond WYSIWYG editors.

    — *Brian Getting*

  14. Legacy User January 10, 2008 Reply

    Yes, I used dreamweaver a lot, but still use notepad on the the road. It would have taken me a long time to create http://www.dwgt.net/nv/city/lv/ using notepad, but most other pages at http://www.dwgt.net/ were completed with notepad.

    — *Tim Atkinson*

  15. Legacy User January 16, 2008 Reply

    Wow… Not going to lie. Hand-coders are so snobby. I get this all the time at school. Hand coders are better cause they write "flawless" code. Whatever nobody writes "flawless code". Also most of you "hand-coders" have "text sites" that look like they were hand coded. I am sorry Adobe has done a phenomenal job restructuring Dreamweaver. It doesn't make sense to just sit there and hand code a complete site. It is like kicking a dead-horse.

    Should you know HTML and CSS? Yes, but do not be limited by a bunch of uptight "I am the best cause I hand code" people. Don't take offense, but seriously get over yourselves. Wow, sorry this is one of my pet-peeves. Hand-coding vs a very good WYSIWYG (Dreamweaver)

    — *Ben*

  16. Legacy User January 23, 2008 Reply

    In response to Ben, I think there are just as many, ahem "snobs", that don't hand code.

    The real need for hand-coders is not so much for flawless code as it is for someone to have the ability to troubleshoot. No software is 100% at locating the problems in displays between browsers, or incompatible JavaScript. With the ability to code by hand comes the ability to troubleshoot.

    I've ripped through more than 20 "coders" simply because they could not troubleshoot issues. I could care less if someone uses DW to create a page, but if he/she cannot troubleshoot issues, then they're no different than the thousands of others who can use a visual editor.

    — *Pamela Hazelton*

  17. Legacy User January 24, 2008 Reply

    For best practice, hand coding is important, however Dreamweaver is not main source of bloat – it's HTML produced from MICROSOFT Word and Frontpage. I am a programmer who uses Dreamweaver to CLEAN UP messy Microsoft output. There's in fact a great "Word Clean Up" utilty built in to it.

    — *Dave*

  18. Legacy User March 10, 2008 Reply

    I started on FrontPage 2000 years back, but then learnt HTML & CSS and progressed to Dreamweaver as well, as it has greater coding abilities than FrontPage. On computers that don't have Dreamweaver, I always use Notpad, as it's quick and easy to use. The problem is, people still try to create sites on MS Word, and if you look at an MS Word web page, finding clean code is like finding a needle in a haystack.

    — *Scott*