The book was written and built by the Google Chrome team, so the bulk of the technical stuff highlights features in Google’s browser. Under the hood, there’s some cool tech going on. There are fancy CSS type treatments and animations throughout. They’ve also recreated the familiar page-flipping animation as you thumb through the book, which frankly smells like the 1990s but adds a rather quaint touch here.
It’s a solid demonstration of how HTML5 can be used to present content in a compelling, “featurey” way. Plus, it’s not just for kids — I learned something new flipping through it, though I’m not saying what. I have a reputation to uphold.
We’ve seen some colorful map mashups in the past, like Hypercities and HeatMap, but few are as abstract and beautiful to look at as Stamen Design’s Pretty Maps.
The aptly-named app pulls sets of geodata from various freely available open mapping projects and plots them atop one another. Pretty Maps grabs street-level data from OpenStreetMap (the “Wikipedia of maps”), land formation data from Natural Earth and place-name and place-shape data from Flickr shapefiles — Flickr’s outlines generated by the tags people have attached to photos taken in that place. So all the data is from crowdsourced databases and either public domain or licensed through the Creative Commons. The maps are generated using TileStache and PolyMaps, two open source tools developed in-house at Stamen.
The result is a map that’s not so much usable for navigation as it is pretty to look at. Cities degrade into abstract and unique blobs, with pastel colors overlaying one another. The shapes are alien looking in texture and density, but instantly recognizable if you’re already familiar with the terrain. Continue Reading “Beautiful Websites: Stamen’s Pretty Maps” »
There should only be one request when you hit any page. So page views equals hits. This is because CSS is inlined, and data URIs are used for images. If you look at the source of this page, you will notice everything is on one line, i.e. minimized. CSS and HTML are minimized separately and then inlined.
That wasn’t enough for me so unused CSS selectors are removed on a page-by-page basis. This means each page uses just those CSS elements and declarations which are actually present on any given page.
He writes everything in Markdown and uses Pandoc to incorporate templates. He also admits that he “stole” the majority of his ideas from Mark Pilgrim‘s scripts. No worries — the web is built on so-called “stolen” code, and he did the right thing by telling us where he got it.
There’s a debate about whether his method is actually more or less efficient going on at Hacker News.
NB: Yes, I realize I’m using the incorrect character to write Sime’s name, but the Croatian graphemes aren’t rendering properly in our WordPress installation for some reason. I have the Wired hamsters on it.
Jordi Boggiano has created Slippy, a lightweight library for building animated, browser-based slideshow presentations. Slippy is very simple — check out a short demo and view the source code. Grab the code from github.
Composing a presentation is simple. Just hack a basic HTML file. Each slide is in its own <div>, and all the markup beyond that is standard HTML. Bravo!
Unless you’re Mike Matas. The former Apple designer and co-founder of Delicious Monster recently unveiled a new photo blog that has perhaps the slickest, yet simplest, gallery script we’ve ever seen.
Perhaps more impressive than the clever slide navigation and the blurred background photos, what’s really amazing about the site is how simple the interface is — Matas manages to pack in everything from embedded maps to comments without overwhelming the photos.
The only caveat is that the site requires a modern web browser with support for emerging standards. Internet Explorer users; nothing to see here. Also note that performance lags a bit in Firefox 3.6 compared to WebKit browsers like Safari and Chrome.
Check out our three-part MooTools tutorial on Webmonkey if you want to learn more about using the free UI framework.