SitePoint

View Issue

The SitePoint TECH TIMES #262                  Copyright (c) 2009
October 20, 2009                                   PLEASE FORWARD
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tips, Tricks, News and Reviews for Web Coders
by Kevin Yank (techtimes@sitepoint.com)

Read the HTML version of this newsletter, with graphics, at: 
http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=262

Note: This newsletter is supported solely by advertisers like the
one below. We stand 100% behind every ad that we run. If you ever
have a problem with a company that advertises here please contact
us and we will try to get it resolved.

INTRODUCTION  - - - - - - - - - - - - - - - - - - - - - - - - - -

Sweet! James "brothercake" Edwards has been hard at work on the
latest version of CodeBurner [1], and it's a big deal. Version
1.5 includes a brand new CSS view feature, allowing you to dig
into your style sheets and uncover every scrap of information
about each rule, property, or selector.

Of course, all of CodeBurner's power has been available only to
Firefox users -- but that's about to change! CodeBurner is now
available as a widget for Opera, as a standalone AIR app, or on
the Mac OS X dashboard.

In honor of this brand new release, we'll turn today's Tech
Times over to James. He'll explain what's new in CodeBurner, and
share some fresh know-how on Firefox extension development.



[1] <http://tools.sitepoint.com/codeburner/>


SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -

When times get tough, the tough get "The Web Design Business Kit 2.0"

  * Win more business and boost your income.
  * Maximize revenue from clients.
  * Access 73 ready-to-use business documents.
  * And so much more ...

Grab yourself a FREE sample now!
http://www.sitepoint.com/kits/freelance2/


IN THIS ISSUE - - - - - - - - - - - - - - - - - - - - - - - - - -

 - Introduction
 - The CodeBurner Family Welcomes Three New Babies!
 - Spice up your Firefox Extensions with a Dash of HTML
 - New Technical Articles
 - Techy Forum Threads
 - More Techy Blog Entries


THE CODEBURNER FAMILY WELCOMES THREE NEW BABIES!  - - - - - - - -

by James Edwards

I'm very pleased to announce the launch of CodeBurner Version
1.5 [1]. More than an update, it's three (count 'em, three!) new
builds as well -- extending the CodeBurner family to include an
Opera widget, a Mac OS X Dashboard widget, and a standalone app
built on the Adobe AIR platform. You can download them here:

 - Install CodeBurner for Mac OS X Dashboard [2]

 - Install CodeBurner for Opera [3]

 - Install CodeBurner for Adobe AIR [4]

Perhaps the most significant new feature is the addition of a
new CSS view. It works in tandem with the DOM view, to provide a
complete breakdown of all the style sheets used on the DOM view
page. You can drill into each style sheet and obtain information
about its rules, properties, and selectors. Furthermore, when you
perform a "DOM selection search," the results now include
information about properties and selectors as well.

Adding this functionality to the Firefox and Firebug versions
was relatively straightforward, if quite involved. Data made
available by the DOM utilities class provides information about
the CSS DOM, and it's what powers the CSS inspection in DOM
Inspector and Firebug.

However, no such functionality exists outside of Firefox --
extending this capability to other versions meant writing a
whole new utilities class, in order to analyze and extract the
necessary information from a document's style sheets collection!
No small feat, I can tell you. It provides functionality, such as
the ability to return a list of properties that apply to an
arbitrary element, which the new versions use for their
selection search.

CodeBurner now includes CSS selectors and at-rules in all its
searches, in addition to the CSS properties, HTML elements, and
attributes information it had before. For all the code output
and code examples, you now have full syntax highlighting (with
user-configurable colors in the Firefox version). As you'd
expect, there's also a range of smaller bug fixes and stability
enhancements, including a new on-demand loading technique for
the Firefox and Firebug versions; this latter feature helps
reduce the extension's memory footprint when it's inactive.

