If you’ve ever attached an event handler to the window’s resize event, you have probably noticed that while Firefox fires the event slow and sensibly, IE and Webkit go totally spastic.

PPK lays it out like this:

• In IE, Safari, and Chrome many resize events fire as long as the user continues resizing the window.
• Opera uses as many resize events, but fires them all at the end of the resizing.
• Firefox fires one resize event at the end of the resizing.

When I first saw John Hann’s debounce post, this use case is what I immediately thought of.

This isn’t exactly throttling, but it’s close. Basically debouncing will fire your function after a threshold of time (e.g. 100ms) has elapsed since the last time it’s tried to fire. Throttling would withhold subsequent firings, but debouncing waits for the last one and runs that.

Take a look at the difference on the demo.

The code for smartresize:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

(function($,sr){

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;

      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null;
          };

          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);

          timeout = setTimeout(delayed, threshold || 100);
      };
  }
  // smartresize 
  jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');


// usage:
$(window).smartresize(function(){
  // code that takes it easy...
});

Pretty straightforward stuff. What else do you think would be an appropriate use of debounce()?

In the current discussions around fonts on the web, there is much confusion between the techniques. Most seem to think that TypeKit and .webfont are our only options. They are not, but the rest of the landscape is quite busy.

Things have been moving very quickly in the last three weeks, so let me break it down like this:

• Webfont services: TypeKit, fontdeck, Typotheque
• Proposals: EOT-Lite, .webfont, ZOT, webOTF
• Implemented standards: @font-face using EOT and TTF
• JavaScript-based font solutions: sIFR, Facelift, Cufón

The commercial webfont services players

While many have considered TypeKit as an alternative to .webfont, it’s just a smart implementation of CSS and JavaScript along with a shop and licensing model. I agree with Pablo Impallari who commented:

You don’t need typekit, .webfont or any other solution. You can start using real fonts on the web right now.

Typekit makes a somewhat complicated implementation drop-dead easy, but if you’ve used sIFR before, than I’m confident you can handle this on your own.

The licensing legwork that TypeKit is doing is a significant value-add and may be worth it for people who don’t want to deal directly with font resellers. I’m quite interested in how the smart folks at Clearleft expect to differentiate their competing service, fontdeck.

Typotheque and Kernest are also new entrants to watch, both created by font shops. Both seem to only license their own foundries’ typefaces, so their library size may end up being quite small, but I can say right now Typotheque’s offering looks strong.

At the same time, we’ve had web font services already: Fontburner and Flir Premium, but they never really gained popularity, so I’m surprised people expect such a different outcome from these new players.

The EOT-Lite and .webfont proposals

The general complaint from the type community around non-EOT @font-face is that the naked font is so accessible, anyone could trivially take it off a webserver and install it on their machine. These two proposals offer a “garden fence” approach to protection; it’s still quite easy to get inside and snag the font, but it’s harder than if there were no protection at all.

.webfont, the format proposed by Tal Leming and Erik van Blokland is a great compromise solution: basically a zip file containing both an xml file of metadata and the font. While it uses the same css @font-face syntax, and everyone seems to love it, having it work in all browsers is at least three years off.

EOT-Lite, on the other hand, seems to be covered much less in roundups to date. The basic idea is that it’s the same as EOT but without the two major complaints of the format: domain binding and MTX compression. (Interesting as, the compression’s patent owner is offering to free it up.)

The huge plus of EOT-Lite is that the format works, right now, in IE4-IE8. Adobe, Monotype, Microsoft and a cadre of type shops support it. Perhaps surprising for some, Mozilla is also quite involved in the EOT-Lite discussion, not only helping to define the spec, but also making a test build of Firefox that handles the new format.

ZOT is a new format proposed by Mozilla; essentially TTF with compression. It’s well considered, but as .webfont comes with the same advantages and already has a wave of support, I think ZOT is best left as an academic discussion. Oh, and Berlow’s OpenType permissions table – which would have been a great idea to have in 2000, but not now.

Update 2009.08.10: .webfont and ZOT merged their proposals. It’s now called WebOTF.

The @font-face standard

