This is Chris Coleman’s website.

A bookmarklet to see if a site is down

Smart people head to Down for Everyone or Just Me when they can’t reach a website. But who has time for all that typing? Certainly not me. That’s why I took 45 seconds and created a bookmarklet to make this easier.

Most people have no idea what a bookmarklet is. The mere idea of editing a bookmark’s address doesn’t even seem to register with them. Me, I’m not like most people. You should be more like me. Here’s how.

Step One

Create a new bookmark. It doesn’t matter what site you’re on. Do it here for all I care.

Save that bookmark to your Bookmarks Toolbar.

Step Two

Edit the bookmark. You’ll want to change both the name and the address. Here’s the code you’ll need: 

javascript:(function() {str=location.hostname; down='http://downforeveryoneorjustme.com/'; location.href=(down + str);})()

Make it look like the picture:

Step Three

There’s no step three.

Whenever a site seems unreachable, just click the item in your Bookmarks Toolbar and you’ll be whisked away to Down for Everyone or Just Me.

Have fun.

Tips for getting started with SASS

I’m still only ankle-deep in the world of SASS, but I already can’t imagine building a site without it. Getting it up and running is pretty straightforward, and nesting selectors likely makes perfect sense to you because you’ve probably been wondering for years why CSS doesn’t already do this.

Nesting selectors is great and all, but over the last few years, a new shortcoming in CSS has popped up. Namely, keeping up with vendor prefixes. Most of the cool CSS3 features would be inaccessible to designers if we avoided vendor prefixes, and so, we do use them. We use lots of them. Browser support for new features is evolving rapidly, and it’s hard to keep up. SASS can help.

I’ve already discovered a few basic tricks that can help you get up and running with SASS very quickly.

Getting Started

You’ve got SASS installed, right? It spits out neatly formatted CSS. But you don’t want neatly formatted CSS. You want to compress the hell out of it and get that page to load .001 seconds faster. They tell you how to do this in the SASS documentation, but they do it in the most roundabout way possible. Here’s all there is to it.

sass --watch --style compressed style.scss:style.css

That was easy.

Mixin’ it up

Nested selectors rule, but they just scratch the surface. To wrangle those vendor prefixes, you need mixins.

Here’s your first mixin:

@mixin box-shadow ($box-shadow) {
    -webkit-box-shadow: $box-shadow;
       -moz-box-shadow: $box-shadow;
        -ms-box-shadow: $box-shadow;
         -o-box-shadow: $box-shadow;
            box-shadow: $box-shadow;
}

To use it, just call up the mixin with the @include statement and give it some standard values for that property.

