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 account1, to share our Friday lunch pictures and even some action from the “kicker table”2 with you.

Smashing Team3

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 MeetUp4! Yes, it is always worth staying tuned, especially when we still have tickets to give away5 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 Styles6
02. Open-Source Exchange Rates and Currency Conversion7
03. Online Garage Sales8
04. Notificon: Favicon Notifications and Alerts9
05. Booking WordPress Plugin For Your Events10
06. Useful Document Templates for Web Designers11
07. Making Your Ideas Happen With the Finish Weekend12
08. Battle of Drawings Between Designers13
09. New on Smashing Magazine14
10. Smashing Highlights15

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 Styles16

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

Joss Crowcroft has created an Open Source Exchange Rates API19, 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 library20 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 Copious21.

Online Garage Sales22

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 Alerts23

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

Booking WordPress Plugin For Your Events26

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 Designers27

DocPool28 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 Weekend29 project.

Making Your Ideas Happen With the Finish Weekend30

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

Battle of Drawings Between Designers32

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 Icon51

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

Footnotes

  1. 1 http://www.flickr.com/photos/68892449@N05/
  2. 2 http://www.flickr.com/photos/68892449@N05/6265891227/in/set-72157627944082520
  3. 3 http://www.flickr.com/photos/68892449@N05/6266419790/in/set-72157627944082520/
  4. 4 http://www.meetup.com/The-SmashingMagazine-Meetup/
  5. 5 http://twitter.com/#!/smashingmag/status/128435031462002688
  6. 6 #a1
  7. 7 #a2
  8. 8 #a3
  9. 9 #a4
  10. 10 #a5
  11. 11 #a6
  12. 12 #a7
  13. 13 #a8
  14. 14 #a9
  15. 15 #a10
  16. 16 http://webdesignerwall.com/tutorials/css3-image-styles
  17. 17 http://webdesignerwall.com/tutorials/css3-image-styles
  18. 18 http://josscrowcroft.github.com/money.js/
  19. 19 http://josscrowcroft.github.com/open-exchange-rates/
  20. 20 http://josscrowcroft.github.com/money.js/
  21. 21 http://copious.com/
  22. 22 http://copious.com
  23. 23 https://github.com/makeable/Notificon
  24. 24 https://github.com/makeable/Notificon
  25. 25 http://www.zingiri.net/plugins-and-addons/bookings/
  26. 26 http://www.zingiri.net/plugins-and-addons/bookings/
  27. 27 http://www.docpool.co/
  28. 28 http://www.docpool.co/
  29. 29 http://finishweekend.com/
  30. 30 http://finishweekend.com
  31. 31 http://www.thesuperest.com/
  32. 32 http://www.thesuperest.com/
  33. 33 http://uxdesign.smashingmagazine.com/2011/10/24/role-design-kingdom-content/
  34. 34 http://www.smashingmagazine.com/2011/10/21/web-designer-be-your-best-promoter/
  35. 35 http://wp.smashingmagazine.com/2011/10/20/create-tabs-wordpress-settings-pages/
  36. 36 http://uxdesign.smashingmagazine.com/2011/10/20/comprehensive-review-usability-user-experience-testing-tools/
  37. 37 http://coding.smashingmagazine.com/2011/10/19/optimizing-long-lists-of-yesno-values-with-javascript/
  38. 38 http://www.smashingmagazine.com/2011/10/19/free-e-commerce-wordpress-theme-balita/
  39. 39 http://uxdesign.smashingmagazine.com/2011/10/18/how-to-build-an-agile-ux-team-culture/
  40. 40 http://www.smashingmagazine.com/2011/10/17/how-disregarding-design-limits-the-power-of-content/
  41. 41 http://coding.smashingmagazine.com/2011/10/17/getting-started-with-php-templating/
  42. 42 http://wp.smashingmagazine.com/2011/10/14/advanced-layout-templates-in-wordpress-content-editor/
  43. 43 http://www.smashingmagazine.com/2011/10/14/the-dos-and-donts-of-infographic-design/
  44. 44 http://www.smashingmagazine.com/2011/10/21/the-do%e2%80%99s-and-don%e2%80%99ts-of-infographic-design-revisited/
  45. 45 http://uxdesign.smashingmagazine.com/2011/10/13/design-with-dissonance/
  46. 46 http://wp.smashingmagazine.com/2011/10/12/developers-guide-conflict-free-javascript-css-wordpress/
  47. 47 http://coding.smashingmagazine.com/2011/10/12/prefixfree-break-free-from-css-prefix-hell/
  48. 48 http://www.smashingmagazine.com/2011/10/12/freebie-twitter-ui-gui-psd/
  49. 49 http://uxdesign.smashingmagazine.com/2011/10/11/introducing-6-1-model-for-effective-copywriting/
  50. 50 http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/
  51. 51 http://www.smashingmagazine.com/network-posts/
  52. 52 http://www.vanseodesign.com/css/tables/
  53. 53 http://sixrevisions.com/infographics/visual-guide-ampersand
  54. 54 http://css-tricks.com/14647-abbrs-for-web-nerd-acronymns/
  55. 55 http://tympanus.net/codrops/2011/10/19/blur-menu-with-css3-transitions/
  56. 56 http://net.tutsplus.com/tutorials/javascript-ajax/stop-nesting-functions-but-not-all-of-them/
  57. 57 http://www.webdesignerdepot.com/2011/10/a-web-of-lies/
  58. 58 http://www.netmagazine.com/opinions/death-and-rebirth-customer-experience
  59. 59 http://msdn.microsoft.com/de-de/scriptjunkie/hh527168.aspx
  60. 60 http://www.attackofdesign.com/style-vs-no-style/
  61. 61 http://css-tricks.com/14664-what-we-dont-know/
  62. 62 http://line25.com/tutorials/create-a-typography-based-blog-design-in-photoshop

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 performance problems in large companies. Get in touch.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  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 http://www.docpool.co/ ; 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 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!

↑ Back to top