Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Smashing Newsletter: Issue #53

This newsletter issue was sent out to 99,770 newsletter subscribers on Tuesday, February 21st 2012. If you are not subscribed yet, feel free to subscribe to our email newsletter1.


Dear Readers,

As mentioned in the previous newsletter issue, we’ve been busy bees organizing the upcoming SmashingMag Meetup as well as a one-day workshop with CSS Guru Jens Grochtdreis in Frankfurt on Monday the 27th of February. The CSS3 Master class will be held in English and all you have to do to join is to answer a short question related to the topic of the workshop on our meetup page. Last but definitely not least, we’d like to thank MailChimp2 for sponsoring the workshop, and Linotype3 for sponsoring the evening event  —  both to which we all look very much forward to!

Last week was also pretty exciting for us, especially after the launch of the Smashing Book #3 presale. We’ve received truly smashing feedback and promise to give our best to answer all further requests and questions via our contact form4 and on Twitter (#smbook3). The pre-order is available for just a few days so don’t miss your opportunity to pre-order the Smashing Book #35 at a special price while you can!

In today’s newsletter issue, we’ll be covering some CSS and HTML snippets, a quality free font, a color scheme tool and vintage album covers. We’re also giving away 2 tickets to the Mobilism Conference6 in Amsterdam. Further details regarding the conf tickets are provided below.

We hope you enjoy the newsletter!

Table of Contents

  1. Quick Peek At A Designer Hall Of Fame7
  2. Common Patterns Of Markup and Style8
  3. Entypo: Free Pictogram Font9
  4. Match Up Your Colors10
  5. Monitor And Manage Your WordPress Sites11
  6. DataTables: Plug-in For jQuery Javascript Library12
  7. The Infinite Preloader13
  8. Thirty-Three Vintage Album Covers14
  9. Things Organized Neatly15

1. Quick Peek At A Designer Hall Of Fame

Whether you are a design enthusiast or a company marketing director, you’re likely to be always looking for new and exciting designs to spice up your wallpaper/company website. Browsing for nuggets on the Web can be a lot of fun, but sometimes you wish someone would take the time to put together a little designer “Hall Of Fame”… actually, ‘he’16 did.

Quick Peek At A Designer Hall Of Fame17

365 Awesome Designers18 is a “no-frills” — but lots of “design-thrills” — project, that features interesting, creative, (pick your “awesome” adjective of choice) designers and some of their creations. Every day the avid design fan can discover a new craftsperson. And should your interest in a designer go deeper, the website’s creators provide you with all the necessary information to either stalk your new favorite designer online or on Twitter. (jc)

2. Common Patterns Of Markup and Style

Whatever project you’re working on, the chances are high that you’ll be using the same snippets of code that you’ve used in your previous projects as well. Whether it’s a data table, a search, breadcrumbs or pagination — wouldn’t it be nice to have a library of bulletproof reusable CSS/HTML components and just grab them when you need them for your work?

Common Patterns Of Markup and Style might be just the tool you’re looking for. It’s an open source WordPress theme that lets you collect, test and experiment with interface pattern pairings of CSS and HTML. You can easily have your own pattern library setup and running quickly. Essentially, each pattern is a post in WordPress, code snippets are added using custom fields, and the main content field is used for optional notes. Very useful! (vf)

3. Entypo: Free Pictogram Font

Pictograms are simple symbols that represent signs, instructions, or any other idea. They are also common interface design elements — widely used for apps or general websites. While you could use them separately (or integrate them as sprites in your website), they are often useful to have as perfectly scalable icons, e.g. if you want to display something on a map.

Entypo — Free Pictogram Font19

Entypo Pictograms20 is a set of more than 100 pictograms available as OpenType fonts, released under Creative Commons license and also free for commercial use. The collection consists of many navigation elements and other easily recognizable icons. Authors Daniel Bruce and Andreas Blombäck will appreciate seeing any usage of Entypo in your design. (af)

4. Match Up Your Colors

Few people have pitch-perfect color vision. Disregarding the large part of the population that has some form of color-blindness, it is rare that one can say with utter certainty exactly which color corresponds to which. For designers whose work partly depends on matching color palettes, the hit-and-miss approach to color selection can be nerve-wrecking and time-consuming. Colllor2321 represents a viable, if not overly clinical, tool to help choose your color palette.

Match Up Your Colors22

Colllor2321 helps you find specific colors and their corresponding shades, hues and tones. You can even look for associating colors to broaden your palette, which can be a useful tool in a Web developer’s belt. You can input color names using plain English as well as in Hex code, but don’t expect too much — we have tried (in vain) to get results on ‘rust’, ‘sunset’, and ‘yellow’, to no avail. (jc)

5. Monitor And Manage Your WordPress Sites

So you’ve got about a dozen projects running on WordPress. Some of them are somehow customized, but most are using the same plugins or even the same themes. What do you do if your plugins or themes get outdated, or if a new version comes along? Going through all the websites and updating the plugins manually doesn’t sound very exciting, does it?

