Hackweek Projects - Realtime Markdown Editor and a Hardware Recording Button

I changed it. Yeah. Yeah. So yeah. So I I I explored a lot of tech in this. And, in fact, like, the 1st

So I I needed I needed more there from The, helping hand side of things. And that's really it. It was simultaneously harder and easier than I expected,

and there's there's some probably something out there that's like like. I guess notion is kind of like that, right? Like a lot of the markdown stuff works in notion, but then it converts it.

using the GitHub API with SvelteKit actions to pull in all of our shows and do commits.

That then went into unified. It turns it into markdown. That then goes to GitHub and creates a commit.

renderer

Yeah. I'm here for the rid. Seraf fonts as well. I don't know if I am personally, but I enjoy it when I hit it. Like, I'm not I'm not writing writing anything with the serif font these days, but I do like the way it looks. Alright. Let's talk about my project.

Liveblocks And it needed to play well with GitHub because if that's going to be the source of truth for things, then we'll make that source of truth GitHub.

a a like, a it was almost like a super based style, like, data platform, but also had multiplayer baked in there. So even What was it called?

collaboration based you don't have to, like the the hilarious joke is that, like, So I just mapped every key to 1, 2, 3, 4, 5, 6, turn left 7, push down 8, turn right 9,

as commits. And, actually, the 1st iteration of this saved as pull requests, which I realized would be Ridiculous given our workflow. So

rid. And party kit is the real time thing. Man, I had dismissed party kit for the longest time because I thought, oh, I know what that is. But it's not it's not anything

the snakes jumped out at me. The springy snakes jumped out at me, so I I quickly stopped doing that, and I I looked into a few different options.

It's not immediately obvious, like, what what this thing does. It says modular building blocks for building collaborative applications like Google Docs and Figma. And you think, alright. That's great. But then if you go to PartyKit or I really hate trolling in all sorts of ways. But for some reason, This thing really gets me. I'm just, like, cracking up. That's great.

And then,

It's a Macropad myself out of a ESP 32, you Code heavy like literally any application.

Man, we're we're truly in the age of rid. All in. Hey. I think people are sick I

faster than with anything else, but it didn't play super nice with The TipTap editor. And so at the end of the day, I hit one of those those forks in the road. It was like, do I stick with the the TipTap editor, or do I stick with PartyKit?

But we can't lose the aspects of Rid Oh my gosh. It's not about the cars and the racing of the cars. It's about YJ has to do that merging. So, essentially, what I ended up going was TipTap for the editor, TipTap Collab in Yjs for the multiplayer stuff, and then SvelteKit For the rest of it, logging in to GitHub, You are you are so wrong. These are these are fancy people going to fancy locations, driving 2 armholes per hour. Yeah. It's As My wife was like, I'm surprised at how, like, high brow this is. She's like, I thought racing was I'm like, you're thinking of NASCAR. Yeah. You're thinking of NASCAR. That's totally different. Which I gotta say, Wes, one of my favorite things on TikTok lately and then this does not like me because I don't usually like people ruining other people's experiences.

Which is ultimately what I ended up going with. TipTap is a really, really cool project.

One of which is called block notejs.org,

specifically is in and I I do want to say we'll get much deeper into the multiplayer aspect of ring in a whole episode devoted to multiplayer because there's a lot here. Yjs specifically

A text editor with markdown in any kind of way or a WYSIWYG.

Really gorgeous websites. Man, I went to this context .dev. I'm like, I've never even heard of this, and this is a great website. And then one of the other ones,

the same, man. I want to

And you need to have, like, a UL, the rid like, one of the ones I really liked was the user feedback thing.

where I was essentially taking each line by line and doing almost like a Notion style block editor, And I was doing the parsing

rid Being pure to markdown and actually wanting real features. Yeah. And what I also learned is that any type of block editor You have, like, Notion where each line is kind of its own thing. You end up in this weird world of content editable, and content editable is a property you can put on HTML elements to make them editable. Right? So they become essentially inputs. But when you end up what you can't do is you can't just have a a giant text area with this stuff because you need rich elements.

I got sent.

Party kit is probably going to be the coolest future option because I think that gives you, Simultaneously, it gives you the control because you can host things yourself or you can host it with them. It gives you more control, but it's not it's a it's a it was still rid. Too new for me to really dive into. I'm the type of guy who needs some serious

was a multiplayer product that their whole thing is they're storing the data for you on their servers,

2 or 3 days of the hackathon or the hack week, I was worried that I was not going to have anything at the end of it because I was spending so much time trying different tech out. So for multiplayer stuff, I tried out party kit.

And, like, which of these things would I rather try to figure out? Would I rather try to figure out the multiplayer aspect, or would I rather try to figure out the editor? And I decided I would rather try to figure out the multiplayer element, and I went with the one that with the easy editor and decided to go with a little bit more of a, Multiplayer now feels easier than it's ever rid. Been I I've done a lot of real time stuff, and even real time stuff in something like Meteor wasn't super easy to do multiplayer.

And I wanted to do multiplayer, and I wanted it to be, like, as turnkey as possible. I would probably pick Liveblocks because it's it's almost like Meteor easy, a really cool website, Especially because our site is built and felt good. If I wanted to, like, merge it in any point, you know, you wanna keep everything kind of the same. Another one I looked at was tiptap.dev,

