Glimmer: a jQuery Interactive Design ToolApr 27, 2009 In Design By Karsten Januszewski
The Genesis of Glimmer
Like many software projects, Glimmer was born during a conversation. Tim Aidlin and I were having dinner together. We’d just recently finished up Oomph: A Microformats Toolkit and we were reflecting on our experiences with that project and what we’d learned.
In building Oomph, we used jQuery extensively, which was a new experience for both of us. The ability to so easily manipulate the DOM on the fly, slinging CSS around at will, was a revelation in terms of what we could do with the standards-based web as a designer and developer. We had a pretty good workflow going, with Tim drafting up HTML and CSS while I realized his vision programmatically through jQuery. In some ways it was akin to the workflow we had with WPF. (See The New Iteration, Tim’s post on workflow and this Channel9 interview for more on Tim and my own thoughts on the topic of developer/designer workflow.)
Here’s a screenshot of the Glimmer Welcome Page:
Want the quick-and-dirty on Glimmer? Watch the video:
Or read on to find out more about the goals and vision of Glimmer.
The Goals of Glimmer
Glimmer has three core audiences: power users, designers and developers.
First, Glimmer is optimized for the power user or web author who wants to use step-by-step wizards to create common web experiences like image sequences, animating dropdown menus and tooltips. For these scenarios, Glimmer makes it super simple, generating HTML, CSS and jQuery and packaging it all up, ready to be slapped on a server.
Here’s a screenshot of Glimmer’s Image-Sequence Wizard:
Second, Glimmer is targeted at the designer who is fluent in HTML and CSS. For this person, who has an understanding of how HTML and CSS are used to build web pages, Glimmer provides a way to create web animations and experiences entirely through a tool. Any HTML file can be opened in Glimmer and then the elements inside that HTML file can be visually selected and manipulated, creating effects based on events that happen on the web page like load, mouseover, mouseout, submit and more. These effects might include opacity fades, position movement, scaling of items and manipulation of the HTML, both through appending/removing HTML and through modifying the page’s CSS on the fly. With these effects, web designers can add interactivity to their web pages without writing code. There is also the ability to run timers and to chain actions sequentially. Using these two techniques, a kind of simple key frames can be established. Consider the web comic at the top of the lab page that Tim created with Glimmer. He built this by chaining together a series of animations. It is a great example of what a creative designer can build with the tool.
Third, Glimmer may be of interest to jQuery developers, both beginners and experts. For people just learning jQuery, Glimmer can function as a teaching tool, a WYSIWYG editor that generates code which can be inspected, analyzed and then potentially tweaked or modified. Using a tool in such a way is an excellent path to learning. I think about tools like Microsoft Expression Blend, which helped me to learn XAML, or Microsoft Expression Web, which helped me to learn CSS. For jQuery experts, Glimmer can help bootstrap a project, allowing for rapid development by generating boilerplate code that may then be tweaked. It is worth noting that because the tool generates code, it may not be as optimized as what an experienced jQuery developer might write.
Here’s a screenshot of Custom Mode in Glimmer, which is how designers and developers can use Glimmer to create custom scripts:
The Future of Glimmer
As we built Glimmer, we realized we’d taken on a pretty ambitious project. We knew we couldn’t cover every scenario. As such, from the start, we designed it for extensibility and plug-ins. jQuery itself was inspirational in this regard, given how vibrant the community is around building plug-ins for jQuery. We wanted to do something similar for Glimmer.
There are two main points of extensibility for Glimmer. First are the wizards. Anyone can write a wizard that plugs into Glimmer. For example, someone could write an image gallery wizard which would generate HTML, CSS and jQuery based on a series of prompts. Second, anyone can write a Glimmer effect. Currently, Glimmer ships with 8 effects, which include things like opacity animation, x position animation, add CSS class, etc. But this only scratches the surface in terms of other effects that could be written. For example, someone could write an effect that uses a feature from a jQuery plug-in.
With this release of Glimmer, we are excited to share what we’ve built. We look forward to your feedback about Glimmer. Download it today!