NZXT PODCAST - #164 - CAM Web Integration! (Ft. Amanda & Sitong)

Episode Date: July 21, 2023

On this week's episode of the NZXT Podcast... We walk you through the new Kraken Web Integration Mode with our CAM team and show you how to add a new Diablo display to your water cooler! Learn more about our new Web Integration Mode feature at developer.nzxt.com! Tune in live every Friday at 10AM PT on twitch.tv/nzxt!

used to the piercing. Oh, sorry, I forgot to say we are now live. So welcome, everyone, to episode 164 at the N-S-XT podcast, the official podcast and the SEC community. This podcast is currently live every Friday at 10-A-Pacific Standard Time on the official NCCC Twitch as well to stream on Apple Podcasts, Google Podcast, Spotify, and SoundCloud. My name is Mike with me as always as Ivan and also puppy.

Well, what's up, everyone? If you tuned in early, I guess you have. heard Satang talking about his teacher tongue piercing but he's con- I think I just unneeded it right at that end part. Sounds perfect. All right.

Well, we do have a special podcast for everyone today. I'm very excited. These are some returning guests. Not the first time here, but we are going to try something new today. But before we get into that, I do want to introduce them and let them introduce

themselves. Welcome, Amanda. Welcome, Satang. For those that don't know, please just give us a quick rundown of who you are and what you do at NZXT. Sure. My name's Amanda. Been on the podcast before a couple times. So I'm a product manager for CAM. So it's my job to take y'all's ideas, take y'all's suggestions, take your bug reports,

and turn them into action for the team. So the new things we work on, Satang and I work together on what we're going to build and how we're going to build it and making sure that the products we build have the support that you all are looking for. Yeah. Hey, everybody. My name's Satang. I work on the CAM team as well as the software engineering manager.

So basically I manage the team that goes out and build some of the product vision that Amanda has and makes you guys cool stuff for our products. Nice, nice. And how long have you guys worked at NST? And like, what are some of the cool things that you've done with CAM so far? Yeah, so I've worked at NST for about, I think it's like two and a half years. I can't even remember maybe two, two and a half years or so. So on CAM, a lot of the really cool and fun stuff that we do, honestly, is around the Crackens.

Obviously, you know, NZXT has a whole bunch of different peripheral devices now, so we support all different kinds of things. But by far, the most fun ones for us are definitely the Crackens and the types of things that we're going to be talking about today. Outside of working on CAM, my favorite programs that I've worked on at NST are absolutely our craft cases. They're a ton of fun to build those and be a part of bringing those to life and making those super fun and super neat, you know, mainly gaming cases. Yeah.

From my side, I've been in 16 now for five years. Actually, I just hit my five-year mark at the beginning of this month. Oh, congratulations. Your old-timer. Half a decade. Yeah, yeah. Not as much as you, I haven't, but pretty good. That sounds weighty.

Yeah. Actually, so like the, I think one of the things I most appreciate about some of the projects we're working on are actually the one that we're going to talk about today, web integrations for your crackens. But also recently we've been doing a lot of efficiency pieces and a lot of like small tweaks to the CAM app and those have been really enjoyable for myself and the team. So a lot of like performance projects and a lot of cool UI things that would be hopefully really great for our user base. For those that don't know, what do you guys want to give a little explanation of what cam actually is real quick sure so cam is kind of twofold number one a lot of folks

will use it for monitoring their PC so looking at their statistics their temperatures and just making sure their system is performing the way that they expect and then the second piece is for folks with our nzxti products cam is where you go and you can configure the different settings that are available or enable some extra features like on our relay audio lineup you've got the options to add dTS support and add equalizer profiles to those pieces for a crack and lineup. It's where you go to set the screens and the displays that we're talking about today. So it's NZT's control software that we use to integrate with our hardware. Growing off some of the specs that you can do, you can change up lighting, cooling. You can just actually just get the specs and just learn like, you know, how hot your temperature is, how fast your fans are going, stuff like that. So just to let people know exactly what it is. And you talk about how there's some products that are compatible with NZXT. Do you, like, what?

What are some examples of things that you can work with? Yeah, so for the most part, it's going to be anything where you've got some kind of options. In general, for anything that has an RGB on it, you're going to set up and control your lights through cam. So we do a lot with the lighting ecosystem that we have. But then when you start to get into things like the keyboards and the mice, they have things like macros and they have different options that are available. So you can change your polling rates. You can change your DPI. You can save profiles and make them auto launch with different games or at different times of day.

So a pretty comprehensive set and what's offered is just kind of dependent on the products that you own. But in general, it's RGB, our cracking screens, and then for our peripherals, the configurations and the settings that are available if you want to go in there and customize them. Awesome. So today's special thing is about this new web integration you guys talked about. You guys want to go a little bit in depth of like exactly what the web integration entails. AKA what is it? Actually, I think we were here maybe a month or a month and a half ago talking a little bit about web integrations with our

Cracken and our Cracken Elite launch. But to rehash it a little bit, this is a special mode that we've built out for our LCD Crackins that enables you to essentially stream a web browser, like a web page, the same way that you would do on like a Twitch stream or something like that. But instead of going out to live to like, you know, millions of viewers, we're actually just going to your

crack-in screen itself. So we're hoping this is going to be a good tool for the community to build some cool visualizations and use some of the data that we have in CAM in order to drive kind of the things that they want to see on their crack-in screens. And the word or the phrase, web integration seems a little weird or complicated i guess blaming people like me but um how exactly does one create a web integration

yeah uh at the end of the day web integration really is just it's it's an integration that we have in cam to a web website or a web page um that that's what it is in its most classic form so if you have any experience building out a web page for you know for your friends or something like that. This is, that's all the experience you really need in order to, to, uh, build something out for your cracking. I have, I have used HTML to update my MySpace profile before. So I think I can handle a web integration.

Oh, so Tom, can, can you actually walk us through creating a web integration so we can see what, um, this entails and just, you know, walk us through the process, like from beginning to end, how do you create one of these things? Yeah. would be very excited too. So I'll start sharing my screen then. Let me make some popcorn. So the last time I was here with Amanda, we actually went through web integrations a bit. And then I remember I talked a little bit about how I thought it was pretty easy.

I use the word easy. I think somebody. Turn off your camera. Oh, yes. Thank you, thank you. Don't need to see me. Just take a look at the screen. screen. I said it was I said it was going to be easy and then somebody in the in the community mentioned like oh it's not necessarily easy and then I kind of pull back and

