Using Dashicons for Custom Post Types

With it’s admin redesign in version 3.8, WordPress also launched a sporty new icon font that powers the menu icons. Before, menu icons were just images linked to using the menu_icon parameter when you registered the custom post type. You can still do this, but today I learned that you can also use a Dashicon in place of an image for your CTP menu icons.

It’s easy: when you register your CPT, enter the classname of any Dashicon in the menu_icon parameter. WordPress will use that a your CPT’s menu icon.

For example, If I’m working on a Slide CPT, I can use the Slide Dashicon like so:

Branding

A few months ago I ordered Branding Matters by Jason VanLue. I figured it’d give me a few pointers and, hey, who doesn’t want to support a nice guy self-publishing his first book? A few weeks ago I finally got around to reading it and it’s pure gold. It’s helped me understand what branding is what it is not.

Branding isn’t just a logo, color scheme or font. Branding is who you are, how you work, and what you want to be. It’s also is the way people (read: customers) feel about you. Good branding is when you can effectively tell people what to believe about you such that their ensuing decisions accomplishes your goals.

I’m a tinkerer. I’m also an idea person. I have more ideas than I ever have time for and I tinker too much on the ones I do pursue. I also suck at branding. Since I fail to establish goals and direction for things, when it comes time to make a big decision, I can’t make up my mind. My decisions are usually based on how I’m feeling at the moment (which, because I’m human, is always changing).

See, that’s where branding comes in. Branding provides a direction. It’s what you are and what you want to be. When you’ve got that down, making decisions gets whole lot easier. Make the one that takes you where you want to be. And since you’ve branded, you know where that is.

Blogs I Follow (Part 1)

I know it’s not a new idea by any stretch of the imagination, but I decided to start a series of posts giving everyone a bird’s eye view of the blogs I subscribe to and why. Nothing fancy, just a list of five or so at a time with the whats and whys.

dropshado.ws

This is David DeSandro’s Tumblr for front-end development tricks and resources. Though I admit some of it goes over my head, there is some great stuff in there.

The Pastry Box

I really like this idea — a thought a day from 30 of the web’s top movers and shakers. Some posts are quite long while others are just a paragraph, but you can always count on them to be thought-provoking.

Shawn Blanc

Shawn Blanc is my favorite voice in the tech/Apple/coffee arena. He’s positive, insightful and most of all, a great guy. I don’t read everything he posts, but I happily give him $3/month as a member.

Paul Adam Davis

Paul’s blog is a recent discovery, but a favorite non-the-less. He writes about everything from freelancing to WordPress techniques to UX and I’ve yet to be disappointed. He was also on my podcast once.

The Industry

The Industry is fast becoming one of the best voices in the design and startup world. They’ve got a lot of good reviews and and a lot of awesome people write for them. Also, they let me be on their podcast.

That’s it for now. Check back later for more.

Code Smells in CSS

Harry Roberts wrote a great article on CSS Wizardy about things he looks for in CSS that give him an idea about “its quality, its maintainability and its integrity…”

A few of my favorites:

Rulesets should only ever inherit and add to previous ones, never undo.

Basically, if at any point you’re removing previously-declared styles from an element, you’ve probably applied the styles too early. I’m sure I’ve been guilty of this one.

[IDs] are of no use to anyone and should never be used in CSS.

Only recently have I begun to agree with this vein of thought. There’s no harm in replacing #header with .page-header, but there are situations where it would be beneficial — especially on larger sites. This certainly doesn’t hurt his argument either.

Building BrandColors

A couple of weeks ago I launched BrandColors, a side-project of mine that is best described as a collection of major online brand hexadecimal color codes. The project has received a lot of positive attention, so I thought I’d give you guys a quick rundown on the idea and the build process. In typically me fashion, this is happening far too late, but as they say, better late than never.

The Idea

Before I tell you about how I built it, I want to throw out a little disclaimer — the idea for a site like this was not mine. Actually, I’d seen a page like this that I really liked but forgot to bookmark. I spent nearly a half-hour looking for it several days later and after I still could not find it, I said, “To heck with this, I’ll just build my own.”