doc action sometimes.

Where like, something like Liveblocks

Rid It's just like, where are these where are these designers coming from? These designers are on 1. It's, very wild. Yeah. I'm very much enjoying this recently

I want to build something in this now because, like, I've built a couple,

Convex. Yeah. Convex.

a real time multiplayer platform

And be able to quickly and easily change that even while we're recording sometimes.

Live Blocks is probably

Rid. I tried Yjs.

used my own markdown and I get to work on this. Yeah. It's a lot of fun. Well, thank you, Century, for, you know, letting us do Hack Week and, getting to be a part of that. It was really super cool. And, you know, the best part, honestly, was sitting through The, In development, the it's it's hard to pick it up right now and start a new project in it without, like, really spending some time,

Anytime.

Rid. That that's like the multiplayer aspect specifically. And these things are some of them work together in different ways. Some of them work separately, And it's not always immediately obvious what some of these things do. In fact, if you go to, like, Yjs,

highly recommend diving into Tiptap, and they have a great looking site and everything. It's really wonderful.

a multiplayer

rid. Well, it's like, if Yjs does all that stuff, then why do I need Yjs and these other things? And and so there was a lot of a lot of flux here. I tried a lot of these different ones, and we'll we'll talk a little bit about what they do.

you know, Notion's a big product, and it's a good product. Right? Yeah. So it's gonna be kinda hard to have a Hack Week project that replaces Notion. But, You know, I I just thought, like, okay. Well, if we're writing show notes and we have the source of truth, which is the markdown files for all of our episodes,

The easiest but also customizable.

And the code for this is all available on GitHub. It's all open source. If you've ever been interested, I got some messages of people being like, how did you, work with the GitHub API to do the commit spit. Well, that code is all all public so you can check it out. And so, basically, what it was is I made this editor.

My my my project was syntax focused as your as was yours. So let's hear about your your,

And now I do wanna say that my project probably isn't going to be replacing Notion anytime soon because, This thing gives you the right amount of control so that you can do it yourself. Like, I had to build the little hover menu that, you know, you click h four and it becomes the h four. I had to build that. But It's almost fine that I had to build it because it it ended up feeling really nice. You it gave you the right amount of control without making you do too much. And I also looked at just start up using Monaco, Where you just you just push up to them, and it syncs with their database. And it's really effortless and easy, but it does more, And it's a little bit more all encompassing.

influenced by the Vercel look. Go to this one, any type dot I o.

In in fact, it does so much for you. Use a lot of uses a lot of these texts. It's built on top of TipTap, Automerge Nice.

UMIFIED,

distributor.

Recent design trend as well. Everything looks great. Yeah, I could. I think the whole then it turns on My recording light, it turns on the hot tips, turns on the on air sign, it turns on the flood lights.

rid It does become a nightmare, which is why looking at something like Tiptap. And Tiptap, by the way, is free unless you use their paid, A collab service. So if you just want that markdown editing block editing stuff, man, you could use Tip Tap for free, and it's it's the best out there. I'll tell you what. It's really great at that. So, And because I had, there were there was a voting for several different types of categories how to Fit together without overriding, overlapping,

and

final notes before I move of this thing because you can you can look at the code. It's all up there. It's all on GitHub.

It's supposed to be like you author it and you can read it, right? That's the whole benefit of it. But like, it's It's missing a lot of stuff, you know, like you can't inline images

and saves directly to GitHub is an area of life that I would like to dip into. I wouldn't mind dipping into there too. Every time I think about stuff like that, I think, alright. This is the the perfect opportunity to get into three d modeling. And then I Open up I open up Blender, and I'm like, oh, my my brain. Have you ever notes, especially when we're collabing and writing our episodes or possible episodes. We do it in Notion. And now I do wanna say that my project of episodes. We do it in Notion.

for that myself, which I I soon realized. In fact, you told me this was a can of worms, Wes, and I said, yes. I know that. Let me try to do it anyways. And then, yes, it's obviously a can of worms. I I opened the can and the the a really cool branding website. I've been doing some,

There's a lot lot to go through here. So tweet us at SyntaxFF if you have anything else to add to this That that's gonna be a good show. Yeah. Hit us up if you have any multiplayer or anything platforms that we have not mentioned. I know when I did my presentation, David Kramer Of Sentry sent me, rid Finesse your your system stuff. I I really like this app. So it's called Better Display.

Either way, The u the unified markdown plug in system, I used unified to turn HTML rid undo and redo.

is almost like

yeah. Yeah. Me too. We're we're in the age of all in. And we're also in the age of all of these services having

TipTap gave me HTML when I hit a button

which, you know, could have been an approach, but, you know, I think it would have taken a lot more work to get them all playing nicely.

Notion that we really like, like the multiplayer stuff. Like the fact that Wes and I can work on the same show note at the same time without refreshing

back into markdown.

diving deep.

And and just, like, gaze upon this design. It's it's lovely.

I feel like they that was a huge missed opportunity for them.

