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

This newsletter issue was sent out to 159,550 newsletter subscribers on Thursday, August 22nd 2013. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.


You probably know that feeling when you send a message to somebody you care, yet days and weeks pass by and you never hear back from this person. Well, perhaps they chose to ignore you, but perhaps their message got lost, overlooked or deleted by accident? Or maybe that message was never brought to the attention of your recipient by the user interface?


Have you ever noticed and checked the “Other messages3” tab in Facebook? If somebody outside your contact list has ever tried to contact you, their message will be shown within this particular tab, carefully hidden next to the main “Inbox” tab (and no email notification will be sent). Who knows, perhaps you’ll discover a message from a person who found your wallet years ago, or a message from a good old friend? After all, you don’t want to appear as a grumpy old friend not returning your calls, right?

What are other examples of other interfaces in which you’ve stumbled upon the same issue? Please share your findings on Twitter using the #smhiddenmsg.

Have a good week, everyone!

– Vitaly (@smashingmag)

Table of Contents

  1. Sometimes Even A Bear Gets Carried Away4
  2. Give’n’Go: CSS Snippets Takeaway5
  3. The Spy In Your Pocket: Visitor Flows At A Conference6
  4. CSS Time Savers For Your Toolbelt7
  5. The Time On A Personal Wrist Watch8
  6. Displaying Time, The Friendly Way9
  7. Annotating Images Made Easy10
  8. Give Your Machinery Exotic… Desktop Wallpapers!11
  9. Old Type On Old Campfire Marshmallows12
  10. Streetmix: What Would Your Own Street Look Like?13
  11. So Many Great Workshops, So Little Time14

1. Sometimes Even A Bear Gets Carried Away

Imagine you snoop around in the woods, you think of nothing bad, and suddenly you bump into a bear who runs an arcade and wants to play cube slam against you! You think this sounds crazy? It happened to me. I ran into a bear who runs an arcade. I ran into Bob. Bob is a bear who got bored. Bored of doing nothing else than eating berries all day long. So Bob thought, let’s make this life more fun! And built an arcade overnight.

Sometimes Even A Bear Gets Carried Away15

Now, you can imagine that a bear who runs an arcade is not the typical thing you see out there in the wild. And so most of the other animals thought that Bob must have gone insane. Luckily, not all turned their back on him. Some of the more nerdy ones among Bob’s friends remained faithful: his wife and kids, his best buddy, the moose, and a bunch of rabbits. Meaning, Bob has a fanbase and they follow every game he plays. Bob is also known to be quirky and he’s got home advantage. But after all, he is a very nice guy — he’ll let you play against your friends, too. So, are you ready to cube slam16? (ea)

2. Give’n’Go: CSS Snippets Takeaway

If you happen to browse Dribbble shots every now and then, you may sometimes stumble upon interesting navigations or interaction patterns. You may bookmark it so you can check it more later, or perhaps forget about it entirely. But what if you could just grab a CSS/JavaScript snippet instead and play with it right away?

Give'n'Go: CSS Snippets Takeaway17

Give’n’Go18 is a curated Tumblog gallery of Dribbble shots reworked as interactive CodePen pens with markup and styles ready to be grabbed right away. Curated by Chris Nager, the gallery already has dozens and dozens of snippets, from radio buttons to menus and mockups. Now that’s a goldmine to explore, or fork and improve! Also, if you know another good Dribbble + CodePen Give ‘n’ Go pair, you are welcome to submit your own pair. A good, valuable resource. (vf)

3. The Spy In Your Pocket: Visitor Flows At A Conference

When logging into an open Wi-Fi, we can’t really avoid leaving our tracks. So far, nothing new. But what if someone collected this data, let’s say at a conference, to visualize the flow of visitors? Knowing who logged into which access point could provide a whole new perspective on the event and the behavior of its attendees. Which talks attracted most listeners, what time of the day was high noon in terms of traffic? Open Data City19 has put this scenario into effect at the re:publica, one of the largest annual conferences about the digital space in Germany.

The Spy In Your Pocket: Visitor Flows At A Conference20

Open Data City collected the data of devices that logged into one of the 100 access points at a venue and visualized their movements on an interactive floor plan21 accompanied by a timeline. It shows 6,700 tiny dots — the devices and their respective owners — moving around, assembling for talks, untying and spreading out in all directions to finally come together again. The entire three days of the event was reconstructed this way, from the rush in the morning to the last handful of devices holding the fort at night. Intriguing, but also a reminder on how sensitive our digital data actually is. The data used for this experiment was, of course, salted and hashed before being processed. (cm)

4. CSS Time Savers For Your Toolbelt

No one can ever have enough useful tools in their toolbox. When it comes to CSS, there are lots of tasks that are either mundane or just error-prone, and definitely could be assisted with little time-saving tools. Especially if you tend to have lots of redesign projects, every now and again you need to explore legacy stylesheets and markup, and also detect unused, duplicate or even erroneous code.

CSS Time Savers For Your Toolbelt22

ExtractCSS23 and ucss24 to the rescue! The first tool extracts IDs, classes and inline styles from an HTML document and outputs them as a CSS stylesheet. To clean up the markup mess and generate a list of used classes and IDs, you just have to paste HTML and choose the options you prefer (such as indentation, curly braces, semicolons, etc.). Unfortunately, you can’t upload multiple HTML files (or .zips) yet. The second tool analyzes CSS and finds unused and duplicate styles as well as duplicate selectors. It also counts matches for each rule and follows links within the given domain. Bookmarked! (vf)

5. The Time On A Personal Wrist Watch