said you know what you're right it's not easy it's it's relatively straightforward if you have some of the tools so today I want to actually put my money where my mouth is and build one out for you guys live so you guys can see the whole process end to end so trying to keep this as simple as possible there's only one real prerequisite that you which is a GitHub account and then what we're going to do is we're going to be essentially building a web page that we're going to deploy out to GitHub and just publish out to GitHub because they have this nice tool that just lets you quickly do that with the web page and we're just going to use HTML CSS and a little bit of JavaScript to build out today we're building out a Diablo web integration a Diablo inspired web integration that basically will show your CPU or GPU temperatures. All right, so kind of start off. What do you guys think we should name it?

This is like one of the hardest problems in engineering. How about, in honor of Amanda being here, we call it Fuego Mode. Okay, Fuego mode. Perfect. Yeah. Mode. We'll do that. It needs to be public, so don't worry too much about these things.

So we recreate the repository. going to ignore the rest of this now but this will be ready to go i'm actually going to set it up right now but we're going to go in here we're going to sorry before you keep going with this for those that don't know can you briefly explain what github is yeah uh GitHub is a place it's a code repository mostly used for tracking so people use this to share code people use this to kind of publish different programs that they have. It's very popular in the open source community. Probably if you've been in gaming or you've been adjacent to it,

you've probably landed on one of these that somebody has made for, maybe some pet project for one of the games that you play. And maybe they offer like some mod, or maybe they offer a web page that gives you information about your game or something like that. Gotcha. Yeah. So all we're doing for this is we're only using GitHub because it lets us publish a web page really easily.

I'm not going to talk about all these things here, but basically there's a page, there's a pages thing here in the settings. You can deploy from a branch and I'm just going to, oh, we don't have a branch in. Oh, that's fine. I'll come back to this later and I'll show you guys how that works. But first off, okay, so I'm going to make a new directory for Fuego mode. And so what's everybody's experience with web development in general here? So I have used HTML and CSS back when it was like necessary, you know, like, because now there's a lot of like whizzywig editors, so you don't really need to know it so much. But, you know, when I first started working in like social media and like blogging and things like that, like you had to know that stuff. But nowadays, you don't really need it.

Everything's like a visual editor. But that's the extent of it. And I actually joked around earlier, but, like, yes, I did use HTML to update by MySpace page at one point. Like, for those that don't know, like, MySpace is one of the first social media networks. And it was very cool because you can customize your personal page and you had to, like, do it with HTML. I don't think it was capable of CSS, but It's crazy that you have to say, it's crazy that you have to say, like, you know,

those that don't know, and I'm sure there's people. I'm sure there's people that have never, never used Myspace for sure that are watching right now. So I set up like, so I've set up a HTML or CSS or JavaScript. Heckle. No, not the slightest.

Okay, well, I'll describe it a little bit. So I set up just like a basic, basic project folder structure here. The main thing here is that we just have this index HTML file and this is what's going to get loaded into the web page when we go to the page itself. So in classic developer fashion, when you first start a project, you have to show a hello world. So this is not a prerequisite, but I am going to use a what's called a hot reloading web server. But you can do any other server or you can actually just load this page directly. But I have one loaded up called Live Server from NPM.

So I'm going to start that here. I need to save this file. It again. Looks like you're doing something illegal, like you're hacking the network. or something. Right, yeah. This is... One second.

How about you, Amanda? What's your experience with HTML, CSS, and JavaScript? Yeah, so I mean, honestly, I have to have some exposure to this in order to do my job the best that I possibly can. So, for instance, before we integrate something like a firmware update into CAM, we have to manually do those types of actions. So I'll use things like this visual studio code pretty often, actually, in order to just kind of test out some of the things incrementally before they're fully integrated into the application. But I've also taken a couple engineering classes and built a couple tools myself, especially back when I was doing jobs where I had very, you know, back years ago, I'm also, you know, in that bucket with Ivan where I'm a little bit older.

We didn't have as many automation tools and things to make things easier for just launching multiple programs or automating text entry. So I've built a couple tools in HTML and CSS and Python and worked with these tools myself prior to working at NZXT. But here, I'll use a lot of these tools that Satang is showing to, number one, test out products before they're fully integrated into the CAM app. And then also number two, if you have, as a product manager, if you have a little bit of understanding of some of these structures and some of the way that calls kind of go back and forth, you're able to kind of help out your mainly your front and team on saying like, hey, I'm seeing this line or I'm seeing this error. when I'm trying to do this thing and here's what's not working. So just trying to help the team kind of investigate bugs and kind of work through some of the pieces that they're working on. The one thing I will say too is I know like if you've never seen some of these tools,

they look pretty overwhelming at first. Yeah. And so I would, you know, if anyone's here like, I am really confused, I don't know what's going on. If you take just like an introductory kind of an engineering or programming course, you'll really quickly get a grasp of exactly the types of things. Satang is showing. They look very complex. They're not, but they're really complex when you see like how quickly Satang moves through this. He knows these things because it's essentially like level

101 level pieces and they have to do these all the time. So this is very second nature for Satang. And if anyone out there were to take any kind of engineering course, these types of things he's showing would be the first couple of pieces that you do. You very quickly get into the types of things he's showing. I believe Satang's exact words last podcast was, where someone asked them, you know, is what is creating a web integration hard? And he said, nah, it's easy. It's just as long as you know basic Python, you're good. And when you said that, I was like, I don't know how many people know basic Python.

But to your point, Amanda, about like, oh, if you just take like an introductory course, you can figure out what you got to do. I think you're right because there's, I actually Googled a couple of things before this podcast on like on not Python specifically but like JavaScript because I'm pretty comfortable with HTML and CSS it's not that that that I do think is actually fairly easy but you know this from the last time I had to Google something you know there's definitely tons more of like resources and things like that for people to learn how to do it and I think now more than ever it's probably easier or the easier or the easier

it's the easiest it's ever been to learn about whatever it is you want to learn about because that information's out there. So like you said, this looks super complicated or hard or overwhelming or whatever. You know, it just rest assured that it's not. You just got to do a little bit of homework, you know, before you start clicking around and doing stuff. It's also the, so, Tong, if you've got a piece you want to say, go ahead and jump in. Yeah, I'll just kind of describe the. the structure here. So you're seeing like a couple of different windows here. This is the HTML portion. This is what's going to have our CSS and this is what's going to have our JavaScript.

Uh, HTML, you know, it's only here just to structure what the page is going to, uh, all the contents the page has. Uh, CSS here. It's kind of like it's the stuff that polishes and styles things for you to, to make it look like a, uh, kind of what's called a web 2.0 or something like that. type of web page way back when you'd only have kind of text and things like that, then that's kind of just the HTML part of the web. But then we have JavaScript and this is what's going to actually give us some live data and make the page a little bit more interesting and a little bit more alive. So that's what we have here now. So I'm going to start actually, so you can see we have the hello world. It's popped up over here.

