Linode – Our cloud server of choice. Deploy a fast, efficient, native SSD cloud server for only $5/month. Get 4 months free using the code
changelog2019. Start your server - head to linode.com/changelog
Gauge – Low maintenance test automation! Gauge is free and open source test automation framework that takes the pain out of acceptance testing. Less code, less maintenance, more acceptance testing. Gauge is a free and open source test automation framework that takes the pain out of acceptance testing. Gauge tests are in Markdown which makes writing and maintaining tests easier.
Fastly – Our bandwidth partner. Fastly powers fast, secure, and scalable digital experiences. Move beyond your content delivery network to their powerful edge cloud platform. Learn more at fastly.com.
- Brush up on your Contra knowledge
- Here’s the Konami-JS repo on GitHub
- Try it for yourself on huffpost.com
- here’s the issue we discuss regarding
- Party Parrot as a Service
- Also the OG: Cult of the Party Parrot
- confetti-js (might break your computer)
- Check out vaporJS
- And its security-focused successor: Semicolon.js
- cloud-to-butt went mainstream
- thanos-js might be the greatest package of all times
Party on, party people! Let’s make some noise! Divya is in the house. Jump, jump, rejoice. What’s up, Divya? Welcome to JS Party!
Glad to have you. Divya, let me ask you a very serious question… When I say to you “Up-up, down-down, left-right, left-right, BA”, what do you think of?
Like a video game or something? I don’t know…
A video game… Ding-ding-ding-ding… Very good. Today’s show is all about video games, or at least a specific video game; or maybe not even games in general, but cheat codes specifically… And we have a very awesome guest here to talk to us about Konami-JS, George Mandis is on the show. George, thanks for joining the party.
Thanks for having me.
We are excited to talk about Konami-JS. First of all, give us the history of this… Maybe talk about the Konami code in general, because maybe some people didn’t play Contra back in the day, like I did… Because as soon as I hear those words, I’ve always gotta throw the “Select Start” in there at the end, because you wanna get that 2-player going, and free 30 lives. Not actually part of the Konami code, but I always memorize it, “B, A, SELECT, Start”, because I’ve gotta get P2 going… But I have that frame of reference, and I’m sure a lot of our listeners don’t have that frame of reference. Tell us about the Konami code, and then we’ll talk about Konami-JS and how it got started.
Yeah, definitely. I think maybe we’re in the similar age demographic you and I, because you and I probably remember it that way. I used to think Start was actually the end of the code for a very long time, until the internet [unintelligible 00:02:44.04] at some point. But yeah, going back to it, the Konami code is, exactly… This goes back to the original Nintendo gaming system back in the late ’80s through early-mid ’90s, however you wanna look at it.
There was a game company called Konami, and with a lot of their games they included a sequence of basically button inputs you could do on the controller to enable certain features in the game, to enable certain upgrades, or shortcuts, or Easter eggs, or things of that ilk… And for many of their games it was the same sequence of inputs on the controller… And because it was by Konami, it kind of became known as the Konami code. I remember reading about that in game magazines, and things like that, back in the early ’90s.
It was the coolest thing to know the code, because back then, pre-internet, cheat codes were very hard to come by. I remember Nintendo had a game genie, where you could actually do cheats like that, buy beyond that, it was a secret sauce to know a cheat code, so you wanted to tell everybody… Showing that to your friends was always a way to be cool in video game terms, back in the day.
[00:04:00.11] And when it came to Contra specifically, it was pretty much required, because it was one of the hardest games of all time. [laughter] A side-scrolling shooter where you’re – kind of a platforming shooter, one or two players, and you get three lives by default, and unless you’re awesome, there’s just no way that a kid is gonna make it through Contra all the way. But if you do the Konami code, each of you get 30 lives instead of three, which is actually the right number for making it through. Generally speaking, you can complete Contra with 30 lives, but just no way with three lives. At least I couldn’t, because I didn’t have those skills.
So it became very popular for that reason. Kind of a viral code, because yeah, you wanna share it with your friends, it’s a two-player game… And I remember I used to write it down, and then try it over and over again until you can get it right.
Did they use it on a bunch of their games? Because Contra was the only frame of reference that I had, but did it become a thing that all Konami games, or many Konami games used that code?
I know Contra was the original one, as I understand it… I’m sure they used it in – I mean, there’s probably a list somewhere. I remember using it in a lot of other Konami games, as a kid. I can’t remember specifically which ones, but… It was frequent enough. And it became such a well-known code… I remember some other non-Konami companies would sometimes put that code into their games, as sort of an homage to that, to enable certain things…
Divya and I were just chatting before the show started about video games, because we were talking about home offices, and the fact that she’s got a Nintendo Switch in her living room, and she doesn’t want an office out of her living room because she’s got the Switch right there… Divya, you mentioned that you have been playing a lot of Switch games, but you’re not a lifelong gamer, or you haven’t been around – are you familiar with Contra, or did you play that at all?
I actually don’t know what that is… Because like you said, I didn’t grow up playing video games. Maybe I am not in that demographic, but I also am not in my own demographic, because I did not play video games. I think my brother had one of those Playstation – the Nintendo Gameboys… But that’s the only… I didn’t actually play a game. I played games on PC, which was very different.
Well, I’m on the Wikipedia page, which we’ll put in the show notes, for those not familiar with Contra. I don’t blame you, it was released on February 20th, 1987, so… I mean, we’re going back there. That being said, I do believe it’s on the new NES Classic, so if you’re after it and you wanna give it a shot, you can get that NES Classic for $60, something like that, or maybe $90. If you can find one and you can catch up on all your Contra needs…
I remember in – I think it was early 2009 or so, I’d been a freelance web developer for like two years at that point, almost three years, and I remember reading an article about someone who’d figured out that if you enter the Konami code while you’re on ESPN.com, a bunch of unicorns show up on the page, or something goofy like that. I think it was using the Cornify library, or something like that, which might still be around also… And I thought, “Well, that’s really funny”, and I went and I checked it out, and it was great. That spawned a bunch of articles about other websites you can go to that have secret Konami code things hidden away. There was a few of them. And I think shortly after that Facebook came out with one.
[00:08:08.08] So I saw that, I thought it was cool, and I wrote a little non-jQuery-dependent implementation, and I put it out there. That was fine, and a few people – I put it out there on Google Code at the time, which we can talk about later… And a few people picked it up, and that was great. Then I also had at that point the first iPhone; I had the slowest, smallest iPhone that was ever in existence, basically. I had the 4GB initial one, and I loved that thing… And I thought “Well, it’d be kind of cool if somehow the Konami code could also work on my phone. There’s gotta be a way.”
So I extended my little Konami-JS library to include touch events, so that you could do the Konami code on smartphones. That’s when it really took off, because it was pretty easy to copy and paste the code, or to come up with your own code… Just listen for a sequence of key events, but… The touch events were a little trickier; there was a little more going on there. So I think that’s what made my library at the time just slightly different enough to be worth using, and for whatever reason it just kind of caught on at that point, and a lot of people started using it.
I think the other thing that made it popular at the time is I tried to make it really easy to use for people that were not necessarily developers. I had an example, and it was literally two lines of code; if you just wanted to throw a new string in your site, where after you enter the Konami code it redirects to another website, here are the two lines to copy and paste somewhere into your blog, and you just change the URL to where you want it to redirect to. I think somewhere between the touch events on the – like, ease of use for non-developers, it was popular at the time. It just hit at the right time.
I’m curious about the touch events… So it was up-up, down-down. Are they swipes? Do you touch the top part of the screen? How would that work with mobile?
They’re swipes. The swipes map pretty well. You swipe up for us, you swipe down for down etc. The part where I sort of cheated, and I wrote about it in the documentation, is for A and B we just do two taps, because I could think of a much better way to do that. So technically, it’s like up-up, down-down, left-right, left-right, tap-tap when you’re doing it on your phone… Because it seemed like a reasonable trade-off. I thought, you know, if you wanna be really elaborate, we could try to actually draw the letter B on the screen, but at the time that seemed like a little bit much.
This is definitely my ignorance around what constitutes a Konami code… Do you have examples of what a Konami code would look like? Because you mentioned a little bit about how it was on different sites there was like unicorns on a page, and… It can be any form of an Easter egg on a page? It’s not a specific type?
Yeah, so I don’t know what the exact definition of an Easter egg is, but anything that’s hidden and, by my definition, a little useless… But yeah, there’s a lot of different applications. The ESPN one was the first one I remember noticing in a while. It got a lot of attention; it just added unicorns all over the page. If you go to HuffPost.com, they’re actually using Konami-JS, and if you enter the Konami code right now, it changes the title of HuffPost to FluffPost, and all of the photos get changed with pets, and people’s dogs mostly. It made me laugh, I discovered that a while ago. It really surprised me that actually it was still being used… You know, it’s not this terribly difficult thing to write, but… I think I’ve described this project - it’s just simple enough that you feel like you shouldn’t need a library, but just ever so slightly non-trivial enough that you might as well just include this library.
HuffPost has it, Marvel.com used it way back in the day, which is a funny story…
[00:12:03.19] I actually wish I’d done more over the years to document where it was used, because I kind of retroactively started researching it when I decided it’d be a fun story to tell… And I actually went through archive.org, of all places, to find old references and sometimes old snippets of sites that had used it. I know on Tesla.com you could design your car online, and they had extra features enabled if you entered the Konami code; I don’t know exactly what, because I never bought a Tesla, so I don’t really know… But all kinds of things.
I saw one application where they were using it to test and debug somebody’s website, in a somewhat serious way, which kind of surprised me… Newsweek used it for a while as well. When you entered it on Newsweek, it would replace all the headlines with something about zombie attacks.
Nice. I just tried FluffPost.com, by the way, and it still works today, so… [laughs]
Yeah, some of those are really funny actually; some of the headlines paired with the pet photos make me laugh.
How did you actually find them on archive.org? Are they loading it from a CDN? I would assume people would be minifying it out… Or is there a string you can search for?
Yeah, if you just generally search for konami.js – I mean, that’s about as well as I’m able to do it… The example code that people could copy and paste back in the day basically introduced Konami as like a giant global to your site… So whatever reason it’s somewhat easy to find that code, if you start searching through archive.org. It’s also easy to find people referencing it and then through a little slew thing you can pull up old versions of sites that they reference. That’s how I’ve found the Tesla thing. I didn’t find Konami-JS in Tesla’s code on Archive.org; I found an old forum post referenced to it being available on tesla.org in 2010, or 2011, or whatever… And then through Archive.org I went back and I was able to look at the source and figure it out. I’m like “Oh yeah, it is up here. That’s funny.”
You mentioned that Marvel.com used it, and I read that broke Marvel.com somehow. Did they forget a semicolon, did they use it wrong, or was there actually an Easter egg that caused problems?
Technically, I did it, I broke it… [laughter] But it was only for about a minute.
Statute limitations out by now?
I mean, it was ten years ago… I don’t think anyone noticed. This was before all the Avengers movies, so I feel like it was getting slightly less traffic. I remember somebody on Twitter, within a year of me releasing that thing, just pinged me and said “Hey, I wonder what happens if you go to Marvel.com and use the Konami code.” It was a kind way of letting me know that “Hey, we used your thing on this thing.” I went and I checked it out, and I think Deadpool as like a weasel popped up on the page, or something… That was the Easter egg for that one. And I thought “Oh, that’s really cool!” And I looked at the code and I’m like “Hey, they’re using my project. That’s great.”
I got really excited, and I thought “Oh, you know what I should do - I should make that one improvement that I wanted to make to Konami-JS…” I don’t even remember what it was, to be perfectly honest… And the way they’d implemented it - they implemented it in a way that I had in my example documentation, which is to link directly to the raw file on Google Code (I think, at the time), or possibly GitHub. There was a brief overlap where I had it on both early on; we’ll talk about that later. But anyway, they were linking directly to the raw file in the repositories it was exposed, so when I updated it, it updated Konami-JS on their site, and I didn’t test it, I didn’t think it through; I just pushed it really quickly, because I was kind of excited, and then I went back to it and all the images were skewed…
[00:16:10.22] It was kind of like broken, and I reloaded it a few times, trying to figure out what was happening, before I realized “Oh, I think I did that…” [laughs] And I looked in the console and I figured out, “Oh yeah, I think I screwed that up.” And then I reverted it really quickly. It was broken for like a minute, so… Apologies to Marvel, if they’re hearing this.
Yeah, I know. That crossed my mind later, actually… Many years later, when I realized that a lot of people were doing that. Tons of people were linking – especially when I moved it to GitHub, a lot of people were linking directly to the raw file on the GitHub page, kind of using it as a CDN, which I don’t think was really the way they wanted me to do that back then… Yeah, that crossed my mind, and I’m like “Oh, that’s kind of scary, and bad”, and it’s a lot of people not realizing they’re trusting me to not make their website redirect to something stupid, [unintelligible 00:17:08.18]
Or inject your cryptocurrency miner and harvest the world… [laughs]
Yeah, I know. That was less on the horizon in 2009, but yeah… [laughs]
George, one thing that’s notable, even for sort of a silly library - I believe you used the word “silly”, so I’m free to - such as Konami-JS, something that’s adding a specific keyboard shortcut to a website, is that it’s gone on for a long time. And there’s very serious open source projects, and then there’s less serious open source projects, but nonetheless, they’re still open source… And it’s a decade later, so the timespan of the project is interesting. As you mentioned, you were on Google Code, it has since moved to GitHub…
The web has changed, even if Konami-JS was maybe feature complete back then; we can talk about that, too. Maybe you’ve been adding stuff. But tell us about the timespan, the ten years - what’s changed, what have you had to do? Sometimes just maintaining the status quo for a thing that even if you think it’s silly or you don’t even use it anymore, because the web changes, your code will rot. Tell us about that.
I kind of weighed my options. I was going back and forth between GitHub, Google Code, and I think SourceForge, which is also still around, but you seldom think about that anymore now. So I chose to put it out there, eventually Google Code got shut down and I moved it to GitHub, which ended up being the right choice, I think.
[00:20:04.07] At the time, I think when I first put it out there, I wanted it to work on all browsers and devices, so I had to work on IE6; that was a big requirement, I remember… And I wanted it to work on IE6, and I also wanted it to work on, like I said, my iPhone, at the time. My iPhone 1. It was just called the iPhone; there wasn’t a number, because there wasn’t anything else.
And I also wanted it at the time to not be jQuery-dependent, even though jQuery, like I said, was seemingly on like 90% of the web. I was starting to see, even at that point, that okay, jQuery is getting us out of the woods here, but I think long-term I don’t wanna have to load a 100 kb library every single time someone comes to the page. Even though there’s all these strong arguments for it, all these advantages, there’s a purist inside of me that doesn’t like to be too dependent on giant sprawling pieces of code that most of my site is not making use of.
Oh, it totally did, I think. Yeah, so that was the interesting thing. It was also my first foray into releasing a project that anybody else actually looked at and used and wanted to submit changes to, and stuff like that… So it was kind of a fun adventure in trying to debug some curious edge cases. I remember when it was on Google Code, I think using the Conkeror browser on Ubuntu, some early version of Ubuntu, it created problems, and I don’t know how that got resolved honestly, but… Just things I’d never considered, things that would probably not come up now.
The other interesting thing I noticed when I released it was a lot of the pull requests that came in were things I’d not ever thought of, or in some cases cared about too much. I had a couple pull requests come in that just changed my spaces to tabs, and then back to spaces, and I’m like “Whatever, man…” [laughs] Sorry. That just kind of made me laugh, because I realize like “Oh yeah, people have strong opinions on these things”, and I guess I should form – I have less strong opinions on some of those things, but I realize I need to make a decision and not just merge every request that comes my way.
A request came in for module loaders and dependency things, and people’s very specific toolchains that they were using at the time, that I was not using, and in a couple cases was not even familiar with… And I remember early on – early on I merged almost any change that came in, which was a little silly; I mean after vetting it a little bit… But I became a little bit more judicious as time went on, a little more discerning. Because I realized that - again, getting back to the jQuery thing - I want this library to do two things; I want it to stand alone, I want anybody to be able to include this in their project, even if they’re not really a developer.
That was part of the appeal to me - I wanted it to be something that very beginning developers, or people who just like to dabble… I wanted it to appeal and be usable by dilatants. I want a very low barrier to entry, and every time I started to introduce some sort of package management thing, the barrier to entry got raised up a notch, I realized, and every time I looked at that, I thought “I don’t know if that’s something that needs to necessarily be a part of a project like this.” So figuring out a balance between accommodating people who use those toolchains, and things like that, versus making it a required part of using the project has been an interesting balance, I think.
Yeah, it definitely raises the usability aspect of it… Because often times when you do open source, you might wanna make changes where you’re like “Oh, I could change everything to TypeScript, because it’s better”, and various things… But then if you weigh out, “Does it actually affect the end user?”, and if it does, by adding extra complexity, then it might not be as useful.
[00:24:12.29] It might help you as the developer who’s maintaining it maybe, but over time it can get a bit – as you said, less people might be keen on using it, or it might cause issues down the road. If you change code and then it’s no longer compatible, and then someone using an older version updates, and then it no longer works, because their system is not built to handle the new code that you wrote, and so on…
Exactly. So in a roundabout way, by trying to make it compatible – I remember one request coming in for compatibility with Android JS, or something like that… And I’ve never used Android JS, and I don’t even recall exactly what the change was, but I realized that “Oh, if I introduced that into my code, then I’m sort of beholden to however that project changes down the road.” And again, getting back to [unintelligible 00:25:00.05] this project is delightfully frivolous, so… But even though this project, because of its frivolous nature, I can make choices like that, but I think it’s a good exercise in just looking at almost any project releasing - realizing what other projects out there you’re beholden to, or dependent on… Whether it’s a literal dependency, or just like accommodating certain styles, or services, or whatever it is.
Because I think the web today is much more – I was gonna say “stack of cards”. It sounds a little more fragile than intended, but it feels much more like a stack of cards than it did ten years ago. Things are so interdependent, and it allows us to make really wonderful things, but there’s also a certain fragility… I don’t know what to say about it actually, but there’s something about it that sometimes concerns me. I don’t want it to be lost that we can build things that are not dependent on a million other packages, or one of the big three or four tech companies and their products, and things like that.
I think it’s really wonderful that you have found that balance in this project… Because this project’s been around since 2009, and you’re still making changes and updating minor things, and people are still using it… It’s just incredible, because often times whenever it comes to open source, people talk about just being sick of a project, and wanting to just pass of the burden to someone else… Like, “I’m done. I’ve maintained this for years. I wanna pass the baton on to someone else who might be excited and wants to make those changes…” But you were able to find that very nice medium where you still enjoy working on it, and you’re making changes slight changes to the documentation to make sure that it’s up to date just a little, without being overwhelmed by it… Which I think is really neat.
But it also points to exactly what you talked about earlier, because Konami is so specific… And it’s really tiny and super-fun, and I think people tend to forget that sometimes when we think about creating a project, either in open source or whatever, we tend to blow it out of proportion, where we can’t just create this tiny thing, we have to make it a huge project, that does all these things, and has compatibilities with all these other frameworks… And then that initial fun side-project becomes a huge task, and then people just abandon it and never finish it… Si it’s really neat to see that you were able to take something like – it seems silly, but it’s also emblematic of joy. You really enjoyed it, and that totally shows, because you have been maintaining it and it’s been up since 2009, and there’s this whole history… And I don’t think that’s the case for a lot of projects out there, which I think is notable.
[00:27:54.19] Yeah, I can relate to a lot of what you’re talking about. It’s interesting – I definitely had the temptation to make it do more a few times, particularly early on. Everyone once in a while I have – there was a while I explored like “Maybe I should make it this really elaborate Easter egg framework library, that does all things for all people”, but I kind of saw where that would go, and I’m like “That seems like something I would not really want to maintain”, and it kind of kills the spirit of what it is. It does one thing, it does it well…
I don’t really want to necessarily lose the broad compatibility, because right now it work on Internet Explorer 7, last I checked… I think I dropped 6 support at some point. Because I think you couldn’t call addEventListener(), you had to call something else; I’m blanking on what it was called. So I had a function that specifically used whichever method was available, because that’s kind of how you had to do it back then.
So figuring out how to do that has actually been really tricky, and one of the things that’s kept me from rewriting it all this time. It’s like, I don’t really know how to rewrite it in a modern way, that keeps it compatible for everybody, and if I do, then I have to introduce something like Babel, which is awesome and great, but then I’m introducing these heavy-handed dependencies for something that is really very trivial and kind of frivolous, and “Is that really necessary here?” Like, what’s the point.
Yeah. Well, I often warn about the big rewrite, but at 150 lines of code, it’s at least within scope of something you could accomplish. That being said, I would actually discourage it because of the reason that you said - introducing a build step, introducing a dependency or any sort of complication here, or… I actually think it’s awesome that it runs on IE7, even if that doesn’t matter anymore.
Yeah. I think a lot of people focus a lot on constantly updating things, and making sure that your code is up to date, so like “Don’t use promises, use async/await. Don’t use .char code or .key code. Use .key” and all these various things, with the new updates… Sometimes some things are good when they stay as is. It’s not that you’re in stasis and that you’re not updating, and you’re consistently keeping the status quo, or not growing, or whatever the association is with keeping the same thing… Yeah, maintaining the current state of things, but – there’s definitely something to be said. When something works, I just think that if you can make an update that will not change it drastically, do it. But if that update is purely frivolous or purely for the sake of updating something, then why do it? But I really wanna hear this discussion about keyCode vs charCode, so yeah, go ahead.
[00:31:58.12] I’ll touch on that in one second. I just wanted to speak to something that you mentioned. I totally agree, and what’s interesting is I think the change for the sake of change is something that in some ways I feel permeates our industry massively… And it’s interesting - ten years maintaining this project has been an interesting perspective on that, but also just ten years of being a developer is an interesting perspective on that, seeing things come and go, deciding what changes are really worthwhile. If someone stumbled across my project on GitHub, they’ll probably think “Oh, this isn’t maintained very much anymore. They haven’t really made a change in a couple years”, and I think that mentality in some way sort of serves into this idea that we need to be constantly changing things.
It’s really hard to do exactly what you said, because GitHub tends to prioritize – when you look at a GitHub repo and it hasn’t been updated… And I do the same thing - when I go on a GitHub project and it hasn’t been updated in years, I’m like “Okay, I should not use this, because there’s a change it will break everything that I try to use it on.” And that might not be true. It requires investigation.
I guess maybe if you have a build that says “All builds passing”, or something… Because otherwise it’s hard to tell if it’s not being maintained, if it’s broken. I used Hammer.JS for a really long time, and I really liked it because it does a lot of gesture events, and stuff… And for a time it wasn’t maintained; the maintainers kind of stepped away and just stopped updating it. And I was like “Oh, maybe this is something I shouldn’t be investing my time in, because there’s no active development on it”, but it was still working. I could still use a lot of the gestures that were on there, like swipe, and whatever, and it gave me access to that… But just the fact that it wasn’t in active development made me – and I think also people I was pitching it to, like managers, were like “Oh, we shouldn’t use that, because it’s not actively maintained.”
I don’t know if our industry has a sense of how exactly to fix that issue, because prioritization is always given to the latest and greatest thing… So discoverability is also an issue, because if something has been around for a long time, but hasn’t gotten a recent update, it tends to kind of get shafted next to something else.
I feel like we’ve done a show – a part of that, Divya, is the individual responsibility of vetting your dependencies before you select them… And really what we’re talking about is how do we message with each other; how does George say “Hey, this thing hasn’t been –” the actual .js file, the main one, hasn’t been updated, like you said, George, since July 2018. That doesn’t mean the project is unmaintained. So we need ways of messaging to each other, “Hey, I’m done with this. I’m never gonna touch it again. It is unmaintained.” Or “Here’s a fork that works.” The problem with that is the person who’s burnt out or leaves the project, they don’t wanna come back and put a sign up that says “Unmaintained”, because they’re gone, right? So sometimes that doesn’t happen.
I feel like we did a show on this, or at least we talked about it a little bit. Maybe we should do a specific show on heuristics for dependency selection and for judging is something is worth pulling or not worth pulling, and all the things you said. Because there’s tons of – if you’re just going to GitHub and looking for the JS project with the most stars, you’re doing it wrong. That being said, doing it right isn’t necessarily easy, or even intuitive. Because the intuitive thing is “Look for the most popular one. That must be the best.” So maybe we should follow up and do a whole show, or at least a whole segment on dependency selection… If we haven’t done if before. I feel like maybe I’m repeating myself. Maybe there is one out there in the JS Party archive.
Yes, George, tell us about – bikeshed the keyCodes for us.
Oh yeah, the keyCodes… I have to remind myself – I documented it pretty well a few years ago in one of these issues. Basically, it was a note to myself, because people weren’t logging a ton of issues at the time.
I think this was when I was looking into just generally modernizing the script… Let me see here. I’m actually gonna pull up the issue with my own notes, just to make sure I remember this right. Basically, there’s a lot of different ways to figure out what key is being pressed if you’re listening for keyboard events on a web page… And the ways that I was using earlier in the script were all – if you go to the MDN documentation, there’s warnings about this way being deprecated and phased out. “You should not use this. This is not the [unintelligible 00:36:57.26] in the spec” etc.
I did a deep dive into that, and what I discovered is in theory there’s three different ways that I was previously using that I should not be using, and there are two modern ways - Code and Key, that should be used. Actually, I’ll add a direct link to that issue in the Slack, if people wanna see it. But in my experimentation, the ways of it being deprecated work on all the browsers, but the new ways don’t… [laughs] Or have some weird inconsistencies in them. So I wasn’t sure what to do. I’m like “Well, if I leave it…” – actually, I don’t even remember off-hand which one I’m currently using…
I think you’re using keyCode.
Yeah, I’m using keyCode. So keyCode is one of the ones that I technically shouldn’t be using… But it works. The trade-off is also that unless you have an external keyboard – you’re probably not using a keyboard on these devices we’re talking about. That might have been what influenced my decision to not change that. I can’t actually remember now. I know trying to get it to work on my iPad Pro was something I tried to do a few years ago.
I added a couple of keyboard shortcuts to Changelog.com. I actually remember going into this exact situation that I think I’m reading in your issue here, George… All I added was – while the on-site player on Changelog.com is playing, you can hit Escape to exit it, you can hit Space bar to pause, and then S will toggle speed of playback, which there’s actually no UI for that; so it’s a little bit of an Easter egg, but these are things that are minor, and I just did the keydown events, and switched [unintelligible 00:38:33.01] But I am using keyCode, and I tested on modern browsers; that’s the one that you’re using as well, although you’re not supposed to be, so… I guess we’re in the same camp.
The way I think of it is - in our case, it’s kind of a progressive enhancement anyways. If it doesn’t work, the site is not broken, so I just want a key code and go from there.
Yeah, that’s right. It’s funny, if you go to the 2.0 branch somewhere in my repository, I actually rewrote a modern version of Konami-JS. It’s just sitting there; a couple people collaborated and helped me out with that… And I used one of the new keyboard event methods. I don’t remember actually which one. I used whichever one worked on my iPad; that’s what I recall. And then someone followed up on that issue and I let them know “Oh hey, I remapped my keys to use Dvorak or whatever, and it doesn’t actually work.” So I discovered this whole new hornet nest of curious issues where one of those tracks the letter that you’re pressing, but other ones actually track the physical key location.
It just made me think about it in a way I had not considered, and I’m like “Oh, that’s a whole different nest of problems that I have to consider.” It was just really funny how basically what you would think is a very simple thing turned out to be kind of a rabbit hole when I started going into it.
Divya or George, are you fans of the Party Parrot? Do you use the Party Parrot? Some people love the party parrot, other people despise it. I tend to be pro Party Parrot myself, but I’m interested what you guys thing.
In addition to Party Parrot there’s Party Porg and Party Blob, which is just like a blob dancing around… It’s great. So much fun.
That’s funny. I am also pro Party Parrot. I was trying to find it the other day and put it into something yesterday, when something launched for this client of mine. I couldn’t find it and I was disappointed. [laughs]
Well, let’s move on from Party Parrot… Divya, you added one that I wasn’t familiar with, Confetti-JS. Tell us about this.
[00:43:48.17] It allows you to put confetti on your website. It’s pretty much the base of it. And does a lot of similar ones, I think. This Confetti-JS, which I think is just a background of Confetti, so your background can have actively falling confetti… And then there’s Canvas Confetti, which allows you to have confetti in specific directions. So you could have a base, a cannon which fires from the bottom, and then a random one that fires a random direction… And then you can have fireworks, with confetti popping up everywhere. It’s super-fun, and the amount of code that you have to write is pretty minimal.
The only one that I actually kind of wish I’d merged, just to look at once in a while - someone submitted a pull request for gamepad functionality… So if you had a joystick actually plugged into your computer, you could do that. I thought that was actually pretty cool, and in the spirit of what I made. But I don’t know, it’s just been on my backburner for a long time and I don’t actually have a joystick to test it with. I think that’s the bigger problem.
The great thing about this - I think when it hit Reddit and Twitter and whatnot, it got a ton of pull requests, and they’re all hilarious. Somebody added a minified version, so in the repo there’s vapor.min, and then there’s like a vapor model file… And they’re all just empty. People had lots of fun with that one.
That sounds a lot like – I think someone created Thanos JS, which just randomly removes files… [laughter]
That’s pretty funny.
Last but certainly not least, probably the most successful, or the one that everybody knows about, is cloud-to-butt.
I remember that one…
Oh, man… This one actually – so vaporJS, those made the developer rounds, like the Reddits, the Hacker News, Changelog etc. but cloud-to-butt actually went mainstream. Cloud-to-butt, from maybe 5-6 years ago, was right when the word “the cloud” was becoming the marketing term of the day amongst your big tech companies… And there’s a Chrome extension that replaces every occurrence of the phrase “the cloud” with “my butt.” I have to admit that I installed this one and rocked it for a little while.
I did too, for a while.
[laughs] Confession time…
I think it might even be older than that. I remember the person who developed it is from Portland. I think he works at Panic, Steven Frank. I remember that one; that one really made me laugh.
[00:47:49.19] This one was dangerous, because it would scan every web page you were on. It was a Chrome extension that would just string replace straight up… And the phrase “the cloud” was used quite a bit, but not so much that you’d always recognize it. That’s the fun thing about it - you’d kind of forget that the thing was there, and then you’d see a big call-to-action on somebody’s marketing page, and it would say “It’s time to move to my butt”, or something like that. And then you get a laugh all over again, because you’d forgotten a little bit about it. But it was dangerous, because a lot of these times you’re browsing in a meeting, or with your boss, and you forget that the extension is there, and it can get real nasty.
I believe there’s a screenshot gallery. If you’re not so brave to install this one but you wanna check out some of the funnier cloud-to-butts, we’ll link that one up. PanicSteve links to it… It’s on Flickr, so that kind of dates the library as well, back when Flickr was the place you’d post these things. Nowadays it would probably be on Instagram… Safari version, Firefox version, Opera version. That was a lot of fun.
Meanwhile, Divya has found Thanos JS. There it is - a casual, but dangerous package that will let Thanos snap fingers and delete random files inside a directory. [laughs]
It uses an fs.unlinkSync to delete files. So it traverses your directory and it just randomly deletes things… It’s very dangerous, but so is Thanos. [laughs]
I love the technical details… It says “Technical details: Yes, it deletes the files. For those of you who are confused about what this package does, exactly half of the files are deleted. Each file is given a chance at random, in either the top 50% of the files or the bottom 50%.” It’s sort of binary tree, or something.
Yeah. I really wanted to just look at my Node modules folder and just delete stuff half the time… [laughter] Because half the time – I mean, going back to when we were talking about dependencies, sometimes I just download one thing, I’ll npm-install, or yarn-add one library, and then I’ll look at my Node modules and I have like 50. I’m like “What?! How did that happen?” Because it’s like “Oh, it has to do this, and then it has to download core-js”, and then sometimes if you end up adding a dependency that has a bug in it or whatever, you end up having an issue where it’s incompatible with some dependency that isn’t actually the library itself, it’s like another library trying to work – because that library was updated, and then the one-year using hasn’t been updated, so it’s not compatible anymore, and you get like “Hey, there’s an issue with core-js” or something random… And you’re like “I don’t know…”
Have you ever gone into a Node modules folder and tried to fix something? Because I have, quite often.
I’ve spelunked, but I’ve never actually made changes. I read through things in there, but I never actually tried to fix anything.
Just because I’m like “I need this to work for now, while I’m in dev mode”, and then you try to grab whatever code change you made to the package, and then you create a PR, but then you’re like “I don’t know if it worked, because I don’t know how to test this…” It’s horrible.
[00:50:55.12] Yeah. That’s the fun stuff. Real quick on this Thanos JS - if you look at the usage for this thing, Thanos JS is the name of the little command line tool, I guess… And you pass it the snap fingers argument for it to do its thing. That’s limited power. If you want full power, you have to pass in the “–with Infinity Gauntlet Glove” argument, and then it does its thing. This is hilarious. And notably, I suppose - and we’ll close it down here - on npm you attach the keywords, and they attached the “Not safe for work” keyword to this… Not because it has NSFW content, but because you don’t wanna run this Thanos JS at your work. It is not safe. That’s hilarious.
It’s not safe for your computer.
[laughs] It’s not safe for anything. Good stuff. We’ll link to all these and more, everything referenced, in our show notes. George, thanks so much for joining us today. Any last words, anything about the future of Konami-JS, or anything you’re working nowadays you wanna tell folks about before we call it a show?
Oh, gosh. Well, first of all, thanks for having. It was a lot of fun. As far as Konami-JS goes, I’ve still not completely shelved the idea of a 2.0, so I am definitely open to discussions and issues. My thought is maybe to release it as – just perpetually leave it on a separate branch, so if people wanna make contributions there, I’m all ears. And beyond that, I don’t really have anything to promote that’s reasonable… [laughs]
How do people reach you online?
People can google me, because a long time ago I think I got basically every George Mandis username and domain that’s out there, at some point… But if you go to george.mand.is - that’s my site and blog. Anything I’m working on, you can find there. You can also find me on Twitter, where I don’t say a lot, but I’m on there.
Very cool. Well, thanks for joining us, George. It’s been lots of fun. Thanks for helping make the web silly and frivolous all these years. We do appreciate it. That’s our show for this week, we’ll see you all next time.
Our transcripts are open source on GitHub. Improvements are welcome. 💚