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

This newsletter issue was sent out to 28,207 newsletter subscribers on May 11th 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. Safe and Sexy: Block Spam Bots With Animal CAPTCHA2
  2. Testing Typography With Typograph3
  3. CSS3 Spotlight4
  4. Edit Documents Simultaneously With Other Users5
  5. Video: No Crashy Flash Required6
  6. Quick Tip: Wake-Up Call7

1. Safe and Sexy: Block Spam Bots With Animal CAPTCHA

Making online forms safe from spam bot abuse can lead to many problems. If you make them too safe, by using cryptic CAPTCHAs that are illegible not only to machines but to humans (with or without glasses), you could reduce the number of orders or contacts through your website more than you intended. Also, current CAPTCHAs are not exactly sexy. So, how about a cute cat or big bear instead of a cryptic text message? How about Animal CAPTCHA? Instead of deciphering blurry letters, users have to identify and click on kittens (see the demo).

Safe and Sexy: Block Spam Bots With Animal CAPTCHA

Animal CAPTCHA is based on AJAX and PHP. On a grid of nine random images of animals is a varying number of cats. PHP alters the images’ properties when outputting them, so a simple binary or pixel-by-pixel comparison of the images will not break the CAPTCHA. The CAPTCHA uses either ImageMagick or GD libraries, depending on which is available. The entire package, as well as the 111 royalty-free pictures, are hosted on the Animal CAPTCHA repository on Google Code8. The script is released under the BSD licence, meaning it can be used without limitations for both non-profit and commercial projects, free of charge. (mm)

2. Testing Typography With Typograph

Typograph9 is a useful tool for testing typographic scale and rhythm. It lets you set factors such as the typographic scale (traditional, 3:5 Fibonacci, Le Corbusier, etc.), the font size in percentage, line height, the layout, padding and the line height for h1, h2 and h3 headings. A lot of designers struggle to create elegant typography in their designs, and Typograph might be just the solution they’re waiting for. The predefined scales make it much easier to set the proper proportion between elements in a design’s typography.

Testing Typography With Typograph10

One of the best things about Typograph is its ease of use. Making adjustments to page width, line height, font size and so on is as easy as using a drop-down menu or dragging and dropping. You can even change the baseline font size using a drop-down menu. When you’ve adjusted everything just the way you want it, you can display the code and copy it to your own style sheet. Typograph could prove an invaluable tool, especially for those just starting to explore vertical rhythm and scale. (cc)

3. CSS3 Spotlight

With all of the new CSS3 features, a huge number of possibilities are opening up. Things that seemed impossible to implement without Flash can now be done with basic CSS3 styling. The trick we’ll look at here is nothing extravagant. On the contrary, it is light, simple, yet effective.

CSS3 Spotlight

CSS3 Spotlight creates a stage-show atmosphere in no time. It uses gradients to generate the spotlight and a Web font transformed with CSS3. The transparency is accomplished with RGBa, while WebKit’s SVG pointer-events property allows users to click within the spotlight. Finally, a bit of JavaScript is added to make it all nicer. The effect works in Chrome, Safari and Firefox. (jb)

4. Edit Documents Simultaneously With Other Users

Working collaboratively on text documents can be a pain. Emailing things around is archaic. A lot of solutions permit only one user to edit a document at a time. That’s fine if you have only a couple of editors, but with more than a handful, it becomes an issue. And a lot of the online options that do allow simultaneous editing aren’t that user-friendly or don’t update in real time.

Edit Documents Simultaneously With Other Users11

Enter TitanPad12. TitanPad allows you to edit documents simultaneously with other users, highlighting each user’s edits in a different color (conveniently marked in the sidebar). It’s free for public and private spaces (although a private space requires that you install the CACert SSL Root). Editing is done in true real time, so no more waiting to see what someone else has done. There’s built-in chat, too, letting you converse with other editors while in the document. All in all, it’s a great solution for anyone who works collaboratively on text documents, whether in the same office or on the other side of the world. (cc)

5. Video: No Crashy Flash Required

It’s cool, it’s fun and… it’s in HTML! Evidently, Sean Christmann enjoys experimenting with the canvas and video tags in HTML5. He has come up with a technique to “blow up HTML5 video and map it into 3-D space13“.

Video: No Crashy Flash Required14

This technical refinement uses the Canvas.drawImage() API, which allows you to draw the contents of particular HTML elements onto a canvas. It’s also what manipulates or processes video frames at runtime. The technique uses HTML5 video (the canvas element) and JavaScript to blow up an HTML5 video into tiny pieces. To blow up part of a video, you need to click on a spot in the video frame. It’s tricky, because the video will continue to play inside these pieces. The pieces return to their original places after a short time. Have fun figuring out this neat feature. (cs)

6. Quick Tip: Wake-Up Call

It’s a familiar sight: Web designers, programmers, copywriters, SEOs working too much and falling asleep in front of the screen. There is relief: pills, coffee, Coke and energy drinks are generally helpful, but they’re limited in effect. Special cases need something stronger: an incessant alarm clock. Ideally, it should be integrated in the screen and be made in Switzerland (a must for clocks). The Kuku Klok15 is all of this.

Wake-Up Call16

Open the website, select the desired alarm time and set your favorite wake-up call. Keep the browser tab open. Happily, this online alarm clock works even if your Internet connection goes down. The available sounds are “Classic Clock,” “Electronic,” “Slayer Guitar,” “Military Trumpet” and “Cockerel.” Just don’t take it too seriously. (sl)

The authors in this newsletter are: Sven Lennartz (sl), Christina Sitte (cs), Cameron Chapman (cc), Jessica Bordeau (jb), 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
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16

↑ 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