When I look back down the career path of web developer I have taken, I wish I could go back in time and tell myself some of the best practises and tips I now use daily. These tips have helped save myself a lot of time and effort, but if I had of known these from the start then life would have been a lot easier.
1. Dont Repeat Yourself (DRY)
This seems like an obvious thing, but when working on multiple projects, over time you start to see ways you can improve your most used snippets of code. As a PHP developer I frequently use mysql_connect(), but have gotten to the point I dont even think about it as I have it included at the top of all my scripts. I just need to change the constants to define username, password, and database for the various projects I use it on. This can be further improved by adding conditional statements to differentiate between live and developement environments. This is an excellent example of evolving code.
2. SVN (Sub Version)
Once upon a time I used to connect to FTP’s and make changes directly, or work on a copy locally and then mass upload the files to the live server. This is all well and good, but for working on multiple or very large projects this method quickly gets out of hand. There’s the potential to accidentally overwrite more up to date files, forget to upload certain files critical to the website, and end up with whole copies of files and folders you dont really need, but dont want to delete ‘just in case’.
With SVN, you can just login to SSH and execute the command ’svn up’ and this will update your copy of the code to how it stands in the SVN repository. As you commit your work to SVN, it will create version numbers, or revisions, that will allow you to roll back your code to previous versions quickly and easily, and mean its extremely difficult to erase any progress you have made by accident.
As well as this, branches and tags enable you to create projects that off shoot the main trunk of development and enable you to manage many projects using your own basic website framework of code.
3. Firefox Plugins
Firefox is a very pleasant browser to use on a day to day basis, even if you aren’t a web developer. But the developer tools and plugins it provides makes it a must in any good web developers toolbox. Firebug, Web Developer Toolbar, and Greasemonkey are all very good for picking apart code and helping to debug when things aren’t going as planned. Also you have Adblock and Flashblock which stop pesky ads and big flash panels popping up when you dont want them to. Other good ones to mention are YSlow which analyses your website speed and what is holding it back, and HTML Validator, which shows markup errors and warnings.
4. Use Pretty URL’s
There are multiple benefits of using mod_rewritten URL’s, and the most common people would think of is its SEO value. This is true as it allows extra keywords to be used in the target links to the page. However the main reason I would use pretty URL’s is because it looks so much neater to your user, and is more logically layed out and presented. You can create more of a hierarchy and show your webpages in categories your user would expect them to be in, rather than a URL that says index.php?view=somepage&cat=randomcategory&page_id=77354
5. CSS Reset
Due to the joys of browsers that ignore web standards *cough* Internet Explorer *cough*, usually when you build a website, come to view it in another browser and it looks nothing like you expected. A good way to remedy this is to run a CSS reset, which resets all the different ways browsers interpret styles, and should then make them all act roughly the same. Other good ways to achieve this is to use a CSS framework such as Blueprint.
6. To use tables, or not use tables
In the web development community, the use of tables is highly frowned upon. This is due to the fact that in the early days of the internet and HTML, tables was the easiest way to create a layout and structure for your site. As CSS support has improved and gained functionality there are now much more efficient methods to creating layout using divs and lists.
That said though, I have seen people trying to layout tabular data using these methods, and although theres nothing wrong with that, its really over complicating things. Tables are perfectly fine to use, for the reason they were intended.
Website testing is easily the least ‘fun’ part of being a developer, mostly thanks to the previously mentioned lack of standards for certain browsers. Thankfully virtualisation makes things slightly easier, as it allows self contained environments where you can setup an operating system install, within your desktop. This allows you to run various OS’s within your main ‘host’ OS.
This way you can test the main versions of all major browsers, in multiple operating systems so you can ensure it looks good for all the most frequently used combinations of OS and browser. There are a few applications that do this, such as VMWare, VirtualPC, and Virtualbox. We find Virtualbox to be the best, as its free, has good community support, and is available for Windows, Linux, and Macs.
When building a site just in HTML, you have the same basic elements in all of the .html files. Elements such as the header, main navigation, footer, etc. If you want to add a link to your navigation, this means the painful task of copying and pasting code between all of your pages, not fun! PHP makes life a lot easier by giving us the include() function. This allows you to pull in or ‘include’ scripts in your code, as if they were typed in there directly.
I find the best way to use this for templates is to have your index.php file as your outter template, and to use include and GET variables to populate the main content part of the template. You can make this more advanced by adding a check to ensure the file exists, block out viewing of certain files (such as the index.php itself), and point any non existent links to a custom 404 page.
9. Finding the right IDE (Integrated Development Environment)
As a developer your IDE, or coding interface, is a very important tool for productivity and creating clean, error free code. Useful features include sytax highlighting, error notification, code completion, version control, and live ftp editing. Whatever your operating system, be it Windows, Linux, or OS X there are a wide selection to choose from, some tied to one OS, and others multi platform.
10. Wireframes, Sitemaps and proper planning
Wireframes are used as a representation of a websites layout and structure in its simplest form, focusing on basic elements, without styling or images. This saves time by ensuring you or your clients dont get caught up in colours, typography, and stock images, which could potentially subtract from an interface design which would otherwise be liked. Also it helps to keep everyone on the same page, and can be used as reference for designers, developers, and clients alike.
These are also backed up by sitemaps, which show a users progression through a website, and how you navigate between pages / areas of the site. This can also be represented on interactive wireframes by making links and forms clickable to the appropriate pages.
This is obviously not a definitive list, it would be interesting to here other developers tips on time saving methods, and things you wished you knew at the start of your career.