Hacker News new | past | comments | ask | show | jobs | submit login
Animating URLs with JavaScript and Emojis (matthewrayfield.com)
747 points by bemmu on April 17, 2019 | hide | past | favorite | 165 comments



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.


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


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!


Thanks for the tips and tricks. If you ever made a video on how you make videos, I'd be first in line to watch that.

I haven't looked at Premiere since the bad old days before it traded places with Final Cut as the default choice for editing. These days, I spend most of my time on Ubuntu and use Kdenlive for my very minimal requirements.

The one thing you have that is much harder to teach is great comic timing. I suspect that it will serve you well in many aspects of your life. I don't know if you've been polishing your fast five, but if you ever have an opportunity to try your hand at standup, I'd encourage you to go for it.


Check out ShareX, it can easily capture a subset of your screen, and you can hold a modifier (I forget which) to snap to common video resolutions / aspect ratios.


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.


A nice side effect of it being so commonplace now is that most youtubers are doing their own editing, meaning the jokes and queues are very authentic to their personality and intent, vs having to be inserted after the fact by a separate professional who just wants to get the job done. See for example shows like Laymen Gaming or Girlfriend Reviews, both of which are full of Arrested Development style cutaway gags.


> meaning the jokes and queues are very authentic to their personality and intent

I think that's less a thing than we maybe think. I think the medium crafts the message and even the messenger. There are certainly YouTube like "patterns" and I see a lot of channels eventually devolve into them. Time and again over time I see something I like and then they ever so slightly creep towards the YouTube drama stuff, and before you know it they're doing "reaction videos" and even if their other content is still active it just doesn't feel as authentic anymore.

Not to say I entirely disagree, but I do think the medium has a great deal of influence and IMO that impacts "authenticity" and etc.


This makes me think of that editing 'style' where Youtubers will edit out every single pause for breath, so not only do you see their head snapping about every 2 or 3 seconds, you're practically listening to one massive sentence. To me it feels awful and it ends up making me feel tense.

Like anything though, it only takes one or two people to do it before it catches on and everyone starts emulating it.


Indeed. I don't need it much, but the video and audio editing techniques I learned from making YTMNDs has been valuable.


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


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


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


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


Is this satire, or...?


It's just humour. AMP is obviously trash unless you're a Google shill, and this project isn't exactly productive. But at the same time I do honestly believe the world would be better off if AMP developers resigned themselves to building useless stuff like this instead of AMP.


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.


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


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


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


Irrelevant question, but did you go to Monta Vista a few years ago? I remember your name from there sometime ago.


I did! I graduated two years ago.


Nice.


Just checking to see if you trust me boss ;)


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.


I created a small library for Ruby/Rails that aliased a few methods with emojis. You could remove database objects by using the gun emoji, or trim a string with the scissors emoji.


This is pretty neat! Although, if I did it in my company, I would be packing my things very fast.


I guess yours are at least, in a way, semantic.

I've seen attempts where any connection between the symbol and what the method was doing was purely coincidental.


Check out Emojicode: https://www.emojicode.org/

"Emojicode is an open-source, full-blown programming language consisting of emojis."


Tell ya what, there's a Lisp dialect made with emojis.


> 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 α, β, γ


You can already use Greek letter variable names in Python: https://stackoverflow.com/questions/17043894/what-unicode-sy...

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


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


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


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


I'm not from Greece and I can type any character I need to. It's just a matter of thinking very hard about it, and then the character "pops".


What do you mean? Remembering the compose key sequence?


yes, I want to use them in C. It is possible with clang but, unfortunately, not with gcc. I also want to be able to type them into TeX, both in math mode and in text mode, without much fuss.


\theta doesn't seem that bad. Typing something like \kissyface or \poop seems better than clicking around or typing a numeric code, albeit with the usual name guessing problem.

On OS X, and I assume others, you can add items to be automatically replaced, so something like "!t" could become a unicode theta if you want.


HN strips out emoji... but this works in ruby (replace "<emoji>" with a smiley for example)

    def <emoji>
      puts "helloworld"
    end
<emoji>

> helloworld


Swift lets you use any unicode characters, so emoji are perfectly valid variable names.

I've seen some "cute" github projects that use them, but they're obviously not for real life use since emojis are tough to type.


