14 ms·

Things I Learned About Browsers and the Web

148 points by twapi 16y ago

rorrr 16y ago
This is retarded. Horrible navigation, simplistic content.
albertsun 16y ago
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 16y ago
  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.
wccrawford 16y ago
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.
- yarone 16y ago
  Agreed. The problem with page-curl in this case is that the left-hand-side of the book is a blank page. This means that when you're "curling" the page, you don't see a a bunch of text/images mid-transformation (mid "curl"). Also, there is no transparency at all to the "paper" - it's totally opaque. If it were semi-transparent, you would see the other side of the page bleeding through, giving some context/reality to the curling.
- danh 16y ago
  I have to disagree: I think this one works out just fine. And there actually is an arrow to go forward as well. For me, pagination makes reading long documents a lot easier than scrolling. For example, I love the pagination feature in Instapaper. Also, this is the prettiest thing I have seen coming from Google. By far.
- ugh 16y ago
  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 16y ago
    >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.
- greyman 16y ago
  I agree with you. Moreover, by creating one's own UI, something other will break. For example, I can't close my Better HN for Chrome extension on this page, because the upper bar (with search box) over-drawn the upper part of the extension window (which normal website don't do). It looks beautiful and everything, but still, please don't do things this way - don't mess with browser nagivation. That I think should be the first thing one should learn about browsers & the web.
Charuru 16y ago
I don't get this site, who's the target audience? kids? Are you sure they want to read about packets?
- cshenoy 16y ago
  Why shouldn't they read about packets? Kids are a lot savvier these days.
pzxc 16y ago
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 16y ago
  How exactly does this site break the back button again?
  - redorb 16y ago
    It broke for me in the fact that after several pages; it took several clicks of the back button to return to HN.
    - Pewpewarrows 16y ago
      And how is that different than browsing any other website on the internet? Each page needed a permalink so that you could instantly show a specific page to a friend. Again I ask, how is this breaking your back button? Or are you just trying to imagine something to complain about?
      - iampims 16y ago
        I think it was meant to be a joke…
    - Herald_MJ 16y ago
      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 16y ago
        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.
adamdecaf 16y ago
#1 You should have learned to make webpages that still load without scripting.
emehrkay 16y ago
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 16y ago
  Yes. They use window.history. It degrades to using the usual hash method for other browsers.
  - remi 16y ago
    Looks like it's also working in Firefox 4.0beta.
  - emehrkay 16y ago
    Thanks
- pornel 16y ago
  pushState() is HTML5 API: http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#dom-history-pushstate http://www.whatwg.org/specs/web-apps/current-work/multipage/...
eiji 16y ago
All I got was -> "... want's to store offline information on your computer." -> always deny.
- CWIZO 16y ago
  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 16y ago
    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".
GBKS 16y ago
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 16y ago
  Like the light switch. Nice.
jcapote 16y ago
Surprised "Don't use real life metaphors in a web app" isn't one of them
jdavid 16y ago
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.
- miGlanz 16y ago
  Nope, it doesn't change path. Path changes are after the hash. Although when you hover over the arrow pointing to the next page it shows different path, it's probably for browsers with JavaScript disabled. Clicking this link is also intercepted by JavaScript. EDIT: sorry, it actually does change the path on Chrome. It doesn't on Firefox.
- tedkimble 16y ago
  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_browser_history https://developer.mozilla.org/en/DOM/Manipulating_the_browse...
Sephr 16y ago
The extensive use of HTML5 is great and all, but including font files in your cache manifest (http://www.20thingsilearned.com/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).
pornel 16y ago
> 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>).
deleted 16y ago
[deleted]
igrekel 16y ago
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.
arnorhs 16y ago
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 16y ago
  Google uses jQuery. Check out the source of http://code.google.com/ http://code.google.com/
  - arnorhs 16y ago
    You're right. I hadn't noticed.
wanderr 16y ago
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.
quinndupont 16y ago
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.
aaroneous 16y ago
For those that are interested, the JS behind it: https://gist.github.com/705761 https://gist.github.com/705761
- gorakhargosh 16y ago
  Very interesting indeed. =)
  - gorakhargosh 16y ago
    All the scripts with comments in the order used: http://www.20thingsilearned.com/js/twentythings.js http://www.20thingsilearned.com/js/twentythings.js http://www.20thingsilearned.com/js/twentythings.preloader.js http://www.20thingsilearned.com/js/twentythings.preloader.js http://www.20thingsilearned.com/js/twentythings.history.js http://www.20thingsilearned.com/js/twentythings.history.js http://www.20thingsilearned.com/js/twentythings.storage.js http://www.20thingsilearned.com/js/twentythings.storage.js http://www.20thingsilearned.com/js/twentythings.pageflip.js http://www.20thingsilearned.com/js/twentythings.pageflip.js http://www.20thingsilearned.com/js/twentythings.paperstack.js http://www.20thingsilearned.com/js/twentythings.paperstack.j... http://www.20thingsilearned.com/js/twentythings.illustrations.js http://www.20thingsilearned.com/js/twentythings.illustration... http://www.20thingsilearned.com/js/twentythings.navigation.js http://www.20thingsilearned.com/js/twentythings.navigation.j... http://www.20thingsilearned.com/js/twentythings.cache.js http://www.20thingsilearned.com/js/twentythings.cache.js http://www.20thingsilearned.com/js/twentythings.search.js http://www.20thingsilearned.com/js/twentythings.search.js http://www.20thingsilearned.com/js/twentythings.chapternav.js http://www.20thingsilearned.com/js/twentythings.chapternav.j... http://www.20thingsilearned.com/js/twentythings.sharing.js http://www.20thingsilearned.com/js/twentythings.sharing.js http://www.20thingsilearned.com/js/twentythings.overlay.js http://www.20thingsilearned.com/js/twentythings.overlay.js http://www.20thingsilearned.com/js/twentythings.tableofthings.js http://www.20thingsilearned.com/js/twentythings.tableofthing... http://www.20thingsilearned.com/js/twentythings.flipintro.js http://www.20thingsilearned.com/js/twentythings.flipintro.js Cheers. =)
