Why I hand code

October 13, 2003 | View Comments (11) | Category: Design

Summary: Why I hand code and maybe why you should consider it.

Disclaimer: If you don't like to hand-code then fine. This is not an argument about why you should consider it, but the reasons why I do it. Also this mainly pertains to xhtml/css coding instead of database or programming language coding.

To learn how anything works in this world most of the time you have to dig into the guts of it. You can not sit there and look at it and figure out what little intricacies make it tick. I can not look at a computer and tell you how it works. I could read a book and then tell you how much thermal grease should be applied to the heatsink, but how could I tell you how much does 0.5 grams of thermal grease look like without having done so myself? If I am to truly understand my page then I have to make them by hand.

Painting with a purpose

Every artist has a story behind their painting. They can tell you that every stroke has a purpose. Nothing is ever done just for the sake of doing it. When you hand code your pages every item you add is added for a purpose. You take a greater sense in what you are doing and have a greater understanding of your own pages. Your work should be your own and if you do not understand it then it never becomes your own.

Typewriters are evil

I have a theory about classical literature. I believe that their are more classical works and will always be more classical works written before the typewriter than there ever will be after. The reason I believe this is because writers had to take more care into what they put down on paper before the typewriter came about. They could not waste too many resources on unnecessary words. When they wrote the first "T" in "The" to start the novel they knew why they did it. They felt the "T" being written and therefore immersed themselves in their own novels. Their works truly became their own. You can never get to that level of immersion with a typewriter or word processor. You can not get to that level with a WYSIWYG editor.

It is great that software is beginning to show greater support for CSS and produce better markup. However, a big criticism I have about certain pages is the html/xhtml document itself. When I have to hand-code a page I force myself to seriously consider the structure. I really wonder if it is worth it to add a <div> or simply place a class within the paragraph. Looking at my CSS Google I will admit that my original had a ton of unnecessary markup, but if you look at the code now, I do not know how much more cleaner I could make it.

Power and Control

Hand coding my pages gives me unprecedented control over where each element appears on the page. I control where each element goes. I control how my code is formatted (unless MT botches it up). I have the power. I have the control.

There is a time and a place

I am not saying that I write out every single html page on a site. It would be silly to hand code a hundred headers when all you need to do is write one header and simply include it in all of your files. I hand coded the includes for this site. I hand coded the templates to every page and therefore I know what makes this site tick. I do not hand code my entries because there is no need. MovableType does this work for me. The site is coded and now automated for me so that I can focus on the content that I write (be it through a keyboard). Zeldman and others like to hand code each one of their entries for their own reasons. I do not have any good reasons to do something like that. My entries usually only consists of a <p> here and a <h3> there.

I never understood why schools make their students design pages through WYSIWYG editors. I am sure there are reasons, but to me it is like teaching someone how to paint by numbers. If you really want to be good and gain an appreciation for your own hard work then hand coding is where it is at. Some may believe that as a designer maybe the code should not be the most important thing. That make sense, but then I guess an artist should not learn how different brush sizes affect the strokes on a painting or a photographer the different shutterspeeds of a camera. My point is the code becomes part of the design. Sure over time when I have done over a 1000 layouts in CSS, maybe I could go to a WYSIWYG editor and start whipping out pages. However, I am pretty quick now coming up with layouts since I am so used to hand-coding them myself.

All of this is far from different then when I am doing "real" programming involving a language such as C# or the likes. Something like that obviously is better served using an IDE over a text editor. But when I am just going with XHTML, CSS, and some small PHP then Vim works fine for me. Of course when creating new sites today, I implement old code from other sites. That requires a simple cut and paste without the need to retype everything. It would be silly to do so otherwise. I have a basic stylesheet that I keep and begin with whenever starting a new project so it is not necessary to start anew. The same goes with basic xhtml pages and headers. I freely admit to using tools like listamatic today, because I know how the code it produces works. It saves some time when designing, but I would not have known the code beforehand had I not hand-coded on sites before.

That is why I hand code. If you don't I am not saying shame on you at all. Keep doing what you do and I will keep doing what I do (Editor's Note: Whoops! :)). If you know of any other tools that help you design faster then please feel free to share them with me because I am always looking at increasing the speeds at which I design a site without harming the actual design itself.

Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/25

Comments

#1

"Keep doing what I do and I will keep doing what I do."

Haha. I don't mean to be the grammar police or anything, but this typo was particularly funny... :)

