983: Why I Chose Electron Over Native (And I’d Do It Again)

Wes and Scott talk about building v_framer, Scott’s custom multi-source video recording app, and why Electron beat Tauri and native APIs for the job. They dig into MKV vs WebM, crash-proof recording, licensing with Stripe and Keygen, auto-updates, and the real challenges of shipping a polished desktop app. Show Notes 00:00 Welcome to Syntax! March MadCSS 02:28 Why screen recording apps are so frustrating 07:14 The requirements behind Scott’s app, v_framer 09:47 Tauri, WKWebView, and blurry screen recording headaches 13:00 Why switching to Electron was a game changer 14:02 Electrobun and the hybrid desktop experiment 16:29 Browser-based capture vs native APIs 18:50 Brought to you by Sentry.io 22:32 Notarization, certificates, and shipping a Mac app 24:52 One-time purchases, trials, and selling desktop software 26:37 Self-hosting Keygen for license keys 30:27 A scrappy Google Sheets-powered waitlist 31:56 Keyboard shortcuts, FPS locks, and app customization 34:50 CI/CD and painless auto-updates with Electron Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:00Wes Bos?

  Real quick before we get going, we are launching a new video series called March Mad CSS. It's a CSS battle tournament with 16 of the world's best developers. Josh Komu, Chris Koyor, Adam Wathan of Tailwind, Cassidy Williams, even Scott and I. Now, we have a ton of prizes to give away. And if you want to win, go to madcss.com and you're going to fill out the bracket. So madcss.com, login with your GitHub and you're going to pick who you think is going to win each of these. And whoever gets the highest score is going to win this amazing prize pack. Like this sick CSS jacket. You can also order this from the website as well. We've got some pretty cool merch, some tees, stickers, and now Gene, first, second, third prize.

• 0:44Wes Bos?

  Go to madcss, make your picks. You can share them with your friends. You'll probably win. Peace.

• 0:49Scott Tolinski?

  Welcome to Sy... Oh! I'm not giving my water. Too much. All right, let's try that again.

• 0:56Wes Bos?

  Emphatic. Welcome to Syntax. There we go. I'll do it for you. How about that?

• 1:01Scott Tolinski?

  Oh, yeah. It's so funny. I like to get, I like to get big and it's not really conducive to having water. You know what, Wes? Have you ever spilled water all over your stuff before at your computer?

• 1:14Wes Bos?

  Yeah. It's part of the reason why I keep my laptop on a stand all the time. Because one time, many times I've dumped water, especially on my keyboard. But one time, one of our kids dumped water on my wife's MacBook and just fried the whole thing. And luckily, our credit card insurance covered the entire thing and they bought us a brand new one. But man, yeah, I'm so scared of that type of thing. I don't mind a keyboard getting, getting drenched, but not a, not a laptop.

• 1:44Scott Tolinski?

  I've never, yeah, I've never, for as much as my nickname growing up was the King of Spills, and I still do spill occasionally, and I have never spilled liquid on my laptop. Not soup, not drink, not anything. And that is shocking. Yeah. Oh, yeah. And my, my computer's also on risers though, so if I did spill, it would have to be a pretty tremendous spill. There's no app for that, but I did make an app to solve my video feed problems. And we're going to be talking about Electron apps, we're going to be talking about Tori apps, ElectroBun, desktop apps with web tech, and the choices that I made to get this app up and running in this episode of Syntax. What's up? My name is Scott Tolinski. I'm a developer from Denver and with me as always is Wes Boss. What's up, Wes?

• 2:28Wes Bos?

  I am stoked to hear about this because this is something we've been complaining about that we've wanted for so long and it's just the tech behind how to do it. Like I know you've taken several stabs at it. I vibe coded something similar at one point and it's just like every, there's lots of apps out there that do what this does, but just we've tried them all and they're all extremely frustrating.

• 2:53Scott Tolinski?

  They're all very frustrating and I, yeah, so the long story short, I built an app to solve my biggest needs of wanting a professional video recording app for my computer that doesn't do too much or not enough because the way most of these things work, there's a ton of them out there, uh, screen capturing and it's like usually you can record a screen, maybe a couple of screens. You can maybe record your camera and audio, but the ones that allow you to do the stuff that I needed to do, i.e. uh, choosing as many sources as I want. They then tried to do too much by

