Paul Irish

Announcing: HTML5 Boilerplate

Paul Irish — Tue, 10 Aug 2010 19:05:17 +0000

When kicking off a new project, I've always wanted to take with me all the kickass tricks I learned on the previous one. This project has been on and off for the last 2.5 years with a whole lot of on lately. Finally, HTML5 Boilerplate is ready to share.

It's essentially a good starting template of html and css and a folder structure that works. But baked into it is years of best practices from front-end development professionals. Take a peek through the source to get a feel of what's inside. And if you think there's too much? Delete key that badboy.

I'm very interested in your contributions.. what else deserves to be in this base template?

High-res browser logos

Paul Irish — Wed, 04 Aug 2010 16:21:42 +0000

You may want these for a presentation, a, blog post or for the site featuring your brand new awesome lightbox script (please no!). They are 32bit PNGs, each have their own official shadow treatment, and no background matte color.

256 x 256

128 x 128

64 x 64

32 x 32

16 x 16

The smaller sizes are all scaled down instead of taking the true icon assets. If you would like to create proper non-scaled small sizes, I'd gladly accept them. :)

10 Things I Learned from the jQuery Source

Paul Irish — Mon, 14 Jun 2010 15:56:43 +0000

Last weekend was the incredible TXJS conference. It was a grand time in hot hot Texas. Joe Bartlett has a great conference roundup, rebecca's pix are quite pretty, and most of the speaker slides are on the official site.

I've rerecorded my talk in screencast form. Here's what to expect from the 52 minute video:

It’s jQuery on the big screen. We’ll open the jQuery source and run through how the jQuery object works, covering self-executing anonymous functions as a global abatement technique, several interesting jQuery methods, internal jQuery paradigms, and hiddenhancements. You’ll learn JavaScript techniques you can apply to your own code, as well as the basic workings of jQuery itself.

Enjoy. Please comment if you have a question or if I messed something up. :)

youtube hosted version here

2010.07.21: jQuery Deconstructed is a rather nice way to look through the source. Also, the jQuery Source Viewer.

Also, (you should already know this, but…) if you like this screencast you should subscribe to the yayQuery Podcast. It's techy but entertaining and there will be smiles.

Details on the new Google Webfont API

Paul Irish — Wed, 19 May 2010 17:12:51 +0000

As you might have see, Google now offers a full webfont API. Luckily, they let me dig into the service and code a few weeks back. So let me give you the lowdown on the features and what you can do with it…

Here's adding a @font-face declaration for Tangerine, a nice scripty font:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Tangerine">

You'll then reference it font-family:Tangerine and be all set. As for something a bit more complicated:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Inconsolata:italic,bolditalic|Droid+Sans">

There's Inconsolata regular, italic and bold-italic and Droid Sans regular.

There is a high-quality curated portfolio of open fonts available (Raph Levien, designer of Inconsolata guided this project). And view the real documentation on the CSS api.

Obviously there are huge caching benefits to using the Google Font API, plus they're very focused on performance and you can expect things to be fast and FOUT to be minimized. But on the topic of FOUT…

The WebFont Loader is also making its debut. This is a javascript library collaboration between the good boys at Typekit and Google. It basically allows a lot of control over the display details of webfonts.

Let's say you want Firefox to not have the FOUT, but rather mimic webkit's behavior of invisible text until the font is loaded:

<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Cantarell']
    }
  });
</script>
<style>
  .wf-loading h1 { visibility: hidden; }
  .wf-active h1, .wf-inactive h1 { 
    visibility: visible; font-family: 'Cantarell'; 
  }
</style>

The WebFont Loader API provides some classes on the element (a la Modernizr) and a bunch of javascript callbacks.

Check out all the WebFont demos, showing off all its capabilities. One of my favorite parts is that you can use the events and hooks it provides with your very own hosted fonts (in that demo I load Taggeschrift from paulirish.com).

The webfont loader is now an open-source project on github. Feel free to peek under the covers. Oh and do check the project docs: getting started, webfont loader, technicalities, and faq.

Ask any questions in the comments and I'll do my best to clarify. :)

2010.05.19: The Google webfont previewer tool (with jQuery!) is pretty tight, too.

2010.05.20: Update via Florian to use .wf-loading to hide for FOUT prevention.

