Animating URLs with JavaScript and Emojis

[peteforde]

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.

[MatthewRayfield]

Heyyyy thanks glad you enjoyed it! I was surprised to wake up and see this on Hacker News today.

Thought I'd comment on the video editing:

It is all pretty low tech. I use Adobe Premiere to edit and mostly just animate transform, scale, and crop effects to achieve everything. Like for the zooms you pointed out I double up a layer of the screencap and then crop and scale. It's a bit painstaking at times.

Another little part is when I do the screen recording I set my desktop background to an image with a colored box area of 1280x720. This is the area I know will be "on screen". So I have the windows I want to pull in during the video just outside this area. Then I crop to this box in editing. I think this is better looking than just capturing the whole desktop, and I like the live feel.

I'm enjoying evolving this style... I sometimes have thoughts of making some kind of gross homemade video compositing tool in JS. But I haven't gotten there yet...

[aasasd]

Youtube poops and endless music video memes are some of the best things to come out of the meme culture. Because folk culture is now truly ‘multimedia’ and we have a horde of people for whom hyperactive video and sound editing is second nature. Now just to wait for when it becomes mainstream and commoditized like graphics editing.

I'm hoping for about the same fate for knowledge visualization techniques—might see it happen soon enough now that ‘data science’ is in vogue.

[lwansbrough]

Those idiots over at Google AMP are working on destroying the web when they could be working on something productive like this.

[revskill]

It's sad/funny that some big companies adopt AMP in their products even faster than Google themselves.

[dymk]

Is this satire, or...?

[sdan]

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?

[peteforde]

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

[saagarjha]

I'm sure when they see the website for themselves they'd agree with you ;)

[kkarakk]

Just checking to see if you trust me boss ;)

[benguild]

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

[Tade0]

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.

[droptablemain]

"Your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should."

[ralusek]

That was literally the first thing they did! They stopped, thought about whether or not they should, and then did! And now we have animated url emojis and an island filled with dinosaurs and what could possibly go wro

[Grumbledour]

This is equal parts terrible and fascinating. I hope no one will start doing this, but I love the idea and the quirkiness of the whole site!

[lifthrasiir]

This page will wreck your browser history. The post explains the rationale at the end, but frankly speaking there should have been the warning for each checkbox.

[ballenf]

Your comment made me realize that there are people who curate their browser history (other than just removing problematic stuff). Not criticizing, just never considered that was something anyone cared about.

[core1024]

If you're using Firefox you can Control+H then right click on the site and select the option labeled "Forget About This Site". Done.

[Diti]

I’m on mobile. The checkboxes had no effect, the code run on its own by default. And I gave up on trying to go back to Lobsters by using the Back button.

[craftycode]

It shouldn't. It uses history.replaceState(). https://developer.mozilla.org/en-US/docs/Web/API/History_API...

[hyeomans]

I think it also crashed LittleSnitch

[OskarS]

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.

[askmike]

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 animation part.

This would preserve both the back button as well as bookmarking! Note that this video is more of the hacking nature what fun things can we do with the URL bar, he stated a number of times that it's more cool than actually useful.

[1]: https://developer.mozilla.org/en-US/docs/Web/API/History_API...

[dosy]

Would you approve animating the title?

[Kiro]

That's not for you to decide.

[tempodox]

We need this. The whole Internet is on the brink of destruction and animated URLs are going to save it. And ISPs are giving a discount on connections with animated URLs.

[vanderZwan]

This deserves to be on awesome-quirks, I think

https://github.com/dsalaj/awesome-quirks

[cjblomqvist]

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

[mrighele]

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

[serpix]

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

[lazyjones]

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.

[torarnv]

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.

[vortico]

Similar to https://web.archive.org/web/20110726095900/http://probablyin...

[hombre_fatal]

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/

[dgellow]

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

[bubblicious]

Shameless plug for a tiny project I did a while back that does exactly this: http://nicolasbize.com/faviconx/

[bork1]

One downside is that it basically renders the back button useless. I ran the examples you provided (which were great fun!) and when I tried to get back to hackernews I realized each step in the animation had been added to my browser history

[zuppy]

you can use replaceState for that and back will work fine

[codedokode]

Maybe browsers should go back not to previous URL, but to previous domain.

[TheKarateKid]

I'm just waiting for mainstream media sites to abuse this to put: 20% OFF SUBSCRIBE NOW in the URL of their page.

Edit: HN doesn't support emoji in comments. That was supposed to be surrounded by sirens.

[veryworried]

If you ever see emoji in hackernews comments then hackernews, as it has been, is over.

[throwaway287391]

I realize everyone hates videos on HN and probably scrolled right past it, but this guy is hysterical. Worth watching the first couple minutes at least.

[z3t4]

Am I the only one thinking about buying many domain names to do the animation on the actual TLD ?

[deno]

You can’t do this on the domain name, or even subdomain. Changing origin requires actual navigation, and would probably trigger loop detection.

[Traubenfuchs]

Would that not reload the websites? Then it would only make sense if you have super low latency, tiny payload and don't need to scroll.

[Ayesh]

Probably yes. In browser history updates, browsers will trigger a regular page navigation if the domain changes.

I suppose with keep-alive, all sub/top domains in the same TLS certificate, and immutable far-future caches, one could pull off an animation at ~5 fps.

[peteforde]

... damn, dude.

[durnygbur]

Well no one was expecting emojis, so let the old guys have some fun as well? Have had this idea for a long time, but by now it remained only as a concept. Someone hacked the access to my notes, or maybe certain ideas are universally silly-genius?:)

[saagarjha]

An alternative to this is changing document.title, which makes the animation a lot easier to see in Safari (plus it doesn't kill the back button) :)

[Chazprime]

Well, I suppose if you’re missing the old days of the internet with pages of flashing icons, this will be comforting.