- ptvGuy - http://www.ptvguy.com -

Anal Coding

Posted By ptvGuy On 11th May 2006 @ 23:35 In All | 7 Comments

…what you see isn't always what you get…

Anal coding is a commitment to the creation of perfect code. It requires a line by line “hand” edit of every single page. To accomplish this, start by learning HTML and CSS instead of relying on your WYSIWYG editor. I'm not saying anything against using such editors to save time, just don't trust them with the final version of your code. No matter what they tell you, what you see isn't always what you get.

It is the express duty of all ampersands to escape. All non-escaped ampersands will be hunted down, deleted, and replaced with escaped ampersands. Have I made myself clear, coder?
–ptvGuy (Anal Coder)

Know Your Code

You don’t have to memorize every code tag, but get to know the main ones intimately, and be aware of the others for when you need them. Play with them. See how a minor change of implementation affects the final product, not just from one browser or browser version to another, but in the exact same one.

Learn Basic Web Standards

Web standards are for making sure that everyone has access to the web irregardless of the technology or software that got them there. It not only makes web development faster and easier, it also makes it accessible for people with disabilities. Go to [1] the Web Standards project website and start reading the posts. [2] Learn the basics.

Use Semantic Markup

…using markup for what it was actually meant to do…

Semantics is the science or study of meaning and changes of meaning in language. When we speak of semantics in relation to web development, we're talking about using markup for what it was actually meant to do:

  • headers for headings (not to bold text or make it bigger)
  • tables for tabular data (not for page layout)
  • divs for page layout
  • blockquotes for a paragraph or more of quoted text (not for text indenting)
  • paragraphs for paragraphs of text (not for line breaks or whitespace)
  • lists to create actual lists–including, possibly, navigation links (not to just make bullets or number items)
  • etc., etc., etc.

Code markup used in the proper way has semantic meaning. [3] Learn more about semantics. Find out how [4] it applies to naming conventions. Run through the [5] SimpleBits SimpleQuiz and then go forth and add real meaning to your code.

Learn Web Accessibility

…opening your content up to everyone…

Though it's actually an extension of web standards and semantic markup, web accessibility must be considered in and of itself. It has to do with opening your content up to everyone, making it accessible even to people with disabilities. Go to the [6] WebAIM site and start with their [7] Introduction to Web Accessibility and then read the rest of the site. Check out the resources available on the [8] Accessify website. Read and listen to the [9] boagworld and [10] WebAxe blog and podcasts. You might even want to read my own [11] series of articles on web accessibility.

Separating Behavior, Structure, and Presentation

The separation of behavior [12] from structure [13] and presentation is another aspect of modern web standards. The old days of dumping [14] unobtrusive JavaScript.

Learn CSS

Visit the [15] CSS Zen Garden. Check out the [16] Position Is Everything website. Read [17] Bruce Lawson's blog as well as [18] Lachlan Hunt's. By the way, don't forget to keep [19] mezzoblue's [20] CSS Crib Sheet handy. Look. Play. Learn from the masters. It's just awesome power over your page.

Know Your Server

Find out what kind of server your site is hosted on. Find out why that matters. Find out what you can do with that server. Experiment. Play. Learn.

Get to Know Browser Behaviors

Ideally, proper markup should work identically on all browsers. Unfortunately, it doesn't. Different browsers will handle the exact same code in entirely different ways–as will different versions of the exact same browser. Take the time to at least make sure that your code works right in the two primary browsers, Firefox and Internet Explorer, before you assume that it's done and working correctly.

The Role of Code Validation

…Code is poetry. You have your own style…

Many coders are addicted to the idea of W3C code validation as the final say on whether code is good or not, and, as awesome a resource as that is, it isn't the final say–especially as regards CSS. (Before you accuse me of heresy, hear me out.) Many proprietary CSS properties are available to enhance the appearance of a web page in a specific browser. As long as these settings do not interfere with or cause errors in other browsers or limit the useability of the page or site to a specific browser (In other words, they're minor style settings only.) then they're not bad code even though they may not validate. As long as there's not extra content that can only be seen or accessed in one browser or the other, it's just a style choice. There's nothing wrong with that.

Validating your code is a way of eliminating mistakes and typos. It's not the final say. In the end, it's you who is responsible for what you put out there. Code is poetry. You have your own style. Make it a good one, but don't exclude people from your content.

