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 newsletter as well, of course.
01. Barebones WordPress Development Framework
02. PayPal Fee Calculator: I Wonder What I’ll Be Left With…
03. ASCII Flow: Draw Boxes, Lines and Arrows In ASCII
04. Stop Wasting Time In Photoshop
05. A Detailed Overview Of Web Font Services
06. Placeholder Form Attribute jQuery Plug-In
07. Gridless: A Framework For Beautiful Typography
08. The Email Canary
09. Rome: Three Dreams Of Black
10. Smashing Cartoons: Mobile First
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. Bones 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)
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)
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 Flow 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)
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 Popuload 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)
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 Overview” 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)
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 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)
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)
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 canary: 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)
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)
Smashing Cartoons 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 authors in this newsletter are: Vitaly Friedman (vf), Andrew Rogerson (ar), Cameron Chapman (cc), Stephan Poppe (sp).
The Smashing Newsletter Team 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!
Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and
rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!
Opportunity: WellnessFX, a fast-growing health 2.0 company based in The Mission District in San Francisco, is looking for an engineer with skills in front-end…
YAGER is currently seeking a talented and experienced Game Systems Designer to join our pre-production team of yet unannounced title. Join us in shaping the direction…