Take a look at some of my other (recently updated) webfont stuff:

My harmonious background canvas

Paul Irish — Mon, 17 May 2010 18:23:20 +0000

So I happened upon squaredesign site and was impressed by their trippy background squares that responded to mouse movement (tutorial here).

Illustration done with Harmony

I got jealous and wanted my own interactive background. Plus @miketaylr's is mad sweet. Turns out, I'm lazy. Never fear. Mr Doob recently put out the magical canvas procedural illustration application Harmony and generously licensed it MIT.

I adapted the code for use as a background, but felt like it still missed something. It needed an easter egg. Oh yes. Taking inspiration from the Harmony Harmony meme (example), I decided an Erasure music video was in order.

Leveraging code from the $1 Unistroke Recognizer (which is righteous), it takes snapshots between drawing pauses and looks to see if you drew a star. If it thinks you did.. then:

The code for the bg integration is on github: /paulirish/harmony
The code for doob's harmony app is on github, too: /mrdoob/harmony

Take it for a spin if you like. Experiment with some of the other brushes. Thanks again to powerhouse Mr Doob for sharing such beautiful work.

(I'll probably be removing the drawing canvas in a week or so. It's a bit of a resource hog!)

@font-face gotchas

Paul Irish — Wed, 05 May 2010 18:35:43 +0000

Over the past few months, I've collected a few worthwhile notes on @font-face that are worth reading over if you geek out about this stuff…

in Webkit (Chrome/Safari), applying font-weight:bold to faux-bold some @font-face'd text will not succeed. Same applies for font-style:italic. You can fix by adding the following to your @font-face declaration: (via doctype, crbug/31883, crbug/35739, webk.it/34147)

      font-weight:normal;
      font-style:normal;
      font-variant:normal;
      /* these values are defaults in FF/Opera/IE but not webkit */

