Hasty Treat - 300th Episode Tech Chat

Monday. Monday. Monday.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest TS, web development treats coming in hot. Here is Wes, Barracuda, Boss, and Scott, El Toroloco, Tolinski.

Welcome to Syntax.

And this Monday, hasty treat, we are going to be doing a rundown of our 300th episode talking about the tech that we use to make it happen and some of the behind the scenes stuff that allowed us to do what we did, which was invite You on to talk to us in the middle of a live stream and how we organize that. Now who are we? Well, my name is Scott Lewinsky, and I'm a developer from Denver, Colorado. And with me, as always, is the Wes Bos. Hey.

Wes,

what's up, dude? I'm I'm very I I just Spent the last couple days working on the, transcripts for this podcast, and Yes. Every every single time I say something like, hey.

I'm like, oh, man. The transcript's gonna goof that up.

You're gonna you're yeah. We're gonna have to start, tweaking how we talk, giving a little bit more Gap, I'm gonna start speaking with a little bit more, Scott flavor to try to try to steer it in that direction. That's good. Well, you were working on a neat, awesome feature for this New syntax website, it might have been a good use case for you to institute something like LogRocket, which is one of our sponsors today, where you could have seen if The transcripts were breaking when somebody tried to load the page because what LogRocket does is it gives you a Session replay of your errors and exceptions.

This is a really cool service that, has been sponsoring syntax for a long time now, and The 1 on 1 to check out logrocket.comforward/syntax to check it out. You'll get 14 days for free, and what you'll see is a session replay, which CSF. See scrubbable video with the network requests, all the error logs, and anything you could possibly want to help you discover any bugs you have when you're rolling out a new feature.

Really love this tool, so thank you so much for LogRocket for sponsoring syntax.

Alright.

So before we get Into maybe what we used, we should maybe do a quick rundown of the things that we tried first. And I I don't wanna say this came together at the last 2nd, But we certainly did not uncover what would be the final workflow for this 300th episode until just about the day before, I I would say. We had tried and talked about a bunch of different stuff. So do we wanna start there? I asked on Twitter like, hey. Like, we want to be able to

record the podcast, But also have people, like, call in or Zoom in or something like that. So I went on Twitter and I asked, like, what are options out there? And It's kinda interesting right now. We're seeing a lot of start ups and new companies that are the Zoom for x, y and z because, like, even though Zoom is is good, it doesn't, like, work for a lot of specific use cases, like, for conferences and and things like that. Right? So The most common suggestion we had was use Zoom breakout rooms. So you're allowed to enable breakout rooms on Zoom, and you can Jump into other ones, and it was not perfect. And, like, everybody's like, yeah. That's the best solution.

But when Scott and I tried it, it's just Scott and I. And when we both went to the breakout room, there was no way to go back into the main room because, like, we both left, And there was no way to, like, bring people in and, like, know who was in the other room. You couldn't be in 2 rooms at once. Mhmm. So it just wasn't an option unless we were to have, like, a third person Who was, like, full time in the room and then sending people over as we needed them. It actually didn't work out at all for us, so we we scrapped that 1 as well. Other people suggested Hopin, which is super expensive. StreamYard seemed to be another good solution, But we ended up just I I I think I tried, like, 3 or 4 of them, which just sucks because now I'm part of all these, like, onboarding email sequences.

Chicken. Did you get our last email? Yeah. Oh. We see yeah. Learn how blah blah blah makes you money. You know? I I hate those Yep. Onboarding sequences. Anyways, so none of those worked, and we ended up just going with Discord

and using Discord chat. So you wanna jump into the how you did that? Yeah. This was fun because I've been on Discord for a little while for the level up tutorials Discord, that we originally had on Slack, but I always kinda got annoyed that, You know, at the time for I mean, I think they have this now where you can just sign up and log in. But to do user just to allow people to create their own Count by default in Discord was the default behavior rather than with Slack I had to fire up by app on Heroku to have a login form that was, like, inviting people. It was it's just so dumb that that was the way you had to do it on Slack before. But so we we've been on Discord for a little bit, and the Discord, allows you to do AV or audio and video rooms where you can do video chats. And this is actually how we do all of our meetings via Discord. We just pop into Our level up team room that we all have permissions for, and we just start chatting in there via via video. We can screen share and whatever.

