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