We're going to start adding some things to make look a little bit more like a like an actual crack in itself so I've already hooked up from this line and from this line over here I've already kind of hooked up the JavaScript and the and the CSS so those will be good to go and now I'm just going to add a little bit to let's let's draw like a circle so it looks like you have a crack and screen on here holding here as well. And I'm just going to have this take up full lip and height.

So Ivan, did you have any experience with CSS or just the HTML side? With HTML and CSS. Okay. So does this look familiar to you? Yeah, I feel like HTML and CSS are easy because, you know, I learned that myself and I'm pretty dumb.

Like, where I got really, where I actually like got kind of stumped was with JavaScript. That was a little too complicated for me, to be honest. But like I joke, you know, I say I'm stupid, I'm dumb, whatever, but I'm horrible at like math and science. But I was able to figure out HTML and CSS, but it's just the JavaScript is what kind of threw the little curveball at me. Okay, gotcha.

Yeah. Gotcha. Okay, yeah. Yeah. So with this amount of... Everything you've typed here, like, I understand what's going on so far. Yeah, this amount of CSS, it's not too much. We have a background color for our container.

We have this magical line called Border Radius that lets us turn things into circles. If you guys remember on the web, we used to always have square avatars, and we started having circular avatars, and I think that's right around the same time that this part of CSS became very easy. And then I just, I changed the color of the text to white, but it's actually over here in the corner so you can't see it anymore. So let's add in the portions where we, let's add in some fake data to start with so we can see what this will look like. And I'll just say because I'm sure there's a couple folks watching on browser, you can, you can see there on Satang's window on the left. If you hit F12 usually in your browser, it's going to open up the console. It's going to open up that section that you see at the bottom.

And so even, you know, if you're just kind of wanting to kind of look and poke around a little bit, if you open that up and you go into the elements section, you'll start to see some pieces where you can kind of click on it. It'll highlight it differently. It's a nice little touch of like kind of just looking at there and just seeing how does this work? How does this function? And you can actually edit those fields too and you can like change the appearance of whatever website. on which is pretty cool. I remember the first time I did it on accident.

I was kind of scared. Yeah, so I'm kind of, I'm live coding here. And then as I'm saving, these are actually do the live server I had earlier. We'll propagate out here. And you can see the same structure on this HTML as what I'm writing. So if I, for instance, change this to 31 degrees and I hit save, you'll be able to see now it says 31

in this HTML structure. Let me move it on to its. to this blue circle so you can see that. What are some of the cool web integrations that you guys seen so far from the community? Yeah, Hannah, you want to take that one? Yeah, sure. I think the coolest one that we've seen was,

actually, I think it was this weekend. Somebody put together a Starfield design. So that one was really cool because it used a couple different pieces of the web integration information that Satang is going to get to here in a little bit so it used a GPU value a CPU value and then date and time as well and then it you could look at it very clearly see that it was Starfield theme so that's been personally one of the the favorite ones that I've seen we've also seen some folks work with the Spotify integration

as well and then the ones that we're going to be talking about today we're going to show something Diablo here that's why we called it a Diablo theme but yeah I think the the coolest one I've seen so far has been the Starfield one for sure. Yeah, that was definitely the coolest one I've seen too, but the one that shocked me the most was the first one that we saw was the Spotify one. What was cool about that is like, you know, the Spotify mode, it's only baked into certain crackings, not all of them. And then this person said, well, there's a web integration. I can just do this thing myself. They actually

figured it out and they, you know, were able to get the Spotify and help playing on their crack-in without having it like officially big-day, which I thought was awesome. So I think those two, that one in the Starfield run for sure with my favorites. Now I'm going to kind of start, now that we have like this is a very basic infographic that you might see. We have a source thing, I'll say a GPU, and then we'll have some temperature here. So this is the structure that we're going to start with. So now I'm just going to add some JavaScript, just a little bit to make this number change, basically.

What we have on our web integration documentation, actually. So here's the web page for that. One thing I'm really excited about is this monitoring data. So this monitoring data is your PC data coming from CAM directly into your web integration. So what we do is we basically just add that data into your web page. We inject it through the JavaScript so you can have access to it. So you can start displaying it and making cool, cool looking screens that use this monitoring data.

So I'm actually just going to copy and paste this directly. That's pretty much all I need. And what monitoring data is being pulled in exactly? Yeah, so we have lots of different data. Let me open up a little page so you guys can see what's there. But basically we've published a, for all the developers out there, we've published a package on NPM, which is the package manager for JavaScript. And you can go here and you can actually see exactly what we have out there.

So I'm going to open up a link here. This goes to a public, get a different, We have a repository where we have this data. So if you look here, we actually have a lot of things such as, so here's the main section of data. So we have data on your CPUs, on your GPUs, on your RAM, and some data from your cracking itself. So what do these things kind of look like? You can get your name of your CPU, you can get the manufacturer name, you can get the current load,

you can get temperature, which is what we're going to be using today. for our GPUs, you can get a lot of the same similar data as well. If you want to show something about your RAM, you can see how much you have in use. Can we get data on what websites Mike has visited? No? We have not tracked that data from Mike. But if you are interested in that kind of feature, you can submit those to Amanda. You don't want to know.

That's cool. That's a lot of information. So I guess my follow-up question is, is with all this data, like what types of web integrations can you make with it, you know? Like I know you're, right now I see GPU temperature on there, but like what else can you, what other type of web integration can you do? You can. Oh, go ahead, Amanda.

Yeah, you could essentially make a web integration for any one of the statistics that you'll see on the PC monitoring section in CAM. So that's going to include any of your load, any of your usage, any of your temperature monitoring, your various different clock speeds. There's all different kinds of numbers that are shown there. I think in general, like the reason why we show so much around CPU and GPU is because those are such important pieces for monitoring. So we do expect that even though there are quite a few options there, most folks are going to want to see CPU and GPU temperatures. And in general, they can typically reflect results from the other parts of monitoring that are available. So for instance, if your GPU is higher, you assume your fan RPM is higher, you assume that your clock speeds higher, you assume these other values are responding and or affecting that temperature value. Gotcha.

Well, that's a lot of data for sure. Yeah, there's a lot of options on there for sure. I know, sorry, I know we stopped tracking. I don't know we stopped tracking. I guess my question is, are we still able to pull? and FPS data through web integration or no no no we no longer have FPS data right now it is a piece that I know we're trying and looking at how we can bring back those FPS values we took it out honestly because in order to get those

FPS values we needed to be injected into the games I mean that code was a little bit out of date and it was causing some problems for folks who weren't even intending to use it so we don't have an FPS value right now it is a piece that we talk about how are we going to get this back how are we going to get there we have a couple of different ways that we can. It's just a matter of making sure we pick the right partners and we integrate it the right way. Gotcha.

