Practical eCommerce

Manage Subscriptions · Subscribe Now · F.A.Q.'s

HOME · Friday, July 4, 2008

Development & Programming

Programming Notes: Importance of Hand Coding

By: Brian Getting
Comments: 18

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 non-sensical 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 detais, 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.

AdvertisementInfopia

Blinklist | Del.icio.us | Furl | Ma.gnolia | Newsvine | Spurl | Reddit | Technorati

Published on Wednesday, December 19, 2007

Comments:

"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. :)

Posted by: Barrie O.
Thursday, December 20, 2007

Well put. I agree 100%.

Posted by: Jace
Thursday, December 20, 2007

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

Posted by: Tim
Thursday, December 20, 2007

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/.

Posted by: Brian Getting
Thursday, December 20, 2007

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. :-)

Posted by: Jay
Thursday, December 20, 2007

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.

Posted by: GargantulaKon
Friday, December 21, 2007

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.

Posted by: Jennifer
Friday, December 21, 2007

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

Posted by: Sean Collins
Thursday, December 27, 2007

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...

Posted by: Carrie McDougall
Thursday, December 27, 2007

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

Posted by: Chris Luksha
Friday, December 28, 2007

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.

Posted by: Sandy
Wednesday, January 02, 2008

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

Posted by: Tim
Wednesday, January 02, 2008

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.

Posted by: Brian Getting
Wednesday, January 02, 2008

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.

Posted by: Tim Atkinson
Thursday, January 10, 2008

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)

Posted by: Ben
Tuesday, January 15, 2008

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.

Posted by: Pamela Hazelton
Wednesday, January 23, 2008

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.

Posted by: Dave
Thursday, January 24, 2008

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.

Posted by: Scott
Monday, March 10, 2008

↑ Back to Top

Leave a comment:

Please enter the following security code exactly as it appears.


Comments are stripped of HTML code upon submission. All comments are submitted for approval prior to being published. Please allow up to 24 hours for the approval process to take place. Practical eCommerce reserves the right to remove any comment at any time for any reason.

 


Related Articles

Articles at Practical eCommerce related to Programming Notes: Importance of Hand Coding:

Related Podcasts

Podcasts at Practical eCommerce related to Programming Notes: Importance of Hand Coding:

Related Links

External links related to this article.

RSS 2.0 Feeds

Atom 1.0 Feeds

Technorati Tags

Ecommerce Articles

Browse All Articles
Browse our complete archive of ecommerce articles.
Accounting, Management & Legal
Ecommerce articles related to managing a small business including ecommerce accounting, business strategy and legal considerations.
Conversion & Usability
Online business articles about converting web site visitors into customers and how to gauge and improve your business website's usability.
Development & Programming
Articles to help designers, developers and programmers create successful, search engine friendly ecommerce websites and improve existing ones.
Hosting, Infrastructure & Software
Articles for ecommerce businesses about ecommerce web hosting, business infrastructure, business strategy and helpful ecommerce & small business software.
Interviews & Profiles
Interviews with prominent ecommerce business personalities and profiles of successful online businesses.
Inventory & Shipping
Ecommerce articles about inventory management, ecommerce order fulfillment and product shipping considerations.
Marketing & Revenue Growth
Articles relating to online marketing, email marketing and using the Internet to growing your business.
Search Engine Optimization
Search engine optimization articles for ecommerce business owners, strategists, marketers and developers.
Shopping Carts & Online Payments
Articles covering ecommerce shopping cart platforms and options for choosing an online payment gateway.
Training & Education
Tutorials and articles providing training and education for ecommerce business owners and developers of ecommerce websites.

Search Articles

Ecommerce Community

Ecommerce Blogs
Read our blogs about ecommerce topics written by industry professionals.
Community Forum
Connect with other ecommerce professionals to trade advice and answers in our community forum.
Podcasts
Check out our ecommerce podcasts covering topics ranging from interviews to tutorials.
RSS Content Feeds
Subscribe to our RSS feeds and have fresh ecommerce content delivered to you.

Ecommerce Resources

Free Email Newsletter
Sign up for Ecommerce Notes, our free email newsletter for ecommerce business owners and developers.
Ecommerce Directory
Browse our directory of ecommerce products and services, or submit your own listing in our directory.
Ecommerce Glossary
Familiarize yourself with terminology or submit terms to help others with our Ecommerce Glossary.
Events Calendar
Find out about upcoming ecommerce events or invite other ecommerce professionals by posting your own event.
Press Releases
Browse ecommerce related press releases and post your own press release for distribution.
Ecommerce Store & Back Issues
Pick up back issues of Practical eCommerce magazine along with other merchandise from Practical Ecommerce

About Practical eCommerce

Frequently Asked Questions
Look at frequently asked questions regarded using our website, subscribing to our magazine and more.
Advertising Information
Information about advertising in Practical eCommerce magazine, on our website, or in our email newsletters.
Editorial Sharing
Learn about options for sharing our content with your visitors, customers or employees.
About Us
Learn more about Practical Ecommerce magazine and meet our staff.
Contact Us
Contact Practical Ecommerce at any time for more information. We'd love to hear from you.
AdvertisementClearCartMarketplace EarthEndicia

Copyright 2007 Confluence Distribution, Inc. and Practical eCommerce.
All Rights Reserved.

Privacy PolicyConditions of UseContact Us