Web Development Tips
Saturday 12th November 2005
Categories: Guides, Internet, Code
Introduction
When you create a web page, there are various things to bear in mind - design, the underlying code, the tools you use, etc. Hopefully, this guide will help you to produce a better, cleaner web page with less confusion and more efficiency. This is aimed more at those that write their own code than those using WYSIWYG editors, but there are some points that anybody creating pages for the web might find useful.
The first piece advice I can give is to look around! Don't just use this website, or just another website. The great thing about the internet is that if you are looking for something, assuming it isn't a particularly obscure subject, there's bound to be pages and pages of writing that can help you, and this is certainly true for web development. What I say isn't necessarily right - this article, just like a review or editorial, represents my opinion, and that's true of most articles on the web about any part of web development. Some parts might be generally agreed upon by the entire web community, while other parts are open to debate, but ultimately it is your choice. There are certain choices I would strongly urge you to take, but it is still up to you. The first choice I strongly urge you to take is: follow web standards.
Code
When you write code, specifically, (X)HTML and CSS, there are certain standards that are best to keep to. Does everybody keep to these standards? No. But keeping to them will help the look of your page to be more consistent across browsers, and can also help those that might not be using an ordinary computer, such as a mobile phone, or the disabled. Keeping to standards also makes your life easier - code should be easier to read and manipulate.
Writing (X)HTML and CSS is much like speaking a foreign language. When you learn a foreign language, you learn the proper speech that everybody expects you to use. If decided to use your own variation of a foreign language, it would complicate things for everybody.
To make sure that your web page is valid, you can use the validator provided by the W3C, the body that sets the standards and specifications for XHTML and CSS, among others.
It is useful, when using CSS, to name classes after their use, not their appearance. For example, if I wanted to highlight a piece of text, I might make it red. As such, I would create a new class in the style sheet. Instead of calling the class 'red', it would be a far better idea to call the class 'highlight'. This means that, should I change the colour of the class, I would not be left with the now meaningless name of 'red'.
When writing PHP, it can be useful to write comments - since PHP can be considerably more complex than (X)HTML, comments help you and other people to understand what the code actually does. Although comments are a good practice in PHP, there are not so useful in (X)HTML, since they increase the size of the file without actually adding anything for the end user.
The Developer's Toolbox
When you start writing any language, there is one crucial part that you will need: something to write with. Personally, I've always preferred writing the code myself - that way, I'm in control of exactly what the content of the web pages is, and allows me to greatly control both layout and style.
If you do write the code yourself, you'll probably need a text editor, of which there are plenty of choices. Which one you'll like depends on what you want with regards to features - the best way is to try any that take your fancy. I find syntax highlighting and tabs are enough for me, while others prefer a selection of tags to choose from. On Linux, even the basic text editor that you'll probably have should be sufficient. On Gnome, this comes in the form of Gedit (my personal preference), while those on K.D.E. can use Kwrite. Kate is more advanced than Kwrite, so you may want to try that one as well.
Moving away from the two main desktop environments, there are plenty of other editors. When, for whatever reason, I decide I need a sidepane, which Gedit does not include, I use Bluefish. Not only does this have a sidepane, but it includes a vast array of features to help with (X)HTML, CSS and PHP, among other languages. It allows you to add in tags such as tables, forms and images by pressing a button and following the dialog, as well closing tags for you. It may not be something I use, but I'm sure it is useful for plenty of people. You can also customise Bluefish considerably, allowing you to make Bluefish seem like home.
I've (briefly) tried Scrite - although I didn't try it for long, it seemed more than up to the task. Other editors include Vim and Emacs.
On Windows, the best text editor I could find was Crimson Editor - it includes tabbed browser and syntax highlighting, so is a superior replacement for both Notepad and Wordpad. Incidentally, Notepad can't even read Linux line breaks, making it difficult to develop on both Windows and Linux using Notepad.
Firefox Extensions
Firefox's usefulness is not limited to tabbed browsing and decent web standards. One of the biggest strengths of Firefox is that other people can easily add in their own extensions, allowing each person to customise Firefox to their own needs. While there a multitude of extensions that you may find useful, there are two I want to mention now.
The first is the Web Developer Toolbar. This extension adds, oddly enough, a toolbar. This adds the following drop down lists: Disable; CSS; Forms; Images; Information; Miscellaneous; Outline; Resize; Tools; View Source; Options. While the toolbar may not add much that is particularly new, it makes everything so easy to find and use, it is indispensable. You can resize the page, disable CSS, outline elements and plenty more.
Another thing you can do is validate the (X)HTML of any page - this takes you to the W3C Validator page. However, this can be time consuming if you want to check several pages at once. This is where the second extension comes in, imaginatively called the HTML Validator. This provides a small symbol in the bottom right of the page that tells you straight away whether your page is valid or not. Double click on it, and the extension will tell you all the mistakes in your (X)HTML code. If you want, it can even try and correct it for you.
