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

This newsletter issue was sent out to 65,048 newsletter subscribers on August 16th 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. Art Of The Menu2
  2. HTML5 Canvas Vector Graphics Scripting Tool3
  3. Catapulty Bookmarklets: Easier Cross-Browser Testing4
  4. Get To The Point With Shortmail5
  5. Free JavaScript And jQuery Lessons6
  6. World Time Buddy: Simplified Coordinated Universal Time7
  7. Podcast Interviews With Creative Leaders8
  8. Proxino: JavaScript Optimization And Monitoring In One9
  9. Have You Ever: Organized A Conference?10
  10. An Unconventional Puzzle11

1. Art Of The Menu

The days of boring laminated restaurant menus are finally over. The good old UnderConsideration, a legendary website that chronicles the most curious, creative and notable projects around the world, has come up with a new category: “Art of the Menu12” which catalogues the underrated creativity of… menus.

Art OFF the Menu13

Pay the website a visit and discover how scanning a menu in a restaurant or bar does not have to be boring. Does your favorite bar or diner have a menu worth looking at? Submit it, and make it part of this inspiring collection, which covers various cuisines. Hopefully soon, the menus will cover many countries and continents, too; until they do, enjoy the creative outbursts of the field’s pioneers! (sp)

2. HTML5 Canvas Vector Graphics Scripting Tool

HTML5’s canvas opens up whole new opportunities for creating vector graphics right in the browser. You can work with the canvas directly, of course, but using a wrapper has added benefits. Paper.js14 is more than just a wrapper, though. It’s a full library with a lot of highly useful tools that canvas alone doesn’t provide.

HTML5 Canvas Vector Graphics Scripting Tool15

These tools include highly optimized and accurate mathematical calculations for bezier-related manipulations (such as bounding-box calculations) and a well-designed scene graph and DOM. Paper.js makes it easy to create paths and add segments, and it comes with handlers for mouse and keyboard interaction and assets such as symbols (which let you place multiple instances of an item in your project). Some useful Paper.js tutorials16 are available, too. The library is being developed by Jürg Lehni and Jonathan Puckey and is distributed under the permissive MIT license. (cc)

3. Catapulty Bookmarklets: Easier Cross-Browser Testing

If you do your cross-browser testing manually, then copying and pasting the same URL into every browser, one by one, can be really time-consuming. Catapulty17 is a set of bookmarklets that automates the process and makes it a whole lot easier for you.

Catapulty Bookmarklets: Easier Cross-Browser Testing18

Drag the pair of bookmarklets (“Throw” and “Hit”) into the bookmarks toolbar of each browser you test with. Then, all you have to do is go to the URL to be tested in one browser and click on “Throw.” Go to another browser and click on “Hit,” and the URL you threw will be loaded. Click “Hit” in each browser you want to test to load the page. This small utility can be very useful and time-saving if you have a lot of testing to do, or if you need to jump between browsers or computers very often. (cc)

4. Get To The Point With Shortmail

Email can overwhelm your inbox and kill your productivity. The burden is often that we use too many words to communicate our message. But there is a solution. Shortmail is a free email service that alleviates our daily time-wasting indulgence. Every message sent or received has a 500-character limit, which encourages concision. No attachments are allowed, and no folder management is provided. And the interface is clean and beautifully crafted. An automatic reply appears if your original message was too long, and you are prompted to edit.

Get to the Point with Shortmail

Shortmail messages can be public or private. If public, they’re more like tweets. In fact, signing up requires a Twitter account. If you don’t have an account, getting one takes about a minute and is free. Does Shortmail’s idea sound strange? Well, it seems that people are increasingly adhering to limited-length communication: Twitter, Facebook and SMS messaging demonstrate as much. What do you think? Could it work with email, too? (ar)

5. Free JavaScript And jQuery Lessons

Let’s face it: at least a fundamental knowledge of JavaScript and jQuery is becoming necessary for developers and many designers. But these technologies are not exactly simple to use. Learning a new programming language is no easy task.

Free JavaScript and jQuery Lessons19

That’s where .appendTo20 comes in. The website offers a number of JavaScript and jQuery lessons. It doesn’t even require you to sign up for an account. Just watch free screencasts (each around 10 minutes long), and build a solid foundation of JavaScript and jQuery knowledge. The resource currently has eight lessons, including “JavaScript 101,” “Selectors 101,” “DOM Manipulation 101” and “jQuery Methods 101” (as well as some more advanced lessons on JavaScript and jQuery). (cc)

6. World Time Buddy: Simplified Coordinated Universal Time