• 3:31Scott Tolinski?

  shoving proprietary formats, uh, crappy video editors, bad automatic features, stuff you don't need in addition to this. The way that I like to work is I like to record a whole bunch of sources, whether that is individual browser windows or screens or several different audio or uh, several different video sources all at once. And then I like to have all of those as independent individual files that I can just drop into my editor. You know what's crazy? There's, there's like, I could go through the list of all the apps that are in the same realm, but don't do this. But like ScreenFlow, you can have as many sources as you want, but then

• 4:15Scott Tolinski?

  they, they spit you out into their editor and everything's in a .screenflow wrapper that you can't even get the files out of.

• 4:21Wes Bos?

  Yeah, there, I, I actually looked into it. I like, I found their CLI and like, Tried to figure out how to get the files out and they're, they're literally storing them in like a SQLite database and they're storing, there's a, they're storing everything in there, the, the frame diffs, everything. So it's not even a, like a file that you could get out of there. It's, they're just, they're storing raw blobs of data in there. And then ScreenFlow is by far, as, as much as I hate it and it seems to be abandoned right now, it is by far the best actual recorder. Except like I'll use it for like an hour where we're recording with like Randy and then I gotta export my screen. That takes maybe

• 5:01Scott Tolinski?

  Hour.

• 5:01Wes Bos?

  Forty-five minutes and then I gotta export my, my camera. That's another forty-five minutes, you know, and it's, it's just too slow for that type of thing.

• 5:08Scott Tolinski?

  Yeah. So that's another concern is that a lot of these things, even after you record, one I used to use was called, oh, what was it called? It was by, it was I Show You. And the reason I liked I Show You is because it did essentially this. The only problem is, is that the end of a session, it would then automatically do the processing. And that processing, you, you'd be sitting there waiting like forty-five minutes. So if you wanted to record multiple things in a row, maybe deal with the processing later, you were waiting all this time. So the requirements for me is that it had to record all of these sessions, or all of these different screens and everything as individual sources that I could then use in my editor of choice.

• 5:48Scott Tolinski?

  It also needed to not have that processing time because dang, I got better things to do with my life than to sit and wait for my computer to process video. Not only that, that processing time is largely unnecessary. The reason why that exists is because typically these things are converting into a format like MP4, MOV, which like, why? I didn't necessarily understand the need for that. So if you've ever used OBS to record, you'll know that it can record to MKV and MKV. You don't have any processing time in that, right? It's just recording to an MKV and then stitching it all together at the end or whatever.

• 6:28Wes Bos?

  It doesn't even stitch it. The MKV file itself is, meaning you can just continually add to it. And then if it were to go corrupt or break or something like that, you wouldn't, you wouldn't actually use it. There's no like ending process as far as I know.

• 6:41Scott Tolinski?

  Yes.

• 6:42Wes Bos?

  You're simply just tacking on.

• 6:43Scott Tolinski?

  And that was another thing. So the ending process or corruption is another requirement I had was that if the app crashes for whatever reason, I cannot lose footage. I should be able to reopen the app and start recording again, and I cannot lose footage. So those were like my main requirements. I've lost too much, too many video recordings to OBS taking up so much memory that my video stutters, screen flow or other things crashing or just straight up having to sit and wait. So those were my main requirements and this app tries to solve all of those things really. And I think it does so quite successfully because we record as MKV.

• 7:24Scott Tolinski?

  Again, if it crashes, you not only get, you get each individual raw session file right now. So they're currently stored as WebM as it's recording in individual segments. And I'll, I'll talk about the technical decisions for some of this stuff. And then they're put together in an MKV afterwards. But again, that doesn't take any processing time. In fact, the only processing time happens is stitching together the audio and turning it into a WAV. And I actually got around that at one point by using MKA as the audio format, but like nothing supports MKA. Like not even DaVinci supports MKA, so I had to move.

• 8:01Wes Bos?

  Yeah. Let me ask a question there. So you're, you're recording to WebM likely because it's like, we'll talk about the tech, but because it's coming off the browser, right? And that's what it, that's what it supports. But then can you, you do have to convert it from WebM to MKV, no?

• 8:17Scott Tolinski?

  It's just stitching it together is really what it is.

• 8:19Wes Bos?

  But like that's, that's processing, is it not?

