Cool, depending on your definition of cool

Alright, well welcome to JS Party, where every week it’s a party in JavaScript. I’m Feross, I’m gonna be hosting this week, first week. I’m here with three awesome panelists. The first is Suz Hinton. Suz, do you wanna say hi?

Hello!

Nice. And the second panelist is Nick Nisi.

Hello!

And then last but certainly not least is Alex Sexton.

Hi, everybody. I’m back.

Cool. So we’re gonna be talking today about some really fun stuff. I’m super excited about our topic for this week. We’re going through a bunch of things - things from old DOM APIs, to our favorite HTML tags, weird websites, nostalgia, a bunch of old stuff, maybe web security, and surprising and weird websites.

I’m so pumped for this episode!

Nice. So let’s just get right into it. The first topic favorite HTML tags. Suz, do you wanna maybe go first and just tell us what HTML tag you selected as your favorite?

Yeah, so we were talking about weird tags that are not always necessarily used to this day, so I went a bit nostalgic and my favorite weird, old HTML tag is the map tag, where you make image maps, which are super fun.

I think most of you were doing HTML on this panel back when image maps were really popular, right?

Yeah, I never actually used one myself.

Oh, really?

Yeah, never used it.

Image maps were the best for adding (what were they called?) secret parts of websites; you click on the eyeball of someone’s eye, and then you get to go to some link… [laughter]

Yes, it’s so true, and it was like an Easter egg way of doing things, but it also meant that instead of having to have all of these separate pieces of an image an tile them all together in some kind of table layout in order to create these different hot spots you could click on, you could essentially apply a map HTML tag to a matching image tag, and you could set up these regions (I guess); it was kind of similar to SVG, where you could either draw like a rectangle, or you could draw polygons, and then each little hot spot would end up being a href just to go somewhere else, which was really awesome. So you could have a map with lots of different cute little buildings and landmarks, and that could be the navigation for your website.

[03:45] The reason why I really liked it was because looking back over it, it was kind of weird, but it did solve a pretty awkward problem that we had, where we couldn’t lay things out as nicely, like what we have with grid layout these days… And it just forced people to be really creative. The navigations that people made with that especially was really entertaining, and there were all these really cool online tools that allowed you to generate these image maps, so you could actually draw the polygons instead of having to hand code them… So there was this really cool culture of being able to push the limits of this HTML tag, for sure.

Suz, do you know, was this tag created before there were tables? Because I’m thinking maybe you could simulate this with a table. You could have like an image in every cell, and then just slice up the image basically, and put each piece into a cell, in a table, and then you could linkify a few of them.

That’s really funny that you say that. I was thinking the same thing, Feross, and I went to check the historic records of the Space Jam website to see if that’s what they were using, if they were using the map… [laughter] But they are not. They are using a table, and putting each image into cells.

Interesting! Yeah, I should have researched that, but I’m not actually sure when it did come about, and I remember those days of creating like an entire layout and then using slicing apps in Photoshop, and things like that… But I feel like instead of image maps now we have – we still have table layouts a lot of the time in emails, and so each little region is like a clickable cell, I guess… So I guess we’ve kind of seen that approach live on in a lot of HTML emails, even if they’re not using map anymore.

The map was first introduced in the HTML 4.0.1 specification, so I think tables pre-date map by a good chunk.

Interesting.

Well, I guess you can do other shapes in map too, besides the square… So that’s a unique feature.

It certainly is a superset of the linkability possibilities, but I think there are other reasons to do table layouts, because you actually wanted certain cells to shift based on the content, and things like that… So it wasn’t always just a single image.

That’s true, yeah.

But still, very good deep cut.

Cool. Alex, do you wanna share your tag? Unless there’s anything else we have to add about map.

No, we’re good.

Oh yeah, I’m curious actually, real quick - does map still work today? Is it part of the spec, or is it deprecated?

Oh, I should have looked that up.

I believe it’s still in the living standard.

Is it recommended to use it still, or is it discouraged?

Well, it was only a recommendation in 4.0.1 and 5, and now it’s just part of the living standard.

Cool.

I don’t see anywhere where it says that it’s discouraged or anything like that. I guess it just shouldn’t be used for the things we used to use it for. It’s actually great for linking parts of an image, but it’s bad for page layout.

Yeah, I think that we have much better tools these days for doing this, and I think that websites almost have moved on, to the point where we sort of want a nice structural hierarchy, rather than an Easter egg “You have to hunt to find stuff…”

Yeah. Interestingly, you can’t have the map tag without (I think) the area tag, right? So you kind of get two for one weird tags with this deep cut… So the area tag is just like how you define the coordinates of a shape that you wanna link inside of a map. So if you ever wanted to use the area tag, there you go.

Of course, all the examples, even in the living spec, are still fully capitalized examples of – all the texts, it’s like MAP!! AREA!! HREF!! Which is good, I’m happy about that.

