Smile! HTML can access your camera

Hoy-hoy, welcome to JS Party. I’m your host this week, Nick. Hoy-hoy again. Welcome to a special - for me - birthday edition of JS party. And I’m joined today by Kball. Knall, what’s up?

Hey, happy birthday! I didn’t realize.

Thank you.

That’s great.

Yeah. I woke up early, ordered an iPhone, and then had a refrigerator appointment, and now I need a new refrigerator… So, yay…! I get a new refrigerator for my birthday.

It can only go up from there, right? So this should be good.

Right. [laughs] Yeah, welcome. And we also have another exciting guest. First-time guest with us today is Austin Gil. Austin, what’s up?

Boop-boop-boop! What’s up? It is your birthday!

It is.

I saw your tweet. It was great.

Yeah, I just got hit right before this with the refrigerator news, and I’m not excited about it. But my refrigerator doesn’t run JavaScript, so we don’t have to talk about that anymore.

Are you sure? That might be why it’s gone down.

It is true. Probably.

Now you get the opportunity to upgrade to a refrigerator that does run JavaScript.

That’s true. They do have ones with screens now. I’m sure that that’s probably a thing.

Wait, are you gonna get a surveillance refrigerator?

I hope not. No.

Okay. They try to sell it to you, “Oh, smart this, and smart that” and every time I’m like, “Why would I want a surveillance this and a surveillance that?” Like, I don’t want Amazon in my house in that way.

I don’t even let my TVs be on the internet. Like, I have a third-party box that the streaming stuff goes through instead. Because I just don’t trust them. But we’re gonna talk about stuff like that, like your TV – not necessarily your TV capturing your video, but maybe other things… But first, Austin, why don’t you tell us a little bit about yourself?

Yeah, my name is Austin Gil. I have been building websites for - I don’t know, like ten years… And I started in agency work, which was a lot of fun doing WordPress stuff, which I always advise to people, to do a little bit of everything. The agency work is really cool, because you can really hone the process of doing the same sort of projects over and over, and just like get it better and better… And it’s fun to do that.

[00:06:11.23] And then I also did some product work for several years, and that’s interesting, because you kind of get to go into a more vertical direction, and the problems never go away. They just get harder and harder. But then you also have to deal with like technical debt a little bit more, and stuff that gets swept under the rugs.

All throughout that time I’ve been kind of doing open source work, and writing blogs, and creating content out there, and I don’t know why it took me so long, but I realized that I might actually get paid to do it by doing developer advocacy… So I am doing that now for Akamai, which is an excellent company. And we recently acquired Linode, which has been a lot of fun for my work.

So that’s me, and I actually have a little bit of a history with Kball, which is fun and interesting. I don’t know, maybe Kball can take it from here…

Yeah. I mean, I was looking back, so… Many listeners know, I used to publish a newsletter, and you were, I think, possibly the most engaged subscriber of my newsletter, both in terms of responding back to me, but also sending me articles, sending me feedback, all sorts of stuff, which I always appreciated. But I was looking back through my email, and the first email exchange that we had was around San Diego JavaScript, or San Diego JS, which I’m kind of curious - at the time, I think you had recently gotten involved with organizing there, and you were kind of looking at history, and discovered that I had been one of the people who started it up… But are you still engaged with them? What’s going on there?

Yeah, so the San Diego JS community is cool. I moved from San Diego since then, and over the course of the pandemic it was hard for a lot of meetup organizers to figure out what they’re doing, and make sure that the community is healthy, but also making sure that – I don’t know, it just took a lot of wind out of the sails. So I went from an attendee to an organizer, and then eventually joined the board of directors, because it is a non-profit organization, as you would know…

That postdates me, by the way.

Oh, really?

Yeah. One of the really fun things for me about San Diego JS is how it basically started as a “Hey, we should have a JavaScript meetup. Why don’t we have a JavaScript meetup?” And everybody said, “Yeah, we should have a JavaScript meetup. Why don’t we have a JavaScript meetup?” until I said, “Well, okay, let’s start a JavaScript meetup.” And we were just starting basically squatting for space in different people’s places. And we started off – I think we were hosting in a co-working spot where I had a membership and all these things.

So it was very guerilla style, like no formalities, I just ran things and found speakers, Patrick helped me with the organizational… And like, mostly, he was running San Diego JS, so he was like, here’s what you need to do. You need to make sure you do this, and this, and this. But then we started handing it off to people, and each set of person who was running it expanded and said, “Okay, well, now that we’re gonna have two people coordinating it more, now we’re gonna add this, now we’re gonna put this process in place.” I actually did not know that it was formerly a non-profit now, but that’s great… But it’s one of those fun, like, catch lightning in a bottle things, because I think it was 2011 or something when I started it… And not that long after JavaScript started just going haywire, and that group blew up to be one of the largest tech communities in San Diego, and… Yeah, it was – it’s crazy. But no, I had no idea that they were a nonprofit now, and that there was like that formal piece of it.

Yeah, yeah, so… Shout-out to SDJS. And honestly, I could go on and on. I know this is not the topic that we were going to discuss, but the community stuff and meetups and organizing - it’s so cool, because it was so instrumental in my career early on as just an attendee; a great place to – if you want to build your network, or potentially get hired, going to meetups and talking and networking, and making friends… It’s awesome. And I wish that we could come up with a good template for other meetup organizers, because I think that San Diego JS just had something really special in that.

