3 ms·

Cool! It did however completely break my back button....

mrighele 8y ago
Because it manipulated the hash component directly. By using the "replaceState" method of the history API [1] you could avoid polluting the browser's history. [1] https://developer.mozilla.org/en-US/docs/Web/API/History_API https://developer.mozilla.org/en-US/docs/Web/API/History_API
- kccqzy 8y ago
  Didn't the article say the history API was throttled on Chrome and Safari?
  - mrighele 8y ago
    You're right, I missed that part. For the Chrome part in any case it doesn't match my experience: under linux Chrome will happily update the url up to every 20ms (50Hz). At higher frequency it will throttle it saying that otherwise the UI would hang. The limit on Safari (which I cannot test) can be annoying in fact, but not as much as an URL updating 20 times per second :-) By the way I also find the other reason for not using the History API to be a non-issue, since you can just use the location object to build the whole url from scratch, if you really want to
  - kensign 8y ago
    literally hundreds of entries, I don't think that's very cool.
  - pault 8y ago
    According to https://news.ycombinator.com/item?id=19682014 https://news.ycombinator.com/item?id=19682014 you can use replaceState without being throttled.
serpix 8y ago
Better trash the past hour of history since every animation is a separate history entry :D
torarnv 8y ago
For some reason it also broke Safari on iOS to the point where I couldn’t open HN via a bookmark either. Had to close the tab completely.
lazyjones 8y ago
Somewhat fixable (this is for moon.html): var n = 0; function loop() { location.hash = f[Math.floor((Date.now()/100)%f.length)]; if (n++ > f.length) { n = 0; window.history.go(-f.length); } setTimeout(loop, 50); } This actually doesn't work properly and jumps back too far sometimes because the URLs move with time and not a counter, but you get the idea.

Because it manipulated the hash component directly. By using the "replaceState" method of the history API [1] you could avoid polluting the browser's history. [1] https://developer.mozilla.org/en-US/docs/Web/API/History_API https://developer.mozilla.org/en-US/docs/Web/API/History_API

kccqzy 8y ago
Didn't the article say the history API was throttled on Chrome and Safari?
- mrighele 8y ago
  You're right, I missed that part. For the Chrome part in any case it doesn't match my experience: under linux Chrome will happily update the url up to every 20ms (50Hz). At higher frequency it will throttle it saying that otherwise the UI would hang. The limit on Safari (which I cannot test) can be annoying in fact, but not as much as an URL updating 20 times per second :-) By the way I also find the other reason for not using the History API to be a non-issue, since you can just use the location object to build the whole url from scratch, if you really want to
- kensign 8y ago
  literally hundreds of entries, I don't think that's very cool.
- pault 8y ago
  According to https://news.ycombinator.com/item?id=19682014 https://news.ycombinator.com/item?id=19682014 you can use replaceState without being throttled.

serpix 8y ago

Better trash the past hour of history since every animation is a separate history entry :D

torarnv 8y ago

For some reason it also broke Safari on iOS to the point where I couldn’t open HN via a bookmark either. Had to close the tab completely.

lazyjones 8y ago

Somewhat fixable (this is for moon.html): var n = 0; function loop() { location.hash = f[Math.floor((Date.now()/100)%f.length)]; if (n++ > f.length) { n = 0; window.history.go(-f.length); } setTimeout(loop, 50); } This actually doesn't work properly and jumps back too far sometimes because the URLs move with time and not a counter, but you get the idea.