FF/Linux cannot serve webfonts from the file:// protocol. (Also, a tome on type quality with linux from Evan Martin)
TrueType format renders with a better quality than Opentype CFF. (sez Typekit) (fontsquirrel default)
In IE6-8, using createStyleSheet and then setting styleElem.styleSheet.cssText to a text value that includes a @font-face declaration going into will crash IE6-8. (src)
font-size-adjust (only supported in Firefox) normalizes x-height and may improve the FOUT.
text-transform doesn't play well with @font-face in current implementations. (via snook & Gary Jones)
@font-face doesnt play nice with css transitions. (via ethan marcotte)
IE6 under High Security settings will pop a security dialog when a site tries to use @font-face. (via Wouter Bos)
There have been reports that when a font is segmented into multiple files, a css text-shadow can overlap in a weird way. (pics plz? :)
Aaron James Young dug into @font-face on obscure linux-only browsers.
If a @font-face declaration is within a media query @media screen { ..., it will fail in Firefox. (Thx Ben Kulbertis) http://bugzil.la/567573
Hosting the fonts on a different domain? Firefox requires some extra effort; you'll need to add the Access-Control-Allow-Origin header, whitelisting the domain you're pulling the asset from. Example .htaccess config here. Alternatively, you can use the base64 encoding in CSS (create it with the fontsquirrel generator) to avoid setting headers. details here
SVG Fonts - Currently SVG is the only way to get webfonts working on iPhone and iPad. It is the most rudimentary format for fonts on the web.
- SVG Fonts lack kerning and other complementary information
- SVGz is a format that bakes compression right in and will save you bandwidth overhead. But you'll need to add this to to your .htaccess for this benefit. AddType image/svg+xml svg svgz AddEncoding gzip svgz (via @fontsquirrel)
- SVG fonts don't work with a cache manifest. Due to the manifest treating # as comments and Mobile Safari requiring the font ID reference in the URL. [Unverified] (via Tristan Dunn)
- Using text-overflow: ellipsis; turned the contents into only "…" and nothing else. (via Tristan Dunn)
- Letter-spacing css doesnt appear to work with SVG fonts.
IIS Needs some custom mimetype configuration for serving webfonts. To enable, go to: Default Web Site > Properties > HTTP Headers > File Types > New Type…
- .otf : font/otf
- .svg : image/svg+xml
(thx ProtectedVoid & Tom Nelson) — Test page

@font-face links that might have sneaked past you

@font-face internationalization tests from the W3C
Kernest open-sourced its font server, Fontue
Bert Bos gave the full history of webfonts at SXSW

And.. regarding @font-face syntax

I now recommend the bulletproof smiley variation over the original bulletproof syntax.

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('?'),
         url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

From the bulletproof post:

Yes, it's a smiley face. The OpenType spec indicates any two-byte unicode characters won't work in a font name on Mac at all, so that lessens the likelihood that someone actually released a font with such a name.

There are a few reasons why smiley is a better solution:

Webkit+Font Management software can mess up local references, like turning glyphs into A blocks. (crbug.com/33173)
On OS X, Font Management software may alter system settings to show a dialog when trying to access a local() font that's accessible outside of Library/Fonts. More detail on my bulletproof post. (crbug.com/29729) Font Explorer X is also known to mess up other stuff in Firefox: bugzil.la/531771
Although it's unlikely, you could reference a local() font which is completely different than what you think it is. (Typophile post on different fonts, same name) At the very least its a risk, and you're ceding control of the type to both the browser and host machine. This risk may not be worth the benefit of avoiding the font download.

These are all pretty edge case issues, but it's worth considering. FontSquirrel has already made the smiley syntax the new default in the Generator, and you should use it going forward as well.

2010.05.10: Added IE6 security issue from Wouter.

2010.05.13: Added segmented font/text-shadow issue.

2010.05.17: Link to linux @font-face research

2010.05.22: Media Queries firefox failure added.

2010.05.29: Cross-domain tricks added. SVGz trick added

2010.07.06: Added a bunch around SVG fonts

Take a look at some of my other (recently updated) webfont stuff:

Bug tracker short urls

Paul Irish — Tue, 04 May 2010 15:04:26 +0000

I've found myself filing and watching tickets on browser bug trackers a lot more lately.

Turns out, they have some handy shorturls which make for easy linking to tickets.

http://webk.it/19264 for webkit
http://bugzil.la/475606 for firefox/mozilla
http://crbug.com/11359 for google chrome
http://crosbug.com/59 for google's chrome os

In fact, the webk.it URLs are debuting today! I luckily convinced Wolfango Chiappella of Wolfango'Studio (who owns the domain) to set up a redirect. Grazie di cuore!

2010.07.22: Mihai of the google reader team added a nice new one for chromium changesets: http://crrev.com/41850
Mozilla also has a mysterious URL shortener for all of their MDC docs and such, but I don't know how it works other than bit.ly using it automatically. *magic!*

Goin' GOOG

Paul Irish — Fri, 09 Apr 2010 15:01:07 +0000

Big news! (for me, at least) I'm taking a position on the Chrome team doing Developer Relations. I'll be evangelizing HTML5, Chrome, Chrome OS, and everything under the Open Web umbrella. It'll be a bunch of writing, speaking, tutorials and guides, and engagement with the developer community. (Hey guys! :)

As I'm very passionate about all this, I'm quite excited about this opportunity. Google Chrome has become the browser to beat very quickly. It's a solid platform for browsing and developing as well. I can't wait to join the team and start kicking ass, making Chrome ideal for developers and pushing the open web forward.

As part of this, I'm also moving to San Francisco. Farewell, my dear Boston. *sniff* :(

I'm leaving an incredible team of UX architects, interactive designers, software engineers, and front-end developers at Molecular/Isobar. It's been 3.5 years and I would've easily stayed longer. If you're in Boston, Toronto or SF and want to develop incredible sites and apps for high-profile clients, I couldn't recommend working there enough. <3z

This is all happening over the next 60 days, along with a busy schedule of JSConf, Bay Area jQuery Conference, TXJS, and a few weddings.

I plan to continue to be active in the jQuery community (thx to my compadre Karl Swedberg for the referral!), and continue developing Modernizr and CSS3Please. I also got a few more projects on the way. Exciting times. :)

SVG Filters on HTML5 video

Paul Irish — Mon, 29 Mar 2010 04:24:14 +0000

This weekend I hung out with some SVG all-stars and learned how SVG, HTML, and CSS can combine for some badass visual filters applied to content. Clearly it's the most fun to apply it to , though I could have done it to any HTML. Peep the video:

