Articles by

Chris Coyier

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

@chriscoyier · chriscoyier.net

#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 )
Direct link to the article Yay for HSLa

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 )

Validate HTML Bookmarklet 

javascript:(function(){%20function%20fixFileUrl(u)%20{%20var%20windows,u;%20windows%20=%20(navigator.platform.indexOf("Win")%20!=%20-1);%20%20/*%20chop%20off%20file:///,%20unescape%20each%20%hh,%20convert%20/%20to%20\%20and%20|%20to%20:%20*/%20%20u%20=%20u.substr(windows%20?%208%20:%207);%20u%20=%20unescape(u);%20if(windows)%20{%20u%20=%20u.replace(/\//g,"\");%20u%20=%20u.replace(/\|/g,":");%20}%20return%20u;%20}%20/*%20bookmarklet%20body%20*/%20var%20loc,fileloc;%20loc%20=%20document.location.href;%20if%20(loc.length%20>%209%20&&%20loc.substr(0,8)=="file:///")%20{%20fileloc%20=%20fixFileUrl(loc);%20if%20(prompt("Copy%20filename%20to%20clipboard,%20press%20enter,%20paste%20into%20validator%20form",%20fileloc)%20!=%20null)%20{%20document.location.href%20=%20"http://validator.w3.org/file-upload.html"%20}%20}%20else%20document.location.href%20=%20"http://validator.w3.org/check?uri="%20+%20escape(document.location.href);%20void(0);%20})();

Make a bookmark with the above code, or just drag the following button link to your bookmarklets bar.

validate html…

(Updated on )

Instant Productivity

All jobs are a series of tasks needing to be completed. Let’s look at a construction worker. Today she needs to bust up a bunch of cement. Here is one path of action:

Put hardhat on
Start jackhammer
Bust up

…