Paul Irish

Making the www great

High-res Browser Logos

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.

Head to: github.com/alrra/browser-logos

Includes much more than the standard five browsers.

2011.04.13: new chrome, chromium and IE9 logos! (i’ll better integrate these later on maybe)
2011.05.19: Peter Lubbers of Kaazing has put all the updated logos together and has all sizes, both individual and group imagery. Also run through OPTIpng! Awesome. http://paulirish.com/lovesyou/new-browser-logos/ ← 2012.02.03: Updated this post. 2012.11.06: Reorged all the files. Updated this post. Freshness. More high resolution goodness.
2012.11.07: OMG! it’s on GitHub: paulirish/browser-logos.
2013.07: The GitHub project has gotten lots of attention and maintenance. It’s awesome. Thanks Cătălin Mariș!
2014.03.01: The GitHub project was moved to alrra/browser-logos!

10 Things I Learned From the jQuery Source

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

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:

1

<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:

1

<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<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 <html> 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: