Hackweek Overview - What Is It, What Did We Build

What's up, everybody? We've got a Hack Week overview for you today. So Sanity has a entire week, as every single Yarn. It's called Hack Week. And during Hack Week, you are allowed to go and build absolutely whatever you want. And this is a really fun week because, you don't have the the pressing parts of, like, the rest of your your business or the rest of your job sort of having to get done. You can just spend some time working on whatever it is that you want. So, we all all three of us did three totally different projects, and we're going to detail what we did just briefly here in this podcast.

And then in the next three episodes, we're gonna go a little bit more in-depth as well as provide some, bit more video as to to what we actually did showing code, showing some of the hardware we worked on.

Pretty fun projects. I'm really excited to share what I've been working on. I'm really excited to hear what these guys have been working on as well. Yeah. My name is Scott Tolinski,

and I gotta say, Wes, you said it's free from the normal things of work. I worked

so hard on Hack Week. I I was like, Courtney I started the week before.

Oh, my yeah. I noticed. I saw you posting stuff on YouTube. I'm like, Wes is starting early. This is not fair. I'm gonna have to, like so I did a bunch of preplanning work for mine because I didn't wanna start too early, but I worked so hard. I put in nights. I put in extra, extra, extra time. I was working on I woke up Wes waking up early to work on it before the kids went to school.

It was a long and, a hard week, but, honestly, the end results were pretty amazing for all of us, I think. CJ, how about you? We have by the way, audio folks, CJ, Reynolds is joining us today because he also did a great Hack Week project.

Yeah. So same experience. I think that's one of the things about being able to work on anything you want. You can pick the things that you're, like, really passionate about.

And, yeah, I I got sick last week or was that Hack Week? Whatever Hack Week was because I'm still recovering. But, I still I worked through the sickness because I was so I liked my idea so much. And, so yeah. It was really fun. Yeah.

Yeah. And and it does say something about motivation here. Yeah. We often talk about motivation on this show. It's like, when you are motivated to work on a project, you will push through and learn so much more. And I I used a bunch of technologies that I was fairly familiar GitHub, but threw them together in a way that I have not used them before.

And because I was so motivated to fix this, man, it was such a joy to learn and to push through and work on all this stuff just because of the sheer motivation of it all.

People out there, if you are in a place of having any sort of influence over your company, get them to set up a Hack Week.

The results that came out of Century's Hack Week were unreal.

Did you guys watch the presentations,

for the Century Hack Week? Yeah. I watched all the the Toronto ones, and there's there's some really cool stuff. A lot of people exploring stuff, but a lot of people simply just, like, fixing stuff that bugs them. You know? Yeah. Like, it's just like, this has bugged me in Century forever, and and here, I just went and fixed it. You know? I I took a week and went and fixed it, and I was like, holy shit. That's way better. Yeah.

Yeah. So Century has awards for all of the, Hack Week participants, and one of them is just ship it. And that's where people can vote on, hey. This is something we need, so ship it. And there were there were several in the demos that were like, yeah. This is awesome. Like, this why does why didn't this already exist in Century?

Yeah. There there is, by all accounts, projects that come out of the Hack Week every single year that go directly into Century, either months later, weeks later, half a year later. I mean, valuable stuff comes out of this thing. Yeah. There was a 156 submitted projects.

That's that's amazing.

But so we didn't actually build stuff for Century.

We built stuff either for the hell of it because we are interested in how it works, and we we get to talk about it and explain it to to you, the listener. Or I know Scott built something that we've been been dearly Node. So let's do this right now. Let's do each of us can give a one sentence of what we built just to hook y'all. Elevator pitch. And then and then we'll go into, I don't know, ten minutes or so explaining what it is that we did. So, I built a real time web controlled LED grid, which, I have right behind me, and that was a lot of fun.

I built a real time competitive coding platform focused on real world user interface challenges.

Nice. And I built a custom Sega Genesis game. I'm gonna swap to the camera.

It's it's running on the Sega right now. I'll tell you all about it, but, you might Node you can't see it usually because it's blurred, but there's a Sega back there, and, I built something for it.

That's amazing. Unreal. I can't wait to hear about let let's I I don't necessarily care that much about minor Scott. I wanna know how the hell you built a Sega game, so let's start with you.

