Durable Objects × Tab State Hacks × Headless CMS Choices + More

Welcome to Syntax.

Today, we've got first of all, happy new year, January 1st. We got the 1st potluck of the year.

Lots of really good questions about what the hell are durable objects, and and when would you use them? Should I use MDX for my personal blog? It's a new year. Everybody's got the they wanna build up. I'm gonna build up, redo my website this year. Right? The new year to me. Yeah. Done. New Yarn, new you, new website.

That's that's how it goes along.

Is CSS done? That's an interesting question. Frameworks, should we have lots of smaller packages, or should a framework just do everything batteries included? As well as we talk a little bit about hosting providers, which one should you use? Let's get on into it.

Real quick, let's talk I'm gonna tell you a tale about a bug Mhmm. I had and and how Sentry saved my bacon. So I rolled out couple days ago, I rolled out a new checkout, on my my course sites Nice. That I've been working on for for quite a while. And the checkout experience, I had, like, I I did all my testing and and whatnot, and I I released the thing. And I kinda I just, like, soft launched it. You know? Like, just I put it on one of the course sites, and and I just, like, wanted to make sure that there would be some transactions come through, and I could see anything. And and, surprisingly, there was no bugs with that, but there's 1 bug that broke the whole thing on on Bos 15, which is Yeah. Many, many years ago. But the the thing about old Ios is that it's on people's iPads, and people tend to keep their iPads around for a long time because, you know, they don't use them as much, and they just grab them every now and then.

So I got this error popped up, cannot access off screen Canvas.

And I was like, what the hell is off screen Canvas? I'm not using off screen Canvas anywhere. And you know what it was? What? What was it? Confetti. It was the confetti library that I was using. So the confetti library that I was using would render the the canvas off screen for performance reasons if it was available, and there was some bizarre thing where it was they were testing if off screen canvas existed, but Safari, JS Safari does, there's some weirdness around it, and I was seeing this bug come in a a couple times a day, not a ton, but enough to to warrant wanting to fix it. So I was able to open it up. I I fixed it, and then I just set it as resolved in my century. And and Yarn at that point, you pray it doesn't come back. You hope you fixed it.

And, it it was really great because if I I would have probably never have known that it was broken on that device because it was such a low traffic.

And I I don't know that I would have known to test a 6 year old iPad or whoever that Safari version

is. Yeah. Yeah. Those types of bugs are are typically, like, you toss them like a boomerang, and they'll just eventually come right back here. So you look at those. Yeah. Hopefully. Check it out. Century.io

forward slash intext.

Alright. Let's ESLint the very first question from Bean Harry.

That's you think that's a a joke name or not? I I don't know. Good to tell you. Wes. What are durable objects? They seem to pop off everywhere recently. It's true. You I I also have noticed this whole word durable objects pop up. I know CloudFlare is every time they announce a new product, they say, oh, we're just building it on durable objects. All right. I'll do. So I'll do my best to sort of explain what I at least think they are in durable objects. They have this idea from several different vendors, but probably the biggest one out there is, is CloudFlare.

And it sort of solves one of the problems with not having a server running all the time. So if you have a traditional server, it's up and running all the time. And if you wanna do things that are are both real time, meaning that like multiple people can connect to something and you can set like a Wes socket back and forth. Or if you wanna keep like Scott, like in memory, traditional servers are very good at that. However, with, serverless functions, Cloudflare workers, these things just kind of spin up as they are Node, right? So it's a little bit more tricky. So the idea with a durable object is that you can create a durable object and you can connect to it via WebSockets.

So if if you want to do real time on something that doesn't always exist, like a worker doesn't always exist, it spins up, it gets used, and it gets spinned down, you reach for a different service like a durable object. They also have the ability to keep memory over time, and you can share that or keep it per per user. And they also have a storage API where you can can stick stuff.

So specifically, Cloudflare also has a SQLite API for durable objects that's in beta right now, which I've used my myself. It actually works really Wes.

And you can also like roll it back as well. So I think like Durable Objects is just like a, a primitive in which you can build stuff on top of, and it's good for storing data and doing real time. And then people will tend to build stuff on top of it, like their Sanity adapter.

Yeah. Not something I've used, but, you know, it's like one of the I I know you said it's not just Cloudflare, but it's one of the host of Cloudflare products that I I look at all the time. And I'm like, oh, that'd be really cool to use sometime. And then I just don't. I don't have Sanity need for it. But although it it does sound interesting and something that I, you know,

durable objects. Have you heard of of PartyKit?

I've absolutely heard of PartyKit. I've used PartyKit.

Okay. So PartyKit is built on top of durable objects. Right? Interesting. So if you want, like,

can you explain what party kit is? Yeah. Well, it it's funny because it does kind of fit into this whole, man, real time multiplayer world, which is it's oddly enough, very kind of intermingled with the the local first world in a way. So you you see a lot of the same tech and tools come up. But, basically, it is it's a platform for building multiplayer apps easier, sending messages between users that are currently using something. And what's interesting about this is that it's pretty, flexible. Right? So it it's not just like use Sanity kit and that's all you can use party kit with a bunch of CRDTs.