Demo page: SVG filters on html5 (requires a Firefox nightly)

Blur is certainly the most useful, I'd say. For instance, Mike Matas's new site could dynamically blur the images instead of manually cutting blurred jpgs.

Leave a comment if you can think of other use cases for filters like these on your HTML content.

Introducing… CSS3Please.com

Paul Irish — Tue, 09 Mar 2010 15:54:42 +0000

Man, whenever I'm writing some css3, I get so tired of writing all the vendor-specific prefixes (like -moz-border-radius). Combo that with remembering who supports what and I ~~wanted~~needed a shortcut.

Today, I'm happy to release v1.0 of css3please.com: a cross-browser css3 rule generator, produced by Jonathan Neal and myself. In addition to syncing and normalizing changes across the necessary properties, it also sneaks in IE support for a few features via IE filters. Right now it helps you write the rules for: border-radius, box-shadow, linear-gradients, rotation and @font-face. A few more transforms like skew and scale are on their way, stay tuned.

Shouts to all the good people doing research and making tools in the css3 arena: John Allsopp, Chris Coyier, Stoyan Stefanov, Damian Galarza, Ryan Seddon, border-radius.com.

Please leave comments and feedback below.

2010.04.06 - Today I pushed a big update. Mousewheel support is much better and the clipboard interaction sucks a lot less. We now have 360° IE rotation support thanks to Zoltan as well as css transitions support. I also fixed a number of small bugs that were reported.

Based on the popularity of this tool, I'll definitely keep working on it; making it better for ya'll. If you would like to contribute, please contact me.

Chytac pa-belarusku (belorussian translation)

Front-end development feeds to follow

Paul Irish — Mon, 01 Mar 2010 22:54:14 +0000

If you're running low on front-end oriented stuff to read, I've got ~~130~~ exactly 200 feeds of high quality for ya.

I've republished this as a google reader bundle, for easy subscribing.

If you use another feed reader, you can import them via the OPML file: frontendfeeds.xml

2010.07.07: Updated to google reader bundle. added 70+ feeds

How to fulfill your own feature request -or- Duck Punching with jQuery!

Paul Irish — Tue, 23 Feb 2010 18:27:50 +0000

Wait, what? Well first, duck punching is another name for monkey patching. Monkey Patching is a technique to "extend or modify the runtime code of dynamic languages without altering the original source code." But then some Ruby hackers decided that since we rely on duck typing so often, a more proper name was in order:

… if it walks like a duck and talks like a duck, it’s a duck, right? So if this duck is not giving you the noise that you want, you’ve got to just punch that duck until it returns what you expect.^[1]

In jQuery we can use this to great effect. We'll employ an AOP-like approach (aspect-oriented programming), maintaining the original function but wrapping it with our enhancement.

Example 1: Adding color support

(This is a silly example, but hopefully it explains the idea. )
You're fully aware that you can use certain color names in HTML. But sadly, everyone's favorite Crayola™ color, Burnt Sienna, can't play along. Well, not until now…

(function($){
 
    var _oldcss = $.fn.css;
 
    $.fn.css = function(prop,value){
 
        if (/^background-?color$/i.test(prop) && value.toLowerCase() === 'burnt sienna') {
           return _oldcss.call(this,prop,'#EA7E5D');
        } else {
           return _oldcss.apply(this,arguments);
        }
    };
})(jQuery);
 
// and using it...
jQuery(document.body).css('backgroundColor','burnt sienna')

Let's walk through that a little bit slower, shall we?

First we start off with a self-executing anonymous function that makes a happy closure while remapping jQuery to $:

(function($){
    // ...
})(jQuery);

Now we save a reference to the old css method as a local variable, and set up our new definition for that method:

    var _oldcss = $.fn.css;
 
    $.fn.css = function(prop,value){
        // ....
    };

Inside our function definition we have an if statement that breaks up two code paths, the new enhanced route, and the old default:

        // if the user passed in backgroundColor and 'burnt sienna'
        if (/^background-?color$/i.test(prop) && value.toLowerCase() === 'burnt sienna') {
 
            // call the old css() method with this hardcoded color value
            return _oldcss.call(this,prop,'#EA7E5D');
        } else {
            // otherwise call the old guy normally, taking his return value and passing it on.
            return _oldcss.apply(this,arguments);
        }