[00:10:04.08] Before the pandemic, it was the largest tech meetup in San Diego, which is a large city. And we had, I think, eight events a month. So every week, there was two events going on. And I think that just the way that that grew, like you said, was with people stepping up and wanting to say, “Hey, there’s no Vue-specific meetup in San Diego, and we would like to do that.” And as organizers, we were like, “Cool, do you want to do that? You’re in charge.” And really just the community stepping up and owning that sort of leadership, and making it happen… And sometimes things fell out and whatever, but it was a good way that you could sort of scale up the organization and give people what they want, and give back to the community… And it was great. I loved it.

That’s awesome. I haven’t been involved with a tiny meetup like SDJS, but I have run Nebraska JS… And, I’m sure we’re much, much bigger…

Yeah…

But no, we face the same problems. One of my goals is to not let it just die under me, because the pandemic kind of just took all the wind out of the sails, as you mentioned. We had one meetup during the whole thing on Zoom, and it was… It was good, like a good topic, and a good speaker… But just finding people to contribute online to that is so much harder than it is in-person. And I really want to bring it back, because I think that it’s important for the community because it helped me so much in my early career, and it’d be a shame for meetups like that to not exist anymore.

Yeah, the pandemic was hard. I mean, on one hand, the digital meetups are great, because you can reach a larger audience for people that maybe couldn’t attend for geographical or financial reasons before, and now they can, and there’s so much more content available… But it is, I think, different strokes for different folks. For me, the in-person stuff was just so good and very energizing for my career. It seems to be coming back a bit, and we’ll see what the future looks like.

Yeah. And kind of along those – like, those kind of meetups don’t have to be like tied to geography really anymore. And I’ve seen some really vibrant and really active Discord communities that are just constantly – I can’t even keep up with Discord, like how many channels are in there, and all of that… But then there’s like - you can livestream within Discord, or hybrid between that and Twitch, and other things… And it’s just a nice, easy way to have no barrier to entry, regardless of where you live, to get in on that. And it’s just really cool.

Yeah. I feel like I face the same thing when it comes to conferences. There’s a lot of really cool stuff about digital conferences, and the low barriers, and all of that, and I still don’t do any of them. And the reason is because I’m still remote myself – like, I’m in video calls all day anyway. I don’t want to do that more for fun. I go to a conference to get into a different mental and physical space, and like, more video calls doesn’t do it for me.

Exactly. And honestly, when I go to a conference, I don’t go to the talks. I’ll watch them later.

Yeah. And meetups are an interesting example too, because you talk about the networking, right? Back when we started it, we had two sessions a month. So eight is phenomenal. We had two - one was talks, and one was a hack-together. And the hack-together was so much more fun and valuable in some ways, because it was like, “Okay, we’re just jamming in space. We’re hanging out. Oh, you’re working on a cool project? Here, let me see. And it was also an asterisk for meetup organizers in there. It’s a great hack to find talks, because if you’re the meetup organizer, you go around the hack day and you’re like, “What are you working on? Hey, that’s really cool. Do you want to give a talk about that?”

And most engineers – like, if you just say abstractly, “Do you want to give a talk at my meetup?” they’re gonna be like, “What would I talk about? I don’t know. No.” But if they’re working on a cool project, and you’re like, “Yeah, I love your project. Tell me more about it. Okay, I bet other people would be interested. Can you just tell them? It can be five minutes, no big deal.” Like, suddenly, the barriers are lower, and you get a much wider range of folks coming and talking at your more talk-focused meetup. So it’s a fun way to do it.

And of course, the after – I mean, this has pros and cons as well, but the after-meetup go out for pizza and beer or whatever it might be was another just great way to connect as human beings, and network, and build those networks.

[00:14:19.27] Yeah. I mean, I think the networking term, or the term networking kind of has like a negative connotation to it, but there’s just – it’s professional networking and it’s also social networking. I’ve made so many friends that would just come and hang out at my house and play board games, and stuff… And in the larger scheme of this potential loneliness pandemic that people are facing, just getting out and doing things that you’re interested in with other people that are interested in the same things - it’s great.

Totally. I used to have this big barrier. I was like, “Networking? I’m no good at it. I don’t like it. What is it?” But then I changed my mind around, when I realized that networking just means talking to people. And talking to people who are interested in the same type of stuff you’re interested in. That’s it.

As a software developer, you go to a meetup, you talk to people about software - that’s networking. Congratulations. The next time you need a job, you can go to those people you talked to and say, “Hey, is your company hiring? I’m kind of looking around.” And they like you, you like them, they’ll say, “Yeah, come on over. Come interview.”

Yeah. And honestly, giving a talk - meet up, or conference, or whatever, it’s one of the best hacks to advancing your career… Because for that span of time that you are on stage, or at the podium, or whatever, you are the expert in the room. And you may not feel that way; I know we all deal with impostor syndrome, and there’s definitely, “I wonder why I’m the guy with the microphone, when I know that there’s at least half of the people in the audience that probably are going to be able to correct me, and come up to me after my talk and say, “Um, actually…” And that’s fine, because they didn’t apply, or whatever. You’re the one with the mic, and you kind of get that spotlight on you.

I think that some people don’t like to be in the spotlight, but for those of you that are thinking about it or considering it, it really is such a good way to just build your credibility and have something to point to and say, “I know what I’m talking about.” In fact, most people actually come to you.