• 8:22Scott Tolinski?

  It, it takes.

• 8:24Wes Bos?

  Really?

• 8:25Scott Tolinski?

  You don't see it. Yeah.

• 8:26Wes Bos?

  It's very, very fast.

• 8:28Scott Tolinski?

  Takes, takes in entirely in audio processing.

• 8:32Wes Bos?

  Okay, awesome. And one more thing we should say here is that something that I've been trying to get into and trying to do for last year or so is, is instead of recording screens, like recording your screen is great, right? But what's, what's even better is recording, if you want, you can record the apps themselves. And that's great because if you tab away from something, or if you don't show something for a second and you realize, ah, I kind of wanted to show the browser, or I wanted to show the terminal at the same time, but they weren't on the screen at the same time. They continually record and you can just like, you can zoom them in and whatever. You have all of the individual sources. It's kind of a, sometimes it's nicer to just record your single screen and whatever you put on the screen gets recorded. But other times, especially like when I do TikTok videos or whatever, it's nice to

• 9:17Wes Bos?

  have the individual tracks of every single app. And then you don't have to worry about accidentally hiding something.

• 9:25Scott Tolinski?

  Yeah. Yeah. And what's so cool about this too is, is like the fact that I'm not hiding anything in proprietary wrappers means that like at any given point, you can like, if it crashes or whatever, again, you can just open the framer and click reprocess. It's going to spit out whatever it is as the completed file. So if you don't have that end of session cleanup happen, there's no data loss, which is like, which is big. So those were the, the choices. And when I first started this app, I started it in Tori, which is the like desktop app framework. We've talked about it on this show. Tori is interesting because it uses the built in OS web view.

• 10:07Scott Tolinski?

  So on macOS, that becomes WebKit web view, which I'll talk about why I moved off of Tori. It was because of that. But also it has Rust instead of TypeScript or JavaScript for the app side of things.

• 10:24Wes Bos?

  The backend, right? Like your, your UI is JavaScript and HTML CSS, but your, your actual backend logic or like is, is Rust versus like Electron where that's, it's node code.

• 10:35Scott Tolinski?

  Yeah, so I had initially started this with Tori and I first initially ran into issues that totally sidelined me from working on it because at the time I just didn't want to convert it to Electron and I was just annoyed by it, so I just quit. And that was that the WK web view did not support the dialog for media recorder, which is crazy because it supported the ability to use Git user media, but the dialog that pops up that allows you to select the screens, that did not exist in WK web view. So it would just be like, eh, your permissions aren't set. It would just like fail on a permissions issue, even if it wasn't a permissions issue. So like, that drove me absolutely nuts.

• 11:18Scott Tolinski?

  And then, that got fixed at some point in Tori. They did something to fix that. And I got past that point with Tori at that point and was like, okay, great. I can now record all these screens. And I recorded and no matter what I did, Wes, the end results were coming out blurry. And it was so frustrating because it didn't look blurry in the preview and it was just screen recordings. So my video looked great, but the screen recordings were blurry. And I couldn't figure out if it was something with my process or what. And it turns out Safari like doesn't give you the retina resolution of screen recordings.

• 11:59Scott Tolinski?

  So I did all this work, I got like, and all of a sudden it's like Safari is screwing me again by not giving me high resolution screen recordings. And I will say, there's a reason why I went with this type of web tech instead of like trying to do everything in a native way. And some of that was is that the Rust ecosystem for that wasn't mature enough or not good enough. I ran into all kinds of crazy file size issues and all sorts of stuff. And maybe it's a skill issue there, but like Git user media is great because it has the ability to say, hey, which screens, which sources, all this stuff. Click them, click them, click them. Those are the sources.

• 12:39Scott Tolinski?

  And then basically send those along as small, small chunks of data to the server side for processing. So there's nothing inherently wrong with using Git user media for this as opposed to like Apple APIs or something. But Safari, man, just that that resolution thing killed me. And it was so actually annoying to figure out that that's what the issue was, to be honest. So at that point, I decided, you know what? Screw this, I am going to Electron. And my gosh, that's the best decision ever. Electron gets a lot of heat for reasons why I think people just like to hate on Chrome. One, that's a thing. People don't like Chrome. It does use memory. But also, there's a lot of crappy Electron apps out there.

