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 newsletter1, of course.
Table of Contents
- Reorder and Filter Items With a Shuffling jQuery Animation2
- Quix: An Extensible Bookmarklet for an Advanced Browsing Experience3
- Unicode Codepoint Chart4
- CSS: Master of the Bubble5
- Powerful Online Image Editing With Sketchpad7
- Software: Turn Your Mouse Movements into Art8
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-in10, 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.
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 Quix11 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
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 Chart14 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
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. (sl)
The switcher uses in-page anchors and
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 IOGraph18, which was originally released as MousePath by Russian designer Anatoly Zenkov19. 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 look20. 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).
- 1 https://www.smashingmagazine.com/the-smashing-newsletter/
- 2 #a1
- 3 #a2
- 4 #a3
- 5 #a4
- 6 #a5
- 7 #a6
- 8 #a7
- 9 http://razorjack.net/quicksand/
- 10 http://razorjack.net/quicksand/
- 11 http://quixapp.com/
- 12 http://quixapp.com/
- 13 http://inamidst.com/stuff/unidata/
- 14 http://inamidst.com/stuff/unidata/
- 15 http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html
- 18 http://iographica.com/
- 19 http://www.flickr.com/photos/anatoliy_zenkov/4271592658/
- 20 http://www.flickr.com/search/?q=IOGraph&w=all&s=int
Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Oxford, on March 15—16, with smart design patterns and front-end techniques.