I love it, that’s awesome.

Cool. Alex, tell us about your favorite tag.

[07:45] Yeah, I’m gonna be a jerk and mention a few, mostly because they’re not that interesting to talk about deeply. My favorite tag I think has always been a <dl> tag. One of the reasons I like it is because the thing that that stands for, they changed it between HTML 4 and 5. It used to be a definition list. So it’s a dl element, and it can contain dt’s and dd’s, which are like definition titles and definition… Somethings.

The cool thing about it was it was kind of like an unordered list, or like a <ul> tag, but you could have unlimited definitions of single titles. It’s one of the worst elements for hierarchy, because it’s just - you give the dt, and then everything after it… Any dd after it - you could have 10, you could have 0… It’s going to apply to the sibling element, rather than being inside of the dt, which I always thought was weird.

And then it mostly didn’t change what you use it for, but they thought it was a better definition of the dl to call it a description list instead of a definition list, because that opens up wider possibilities. It doesn’t have to be like “This is a word and these are the five meanings.” But you could imagine a dictionary has the word – it has a dl, and the word is the dt, and then all the possible definitions would be dd elements. And that was kind of cool, but whatever.

The next one is the <wbr> element, which is the word break opportunity element. It just gives the renderer the ability – it says “If you have to break up this sentence, here’s a really good spot to do it”, and I think it’s underused. A lot of people try to use white-space, nowrap or whatever hyphen incantation you need to make that work in CSS… But a lot of times, if you just have a good rule of where to inject <wbr> elements, they render as like empty bytes and they don’t show up on the page, but they tell the renderer where to go…
And the last one is just a shout-out to <iframe>, because there’s nothing you can’t do with an iframe. So if I had to actually pick my favorite HTML element, it’d be an iframe. It’s just too large of a topic to even brush.

That’s awesome.

Cool. Nick.

Alright, mine is not gonna be a popular one, but it got me through so many really boring classes in high school, so I’m going to give a shout-out to the <applet> tag. That’ll probably seal my faith of never being on this podcast again… [laughter]

Turn off his mic.

[laughs] You know, playing old Java and Flash games was a big part of my high school class experience, so I really liked it; I’m really glad that it’s dead, and please don’t even try and use that. I don’t think you can anymore, but… Yeah. There were a lot of fun games that you could play.

Quick question. Were random access memory by arbitrary attackers a big part of your high school experience as well? [laughter]

Probably, but I was oblivious.

Being part of botnets was a big part of my high school experience.

Actually, I’m wondering, what’s the difference between <applet> and <object> and <embed>? Because I think all those are similar, right? They all let you embed a flash or a Java thing…

Yeah, there were different rules around the access that things initially had. I think initially for the Java stuff you’d have to have the little coffee logo, the Java logo that came up and spun, but I think applets had more of like first-party access to things, which was scary… But I think also it’s very specific to Java, and so <embed> and <object> became the IE and standards version of <applet> for arbitrary third-party things, rather than just Java.

[12:08] Also my first big experience with trying to create (I guess) something more than a web page was with <applet>. In high school, my school blocked AOL Instant Messenger for a few days, and in that time I was reading and learning Java, reading a book on Java, and there was a chat demo in there, and I was trying to make that work as an applet. I never really got it to work, because I didn’t know anything about what I was doing, but it was fun to play with that.

[laughs] That’s great. I remember once I got a PC Mag and there was like a Java applet in it with the source code. This was before I had the internet, so I sat there and painstakingly typed the entire application into notepad, and then I didn’t actually realize that you actually needed the runtime and all of this other stuff, and I didn’t have the internet to get it… So I spent hours typing this thing in; I wanted to put it in an applet tag, and then I never actually got to do it, which was really sad.

Aw, that’s really sad… [laughter]

It ran in your imagination, the best JVM…

Yeah… It was gonna be really cool. It was one of these whiteboard apps where you could like draw pictures and stuff, and I was like “Oh, I’m gonna put this on my website, and it’s gonna be awesome.”

What did you end up putting on your website instead?

I found my very first website recently on a floppy disk, and it did actually use frames, Alex, so you’ll be really happy with that.

Wait, but that is not what I said. I said iframes. This is very different.

Oh, that’s a good point. Okay. Well, it used frameset, which is awesome… And it was me reviewing Pokémon games and talking about how you can enable glitches and stuff in the game.

Oh, wow. That’s like Smash Brothers ahead of its time. Like, in order to get hacks and go further in the game, right?

Yeah, so there was a Pokemon called MissingNumber…

MissingNo, yes!

Yeah, MissingNo, and you could swim around the SSN boat, and things like that… So yeah, there were really cool hacks.

Yeah, that’s such a blast from the past… Wow.