You can you can use it to do interesting multiplayer real time stuff. But at the same time, it is a bit lower level than something like, oh, Liveblocks, I believe. Liveblocks Yeah. Kind of fits in the same spot of building collaborative multiplayer experiences, but kinda does a little bit more.

So yeah. It's a it's a at the same time, it's doing a lot for you, but it's also very flexible for building multiplayer apps.

And it it also does the whole, like, offline syncing thing as well. Right? It ESLint is a sync ESLint. Like, I know it does crudites, CRDTs.

Crudites.

It uses, it uses other it uses other CRDT. So you can use JS auto merge Oh, okay. Those types of things with it. So, again, it it's more or less like the, it's, it's more or less the multiplayer part of it than it is the conflict resolution, but it works well with those conflict resolution libraries.

Yeah. And it's kinda cool because, like, if you did ever want to build a real time application, you're kind of committing to having a server running.

Oh, yeah. Absolutely. Yes. For the life of that thing. Yes.

And as Cloudflare does with these types of things, it's like, well, we're not going to let you do that, but we are going to give you this other product that's actually really good at at doing this. Yeah. It's a cool project and, one that Wes I first started diving into the docs were, like, nonexistent. So I really had to struggle through it for a bit. But now it looks like the docs are much better. There's a lot of examples.

Active user avatars, chat apps with active avatars.

Yeah. Cool stuff.

Next Node here from Rod. Loving your podcast. I'm hoping to use a CSS anchor positioning after getting it working beautifully on Chrome. Nice, Rod. I'm desperate for some cross browser support. I thought the polyfill would save me, but I think it doesn't work because all of my CSS is dynamic.

Do you have any updates or backstage dirt at when Safari will be releasing this major feature? Yeah. I don't have any I Wes, maybe I have talked to folks about this who have said that it is past the stage of fussing anymore because, last time we talked about this, there was some talk about, maybe perhaps Safari not being totally on board with the the current API. Node I don't I don't know how that was resolved, but I my understanding is that was resolved and that they are

implementing. There was an API for positioning things with keywords. Wes.

Yeah. The position area property, which is you can say top left bottom, right? Y span span X span X. And like basically you can tell it to go anywhere you want with just these keywords, or you can, there's a, there's a whole nother API where you can specifically calculate where you want it to go. But a lot of the common use cases that you're, you're gonna want to cover are simply, you can just use position pnpm.

And it previously was called inset area, and the API was slightly different. That was in Chrome. It's since been scrapped.

So hopefully, I don't I I'm doing a quick search on Bugzilla on webkit.org.

That's usually where I go to see Yeah. Kinda where they're at. Otherwise, I will go to webkit GitHub, and you just do a quick search for some of, like, the common,

CSS properties, like position area and, and see if there's anything there. Let me do a quick search. Yeah. And I in in the meantime, I I found the, Mozilla because you mentioned when is this gonna be in Safari. I think it's worth noting that this is also, not in Firefox just yet in any regard, not in any alpha behind the flag or anything like that.

But I do think this year, this 2025, I feel like we'll have to see some movement on this. This API is so awesome. And for people who don't know, anchor positioning allows you to, anchor something to something else. So, typically, we would have done this with position absolute inside of a position relative container. But the anchor API is more than just saying, hey. Pin this to the bottom left. You can do things like, if it's close to the side of the screen, move it to the bottom right. If it's close to the bottom right here, put put it to the top left. So you can do some really amazing interactive things in how you position things that let's just say, we're that's a a giant pain before. You're reaching for JavaScript. You're reaching for all this stuff to be able to do that. You're you're bringing in the library.

As for the polyfill, like you mentioned, I have not also I don't know if it's just your dynamic stuff. Polyfill for me has also never worked totally well. I don't know why that is if I'm doing something wrong as well. But, you know, it does exist if you wanna give it a try. And, yeah, anchor positioning is pretty pretty dope overall. Yeah. It's it's probably because, like, it uses CSS variables.

Right. And with polyfill, sometimes there's, like, an extent to being able to pull out the value of a CSS variable. So that might be it. I I just did search on on the WebKit GitHub, and there was many pull requests merged going back to September, so 4 months now around the CSS anchoring.

So, yeah, it it looks like a good chunk of it is is in. There's even issues around how it actually handles it. So I bet we'll start to see this. I bet January 2025, we'll see this hit Safari technical preview. That's my guess. Yeah. I see even in the,

Interop web platform test Deno, the most recent comment about it on October 11th says it's a good candidate for Interop 2025. And Interop 2025 would mean that all of the browsers would, make it a goal to get this in by 2025.

Yeah. So hopefully, that happens. I'm I'd be stoked for it. It's one of the APIs that, I feel like it's really holding back some things like popover right now, which gotta love popover, but would be even better with anchor positioning. So can't wait to have that.

Next question from producer Sanity. I don't know if that's our producer, Randy, or not. It is our producer, Sanity. Because, I cut off the part of the question where he says, I could have just asked you guys guys this in Slack, but I wanted to put it as a question. So,