but I did get something working ready at the end of the day, and I'll post the video that I shared for this thing as well so you can check out at least how it looks and how it feels. I had always thought that party kit and party an OL, whatever, organized list to get the dots and everything like that or h ones to get the proper formatting on the those headings, and you you end up having essentially, a filter for Instagram

In fact, if you're looking to build what people were doing would they they would take Certain products that either already existed within Century and say, hey. What if we maybe even a little bit older than right now, like middle school age. Right? I think that'd be the perfect time to enter my 3 d printing guy era. Yeah, totally. I,

plus their own product, which is called TipTap Collab, which is that's the bit that stores your data essentially in the cloud for multi rid layer and allows you to do the syncing. And then which is one I'll talk about in a second. But it's it is a React thing, so you're You're gonna have to build your whole app in React. And I just said, you know, I wanna do this in SvelteKit. I already started in SvelteKit, so I wanted to just keep it there, The TikTok, we we do we've been doing TikToks. I've started doing some TikTok TikTok, So multiplayer apps are now probably easier than ever before given that Yjs exists, Party Kit exists, and I'm seeing Liveblocks, I would be like, man, we should have done that. That that would have been the pathway. Right? Because what Meteor did is they like, oh, we're just gonna launch a hosting paid hosting service like everybody else. But Liveblocks is like, oh, the paid product is the data hosting in the fact that it's rid. Real time multiplayer.

like, some very wild content editable stuff where if you're trying to do this

doing things like undo. It was like a nightmare

So at the end of the day, what I ended up doing is I ended up using TipTap

And then for editors, I took a look at a bunch of different editors. In fact, one of my early versions of this app, their docs, or or any of their anything,

and Tiptac

rid and what they do. And in the end, Yjs

Vercel

a couple of other ones were We end up writing the show notes in Notion, which get translated into markdown from our editor, Chris, who then moves it also into the podcast I do. That sounds like A very hard problem to solve. It sounds like a very hard problem to solve. So yeah. You know, that's why, you know, you're not gonna be building any of these things from scratch. But either way, it was a little confusing to me when I was first getting into this multiplayer stuff. Like, what do I actually need need? Can I do everything with Yjs? Can I do everything with Party Kit? Do I need Yjs and Party Kit? And none of their docs make it super clear. And to make it a little bit worse because Party Kit Really seems like it's a great new approach for this stuff. Yeah. The it's still it's not done. The the docs are still, like, I landed a heel flip, and I've never landed a kick flip.

An interesting solution for the multiplayer. But ultimately, yeah, that worked well. So this is going to make a really good show because we're going to go through real time. And we'll talk about We just gotta record syntax, electrical aisle, and I was like, I just need, like, a hunk of metal I can screw to the wall so I can hang stuff up. And I was like, oh, these Juncture box covers are perfect for this type of thing. That's awesome. Yeah. Oh, that's fun.

and needed to work well with markdown.

We are in sick of it. Yeah. So

rid Hack Week project. For my Hack Week project,

what's that?

Tiptap with Hocus Pocus.

TipTap,

like real time stuff. And actually, the other day I dipped into a little bit of

rid. Things like Tip Tap and whatever exists. The these tools are Liveblocks, man. Liveblocks makes it so easy. Let me tell you that. Really? So if I was building a product today

So I decided to build a markdown editor

platform,

You're editing it. You hit save, and then I used,

that is like a package that allows for the merging of, You know, multiple streams of like, if if I'm working on something and Wes is working on something, how does that data know correctly You know, models all these inserts for his desk, and he's got the little the little thing, that measures,

So I found these a 100 pound magnets with hooks on the end and they are rid. Freaking awesome. I put a couple on the fridge so we can and a couple on our like whiteboard so I can hang my keys right when you come in the house.

or a hexagon box cover. Rid. Basically, it's just a circle of metal with a little hole in it and screw those to Check out forms for, But

and get a junction box cover rid. Had been looking at ways to store all the attachments,

a month's

So

to

So I was like, of these kind of like fall off if you grab it at the wrong angle.

I noticed. Just trying different stuff because like rid. I had to get out my windows laptop to even do this, so it can run 2 different kinds of hitches.

a workshop It's It's probably a lot for a company if you constant battle of between

hold everything on there because it's great. You can move it around and it's not like based on a hook. You don't have to put it where a bolt is.

I'm not sure how magnets work, but. Yeah. How do they work? Yeah, I don't know. I think it's some sort of

I all intentional, though, because then you're you're actually sitting the wheels on the ground. Still, they just don't roll.

or drop a review if you like this show.

On sick pick my ex.

well so far. Yeah. I've been I've been loving it. I thought, So it's like a lot of it there's a weird amount of overlap between some of these projects I also had a whole draft system so you could create a dot draft file if you wanted to have a temporary working file. And then if you then click publish, It would then do another commit to delete the draft file and save the new one. Markdown? And man, it was tricky. Very tricky. Even with like a little library that I use. So I want to try this out. Seems rid Take a look at at at both Party Kit and Live Blocks. They were really cool. Like I said, Live Blocks probably holds your hand a little bit more, But I found the experience to be really nice. Like, I was able to get further with Liveblocks It's an opportunity for for people to work on things that are just creative projects that may turn into actual products. And so, like Yeah. Rid This is a good opportunity to say that, you know, this show is presented by Sentry who does error error tracking, exception handling, and and finding of bugs and performance metrics and all these types of things that you need to make your app run smoother. Right?