My first website was about motorcycles - I guess, like, dirt bikes - and I’ve never ridden a dirt bike before… It’s just the guy who taught me how to build websites had a dirt bike website, so I was like “I guess I’ll build one of those, too.” [laughter]

My first one was a Mr. T fan page.

I think that wins. [laughter]

Mine was just like a personal site that I put some home movies that I made on…

I feel like that’s very Feross. [laughs]

And then your second website ever is the one that we’re gonna talk about for the second segment?

Yeah, yeah. First, I got a semi-favorite HTML tag. My favorite HTML tag is <plaintext>. I’m actually curious, have any of you heard of it before this?

No, I hadn’t heard of it before you mentioned it.

Yeah, it’s a really weird one, and it’s like – it goes back to the really early days of I think like maybe the original Netscape. My impetus for – okay, first let me say what it does… So if you put a <plaintext> tag in a page… First of all, there’s no closing that. You can’t close it, so it just opens… And then everything that follows the <plaintext> tag, it just renders as plain text, and you can’t stop it. So it just starts making everything after it plain text, and you can’t undo it or close it.

I feel like this is the ultimate injected script tag. [laughs]

[15:42] Yeah, it’s useful actually for – well, it was useful to me at one point in time, and that’s why I went looking for something like it… Because when I was doing my company in 2013, I had this idea to make a peer-to-peer content delivery network. Obviously, not too unlike what WebTorrent does today, but to do it as like a CDN that people would use to power host their static content using WebRTC… And there was no service worker back then, so you couldn’t stop resources from loading normally over HTTP and then try to load them over WebRTC without having the user go and change the way they make their website. So what I wanted to do was make it so that they could just add my script to their website, at the top of their website, in the head tag, and then I could prevent all the resources later in the page from loading.

It wasn’t possible to wait until the ready event or to try to select the elements and rewrite to remove the source attribute from the images or from the videos. It wasn’t fast enough. The browser was actually doing those HTTP requests really quickly… Because I think it has this –

The look-ahead…

Look-ahead, speculative parser, yeah. It finds anything that looks like an HTTP link, and it just starts to open up the connection to the server, and all that. So anyway, even if you stopped it, it was too late; it was already wasting resources.

And there was no service worker, so it wasn’t possible to do this properly, and intercept the requests and handle them differently… So what I resorted to was the worst hack ever - just with document.write, the <plaintext> tag into the top of the page, which would just show the whole website as HTML. But then we would apply a style attribute to the <plaintext> tag, which was display: none. So it wouldn’t show the HTML. It was like hidden, but it was there in the page.

Then we did regular expression over that. And there’s now text a text node in the DOM. The whole source of the site is like a text node. We’d regex it, change all the source equals to something else, like data.source=, and then inject it back into the page.

Amazing. Amazing.

And that worked in every browser?

That worked in every browser, yes. In Firefox it gave you a warning. It would warn you about how you’re slowing down the pageload by…

Document.write?

Yeah, preventing the speculative parser from working. It knew that plaintext did that, and it had a special warning for like not doing that. So that actually added like half a second of load time upfront, so it wasn’t really a good idea, but it was the only thing that worked.

Just for reference, the HTML plaintext element has been deprecated since HTML 2, which is impressive. [laughter] It was obsoleted in the spec in HTML 5, so it’s listed as deprecated, but I think it does not even mention it anymore. So yeah, you shouldn’t use it…

It was never implemented in all browsers, but it sounds like all the big ones have it if you were using it to your advantage.

Oh, interesting, yeah. I just remember we tested the big four and it worked. Maybe Edge doesn’t have it, because that wasn’t even out then… I don’t know.

In general, you probably want the pre-element – the interesting thing about it (you kind of said it already) is you don’t need the closing tag, and that’s because you can’t have the closing tag, because once you’re in plain text, the closing tag would be plain text. It can’t be parsed anymore. It’s impossible to have a closing tag; it’s not that that’s good, it’s just that it must be that way.

I love it.

Yeah, the thinking of this tag must have been to – if you’re trying to serve HTML source that was readable by the user, then you could start it out with a plain text tag, or something. Then the browser wouldn’t interpret it as HTML.

But why didn’t they just use MIME types, or like a content type header, or something? I guess maybe that wasn’t around, I don’t know.

[19:50] Those things were around I think for the most part, but if you think about a lot of these early things, it’s like, the web wasn’t important yet, whenever this stuff was made. So it’s just like, imagine working at your company right now, and being like “What if we had a way for people to show HTML?” and someone’s like “Okay, we could just add this tag, no big deal”, and then later the world relies on your technology, and it’s like “Hey, no one thought this out”, and it’s like “Yeah, no one thought this out.”

I don’t know… It’s just so old that they didn’t have to consider how ridiculous it was, I think. It was just like, it kind of worked.

