
Animating URLs with JavaScript and Emojis - bemmu
http://matthewrayfield.com/articles/animating-urls-with-javascript-and-emojis/#%F0%9F%8C%92
======
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...

~~~
wDcBKgt66V8WDs
Everything about this is great, I'm not a big video watcher but I just sat
through that whole thing it was gold. The selfie direction flips, the
interjections from you in another setting instead of chopping the video (both
funny but also a nicer way to do it honestly). The concepts you're showing.
All really good. Keep it up I'll be watching!

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

~~~
eli
Big companies care about how they appear on search results pages, google
doesn’t.

~~~
emilecantin
Google: Look at me. I am the result page.

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

~~~
kgwxd
The abstract company villan has access to the locally stored history too.

~~~
ceejayoz
That's what history.replaceState() instead of history.pushState() is for.

~~~
kgwxd
They have monitors on all javascript calls the browser makes too, "for
security".

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

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

knowing a few people in this world, I am sure that this will certainly happen
way before you can have variables named α, β, γ

~~~
ForHackernews
You can already use Greek letter variable names in Python:
[https://stackoverflow.com/questions/17043894/what-unicode-
sy...](https://stackoverflow.com/questions/17043894/what-unicode-symbols-are-
accepted-in-python3-variable-names)

I've used θ in code dealing with angles before.

~~~
codedokode
That's a bad idea. How are other developers supposed to type this character
(unless they are from Greece)?

~~~
roblabla
keep it in the copy paste buffer, obviously /s.

For an even more extreme version, look at Perl6's atomic operators:
[https://docs.perl6.org/language/unicode_ascii#Atomic_operato...](https://docs.perl6.org/language/unicode_ascii#Atomic_operators)
(or any other operators on this page for that matter).

IMO, it's not a "bad idea". Code is meant to be read, not written. If it
renders the code more readable, then that's a win. But obviously, whether
those symbols _actually_ make the code more readable is debatable.

~~~
enriquto
> whether those symbols actually make the code more readable is debatable.

In general, it would be rather silly to use greek letters for variable names.
Yet sometimes, they tend to make numerical code much more readable when you
are copying a mathematical formula verbatim.

Compare using "πθ" versus "M_PI*theta" several times on the same formula, for
example.

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

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

~~~
NikkiA
Wow, that took multiple minutes to run here.

Well done to the author of this hack on finding a way to dump massive amounts
of data to firefox's sqlite store.

------
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...](https://developer.mozilla.org/en-
US/docs/Web/API/History_API#The_replaceState\(\)_method)

~~~
dspillett
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?!)

~~~
megous
All I know is he tried pushState. Perhaps replaceState is not throttled,
because it doesn't create new history entries, just replaces the last one.

Try this in chrome console. And yes, it doesn't throttle at all.

i=0; setInterval(() => history.replaceState('', '', '/' \+ (i++)), 50);

It's interesting how people will just believe everything, even if the test is
30 seconds away.

~~~
addicted
I'm pretty sure Chrome has different behavior with Dev Tools open and Dev
Tools closed, and also with what it does with code posted in the console and
code run as part of the page.

So just because it is not throttled when run in the console doesnt necessary
imply it wont throttle as part of a regular page as well.

~~~
megous
It does not in this case. It's just not throttled.

------
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](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](https://developer.mozilla.org/en-
US/docs/Web/API/History_API)

~~~
kccqzy
Didn't the article say the history API was throttled on Chrome and Safari?

~~~
mrighele
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

------
vortico
Similar to
[https://web.archive.org/web/20110726095900/http://probablyin...](https://web.archive.org/web/20110726095900/http://probablyinteractive.com/url-
hunter)

