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

This newsletter issue was sent out to 139,246 newsletter subscribers on Tuesday, April 16th 2013. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.


You probably have been there at some point. You end up with dozens of open tabs in your browser, some work-related, others not so much — and usually distributed across a few browser windows, too. Yet suddenly something happens that profoundly changes the course of action of that day, and easily sucks you out of your creative flow. What happens? One of the numerous tabs starts playing music automatically — courtesy of the designer of the website.


Especially if you work with a quite distinctive (and loud) music playing in the background, this can be extremely annoying and disturbing. Yet if you have lots of tabs, you have to muddle through each of them and search for any indication that music is being played. Wouldn’t it be nice to have some sort of a detector (or blocker) for auto play? What if browsers integrated some sort of the which tab is playing audio3-feature, with an icon indicating audio displayed right next to the favicon in the tab (see the image above)? Wouldn’t it make a great UI feature? It would definitely make searching for the pundit much easier!

But since the feature isn’t available in most browsers yet, in the meantime you might be well served with the article How To Disable Annoying Autoplay in Chrome, Firefox and Safari4 which provides quick tips on how to disable auto play in all major browsers. Hopefully, this will help you keep unwanted interruptions away from your workflow.

Have a truly productive (and hopefully exciting) week!

— Vitaly

Table of Contents

  1. TimeJump: Deep Linking For Audio And Video5
  2. Coffee For Your Ears6
  3. Getting The UI Flow Out Of Your Brain7
  4. Your Weather Service In Your Browser8
  5. Exploring Undiscovered Young Talent9
  6. Turn Illustrator Graphics Into Code10
  7. Slide In… As You Scroll Down11
  8. Diving Into iOS Development — Workshop With Johannes Fahrenkrug12
  9. Free Artistic Wallpapers By Nathan Yoder13
  10. Take Me To A Sunny Sunday14

1. TimeJump: Deep Linking For Audio And Video

If your website features lots of audio fragments, videos or podcasts, you may have wished you could provide a simple link that would send your visitors directly to a specific part of the audio or video file rather than having to ask them to jump forward to a specific timeframe. There are some workarounds15 for major platforms, but what about a more universal solution?

TimeJump: Deep Linking For Audio And Video16

TimeJump17, by Chris Coyier and the creative minds from Paravel, adds deep linking capabilities to HTML5 audio and video podcasts. Essentially, the library reads out the time parameter in your URL and starts playing the file at the specified timeframe. The syntax is quite straightforward: e.g. Easy. Another little design problem solved even before you thought of considering it for your next project. (vf)

2. Coffee For Your Ears

Try to remember these two situations: In the first, you were in your office working on a complicated problem. You finished after a few hours, but you just knew you hadn’t done your best work. In the other situation, you were doing some work over the weekend, and you decided to get it all done in the morning while having a wake-up beverage at your favorite café. Despite all the distractions, you finished in record time.

Coffee For Your Ears18
Image credit: Derrick Collins19.

According to the folks at Coffivity20, the café has just the right amount of noise and movement to inspire creativity. So Justin Kausler, Nicole Horton and ACe Callwood set up a little website to help you out at work. It pipes café sounds into your headphones, which you can mix with your music. Try it out and prove them wrong. I couldn’t. (jc)

3. Getting The UI Flow Out Of Your Brain

If you’ve designed a website, app or software product, you’ve certainly spent some time tweaking the interactions the user will have with your product — the UI flow. UI flows are as important to good interfaces as individual screens are. But how do you communicate these flows? How do you visualize the interactions? You might use storyboards, flowcharts, or mindmapping software. Curious to try out a new technique? Then check out Ryan Singer’s shorthand for designing UI flows21.

Getting The UI Flow Out Of Your Brain22

Singer’s sketch demonstrates each state of the flow like a coin with two sides: what the user sees, and what they do. An arrow connects the user’s action to a new screen with another action. With some interesting examples, Ryan demonstrates how this shorthand can illustrate a lot of user behavior. Sure, most diagrams might end up in the garbage — as Ryan also notes. Yet a good sketch can help you to get the flow out of your brain and communicate your work properly along the way. (ea)

4. Your Weather Service In Your Browser

When you have nothing to talk about, talk about the weather. Forecast.io23 is a friendly online weather service that might save your next awkward small talk situation. Unlike other services, it’s pretty comprehensive but not cluttered. The map (with global and local views) shows rain animation for your location and all over the world. You can easily navigate to other locations by dragging the pin. Your Weather Service In Your Browser24

Furthermore, the service presents minute-by-minute forecasts for your exact location. Instead of simply giving an icon or a single word, the tool generates text summaries that consider usual and unusual behavior in your area. You can choose between Celsius and Fahrenheit. You can also use the time machine feature and view weather observations/predictions for the past and the future.

Forecast is powered by 16 data sources, which are aggregated together statistically to provide the most accurate forecast possible for a given location. It also provides a custom-developed API25 that is freely available for developers to use, e.g. to integrate weather in your own app or to help users make some UI flow decisions based on the current weather. (ml)

5. Exploring Undiscovered Young Talent

