Disable Mac Dashboard

Standard

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

Standard

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

Think First

Standard

Think First. It works.

These were my favorite words in my favorite of the day. Francisco Inchauste (you may know him as iamFinch) wrote:

Instead of religiously debating Responsive Web Design, Adaptive Web Design, Content First, Mobile First, etc., use Think First. It works.

I cannot stress enough how right Francisco is. Lately, it seems to me that perhaps we’ve become far too enamored with the concept(s) of Responsive Web Design, Mobile First, and other strategies developed for dealing with mobile. We see the means as the end, instead of what they should be — the means. Are our intentions bad? Generally speaking, no. But perhaps it’s time to take a step back, look at the big picture, and make sure everything we do is done to achieve our end goal and not just because it’s trendy.

Example: I’m sure that if you’re reading this, you’ve seen the latest iteration of zeldman.com. Since launching the redesign, Jeffrey has taken quite a bit of heat from members of the web community saying his site should be responsive. At first glance, I tended to agree. Resize your browser window to narrower than 800 pixels or so and you get a horizontal scrollbar. Odd move for a guy that built the company that published the web’s first book on RWD, no?

I was curious, so I tweeted him to ask about the changes and lack of responsiveness. His answer:

It is, in subtle ways. But the layout width doesn’t change. One layout to rule them all.

Confused, I pulled out my iPhone, opened Safari and had a look. Actually, it looked quite nice. Even though the width of the site was not fluid, Jeffrey used extremely large type and a relative narrow, one-column layout to ensure the end result was equally as enjoyable on mobile as it was on the desktop, and vise versa. Different? Yes. Effective? Absolutely.

I think this is what I’m getting at: The chief end is not the process nor is it the means. The chief end is the result. Let’s all keep that in mind.

Think First. It works.

Tumblr Framework

Link

Recently, I’ve been working on a framework to help speed Tumblr theme development. The framework supports all 7 post types, is localized and is built using HTML5 with a focus on semantics.

Head over to the GitHub repo and help me make it better!

An Introduction to WordPress Action Hooks

Standard

Note: If you want to read this post, feel free, but I highly recommend my more recent post on the subject over on the Treehouse blog.


If you’ve done any WordPress theme development in the past, you’ll probably find that you are already somewhat familiar with action hooks. A certain few are required for all themes, wp_head() and wp_footer() being the best-known. These are most often used to plug code required by plugins to the <head> or right below the <body>.

Actions hooks are also commonly used to add extra code into parent themes via the child theme. Let’s say a parent theme had an action hook called parenttheme_below_header(). If you were authoring a child theme, the easiest way to add code below the header would be to create a function containing the code you desire to put below the header, and then hook it into the parent theme via the action hook.

We’ll walk through this process more in-depth a little later, but first I’d like to go over how to create your own action hooks with the WordPress plugin API.

Creating action hooks

You’ll want to first decide where you will put your action hook. Going back to the prior example, let’s say we want an action hook below our header. Open functions.php in a parent theme and add the following code.

function parenttheme_below_header() {
    do_action('parenttheme_below_header');
}

Now, open up header.php and under the closing <header> tag, call parenttheme_below_header() like so.

parenttheme_below_header();

At this point, we’ve got a working action hook. But we’re not doing anything with it yet! Let’s fix that.

Hooking actions to action hooks

Start by creating a new child theme. If you’ve never done this before, you can read how on the WordPress codex – don’t worry, it’s not hard.

Create a functions.php file in the child theme and add the following code.

function childtheme_hello_world() {
    echo '<h1>Hello World!</h1>';
}

add_action('parenttheme_below_header', 'childtheme_hello_world');

Save your code and view your live site. Assuming your child theme is activated and everything went correctly, there should be and <h1> reading “Hello World!” under your site header. If you see it, congratulations! You’re using action hooks.

Unhooking actions from action hooks

So far we’ve learned what action hooks are, how to create our own, and how to hook actions to them. Another thing you might find yourself wanting to do is unhook actions.

Let’s say in your parent theme there is an action hook that is being used to hook in a header image under the site title. We’ll call the action hook below the title parenttheme_below_title() and the header image action parenttheme_header_image().

You’re creating a child theme and you decide you don’t want a header image. The best way to get rid of it is simply to unhook the action.

remove_action('parenttheme_below_title', 'parenttheme_header_image');

Another example

As I mentioned at the beginning of the post, action hooks are often used to insert code required by plugins into the document. Let’s say your plugin required a certain stylesheet. You would put this in the <head> using the wp_head() action hook.

function sampleplugin_stylesheet() {
    $url = get_option('siteurl');
    $dir = $url . '/wp-content/plugins/sampleplugin/';
    echo '<link rel="stylesheet" href="' . $dir . 'essentialstylesheet.css">';
}

add_action('wp_head', 'sampleplugin_stylesheet');

Edit: the above is not the correct way to include stylesheets or scripts in themes and plugins. It was included by a far less-experienced me to serve as a proof-of-concept. This and this will teach you how to do it the right way.

Go forth and code

I hope this cleared up any questions you may have had about WordPress actions and action hooks. If you want to see more examples of them being used well, a good place to start would be Thematic by Ian Stewart.

Lion’s Digital-Only Upgrade

Standard

I’m sure many of you have heard by now that Apple announced their newest version of OS X, Lion, will be available in July. The upgrade is $30 and is only available on the Mac App Store. I just wanted to chime in with my thoughts on their App Store-only upgrade approach.

At first glance this seems like a great move… (1) it will force anyone who’s still not adopted the App Store to jump on board; (2) it will make for seemingly easier upgrades; and (3) it will allow Apple to keep all the money. A win-win, right?

