Introduction
 Sweet! James
"brothercake" Edwards has been hard at work on the latest
version of CodeBurner, 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.
 - 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!
Summary
The CodeBurner Family Welcomes Three New Babies!
by James Edwards
I'm very pleased to announce the launch of CodeBurner Version
1.5. 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:
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 development tool,
a browser
widget, dashboard
widget, or a standalone desktop
application.
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:
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: 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 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 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, I searched through the entire XUL Reference
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 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 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:
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
>
See you next week for another edition of the Tech Times!
Raena Jackson Armitage
techtimes@sitepoint.com
Community Manager,
SitePoint
|
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.
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).
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.