Yeah, so what I'm doing right now is we're grabbing. So index, so indexed cam will actually essentially call this function method to update the web integration with whatever data that we were going to supply. And we do this every one second. So I'm going to pass in the function here, which lets me basically act on that data, specifically the CPU data. And for now, all that function is going to do,

it's just going to log it to our log over here, our console log over here. So just so you can see that it updates. Since I'm not developing on CAM directly right now, there's nothing to actually call this. So I'm going to add in a little function that actually does it for me. So just so you guys can see what's going on.

So I'm going to do what's called like a random walk. So let's say basically this math random just gives me an random number between 0 and 1. And then if it's greater than a half. So this is basically saying like if I flip a coin and it lands a certain way, then I'm going to add one or I'm going to subtract one to the CPU temperature. So in just the moment you'll be able to see, see some data, see some live data. And this right here is JavaScript.

This is JavaScript here, yeah. We do have a question here from the chat real quick while you're doing that. It's from GangsterSaurus X. They ask, would love to see GPU and CPU temps affecting the shader colors. Is that a thing? Yeah, that's something that you can do here.

Yeah. Yeah, so we've played around with a couple concepts on that too. You know, because I understand, you know, when it comes to these web integrations, we're showing them and kind of speaking to how to build them. But they are still, you know, complex for folks that don't have that knowledge. So we've built a couple concepts ourselves around that. And they haven't panned out to being the quality bar that we want them at. So I do expect that we launch a true model. mode through cam directly at some point around that,

just a matter of making sure that it works well. And it's got really high frame performance, and it's very responsive, and it looks great. Can you make smoke come out of your cracking if you watch Oppenheimer on your PC? Not for the right reasons. We're going to build a smoke machine just for that purpose. You can send that over to the hardware team.

Okay, so yeah. So this is a little bit optional. but I went ahead and did this. So now you can see that the this value, the CPU temperature is just randomly going up or down one every second. Okay. So now I'm just going to basically send that over here. So to do that, I'm going to add a little span tag,

a span HTML tag around this 31 that we have here. And then I'm just going to use this ID to then inject these values in. So for... Since I'm not using anything special on the JavaScript side, this is all vanilla JavaScript. A lot of JavaScript developers get a lot of basically hate because we have a lot of frameworks out there that we're constantly using. But today we're not going to use any frameworks, nothing special, no libraries or anything, just plain old JavaScript for you guys to take a look at. And all this stuff that you're showing you're showing.

Which Crackens is it actually compatible with? This is going to be compatible with every single LCD Cracken that we have. So Cracken Z, Cracken, Crackin Elite. And Cracken Elite, yeah. Those are the ones. And I guess this might be another question for Amanda. Are there plans to add web integration to other NZCT products in the future, maybe? I don't know if that's possible, but maybe, I don't know, there's a way to make your keyboard or your mouse light up a certain way if your temperatures do something, for example.

Yeah, so, I mean, technically for, you know, something like that, we wouldn't necessarily need to use a web integration. You know, that's more around, like, how you're painting and drawing to an LED is a little different than painting and drawing a screen display. but like how we use this with other products the answer to your question is yes you will see other integrations especially for people who both have one of our products with an LCD screen and our other lines of products you will see some more integrations coming from us around folks who own multiple of our products in terms of kind of using this tech to do other things right now it's pretty relegated to anything with an LCD screen I think I don't know if that answers the questions.

Well, I'm sitting here thinking, like, how do I wrap up this answer? It does. It does answer. But I guess it was a bad question because we don't have any other CAM products, I guess, at the moment that would probably benefit from something like this, right? I just threw out the keyboard and a mouse because I was like, you know, what's in front of me right now.

But I think, you know, maybe, like, let's say in the future, NZXT makes, I don't know, like a little panel that goes inside your computer that displays information or whatever. I guess that would be an opportunity to do something else with web integration, right? Yeah, absolutely. So this is really centered around anything that's got some kind of screen or some kind of display on it. We can use this technology there for sure. Yep. All right, guys.

So now that we have some live data. and we have the basic structure looking good. We're going to add in some assets. So here's where it's going to start to really come to life. So I see the numbers. I will just, so Tom, can I point some things out?

Are you going to? Yeah, go ahead. Yeah, so I'll just point out, for those of you who do own a crack in, I know we made some changes to some infographics recently and got some feedback on it.

So you can see here on the left, you can see where these things start to get pretty complex. So, for instance, Since one of the things that's very difficult and it's a little surprising is that degree label that you see there next to the 28, the 29 right now. See how large that is and how it's taking up that space and kind of where it's centered at in the position next to the different digits. That's a piece that's very difficult to nail that and get that degree in the right location and at the right size. Then you'll also see as he continues to do this, you don't really see it too much right now because he's incelsious.

But as you kind of bump between two digit and three digit readings, that makes an adjustment to the placement. of those numbers. So if you're trying to center them, they don't always work. And then you get this flex where it kind of feels weird when I'm bouncing between 99 and 100 or 105 and 98.

So these types of text placement you can really see on display here in the video of how complex it starts to get. Yeah, I can start the temperature, let's say, at 99, so we'll probably be able to see that. If it goes up, it's going down. You got to work harder, Satang.

Root for it. We're going to start it over. Oh, it should be getting hot. Oh, there it is. Yeah, so you can see how that text kind of shifts and how it's a little jarring, especially more jarring when it's in your case and you're kind of looking at it. But these types of in-depth portions around, how do you lock that placement, how do you size it the right way, how do you make sure all of these different elements are the appropriate size and they're very readable

and they're noticeable at a glance versus noticeable while you're staring at it? That's where the real beauty comes in on these cracking displays. Yeah, so we will take care. care of that while we're working on this today. But so while folks were talking, I kind of dragged in some media here. So I'm going to put this video underneath this text and then also have a little backplate thing to do here.

And then we're going to add in some fonts here to actually give this a little bit more style and more of the Diablo-esque style. So I'm going to start working on that. The Sprague mode is coming together nicely. Yeah, so if you're familiar with HTML5, we have these video elements now, so I'm going to go ahead and drop in the media one. What do you guys want to see? You want to see life or you want to see mana? Let's do life.

Life. Good choice. So we'll have this here, and I'm going to have to do a little bit of magic here for. here for working with so that just kind of like drops it right on top first thing I'm going to do is also do a special border radius

on this guy to make it a circle so say goodbye to those ugly corners and then we're going to position things so they look a little bit nicer Mike I hope you're taking notes I'm going to quiz you on this after the show