Exactly. It’s even more of a networking hack. Because now you not only do not have to worry about finding people with interesting things to talk about, you don’t even have to figure out what to talk about, or who to reach out to. They’ll come to you. They want to talk to you about the thing you talked about. It’s a great, great approach.

Yeah. And it’s good to give back, too. I love teaching people and mentoring… It’s great.

Yeah. And kind of speaking of that, Austin - is it my understanding that you also do like livestreaming of coding? Do you do that as well?

Yeah, yeah. Let’s see… The content that I’m creating these days - I have a podcast, I do livestream once a week now, on Twitch… And it’s fun. I mean, I’m trying to get more people to come and make it like a collaborative livestream thing, and just like, “Let’s hack together.”

And the livestreaming stuff - it’s really weird, because you go from, “I want to–” I don’t know. Like, if you go from creating scripted content, or even like blog posts, written content, there’s a formula to honing it and crafting it, and then coming up with a final product that is coherent. And with livestreaming, a lot of the times it’s just like, off the cuff, nothing’s prepared… I mean, it’s, if you ever see someone that livestreams a presentation, and they upgraded their dependencies the night before, or the Wi-Fi goes down and they’re just scrambling, think of that, but over the course of the entire time. You’re just like, “I don’t know what I’m doing.” There’s people that are on the show, or like in the chat that are correcting me, and it’s stressful… And it’s so weird, because livestreaming, almost – it becomes less about the content and more about the performance, or the community that you’re building. So it’s really strange, but it’s also rewarding, because as transitioning into developer advocacy, they don’t tell you how little you actually code. And I got into coding because I love it, so it’s been hard to see that shift in the time and focus… But it’s fun. I like it.

[00:18:13.09] Yeah. No, it seems fun. I’ve tried it once, without telling anyone, just like, “Could I set this up on Twitch and get it going?” And I didn’t have anybody actually listening or participating, but I was thinking about that, and I just feel like, how could you possibly be trying to do something while paying attention to the chat, and interacting with them while you’re googling the parameters to reduce for the 400th time? Like, that’s how I would be. It’d just be so difficult to focus on one thing, or any thing.

Yeah. It’s not a conducive environment for getting actual work done… [laughs]

Oh, yeah. So do you – not to see how the sausage is made, or whatever the phrase is, but like, do you come with something that you want to do, and maybe… Like, I feel like if I were going to do it, I’d be like, “Okay, I want to build this thing”, and I will build it beforehand, and then I will try and redo it on a stream, or something, just so I’m like, “Oh…” But I won’t hit that roadblock live, and fail live…

Yeah.

Is that like a trick to the streaming setup, or…?

Yeah, I’ve done both, and again, I think it comes back to treating streaming as a different platform than some of these other platforms. Like, if you want to do video content that’s like a tutorial, or really focused on teaching, then you kind of want to have more of a scripted approach, and get to a final product before the video is over, obviously, and have those sorts of takeaways. And I think what I’ve learned with streaming is that, again, it’s sort of more of an entertainment show… And because it’s live, you really benefit from having that unscripted, authentic experience.

Some of the streams that I’ve done that have been more successful, or engaging - we actually didn’t even make any progress. But then I’ve done some other streams where it’s like, “Cool, I have a project that I’ve actually built out in my free time, and now we’re gonna walk through and do this as more of a teaching thing.” That also works pretty well, and people are like, “Oh, it’s cool.” Or there’s shows that are even – like Jason Lengstorf. He does Learn With Jason, and he’s kind of not really engaging with the audience, because he has a guest on, and they’re talking through this thing and building it out.

So I don’t know… I think either option works. What it comes down to is that folks like the authenticity of the person that’s running the stream, and if you show up and you want to show up with like predesigned content, do that, and the people will find you that are into that. And if you want to show up and just like stumble your way, and babble around, like I do, and people laugh at you because you’re wearing Green Cat ear headphones, that works, too.

most of our listeners weren’t going to know that until you said it… [laughs]

Yeah, that’s all right. Give them something for the imagination.

If you’re hearing this on the podcast and you want to see, go to the live YouTube recording, and you will see Austin’s amazing Green Cat ear headphones.

They are amazing.

I love that so much.

It’s so great.

[laughs] Okay, so I’ll start off… And I’ll say that something that I learned - I think in the last show I brought up Obsidian, and was talking about that amazing note-taking application, and some cool plugins that they have. Well, I’ve been looking at their plugin API, and trying to write my own, which has been a lot of fun. It’s all in TypeScript, which is just super-easy. You clone a project and get running with it right away. It gives you an ESBuild script that will compile everything for you; you create a manifest and then you can just load it into Obsidian and play with it. And I’ve been creating one that just makes it easier for me to work with GitHub links, because going there, copying like a pull request link and then putting it into my notes for later, just so that I can click on it again to check the status of it, or whatever… Like, it’s just tedious.

So this will just let me type like gh: and then like the repo and the PR number, and it will auto-create a link for it right there, and put a status on it just by hitting the GitHub API and checking all of that. So it makes it really easy to create more of a dashboard of what I’m working on, right from within Obsidian. So I’m pretty excited about that.

I’ve gotten the pieces all together, but nothing tangible as in “It’s doing exactly what I want”, but I get the response from GitHub that I want, and I have made some fake things to inject into the Obsidian renderer… And now it’s just a matter of putting it all together. But I’m pretty excited about that. So I guess that’s the TIL, is the Obsidian plugin API. It’s really cool.