directly to it. I got this idea. You know, the Wyze cams, They come with the tiny little the little washer.

that have a hook on the end. So I in Illustrator or on air light that had led strips in it, but it came with one of those stupid little then turn on do not disturb on my computer and on my phone, and then

A little sick tip and a sick picks. Sick tip. Well, you know, he's only 6. So So it's like, okay. What what can we do? We're gonna get you some of those.

You can follow me out on there. I've been posting. I'm doing a, made some, like, outriggers

And they have been fantastic. I'm always amazed, like, controlled.

And, Yeah. It's, on GitHub. I'm going to sick pick,

those are awesome because you can screw those wherever you want to put stuff. And I needed something like that. And it turns out washers aren't magnetic, so Unity. That's what it was. Yeah. What languages is unity? On your mouse. Yeah. I put the the, like so I've got the Logitech MX 2, and there's, like, 2 little thumb buttons

plug,

rid. Some magnets. So a 100 pound magnets

Like a little test. I'm gonna try post This does not implement that for whatever reason, because it's a key logger or something, you know?

let's do something different today.

Yeah.

I'll have a link to it in the show notes. But if you're on TikTok, so are we at syntax f m. Alright. Thanks, everybody, for ready. Tuning in, and we will catch you later. Peace. Peace. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player I would love to be you know, No. I love learning new things, though. So oh, by the way, this is super weird. This is really inside baseball for all these people. We record on something rid Riverside,

And then I'll I'll do, like, a look back of 30 days and say, like, Rid. Wesx.comforward/wesposs.

Definitely check out And That you want to hook, hang up anything.

Tips and tricks on there as well, so check it out.

are looking to do anything I got to make something that is literally like a piece of metal, you know, and they'll send it to you and you can bet they can bend it for you because they have breaks and whatnot. So, turn on my camera. I need to turn on my light that's in front of me. That's lighting my face.

If you have if you want to need to turn on the lights that are behind me. Rid.

And then I put a bunch of the rest on my rack.

neat little

some some new stuff on there. I did a a video where I did a, a reaction to

in our gym.

how awesome magnets are. There's no batteries and magnets, which I still haven't figured out.

or like, can good content still rid surface to the top, and it's been going so rid That were initially used Oh, yeah. There's too much good stuff in life. You know? It is really unfortunate.

joist or somewhere in your workshop or wherever it is that you want. And then that allows you to stick anything that is magnetic

there's been a couple

submitting projects

rid. A broken bridge or something?

Yeah. There's

that was like a century can't this Instagram filter where you're supposed to, like, take a picture of something broken that Sentry can't fix because Sentry can fix your code, but it can't fix, you know,

Award winning game. So it it was really shocking to me how many people were able to build a video game in In a week, you know, over the less than a week, it was what? 4 days total.

And I just never have done that before. And

to submit, like, cool,

but, like, I I never felt like people were were centric, Syntax team member Ben Vinegar made a,

and have it cut out of

You can design

and they will laser or water jet cut it for you.

You know, scary thing that you have to submit some type of project just to win. It felt like people were

you know, the micron the little measure rid thing that he uses to measure. Yeah. The calipers. Specific calipers. You gotta get a pair. He's measuring with these digital calipers and then tossing it into blender and then designing his own inserts To hold all of this stuff, and I'm just looking at this like, that all looks incredible.

rid. App for century that was really great. Somebody built that in itself uses Yjs,

I think about this a lot or I'm just like, I wish I wasn't so

things in my life where I've needed Change colors and put different,

OG version of SketchUp

for winners and stuff. And, you know, some sometimes you, like, worry that, like, this type of thing could get, like, very

And That's the hardware point. Now I want to be able to physically control it with some sort of button. So I had done a bit of research into Convex is a full stack rid TypeScript development platform. Replace your database server functions and glue code.

Learn something new.

I think it's unity.

there's, you know, weapons shooting out of you, and there's swarm of zombies coming around you, and you're trying to avoid getting hit. So they made a century survivors game, which seriously looked Which was a really neat option. It's definitely the most turnkey of the options here.

knows the idea here. You're like a little guy and,

able to do a lot of stuff, But three d is just this whole blind area for me. Yeah. I I've talked about this before in the show, but there was a guy I found on Instagram who, Block note, if you're a React Developer block note, and you're just looking for something easy. That that one is like a wrapped up product for you. If you're looking for something customizable,

a specific part. Specifically, the tractor at the the cottage needs a little adapter how we do Feature flagging or I have an issue with something in the application. I'm going to fix it during Hack Week. And then other people like someone made a skate video with the syntax deck, which is Unbelievable. So some really cool stuff. Really, really cool stuff. And, honestly, you know, like you were saying, is it just

Somebody built a a Raycast they're both say, you can use this, and you can use this with

So what this is, you can design something or something like that, which would be kind of cool.

there's home automation that I would love to spend a lot more time on. And there's the thing. The skate trainer looks a little bit more

