Skip to main content

Chris Coyier

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

Snippet

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 new values to element with ID of 'dump'
$(function() {
   for (var i=0;i<testArray.length;i++) {
      $("#dump").append(testArray[i]);
   }
});
Technique #2
yourArray.sort(function() { return 0.5 - Math.random() });
Read article “Shuffle Array”
Snippet

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 htmlRead article “Validate HTML Bookmarklet”

Article

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 a bunch of cement

Here is another way she could have gone about it:

Scout out area
Determine weather conditions
Make labor assessment
Evaluate different jackhammer models
Stretching and breathing exercises
Get third party opinion
Coffee break
Put hardhat on

Read article “Instant Productivity”
Article

NetNewsWire Theme: Fixed

I love me some Google Reader. I got all my feeds up in there and it’s like having the longest most interesting newspaper ever. It brings me great pleasure to know that when people build all these RSS reading applications, they are essentially just different user interfaces for Google Reader. That way we can play with lots of different ones but still maintain a unified home for our feeds.

The web interface for Google Reader is pretty good. They … Read article “NetNewsWire Theme: Fixed”

Snippet

Glyphs

Special Characters
&quot; &#34; quotation mark u+0022 ISOnum p:before { content:”\0022″; } alert(“\42”)
&amp; &#38; & ampersand u+0026 ISOnum p:before { content:”\0026″; } alert(“\46”)
&lt; &#60; < less-than sign u+003C ISOnum p:before { content:”\003c”; } alert(“\74”);
&gt; &#62; > greater-than sign u+003E ISOnum p:before { content:”\003e”; } alert(“\76”);
Latin-1 entity set for HTML
&nbsp;   &#160; no-break space %A0 p:before { content:”\00a0″; } alert(“\240”);
&iexcl; ¡ &#161; inverted exclamation mark %A1 p:before { content:”\00a1″; } alert(“\241”);
&cent; ¢ &#162;
Read article “Glyphs”

Video Screencasts

#80: Regarding Wheel Invention
Running time: 19:09
Sometimes “reinventing the wheel” is the right way to go. You get control and all the learning that goes into it. Sometimes it is a waste of time and an existing solution will save you time, money, frustration, and it may do a better job.
#79: Complete/Non-Queuing Animations with jQuery
Running time: 19:38
We look at some ways we can ensure that an animation that occurs on a mouse hover completes a full
Read article “Video Screencasts”
Video

#86: First Moments with MAMP

I’m way behind the times on this one, but until recently, I have never really developed locally. Everything I did was “going commando” and working directly on servers. The situation arose where I really needed to, so now I have MAMP (Mac, Apache, MySQL, and PHP) installed locally. It is an excellent program and works great. I go over what it’s like in the first few minutes of using it, and get a fresh copy of WordPress installed locally.

Links Read article “#86: First Moments with MAMP”

Article

New Poll: How many websites do you launch per year?

There is a new poll in the sidebar. RSS readers, you’ll have to make the jump. The question is:

How many websites do you launch per year?

The idea is to gauge how many different projects you all are involved with that actually launch in a year. I’m sure some of you work on sites that we launched long ago and you just work on maintaining and growing them. So if that’s the only web work you did this year, … Read article “New Poll: How many websites do you launch per year?”