So we thought this might be a a decent option because we could have a room that we could control the access to. Right? You have an AV room, and then based on a user role in Discord, you can give people access to being able to join this room. Therefore, you could say, alright. So and so is now live. Now they get the live role. They can then see access to that room. They can click it and join it and essentially all in without having to really do too much other than join a chat room. So that was really the right workflow to me.

Yeah. It was it was pretty seamless. And even, like, I thought it was really neat UI when I would just click on your your name, like, The the convo that we had just between us, and then it would immediately flip on the mics, and, like, there was no calling or accept or Oh, yeah. Add to like, The thing that drives me nuts about Zoom is I will call Scott. I'll press the call button.

Scott will get in, and then it will it'll do a pop up that says, Do you want to allow Scott in? I'm like, of course, I would like to let Scott in. I just wanted to him. Yeah. So Zoom is is frustrating that way. And that could even be a future way that we end up recording syntax.

Although Zoom does have some nice features where it has, like, a backup recording and stuff. Yeah. The backup recording is is pretty Pretty clutch.

For for syntax. But, yeah, it's it was a really slick experience.

So while we're doing it, also, we got tons of questions about, like, Slack versus Discord. And, obviously, Discord is way better, especially for communities. I think, like Yeah. Slack has sort of, like, turned its back on communities because I don't think there's any way for them to Make a community thing that works for 20,000 people, but also maintain their very lucrative Teams.

Per per person in the team. So I'm still on Slack. A lot of people ask me, like, why don't you move to Discord? And I have 50,000 people in my Slack room, and I can't just, like, Switch over. Just pick up and walk over to Discord. Yeah. Just pick up and walk over. And, like, that's like a a significant asset to me as well is having these people, And there's no way everybody would move over, so you would lose a lot of people that way. Mhmm. But, like, the UI, everything about about Discord is is much better, Which which is pretty cool. I'm I'm a big fan of it, especially, like, all the the video calling and whatnot. Just for, like, my sake, I'm not gonna move from Slack to Discord because That's just chat to chat. I'm holding out for something that's like a mix of, like, the real timeness that you get with A chat, but also the longevity that you get with a forum. And I also have, like, years of backlog in Slack, So my messages don't go away immediately.

So that's not not an issue for me. That's the sort of the the downside to a lot of these big Slack communities. But, Yeah. I wish that Discord would make some sort of, like, chat based form software as well because, like, I was really hopeful for Spectrum.

Yeah. Which went went nowhere. That got bought by Google and sorta it sorta flopped. I I don't think they're working on it early anymore.

Yeah. They got Microsoft did.

No. It was bought by Microsoft. It was bought by GitHub, which got bought by Microsoft. Yeah. Same thing, I guess. Yeah. Well, I mean, you said it got bought by Google. I was just clarifying. Did I? Oh, sorry. Not Google. No. No. By GitHub. Different g company.

Different g company. So that's this question I get all the time, why don't I move her to Discord? Because there's not it's not worth it for me just yet, but definitely like it. I know. Yeah. Yeah. Spectrum is a classic example of why you should wait a little bit because people were like, everybody gonna get on Spectrum, and then everybody got on Spectrum, and they're promptly like, No shade on Spectrum here, but, like, whenever I use Spectrum, I feel like it hardly functions nowadays. Like, I have to Yeah. Refresh the page several times, and it's very frustrating for me. The other thing I get from and this isn't maybe it maybe it's part of the tool. But the other thing I get from Spectrum when I post something, I just get this feeling that nobody's gonna reply.

It's an empty yeah. Yeah. It's it's sort of like filling out a contact form on, like, a sketchy business website. I'm like, you're not gonna you're not ever gonna get this. I just get that feeling from it, Which sucks. And when you jump into a chat room, you can see that there's people there, and that's why I like the the real timeness of chat, But I also like the longevity of threads on, on something like Spectrum or GitHub discussions. That that one's looking pretty good for, Next. Yeah. So I'm a big fan of that lately.