And then I I tried to make a Star, like a Mario Super Mario style 3 d star in Blender, and I I wanted to chuck my computer out the window by the time I was done with it. So it it's rid It's one of those things I feel like feels like Notion, but works with multiplayer

It doesn't have to be 3 d

favorite thing to do is to

literally,

it's just something I would love to learn because, like, I feel like I'm pretty your employees to literally work on whatever it is you want. But Good comes out of it. It's really fun, very refreshing to like, because this kind of stuff that I fuss with is usually reserved for my evenings, No, there's only so much evening time, and

really gunning for The prizes or which prizes were like a key cap, like a customized key cap, which pretty cool. But I never felt like it was it was like a huge, if you're the type of person who likes to really

not specifically on Century Hack Week, but you ever heard of this website called SendCutSend? And I had bought these, like, 25 pound magnets, And they work okay for, like, light things like a d handle and whatnot. But I want to be able to store, like, a pull down bar, and I want to be able to grab it quickly.

Rid And Who does? I'm just gonna say that. Who does have, like, a tools to kind of have a like that? I've got a few friends that do have that type of thing. But, like And I sort of like built that all into a single package.

enthusiastic

And, like, I think that was evident from some of, like some of the projects were there's, like, Three different video games. People made actual video games, including, I tried Liveblocks

tried to do any 3 three d modeling with Blender or anything. I don't think so. The the furthest I've ever got was

I'm I'm just needing to put in the time. But in reality, what time do I have to to learn that right now? I think at some point In my when my kids are, like, getting into the,

Metal or acrylic or people shitposting

toxically competitive or something, but it didn't feel that way. You know? I I don't know if it's just the company culture here or what,

Century survivors, which is based on a video game called Vampire Survivors, which anybody who's played Vampire Survivors,

every couple of days, I'm just like, And I'm using magnets

And to buy it online is like $120, and it's literally just a piece of metal.

video game and then, like, intentionally breaks the rules and then claims that they're real NASCAR rules. So So he'll be like, you're not allowed to pass on the 1st lap. That's why I crashed you. It's been a rule in NASCAR since 2011, and the people are always like, it's not a rule. What are you talking about? And they they get so angry, and it's it's very funny because instead?

I like it. I've also seen people just cut tennis balls multiplayer and then make it work offline.

Who plays a NASCAR you know, one thing that we do is we edit our episode Sorry to interrupt. By the way, was the firmware you were talking about, like, the z m k? Is that the does that sound familiar? Z m k is the, like, the standardized rid Right? Yeah. I I'm saying is that the one that you would have hoped it would have had? Is that what you're saying? Or Yeah. Okay. Okay. So the rid. Standard is h I d, human interface devices. It's part of the USB spec.

Well, 1, he's gonna ride a syntax deck. Right? But, 2,

I I didn't find a lot of personality. Like, I wanna see like, what are you What are you eating for lunch? Oh my gosh. By the f one.

so you cannot roll. Yeah. So he can rid And just keep these trainers? Standing on it and, like, kind of getting the vibe of moving around on it. Because I know if I set him on that thing, he's gonna do the classic feet up in the rid. Like, feet up in the air, and the board shoots out from under them. I I just know it's gonna happen instantly. So You can't just have

All right. Let's move into some sick picks. Rid You have a a sick pick for me today? Sick pick. Yeah. I do. You know, here's a a little app that I've been really liking. It's Open source, but there's a, like, a paid version of it also available,

A Mac app, and it's called and I happen to gesticulate a lot when I talk. Yeah. I was wondering what that was. And for some reason, within the past

and it's for your Mac. So I'm sorry, Windows folks, but this is a

the personalities.

But I found a a guy on TikTok worth of I've noticed what you're doing. Yes.

So yeah. The thing? Not good. Yeah. Awful. You are so you're so wrong. So boring. They're all just like.

Really? I I got I just messing around, and I got the heel flip, or I could do a kick flip with a body varial, but I could not do a stinking kick flip Ever. I've never landed 1. So Wow. That would be maybe maybe that's my my, my I must land a kickflip before I'm 40 years old rid Roger. I I would do it. Yeah. And do it on some grass or something. I I am okay with not skateboarding again because I really don't wanna break my arms. Yeah.

let me download some skills like the matrix so I can just Do a kick flip again. That'd be great. Did you know, Wes,

And, like Yes. They do better on the A bunch of teams and, like, a bunch of the Sentry rid. Replacing the L. E. D. Lights and cracking this light open without breaking it and all that stuff. And by the end of the 1st day, I had I had finished that. So It looked and felt production ready. Like, ship this thing. You know, you add a few levels, and it's Vampire Survivors. That's really cool. What did he build that in? I think We're going to have them on the show to talk about it. But what was it? So what I did is I said only on this device, like you could take the USB device ID.

And it's also cheap. It's cheap plastic. So it's not like you probably cost more money to buy a tennis ball at this point. Tennis balls are surprisingly expensive. Of. Yeah. Anyways, by the way, speaking of tennis balls, remember you recommended that f one documentary to me after I had

Yeah. My my son right now is thinking he wants to learn skateboarding, and I I So it needed to be multiplayer No.

Better Display.

rid. Carabiner Elements. So Carabiner Elements is a software that I use to remap my caps lock key Make something physical.

