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

This newsletter issue was sent out to 54,859 newsletter subscribers on April 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. Solarized: Precision Colors for Your Code2
  2. GuideGuide: Columns, Rows and Midpoints Panel for Photoshop3
  3. Programming Advice for JavaScript Developers4
  4. Plum, Grape, Lavender… or Just Purple?5
  5. Pixel Patterns With CSS6
  6. Roots: A New WordPress Starter Theme7
  7. Inspirational Books for Designers and Artists8
  8. The Art of the Title Sequence9

1. Solarized: Precision Colors for Your Code

If you spend a lot of time writing code or using the command terminal, then you may have already found yourself needing to adjust the default colorization of code. How do you find the perfect balance of colors? Moreover, what if you’d like your whole team of developers to use a consistent, optimal color scheme? You need colors that are easily legible, while still providing enough contrast, both with the background and each other, so that the different parts of your mark-up are easily distinguishable.

Solarized: Precision Colors for Your Code

Enter Solarized10. Solarized is a free custom palette of sixteen colors (including four background tones, four “content tones” and eight accent tones). The content and accent tones are visible on both the light and dark backgrounds and are based on established color theory principles. They’ve been tested on calibrated, uncalibrated and miscalibrated monitors and under various lighting conditions to be highly visible in different contexts. The schemes are currently available for Vim, Mutt, Xresources, iTerm2, OS X Terminal, Adobe Photoshop Palette, Apple Color Picket Palette and GIMP palette. (cc)

2. GuideGuide: Columns, Rows and Midpoints Panel for Photoshop

If you’ve been working with grids and InDesign for a while, then you may have wondered why Photoshop doesn’t have a grid tool similar to InDesign’s. But thanks to Cameron McEfee, such a tool now exists. GuideGuide11 is a columns, rows and midpoints panel for Photoshop CS4 and CS5. It features a midpoint-seeking function, and it enables you to create margins, rows and columns as desired. Punch in the numbers of rows and columns you need, set the gutter widths, click “Create Guides,” and the grid will be created on the canvas using guides. The midpoint seeker provides you with three options: horizontal middle, vertical middle, and both horizontal and vertical middle. Both the midpoint-seeking function and the rows and columns function can be applied to whole documents as well as to selected elements.

GuideGuide: columns, rows and midpoints panel for Photoshop

The panel is reliable and easy to use. Just download the ZIP file, unzip it, and drop the GuideGuide folder in Applications — Adobe Photoshop — Plug-Ins — Panels on a Mac, or Program Files — Adobe Photoshop — Plug-Ins — Panels — in Windows. Then restart Photoshop, and you’ll find the panel ready to use in your extensions area. Alternatively, you could use Russel Brown’s GuideGuide Installer (.zip) and check out the quick video tutorial12 (.mov) on using the tool. (sp)

3. Programming Advice for JavaScript Developers

Good code requires a good understanding of the basics of the language it is written in. With the advent of advanced JavaScript libraries such as jQuery, many developers jump straight into writing code using jQuery or its numerous plug-ins. However, learning more about the foundation of JavaScript itself might give you a better understanding of the concepts behind jQuery and the language itself.

Programming Advice for JavaScript Developers

JavaScript Garden13 is a growing collection of documentation about the quirkiest parts of JavaScript. It offers advice on avoiding common mistakes and subtle bugs, and it lays down performance issues and bad practices that JavaScript programmers might run into on their journey to the depths of the language. The resource is dedicated to professional developers rather than beginners, and it requires some basic knowledge of the language. Currently, the documentation is available in Russian, Chinese, Finnish and English. (tb)

4. Plum, Grape, Lavender… or Just Purple?

Gender and color is a topic that has been debated for decades. The infographics on “Gender and Color14” take a close look at the results of studies of the issue, with the aim of identifying certain colors as feminine or masculine. The results imply certain general conclusions about the color tastes of men and women. It turns out that blue is quite popular with both men and women alike. Why is that? Blue is often associated with clean water, blue sky, authority and truth: how much more persuasive could it be?

Plum, Grape, Lavender - or simply Purple?

Take your time skimming the infographics on the website. Check out where your favorite color ranks. Do you agree with the names and categories given to colors by males and females? Let us know on Twitter (please use the hashtag #smcolor)! (sp)

5. Pixel Patterns With CSS

Pixel patterns can add interest to a design element, whether it’s the background of a website or a particular item. Interestingly, creating patterns with CSS (i.e. without images) is apparently possible. The tricky part is that doing this manually is not exactly easy.

Pixel Patterns with CSS

Patternify15 changes all that. Sacha Greif’s tool lets you create patterns with up to 10 square pixels with multiple colors. A few patterns are built in (including wavy lines, dotted lines and basketweave) that you can use or adapt. To use the tool, just draw your pattern on the grid (use the cursors to limit the drawing surface and control the tiling), and download either the CSS or PNG file. You can also get a short unique URL to share with other pattern addicts. (cc)

6. Roots: A New WordPress Starter Theme

Plenty of WordPress starter themes are out there, yet most of them use HTML4 or XHTML. If you’d like to make your theme more semantic and make the CSS easier to maintain, you could give HTML5 a try. In fact, we’ve already converted WordPress 3.0’s default TwentyTen theme to HTML516, but you could go even further.

Roots: A New WordPress Starter Theme

As far as the Roots WordPress theme17, in fact. Roots comes in several flavors: HTML5 Boilerplate, Blueprint CSS or, and Starkers. When activated in a fresh WordPress installation, it gives you dummy content to work with, and it is ideal for blogs and brochure websites. The designers have also built in features to make WordPress’ code output cleaner, including moving static theme assets to the website’s root and heavily modifying wp_head. Don’t forget to add an HTML5 shiv18 for users with older versions of IE, so that they can experience the full website, too. (cc)

7. Inspirational Books for Designers and Artists

When it comes to finding inspiration, every little bit helps. One way is to have a good library at home. The books don’t all have to feature appealing pictures or works by other artists. What about books with good stories that plant ideas in our minds? On Designers & Books19, you will find short reviews of 797 books, presented by 60 designers from different disciplines and different countries. Each designer introduces one or more books that have influenced their ideas and values. Furthermore, you’ll find members who have created must-read lists for different disciplines in design.

Inspirational books for designers and artists

As you read through the write-ups, you can easily add your favorites to a reading list and email it to yourself or print it out. Designers are regularly added to the website, and you can follow the blog to avoid missing out on any. So, if you have some space left on your bookshelf, let yourself be inspired by the great choice offered on this website. (as)

8. The Art of the Title Sequence

This Web resource of film and television title designs from around the world is free to the public and updated monthly. The Art of the Title Sequence20 is dedicated to the brief history of title design, and it features opening titles for film and television. High-resolution thumbnails from the titles are presented, the works are extensively cataloged, and the variety of tools allow you to compare, analyze and view items in new and experimental ways.

The Art of the Title Sequence

The works, which are intended to foster creativity, are accompanied by stills and video links, interviews, creator notes and user comments. Also, check out A Brief History of Title Design Video21, a short film that features some memorable and remarkable title designs. Hats off to all the designers who have created and are still creating excellent title sequences! (il)

The authors are: Vitaly Friedman (vf), Iris Ljesnjanin (il), Thomas Burkert (tb), Stephan Poppe (sp), Anne Sundermann (as), 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 #a7
  9. 9 #a8
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21

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

    Great post! Thanks!


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