Before you even write a line of code it is important to understand the environment you are operating in. Websites can be viewed on a multitude of different platforms. One reason to code professionally is so that websites will appear consistently on as many platforms as possible. It may come as a surprise but about 40% of web users don’t access the web through Internet Explorer. As such it is important to become familiar with the fact that you need to test and build for a multitude of browsers.
In order to begin coding there are a number of software packages you will need. Some are free and others are worth the investment. Although you can code in Notepad or TextEdit I strongly recommend using an application like BBEdit (Mac) or Homesite (Windows). These programs will allow you to write code more quickly and will allow you to read it clearly once you have written it. If you don’t have the budget for these programs then I recommend PSPad (Windows) or Textwrangler (Mac)- both free. All of these programs allow you to have multiple pages open at one time and will allow you to manage your coding effectively. For images you will need a some graphics software. Photoshop is the industry standard and is difficult to beat. A free alternative is the GIMP.
I mentioned before that there are many browsers on the web. In order to write first-class code you will need to get hold of these browsers. If you have budget I suggest that you also have a Windows machine and an Apple Macintosh on which to test your code. You can get most browsers for free and the very nice people at Evolt keep a browser archive where you can download older browsers. For most browsers it is simply a case of installing old versions in custom folders. My personal preference is too keep all browsers in one folder called ‘Browsers’. I keep a shortcut on my desktop so I can quickly call up code in any browser.
As a minimum I suggest you install and become familiar with the following browsers:
Keep an eye on the browser statistics published at W3 schools. If a new browser pops up and you haven’t heard of it install it and make sure you test on it. You will learn that browsers interpret code very differently so be prepared to love and loathe certain browsers!
There are some great free tools to help you write excellent code. The first is Firefox which I mentioned in the list of browsers. Firefox interprets code almost flawlessly and I would recommend using this browser as your default for coding. Furthermore there are some great plug-ins that will help you in the future. The Web Developer toolbar is a must and contains just about everything you will need to stress test your code. I also recommend that get hold of Fangs. This will help you understand how screen readers and search engine robots will see your code.
If you do not want to use Firefox there is a similar plugin for Internet Explorer - The Web Accessibility Toolbar.
Now you have a development and testing environment we will move onto writing code in Part 2 of How to Write Good XHTML and CSS
Have an update or suggestion for this article? You can edit it here and send me a pull request.
Build your own Vim statusline
Statuslines in Vim are not hard to create. Making your own means one less dependency in your life.
Custom Vim Bindings in tmux 2.4
tmux 2.4 made a significant change to key bindings. Here is how to support custom keybindings for versions before and after tmux 2.4
Using template files in Vim
Vim templates or skeletons, allow you to specify a template to be used for new files with a certain extension.