do freelance developers with skills in graphic and UX design often win the work over the competition? My hypothesis is freelancers who are good at making nice looking sites would always win based on portfolios because clients likely have no idea what makes a good site. When a client is comparing 2 developers, Node functionally perfect site and the other one with amazing visual appeal, I feel like the good looking one will almost always win. Thoughts? Absolutely.

How it looks plays into this quite a bit. In fact, I saw people were talking about this on HTMX the other day where, people were saying, do you think more people would would use HTMX if the website didn't look so crappy? Mhmm. And and the answer to that is is Wes, I think so. And JS much as it doesn't need to, because HD max has absolutely nothing to do with how it looks.

When you visit a project website that looks Node, or you visit a, even when we were interviewing people, when you visit somebody's website and it is nice and polished, even though that, again, that's not what you're hiring them for. You just say, oh, this person has good taste and they have figured out how to make it look good. Right. Yeah. And whenever you see some someone do something that is visually beautiful, you think, wow, this person really know knows what's going on. So I think I think it's worth learning a few things that make a website look nice. Yeah. And I it's unfortunate that that's the case because,

your technical prowess in some ways, like, whether that is performance or or, you know, the training that you have for doing things programmatically doesn't always necessarily require things to look nice. Right? But it's I think it's just a innate part of human psychology.

If something's looking nice, looking well produced, well put together, I think you're inherently going to feel like it's of higher Sanity, just because it shows that they do care about those little things. It's another thing even, like, with pixel perfect design. Right? You ask somebody to implement a design.

And if somebody has a good looking portfolio, a good looking, web property that is, you know, organized and very structured, design wise, I feel like you have a much better idea that that person is going to be able to implement something that has very tight design requirements. And and I think that pixel perfect design is a a skill that a lot of front end developers should make sure that they are always, staying in touch with it. The the your implementation of the design must look like the design if a third party designer designed it. Right?

Totally. Even look at something like Vite.

Vite is a JavaScript bundling tool. Right? Yeah. And it's like competitor at the time was was Webpack Bos server.

And the Vite console log to show you where your URL is. It's nicely indented. You know, there's little arrows, they use emojis where possible, nice line spacing.

That shows me that the developer behind this avenue cares a lot about it. Right? He's he's just he's an actual developer, but the the VIT docs, all of that, Svelte's the same way as well. Right? It just it looks beautiful as well. Yeah. Totally. I I agree. And,

and even as far as, like, you mentioned with the command line stuff, the, that's something that Astro does super well. Their CLI tool is, like, one of the coolest looking CLI tools, and there's something about that. It just makes you think somebody actually cared about making this instead of just threw it together, which I think, kind of impacts how you look at the rest of it. I know it probably shouldn't, and, nerds online will be like, that doesn't matter.

Designed by engineers is fine. But, hey, man. I I do think it it actually does matter in how you feel about things.

Next question here from Anan.

I'm curious about your opinions, Westcott and CJ. CJ is not here, but I will pretend to give CJ's opinions on the different deployment platforms out there. Netlify, CloudFlare, Fly. Io, AWS, etcetera, I would love to hear your Yarn for professional and personal stuff. I'm gonna say I host all of my things in a couple of places.

I hosted either on my own COOLIFY server. It's on Hetzner. It's an ARM Vercel.

And that's where I I just dump a lot of stuff typically, you know, fun projects, side projects, whatever.

If it's something that I, really wanna just, you know, set Scott for or set and forget about it or something I wanna make sure just like it's always up and always working, I pretty much always use Cloudflare, for that. I throw everything in Cloudflare Workers since, the Svelte Cloudflare Workers adapter is so smooth and easy. It just drop in the adapter, push up, and go. So for me, it's either in Cloudflare or my own COOLIFY Vercel. And I gotta say that's pretty much it. You know, we host the syntax site on Vercel, but none of my projects I don't put any of my personal projects there. I would be interested in learning about fly Scott io. It seems nice. It seems great. I would be learning more about interested in learning more about SST. Looks nice.

Would be nice to be able to host things on AWS without having to become an AWS certified expert or something. So, yeah, that that's pretty much what I do.

We did a whole show. If you go to syntax.fm 4/6/15 on where should you host your warp, hosting Providers Compare, where we went deep on every single not every single one, but, like, all of the the options out there. And I just made a quick list of the ones I personally I think currently I'm running code on, Netlify, Vercel, Render, Digital I not on DigitalOcean anymore. It was for a long time. Mhmm. Quite a bit of stuff on Cloudflare.

I've tried Railway and Fly. Those are both kinda interesting. Fly dot I o is kind of interesting because it's not serverless, but you still can scale up and down as as needed.

Flight control is another kind of interesting one, kind of in the same area as SST for deploying your apps to AWS, just straight up. I have a Coolify it server running in my house here, and I have a couple projects on as well. So there's a lot of them out there.

And, maybe we should do an updated show. It's it's been a year and a half since we did the show. I don't know that too much has has changed in this arena, but

let's go ahead and try to use some of these that we haven't used. Let's let's do that. We'll do a deep, usage on some of these that we haven't used. We'll give a personal experiences.

Every single one. Oh, I have a couple on Deno Deploy as well. Oh, yeah. You do. Yeah. Use Fly. I've used I've used Relay. Yeah.