We’re gonna go right into our second topic, which is the annoying site. This actually started out as sort of an experiment where I was trying to figure out what web APIs could be abused, and were designed in a way that maybe were open to unintended or unexpected uses. So I was looking through all of the different web APIs I could find on an MDN site, and just thinking like “Okay, I see… So there’s a permission prompt on this one, or there’s a restriction in this way, but what if we did this differently? What can we do, and what kind of site can be put together?”

Then I just like went through each one and just thought of like “How could this feature be used to make the most annoying possible site?” I just put them all into one site, and that’s what you can visit at theannoyingsite.com. But if you visit that - fair warning - do it in an alternative browser, or in an incognito window, because it’ll do some things.

It’s not necessarily malicious, but it can certainly log you out of some sites that you’re logged into… Like your Google account - you’ll just get logged out of it.

Feross, I think we’re starting at this point where we know what it is, so it’s like the first thing you wanna do is warn people, but what happens when you go to the website?

So you see a sort of innocent picture of a cat, and then it says “To get started, click the cat.” Actually, it suggests that you hold down the space bar, because that actually causes a more disastrous outcome. Basically, as soon as you do either of those things - you click on the cat or you press space, it will pop up one or more pop-up windows that can actually move around your screen… And they move around and bounce off the edges of the screen, making it really hard to close the windows with your mouse, to hit the X button, because the window is physically moving around and bouncing around your screen.

Then it tries to prevent you from getting out of that, even with the keyboard shortcuts. So if you hit Cmd+W to close the window, that gets intercepted with a pop-up that will actually block that shortcut from working… And it does like a bunch more things. It vibrates your device if you’re on a mobile device, it puts text on your clipboard, it shows the print dialogue, it tries to ask for your camera, it does full-screen mode, it asks you if you’re sure you wanna leave the website if you’re trying to leave, it blocks the Back button from working, it fills your history with embarrassing searches, it navigates the tab that actually linked to this site, so that it takes over more of your tabs… And on and on.

[24:11] And I’m actually thinking of more things to add to it, because there’s actually a few more things that I’ve just learned about… Like the speech synthesis API - apparently, that one is unmutable. If you try to mute a tab – like, you can still make sound from the tab if you use the speech synthesis API, so I’ve gotta add that one to it, for sure. But yeah, it’s actually just a crazy number of things you can do.

Why did you make this? You were trying to annoy someone?

I just thought it was interesting that you could move windows around, yeah. There’s also kind of a story… I was trying to get revenge on a spammer, basically; I was trying to waste their time, because they wasted my time, so I wanted to send them a link that could make them force-quit their browser and lose whatever work they had unsaved. That was the idea. So yeah, I actually responded to this spammer, and I assume it worked. [laughs]

Some Nigerian prince just got downgraded to duke… [laughs] So let’s jump into some of the repercussions of such a large array of abuse, all chained together. I think the interesting thing is that any one of these APIs, slightly abused, is within the realm of like, that maybe is a decent tradeoff by the browser, because you want people to use this, or you want it to be accessible without having to click on a bunch of permissions, or you want it to be on by default, so people actually use it, things like that, but then also if you string a bunch of these things together or use them in the worst possible imagined way, which, Feross, you seem to be exceptionally gifted at coming up with, the outcome is to the extent of – maybe not like a violation of privacy or anything like that, but certainly can destroy someone’s entire browsing session, which is like on the edge of security and just like extreme, dark UI.

Yeah, I was gonna ask Feross, were you afraid to push this live? Or how did you feel when you sent this URL back to the spammer?

Part of me was worried that doing this would end up causing these APIs to get restricted in some way. That was my main concern. I don’t want the web to get crippled. And you can kind of already see some of this stuff happening… I mean, there’s been times in the past where the browsers have had to dial back some of the power of these different APIs. New APIs require HTTPS a lot of the time, or they’re not available…

There was also an issue where WebRTC, which is used to do peer-to-peer connections, was able to gather your local IP address, which is useful for connecting to people who are on the same Wi-Fi network as you in a really efficient way, because then you can just connect directly to their local IP… But there were literally ads that “We’re creating WebRTC connections to nowhere”, and just gathering your local IP address, which is additional data they could use to track you, because that IP address might stay the same, even if you clear your cookies. So that was basically really bad, and so they took that feature away… Which just makes the connections worse, right? But then the tradeoff was if you give the website permission to use your camera and your microphone, then that local IP address then comes back, so you’re allowed to use that again.

The idea is, like, if you’re giving your camera permission, your microphone, that’s already more intimate than your local IP, so go ahead and let the local IP to go through… But that hurts use cases like web torrents, or any other WebRTC use case that doesn’t use the microphone or the camera, because now you have like a worse route… And then I’m trying to think… There’s like a few more cases like this.

