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

This newsletter issue was sent out to 36,720 newsletter subscribers on August 3rd 2010.

Every other week our editorial team works on short, entertaining and (of course) relevant articles for the upcoming issue. The newsletter is sent out on Tuesdays, and contains unique tips and tricks for designers and Web developers, written by us exclusively for our email subscribers. You can subscribe to the e-mail newsletter1, of course.

Table of Contents

  1. Safer Surfing With Firefox and NoScript 22
  2. 300&65 Ampersands3
  3. Quplo: Painless Interactive Prototyping4
  4. Email Address Shortener5
  5. Stop Worrying About Cross-Time-Zone Scheduling6
  6. City Logo Design Inspiration?7
  7. Create Mock-Ups Quickly With Image Placeholders8

1. Safer Surfing With Firefox and NoScript 2

This free browser extension has existed for years, but the recently released version 2 affords us the opportunity to report about it here for the first time. NoScript9 is important. The add-on contributes to greater security on the Internet. How does it do that? By disabling JavaScript. Okay, it’s a bit more complicated than that. Users themselves determine which websites to approve. And permission can be made global, temporary (i.e. per visit) or for specific areas of a website. It connects to Flash and other browser plug-ins.

Safer Surfing10

This is important because many modern websites are actually mash-ups: they get their data from different servers of different origins. For example, Smashing Magazine gets its pictures and articles from many different computers, not to mention its ads, font-face information (derived from Google), YouTube videos, Facebook’s Like button and the analysis from GetClicky. Almost everything requires JavaScript to work properly. And herein lies the danger. Cross-site scripting (XSS), click-jacking and other threats are not abstract dangers but very real. The risks have increased in recent years. And the people responsible are no longer script kiddies, but rather burgeoning mafia organizations and organized criminals.

NoScript 2 gives control back to the user. You get fine-grained control over what to allow and what to ban. But there is a disadvantage: the add-on sucks in the beginning, when nothing works as usual. It takes a while to set everything as you like it and whitelist whatever needs to be whitelisted. From now on, websites will not work as expected… which is exactly the point. (sl)

See also: Dude, you browse with JavaScript on?11

2. 300&65 Ampersands

Originally a ligature of the letters “et” (Latin for “and”), the ampersand is now a full-fledged design tool. With representations that range from traditional to very different from the original form, this symbol offers a lot of creative possibilities. Although there are many ways to represent it, the ampersand is always easy to recognize. Its unique shape and ability to vary in appearance explain its popularity.


300&65 Ampersands13 is another 365 project that, as you probably guessed, presents one new ampersand a day. The gallery explores an incredible collection of fonts that highlight the beauty of this character. Each day, you will discover a style that you probably haven’t seen before. Links to sources allow you to quickly download these fonts for your own projects. With the endless designs out there, you will never see quite the same ampersand twice. (jb)

3. Quplo: Painless Interactive Prototyping

Creating interactive prototypes for clients (and even for our own projects) can be a pain, especially if programming isn’t your strong point. But sometimes we need an interactive prototype, rather than just a wireframe, and creating a working mock-up can be a waste of time if the client then decides to change half the things you’ve coded.

Interactive Prototyping14

Quplo15 lets you create interactive prototypes for your clients with just HTML, CSS, JavaScript and its own mark-up language (Flow). It lets you enter real data and content, rather than lorem ipsum, and it lets you export your prototype as an XML file to make it easier to program the final website. The prototype is available online for your client to see. Quplo even tracks your version history and backs up everything automatically. (cc)

4. Email Address Shortener

If you share your email address on a forum or other public website, spammers can easily find it with bots that scour the Web. Sure, you could write your email address like this: john (dot) doe (at) company (dot) com, but that’s a pain, and it doesn’t look very nice. And it’s only a matter of time before bots can easily translate addresses written that way.

Email Adress Shortener16

Scr.im17 lets you use a shortened URL to give out your email address safely and securely in forums. Just enter your email address on, and it gives you a link to a page with your email address, with security to prevent bots from viewing it. (cc)

5. Stop Worrying About Cross-Time-Zone Scheduling

Setting up a meeting or webinar across time zones can be a pain. You have to either specify a central zone for the time of the meeting (forcing everyone to look up the difference between that time zone and their own), or figure out the time based on something like Greenwich Mean Time and then hope everyone knows how to calculate the time of the meeting relative to that. It’s a pain for everyone and can make some people miss the meeting.

Time Zone Scheduling18

Permatime.com19 fixes all that. Just enter the time to hold your meeting or event, and creates a link for you. Send the link to participants (or post it online), and when they click it, they’ll get the time in their own zone. (cc)

6. City Logo Design Inspiration

Everyone knows the famous “I Love New York” logo design. With its simplicity and memorability, it has become the gold standard for city tourism logos. In recent decades, various agencies have created logos that successfully connect with a city’s local population and tourists, taking the art of city marketing to another level. However, while a few become famous beyond their own borders, the majority of these logos don’t travel very far.

City logo design20

Stadtlogo Design21 (“city logo” in German) is a website that inventories unknown yet beautiful city logos. About 30 countries and a few cities in each are covered, offering plenty of inspiration. Because the descriptions are written in the local language, you might not always understand what is being promoted. But this ability to communicate a message without words is probably what makes these logos effective. (jb)

7. Create Mock-Ups Quickly With Image Placeholders

You’ve created a simple and quick mock-up for a new website; the menu works, the column floats perfectly; the content area has the usual lorem ipsum… all you lack now are images. Why not use image placeholders22, like you do with the text, courtesy of


For a quick and dirty solution, just add the image size to’s URL23, copy and paste it as source to an image tag, and you’re done. To make it a bit more sophisticated, you can add text and colors for the background and text. You can modify, copy and paste a sample image tag to your needs. (mm)

The authors are: Sven Lennartz (sl), Jessica Bordeau (jb), Cameron Chapman (cc), Manuela Müller (mm).


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

↑ 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