Okay. I'm just joking. I am excited about that, but, like, man, I when you told us you were doing a Sega game, I was like, how do you even do that? Yes. And that was my question too. So, yeah, day one was, is this even possible?

And I had a hello world by the end of eight hours. It took me eight hours to get a hello world. But, the the modern ecosystem for doing this kind of thing has, like, kind of exploded. I say modern. A lot of the these tools haven't really been updated in three, four years, but the technology is 30 over 30 years old. Modern. Yes. Yeah. So how did I do it? There is a software development toolkit called SGDK, and it allows you to write C code for the Sega Genesis. So the Sega Genesis, all of the original games that were written for it were actually written with assembly code. And so assembly code is basically exact processor instructions, and it's very low level.

It's not zeros and ones, but it is it it says, like, move this variable into this memory location, that kind of thing. But with the SGDK, you can write c Node, and it abstracts all of that away. So for a modern developer, it it's a lot more approachable. You have functions you can call that say, like,

create a sprite and set sprite location and and different things like that. Yeah. I think my favorite assembly code video game lore is that the Rollercoaster Tycoon game was written in assembly.

And that's crazy.

Yeah. Written in assembly by one guy. It's three the three d game we're talking about. Right? Like, Roller coaster tycoon. The the the yeah. Yeah. Insane. That's

yeah. And so yeah. And and so yeah. Day one was just getting a Hello World, and with the s g d k, it was fairly simple. They have, a bunch of samples of, like, different kinds of things that you can do. I had the idea on day one. I proved that I could do it. And then at the end of the day, I ordered what's called an EverDrive.

So this is a a a Sega cartridge that you can put an SD card in, and you can just put whatever ROMs you want onto that SD Yarn. And that's how I have it actually running on the Sega. Oh, okay.

Yeah. Man. Wow. You know you're in deep when when c is the abstraction level. Yeah. You know? Like like, I'm sitting here writing TypeScript, which is about 14 more abstractions on top of that.

Yeah. I will say for anybody that wants to dip their toes in this stuff, it's not that scary. I I think, like, a hello world c program like, the the main thing about c is, like, it's it's lower level and that you have to manage memory, and there's a lot more things you have to do manually, but it's the the JavaScript and TypeScript language are C style languages.

They're the the syntax itself was informed by literally the C language. So Mhmm. Even just looking at C code as a JavaScript developer will look somewhat familiar. It's nothing crazy. It's just you kinda have to learn about pointers and structs, which if you learned

Mhmm. Objects, you can you can learn those things as well. I I'm curious about the game engine side of things. Yes. Because your game was like a little platformer or a little seer CSS Century Seer logo JS bouncing around.

Wes, like, what game engine is that?

Yes. So there's nothing official, and that was so day I wrote, like, a whole timeline of what I went through, but, day three was where I was like, okay. I need to figure out if there's a game engine now. Day day two was, can I just get graphics on the screen? And I ended up getting a Sanity logo.

I my idea was so if you've ever played Sonic the Hedgehog, you Node, at the beginning of Sonic the Hedgehog, it says, Sega.

I wanted to do, Century.

Like Oh, yeah. With the Century logo. So Yeah. Day two JS, like, could I just get graphics on the screen? And, SGDK made that fairly trivial, except you have to worry about memory.

This thing only has, I think, is it six 16 k, kilobytes of memory? Mhmm. And then the Sega itself supports 256 different colors, but there can only be up to 64 colors on the screen at a time.

And then for any given tile, because it's a tile based system, that tile can only, have up to 16 colors.

So learning all of that was probably the hardest part JS, like, figure out how can I convert my images to be just 16 colors? And then from there, if they're too big, I have to break them down so that they can get loaded onto the screen. Yeah. So that was day two. But then after I figured out all all of that, I was like, okay. I wanna be able to design a level and not have to, like, literally write zeros and ones in an array to define, like, collisions or where tiles should be.

And so I found a project called Platformer Engine, and it's just someone that was working on this, like, over five years ago, and they tried to make it a little bit easier. So, basically, they had c code for a camera, for a player, for joystick movement. So, basically, all of that code was written for me where it was fairly high level to say, move player to x location, move player to y location.

They wrote that code for me, and then they had a fairly simple level Node, so they basically had this giant image that was like a Vercel.

