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

01. ProCSSor: Hassle-Free, Cleanly Formatted CSS2
02. Create Simple Icons Online3
03. Grid Overlay for Perfect Alignment4
04. Faster WordPress Development With WP-Snippets5
05. Clean Up Your Client’s Text and HTML6
06. 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.

ProCSSor8

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 Icons10

Little Icon Editor11 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 bookmarklet12. 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 Overlay13

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.

WP-Snippets14

Resources like WP-Snippets15 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 HTML16

Entitifier17 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 Rumpetroll18 (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.

Tadpole19

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 project20, if you’re interested in diving into the code (pun totally intended). (cc)

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

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 #a1
  3. 3 #a2
  4. 4 #a3
  5. 5 #a4
  6. 6 #a5
  7. 7 #a6
  8. 8 http://www.procssor.com/process
  9. 9 http://www.procssor.com/process
  10. 10 http://ngin.de/icon-editor/
  11. 11 http://ngin.de/icon-editor/
  12. 12 http://www.sprymedia.co.uk/article/Grid
  13. 13 http://www.sprymedia.co.uk/article/Grid
  14. 14 http://wp-snippets.com/
  15. 15 http://wp-snippets.com/
  16. 16 http://entitifier.sambowler.com/
  17. 17 http://entitifier.sambowler.com/
  18. 18 http://www.rumpetroll.com
  19. 19 http://www.rumpetroll.com
  20. 20 http://github.com/danielmahal/Rumpetroll

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!

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  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

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 else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top