Leslie Franke

Mozilla has announced the winners of their Extend Firefox contest. Winning the grand prizes were Reveal for Best New Extension, Web Developer for Best Upgraded Extension, and Firefox Showcase for Best Use of Firefox 1.5 Features.

The Rapid Web Development and Testing with Firefox presentation has been updated to account for two news extensions: the Firebug extension and the CSSViewer extension.

The Firebug extension helps in debugging AJAX, DHTML, and JavaScript web applications. It will display errors that occur during the rendering of a page, will place the pointer on the appropriate line, and allows for the inspection of different values of the DOM. The CSSViewer extension inspects elements on a page to give a complete rundown of the CSS declaration for a chosen element. While both of these extensions are very new, after the Web Developer extension these two extensions are some of the most valuable tools a developer can have in their toolbox.

Note: The location of the presentation has changed.

Dustin Diaz has compiled a nice CSS shorthand property reference guide.

Roger Johansson has just finished up the final part of a very useful series on CSS 2.1 selectors. The articles make it a little easier to understand selectors and how they work. If you are new to style sheets, or even an old pro, make sure to read these articles. Selectors are fundamental to the whole style sheet process.

Links: Part 1, Part 2, Part 3

A very useful tool for developing and testing web pages are so-called favelets or bookmarklets. A favelet is a small JavaScript program that is stored as a URL within a browser’s bookmark. A favelet operates like a normal bookmark. Clicking on the bookmark adds additional functionality to the browser such as changing the way a web page is displayed, viewing/editing CSS & scripts and validating the source of a page. Favelets are most helpful when developing with Internet Explorer but will also work in other browsers, such as Mozilla Firefox (you will find much of what favelets can do already bundled into custom extensions for Mozilla Firefox).

While favelets do not seem to be used as heavily now, as in the past, probably due to the use of extensions in Mozilla Firefox and plugins/toolbars for other browsers they still have their place in the development environment. Below are some web development favelets I have found to be of some use.

• Slayer Office Favlet Suite - Contains such favelets as a color list, document tree, ruler, and mouseover DOM inspector. This is the one set of favelets that I use in Mozilla Firefox.
• Web Development Bookmarklets - These bookmarklets deal with source code, modifying & viewing CSS, and javascript
• Favelets - Favelets for babelfish translations, screen sizing, and viewing html/css/images.
• Accessibility-Checking Favelets - Favelets to help check the accessibility of a web page.

A new magazine dedicated primarily to web development has just been launched by Particletree called Treehouse. The first edition is now available for free and includes essays on web related topics, a “roundup of links”, reviews, and resources for designers. Looks to be well designed with high quality content.

This one page cheat sheet is intended for web developers who are new to CSS and want to have a quick look up guide for CSS related work.

• PDF format
• HTML format

Note: For a more full featured and advanced CSS cheat sheet see Dave Child’s CSS cheat sheet.