Linode, DigitalOcean, Heroku, Vercel, Render, Azure, Google Cloud, AWS, FlightControl. I've used them all. You have? But

Okay. Well, maybe Wes should be use some of this. Yeah. And try to deploy them all.

Yes. That actually would be a fun exercise, especially maybe we could even do it live to see what kind of, kind of pain points you hit because that's where you hit the pain points. You hit something and you get some weird node version is not correct error, and then you gotta figure it out.

Yeah. Yeah. Like, what what would be a good app that would test it it all? You Node, it would have to have some back end, front end, a build step. I think that'd be good. You know? Like like, a build step that does HTML, CSS, JavaScript, a front end Hopefully Scott the syntax site because we have our Like Yeah. Our That would be I don't know that that would run absolutely everywhere because a lot of these are not made for all of that. But, like, just a simple, like, 3 back end routes, couple client side things, images, CSS.

I got apps for that.

Yeah. That'd be good. Alright. I'll do it.

Sick. Cool.

Next one from Anan. What process do you use to make sure your website is WCAG compliance? We've answered this quite a bit. Specifically, I will tell you to go back to the Marcy Sutton show, which is episode 836 and text. Fm4/836.

And there's a lot of automation you can do in terms of the browser will will run a bunch of tests in Chrome Dev Tools. So you open up your your dev tools, you go to the accessibility tab, you can run some tests that'll catch quite a bit of it. There's also a whole bunch of ESLint things you can turn on. So I have Node for React a 11 y, and it will slap your hand as soon as you forget to do things like add an alt text or don't specify a button, or if you have a click handler on a unfocusable element, like, for example, if you put a click handler on a div, it's gonna slap your hand and be like, hey, there's you can't there's no way to possibly reach this with the browser, so please add, like, a tab index or or something to it so that you can focus it or use the proper element for this. Maybe you meant to use something different. So those are big ones JS well as we go through the episode with Marcy of how to actually run screen readers and test these types of things.

Word. Yeah. I I, just, the only tool I really use is Polypane. Node does a really great job of, letting you know what, there's all sorts of accessibility audits. Polypane is a browser for testing stuff. It does a great job of visually testing stuff for mobile, whatever, but I also pretty much straight up use it for testing, accessibility as well. So that's what I do, Polypane. What's up? Next Node here from Syed Yether. Hey. Fan of your content. Thanks for reading my question.

My question is about holding state on the URL.

Here's a scenario. Let's say you have an ecommerce app. I'm gonna do my best to read this, by the way. This is, an interesting scenario. On the product page, you hold the size and color in the URL. Let's say you have a URL. The URL is a typical URL, you know, site.comforward/productid, then you have your query params. Like, so question mark size equals small, color equals blue. Right? Pretty typical. That way, you could share the product in the individual product type.

So below the product, there are some suggestions about similar products. So here's the question.

Let's say you want to implement tab functionality to this app.

In 1 tab, product ID is 5, sizes large, and color is red.

In tab 2, product ID is 23, sizes large, and color is green. How do you store the tab state? In the client state, if I store the URL and I share that URL, the person who clicked this link might not have tab 4 or tab 4 is used by another product.

On the other hand, let's say I have 5 tabs and I am at 3rd tab. Wes I click the suggested item, it should be the 3rd tab. It should not update the 1st tab. Obviously, using the browser tab would be much better. How would you approach this? This is some complex state. So, basically, what they're saying is like, you have, an interface where the user has the ability to essentially whether that is like have different products in different places here and whether or not they're comparing them. Either way, those tabs all have, very specific product information and the location of them, all that stuff. Man, that sounds like a crazy use case to have as a long URL.

I think the only way in my mind that you could have this functionality and share it as a URL would be to, just to have a long URL with a lot of query parameters. Yeah. The the size limit is pretty big. That's pretty much the like, I I've never seen a URL that would be longer than what it would take to do something like this with query parameters. Now granted, that gets very complex.

But, I mean, at the end of the day, you're hosting a set amount of things. They're in in an order. So the order in which they're, well, I guess you'd have to have unique query parameters like tab Node color, tab one size.

And you just have those unique query parameters for all of your things. That is not something I've had to do. The the interface that this reminds me of is on, like, a product website. Let's say, I I was working on ford.com.

We had, an interface where you had to where you could compare different models of cars. So you'd say, I wanna compare this version of the Mustang to this version of the Mustang, and it would put them in a big table. So like yes. You're having multiple ones up and you'd wanna be able to share that state. To me, I would just make it a long long ass URL. That's what I would do if you need to have that be shareable in state. But what would you do, Wes? Because this is an interesting question.

I think shareable URL state is is for things that are publicly accessible.

