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.
This article is filed under Design & Development and has the following keyword tags: development, programming, design.
18 Comments
Legacy User says:
"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.
Legacy User says:
I hand coded my entire website, I believe is XHTML 1.1 Valid, check it out at www.dwgt.net/
-- Tim
Legacy User says:
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
Legacy User says:
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
Legacy User says:
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
Legacy User says:
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
Legacy User says:
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
Legacy User says:
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
Legacy User says:
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
Legacy User says:
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
Legacy User says:
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 www.tjgill.com
-- Tim
Legacy User says:
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
Legacy User says:
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
Legacy User says:
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
Legacy User says:
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
Legacy User says:
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
Legacy User says:
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
