Smashing Newsletter: Issue #44

• By Smashing Editorial
• October 11th, 2011
• Newsletters
• 0 Comments

This newsletter issue was sent out to 69,738 newsletter subscribers on October 11th 2011.

Editorial

Greetings! In case we haven’t met yet, I’m the Smashing Cat and I live in the footer of the SmashingMagazine. Well, most of the time I walk around the Smashing Magazine HQ and help the team with their work. So, they asked me to join in this time and write an introduction for today’s newsletter, and I’ll also be sure to show you some insights in the daily life of the team behind Smashing Magazine’s scenes every now and then. That’s why I’m very proud to present to you our first Smashing Magazine Meetup on the 27th Oktober in Freiburg! Come on over and meet me — and the rest of the team, too.

Now, let’s get started with today’s newsletter. Every two weeks our editors dig for the best ideas and tips that will be useful to Smashing Magazine’s readers. This time they found a yummy piece about tilt-shift CSS techniques, mobile compatibility charts and awesome HTLM5 white board magnets. But you should not miss out on learning a new program, e.g. how about Ruby this time? And last but not least, check out our typography special and our inspiring book recommendation.

Have fun and see you next time!
— The Smashing Cat *meow*

Table of Contents

01. Stripe: Easy Credit-Card Processing For Online Stores
02. CSS Tilt-Shift Technique and Animated Background Patterns
03. Mobile Compatibility Comparison Charts
04. Instances of Popular Typography
05. HTML5 Whiteboard Magnets
06. Learning to Program Can Be Easy (Kind Of)
07. Generating Secure Passwords With Common Words
08. A Curiosity a Day

1. Stripe: Easy Credit-Card Processing For Online Stores

A website owner has many options for accepting credit card payments. Most of those options have a verification process that is quite slow; some have APIs and interfaces that are more or less robust than others; and some solutions are much easier to use than others. Stripe is one of the easier ones. With Stripe, you can forget the tedious experience of the PayPal API and other mysterious programming environments.

To enable credit-card processing on your website, you no longer need a merchant account or gateway. Stripe handles everything, including the storage of card details, subscriptions, and direct payouts to your bank account. The service provides an API with wrappers in Ruby, PHP and Python, so you can get started right away. The pricing for the service is 2.9% per transaction, plus $0.30 for each successful charge (and it includes American Express), so you are charged only when you receive money. There are no set-up costs or monthly fees. Unfortunately, Stripe is currently available only in the US. (cc)

2. CSS Tilt-Shift Technique and Animated Background Patterns

CSS is powerful. Just when you think nothing else can be done with CSS, a creative front-end developer comes along and develops a striking new technique that shows the possibilities of the technology and pushes its limits.

Simon (“Simurai”) has been experimenting with various CSS properties for a while now, and his experiments are certainly worth checking out. In his CSS3 tilt-shift technique, he uses text-shadow and adds a bigger offsetY and blur-radius to the top and bottom edges, so that the text appears to have a lens blur that is typical of the tilt-shift effect. There is also some rotate, rotateX and skewX to make the text match the perspective of the background image. This is a great example of what can be achieved with text shadows and rotations when properly used. Also, last week Simon created animated CSS3 background patterns using Webkit keyframe animation and radial gradients and dozens of background-image properties. Have you experimented with CSS recently, too? Let us know on Twitter or Facebook!
(ld)

3. Mobile Compatibility Comparison Charts

It’s impossible for designers and developers to ignore mobile any longer. With a huge portion of the world’s population now accessing the Web partially or primarily through their smartphones, having a well-functioning, well-designed mobile website is a necessity, not a luxury. But just as the technology in desktop browsers gets various levels of support, not all mobile browsers have equal capabilities.

You can use two handy charts to figure out which technologies and frameworks will work on which mobile devices. First, there’s the MobileHTML5 comparison chart, which covers Safari on iOS, the Android browser, the BlackBerry browser, Internet Explorer for Windows Phone, Opera Mobile and Mini, Firefox for Android, the webOS browser and the Symbian browser; and it breaks down exactly which HTML5 features are supported on each.

