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

This newsletter issue was sent out to 60,952 newsletter subscribers on July 5th 2011.

Every other week our editorial team works on short, entertaining and (of course) relevant articles for the upcoming newsletter issue. The newsletter is sent out on every second Tuesday, and contains unique tips and tricks for Web designers and developers, written by us exclusively for our email subscribers. You can subscribe to the e-mail newsletter1 as well, of course.

Table of Contents

  1. Speed Is A Feature2
  2. Sprite Cow: Generate CSS For Sprite Sheets3
  3. Badger: Sexy Notification Badges With jQuery4
  4. GreatAster: The Online Art Boutique5
  5. Meeting Notes Made Easier6
  6. Works Of Art Done Entirely In Light7
  7. CSS Support In HTML Emails8
  8. Recipefy: An Online Cookbook9
  9. A Lyric A Day10

1. Speed Is A Feature

Page-loading times affect user satisfaction, SEO and many other factors that determine the success of a website. Performance, therefore, can no longer be considered an afterthought or part of a post-launch strategy. The best approach is to consider speed as a feature, just like any of the other features and widgets on your website.

Speed Is A Feature11

Stoyan Stefanov is writing the comprehensive Book of Speed12: The Business, Psychology and Technology of High-Performance Web Apps. The book will include nine chapters, covering topics such as “The Performance Business Case,” “Fewer Page Components,” “Smaller Components” and “Optimizing Images.” Each chapter discusses in depth the technical details of how page-loading time can be optimized. The book is work in progress and its parts are released under the public domain; you can contribute your ideas via GitHub. (tb)

2. Sprite Cow: Generate CSS For Sprite Sheets

When it comes to optimizing the loading times of pages and reducing the number of HTTP requests, CSS Sprites is one of the most popular techniques to use. With sprites, you store small images in a larger master file and then “grab” them using the background-position property in CSS. The technique is often used for icons, user interface design elements and buttons in various states. However, manually calculating the values of the background-position property can be quite tiresome. There has to be a better way.

Sprite Cow: Generate CSS For Sprite Sheets13

Indeed, there is. Sprite Cow14 is an online tool that helps you get the background-position, width and height properties of sprites from a sprite sheet as a nice bit of copy-able CSS code. To get the CSS code, just upload the master sprite, click on the image in the sprite that you’re interested in, or select an area by clicking and dragging. The tool also works with master files that do not have transparent backgrounds, but to use them you’ll need to select the color using the “Pick background” feature.

Overall, a quick, simple and useful time-saver. The tool currently works in Chrome and Firefox, but doesn’t play well with Safari on Mac due to a lack of HTML5 File & FileReader support; hence, you might want to consider alternative tools, such as SpriteMe15, Sprite CSS Generator16 and Smart Sprites17. (vf)

3. Badger: Sexy Notification Badges With jQuery

Daniel Raftery has released Badger, a jQuery plug-in that displays notification updates for any HTML element without the need for images. The design is modelled on the badges found on the iPhone and iPad, which makes it an attractive way to notify your users in a way that many of them are already familiar with. So if you are developing a Web-based version of your application for those mobile devices, you might consider using the plug-in to imitate the native iOS experience.

Badger: Sexy Notification Badges With jQuery

Basically, the plug-in adds a nice rounded badge to the corner of an HTML element. Hence, it can be useful for comments areas, dashboards, admin panels and other elements. The plug-in works in modern browsers, including Internet Explorer 9.0 (although IE8 shows a square badge). The plug-in is licensed under the MIT Licence. The minified version is 1.8 KB, and the full version is 2.4 KB. (vf)

4. GreatAster: The Online Art Boutique

Museums around the world stockpile the great works of art, making them inaccessible to most people. GreatAster18 has chosen to grant the world access to its fine collection of historical and contemporary art. High-resolution scans of illustrations from antique textbooks, as well as engravings and renowned masterpieces make up this treasury of art. Simply search the collection by entering your query, and specify the desired size and resolution prior to purchasing.

GreatAster: The Online Art Boutique19

If GreatAster is unable to find your desired style, theme or technique, it will put all of its wheels in motion to get it for you. You can subscribe to the RSS feed to get constant updates on the collection. If you are a true art lover, you can not only download, but purchase pieces as wall art. GreatAster also has a “Free for web” section in which the owners of the project allow to freely employ any available images from their gallery but require a link back to the site. The whole collection is updated constantly, so check back daily. The website might at least trigger your creativity anew. (sp)

