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
Wow is broken, you’re gonna have to endure about 40 More alerts and on the Zephyr and Luka person as well. Thank you. Oh, the car didn’t work. Okay. Oh, we got a raid welcome in glitch fight, how are you? That disconnect stream is a channel point redemption, by the way, and it lasts for 30 seconds. And it’s always fun to see new people who don’t know what it is think that I have broken. So that gives you a very brief glimpse into how I approach writing code live on Twitch for the stream. And now I want to show you some of the fun and silly projects that I’ve built on stream in the name of entertainment. Geo cities is something that’s very close to my heart, the original website builder of the 90s. Here’s the first homepage of geo cities from the 22nd of October 1996. And this is the style stage project, which is all about showcasing the capabilities of modern CSS. Now your challenge with style stage is to completely change the look and feel of this HTML page with CSS only. So it forces you to be really creative, and learn more about CSS in the process. And I wanted to make style stage look like a GeoCities website. Here it is. You can scan the QR code if you want to check it out on your phone. It is responsive. And I know that’s not very authentic, but I couldn’t not make it responsive in 2021. I think I did it. Now I know what you’re thinking. Sama, how did you pull off getting those iconic dancing baby gifts on that page without editing the HTML? Well, I’m glad you asked base 64 encoded data URLs, which are added as pseudo elements to existing HTML elements on the page. And they’re assigned to CSS custom properties to be able to use those data URLs easily, because they’re so long and like they broke the file a lot, because I use too many. The fake visitor counter is also powered by a CSS animated pseudo element. And yes, I did manually specify 100 keyframes to change the Visitor Number, much to the frustration of my viewers, as they were forced to watch me do it are the highlights include this fake marquee using the papyrus font added via another silly pseudo element powered by a CSS animation using transform. And these globes, these beautiful globes, which are powered by the CSS list style property, and a custom property of a data URL of another base 64. encoded GIF. I learned loads through making this silly thing. And so did my viewers as a side effect, and it was entertaining. And speaking of 90s, internet nostalgia, I made a web ring. A web ring is a collection of websites linked together in a circular structure, usually organized around a specific theme such as tech. They were popular in the late 1900s and early 2000s, particularly among amateur websites. So that’s my website, and probably all of your websites in the chat here. If you are a member of a web ring, you display that on your homepage. Now the aim was to be as easy as possible to display this widget on any website built with any or no framework. And I wanted to make sure that updates for example, when new members joined the ring would be automatically pushed out to all sites without a redeploy. And it’s especially important if you like static sites. Now, this is a web component, it’s a throwback to Windows 98. Clicking join takes you to the GitHub repo, you can navigate back and forth between the sites in the ring, and you can click to go to a random site. To add yourself to the ring, you can open a PR to this repo, and add an entry to the members dot json file with your name and site URL. After the original release, I had 26 More people add themselves to the web ring. Some of you were either speaking or in the audience today. Hello. And for some people, this was their first open source contribution, which is pretty cool. When your PR is merged, this will make your site data available on a public URL as JSON, which is fetched by the web component at runtime, which means that every instance of the web component stays up to date. To show the widget on your site, you can add the following script tag and custom element tag. And you can also include some optional fallback content in case JavaScript isn’t available. Or you don’t want to use JavaScript at all, which makes the widget looks like this. And we love a little bit of progressive enhancement, you can configure light and dark mode, whether or not to show the full scrollable member list. And there’s also a hidden easter egg, of course. And now for the biggest meme of my streaming career, I built a random code generator. And it was the most ridiculous thing I ever did on stream. So say you need some JavaScript, you select the options you scroll down. And there it is perfect JAVA script for you to copy and paste into your project. Here’s how it started.

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
Talking of code. I don’t even know how this works anymore. But let’s look at some code. Here is part of the JavaScript example. There’s a bunch of methods that return a random thing. Some methods return an array which will be processed by a helper function to return a random value from that array. Some methods mash together values returned from helper functions. So here we have things like get random noun, get random verb, get random single character often used for very nonsense variable initialization. So here’s the verbs and nouns arrays, when the random code is generated, will always start with a function name, which mashes a Verb a Noun together. So for example, delete code, and it goes on pretty much like that. I’m not going to explain all of this, it’s stupid. But if you want to generate some random code, maybe show it on your website, like what I’m coding right now, like what I’m listening to on Spotify right now. You can because I published it to NPM. And again, Have no idea why people are downloading this, there were 105 downloads in a week in September last year. So maybe people are showing it on their website. But this was actually the first package I published to NPM. Live on stream, of course, and I wrote about it. And the blog post was really popular. And if you Google build test release node module, it’s actually the top result with a Featured Snippet, which is probably one of my biggest achievements. And it all came out of writing that stupid pointless nonsense code in front of a live audience on Twitch. This led me to publish a few other nonsense get random thing, NPM modules. And I did start building a random website generator with get random headline and get random tech business name. But at that point, the joke was kind of done. I also received 75 Pull requests to the original random code generator site by took before I turned it into an npm module. And people loved adding their own favorite programming language to the catalogue of random code generators. And again, for some people, it was their first open source contribution. And now I want to finish up by showing you some smaller projects I built on stream. Last year, I discovered Zen go web. It’s a development agency in Hungary, who live stream their work day from the office, they were great to have on in the background and have a chat with every now and then. But it was difficult to remember who was who in the office. So I built something for them. It’s a stream overlay for OBS to display each person’s Twitch username on the stream. And here’s the moment where it first went live. Yeah.

