

Things I Learned About Browsers and the Web - twapi
http://www.20thingsilearned.com/

======
wccrawford
What I learned is that the web is not a book and trying to use real life ideas
in webdesign doesn't always work out.

There's an arrow to go back, but some funny page-curl-click thing to go
forward. Oh, and a button to open the book.

Took me a while to figure out the page curl thing. The first time, I got it to
change by randomly clicking everywhere. Even worse was that it follows you for
a while, then gives up, making you think you're doing something wrong.

~~~
ugh
All canonical ways of page navigation work. There are large forward and
backward buttons, the arrow keys work and the page curl is just an added
gimmick. You don’t need to use it. I clicked through the whole book without
ever noticing the page curl. Did only you have that problem or your upvoters,
too? I would think that would be very strange because this book seems to to
work exactly like all other such page navigation interfaces on the web.

If you want page navigation this is the way to do it.

~~~
Waywocket
>All canonical ways of page navigation work.

I'm aware of three canonical ways of page navigation: scrolling, page down,
space bar.

None of those work.

I agree that the interface was intuitive and at no point did I have any actual
_difficulty_ using it, but I'm not exactly impressed with a page that takes a
lot of text and then crams it into two columns (WTF? whose bright idea was
that?) in a tiny box with bad fonts surrounded by a vast sea of grey _and then
makes me have to click to advance to the next post-it sized page_.

------
GBKS
You may not like the idea of the book or the approach, but the site is
executed with amazing detail. From the design to the animations, to the use of
local storage to work offline, remembering which pages you have visited,
window.history, the graphical search auto-complete and all the other little
details.

~~~
vinhboy
Like the light switch. Nice.

------
arnorhs
At first I was incredibly surprised that Google made this, since it a) looks
beautiful b) uses jQuery and c) the UI is darn good - but then I viewed the
source and saw this:

    
    
    		  20 Things I Learned About Browsers and the Web
    
    		  Built by Fi (www.f-i.com) for the Google Chrome Team.
    
    

Design-by-committee (or by data) would never have built this. This is why I
know there would never be a place for me at Google, even though I don't
consider myself a designer.

~~~
mhansen
Google uses jQuery. Check out the source of <http://code.google.com/>

~~~
arnorhs
You're right. I hadn't noticed.

------
albertsun
And one more thing I learned is that Google Chrome supports HTML5 history
features so they can change the URL string without that ugly # symbol!

~~~
deno
Just make sure that you support those "deep" links as static pages or have a
way of loading with default args for javascript that drives that.

------
emehrkay
I've been trying to figure out how they are changing the url without a page
refresh. It must be a webkit only thing.

~~~
jamesjyu
Yes. They use window.history. It degrades to using the usual hash method for
other browsers.

~~~
remi
Looks like it's also working in Firefox 4.0beta.

------
adamdecaf
#1 You should have learned to make webpages that still load without scripting.

------
Sephr
The extensive use of HTML5 is great and all, but including font files in your
cache manifest (<http://www.20thingsilearned.com/cache.manifest>) seems like
an inappropriate use of the offline cache (better fit for normal caching),
unless you're absolutely sure the user doesn't already have the font installed
(e.g. custom font made just for the app).

------
wanderr
Works terribly on my droid. As I scroll that bar that is meant to sit at the
bottom of the page is right in the middle, obscuring the text in the book.

------
pornel
> This illustrated book was designed for HTML5-compliant browsers and will not
> work with your current browser.

I wonder which HTML5 feature isn't supported in Opera that warrants complete
degradation of page to non-JS version (Opera is not served
<script>TT.initialize()</script>).

------
aaroneous
For those that are interested, the JS behind it:
<https://gist.github.com/705761>

~~~
gorakhargosh
Very interesting indeed. =)

~~~
gorakhargosh
All the scripts with comments in the order used:

<http://www.20thingsilearned.com/js/twentythings.js>

<http://www.20thingsilearned.com/js/twentythings.preloader.js>

<http://www.20thingsilearned.com/js/twentythings.history.js>

<http://www.20thingsilearned.com/js/twentythings.storage.js>

<http://www.20thingsilearned.com/js/twentythings.pageflip.js>

