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

This newsletter issue was sent out to 59,840 newsletter subscribers on June 21st 2011.

Every other week our editorial team works on short, entertaining and (of course) relevant articles for the upcoming newsletter issue. The newsletter is sent out on every second Tuesday, and contains unique tips and tricks for Web designers and developers, written by us exclusively for our email subscribers. You can subscribe to the e-mail newsletter1 as well, of course.

Table of Contents

  1. Barebones WordPress Development Framework2
  2. PayPal Fee Calculator: I Wonder What I’ll Be Left With…3
  3. ASCII Flow: Draw Boxes, Lines and Arrows In ASCII4
  4. Stop Wasting Time In Photoshop5
  5. A Detailed Overview Of Web Font Services6
  6. Placeholder Form Attribute jQuery Plug-In7
  7. Gridless: A Framework For Beautiful Typography8
  8. The Email Canary9
  9. Rome: Three Dreams Of Black10
  10. Smashing Cartoons: Mobile First11

1. Barebones WordPress Development Framework

We’ve all been there: it’s always a frustrating process starting a WordPress Theme from scratch, adding plugins and code snippets here and there and ending up with a WordPress installation that looks like a “jumbled mess of borrowed code and band-aids”. However, you don’t have to reinvent the wheel every time. Bones12 is a lightweight, and efficient WordPress development framework. It includes two style sheets, the default and a customization sheet, which makes it easy to revert to the original. It also has five plug-in-like functions, including ones for related posts and page navigation.

Bare-Bones WP Development13

The theme is built on HTML5 Boilerplate, CSS3 and the 960 Grid system. It supports post types, post formats, and WordPress 3+ features. It’s expressly designed to be hacked and edited to suit your needs as a developer. In-depth documentation and tutorials are available, as is an extensive Q&A section for support. (cc)

2. PayPal Fee Calculator: I Wonder What I’ll Be Left With…

If you haven’t heard about it, it’s about time: PPCalc is what you need on days when you shoot money over the Web via PayPal. If your clients pay your invoices via PayPal or you are an active eBay’er or just a regular online shopper, you might want to know PayPal’s fees in advance before making a transaction. PPCalc shows you the exact amount you would have to charge a buyer if you wanted to sell your item for, say, $100, and not $100 minus the $3.20 PayPal fee, which would leave you with a net $96.80.

I wonder what will be left...

This PayPal fee calculator supports different PayPal rates, including the standard and merchant rates, as well as different countries and currencies. It even lets you calculate the 2.5% currency conversion fee due in some multi-currency transactions. The MassPay File option allows for up to 5000 simultaneous payments, charging the fee to the sender, not the recipient. PPCalc comes with a button generator for any possible call to action you might need on a commercial website. The online mobile version of PPCalc might also be helpful.

If you have been wondering why the money you receive via PayPal tends to vary, check PPCalc before accepting your next payment. Thanks to Ryan Olbe for his development efforts. (sp)

3. ASCII Flow: Draw Boxes, Lines and Arrows In ASCII

Remember the good ol’ days when you wrote documentation files in plain text files, adding ASCII lines to give your code some structure? Or perhaps you’ve always wanted to better organize your lengthy emails by using plain characters to draw lines, rectangles, arrows and even diagrams?

ASCII Flow: Draw Boxes, Lines and Arrows For Your Emails14

Well, ASCII Flow15 has something for genuine ASCII fans. This little tool lets you draw boxes, tables, lines and arrows using visual tools and then export them straight to plain text or HTML. You can easily add more rows and columns and even erase cells, and then copy the result to your document or email. Unfortunately, you can not “increase the font size” of your ASCII text yet. You may want to use a monospace font to display it, because ligatures and OpenType features could change the appearance of your ASCII artwork. (vf)

4. Stop Wasting Time In Photoshop

Waiting for Photoshop processes sometimes takes forever. Whether you’re working with particularly large files or you perform involved image processing operations, it’s not uncommon to just sit there, staring at the loading bar, while Photoshop takes its sweet time to perform the action you want.

Stop Wasting Time In Photoshop16

This is when Popuload17 comes in handy. Whenever a Photoshop loading bar comes up, Popuload loads your RSS feeds right there in the Photoshop window. This way, you’re not wasting time waiting for Photoshop processes to run, and are instead spending that time being entertained or catching up on the latest news. (cc)

5. A Detailed Overview Of Web Font Services

Many Web font hosting services are out there, and figuring out the differences between them is sometimes hard. But those differences can be important, especially when it comes to things like browser compatibility, embedding method and available features.

