Smashing Newsletter: Issue #47

• By The Smashing Editorial
• November 22nd, 2011
• The Smashing Newsletter
• 2 Comments

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 now. Thank you.

Editorial

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

01. Broadway: An H.264 Decoder In JavaScript
02. Format Dates And Times With Moment.js
03. Getting Sticky With HTML5
04. Organize Projects And Tasks With Trello
05. The Battle Of The Fonts
06. Meaningful Interface Transitions
07. The Future Of Interaction Design
08. Running Titles Of 8/16 Bit Games
09. Food Illustrations By Lana Porter

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?

Well, we can. Implementations of the PDF reader in JavaScript, as well as MP3 and MP2 formats can already be used. Just recently, Michael Bebenita released Broadway, 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.

Moment.js 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 Thing“, created by Daniel Puhe, provides us with evidence that almost everything is possible.

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 Trello, 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.

Trello 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 Project 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!”

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 win. 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 transitions created by Johannes Tonollo in your next UI design presentation and you’ll see how easy your life can get.

There are different categories in UI motion graphics 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 Victor 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?

A brief rant on the future of interaction design 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.

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 Scream 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 Simplifood.

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