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

This newsletter issue was sent out to 48,551 newsletter subscribers on January 6th 2011.

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. Prey Tracking Tool: They Can Run, But They Can’t Hide!2
  2. IconSweets2 Icon Set: 1,000+ Free Icons3
  3. In-Browser Code Editing4
  4. Type Around the World5
  5. Wireframe Anything6
  6. Great Ideas Coming From ideeeas7
  7. A Working Library8
  8. A Browser Game With a Difference: Defender of the Favicon9

1. Prey Tracking Tool: They Can Run, But They Can’t Hide!

Prey10 is small but efficient open-source software that lets you track your laptop or phone in case it gets stolen or lost. Once the Prey agent is installed, it waits to be activated over the Web or via SMS, sending back information on its exact position.

Prey Project’s open-source tracking software11

Prey accurately triangulates your computer’s position (telling you in which café it is being used), lets you remotely take pictures of the thief using the computer’s integrated camera and even permits a complete lockdown of the system. Follow the user’s path through the ’net and you might just get lucky and identify him by taking a screenshot of his Facebook profile or email inbox. The program is practically undetectable and doesn’t even leave a memory footprint. A perfect little piece of software that lets you track up to three computers and phones for free. (sp)

2. IconSweets2 Icon Set: 1,000+ Free Icons

IconSweets212 is a large free icon set containing a 1,000+ icons, all in vector-shaped Photoshop format. The icons can be a great fit for iPhone, iPad and Android apps and Web projects.


The icons are sorted in 23 categories, including clothing, mobile devices, e-commerce, labels, communication, CMS, users, location and more. You may use these icons for both commercial and non-commercial projects and customize them any way you like. Unfortunately, PNGs are not available. (vf)

3. In-Browser Code Editing

A browser interface isn’t always the best place to edit code. It lacks conveniences such as color-coding and indentation. But sometimes a browser is the best option we have.

In-Browser code editing14

CodeMirror15 works with a variety of programming languages to offer a better code-editing interface. Parsers are currently available for JavaScript, XML/HTML, CSS, Python, HTML + PHP, SQL, C# and much more. CodeMirror is supported in a wide variety of browsers, including IE6+, Firefox 1.5+, Chrome and Safari 3+. (cc)

4. Type Around the World

Fonts in Use16 focuses on the essence of communication: type and lettering, as used in everyday life, wherever they appear. Browse its catalogue for real-world typography samples and innovations in branding, advertising, signage and publishing.

Type around the world17

The regularly updated collection of trends and case studies is commented on by typography experts and gurus from around the world. The sharp, interesting comments and discussions will keep you engaged, all backed up by real examples. And there is more to come: the authors of the blog promise to constantly add to their archive of typographic design, indexing according to typeface, industry and medium. (sp)

5. Wireframe Anything

Wirify18 is a bookmarklet that lets you turn any Web page into a wireframe with a single click. Why would anyone want to do that, you ask? The bookmarklet helps you get rid of all distractions by blocking out copy, images and ads, letting you take a closer look at the website’s building blocks. Many design concepts become apparent only when looked at from a different angle.

Wireframe Anything19

Visual hierarchy, white space, symmetry and grid systems are easier to identify and layouts reveal their strengths and weaknesses when reduced to simple frames. Wirify is a useful tool that shows the balance of a website that the eye perceives only unconsciously. (sp)

6. Great Ideas Coming From ideeeas

You have an idea and would like to share it with the world. How do you go about that? Well, just like that: head on over to ideeeas20. This website collects brainwaves from people who have brilliant, fancy ideas on any topic. There are posts with popular or useful social ideas that could make the world a little better.

Great Ideas21

Think about your source of inspiration. Which idea could be worth turning into reality. Got one? Then you are welcome to share it with the ideeeas community. Who knows? Maybe some of these clever ideas will at some point be implemented with energy, perseverance and conviction! (cs)

7. A Working Library

In general, we are influenced by the books we read. This makes every reader’s perceptions and thoughts unique, and so no book can or should be considered in isolation. The website A Working Library22 aims to explore the ways we read — without being overtly conscious of the cover design. A great book cover definitely makes for a graceful entrance, but then it disappears as you start reading the book.


The creator of the website, Mandy Brown, inspires us with a blog all about reading and writing; she is a pro who works on everything from book design to Web design to writing about design. As Mandy says, “The phrase ‘a working library’ refers to a collection of texts on a given subject, for the purpose of an academic or professional work. So, people speak of a working library on Proust, for example, or on psychotherapy. This working library differs in that the subject is reading itself: the library exists for its own sake and no other.” (ik)

8. A Browser Game With a Difference: Defender of the Favicon

Defender of the Favicon is one of those odd experiments that people come up with to help us appreciate the progress of modern browsers. In this case, JavaScript, canvas and data URIs.

Browser Game

The model used here is the 1980 arcade video game “Defender.” Who doesn’t know it? A spaceship skips over a planetary landscape shooting aliens: exactly what happens here, but as a favicon. Yes, exactly: whereas a 16×16-pixel image in the address bar of the browser usually represents a website, here it is a gaming area. Alternatively, you can play in the browser window at 32×32 pixels — and maybe see a little more.

Browser Game

The developers say, “Defender of the Favicon was done in three nights, from start to finish. Each frame of the game is generated on the fly in JavaScript into a 16×16 canvas element, then converted to a 32-bit PNG image and used in place of the favicon.” (sl)

The authors are: Vitaly Friedman (vf), Sven Lennartz (sl), Iris Kopic (ik), Stephan Poppe (sp), Christina Sitte (cs), 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
  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