‘20 Things I Learned About Browsers and the Web’

Web-based e-book from the Google Chrome team. Content-wise, it strikes me as a nearly perfect layman’s explanation of what web browsers are and how the web works. It’s really good.

But it’s also fascinating technically. In lesser browsers, each “page” turn is a full reload of the web page. Slow. In modern desktop browsers, though, the page turns happen via AJAX, but the URL in the location field changes too. In Firefox 3, you get AJAXy-looking URLs like “http://www.20thingsilearned.com/#/foreword/3” — a nicer experience, but still nothing I haven’t seen before. But in leading browsers like Safari, Google Chrome, and Firefox 4, you get AJAX page-turning and nice clean URLs like “http://www.20thingsilearned.com/foreword/3”. I did not know that was possible.

Here’s the JavaScript they’re using for this, and here’s some documentation on the new HTML5 history.pushState() and history.replaceState() methods that make this jiggery-pokery possible. Imagine if every team at Google built things with the same design quality and attention to detail as the Chrome team. (Via Michael Heilemann.)

★ Thursday, 18 November 2010