And what he's describing here is the fact that a page can look different for absolutely everyone. Right? And if that's not shareable, then it's maybe not some state that needs to go into the URL. However, if if you're doing what you're you're explaining, I thought that was a great one where you you're comparing multiple things, then if that's the case, I would put the product URL product IDs in the URL, and then also pass a highlighted product ID in the URL along with it. Because you can pass multiple products as an array in in query params, you would just say, question mark product equals 123, and then another Node and product equals four, five, six. Now all of a sudden, you've passed multiple products to that, and then you could pass a 3rd argument that or a 3rd query param that specifies which one is currently being focused. At a certain point, there's too many possible things, and and that state doesn't need to either be stored at all because the user can simply just go back and click to where they wanted, or that state needs to be stored in local storage or on the user's profile or something like that. At a certain point, it it doesn't get out of doesn't make sense. Right? If you go to the Syntax website and you go to click on shows, we have filters for the type of show, how many per page, how you would like, and how you'd like to sort them. Right? And between those, what, there's 4 types of shows, 3 options per per page, and 2 options for sorting.

That is what what is 4 times three times 2? That's Wes possible permutations per page, and then we have 86 pages, so that's Wes times 86. The page also goes in your URL. So that's 2,064 possible URL combinations, and and I'll tell you, we go into our our Google Webmaster search tools, and it tells us, hey. There are thousands of unindexable pages, and it's because I've I've explicitly told Google, don't index every possible page, like, there's some there's some pages that are are, not meant to be indexed. We Node page 1, page 2, page 3, those should be indexed, But page 87 of hasty treats while you're putting 14 per page, that that doesn't make sense to to actually put on, on Google.

Yeah. Yeah. Totally. Interesting problem, though. Yeah. I I think you you have to ask yourself, is this something that needs to be shareable as is? And if it JS, yeah, I mean, you gotta do what you gotta do. But, hey.

Next question from Austin. The addition of has to CSS seems like it solves a ton of problems. It makes the language much more powerful and flexible. So real quick, CSS has allows you to select an element when it has a specific child.

And that's really handy because you can you can select a parent given the state or the selector of something that is inside of it. You previously have not been able to do that. I've been thinking recently how CSS these days just does what I want, and it got me thinking, will we ever reach a point where CSS is complete? That is Wes all the features developers need and doesn't need to be updated anymore, or will there always be some new refinement that can be added? Oh, that that's a great question. Like, I Super good. Because I was at a conference in Oona who works on, Chrome, the Chrome dev relations.

She basically was like, alright, like, what can we add? And I was just like, Good, good question. Because it's like, customizable ESLint. We're doing that.

Mix ins, we're working on that. Functions, we're working on that. You know, like you think about all these things, flexible layouts, you know, we got flex Bos in grid and being able to vertically align something without flex box or grid. Oh, we can do that with block level elements now. And like, I feel like we're getting close to a point where we have a lot of the things that we want. There will always be new UIs. There will always be new form factors, right? We saw this with mobile. Oh, all of a sudden CSS now has to adapt to fingers and multiple touches and, and whatnot. So I think as interfaces constantly evolve, as different interfaces become popular, and as as we get new things in CSS, those sort of dictate the UIs as well. You know, we don't build certain types of apps simply because they are not possible.

And once we get new, like CSS has, oh, wow. Now we can start doing, you're going to start seeing a lot more common things where you can highlight the parent of something when that item is Vercel, because you don't need any, a bunch of JavaScript for that. So will we ever be done? I doubt it, but I do feel like the last 5 years and probably the next 2 or 3 years has had some significant change in CSS and we're at a point now where a lot of people are are pretty happy.

Yeah. Well, we're pretty happy for right now. Right? Yeah, especially because, like we said, a lot of the stuff that we've been getting has been, like, extreme quality of life stuff, stuff that we've been saying wouldn't be great if we could have for so many years. But I do think there is a future world where CSS is going to be taking care of some things that, like, perhaps are not on our radar right now or plate right now. Maybe even by who knows? The end of the year, we'll start thinking about more about this stuff. But, like, WebexR, man.

WebexR, very much firmly the category of JavaScript these days.

So I'm talking about being able to place things in virtual reality and augmented reality in different locations.

And, you know, we think totally in boxes right now. We have our monitor. We have our phone. We have our computer. Whatever. They're all boxes, and the website is a box in a browser. But, like, if you were to think about it, if you were to take your website and you were to move it outside of a square, like, what might you have? Like, for the Syntax site, you might have Yeah. The Syntax podcast player as being its own thing, or maybe you have the listing as being its own thing, and these might take different shapes. They might exist different places in three d space. I wonder if we ever get to the point when WebXR becomes more ubiquitous or XR in general. Right? Because XR people start actually having XR devices, you know, glasses that can project things in three d space.

I would imagine that we would not like that to be entirely the realm of JavaScript forever. Right? I I would I would imagine. So at least me, personally, I don't know what that looks like or what that even means. But, you know, I do think that the way that we we build interfaces or the the way which we consume interfaces, maybe I should say, will change once XR becomes more ubiquitous. And I think that might dictate maybe some of these newer things that we're just not even thinking about right Node. Because right now, building websites, hell, yeah, brother. It's all looking good. There's a lot of great stuff. For me, personally,

give me mix ins, functions, style queries, and I'm gonna be happy camper here. So yeah. Yeah. That's what that's where my thoughts are on that. Next question from Beanie Wanting. When are we gonna get syntax beanies? Touc for the Canadian. Thank you. I appreciate that. I don't do hats, but I do love a beanie. I I do like this as well. We've been talking about it. Scott's wearing a beanie right now. The thing about beanies is that they're all different, and I don't know

