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

This newsletter issue was sent out to 42,899 newsletter subscribers on October 12th 2010.

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

Table of Contents

  1. ProCSSor: Hassle-Free, Cleanly Formatted CSS2
  2. Create Simple Icons Online3
  3. Grid Overlay for Perfect Alignment4
  4. Faster WordPress Development With WP-Snippets5
  5. Clean Up Your Client’s Text and HTML6
  6. Rumpetroll Experiment: Ever Wanted to Be a Tadpole?7

1. ProCSSor: Hassle-Free, Cleanly Formatted CSS

Not all CSS mark-up is pretty and cleanly formatted. Beautiful code can make editing and maintaining it a whole lot easier. Ideally, this should be done from the beginning, as you create the style sheet, but sometimes we have to work on style sheets created by other designers who format their code differently. If you’re on a deadline, spending the extra time reformatting a style sheet can be quite time-intensive and not much fun.


That’s where ProCSSor9 comes in. This online tool allows you to submit your CSS (either copy and paste the code, upload the file or point to a URL) and choose your formatting options. You can save options and reuse them every time you run code through ProCSSor. You can separate properties and selectors across multiple lines, indent up to four levels with either the space bar or tab key and even sort properties. The tool also has a “Columnize” mode, which groups elements into columns, making for a more elegant style sheet; you need to deactivate “Fail-safe mode” to use it, though — keep in mind that juggling CSS properties can result in rendering problems in the browsers. (cc) (vf)

2. Create Simple Icons Online

There are all kinds of uses for tiny pixel icons. You can use them for plain icons or as favicons, or use them any time you need a tiny graphic online. But breaking out Photoshop just to create a 16×16-pixel icon seems like a waste of time.

Online Icons

Little Icon Editor helps you get the task done in a couple of minutes. You can create 16×16-pixel icons quickly and easily and preview them in real time at 100% or 200% of their actual size. The tool has a single purpose, but it does the job well. Once your image is complete, just drag the preview to your desktop or right-click and select “Download image.” (cc)

3. Grid Overlay for Perfect Alignment

Often we want to align our designs perfectly and achieve vertical rhythm and a solid balance in our CSS layouts. We ask ourselves if that baseline is really consistent, and do those gutters have the proper width? If you just want to adjust that one small CSS box or check if everything looks right, simple browser tools are a good way to help you solve your tasks. Enter the Grid bookmarklet10. The tool allows you to interact with a grid directly inside the Web browser. (Most alternatives involve overlaying a static grid image onto the page.)

Grid Overlay11

Just drag it to your bookmarks toolbar, and then any time you want to check that everything is properly aligned, click on the bookmarklet, and a grid will be overlaid on the current page. An overlay id lets you customize and configure the grid so that everything matches up perfectly. More functions can be activated using the navigation options in the right sidebar of the tool’s window. You can even take a screenshot of the page with the grid, in case you want to take a closer look in Photoshop. (cc) (vf)

4. Faster WordPress Development With WP-Snippets

WordPress themes used to be simple and straightforward. As time passed, WordPress evolved, and now it is being used for virtually every kind of website out there, from blogs and portfolios to social networking and e-commerce websites. And WordPress themes for all such websites are only getting more advanced.


Resources like WP-Snippets13 can come in handy when you’re designing a WordPress theme. Rather than start from scratch when building some functionality or another, why not grab a snippet of code that has already been tested? The website includes many useful snippets, from highlighting author comments to listing random posts to filtering the loop. Make sure to read the comments for each snippet because they could contain helpful information on whether the code works in certain WordPress versions. (cc) (vf)

5. Clean Up Your Client’s Text and HTML

Cleaning up text for the Web can be time-consuming and prone to error. But if a client delivers content in Microsoft Word or a similar format, then cleaning it up is a necessary evil if you don’t want to end up with characters that don’t display properly online.

Clean up your HTML

Entitifier does the hard work for you. All you have to do is enter HTML or text, and it escapes nasty characters that should be entities. Just don’t enter text with inline PHP or HTML5 tags, because the tool doesn’t work well with them yet. (cc)

6. Rumpetroll Experiment: Ever Wanted to Be a Tadpole?

Yeah, me neither. But that’s what Rumpetroll14 (Norwegian for “tadpole”) lets you do. The project is a multi-player experiment created with HTML5, Canvas, JavaScript and WebSockets. Rumpetroll lets you be a tadpole that swims around in a gigantic virtual pond. You can even chat with the other tadpoles.


While Rumpetroll doesn’t seem to have a real point, and we have no insight into why it was created, it is a very good example of what can be built with modern technologies such as HTML5 and Canvas. By the way, it’s a Github project16, if you’re interested in diving into the code (pun totally intended). (cc)

The authors are: Vitaly Friedman (vf), Cameron Chapman (cc).


  1. 1
  2. 2 #a1
  3. 3 #a2
  4. 4 #a3
  5. 5 #a4
  6. 6 #a5
  7. 7 #a6
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16

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

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

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