Scroll back up to see the whole thing together. Can you dig it?

Example 2: $.unique() enhancement

$.unique only winnows an array of DOM elements to contain no duplicates, but what if you want all non-duplicates of any type? Here's an upgrade:

(function($){
 
    var _old = $.unique;
 
    $.unique = function(arr){
 
        // do the default behavior only if we got an array of elements
        if (!!arr[0].nodeType){
            return _old.apply(this,arguments);
        } else {
            // reduce the array to contain no dupes via grep/inArray
            return $.grep(arr,function(v,k){
                return $.inArray(v,arr) === k;
            });
        }
    };
})(jQuery);
 
// in use..
var arr = ['first',7,true,2,7,true,'last','last'];
$.unique(arr); // ["first", 7, true, 2, "last"]
 
var arr = [1,2,3,4,5,4,3,2,1];
$.unique(arr); // [1, 2, 3, 4, 5]

A Duck Punching Pattern

Here's the bare pattern. Feel free to use this as the basis of your own:

(function($){
 
    // store original reference to the method
    var _old = $.fn.method;
 
    $.fn.method = function(arg1,arg2){
 
        if ( ... condition ... ) {
           return  .... 
        } else {           // do the default
           return _old.apply(this,arguments);
        }
    };
})(jQuery);

What else could I use this for?

Some other uses I've had or seen for this sort of thing:

So while you're free to file a feature request of jQuery, most of the time you can actually enhance jQuery's methods yourself! Enjoy.

On jQuery's live()

Paul Irish — Fri, 22 Jan 2010 17:59:57 +0000

Since the release of 1.4, there's been a lot of discussion about live(). Now that it's almost as fully featured as bind(), it's getting quite a workout.

One of the larger calls to action is to introduce $.live(selector,eventType,handler). There are two primary reasons I've seen behind this proposal:

There is a performance hit for the initial selection in $('a.whatever').live(.. that isn't neccessary
live() cannot work on any arbitrary collection of DOM elements in jQuery object, as a side effect of a very different internal operation, thus providing an inconsistent developer experience than all other $.fn.foo methods.

$.live for performance

Sizzle is used to find any matching elements before the live method discards them an only uses the jQobj.selector property and context. It's a waste, I agree. But you can avoid it. Zachleat posted this technique first. Then I stole a code snippet from @janl to show off in my jQuery Performance talk for jQCon. This inspired furf's jQuery.live() patch. And now jmar777 has resurrected that discussion.

I do not think the performance gain in $.live is worth adding it to jQuery core, by any means. Let's take an example.

Let's say we're dealing with $(selector).live('click',fn)

On every click on the page, the event is caught at the context.. the document. But evt.target points to the top-most element that was clicked on.
jQuery then traverses from evt.target through each ancestor of that node all the way up to document checking if (jQuery(elem).is(selector)).^[source]

I think a reasonable estimated depth of evt.targets is like 8 (From the document to HTML element to BODY and so on.. a depth of 20 is not uncommon by any means). And lets say we have an average 5 clicks on a page.
That's 40 total checks against the selector (plus the original one done at bind time).
So in my opinion a 1/41 speed gain isn't worth changing the API.

Scoping the delegation a context, however has a much larger impact on performance: $(selector,elem).live('click',fn) Here, only clicks within the context are caught, so not only is the parent traversal depth much more shallow, but that entire sequence is avoided for all events occurring outside that area.

The current API to take advantage of this optimization requires code like $('a.awesome', $('#box')[0]).live(… Yuck! So I wrote a patch to deliver this same optimization to any ID-rooted selectors. (The perk being that everyone who learns #id-rooted selectors are fast for selecting get a related perf boost here). But as Justin Meyer pointed out in the comments, it's not as flexible as live() currently is.

$.fn.live cannot operate on any jQuery-wrapped collection of elements

$('a.foo').filter('.bar').live(... // fails
$('a.link').parent().nextAll().live(... // fails
$(this).live(... // fails

Quite simply, $.fn.live needs to be at the top of a chain to guarantee the .selector and .context properties of the jQuery object represent that set. Unlike other $.fn methods, live utilizes those properties and not the actual collection of elements that result from selection, traversing, and filtering.

$.live() and let $.die()

What are the possible solutions?

Turn on a dirty flag in traversal methods, so if you try and live() that collection, it will throw an error.
Deprecate $.fn.live and use $.live(selector[,context],type,handler)
Use $.live to create a "live jQuery object" that defaults to live-bindings: $.live(selector,context).click(fn).mouseenter(fn).unbind("click") ^[source]
Change $.fn.live to operate from a context: $(context).live('selector', event, fn) This bakes the performance benefit from above right in.

Any others? What do you guys think? Is there a solution that preserves backwards-compatibility while solving the issue?

btw- thx to jmar777, yehuda katz, ben alman, ajpiano, brandon aaron and julian aubourg for their great thoughts on the issue.

The people in this discussion got together and hashed out what would make sense. John Resig then landed a new delegate/undelegate API. It's good. :)

Updates from all around - Dec 2009

Paul Irish — Sat, 19 Dec 2009 22:04:28 +0000

A lot of the work I'm doing doesn't turn into new posts so here's a summary of what's been going on:

yayQuery

Since it was announced here, we've come a long way. We just put out our 7th episode (now in HD!). The show format has tightened up and we're putting a lot of time into making it even better. Follow us on twitter or subscribe to catch all the goodness. We also put out an entire episode devoted to what's coming in jQuery 1.4 (aka 1.MOAR), so peep it if you're curious.

jQuery Singalong plugin

I was a finalist at Boston's Music Hack Day with the jQuery Singalong plugin. It essentially allows you to add timed annotations to the HTML5 audio and video elements. (Also it was the first time I legitimately used javascript's Infinity :) In addition, I put out the (very!) alpha jQuery Bouncing Ball plugin. Check out the demos to get a taste

Modernizr updates

Faruk and I pushed out Modernizr 1.1, which can now detect what audio/video formats your browser supports, all sorts of HTML5 forms goodness, and some other ones like localStorage and applicationCache. We're delighted to be part of Mark Pilgrim's Dive into HTML5 book and pumped to help push the edge of progressive enhancement.

@font-face and webfonts

It's a rapidly changing landscape, so I've been keeping all my font-y posts up to date:

Fighting the @font-face FOUT now has a Defeat the FOUT entirely script and detail on when FOUT occurs
Chrome and @font-face now represents the latest status and info.
Bulletproof @font-face syntax now features detail and helpful links when it comes to SVG/WOFF along with the latest gotcha's.

@font-face feature detection

I've updated the existing feature detection script to use a smaller file. (Thanks to the Font Squirrel for the help). You would use this script to detect if support is present or not; perhaps implement a Cufon fallback. These new improvements will make their way into Modernizr 1.2.

I've also added on a isFontFaceSupported browser sniffing alternative. The main benefit here is that you're guaranteed accurate results synchronously. (The true feature detection can't do that, though the new small size is much faster in Firefox.)

Other bits and bobs

The nice guys at that other jQuery Podcast had me on the show in November. I talked about, well.. basically all of the stuff above. :) It's a good show.

I tweeted about a new quick approach to a for loop:

for (var i = -1, len = arr.length; ++i < len; ) // the cool guy loop

The fun part is that the counting expression (the third part) is empty. It's faster than your standard loops, but reverse while() is still quicker. @jdalton beat me to this one, for the record.

Lastly, along with my writers, I've been keeping my mp3 blog Aurgasm fresh with new music you'll love. I've got a lot more things in the pipeline, so right after my Christmas and New Years jaunt around Germany, Denmark, and Scotland, you'll see them soon. Happy December ya'll.

Memorable hex colors

Paul Irish — Fri, 04 Dec 2009 05:50:07 +0000

Hopefully this will save you a trip back to Photoshop's color picker.

#b00b00
#de1e7e
#e1e100
#BADA55
#F0FEAF
#ac1d1c
#facade

These ones are memorable, but not terribly color-appropriate:

#c0ffee
#defec8
#deface
#0ff1ce
#a55

Thx for the awesome suggestions: @mrspeaker, @8centsaday, @wilto, @lrbabe, @twalve
If you have any good ones to add, holler in the comments!

I guess I have a thing for hex colors.. ;)