A Quick WordPress Plugin: There Can Be Only One

It’s been over seven years since I last built or maintained a WordPress plugin, thanks in large part to the great community of WordPress plugin developers who share their hard work for the community as a whole. Yet, I finally ran into a situation that wasn’t handled by an available plugin. I patched this in my custom functions.php file with some help from code that I found here (thanks Craige!) and have cruised along for a good while, but I wanted to strengthen my solution while giving back to the WordPress community.

(TLDR – the WordPress community is awesome, and I published this plugin: There Can Be Only One)

My Goal

There should always be one (and only one!) sticky post visible at the top of my home page.

The Setup

I post many links and images on my site, which means the majority of my front page is made up of links elsewhere, and anything that I write is quickly lost in the stream. Sticky posts help to address this, allowing me to designate that a post should be shown at the top of my home page, regardless of whether it is the newest or not. Awesome!
[Read more…]

Designers Should Welcome Trouble

An absolute must watch for every designer. Every builder too. Seriously. Watch this in it’s entirety.

To say that this resonates with me is an understatement of the highest order, and the timing is particularly important for me as I look at my role, both personal and professional in life.

It strikes to my core. If it doesn’t do the same to you as a designer, then it is time to rethink your place in the world.

SMACSS – Scalable and Modular Architecture for CSS

SMACSS Book Cover - Taken from smacss.comMany of you may already be aware of it, but in case not, I thought I’d point out that Jonathan Snook has released a site/ebook called Scalable and Modular Architecture for CSS or SMACSS (pronounced “smacks”). If you’ve read any of his previous stuff or had a chance to meet him at past events like South by Southwest Interactive, you know he’s a smart cookie, and nice to boot.

SMACSS is an interesting look into Jonathan’s process and structure, and as he puts it “a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It’s an attempt to document a consistent approach to site development when using CSS.”

I’ve personally spent a lot of time thinking about how I organize my CSS, so I love the opportunity to see the path that Jonathan has followed. We follow different practices in some cases (organization of attributes for example), but at a minimum, reading through his choices has caused me to think about the patterns I have set for myself.

Beyond the content, I love the fact that he’s sharing it publicly on the Web, in ebook format and via a third “Full Membership” option, so the information is freely available but he’s still able to profit from his efforts. I’ve signed up for that last option, in part to support him, but also because I’m excited to see what he’ll release to those members.

Image from the SMACSS site

The Usability of the Link Icon

Peter Steen Høgenhaug has posted the results of a usability test focused “aimed at exploring how little documentation you could leave in a CMS, and still have even the most non-savvy person use it with no issues”. This lead him to discover how few people make the connection between an icon of two links in a chain with the act of creating a hyperlink to another page. It’s a quick read and a fascinating study of the cognitive association, or lack thereof when trying to extend real world imagery to represent online actions.

It would be interesting to see a study focused on users who are familiar with content management systems, to see if they find this to be an issue. Without a great replacement, we may need to rely on discovery and learning for this association.

This reminds me a lot of my previous post . So, posing the same question as we did there – what would be a good replacement? I haven’t been able to come up with a great iconic substitution and am leaning ever so slightly, toward simply using the word Link. I’m sure there’s something better though.

What do you think, is it worth changing? If so, what should it be?

Visualizing the Debt Crisis: Layers of Passion and Opinion

Screenshot Taken on NYTimes.com

I love how the New York Times uses user-generated content with real-time(ish) visualization for this piece title The Debt Crisis: What Should Congress Do?

The spread of opinion and the level of passion for each point is instantly visible at both an individual and aggregate level. The requirement that each submissions must also include a comment adds further depth and understanding.

Fixed-Width vs. Responsive, Connect Four vs. Twister

Fixed-width design isn’t going away, because it’s easy. It’s like playing the game Connect Four versus playing Twister. One is simple and straightforward, the other multivariate, so much so that you can’t really formulate a one-size-fits-all strategy. Which isn’t to say people shouldn’t endeavor to do responsive sites, just that they can’t expect the heavy lifting to be done for them.

Nathan Smith on Google Buzz for .Net Magazine’s next “Big Question

Data Will Set You Straight

We are very proud of our empirical focus, because it makes us humble – we realize that most of the time, we don’t know up-front what customers want. The feedback from testing quickly sets us straight, and helps make sure that our efforts are really focused at optimizing the things that make a difference in the customer experience

Neil Hunt, Chief Product Officer, Netflix

The rest of the response to the question “What types of things does Netflix A/B test aside from member sign-up?” is well worth the quick read.

Switching to Chrome: Essential Extensions

The Web browser is the most important tool to my profession, yet I continued to use a memory-intensive and often times, slow browser day in and day out. Firefox is great for many reasons, but it’s no longer good enough.

Enter Chrome

In the last two years Google Chrome has matured quickly and the community has ported all of the functionality I need. So for the last couple of weeks I’ve put Chrome through its paces, using it as my default browser at work and home. I’m very happy with the results.

For those of you contemplating the move, here are the extensions I’ve installed, and some quick notes on the browser.


One quick note – given how young the platform is and the size of the community compared to that of Firefox, there are a lot of rough edges. I expect these will be taken care of with time.


1Password support is a requirement for me given the amount of sites I use on a daily basis. The great people at Agile Web Solutions have us covered though. The extension is new and not as full featured as that available for Firefox and Safari, but it covers about 90% of what I need.


