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 #45

This newsletter issue was sent out to 70,930 newsletter subscribers on October 25th 2011.

Hola, Smashing Magazine friends!

Friday is one of the best days at Smashing Magazine’s headquarters, because it’s social lunch day where all team members come together and brainstorm creative ideas and freely express, share and discuss their thoughts! Since the last newsletter, we have created the official Smashing Magazine Flickr account, to share our Friday lunch pictures and even some action from the “kicker table” with you.

Smashing Team

This week will be a bit more special than usual for us: we’re going to open the doors of our office for the very first Smashing Magazine MeetUp! Yes, it is always worth staying tuned, especially when we still have tickets to give away for the Web design conferences like Beyond Tellerand.

By the way, have you ever tried to organize bookings for an event? Well, in this edition you’ll find just the WordPress plugin to make it work. And now we’re rolling right along with this week’s newsletter—all the important stuff you need to survive online: finally finish that project of yours, watch designers battle it out, and organize your online garage sale.

More goodies and news next time. Until then, let’s rock the Web! *meow*

Table of Contents

  1. CSS3 Image Styles1
  2. Open-Source Exchange Rates and Currency Conversion2
  3. Online Garage Sales3
  4. Notificon: Favicon Notifications and Alerts4
  5. Booking WordPress Plugin For Your Events5
  6. Useful Document Templates for Web Designers6
  7. Making Your Ideas Happen With the Finish Weekend7
  8. Battle of Drawings Between Designers8
  9. New on Smashing Magazine9
  10. Smashing Highlights10

1. CSS3 Image Styles

Did you know that if you apply CSS3’s inset box-shadow or border-radius property directly to an image element, the browser won’t render the style perfectly? But if you apply the image using background-image, then you can add any style to it and it will render properly.

CSS3 Image Styles11

Nick La’s article “CSS3 Image Styles12” shows you the possibilities of using the background-image CSS property to create basic circles, a card style, an embossed style, a cut-out style, morphing and glowing, a glossy overlay, reflections and a feather circle. And to make it dynamic, you can use jQuery to wrap the background image dynamically for every image element. The techniques work in every browser that supports border-radius, box-shadow, :before and :after. Unsupported browsers will fall back to the image without any styling. (ld)

2. Open-Source Exchange Rates and Currency Conversion

So, you’d like your customers to be able to purchase your products in various currencies, but how exactly do you build this functionality into your product? Sure, there are plenty of free currency conversion services, but finding a free and reliable API for developers to access the rates data is darn hard.

Open-Source Exchange Rates and Currency Conversion13

Joss Crowcroft has created an Open Source Exchange Rates API14, which provides up-to-date, flexible and portable currency-conversion data that can be used in any application, framework or language (not just JavaScript). It has no access fees, no rate limits, no nasty XML: just free, hourly updated exchange rates in JSON. Even better: Joss has also built money.js, a JavaScript currency conversion library15 that can be easily integrated in any website. A demo playground and detailed documentation are provided on the website, and the source code is available on GitHub. (vf)

3. Online Garage Sales

Perhaps you still remember this: some years ago, when it was time for spring cleaning, yard sales popped up around the neighborhood. Used books, toys, clothing, even furniture from nearby families were made available at appealing prices and in good condition. With the help of online technology, nowadays you will find such sales online, as in the personalized store Copious.

Online Garage Sales

Unlike regular online stores and auction websites, Copious tells you the story behind each product, who it belonged to and, occasionally, why they want to sell it. Put a social network on top of this model, and you’ve got quite an amusing experience for selling and buying stuff with people you are connected to on Twitter and Facebook. And you might even find those limited-run shoes you were looking for, who knows? (tt)

4. Notificon: Favicon Notifications and Alerts

If you have a website that many people use as a collaboration tool, you’ll often want to notify users of changes made to the collaborative environment within the website. But what if a user has moved to another browser tab? How do you win back their attention? Well, how about updating the favicon dynamically to make the tab just a bit more prominent? JavaScript to the rescue once again!

Notificon: Favicon Notifications and Alerts16