So I ripped all the LEDs out of that on air site sign and I put in my own LED strips. I

which is my Favorite software of all time,

so that's it. But it worked well. Yeah. Oh, okay. Maybe I, But it's Parallels, you know. Maybe. I had to pay for it. Oh, yeah. Yeah. That's a thing. I think I think VirtualBox TipTap doesn't work necessarily that well with markdown. So you know, a

And I want to turn off or all of the lighting setup a part

custom Chinese contraption that is being hawked on Amazon. So it says Mac OS supported.

And I ended up with this little.

So I plug the thing in and every single key sends a 3.

what I did is I headed into BetterTouchTool,

Which is helpful because like literally

that can be

And then I said, okay, well, like now is the like it works really well because I'm always running these things. But Part of me is like, oh, wouldn't it be nice to have it in a single package? Operate almost all of them operate on

So I had to bring it What's it called, though? I've used,

on the keyboard that were sending me numbers. Then I went into

This was not built on that protocol. This was some sort of

set these complicated keyboard shortcuts.

Hanging off the end. I hot glued everything to the back.

protocol, which is really cool. So it was not actually a very

used for and setting up my recording displays and all that.

And that software allows you to reassign

All of that is done

When somebody hits it,

And carabiner elements allows you to

And surprisingly, that only took me And then I there's a couple other things like I want to put do not disturb on my phone. And I also I wanted an on air light for the longest time. Like if you go back to the Episode where I built my whole office.

different buttons that are out there 3 d modeling stuff, especially like get a 3 d printer, you know?

has a has a beta. I even downloaded it, but it wasn't working for me. So So I just I just I have a little Windows Surface laptop here. I whipped it out, plugged it in, downloaded the Sketchy software.

Allows you to say when this keyboard shortcut is done, orchestrate these events. Right? Like I've got keyboard shortcuts for filling out And when that scene is triggered via somebody my local network. I can access the whole UI to

we talked about on the On the hardware episode

almost no keyboards actually have an F18. Mine does, but I'm never going to hit F18 and Those 3 other weird combos.

you can make it animate itself.

like control command shift f eighteen, what do you need to think about? Is it a paid or free service thing I would like to do maybe and bear the brunt of it. But now I would like to like, I could even make a Town. We're the same thing. Partytown is the web worker third party script runner

Kind of on my set. I call them set lights.

Instead of pressing 1. So what I did is I said, when there is a one coming in, remap it to something bizarre. Like always have to do a keyboard shortcut that you literally never accidentally post something good every weekday,

wherever. But I tried running a, like, an actual VM I'm not an expert on this type of thing, but most mechanical keyboards And

timers, and, or most washers aren't magnetic, at least. Rid. So I went to the

something like that. This is not or is it a paid service or can you host it yourself or both? Is there underlying tech? Yeah. Is there underlying tech? Can you integrate it?

right. And then I basically had 9 keys and fire something else for you. And it just fires like a regular keyboard shortcut.

And, like, I guess the default is every single you press any key, you turn the knob, it sends a 3.

And then And Part of what I wanted to do is like make a iswesrecording.com

to Hyper, which is command, control, option, shift.

what all of the different keys do. So I said, you know, like, I'm not going to

run the same protocol, meaning that you can flash them with Macros and your own keyboard layouts and all that. You can do it all with like a standardized set of software.

They call it a macro pad. Oh, yeah. Macro pad. I was wondering what you had gone with there. Yeah. So it's like a 6 a button mechanical keyboard

each LED can be individually controlled which is, by the way, a downside of the Mac M1. I haven't had to run a windows VM in the same this kind of reminded me of like no code, meaning that remap it doesn't. So mechanical keyboards

flat remotes that you get That was one of the things I had run wiring for. So my idea

which is a little microcontroller So and you can do the brightness up and down and change the color and whatnot. And, hit. So in my case, it was I loaded it up on the Windows laptop And I basically was like, I'm not going to use my Windows laptop to to have to try to figure out. Like A nightmare. Right? Well, that's cool. You talk about source of truth, right? Like with the the podcast, we're trying to, like, say, like, is the database or the markdown file source of truth? And what happens with One of them is updated like this two way binding and then make it Color, brightness, all of that good stuff.

Zhooshing it up, making it nice and dialed in. It wasn't just a big mess of wires

out of at a at a hardware level, not hardware level, sorry, at an OS level, Meaning that it's, Rid. Being able to communicate

a much bigger I spent a little bit more time the next day kind of.

Over a web browser, which is really cool, and it has a whole bunch of APIs

and a knob that you could twist up, down and press. Where'd you get this from? So I went on Amazon and and looked at all of them. And I ended up with this one. However,

what I ended up doing was, like, The kind of the main thing was I want this on air light to work. So I had bought this to shut down and allow

Now the computer was thinking I was hitting a weird keyboard shortcut.

I'm not happy with it because

the mini fridge because sometimes a compressor kicks in.

Parallels. That's what I've used. On on an m one? Yeah. And it works really well. In fact, I only used it to, play Minecraft,

like a day to do, Which I thought like, oh, this will probably take me a bit longer because I got to figure out power. I got to figure out flashing the thing. I got to figure out,

