Smashing Newsletter: Issue #45

• By Vitaly Friedman
• October 25th, 2011
• Smashing Newsletters
• 2 Comments

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.

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

01. CSS3 Image Styles
02. Open-Source Exchange Rates and Currency Conversion
03. Online Garage Sales
04. Notificon: Favicon Notifications and Alerts
05. Booking WordPress Plugin For Your Events
06. Useful Document Templates for Web Designers
07. Making Your Ideas Happen With the Finish Weekend
08. Battle of Drawings Between Designers
09. 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.

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.

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.

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!

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.

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.

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.

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.

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

• The Role Of Design In The Kingdom Of Content
• Web Designer, Be Your Best Promoter
• How To Create Tabs On WordPress Settings Pages
• Comprehensive Review Of Usability And User Experience Testing Tools
• Optimizing Long Lists Of Yes/No Values With JavaScript
• Free E-Commerce WordPress Theme: Balita
• How To Build An Agile UX Team: The Culture
• How Disregarding Design Limits The Power Of Content
• Getting Started With PHP Templating
• Advanced Layout Templates In WordPress’ Content Editor
• The Do’s And Don’ts Of Infographic Design
• The Do’s And Don’ts Of Infographic Design: Revisited
• Design With Dissonance
• The Developer’s Guide To Conflict-Free JavaScript And CSS In WordPress
• PrefixFree: Break Free From CSS Prefix Hell
• Freebie: Twitter GUI PSD
• Introducing The 6 + 1 Model For Effective Copywriting (Better Than AIDA!)
• Essential jQuery Plugin Patterns

10. Smashing Network Highlights

• Flash Isn’t Dead Yet!
• A Visual Guide to the Ampersand (Infographic)
• Abbr’s for Web Nerd Acronyms
• Blur Menu with CSS3 Transitions
• Stop Nesting Functions! (But Not All of Them)
• A web of lies
• The death and rebirth of customer experience
• Native Audio with HTML5
• Style vs No Style
• What We Don’t Know
• Create a Typography Based Blog Design in Photoshop

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