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
01. Safe and Sexy: Block Spam Bots With Animal CAPTCHA2
02. Testing Typography With Typograph3
03. CSS3 Spotlight4
04. Edit Documents Simultaneously With Other Users5
05. Video: No Crashy Flash Required6
06. Quick Tip: Wake-Up Call7
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 CAPTCHA8? Instead of deciphering blurry letters, users have to identify and click on kittens (see the demo9).
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 Code11. 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)
Typograph12 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
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.
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)
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 Spotlight15 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
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.
Enter TitanPad17. 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)
It’s cool, it’s fun and… it’s in HTML! Evidently, Sean Christmann enjoys experimenting with the
video tags in HTML5. He has come up with a technique to “blow up HTML5 video and map it into 3-D space18“.
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
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 Klok20 is all of this.
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 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 #a1
- 3 #a2
- 4 #a3
- 5 #a4
- 6 #a5
- 7 #a6
- 8 http://written.backnetwork.net/article/30_animalcaptcha_the_cutest_system_against_spambots
- 9 http://mav.vipserv.org/AnimalCaptcha/
- 10 http://written.backnetwork.net/article/30_animalcaptcha_the_cutest_system_against_spambots
- 11 http://code.google.com/p/animalcaptcha/
- 12 http://lamb.cc/typograph/
- 13 http://lamb.cc/typograph/
- 14 http://svay.com/experiences/css3-spotlight/
- 15 http://svay.com/experiences/css3-spotlight/
- 16 http://titanpad.com/
- 17 http://titanpad.com/
- 18 http://www.craftymind.com/2010/04/20/blowing-up-html5-video-and-mapping-it-into-3d-space/
- 19 http://www.craftymind.com/2010/04/20/blowing-up-html5-video-and-mapping-it-into-3d-space/
- 20 http://kukuklok.com/
- 21 http://kukuklok.com/