Update: Thanks for all the interest and feedback on 20 Things I
Learned about Browsers and the Web! We hope to open-source the code in the coming months and
will post an update when we do. Stay tuned.
Twenty
years ago this month, Tim Berners-Lee published his proposal for the World Wide Web. Since
then, web browsers and web programming languages have come a long way. A few of us on the
Chrome team decided to write an online guide for everyday users who are curious about the
basics of how browsers and the web work, and how their evolution has changed the way we work
and play online. Called "20 Things I Learned
about Browsers and the Web," this online guidebook is illustrated by Christoph Niemann, and built in HTML5,
JavaScript and CSS3, with our friends at Fi.
In
building an online book app, HTML5, JavaScript and CSS3 gave us the ability to bring to life
features that hearken back to what we love about books with the best aspects of the open web:
the app works everywhere, and on any device with a modern browser. Here are a few features of
the book experience that we’re particularly excited about:
After
the app has been visited once, you can also take the experience with you offline, thanks to the Application Cache
API.
You can resume reading where you had left off as the book remembers
your progress using the Local Storage
API. We also mark the chapters that have previously been read by folding the top
right corner of the page in the navigation.
The app utilizes the History API to provide
a clutter-free URL structure that can be indexed by search engines.
The HTML5 canvas element is used
to enhance the experience with transitions between the hard cover and soft pages of the book.
The page flips, including all shadows and highlights, are generated procedurally through
JavaScript and drawn on canvas.
The canvas element is also used to animate some of
the illustrations in the book.
CSS3 features such as web
fonts, animations, gradients and shadows are used to enhance the visual appeal of the
app.
This illustrated guidebook is best experienced in Chrome or any up-to-date, HTML5-compliant
modern browser. We hope you enjoy the read as much as we did creating it, at www.20thingsilearned.com or goo.gl/20things.
