Articles by

Chris Coyier

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

WebP Image Format

Direct Link

Google has released a new image compression format called WebP (pronounced “weppy”). It is for photographic style images (like JPG) and also lossy (like JPG). Their example gallery has side by side comparisons where the WebP version is equal to …

Drawing Table

I made a thing, in which you can use your mouse cursor to draw on a grid with different colors. You can then copy-and-paste the HTML from the design you made.…

(Updated on )

UI Pattern Ideas: List with Functions

Last week I asked people to participate in a group design project on a specific design pattern: a list with functions. The premise was:

The design pattern we are going to tackle is a list with functions. Think of a

(Updated on )

Promote JS

Direct Link

Finding correct, current, and well written documentation on JavaScript can sometimes be rather difficult. The web has a lot of misinformation on it (can you believe it?!). This is an attempt to get Mozilla’s high quality documentation at the top …

Get YouTube Key from a Link

// Example link:
// <a id="myLink" href="http://www.youtube.com/watch?v=cyRqR56aCKc&feature=PlayList&p=00000000000&index=0&playnext=1">Youtube link</a>

var youtubeLink = document.getElementById('myLink').href;
var youtubeVideoKey = youtubeLink.substr(youtubeLink.lastIndexOf("v=") + 2, 11);

// youtubeVideoKey will return "cyRqR56aCKc"

Vendor Prefix Equivalents

Direct Link

Ever wonder what the Gecko equivalent to WebKit’s -webkit-transition-timing-function is? This chart has got you covered. But more importantly, if the other rendering engines have those properties implemented at all.…

(Updated on )

jQuery Summit

Direct Link

I’m speaking at the jQuery Summit, the 2nd Annual Online, Live jQuery Conference November 16 & 17th, 2010.

If you are interested, use coupon code JQUERY2CHRIS for 20% off!…

ProCSSor

Direct Link

The prettiest of the CSS prettifiers. I find these things quite helpful when I’m inheriting someone else’s CSS and I want to get it into the format that I like the most without doing it by hand. Actually, I usually …