5. Meeting Notes Made Easier

Take the hassle out of creating meeting notes with minutes.io20. This is a neat little Web app for creating and sharing notes quickly and effortlessly. We all know how writing down ideas and suggestions from meetings can be time-consuming, and yet the best time to note those comment is either during the meeting itself or right after it has ended.

Taking Meeting’s Notes Made Easier21

This tool can be used at both times very easily. essentially gives you a detailed template in which you can track attendees and record agenda items, with due dates and owners. Once the meeting has finished, you can email the notes to all of the attendees before they get back to their desks. The tool uses HTML5 local storage, so your drafts are saved in the browser even if you are offline, waiting to be sent when you’re online again. You can even use keyboard shortcuts for quicker notes. (ar)

6. Works Of Art Done Entirely In Light

Light painting is probably one of the most beautiful forms of photography. Using nothing but various lighting tools and a single long exposure, beautiful shapes are created seemingly from nothing. In true light painting, no post-processing or retouching work is done.

Works of Art Done Entirely in Light22

David Gilliver23 creates beautiful light paintings using a variety of light tools. The one shown above, Ribbon Dance24, shows beautiful reflections in the water, and bright, vibrant colors. The photographer is “present” in all of his paintings, although he isn’t visible because he wears dark clothing and is constantly moving. Be sure to check out his website and his photostream for even more great light paintings! (cc)

7. CSS Support In HTML Emails

Cross-browser compatibility can be a nightmare for designers, but it doesn’t come close to the compatibility headaches across email clients. Unfortunately, the support for CSS, even at the most basic level, is very limited and so designers for the most part give up using CSS at all. That’s unfortunate, though, because some popular email clients have at least some support for CSS, and designers miss out (or at least make their jobs harder) by not using it.

CSS Support in HTML Emails25

Campaign Monitor has just updated its “Guide to CSS Support in Email26,” available in Excel and PDF (as well as on the website). It covers ten of the most popular email clients: Outlook versions 2000, 2003, 2007 and 2010, Apple iOS, Windows Live Hotmail, Apple Mail 4, Yahoo Mail Beta, Google Gmail, and Android 2.3 (Gmail). Armed with this chart and the client profile of your useres, you can make educated decisions about which CSS elements to use and which to avoid. (cc)

8. Recipefy: An Online Cookbook

Do you love spending time in the kitchen cooking up fancy meals? Have you invited guests over for dinner (or perhaps someone special) but run out of ideas for what to cook? If you have, then you will love Recipefy27, an online recipe manager that helps users share their favorite recipes and discover new dishes. Users can find new recipes and share their personal favorites with the Recipefy community.

An Online Cookbook - Recipefy28

Recipefy provides users with a fun, easy way to find new recipes and to organize their favorites for safe-keeping online. And it works as an online organizer and bookmark for your recipes as well: your own online cookbook of sorts. It’s an easy way to discover new recipes and share recipes between friends. So, what are you making tonight? (ar)

9. A Lyric A Day

Take one lyric from a song every day and create art or shoot a photograph inspired by it. That’s exactly what Lukes Beard has been doing for almost a year now. The result is fascinating: A Lyric a Day29 is a remarkable collection of artwork, all dedicated to powerful statements in songs and heavily influenced by the music and the designer’s personal mood and interpretation of the songs.

A Lyric A Day30

The designer’s commitment to the project is both encouraging and challenging: are you ready to commit yourself to designing something every single day31, too? A Lyric a Day is a good example of a creative side project, which in this case helps the designer explore his creativity and imagination and study new ways to connect music, lyrics and visual design. (vf)

The authors in this newsletter are: Vitaly Friedman (vf), Andrew Rogerson (ar), Cameron Chapman (cc), Thomas Burkert (tb), Stephan Poppe (sp).


  1. 1
  2. 2 #a1
  3. 3 #a2
  4. 4 #a3
  5. 5 #a4
  6. 6 #a5
  7. 7 #a6
  8. 8 #a7
  9. 9 #a8
  10. 10 #a9
  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

↑ 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. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

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