what the best beanie would be. I do. This one right here. Nice and thick. You Node, actually, my my my beanie yeah. It's Scott be one that you can you can unroll so that I can wear it nice and tall if I wanna wear it nice and tall, or I can roll it up and still have a little bit of space at the top. I'm not a I'm not a guy that wants the beanie, like, tight tight to the top of my head like this. That's not my look. I need a little bit of a little bit of a I don't know what you call that. A little bit of pull that up top. Yeah. A little bit of a slouchy. Slouchy beanie. Sure. Because I also have I have one that's, like, like, Vercel. Big fan of that. The other thing is that

with beanies that are knit, if you put a, like, a patch on it or if you try to embroider on it, it looks like crap as soon as you stretch it. Mhmm. And then and then the lines don't line up. Like, the one that Scott has right now is is perfectly straight. But if you were to sew something onto that at its sucked in state and then stretch it out, it starts little tag. Yeah. I think the tag tag is is probably your our best bet.

Yeah. So I I'm a beanie fan. You Node, I wear these things all the time for dance, for whatever.

So, I'm constantly wearing a beanie no matter what if it's appropriate to. Even in the summer, sometimes I'll put 1 on in a problem.

In in fact, I I got made fun of that for once when I used to work at a computer store.

I think he probably told this before. It's it's it's stupid, but I was some guy was saying how much he hated Apple fans, and he's like, it's a bunch of kids wearing beanies in the middle of the summer. And I was just he, like, looks over at me. I'm on my Apple computer. I'm wearing my beanie in the middle of the summer.

I hope he's trying to say that to hurt my feelings or what, but,

We have another 1 last question here from Fahad, and it says, long time listener, I would like to know what headless CMS I should use for my blog. I am a software engineer who does technical design with mermaid designs.

Nice. Hold on. What the hell is a mermaid design? Oh, mermaid designs. Oh, mermaidjs.org.

Yeah. I've seen this. Mermaid diagrams. It's it doesn't say mermaid designs, by the way. It does say mermaid diagrams.

Oh, I read that wrong. Okay. So mermaid diagrams is a library for building beautiful diagram and charting tools. Is that right? Yes. Correct. Oh, yeah. For things like swim lanes and Mhmm.

Flow states and and Gantt charts, etcetera, etcetera.

That's really oh, these are actually really nice looking. Oh, I like this a lot. You know, yeah, mermaid is great. I like mermaid. How is this rendered? Because it renders them to images.

You write it in, like, this, like, ASCII format, and then it renders them. It kicks out in oh, SVG.

Yes. That's awesome.

That makes sense as SVG.

This is cool.

And you know what's also really good at Mermaid is chat g p t is super good at Mermaid.

Really? Yes. I have actually asked it somewhat recently to generate a Mermaid diagram for me, based on my needs, and it did it quite well.

Is the language that Mermaid runs in, that's their own, like, DSL.

Right? Yes. I believe so.

Wow. That's cool. Anyways, that was not the question, but I don't think I have ever given this a good look. I've seen it mentioned, but this is really cool.

So he says, I would like to include code snippets. Does it make sense to use MDX for this type of blog? Man, this is the these are, like, the 2 hardest questions that get in we get asked, and I put it in here because it's the last one of the year we're recording. And I've been dodging these questions all year because what headless CMS should I use is a very hard question. We've done a show many years ago, but I think we need to do another one. Payload is would probably be the one that I would I would reach for right Node. But then when it gets into injecting code into a CMS, you have to make the decision for, do you wanna write it, like, in a in, like, your actual code editor, or do you wanna, like, use a UI to actually manage your your things? Or do you wanna do both? Because, like, Tina is is kinda Tina CMS is kinda in the same space as that. I personally have an MDX blog, and I would not choose any other way, but also it's such a pain in the butt Mhmm. Where to a point where I need to update it and and I had to upgrade M. D. X Vercel of it and we use M. D. X. For the syntax website and there's a bazillion plug ins that you have to get working just all exactly writing when it works, man, it is it is it good. But when it breaks or doesn't work, it's just like, I wanna share this thought.

I wanna write a quick blog post, but I don't feel like fussing with it right Node, and it's it's a hard hard thing. That's mostly The second half is more of a skill issue on my half, I think. But Sure.

I don't know. MDX is a pain, don't you think? So sometimes I would not use anything else. But

Yeah. It depends on who this this blog is for, I suppose. And just yourself. Yeah. But I I mean, like, as a generalized question. Like, if you're picking a headless CMS, then sure. Oh, yeah. But that all you Node that's what I do. But I actually, it's funny, Wes.

In true me fashion, my blog and my website is not MDX.

It's obviously because it's Svelte, but there is even, like, a Svelte equivalent of that type of thing called MD specs. And it is it is not. I have chosen to, oddly enough, make mine, some stupid custom thing. I don't know why I did this, but, let me tell you why. I'll tell you why it's a custom thing because I'm obsessed with doing custom things. But no. No.