• 13:23Scott Tolinski?

  So oftentimes, people have been using an app that uses a lot of memory. And they're like, oh, it's Electron, therefore it sucks. But like, I think VS Code has shown that a nap can be Electron and still be performant. You know, if VS Code is slow, it's because of extensions, not because of VS Code, right? So I moved to Electron, which was painful, and it was a process. But after I got it into Electron, just about every... That was the thing that set this from being like, oh, this is just something that I'm working on here and there to, oh, this is a thing, this is a tool I can actually use and get out there to the world. There's also a new thing called ElectroBun, which, let me pull up ElectroBun.

• 14:08Scott Tolinski?

  Where did I have that tab? ElectroBun is very new and did not exist when I made the transition to Electron. But I probably wouldn't have chosen it anyways because it is too fresh. And I got so burned on the Tori thing that I was like, ah, you know what? I need something mature. But ElectroBun tries to do a little bit of a hybrid approach. It uses, ah, it uses all kinds of interesting stuff. And one note here is it does use the default web view out of the box, which in this case would be Safari on macOS.

• 14:49Scott Tolinski?

  And I tweeted about that being a bummer or like a hard thing to work around. And you can use Chrome in this. I acknowledge that you could use Chrome in this, but the creator of this still got upset that I did not say that you can use Chrome. I don't think having-

• 15:06Wes Bos?

  You can switch it out.

• 15:08Scott Tolinski?

  Yeah, you can switch it out. I don't think having the native web view is a sell. I'm gonna be honest with that because the native web view being different browsers with different capabilities on each OS or even version of OS makes testing, predictability, everything a complete nightmare with Electron.

• 15:26Wes Bos?

  It's almost like web development.

• 15:28Scott Tolinski?

  It is like web development, but to an extreme sense because you're dealing with like a lot more APIs that can write files and do all kinds of stuff.

• 15:37Wes Bos?

  You're using the like, the lower level APIs that are like accessing hardware and even like one example would be like, what if you needed Bluetooth for this? You know, what if you wanted to connect to a Bluetooth mic directly from your app? You wouldn't be able to do that in Safari, right? Because there's no APIs for that.

• 15:55Scott Tolinski?

  You couldn't do MIDI either, which is like, so to me, I'm like, it's gotta be one browser predictable and it has to work. There's a Bun API for this. I haven't used this, but it looks neat. Again, it's very fresh and I'm sure there's a lot of great things about it. But again, I, yeah, I think I'm gonna stick to something maybe a little bit more established when I'm doing this stuff. And like I said, I think Electron gets a lot of hate, but man, my experience with Electron and building in Electron has been very positive overall. Yeah, I was enjoying myself.

• 16:29Wes Bos?

  So my question, and I'm sure you have an answer. People are probably thinking this right now, is so you're capturing all of this media in the browser and then you are using the browser to like take those chunks of data and sending them to your backend, which you're saving them and then at the end of it, you put them all into an MKV.

• 16:48Scott Tolinski?

  Yes.

• 16:48Wes Bos?

  If you already have some process running natively on the user's computer, why not just use native APIs for this? You know, like there's a whole set of new Swift APIs for recording the screen. There's like Steve Ten, I don't know how to say his last name, Tenuto. He has frame cap, which is like a CLI for recording, right?

• 17:11Scott Tolinski?

  Yep.

• 17:11Wes Bos?

  Like, why not just use like native APIs and take the browser? Like, the browser can still be a UI to click the buttons and whatnot, but like you have to put everything through the browser now. Um, and in my experience, I have some issues in Chrome where it like drops frames and it's a little bit weird.

• 17:27Scott Tolinski?

  Yeah, so I will say, reason being is that I wanted to, I didn't, I didn't want to get into cross-platform messiness there. Like, I would love to release this on all platforms. There's nothing that would stop me from, from doing that.

• 17:41Wes Bos?

  Yeah.

• 17:42Scott Tolinski?

  Because what does this use? It uses the browser to send it and it uses FFmpeg to, to do any, like, there, there's nothing inherently Mac OS-y about this. And the last thing I wanted to do was, was have to start, you know, building deeply into different OSs. When, in my experience, and I will say, several of the videos that I've released on the Syntax channel and my personal channel have been recorded with this. And I've done hour-long sessions or whatever in this, and I'm not seeing any frame drops. I'm not seeing any crazy memory usage. I'm not seeing any performance issues. So for me, like, the proof in that I didn't need to go there was simply that it worked.

