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.

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.

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.

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?

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.

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.

“Web Font Services: An Overview19” is a chart that compares the top Web font hosts side by side. It includes Google Fonts, Fontdeck, FontsLive, Fonts.com, 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.

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.

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.

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.

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.

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!

Hrishikesh

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.

Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book →

Meet the new Sketch Handbook, our brand new Smashing book that will help you master all the tricky, advanced facets of Sketch. Filled with practical examples and tutorials in 12 chapters, the book will help you become more proficient in your work. Get the book.

Meet SmashingConf San Francisco 2017, featuring front-end ingredients, UX recipes and nothing but practical beats from the hidden corners of the web. Only practical, real-life techniques and recipes you can learn from. Get your ticket now!