[28:05] On the IP address, just because it’s interesting - the other interesting thing about that and maybe a bunch of these is you can’t really pop up to normal users “This site would like to know your local IP address”, right? That doesn’t mean anything. You can say “This site wants to access your camera or your location” and that means things, but “This site wants to know your local IP address” is just meaningless, so how does a browser solve for that? …they can’t necessarily do that easily.

The whole thing reminds me a lot of evercookie. I don’t know if you remember that… This is a similar type of project where cookies can be cleared, and browsers are doing a better job of allowing people to block third-party cookies and things like that… And there’s a guy named Samy Kamkar, who’s kind of a security researcher. He got famous for the “Samy is my hero” MySpace vulnerability way back in the day…

Oh, yeah…

MySpace famously offered him a job after he hacked MySpace, or whatever… And it was just like some script injections that automatically made people friend him and write “Samy is my hero” on their MySpace wall, or whatever; I don’t think it was called a wall.

When they offered him a job, they flew him out to L.A., and when he got to L.A., they arrested him under the – not espionage, but the Patriot Act, and then he couldn’t use a computer. But the day he came back, he released evercookie, which used Flash cookies, and then it used Java applets, and then it used local storage, and then session storage… It used every possible way; it used the Window History API, it used just about every last little tiny thing that you could possibly use to store data. It even used like old exploits in Java that you could run in order to accidentally leak memory into other parts of the system.

So the only way whenever evercookie came out to not have the data permanently stored was to delete your browser and reinstall it. And even then, unless – I think on Safari you could be in private mode and just restart it. The idea was not that people would use this, though they did; advertisers immediately started implementing evercookie as part of the ads that they’d do, but the browsers now had a clear list of ways, like “Here’s this one thing that we need to beat, because it does everything… And if we beat this, it’s unlikely that someone could come up with this much stuff.”

I actually think theannoyingsite is a really good use case for browsers in the same way… Because evercookie does not work in any browser anymore, and it became a really useful tool to know exactly what to try to prevent… So I think you did a good thing here.

Thanks. Yeah, I’ve actually had this type of thing happen to sites I made before, too. I made one that fills up your hard drive using local storage; it was filldisk.com. That doesn’t work anymore, because browsers also used it in their testing. Yeah, it’s actually good, I think, to actually push this stuff to its limits. Because I think there are some reasonable things that people can improve…

I was hoping maybe we could quickly go through just some of the APIs and have y’all guess whether they require user permission or not.

Yeah. There’s like three levels, right? You can do it automatically, you can do it after user interaction, and then you need explicit permission… Maybe those are the three?

Those are the three, yeah. So user interaction means any kind of event that is explicitly the users interacting with the site. So that doesn’t include things like scroll or mouse move, because those are gonna happen way too easily… Just things like clicks, taps or key presses. So that’s considered user-initiated gesture.

[31:56] Only because you mentioned it and it was super interesting when I saw you give a talk about this - you mentioned mouse moves just now… I did not know that if you move a browser window under someone’s mouse… So technically, there’s like a differential in the browser window and the mouse, that a mouse move is fired the same… Like, the mouse is not moving, the browser is moving… You said that a mouse move fires the same as if you were moving the mouse over it, and I just thought that was interesting enough to tell everyone.

It’s quite useful to know that. You can make a browser window follow the user’s mouse around by using that trick. Anyway, so let’s go through this… I’m gonna move pretty quick, because I have a decently long list here. Okay, so open a pop-up window.

That one’s definitely a user interaction. That’s the first user interaction. That’s like the poster child of why pop-up blockers work on this whole thing of like an event must be explicitly tied, right?

Yup, that’s right. Okay, cool. What about if you want to vibrate the device? Actually make the phone vibrate.

I don’t wanna be the only one answering, but that one’s free.

Yeah, I feel like you need no permission for that.

Yeah, that’s correct, yeah. So actually, ads used to vibrate people’s devices. I think they now restrict it to the top-level domain, but… Yeah, it’s crazy.

Okay, next one - say you want to focus a windows. This is gonna be like a pop-up window that you’ve popped up in the past and you wanna focus it, bring it to the front.

Yeah, as long as you control it, there’s no permission needed.

Actually, you need to do that in the click handler, in my experience.

If you popped up the window in a click handler, then even to refocus the old one you need another click?

Oh, I haven’t tried that, but to refocus the pop-up window once the main window’s been refocused - to go back to the pop-up and bring that to the front, that would require user interaction.

Interesting. I think I’ve seen that with PayPal, actually. There are times when the modal didn’t work, and it was a pop-up instead, and then if you just refocus back, it would end up having to make you click to go back to it, and I remember that kind of loop, so it reminds me of that.

Okay, what about copying text to the user’s clipboard?

Uuh…

Gesture.

Yeah, I think that needs an action, right?

Yeah, that’s right.

That’s still abused a lot though, because you know when you copy a paragraph from like a news website, and then when you paste it, they’ve inserted an extra bit into your clipboard? I hate that so much.