Matt Williams’ Notificon17 is a JavaScript library for creating favicon alerts and notifications. Instead of having to create a number of favicons and serving them to the client, you can specify a label and a favicon (the default being the current favicon), and it will generate a favicon notification for you. The script currently works with Chrome 6+, Firefox 2+ and Opera. (ld)

5. Booking WordPress Plugin For Your Events

If your client runs a business or service, the chances are good that you’ll eventually need to integrate booking functionality into the website. You don’t need to build the system from scratch, though: the Bookings WordPress plugin18 provides functionality that allows visitors to check the availability of the service and make online bookings.

Booking WordPress Plugin For Your Events19

The plugin enables you to define “blackout” times and to restrict reservations. You can also set minimum and maximum time limits for reservations and view and manage all reservations in calendar form in WordPress. (vf)

6. Useful Document Templates for Web Designers

Whether you’re a seasoned veteran or a newcomer to the Web design industry, various documents are a vital part of your day-to-day business, everything from contracts to invoices to client worksheets. In practice, though, we usually don’t spend enough time refining them in order to improve our workflow.

Useful Document Templates for Web Designers20

DocPool21 aims to change that by sharing commonly used documentation, created and submitted by designers and developers worldwide. So far, the website offers examples from a variety of designers, including a business planning template, an invoice template, an estimate worksheet for Drupal consultants, and a financial planning spreadsheet for startups. You can use them as is or adapt them to your needs. If you have a document that you’d like to share, you can do that, too! (cc)

7. Making Your Ideas Happen With the Finish Weekend

Being a creative person is not always easy. Have you ever passed a due date or even abandoned a project just because you couldn’t find the time for it in between your ongoing projects? Do creative ideas sometimes pop into your head, but you feel that turning them into a reality would be too great a challenge? If you’ve answered yes to any these questions, then you’ve got to join the Finish Weekend22 project.

Making Your Ideas Happen With the Finish Weekend23

The guys from Collective Idea have announced November 12 to 13 as the official Finish Weekend, and they are encouraging everybody to commit to launching something. The team is inviting everyone to join them at their office and to ship whatever it is they’re working on. Perhaps you could invite everyone to your office, too, and spend a weekend working together on creative side projects? (tt)

8. Battle of Drawings Between Designers

What began as a game between two designers went in directions and acquired dimensions that no one expected. In the game, one designer draws a powerful character. Then, the other player has to draw a character whose powers can overcome the first character’s strengths. And repeat. The game eventually turned into a collection of heroes and villains. You can relive all of the battles by checking the website The Superest24.

Battle of Drawings Between Designers25

You will get to see how Opus Rumpus vanquished Antler Enchanter and was in turn defeated by Vic Hume. Seeing the contestants’ drawing talents and creativity in inventing new heroes for every situation is a rather engaging affair. The result of this ongoing drawing game between illustrators Kevin Cornell and Matthew Sutter was not only hundreds of drawings: in 2009, they turned the concept into a printed book. As designers say, “The battle is over, but there are still scars to show and stories to tell.” Perhaps it would be worth finding time for a similar game in your design lab, too? (tt)

9. New on Smashing Magazine

10. Smashing Network Highlights

Network Icon44

The authors in this newsletter are: Stephan Poppe (sp), Cameron Chapman (cc), Talita Telma (tt), Luca Degasperi (ld), Vitaly Friedman (vf), Iris Ljesnjanin (il), Lisa Lang (ll).


  1. 1 #a1
  2. 2 #a2
  3. 3 #a3
  4. 4 #a4
  5. 5 #a5
  6. 6 #a6
  7. 7 #a7
  8. 8 #a8
  9. 9 #a9
  10. 10 #a10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  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
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, webinars and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    Jonathan Ehrlich

    October 25, 2011 9:15 am

    Vitaly – Thanks for the shout about Copious. We *love* your newsletter. Cheers went up all over the office when we saw our little project in there. Happy to chat more fully if you want to learn more. Thanks again. Jonathan

  2. 2

    I tried to launch ; but I couldn’t. Is there something wrong with the url? This is an awesome collection of sources by the way. Thanks a lot for sharing!!!


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