I’m so curious about that, because it’s like the second brain thing, where everything’s kind of connected… And it looks cool.

Yeah. It’s amazing. And it’s a big rabbit hole if you let it be, so…

Yeah, it seems like it.

Proceed with caution. [laughs]

[00:25:56.15] Yeah. I still haven’t looked. The last episode we talked about it, and it might be the thing that pulls me off of Roam Research, which is a similar type of app, but it’s not extensible in the same way. So I still haven’t had time to dig in, but… The next time I actually have a day where I’m not having to work or deal with kids stuff.

Yeah, this is my ongoing theme for the show, is every time I’m on with Kball, I’m just gonna be like “Obsidian did this really cool thing…” Yeah, just keep prodding at that.

Hey, it worked with TypeScript. You got me there eventually. It only took like a year and a half. So Obsidian, if you get it faster than that - coming out ahead.

That’s true, yeah. And yeah, so Obsidian is cool; the plugin API is cool. Kball, have you learned something today, or recently?

So I don’t have something as nice and concrete as what you have, but I’m going to talk about a thing that I’ve been learning about and thinking about, and thinking about its connections. So the thing I’ve been learning about and thinking about is this concept of an OODA Loop. OODA stands for Observe, Orient, Decide and Act. This was originally developed in sort of the military world, and it’s often used to talk about military strategy, but it’s become a concept that plays out in business, and law enforcement, and operations research, things like that. At a very high level, if we think about it, it’s like, okay, observe what’s going on, orient yourself towards what you might want to do about it, make a decision, and then act, and then loop back to, okay, observe based on your actions, things like that.

So okay, that’s kind of interesting. But the thing I’ve been really noodling on recently is I realized that a lot of the things we do as engineers and other stuff could be modeled in this way. If you think about the core like agile cycle, right? When you’re thinking about, “Okay, I’m doing backlog grooming, I’m observing what’s our situation; we make decisions, and we go, and we do a retro…” Like, I haven’t mapped it perfectly, but there’s these different phases of it that in many ways potentially map to that same cycle. So I started digging into this, and people have said, “You could do a similar thing for thinking about how you do scientific research, right?” You’re observing, you’re sort of orienting with a model, you’re going to make a hypothesis; in that model, your decision is a hypothesis. You act by running an experiment to test that hypothesis, and come back into this loop.

And so as I said, not very concrete yet, and I feel like I’m still like trying to wrap my head around it, but I’m starting to wonder if – like, there’s been a ton of people writing about and doing stuff in this OODA Loop world, a lot of it military strategy-related stuff. But thinking about like, “Can I do a bunch of learning in that area and sort of pull it into our work as engineers, and thinking about how do I manage the team of engineers? How do we set up our stuff? How do we continuously improve our process, and get better and better at what we’re doing?”

And yeah, that’s about all I got. It’s just kind of this – it’s still a little nebulous in my head, but if you’ve never looked into OODA Loops and thought about how that involves how you’re interacting in the world, and especially in like competitive games, and things like that - super-cool stuff.

I love this. I love things like this, where it kind of gives you the most basic framework of how to do something, or how to think about something, or how to approach something. It’s just a fascinating way to try and orient your thoughts to that, and then see where it takes you. It can really change how you think about something.

Yeah. I love frameworks. I’m totally a framework guy. [laughs]

So does it give you a framework around time to make decisions, or act, like time within to act, and then you kind of do your how to step away and actually get perspective from which to observe? Because it sounds like a course correction technique that as humans we kind of do… But it sounds like this might provide better tools to take yourself out of the human, error-prone side of things…

[00:29:57.07] Yeah, so there’s a couple of pieces from where I’ve gotten to right now. So first off, if you think about it in a competitive scenario, which doesn’t really necessarily apply in like engineering process world, but like – they’re talking about military. He was originally developing this related to like fighter jets, and fighting each other. One, there’s advantages to shortening the length of the cycle. Like, if you can make it around that cycle faster, you can learn faster, you can adjust faster. And many folks have taken that as being the primary thing, of like, “Oh, you have to have your OODA Loop be faster than your opponent’s OODA Loop.”

But there’s also some interesting things about depending on where – if you start to observe where in the cycle different types of things can happen, and then you can intervene or act in ways, where there’s like a rhythm to it… So if you recognize, “Oh, my opponent seems to be working on this cycle, or they’re doing these things.” If I can find the right times when, “Okay, I’m going to get in something that’s going to change the situation between their decision and their act loop, if I can time that perfectly, I’m going to eff them up, because they’ve made a decision, they’ve committed, they haven’t seen the results of that action yet. and suddenly, I’m changing the scenario out from under them.” And so starting to think about the rhythms of when do you do things.

And then bringing this back into engineering, thinking about, okay, what is the right cycle time to make it around this cycle in a way that’s going to be effective? I think for example in agile one-week sprints are probably too tight. I think one-week sprints, you don’t get enough action to get useful feedback, and you end up spending too much of your time or overhead in the decision analysis. But if you stretch it out to like a two-week sprint, you actually get – potentially, two weeks might be the right rhythm. And it may also depend a little bit on team, and other things. So yeah, timing is a big piece of it, and the two aspects that I’m aware of, that I’m thinking about right now are one, what is the natural time span for this, and what is the impact of shrinking versus expanding the time of your loop? And the other is what are you primed for at different parts of your loop, and what are you sensitive to or what is disruptive in different parts of your loop?

