Articles by

Chris Coyier

Founder, writer, designer, spam-deleter, email personality

Feature Table Design

I ran into the feature table design from Shopify over on Pattern Tap and I was like DAMN SHOPIFY, that is one sexy table. I was inspired to try and replicate it. First in Photoshop, then in HTML/CSS. Recreating cool …

(Updated on )

Should you use a template?

I absolutely think that beginner web designers should use templates. And by templates, I mean something that you might buy off ThemeForest or other template selling service. Here are a few reasons why:

  • Tweaking = learning. Templates need to be

#87: Moving Up with MAMP

Working locally with MAMP is awesome, but what about when you need to take that site live? Last time we got a version of WordPress installed locally, now we’ll take that local version and move it to a real live …

(Updated on )

Photography and CSS

It sure seems like a heck of a lot of web designers are also photographers, doesn’t it? And by “photographer”, I mean they own a DSLR and heavily consider aesthetics when taking a picture. Why the overlap of interests? Well …

Basics of Google Font API

Link to CSS files

You essentially hotlink directly to CSS files on Google.com. Through URL parameters, you specificity which fonts you want, and what variations of those fonts.

<head>
  
   ...

   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans">
</head>
Idea: You can avoid an…
(Updated on )

Yay for HSLa

Huge sogging longbottoms? High strength low alloy steel? NOPE, we’re talking Hue Saturation Lightness (and alpha) and it’s a way of declaring color in CSS. It looks like this:

#some-element {
  background-color: hsla(170, 50%, 45%, 1);
}

It is similar …

(Updated on )

Intervals

Standard

You don’t need to create the variable, but it’s a good practice as you can use that variable with clearInterval to stop the currently running interval.

var int = setInterval("doSomething()", 5000 ); /* 5 seconds */
var int = 

To Wufoo

When I decided to leave my last job, I decided I was going to leave at the beginning of the Summer. I was going to bum around the Summer not doing much, maybe even extend that for a whole year. …

Font Stacks

/* Times New Roman-based stack */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

/* Modern Georgia-based serif stack */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream 
(Updated on )

PHP Error Logging

Log errors to a file, and prevent showing them to the user. Make sure that the file exists and youre able to write to it.

# display no errs to user
php_flag display_startup_errors off
php_flag display_errors off
php_flag html_errors off

Shuffle Array

Technique #1
function Shuffle(o) {
	for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
	return o;
};

Usage

var testArray = [1,2,3,4,5];
Shuffle(testArray);

// jQuery to dump out 
(Updated on )