uh okay I'll try my best. I'm saying lots of words and parentheses and brackets. I got it. But Amanda, I actually kind of want to go into it. You talked about how complex just having that little degree simple was. How complex is it to make these like bracket screens or any updates really with camp and stuff?

Yes, I think you've got like kind of two buckets of crack in screens and, you know, most of the time we're trying to merge them together. But you've got a bucket number one where it's an infographic. It's showing some kind of value like what we're talking about today where you're showing a temperature, you're showing a reading, you're showing some kind of informatic piece of information from your computer. And then your second bucket is more of the fun or more of the playful pieces. And so this is these web integrations are really cool because they combine both. We're doing an infographic, but we're doing it in the state. style of Diablo and making it fun and making it engaging. So in terms of how complex they get, each of the different buckets has complexity for different

reasons. When it comes to the infographic side, you're really trying to make a display that is intuitive. You don't want anything that's too complex where you've got to sit there and look at it and stare at it and try to figure out what is it showing me, why is it positioned like that, why is it like that? Also, when it comes to the text placement, you could make a five, you know, just like you're changing font in a presentation. You make a couple changes to the size or the placement of these labels and it drastically changes the way that you look at it when you're doing something. So a lot of

times when we're building infographic modes, we're thinking about, okay, how does somebody look at this very quickly while they're playing a game? How does somebody see this if they maybe don't understand computer and PC monitoring? How do we make it so they can kind of have a grasp of like where that number is at in relation to where it could be or where it will be or where it's at when it's idle versus where it's at when it's really going and you've been playing a game for a while and you're kind of getting into those upper echelons of your temperatures.

So really it's the complexity behind these screens come from making sure that they're very highly usable in the infographic bucket. When it comes to the more fun and playful things, the challenge for those comes in making sure that it's easy for people to be able to use it and you've got something that a lot of different people are going to want to use,

especially when it comes to the modes that we build internally we don't use the web integration to build the modes that she'll get from the drop down. So what Satang is showing you is fairly straightforward. But when we're building those modes in the drop down, we're utilizing a different set of technology. We're utilizing a different set of the way that this information passes back and forth and how it draws. So for those places, more of the kind of the placement and the sizing makes a big difference.

Also, it's kind of weird if you've never really worked with fonts, just the fonts themselves are really interesting. interesting to work with and the different types of font libraries that you can use in the different types of fonts. So you'll have some where they will lock the position of their digits. That's what you're seeing here as that goes between a 31 and a 30 or a 33 and a 31. That one and that three are the same width. They're the same size. So you lock your digit placement. Not every font is built that way.

So sometimes a one will be a little bit more narrow. A three will be wider and then you get this flex in the position of the infographic. And again, our goal is to make it so that when you're playing that game and you glance over you know where your eyes are gonna go you get very used to okay I've glanced over in my crack in I know where to look and I don't have anything that's distracting me from the piece of information I'm very quickly trying to ascertain then you go in the fun bucket and you're like okay we're just trying to show some Mario gifts here we can we can let this let this go and let this be free

a lot does it usually take to make one of those yeah so I mean in terms of the actual you know engineering work like so Chong showing here it's generally pretty quick it's a couple days to make some something new depending on how complex it is. Honestly, the hardest part is actually figuring out a design that works. That's what takes the longest. It's figuring out the design and then going through and mapping out, okay, how are we going to build this? How are we going to shade the different colors?

So like if anyone's got any of our single infographic modes, you saw we made an adjustment on that radial bar where the radio bar after the reading position is shaded out. So the the complex part of that was number one, advancing that design. It's already a great design. We see a lot of competitors copy that single infographic. So to take that to the next level is kind of difficult and you've got to be thinking about, okay, how do people use this and how do we make it simple? And then it's okay, we've got a design we're really happy with. Now, how do we go in there and we change the colors and we change the shading and we change the different backgrounds that are there? And then also

the different color formats are always really interesting too. So the different format that you might use might make whites look a certain way or lighter colors look a certain way and then darker colors look a different way. So usually to build something new is a couple of days, the longest part is getting to the design and getting to a place where we know how to build it. It's a lot of fun though. I realize I'm talking about a lot of negatives, but these are a lot of the fun kind of problems. I know they probably don't sound super interesting to a lot of folks, but for us it's a lot of fun to go through there and figure out, okay, how are we going to bring

this to life? Speaking of coming to life, it looks like FICO mode is it's lit right now. We're getting there. Yeah. We're getting there. So I think Satang did a font change in there and... Yeah. Blasted out our background color, it looks like. According to DeBorsk, the Diablo fonts are not monospaced.

Thank you, Borski. Yeah, so props to Borski. Borski is one of our awesome designers here at the company who actually built these. And it has taught me a lot about these types of fonts and color formats that we're talking about. And you mentioned how, I guess you say it's a fun problem, but like how do you come up with all the different ideas and designs that you want to put on those crack and displays? Yeah, I mean, for me, from a product perspective, so it's a little different if you talk to a designer. Like if we have Borski on here, he'd share a little bit of a different perspective because he actually

is a designer and I absolutely am not. But from a product perspective, you know, especially thinking about the crackens, usually, you know like this Diablo health is a good is a good description of kind of where the sort of easier kind of ideas come from you're playing the game or you're out there in real life and you see something circular and you're like okay

I know that's going to look good on a cracking so the circular shapes are a really easy way to go to kind of get to landing on some kind of design element but for me as a product manager really what my goal is is to get the most out of the designers

that I'm working with so we'll have some back and forth of like, hey, I saw this thing and can we work with this element of it? Or what do we really like about what we see from this other thing that's a square? What do we really like from this display from some other place? And kind of just talking through, okay, what do we like about that and how do we replicate the pieces that we do like? And so really, you know, as much inspiration as you can take from other places, those are going to be the easier ways to go.

But when it comes to something new, you know, we're typically chatting it out and using it ourselves and determining what do we like about it, what do we not like about it, how do we make this in a way where Satang can go in here and build it in a way that works for everybody. Yep, yep. So one thing I'm doing here, you can see most of this is looking pretty good. The last couple of finishing touches for the general aesthetic here would be to make this little backplate a little bit bigger so it kind of encompasses this GPU here and then I got to make a couple of font size changes.

Right now it's mostly just tweaks to the to how this looks to match the design that Sean Borski, our VP of design had given us for for this web integration. So just a couple of tweaks there. One thing I'll mention here is that I'm picking some of these numbers intentionally. So for instance, this backplate image here is 144 pixels by 84. So I'm just going to use that because I don't want it to, I want to use it at max size right here. So we'll do 144 and right of 84. And in a little bit I'll actually,

so right now I'm kind of designing for a very fixed size. So for those of you who have a little bit of web development experience, you're seeing that these are pixels, these are very fixed sizes. But we have, as we talked about earlier, three different crack and screens that were actually supporting. And those different screens actually have

