Archive for October, 2008
Javascript - graceful degradation
Tuesday, October 28th, 2008 | javascript | No Comments
In the context of javascript, ‘graceful degradation’ involves ensuring that your site will still function for users that do not have javascript enabled. After reading a plethora of pro web standards literature and books such as Jeremy Keith’s DOM scripting, the importance of graceful degradation is drilled into your mind. When I commenced my project this semester, ensuring graceful degradation was a high priority.
However as I have read more web development material and tested many of the world’s largest sites with javascript disabled in my browser, it has become apparent to me that not everyone in the web development community considers graceful degradation important.
Over time, my opinion on the matter has also relaxed somewhat. Sure in a ‘web utopia’, every web site would support all possible combinations of browser set ups that a user may have. In reality however, there are other factors that come into consideration. According to the W3Schools website (http://www.w3schools.com/browsers/browsers_stats.asp), less than 5% of browsers have javascript disabled. If you are spending a large amount of time and resources ensuring compatibility for this minority group, a simple cost-benefit analysis may be useful. You may deduce that the benefit of supporting this minority is simply not worth the added cost of doing so. Especially considering that javascript adoption on all browsers (including mobile devices) is increasing each year. Although we may be passionate (and stubborn) about web standards issues like graceful degradation, sometimes it is necessary to sit back and consider other factors before making such decisions. If you agree, disagree or have any other thoughts on matters like this, please feel free to comment.
My favourite Firefox extensions
Friday, October 24th, 2008 | Uncategorized | 1 Comment
I thought I would share with you a summary of the firefox extensions that I have found to be invaluable for work on my project this semester (in order of usefulness) :
Firebug
This is the ultimate firefox extension for any web designer/developer. It’s functionality includes:
- Inspect and edit HTML & CSS – firebug allows you to easily scan through your html source code and CSS and make changes on-the-fly. This is a great way to make test minor changes to your html and css to see the effect immediately, without the need to change the content of the actual files. In addition, if something in your page doesn’t look right but you can’t locate the required css or html in your code, simply hover over the offending element in your page and firebug will instantly display the html and css relevant in that context.
- Box Model shading – as you hover your mouse over an html element, firebug will display the elements margin, padding and content in different colours on the page. It’s a great way to visualise the effect of margins and padding on different elements.
- Debug and profile javascript - Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and have look at the state of the world. If your code is a little sluggish, you can use the JavaScript profiler to measure performance and find bottlenecks fast.
Web Developer Toolbar
Thanks goes to Alastair for recommending this extension. Among other things, I find It most useful for:
- outlining elements on the page to assist with alignment and/or padding issues.
- Providing a ruler so that I can get a general idea of the measurements I have to work with for various elements, divs and images
- providing a quick link to conduct html and css validation of the current page
- a menu to resize the viewport to a set of common screen resolutions (this was particularly handy as my final project uses a liquid page layout and needed to be tested at various resolutions)
- the option to quickly disable javascript, so that your site’s functionality can be tested under circumstances without javascript available.
FireFTP
This is a really nice lightweight ftp program that presents a really simple intuitive interface for your ftp needs. No need to download a stand-alone ftp program when this simple extension will fulfill most people’s requirements.
UrlParams
This extension will show any GET or POST parameters that are sent between pages of a website. I found particularly helpful when testing the functionality of the forms on my site and useful in debugging any unexpected form behaviour.
Livehttpheaders
This extension will display all http header information as you browse a website. Although not very important within the scope of this course, it helped improve my my understanding of how http operates.
If you have not played with any of the aforementioned extensions, I suggest you give them a try. They can really improve your productivity and general understanding of internet technologies.