So actually, in the engineering case, that is a – I’m just realizing this now, but that’s a big reason why you might not want to accept new work for this sprint in the middle of the sprint, because you’re disrupting. You’ve already made your decisions, you’ve got people going. And if you try to change your priorities in between - which, let me tell you, lots of people want to do - it messes you up.

We’re actually doing an experiment on my team at work right now where we have separated out the folks who have to do reactive work from those who are doing our ongoing planning work, because we were getting interruptions that have a tight turnaround, they’re essentially one to two-day, customer-facing, “Oh, this thing happened and we need something really quickly”, and it was being super-disruptive for folks. So we’ve separated those folks out… I’m thinking about this as we go right, but like, if you’re doing that sort of reactive work, where stuff is coming in and you have to react to it, you need a really tight loop. You need, “Okay, here’s this thing that came in. I’ve gotta understand what’s going on, act on it, and get that turnaround all within the course of a day.” Customer support roles are going to have this, things like that. Whereas if you’re trying to do something that’s much larger, requires more architecture, things like that, you need a longer loop. Because if you do too tight of a loop, you’re not going to be able to think about enough and perceive enough as you go.

So I suspect there’s mappings to like the different type of work you want to do and what are the natural cycle times, and then like how do those cycle times fit with each other, and do you have the same teams doing it, or different teams, and how did they interface… Anyway, it still feels like it’s floating around in my head. It’s not totally concrete, but I think it’s super-cool stuff.

So next week we’re going to hear you announce your new side project where you’ve just cloned JIRA, but you call sprints OODA Loops instead?

Chances are no… But sometime in the next couple of months I’ll probably have some articles as I think through all this stuff.

Well, yeah, we’ll stick around and keep a close eye so that we don’t end up OODA the loop on that… [You did not just say that…]

Oh, my God… [laughter]

That was terrible. I’m sorry…

It’s so bad… [laughter] As someone that really loves puns, that was… Ooomph.

[00:34:13.27] Yeah. That’s what I do, yeah… [laughs]

Nice.

Alright. Well, Austin, have you learned something recently?

Yeah, yeah.

Quick! Change the subject away from the pun! [laughter]

Nice save. Yeah, I learned about this HTML attribute called capture. And I wrote a blog post about it, and made a video, and tweeted, and all this stuff, and it kind of took off… And I think it’d be interesting to talk about the process of creating the content, and what kind of happened, because it ended up sort of on the front page of Hacker News, and all that… Which is interesting. But the actual attribute itself is also worth talking about, hence the blog post.

So if you have an HTML file input, and you normally click that, it opens up this like file picker UI, and you can select one of the files, or multiple files, and the file input gets that – I think like the binary data for that file.

But for mobile devices, you can actually make a better experience by setting the capture attribute on that file input, and you can set it to either user or environment. And depending on which selection, you can allow the user – or you can sort of have access to the user’s camera; either the front-facing or back-facing camera, and/or microphone. And this is interesting, because it really falls into the bucket of user experience, because if you think, like… I don’t know, it’s sort of like adding the input mode, so that when a user, if they’re putting in their social security number, you can have them be greeted with a number keypad, instead of the full keyboard; it makes their life easier.

This way, if you know that you’re in a scenario that the user is going to be taking a photo, maybe it’s like uploading something to sell their product, and they want to take a picture, or upload a photo of their face - it might be easier to just have access to the camera right away, instead of having to take a picture first, store it on the device, and then go to the file input, click it and then search for the picture you just took, and select it.

So this was an interesting attribute that I was like, “Okay, cool. HTML brings up the camera, has access to the camera, and that’s awesome.” And it’s not available on desktop devices for a number of reasons. But this was interesting, because when I shared this, a lot of people responded with security concerns.

So if you go to a website, and the website uses - like what we’re on right now to record this, right? And you do a livestream, the browser is going to ask you, “Is it okay to access your camera?” And with the HTML capture attribute, it actually does not. It just goes straight to the camera on the device. And people were like, “Oh, that’s a security concern, because obviously, if a website has access to the camera, it can take someone’s photo without their permission, or maybe figure out things about their environment, or background, or stuff like that.” And the interesting thing about this is, while that would be true if you did have permissionless access to the camera… I think the way that the attribute actually works is it opens up the camera, but the camera feed or stream is not available to the website. It’s just going to open up the camera in the native camera – well, the native camera access on the phone, and then save that picture… I believe it gets saved to like a temporary file on the device, and then same as if you were to navigate through your folders and find the file that you want to upload to that input, it’s just going to automate that process for you.

So it was interesting and fascinating, I wrote about it, and… Yeah, it kind of like took off and just getting a lot of attention, both “Hey, this is cool!” and “Whoa, this is scary.” So, yeah…

[00:38:06.15] So once that file is there, the website would have access to it?

Yes. But that’s not really any different, or more dangerous, or whatever, than if you just have a regular file input, and it pops up the file picker UI, and then the user selects that file, then the website has access to that file. So it still requires user interaction, and like a high level of user awareness to what’s going on, and decision-making.

Yeah. In that post that you have, you have a video of you demoing what it’s actually doing, and you have to press the button to actually – like, you have to interact with it for the camera to actually come up.

Yeah.

Yeah. So that gives you kind of the – it’s not just going to be like in the background, reading your camera data, or presumably your microphone data… It’s just, as soon as you authorize it by pressing the button, then it’s going to pop up and give you that… But it’s going to give you just like the camera app, which will then feed the data that it captures back to the temporary file that it gives you access. And then presumably from there, you could use like a file reader API or something to read that data, and draw the picture to a canvas, right?