Did Flash have different restrictions with that? Like, could you do it without any kind of gesture?

I believe that also required a gesture. Okay, what about reading off of the clipboard? So the user copied syntax from another program on their computer, and then they go to the site… Can a site read the text?

I think that’s never, right?

Not anymore, actually. There’s a new API that lets you read it, but it requires explicit permission, of course, because you could have copied like a password or something, from another app.

What’s the API?

It’s like Navigator.Clipboard-something… I don’t remember. Okay, what about showing the print dialogue, like “Do you wanna print this web page?”

That one is free.

How do you know all of these, Alex?

I’m just… Intuiting.

He’s just very confident. [laughs]

Well, if you think about how print dialogues work, a lot of times you click on some link on a bank website and it brings you to a page, and then four seconds later a print dialogue pops up, right? So that just implies to me that there was no user interaction.

Yeah, yeah.

But it stops everything, right?

Yeah, so it freezes the event loop while the dialogue is open. And the other thing that’s cool is – well, depending on your definition of cool, but it actually prevents you from closing pop-up windows… Because what you can do is – CMD+W is blocked; you can’t intercept that and prevent that from closing the window, but you can open up a print dialogue when the user presses CMD, and then that will actually prevent the W from closing the window.

But then all your windows stop moving around the page, right?

Yeah, that’s the downside. Okay, what about turning on the user’s flash?

The flashlight.

No idea.

I don’t know this one. I assume user interaction, right? I hope.

[36:01] No, user interaction – I think that would not be enough, I don’t know… So first you have to get camera permission, and then once you have a camera object, you can turn on the flash. It’s more for like a camera app to be able to expose UI to the user to let them select the camera settings, like do they wanna turn the flash on, or change the zoom levels, and stuff like that.

Okay, what about triggering a file download?

No permission required.

It takes one interaction, but then after that it’s free.

I don’t think you need anything.

Yes, Suz is right. You get one free file download… Because you’ve seen the sites that go 5, 4, 3, 2, 1, and then the file downloads. It’s the same thing as what you said with print, basically. A new page can just do it. But only once, and then further file downloads need additional user interactions.

So I got it exactly backwards.

[laughs] Yeah. I’ve got a lot more, but I don’t know if we have time, so I’ll just throw in maybe a couple more, the most interesting ones. Okay, so if a site links to your site, and someone clicks that link to load up your site in a new tab, so the linking site used target=_blank, to open up that in a new tab, can your site navigate the site that linked to it? Like, take that tab to another location?

Yes.

It has access to the window object via the referrer, unless they used a noreferrer attribute.

That’s right, yeah. It’s called window.opener, and it gives you a pointer to the window of the other tab. And fun fact - actually, both the tabs are gonna have the same event loop. You need the ability to access the other tab’s window object synchronously, so the two sites on different origins are actually sharing an event loop.

Wow. This is a huge security hole as well. A lot of sites are vulnerable to this.

Yeah, this is why the redirect pattern is pretty common, to throw a middleman in between… Like, if you click on Slack, it’s like slackreader.com/the actual URL, all that kind of stuff, just to make sure this never happens.

Same with Outlook, and a bunch of others.

It’s just surprising that you can combine all these things into one event handler. So the one click can do all the things.

I’ll say kind of the meta-benefit of all this is that because this page is so annoying and bad, you can take other security vulnerabilities. So I try to report as many vulnerabilities as I can. A lot of times they’re not that serious, like an open redirect, or something like that, on some web page. It’s like “Oh, this allows me to put in arbitrary JavaScript, which allows me to do a window.location, which allows me to link someone to a page or redirect them somewhere else”, and a lot of times people are like “Oh, we don’t consider that that harmful”, or whatever. But then you stick theannoyingsite into the redirect, and they’re like, “Oh, this is serious, because someone went to our website and now they’re at this terrible, terrible website.” So it actually has been helpful in people taking things like open redirects seriously, in my experience, in the two weeks I’ve been adding it into things, so… Good work.

Cool, so let’s talk about our favorite weird website now. I wanna get into like the nostalgic, old web stuff, back when the web used to be weird, back when the web used to be mostly full of bizarre stuff… Maybe that stuff’s still out there, I don’t know, but it does certainly feel to me like the web is less weird than it used to be. Maybe that’s just because – and maybe there’s more weird stuff, but maybe like the other kind of corporate, normal world internet is more present, so we don’t see the weird stuff as much… I don’t know, but anyway, weird website - let’s talk about them.

I have a few that I remember that I liked a lot. When I was a kid in high school or middle school I remember Homestar Runner, Newgrounds, Albino Blacksheep… A lot of these flash sites where people posted animations and games. Man, I wasted so much time on those, specifically Homestar Runner and Newgrounds. They were just so delightful. I remember having so much fun… And yeah, the web couldn’t really do anything like that back then, so everyone used Flash for that… And it was great, it meant that we had sort of like pseudo-video-type animations, and a ton of creativity just came out of that, I think.