very different resolutions. So the crackens that we have have a resolution of 240 by 240 pixels. Crackin Z, which many of you will probably have, is a 320 by 320 pixel screen, and our Cracken Elite, if I can spell, is 640 by 640. So in a bit, once I've figured out all the placement for everything here, we're going to work on making this so that it's scalable so that it works for every single one of our different product lines here. So this is important so that when you're making a web integration, you're not just making one for your specific device because, you know, there's other devices out there with different screen sizes that you'll have to support as well. So if you even see right now, if I start resizing this, you'll see, you know, oh, this, this text doesn't really scale well. Yeah. You know, so this is a problem I will solve in a little bit.

What's that wallpaper you have there, by the way, in your desktop, a bunch of alcohol? This is, yes, this is, I will do this. This is apparently a bar in Taiwan. I found that out later in life, but this is. This is just like a cool looking neon sign that I like. What this basically means is for everyone who's above 21, it's essentially talking about dreaming and being drunk at the same time or being as being so drunk that you're in like a dream state. It's like Mike right now.

I don't know what you're talking about, Satang? but it's a cool design aesthetic, and I like the colors and things like that. Yeah, that's a cool picture. Drink responsibly, everybody, if you are of age. Drink responsibly and play Diablo. Or don't, if you're not a fan of the season. You know, it's up to you. That's a controversial pig right there.

Hey, I mean, I'm not going to lie, I was playing it before the podcast. I'm going to go play it afterwards. So you got to give it a shot. You got to give it a shot. I actually think the Diablo community team is live right now talking about the recent changes. I'm sure they are. They're probably having a great time. But hey, give it a shot, folks.

You never know where you stand on something until you try it yourself. Cool. Ooh, that label looks much better. That background. Yeah, it will look better. I think I've got to change the font size on these a little bit. Yeah, it looks like it might be a little small. And the one thing I'll also recommend, you know, like really just trying to do this to show folks how simple it can be.

You know, if you're out there and you've got to crack in or you're maybe looking for some way to start to get into this space, the best thing that you can do for yourself is have some kind of project you want to work on that you actually care about. It's the easiest way to go out there and learn something about engineering. If you're trying to solve your own problem or you have something you're passionate about, It will keep you more engaged in continuing down and kind of powering through the difficult parts. So especially when you're first starting off, you'll hit points where it's just really confusing or you're just getting kind of overwhelmed by the things that you don't know. So if you can kind of have a clear path of like, I am trying to accomplish this thing and it's important to me,

I want to get this display bait or I want to make this thing to make my life easier. It will make it easier to go out there and learn. All right, so now we're at this point where this is the asset, one of the assets that was supplied to me by, from our design. So this pretty much looks like this. I'm just trying to eyeball a little bit, but it seems pretty good to me. I think the only difference I see is the font looks bold. Yeah, it's a little bit bolder. You're right. I can add a little bit of extra weight here.

You know, CSS is very powerful. You can just, you can imagine it and then have it appear. So you ready? Three, two, one. Whoa. There it is. I'm glad you showed that design because that's the other side of this. That's interesting. You might look at some kind of flat or just a static picture of a design and then like I was saying earlier, going in and trying to replicate the things that designer was able to do in design tools in an actual coding language is not always a one-to-one

match yes i will need to get approval from sean later to see if he's okay with this that's usually how the workflow will go there'll be a design review there'll be a product review everyone gets to and obviously an engineering review as well for the code side everyone gets a a second to take a look oh this looks awesome to me how do i get this on my crack and day what do I got to do yeah let me add in a couple of things let me do the scaling thing right now and then we can start publishing this out so I'm gonna do a little bit of a trick bear with me on the the little math and the assumptions I'm gonna make but basically you can convert pixels to a more scalable format I'm

gonna use viewport widths the reason being that All those crack-in screens that are those resolutions that I had listed out are all square resolutions. So I can kind of use that to our advantage and resize all of the font sizes here, which you can see like don't scale very well as I'm, you know, that's coming out of bounds and everything. Rescale those specifically the same way that the video is rescaling based off the size of your screen at the time. I'm going to do a little bit of math here for something like that. Right now, I kind of has started from, I designed basically this for the roughly, I'm looking at the numbers up here. The 640 by 640 resolution, which I'm going to try to get back to.

Yeah, that's close enough. And it looks good here, and now I'm going to do some scaling magic to make it work for every other. resolution as well. So to do that if you are fond of some more math, let me use speed crunch, a calculator that one of my engineers introduced me to. We basically are going to scale everything off of 640 pixel width. So we need to convert this into like a ratio off of 640. So what I'm actually just going to do is do 144 divided by 640. That's 650. That gives me this, and then to do that into viewport width, that's actually going to be 22.5 VW viewport widths. Bill and next is saying make use and contribute to FOS software and tools whenever possible.

Yeah. So if I, basically, what should happen is actually nothing should happen as soon as I save this, you should see no change here, except for the fact that, now this backplate should probably resize pretty a little bit better. But yeah, almost. I need to make a couple more changes here for the height as well. Yep, so I'll do this real fast. How long did it take you guys to get like comfortable with understanding like

certain like sources and stuff like that? For me, like I have no idea what's happening, but for you guys it seems like it's It's almost natural to be like, oh, yeah, I need to fix this part. Like, how long did it take you guys to get there? Unlike the placement, things like that. Yeah. It only takes having to work through it about one time to be like, okay, we can start to see the problems that are there. So once you kind of go through these types of things one time, you're like, that's a red flag, that's the yellow flag, that's a red flag, that's a red flag, we got to make sure we do this.

So, yeah, from the outside looking at, I'm sure it sounds like it's, you know, pretty, complex or pretty intense, but once you kind of go through it the first time, you're like, okay, I've got this. And in general, like this, the things we're talking about are not relegated to just cracken screens. You run into this doing pretty much any UI work. You have to think about text overflow and you have to think about border placements and container sizing and flexing the different widths and contents. So this isn't exclusive to the crack. And this is something you have to think about in all different parts of web development, depending on what type of libraries you're using and how much you're building yourself or us using from other people.

Double check my mask. It's looking really good. I like it. I'm ready to use it. I'm ready to get back to Diablo. I'm sure my Diablo squad is like, what is going on? Where is she? We got to get back to this malignant, whatever.

I don't even know what I'm doing. I'm just doing malignant, whatever. Do you have a crack in right now on your setup, Tudong? I don't, but Amanda's going to be showing that often. moment I don't need this you already have that I saw in the chat just real quick somebody made fun of my large water cup and I just want to say water and drinking water is very important y'all so I was wondering which cup they were talking about was it yours they're talking about this is a I think it's a 32