• 18:27Scott Tolinski?

  Um, that, that was it for me. If it didn't work and I was running into issues, then I would have absolutely changed that approach.

• 18:34Wes Bos?

  Yeah.

• 18:35Scott Tolinski?

  But I think the thing is, is that I'm not recording into the browser, you know? I am, I'm not saving files into anything into the browser. I'm simply just capturing those chunks and then hot potatoing them immediately to the backend code. And if you want to see all of the errors in your application, you'll want to check out Sentry at sentry.io/synthesis. You don't want a production application out there that, well, you have no visibility into in case something is blowing up and you might not even know it. So head on over to sentry.io/synthesis. Again, we've been using this tool for a long time and it totally rules. All right.

• 19:15Wes Bos?

  Yeah, yeah, that makes sense. And like, as long as it works, right? Like, I've tried so many things in the past. Like, I have this obs.wesbos.com. Like, I built an entire UI to control. There's a plugin for OBS called Source Record. And that allows you to record multiple sources. And it's so obnoxious because you have to add all these scenes and they have to apply a filter to each one. And then you have to turn them on and off. So I built a whole UI that will like, connect with web sockets and it will send screenshots because that's a big thing for me is like, I want to see what it is I'm recording. I want to make sure that it's actually grabbing it, right? Like, you showed like a little preview of it there. That's super important. But then I built a UI that would turn them on and off

• 19:58Wes Bos?

  and start and stop the recording and it works great. But sometimes it doesn't because the Source Record plugin is this like add-on thing to OBS. And it can just, it just spins out of control. It uses a ton of, ton of memory. Sometimes it doesn't work, you know? Like, it's just random bugs. And like, there's, I don't want something that will sometimes not work. Because you're losing data, that sucks, right?

• 20:22Scott Tolinski?

  Right. Losing data sucks. And like, that was the big thing is it needed to be fault tolerant here.

• 20:29Wes Bos?

  Yeah, like, I want to see that these files are climbing. And if they're not, you should, something should be. PolyCapture, that was the one. I tried that one as well. And that one is a pretty good native macOS app. But again, like, the UI, I didn't love. And then we did lose a bunch of data once. I like, I stopped and it was just black, you know? Didn't line up. There's just gremlins all the way down with this type of stuff. And doing it in the browser takes a lot of that, like, lower level. Oh, this like weird mic doesn't work. You know, it's a different frame rate or whatever. There's all these like weird things. The browser smooths out a lot of those APIs and you just have to use Git Use Your Media, which is nice.

• 21:14Scott Tolinski?

  Yeah, you know what? And it's so funny because this also started out as a thing I just built because I wanted to have this UI that you're, if you're watching on video, you can see. This UI here frames me up to shows like what a mobile frame would be. That's why it's called Vframer because I wanted to have something that would allow me to see what I would look like if I were to crop it straight vertical for vertical video. So that way, if I was like over here, you know, I would want to be centered in the frame, obviously. It gets you that like that, you know, I can move my computer here to make sure everything is nice and lined up and looks even and normal. So this was like the initial thing is like, oh, I just want this screen recording app

• 21:55Scott Tolinski?

  where then you can also like see what the vertical cut would be for anything. And then, once I had that, it was like, oh, now I could just keep adding sources. And I've, the biggest concern for me was that if I added a lot of sources that I would see performance issues. And you can see on, you know, some of these I'm recording, like three screens here, a video and an audio. Yeah, three, two, three screens of video and audio. And I haven't had any issues there. I think I've been really impressed with the stability of this thing overall. So I've been using it and I've been liking it. There's also a lot of interesting technical challenges here because this product or project here is not just like,

• 22:38Scott Tolinski?

  okay, so you have the Electron app. Then you say, okay, let's say I wanted to sell this thing. Let's say I wanted to publish this thing. Like, what do you need from there? Because clearly, you know, the app itself is valid, it works, I've been using it, I've been liking it. So like, what is the thing that can take you to actually getting this to be like a production app? One, for Apple specifically, because that's what I'm targeting right now, even though I'm open to other things. I'm not going to sell it in the App Store, but I do want it to, when you buy it and download it, I want it to open up without issue, you know? Apple like always gives you that gruff about like. You're downloading an app from an unknown source. Like, are you sure you want to do this?