What I did is I wanted to have I wanted to have a a non non components based thing, but I wanted to have custom components Wes, let's say, I guess it's called custom markdown tags. I have just straight up markdown files, and I have front matter. And then if I wanna drop in a demo, I do dollar sign, dollar sign, the demo name. And then what it does is it looks up that demo, which is an HTML file, and it iframes it into the site. That's what I do, mostly because I just don't need components in here. So I instead of going like something, I I decided to do my own thing, which is it's stupid, but it works. And, it actually works pretty nicely, and I don't have to worry about it too much. But, yeah, I I don't recommend necessarily doing that. My favorite headless CMS overall is pocket Bos. Pocket based is great. It works super well. It's in 1 file. So if you want to if you're the type of person who likes to not have click ops and, you know, click to create everything, you can type out your pocket Bos schema and import it and just have it update your pocket base. You can have chat g p t generate it.

It's great. It it actually functions like a real CMS. It has a nice interface. You can even have a WYSIWYG if that's your thing. So you can use the back end of pocket Bos as a single developer and not give it to a client and feel like, yeah, this feels CMS like. So for me, I'm picking pocket based. Payload is awesome.

It's also a great choice like you mentioned and, that's that's pretty much where I'm at. The other thing and this is also why both my personal website and the syntax website are on in markdown JS do you want the developer community to be able to submit changes and corrections? Because for me, I have I think I have something like 900 markdown files in my repo, because my my my entire beginner JavaScript course is also in markdown. It's it's many hundreds of things and there's thousands of screenshots.

And I've had I've had hundreds of pull requests to to that content, you know, and there's no chance I would have fixed hundreds of things if I got emails about it. And there's no chance people would have emailed me about hundreds of little, oh, you, you have a typo here or something like that. And it's so nice to be able to have that content up on GitHub and just have everybody fix it for you or or add their own,

their own things to it. Totally. Yeah. I I do think that's a good ESLint. And it's also a good point strictly that, like, like you said, if if this is a developer blog for a developer, that's a completely different story than a client. Node granted, they did say it it is for themselves. So yeah. Yeah. I would not recommend ever giving your client ever markdown.

Yes. Absolutely.

Last 1 here. I know we said the last 1 was the last 1. We got 1 more for you. It's from Omar. Bonus.

Before, small and many npm packages were considered a benefit.

Frameworks like Angular were looked down upon because they came batteries included.

But now developers want fewer packages with more functionality.

Why has that perception changed? Will it change again in the future? Are are small packages back in fashion? I or big packages back in fashion, I should say. I don't know, man.

I don't necessarily think that.

It it's I I think you have big packages like Angular or Svelte or big libraries, right, that that are more batteries included like SvelteKit.

But oftentimes, they're still made up of much smaller ones and you're still using these smaller libraries in the way that you had mentioned where, you know, you have smaller libraries and you can attach them on to be more batteries included.

Now I think maybe even what, like, you could be thinking about is, like, you have React, but React doesn't include, like, proper state management or, you know, proper image stuff, routing. Right? And and so, therefore, you are having to staple on a bunch of external libraries and packages to get this thing actually functional.

And, yeah, I I think I think there's just war on some people. You know? You you even see it now with the amount of things people are bringing into their projects. Now there's a downside to that where, like, if you bring in let me tell you. If if you have all of the choices, you can make all of the choices to bring in as many small libraries as you want. You know what happens? What happens is each of those small libraries have a whole host of dependencies, and then you click, let me actually see what that dependency graph looks like, and it's massive. It's not little. Even though you're bringing in all these little little packages, these little packages also have, dependencies, dependencies, dependencies, where sometimes if you have a more batteries included thing, they can tune that much more finely. I know the Svelte team is super good about this. Finding libraries and packages that have a lot of dependencies and then, replacing them with the same alternative that actually is less dependencies or less third party dependencies. Because the further and further you get down that dependency graph, the more likely, you know, something becomes unmaintained somewhere down the line, something stops working, something has some sort of, injection of, you know, who knows what into the code. So I think there are pluses and minuses here. Personally, I don't mind things being batteries included. I came from WordPress ESLint. I came from Drupal land and that had all the batteries and it was great. So yeah. I don't I don't need to piecemeal everything together myself personally. Yeah. I think it really depends on people. Like, they want the ability

to switch to something if if they need it. However, they also want to be prescribed how to do something.

And I think a lot of these new meta frameworks are sort of getting it right or, or even like React suspense is a good example where it just takes a promise, you know, it doesn't matter how you make that promise. It's just a promise. But also I want some state management, you Node, and that's why like a meta framework where like tanstack start will be like, yeah, you can use the built in query or you can use tan sack query or you can do whatever the hell else you, you want, as long as it's promises and you're awaiting them or returning a promise, then then you're good. And I think we will forever have this switch of, I want to bring all of my own stuff too. I wish it was a little bit more batteries included and we'll just go back and forth, back and forth and we probably will never stop that. But, but also to what Scott said is a lot of the times, like if you look at something like, Vinci, which is Scott 10 stacks Scott is built on Vinci. Vinci is built on Nitro. Nitro is built on, h three and it's like all the way down and it doesn't you don't have to know that you're probably thinking like, oh my gosh, there's so many new things. Now you don't have to know what any of those things are because those are just good primitives that library authors work on. And, and you, the developer often just gets to sit at a higher level where that level is, whether it's you absolutely must use everything or here is 80% and you bring your own for the rest of it is is kind of up to you, the developer.

