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

This newsletter issue was sent out to 72,769 newsletter subscribers on November 22nd 2011. If you haven’t subscribed yet, feel free to subscribe to our email newsletter now1. Thank you.


Goddag Smashing Magazine family! I just came back from a visit in Denmark. SmashingMag fan Alex Rock invited me for a tour through Copenhagen and introduced me to my Danish family. I have to admit, this time it is taking a bit longer to write my hello to you. I’m still suffering a major hangover after the second SmashingMag MeetUp with the awesome crowd from the BeyondTellerand conference. You should really become a member of our MeetUp! We have something smashing planned for December: Paul Irish is going to join us in Stuttgart on the 21st of December!

Thus, I have some HTML5 and JavaScript goodies for you in this newsletter issue  —  amongst a font battle, 8/16 Bit Games and lovely food illustrations by Lana Porter. Before I go and jump on the next plan to Japan, don’t forget to check out our Thanksgiving eBook Bundle  —  50% off and only available for five days!

 —  Keep rocking! *meow*

Table of Contents

  1. Broadway: An H.264 Decoder In JavaScript2
  2. Format Dates And Times With Moment.js3
  3. Getting Sticky With HTML54
  4. Organize Projects And Tasks With Trello5
  5. The Battle Of The Fonts6
  6. Meaningful Interface Transitions7
  7. The Future Of Interaction Design8
  8. Running Titles Of 8/16 Bit Games9
  9. Food Illustrations By Lana Porter10

1. Broadway: An H.264 Decoder In JavaScript

We’ve all been there at least once. Switching between different applications or different modes within an application isn’t quite the most enjoyable experience on the Web. For example, why can’t we open a PDF document without using a browser plugin or an external application? Our experience with PDFs doesn’t feel native because it isn’t native, and it results in a poor experience  —  especially on mobile devices. Another example: why should users need to download a codec first before playing certain videos? Can’t we just have a Web which would require only HTML, CSS and JavaScript?

Broadway: An H.264 Decoder in JavaScript11

Well, we can. Implementations of the PDF reader in JavaScript12, as well as MP313 and MP214 formats can already be used. Just recently, Michael Bebenita released Broadway15, an H.264 decoder in JavaScript, running at 30fps. Basically, it’s a demo of Android’s open source C++ H.264 decoder compiled to JavaScript with Emscripten, and then optimized with Google Closure compiler. The decoder is not hardware accelerated in any way, and hence it has a huge performance hit on the CPU. Of course, by using HTML5 video you can encode your videos in three different codecs to cover all your bases, but theoretically you could just use the H.264 format and a JavaScript implementation to play it. Be sure to look at the demo of the decoder as well  —  but be prepared to have your CPU warming up! (ld)

2. Format Dates And Times With Moment.js

Properly formatted dates and times are often a common headache when it comes to websites where users have to provide either a specific date (time) or a date (time) range. Of course, your interface should be forgiving and accept all meaningful input that your users provide  —  independent of the format they choose to use. But what you need apart from that is a fine-tuned control and the ability to manipulate how they’re formatted.

Properly Format Dats and Times with Moment.js16

Moment.js17 makes it easy to do just that. It’s a lightweight JavaScript library which lets you format, parse and manipulate dates. You can add or subtract dates from one another, as well as parse things like Unix Timestamps. Display options include formatted dates, time from now, difference, time from another moment, native date, support for leap years, and much more! (cc)

3. Getting Sticky With HTML5

With the growing support of HTML5, more designers and developers have experimented ever since, creating useful but sometimes also not so useful techniques and demos. There are indeed no limits to creativity and there are definitely a good number of demos out there that will keep you busy for a while. For example, the “Sticky Thing18“, created by Daniel Puhe, provides us with evidence that almost everything is possible.

Sticky Thing with HTML519

This sticky “thing” can fly across whitespace and sticks to the borders of the browser’s viewport. You can adjust the stickiness, stiffness, size and gravity of it  —  and guess what else? It works offline as well as online, and runs both on iOS and Android. The experience is even more engaging on mobile devices with multi-touch sensitivity, gyroscope and which support HTML5 features. (af)

4. Organize Projects And Tasks With Trello

Keeping an eye on all projects happening at the same time in your company can be quite difficult and tiresome. A great project board to help you organize and follow your teams’ projects would be Trello2220, a collaboration tool that organizes your project(s) into boards and allows you to join them into lists as wished. You can easily add other members who are also working on the same project at one stage by dragging them into the list and follow all changes with the help of email updates and notifications.