Monitor And Manage Your WordPress Sites24

WP Remote25 to the rescue. This little online service helps you monitor and manage all of your WordPress-powered websites and keeps you up to date. The tool allows you to instantly take care of core WordPress updates, plugin updates and theme updates, generating daily backups. WP Remote is absolutely free to use; you only need to install the WP Remote plugin on your WordPress sites, activating it with your API key. A great little time-saver for small projects. (vf)

6. DataTables: Plug-in For jQuery Javascript Library

Sorting, filtering, pagination and state-saving in an interactive table sounds like quite an overhead for any developer, especially if you’re keen on high performance and the scalability of your tables. DataTables26 is a highly flexible jQuery plug-in that can help you with exactly that challenge.

DataTables — Plug-in For jQuery Javascript Library27

The library can display data from different sources, be it DOM (i.e. an HTML table in a page), a JavaScript array, or a server-side file with JSON formatting. Among other features, the library provides pagination, on-the-fly filtering, and multi-column sorting with data type detection. And the features that DataTables provides can be enhanced by many freely available plug-ins: e.g. with row grouping, column filtering, column resizer, etc. The library weighs 68K minified, and 20K gzip’d. If you’re looking for an advanced and robust data tables plug-in, this is certainly one worth checking out. Open source, and released under GPL and BSD. (af)

7. The Infinite Preloader

Flash preloaders are well-known from the good old days. At that time, loading times on the Web were long, Adobe Flash was kind of cool, and preloaders were not only useful but necessary to indicate the status of the loading process for Flash-based websites. In fact, in 2008 we featured creative Flash preloaders28 in one of our articles. But the New York Web and advertising agency Big Spaceship devoted an entire website to (its own and other) Flash preloaders.

The Infinite Preloader29

The site is called Prettyloaded30, and it’s actually a (pretty long) Flash movie — with its own preloader, of course. Most of today’s preloaders are much simpler: the notorious AJAX circle ball and its various minimalistic descendants dominate the scene, so no Flash plugin is necessary. Still, looking at creative preloaders might be useful to come up with more original HTML5 preloaders, as well. (sl)

8. Thirty-Three Vintage Album Covers

Some people collect postcards, others collect stamps or pencils. The guys behind Jive Time Records, a Seattle-based store specializing in used vinyl, collect — guess what? — vintage album covers. More than that, they group and classify them according to their shapes: circles, dots, squares, lines, stripes or arrows.

Thirty-Three Vintage Album Covers31

The result is Project Thirty-Three32, a growing collection of vintage album covers that convey their messages with only simple shapes and typography. The website features over 430 covers and the collection keeps growing. Now, that’s an interesting source of inspiration for your next cover design or poster! (vf)

9. Things Organized Neatly

Being organized may be very helpful in our everyday lives. Some people are naturally organized, and without noticing it, create patterns and rules for systemizing their objects. In case you’re one of those talented people who makes a hobby out of this mania, you’d certainly like to visit Things Organized Neatly.33

Things Organized Neatly34

In the blog curated by Austin Radcliffe, you’ll observe perfectly harmonized compositions that vary in shape, size, material, color, category and related objects. Some examples are vintage matchboxes, headphones, keys, cups, to name a few. There’s also the possibility of posting one of your compositions, in case you’d like to show your friends that organization can also be an art in itself. (tt)

Thank You For Reading!

As always, we sincerely appreciate everyone’s time and support. We would also like to thank our trainees Ana Flasker and Luca Degasperi for all their great work and contribution in the previous months. We hope that your internship at Smashing Magazine has met your expectations and we wish you both all the best in your future endeavours!

As mentioned at the beginning, this time we’re giving away 2 tickets to the Mobilism Conference35 in Amsterdam, Netherlands. If you’d like to win one, all you have to do is tweet “Goddag @smashingmag take me to #mobilismconf in Amsterdam!” The two lucky winners will be announced on the 2nd of March. Good luck and stay tuned!

Frankfurt, here we come!

Yours sincerely,
The Smashing Team

The authors of this newsletter are: Sven Lennartz (sl), Stephan Poppe (sp), Talita Telma (tt), Vitaly Friedman (vf), Iris Ljesnjanin (il), Lisa Lang (ll), Ana Flasker (af), Jan Constantin (jc).


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7 #a1
  8. 8 #a2
  9. 9 #a3
  10. 10 #a4
  11. 11 #a5
  12. 12 #a6
  13. 13 #a7
  14. 14 #a8
  15. 15 #a9
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35

↑ Back to top Tweet itShare on Facebook

The Smashing Editorial 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!

  1. 1

    Sidharth Rajah

    February 22, 2012 3:59 am

    I especially loved the 365 awesome designers site……a lot of inspiring designs there. Thanks!

  2. 2

    Vladimir Shevchenko

    February 22, 2012 4:13 pm

    good job)

    I use only to quickly insert html for layout pages, for projects in the WP, I still do cross-browser)))


Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top