Salma Alam-Naylor 0:09
Hi everyone, writing code is rubbish, isn’t it? Sometimes you feel like an absolute genius, like nothing can defeat you, and there’s nothing you can’t do. And other times it makes you feel like an absolute failure. When everything’s broken, you don’t know how to fix it. So you might as well quit. Because what the heck are you even doing trying to build software? The cycle is never ending. But what if we embraced this? What if we experienced and celebrated this never ending cycle over and over and over and over again, in front of a live audience through building silly websites, pointless projects, and nonsense NPM packages. Now this is entertainment as code.
Salma Alam-Naylor 1:08
Now Brian has given you a bit of backstory, but I want to give you a little bit more because it’s relevant. And when I graduated from music college with a degree in composition, I was an entertainer, and wanted to be a film composer. I was in a band, and I was a musical comedian. And throughout all of this, I was also making terrible websites for my friends. But as a musician, in order to pay the bills, you usually end up being a teacher. My name is Salma. I’m one of the main tutors. It’s gonna rock and pop combines professional music tuition with the opportunity to perform. You sent a host to gigs at recognized rock music venues is a chance to meet like minded teenagers, and really rock out in a way that can’t be done at home. Fun fact, I couldn’t play the drums, then I’ve started learning drums in September, it’s going very well. It’s very fun. But in 2010, that’s far too long ago, I set up the School of Rock and Pop in Manchester. And I was teaching children how to be in rock bands for your entertainment. I was helping them put music into a real tangible context rather than practicing alone in their rooms. And I really liked this whole teaching thing. So I got my teaching qualification, and worked as a music teacher in high schools for a few years. Fast forward to 2014 I quit teaching, and I got my first job in tech. And this led to many more jobs in tech as a front end, Dev and tech lead at various different types of companies. And then in 2020, everything changed. The pandemic descended upon us everyone stayed inside, and they were starting to find new ways to spend their time. And here is where Twitch comes into my life. I’m sure you all know about Twitch, but if you don’t, it’s a live streaming platform. And its main focus has always been on gaming. But as time went on, creators started streaming music, arts and crafts, talk shows charity events, 24/7 live feeds of farm animals and earthquake alerts, basically everything and anything 17 billion hours were spent on twitch in 2020, which was 83% higher than 2019. And I was part of that I started watching Twitch in the first lockdown. And the category that caught my attention was software and game development. People were writing code live on stream and I pretty much got sucked in. In the last year, over 17 million hours of software and Game Dev streams have been watched, with an average of 2000 viewers across the category and around 100 live channels at any one time. Now it is a small category compared to gaming. But with that comes a big opportunity in June 2020. I went live on Twitch for the first time. And here’s a clip from a really early stream. It’s not the first but it’s pretty early. So now we’ve started and drop D is working, but died gad is not
Salma Alam-Naylor 4:28
as you can see, I was going through the failure stage in this clip I was such a failure. I had no idea what was going on. But in this this stream I was mixing my music and Tech experience through building my first open source app. It’s called the fret inator and it’s a guitar app to learn scales and modes bear with me this will be relevant. To use the detonator you choose a starting note you pick a mode or a scale and you use the guitar fretboard to learn it. You can also learn more about the music theory behind it if you want. But most importantly, every scale for every starting note comes with a backing track for you to practice with. So rather than just playing on your own without any musical context, the fret inator is about putting that theory into practice in more meaningful ways, much like the mission of the School of Rock and Pop. And this concept has also inspired everything I do live on Twitch, my original terrible tagline build stuff, learn things, love what you do put the focus on building, which is representative of how I learn and how I put things into a real world context. I retired that tagline last year, because I realized it sounded too much like live, laugh, love. But through live streaming, I was starting to discover that demonstrating and practically applying technical concepts in front of a live audience. And going through that genius to failure cycle over and over again, was actually making tech more accessible, and more human and more entertaining. Exactly. Like when you play and perform music with others. Here’s another clip of me being a failure. I quit, I just quit, I quit, I quit. I’m gonna do something else. I can’t I can’t make this. Every step of the way is just an absolute piece of shit. And here’s me being a genius. If it does work, I will feel sick that I have succeeded.
Salma Alam-Naylor 6:50
See, the cycle was neverending. It doesn’t stop. But in the first six weeks of streaming on Twitch, I learned a lot. And so I wrote about it on my blog. And what I discovered is that the most important thing about live streaming is you the streamer, your personality, your experiences, your failures, your genius moments, the code, and the tech is just the hook to get people in. Viewers don’t really stick around to learn how to code that’s just usually a side effect. They come to hang out with you and with others who share the same interests. And most importantly, people show up on Twitch to be entertained. Twitch viewers are not passive, like YouTube viewers. They’re active participants in a live show. So I started thinking about how I could build on this and how I could encourage and enable my viewers to create their own entertainment, sometimes without even realizing it. So I built a twitch bot. It’s an application built using the Twitch API and other third party tools. And it allows viewers to make things happen on the stream via chat commands and channel point redemptions. Now there are pre existing tools to bring interactivity to your streams if you can’t build your own. And making a twitch bot is not a new innovative thing. Lots of software and Game Dev streamers have done this. But building stuff for your stream live on stream with viewers or viewers is the best way to test functionality, crowdsource ideas, and make people feel part of something part of the entertainment factor. So I’m going to show you everything I use to power my stream. Fun fact, it is extremely over engineered. So I think some of you are gonna like it. We start with the back end. Panther bot is an Express app. It uses TypeScript. It stores some stuff in MongoDB. And it sends events over a WebSocket connection. It uses the Twitch API and a third party wrapper around the Twitch API called TMI Jas, and there are two react apps listening for WebSocket events. There’s even a types package that both the back end and front end applications use. And it also uses the discord API to send some Twitch related stuff to my Discord server such as go live announcements. And all of this is brought together in OBS, which stands for Open Broadcaster Software, which I use to stream where each piece of functionality is added to my stream scenes as URLs that you would open in a browser. I also use another app called Atim, which allows me to control OBS directly via Twitch. Let’s have a look at some of the stuff it does. So follows subscriptions and cheering These are core parts of the Twitch experience. As a viewer I like to go into other streams, press the Follow button, just to see how much I become part of the stream. And if I don’t become part of the show, I’ll feel a bit sad. And the bot uses the event sub API from Twitch which lets your application subscribe to it. events that happen on your channel. And when an event occurs, such as a follow, Twitch sends my app a notification. So here’s what happens when I receive a follow event, we first check for an existing follower in the database. And if we don’t find one, we find the Twitch user by ID. And then we build up a follow event and send it over the WebSocket connection. Most importantly, the event contains the follower name, and their profile image, which is how we’ll put the viewer into the stream. This is the front end React component that displays all the alerts, there’s a queuing system to account for lots of things happening at once, which could happen if you have a lot of viewers. And each type of alert shows a different image and text depending on what sent by the back end. Sound is also important for a live show. Each alert plays a different custom guitar riff sound recorded by my husband? And yes, I did build the fret inator for him. And actually, I do have a funny story about the sounds. When the repo was open source. It’s not now it’s private. I stored the mp3 files for alerts in my Google Drive. And I used environment variables to access the URLs to those files when needed. Sometimes the alerts would start working. And it took us a really long time to work out why what happened was that too many alerts at any one time would actually DDoS the connection to Google Drive and it would deny the bot access to the files. So it’s quite fun that me and my chat DDoS Google. Anyway, here’s a follow Allah. I want to thank you for the follow. Welcome. Also notice two other events that happened. One that changes the pump the logo overlaid on my camera at random, and one that rains down my twitch emotes. As you watch a stream you accumulate channel currency and you can choose to spend that currency on fun stuff set up by the streamer. Among many other things, viewers can trigger the logo change manually via channel point redemptions, which also triggers a custom sound. And viewers can also make the emotes rain down by typing different weather words in chat such as rain, hail or snow, which changes the intensity of them. And all of this has gone through a lot of iterations throughout the years live on stream, including needing to limit the amount of emotes that were dropped at any one time because of this. Oh.
Salma Alam-Naylor 12:32
That happened when someone gave me 50 gift subs for the first time. It broke everything. We were testing in production, and it didn’t scale. And yes, we heard that guitar riff 50 times. But that’s entertainment. The act of writing the code to make that happen live on Twitch was entertainment. Viewers being able to cause chaos in my stream is entertainment. And what sometimes happens unexpectedly as a result of all of this is also entertainment. I also like to show chat messages on stream to maintain some movement on the screen to give the impression that things are happening when I can’t code chat is another custom browser URL powered by the backend, which listens for chat messages and sends events over the WebSocket connection. A lot of information is sent over the WebSocket for each chat message. Viewers are great as QA for all of this pen testing it and suggesting ideas for new features, such as being able to use an HTML marquee tag, and new marinum mode which is a channel point redemption. But new rhythm is a number based word commonly used in tech to short and long words such as accessibility, internationalization, localization, Kubernetes, etc. All words that are too much effort to say. And here’s the code for numerous demoed. The make new runnin function splits the full message by space. And for each word, it returns the first character, the count of the characters in the middle, and the last character. And for some reason, I published this to NPM so I could use it in multiple places if I needed to. Now I thought it was pretty useless, but people have been downloading it, but I haven’t used this in any other projects myself yet. I also built a giveaway system in the back end, giveaways are powered by typing commands in Twitch chat such as exclamation mark start GA to enter viewers type exclamation mark when in chat. The backend app is always listening to chat to find possible commands to run. If the valid command is found. Then we do stuff. If it finds exclamation mark when in chat and a giveaway is in progress. The viewer is put into the giveaway pot to select a win Now I type exclamation mark draw GA in chat, which selects an entrant at random, and sends an event over the WebSocket if they are still watching the stream. Again, the key thing here is to send the user’s profile image URL to put them in the stream. Here’s a clip of an old giveaway in action. I like giving away gets a t shirt. That was fun. Next, back seaters are everywhere in software and Game Dev streams. So much so that it’s become kind of a meme on my stream. new viewers will come into the stream, and then just tell me what to do paste code snippets in the chat. asked me why I’m not using tailwind with no context about the problem we’re solving and it’s the worst. It’s like backseat driving. Why aren’t you doing this? I think you should use this bla bla bla bla bla bla bla bla books heating. So one of my viewers thought it would be a good idea to put back seaters in a literal car. And while I was streaming, they sent me these very low fi drawn layers of a car. I think they did it in Microsoft Paint that I added to the scene in OBS, everyone’s entertainment player in front of me.
Salma Alam-Naylor 16:29
So I got it set up eventually. One second. To Taco Bells, please. With sparkling water. Thank you. I’ve actually never had Taco Bell in my life. But sparkling water is a far superior to Stillwater. I’m just putting that out there. Anyway, the car has evolved, of course, and can be triggered by viewers if they feel someone is misbehaving. Here’s how it works. Again, the back end listens for a command in chat, exclamation mark B. S, what BS stands for here is open to interpretation. And then we grab the username from the message. And if the targeted backseater is present in chat, we send an event over the WebSocket. Again, making sure to send the profile image URL and today it looks like this. I want people to send me loads of code in Twitch chat. So it’s big, unobtrusive, and fun. Chaos is entertainment. And I’ve now added so many channel point redemptions, interactions and triggers that rink things through edge cases and conflicts, and I haven’t fixed them on purpose. Because as a viewer, it’s fun to break a stream. It’s fun to cause chaos. And it makes you want to keep coming back to cause more chaos later. My redemptions are too cheap. So they go too far, this is fine.
Salma Alam-Naylor 18:02
Salma Alam-Naylor 23:37
Cool quality means.
Salma Alam-Naylor 23:53
I love it. I love it. I need to write more code.
Salma Alam-Naylor 23:59
Salma Alam-Naylor 26:43
There’s a house.
Salma Alam-Naylor 26:46
Salma Alam-Naylor 29:33
Access prohibited. This is a private web, you are being rerouted to the public information site. I love it.
Salma Alam-Naylor 29:41
Brian Rinaldi 31:56
that was so much fun. Salma, I think I you know, I haven’t, like I hate just kept kind of laughing to myself seeing some stuff, bringing back memories of sites and just kind of, you know, seeing how the stuff you chose to build. It’s just kind of it’s so much fun seeing those those projects. And, you know, I I’ve done some of those in the past. And I’ve always I agree with you that the pushing people to just kind of write stuff because it’s fun. And not because it has to be useful.
Salma Alam-Naylor 32:28
So serious. You’re right. Yeah,
Brian Rinaldi 32:31
Salma Alam-Naylor 33:19
A lot of the time, it’s just around, I get a lot of random ideas, stupid things, and I add them to my like task, tracker in notion. And then I just decide to do it. Like, I really don’t put too much thought into it. And I think when you do put too much thought into it, that’s when things get difficult and not fun. So for example, the random code generator, I was just sitting on my sofa one night, and I thought, oh, that will be silly, wouldn’t it and I bought the domain that night. And then I had to build it the next day. And obviously, it took a few weeks to build in its state that it’s in, but just don’t overthink it. I get ideas from everywhere, like anything I think of I write down, I was actually going to build a random idea idea generator once. For people who asked that kind of question. It’s like, if you don’t have an idea, here’s loads of random ideas for you just click the button, I still need to do that. It’s still on my list. And I just have a never ending list. But it doesn’t really matter what you build. And it doesn’t need to really be an idea. It can be a sentence, or a dream or a concept or something completely abstract it just anything, I’ll do anything. And if it doesn’t work, it doesn’t matter. Like I will try anything. I’ll try it for a stream and if it’s not going anywhere, then I’ll give up you don’t have to like build things till they’re finished at all. And that’s another key thing that I want to get across when I do my streams is like nothing needs to ever be finished. Really. Just do it for fun and if you get bored and you get frustrated then stop it and do something else.
Brian Rinaldi 34:52
Yeah, that’s good. I love the random idea generator too. You could you know, you could have like, people just kind of if you Pick their random ideas and spit them into this thing. And then I actually build
Salma Alam-Naylor 35:03
this. What am I talking about? I built this so I was on no Jason Lang stores for devs, one app series, this first episode, and my app is called find something to do. You sign in. And you can just add stuff to a to do list. But when you’re signed in, you can’t see your own two dues. You can only see two dues that other people have submitted. I forgot I built that. So yeah, it does exist find something to do dot Netlify dot app, find an idea from there, but they might be silly ideas, but that’s good, right?
Brian Rinaldi 35:34
Yeah, yeah, definitely. That’s, you know, it’s kind of like when you write a blog post in one day, like years later, you’re like searching for like, how do I do this, and you come across your own damn blog. So I’ve got another question from Sergey, do you use web tech like HTML and CSS to layout the screen as well or, or OBS for layup?
Salma Alam-Naylor 35:55
So everything that’s like, it’s a combination, OBS does a lot of like the moving effects and things. So the layout is OBS, and some background graphics and things like that. And everything you see that goes on, on top is mainly browser URLs. But there are it’s a mixture, because some of it is just not really that possible with the way you want to move between the scenes with other triggers and stuff. That’s why I use Atim. So Atim is that standalone app that allows me to control those kind of things in OBS, so some of them are easier to be in OBS, and some of them are easier to be in browser sources. So it’s a mixture and I lose track, because it’s so complex, sometimes.
Brian Rinaldi 36:45
That does sound good. You know, most of the day I do this stuff in like, you know, stream yard because it’s complete. Even OBS was like I’m like, okay, I get the power of this first like it’s so
Salma Alam-Naylor 36:56
it’s a minefield, it’s really difficult. And I still don’t feel like I know how to use OBS after almost four years of streaming like it’s a new features, or new plugins and new stuffs coming out all the time. And you want to use it all but like it complicates things. It doesn’t scale. It’s I’ve got tech debt in my stream all the time, even though like I rebuilt it in the summer from scratch, because I got a new streaming PC, tech debt all the time. But that’s just life you deal with it? Yeah,
Brian Rinaldi 37:24
I can. I think I can’t see him. But I’m sure Potter’s back there when you’re talking about changes in OBS nodding his head like yes, yes, yes, we’ve been dealing with today. So walking us, do you have any fun or silly plans for the stream in 2024 that you’d like to share? Yeah,
Salma Alam-Naylor 37:42
so what I’ve started building last week is an it’s a music collaboration experience in the browser. So what I want to do is like have a piano, some drums, guitars, like lots of different instruments that will use WebSockets to allow multiple people to jam together in the browser. And what are the key concepts about that is that if you just let everyone have a free for all, it’s going to sound rubbish. So I need to bring in some musical constraints into that, such as being able to jam in a particular key, and use particular notes, and maybe in a particular rhythm. And I’m gonna use party kit as well for that, cuz I’ve never used party kit before, again, trying to use tech that I’ve not used before to create something like fun. And also, again, merge the whole music and tech thing. It doesn’t really have a use, apart from it, we fun to build and it will be fun, it’ll be a challenge to build, and it will get people involved and it’ll be entertaining. So that’s what I’m building at the moment. There was also another thing that I wanted to build, I bought the domain for and I did a couple of streams on it like a year ago. And it was called Panther world. And I do want to build this still and Panther world was a thing that was meant to blur the lines between me being online and offline. So every time an event happened on Twitch, there would be a random item that spawned in one of four zones of Panther weld. So you’d have like a mountain zone or a beach zone or a city zone. And you could choose as a twitch viewer to hang out in one of the zones. And the item was spawn in a random zone. And if you were in that zone, you could collect it, it would take time to go from another zone to that zone. So you had to decide whether you wanted to move or not. And because I get follows like when I’m offline. So if you could hang out in that browser URL and collect items. And then you know, there would be rarities of items. So you might be able to collect a laptop or a carrot or an artichoke, there was a proof of concept that I built of it and there’s a couple of Twitch clips on my Twitch channel. But and then it was intended to blur the line and then It’ll be it’s it was intended to gamify the whole stream experience. And I have no idea what people would do with these collectibles, but they will be stored against a username. And people could like experience restreaming without restreaming. So it’s a huge project though, because I wanted this kind of like 3d world. And I don’t know how to make 3d stuff in the browser. It’s like it was like a game. So maybe I’ve got to get into game dev as well. But they’re the two things that popped to mind right now.
Brian Rinaldi 40:29
That that they both sound really, really fun. You know, and it’s funny that you mentioned, I’ve seen some people in the chat also, like, I think there’s a lot of folks who who are into coding who’ve been into music on some level, either, you know, semi professionally, or just, you know, amateur. I did, I mean, years ago, I was myself, I used to do a lot of like, you know, I had a whole bunch of synthesizers, and all the MIDI set up, and oh, my God, I haven’t done it in, in ages. But it always comes back into my coding like that. Yeah, you know, chiptune thing. Or? We had, so I worked for LaunchDarkly. And we had like this. They had created this video of our mascot, which is like this astronaut, DJ DJing. And I was like, Well, what if you could actually use feature flags to DJ? So I built that. I was like, okay, yeah. So like, there was, it was a lot of fun. It was like, Okay, how do you sync up audio so that, like, people could turn it on and off feature flag so that it’s always in sync? But you’re making your own mix? And, and stuff like that? So yeah, it was a lot of fun. That
Salma Alam-Naylor 41:34
sounds like something I would try and make. Yeah, I
Brian Rinaldi 41:37
just didn’t stream it. You know, I’m like, Yeah, I like very. I admire folks like you who can do the streaming, my whole coding process. Nobody wants to watch me code, because I get very distracted. I’ll code for like, few minutes, and I get stuck. And I’m like, Oh, what
Salma Alam-Naylor 41:57
do you think I get much code done on my actual streams with all that chaos. Like, that’s not the point. It’s really not the point. And a lot of people are hesitant to start streaming, especially in software and Game Dev, because I don’t want people to watch me work or I won’t get any work done. Like you don’t really get any work done. Like I obviously, there’s some stuff I do off stream as well. But that’s the fun of it. And actually, I prefer that medium, live streaming, to like recording for YouTube. Because I feel like I’m more myself. I’m like, naturally a performer I was a musician my whole life and being like, even now speaking to you, I feel more myself than like, doing a presentation and reading slides. And I think that’s what comes out in my live streaming. It’s like the real me, and the failures and the genius moments. And it’s the whole journey. And it also helps people to really understand and realize that they’re not alone in the struggles that they go through. When they’re writing code and building software. If they can see that in real time, and no one gets anything done. And it’s too difficult and you can’t fix the bug then just makes you feel much better about your life.
Brian Rinaldi 43:04
Yeah, for sure. And I hope if you haven’t been able to just go after this talk and go check the comments, because so many people talking about how you’ve inspired them in different ways with this talk. So I’m really, really great. I really appreciate you coming out and speaking to us and thanks for having definitely enjoyed the talk. And clearly I’m not alone and seemed like you had a lot of fans on this talk. So hopefully they’ll turn history which say on Twitter