By my calculations, the current implementation (using EOT or TTF/OTF) covers ~70% of users. When Firefox 3.0 users upgrade to 3.5 that figure will increase to ~90% of users (I bet we’ll see that within six months). Things still do visually look a little different across browser implementations, but they currently work cross-browser and with fixes like forcing Cleartype on for web fonts in Firefox, render quality is improving steadily.

1
2
3
4
5
6
7
8
9
10
11

/* it's this easy: */
@font-face {
  font-family: 'Gentium';
  src: url(Gentium.eot); /* EOT for IE */
}
@font-face {
  font-family: 'Gentium';
  /* IE ignores this one because of the format value */
  src: url(Gentium.ttf) format("opentype");
}
h1,h2,h3 { font-family: 'Gentium', Tahoma, sans-serif;

I generally side with the concerns of type foundries here, rather than the Fuck The Foundries crowd. I want myself and other designers to have access to the best of typography, but understand the fonts used for Firefox/Webkit are a little too naked at this point. While we’re waiting for the rest of this to pan out we may see a new market of type designers that are comfortable with naked fonts (like David B?ezina), but I’m skeptical about the efficacy of that.

JavaScript-based custom font solutions

We’ve had sIFR for nearly 5 years and I’m glad we have, but we now have better options. After significant research I think Cufón is the best library in this space; it’s small, clever, and very performant. However, many foundries aren’t ready to license their typefaces for use with Cufon. Facelift is a great alternative here, as it doesn’t expose the font data to the browser (instead generating PNGs via PHP), thus very licensing-friendly.

These libraries will be useful in bringing custom fonts to older browsers (currently: Firefox 3.0, Chrome, and Opera 9), but still lack flexibility when it comes to rtl languages.

It’s also possible that they won’t be treated only as a fallback solution. If foundries remain unwilling to license for the naked @font-face implementation in Firefox and Webkit, we may have no choice but to use Cufón while we’re waiting for these browsers to adopt EOT-Lite or .webfont. In fact, Monotype’s web embedding EULA currently allows use with siFR and Cufón, as long as there is domain-binding.

Conclusions

I don’t think webfont services are the future, but I do think the landscape is hairy enough now to convince web developers to take the easy route by relying on a TypeKit or Fontdeck for their custom type. Taking advantage of the best techniques available isn’t insurmountable without a hosted webfont service, and I think we’ll see developers going it alone with their own implementations and licensing directly with the font resellers.

I believe EOT-Lite is the right direction for webfonts right now. It already works in the most stubborn browser, and since Firefox just released a test build with support for EOT-Lite, it’s looking more reasonable than ever. It’s also quite interesting that after the months of debate at the W3C surrounding Microsoft’s proposal of making EOT the standard, it took quite some time for the sensible proposal of EOT-Lite to emerge. I guess both sides had to soften a little. :)

New release

The 1.2 release of both the infinite scroll wordpress plugin and jQuery plugin is now out! For the wordpress plugin, it was mostly minor bugfixes and leveraging jQuery if it was already present on the page.

There are a few new features in the 1.2 release of the jQuery plugin I’ll detail:

• The bufferPx option. Allows you to increase the chance that the next page of data will be retrieved and loaded before the user gets to the end of the page.
• The errorCallback function. A function called when a requested page 404’s or when there is no more content.
• localMode boolean option! If set to true, you can enable infinite scroll within a div with a scrollable overflow. Easier to see than read, so here’s a demo. This feature was requested by Jörn Zaefferer, and since so much of my jQuery development was enabled by his stellar work; it had to be done.

Of course, it’s tested on all the major and latest browsers. Please comment here or on the site if you find a bug.

Version 1.2.090804. Documentation
jquery.infinitescroll.js (9.1k)
jquery.infinitescroll.min.js (3.6k)

Grid-a-licious support

This eye-catching wordpress theme has gained quite a following, with the highest profile ones all leveraging infinite scroll. This is all quite flattering, as this theme is probably the hardest wordpress theme to integrate with infinite scroll. :)

I’ve written up a very comprehensive walk-through on how to get them friendly: Guide to adding Infinite Scroll to the Grid-a-licious theme

If you have any problems, leave a comment on that discussion board thread.