Animating URLs with JavaScript and Emojis
matthewrayfield.com
matthewrayfield.com
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.
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.
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.
Like anything though, it only takes one or two people to do it before it catches on and everyone starts emulating it.
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...
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.
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.
If you consider Amp mainstream, or a programming language, it’s already too late.
I've seen attempts where any connection between the symbol and what the method was doing was purely coincidental.
knowing a few people in this world, I am sure that this will certainly happen way before you can have variables named α, β, γ
I've used θ in code dealing with angles before.
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.
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.
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.
def <emoji>
puts "helloworld"
end
> helloworld
"Emojicode is an open-source, full-blown programming language consisting of emojis."
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.
edit: on the flip side, it's pretty cool for passphrases (where allowed)
It only deletes that very specific url though, like foo.com, however foo.com/bar will still exist
Well done to the author of this hack on finding a way to dump massive amounts of data to firefox's sqlite store.
URLs should be static, simple, and as short as is reasonable.
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...
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?!)
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.
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.
[1] https://developer.mozilla.org/en-US/docs/Web/API/History_API
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
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);
}
Here's a 16x16 pixel game of Defender implemented by animating the favicon: http://www.p01.org/defender_of_the_favicon/
The few websites I first checked, like Facebook, I must've misremembered. But it's definitely still out there in the wild.
Edit: HN doesn't support emoji in comments. That was supposed to be surrounded by sirens.
better hope there aren't any closeted road-signage-designers lurking on HN then
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.
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!
Something like media controls, progress bars or even consent banners. This way they would have an unified appearance and could be user scriptable.
edit: apologies... I'm still used to the old history behaviors, I don't use it much.
Edit: nvm. Didn't realize it was in the hash section.
Not really no? Certainly not in the last 20 years at least.
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.