An Overview of Web Font Services18

Web Font Services: An Overview19” is a chart that compares the top Web font hosts side by side. It includes Google Fonts, Fontdeck, FontsLive,, Typekit, WebINK, Webtype, Just Another Foundry, Typonine, Typotheque, Kernest, FontServe and TypeFront. And it covers things such as browser compatibility, embedding method, hosting plans, availability of downloadable fonts, number of fonts included, and limitations, among other things. It’s a valuable resource when you’re trying to figure out which Web font host is right for your project. (cc)

6. Placeholder Form Attribute jQuery Plug-In

HTML5 is introducing many new useful elements that aren’t yet widely supported by browsers yet (especially older browsers). The placeholder form attribute (which allows you to include text in a form input field when the field is empty and inactive) is one such element, and many browsers just don’t support it yet.

Placeholder jQuery Plugin: Cross-Browser Support for the Pla20

Placeholder21 is a jQuery plug-in created by Dan Bentley and Harry Roberts that makes the placeholder attribute cross-browser compatible. With it, you can use the attribute now and have it display correctly, regardless of what browser your visitors are using. The plugin is released under the Apache 2 license. (cc)

7. Gridless: A Framework For Beautiful Typography

Frameworks can be useful, but they can also be bloated in some circumstances, especially when they come with heavy built-in grid systems. Sometimes you want the functionality of a framework without the structure of a grid.

A Framework for Beautiful Typography

Gridless is an HTML5 and CSS3 framework that simplifies the process of creating responsive, cross-browser-compatible websites with great typography. It uses media queries to serve a progressively-enhanced responsive layout, starting from mobile and building up to desktop sizes. It includes progressive enhancement features, CSS normalization, optimized print styles, safe CSS hacks and more — all without any kind of pre-defined grid system. Gridless is only a starting point, that should be edited to suit each project’s needs. (cc)

8. The Email Canary

Have you ever thought that someone might find out your email password and break into your online accounts? Especially if you have a Google account and use the variety of services that Google has to offer, you should be worried about all the private or corporate information that passes through it. Especially email account is a data bump of the very valuable and sensitive information about you. Just think of all kinds of information you have there, such as password reminders, purchase notifications and password reset messages.

The Email Canary22

Even if you pick a very strong password, you can never be sure that it won’t get in someone else’s hands, be it by your own mistake or the sloppiness of people around you. In his blog post, John Graham-Cumming introduces the idea of an email canary23: he suggests to create a tempting-looking email that sits in your inbox and waits for the hacker to be read. The information in the email is entirely fake and designed to tempt an attacker into clicking on it, which triggers a warning that gets sent to you.

This way you’ll at least know that your account was compromised and if you remain patient and feed the hacker with a wrong information, you might even find out who they are and where to find them. (ar)

9. Rome: Three Dreams Of Black

Three Dreams of Black24 is an experimental interactive film that explores the creative potential of WebGL. Chris Milk and some of his friends at Google came up with this impressive film. WebGL is a software library that extends the capability of the JavaScript programming language to allow it to generate interactive 3D graphics within any compatible web browser. It is a context of the HTML5 canvas element and enables hardware-accelerated 3D graphics in the Web browser without having to install a plug-in.

Rome: Three Dreams of Black25

And it gets even better. If you’re willing to invest a couple of minutes, you can add your own creation — or creature — to the project! Use the tool provided and give it a go. If your ideas are dream-worthy, they might be included in the next update of the film. WebGL is currently supported in Google Chrome and Mozilla Firefox 4 and in development releases of Safari and Opera. More support is on the way. (sp)

10. Smashing Cartoons: Mobile First

Smashing Cartoons26 is a regular section on Smashing Magazine. (Almost) every week we publish a new cartoon created by our illustrator Ricardo Gimenes. The cartoons are dedicated to Web design and development, offering a comic twist on everything happening around the Web. In this issue, Fleaty explores what the Mobile First approach actually means in reality.

Smashing Cartoons: Mobile First27

The authors in this newsletter are: Vitaly Friedman (vf), Andrew Rogerson (ar), Cameron Chapman (cc), Stephan Poppe (sp).


  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 #a9
  11. 11 #a10
  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

↑ 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

    Amazing, as i am newviw to Web development. I am always wondering about what will be next. This newsletter and articles help lot for learning new things, concepts, get awareness about what happening in Web development. Thank you for sharing such valuable information. Please keep posting.

  2. 2

    ihab shoully

    June 21, 2011 12:55 pm

    i hope that be for windows also :)


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