Yeah. I think another big thing with Slack versus Discord is that Discord, by default, you are subscribed to every room, or Slack, You have to, like, hunt for the rooms you want to subscribe to. Yeah. And in Discord, it's like, here are all of the rooms, and you can participate in the ones you want to participate in. And that to me, it feels nice. I like the the folders and everything for rooms. I know you can do that in Slack, but, Discord for me feels like they have way more programmatic capabilities in terms of, like, oh, welcome to this room. You know, click this emoji to get access to this showing that you've read the rules. You know? So, like, stuff like that to me is very interesting. Super good. It's much more interesting than, like, Slack bots. Because, like, all we ever did with Slack bots, To be honest, was, one of the guys on my team wrote a macho man, Randy Savage, Slackbot, and, like, who's, like, programmed to do several things, But you would say elbow drop and then somebody's name. Then Randy Savage would pop in with his little icon, and it'd be like, Randy Savage Picks up Estolinski and slams him through the table. I'm like, that's all he did. It was like, that's what we do. It's like it's like fun, but it's not exactly that useful.

Okay. So next up is the live streaming setup. What do we do for live streaming? Now I don't love OBS is, open broadcasting software, I believe is what it's called. It's a It's an open source project, but I use a version which is like a paid version of OBS, which has a bunch of more features. It's called OBS Streamlabs, and it recently became a Mac app. It used to only be PC. I use this because it includes a bunch of templates. It includes a bunch of extra features, but the big feature for me that it includes is, like, a really easy way to stream to multiple sources at once. I think it was, like, Up to I don't know how many. I think up to 3 because we were hitting our limit pretty much. You you maybe can either do 3 or 4. Either way, This allowed us to stream to a whole bunch of different places at once as well as, sort of have a waiting room where people could Join and had, like, a looping animation, which we'll talk a little bit more about how I made. We had, like, a looping animation that could do a countdown clock. The countdown clock was made in OBS.

Once that countdown clock hit 0, we went live, and, you know, OBS is is one of those softwares that you really have to spend some time with because it's It's like missing so many basic pieces of normal functionality that you're used to in normal web apps or normal apps in general. So, like Yeah. If I want to click something or if I want to have a source fit the output screen size, you have to do all of you have to jump through a bunch of hoops. Yes. You could do transform, or whatever, but you can't even zoom out of the canvas. So let's say, like like in Figma, you zoom out of the canvas to shift handles and whatever to make things the right way. OBS, if you drag your handles beyond the canvas, you're just you you have to, like, start over or position it manually because you cannot zoom out of the canvas.

That drives me nuts.

Yeah. It's it's kinda like the the VLC of

streaming. Like, it's it's free. It's open source. It under the hood, it does everything, but it's just the the UI layer is kinda meh. Yes. And even the pan fancy paid one is is just like a in on top of it. So it it's it's not great, and people who really like OBS, I mean, they like it. And I have such a hard time with that because to me, it feels like such a half baked software. It is open source. So, I mean, it It it's okay. So one last bit. We did a screen capture. So I did a breakout of the Discord Window, the the video chat, I broke that out into its own window on my desktop.

And then instead of Telling OBS to use that output, I told the OBS to do a screen capture.

Why? For some reason, Both on Zoom and OBS, the output was really choppy when you chose, like, the native video output rather than doing a screen recording. It was like You lost major frame rate edge, so, I chose to do it as a screen capture,

and that seemed to work just fine. That's an another thing about Discord is the output, this the little rounded corners, nice little bit of padding.

It just looks so much nicer than Zoom where it's just Squares, borders, big Zoom logo in the bottom right hand corner.

So Yeah. Yeah. I I thought that Actually looked really, really nice. And luckily, you have, like, super good Internet, that you're able to push it because then we took that That feed, and then you were pushing it from your computer to my YouTube livestream, your YouTube livestream, and into Mux?

Yes. And and Twitch or just just smux? Oh, yeah. And Twitch. So, no, we had 4 streams going. I have 3 sources, but, no, we had 4 sources going,

Which is, yeah, that's pretty wild. It it worked well. It seems silly to, like, double up on YouTube, but both Scott and I had there was, like, Pretty active chat room in on YouTube for both of those, and then we also had the chat room in in Discord, obviously, in which It was kinda interesting because, like we said in the description and in the chat, like, join the Discord, chat room, but there was just, like, Probably a couple dozen people in both YouTube chats that just decided that that's where they were going to talk about talk about it, which is cool because, like, that that's my A big thing that I think of is, like, don't push people to different platforms. Like, just meet them meet them where they're at. Right?

Yeah. And that's actually one of the things that Streamlabs OBS does really well. So one of the neat features that Streamlabs has is that allows you to See all of the chats for both YouTube and Twitch as an aggregate.