• 23:24Scott Tolinski?

  So you need to have an Apple Developer account. I had to create certificates. I had to create like a team. I had to notarize the app on every build. So that way, when you open it up or I send it to Wes, it's not going to say, oh, it's corrupted. And that's a whole thing, right? Electron makes it easy enough, considering, you know, that's kind of what Electron does. That's actually one of the best things about Electron, is that it's so established, that there's documentation and blogs on how to do absolutely anything in here. So if I wanted to figure out the notarization process, like, that part of it was relatively simple,

• 24:03Scott Tolinski?

  even if the Apple Developer stuff is a giant PIA and takes forever to click around and figure out. Man, that's the MCP I need, Wes, is the, hey, just do the certificate thing for me. I hate this.

• 24:19Wes Bos?

  It's funny that they say that, because there was a CLI for interacting with the App Store, and Apple recently just shut it all down, because like, it was a super well-done thing where you could get tokens, you could log in via the CLI, you can install things via CLI, and Apple just nixed it all. Probably because it was, people are spamming the crap out of it and just like, I'm sure Apple's review right now is just full of these just like vibe-coded apps, and people are just generating 50,000 apps.

• 24:52Scott Tolinski?

  Yeah, yeah, for sure. Another big challenge here was, if I am going to sell it, what does that look like? What does that look like? Because the options are, is that you could rig Stripe subscriptions and user accounts, so I could have this be like, oh, you have to log in to use this thing, and then that login then checks the server to make sure you have paid to use the app. I didn't want a subscription, right? That makes no sense. I'm not, I'm not processing anything over time. Subscriptions are stupid. So like, I wanted a one-time purchase option. I wanted people to be able to, to use it and have a trial mode to, to make sure that it works for them before they pay for it. And then I want the purchase process to be, just go off, you click buy, you get a license key,

• 25:37Scott Tolinski?

  you paste that license key into the app, and then you're good. Right? So I had to learn a lot about that stuff. In fact, I, I reached out to the creator of Recut. I'm like, how did he do his? And then anytime I saw people posting about their apps on Twitter, I'd be like, what are you doing for your licensing? Just because I wanted to get a lot of opinions on how people were doing that. So you can see, there is a trial mode, limited to one video, one audio, and then a link to get licensed. And this will just basically take you to a Stripe checkout. That Stripe checkout does a normal checkout. And when you complete the Stripe checkout, for saying you've bought it, it sends a webhook message to a server. So Stripe has webhooks baked in.

• 26:22Scott Tolinski?

  That sends a message saying, "Purchase completed for this app," to this email. And that sends a message to a CloudFlare worker I have. That worker then triggers the license generation. So the way that the license key stuff works is that I am using a project called keygen, keygen.sh. Now, you can pay for keygen, and a lot of people were suggesting that just paying for keygen was the way to go, because this stuff's kind of a PIA.

• 26:58Wes Bos?

  How can that be that complicated?

• 26:59Scott Tolinski?

  Right. Well, uh, keygen, so you have to have a license key that is validated to an email. The keys can be all kinds of stuff, like, uh, how many used, like, how many activations of this key you can do. So how many computers is this key good for? Those types of things. And there's a lot of really, like, small type of-

• 27:24Scott Tolinski?

  Of features you might want with a key gen. And what I found, though, is that you can self-host key gen. So instead of paying for it, you can self-host it, which is what I chose to do. So I have a self-hosted key gen that I'm running. And I'm basically hitting my own API with an API key and an email. So that Cloudflare worker gets the webhook that comes in and it says, okay, this person has bought it. Here's their email. That then gets triggered to the key gen server, which generates a key for them. And then that takes that key coming back into the Cloudflare worker.

• 28:07Scott Tolinski?

  And it sends them an email with their key. Once you have that key, you just head to the app, settings, paste that key in here. And it unlocks the app, which honestly, the key gen server part, I don't want to say it was harder than building the app. Because the app certainly has a lot of edge cases. But because I had to do so much knowledge acquisition to be able to get that part of it working. That part to me was the hardest part was like, so how do I want to do this? I want to get this working. I want it to like be smooth. I want it to work offline. Like there's so many little things I had to think about there like. And once I got the key gen server, it was fine.

