Now open source: 20 Things I Learned about Browsers and the Web
By Min
Li Chan, Google Chrome Team Late last year, we
released
an illustrated online guidebook for everyday users who are curious about how
browsers and the web work. In building
20
Things I Learned about Browsers and the Web with HTML5, JavaScript and CSS with our
friends at
Fi, we heard from many of you that
you’d like to get your hands on the source code. Today, we’re open sourcing all the code for
this web book at
http://code.google.com/p/20thingsilearned,
so that you can use and tinker with the code for your own projects.
20 Things I Learned was celebrated this
year as an Official Honoree at the
15th
Annual Webby Awards in the categories of
Education,
Best
Visual Design (Function), and
Best
Practices. For those of you who missed our initial release last year, here’s a quick
recap of the APIs behind some of the web book’s popular features:
- The book uses the HTML5 canvas element to
animate some of the illustrations in the book and 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. You can read
more about the page flips on this
HTML5rocks tutorial.
- The book takes advantage of the Application Cache API
so that is can be read offline after a user’s first visit.
- With the Local Storage API, readers can resume
reading where they left off.
- The History API provides a
clutter-free URL structure that can be indexed by search engines.
- CSS3 features such as web
fonts, animations, gradients and shadows are used to enhance the visual appeal of the
app.
With this open source release, we’ve also
taken the opportunity to translate
20 Things
I Learned into 15 languages: Bahasa Indonesia, Brazilian Portuguese, Chinese
(Simplified and Traditional), Czech, Dutch, English, French, German, Italian, Japanese,
Polish, Russian, Spanish, and Tagalog.
We hope that web books like 20 Things I
Learned continue to inspire web developers to find compelling ways to bring the power of open
web technologies to education.
20 Things I
Learned is best experienced in
Chrome or any up-to-date, HTML5-compliant
modern browser. For those of you who’ve previously read this web book, don’t forget to hit
refresh on your browser to see the new language options.
Min
Li Chan is a Product Marketing Manager on the Google Chrome Team and the project
curator/author for 20 Things I Learned about Browsers and the Web. Posted by Scott Knaster,
Editor
