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

This newsletter issue was sent out to 47,348 newsletter subscribers on December 8th 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. Where Would You Like to Work Today?2
  2. Edited Icon Set: Free Icons for Editors and Writers3
  3. Online Paper Weight Calculator4
  4. Simple Straightforward Typography Guidance5
  5. Mobile Wireframes Inspiration6
  6. JavaScript-Encrypted Email Addresses7
  7. Open With Photoshop Firefox Extension8
  8. jQuery + PingPong = jPong9

1. Where Would You Like to Work Today?

Plenty of people are no longer bound to an office. Instead, they enjoy the freedom of mobile working and a regular change of environment. Desks Near Me10 features places all over the world that nomads might like to work in, be they offices or cafés. The website provides detailed information, including hours of operation and reviews.

Where would you like to work11

Some places charge a small fee for use, and many throw in a few goodies like food, drink and access to equipment. So, get out of your home office, look up a desk near you, discover a new space and meet new people! (sp)

2. Edited Icon Set: Free Icons for Editors and Writers

The perfect icons can take a design from mediocre to awesome. Luckily, a ton of icon sets are out there to help make your design stand out. Edited is a new icon set from WinePress of Words specifically for editors and writers.

Icon set

Included in the set are an overflowing waste-paper bin, a style manual, a red pencil, a coffee cup, and a marked-up manuscript. The icons are free and would make a fantastic addition to a writer or editor’s website. (cc)

3. Online Paper Weight Calculator

Here’s a calculator you won’t waste time figuring out how to use. On Paper Weight Calculator12, with a click, you can calculate the weight of any paper product. Two systems are available: standard and metric. You can choose the weight and height of various paper sizes, from standard letters all the way to ISO A3 sheets. You can also use the advanced feature to convert pounds to GSM (grammage).

Paper weight calculator13

For those of you who would like to convert standard pounds (lbs) to metric grams per square meter GSM (g/m²), this is available as well. (ik)

4. Simple Straightforward Typography Guidance

The plethora of subtle rules of typography can be confusing for those who are new to design (and even seasoned veterans sometimes). Figuring out how to use all the different quotes and dashes, where symbols and characters go, how to set footnotes and a host of other rules is a chore. And finding all of the information you need in one place is often hard.

Typography Guide14

That’s where Matthew Butterick’s Typography for Lawyers15 comes in. It provides clear concise guidance on the proper use of various elements of typography. It addresses everything from using ellipses, hyphens and semi-colons to more advanced topics, like ligatures and accented characters. The resource is useful not only for lawyers but for anyone interested in improving their copy or studying typographic rules. You might also want to check out Golden Typographic Rules16 (PDF), a handy cheat sheet with common typographic rules. (cc) (vf)

5. Mobile Wireframes Inspiration

Wireframing is an integral part of any design project. But while we are quite experienced with designs for traditional websites and applications, mobile is a different medium that requires different techniques, approaches and solutions.

Moblie Wirerames

On MOObileFrames, Hannah Milan curates wireframes of websites and applications designed specifically for mobile devices. The resource features many examples that would help designers create better wireframes for their mobile projects or just study how other designers solve common design problems. (tb)

6. JavaScript-Encrypted Email Addresses

Putting your email address up online is a quick way to be bombarded with spam. But a Web form isn’t always the best way to put your contact information out there. Sometimes you just want people to be able to send you an email in their preferred format.

JavaScript Encryption

The Enkoder Form takes your email address and converts it into a self-evaluating JavaScript that makes it impossible for email-harvesting spiders to decipher it. Just enter your address, link text, link title text and optional subject, and it spits out the code for you. (cc)

Tidypub: Online Text Sharing

Online communication is all about the fast, concise exchange of information. Not everyone feels the need to maintain their own blog or website, and for many users Twitter provides a big enough platform most of the time. Sometimes, though, what you have to say won’t fit in 140 characters.

Online text sharing

Tidypub is a useful utility to publish and share longer text online. Simply copy your words into the box, click “Publish,” and you are provided with an easy-to-read page. Your text page has a short URL, making it convenient to share. Tidypub uses plain text, so it doesn’t retain any formatting, such as italics and headings, but it does preserve paragraph breaks, which is usually just enough. Tidypub is free to use and a handy way to share longer musings with friends, family and colleagues. (ks)

7. Open With Photoshop Firefox Extension

If you are looking for nifty time-savers, this little Firefox add-on17 is the perfect companion for any Web or graphic designer. Instead of saving images first, you can just open them directly in Photoshop via a single click. After installing the add-on, right-click in Firefox and you’ll see that the context menu gives you the option “Open with Photoshop.” If Photoshop is already running, it opens the image in a new window; otherwise, it launches the program.

Firefox Extension18

Note for Mac users: Photoshop takes a while longer to launch this way on OS X if it’s not already open. Ensuring that it is loaded prior to using the add-on is an easy fix for this bug. (sp)

8. jQuery + PingPong = jPong

Got a couple of minutes to spare? Challenge the computer and beat it at jPong: 3D Ping Pong19. This little game is a jQuery remake of classic table tennis. You can play the game or dig in the code for a closer look at how it was created.


Basically, Sidney te Grotenhuis, the creator of the game, combined jQuery with a collision-detection plug-in, a line-drawing plug-in and some custom scripting. The result is truly exciting. Don’t lose too much time playing, though! (sp).

The authors are: Vitaly Friedman (vf), Iris Kopic (ik), Thomas Burkert (tb), Stephan Poppe (sp), Cameron Chapman (cc), Katrin Svana (ks).


  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
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20

↑ 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