Purescript does the same thing (some people like using Unicode symbols for “forall” and function arrows) and it’s also led to amusing github goofs: https://github.com/i-am-tom/purescript-prelewd


In the book Diamond Age by Neal Stephenson the future working class are functionally illiterate so everything is communicated by emoji. Funny, but also a little bit frightening.


Eh, emoji is just pictographic script anyway.


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.


Agreed... though, I'd imagine the mostly us-ascii centric programming model might be harder for some foreign languages. The worst, for me, as an example is when I see a special non-us character for JS examples as the assigned variable for a library.

edit: on the flip side, it's pretty cool for passphrases (where allowed)


The most-used emojis are designed as a language of emotions, making them ill-suited for most programming projects. But that doesn't mean that there aren't emojis that would be very useful in programming. Emojis just aren't used because we lack good input methods for them (outside of smartphones)


It’s too late. My company has a database where the name is the sunglasses emoji.


I remember a few years back a common hackathon project was to use lex and yacc to make emoji languages. It was always cool to see what people do with that. Maybe there will be an APL or something with emoji.


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


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


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!


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.


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.


If you curate your browser history, this is an easy fix. This is more of a problem for people like me who occasionally check their browser history because they want to revisit a site they were on recently.


It made the back button useless for me.


I didn't experience that using Chrome. What browser are you using?


Happened to me with Chrome on OS/X - no way back!


Chrome on Android for me. Had to close the tab.


I had this problem in Chrome on linux.


Same with Firefox on Android.


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.


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.


Not tackling the same problem but in the spirit of removing things and Firefox, you can bring up a url in the address bar, press down arrow, press Delete, and it'll go away

It only deletes that very specific url though, like foo.com, however foo.com/bar will still exist


I think that only works before Sync replicates all those crufts to every other device.


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.


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


It actually just updates window.location.hash instead, which does cause a flood of history entries (looks like just one per distinct animation state, though, at least in Chrome). See the "One Last Thing" section near the bottom of the article for the rationale. See the inline code snippets in the article, or view source for wavyurl.com to see the actual code used.


At least in Safari, history.replaceState() still pollutes the browser history, all it does is avoid breaking the back button.


I think it also crashed LittleSnitch


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


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


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.


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.


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


I just tested, Safari still throttles history.replaceState().


I tried this and it still seems to flood my browser history. I can use the back button properly now though.


Would you approve animating the title?


That's not for you to decide.


All you can decide is what to do with the URLs that are given to you.


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.


This deserves to be on awesome-quirks, I think

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


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


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


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


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


According to https://news.ycombinator.com/item?id=19682014 you can use replaceState without being throttled.


literally hundreds of entries, I don't think that's very cool.


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


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.


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.



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.


Gitlab CI also updates the favicon


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


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


you can use replaceState for that and back will work fine


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.


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


Oh nice; good to know that there's an easy way to get around that.


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


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.


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


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


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.


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


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.


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


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


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


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.


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.


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.


... damn, dude.


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?:)


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


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


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


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


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). I stumbled upon Chrome's rate-limit quite a few times (now it seem to have been raised). Thanks!


look at what you've done to your browser history


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


Unfortunately they still appear as punycode in most contexts.


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


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.


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.


Ah the marquee tag for URLs :D


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


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


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


Or, just open in a new tab.


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


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.


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.


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


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


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


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

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


so much history.


But can you build an animated waveform using this approach?


Everyday we stray further from god's light.


Animations don't work on cromium (android)


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


Working perfectly fine on my firefox


My firefox got OOM killed thanks to this.


You are probably using Simple Tab Group


please no


And that's something!


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


add it at dailyhack.xyz


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?


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


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


I guess this is something one does when one isn't playing their games.


I remember when it was about animated "under construction" gifs on millions of pages across the likes of geocities, and everyone self-publishing... until the social networks came... MySpace allowed for customized css which had a lot of user activity... then facebook normalized it all.

While I do appreciate the clean aesthetics most of the time... I really do like to see the creative individuals gets some things in.

Additional ideas mentioned include animated favicons and titles... I'd throw in that an audio waveform with music would be cool too.


I mean if you mean ARPAnet then yeah. The web was always a place for creative people to meet and talk about the eccentric stuff they were into.


> Remember the days when postings were about serious technical advancements and not random hobbyist activities?

Not really no? Certainly not in the last 20 years at least.


[flagged]


its a joke.




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: