Kovo Posted June 17, 2007 Share Posted June 17, 2007 How important is it to have clean code? By clean I mean easily readable code. Like the code below: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/> <meta name="robots" content="index, follow"/> <meta name="description" content="iNerds, in-home/office technical services, Montreal."/> <meta name="keywords" content="iNerds, geek, nerd, computer, technician, squad, inerd, service, montreal, quebec, office, home, in-home, in-office, diagnostic, repair"/> <meta name="GOOGLEBOT" content="INDEX, FOLLOW"/> <meta name="revisit-after" content="4 days"/> <meta http-equiv="imagetoolbar" content="no"/> <title>iNerds, Montreal Computer-Tech Services</title> <link rel="stylesheet" href="css/css.css" type="text/css"/> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> <script src="scripts/date.js" type="text/javascript"></script> <script src="scripts/ajax.js" type="text/javascript"></script> <script src="scripts/ajax-dynamic-content.js" type="text/javascript"></script> </head> <body> <center> <div id="everything"> <div id="topdiv"> <div id="load"></div> </div> <div id="middlediv"> </div> <div id="textarea"> <div id="actualtextt" style="overflow: hidden;"> <center> <div id="table"> <div id="topoftable"> <h1>Price List</h1> </div> <div id="aftertopoftable"> <center> <div class="aftertopoftable1"><br/>Service</div> <div class="aftertopoftable2">Our Price<br/>In-Home or In-Office</div> <div class="aftertopoftable3">Geek Squad Price<br/>In-Home or In-Office</div> <div class="aftertopoftable4">Geek Squad Price<br/>In-Store</div> </center> </div> <div id="restoftable"><!-- Start List Start Networking --> <a name="networking"></a> <div class="enclosure" onmouseover="this.className='enclosure2'" onmouseout="this.className='enclosure'" onmousedown=" location.href = 'services.html#networking'"> <div class="restoftable2"> <p> <b>Networking</b> </p> </div> <div class="restoftable3"> <center> <p> <br/> </p> </center> </div> <div class="restoftable4"> <center> <p> <br/> </p> </center> </div> <div class="restoftable5"> <center> <p> <br/> </p> </center> </div> </div> <a name="networksetup"></a> <div class="enclosure" onmouseover="this.className='enclosure2'" onmouseout="this.className='enclosure'" onmousedown=" location.href = 'services.html#networksetup'"> <div class="restoftable2"> <p> Network Setup </p> </div> <div class="restoftable3"> <center> <p> $89 </p> </center> </div> <div class="restoftable4"> <center> <p> $149 </p> </center> </div> <div class="restoftable5"> <center> <p> Not Offered </p> </center> </div> </div> <a name="networkexpansion"></a> <div class="enclosure" onmouseover="this.className='enclosure2'" onmouseout="this.className='enclosure'" onmousedown=" location.href = 'services.html#networkexpansion'"> <div class="restoftable2"> <p> Network Expansion </p> </div> <div class="restoftable3"> <center> <p> $50 + $10 <small>each</small> </p> </center> </div> <div class="restoftable4"> <center> <p> $149 + $49 <small>each</small> </p> </center> </div> <div class="restoftable5"> <center> <p> Not Offered </p> </center> </div> </div> <a name="networklockdown"></a> <div class="enclosure" onmouseover="this.className='enclosure2'" onmouseout="this.className='enclosure'" onmousedown=" location.href = 'services.html#networklockdown'"> <div class="restoftable2"> <p> Network Lock-Down </p> </div> <div class="restoftable3"> <center> <p> $69 </p> </center> </div> <div class="restoftable4"> <center> <p> $89 </p> </center> </div> <div class="restoftable5"> <center> <p> Not Offered </p> </center> </div> </div> <!-- End Networking Start Data Salvation --> <a name="datasalvation"></a> <div class="enclosure" onmouseover="this.className='enclosure2'" onmouseout="this.className='enclosure'" onmousedown=" location.href = 'services.html#datasalvation'"> <div class="restoftable2"> <p> <b>Data Salvation</b> </p> </div> <div class="restoftable3"> <center> <p> <br/> </p> </center> </div> <div class="restoftable4"> <center> <p> <br/> </p> </center> </div> <div class="restoftable5"> <center> <p> <br/> </p> </center> </div> </div> <a name="databackup"></a> <div class="enclosure" onmouseover="this.className='enclosure2'" onmouseout="this.className='enclosure'" onmousedown=" location.href = 'services.html#databackup'"> <div class="restoftable2"> <p> Data Backup </p> </div> <div class="restoftable3"> <center> <p> $109 </p> </center> </div> <div class="restoftable4"> <center> <p> Not Offered </p> </center> </div> <div class="restoftable5"> <center> <p> $89 </p> </center> </div> </div> <a name="datatransfer"></a> <div class="enclosure" onmouseover="this.className='enclosure2'" onmouseout="this.className='enclosure'" onmousedown=" location.href = 'services.html#datatransfer'"> <div class="restoftable2"> <p> Data Transfer </p> </div> <div class="restoftable3"> <center> <p> $89 </p> </center> </div> <div class="restoftable4"> <center> <p> $229 </p> </center> </div> <div class="restoftable5"> <center> <p> $59 </p> </center> </div> </div> <a name="datarecovery"></a> <div class="enclosure" onmouseover="this.className='enclosure2'" onmouseout="this.className='enclosure'" onmousedown=" location.href = 'services.html#datarecovery'"> <div class="restoftable2"> <p> Data Recovery </p> </div> <div class="restoftable3"> <center> <p> $99 </p> </center> </div> <div class="restoftable4"> <center> <p> Not Offered </p> </center> </div> <div class="restoftable5"> <center> <p> Not Offered </p> </center> </div> </div><!-- End Data Salvation Start Installation --> <a name="installation"></a> <div class="enclosure" onmouseover="this.className='enclosure2'" onmouseout="this.className='enclosure'" onmousedown=" location.href = 'services.html#installation'"> <div class="restoftable2"> <p> <b>Installation</b> </p> </div> <div class="restoftable3"> <center> <p> <br/> </p> </center> </div> <div class="restoftable4"> <center> <p> <br/> </p> </center> </div> <div class="restoftable5"> <center> <p> <br/> </p> </center> </div> </div> <a name="softinstall"></a> <div class="enclosure" onmouseover="this.className='enclosure2'" onmouseout="this.className='enclosure'" onmousedown=" location.href = 'services.html#softinstall'"> <div class="restoftable2"> <p> Software Installation </p> </div> <div class="restoftable3"> <center> <p> $59 </p> </center> </div> <div class="restoftable4"> <center> <p> $129 </p> </center> </div> <div class="restoftable5"> <center> <p> $29 <small>per software</small> </p> </center> </div> </div> <a name="hardwareinstall"></a> <div class="enclosure" onmouseover="this.className='enclosure2'" onmouseout="this.className='enclosure'" onmousedown=" location.href = 'services.html#hardwareinstall'"> <div class="restoftable2"> <p> Hardware Installation </p> </div> <div class="restoftable3"> <center> <p> $69 </p> </center> </div> <div class="restoftable4"> <center> <p> $129-$149 </p> </center> </div> <div class="restoftable5"> <center> <p> $29-$59 </p> </center> </div> </div> <a name="deviceinstall"></a> <div class="enclosure" onmouseover="this.className='enclosure2'" onmouseout="this.className='enclosure'" onmousedown=" location.href = 'services.html#deviceinstall'"> <div class="restoftable2"> <p> Device Installation </p> </div> <div class="restoftable3"> <center> <p> $69 </p> </center> </div> <div class="restoftable4"> <center> <p> $129 </p> </center> </div> <div class="restoftable5"> <center> <p> $39 </p> </center> </div> </div> <a name="windowsinstall"></a> <div class="enclosure" onmouseover="this.className='enclosure2'" onmouseout="this.className='enclosure'" onmousedown=" location.href = 'services.html#windowsinstall'"> <div class="restoftable2"> <p> Windows Installation </p> </div> <div class="restoftable3"> <center> <p> $79 </p> </center> </div> <div class="restoftable4"> <center> <p> $249 </p> </center> </div> <div class="restoftable5"> <center> <p> $59 </p> </center> </div> </div><!-- End Installation Start Diagnostics --> <a name="diagnostics"></a> <div class="enclosure" onmouseover="this.className='enclosure2'" onmouseout="this.className='enclosure'" onmousedown=" location.href = 'services.html#diagnostics'"> <div class="restoftable2"> <p> <b>Diagnostics</b> </p> </div> <div class="restoftable3"> <center> <p> <br/> </p> </center> </div> <div class="restoftable4"> <center> <p> <br/> </p> </center> </div> <div class="restoftable5"> <center> <p> <br/> </p> </center> </div> </div> <a name="harddiag"></a> <div class="enclosure" onmouseover="this.className='enclosure2'" onmouseout="this.className='enclosure'" onmousedown=" location.href = 'services.html#harddiag'"> <div class="restoftable2"> <p> Hardware Diagnostic </p> </div> <div class="restoftable3"> <center> <p> $65 </p> </center> </div> <div class="restoftable4"> <center> <p> $129 </p> </center> </div> <div class="restoftable5"> <center> <p> $39 </p> </center> </div> </div> <a name="softdiag"></a> <div class="enclosure" onmouseover="this.className='enclosure2'" onmouseout="this.className='enclosure'" onmousedown=" location.href = 'services.html#softdiag'"> <div class="restoftable2"> <p> Software Diagnostic </p> </div> <div class="restoftable3"> <center> <p> $75 </p> </center> </div> <div class="restoftable4"> <center> <p> $129 </p> </center> </div> <div class="restoftable5"> <center> <p> $39 </p> </center> </div> </div> </div> </div><br/><br/> </center> </div> </div> <div id="footerdiv"> <center> <div id="footertext"> <span id="left">Copyright©<script type="text/javascript">document.write(+ year);</script> iNerds Inc., All Rights Reserved.</span> <span id="right">Designed by <a href="http://www.kevmedia.ca" target="_blank">Kevmedia</a>.</span><br/> <center><a href="legalnotice.html">Legal Notice</a> | <a href="privacypolicy.html">Privacy Policy</a> | <a href="tos.html">Terms of Service</a> | <a href="contact.html">Contact iNerds</a> | <a href="sitemap.html">Site Map</a></center> </div> </center> </div> </div> </center> <script type="text/javascript"> ajax_loadContent('load','navcore.html'); </script> </body></html> See how everything has been tabbed to the left, each elements opening and closing aligning properly. The above html file 16.4KB. Is this a big number really? If I remove all the tabbing the size goes down to 10kb. Link to comment Share on other sites More sharing options...
boen_robot Posted June 17, 2007 Share Posted June 17, 2007 It's important for you as a developer. For live sites though, you could safely remove tabs and extra spaces. Apply this XSLT to every XHTML document before putting it online, and you'll do just that: <?xml version="1.0"?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output indent="no" method="xml" omit-xml-declaration="yes"/> <!--<xsl:output doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>--> <xsl:output doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/> <xsl:strip-space elements="*"/> <xsl:template match="/|*"> <xsl:copy> <xsl:apply-templates select="text()|*"/> </xsl:copy> </xsl:template> <xsl:template match="text()"> <xsl:value-of select="normalize-space(.)"/> </xsl:template></xsl:stylesheet> Adjust the DTD as needed of course. Link to comment Share on other sites More sharing options...
Kovo Posted June 17, 2007 Author Share Posted June 17, 2007 The above code does what exactly? It only applies it as the page loads? I dont get it lol. You are XML expert, always helped, for a reason, Im not XML savvy. LOLBut Removing the tabs also reduced page size. Link to comment Share on other sites More sharing options...
boen_robot Posted June 17, 2007 Share Posted June 17, 2007 No no. You don't apply that on the live document. You apply that on the document before uploading it on the page and upload the result of the transformation, not the original document itself.The result of this transformation is your original document but with tabs and extra spaces striptted and as such- compressed. This XSLT stylesheet acts like an XHTML compressor. Your end code will be sort of <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/><meta name="robots" content="index, follow"/>... In other words, it will be one big line of code.In order to apply this transformation properly you might need to execute it with a S3L or a command line XSLT processor, because you need to get the result. XML editors like Stylus Studio and even XML Notepad offer you the possibility to view the result (and in turn save it). Link to comment Share on other sites More sharing options...
Kovo Posted June 17, 2007 Author Share Posted June 17, 2007 Isee, thanks, I get it. Just the same I use Adobe Go Live. So I can simply use tabs as much as I want, and before I upload it I select all the code and press ctrl+tab Link to comment Share on other sites More sharing options...
Anders Moen Posted June 17, 2007 Share Posted June 17, 2007 Okay, the reason why you should have a clean code is because then the code is semantic, it's easier to read + you will almost everytime have as little code as possible. Link to comment Share on other sites More sharing options...
MrAdam Posted June 17, 2007 Share Posted June 17, 2007 as boen robot said, it's only important for you (Kovo) as the developer. Using tabs and spaces to align code serves no real use other than to make it simpler to read and edit.Of course, the problem with compressing the tabs and spaces means you'd either have to keep a back-up copy, or spend forever trying to find your way through all the code.16Kb is larger than an average HTML file, in my experience, but 16Kb is a very small amount to download.. I wouldn't bother removing the alignment, just to save a fraction of a second download time when it's going to take you far longer downloading software, compressing the files, making back-ups or whatever... unless you have a very small bandwith limit?P.S. anders moen, I don't really know much about "semantics", but isn't it (where the web's concerned) giving data, or code, meaning? Like XML does? Link to comment Share on other sites More sharing options...
Skemcin Posted June 18, 2007 Share Posted June 18, 2007 Aside from making it easier for you or any poor sap that might have to look at the page after you, clean code is VERY important to search engines. If there is no other reason in the world to write clean code that is standard compliant, then it would be for search engines. Search Engines are not humans so they have to be programmed to learn how to spider through a site. That's why standards are so important to them. A sloppy site will make it more difficult for the search engine to find its way through. Think of your code like a garage - keep it nice and neat and anyone will find that yellow handled spade underneath the weed eater. If your garage is messy then no one will find anything, you or a nosy neighbor. Link to comment Share on other sites More sharing options...
Kovo Posted June 18, 2007 Author Share Posted June 18, 2007 Aside from making it easier for you or any poor sap that might have to look at the page after you, clean code is VERY important to search engines. If there is no other reason in the world to write clean code that is standard compliant, then it would be for search engines. Search Engines are not humans so they have to be programmed to learn how to spider through a site. That's why standards are so important to them. A sloppy site will make it more difficult for the search engine to find its way through. Think of your code like a garage - keep it nice and neat and anyone will find that yellow handled spade underneath the weed eater. If your garage is messy then no one will find anything, you or a nosy neighbor.Gotchya, but if my code is standards compliant and I simply do not tab each line of code, then it doesnt matter to a search engine correct? Link to comment Share on other sites More sharing options...
boen_robot Posted June 18, 2007 Share Posted June 18, 2007 No. The only one(s) you'll impress with a well tabbed code are other developers like ourselves that would easily see what good code are you using . Link to comment Share on other sites More sharing options...
Kovo Posted June 18, 2007 Author Share Posted June 18, 2007 No. The only one(s) you'll impress with a well tabbed code are other developers like ourselves that would easily see what code are you using .pft, and who needs to impress them right? Link to comment Share on other sites More sharing options...
Skemcin Posted June 18, 2007 Share Posted June 18, 2007 pft, and who needs to impress them right? lol, true, and I know were having fun with this point, but after 12+ years of coding, one thing that I can say is that I have a lot more respect for developers who leave behind tidy code. In every job that I have had I've almost always had to contact the previous developer (often a vendor) to discuss the logic in their code - what a waste of my time. If they had just spent some time commenting and organizing code then I'd have a lot more respect and a lot more patience with them. I know that doesn't go far, in fact leaving behind tidy code doesn't help you any at all, but it does represent what kind of a person you are (at least in my mind).Anyway, adopting a tabbing convention will only benefit those who are made aware of your convention (namely you). Still, a good practice to get in the habit of. Link to comment Share on other sites More sharing options...
justsomeguy Posted June 18, 2007 Share Posted June 18, 2007 The only thing I have to add is that well-structured code is almost a necessity for any developer, it is a nightmare to try and make changes to something that was copied and pasted and not formatted at all. That being said, there's no reason to format *everything*. Each element just does not need it's own line. For example, this code: <div class="restoftable5"> <center> <p> <br/> </p> </center> </div> Is just as readable like this: <div class="restoftable5"> <center><p><br/></p></center> </div> So, there exists a balance between totally unorganized code and indent overkill where the page is both easy to read and reasonably small. Link to comment Share on other sites More sharing options...
boen_robot Posted June 19, 2007 Share Posted June 19, 2007 Well, if the copy for the developer (with tabs and all) is available on another place or if the live copy is generated on the fly (by executing the XSLT transformation on the server), it makes no difference really, so you'll be free to use even the fully expanded version. Link to comment Share on other sites More sharing options...
jesh Posted June 19, 2007 Share Posted June 19, 2007 I would also like to add that too many tabs is a bad thing. <div class="restoftable5"> <center><p><br/></p></center> </div> Indentation is good, but not if you have to scroll the editor window horizontally to read it. Link to comment Share on other sites More sharing options...
justsomeguy Posted June 19, 2007 Share Posted June 19, 2007 That's just a setting on the editor though. In my own editor I don't use hard tabs, and I set the tab width to 2 spaces, so even if something is indented to 20 levels it's only 40 characters in. Link to comment Share on other sites More sharing options...
yoshida Posted June 20, 2007 Share Posted June 20, 2007 I usually use indents to remember to close something, be it a (nested) div, a table or a script portion.When having your own CMS, you can set the script to reduce and increase tab widths. Link to comment Share on other sites More sharing options...
jlhaslip Posted June 22, 2007 Share Posted June 22, 2007 I use the Firefox extension HTML Validator which includes the TIDY software to "clean-up" pages. Does an excellent job. Link to comment Share on other sites More sharing options...
yoshida Posted June 22, 2007 Share Posted June 22, 2007 I use the Firefox extension HTML Validator which includes the TIDY software to "clean-up" pages. Does an excellent job.Link plz Link to comment Share on other sites More sharing options...
boen_robot Posted June 22, 2007 Share Posted June 22, 2007 Link plz https://addons.mozilla.org/en-US/firefox/addon/60 Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.