Isn’t it always exciting to work with passionate, creative minds who have lots of ideas and are not yet discouraged by the (sometimes) harsh reality of unfair deadlines and political decision-making? Undercoat26 celebrates the most beautiful, inspiring and innovative content produced by students. It specifically features the artwork of young newcomers to the industry who are coming out of universities, art schools and design schools — working their way towards a career in a creative field.

Exploring Undiscovered Young Talent27

The archive encompasses student work from designers all around the world, categorized by institute and also searchable. Most original designs are featured in a regular (quarterly) Overcoat Magazine, with large feature interviews with artists, discussing their design thinking and, of course, their work. A great source for inspiration and yet undiscovered talent. (vf)

6. Turn Illustrator Graphics Into Code

Turning your Illustrator graphics directly into code can simplify your coding work a lot. With Drawscript3028, Tom Krcha has released an extension for Illustrator that generates code from vector shapes in real time. Drawscript supports OBJ-C, C++, JavaScript, Processing, ActionScript 3, JSON and Raw Bezier Points — and as such it is great for user interfaces or creating vector assets for gaming.

Turn Illustrator Graphics Into Code29

Since it transforms your graphic into code the moment you draw it, Drawscript3028 might also come in handy when learning or even teaching creative coding. You can install the free extension via the Adobe Extension Manager. The project is currently available in its third beta version. Once the final version is released, it will be open-sourced. (cm)

7. Slide In… As You Scroll Down

Subtleties matter, and especially in design, a little attention to transitions in interfaces31 can go a long way, especially to introduce small kindness (as Aarron Walter puts it) into your UIs — little niceties that embrace and define your personality and make the interface just a tiny bit more pleasant to use. For example, if your website provides a list of items in an overview, or loads update on the fly, what about allowing new modules of content to softly slide up into place as the user swipes down?

Slide In... As You Scroll Down32

In the article Slide In (As You Scroll Down) Boxes33, Chris Coyier explains a simple technique for creating this small kindness using jQuery. Make sure to read the comments on the article as well: they feature other solutions and links to forks and extensions of the script. (vf)

8. Diving Into iOS Development — Workshop With Johannes Fahrenkrug

Before we launched a series of Smashing Workshops a couple of months ago, we approached the selection of workshop coaches very thoroughly, very much like we do it with our editorial work. We care about quality and we care about delivering value to our audience. That’s why we are honored to welcome Brad Frost, Andy Clarke and now also Johannes Fahrenkrug to our hometown Freiburg, Germany, to host a full-day workshop.

Diving Into iOS Development — Workshop With Johannes Fahrenkrug

Johannes has been developing on Apple’s platforms since 2007. He has co-authored the book “Objective-C Fundamentals” and actively contributes to the open-source community. Through lots of practical hands-on examples, Johannes will help you master the steep learning curve of the “cryptic” Objective-C programming language and make you feel right at home with the tools, the language, the frameworks and the concepts that you need for building iOS apps. The workshop will be held on May 21st 2013. The number of seats is limited, so make sure to grab your ticket now!

PS: We also would love to welcome you in our hometown for our upcoming Smashing Meetup on Responsive Design34 on April 29th, too — so if you happen to be in the city, let’s grab a beer or two! (vf)

9. Free Artistic Wallpapers By Nathan Yoder

Every artist and designer needs a personality — a unique signature that is prevalent in their work, that makes it recognizable and distinguishable from the crowd. Whenever you stumble upon Nathan Yoder’s work, you’ll notice his signature and his unique visual and typographic style written all over it.

Free Artistic Wallpapers By Nathan Yoder

In fact, Nathan provides a series of beautiful wallpapers in various resolutions for desktop and mobile. Each wallpaper is an artwork of its own, and they are definitely a nice accessory for your working environment. What about you releasing a set of nice freebies or goodies for your visitors? They would surely appreciate it. (vf)

10. Take Me To A Sunny Sunday

Your work week is half over, the weekend lies ahead of you, but you feel stuck in your city. The thought of staying at home is suffocating, and your heart is shouting out, “I want to get away!” Most often, we don’t. What stops us? It could be lack of money — but definitely not always. Maybe, quite often, it’s just comfort?

So, what’s uncomfortable about getting away? Arranging your getaway, for example. You start browsing the Web for flights and you see so many offers, but in the end you can’t seem to find what you’re looking for. You are frustrated and reject the idea.

Take Me To A Sunny Sunday

Don’t be disheartened. There comes hope for your much longed-for sunny getaway: Escape Flight, a clever one-stop travel agent that wants to help you escape without the hassle. The free service works with an algorithm that does the thinking for you. It considers cost, travel time, activities and the weather, and filters the results to give you only the best options: direct flights, Friday to Sunday, no more than three hours away. The service currently only lets people from London escape. Adding more cities is in the works, so let’s hope that yours will be added soon as well! Or perhaps that’s a nice idea to work on for your local community on a lazy weekend? (ea)

The authors in this newsletter are: Jan Constantin (jc), Esther Arends (ea), Melanie Lang (ml), Cosima Mielke (cm), Iris Lješnjanin (il), Vitaly Friedman (vf), Sven Lennartz (sl), Christiane Rosenberger (research), Elja Friedman (tools), Clarissa Peterson (proofreading).


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

↑ 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