Yeah, yeah, of course. So if you captured a video, I don’t think you could do like a livestream situation, because that would require continuous access to the camera feed, which is not what this does. It just adds access to the already captured file, or saved file.

Yeah.

It reminds me a lot of the distinction between like opening a window based on user action versus not right. You can’t open a window from JavaScript unless you’re inside of an event handler triggered by user action. And this is similar, in that you’re not asking for the same permissions, because it’s being triggered directly by user action.

Yeah, it was interesting… It’s just like a really cool overlap of – things that I’m interested is like HTML becoming more and more powerful… And HTML is kind of like the slowest-moving web language, in a good way… It’s also very forgiving, and backwards-compatible, and it’s awesome. But getting these features that are in line with the direction of shipping less JavaScript, right? Allowing HTML to do more, allowing CSS to do more. Having a lower reliance on JavaScript is great for the user in so many cases. But then it was also really interesting to think about what are the security concerns around this, and…

As developers working on browsers, I’m sure there’s a lot more that goes into those considerations than what I actually think about, but it’s cool when someone else is sort of taking that ball and running with it, and my website gets better, or my applications get better as a result of someone else’s work… And then also the discussion or considerations around user experience, and how we can make that better. It was just a cool cross-section of different interests for me. So I wanted to share it with people and put it out there.

Yeah, and it really does seem like the best possible way to approach something like this… Because yeah, you could theoretically maybe click that button with JavaScript and get the camera to pop up, but then you’re out of the app, and you have to physically interact with the camera button to either take a video, or take a picture, and then get that sent back. And from a usability perspective, that’s just perfect, because you’re not getting prompted with, “Can I access your camera?” and then pop open the camera, and then take a picture…

Does clicking on it with JavaScript work? That would concern me more from a security standpoint, because if I thought I was going somewhere and I ended up and I’m on the camera, I might forget how I got to that camera, and then take a picture, and suddenly this potentially malicious website has access without me realizing what’s going on.

[00:41:50.02] Yeah, so that is a good question… That is not something that I tested, but it was something that kind of came up, or I came across that same idea. It could be you trigger it with JavaScript, or it could be you could even visually hide an input and display it as something else, and kind of trick a user into clicking something, like a cute kitty photo, or something, and all of a sudden, without being prompted, “Hey, this website is trying to access your camera. Is that okay?”, they just go straight into the camera. And even then, the security concern - there is a path where you leak some sensitive information, right? Or I guess a developer, a hacker can get to sensitive information. And that is maybe somehow hiding the fact that there’s a file input there with the camera, and then somehow getting the user to actively click that input, or maybe trigger it with JavaScript… And then the camera’s going to open and take up the entire screen. So a user has to notice that, or not notice it, or either notice it and like click the Capture button…

The key is do they have to make an action, right?

Yes.

Even if I’m interacting with something that doesn’t look like an input, if I’m interacting with a website and it opens my camera - I was just aware, I’m doing a thing, and it happened. The bigger concern for me is like, I’m loading a website, maybe it’s slow, I’m not paying attention, I get distracted, I come back and my camera’s open. Do I have that mental awareness of “This is related to this website”?

Yeah.

Even if it’s like triggered via JavaScript, but it has to happen inside an event handler that’s handling a user event, I’m not concerned. If it’s triggerable by passive JavaScript without having an event handler involved, I feel like there’s danger there.

I’m really tempted to just throw up a quick Codepen and hack it out really quick. I’m sure I could do that in like a minute.

But now even that has me wondering about other potential things. The trick here is that it’s not giving you any kind of indicator, or any kind of – it’s not asking for any permissions, right?

No.

Like, if I wanted to get your GPS location, I would have to ask if my app wanted to do that; it would have to ask and prompt, like “Hey, do you want to allow this app to see your location?” And I’d say, “Okay, I’ll give you that?” Does the camera do some kind of stripping of like the EXIF, like GPS data of where the photo was taken, or anything like

that?

Oh, that’s a really good one.

Yeah, this is where the conversation gets really interesting to me, because as we put on our security hats and think of “What is the worst way to take advantage of this?” I keep coming back to this opinion that if you’re so concerned about it, then you should have the same concerns for the default file picker… Because all of these scenarios that we’re talking about, either triggering it with JavaScript, or hiding it behind something that the user thinks are clicking that is different, it all still requires another action on the user side, that they actually either take the photo or select a file from their device. And maybe they walk away and forget what website they’re on, or Something like that… And those concerns would still be there in both scenarios.

So I think if you’re going to be on the side of the fence that says, “This is a security concern that I’m not okay with”, then that still has to apply to a default file picker… Because fundamentally, the input gets access to the same file, whether it’s received directly from the camera…

I’m not quite convinced by this argument, and I’m going to push back on it this way…

No, let’s do it.

So if I’m picking a file, and I look away, and I come back and I’m in that file picker interface, and I’m like, “I don’t remember, why am I picking a file?” I know I’m picking a file, so I’m going to ask the question, “Why am I picking a file?”, and I’ll cancel out so I can look, and then restart, right? People use the camera for all sorts of stuff. Right? If it’s just opening my native camera, I don’t have that same immediate reaction of “Why am I picking a file?” Picking a file is a relatively unusual action for me as a user. It’s going to trigger a question. Well, for me it’s relatively unusual, too. I don’t take a lot of pictures. But I know people who take hundreds of pictures a day. It is not always subject to that same level of scrutiny, and I think it’s very likely to end up in an automatic –

