14 ms·
Animating URLs with JavaScript and Emojis
- fajarsiddiq 8y agoadd it at dailyhack.xyz
- sandov 8y agoEveryday we stray further from god's light.
- lazyhummingbird 8y agoNiiice! 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.
- oevi 8y agoThis 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 8y agoUnless someone browses full screen or bookmarks the app to their home screen on mobile so there is no visible url bar to animate.
- hit8run 8y agoAh the marquee tag for URLs :D
- droptablemain 8y ago"Your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should."
- ralusek 8y agoThat 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
- cjblomqvist 8y agoCool! It did however completely break my back button....
- mrighele 8y agoBecause 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 8y agoDidn't the article say the history API was throttled on Chrome and Safari?
- mrighele 8y agoYou'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
- kensign 8y agoliterally hundreds of entries, I don't think that's very cool.
- pault 8y agoAccording to https://news.ycombinator.com/item?id=19682014 https://news.ycombinator.com/item?id=19682014 you can use replaceState without being throttled.
- serpix 8y agoBetter trash the past hour of history since every animation is a separate history entry :D
- lwansbrough 8y agoThose idiots over at Google AMP are working on destroying the web when they could be working on something productive like this.
- revskill 8y agoIt's sad/funny that some big companies adopt AMP in their products even faster than Google themselves.
- eli 8y agoBig companies care about how they appear on search results pages, google doesn’t.
- emilecantin 8y agoGoogle: Look at me. I am the result page.
- dymk 8y agoIs this satire, or...?
- lwansbrough 8y agoIt'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.
- kkarakk 8y agowavyurl.com works amazingly well on chrome mobile but firefox mobile just puts the unicode characters there. BOO!
- carc1n0gen 8y agoWorking perfectly fine on my firefox
- vortico 8y agoSimilar to https://web.archive.org/web/20110726095900/http://probablyinteractive.com/url-hunter https://web.archive.org/web/20110726095900/http://probablyin...
- Grumbledour 8y agoThis 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!
- happppy 8y agoso much history.
- asaddhamani 8y agoDoesn't work for me (Chrome 73) :/ Edit: nvm. Didn't realize it was in the hash section.
- benguild 8y agoThis reminds me of putting marquees in the window.status like 20 years ago
- Tade0 8y agoThe 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.
- reaperducer 8y agoLet'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.
- Lukas_Skywalker 8y agoI 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.
- enriquto 8y ago> 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 α, β, γ
- OskarS 8y agoThis 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 8y agoWhile 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#The_replaceState()_method https://developer.mozilla.org/en-US/docs/Web/API/History_API...
- dspillett 8y agoIn 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?!)
- tomc1985 8y ago> ou can use emoji (and other graphical unicode characters) in URLs. And wow is it great. But no one seems to do it. Why? Perhaps emoji are too exotic for normie web platforms to handle? Or maybe they are avoided for fear of angering the SEO gods? No, we don't because it's stupid. Thank god e-mail spam doesn't seem to do this very much with subject lines, what is so wrong with putting TEXT where text belongs? Welcome to Web 3.0, home of shitty memes and stupid emoji gimmicks
- sydd 8y agoits a joke.
- deleted 8y ago[deleted]
- yilugurlu 8y agolook at what you've done to your browser history
- vanderZwan 8y agoThis deserves to be on awesome-quirks, I think https://github.com/dsalaj/awesome-quirks https://github.com/dsalaj/awesome-quirks
- _def 8y agoplease no
- durnygbur 8y agoWell 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?:)
- Chazprime 8y agoWell, I suppose if you’re missing the old days of the internet with pages of flashing icons, this will be comforting.
- sdan 8y agoCompany 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?
- KitDuncan 8y agoThis is the best thing I've ever seen on Hackernews.
- saagarjha 8y agoAn 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) :)
- thx-i-hate-it 8y agoThanks, I hate it.
- z3t4 8y agoAm I the only one thinking about buying many domain names to do the animation on the actual TLD ?
- Ayesh 8y agoProbably 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 8y ago... damn, dude.
- Traubenfuchs 8y agoWould 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.
- deno 8y agoYou can’t do this on the domain name, or even subdomain. Changing origin requires actual navigation, and would probably trigger loop detection.
- scrollaway 8y agoIt'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.
- peteforde 8y agoI 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.
- aasasd 8y agoYoutube 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.
- joombaga 8y agoIndeed. I don't need it much, but the video and audio editing techniques I learned from making YTMNDs has been valuable.
- mikepurvis 8y agoA 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.
- duxup 8y ago
- hombre_fatal 8y agoAm 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 8y agoGithub does this for pull request status, it’s really great
- hombre_fatal 8y agoLooking 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 8y agoGitlab CI also updates the favicon
- bubblicious 8y agoShameless plug for a tiny project I did a while back that does exactly this: http://nicolasbize.com/faviconx/ http://nicolasbize.com/faviconx/
- throwaway287391 8y agoI 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 8y agoYou got me to go back and watch it. It was great.
- sAbakumoff 8y agolooks good, but completely spoils the back button, hence not applicable for any SPA. too bad.
- verrecken 8y agoLooks really shity on a mobile phone and blocks the back button. Ah and it also spams the history, great :)
- tempodox 8y agoWe 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.
- lifthrasiir 8y agoThis 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 8y agoYour 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.
- ofrobots 8y agoIt made the back button useless for me.
- craftycode 8y agoI didn't experience that using Chrome. What browser are you using?
- schemathings 8y agoHappened to me with Chrome on OS/X - no way back!
- archon810 8y agoChrome on Android for me. Had to close the tab.
- misterdoubt 8y agoSame with Firefox on Android.
- uneekname 8y agoI had this problem in Chrome on linux.
- daveFNbuck 8y ago
- yyx 8y agoMy firefox got OOM killed thanks to this.
- nialv7 8y agoYou are probably using Simple Tab Group
- sureaboutthis 8y agoAnother 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?
- MeltySmelty 8y agolol you are a fucking bitch
- pault 8y agoWhat? Stuff like this is what made the web fun. At least he put it on his own blog instead of facebook.
- SamuelAdams 8y agoAgreed, sometimes it's nice to take a break from all the serious development and do something fun.
- sureaboutthis 8y agoI guess this is something one does when one isn't playing their games.
- toastking 8y agoI 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.
- penagwin 8y ago> 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.
- tracker1 8y agoI 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.
- jjar 8y agoNote: you must have <meta charset="utf-8" /> in <head> for this to work.
- recursive 8y agoOr you can just use \u escape codes and keep all your source in ASCII.
- OnlyRepliesToBS 8y agothis is cool companies will ruin the web with it tho
- nwsm 8y agoThere 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 8y agoUnfortunately they still appear as punycode in most contexts.
- epidemian 8y agoThe 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!
- onesmallcoin 8y agoAnimations don't work on cromium (android)
- ryanmcbride 8y agoI love stuff like this. It's not practical and likely breaks a lot of standards but I love it.
- jawnknee 8y agoBut can you build an animated waveform using this approach?
- bork1 8y agoOne 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 8y agoyou can use replaceState for that and back will work fine
- bork1 8y agoOh nice; good to know that there's an easy way to get around that.
- tracker1 8y agoI 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 8y agoHe explains in the article that he couldn't do it with History API since it is throttled by the browsers.
- codedokode 8y agoMaybe browsers should go back not to previous URL, but to previous domain.
- umvi 8y agoUse incognito mode for this site... your back button will thank me
- reubeniv 8y agoIt blew my mind, then I tried to hit 'back' and now I understand why nobody does it (yet) :P
- codedokode 8y agoAfter 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.
- codedokode 8y agoI think in Japan he would be arrested for corrupting browser's history.
- kemyd 8y agoAnd that's something!
- deleted 8y ago[deleted]
- TheKarateKid 8y agoI'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 8y agoIf you ever see emoji in hackernews comments then hackernews, as it has been, is over.
- blueline 8y ago..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 8y agoEmojis 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 8y agoMan, I wish I could use the eye-roll emoji here
- miguelmota 8y agoClever hack, but impractical; ruins history, back button, and urls are usually pretty long meaning the loading bar will not be visible or partially visible.