Actually, I think people used to actually upload videos that were encoded in some really bad format, and played them back in FlashPlayer 2. So there were even videos; those were like early, early internet videos on some of these sites done via Flash.

Like Star Wars Kid, and all the originals…

Yeeees…

Yeah…! [laughter]

I think it’s really interesting - there was all this creativity back then with technology like Flash, that wasn’t necessarily free or as open as the open web is now, and you could do a lot of this stuff today… Maybe I’m just old, but I don’t see as much of that now, now that it’s free and open and a much lower barrier to entry; you just don’t see it as much, which is interesting.

Yeah, I guess you can just record a video on your phone and post it, rather than have to learn Flash in order to encode it and then upload it with its own custom UI.

Yeah, but including things like the cartoons on like Homestar Runner or Albino Blacksheep - I remember watching a lot of those, but I don’t see a lot of HTML5 cartoons. I don’t know if I’ve seen any.

Well, I mean, there’s still plenty of cartoons on YouTube, right?

Yeah, that’s true.

i think it’s that classic form of like, you know, the existence of constraints is what forces people to be super creative; I think that’s how that conversation right there can be summed up. I really enjoyed that time of the web a lot. I was a Flash developer, so I was so heavily inspired by David Firth, who made Salad Fingers and a bunch of others super dark Flash animation videos… And it made me want to be more creative with Flash, because you know, at the time I was a Flash developer making banner ads for the internet, and that was where capitalism really started ruining all of this creative stuff… So that was really good for me to have on the side, to push me to still do silly things in Flash at the time.

Real talk - did you make the Punch the Monkey to win a prize banner ad?

No, that was not me, and I feel like I sleep at night well, knowing that that wasn’t me. [laughs]

What was the worst ad that you ever made?

I made this thing and it was really awkward… It was like one of those Flash takeover websites, and it was like super interactive. There was all this video, and stuff, and it was called The Womb. It was just a really awkward theme, where there were these people covered in slime, lying on the floor, and there were these things floating around them that you had to click on, and it was just awkward…

That was an ad? [laughs]

Yes, that was an ad.

Did everyone do Flash? Feross, did you ever do any Flash development?

No, no, I never actually learned how to do Flash development. I didn’t really do proper programming until later, and then I just learned JavaScript. I did collect Flash though, Flash animations, and I put them onto a website that was kind of like a knockoff of Newgrounds. It was all my favorite stuff, just to rehost it basically.

[44:07] Actually, that’s maybe a side conversation, but we were talking a lot about Flash, and I built some Flash stuff… I think one of my first real web pages was my sister’s soccer team’s web page, which was fully Flash, and I would go to the games and keep stats… That was like something to build a website for… But I pirated the entire Adobe suite and learned all that stuff as a young kid. I’m sure I downloaded like 1,000 viruses on my computer… But did you all start with legit copies of the Flash runtime, or Builder, or whatever, or did everyone pirate it? Is that everyone’s history?

Yes. [laughs]

Once I got a full-time job, I did actually try, but in Australia if you wanted even Flash, it was $3,000. It was such – and that’s in Australian dollars, too… It was such an amazing amount of money, so I would say that there was a huge pirating scene in Australia, because if you wanted the master suite of Adobe apps, it was $10,000 at the time. This was back in 2004, so it was just a horrendous amount of money.

Even back then, it seemed like Adobe had to have known that every kid – we were talking about free and open; I think Nick, you brought that up… I think at the level of piracy that was going on with Adobe, it was essentially free and open. Is that fair to say? Until Creative Cloud, that seemed like it was the case.

That’s funny, because while I was saying that, I was thinking back to my time, like playing with Flash and those tools, and I totally got a pirated copy of that and I didn’t even register that… That’s how I got into it, too.

Yeah, let it be a lesson to people… Let kids use your stuff for free, and it will become ubiquitous, and eventually die. Suz, did you have more – you brought up a bunch of Flash stuff. Did you have any other ones that you wanna bring up?

Yeah, I have one last website really quick. It’s called procatinator.com. It essentially takes a gif of a cat, it full-screens it, and it finds a super-appropriate matching song to go along with it, and everytime you refresh the page or everytime you click the button for another cat, you just get another random one… And I just love it so much.

And if you wanna know my favorite one, it is cat124, which is a bunch of cats playing ping-pong, and the song is just the best match. [laughs]

To be clear, you memorized the unique ID of that specific cat?

Yeah, it’s only three digits…

Sure, but still…

[laughs] Yeah, so cat124 - check it out. It’s a great way of procrastinating, for sure.

Nick, did you share yours yet?

