Making the most of Firebug
Firebug is one of the must-have tools for web developers. It comes with many features you might not even notice. The official website of Firebug has good explanations about each feature and has some screencasts. (There is only one screencast right now, but more screencasts are coming according to the website.) The website is useful indeed if you are looking for how to use Firebug. I cannot emphasize this point enough because, to my surprise, so many people haven’t visited and read the helpful information on the official website. Firebug 1.5: Editing, Debugging, and Monitoring Web Pages is a new book from Packt Publishing due next month.
Along with the basic features, Firebug has its own extension systems. Currently 36 extensions are listed on the wiki. I particularly like FireRainbow, which enables syntax highlighting for JavaScript, HTML and CSS. Another extension I want to mention is SenSEO. Although I am not paranoid for SEO, it gives me an good overview about how the rendered HTMLs can be evaluated from an SEO perspective.
YSlow is a popular extension by Yahoo!, which analyzes web speed and gives improvement suggestions. Google has its own speed analyzer extension, called Page Speed. I haven’t looked into it much but it has some unique features that YSlow doesn’t have. As my job is not just optimizing websites for speed, I now use YSlow mainly for now. It should also be noted that a lot of speed improvements can be done on backend by optimizing database. There’s a Firefox add-on, lori that shows basic information like the number of requests, page size and load time on status line. If an entire request takes more than 5 seconds to load all the files to be ready, something is wrong to me. The number of seconds may vary depending on your application and your Internet connection.
jQuery is probably the most popular JavaScript library as of today. It has a concept called jQuery object, which hides many complexities from developers. FireQuery is a Firebug extension that adds jQuery object information into Firebug as well as a few other functions like jQuery Lint integration.
jQuery is used everywhere. It’s officially used in WordPress and Drupal, both of which are the most popular tools for blogging and CMS respectively. Microsoft recently announced their plan to contribute to jQuery. Knowledge and skills of jQuery are becoming more important than ever for developers. There are essential tips I want to share regarding jQuery development.
Firstly, load the jQuery file from CDN. There are three CDN providers for jQuery (i.e., Microsoft, Google and jQuery.com). It is apparent that Google’s is the most common as far as I surf the web. Use Google’s Ajax Library. Secondly, run JSLint. A lot of bugs can be prevented if you follow JSLint. JSLint warns your usage of bad parts of JavaScript. Coding only using Good Parts will reduce careless mistakes and make code more consistent and readable. Lastly, jQuery Lint reports erroneous usage of jQuery. Following JSLint and jQuery Lint sound like shackles of “Best Practices”, but at least for me, they give me a good starting point for writing good code. By the way jQuery Lint project is still in the early stage. Use it with care.
