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.
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
06. Powerful Online Image Editing With Sketchpad
07. Software: Turn Your Mouse Movements into Art
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.
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
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)
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).
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)
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)
The switcher uses in-page anchors and
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)
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).
The Smashing Newsletter Team prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol' Web with the latest tips and tricks for designers and Web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!
Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and
rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!
Subscribe to our email newsletter for useful tips and valuable resources, sent out every second Tuesday.
It's done. The Smashing Book #4, our brand new book with smart front-end techniques and design approaches. Written by respected designers and developers, neatly packed in a gorgeous hardcover.
Do you feel like your workflow is slowing you down? We might have just what you need. Our front-end, UX and RWD workshops in London, Zürich and Berlin. Read more...
Animoto is looking for a jaw-droppingly awesome designer to join our marketing team and lead the design efforts on everything from promotional online web pages to…
Job Description Getty Publications produces award-winning, highly illustrated books that result from or complement the work of the Getty Conservation Institute,…