**My thought is no** — and primarily for one reason: when I sell a used Mac that I’ve upgraded to Lion, I can’t include the upgrade with the sale. Sure, I could just do a fresh install and ship it that way, but they aren’t getting any media. And for me personally, media is a must.

So, I like Apple’s idea of allowing people upgrade via the App Store, but I don’t think it should be exclusive. You guys agree?

Don’t Lose the Magic

Standard

Tonight, while watching an old episode of The Andy Griffith show with the family I grabbed my MacBook and opened Fireworks. I had no goal, no deadline, and nothing I was trying to achieve — I was just having fun with texture and type with no other aim than to enjoy myself. It was awesome.

Sometimes, I think we as designers can loose track of why we got into the game. It wasn’t to make a living. It was for fun. It was because we enjoyed it. It was because it was what we wanted to do. When we forget that, design becomes nothing more than mere drudgery — it’s lost its magic. You can design the world’s best websites, posters and logos for the rest of your life, but once the magic is lost, you’re no longer designing for the same reason you did in the beginning and you’ll never have the satisfaction you once knew.

The moral: take some time away from “productive” work every once in a while and have fun. It doesn’t matter if what you make is stupid, ugly, or whatever.

Just have fun.

A Dribbble and Forrst Comparison

Standard

Of late, web designers have placed a lot of attention on online communities. As many will know, the two niche leaders are Dribbble and Forrst. As someone who’s spent time on both, I thought I’d attempt to practically break them down, explaining the pros, cons, and ideas behind each.

First, a little history…

Dribbble

Founded in late 2009 by Dan Cederholm and Rich Thornett, Dribbble was a whole new concept. Members post 400×300 pixel screenshots of what they’re working on and receive comments and likes from other members. When it went public March 2010 after an eight-month beta period, the site’s popularity exploded. Membership is invite-only, thus making the quality of work featured on the site very high.

Forrst

Kyle Bragger started Forrst in January 2010 as a then side project. He wanted a place where he could share code, designs and concepts with friends. After a few months the project gained momentum and Kyle made it his full time job. Forrst too is invite-only, although more invites are allotted out monthly, so membership is much easier to attain.

A comparison

As I said at the beginning, I’ve had the privilege to be invited to both communities. Low-profile fights often break out between patrons of the two, but in my opinion, they each have strengths and weaknesses.

For starters, let’s talk about Dribbble. Because invites are so scarce, it’s a big deal to get one and only designers with at least decent work get them. Thus, having a Dribbble account instantly gives you a certain level of perceived standing in the design community. It’s like a right of passage — when you’re on Dribbble, you’ve arrived.

On the other hand, being a Forrst member carries far less weight. Although many very good designers reside there (cue Morgan Allan Knutson, Luke Beard, Jonno Riekwel, Benjamin De Cock & James McDonald) the site’s also got it’s fair share of mediocre designers. But Forrst does bring things to the table Dribbble does not — Code, Question and Link posts as well as high-resolution screenshots.

One other major difference I’ve noticed is the type of feedback you can expect to receive. In my experience, Forrst users tend to focus more on constructive criticism and how the design could be better than do Dribbblers’.

A typical Dribbble comment is more or less as follows…

WOAH! FREAKIN’ AWESOME!!! <3 IT!!!

And here is a typical Forrst comment:

Nice work — I like where that is going! What if you moved the navigation up a little and incorporated the social icons into the left side. Also, I think the green in the footer is a little too strong. Maybe lighten it a bit?

Which of the three examples above is really going to help your design? For me, hands down, it’s the Forrst comment every time.

Going back to what I said earlier, because Dribbble invites are so scarce, the quality of the work you will find there is usually very high. I have the opportunity to learn something or gain inspiration from 95% of the accounts I run across. Many of the world’s best designers are there (Tim Van Damme, Veerle Pieters, Rogie King, Matthew Smith, Cameron Moll, etc.). I’ve said all this to say: Dribbble may be the best place on earth to get inspired. Stuck on a project? Go browse Dribbble.

One of the most important things to me in a site like Dribbble or Forrst is the community aspect. As I’ve used them, I’ve gotten to witness first-hand each website’s distinct community “feel.”

The Forrst community is very down-to-earth. 95% of the time its users are friendly, encouraging and supportive. As I talked about earlier, the feedback you receive there is usually aimed at making your work better and making you a better designer. It’s almost like a big, happy family, all working together to make the web a better place.

Dribbble, on the other hand, has a more “uppity” feel. Not that its users aren’t friendly, but there’s definitely an “in-crowd.” This is likely because many of it’s top users are the world’s best designers and they know it. They speak at and attend conferences together, chat on Skype… they’re friends. They know what each other is currently working on and what they’ve done in the past. All of this can give a low profile user an out-of-the-loop feeling at times.

If you’ve gained one thing from this post, I hope it’s that each site has its own strengths and weaknesses. For what it’s worth, I believe that the two can co-exist and without there needing to be a “better one.” I use them both nearly every day and gain prospective and insight from each.

LESS CSS Grid

Link

A couple of weeks ago I wrote a flexible, variable-controlled CSS grid in LESS. The idea was this: create a grid that could be customized in just about any and every way imaginable. Although I haven’t done extensive testing, I feel that I was very successful.

The grid is controlled by 3 variables located in top of the document, controlling the total width, number of columns, and spacing between each column. Changing the values of these will give you just about any grid imaginable.

I could go on about it here, but you may as well head over to the project repo on GitHub instead, where I plan to maintain the project. Feel free to fork it — I’m pretty happy with what I’ve got, but as with practically everything on the web, I know it could be better.