And then they had a c matrix, like a width by height matrix that defined where all of the collisions were on this map. So imagine, like, a flat tile map, and then for each tile, you can say, well, this is a ground tile or this is Yep.

Oh, okay. That kind of thing. And so in their code, they literally had a giant array where it was zeros if they shouldn't collide and then ones if they should collide. So one if it's if it's ground.

Mhmm. So they had all of that code written, and then that so that made it fairly trivial. So, basically, they had an example map. They had the collisions, and then I could start to go in and and modify things, because there's for modern web for modern game development, there's a lot of tools out there for developing levels and developing tile maps.

So the TLDK was the first one I came across. The or the LLDK.

L d t k. Dude, I've messed that up so many times.

Vercel designer toolkit. But, yeah, it's a it's a GUI app where you can, like, draw with tiles, and then it exports. And so this engine supported that. Yeah. And it made it so that I could load the map in, I could define my own tile sets, and then load that into the game. Cool.

Yeah. I I I explored the LDTK

when I was checking out Godot. It is like it's it's pretty pretty dope. Yeah. A lot of people use it even for building Unity games, which is it's something to be said about, like, yeah, it's thirty years later, but now I can use these more modern tools to to work on in such a like a simpler, lower level game. Yeah. That's cool. I have so many questions just about even just storing graphics, but I'll I'll hold it for, the longer video that we do. But yeah. Yeah. We'll be doing a technical deep dive, folks. So if anybody wants to,

get deep onto these things. CJ, what was the end result of your Hack Week? How did how did you finished it. You made your your you you made your video game.

What did you get out of it? Well, I'll say the end result is I only have a single level. I'm I spent, like I said, a day figuring out graphics, a day figuring out just can I have some sort of game engine so I don't have to write all this with zeros and ones and arrays? And so on the last day, I was just scrambling to get my own custom graphics in there and my own custom level. So at the end of the day, I'll show you, if you're if you're watching on the the video Node.

This is the game.

You are second, my controller needs to turn on. You are seer, this little triangle here, and my thought is you can collect traces. So these little balls are traces, and eventually, you'd be able to bottle battle a bug boss where you throw traces at him to solve the bug.

I love it. But this this is the one level. Basically, it's just like a a platform that moves up, and you can and you can jump across. So that was my finished result. I mean, I'm not proud of the fact that I didn't get a full game. Like, there's no boss level. Basically, this this level is the only one. But the fact that you can create at least an entire level in less than a week these days is is, I think, pretty impressive. Yeah. So that's the outcome. Didn't get to finish the game. What did I learn? There's so much more I wanna do. One of my initial ideas was, I wanted to connect my Sega to the Internet just because it sounds, ludicrous. Like like, why would you do that? But it should actually be possible. So now in my spare time, I'm gonna be I'm gonna be looking into it because one thing I learned is the Sega controllers are actually a nine pin serial port. So you can actually read and write data from where you plug a controller into, and that could potentially connect you to the Internet.

Okay. Oh, that's cool. Alright. Let's save some of this for the deep dive because we're getting a little too in the weeds. Yeah. Yes. This is cool. We we got a lot of questions. Okay. Next one. Wes Yes. You made something with hardware JS always. This is your third Hack Week project,

and all of them have used hardware. Is that correct? Yes. Yes. All of them. The first time, I did a little custom keyboard shortcut thing. Second, that did some LED lights. Last year, I did what did I do last year? Printer. Oh, receipt printer. Yeah. That that auto printed off, like, photos and videos for or not photos, but photos and texts from people on the Internet, and it auto printed my my Sanity issues, which Wes really cool. And this year, I did a real time drawing LED grid that is is web controlled.

So it was really cool because I I had to build the whole hardware LED grid right here.

I had to solder a whole bunch of stuff together. I I designed a whole bunch of stuff in in three d and three d printed it. And then I built a whole software stack. So there JS, like, a there's a back end, which I built into Cloudflare Workers. I'll go into the weeds on that in the in the next video.

