In issue 268 of A List Apart, our own Scott Jehl discusses our process of Test-Driven Progressive Enhancement. The article introduces a fresh approach to our earlier research on the topic, and includes a full rewrite of the Javascript which is faster and more flexible for development. We will post details on the script API in the lab shortly.

Article link: Test-Driven Progressive Enhancement.

Earlier this year, we wrote about progressively enhancing select elements into slider components. Our article focused mainly on the high-level approach, but our demo code made use of the now abandoned "Interface" library, so we didn't release the code at that time. We've since rewritten our code utilizing jQuery UI's slider component, extending it with additional accessibility and general usability enhancements, and are now making it available for download.

We wrote a script to "equalize" the heights of boxes within the same container and create a tidy grid — with little overhead.

Earlier this week we released ThemeRoller, an Ajax-driven theme design app for jQuery UI. Now that the servers have recovered and things are running smoothly, we'd like to uncover a bit of an easter egg that we rolled right into the app: ThemeRoller not only allows you to style the official jQuery UI components, it also provides handy CSS hooks for designing your own ThemeRoller-Ready components! This article will introduce ThemeRoller's CSS API and show you how to use it in your own projects.

When the jQuery team approached us to design the new de-facto visual design theme for jQuery UI, we were more than excited to help out. Here at Filament, we're big fans of jQuery and frequently contribute plugins and ideas to the community; any opportunity to help jQuery continue to grow and gain traction is always in our best interest.

Not long after starting our work on the default theme, and some playing with alternatives, we realized our CSS work could be translated into a web application to allow others to create and share custom themes as well. Based on this idea, ThemeRoller was born.

7/24/08 Update: Fixed support for Opera and @import CSS (thanks http://marcarea.com/).
6/21/08 Update: This script is now updated with optional settings for load status, including a percentage bar! We also included a bug fix for IE when loading absolute image paths (Thanks Sam Pohlenz!). Details are below.

When we first launched the lab, we released a jQuery plugin that automatically preloads all images referenced in CSS files. We've found the script to be incredibly helpful in developing snappy applications where images are always ready when we need them. This post describes a significant update to the script which will make it even easier to integrate in existing projects.

We created an iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It's especially helpful when organizing large data structures that don't translate well into traditional dropdown or fly-out menus.

We recently modified jQuery UI's Datepicker, created and maintained by jQuery UI contributor Marc Grabanski. Our version is optimized for quickly selecting a date from a list of preset dates/ranges, and we added smooth transitions when additional options are revealed.

08/13/2008 Note: We've created a new article with some major improvements to this technique. To read the article and download the script, visit Using Progressive Enhancement to Convert a Select Box Into an Accessible jQuery UI Slider . To read about the original logic behind this approach, please continue reading here.

Creating accessible "web 2.0" applications can be a tricky process. Many of the advanced widgets and controls we develop today don't exist in the current HTML specification — there is no "slider" or "accordion" or "menu" element, so we must create one from scratch using markup that isn't semantically correct (divs, spans, unordered lists and the like), and layer on the appearance and behavior using CSS and Javascript. This works well when your audience is using a standards-compliant browser, but what about those using older browsers or mobile devices that only partially support the styles and scripts necessary for it to work? And how do you make the fully functional version — a block of non-specific divs and spans — accessible to assistive technology, like screen readers?

Along with the founders, Dan Cederholm and Ethan Marcotte, we hosted the latest meeting of the Markup & Style Society in our office on South Street Thursday night.