------
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/](http://www.p01.org/defender_of_the_favicon/)

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

~~~
hombre_fatal
Looking around for more, [https://travis-ci.org/](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.

~~~
saltminer
Gitlab CI also updates the favicon

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

~~~
tracker1
I didn't really look at the code, mostly because I just found the idea
interesting as I hadn't considered it. Kind of surprised that it's not using
the history api to replace the hash.

~~~
ludwigvan
He explains in the article that he couldn't do it with History API since it is
throttled by the browsers.

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

~~~
blueline
..why? i see comments with ':-)' all the time. are the people here so
pretentious that they're fundamentally opposed to using an ideogram?

better hope there aren't any closeted road-signage-designers lurking on HN
then

~~~
veryworried
Emojis are too jocular for the tone we are trying to strike here. They lower
the level of discourse down to something more like Reddit or Twitter.

~~~
chrfrasco
Man, I wish I could use the eye-roll emoji here

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

~~~
odyssey7
You got me to go back and watch it. It was great.

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

~~~
scrollaway
It's probably possible to do fast enough if the site is nearly empty (just
with a window.location.href script tag). But it would definitely trigger a
full page rerender.

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

------
jjar
Note: you must have <meta charset="utf-8" /> in <head> for this to work.

~~~
recursive
Or you can just use \u escape codes and keep all your source in ASCII.

------
epidemian
The combination of animations on the URL and emojis looks great! And i think
some of the use-cases, like progress indicators or simple spinners can be
pretty legitimate (though maybe it's just my cute-hack-friendly mind thinking
this :P)

I didn't know about `location.hash =` not being rate-limited like
history.replaceState() is! Knowing this would have been useful when (ab)using
this idea to make a playable game on the URL
([https://epidemian.github.io/snake](https://epidemian.github.io/snake)). I
stumbled upon Chrome's rate-limit quite a few times (now it seem to have been
raised). Thanks!

------
yilugurlu
look at what you've done to your browser history

------
nwsm
There are a few ccTLDs that allow emojis in domains. [0] So you could buy all
the ones you need for an animation and set up a redirect loop.

[0]:
[https://en.wikipedia.org/wiki/Emoji_domain](https://en.wikipedia.org/wiki/Emoji_domain)

~~~
Technetium_Hat
Unfortunately they still appear as punycode in most contexts.

------
ryanmcbride
I love stuff like this. It's not practical and likely breaks a lot of
standards but I love it.

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

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

------
codedokode
After visiting the site using Firefox the history contains hundreds of those
URLs with emojis. Also, the "back" button is completely broken because of
this. Interesting way to prevent user from leaving the site.

------
hit8run
Ah the marquee tag for URLs :D

------
lazyhummingbird
Niiice! I did a similar goof with
[http://caust.in/urler/](http://caust.in/urler/) a couple of years back but I
love the useful applications.

------
codedokode
I think in Japan he would be arrested for corrupting browser's history.

------
umvi
Use incognito mode for this site... your back button will thank me

~~~
tracker1
Or, just open in a new tab.

~~~
umvi
Tab will still foobar your history though, wouldn't it?

~~~
tracker1
yeah, but only for that tab... same as on an incognito tab.

edit: apologies... I'm still used to the _old_ history behaviors, I don't use
it much.

------
miguelmota
Clever hack, but impractical; ruins history, back button, and urls are usually
pretty long meaning the loading bar will not be visible or partially visible.

------
KitDuncan
This is the best thing I've ever seen on Hackernews.

------
verrecken
Looks really shity on a mobile phone and blocks the back button. Ah and it
also spams the history, great :)

------
reubeniv
It blew my mind, then I tried to hit 'back' and now I understand why nobody
does it (yet) :P

------
asaddhamani
Doesn't work for me (Chrome 73) :/

Edit: nvm. Didn't realize it was in the hash section.

------
happppy
so much history.

------
jawnknee
But can you build an animated waveform using this approach?

------
sandov
Everyday we stray further from god's light.

------
onesmallcoin
Animations don't work on cromium (android)

------
kkarakk
wavyurl.com works amazingly well on chrome mobile but firefox mobile just puts
the unicode characters there. BOO!

~~~
carc1n0gen
Working perfectly fine on my firefox

------
yyx
My firefox got OOM killed thanks to this.

~~~
nialv7
You are probably using Simple Tab Group

------
_def
please no

------
kemyd
And that's something!

------
sAbakumoff
looks good, but completely spoils the back button, hence not applicable for
any SPA. too bad.

------
fajarsiddiq
add it at dailyhack.xyz

------
sureaboutthis
Another perfect example of the childish activities of the web today. Remember
the days when postings were about serious technical advancements and not
random hobbyist activities?

~~~
pault
What? Stuff like this is what made the web fun. At least he put it on his own
blog instead of facebook.

~~~
SamuelAdams
Agreed, sometimes it's nice to take a break from all the serious development
and do something fun.