Start Your Journey to Anal Coding

…don't exclude people from your content…

Below are just a few resources to get you started on your journey to anal coding. Join us, the few, the proud, the truly anal.

Digg this post or add it to your favorite bookmark collection:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • [48]
  • [49]
  • [50]
  • [51]
  • [52]
  • [53]
  • [54]
  • [55]
  • [56]
  • [57]
  • [58]

7 Comments To "Anal Coding"

#1 Comment By timethief On 4th May 2006 @ 20:14

Thank you for the links. I have bookmarked some of the html ones like the one for kids and will begin working on them after our June 1st pottery orders have been shipped. :)

#2 Comment By ptvGuy On 4th May 2006 @ 23:33

The Webmonkey one is a good place for beginners too. Also, the Tech Support Guy forums (http://forums.techguy.org/) are a great place to go for any computer related questions including basic coding.

#3 Comment By Dennis On 12th November 2006 @ 12:50

Excellent article. To add to the Semantic Markup points, use lists for lists.

#4 Comment By ptvGuy On 13th November 2006 @ 00:38

Good point, and done, BTW. Thanks for the tip, Dennis.

#5 Comment By Joao Inacio On 22nd December 2006 @ 22:25

Good reading, thought there’s actually one thing where newbies will have a horrid experience:

tables for tabular data (not for page layout)

Using divs for page layout and making sure it works on both IE and other more compliant browsers is a real pain.
A couple of links for this topic would help.

#6 Pingback By MARGARIDA.NET - Private Emotion » Blog Archive » Feeds e webstandards On 31st December 2006 @ 06:56

[…] “Ontem” (há umas horas atrás e já era “hoje”), esqueci-me de falar de um site também muito bom e de um artigo muito bem explicado, estão em inglês: The Web Standards Project - FAQ What are webstandards and why should we use them? , o outro tem um nome muito sugestivo, mas não tem nada de mal, e é mesmo mesmo útil: ptvGuy: Anal Coding. Vou citar a primeira parte do artigo dele: Anal coding is a commitment to the creation of perfect code. It requires a line by line “hand” edit of every single page. To accomplish this, start by learning HTML and CSS instead of relying on your WYSIWYG editor. I’m not saying anything against using such editors to save time, just don’t trust them with the final version of your code. No matter what they tell you, what you see isn’t always what you get. ptvGuy: Anal Coding […]

#7 Comment By ptvGuy On 20th January 2007 @ 16:23

Joao: I apologize for being so long getting back to you. I’ve been moving and haven’t written anything here for a while. I’ve added your suggestion. Thanks. Also, the best links for that kind of information are [59] A List Apart and [60] Position is Everything.

Article printed from ptvGuy: http://www.ptvguy.com

URL to article: http://www.ptvguy.com/anal-coding/

URLs in this post:
[1] the Web Standards project website: http://www.webstandards.org/learn/
[2] Learn the basics: http://www.webstandards.org/learn/
[3] Learn more about semantics: http://www.informit.com/articles/article.asp?p=369225&rl=1
[4] it applies to naming conventions: http://www.informit.com/articles/article.asp?p=170514
[5] SimpleBits SimpleQuiz: http://www.simplebits.com/bits/simplequiz/
[6] WebAIM: http://webaim.org/
[7] Introduction to Web Accessibility: http://webaim.org/intro/
[8] Accessify: http://www.accessify.com/
[9] boagworld: http://www.boagworld.com/
[10] WebAxe: http://webaxe.blogspot.com/
[11] series of articles: http://www.ptvguy.com/tag/accessibility/
[12] from structure: http://www.digital-web.com/articles/separating_behavior_and_structure_2/
[13] and presentation: http://www.digital-web.com/articles/separating_behavior_and_presentation/
[14] unobtrusive JavaScript: http://www.onlinetools.org/articles/unobtrusivejavascript/
[15] CSS Zen Garden: http://www.csszengarden.com
[16] Position Is Everything: http://www.positioniseverything.net/
[17] Bruce Lawson's: http://www.brucelawson.co.uk/
[18] Lachlan Hunt's: http://lachy.id.au/
[19] mezzoblue's: http://www.mezzoblue.com/
[20] CSS Crib Sheet: http://www.mezzoblue.com/css/cribsheet/
[21] W3C HTML 4.01 Specification: http://www.w3.org/TR/html401/
[22] W3C XHTML™ Basic: http://www.w3.org/TR/xhtml-basic/
[23] W3C XHTML™ 1.0 The Extensible HyperText Markup Language: http://www.w3.org/TR/xhtml1/
[24] W3C Extensible Markup Language (XML) 1.1: http://www.w3.org/TR/xml11/
[25] W3C CSS2 Specification: http://www.w3.org/TR/REC-CSS2/
[26] W3C Introduction to CSS3: http://www.w3.org/TR/css3-roadmap/
[27] W3C Web Content Accessibility Guidelines (WCAG): http://www.w3.org/TR/WAI-WEBCONTENT/
[28] W3C Web Accessibility Initiative (WAI): http://www.w3.org/WAI/
[29] W3C Technical Report and Publication: http://www.w3.org/TR/
[30] W3Schools Complete Tutorials: http://www.w3schools.com/
[31] HTML Primer: http://www.htmlgoodies.com/primers/html/
[32] Project Cool: Web Development Basics: http://www.devx.com/projectcool/
[33] webTeacher: http://www.webteacher.org/windows.html
[34] Writing HTML: Beginnings to Post-Graduate Lessons: http://www.mcli.dist.maricopa.edu/tut/lessons.html
[35] Lissa Explains It All: An HTML Guide for Kids: http://lissaexplains.com/
[36] HTML Code Tutorial: http://www.htmlcodetutorial.com/
[37] Webmonkey: Beginners Guide to Web Development: http://webmonkey.wired.com/webmonkey/frontdoor/beginners.html
[38] How to write HTML: http://www.lettice.net/tutorial
[39] Extensive basic and advanced tutorials: http://www.webdevelopersnotes.com/tutorials/index.php3
[40] Virtually Ignorant: HTML tutorial: http://www.virtuallyignorant.com/index2.htm/
[41] All About Web Design: http://webdesign.about.com/
[42] Basic Frames Tutorial: http://manda.com/frames/
[43] Basic Tables Tutorial: http://www.456bereastreet.com/archive/200410/bring_on_the_tables
[44] ASP.NET: http://www.asp.net/Default.aspx?tabindex=0&tabid=1/
[45] CSS Experiments: http://www.pmob.co.uk/
[46] The PHP Resource Index: http://php.resourceindex.com/
[47] New York Public Library Online Style Guide: http://www.nypl.org/styleguide/
[48] Image: http://digg.com/submit?phase=2&url=http://www.ptvguy.com/anal-coding/&ti
tle=Anal+Coding
[49] Image: http://del.icio.us/post?url=http://www.ptvguy.com/anal-coding/&title=Anal+Co
ding
[50] Image: http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&am
p;Url=http://www.ptvguy.com/anal-coding/&Title=Anal+Coding
[51] Image: http://blogmarks.net/my/new.php?mini=1&simple=1&url=http://www.ptvguy.co
m/anal-coding/&title=Anal+Coding
[52] Image: http://cgi.fark.com/cgi/fark/edit.pl?new_url=http://www.ptvguy.com/anal-coding/&
amp;new_comment=Anal+Coding&new_comment=http%3A%2F%2Fwww.ptvguy.com&linktype=Misc
[53] Image: http://www.furl.net/storeIt.jsp?u=http://www.ptvguy.com/anal-coding/&t=Anal+
Coding
[54] Image: http://ma.gnolia.com/beta/bookmarklet/add?url=http://www.ptvguy.com/anal-coding/
&title=Anal+Coding&description=Anal+Coding
[55] Image: http://www.newsvine.com/_tools/seed&save?u=http://www.ptvguy.com/anal-coding
/&h=Anal+Coding
[56] Image: http://reddit.com/submit?url=http://www.ptvguy.com/anal-coding/&title=Anal+C
oding
[57] Image: http://www.spurl.net/spurl.php?url=http://www.ptvguy.com/anal-coding/&title=
Anal+Coding
[58] Image: http://myweb2.search.yahoo.com/myresults/bookmarklet?u=http://www.ptvguy.com/ana
l-coding/&=Anal+Coding
[59] A List Apart: http://www.alistapart.com/
[60] Position is Everything: http://www.positioniseverything.net/

Click here to print.