ounce yeti it is it is a large cup but I'm in Texas it's real hot and you have to make sure you hydrate her you can't play Diablo true it is also a water burger I don't know if you can see on there shout out to water burger what a burger over in and out and out for the price water burger for the taste i don't i don't want to get in a fight with you on the podcast we'll talk about it let's talk about this later mike this was looking pretty good um what do you what are you trying to do right now satong just are you triple checking your work i am oh actually do not know what just Okay, this looks right. That scaling looks right. So now you can see before we were, you know,

the text and everything was not really scaling well with the image, but now it's scaling very well. So this basically would work on any type of size of Cracken Screen. I just thought of the next NZT product we should make. We should make smart watches, right? So we can put web integrations on there. Imagine you had some of your wrist and it like gave you your, your, your, heart rate or something. That'd be dope. That would be pretty sick. I would and you could get PC monitoring alerts on your watch. Yeah. Or you could just have like a little widget and you could just change your lights. We got to do it. Like your PCs overheating the watch gives you a little little zap. Yep. Turn off your PC. PC's overheating and now you're overheating so. And we can make the

watch an anti-static wrist strap. Imagine. Yeah, a multi-use tool for sure. Johnny, if you're watching, make it happen. So with this, remember earlier I said we also have mana as an option instead of life. I'm going to add that, and I'm also going to add the option of doing your CPU instead of your GPU. And then we'll publish. We're running a little bit short on time. So the interest of time, I'm going to do a little bit of copy-pasting.

That's cheating. Can you imagine if you had to go through like, a day of work without copy paste no I would be furious that would be the worst or like if you couldn't use a calculator like

you have to do math but you can't use a calculator oh my head would explode I have hard time doing basic addition I mean that's also I'll also point out while the Satang is wrapping this up even though we do you know the crack and screen is visually a circle pixels are squares and circle really isn't a concept especially when you're talking about like

back-end technologies the circular concept just isn't a thing it's it's square lines it's straight lines it's boxes so there is actually quite a bit of trigonometry involved in things like that circular bar around the infographic and that's another place where Mike you asked a question earlier of like how long does it take you to to grasp these things and get them when it comes to like the trigonometry of drawing a circular line in a set of square pixels. I'm sorry, even if any of the engineers on our team are listening, y'all don't know that stuff off the top of your head. You got to Google it. You got to research it. You got to figure out how you draw that and they got to work together on those things. So some of those more

complex parts are pretty interesting as well. All right. Oh, I've broken something a little. What did I break? How often do you guys like find a code and then I saw a meme of us is like three bucks found tries to fix the code five bucks found how often does that happen?

Constantly every day all day and what we what we call that is called a trade off so you'll hit a spot where you're like well it looks like this do we want to change it well we can change that but if we do it's

going to make this look like this or it's going to do this and that's not just in like design or in kind of visual elements, there's tradeoffs in pretty much every single aspect of engineering. You're having to pick, okay, are we going to do this? Where are we going to take this route? What's the best outcome? That's why it's super important that your vision and your goals are super clear.

Some things might feel like they're really impactful decisions, but they're actually not. And so as long as you're kind of driving towards, we know exactly what we're trying to end up at. It makes those trade-off decisions a lot easier as you go along. Okay. So now that we have this going, I think we can just, uh, So let's say I wanted to change us to CPU instead.

I could do something like this. And now it says CPU. And if I wanted to, let's say, let's do Manna instead for the background. Oh, you have another visualization for Manna. I managed to miss you doing that. My bad. So here's a little bit of knowledge. So even if you don't want to do any of the engineering work or any like that for this development,

Here's a little bit of web knowledge. You can add these things. These are called search query parameters at the end of URLs. They come after these question marks. So if you ever see that, you see them a lot on like websites where you need to, for instance, let's say, let's say you're searching for a flight or you're searching for a hotel. A lot of times they try to encode a lot of data on the page

on these URLs themselves. So that's what this type of stuff is for. So I'm just using this to let us basically pass in some decisions, some context of I want to show CPU, I want to show what kind of background here. So yeah, this is actually ready to go. I'm going to go ahead and publish this. Save all my files. I'm going to get rid of the mock data actually, so we don't need that anymore. And then are you guys ready to see it on a cracking? Let's do this. So when you publish on GitHub, is it instantaneous? It just goes,

right up there. Yep. So I'm going to solve this enable Wago mode. Just need to do a little bit of things to hook it up and then I can push this over to GitHub. And so now when I refresh this you'll actually start this, you'll see the code here. This is all everything that we've we made. And I'm going to now do that thing earlier that I wanted to do, which is probably the page so if I come here to settings and pages you choose a branch to deploy to and then save that so just for all the developers who are actually interested in this into making a web integration you can do so by using GitHub pages to basically deploy a website for a particular

repository so you will see that appear as it's building right now. So in like another minute or so, everyone, including people on this call, including everyone, all the listeners, will be able to go to this webpage. And I feel like everything you just did right now is you basically just made a web page, right?

Like a little web page that goes on your cracking. And I guess when it comes down to it, that's what a web integration is, right? It's just a web site that you're making to display on your LCD screen. Exactly. The moment of realization, Ivan. That's why earlier when you were talking about the name, I was kind of laughing.

Yeah, it can actually click right now. Yeah, cool. So I'm going to paste this to you guys. Yeah, when it comes to names like that, honestly, our goal usually is to try to name something what it is as much as we can. And sometimes when it's a complex topic, it's hard to name it even simplistically. But in general, we're trying to name it. just you know what's important is that you can get there and you can click on it I

think we could call it just about anything and people would click in there and check it out and try it out so we generally don't get too wrapped up into names but always try to name them as plain and simplistically and truthfully to what they are in general it's kind of the NZXD approach with copy is trying to name and and describe things in the way that they are like Figo mode it's fire yeah so I'm going to I manage you get that link Oh, sorry. All right.

I got the link. So I'm going to go ahead and pop it in the cam and show you all how to actually take it from the web link. Should Amanda be sharing your screen right now? I'm going to stop sharing now. And then I think Amanda has to turn off her camera and become Yoshi. All right. I see Amanda's cam. All right.

Are we good, folks? Yeah. Okay. So here I am in. cam. So I took the link, Satang, pasted it over to me. So I'm going to go ahead and drop into the lighting panel and then pop over to my Crack and Elite. Let's select the web integration mode. We have this little tag here, this new tag, so folks can see the one that we're talking about today. I'll point out really quickly this little settings icon. It's a little discrete right