[http://www.20thingsilearned.com/js/twentythings.paperstack.j...](http://www.20thingsilearned.com/js/twentythings.paperstack.js)

[http://www.20thingsilearned.com/js/twentythings.illustration...](http://www.20thingsilearned.com/js/twentythings.illustrations.js)

[http://www.20thingsilearned.com/js/twentythings.navigation.j...](http://www.20thingsilearned.com/js/twentythings.navigation.js)

<http://www.20thingsilearned.com/js/twentythings.cache.js>

<http://www.20thingsilearned.com/js/twentythings.search.js>

[http://www.20thingsilearned.com/js/twentythings.chapternav.j...](http://www.20thingsilearned.com/js/twentythings.chapternav.js)

<http://www.20thingsilearned.com/js/twentythings.sharing.js>

<http://www.20thingsilearned.com/js/twentythings.overlay.js>

[http://www.20thingsilearned.com/js/twentythings.tableofthing...](http://www.20thingsilearned.com/js/twentythings.tableofthings.js)

<http://www.20thingsilearned.com/js/twentythings.flipintro.js>

Cheers. =)

------
quinndupont
All I learned is that Google just made an ad for their core services (Chrome,
Docs, etc), and disguised it in an informational online book.

------
igrekel
Arg! Safari on windows... the only thing I can get to beside the front cover
is the credit page no matter what I try... I guess the 21st thing I learned is
when people are too clever with their web interface, it usually mean I'll have
to try in a few browsers or give up.

------
eiji
All I got was -> "... want's to store offline information on your computer."
-> always deny.

~~~
CWIZO
Do you deny all cookies too? And you don't stream any videos? Disable caching
in your browser? ...

Local storage is nothing to be afraid off ...

~~~
smackfu
The question is whether prompting users for whether the site should be allowed
to store stuff does anything. You have no idea why it wants to store data, or
how much. So it's basically just a security thing, but how would you evaluate
that? Usually people would look at the domain name I guess, but
"20thingsilearned.com" is no more legit than "twentythingsilearned.com".

------
jdavid
The UX is not that interesting to me.

Does anyone know how the page avoids a refresh while changing the location
url? it changes the path, and not just a hash. i thought all path changes
demanded a page refresh.

~~~
tedkimble
It's using the window.history.pushState() and window.history.replaceState()
javascript methods. Here's some Mozilla documentation:

[https://developer.mozilla.org/en/DOM/Manipulating_the_browse...](https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history)

------
tygorius
tc;dc (too cute; didn't click)

I was dubious about the link from the "X things about Y" style of title, but
left as soon it looked like a more stylish version of a Web slide show. I
_hate_ slide shows; if a site doesn't offer an obvious "all slides on one
page" option, I'm out of there.

(Edit: Yes, there is a TOC link, but that page also evoked a tc;dc response.)

------
jcapote
Surprised "Don't use real life metaphors in a web app" isn't one of them

------
Charuru
I don't get this site, who's the target audience? kids? Are you sure they want
to read about packets?

~~~
cshenoy
Why shouldn't they read about packets? Kids are a lot savvier these days.

------
rorrr
This is retarded.

Horrible navigation, simplistic content.

------
pzxc
We should start a list of things this site apparently DIDN'T learn about
browsers and the web.

#1 - breaking the back button will cause people to never visit your site again

~~~
Pewpewarrows
How exactly does this site break the back button again?

~~~
redorb
It broke for me in the fact that after several pages; it took several clicks
of the back button to return to HN.

~~~
Herald_MJ
So, you clicked 'back', and it took you back to the last page you viewed. And
that's unexpected behaviour?

I would theorise that the only reason you expected the back button to return
you to HN was that your expectations have been poisoned by having to deal with
the broken behaviour of sites like this made in Flash rather than HTML5.

~~~
ams6110
Like it or not, that's the reality. Most people's expectations of what "back"
does are influenced by their years of experience with Flash and other plugin-
based content.

~~~
bouncingsoul
Parent comment is currently at -2 points, but a comment 10 days ago expressing
the exact same opinion has 29 points:

<http://news.ycombinator.com/item?id=1883654>

Online discussion confuses me.

