Menu Search
Jump to the content X

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 Styles
  2. Open-Source Exchange Rates and Currency Conversion
  3. Online Garage Sales
  4. Notificon: Favicon Notifications and Alerts
  5. Booking WordPress Plugin For Your Events
  6. Useful Document Templates for Web Designers
  7. Making Your Ideas Happen With the Finish Weekend
  8. Battle of Drawings Between Designers
  9. New on Smashing Magazine
  10. Smashing Highlights

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 Styles

Nick La’s article “CSS3 Image Styles” 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 Conversion

Joss Crowcroft has created an Open Source Exchange Rates API, 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 library 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 Alerts

Matt Williams’ Notificon 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 plugin provides functionality that allows visitors to check the availability of the service and make online bookings.

Booking WordPress Plugin For Your Events

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 Designers

DocPool 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 Weekend project.

Making Your Ideas Happen With the Finish Weekend

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 Superest.

Battle of Drawings Between Designers

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 Icon

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).

Smashing Book #5

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? For example, Smashing Book 5, packed with smart responsive design patterns and techniques.

↑ 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, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    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

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that all fields are mandatory, 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!

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