• 28:50Scott Tolinski?

  But the key gen server also, the self-hosted version, does not have a UI. And I'm a UI kind of guy. I like clicking around stuff. So I'm like hitting this CLI, hitting this API and being like, did this work? Okay, I like, you know, just debugging that kind of stuff was, was no fun. Paying for it probably wouldn't have been bad, honestly, but hey, I got a Coolify server up there. You know, key gen has an easy Docker setup. Like, why not, you know?

• 29:19Wes Bos?

  Man, and did you, did you host that on your Mac Mini or you, uh, did you put that in the cloud?

• 29:25Scott Tolinski?

  It is running on Coolify. Yeah, I have a, um, I have a, I have actually two Coolify servers. I'm going to move on. I had, uh, my first Coolify server was an ARM server and I really liked it. But it is living in Germany, so everything is slow with it when I'm interacting with it. Cause the latency there. And so I just, they don't offer ARM in the US or they didn't. So I just spun up a new Hetzner Coolify that's local to me and I'm moving everything over there. I love Coolify, man. I throw all kinds of stuff on Coolify. It's so easy to just toss stuff up there. I need a container for anything. It's so easy to do that. So the key gen server, yeah.

• 30:08Scott Tolinski?

  That part was obnoxious, getting all of that configured and set up. But once I had the key gen server, like the pieces all kind of fell into place. Whether you have the worker for the webhook, you have your Stripe, you have your key gen server. And on top of that, like it's amazing how much work goes into releasing this app. Cause not only that, I have a waitlist app that I made. Because it was like, I want people to know about this. So I made a waitlist app on top of it. And the waitlist app is so lo-fi. It is so lo-fi. It uses Google Sheets. It uses basically, I'm sending, you enter your email and it puts it onto a Google Sheet. There. Which honestly was fine.

• 30:53Scott Tolinski?

  It's like, that's all I needed to this was to capture emails from anybody who was interested. And I didn't think this thing was gonna go viral or anything to the point where I had to worry about people going nuts and ruining that form by spamming it with emails or anything like that. So that was pretty much it. That's how I've captured. I have not released yet. Hopefully I'm gonna release really soon. What I want to do before I release this is get it in the hands of you and CJ ASAP. So that way you guys can test it out on some like, non-scary things. So that way you can make sure it works for you, get some feedback on it and then release it. Because heck, I just think it was so useful for me to have this.

• 31:36Scott Tolinski?

  And now I'm using it in every, every recording I do. So if it's useful for me as somebody who does this full-time, like I gotta imagine it's useful for somebody else.

• 31:46Wes Bos?

  I have hit every single possible recording issue in the world. So I will run it through. Will you give me a free license key?

• 31:56Scott Tolinski?

  Of course, I'm gonna give you a free license key.

• 31:58Wes Bos?

  Okay.

• 31:59Scott Tolinski?

  Uh, there's also, by the way, there's also a menu. I have a little menu where you can pause recording and stop recording. There's keyboard shortcuts in here.

• 32:07Wes Bos?

  Oh, you need a Stream Deck plugin now.

• 32:09Scott Tolinski?

  I need a Stream Deck plugin, you're right. You can customize your keyboard shortcuts if you don't like them.

• 32:14Wes Bos?

  Yeah.

• 32:14Scott Tolinski?

  I thought, I feel like I tried to make this exactly, yeah, you can customize the countdown. Um, the, the, you can have the FPS locked to 30 FPS if that's what you want. Yeah, I feel like I thought of everything I like and need in these tools. So, let me know what you think on this thing. Let me know if you have any questions about it, but I feel like...

• 32:33Wes Bos?

  Oh, one question. One question I have here is like, what about like, like bitrate and resolution and all of that stuff? Like, I don't see any knobs for that. Can you control that?

• 32:43Scott Tolinski?

  There's no knobs for that, but maybe there should be. No, I just capture everything at a high bitrate, so...

• 32:50Wes Bos?

  Cause like, that could be like, like a gig a minute though, isn't it? Can it not?

• 32:54Scott Tolinski?

  A gig a minute, no.

• 32:56Wes Bos?

  4K?

• 32:57Scott Tolinski?

  No, it's not. And it doesn't end up being like, yeah, like, look, where's the...

• 33:01Wes Bos?

  But what is the, what's the bitrate?