on my M1 and VirtualBox does not work on I got so many other interests in my life. So it was fun to be able to say, You know what? Rid. Don't feel bad about literally anything else.

bizarre combinations.

it will intercept the low level keystrokes proponent of addressable LED strips, which is

Hack Week was to build some sort of physical button that I can press on my desk and it will do all of these things for me And put me in the state of of recording, and it's nice to be able to just hit a button and turn it off and on. So

rid. Like, get some insight into, like, how a bigger company works. And the one that I keep coming back to is,

and it's after this time, you know, automatically lock the door or something, interesting ideas.

But, like, that's the obvious one. I don't really use it all that often because I have I volume buttons on my mouse as well. Rid.

the sound this might sound ridiculous, but the best part was sitting through 90 presentations

someone rewrote copy look is a little played out now.

only like 2 options that would get to me in time. So I was like, I'm just going to have to go with this one

and getting to see all the cool stuff that people made over Over Hack Week. It was a really, really super exciting. So,

So fun stuff. I highly recommend that you can use to hit.

Really? Wouldn't that be, like, great? Just twist the knob and be like, Alright. You can because you tap on app command Z command Z command Z to undo a whole bunch of stuff, but instead you just twist it and you're now and all of a sudden you're back and forth. I travel. Yeah. Yeah.

Yeah, it's not a bad idea. So I work on Literally whatever you want. So there's all kinds of different 1 team made hot sauce and they gassed out the entire Toronto office.

yeah, a lot of fun. There was some it was it was really interesting to see and modeling 3 d stuff like I would love to get into

Yeah. Oh, I know all about it. If you if you're one thing I really wanted to do now that you have this macro pad and you have, like, the it has the knob on it. One thing I always wanted to have, and I mentioned this before, is, like, a knob connected There's a game. Well, wouldn't it be great if we could work on the show notes directly in markdown

Their flagging system. So, like, feature flagging. And now I'm just like, we got to do a show on feature flagging. Yeah. How that works, you know? Yeah. How does that work out? Like, obviously, it's a boolean and an if statement rid somewhere in the code, but, like, how do you do that at they have hundreds of feature flags. I got wildly inspired from that show or from that that entire thing. One cool thing about the Hack Week that we haven't even talked about yet was that Yeah. Not for Versailles, but a lot of like the Liveblocks website is clearly

turn off lights like a sucker, a 100 pound manganese. Even like I'll go even once one tip further.

doing a Hack Week project yourself.

like, expos a or something like that. Oh, expos a. Yeah. I don't know rid Why? I I did it as volume, but now I I can't live without it. Like, I never reach for my never reach for anything like that. My, my audio Controller is the thing that basically controls my, carbon fiber or something different,

know? Yeah. It's just it's just contact. Like, those switches on a mechanical keyboard are just they're exactly that. They're switches. Right.

a volume down.

have it mapped to 6, 7, 8. And then I remap those to volume up, SketchUp. Like, Google Google used to have this, like, Amazing app called SketchUp, and then they sold it and they put out like a crappy version. And it seems like a lot of the community is still on the, like, And I don't I don't have the tools to cut metal that thick like quarter inch steel.

shuts down on a smart switch, and it's the best. You don't spend 5 minutes before bed walking around, And that's not ideal because every key does the same thing. So I figured out that you have to download this

you know? I'm a little cheesed at like the algorithm, how how easy it is to be gaming it.

And those kinds of like every single light in our house And

Yeah.

That'd be that'd be a nice little little project. Those those kind of automations are the best because it's

I kind of wish that it was like wireless. I have to run a USB C cable to it, But I figured like like I needed on the Friday before Hack Week, I was just doing some shopping and there was

rid. You can put a lot of the actual code into the hardware. That's what the ZMK ping

And

It turns on my office lights if I don't have those on. And then it turns off the mini fridge, so the compressor There's something nice about a physical button.

button. Yeah. I have the Stream Deck. It's pretty sweet. I like that you can set little icons and stuff for different things. You know, I ended up, like, going deeper into automation. So, like, my my lights turn on when my webcam turns on. But we we found this a hilarious thing when Wes rid. Change, like, the recording mode on Riverside once. My entire office lights just shut off and re turned on, and I'm rid. Working on also a, like, a a video app using Tori right now. And every single time I hit save, rid. We're they make now little plastic covers that go around the wheels

you're literally piecing together what I love so much about a hack week is that you Dip into something you've never done before. Like, not everybody did, but that's my or something like that where you want to hang stuff up, you can go to the electrical aisle of Home Depot rid. And you upload it to their thing and they'll cut it out and then just mail it to you. And there's also like a I want to build like a barbell holder for my rack in the gym.

on the actual physical keyboard, from my phone to my computer without an intermediary.

more than an hour, then turn it back on because there's there's not there's there's beer and

So in here I said, all right, when I hit the recording button, which Is a red key cap and that powers it both has Wi Fi in it, so it connects to Yeah. Yeah. That's crazy. It's funny because, like, markdown WebRTC.

I I don't wanna I don't wanna have a Friday where I have a warm beer. You know? Dude, yeah. I I know how it is. I've been looking to set up an automation myself for my my door lock. I recently got a new door lock for my my office.