While I don’t run AdBlock on every site (I like to support content creators), there are some sites where the ads are so distracting it makes it hard to read their content, which is where AdBlock (as well as the excellent Readability bookmarklet) shine. The Chrome version functions just like its Firefox sibling.

After the Deadline

Automattic’s spelling and grammar checker is amazing and should be baked into every browser. Perhaps then the writing quality of the Web as a whole would improve.

Awesome Screenshot: Capture & Annotate

A great utility for grabbing the entire page or a selected portion. A must-have for anyone who reports bugs or keeps bits of great design for future inspiration. I do both.

Chromicious (Delicious Bookmarks)

I prefer this extension over the official (beta) Delicious version for one important reason – the save dialog is a separate window, allowing me to copy and paste snippets of the page into the description. The official version uses a drop-down drawer, which is wiped as soon as you click anywhere else.

Neither extension includes the handy bookmarks sidebar that’s available in Firefox.

Clip to Evernote

I use Evernote as a repository for interesting designs and products on the Web in addition to a general note tacking app. The plugin makes it simple for me to quickly import the current page and it also provides quick access to my other notes.

While it uses the same drop-down drawer as the one I dislike for the official Delicious extension, it doesn’t wipe the content when you click elsewhere.

Eye Dropper

A useful color picker. This functionality is already baked into the Web Developer Extension (below), but I like the quick access that the separate extension provides.

Firebug Lite for Google Chrome

I go back and forth on Firebug List as so much of its functionality is already available in Chrome’s Developer Tools. Luckily it doesn’t noticeably increase memory usage, so I’ll keep it around until I make a decision.

RSS Subscription Extension (by Google)

This should be baked into the browser. The entire purpose of the extension is to add the small RSS notified to the address bar, simplifying the process of subscribing to a feed.

Web Developer

Another great tool ported from Firefox to Chrome. The extension includes many utilities that make the life of a Web Developer much easier – everything from a color picker, guides and a ruler to the ability to enable and disable CSS and JavaScript on a page


I love the fact that I’m able to keep extensions in sync across computers. If you aren’t aware of this feature, open the app’s Preferences, select Personal Stuff and follow the directions to enable syncing. It saves a lot of time and effort.

Rough Edges

  • Some sites seem to forget that I’m logged in when I use Chrome, though they will remember me for weeks while using Firefox. There aren’t many, but the fact that our bug tracking system (Jira) at work forgets me is very frustrating when I’m attempting to file a ticket.
  • I find it odd that Chrome didn’t adopt the long-standing View Source keyboard shortcut (CMD/CTRL-U). I remapped it in my OS given my muscle-memory automatically hits those keys when I’m debugging a page.
  • Another keyboard annoyance is that the F5 key isn’t mapped to reload a page. Again, my fingers are used to hitting CMD-R and F5 to reload a page. While it’s not a requirement to have two different ways to force a reload, it can be very convenient.
  • I hit an odd issue with fonts on my home machine recently, the cause of which I still don’t understand. While I resolved it, I’ve noticed other font rendering issues since, even after cleaning up my font installs on this machine.

Random Bits that Make Me Happy

Here’s a quick brain dump of little touches that I love about Chrome:

  • Chrome makes it easy to resize textareas, making long-form input easier in apps and forms.
  • The unified address/search bar works beautifully. The Firefox implementation is pretty good, but Chrome is noticeably better in terms of ease of use and recognizing my intent to search over my intent to navigate straight to a URL.
  • Chrome is fast. Very very fast.
  • Extensions are written with JavaScript, making them very easy to create and modify. This also widens the scope of extension-developers.

Do You Use Chrome?

If so, what cool things am I missing? If not, what’s holding you back?

Chrome, Futura and Garbled Characters

For some reason Chrome on this machine (iMac running 10.6) doesn’t render Futura, which I use for my headlines, replacing it with extended characters. The site renders properly on MacBook Pro, which also runs 10.6. I’ve double-checked the character encoding and verified that removing Futura from the style sheet repairs the problem.

I’m digging in further, but if anyone out there knows of an explanation, I’d appreciate any help.

jQuery.Html5form »

HTML5 includes form validation as part of the spec, so once it's fully supported we won't need to use JavaScript to validate form input. Sadly, this is only supported by Webkit browsers at the moment (Safari & Chrome). This plugin addresses the gap for the other major browsers with a single line of code.

PaintbrushJS »

"A lightweight browser-based image processing library".

JavaScript's come a long way. This library provides a wealth of image manipulation capabilities, including tints, blur, noise, sepia and grayscale – all handled by the browser. What a sweet way to ensure you don't have to reprocess your images the next time you redesign your site.

Pictos »

Using a font instead of images for icons is an interesting concept, which ensures that the icons are infinitely scalable and that the presentation can be easily changed on the fly without any extra page weight (even more so with CSS3).

I am curious where the tipping point lies in terms of page weight and render speed – 3 icons used, five…15? Either way, this is a really good start down an innovative path.

HTML5 Boilerplate »

As noted on the site, this is "the professional badass's base HTML/CSS/JS template for a fast, robust and future-proof site" While I likely won't use this whole, there are some very interesting pieces to this worth using, especially in the style sheet and .htaccess files. I'll likely appropriate many of the concepts for my work.

This is an outstanding contribution to the Web development community by Paul Irish and Divya Manian as well as all of the people whose work they built upon.