div {
    @include box-shadow(1px 1px 5px #000);
}

This is what you’ll get after SASS detects the change:

div {
    -webkit-box-shadow: 1px 1px 5px #000;
       -moz-box-shadow: 1px 1px 5px #000;
        -ms-box-shadow: 1px 1px 5px #000;
         -o-box-shadow: 1px 1px 5px #000;
            box-shadow: 1px 1px 5px #000;
}

Simple, right? Just substitute virtually any other vendor-prefixed CSS3 properties that share the same syntax and this technique will work just fine.

So where won’t it work? Gradients. Ugh, I know, right? Safari 5.1, which only came out with the release of Lion, is the first version to bring its gradient syntax into sync with the W3C proposal and every other browser vendor’s current implementation.

Off the top of my head, it seems safe to say that older versions of Chrome probably won’t support it, but Chrome updates automatically, so it’s much less of a concern. Keep an eye on your visitor logs for Safari 534.50 or later and sooner or later it’ll be safe to drop the older Webkit gradient syntax.

You might be thinking this might also not work with Firefox’s stupid border-radius syntax. Well, stop. Use the border-radius shorthand instead. Unfortunately, older versions of Safari won’t recognize the shorthand, but remember, we’re talking about rounded corners here, which degrade incredibly gracefully. You don’t care if old versions of Internet Explorer get rounded corners, do you? Occasionally you have to leave Safari behind too. Just use the shorthand and move on.

Back to this mixin technique. It works fine when you have one value, but what if you want to specify more than one box-shadow? There’s two ways to handle that, and for my money, one is better than the other.

Here’s the less good way:

@mixin box-shadow ($box-shadow-1, $box-shadow-2) {
    -webkit-box-shadow: $box-shadow-1, $box-shadow-2;
       -moz-box-shadow: $box-shadow-1, $box-shadow-2;
        -ms-box-shadow: $box-shadow-1, $box-shadow-2;
         -o-box-shadow: $box-shadow-1, $box-shadow-2;
            box-shadow: $box-shadow-1, $box-shadow-2;
}

Separate the two shadow values with a comma, just like you’d do with normally.

div {
    @include box-shadow(1px 1px 5px #000, 1px 1px 1px #000);
}

Here’s the way I prefer to handle this.

Just keep the original mixin you set up earlier. Then, set up a variable that contains both box shadows:

$realistic-drop: 1px 1px 5px #000, 1px 1px 1px #000;

Just call it like this:

div {
    @include box-shadow($realistic-drop);
}

You can make the variable as complicated as you want. Add 100 drop shadows and you still just need to call one variable.

Take advantage of Modernizr

Have I mentioned that I love Modernizr? Only constantly. But where do you stick all those Modernizr classes in your stylesheet? Should you use them inline or make a separate section of your stylesheet and keep them all together? With SASS, there’s a good case to be made for keeping them together because SASS’s nested selector syntax will help you keep track of those Modernizr selectors.

Here’s an example:

.no-rgba {
    div {background: #fff;}
    p {color: #333;}
}

This becomes:

.no-rgba div {
    background: #fff;
}
.no-rgba p {
    color: #333;
}

Depending on how much you take advantage of Modernizr, this can come in really handy. RGBA is pretty basic, but once you start getting into things like 3D transforms, where you probably have to rewrite large parts of your layout to gracefully degrade, you’ll be glad you’ve got SASS to help keep your selectors in check.

That is not all

This isn’t supposed to be the definitive guide to SASS. It’s really just a few things to help you build up speed a little faster. If you’re looking to take it to the next level, check out the Compass Framework or Bourbon.

As usual, there’s a Gist on GitHub. Hit me on Twitter or comment at GitHub if you want to shower me with praise or anything else.

Simple IE 6 alert with jQuery

IE6 alert

First, let me say I realize that in 2011 we’re supposed to be detecting features, not browsers. Feature detection is superior to browser detection, since it lets us actually accommodate antiquated browsers. Plus, with Modernizr, it’s easier than browser detection ever was anyway.

Nine times out of 10, you can create an experience that will gracefully degrade by taking advantage of Modernizr. Occasionally, however, it adds a lot more time to a project.

Recently I had to re-code a site to 2011 standards while keeping the same design. When it was all said and done, just about everything worked fine in IE 6. There wasn’t much to change in the navigation, however. The nav had previously relied on an IE DHTML behavior to make the :hover pseudo-class work on elements other than links, which was the kind of thing we wanted to avoid this time around. Sure, we probably could have made it work with jQuery, but that would have defeated the purpose of modernizing the code and slimming down the page weight. The pure CSS approach already worked fine for 98 percent of the site’s visitors.

The decision to drop IE 6 support had been made even before I started this project, but I didn’t want to leave that two percent hanging without some kind of warning when everything but the nav was just fine. So we decided to add a message for IE 6 users.

There is no shortage of easy to implement IE 6 warnings on the web, but they all seem like overkill. Plus, if you’re using HTML5 Boilerplate, you’re already detecting IE 6 using a foolproof method.

HTML5 Boilerplate uses IE Conditional Comments, which are nothing new really, but H5BP packages a few in a very useful format. Take a look:

<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

This adds a different class to the html tag for several version of Internet Explorer. We can use jQuery to take advantage of these classes without bothering other browsers.

First, let’s create the message text. There’s a number of ways you could do this, but we’re going to put a block of HTML in another file and then load that file using jQuery.

Put this in a file and name it alert.txt:

<h1>Whoa there!</h1>
<p>That's a pretty old browser you got there. You'll have a better experience here if you upgrade to something from the past decade. I recommend <a href="http://google.com/chrome" title="Chrome">Chrome</a> or <a href="http://firefox.com" title="Firefox">Firefox</a>.</p>

Now, here’s the jQuery you’ll need to get it into your page. You could shorten this a little bit, but I want to make it as clear as possible.

$('document').ready(function(){
// Grab the message from the text file
	var ie6message = 'alert.txt';
// Create a div to hold the alert
	var alertdiv = $('<div id="alert">');
// Load the message into the div
	alertdiv.load(ie6message);
// Insert the message into the page. Notice the .ie6 class, which only appears when using IE 6.
	$('.ie6 body').prepend(alertdiv);
});

And here’s all the HTML you’ll need to get started:

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
	<head>

	</head>
	<body>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<script src="script.js"></script>
	</body>
</html>

Personally I can’t stand tutorials and drop-ins that try to design your site for you, so I’m not going to tell you how to style this. Just drop some styles in your stylesheet and you’re all set. Also, it’s probably not a good idea to be quite so preachy or condescending as this message. Change it to suit your visitors and the voice of your site.

Here’s a demo page that will let you see it in all browsers. Want to tell me why this is awesome/terrible? Tell me on Twitter or comment at GitHub.

Fancy reveal with CSS3

Here’s a little thing I put together that hides a comment form (or whatever) until the user requests it, and then shows it with a nice little CSS3 animation. I’m planning to use it on the Kennedy Park Disc Golf Forum once we get a little more content in there.

The CSS here is not terribly complicated, but there’s a few things to take note of. Most of what makes this “fancy” is in the CSS3 transitions and animations, but even these new methods depend on good old CSS positioning. To get started, the elements you see here, the article and form, are inside of a container div with position: relative; set on it. This doesn’t do much except to make it available to be positioned, or to have other positioned elements work with it. Notice that most of the styles applied to the article are just for show.

The article is also using position: relative;. The form, however, is using position: absolute;, which takes it out of the normal flow of the document. This allows us to use z-index to put it behind the relatively positioned article.

The animation is triggered when the “add” or “cancel” links are clicked. When they’re clicked, jQuery adds or removes a class that has a CSS animation attached to it. It’s all pretty simple but it ties together to make a nice effect.

Keep in mind that in a real-world situation, you would use Modernizr to detect css animation support, and you would also probably use more specific selectors. It’s also probably not the kind of thing you’d want to do on mobile devices, either, but that’s what media queries are for.

Go ahead and screw around with it on jsFiddle or fork it on GitHub.

Adding custom post classes in WordPress

Here’s my first attempt at writing something useful on this site. Don’t hate me if this has been said before on a million other sites.

The WordPress post_class() function normally spits out a bunch of semi-useful classes by default, but unless you want to have to use classes like “.post-734″ in your stylesheet, sometimes you need to go a step further.

Over at Digging into WordPress, Chris Coyier has an easy tip on how to add custom classes to post_class().

As it turns out, it’s trivial to add a custom class to a post. Here’s all you have to do:

<?php post_class('classname'); ?>

That’s pretty self explanatory, but you’ve still got to hard-code that class into your template. What if you want to change it on a per-post basis? Well that’s easy: Just use a custom field. Here’s how:

Step 1

Create your custom field. Let’s use “custom_class” as our name and “fancy” as the value.

WordPress custom field screen

Step 2

Set the value of the custom field as a variable inside your loop.

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
		<?php $custom_classes = get_post_meta($post->ID, 'custom_class', false);  ?>

Step 3

Now, let’s use that variable in post_class(), instead of the hard-coded value we saw earlier:

<article <?php post_class($custom_classes) ?> id="post-<?php the_ID(); ?>">

That’s it. You can use the same custom field multiple times in a single post. The false you see above means it will return an array of values, so if you’ve got ten “custom_class” custom field values, you’ll get all ten as custom fields in that post.

Custom field generated code

This simple technique is already in use on this site, and it will allow me to eliminate a plugin on this year’s redesign of The Yule Blog.

I’ve created a gist on GitHub, so go fork it or comment there, if that’s your thing.

Well, I’m back

I figured that since I’m one of those guys who make websites for a living, I should probably have one of my own. I can’t remember the last time I actively maintained a personal blog, but it was probably 2004 at the latest.

I don’t intend for this blog to be a whiny journal of thoughts or cat pictures—that’s what Twitter is for. Maybe I’ll write about web development or post the occasional CSS demo or how-to guide too.

At any rate, blogs are made to be abandoned, so I need to set the bar low right now.

It’s good to be back.