isn't running. And,

rid. Because I did all of the orchestration Some sort of magic or hacking device or something in there. But And then now when I was hitting them, three d printing. And then there's all the home projects that I have and, oh, maybe I should learn skateboarding again.

Everything turns itself on, which is window management and automations and all kinds of stuff. But one thing better touch tool does is about so many things, you know, just like

firmware will do. So at some point, maybe I'd like to get Some sort of other macro pad or maybe a Stream Deck or something like that, that I can literally project. I was surprised because I was thinking like, oh, maybe I'll set up a local server.

And 2 different pieces of hardware running its own software.

turn off the whole office.

4 different applications sketchy Windows software But like I'm, I'm sitting here being like, well, like, good content will probably still surface as well. Right? So I'm just gonna I'm gonna go a whole month,

the app reloads, and lights My office are just turning on and off. It's like Oh, that's hilarious. Oh, I got to figure out how like a manual override to stop this for a little bit. That's the the funny thing about it is that All of this automation is great. But as soon as you hit like an edge case, you realize, Oh, shoot. So I actually did have to set up a couple of buttons,

sending a post request to the webhook,

rid Single low level they specifically said don't merge anything I built a recording button. So I when I record, I have several things that I do. I need to

in Home Assistant. I set up a scene called recording, then

isolate it into a You're so wrong. It was a little bit too, like, dialed for me. Rid Too too polished.

a webhook.

and like coconut water in there. But of piecing together

to make sure they turn the fridge back on. And I also want to set up the, Yeah, right. Yeah. That'd be an automation that will say if the fridge is off for on my rack so I can hang like I got some extra posts There's another

And I know that a lot of these keyboards, it was pretty cool that you could just press it. And it just the whole office here. I'll do it for you, Scott. Right now is Hey,

And then the webhook is running on my my local server that's running home assistant for And my wife does this to me as you're lying in bed and said, did you lock the back door? Oh, yeah. I think so. But now I have to get up and go check.

rid Well, that's interesting, Riverside. Thank you. Either way so people will take, like, a feature. One of the ones I really liked was, like, the user feedback re section in century, and somebody was like, well, what if we did this whole screen capture thing? Like, they have it in Google user feedbacks, and then that, like, brings it directly into century that way. It was, rid Really cool to see, like, where you get real time, but you get also cursor position and users and everything like that. It it feels like If if I was Meteor Do you have a shameless plug, Wes? I will shamelessly

hacked on them a little bit? What if we what if we made the,

2 episodes, I've been doing, like, thumbs ups while I'm talking, and a little thumbs up bubble appears next to my head in Riverside, but it doesn't do it for Wes. I don't know Welcome to Syntax.

rid. Product features have come out of Hack Week, which is cool. So, like, often somebody will say, like, you know what? I got an issue with

But

what in the world is going on. I

And,

throughout their year. Often a lot of companies will give you a whole week and say, all right, this week use this time to I'm

I cannot, for the life of me, I don't want it to do that because I just just dig I just move my hands are doing this stuff. So, It was been some very, very nice informative content so far, and I'm going to shamelessly plug the syntax TikTok.

effort that some people took and maybe the creativity they took with existing Sentry features. And it made me be like, oh, man. Next year, I I wonder what I could do to dive into actual century features and and make something interesting

Unless it is absolutely necessary because everybody's working on hack week stuff and basically get the whole week to just kind of got a 5 volt power supply and then I put a WLED,

Century focused rather than syntax focused.

Our Hack Week projects that we did for Sentry. That was a a really awesome fun week we had working on some Fun, exciting projects for a hack week. SENTRI does this annually. This was our 1st hack week with SENTRI. So we decided to to go all out and Try to do some fun stuff. So we're gonna be breaking down what we did for our project, some of the approaches we took, some of the lessons we learned, and some interesting tidbits about, C sharp. Yeah. It's c sharp. But Unity is supposed to be like its own its own thing. Right? It's its own ecosystem and Like its own engine. Right? So many different video games are built in Unity. If you learn Unity, you can build I have yeah. Let me pull it up here. Convex.

We're gonna be talking all about

Not too much. It was super fun to do a century hack week. I had never Like, I know a lot of companies. Maybe we should explain what that is. A lot of companies will set aside some amount of time packages.

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss.

While working with hardware, working with multiplayer, working with markdown editors, and those types of things. My name is Scott Talitsky. I'm a developer from Denver. With me, as always, is Wes. What's up, Wes?

And I'll link it to the GitHub because you might as well check out the GitHub, and you can, You'll find the actual app download the from there. But it basically gives you a much better control interface for managing and controlling your displays on a Mac, And it puts it in the menu bar. And guess what? It has the coolest feature. You can go above 100% brightness, which,

Lovely. Especially if you're a tinkerer, if you're like a,

it allows you to do higher than higher than a 100% brightness. And and if you really wanna get, like, a suntan from your computer screens, it just, like, blinds you with with light. And sometimes I really want that. Sometimes I want the brightness. Maybe you're working outside. Maybe you're, you know, your environment's too bright. But I I think this app is my aided my what's it called? My command center here. Yeah. It's got a big old knob on it, so I just I just grab that thing. Oh, that's great.