Leslie Franke

As part of their 10th birthday celebration Opera, for today only, is giving away free registration keys to the Opera browser. If you want to run Opera without the ads go to Opera Birthday page and request a key. Works as advertised. I got a free key and my version of Opera is now registered.

See this post for information on an update to the presentation.

As an aside to some beginning web development training sessions I have been working on, I have created a “Rapid Web Development and Testing with Mozilla Firefox” presentation. It is a given that successful web development requires certain essential tools. One of the best tools, I know of, available for web development and testing is the Mozilla Firefox web browser.

The slide show is a basic overview of Firefox’s built-in web development tools, as well as some useful web developer extensions that are available. The idea is not to explain how to use these tools and extensions, but to make you aware that such tools are out there and what their basic purposes are. It is up to you to explore whichever one of these tools you may choose to use.

You can view the presentation here on my website. I hope that you find the presentation of some use.

Update (08/31/05): I have started a thread at MozillaZine for any feedback on the subject. Please post all comments and/or suggestions there.

Update 2 (09/06/05): For an additional perspective to the “Rapid Web Development and Testing with Mozilla Firefox” presentation Fini Alring has written a short article about the same subject.

Note: The presentation was created using Eric Meyer’s S5 (A Simple Standards-Based Slide Show System) slide show format. Further information on how to design and use this format can be found at the link. The presentation is licensed under the Creative Commons licence: Attribution - No Commercial - Share Alike.

A little slow on this but SlayerOffice’s Steve Chipman has released version 2.0 of his Mouseover DOM Inspector bookmarklet. His MODI “allows you to view and manipulate the DOM of a web page simply by mousing around the document”.

Todd is suggesting some “link love” for Dave Child’s web developer cheat sheets. They include CSS, Mod-rewrite, MySQL, and PHP. These quick reference guides are another way to make your life easier.

The Firefox web browser is fast becoming known as an excellent browser, but it is not as well recognized as a great web developer tool. Though not an exhaustive list, the following Firefox extensions allow a web developer to more easily create and manage a web site. Obviously some extensions will be more valuable to some developers than to others, but the Aardvark, Colorzilla, and Web Developer extensions should be considered an essential part of any developer’s toolbox.

• Aardvark is an excellent CSS debugger with a bunch of keyboard modifiers. Shows things such as the element name and id or class name of a selected element.
• Colorzilla is an eyedropper tool with several other useful functions. Hovering over an element will show color info, DOM path info, and X,Y offset from the previous click. In addition, Colorzilla provides a magnifying tool and a color mixer.
• Fangs presents a textual representation of a web page, similar to the way it would be read by a screen reader.
• Fireftp is a FTP client which allows for easy access to a FTP server.
• LinkChecker checks every link on a web page to find bad links. LinkChecker’s simple color coding scheme makes it easy to spot a bad link, quickly, on any page.
• Live HTTP Headers displays information about the HTTP headers on a page.
• MeasureIt draws a ruler across a web page to display the width, height, or alignment of any page element.
• User Agent Switcher allows FireFox to identify itself as a different web browser, such as IE or Opera, to a web server.
• View Rendered Source is another way to view the source of a web page in a color-coded and/or nested mode.
• The Web Developer extension adds a toolbar to the browser which contains various
  web developer tools designed to allow for easy viewing of various information about a web page. It will outline elements on a page, display the size of images, give CSS and form information, disable certain elements on a page, and much more.

Note: I have omitted some extensions, such as the Edit CSS extension, that an extension in the list provides much of the same functionality as. Secondly, the links point to the developer’s page not the Mozilla Firefox extension page.

One of the things you will notice with the new design is many 80×15 bi-coloured buttons on many of the pages. There are zillions of these buttons on the web, here are some Palm based ones to throw into the mix. These images are based on the design by Jeremy Hedley. They were created with the help of the button maker. Feel free to do with them what you like.

Simon Collison gives some tips on how to create a site that provides people browsing with handheld devices a better experience in 7 steps to better handheld browsing.