Menu Search
Jump to the content X

Smashing Newsletter: Issue #44


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


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 HQ1 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 Oktober2 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

  1. Stripe: Easy Credit-Card Processing For Online Stores3
  2. CSS Tilt-Shift Technique and Animated Background Patterns4
  3. Mobile Compatibility Comparison Charts5
  4. Instances of Popular Typography6
  5. HTML5 Whiteboard Magnets7
  6. Learning to Program Can Be Easy (Kind Of)8
  7. Generating Secure Passwords With Common Words9
  8. A Curiosity a Day10

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. Stripe11 is one of the easier ones. With Stripe, you can forget the tedious experience of the PayPal API and other mysterious programming environments.

Stripe: Easy Credit-Card Processing For Online Stores12

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.

CSS Tilt-Shift Technique and Animated Background Patterns13

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 technique14, 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 patterns15 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!

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.

Mobile Compatibility Comparison Charts16

You can use two handy charts to figure out which technologies and frameworks will work on which mobile devices. First, there’s the MobileHTML517 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 Chart18, 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 Polaroids19 photoset on Flickr.

Instances of Popular Typography20

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 Magnets21 which can be used on a whiteboard to show and discuss mark-up and to explain and communicate design decisions.

HTML5 Whiteboard Magnets22

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 magnets23, 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 TryRuby24 or JavaScript in Code Academy25 and you might actually have fun trying it out. You can save your progress and come back another day to try another lesson.

Learning Programming Can Be Easy (Kind Of)26

If you are looking for a broader learning environment, take a look at repl.it27, 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, PlayTerm28 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 generator29 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.

Generating Secure Passwords With Common Words30

The project takes its cue from the famous xkcd comic strip31 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 Day32.

A Curiosity a Day33

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).


  1. 1
  2. 2
  3. 3 #a1
  4. 4 #a2
  5. 5 #a3
  6. 6 #a4
  7. 7 #a5
  8. 8 #a6
  9. 9 #a7
  10. 10 #a8
  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
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33

↑ 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. 1

    If at all possible, when you acquire knowledge, can you thoughts upgrading your blog post with far more data?


Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that all fields are mandatory, comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top