Jump to content


Photo
- - - - -

Clean Code:

Started by raenef , May 06 2005 06:23 PM

  • Please log in to reply
11 replies to this topic

#1 raenef

raenef

    Code Enforcer

  • Members
  • PipPipPip
  • 540 posts
  • Location:Battle Creek, Michigan
  • Interests:Web Development and Graphic Design

Posted 06 May 2005 - 06:23 PM

Spent long countless hours over code like this:
<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">&nbsp;</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:
<!-- This is a html comment, put anything here and it wont show up on the layout-->
/* 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:
<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">

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

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

#2 user_f_ps_other

user_f_ps_other

    Young Padawan

  • Members
  • Pip
  • 173 posts

Posted 10 May 2005 - 10:05 AM

A very good tutorial for people to know.

#3 raenef

raenef

    Code Enforcer

  • Members
  • PipPipPip
  • 540 posts
  • Location:Battle Creek, Michigan
  • Interests:Web Development and Graphic Design

Posted 10 May 2005 - 11:37 AM

Thank you. :) Hopefully more people use clean code in the future.

#4 Dark

Dark

    Young Padawan

  • Members
  • Pip
  • 68 posts

Posted 20 May 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.

#5 raenef

raenef

    Code Enforcer

  • Members
  • PipPipPip
  • 540 posts
  • Location:Battle Creek, Michigan
  • Interests:Web Development and Graphic Design

Posted 21 May 2005 - 11:57 AM

Thanks :)

#6 squr3l

squr3l

    Jedi In Training

  • Members
  • PipPip
  • 479 posts
  • Location:California
  • Interests:GFX, SFX, IT Specialist

Posted 22 May 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

#7 raenef

raenef

    Code Enforcer

  • Members
  • PipPipPip
  • 540 posts
  • Location:Battle Creek, Michigan
  • Interests:Web Development and Graphic Design

Posted 22 May 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
<!--Link Box-->
<!--Content Box-->
<!--Button Box--> 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 :P

#8 syndrome

syndrome

    P2L patient #4819

  • Twodded Staff
  • PipPipPipPip
  • 1,311 posts
  • Location:Nottingham, UK
  • Interests:Photoshop, Tennis, PS2, web design, CS:S

Posted 23 May 2005 - 12:58 PM

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

#9 AML

AML

    Young Padawan

  • Members
  • Pip
  • 5 posts

Posted 23 August 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.

#10 Vouksh

Vouksh

    Young Padawan

  • Members
  • Pip
  • 166 posts
  • Location:Ohio

Posted 31 August 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:
<?php if($this==$that){echo("this equals that");}else{ echo("this  doesn't equal that");} ?>
or this:
<?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...)

#11 softLearner

softLearner

    Young Padawan

  • Members
  • Pip
  • 128 posts

Posted 01 September 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!

#12 adam123

adam123

    Retired P2L Staff

  • Members
  • PipPipPipPip
  • 2,306 posts
  • Location:London, UK
  • Interests:Programming and stuff.

Posted 01 September 2005 - 01:30 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 ;)
Back to Miscellaneous Tutorials


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Member Tutorials and Requests
  3. → Forum Tutorial Archives
  4. → Miscellaneous Tutorials