Smashing Newsletter: Issue #2

• By Smashing Editorial
• March 9th, 2010
• Newsletters
• 1 Comment

This newsletter issue was sent out to 19,168 newsletter subscribers on March 9th 2010.

Every other week our editorial team works on short, entertaining and (of course) relevant articles for the upcoming issue. The newsletter is sent out on Tuesdays, and contains unique tips and tricks for designers and Web developers, written by us exclusively for our email subscribers. You can subscribe to the e-mail newsletter, of course.

Table of Contents

01. Reorder and Filter Items With a Shuffling jQuery Animation
02. Quix: An Extensible Bookmarklet for an Advanced Browsing Experience
03. Unicode Codepoint Chart
04. CSS: Master of the Bubble
05. A Smart Content Switcher Without JavaScript
06. Powerful Online Image Editing With Sketchpad
07. Software: Turn Your Mouse Movements into Art

1. Reorder and Filter Items With a Shuffling jQuery Animation

Now, here’s a common design problem: you want to group similar items together—for example, t-shirt sizes in an online store—but because there are too many items to display, you’d like to offer users some kind of sorting or filtering functionality. The easiest way to do this would be to create a separate page for each category. You could also provide more advanced search functionality. Or you could just present items in a good old table, leaving users to sort through items by column.

With the Quicksand jQuery plug-in, though, you have an interesting alternative. This plug-in lets users reorder and filter items with a nice shuffling animation. You just need to integrate jQuery 1.3+, embed the plug-in’s library and define the initial “source” markup for the items and the “destination” markup. Once the user triggers the right button, Quicksand replaces one collection of items with another, thus sorting or filtering items in the collection.

You can modify the shuffling animation by setting optional parameters for scaling, animation duration, as well as visual enhancements such as font replacement. Also, you can use AJAX calls to dynamically generate and load the “destination” markup from the server. The plug-in works in all major browsers, but only when JavaScript is enabled. (vf)

2. Quix: An Extensible Bookmarklet for an Advanced Browsing Experience

Wouldn’t it be nice to have a powerful command line in your browser, some kind of shell that lets you use handy commands and shortcuts for a quicker and more productive workflow? That’s exactly what Quix offers. The tool is a clever extensible bookmarklet that lets you both access your bookmarks and perform various operations on other websites.

To use the tool, just drag the Quix bookmarklet to your browser’s toolbar, click on it and then type the command you want it to perform; for example, typing gs css will search the current website for the term “css” using Google search). Hundreds of commands are already available, for WordPress, SEO, Google Analytics, URL shortening, Web development tools and more. You can review all of these shortcuts by typing help.

What makes Quix powerful is that you can also define your own shortcuts and overwrite built-in commands by using the syntax provided by Quix. The tool can be integrated in any browser and can thus serve as a little cross-browser cross-system helper that makes for an advanced and efficient browsing experience. (vf), (cc)

3. Unicode Codepoint Chart

With Unicode code points, you can encode a huge number of symbols and characters in your Web content. But unless you have a photographic memory, you’re unlikely to remember even a small fraction of them (given that more than a million exist).

Left: Unicode character of Hiragana letter “Po” (U+307D). Right: Unicode character of Cherokee letter “We” (U+13EA).

That’s where the Unicode Codepoint Chart comes in handy. It’s broken down neatly by type of character and symbol (and by language in many cases), with a visual reference under each category. From there, just click on the symbol or character you want and you’re brought to a page with detailed information about the character, along with a browser test page, an outline (in SVG format) and a variety of encodings and character sets (HTML entity, UTF-8, UTF-16, UTF-32, ISO-8859-8, etc.). The website even provides a quick shortcut to type each character in Windows. (cc), (vf)

4. CSS: Master of the Bubble

Are pure-CSS speech bubbles possible? Yes, they are, and we’ve seen them. But one can still do so much more with them. Nicolas Gallagher is a gifted coder who conjures pure wonders with the assistence of modern techniques. His speech bubbles don’t use any JavaScript or graphics at all but still make the grade. Have a look at this example:

and this one:

Granted, some tricks are needed, and this is no country for old browsers. HTML plays but a minor role. Practical or not, in the end no one can say that CSS can’t be fun. Nicolas’ blog posting. (sl)

5. A Smart Content Switcher Without JavaScript

You don’t always need heavy JavaScript libraries to give your website advanced interactivity. If used cleverly, CSS can entirely suffice and, moreover, maintain an effect’s functionality when JavaScript is disabled. For example, you can use CSS-based Content Slider to create the kind of simple and accessible content switchers that are usually done with JavaScript. These can be used for product presentations, featured blog articles, photo galleries and more.

The switcher uses in-page anchors and overflow: hidden to keep switchability intact. So that it works in all major browsers, the tool also uses some cross-browser-safe CSS workarounds. The switcher also allows for deep linking by way of the hash in URLs, which works with or without JavaScript. So, why not give your websites enhanced interactivity without using JavaScript? (mm)

6. Powerful Online Image Editing With Sketchpad

If you are looking for an intuitive and powerful online paint and drawing application, look no further than Sketchpad. This application’s tools are organized in handy, draggable boxes that can be positioned very much as you would see in traditional image-editing applications.

Though lightweight, Sketchpad contains all the basic editing features (cropping, text tool, eraser, filler, background color, etc.) as well as some advanced tools. You will find HSV and RGBA color selectors, a convenient gradient selection, various patterns, a swatch controller, history logs and brush options. The application also includes a shape tool and spirograph, as well as random-sized stamps. Sketchpad will certainly be a helpful little tool whenever you want to quickly edit an image without having to load a huge memory-eating application. (jb)

7. Software: Turn Your Mouse Movements into Art

Did you know that you can turn your mouse movements into art? Sounds funny, but it’s no joke. This is made possible by the small Java program IOGraph, which was originally released as MousePath by Russian designer Anatoly Zenkov. With this small tool, you are essentially “painting” modern art. It works in the background, registering all movements of your mouse and transforming them into lines, with black circles that grow as you idle longer.

The program tracks movement on only one monitor. Let IOGraph run for hours, and get evocative patterns with a modern art look. Anyone who dares to look long enough into the chaos might recognize Elvis Presley or even Bruce Lee.

The tiny Java program works on Windows, Mac OS and Linux: no installation needed. It is completely free to use. (cs), (sl)

The authors in this newsletter are: Vitaly Friedman (vf), Sven Lennartz (sl), Christina Sitte (cs), Cameron Chapman (cc), Jessica Bordeau (jb), Manuela Müller (mm).