Companies with collaborators around the world, as well as people who live far away from their dear ones and people who simply have many friends abroad can now count on a new tool. World Time Buddy21 is a tool that helps you coordinate time zones. Choose a home zone, and add up to nine other places. The interface is easy to use and shows concise information: the days and times of the locations you have selected are conveniently listed in a column.

Simplified Coordinated Universal Time 22

To help you avoid scheduling a video conference at 3:00 am, the hours of the day are differentiated by color. Working hours are shown in light yellow, early morning and evening hours are in light blue, and nighttime hours are in dark blue. Once you’ve decided on a time by clicking on the relevant column, you can send it via Gmail, insert it in your Google calendar, copy it to your clipboard or share a Web page that lists the details. Another simple idea that works. (tt)

7. Podcast Interviews With Creative Leaders

So, you’d like to learn more about the creative process of designers and developers like yourself? Well, has Creatiplicity got something for you then. The website offers regular podcast interviews with leaders in creative industries, discussing the intersection of simplicity and the creative process.

Podcast Interviews with Creative Leaders

Hosted by Chris Bowler and Sean Blanc, the podcast so far features episodes with Cameron Moll, Phil Coffman, Sean Sperte, Rogie King, Christian Ross, Noah Stokes and Mandy Brown. Each episode comes with useful notes covering the websites that were discussed and that relate to the interviewee. You can listen to each episode on the website, download it to your device, or subscribe to the podcast on iTunes. So far, nine episodes are available. The website could be just the cure for your creative workflow! (cc)

8. Proxino: JavaScript Optimization And Monitoring In One

Developing, testing and debugging JavaScript code doesn’t have to be a nightmare. Proxino23 is a JavaScript optimization and monitoring app that offers developers a quite nifty feature. It lets you catch exceptions as they occur, with bug reports via email, saving you time and saving visitors from potential headaches. It also shows you the function where the exception occurred to make it easier to debug, even if the script was originally minified.

Proxino: JavaScript Optimization and Monitoring in One24

Proxino is cross-browser compatible, and it offers a dashboard where you can monitor your history, white-list exceptions and organize them, all in real time. The tool also minifies and caches your JavaScript and CoffeeScript files so that they can be served more quickly to your visitors. The service uses lightning-fast proxy servers to speed up your website, but local fallbacks are always available, too. Thorough documentation is available on the website. (cc)

9. Have You Ever: Organized A Conference?

You have probably been to a couple of conferences. But have you ever wondered what it takes to get such events up and running? Are you planning to hold a conference yourself, or are you involved in organizing one? Well, now you have the Conference Organizer’s Handbook25, put together by Peter-Paul Koch, who was the organizer behind the Mobilism and Fronteers conferences.

Have You Ever: Organized a Conference?26

The handbook assumes you are aiming for a small-scale, low-budget event, organized by volunteers. If you can handle the basics, then you will be well equipped to go big and scale up in future conferences. Start by identifying your concept, and then decide on the scope, language, dates, sponsors, target audience and the like. Ticket pricing, budgeting and marketing are as important as the choice of venue and the infrastructure (e.g. Wi-Fi availability).

The content of a conference succeeds or fails on the strength its speakers, itinerary and workshops. Caring for speakers and attendees prior to and during the conference takes a lot of effort, while the aftermath is probably one of the easiest parts to manage. Make your first event a success by taking a minute to check out what it really means to organize a conference! The handbook is available in HTML as well as in ePUB and Mobipocket formats. (sp)

10. An Unconventional Puzzle

Show us what’s in your bag and we’ll tell you who you are. That is the motto of Jason Travis’s photographic project Persona27. The home page shows a mosaic of people and their personal effects. Click on a segment to get a closer look. Each picture consists of two parts. The upper half is a portrait of a person, standing against a background that matches their style.

An Unconventional Puzzle28

The lower half of the image shows the person’s belongings, sitting on a surface that matches the objects themselves. Although we all know how diverse the people of the world are, the variety of colors, faces and styles presented by Travis is still surprising and beautiful. (tt)

The authors in this newsletter are: Stephan Poppe (sp), Talita Telma (tt), Andrew Rogerson (ar), Cameron Chapman (cc).


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

↑ 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

    Bambi Corro III

    August 16, 2011 6:10 pm

    I love the idea behind An Unconventional Puzzle! It’s like those room raiders in some tv shows but this one’s brief and static! cool!

  2. 2

    This weeks issue comes in very handy. I’m about to start with javascript and the jQuery lib after a couple of years not having done anything on the web. That’s why appendTo will be my site of choice the next week.

    Also, the paperjs lib looks promising. Nice to see what you can achieve with the HTML5 canvas and only a couple of simple and easy to understand javascript lines. They should keep up the good work.


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