Not yet. So I put two down. One was – I can’t even remember it… Ytmnd.com. I don’t know if it was my favorite site, but everyone just sent these sites to everyone in school, all the time… And it was just these horrible sites that had repeating animated GIF backgrounds, and then auto-playing music, and they were just completely random… I never understood it, but they were fun, some of them. I can’t think of a specific one, unfortunately. I don’t even know if the site is still up.

Yeah. There was like a Sean Connery one that I remember, for sure… It stood for You’re the Man Now, Dog.

[laughs] Wow, I never knew that.

I think it’s a movie with Sean Connery. “You’re the man now, dog!” That’s the best I could do… You had another one, Nick?

Yeah, the milliondollarhomepage.com.

Oh yeah, I remember that.

[47:52] I remember when that was not completely filled out… So it was just a square of pixels, a million total pixels, and it was a dollar per pixel, and you could pay whoever hosted the website a dollar per pixel to own those pixels forever, and then you could put whatever you wanted up there. All of the ads that are on there I guess are from that era. I don’t even know when it ended, probably 2004(ish).

It was pretty interesting, seeing that and just - a pretty cool idea, I thought… Like, “Wow, that’s a really cool idea to cash out at a million dollars.”

I don’t know if you were the same as me, but as soon as I saw that, I’m like “How can I do something similar?” [laughter]

Exactly.

“What way can I get people to pay me a dollar for something tiny and useless, but becomes popular?” It reminds me a lot of Bitcoin, and altcoins.

Actually, one of my friends has a million-dollar homepage type thing, but you pay with his cryptocurrency, so that’s actually not too far from what people are doing…

There you go. That’s how you buy in.

I actually had an idea to do a million voxels homepage, instead of a million pixels. So you would buy voxels space in 3D, in a Minecraft-like world. So you go in and you could effectively be buying a plot of land, and that would give you the right to build on that plot of land vertically, underground and up to the sky, and then you could put whatever thing you want there, and make it link somewhere.

That’s a pretty cool idea, and with A-Frame you could do it.

Yeah.

I think I’m up next, yeah? Everyone else has gone. I have a few that I like; none are that cool. If anyone asked me to this day what my favorite game is - I’m not lying when I say this - it’s the Helicopter Game. It’s just the best game. If you just search for “Helicopter Game” - it’s a Flash game. It still lives on some website; I don’t think it’s the original one it used to live on.

It’s a game – it’s one button, usually a space bar or the mouse click, and it’s just like the helicopter goes up whenever you click down, and then it starts falling whenever you unclick… And you just kind of have to navigate your way through. There was like a Spaceman or JetMan on Facebook; it got really popular like ten years after the Helicopter Game… Which is the exact same game, it’s just a guy with a jetpack instead of a helicopter. I probably sunk hours and hours into this game.

The interesting thing was for a while “helicopter”, if you searched for it in Google, the first result, untainted by my personal history with it, like the private window result for “helicopter” was “Helicopter Game”, and then the Wikipedia entry for helicopters… Which I thought was pretty cool. I guess not to many people are wikipeding helicopters, compared to playing games.

As far as old internet videos, I think it used to be on one of the sites we already talked about… Maybe eBaum’s World, which we didn’t mention my name, but… History of the World - that was like, “Here’s the Earth. See? Wrong. Pretty sweet Earth, you might say.” I could probably recite the whole thing. That wasn’t funny old video.

Oh, no, no, no… That one was called “End of the World.”

[51:12] End of the World, sorry, not History. Yeah, there’s History of Japan, and End of the World, yeah. That’s my bet. History of Japan is also very good, for what it’s worth; not quite as famous, but somehow both informative and hilarious.

And then probably my last one as far as like actual weird internet - I don’t know how this one has aged in the age of Alex not being in early high school or middle school anymore, so don’t judge me if this is now a faux pas, but I really used to like Maddox’s Best Page In The Universe. People would write him hate mail…

I think the one I remember was he was like the top 10 worst songs of 2003, and it was just every song on U2’s album from that year, which was funny. [laughter] I don’t know, he did a lot of things like that, and he was pretty funny to me as a young boy… Which I’m sure now reflects poorly on me, but… It’s definitely a good part of the old weird internet.

It’s still up. I think I recently saw him on Twitter. This week I found out he still exists, so… Maddox, The Best Page In The Universe.

Cool. Well, on that note, I think we should say goodbye. Thanks for joining us, everybody. Next week we’re gonna be doing an episode talking about Dojo, and Suz is hosting that, so it’s gonna be awesome.

Yay! I’m really excited!

And we’ll have Dylan Schiemann on, who is the project lead for Dojo. It was Alex Russell back in the day, but Alex Russell has since moved on to service workers and Google and stuff… But Dylan and I have an interesting history that I’ll explain next week if I’m on the show. I like Dylan a lot; everyone should listen to that episode.

I think that means you’re gonna be on the show, Alex, officially. Sorry to break it to you.

I’ll up my pay by 100%. [laughter]