In order to keep the version numbers uniform, all the new builds
come straight in at Version 1.5; but there's no need to worry --
you're still up to speed! The version numbers simply reflect the
fact that all these new builds have a comparable feature set to
the primary Firefox and Firebug versions, both of which have
naturally reached 1.5.

So there you have it -- more choice than ever, giving you the
HTML and CSS reference data you need in whatever format is most
convenient for you, be it a browser-based [5] development tool
[6], a browser widget [7], dashboard widget [8], or a standalone
desktop application [9].

And if you're yet to be impressed, you should see what's coming
in Version 2! (Sorry, you're just going to have to wait.)

Read the blog entry:

     Web Tech Blog: Technically Speaking
by James Edwards

The CodeBurner Family Welcomes Three New Babies! [10]  

[1] <http://tools.sitepoint.com/codeburner/>
[2] <http://tools.sitepoint.com/codeburner/dashboard/codeburner-dashboard-1.5-en.wdgt.zip>
[3] <http://tools.sitepoint.com/codeburner/opera/codeburner-opera-1-5-en.wgt>
[4] <http://tools.sitepoint.com/codeburner/air/CodeBurner-en-1.5.air>
[5] <http://tools.sitepoint.com/codeburner/firefox/>
[6] <http://tools.sitepoint.com/codeburner/firebug/>
[7] <http://tools.sitepoint.com/codeburner/opera/>
[8] <http://tools.sitepoint.com/codeburner/dashboard/>
[9] <http://tools.sitepoint.com/codeburner/air/>
[10] <http://www.sitepoint.com/blogs/?p=15272>


SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -

You don't need to go to art school to create sexy looking websites!

Sexy Web Design is the latest SitePoint must have book.

http://www.sitepoint.com/launch/e6dfc3


SPICE UP YOUR FIREFOX EXTENSIONS WITH A DASH OF HTML  - - - - - -

by James Edwards

This week marks the release of a few new incarnations of the
CodeBurner reference tool [1]: an OS X desktop widget, an Opera
widget, and a standalone AIR app. Of course, you can still grab
the original versions of the tool, CodeBurner for Firefox or
CodeBurner for Firebug. You can now access HTML and CSS
reference information no matter where you do your web
development!

To highlight this release, I thought I'd give you the lowdown on
a key technology I used in the development of these extensions:
HTML.

Yep, plain old HTML. Used wisely, it can be the secret weapon
that makes your Firefox extension stand out from the crowd.

This article assumes knowledge of the basics of developing
Firefox extensions. If you're new to the game, you can get up to
speed with my free Build Your Own Firefox Extensions [2] PDF
ebook.

WHY USE HTML?

One of the great aspects of XUL components is that their
appearance is largely out of our hands. This makes for
interfaces that are consistent and accessible; they'll always
look like the rest of the browser interface, whether viewed with
the default skin, a custom skin, or platform accessibility tweaks
like large fonts.

Sometimes, however, you need to give your extension a bit of
styling or functionality beyond what's available using only XUL.
In those cases, you might consider using HTML inside your XUL
documents. This gives you access to all the CSS and JavaScript
functionality you have when developing web pages.

Firebug [3] is a prime example of an extension requiring HTML
for parts of its interface, because XUL simply lacks the
elements for the job. Let's take a look at Firebug's HTML panel,
which is a representation of the DOM being inspected. Think about
how you'd build it in XUL:

Figure 1. The HTML panel in Firebug


Well, it's a trick question. It's impossible to build it in XUL
because XUL lacks any elements that can be arranged to create a
tree-like structure with syntax highlighting. The nearest option
is the tree element, which can be used to create a similar
structure, but only within the constraints of columns and rows.
Here's that element in action in the DOM Inspector:

Figure 2. The document: DOM nodes panel in the DOM Inspector


When I was first building CodeBurner for Firefox [4], I searched
through the entire XUL Reference [5] looking for a group of
elements that could be used to build a DOM tree. Upon
discovering that there were none, I decided to build it in HTML,
style it with CSS, and add the expand/collapse behavior with a
bit of custom JavaScript.

Here are some other examples of when I think it's appropriate to
use HTML in developing a Firefox extension:

 - For creating "about" pages or similar dialogs that only
contain rich text, rather than actual interface components.



 - When the offsetWidth or offsetHeight of an element needs to
be measured (properties that are unavailable to XUL elements),
you could create a temporary HTML element inside the XUL
element, and measure that instead.



 - When elements need to be positioned absolutely in the
interface (absolute positioning is unsupported for XUL
elements).



 - If more styling flexibility is needed, such as rounded
corners or background images. The XUL textbox element, for
example, is particularly resistant to styling, so using an HTML
input [6] may be the only way to achieve the desired results.



If you find yourself wanting to use HTML simply because of its
additional styling potential, you should first consider whether
you really need the styling, or whether it's just eye-candy, or
could be accomplished in some other way.

Absolute positioning in particular should be used with extreme
care, because of the limits it places on the flexibility of an
interface. In a great many use cases, there are other ways to
achieve the end result: the stack element, for example (within
which elements can be positioned absolutely), or simply leaving
elements in their flowed positions.

A good example of where an interface genuinely needs the
increased styling potential is the X icon to delete the contents
of the search box; this was added to CodeBurner for Firefox [7]
in Version 1.5. This proved impossible to implement with an XUL
textbox, so using HTML was the only option.

Figure 3. The search box in CodeBurner for Firefox version 1.5


I've shown you some examples of when it can be appropriate to
use HTML, but that decision will always be a judgment call that
needs to be made on a case-by-case basis. That said, let's move
on to the nitty-gritty of how you actually implement it.

Read the rest of this article:

     Spice up your Firefox Extensions with a Dash of HTML [8]
by James Edwards  

[1] <http://tools.sitepoint.com/codeburner/>
[2] <http://www.sitepoint.com/books/byofirefoxpdf1/>
[3] <http://getfirebug.com>
[4] <http://tools.sitepoint.com/codeburner/firefox/>
[5] <https://developer.mozilla.org/en/XUL_Reference>
[6] <http://reference.sitepoint.com/html/input>
[7] <http://tools.sitepoint.com/codeburner/firefox/>
[8] <http://articles.sitepoint.com/article/firefox-extensions-with-html>


SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -

Introducing Adobe ColdFusion 9  software.

Building rich Internet applications just got easier
with the latest release of ColdFusion from Adobe.
Adobe ColdFusion 9 enables developers to build
powerful Internet applications by condensing complex
business logic into fewer lines of code.
The seamless integration between ColdFusion 9 and
the Adobe Flash Platform gives you the easiest
solution yet for building rich Internet applications (RIAs).

DEVELOP. DEPLOY. FASTER

Try Adobe Coldfusion 9 now- free for 30 days >

http://www.sitepoint.com/launch/d509e5


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

See you next week for another edition of the Tech Times!

Raena Jackson Armitage
techtimes@sitepoint.com
Community Manager, SitePoint



NEW TECHNICAL ARTICLES - - - - - - - - - - - - - - - - - - - - - - - - -

Type Talk with Simon Pascal Klein

Raena caught up with Simon Pascal Klein -- designer, speaker
and self-confessed rampant typophile -- to talk about his upcoming
appearance at Edge of the Web 2009.

<http://articles.sitepoint.com/article/interview-simon-pascal-klein>

CSS3: To Infinity And Beyond!

Browser support for CSS3 is continually improving. In this article,
Alex walks us through a few of the coolest CSS3 properties supported
in the latest development release of Firefox (3.6 alpha).

<http://articles.sitepoint.com/article/css3-infinity-beyond>

Share Media on Twitter Using Flex, Part III: Video

In parts I and II, Andrew showed us how to build a slick-looking Flash
frontend for Twitter and Flickr using the beta versions of Flash
Catalyst and Flash Builder 4. In this final installment in the series
he takes our application a step further by adding video functionality:
allowing users to upload videos, and to take screenshots of their videos
to post as images.

<http://articles.sitepoint.com/article/share-media-flex-twitter-video>


TECHY FORUM THREADS - - - - - - - - - - - - - - - - - - - - - - -

Php crawler
<http://www.sitepoint.com/forums/showthread.php?threadid=642676>

"ComeFrom" deemed Harmful
<http://www.sitepoint.com/forums/showthread.php?threadid=642925>

Photo gallery
<http://www.sitepoint.com/forums/showthread.php?threadid=642648>

CSS - Test Your CSS Skills Number 29 (image replacement)
<http://www.sitepoint.com/forums/showthread.php?threadid=642149>


MORE TECHY BLOG ENTRIES - - - - - - - - - - - - - - - - - - - - -

News & Trends Blog: INDUSTRY NEWS FOR WEB PROFESSIONALS

CSIRO Receives $185 Million for Wi-Fi Patent  (3 comments)
http://www.sitepoint.com/blogs/2009/10/19/csiro-185-million-wifi-patent/

Sir Tim Berners-Lee: Sorry About the Slashes  (25 comments)
http://www.sitepoint.com/blogs/2009/10/14/sir-tim-berners-lee-http-slashes/

Mozilla Joins Microsoft in Slamming Google Chrome Frame  (38
comments)
http://www.sitepoint.com/blogs/2009/10/13/mozilla-microsoft-slam-google-chrome-frame/


Web Tech Blog: TECHNICALLY SPEAKING

Exclusive Interview With Ben Firshman, Creator of JSNES  (3
comments)
http://www.sitepoint.com/blogs/2009/10/16/ben-firshman-jsnes-interview/


Usability Blog: USABILITY 2.0

11 Virtual Machine Solutions To Ease Your Cross-Platform Checks 
(9 comments)
http://www.sitepoint.com/blogs/2009/10/19/virtual-machine-solutions/




ADVERTISING INFORMATION - - - - - - - - - - - - - - - - - - - - -

Find out what thousands of savvy Internet marketers already know:
email newsletter advertising works! (You're reading an email ad
now, aren't you?)

Find out how to get YOUR sponsorship ad in this newsletter and
reach 95,000+ opt-in subscribers! Check out
http://www.sitepoint.com/mediakit/ for details, or email us at
mailto:adinfo@sitepoint.com  


HELP YOUR FRIENDS OUT - - - - - - - - - - - - - - - - - - - - - -

People you care about can take charge of their Website by
effectively using the information and resources available on the
Internet. Help them learn how - forward them a copy
of this week's SitePoint Tech Times.


ADDRESSES - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Send suggestions and comments to:
techtimes@sitepoint.com

To subscribe, send a blank email to:
subscribe@sitepoint.com

The Archives are located at:
http://www.sitepoint.com/newsletter/archives.php

The SitePoint Tech Times is (c) 1998-2009 SitePoint Pty. Ltd. All
Rights Reserved. No part of this Newsletter may be reproduced in
whole or in part without written permission. All guest articles
are copyright their respective owners and are reproduced with
permission.

SitePoint Pty. Ltd.
48 Cambridge Street
Collingwood, VIC 3066
AUSTRALIA

You are currently subscribed to The SitePoint Tech Times as:
[email]

To change the email address that you currently subscribe with:
http://sitepoint.com/newsletter/manage.php

To switch to the HTML version of this newsletter:
<http://sitepoint.com/newsletter/htmlplease.php?email=[email]>

To leave this list, please visit: 
[unsubscribe]

Do Not Reply to this email to unsubscribe.


We send this newsletter using Campaign Monitor.
http://www.campaignmonitor.com/

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -