Pixel2Life Forum > Clean Code:

Pixel2Life Forum > Member Tutorials and Requests > Forum Tutorial Archives > Miscellaneous Tutorials

raenef

May 6 2005, 06:23 PM

Spent long countless hours over code like this:

CODE

<html><head><title>Cataclypse ::Rebirth::</title><link rel="StyleSheet" type="text/css" href="rebirth.css" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>
<div id="Center_Table"><table id="V2_Table" cellspacing="0" cellpadding="0"><tr>
<td colspan="3" class="banner"></td></tr><tr><td valign="top"><table id="TopSpace" width="150" border="0" cellpadding="0" cellspacing="0">
<tr><td class="topnavbar" valign="middle"><div id="bartitle">::Navigation::</div>
</td></tr><tr><td class="NavCell"><div id="NavCellDiv">text here</div></td></tr>
<tr><td class="BottomBar"><div id="BottomBarDiv"> </div></td></tr></table>...

To find a bug? or problem? It would be so much easier if the code was 'cleaner' and you could easily look through and find what you're looking for without much hassle.
Pointers:
Use spacing tabs and line breaks to break up your code. Whitespace wont effect how your layout looks. (Except in certain instances in tables from what I know)
Use Comments! Even though you may know what that special code does now you may not remember in the future when you go to upgrade.
Comment Examples:

CODE

/* This is a css comment and wont effect your styles */
/* CSS comments can also be used in the "style" part in the head of your html or xhtml document*/

If you use a editor such as dreamweaver, golive, etc you can edit the code directly in the 'code-view' or 'source panel'

Example of clean code:

CODE

<html>
    <head>
    <title>Cataclypse ::Rebirth::</title>
    <link rel="StyleSheet" type="text/css" href="rebirth.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>

    <body>
    <div id="Center_Table">
    <table id="V2_Table" cellspacing="0" cellpadding="0">


    <tr>
    <td colspan="3" class="banner"></td>
    </tr>
    <tr>
    <td valign="top">

    
    <table id="TopSpace" width="150" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td class="topnavbar" valign="middle">
    <div id="bartitle">
::Navigation::
    </div>
    </td>
    </tr>
    <tr>
    <td class="NavCell">
    <div id="NavCellDiv">
text etc here
    </div>
    </td>...

Much easier to read and understand no?
If you use these tips wisely, and comment often as you code your new layout. You wont spend as much time looking for a problem, and you'll save yourself many headaches in the future.

user_f_ps_other

May 10 2005, 10:05 AM

A very good tutorial for people to know.

raenef

May 10 2005, 11:37 AM

Thank you.

Hopefully more people use clean code in the future.

Dark

May 20 2005, 04:35 PM

very true raenef, i dont see how people can just code a mess, n spend ages looking for the error.
Anyway nicely done.

raenef

May 21 2005, 11:57 AM

Thanks

squr3l

May 22 2005, 04:34 PM

yea nice, i never really add comments even though i should, maybe ill start as soon as i get a site idea, already have the design

raenef

May 22 2005, 04:44 PM

Thanks, and yea, most people dont seem to use them and its not widely taught (as in tutorials and such) I just use them to point out different sections of my code such as


 etc.
Or on others I'll put copyright information in comments as well. You'd be suprised that some lazy rippers wont even look for it and try and claim the design as theirs

syndrome

May 23 2005, 12:58 PM

Nice tip, i started doing this just before i saw this

AML

Aug 23 2005, 07:51 PM

I have seen this before and I have never actually used it. hopefully in the future I will start to do this to make my life easier.

Vouksh

Aug 31 2005, 03:57 PM

Oh man, I always structure my code. Especially when using XHTML 1.0 Strict/ XHTML 1.1. All the <div></div>'s start to mess with your head! And php. Which is easier to read?
this:

CODE

<?php if($this==$that){echo("this equals that");}else{ echo("this doesn't equal that");} ?>

or this:

CODE

<?php
if($this == $that)
{
echo "This equals that";
} else {
echo "This doesn't equal that";
}
?>

Yea... i'll shut up now.. (that's kind of a pet peeve...)

softLearner

Sep 1 2005, 12:55 PM

I have always coded my pages so they are clean and readable, somethimes I'm lazy and just code big chunks in one line then use Dreamweaver to Apply Source Formating which formats my code.

I don't think most people even reliese Dreamweaver had this tool, I didn't afew months back when I was board and juts looking through Drewamweavers menuand tools.

Those of you that have Dreamweaver MX 2004 (I think it may be for MX) you'll find this tool in the [b]Commands[b] menu.

I use the Commands menu alot when people here or other forums I goto that have messy code to look through for errors, I get Dreamweaver to do it for me rather than me having to spend hours formatting someone elses code so I can read it!

Unfortunatly Dreamweaver hasn't got a function to format PHP code automatically, so I have to do that manually! Hopefully someone comes up with an extension for that!

Have fun with the new Commands you may have discovered in Dreamweaver!

adam123

Sep 1 2005, 01:30 PM

QUOTE(softLearner @ Sep 1 2005, 06:55 PM)

Unfortunatly Dreamweaver hasn't got a function to format PHP code automatically, so I have to do that manually! Hopefully someone comes up with an extension for that!

Zend Development Environment does that

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.