Organize anything together with Trello21

Trello2220 also supports attachments such as images, videos, twitter previews and includes comments, checklists, a voting system, labels and members. A bonus this tool offers are the public boards: these enable your customers to preview the current roadmap to a particular project and even allow public commenting as well as voting for all team members to see. (af)

5. The Battle Of The Fonts

It is time for your favorite font to stand its ground. Have you heard of the Font-Bot Project23 yet? The idea is to build robots out of a type face, showcase them and hope others put together a potential opponent. Once there are two font-bots ready to compete against each other, only thing left would be to “let the battle begin!”

The Battle of the Fonts24

Participating is not hard, the rules are clear: all robots must be built of type alone (letters A to Z). You may reflect and rotate the letters. You may not distort the letterforms in any way. You may use as many font families as you wish. As soulless as it is, you may beg for votes on your social profiles. Any kind of smack talking/showmanship is welcome. Keep it civil. So, sit down and put your bot together. May the best bot win25. Let’s see if your font has what it takes to defend its corner. Fight! (sp)

6. Meaningful Interface Transitions

In the last couple of years, the possibilities in interaction design have become more sophisticated and the difficulty in explaining their process to your client still remains. Does this sound like your reality? Then try to include some of the meaningful transitions26 created by Johannes Tonollo in your next UI design presentation and you’ll see how easy your life can get.

Meaningful Interface Transitions27

There are different categories in UI motion graphics28 which include orientation, spatial extension, awakening controls, highlight, feedback and feedforward. In each category, you will find more details and possibilities which are shown in an simple yet concise way. One thing is for sure: your next brainstorming session with your client will surely have a whole new perspective. (tt)

7. The Future Of Interaction Design

We tend to use more and more devices on a daily basis and seem to be depending even more on technology. Our lives have changed since all we need to do these days is simply touch or slide over a screen. This is something that Bret Victor29 has noticed and has brought up a good question to us all: Do we really know what human needs are and will be for the future to come?

The Future of Interaction Design30

A brief rant on the future of interaction design31 is a movie that shows us what the future people exactly use to interact with their future technology. There is a clear factor which is neglected by all of us: our human capabilities. What we, each and every one of us, are capable of. So be sure to ask yourself once again, “Do I really want our future to become just an interaction with pictures under glass?” (af)

8. Running Titles Of 8/16 Bit Games

Do you remember good old days when games used to have a limited color range, pixelated graphics and very simple, basic animations? The ability of game designers from the 80s and early 90s to create engaging gaming experiences using the (quite modest) available technology at that time is remarkable to say the least.

Running Titles Of 8/16 Bit Games32

In particular, the running titles of 8/16 bit games often were masterpieces in their own right, with skillfully created 3D effects, impressive graphics and, of course, the titles of the games. Title Scream33 features dozens of intros from legendary games such as Prince of Persia, Sonic, Tetris, TheLegend of Zelda and Mortal Kombat. Now, this sure brings back memories! (af)

9. Food Illustrations By Lana Porter

You’ve most probably seen a great variety on food artworks, such as paintings, drawings and even photograps. If you’ve had fun exploring these possibilities of food art, you will certainly provide your eyes with a treat by checking out this postcard exhibition by Simplifood34.

Food Illustrations by Lana Porter35

With quite simple shapes and colors, Lana Porter manages to show the everyday items we usually have on our menus by adding little details which help differentiate a bagel with cream cheese from a slice of pineapple or a hot dog from a bratwurst. The perspectives and colors used are also very appetizing, so mind the warning: you might get very hungry by the end of the album! (tt)

The authors in this newsletter issue are: Stephan Poppe (sp), Cameron Chapman (cc), Talita Telma (tt), Luca Degasperi (ld), Lisa Lang (ll), Ana Flasker (af).


  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
  32. 32
  33. 33
  34. 34
  35. 35

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 1

    Is the link right for Meaningful Transitions because the site hasn’t loaded all day.

  2. 2

    The more I experience Java Script, the less I like it.

    MSFT blames the majority of its OS insecurities on js. (See Redmond Mag. recent edition). Link distributed via twitter hours ago… Doubtful the H.264 Decoder will be on my sites any time soon.


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