And then I used PartyServer that connected it to a React based front end, and and you're able anybody's able to go ahead and draw on it. And, like like, right now, there's there's four people in it right now, I'd which is kinda kinda fun. I had, like, 80 people in it at at one point, and everybody sees it. And then I wrote a whole, like, I don't know if you call it, like, a recon reconciliation engine, but, basically, I wrote a whole thing on the server that would take the pixels that have changed as part of, like, the the web app state, and then it would send it over to the grid.

If you're watching the video, it looks like crap on my camera, but it looks so good in person. Like, the colors are just absolutely beautiful, and I'm I'm really happy with it. It's just very filming light is a very hard thing to do, especially when you're also trying to film yourself. It's all light. Technically, you're you're filming light even if you're not filming light. Right? But, like, honestly, I Node doing hardware projects because it like like CJ, it gives you a bit more of an appreciation for constraints.

I hit so many things that were that I I would not necessarily hit in, like, a web app just because there's there's limited memory. There's, there's network latency. There's low powered processors. The the thing is running on, an ESP 32 microcontroller.

I have power constraints because this is turns out this is a a hell of a lot of LEDs. You know? I have a a huge appreciation for it. There's there's, you can only update it so often. You know? I tried to do real time video, where it would take my webcam, or I did do it. It takes my webcam and paints it in real time to the LED grid. So it gives you so much more of an appreciation for people who work on hardware, where you have so many more constraints, as well as as people who work in, like like, Scott, where you're trying to connect this stuff to to the Internet and you don't necessarily have you can't just Npm install something and and slap it on, like, a $5 microcontroller.

Mhmm. There's you're a lot more limited in in things that you can touch.

Yeah. I suppose to say I love how big it is because, like, I I've tried to do little hardware projects with, like, a mini mini LED matrix like that or even Node even smaller than that, and it was a pain to get it up and going. So I can't imagine wiring you have six panels or nine panels up there? Nine panels. So this is a 16 by 16

It is big. Panels.

So it's 256, and they have nine of those, which is about, what, $23.00 6 or whatever, who's good at their 16 Bos math.

And just simply scaling it up was Wes kind of a hard thing to do because there are power constraints. Right? Like, basically, the way that this works is that the the power is injected in on one. I'm getting the weeds, but, there's power constraints, and you can't just run a whole bunch of power right through it. Right? You have to inject the power, and then there's constraints around sending a lot of 200 2,300 pixel updates at once, and there's constraints around what's the best protocol over the network to to do it. So I'll I'll get into all the weeds there. So that was really fun, and, like, this is the first, like, bigger project I've done with durable objects. I've built three or four things here and there with it, but this was, like, the first time where I spent several days working with CloudFlare's durable objects.

It was kind of a kind of a fun one.

Yeah.

That's so dope. Yeah. You you took an opportunity to pick new tech or different tech Yeah.

Hardware, software, all encompassing, and I gotta applaud that. That rules.

Definitely. Alright. Let's hear what you got. Yeah. So I made a,

yeah, real time coding platform for my other hack weeks. I I think they they all haven't been real time. The first one I did Wes, like, I wanted to do, like, a Node replacement that's saved to markdown. So that way, we could edit notes in real time, but Node to markdown.

I could do that so much better today if I were to take on that project again. It ultimately wasn't very successful. It it it worked. It, like, created PRs and stuff, but could have been better. The second year, CJ and I teamed up and did a, Tori app for our production assistant where it can create show notes and stuff. And, Randy uses that app. We gotta push out an update. I got a a little modification I need to make to it, but it's a it's an app. It's in my desktop right Node. Syntax production assistant. So very successful there. And this year, I decided to take a a bite off something that was kind of large and build a competitive coding platform.

We do our our CSS battles on YouTube, and we've often lamented that they're not real world UI. Many people in the comments have said the same thing, like, what's the point? They're writing bad code just to and the point is for it to be fun. But, I just was wondering, like, alright. Is there another way? And then I just started getting into all these interesting ideas of, like, well, what if we wanted to write the code on our own machines and have it update? So, it gave me an opportunity to explore, you know, my, local data syncing system stuff. It gave me an opportunity to work deeply with the file system API and then, build a a full on ass app that has, login accounts and what my my schema file is 500 lines long. So it is a legitimate application that we will be releasing here, so that other people can use this and engage in battles and, put together leaderboards and all kinds of fun stuff.

