Smashing Newsletter: Issue #42

• By Smashing Newsletter Team
• September 13th, 2011
• The Smashing Newsletter
• 1 Comment

This newsletter issue was sent out to 67,498 newsletter subscribers on September 13th 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.

Table of Contents

01. CSS Terminal: Live CSS Editing
02. TileMill: A Map Design Platform
03. The Future of eBooks With EPUB3
04. Make Images Look Retro: VintageJS
05. Easier Number and Currency Formatting
06. Creating Buzz With Launch Effect
07. Responsive Overlay Grid for In-Browser Development
08. Typing With Style Requires Inspiration
09. Trip of a Lifetime

1. CSS Terminal: Live CSS Editing

On-the-fly CSS editing can come in handy when you’re developing a website; when you’re debugging, it can be invaluable; and it can be a huge help when creating prototypes, too. But your options are somewhat limited. Many designers turn to Firebug or the Web Developer Toolbar to edit their CSS on the fly, but those interfaces are not the easiest to use if you have to do a lot of editing (also, accidentally deleting what you’ve done is a little too easy if you’re making a lot of changes).

Enter CSS Terminal. With this simple little bookmarklet, you can add or change styles on a live website right in your browser. Installing it is easy: just drag it to your bookmarks toolbar. The window is resizable, so you can make it as large or small as you need to when editing. You might also want to look at CSS-101’s prototyping snippet, which overlays a grid or mock-up over the page that you’re styling so that you can edit the content directly in the browser. (cc)

2. TileMill: A Map Design Platform

The guys over at MapBox have come up with something that will save many of us the hassle of making maps look good. They’ve created TileMill, a modern map design platform that enables designers to easily create map designs using custom data. The tool is built on the open-source map-rendering library Mapnik and covers a variety of maps, from globe to street level.

Selecting exactly what TileMill should display is easy. Styles, markers, heat maps, you name it: TileMill will render them accordingly. The instant preview allows you to target specific areas and styles using styles.mss and labels.mss, which is the intuitive Carto language (similar to CSS). You can export your maps to PNG, PDF and MBTiles formats. The tool can be used on Mac OS X, Linux and Windows (using VirtualBox). How much more useful can it get? (sp)

3. The Future of eBooks With EPUB3

Recently, the International Digital Publishing Forum published the proposed specification for the next version of ePUB for final review. The new ePUB 3 is supposed to increase the format’s capabilities in order to better support a wider range of publication requirements, including complex layouts, rich media and interactivity, and global typography features. The expectation is that ePUB 3 will be used for a broad range of content, including books, magazines and educational, professional and scientific publications.

What will it look like? Walrus Studio has prepared a video of its upcoming book in ePUB 3, which demonstrates the capabilities of the new standard, including advanced CSS (columns, titles, etc.), embedded fonts, advanced maps, integrated pop-ups, hidden text, and interactivity based on CSS, HTML5 and JavaScript. The possibilites are endless, and seeing how the standard will be used in the next generation of eBooks will be very exciting. It’s just the right time to start learning about ePUB 3 and thinking of various ways to use it in your future digital publications! (tb)

4. Make Images Look Retro: VintageJS

Remember what the photos that you took with your first camera looked like? Dark with blurry edges, they gradually faded to yellow, and the colors lost their saturation as the years passed? Well, now you can make the pictures of your last holiday look like you took them years ago.

vintageJS is a free online tool that gives your photos an authentic retro look, with easy-to-apply functions, such as darkening edges and lightening the center, curves adjustment, desaturation, adding blur on edges and screenlayer. You can make the image public or download it to your desktop. This might save you the time of booting up Photoshop and applying advanced filters to your photos! (ar)

5. Easier Number and Currency Formatting

Proper, consistent formatting of numbers and currency is a tiny detail that makes a difference in design. But you can’t always count on those who update the content to adhere to the preferred style. Some will use numbers with commas, while others will leave them out; some will use the proper currency symbols, and some will not; and some will add more than two decimal places. You end up with a mess that someone has to go in and manually fix.

Not so if you use Accounting.js. This simple, tiny JavaScript library will solve your currency and numbers-related formatting hassles, and it even includes optional Excel-style column rendering to line up symbols and decimals. It will make all of your numbers and currencies look much more uniform and professional than they would if left to many content creators. (cc)

6. Creating Buzz With Launch Effect

It just happens sometimes: suddenly, you get a vision for a new product, service or store. You’ll have to hash out the details of implementation, but the main idea is there, and you know exactly what to do. So, what’s the first step? You could start by registering the domain and putting a pre-launch page online. As a matter of fact, the WordPress theme Launch Effect is freely available for this very purpose. The theme enables you to tease your audience with your idea while building up a great number of promoters of your product.

The one-page theme lets visitors sign up using their email. Upon signing up, the page generates a special URL for them to share with their friends, so that you can track your most active promoters and reward them for spreading the word. What more do you need from a pre-launch page? This is a good tool to bookmark for your next creative breakthrough or start-up idea. (tt)

7. Responsive Overlay Grid for In-Browser Development

Creating grid-based designs in Photoshop works great, but once you’re in a live browser environment, you need a new set of tools if you’re going to continue strictly adhering to the grid. A lot of the tools out there work great if you’re designing fixed layouts, but what about flexible responsive grids?

The Heads-Up Grid is a recently released grid overlay for in-browser development. It works with fixed-width designs but also works great with responsive grids. Just specify the page units, column units, page width, number of columns, column width, gutter width, top margin and row height, and then paste the Heads-Up Grid code into the head element of your website to generate the grid overlay. It’s a handy little tool. (cc)

8. Typing With Style Requires Inspiration

Typography is one of the most important elements of design. It can make all the difference, turning your product either into a useful, usable delight or the audience’s worst nightmare. Rather than commit the common mistake of setting type randomly, why not study and explore resources on typography offered by Typetoken?

Typetoken offers not only examples of good typography, but also interviews with designers, discussion on typography, visual language artwork, typefaces, and book announcements. It certainly is a goldmine for explorations in typography for your next design. (tt)

9. Trip of a Lifetime

“Move,” “Learn” and “Eat” are three short videos featuring three inspiring guys. They cover 44 days, 11 countries, 18 flights and 2 cameras, turning three ambitious linear concepts (movement, learning and food) into the trip of a lifetime. The individuals share their experience of their trip around the world, dancing tango in Argentina, waking up with the sun in Machu Picchu, watching a football match in Brazil, eating fresh fruit in the markets of Barcelona…

Do you enjoy connecting with people, trying local delicacies, exploring new environments and learning languages? If you are equally passionate about travel and video editing, then these videos will leave you inspired and make you want to document your next trip. Check out these compelling short films and explore, experiment and enjoy! The world is all around us, at our feet; we just need to start paying attention to it. (ar)

The authors in this newsletter are: Andrew Rogerson (ar), Cameron Chapman (cc), Thomas Burkert (tb), Stephan Poppe (sp), Talita Telma (tt).