Cool. All right. I think we're going to go ahead and get started as a couple more people filter in. Thank you so much for coming to the session. I'm so thrilled that many of you came here to talk and hear about fun and games with Node.js. So my name is Rachel Weil. I'm visiting from Austin, Texas, and by day I am a developer evangelist at Microsoft, working on open source, web dev, sometimes IoT and hardware when I can get my hands on it. And when I first started with the company a year ago, I would tell people like, oh yeah, I do open source at Microsoft, and people would be like, yeah, that's not a thing. You know, it really does. But now actually with everything that's happened over the past year, it's becoming like more and more normal. You know, this is like the new normal, so it's pretty exciting. So in addition to that, I've been making art for old video game consoles for about six or seven years. This is a screenshot of one of my pieces for the original NES console. This is an animation. I know it's just a still, but when you see this live, it's actually an animation that's creating generative glitches and sort of visual chaos at the hardware level. And that's actually how I kind of got into coding and game development and then web development. I'm also really involved in Austin's indie games community, where I do things like run an experimental digital art residency out of a tiny secret arcade on Austin's east side, complete with blacklight responsive carpeting that we got salvaged from a little bowling alley. It's in like an unmarked warehouse. It's a very cool space. It fits about three video game cabinets, and we have all one of a kind cabinets that we build ourselves. So all that to say, I like working with games and amusement machines and things of this sort because they're fun and fun is fun, right? It's kind of self evident. But I think if we if we as sort of developers think about fun from a design perspective, we can find some sort of meaningful purpose for fun as well, whether that's with evoking nostalgia to make us think about our childhoods or whether that's maybe using playfulness as a means of critique, or maybe it's just a way of mitigating barriers to entry when it comes to developers that are new. And in our case, for something like Node.js or JavaScript. So I'm kind of interested in this idea of like how we can actually use fun to achieve certain outcomes. And so that's a little bit what I want to talk about today. Oh, wake up slides. So my takeaways from having built a couple of fun things with Node, and that's what I want to talk about today, are if you want to learn or refresh your skills in JavaScript, you should make a game with Node.js. And if you're a JavaScript developer already, you should teach others how to make a game with Node.js. That's what I'm going to kind of argue today. And we can talk a little bit about why that is. So I want to share with you two projects that I built this year. The first one is called Deal With It Bot. And what this bot does is it actually recognizes faces in a user-supplied photo and automatically slides pixelated shades on every face in the photo. Up to 64 simultaneous faces, which is hilarious for a group photo, family reunion, whatnot. And I know this meme is like old enough to be retro, but anyway. So this is a thing I built earlier this year. It's essentially a Node app that runs in the browser. It uses the Cognitive Services Face API for facial recognition, Express, Socket.io, and CSS animations powered by JavaScript and math, right? To figure out where those glasses go, figure out how they should be scaled and skewed, and all of that. So let me kind of break down exactly how that works. Essentially in this web app, the user has a photo, a URL for a photo, and supplies that in a text box and hits click, you know, clicks a button. And that gets delivered to Cognitive Services Face API. If you haven't tried this yet, Microsoft releases family of APIs under the Cognitive Services umbrella. They're very cool. Like, I think almost all of them have a free tier, which is what I'm using for this web app. And basically the whole idea of Cognitive Services APIs is they take these really common machine learning scenarios, like recommendation engines and object recognition and facial recognition, and says instead of you having to, like, instead of all of us having to build that machine learning model over and over and over, because it's essentially like the same model that we're building, what if Microsoft built that model and then we could just use it as a REST API, right? And so that's the idea of this thing is like I don't have to build a facial recognition model. I just send a literally send a photo to this API. It returns back JSON, JSON object of all the faces, all of the like in this case coordinates for the eyes, eyebrows, nose, mouth. Right. And that's really cool because I didn't have to build it so I could focus on doing something that was more fun. So essentially I get back this JSON return and it tells me these coordinates for every face in the picture. So we have all these data points and after doing some math, we shuttle a couple of numbers from the server back to the browser. So we have this image. We sent that image over socket IO to the server. The server does some stuff. It does some number crunching. It sends a couple of values back to the browser. And then we use these numbers to for every face created div with an SVG inside of it. And that SVG is this one you see here. And we apply various scalars and rotations to it so that it actually matches the face, right? If the face is turned, the face is like this, if he's smaller, big, it's actually going to adapt to that. One thing that was really interesting about developing this actually is, you know, when you get these coordinates back, they're absolute, which means if you have a 200 pixel wide image, it's going to give you back, you know, OK, the eyes at 100. So what happens if you have a really big image and you need to scale it down in the browser? You need to scale down all those coordinates as well. So that was one kind of interesting challenge with doing this in the browser. Obviously, you don't want an image that's 3000 pixels wide to load in the browser and the glasses come down and they're so far off the screen that you didn't even see that happen. So there's a little bit of math that happens here. It's nothing too terribly scary. But we take that, you know, so once we've kind of positioned the glasses and we know where they need to fall, then we basically translate that upward off the top of the browser and slowly animate them down with the CSS animation. And then we kind of show the deal with it text at the bottom. So here's the whole thing in action. I just grabbed a picture from friends. It's also really good with Golden Girls. I've done the cast of Seinfeld. You can see that these glasses all land at the same time. And it's not as noticeable here. But when you have, let's say, a face near the top of the screen and a face at the bottom, you'll notice the one at the bottom, the glasses move faster so that they all land at the exact time, which is a really cool effect. In this case, where the eyes are all pretty much in the same plane, that effect isn't as dramatic. So I was cheap when I made this and I didn't want to save these images on my own server because I didn't want to pay for it. So if you notice, the URL for the image is actually just hashed into the URL for the page. Oh, you can't see it. It's kind of very, very light. But I actually don't I don't save any of the images. So I put that that URL in. And if you want to share this out, like there's a share on Twitter button, it actually is just like a fun club dot Azure Web sites dot net slash. And then the hash of the URL that the person put in. So that was just my way of being cheap because I didn't want to save all of these photos to some like blob storage or something like that. So this was my first kind of project that I was kind of playing around with this idea of of fun applications for Node JS. It's really simple. I love it because it's a small scope. It's not really that complicated. It's one of those things where the idea is more valuable than the code. Like, I mean, the code isn't really that complicated. Right. I wrote this on a four hour bus ride from Dallas to Austin, most of it at least. So it's just it's not perfect. Right. It goes a little haywire on iPhone. But, you know, it gets the idea across. It's really well scoped. And it's just kind of funny. People people love to put in their own photos and whatever. If you want to check this out, actually, the whole thing is open source. You can see the bottom. It's a source on GitHub. I have a link to all that at the end. So don't worry about taking notes for that. I have a I have one master link that has all of my resources I'll be talking about today. So after I made the deal with it, but I decided to take on something a little bit more ambitious. And that was connectedness. So connectedness is a Wi-Fi modem peripheral for the original NES console. And I also wrote a Twitter stream client in assembly language that will run on an NES cartridge. Difference. What's that? It is a big difference. Yeah. Java JavaScript to assembly is like way memory mapping, compiling. What is? Yeah. So so this is essentially a project that's composed of three parts. And oh, you can see it here working actually. So I sent a tweet. The the client is looking for a hashtag in this case connected any hashtag. And then it's streaming that to the NES. There's not a computer connected to this. The console is not hacked in any way. It is a standard issue console. No modifications to it. The Wi-Fi modem actually plugs into the second controller port. So it's a perfectly stock situation. So if you take it and plug it into another console, work totally fine. And it's composed of kind of three parts, which I want to talk about a little bit more in detail. So first of all, there's a custom cloud hosted server back end. And that's the node part of this. Secondly, the actual hardware, the wireless modem. Now, it's not really a modem. I call it a wireless modem because I think that is very understandable to people. And I also like that idea of like a false history. Like, oh, remember when the NES had like a wireless modem and you're like, maybe it could have been a thing. I really love projects that play with people's perceptions of history. So, no, it's not technically a modem. It's a microcontroller that has Wi-Fi capabilities. And we'll talk about that in a second. But then the third part of this is NES game cartridge with a custom ROM. So we'll kind of walk through how that works. And I should say, you know, as I mentioned before, I've been making old games mostly for the NES for about six or seven years. So I did not like learn any development for this project. The NES like assembly language is actually the easiest part of this for me just because I've been doing it for years. So it wasn't like I just was like, oh, just like learn this really complicated thing one day and just make this little project in two weeks. I did make this in two weeks, but it was it was only after years and years of writing assembly language. So I always want to like emphasize that, you know, things that seem effortless are not effortless. Right. There's like years of preparation and work and practice and experience that go into that. And I think it's sort of disingenuous to be like, oh, yeah, I just made it in two weeks, even though I did. But but again, there's a lot of a lot of really hard it was it was a it was a difficult journey to get there. Right. So let's talk a little bit more about these components. So the back end is a note app. Essentially, what it's doing is I have a the twit node module, which is grabbing the latest tweet about connectedness or I can change it to any any hashtag I want from Twitter streaming API. It parses a tweet into a single string and it publishes that string to the cloud. So it's kind of interesting. So unlike most applications where we're like, let's say we're writing a note app for the web browser, we want it to be responsive, right? Because it's the web. The NES is not responsive and it's also not smart. And so going against best practice for how we develop with JavaScript, I tried to put in a lot of upfront processing. In this case, I take a tweet, I turn it into a single string or it returns back something that I can basically work work with as a string. I actually go ahead and figure out the line breaks and I pad it with spacing and OK, 24 characters slice. I have to do some kind of interesting things to figure out word breaks because I know exactly how many pixels I can display on the NES. And it's 256 across. So very, very, very constrained. It's like the opposite of responsive web design. I know exactly what this display is going to look like. Even a giant TV is just going to scale up those pixels. So we get our we get our tweets that are based on this hashtag. They're parsing a single string. I take out things like emoji because with the NES, you've got 256 tiles that you can use as letters, which means you would burn through emoji. You know, you could use up your whole tile set with just like a quarter of the possible emoji. So I made the artistic decision to change all emoji into question marks just so I can actually fit. I need to fit all the alphanumeric characters, right? So after we've taken this string and got it exactly how we want it, we need to actually get it to the NES, which does not have Internet capabilities that we can give give it Internet capabilities. So this is a particle photon. Has anyone here used a photon? I love the photon. So it is Arduino like Arduino compatible microcontroller. It has on board Wi-Fi. It's like nine bucks. And it has a I think it's about that or it's it's really inexpensive. And it also has a cloud based ID. So I can actually reflash it over the Web. So I could be here and push some new code. And as long as my particle photon is on Wi-Fi at home, it will actually reflash over the Web, which is super, super awesome. So this is what I use for the wireless modem. So Particle who makes this board, they have actually created a JavaScript API for sending small amounts of data. So they take care of that, which is great. And they publish a note app. They also have like a regular sort of JavaScript library that you can include in a Web page and you can publish. You can wait for events. You can publish events, things like that. So I can basically send that string over as a as an event. And this device is listening for that. Really, all the microcontroller does after it receives that string is convert the string into an array of bytes, because now we're getting ready to go into any as land. And a string is not going to be something that any as can understand. It's going to be sending bytes one byte at a time. And it's actually doing it through the controller port. So how does that work? Well, if you think about it, you know, the NES is the NES controller. Every time you press a button, it's just sending some bytes. Right. And so if you sent a lot of bytes through that controller port, you could send data. Right. And that's exactly what I do. This is a picture of me de-soldering the wires. So this is actually what if you took an NES controller and opened it up, this is what you'd see on the inside. I'm de-soldering the wires from the board because these wires are very thin. And they have leads on connecting them to the board. And I want to get those leads because if I try to work with the wires, they're just going to fray and anger me. I know because that's what I did the first time. So these little wires, you have power, ground, data, clock, latch. And you can actually use this microcontroller to you hook up all these wires to different pins on the photon, just like you would with an Arduino or something like that. And you actually just send those bytes and you fool the NES into thinking that it's a controller. So if you think about an NES controller, it has eight buttons. A, B, select, start, up, down, left, right. It's an 8-bit game console. That is not a coincidence that it has eight buttons. People know the Konami code. Right. Up, up, down, down, left, right. So it's from these. I like to rearrange these like stellar bods. This is like my greatest anagram moment ever when I realized that that was stellar bods, especially, you know, it's a modem. It's great. OK. So essentially we take we kind of hijack the system and deliver the bytes this way. Someone very smartly asked me once, what happens if you just plug in a regular controller and like press the buttons? It will just print garbage text as you would expect. Each button is checked in serial one at a time. So these are some examples of, you know, things you might send over as button presses. You just hijack those and they're corresponding to the ANSI values for each of the letters. So I did something kind of goofy, which was like, OK, so the NES doesn't have a built in font set. OK, so unlike early computers that had, you know, a built in set of letters where you could do like print hello world and something would show up, the NES doesn't have any built in graphics, text, anything like that. So I had to draw those by hand into memory and I decided to put the letters corresponding to their ANSI hex values. So instead of making a lookup table, it's just literally pulling them directly from RAM. It's kind of cool. This is the first model that I made in this really lovely kind of cross stitched cozy. I'm really like I really like the crafty and cute aesthetic. So there's actually just like a little quarter sized breadboard in there with a particle photon. And you can see like it blinks and then the whole thing lights up and it's very cute. This is version two, which is made with laser cut acrylic. This is nice because you actually see the board inside and it lights up and it's a little more like mystical. But it's the same idea. So we've talked about the server. We talked about the back end. We talked about the photon. Let's talk a little bit about the NES code. So this is a ROM. You'll see here it says tweet hashtag OSCON at the bottom because I actually debuted this at OSCON in Austin, which was really, really super fun. So as I mentioned before, again, everything done by hand. So all the graphics, all the text needs to be written into these files by hand. Some people ask me, how do you make an NES game? Like what is the tool set for that? And the answer is that, you know, Nintendo didn't release developer tools widely. And so everything that we have today for those of us in the homebrew community is all community made tools. So we don't actually know how old NES games were made. The process is probably very similar to what came out of the community, these community based tools. So we have a 6502 compiler. We have like a software that will help us do graphic tiles and arrange them and things like that. And we have other than that, though, I mean, you're just writing it in notepad and compile it and it's a ROM. You can create these cartridges by taking the ROM. Now, this ROM would work in an emulator. The issue is that the hardware doesn't plug in because I don't have an NES port on my computer. But essentially you take that ROM, cut it in half, divide it up onto two EEP ROMs. I get out my little EEP ROM burner, which I think has a serial cable. I don't know. It's an ancient device. Burn those two EEP ROMs, solder them onto a cartridge. And there you go. Fortunately, there are more contemporary ways to do that. There are things like cartridges that have a compact flash card or an SD card. So you can just throw the ROMs on there. You don't have to get out your soldering iron. And that's incredibly helpful. If anyone's interested what assembly looks like, here's some. So this code, what this code does is you noticed before those there are balloons that fly up on the screen. What this code does is when a balloon reaches the top of the screen and it's kind of off the screen, it creates a new place to spawn at the bottom. This is part of the code that does that for one balloon. So this code is basically resetting the sprite position for one balloon. And this isn't all of it. So what is this? It's tens of lines. So you can imagine, of course, the lines are very short. They do one specific thing like put a number here, add this number to it. But assembly can get quite long. So you can easily get a couple thousand lines for something really, really simple. So that's pretty straightforward. I feel like it's easy. I don't know. It's not easy. It's easy when you talk about it when it's already done. Of course, there are all sorts of challenges. Things like optimizing line breaks is something that I had never had to think about before because you would never ever try to like manually put line breaks into running text in JavaScript. Like it kind of makes you go, oh, don't do that. But it was really necessary in this case. So thinking about like how to what do you do when someone tweets, oh, my God, and it's more than 24 characters. Right. How do you decide like where to break unpredictable things or or what happens when you run out of lines? Right. If the TV becomes full, how does an NDS controller work? It was actually a nontrivial question. It was something really important to understand. I actually wrote a game that its sole purpose was to translate the bytes that were coming over because it was so so odd that I couldn't even really debug it. I had to create a new game that actually printed the bytes on the screen so I could help debug my own software. Super weird. This is another one I never thought about. How do you make a JavaScript application for something that has no browser based user interface? So if you think about a node server, let's say you go to a website and the website, oh, there's a user here. I better go wake up that node server. OK, in this case, there's no browser. So there's nothing waking up the node server. The node server needs to be running all of the time. And so that was kind of an interesting concept to me because I never had to think about that. Right. This node server needs to be on all the time. I ended up deploying it to Azure and setting it to be like there's a setting called always on. So it doesn't go to sleep. Even if it hasn't been active for years, it's going to stay on all the time so that when that tweet comes in that matches matches your hashtag, it's ready to process that. So a confession is that these are my first two node JS projects ever. I'm relatively new to node, even though I've been kind of playing with web front end development since I was about 14 when I got my first or we got our first family computer. I didn't really get into node that much until this year. So I'm fairly new and I kind of want to talk about the experience of doing these two projects, which were really propelled, even though they were difficult, propelled by the fact that they were fun. Fun, not just for fun anymore. So I have a couple of thoughts about why fun is important and why fun helped propel me through these through these projects. A fun project for a beginner, a fun project is one that you're going to keep coming back to even when you hit difficulties. If I had decided to teach myself node by creating something that updates interest rates in a SQL database and then I like ran into some problem, I'd be like, well, well, that's fine. I don't really care about that anyway. But a fun project is what kind of gets you because you're just like, I have to figure this out. I want the glasses to slide perfectly. Right. When you get invested in your own learning in that way, it really helps you to overcome those bumps that you're going to inevitably hit. I also believe very strongly that when it comes to teaching and learning something like node tutorials that are about building something fun help break down the intimidation factor. I don't know about y'all, but I get intimidated when I go to a tutorial and it's like you throwing around all these words. I don't know. And it's like, oh, it's so easy. And then I can't understand it. Right. Maybe you've had that experience as well. So when tutorials are based on something that's fun, it kind of changes the atmosphere. And people who are new to coding say, oh, like programmers like funny stuff like I do, like they like cats and memes. And it helps you feel like, oh, this is someone I have something in common with, especially people that maybe haven't been encouraged to try programming or maybe feel like they don't fit in or they don't fit the stereotype or something like that. Things that are kind of fun and playful can actually be the reason that someone pushes on. Finally, you could actually use fun and playfulness to make serious critiques. Right. Maybe you have a message that you want to share and it's boring to just say it out right. But you can use a sort of fun and play to talk about more serious issues. Video games do this all the time. Right. I won't name any names, but I'm sure you can think of video games that like they were fun. And then you realize, oh, my gosh, this is a metaphor for whatever. And you have that moment. You're like, whoa, that's cool. And maybe it's about history or war or something you would have never picked up a book on. But you actually had this really like cool experience with. And so I like I like that aspect. So, for example, I built connectedness in part because when I was a kid, I didn't have an N.E.S. and I was I was pretty girly and I didn't really like games about sports and shooting people and fighting and stuff like that. And so I never really pursued it. And so my entry into any development was sort of a way to recuperate this childhood that I never had and to make it kind of more girly and cutesy, which is something that if I had had when I was a kid, I might have been more interested in games. I might have been more interested in coding. And so there's some commentary here on like gender stereotypes and stuff. Right. And I could write some like stuffy academic paper about feminist critical design approaches to video game history, which, in fact, I did as my master's thesis in 2014. A feminist critical design approach to video game histories. But like it turns out that like not everybody wants to read a 70 page master's thesis. Actually, this number seems kind of high to me that like last month, every other day somebody read this, which seems like a mistake. Actually, it's like a runaway freight train. Right. So not everyone wants to read a 70 page tome about feminist theory and video game history. But you can use fun and playfulness to kind of, I don't know, just like think about it without really coming out and saying like, here are all the facts and here's all the theoretical stuff that you need to think about. I don't think that's always effective, especially if you're talking to people that may not agree with you yet. Right. If you're trying to convince somebody, you don't want to give them all the terms that are terms that are going to shut their ears off. Right. So playfulness and fun can be a way to sort of bridge those communication gaps. Like sometimes we're on the same page. We're just not using the same words. So I think playfulness and fun have a really interesting way of bridging those disconnects. So this is why I think you should make simple games and fun stuff with no jazz or teach games with no jazz. I think scope is really key. One thing I worry about with with respect to no jazz is whether new coders who are coming in will try JavaScript and whether they'll stick with it. Like for me, when I learned about no jazz, I was like, oh, JavaScript, that thing where you can make alert dialog boxes, that actually does something else. That's cool, because I was thinking about the 90s and the old school like cut and paste, like make a guest book counter and stuff that does not exist anymore. But, you know, what about those people who don't have any coding experience? Are they going to choose JavaScript and are they going to choose it over something like Swift or Python? In particular, I think one thing that Swift and Python do really well is onboarding folks that are completely new to programming. Right. So things like this. If you haven't read Automate, the boring stuff with Python or if someone's like, hey, I want to get into coding, what should I do? One thing that's really great about this book is it is so so beautifully geared toward a beginner. Talking about things like, hey, your code is going to be ugly and that's fine. We're going to go fix it later. Really stepping you through like, hey, this is a thing called terminal. Let's talk about that. Right. And I think this is part of the reason that we see so much success with these languages with young people in school. We might have this idea that like, oh, young people are great at computers and they are and they're very smart. But my experience when I was teaching undergraduates at University of Texas was that many of my students had never used an SD card or they had never used a USB device. If you think about when the iPhone came out of college, freshmen was like 10 or 11. The only computing device they may have ever used is an iPad. And so they're coming from a different perspective than those of us who have been around even a little bit longer. Right. How many workshops I've gone to where students are getting hung up on terminal like they didn't CD into the directory that they just made. And that's like a totally understandable thing. And we often leave that step out of instructions like, oh, you have to do this thing called CD. Like there's actually a folder structure. And I had students who actually had difficulty even with the concept of a folder structure, again, because of their use of iPhone, iPad, where they're not necessarily thinking about a folder structure. So, you know, I always wonder like how many node read me's start with like, oh, this is so easy. Just and human still a blah, blah, blah. And how many people go to terminal and they do and PM and solve all the boxes and PM is not a known command. And they're like, oh, well, I guess I'm bad at computers. Goodbye forever. They just like a log off. Right. And I think sometimes like developers, we have this idea of like, well, look, programming is tough kid. Like if you can't figure this out, then you know, you'll never make it in this town, which I think is a huge disservice actually. And one thing we need to think about is actually a lot of people who come to coding are basically like one bad experience away from going like, no, never mind. Right. Especially people, you know, like my experience was that people were always discouraging me from using computers when I was a kid. You know, in the late 90s, early 2000s, it was like, oh, you better watch out. There's weirdos on the Internet. And like, you know, there was this this panic, I think one that still exists today, but maybe in the terms of like, oh, man, Twitter's yes, big garbage fire. You should just log off. And so so sometimes people are already discouraged when they come to us to learn how to code. And I don't think we should turn our backs on them. I think we owe it to them to like help them have a good experience. And part of that is, I think, defusing some of the tension. And I think we can do that with fun. So I like to think of no jazz as an elevator perched halfway up a mountainside. It makes things really convenient for people who have already climbed Mount JavaScript part of the way. But if you're new, how do you get there? Right. So I guess I would just end by saying if you're new to programming or JavaScript or Node and you're like here to check it out, welcome. There is an elevator. It's like up there. You can't reach it now. It's totally fine. But if you're passionate about helping others learn JavaScript or Node, I think we have sort of an obligation to make that ride really fun. Right. So we don't we should not be making trail maps. We should be making zip lines and ski lifts with disco lights and rave music. And we should be setting up games of hide and seek that get us up the mountain without us even realizing it. Right. Let's make that journey fun. So if you want to check out any of the projects have done, everything I talked about today was open source. A lot of my colleagues have also done really cool fun and games themed stuff with with Node and have created tutorials as well. This is a link to a blog post on my website. And I want to actually continue to add things to this. So maybe bookmark it come back in a week and maybe I'll have some more stuff up there. These are some things that I've kind of tried out. I think are cool. I think have a lot of potential. You can see how people are starting to try to reach out and teach Node and JavaScript to folks that are starting out. But I think there's a huge room for us to do more in that space. So that's pretty much it. If you make something with Node.js and make it make a game or you have some ideas, I'd love to hear it. You can talk to me. I'm going to be at Microsoft booth or I'll be around or you can find me on Twitter. There's my handle if you do the Twitter thing. And that's it. Thank you so very much.