now, but this is how you make adjustments to your FPS. So I'm going to go ahead and bump it all the way up. And then for what we're doing, we're making this, taking this website that Satang just made, And we're going to be putting it into the custom section. So we'll click into edit to go into this section. We'll paste our link in here, and we'll hit this arrow. And you can't see it right now, but it is showing on my Cracken display. So I'm able to see my GPU temperature with that blue background

and streaming with that Diablo mode that Satang just made. Oh, nice. So it's literally just copy paste. It's literally copy paste. Anybody with one of our LCD crackens can use that right now. All right. I actually have it right now. Let me see if I'm smart enough to do this.

Hold on. You can handle this. You've got this. I'm clicking the link. I'm copying the link. I am going here. And oh, you guys want to see it? Yeah.

Go it off. There it is, baby. Wow, nice. A chilly CPU temperature or GPU. Someone says, can we post a link in chat for them to use? Yeah. Do you also get these at developer.nzht.com? There's a community tab there on the sidebar where

Tong and Amanda are sharing all the cool community submissions. And this will be on there soon. It was not on there yet. but we'll drop the link for this one in there right now. It's pretty good and I like it. I think the life version will look better next to your RAM there, Mr. Ivan. I can also change the RAM color. Awesome.

Thank you to Tong for walking us through all that and making another cool web integration for us to use. I'm going to keep this on my cooler for a little while, I think. Awesome. Yeah, I'm going to keep it rolling for the day here. We'll see how high we can get this. that GPU temp while playing Diablo. And for those that want to learn more about

web integrations, go to developer. nzxte.com. And right there, you'll get a lot of helpful information. You'll get all the copy and paste data that you need to pull in information from CAM. You'll get information how to create a custom web integration, you'll get links to the community submissions, et cetera, et cetera. And we're also going to be saving this stream as a VOD, and we'll upload it to Twitch.

I don't know, now that we did this, this is the first time we've done this. I'm not sure about YouTube because there was a lot of, like, pixelation going on there in the beginning, but we'll take a look after we publish it. But we'll save this at least on Twitch so people can go back and take a look. I know if you're tuned in on Spotify or whatever, it probably did not make good radio, but trust me, and you do want to go back to Twitch and watch this Vod because the Tong walks you through everything step by step. And he did a really good job, making it simple. Like, you know, even like I said in the beginning, I'm pretty dumb.

And I was able to just watch him work and figure out, like, you know, it's, is literally just making a little website for your screen so it's not that complicated and especially if you just want to um you know grab a community submission and plug in the the the URL into your into your crack in that's even easier so pretty pretty cool i'm happy with my fuego mode yeah thank you satang that was awesome yeah thank you guys thanks for having me on it before we wrap things up is there anything uh you amanda or you um Sitang want to mention before we go into announcements? I do.

I just want to say I'm just absolutely going to cliff hangar everybody, but we are working on some not related to web integration, cool things on the crackens, and we are super duper excited for the next couple months here and some of the things that we are working on. So I'm just, I'm going to cliffhanger everybody and just say we're super hype for what we're working on, and I know that y'all will like it too.

Right. And the other thing I will also say, I think all of us are using our, NZXT mini mic. I will shamelessly plug for how good of a microphone that is. It's the only microphone I've ever gotten compliments

on for the quality of my voice. So I would highly recommend taking a peek at that if you're in the market for a new microphone. It's a good one. Yeah, that's actually, it was, I guess I will go into a little bit of announcements and thank you for that. Nice little segue. If you guys want to

get the capsule mini or the Bumar mini, you can go, there's a command and chat, but you can check out NCC.com. They are awesome. It helps save on basically size and performance. It's awesome. And then along with another audio thing, we also have a whole new audio system. Like you said, like we showed in cam. You can also edit it in cam as well. You can change up like the DTS. You can change up like the equalizer and everything like that, side tones. Basically, we have a whole audio system of speakers, subwoofer, a headset and a switch mix. So I'm actually

using the headset right now. Basically, get you some more base out of that headset. Cam will help you out with that. Oh, yes, exactly. Oh, yeah, there's a question about that. It's like, why is there no base in my headset? You can actually change that.

So you can add more base into it. Actually, I'll show off the thing real quick. Let me just show off the cam. You can actually change up your specific ones. Like, you can change up all these different surroundings aspects. But I just use the FPS one because I play a lot first-person shooter so easy-peasy let's easy yeah that fps one is a good overall profile as well but also a base boost profile in there in the upper section um if you're looking

specifically to boost up the base on that that headset oh yes sorry base boosts here but uh let me go ahead oh yeah and then uh go ahead check it out at zec.com you can change up uh pretty much everything in cam cams awesome also estimation point cam and chat guys download it it's awesome like Like, I've actually been very impressed with how much you guys have been doing, especially with, like, all the new stuff that's coming out with the web integrations. Like, I never thought I would ever think about the cooler ever having something like customizable, like, web integration with it. I thought it was just going to be, oh, yeah, just going to display the thing.

I can display a GIF done. This is awesome. So I'm very excited to see what the community also brings out, too, as well as what you guys bring out. I think that's it. Ivan, do you have any other announcements or anything before I get into the codework? Just want to thank Satang and Amanda for joining us on the podcast once more and for everyone that tuned in live. For those of you that stuck around to the very end, thank you. You will get a secret word for a giveaway.

So Mike, what's a secret word? All righty all. So for those that don't know, we are doing a giveaway for a hoodie, a t-shirt, and a sticker in a menu pack. And there should be a little feature right there called Secret Word is for those. that are live for joining us live on the chat. So the code word for that is Barbie Heimer because the movie's released today. So Barbie Heimer is the code word, secret code word for the 500 extra entries. Everyone better be watching both of those movies.

And the correct way is you do, what's it called? You do Oppenheimer. An Oppenheimer. Go get some lunch, relax. Go watch Barbie. Then you have your existential craft. crisis because you watch barbill that's the correct way to do it um so barbie hi max oh yeah imax first row middle seat you you you see that nuke it's just everything's gonna go it's great um so barbie

hyper is the code word for this day so i guess that is so that's a thank you to amanda sitong for joining us on the podcast to give us a little more insight into the web integration uh and i guess We'll go into the little outro. So thank you guys for joining us. And remember, tune in live every Friday at 10 a and Pacific Standard Time on the official NCC Twitch. And don't forget to listen to previous episodes on Apple Podcasts, Google Podcast, Spotify, and SoundCloud.

Like I've said, we will be saving this TwitchFod so that we'll keep it so anyone that wants to learn more about the web migration, they can just click on it from the Twitch. And please leave it as a positive review if you like what you hear or if you didn't. Got any questions for us, send an email to podcast at ncc.com or tag at n60 on all social media platforms thank you amanda satong thank you ivan thank you everyone see you guys next time