And then there’s the Mobile Frameworks Comparison Chart, which shows compatibility across a range of mobile devices and includes information on the kinds of targets each works with, their licensing terms, the development languages, and the hardware controls they work with. Between the two charts, you will find all you need to know about which technology to use for each platform. Very useful! (cc)

4. Instances of Popular Typography

In the days of old, when photography was purely analog, you had to wait patiently until your film was processed to see the results of your shots. A bit later, Polaroid became the secret weapon of instant photography. After the boom of digital cameras, Polaroid became an art tool, as you can now see in the artwork featured in the Vernacular Typography Polaroids photoset on Flickr.

In this photo gallery, you will find over 130 images, each a composite of four photographs. Each image is a mixture of hand-made signs, local advertising and popular vintage typography. It’s interesting to see the variety of writing styles and the way that regular people used them. Vernacular art can be indeed fascinating. (tt)

5. HTML5 Whiteboard Magnets

There are a number of ways to produce wireframes or just to discuss the structure of a design or of code at an early stage of development. You could use a whiteboard, paper, wireframing kits… or you could combine them all. Cameron Moll has produced HTML5 Whiteboard Magnets which can be used on a whiteboard to show and discuss mark-up and to explain and communicate design decisions.

It’s very simple, too. Just buy magnetic sheets that are compatible with any inkjet printer, or print labels for magnets. Put them on your whiteboard with enough space for hands-on HTML5 instruction and for writing the actual mark-up. You can download Cameron’s AI files for the magnets, and add your own HTML5 (or CSS, JavaScript, etc.) elements if you wish. A very simple idea that could prevent misunderstanding and confusion. (vf)

6. Learning to Program Can Be Easy (Kind Of)

If you’ve always thought that learning a programming language would be hard and enormously time-consuming, you were right… at least until now. It can be easy after all! For example, take a crack at Ruby on TryRuby or JavaScript in Code Academy and you might actually have fun trying it out. You can save your progress and come back another day to try another lesson.

If you are looking for a broader learning environment, take a look at repl.it, an online platform for interactively exploring programming languages. It features 16 languages, categorized into “Classical,” “Practical,” “Esoteric” and “Web.” Start by typing an expression into the console on the right side of the screen and pressing “Enter.” Your expression will be evaluated in the selected language, and its result will be printed. You can also try the ready-to-run examples provided. Save your progress, or simply install the Web app and use it on the go.

Finally, PlayTerm is something for the brains of coding out there. If you asked a Unix guru whether they acquired their skill with the command-line interface (CLI) through traditional education, the answer would likely be a “No.” They would probably tell you that they learned by peeking over the shoulder of their neighbor as the person showed off their tricks of the trade. PlayTerm lets you record your CLI sessions, upload them, and share them with hundreds of students, thus letting them peek over your own shoulder. (sp)

7. Generating Secure Passwords With Common Words

Creating usable and secure passwords can be quite difficult. However, the password generator by Jeff Preshing uses only common English words, unlike other generators online. The button on the website generates a random phrase consisting of four common English words. The phrases are hard to guess but quite easy to remember.

The project takes its cue from the famous xkcd comic strip that suggests that a machine would need 550 years and 1000 guesses per second to crack the password. That’s easier than remembering a combination of utterly random letters, isn’t it? (il)

8. A Curiosity a Day

Did you know that Apollo 11 had only 20 seconds worth of fuel left when it landed? Or that the tone for an incoming message on a Nokia phone is “SMS” in morse code? Or that the first smiley ever written was in 1982? Or that Pablo Picasso was accused of stealing the Mona Lisa? If you are eager to learn more curiosities like these, you should check the website Learn Something Every Day.

Two years ago, the designers of Young studio started gathering information about various areas of interest, such as popular personalities, the natural sciences and worldwide curiosities. Every day until August 2011, they published a new illustration, presented as a humorous comic with a vibrant colorful illustration. You can check out most of them online, but they are also released as special paperbacks. A simple idea, yet so many surprising facts. (tt)

The authors in this newsletter are: Stephan Poppe (sp), Cameron Chapman (cc), Talita Telma (tt), Luca Degasperi (ld), Vitaly Friedman (vf), Iris Ljesnjanin (il), Lisa Lang (ll).