And, like, then you don't have to have all those windows open. You can see all the chats. And if you need to respond to think you could do it there too. So we pushed to mux. I'll talk a little bit about the mux setup. So how did we get our mux setup, which was at syntax.fmforward/live.

We had a video player on the live site of the or a live page of the website.

This was really easy to build. So if you are interested in doing your own live streaming on your own platform and not having it be on YouTube or something like that, this lives On mux, and we actually I don't know if you know this, Wes, but it actually did a live DVR recording of it as well as we did it. So This video doesn't just exist on on YouTube permanently. It exists on Mux as well in case we ever want it. So mux.com, this they are not sponsoring the show. I use them for my video hosting myself. And what how do we do this? Well, you can do this programically, but I created a new live stream via their UI Because it was just easy to click a new live stream button rather than try to write some code to do it. Right? And that basically gives you an address and a key, a stream key. So that key is private. You just paste basically paste in that address with your key into Streamlabs, and that's a a video source now. And that's just my Mux source. And then next, basically, we had a h l s m three u eight stream address from Mux, which is the, we we did a whole episode on video format, so go back and listen to that episode if you wanna learn a little bit more about that. But HLS is an interesting format. It's basically what any sort of live streaming is done with nowadays, and the problem with that is is that it's not compatible in every browser. So I found this really neat React hyphen HLS hyphen player that is just going to play any HLS file On any browser, polyfilled so you don't have to worry about it. It just works. Right? So I basically just dropped in the HLS address into this React HLS player as if it was a standard video file, and that would just do its thing. And so that that's really as easy as it is. When we click Stream live or whatever. The the player allowed people to play it and watch live, and it was basically just like a straight up video file.

Next is the looping intro introductory video. So, like, when you were to arrive early, I think we had this going, like, a half an hour early. There was, like, a countdown clock, And there was a looping video with some music. So I made this looping video in principle for Mac, which is a prototyping software, but I use it to do all of my video animations.

It's kind of like after effects light in some sort of ways. So I basically I created the the looping animation frame in Figma, then I told principal to import it. Then I made a looping animation, and then I exported it as a video, and m p 4, and then I told OBS to just loop that m p 4 as one of the sources. I also had some music underneath it, which was a song I made called Lotus frog 64. I made it a couple years ago, and I think if it really, really neat, it was kind of digitally, that kind of thing. So that just that just, had it going for whatever 30 minutes before we started, and The last bit of this was the countdown clock, which I did mention briefly. The countdown clock was interesting because it was basically just a Streamlabs plug in that somebody else Already made for me, and I was able to click add countdown clock. I gave it a time to countdown to, and then I changed the font and dragged Get where I and that was that's how easy it was to create the countdown clock. I didn't have to do anything fancy as in somebody else already wrote this. I even considered writing my own script at one point to do the countdown clock, and I was just like, that's dumb. Everybody's doing the countdown clock. Like, why would I why would I do that myself? So,

yeah. Next one we have here is just recording the actual audio. So usually what Scott and I will do for the podcast is we both record our audio locally.

That way, it doesn't n. Anytime the Internet glitches out, you don't get that lyric where the or whatever sound that is.

And, also, on Zoom, Specifically, you'll you'll often hear people's audio.

Like, it drives me crazy when I listen to a podcast, and you can clearly tell that the audio is recorded on Zoom because it's Little bit. Right? I don't know. There's just like a tinny robotic sound to it, and Zoom also tries to add a bunch of, like, noise canceling To it, you can tell because when when someone talks, the fall off on the audio

just from, like, the last the last, like, syllable of what they're saying sort of goes down. It, like, crunches out. Yeah. Yeah. I don't don't like that. This is I'm awful at describing how audio stuff works. It just sounds awful. That, like, hollowness in sounding when when you hear, like, an audio that sounds That it's called a low bit rate, and it's basically, like, every you could think of, like, audio digital audio. When you have Analog audio, it's a wave. Right? Yeah. But in digital, it's it's, like, vertical chunks of data vertical chunks of data to make up that wave. And the low bit rate is how many of those chunks exist. So if you chop out some of those chunks, then it feels Like, there is there it's more hollow. There's not as much information there for it to get that smooth