Salma Alam-Naylor 26:43
There’s a house.

Salma Alam-Naylor 26:46
Alright, great. And they’re still using it. So let’s have a look how it works. It’s a plain HTML page. It’s hosted on Netlify. And in order to give the zango web team some control of the overlay without needing to edit the code, such as showing who’s working from home, it uses a Netlify edge function, which is a serverless function that runs up the closest location to the request. And it enables NGO web to use a URL query parameter to show team members working from home whenever they need to. And this works by intercepting the HTTP requests for the HTML page, pausing the web for her URL parameter, grabbing the response to the initial request, modifying it accordingly, and then returning it. And the same, your web office also has a tradition of eating pancakes. There’s also some client side js that runs on page load that assigns a random team member a pancake emoji, so they know it’s their turn to make pancakes. But on the day of release, it was picked off turn. And the team have also submitted quite a few PRs for new themes and improvements, and I was excited to merge them all. And this whole thing was a really nice way to build a connection in the software and Game Dev category on Twitch. I’ve also experimented with creating some fun educational resources. One example of this is game of codes. It’s an HTTP status code quiz. Again, there’s a QR code if you want to play along or save it for later. And here’s a very sped up video of me completing the quiz. I can never get 10 out of 10, I’ve tried so hard. But when the quiz is complete, it gives you a summary of what you got, right? What you got wrong and correct answers. And you can start over to try again. With game of code, I also wanted to show what’s possible without a JavaScript framework or any dependencies. So game of code is written in a single file of plain JavaScript. And yes, lots of people did go in the car when I was building this, because they were very confused about why I wasn’t using a framework. Instead of using a state management library, we’re using a JavaScript object to keep track of the game state. And the whole thing is written with a functional programming approach. So it’s easily testable. But there are no tests. I did have bigger plans for this authentication via GitHub leaderboard competitions. But at this point, I was also learning that some projects don’t really need to be finished and can exist, just as they are. And the last example is, as well as sharing my love for geo cities. I’ve really enjoyed sharing the most intriguing website of all time, which shaped my early experiences on the internet. Last year, I recreated my favorite childhood website, and it’s a website that doesn’t exist anymore. And it’s called hell.com. This is just my favorite part of the internet.

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
Now, the public information site is just Google. But when this happened to me as a teenager, I believed it. You can read up on all the law on Wikipedia, but the TLDR is that hell.com was an intentionally mysterious website that existed from 1995 to 2009. And I wanted to recreate that myth straight on the mid modern web, there are too many easter eggs and too many things to share, and not enough time. But I used a combination of the pages and user journeys from Wikipedia and the Wayback Machine to recreate it. Here’s me randomly clicking around on the website I made. It’s built with Astro and jQuery, jQuery, because I wanted to preserve the nostalgia of an earlier web, even though it’s still the most popular JavaScript library use on the web today. And it was a little tricky to get jQuery working in Astro. So I wrote about it on my blog. If you’d like to blog, or if you’re just thinking about it, the best things you can write about are things that were difficult and problems you solved, because chances are someone else has also experienced it. And it’s also a great way to document all the stupid stuff I’ve done live on Twitch. And I have one more closing piece of advice for you. And it’s to ship your silly side projects, have fun with code. And if any of this has inspired you or piqued your interest, build silly stuff with people in front of a live audience. silly stuff like this website. Because silly things stick. I remember a time in school at 11 years old when we were learning about alcohol. And instead of the teacher standing at the front of the class and telling us alcohol bad. He spent the whole lesson stumbling around the classroom, slurring his speech and being silly, making us laugh. We were entertained. And we also learned stuff. I never forgot that lesson. And I always drew on that approach for inspiration when I was a music teacher myself. And it is right at the core of entertainment as code. I write code for your entertainment My name is Salma. You can find me on the internet everywhere as white Panther. And I’ll see you live on Twitch hopefully chaos

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
yeah, I you know, I remember even like, I submitted, do you remember a conference named fluent years back? It was a big O’Reilly web conference. And, and I really wanted to speak there. And I noticed they had a game dev category. And I’m like, Well, I don’t know anything about Game Dev. But, you know, I wrote, I said, I wrote a presentation proposal for like, how to write like, basically chiptunes in JavaScript, and that they accepted it. And so I had to go to like them. And they’re presenting how, like, I wrote a whole thing to like, spit out like, Mario tonight and stuff like that. And yeah, it was so much fun. And I missed, kind of miss those days. So we do have audience questions. First of all, Savannah asks, love the presentation. How do you go about picking your next project?

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