Oddly enough, it would take me building my own to find the original Color Reference by @chris_frees. Props to him for coming up with the idea and then not getting mad at me when I built something like it.

The Build

One of the things I knew I wanted to do from the start of the project was make adding and maintaining colors super crazy simple. If the process was complex, time-consuming or boring, I knew I would never add enough colors to make it much of resource.

My solution was simple — a static HTML file with each color represented in the markup as a <li>. Using the power of the HTML5 data attribute, I added data-brand and data-hex attributes to each of the <li>s. Then, using jQuery, I appended <h2>s for the brand names and <span>s for the color values and filled them with the data-brand and data-hex values. I also used jQuery to set the background color of the <li> to the value of data-hex. The copy to clipboard functionality was easy as pie with the zClip jQuery plugin.

As result, adding new colors was as simple as adding a new <li> to the page, setting the proper values in the data attributes, and publishing.

I know this was a pretty brief write-up, but I wanted to publish it anyway. I hope you enjoy the tool!

Disable Mac Dashboard

In my opinion, the Dashboard is probably the stupidest feature in OS X. It’s ugly, clanky and somewhat useless. It also takes up valuable system resources that would be better used elsewhere. I did a bit of research and discovered that it’s actually pretty easy to turn off.

Simply open up Terminal and type:

defaults write com.apple.dashboard mcx-disabled -boolean YES

For the changes to take effect you’ll need to restart the Dock:

killall Dock

If you ever change your mind and want the Dashboard back, simply type:

defaults write com.apple.dashboard mcx-disabled -boolean NO

Again, you’ll need to restart the Dock:

killall Dock

Resources for Retina

Prompted by the recent rise in retina devices such as the iPad 3 and Retina MacBook Pro, I’ve been exploring ways to make my websites more retina-friendly. Basically, I’ve found a couple of major options:

  1. Use vector assets such as icon fonts or SVG graphics.
  2. Detect for retina and use @2x images.

Here are a few few of blog articles, tools and resources that I’ve been relying on.

Icon fonts

I’ve been using icon fonts a lot recently. Basically, instead of using image files for your icons, you create a font file out of vector icons. Benefits include being able to infinitely scale, style and animate via CSS.

  • Pictos Server: This can best be described as Typekit for icon fonts. You select the icons you want, associate them with a character, and then the system builds you a hosted, built-to-order icon font based on the Pictos icon set.
  • Symbolsets: Symbolsets are the first semantic symbol fonts I’ve seen. Simply put, as you type certain, pre-defined keywords, the keyword is automatically replaced by an icon in browsers that support Open Type features. For example, you might type the word “world” and instead of the text “word,” a globe icon appears in its place. Clever, huh? I expect to see a lot more semantic sets like this soon.
  • Fontello: This is much like Pictos Server, except that instead of being limited to the Pictos iconsets, you have access to a number of open-source icon fonts. Also, you must host them yourself.
  • Chris Coyier wrote a good post about the HTML for icon font usage as well as handy roundup of icons fonts currently available.

SVG

SVG graphics are another useful tool that I’ve only recently begun taking advantage of. For some reason, I had been under the wrong impression they were going to be terribly difficult to implement and thus had been steering clear of them. Actually, they couldn’t be easier.

  • This blog post on the IEBlog (yes, I just did that) seems to be a good place to get acquainted with SVGs and understand their use cases.
  • SVG Export Fireworks Command: If you’ve spent any time looking for Fireworks extensions, you’ll know that Aaron Beall is the Fireworks extensions guy. In my limited experience using it, it seems to work pretty well.
  • Illustrator CS5 HTML5 Pack: This add-on for Illustrator CS5 extends its SVG capabilities as well as providing some initial support for HTML5 and CSS3.
  • Inkscape: An open-source vector graphics editor with capabilities similar to Illustrator using the SVG file format. You’ve probably heard of this, but I think it merits mention.
  • This chart will give you an idea of the current browser support.

Hope this compilation will be useful to someone. Drop me a line if I’ve missed something — galen@galengidman.com