That’s me.

[00:46:13.19] “Wait, I have my camera open. Great! Let me take a picture of something.”

But also, the iPhones at least have a feature where you can set like an accessibility thing where if I double tap on the back of my phone, it opens the camera app. All the time I’m accidentally opening my camera app.

Yeah.

One more thing before we go even further on that…

Let’s go.

Related to Nick’s geolocation concern, which I think is a real one… If I’m doing that from a file picker, there is no guarantee that the timing of the files I’m picking are anywhere related to where I am right at this moment. But if you’re getting it from the camera live, you’re pretty confident that this is where this user is right now.

That was gonna be my pushback; it gives you that assumption that it is an extremely recent indicator of your location. Whereas I could pick a file from ten years ago and put that up there.

Yeah, that’s a really good point. I don’t think that HTML file inputs would strip EXIF data, and therefore that metadata would probably also be sent along the way. So yeah, that’s a good point that didn’t come up. But Kball, to your point of the camera being open, and me – like, me interacting with the website, opening the camera, looking away, or getting distracted, forgetting what I was taking a photo of, or that I was on this application… I think that the file or the camera from the input is slightly different, at least in my case, than the camera that I use to take a photo.

That helps a lot.

Yeah. There would be a very clear delineation between what I’m looking at to take a photo and the camera that comes in the file picker.

One other quick question on this… You mentioned that this only works on mobile devices.

Yeah.

What’s the fallback behavior if you have an input with this mode in a desktop or a laptop browser?

Yeah, so this is good news. HTML is awesome with fallbacks; it just falls back to a file input. So you would just get that file picker UI that you would be used to. And this also brings up an interesting topic, which was “Why isn’t it supported in desktops?” Laptops have a front-facing camera that - it could work just the same. And I think the answer - this was a TIL, so it wasn’t something that I had been doing years of research on, and I don’t work with browser manufacturers or anything like that… But I think the HTML Working Group has sort of the spec on how this could work in a browser. And that would require that the photo-taking mechanism would rely on being built into sort of either the UI of the browser, or built into the file picking application, or something like that.

So it may be something that can happen in the future, but I think that just on mobile devices it’s a lot more prepared for that sort of behavior. And it’d be great to talk to someone at Chrome or Firefox or Safari to get some idea, or even the working group, and see what the idea is on moving forward on that.

Right, so Austin, in the last segment we talked about that awesome TIL that you had about capturing video or images or microphone just from HTML… I do think it’s really cool, and as a user, I really want that convenience, without having a bunch of extra pop-ups… But yeah, it remains to be seen whether it could be exploited in some weird way. I’m sure Feross is already working on figuring out a way to do that… But as you mentioned, this went viral, it went to the top of Hacker News, and has gotten a lot of attention, so I thought in the last section that we could talk about what that’s like, like having something, a cool TIL like that that you learned and wrote about go viral on big sites across the internet. What’s it like?

Oh, yeah, it’s great. I’m getting so many – my phone has been ringing off the hook. I’m getting sponsor deals with Nike, and there’s a biopic coming out soon…

Lots of theoretical internet dollars.

Yeah, yeah, yeah. No, it’s cool… So it was kind of interesting, because it started as – I don’t even know where I came across it. It was a legitimate TIL; think I was on MDN, I was like “What – capture attribute? What the heck is that?” And I read about it and I was like, “Oh, that’s kind of cool”, and threw it into a Codepen and played around with it… And then I think I just tweeted about it, because I like putting out content there that’s just helpful to people and interesting.

And then from that tweet – so on the Akamai dev channel we’re trying to give back a lot of what we like to call community karma, and really invest into developer education… And yeah, just giving back to the community. So I took this, and every week - or every other week, I think - I have a video series called WebDev Office Hours, where I just talk about stuff like this; they’re like five-minute-long videos, a little bit more produced than live streams, but things that I learned, or little tips and tricks and stuff. So I threw this on there, that became a video, and then I also decided to write a blog post about it. And I put it out there and I thought it was interesting, but it’s funny that this – actually, I’m used to writing like very long-form content, with 3,000 words, and this was something that I was like, “Cool, let me copy the YouTube captions and just throw it into a blog post, fix it up, and do whatever.” Very low level of effort. But I think it was just sort of the right combination of being kind of fascinating and practical to people… And also, I did work on the title a little bit.

[00:56:03.14] There’s a certain sort of balance of being slightly intriguing, but not giving it all the way up front, but also not being clickbaity, because you don’t want to promise something and not deliver. I call this something like “TIL - you can access the user’s camera with HTML”, which itself sounds pretty interesting, right? Like, I would click on that. But also, I really hate those clickbaity, like “Bet you didn’t know what it is” or whatever.

So yeah, I wrote that, it was relatively short… It’s got the video, and it kind of just runs through what it is, and how it works, and what I learned. And then I actually submitted that to Changelog news, and Jerod accepted it. And I think at that point Feross ended up posting it to Hacker News, and then it just took off, and it ended up on the front page somehow… Which is weird, because I had posted it to Hacker News as well, and no one paid attention… [laughs]

People pay attention to the things Feross posts…

Yeah. Feross has clout, you know?