• 33:04Scott Tolinski?

  That's a great question. What is the default bitrate I have set?

• 33:07Wes Bos?

  Cause I'm pretty sure you can control the bitrate. Yeah, you can. You can control the bitrate with Get User Media. Um, and you can crank it up. I've done that before, being like, I just want the best quality ever. And it was like a gig a minute. And you run out of hard drive space real quick.

• 33:22Scott Tolinski?

  That I, I set the bitrate a long time ago, and I haven't really touched it. I mean, let me, let me look into that. It's so funny, cause I set it, and the quality's been good enough that I just haven't been like, oh, I need to tune it. Yeah. Um, that was like one of the early things I did, uh, way back when. So, yeah, let me, let me, let me, uh, let me add some knobs there. I think that's a good idea. See, Wes, this is why we chat about this stuff. I need this kind of feedback.

• 33:50Wes Bos?

  And some icons. I'll, I'll give you some, I'll give you my feedback as well. I do that a lot of times when people send me their apps. I'll just hit the, I'll hit record while I'm using it for the first time. And there's often some good stuff there.

• 34:02Scott Tolinski?

  I love that. And I like to think the UI looks pretty nice, man. I, I, I spent some time on this, designing it, and, uh, there's a light mode, dark mode. Um, I think they both look pretty cute, so...

• 34:14Wes Bos?

  Awesome.

• 34:15Scott Tolinski?

  Oh, some contrast issues. Oh.

• 34:17Wes Bos?

  Uh oh.

• 34:18Scott Tolinski?

  Oh, no.

• 34:19Wes Bos?

  About to run it. Ooh, I like that little.

• 34:22Scott Tolinski?

  Yeah.

• 34:22Wes Bos?

  Very, um, what teenage engineering-esque?

• 34:26Scott Tolinski?

  Yes, that was my inspiration for sure. In fact, this entire UI was designed to kind of after the, um, they're, they have like a recording device that was kind of mocking this or mimicking this in a little bit, but I didn't want it to be like, just a copy paste skeuomorphic version of a teenage engineering project. I wanted it to be like kind of that inspired. Yeah. One thing that I, we didn't talk about here that is actually, uh, interesting is the CI/CD upload or the update process. So another thing that Electron makes somewhat easy is the, uh, automatic updates.

• 35:11Scott Tolinski?

  Like if you wanted to like update your app, let me see if I can bop open some code. So if I release a new version of this, like there's so many ones that make you like even, even DaVinci makes you like go to their website and download a new copy of it and stuff.

• 35:28Wes Bos?

  I hate that. Bamboo Studio does that too. Go and download it and quit the app. Like no, just do it for me. Let me just restart the app. Next time I restart it and it should update itself. Don't make me re-download some DMG and drag and drop it in.

• 35:45Scott Tolinski?

  Totally. And so I have CI for that using GitHub Actions. And it basically will build a release version of it and then set my, uh, all my Apple stuff. And then it's going to push it up to an R2 bucket. The app using Electron Updater checks that R2 bucket to see if there's a new version. And if so, it will prompt you to say, new version installed or whatever. Update will take place on next relaunch of the app. So it's just a nice little Mac OS dialog that pops up. So updating is, is like really pretty painless. So I, that, that part to me, uh, was a bit obnoxious, but just like everything in Electron, there's just an endless amount of

• 36:29Scott Tolinski?

  resources on it. So like, I think that was some of the killer stuff for me was like, oh, I want to get an automatic updater working. Oh, okay, let me just Google that. And then, oh, there's Electron updater. Oh, the process is really, really easy, or it is documented very well, easy or not. So I thought that was a really interesting part, too, especially because a lot of these challenges for somebody who hasn't ever done anything like this felt very daunting. And they were daunting until I moved to Electron. So I've never been an Electron hater, but like, I kind of love Electron. Sorry, folks.

• 37:06Wes Bos?

  Awesome.

• 37:07Scott Tolinski?

  And I've actually built like two or three more Electron apps since.

• 37:11Wes Bos?

  This man must be stopped. So what's the website if people want to try it out or get on the list?

• 37:17Scott Tolinski?

  Oh, yeah. The website is vframer.video. We'll have that linked up in the show notes. And yeah, yeah, check it out.

• 37:27Wes Bos?

  All right. Peace.

• 37:29Scott Tolinski?

  Peace.