While our Swat web application toolkit (it’s not a framework) has been open since it’s inception, it has been missing some of the key infrastructure required for a healthy open-source project. The code was available, that was about it.

Now, with the new code.silverorange.com website (based on Trac - a past nominee for silverorange employee of the year), we finally have the rest of the public project infrastructure in place.

Most importantly among these changes, we finally have a public bug-tracking system! This took longer than expected because we had Swat bug-tracking tied in with our internal (private client) project tracking. The two are finally separated, and everything that should be open is now out in the open.

We’re are also now in a position to grant SVN commit access to external contributors when appropriate.

The silverorange code site isn’t limited to Swat either. We have a whole set of packages we use for developing client sites, including a back-end website administration package, an e-commerce package, a photo-gallery package, and a (fledgling) weblog package. Each of these projects now has a section of it’s own on the code.silverorange.com site, and they share a mailing list and Jabber chat room with Swat.

For those who have been patient enough to follow and participate in our open-source projects so far, we’re appreciative. We hope to be much more open to external collaboration and contributions with this new infrastructure.

This leaves the coveted position opened mostly to inanimate objects. In the past three years, the Employee of the Year title has fallen on the following deserving candidates:

Employee of the Year - 2004: Jabber Chat Room

After getting our own Jabber instant messaging server, which allows us to manage our own secure instant messaging infrastructure just like we do with email. One of the benefits of such a service is way secure chat rooms can be easily created. Since then, an enormous amount of our company dialog has taken place in our “Office” Jabber chat room. It has been particularly helpful in keeping our few remote partners in touch with the mother-ship.

Employee of the Year - 2005: Subversion Version Control System

Up until this point, we had been a small enough team working on small enough projects that working on one shared code-based wasn’t too much of a problem. Even at this scale, there was still a need to occasionally yell out “Who’s editing index.php?!” Along with some other changes, bringing in a source code management system (we opted for Subversion) has significantly improved the stability of our general work flow. The history of each file is preserved, and perhaps most importantly, it is easy to watch what everyone else is doing on a project. The benefit of this peer-review (aka, fear of shame) is significant.

Employee of the Year - 2006: Third-Floor Workspace

The third floor of our beautiful turn-of-the-century Victorian building in downtown Charlottetown had seen little use until 2006. Early last year, though, we set up a large communal desk, rife with power and network adapters. This became the place we would gather when we were working together on a project. When you ran into an issue that needed another the help or insight of co-worker, they were only a glance away. An LCD projector also helps with group reviews of current project sites.

As a result, many of us now spend most of our working time here at this large group desk. We’ve joked that we could sell our building and move into one room with one desk. We know, though, that working together in a room like this only works because we know we can retreat to our private desks and offices at any point if we need some time without distraction.

2007

Earlier this month, we convened for our annual winter summit on the north shore of Prince Edward Island. Looking back over the year, we examined a few potential candidates for the 2007 Employee of the Year. Promising candidates included our BBQ, Trac, our crock pot (chili and beef stew on Wednesdays!), Firebug, our drink fridge, our Dell projector, our Wii (and Wii Sports), the toilet, and the improvised cardboard lids for our waste and compost bins. Considering two pieces of cardboard as the Employee of the Year might seem a bit odd, but it’s quite likely that they prevented a breakout of malaria in the office following a fruit-fly issue in the late summer.

After this superficial and possibly beer-fueled evaluation, we chose to name the 2007 Employee of the Year as follows:

The Drink Fridge

Having beer, tea, and juice has kept us hydrated, and helped us to speed up the process of passing the caffeine from our morning coffee through our systems. Firebug was a very close runner-up. Some even claim there was some vote tampering, however, given the one-raised-hand=one-vote system, it’s hard to imagine much room for fraud.

Better luck next year, crock pot.

Download the latest release of Swat. You can upgrade from an existing PEAR install using pear upgrade Swat.

To create and maintain large JavaScript applications, coding conventions and documentation are necessary. Unfortunately, coding conventions and documentation result in larger file sizes. Since JavaScript is often served over the web, developers should be concerned with file size. As a result, it is common practise to run JavaScript source files through a filter that strips comments and white-space.

Continue reading “Compressing JavaScript with ShrinkSafe” …

You may specify a sub-pattern as non-capturing using PCRE syntax. To do this, use the ?: symbol after the opening parenthesis of the sub-pattern.

Here's the situation that led me to this discovery:

I needed to split a string at any known XHTML tag. To do this properly, I used PHP's preg_split() function. Because I also needed to include the matched tags (split delimiters in this case) in the returned array I specified the PREG_SPLIT_DELIM_CAPTURE flag.

$all_elements = 'div|span|p|ul|ol|li|strong|em|etc...';
$pattern = '/(<\/?(' . $all_elements . ')[^<>]*?>)/i';
$strings = preg_split($pattern, $string, -1, PREG_SPLIT_DELIM_CAPTURE);