Yeah. I'm I'm pretty excited about that because, like, me and you did a what was it? Like, we we did, like, a button. Like, can we build this button sort of as a CSS battle, but also, like, this is this is real world. This is something you would actually do instead of just try to put, like, a Pokemon ball on a screen.

And I love those types of challenges as well because you often see something cool on a website and you say, I I would love to to rebuild that, and I wonder what how Scott would approach this type of thing.

And Wes, yeah, we just use Vite locally, but it's just so much better to be able to, like, have, like, a full blown app JS well as for editing sake, you know, being able to see what how everyone's doing all in one screen.

There's a number of benefits here, and a lot of that was taken into consideration when I was, like, planning this out. Like, one, we need some way to make it fun, for viewers. Right? Because that was the big concern. It's like Wes record these things. We've done a couple of UI battles, and we're like, I guess who won? We choose who wins? Okay. That's really hard to do.

So, like, having user voting was one thing, but, like, what are they voting on? So I had voting on, like, most accurate, most real world Node, and, like, how is how does it feel, the best feel? So users can vote on those parameters.

They can use the code because the code is, being loaded as not just an image. It's being loaded as code. They can use it and and try it out. So voters, the audience, can now vote, and we could publish the battle results before we publish the video.

Therefore, people can vote, and we can use that in the video.

I love that. Definitely. I will say, Scott, I you you win the Just Ship It award for the ESLint team, because this is something we Node, if I've won. Yes. And, like yeah. Yeah. The elevator pitch is CSS battles, but real UI. That's awesome. Because I think, yeah, real other people would use this too.

That's some of the comments I saw whenever, your your Hack Week demo video was playing.

People also said Wes could use this for interviews, like, when they're when they're hiring somebody to, like, build UIs.

As you can see, like, what they're working on in real time, you can see their code. So, yeah, it's it's it's an awesome idea. Yeah. There's a lot here. A lot of fun technical challenges. And

what, the first hack week I did Wes I did the real time whatever, about, like, three days into the hack week, I was like, nothing is working out. I've changed the libraries, like, eight times. I'm, like, struggling, to do anything.

And this time, by day one, I had login. I had the whole coding interface, not like the UI for it done, but, like, saving files locally, saving to the date like, I had all of the difficult technical challenges done day one. And then day two could be focused on app stuff, and then day three could be focused on UI, and then day four focused on, like, CSS and UI. So it was like the technical challenges portion of this got done in a way that was so acceptable so early, and that's a largely a testament to the stack that I'm working in. So when we detail that stack, I'll I'll I'll show you guys just how simple this application is to work on, and that's one of the big reasons I was able to do so much. I built a whole CSS admin interface for this thing too, which you guys didn't even see. So Yeah.

It was really interesting to see the caliber of stuff that people built because they were able to use AI.

It's just incredible that, like, like, just from last Yarn. Like, last year, we had AI, but, like, this year, we have Different levels for sure. Vibe coding absolutely everything and spitting out, like, whole ass apps, which is is wild wild to see. Like, people are able to take their ideas.

And, like, even producer, Randy, we're gonna have a whole video. He he made, like, a whole ass app, and it was it's unreal what he actually built. And and, like, he's like, I don't know. I'm just, like, a video guy. My favorite thing about Randy's presentation

was when at the end, he's like, if you wanna know how any of this works, don't ask me. I don't know. And I was just like,

that is so funny. So I I kind of saw it as a challenge too be because I was writing c code and, like, the SGDK, which wasn't that popular, like, how well could AI actually write code within that context? Yeah. And I and I figured out some things, which I'll share on on the deep dive. Like, it wasn't perfect, and so I was also kind of at a handicap where I don't have a bunch of trained code that this thing could just generate on. Yeah. I did figure out some ways to work in older

code bases with it. Yeah. I wanna ask you guys about your usage of AI in this project.

Don't know, maybe six months ago. And I just I just took that, don't know, maybe six months ago.

And I just I just took that, and I just said convert it to React. Right? And I built it in vanilla, and it did all of that. And I leaned on it pretty heavily for the front end because I was spending so much time hardware wise, you know, designing, soldering, building all that stuff together.