Yes. Absolutely.

Sick. Alright. Let's move into some sick picks. You got a sick pick for me today? Yeah. I have a sick pick. I don't know how many people out there like hockey, but, hey, I'm excited about this, so I'm gonna talk about it.

Jeff Merrick, one of my favorite hockey personalities. He's been around in the podcasting game for a long time. One of the best, historically Wes, hockey podcast, Merrick First Tolinski, was, beloved and went offline a little while ago, like, several years ago. And since then, I've been really bummed out about that. But, Jeff Merrick, after being released from Sportsnet, is back in his new podcast.

The Sheet is out now. And guess what? Every Tuesday, they will be doing Merrick Vercel I can't say that. Merrick verse Tolinski on this podcast. So if you're a hockey fan and you have not heard that news or you like that podcast in the past, that podcast is back on the sheet with Jeff Merrick. So I'm stoked about that. I was trying to explain to my wife why that was such a big deal to me the other day. I was like, this is a podcast I used to like a long time ago, and then it went away. And then they've never kind of recaptured that magic in other podcast, and I haven't really liked any of his other, ventures. And now he's doing it again. His solo podcast is great. So I'm a happy camper here, that this podcast is back, just in good time. Sweet. I'm going to sick pick,

a monitor.

This is one. It was sent to me.

It seems like they sent 1 to literally anyone with a pulse in a a YouTube channel. Hey. They didn't send me 1. Oh, shit. Wes, okay. Well, we'll, we'll get them to send you one. Yeah. No. I don't need 1, by the way. They've sent me some bunch of stuff, in the past, but, yes, I will I will take 1 if they get at me. Whatever. So it's the BenQ

RD 28 zero u, which is doesn't make any sense, but it's the the whole idea is that this is a programming monitor, a monitor meant for web developers. And there's a whole bunch of, like, backlight features on it, and you can switch to it will detect when it's dark in the room and change the color profile. And there's there's a whole bunch of kinda nifty things around around that. But just coming from a like, I don't I don't necessarily care that much about those features. I just care about, like, it is a 3 two monitor aspect ratio. So it's almost a square.

Mhmm. And it gives you the resolution of 2560 wide by 170 7 high or you can you can go even even higher if you want, but that's kind of where I'm running it at right Node. And I have always had the problem where I want a wider Sanity, but I I also want the height. I want a greater than fourteen forty because I felt like at 14:40, I could really only be running Node thing, height wise. So this is awesome because I'm able to run like 2 apps stack or 3 apps across.

Yeah. Like it's, it's wide enough that I'm happy with it. It's a 28 inch monitor. I'm coming from a 32 and I, I don't miss it at all. Which I was very surprised at. So I can still do 2 or 3 horizontal, but I can also stack 1 or 2 vertical if I want, you know, I can have Chrome dev tools and the whole website up, or I can have my terminal and and my code editor open.

And the killer feature for me, this is not a problem most people have, is but my camera is not too far off on the side. My the the hardest problem I have is I want my monitor to be dead nuts in front of me. I don't want it to be off to the side because I I did that once, and I'd, like, hurt my back workplace hazard.

So it's not as wide as my 32 inch.

So now I don't have to I don't have to worry about my my camera being too far off to the side, and I'm I'm I'm really happy about that. So if you're looking for a decent monitor, check out the BenQ programming Sanity. And and, also, the color on it is fantastic.

Like, it's much better than my LG and even better than I have, like, a very expensive Dell one, and, it's really good. People are gonna be like, it's not a 120 hertz or whatever. It's 60 hertz.

I don't care. I'm not playing I'm not playing games. You Node? I'm not a gamer. And, I fear that once I do try a higher refresh rate monitor, I will ruin myself. So I'm I'm holding up.

I do like higher refresh rate, man. That is a thing for me. I I'm, like, one of those people, you know, like, you know, we're, like, you can't tell the difference between the 90 FPS or 60 FPS. You can't tell the difference. I'm like that with refresh rate where, like, it just feels I I know most people are when they feel when they use a high refresh rate device, but, like You're like, oh, that's good. I So the one Yeah. I just feel it. The one thing I heard that someone

made so much sense is you can read text while scrolling quickly. Yes. Yeah. Is that true? Yeah. Yeah. That's that's a cool feature of high refresh rates. Word. Word. Word. Word.

Alright.

Shameless plugs. Do we wanna plug? As always, plug let's plug the Syntax YouTube channel. We are going hard on YouTube. This year, we're doing a lot of new formats. We're trying a lot of new stuff, and we're having fun delivering, I would say, just really awesome, high quality educational content, but, like, fun stuff. We're not here to bore you. We're here to to make you laugh and have a good time. So check us out at Syntax FM on YouTube, and, we'll have ESLint in the show notes below. But we're we're we're on Scott on YouTube this year, so we'll be over there quite a bit.

Alright. Happy New Year, everyone. Happy New Year.