Also, Hacker News is totally random.

Oh, it is.

Sometimes it’ll skyrocket and sometimes it won’t.

Yeah. It was particularly interesting because someone else shared it… Because I didn’t know what the heck was going on. So all of a sudden, I was getting these server alerts that were like, “Hey, you’ve reached like 75% of your resources. 80% your resources. 90% of your –”, like five minutes apart… And I was like, “Oh, shoot… What the heck is going on? I’m getting DDoSed…” Which is really ironic, working at a company that has DDoS protection; because I’ve been there not long enough –

Should have gone to a static site…

Well, it is technically like static-served from cache, so it didn’t go down or anything… But I was still getting resource warnings. Yeah, it was kind of a weird outcome, because the combination of something that you spent – I spent so much time and effort on all these other blog posts, and they get like crickets. And then you just like slap this together, throw it on, give it a good name, and whatever, and it takes off. And I’m not surprised by that. You hear that story over and over. But it was funny to be on the other end this time.

I think, while you were not clickbaity with the title, I think the fact that there was controversy around it helps a ton.

Oh, absolutely.

I’ve had a few Hacker News frontpagers back in the day when I was publishing more regularly, and they were usually the ones that people had – there were people with strong opinions on multiple sides. And sometimes I leaned into that and was maybe a little too clickbaity or a little too opinionated on it, but even when not, the thing that makes it go crazy on Hacker News in particular is like there’s people arguing passionately on both sides of something.

Yeah. I wish it would have been one that I shared, because I think that I would have liked to be more aware of the conversation that was going on… Because I shared it on Reddit, and Reddit is just one of the worst places. [laughs] I mean, it’s great, but it’s amazing how much effort people will put into being mean, and not even mean in a clever way. Just like mean in just like “Really, you’re gonna waste those keystrokes on…?”

I’ve had that experience with Hacker News as well.

Oh, I’m sure…

Oh, yeah…

Yeah, I didn’t get the traction for me on Hacker News as much as it did Feross. But I think it was useful to me to receive those - even the criticisms, because I just shared it as something that I learned, and people were like, “Oh, that’s actually really bad for security.” I hadn’t even considered it at that point, or considered it deeply, to the level of detail that these people were going into. And it helped me reaffirm some of the discussions that I was prepared to today. And even, you know, Kball, you pointed out some things that didn’t come up, and are legitimate concerns, and I would love to talk to browser creators to see their opinion…

But there’s good sides, even to the naysayers. As you’re not doubling down on your opinion for the sake of ego, it can help you solidify your position. And some people were a lot more receptive to that as well, and say, “Oh, yeah, okay, I get it. Thanks for explaining it.”

[01:00:09.13] Yeah, that’s really cool. It’s interesting, because it’s not even something that you were sharing with any kind of ego in the way that you were presenting it. It was just like, “Oh, something cool that I’ve found on MDN.”

Yeah…

Like, you didn’t create it and put it in browsers, or anything. It’s just like sharing something cool, and then there’s a bunch of controversy around it… It’s interesting; the internet is a wild place.

Yeah. I guess the takeaway here, or a takeaway for any people out there that are creating content - if you put time and effort into content, even if it’s a post like this, that was not something that I really poured my heart out onto… Spending a little bit of extra time to get the title right I think was the big thing, because it also did really well on YouTube.

I hear that’s the thumbnails. You’ve gotta get the thumbnail right.

Oh gosh, I hate that. I hate that so much. They’re so terrible. But the algorithm – you know, the algorithm is a drama llama. It just wants that vitriol to spread. But yeah. taking a little bit of extra time to get that title… And I guess if it’s YouTube, the thumbnail right also, and make it something that – I don’t support clickbait, and I think people can smell out clickbait these days, and more people are not going for it… But if you can be authentic, but also a little bit intriguing… Because I even changed the title. I think originally I had it titled like “The HTML capture attribute is rad.” And then I changed it to something that was a little bit more spicy and engaging, and like, “Oh, okay, let’s check that out.”

Yeah, I like it.

And if users are listening and they want their articles to go viral, it sounds like the lesson is submit them to Changelog News.

Yeah, Changelog has been great. I love it.

Nice plug. [laughs] Well, that’s really cool. Thank you so much, Austin, for joining us today and sharing this wonderful bit about you, about the HTML capture attribute, and about what it’s like going viral on Hacker News. Where can people find you on the internet?

Yeah, you can find me at austingil.com. That’s G-I-L, just one L. I was born without a second L; it’s fine. And I’d also encourage people to reach out to me on Twitter @heyaustingil, or Twitch, or YouTube… Also, if I can give a shout-out Akamai, and Linode… I am not saying this because they are my employer and they pay me, but I will say that there is probably a bias, in that because I work there now, I’m able to see behind the curtains and how the sausage is made, and I really think that Akamai is a best-in-class product for CDN, web application – like, web security… The Edge Compute Platform is awesome… And Linode has been really great in letting me get in great user experience, great developer experience, and they have a lot of really cool offerings. So I definitely want to give them a shout out.

Yeah. Awesome. I’m a longtime Linode user as well.

Yeah, they’re great.

Alright, at least for a long time Changelog was all hosted on Linode. I don’t know if that’s still true, but it was part of the standard opening spiel, hosted on Linode servers.

Mm-hm. Well, cool. Thank you so much, Austin, for joining us, thank you, Kball, and we’ll catch you next week.

Yeah. Thanks, guys.