way that you're used to. That makes sense. And so what I ended up doing is because Scott had such a elaborate setup on his end, he couldn't just get A a clean stream of his own audio. And then, also, we needed to record the gas as well, which their audio was only on Discord. So what What we ended up doing is I recorded all of the audio on my computer. So I have my own microphone being piped into 1 1 recording.

And then I took The output from Discord, which was Scott and the guest, and that I piped that into What is that? Loopback? Loopback is an interface that allows you to create virtual audio inputs and outputs.

So I took Scott the output of Discord and put it in its own, Like microphone. I'm using air quotes here, and then I recorded that straight, from it. And luckily, because Scott's Upload is so good, and my download is pretty good. It's it sounded great.

And, we also could record the guest as well. So the only downside there was that Scott and the guest We're on the same track, which can be a little bit harder for our editor. Shout out to our editor who had to edit that that Behemoth of an episode. It was, like, 2 and a half hours of raw Yes. Audio, and that was it. So it worked worked really well. And then we also had the YouTube stream and the mux thing just in case. We always like to record a backup because stuff happens, and a few times we've had to use our backup. Yeah. One one thing I do wanna say here is that Loopback,

My wants to use future tech kinda bit me in the butt because I've been on big survey data for a while, like, for a wet long time, and it's worked pretty fine. But one of the Software that doesn't work for this loopback, which just so happens to be, like, the thing that does audio routing for Mac OS, and this is like, oh, shoot.

And so for I think up until the actual stream, I was panicking that I wasn't going to be able to get the audio routing on my end working correctly, but I ended up using an open source tool called Black hole. So Google Black hole macOS, and it wasn't easy to set up, and it wasn't necessarily easy to make sure I got it right. But Once I got it right, it it just worked and basically allows you to throw all of your audio sources and inputs into a, quote, unquote, black hole and then pull them out of a black hole later on somewhere else. Doesn't have any sort of nice interface like loopback, but it saved my butt because it worked on Big Sur While Loopback was getting their stuff together, I think they do have a macOS Big Sur version now. But at the time, they didn't, which is, you know, convenient for us. I think that's it. So what seemed like a very

flip on your webcam and start going ended up being a big, like, wow. This is not necessarily A a thing, right, where you wanna bring people on and screen them and record the audio and and the video and stream it all. So, like, there's definitely still, I would say, like, a space for this type of thing. I know there's a lot of audio apps For podcast recording, I think it would be really cool to see something like this, also for video that allowed you to have chat and Bring people on.

That was it. It's kinda interesting because at at the very high level, it seems like there's tons of options and tons of really easy ways to do it. But with, like, a lot of things, once you get into the nitty gritty of it, you realize like, oh, wow. This is not as fleshed out as as we had had thought it would be. It just so happens that when you have, like, very specific wants and needs that, like, you have to find some some somebody else who has those very other specific wants and needs Already. And who made that software?

And it's just not, always there when you're expecting it. So, yeah, I thought this was a lot of fun, and it was very stressful for me because, again, there's So much routing through my computer. So I didn't mean there was there was a lot routing through both of our computers, but, everything worked, and it was really pretty it was really pretty neat. I was really interested and excited to see just how easy it was to get our own custom live streaming setup going, with Mux and, Our own website, it was very, very easy, and, that gives me a lot of really interesting ideas for stuff that I could do. Did you know I bought the domain level up dot live? That's a good domain,

Yeah. Yeah. That's really good. Not even level up, Todd. It's level up dot live. I got that info. That. That's good. Yeah. Yeah. Yeah. We did. A lot of people said they loved it. They they would love to do it again. It was really cool to have, like, people from the audience just jump on. Surprising, a lot of people had really good microphone setup, so the audio and video was very good.

I know. If we would've done this before, COVID. I don't know if that would have necessarily been the same case. It's like seems like everybody got a neat setup. Not enough to not to say that the people who called in did for that because I know a lot of a lot of people who called in have their own YouTube stuff and whatever, but it it is fun. Everybody had a really neat setup, and it all all worked really well. We definitely should do it again

maybe for episode 350.

Oh, yeah. 350. Like that.

Alright. Let's plan that. 350. That should be

next week. I think it's, like, next week. Yeah. That's, like, June or so.

Alright. That's it. Anything else to add, Scott? Nope. Alright. Thanks for tuning in. We'll catch you on Wednesday.

Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows, and don't