tygorius 16y ago
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.)

148 points by twapi 16y ago

rorrr 16y ago

This is retarded. Horrible navigation, simplistic content.

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 16y ago
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.

wccrawford 16y ago

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.

yarone 16y ago
Agreed. The problem with page-curl in this case is that the left-hand-side of the book is a blank page. This means that when you're "curling" the page, you don't see a a bunch of text/images mid-transformation (mid "curl"). Also, there is no transparency at all to the "paper" - it's totally opaque. If it were semi-transparent, you would see the other side of the page bleeding through, giving some context/reality to the curling.
danh 16y ago
I have to disagree: I think this one works out just fine. And there actually is an arrow to go forward as well. For me, pagination makes reading long documents a lot easier than scrolling. For example, I love the pagination feature in Instapaper. Also, this is the prettiest thing I have seen coming from Google. By far.
ugh 16y ago
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 16y ago
  >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.
greyman 16y ago
I agree with you. Moreover, by creating one's own UI, something other will break. For example, I can't close my Better HN for Chrome extension on this page, because the upper bar (with search box) over-drawn the upper part of the extension window (which normal website don't do). It looks beautiful and everything, but still, please don't do things this way - don't mess with browser nagivation. That I think should be the first thing one should learn about browsers & the web.

Charuru 16y ago

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

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

pzxc 16y ago

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 16y ago
How exactly does this site break the back button again?
- redorb 16y ago
  It broke for me in the fact that after several pages; it took several clicks of the back button to return to HN.
  - Pewpewarrows 16y ago
    And how is that different than browsing any other website on the internet? Each page needed a permalink so that you could instantly show a specific page to a friend. Again I ask, how is this breaking your back button? Or are you just trying to imagine something to complain about?
    - iampims 16y ago
      I think it was meant to be a joke…
  - Herald_MJ 16y ago
    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 16y ago
      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.

adamdecaf 16y ago

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

emehrkay 16y ago

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 16y ago
Yes. They use window.history. It degrades to using the usual hash method for other browsers.
- remi 16y ago
  Looks like it's also working in Firefox 4.0beta.
- emehrkay 16y ago
  Thanks
pornel 16y ago
pushState() is HTML5 API: http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#dom-history-pushstate http://www.whatwg.org/specs/web-apps/current-work/multipage/...

eiji 16y ago

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

CWIZO 16y ago
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 16y ago
  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".

GBKS 16y ago

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 16y ago
Like the light switch. Nice.

jcapote 16y ago

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

jdavid 16y ago

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.

miGlanz 16y ago
Nope, it doesn't change path. Path changes are after the hash. Although when you hover over the arrow pointing to the next page it shows different path, it's probably for browsers with JavaScript disabled. Clicking this link is also intercepted by JavaScript. EDIT: sorry, it actually does change the path on Chrome. It doesn't on Firefox.
tedkimble 16y ago
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_browser_history https://developer.mozilla.org/en/DOM/Manipulating_the_browse...

Sephr 16y ago

The extensive use of HTML5 is great and all, but including font files in your cache manifest (http://www.20thingsilearned.com/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).

pornel 16y ago

> 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>).

deleted 16y ago

[deleted]

igrekel 16y ago

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.

arnorhs 16y ago

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 16y ago
Google uses jQuery. Check out the source of http://code.google.com/ http://code.google.com/
- arnorhs 16y ago
  You're right. I hadn't noticed.

wanderr 16y ago

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.

quinndupont 16y ago

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.

aaroneous 16y ago

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

gorakhargosh 16y ago
Very interesting indeed. =)
- gorakhargosh 16y ago
  All the scripts with comments in the order used: http://www.20thingsilearned.com/js/twentythings.js http://www.20thingsilearned.com/js/twentythings.js http://www.20thingsilearned.com/js/twentythings.preloader.js http://www.20thingsilearned.com/js/twentythings.preloader.js http://www.20thingsilearned.com/js/twentythings.history.js http://www.20thingsilearned.com/js/twentythings.history.js http://www.20thingsilearned.com/js/twentythings.storage.js http://www.20thingsilearned.com/js/twentythings.storage.js http://www.20thingsilearned.com/js/twentythings.pageflip.js http://www.20thingsilearned.com/js/twentythings.pageflip.js http://www.20thingsilearned.com/js/twentythings.paperstack.js http://www.20thingsilearned.com/js/twentythings.paperstack.j... http://www.20thingsilearned.com/js/twentythings.illustrations.js http://www.20thingsilearned.com/js/twentythings.illustration... http://www.20thingsilearned.com/js/twentythings.navigation.js http://www.20thingsilearned.com/js/twentythings.navigation.j... http://www.20thingsilearned.com/js/twentythings.cache.js http://www.20thingsilearned.com/js/twentythings.cache.js http://www.20thingsilearned.com/js/twentythings.search.js http://www.20thingsilearned.com/js/twentythings.search.js http://www.20thingsilearned.com/js/twentythings.chapternav.js http://www.20thingsilearned.com/js/twentythings.chapternav.j... http://www.20thingsilearned.com/js/twentythings.sharing.js http://www.20thingsilearned.com/js/twentythings.sharing.js http://www.20thingsilearned.com/js/twentythings.overlay.js http://www.20thingsilearned.com/js/twentythings.overlay.js http://www.20thingsilearned.com/js/twentythings.tableofthings.js http://www.20thingsilearned.com/js/twentythings.tableofthing... http://www.20thingsilearned.com/js/twentythings.flipintro.js http://www.20thingsilearned.com/js/twentythings.flipintro.js Cheers. =)

tygorius 16y ago

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.)