3 must have developer tools for Firefox
There are some developer tools which I can't live without when developing using Firefox. They have saved me countless hours and simplify the entire development experience, here is a list of my top three recommended Firefox add-ons.
Firebug
This firefox extension is by far the single most useful tool when developing a website, it has the ability to modify HTML or even CSS live on the website. This means that you don't need to go and make changes to the actual code and refresh only to find it's still not working - you can adjust the code right through the open browser window and the changes will be updated automatically.
Download here
Web developer toolbar.
While Firebug does cover a significant portion of this toolbars functionality, it still does have a lot to offer such and ability to manage your session cookies, images, JavaScript and advanced form handling functionality.
Download here
HTML Validator for Firefox
One of the most frustrating things I find about using the online validator is that it can only validate public facing URL's. Meaning that if you're developing on your local server or a page behind .htaccess authentication there's no way for you to check if the page is valid HTML mark up. Well with this nifty tool you'll be able to validate any page without an internet connection, meaning that you can validate any web page directly through your firefox browser.
Download here
ISO-8859 compliant text
If you've ever created an email template and pasted text from Microsoft Word then chances are that you've experienced those weird letters which come up such as "–".
The reason this happens is because these characters are not part of the ISO 8859-1 character set, which are assigned values from 0 to 255. So the solution is to convert these numbers into a numbered entity range from 128 to 255.
Converting the ISO-8859-1 Characters to HTML Numbered Entities
This first option is to manually replace these characters as per the below reference table:
| Character | Entity Number | Entity Name | Description |
|---|---|---|---|
| " | " | " | quotation mark |
| ' | ' | ' (does not work in IE) | apostrophe |
| & | & | & | ampersand |
| < | < | < | less-than |
| > | > | > | greater-than |
* Full list available at http://www.w3schools.com/tags/ref_entities.asp
The second option is to use a simple free program I've built for you to use, all you have to do is go to the below link and paste in your dirty code and it will output some nice clean ISO-8859 compliant text for you.
How to write new copy for your website
If you're like me, then you probably use Dreamweaver when you're building a new web page because its easy to switch between the code and design view. We'll this can cause all sorts of trouble when you're trying to write marketing copy.
Here's my experience, one day I found myself needing to write some new copy for a web page, so I opened up Dreamweaver and started typing.
First I created my page heading, which of course I thought should be wrapped in a <h1> tag, to be consistent with the rest of the website. I then started writing some of the copy for the web page and realised that I needed to create my content <div> tag as well as my <p> tag.
This went on for quite some time, before I realised that I wasn't really making any progress with the message I was actually trying to convey. The problem as I'm sure you can probably see by now is that I was so occupied with the design that I couldn't focus properly on the actual copy of the new web page.
The lesson I learnt from this experience is that if you're creating a new web page you should always open up a basic text editor and start typing in there. That way you're not distracted by the design or layout of the page.
It's important to make sure that you don't lose the message you're trying to convey by being a jack of all trades.
Here's another great blog post on this topic, which also explains why it's important to have separation between a designer and marketer. Wear more than one hat and eventually they'll all come crashing down
PHP error reporting
If you've ever experienced a blank white screen after modifying your PHP code, then you should find these two lines of code very useful.
By default error reporting is turned off which most configurations of PHP, however to turn it on is pretty straight forward. In order to turn on PHP error reporting you'll just need to add the following two lines of code at the beginning of your application.
ini_set('display_errors',1);
error_reporting(E_ALL);
- The first line enables errors, and says that they should be printed to the screen as part of the output.
- The second line specifies that all errors should be included in the output.
Once you've made the change refresh your page and you should now see some useful error messages which will help you debug the problem.
IE conditional statements
We all know those ugly hacks for CSS Stylesheets, and the many reasons not to use them.
IE (Internet Explorer) conditional statements allow us to create a separate stylesheet specifically for Internet Explorer browsers, we can even specify the browser version.
This is very powerful because it means you can have more control and still have a fully compliant XHTML document.
The below example will detect if the browser is Internet Explorer version 7, and if so then it will load a separate style sheet.
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style_ie7.css" />
<![endif]-->
Also, as mentioned earlier it's possible to specify a separate style sheet for Internet Explorer 6. You just need to modify the first line of the code to "IE 6", which is illustrated in the below example.
<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="style_ie6.css" />
<![endif]-->
Make sure to place this code just before the closing </head> tag of your website.