What time is it? Well, why not check on one of Matt Johnston’s flat Wrist clock designs25. Every two weeks he uploads a new design, each exploring typography, colors and clock mechanics. Matt brings old as well as new wristwatches to life, getting his inspiration from actual wristwatch designs. This is a side project for Matt in which he can get out of his comfort zone and experiment with typography, colors and new fun ideas.

The Time On A Personal Wrist Watch26

Matt is currently showcasing “The Weekender” and “No.1” so make sure to check out his website! Don’t forget to take a closer look at the navigation menu which prompts you to check your local time, or San Francisco, London or even Paris times. Maybe this will help you glean some inspiration for your own wristwatch, too! (sh)

6. Displaying Time, The Friendly Way

“Hey dude! It’s 20 minutes to 2 and I’m feeling good!” Wouldn’t you prefer to display the time like this in your application? Aaron Lumsden created a jQuery plugin named tidyTime.js27 that turns regular time into a friendlier, more human dialogue. There are a few demos for you to try out; some of my favourites include, “Wakey wakey! It’s a quarter to 6 in the morning”, “It’s 27 minutes to 5. You’re gonna be late!” and “It’s just gone 12 noon. Let’s create some music!”

Displaying Time, The Friendly Way28

Who doesn’t want their website to stand out and ooze personality? The library is a great tool to create an easy-going, friendly interaction with your users. If you are looking for alternative libraries to display or manage time, check out Moment.js29, xDate30 and Smart Time Ago31, as well! (sh)

7. Annotating Images Made Easy

Need a quick screenshot to show your colleague or client what exactly you are talking about, indicate misspelled words or just highlight an important part of a picture? Snapnote32 is a free and easy-to-use tool to annotate images that will help you take care of such issues.

Annotating Images Made Easy33

Simply upload the image by dragging and dropping, or by pasting it into the field. Then you can make the desired annotations with four tools to choose from: add arrows, text, draw boxes, add labels or even speech balloons. There are seven different colors to choose from to highlight. Once you’re done, upload the edited file and Snapnote will provide you with a link to share with your audience. It does’t get simpler than that, does it? (kv)

8. Give Your Machinery Exotic… Desktop Wallpapers!

Swedish designer and developer, Hampus Olsson, developed his first website at the age of eight. Since then, he hasn’t stopped experimenting, creating and inventing. He has worked with quite a few companies and loves the extraordinary and exotic, and apparently loves design as well as working with pixels.

Give Your Machinery Exotic... Desktop Wallpapers!34

But especially when it comes to pixels, he has found a true love in sharing them with everyone. On his blog, Hampus provides free downloads35, more specifically two of his carefully crafted designs as funky desktop wallpapers. This is a fantastic idea — have you considered doing so yourself? By providing your own designs as wallpapers, you could even produce prints, cards or t-shirts of them, and including links right next to the free downloads. If you do, please don’t forget to share it with us36! (kv)

9. Old Type On Old Campfire Marshmallows

Our world is full of “things”. There are things everywhere. Just think of all the stuff that’s stored in your homes. Like boxes, books, tools — or campfire marshmallows! And almost everything has type or lettering on it. If not on the item itself, then at least its packaging is labeled. It’s all something, and it’s made by someone and somewhere. We mostly think of it as “stuff”. But we could also think of it as “beauty”. If you want to see the beauty of things with labels, then have a look at Typehunting37.

Old Type On Old Campfire Marshmallows 38

Typehunting, curated by Jonathan Lawrence39, lets you look at the type and lettering on all kinds of artifacts. As you’ll notice, the booties in these images are pretty old — as old as the box of Nestlé’s sweet milk cocoa manufactured by Peter Cailler Kohler Swiss Chocolates Company. Google this name and you will find out that “Peter” stands for Daniel Peter40, the inventor of milk chocolate. So, besides being a great source for typographic inspiration, Typehunting could also be your key to trace the people and stories that are hidden behind “things”. (ea)

10. Streetmix: What Would Your Own Street Look Like?

Have you ever sat down and wondered what it would be like if you had the chance to improve your street and perhaps even redesign it from scratch? Streetmix41, a side project by Code for America42, helps you to do just that. You can design, remix and share your own personally designed street by starting off with a completely empty street or a copy of your last street, and including what and where you think your city needs, i.e. trams, bus lanes, traffic lanes, bicycle paths, or even wider sidewalks.

Streetmix: What Would Your Own Street Look Like?43

The idea is really innovative; the idea behind the project was to enable people to suggest ideas and improvements for the actual streets within their cities. The reality is that urban planners need to serve the needs of everyone that makes up a community: the young, the elderly, the differently abled, business people, pet owners, etc. If you’ve now started thinking about your own city street then go ahead and finally design your ideal street! (sh)

11. So Many Great Workshops, So Little Time

Sharing learning experiences and quality have and always will matter to us. If you’re on the same boat, we’d love to make your life a bit easier and organize a Smashing Workshops44 as close to you as possible. We sincerely encourage you to spread the word and get in touch with us to make this possible!

So Many Great Workshops, So Little Time45

Until then, we’re organizing various workshops in Berlin46 and Freiburg47. In case you missed the last newsletter, you can save 50€ on the next workshop of your choice — all you need to do is subscribe to the Events List48 to stay updated and find out where and when the next workshops take place. Who knows, there may be one in your neighborhood quite soon! (il)

The authors in this newsletter are: Esther Arends (ea), Cosima Mielke (cm), Shavaughn Haack (sh), Kristina Vogt (kv), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).


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

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

    Stanimir Genov

    August 23, 2013 5:27 pm

    You should subscribe to some newsletters.. most of your posts have already been shared two months ago on other websites..


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