Live data from Hacker News

Animating URLs with JavaScript and Emojis

matthewrayfield.com

41–50 of 173 posts

Re: Animating URLs with JavaScript and Emojis

#42
post #38

This reminds me of putting marquees in the window.status like 20 years ago

The spirit is there definitely. My take is that it's only a matter of time before emojis creep into every area where text is used. Let's hope they won't ever become a mainstream part of programming languages.

Let's hope they won't ever become a mainstream part of programming languages.

If you consider Amp mainstream, or a programming language, it’s already too late.

Re: Animating URLs with JavaScript and Emojis

#43
post #13

This got me thinking about some standardized control elements websites could put in the address / menu bar. Something like media controls, progress bars or even consent banners. This way they would have an unified appearance and could be user scriptable.

Unless someone browses full screen or bookmarks the app to their home screen on mobile so there is no visible url bar to animate.

Re: Animating URLs with JavaScript and Emojis

#44
I love the creativity of the hack, especially when he sync'd the video position with the scrubber. Respect.

I also love the guy's vaguely deranged, Adult Swim -inspired commentary. I went from hater to fan in about 30 seconds, once I realized that he must idolize Tim Heidecker. Again, respect.

However, what I love the most is how the video was composited and edited. What tools do you use to pull that together without slaving over every detail? It looks deceptively low-budget but there's a lot of really subtle details in the way he zooms in on the URL, tweens and flips his video around that make the whole thing feel like a Tim and Eric special feature.

I'd love to know how to produce that sort of result on a meaningfully short timeline.

Re: Animating URLs with JavaScript and Emojis

#45
post #26
post #17

This is very cute and all but... you know... don't actually do this! Please. Even if you make it so that it doesn't break the back button or history, URLs are things that people copy and paste and send to people. They are put into Word-documents, bookmarks and archive.org. It's not a place for dynamic animations. URLs should be static, simple, and as short as is reasonable.

While in the video he's updating the location hash (which breaks the backbutton), one can implement this using history.replaceState[1] to keep the back button working normally. He also mentions parsing the animated URL the figure out how far the video was loaded. So if you want you can use the animation in terms of navigation. Or alternatively just put the animation behind a separator and have your router ignore the…

In the article it does state that the history API could be used and why it wasn't.

The first point about updating the whole URL is easy to render moot: when you push new state using the history API, replicate the effect of location.hash by making sure you only change the hash part.

The second part is the sticky one for the "ain't this cool" factor: the throttle in some browsers effectively limits constant animation to 3fps. This isn't an issue for things like the video progress example though: that only needs to update once per second. If you made a library to wrap this idea for easy reuse you could easily implement change detection and other rapid change throttling to smooth things out (so short bursts of many updates work, but longer bursts don't cause a complete stop until ~30s has passed) rather than having to implement these for each use of the technique. ("if" and "you could", because who in their right mind actually would?!)

Re: Animating URLs with JavaScript and Emojis

#47

Am I going crazy or haven't I used websites that update the favicon to indicate things like new notifications? Here's a 16x16 pixel game of Defender implemented by animating the favicon: http://www.p01.org/defender_of_the_favicon/

Github does this for pull request status, it’s really great

Re: Animating URLs with JavaScript and Emojis

#48
post #47

Am I going crazy or haven't I used websites that update the favicon to indicate things like new notifications? Here's a 16x16 pixel game of Defender implemented by animating the favicon: http://www.p01.org/defender_of_the_favicon/

Github does this for pull request status, it’s really great

Looking around for more, https://travis-ci.org/ updates it with build succeeded | failed | in-progress.

The few websites I first checked, like Facebook, I must've misremembered. But it's definitely still out there in the wild.

Re: Animating URLs with JavaScript and Emojis

#49
post #30

Company checks on Employee's search history So what's so interesting about matthewrayfield.com that you had to go there 59,000 times in the last hour?

Updating the hash of a URL doesn't (or shouldn't) make a request to the server, so your abstract employee hero is safe.

The abstract company villan has access to the locally stored history too.
Post reply on HN