The outside sub-pattern is the entire delimiter (tag), which is what I want in the returned array from preg_split(). The inside sub-pattern is only needed to match any XHTML element name. Because there are two sub-patterns, the array returned from preg_split() contains both the entire tag (desired) and the element name (undesired).

Using the optional non-capturing sub-pattern syntax, my pattern looks like this:

$pattern = '/(<\/?(?:' . $all_elements . ')[^<>]*?>)/i';

Using the revised pattern, my code works as intended; only the full tag match is returned in the split array. This feature turned out to be quite useful for me. I imagine this feature will be useful anywhere that a sub-pattern containing branch syntax is used inside a larger pattern, and the larger pattern needs to be captured.

Since Swat's 1.0 release, we've had a few people tell us getting started with Swat is too difficult. To help people get started, here is a quick tutorial on how to get the Swat Demo running on your own server.

To get the Swat Demo running you'll need the following:

• The latest release of Swat
• PEAR::Date
• Yahoo User Interface library (YUI)

Continue reading “Getting Up and Running with the Swat Demo” …

Demo

• view demo
• download source (zip)

While working on a weblog I had a friend ask me if she could have her recently played Last.fm tracks appear in her sidebar. Last.fm has a feature to add your recent tracks to your blog but unfortunately, the recent track list is implemented as a dynamically generated image. Last.fm does have a nifty chart designing tool but for a number of reasons I wanted to work with styleable XHTML markup. Luckily for me, Last.fm also provides a set of XML data feeds for all sorts of things including recently played tracks. For example, these are the recently played tracks in the silverorange office.

Having data feeds is great, but as you can see, the data is not an XHTML unordered list. There are several things that can be done at this point.

Continue reading “Working with XML Feeds - Last.fm” …

The Swat web application toolkit has reached the mythical 1.0 status. What this really means is that we have it in a state where we were ready to launch our first client website powered by Swat and it’s sister (brother?) packages.

What better way to bring Swat into the production-website world than by having it power a gardening company e-commerce store? You can read more about the new site in the silverorange news.

In the development of our first major site with Swat, a few other packages have organically sprung up:

• The Admin package provides the web-based back-end management functionality for the site.
• The Site package provides very basic site structure
• The Store package provides common e-commerce site functionality (products, categories, shopping cart, accounts, etc.)

Though we don’t have much public info about them, these packages all share the same LGPL license as Swat are are available in our public Subversion repository. A few other packages are likely to spring up as we develop more sites with Swat.

The in-line documentation for Swat and these additional packages is reasonably good (but could always be better). However, the documentation published on the Swat site is not quite up-to-date. We hope to improve on this soon.

We’re also moving to a Trac install as a means of trac(k)ing bugs/issues for the Swat family of packages. We'll try to get this working in some publicly accessible way in the ambiguous future.

Now that Firefox 1.5 is out with support for SVG (Scalable Vector Graphics) included by default, and the same coming for Safari, perhaps some of us might want to actually use SVG for something.

Of course, Firefox 1.5 still represents a small minority of web users. Unless your application is somehow limited to this small slice of internet users, you can’t really use SVG in-line unless you can have a safe fall-back for browsers that don’t (yet) support SVG.

It turns out this is relatively easy to do. It turns out the <object> tag can help us out.

The Code

The object tag is like a more generic version of the img tag. Rather than include images, it can include all kinds of objects (hence the name). You may have seen it in use to include Flash or Audio/Video content into a web page.

For a simple test case, let’s imagine we want to include an SVG image on a page. However, for browsers that don’t support SVG inline and don’t have an SVG plug-in installed, we want to show them a simple PNG image instead.

The XHTML code is simple:

<object data="image-svg.svg" type="image/svg+xml" height="48" width="48"> <img src="image-png.png" height="48" width="48" alt="this is a PNG" /> </object>

The object tells the browser that it’s including an SVG object (type=”image/svg+xml”) and points to the SVG file (data=”image-svg.svg”).

Contents of the object tag are used as alternate content if the object cannot be displayed. Think of what lives inside of the opening and closing object tags like “alt” text on an img tag. However, rather than a simple text alternative, we can include more XHTML.

In this case, we’re including the familiar img and displaying a normal PNG image.

Browser Support (and the lack thereof)

This technique seems to be relatively well supported in the more popular web browsers. The browsers that support SVG (only Firefox 1.5, or other browsers with the Adobe SVG Viewer plug-in installed, so far), and other browsers degrade nicely and show the alternative content (a PNG in our test case). The only unfortunate display side-effect is that Firefox 1.0.x displays an addition plug-in notice at the top of the page (screenshot). This table shows the support in various browsers:

Why Would I Want To Do This?

A situation in which you might want to use SVG inline on a website is a bit difficult to imagine right now. The reason I looked into this was for a site where we want to display SVG graphics to show off that they are actually graphics created using SVG - not the most common or practical case. That said, we have to start somewhere.

I’m sure I’ve made some mistakes here. Feel free to post corrections or additions in the replies to this post.