Derek (http://www.twotallsocks.com/)

#2

Oh yeah, good article by the way. I normally hand code the first page, and if it is something that Dreamweaver doesn't completely screw up, I'll edit the rest of the pages in there. Or use MT or something. I also find TopStyle to be a huge help, so you don't have to worry about memorizing every attribute, and validation is just a button click away.

Derek (http://www.twotallsocks.com/)

#3

I hand code almost everything now. Reason being, when I learned HTML that was the only way to go unless you used FrontPage. After a time I used to use Dreamweaver for laying out tables, then cleaning up by hand.

Now that I do most of my work with CSS, I usually hand code. It's just easier. I've been using CSSEdit, which works well, but I find myself in the non-visual part much more than the visual part.

On my PC at work I do the majority of my work in Dreamweaver, but I just use the code view. I prefer Homesite, but DW is what everyone else uses.

Keith (http://www.7nights.com/asterisk/)

#4

"Keep doing what I do and I will keep doing what I do. "
::grin:: so you ARE telling us what to do, you evil evil person!

I do both. I think it's a waste of time to handcode a lot of stuff. Dreamweaver MX writes clean code. Its CSS positioning is a bit iffy but it won't BREAK your hand-coded CSS positioning. If I'm using positioning, I handcode the basic template and then do whatever else I need to in dreamweaver, unless I determine it'll be faster to do it by hand.

Anything table based, dreamweaver all the way. Well, I'll handcode tables that display tabular data since those are always inside some sort of dynamic code anyway, but I might tweak them in dreamweaver when I'm done if I don't like the way they look.

To me, a good wysiwyg tool is valuable for several reasons... chief among them is saving time. Both because you can do some stuff more quickly in "design" view and see the results of any changes you handcode in "code" view just by clicking back to design. And MX has excellent code completion, so when I use some obscure tag I haven't touched in ages I can instantly know all the possible properties of it for my specific HTML standard; and the same applies for ColdFusion code. It's not quite so good for PHP, but it usually handles functions nicely [type in strlen( and it gives you a dropdown with string str, for example]

But I *know* how to hand code. I started with hand coding. Well, I started with a web based thingie from angelfire and graduated to hand-coding through their 'advanced' tool. Then I moved on to the chami HTML Kit which was an excellent handcoding tool which may still be around,I haven't looked in ages... and from there, I went on to Dreamweaver 3, ultradev 1 and 4, and MX (still waiting for an excuse to get the new version here). That's entirely different than starting off in frontpage or whatever and thinking you know the whole of it. It's easy to *make* things... not so easy to *fix* them.

If someone just needs something simple, I'd give them a WYSIWYG editor and a cheat sheet with basic HTML syntax in case they break something. If they want to do this for a living, they need to learn hand coding.

re: the something simple... here's something to keep in mind, Paul... Macromedia Contribute is a beautiful thing. If you have a client who doesn't want to pay you to do a database backend and a CrUD GUI for him, but needs to update the site on occasion, create the site pages he needs to edit as editable Dreamweaver templates and give (sell) him a copy of Contribute. Then set it up with only the specific permissions he needs to do what he needs to do. He'll love you for making it easy, you'll love it because you're not stuck updating menial stuff all the time or coding a complicated back end for less than you feel it's worth.

We're using it at my primary job and phasing out our old dated CMS, and everyone loves it. I'm planning to put one of my clients on it soon, too.

JC (http://www.thelionsweb.com/weblog)

#5

Everyone: Thanks for pointing out the facts...I mean typos.

JC: I have heard about Contribute, but have yet to see it in action. Will have to look further into it. Currently I have one client going on MT and the other is using a custom CMS.

Glad everyone so far seems to agree that hand-coding is a must to start off learning at the very least with editors coming once you understand the code if you decide to head down that path.

Scrivs (http://www.9rules.com/whitespace/)

#6

99% of the time I'll do my design layout in Photoshop, and then handcode it. I haven't touched Frontpage or Dreamweaver in years, and get a sick feeling whenever I have to deal with sites that weren't handcoded (Dreamweaver isn't so bad, but Frontpage makes me cringe. And don't even get me started on Frontpage extensions.)

kyle (http://www.allergic2love.com)

#7

I do hard code everything like when I first started with web design, before pagemill 1.

I did use wysiwyg applications until I started to do page with CSS positionning, now I mainly use one application I created, you can see what it looks like http://www.projetsurbain.com/projets/CSSStyle.jpg

Stephane Curzi (http://www.projetsurbain.com)

#8

I find hand coding a lot faster than using WSIWYG. Tasks that just need a simple copy and paste can take ages in DW, going through dialog box.

I started designing in Pagemill and then Dreamweaver, but began hand coding when I realised how much surplus markup DW could add. You could keep on adding <span class=""> to the same piece of text and it wouldn't bat an eyelid. I often ended up with 6 span identical span tags nested on the same piece of text. After that I wanted to learn do it myself, and I'm glad I have.

There's also the powerful feeling of smug superiority as well of course!!

Jon Hicks (http://exp.hicksdesign.co.uk/)

#9

I got used to handcoding since I've been doing it for about 5-6 years. I like to believe that I can code faster and easier by hand than by using a WYSIWYG and then going through it again to clean up the code. But I haven't done any sort of test recently.

chris (http://www.onlinefame.com/)

#10

Just a matter of learning to use the software correctly, Jon. If you do it right, it doesn't do that.

Copying and pasting is of course the most used tool for anyone, I'm sure. It's good to learn at least some basic regex, too. I know I spend a significant amount of my development time in Textpad using regex and block select mode to save myself loads of time on things.

JC (http://www.thelionsweb.com/weblog)

#11

I've always wondered at just what point it is considered handcoding?
I use DW myself, but the only thing I use the design view for is to jump to a specific spot in the html. But I'm very happy to use the code hints in DW.

Basically I personally think that to be a professional one must understand well enough to handcode, but that doesn't mean one should. I see dreamweaver like a fine violin, if you do not know how to play a violin it will still sound crap, if you know how to play ok, then the result will be ok/nice, but if you really know what you are doing the result can be fabu! (btw in this scenario frontpage is a one stringed ukulele)

scottbp (http://www.positionrelative.com)

Keep track of comments to all entries with the Comments Feed