And then and then also, like, quite a bit of of my time was trying to understand how to best send the data from the, like, the the server diffing to the actual hardware. Right? There's a lot of challenges there. So I spent a lot of my time doing that. And then being able to just, like, type in make a React component that has buttons on and call server functions was so nice because, like, I coulda spent all week just building a straight up React app and not focused on this stuff. Yeah. Yeah. I'd have to agree. It let me focus on the things I wanted to focus on. Yeah.

And which was, like, c coding and and, like, building the game itself. So I I used AI heavily, but often for, like, one off scripts as well. So I needed to create a lot of assets and, like, convert image types. So I'd use AI to generate an ImageMagick script that can convert images. The SDK has resource loading, so, like, it can automatically turn images into the right type and stuff like that. But I also wanted it to automatically load collision maps from an exported thing, and I used and you write that with Java. So I used a cursor to help me write all of that Java code to generate those, those, resource importers.

And then I all I kinda also mainly used the chat at one point to give it the context of my c code base, and then I would ask it questions. Like, I didn't want it doing too much in the c code base itself, but I was just like, how do I do this, or how would I do this, or how would I go about this? It'd give me, like, four options. And then instead of saying, let it do it, I would go off and and pick one of the options and implement it myself.

Yeah. Yeah. That's Node.

I had a hard time using AI for anything actually code related, because, man, it it's still a massive struggle to get AI to play nice with Svelte five. It is a massive struggle. And the amount of time I spend going back and forth with it, no matter what the model, no matter how I have it set up, no matter how many times I beg it to use contact seven, I have it it's just it's making bad choices.

So it ultimately ended up being a result where I was moving so fast coding that, like, it was slowing me down to have AI generate any code for me. So I mostly used AI, for planning and for being like, what am I missing in this database schema? This is what I'm planning on building. Like, can you am I missing any indexes? Like, am I missing any relationships? What do you think I should have in here that I haven't thought of? And, like, that actually was very successful because the AI was able to determine for me things like, well, down the line, you might not need this right now, but, it seems like you'll probably want this at some point in the in the schema.

I'm like, okay. I'll add in the schema. Thank you. And I think that in that aspect, it was is helpful, but coding wise, it slowed me down. This is like a really, yeah, rough slog for using AI, but it was it was very fast to work in coding wise, so I didn't need it. That's I just added a a show idea because, like, that's that's a show in itself JS using AI for either undocumented

or new libraries as well. Because, like, I've I've hit that quite a bit with, like, stuff where there's just there's no prior art in using this thing. No prior art. Yeah. And Deno matter how much you force feed at the docs, it just starts imagining stuff.

So Yeah. CJ just CJ just dropped his, artwork on, in my LED grid. Yeah. Because it's pixel art, so it looks awesome. That's awesome. Oh, yeah. You're right. Man, it's it looks so

good. What is the URL for this thing again?

Wes.

I'll explain how. I I just ran my local v server on these rules. On my computer, and then I just proxied it out to the Internet. And I had, like, hundreds of people. Someone started spamming it at some point, which made my Internet stop working.

But for the most part, it it ran for, like, a week. Man. So This is so dope, Wes. We'll deal that.

We'll, we'll get a little bit more into we'll get a little bit more into that in, in the following videos. Anything else to add, guys?

I don't have anything else to add. I'm really excited, to share with you our, our our full projects in a deep way. So if you are excited about that, come check us out. We're gonna be doing these. They're gonna be the next, few episodes here, and we're gonna go deep dive on technical. We're gonna be showing code. We're gonna be talking all things about how we made them and and getting really deep into them. There there's some amazing things to learn through all of these projects. So let us know what you think. Again, if you can swing a hack week at your place of work, my gosh. This was so much fun, and I do think it was so valuable.

If you can, get a week off to work a week off to work on crazy stuff, man, the the end results are are really pretty impressive, company wide. So, yeah, a shout out to Century for planning such a great hack week, producing such a great hack week, and shout out to everyone at Century for bringing their a game. I I showed up to this thing, and Courtney's like, what are you putting so much time in? So I'm coming to win. I'm doing this to win. And then after watching all the videos, she was like, are you gonna win? I was like, I don't know. I don't know. I have no idea. Everybody was so good. It was crazy. So, yeah, shout out to the whole the whole org. Everybody rules at at Century.

And we will catch you in the next one, folks.

Peace.

Peace. Peace.