KansukeKojima 0 Report post Posted February 20, 2008 I don't know how many times I have been on a website, and looked at the source code, which is impossible to read. Why? There are no line breaks! Other times, when I code something very quickly, I don't take the time to be organized and unforseen problems occur, and are hard to fix because I can't locate areas in my codes. So recently, I have adopted a simple idea: the neater my codes are: the easier I can fix and edit it.When you are coding, you should try to include a fair amount of spaces in your codes, etc. so that it is neat and easy to read. If your code is all jumbled up, etc. you run the risk of wasting time looking for hidden pieces of code. Now really, the main problem with this resides in HTML. Other languages require you to go to the next line for every command. So what is one method to preventing, un-organized HTML? Using a new line of code for each of your start and end tags. Observe: <html><head><title>Title here</title></head><body>Content here...<div>blalblalblblbalblabl</div><span>some stuff here</span></body></html> Understand what I mean? By using a new line for your start and end tags, you reduce the amount of clutter. Also, here is a method for organizing <div> tags.<html><head><title>Title here</title></head><body><div id="wrapper"> <div class="some other class"> content goes here </div> <div class="some other class"> content goes here </div></div></body></html> In the above example, the two <div> tags are inside of a wrapper. So, we can show this by indenting the div tags so they become easier to read. Also, inbetween each section I included an extra line to help organize my codes.Finally, I will cover inserting comments. Comments are another way to help organize your codes, especially when you include extra spacing inbetween tags, lines, etc.<html><head><title>Title here</title></head><body><div id="wrapper"><!--content part one start--!> <div class="some other class"> content goes here </div><!--content part two start--!> <div class="some other class"> content goes here </div></div></body></html> If you have any other methods you like to use for organizing your codes, then please post them here. And remember, your codes become much easier to edit, etc. the more you organize them.I hope this helped. Share this post Link to post Share on other sites
Dark_Prisoner 0 Report post Posted February 20, 2008 Well sometimes the code is well written but when the navigator download it's source linbreaks disappears and it become impossible to read , that happened with me Any way it is really important to be organized when coding , because as you said , sometimes we can't understand what we made by our selves Share this post Link to post Share on other sites
galexcd 0 Report post Posted February 20, 2008 The goal of a website is not to have the source code easy to read. The goal is to be useful, and the more spaces and linebreaks you have the longer it will take for that particular page to load. I might be the wrong person to reply to this topic because I hate comments. Whenever I code something even if I don't look at it for a year I still know where every part is because I know the way I code. If I make something for somebody else then yes, I will include comments and spaces, otherwise no. Share this post Link to post Share on other sites
t3jem 0 Report post Posted February 20, 2008 I completely agree with coding for easy reading, I know you may not want other people reading your code; however, it's extremely hard to fix dirty code. One thing I like to do is compartmentalize my code, such as for a site with a site wide theme, i'll make a seperate file with all the theme data and layout design that doesn't change often and then use a php include statement on my content pages and all I need to enter on my content pages is the content and there is no need to change any layout stuff for each page. If I decide to change the layout, I change one file, not ten, such as recently when I added a new page and need to put a new link in my link bar, changed a couple lines in one file and the whole website adjusted, very easy from there. Share this post Link to post Share on other sites
KansukeKojima 0 Report post Posted February 20, 2008 I completely agree with coding for easy reading, I know you may not want other people reading your code; however, it's extremely hard to fix dirty code. One thing I like to do is compartmentalize my code, such as for a site with a site wide theme, i'll make a seperate file with all the theme data and layout design that doesn't change often and then use a php include statement on my content pages and all I need to enter on my content pages is the content and there is no need to change any layout stuff for each page. If I decide to change the layout, I change one file, not ten, such as recently when I added a new page and need to put a new link in my link bar, changed a couple lines in one file and the whole website adjusted, very easy from there.I use the same technique. I find it works nice... in general: your codes should be super nice and organized, but so should your files. That is one thing I hate about using exculsively HTML: if you have 100 pages, and you need to change one link in your navigation... time to suck back on the workahol... Share this post Link to post Share on other sites
stopthewarm 0 Report post Posted January 26, 2009 I have the same ideology as you have. I also have come up with my own way. When i wrie the codes and then when there major codes written about defining paragraphs, tables etc i use comments and give the comment name as table1 or tableblue. I then note them in my notebook. Whenever i want to go the part of code i search the term "tableblu". And there it is, the part i need.I also follow this simple method of leaving as much spaces as possible. Share this post Link to post Share on other sites
k_nitin_r 8 Report post Posted November 13, 2010 Hi!You should consider using a content management system for your website. if you need to change a link on every one of your pages, you simply log in to the administration dashboard of your website, change one value and click the submit button, and voila! The link has been changed all over the website.There are lots of other cool things that you can do with content management systems too, apart from the fact that they help you put all of your items as entries within a database so you don't have tons of HTML files with pretty much the same structure on the file system. You also get to piece out the various sections of the site so that the markup for each section is in its own file. You can easily add plugins to extend the functionality of the content management systems and that's one of the best things about content management systems because you can add tons of functionality in a matter of minutes! Share this post Link to post Share on other sites
Quatrux 4 Report post Posted November 13, 2010 I think I will tell how I usually do things, which I learned while working, it's very simple and also it's very good method.Most websites are using a CMS system, usually written by somebody to somebody, especially for companies, the way we do things with most websites is that you have your own CMS which has a well written template wrapper to organize your code..The template files has everything, well structured HTML and CSS code which is usually done by a good code beautifier automatically for everyone, I mean all the programmers are using the same beautifier with the same settings for the code and also writes the comments for everyone to understand.So all the developers has nice and easy to read source files, but why do you need to show all that easy to read code to the end user who can view the source? No need at all, unless it's a site for developers to learn, but not a company site.. The CMS wrapper removes all the unneeded comments, spaces, tabs and etc. that the code would take less space and would use less bandwidth, I mean that the final website is send in a non easy to read HTML format, optimized a little, which is in fact very good: it's harder to steal the code, even though you can use any beautifier to make it look good again, but you won't see the removed comments..It saves bandwidth, especially for high traffic sites, but it uses a little bit of more performance, but the template wrapper is quite light and easy..In development stage, there's always a Debug mode, the developers of the site sees the code which is not optimized, due to o DEBUG constant is set to true on some IP addresses, which means that it's not an ordinary user of the website..So yes, you need to stay clean and make your code look neat and beautiful and easy to read, but there is no point of sending such a code to the end user browsing the site, he does not need to understand the HTML at all, in that way you save bandwidth and most of users don't read HTML code if it's a real mess if trying to steal something from it :DSo it's just my two cents..Also, sending your HTML using gzip is a good idea to save even more bandwidth, and it all can be done easily with PHP and output buffering, I mean it's very good to write your template wrapper using output buffering, I wrote about it in some topics here on Xisto or even maybe Xisto. Share this post Link to post Share on other sites
Baniboy 3 Report post Posted November 13, 2010 I've actually noticed that the more systematical you (regardless of that sounding extremely boring), the easier it is to find your errors. I discussed this issue in one of my tips collections (Tips for web designers and developers): Have a decent HTML structureAdd padding for elements inside another one. Makes the code much easier to read. Also, when coding HTML, create the closing tag right when you create the opening one. This prevents getting into trouble of invalid code for not closing the tags in correct order or at all. Share this post Link to post Share on other sites
pyost 0 Report post Posted November 14, 2010 Besides saving bandwidth, I do not think spaces/tabs/comments should be removed. Those who wants to steal your code most certainly have at least some experience with coding, and can easily find a program to auto-format your code again. Â However, neat code is much more important when writing applications or scripts, and not HTML. While you might be able to deal with your (poorly formatted) code, some other people might not. If somebody asks me to check their code because they have an error or a glitch, I simply refuse to do so if the code is ugly - put tabs, spaces, align brackets, and only then send me the files. Â Many IDEs make this quite easy to do with their automatic formatting options (e.g. Eclipse), but I would still go for writing indented code in the first place. And do not avoid comments. Or long variable names. Be as descriptive as possible, because you never know who will have to continue work on your code after you have left the company, and there is no reasong to make it difficult for him/her. Share this post Link to post Share on other sites
mahesh2k 0 Report post Posted November 14, 2010 Never copy content from sources which adds it's own markup. For example if you're copying content from openoffice or word to your static HTML site in body tag. Then make sure you strip out it's editor coding. This code will make more changes to the content.So if you are trying to add neat code to your content then you already ruined it by having extra code from other editors. Share this post Link to post Share on other sites
Quatrux 4 Report post Posted November 20, 2010 Never copy content from sources which adds it's own markup. For example if you're copying content from openoffice or word to your static HTML site in body tag. Then make sure you strip out it's editor coding. This code will make more changes to the content.So if you are trying to add neat code to your content then you already ruined it by having extra code from other editors. I agree, the way I deal with this problem, is I always copy from somewhere and when you paste something, you usually acquire not only text, but formatting too, to avoid it, I just usually paste into Notepad2 with UTF-8 encoding, cut it into where I want and the formating is stripped and only regular text is available. Share this post Link to post Share on other sites
