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

Scott and Wes ring in the new year, answering listener questions on the rise of durable objects, handling tricky tab state in e-commerce apps, and their top picks for headless CMS. They also chat about the future of CSS, deployment platforms, and whether Syntax beanies might finally be a thing! Show Notes 00:00 Welcome to Syntax! 00:52 Brought to you by Sentry.io. 03:10 What Are Durable Objects? 08:25 CSS Anchor Positioning: Cross-Browser Support Update. Implement CSS Anchor Positioning. 12:48 Freelancers: UX and Design Skills vs. Functional Expertise. 16:47 Choosing the Best Deployment Platform. Syntax Episode 615. 20:49 Making Websites WCAG Compliant. Polypane. 22:35 Managing Tab State in Complex Apps. 28:43 Will CSS Ever Be Complete? 33:21 When Will Syntax Beanies Drop? Syntax Swag Store. 35:21 The Best Headless CMS for a Tech Blog. 42:15 From Many Packages to Monolithic Frameworks. 46:41 Sick Picks + Shameless Plugs. Sick Picks Scott: The Sheet with Jeff Marek. Wes: 28” 4K+ BenQ Programming Monitor. Shameless Plugs Scott: Syntax on YouTube. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

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

• 0:00Wes Bos?

  Welcome to Syntax. Today, we've got, first of all, Happy New Year, January 1st. We've got the first potluck of the year. Lots of really good questions about what the hell are durable objects and when would you use them? Should I use MDX for my personal blog? It's a new year. Everybody's got the, they want to build a, I'm going to build a redo my website this year, right?

• 0:21Scott Tolinski?

  It's a new year, new me.

• 0:22Wes Bos?

  CSS done. New year, 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.

• 0:51Wes Bos?

  Real quick, let's talk, I'm going to tell you a tale about a bug I had and how Sentry saved my bacon. So I rolled out a couple of days ago, I rolled out a new checkout on my, my course sites.

• 1:03Scott Tolinski?

  Nice.

• 1:03Wes Bos?

  That I've been working on for, for quite a while. And the checkout experience, I had like, I did all my testing and whatnot. And I, I released the thing and I kind of, I just like soft launched it, you know? Like just, I put it on one of the course sites 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 one bug that broke the whole thing on, on iOS 15, which is

• 1:33Scott Tolinski?

  Oh, yeah.

• 1:34Wes Bos?

  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?

• 1:58Scott Tolinski?

  What? What was it?

• 1:59Wes Bos?

  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, as Safari does, there was some weirdness around it. And I was seeing this bug come in a couple of 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 Sentry and, and you, at that point you pray it doesn't come back. You hope you fixed it.

• 2:38Wes Bos?

  And it was really great because if I, I would have probably never have known that it was broken on that device. Cause it was such a low traffic. And I, I don't know that I would have known to test a six year old iPad or whoever that Safari version is.

• 2:57Scott Tolinski?

  Yeah. Yeah. Those types of bugs are typically like, you toss them like a boomerang and they'll just eventually come right back here with something else. Yeah.

• 3:07Wes Bos?

  Yeah. So check it out. Sentry.io forward slash in tax. All right, let's get in to the very first question from Bean Harry. That's, you think that's a joke name or not? I don't know.

• 3:22Scott Tolinski?

  Good to tell you.

• 3:23Wes Bos?

  Yes. What are durable objects? They seem to pop off everywhere recently. It's true. 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. So I'll do my best to sort of explain what I at least think they are. And 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.

• 4:04Wes Bos?

  And if you want to do things that are, are both real time, meaning that like multiple people can connect to something. And you can set like a web socket back and forth. Or if you want to keep like state, 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 needed, 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 web sockets. So if you want to do realtime on something that doesn't always exist, like a worker doesn't always exist, it spins up,

• 4:44Wes Bos?

  it gets used, and it gets spin 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 user. And they also have a storage API where you can stick stuff. So specifically, Cloudflare also has a SQLite API for durable objects. It's in beta right now, which I've used myself. It actually works really well. And you can also like roll it back as well. So I think like durable objects is just like a primitive in which you can build stuff on top of. And it's good for storing data and doing realtime. And then

• 5:28Wes Bos?

  people will tend to build stuff on top of it, like their SQLite adapter.

• 5:33Scott Tolinski?

  Yeah, not something I've used, but you know, it's like one of the, I know you said it's not just Cloudflare, but it's one of the host of Cloudflare products that 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 a need for it. But although it does sound interesting and something that I, you know, probably should dive into at some point here. So thank you for that explanation of durable objects.

• 5:56Wes Bos?

  Have you heard of PartyKit?

• 5:58Scott Tolinski?

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

• 6:01Wes Bos?

  Okay, so PartyKit is built on top of durable objects, right?

• 6:04Scott Tolinski?

  Interesting.

• 6:05Wes Bos?

  So if you want like a, can you explain what PartyKit is?

• 6:09Scott Tolinski?

  Yeah, well, it's funny because it does kind of fit into this whole, um, man, real-time multiplayer world, um, 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, uh, sending messages between users that are currently using something. And what's interesting about this is that it's pretty, uh, flexible, right? So it's not just like use partykit and that's all, you can use partykit with a bunch of CRDTs. You can, you can use it to do interesting multiplayer

• 6:51Scott Tolinski?

  real-time stuff, but at the same time, it is a bit lower level than something like, ooh, LiveBlocks, I believe. LiveBlocks kind of fits in the same spot of building collaborative multiplayer experiences, but kind of 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.

• 7:15Wes Bos?

  And it, it also does the whole like offline syncing thing as well, right? It is, it is a sync engine. Like I know it does crudités, CRDTs.

• 7:23Scott Tolinski?

  Crudités. Uh, it uses, uh, it uses other, it uses other CRDTs. So you can use YJS, Auto Merge, uh, those types of things with it. So again, it's more or less like the, um, it's a, 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.

• 7:46Wes Bos?

  It's kind of cool because like if you did ever want to build a real-time application, uh, you're kind of committing to having a server running forever for the life of that thing. And as ClubFlare 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.

• 8:08Scott Tolinski?

  Yeah, it's a cool project and, um, one that when I first started diving into the docs were like non-existent. So I really had to struggle through it for a bit. Uh, 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 one 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? I went Safari. We'll be releasing this major feature. Yeah, I don't have any, I guess maybe I have talked to folks about this who have said that

• 8:54Scott Tolinski?

  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. No, I don't. I don't know how that was resolved, but I my understanding is that was resolved and that they are implementing it.

• 9:14Wes Bos?

  There was an API for positioning things with keywords. And 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 going to want to cover are simply you can just use position area. 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.

• 9:59Wes Bos?

  That's usually where I go to see kind of 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 see if there's anything there. Let me do a quick search.

• 10:17Scott Tolinski?

  Yeah, and in the meantime, I found the Mozilla because you mentioned, when is this going to 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 a 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've 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

• 11:02Scott Tolinski?

  the bottom right. If it's close to the bottom right here, 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 giant pain before you're reaching for JavaScript, you're reaching for all this stuff to be able to do that. You're bringing in a 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 want to give it a try. And yeah, anchor positioning is pretty dope overall.

• 11:36Wes Bos?

  Yeah, it's probably because like it uses CSS variables.

• 11:39Scott Tolinski?

  Right.

• 11:40Wes Bos?

  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 just did search on the WebKit GitHub, and there was many pull requests merged going back to September. So four months now around the CSS anchoring. So yeah, it looks like a good chunk of it 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.

• 12:17Scott Tolinski?

  Yeah, I see even in the Interop web platform test repo, 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'd be stoked for it. It's one of the APIs that I feel like is really holding back some things like Popover right now, which I love Popover, but would be even better with anchor positioning. So can't wait to have that.

• 12:48Wes Bos?

  Next question from producer Randy. I don't know if that's our producer Randy or not.

• 12:52Scott Tolinski?

  It is our producer Randy because I cut off the part of the question where he says, "I could have just asked you guys this in Slack, but I wanted to put it as a question."

• 13:02Wes Bos?

  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 two developers, one 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 HTML8 the other day where people were saying, "Do you think more people would use HTML8 if the website didn't look so crappy?" And the answer to that is yes, I think so.

• 13:46Wes Bos?

  And as much as it doesn't need to, because HTML8 has absolutely nothing to do with how it looks. When you visit a project website that looks nice, 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? And whenever you see someone do something that is visually beautiful, you think, "Wow, this person really knows what's going on." So I think it's worth learning a few things that make a website look nice.

• 14:25Scott Tolinski?

  Yeah, and it's unfortunate that that's the case because your technical prowess in some ways, whether that is performance or the training that you have for doing things programmatically, doesn't always necessarily require things to look nice, right?

• 14:43Scott Tolinski?

  It's, I think it's just an 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 quality. 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 I think that pixel-perfect design is a skill

• 15:24Scott Tolinski?

  that a lot of front-end developers should make sure that they are always staying in touch with it. Your implementation of the design must look like the design if a third-party designer designed it, right?

• 15:36Wes Bos?

  Totally. Even look at something like Veet. Veet is a JavaScript bundling tool, right?

• 15:43Scott Tolinski?

  Yeah.

• 15:43Wes Bos?

  And it's like competitor at the time was Webpack Dev Server. And the Veet 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 just, he's an actual developer. But the Veet docs, all of that, Svelte's the same way as well, right? It just, it looks beautiful as well.

• 16:15Scott Tolinski?

  Yeah, totally. I agree. And even as far as like you mentioned with the command-line stuff, 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 that just makes you think somebody actually cared about making this instead of just throw 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 do think it actually does matter in how you feel about things. Next question here from Anon. I'm curious about your opinions, Wes Scott and CJ. CJ's not here, but I will pretend to give CJ's opinions on the different deployment platforms

• 16:57Scott Tolinski?

  out there. Netlify, Cloudflare, fly.io, AWS, etc. I would love to hear your preferences are for professional and personal stuff. I'm gonna say I host all of my things in a couple of places. I host it either on my own Coolify server. It's on Hetzner. It's an ARM server. And that's where I just dump a lot of stuff typically, you know, fun projects, side projects, whatever. If it's something that I really want to just, you know, set and not for, or set and forget about it, or something I want to make sure just like it's always up and always working, I pretty much always use Cloudflare for that. I throw everything on Cloudflare workers since the Svelte Cloudflare workers adapter is so smooth and easy. You just drop

• 17:41Scott Tolinski?

  in the adapter, push up and go. So for me, it's either in Cloudflare or my own Coolify server. 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.io. It seems nice. It seems great. I would be learning more about, interested in learning more about SST. Looks nice. Be nice to be able to host things on AWS without having to become an AWS certified expert or something. So yeah, that's, that's pretty much what I do.

• 18:15Wes Bos?

  We did a whole show, if you go to syntax.fm/4/615, on where should you host your app, 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 am running code on. Netlify, Vercel, Render, Digital, not on Digital Ocean anymore. It was for a long time. Quite a bit of stuff on Cloudflare. I've tried Railway and Fly. Those are both kind of interesting. Fly.io is kind of interesting because it's not serverless, but you still can scale up and down as, as needed. Flight

• 18:57Wes Bos?

  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 server running in my house here that I have a couple of projects on as well. So there's a lot of them out there. And maybe we should do an updated show. It's been a year and a half since we did the show. I don't know that too much has changed in this arena, but.

• 19:25Scott Tolinski?

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

• 19:32Wes Bos?

  I feel like I've used.

• 19:33Scott Tolinski?

  Personal experiences.

• 19:34Wes Bos?

  Every single one. Oh, I have a couple on Dino deploy as well.

• 19:38Scott Tolinski?

  Oh, yeah.

• 19:38Wes Bos?

  Railway I've used.

• 19:40Scott Tolinski?

  I've used Railway.

• 19:41Wes Bos?

  Yeah, Linode, Digital Ocean, Heroku, Versal, Render, Azure, Google Cloud, AWS, Flight Control. I've used them all.

• 19:52Scott Tolinski?

  You have. Okay.

• 19:53Wes Bos?

  Well, maybe we'll.

• 19:54Scott Tolinski?

  Let me use some of these.

• 19:55Wes Bos?

  Yeah, and try to deploy them all.

• 19:57Scott Tolinski?

  Yes, that actually would be a fun exercise, especially maybe you 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 got to figure it out.

• 20:11Wes Bos?

  Yeah, yeah. Like, what would be a good app that would test it all? You know, it would have to have some backend, frontend, a build step. I think that'd be good, you know, like, like a build step that does HTML, CSS, JavaScript, a frontend.

• 20:25Scott Tolinski?

  Probably not the syntax site, because we have our.

• 20:28Wes Bos?

  Like, yeah, 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, three backend routes, couple client side things, images, CSS.

• 20:43Scott Tolinski?

  I got apps for that.

• 20:45Wes Bos?

  Yeah, that'd be good. All right, I'll do it.

• 20:47Scott Tolinski?

  Sick. Cool.

• 20:49Wes Bos?

  Next one from Anon. 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, syntax.fm/4/836. And there's a lot of.

• 21:12Wes Bos?

  You can do in terms of the browser will run a bunch of tests in Chrome Dev Tools. So you open up 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 one for React 11y 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 going to slap your hand and be like, hey, there's you can't, there's no way to possibly reach this with

• 21:52Wes Bos?

  the browser. So please add like a tab index 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 as well as we go through the episode with Marcy of how to actually run screen readers and test these types of things.

• 22:11Scott Tolinski?

  Word. Yeah, I just, the only tool I really use is Polypane does a really great job of letting you know what there's all sorts of accessibility audits. Polypane is a browser for testing stuff, 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 one here from Said 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 e-commerce 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.

• 22:55Scott Tolinski?

  Let's say you have a URL that URL is a typical URL, you know, site.com board slash product ID, 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 and 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 one tab, product ID is five, size is large, and color is red. In tab two, product ID is 23, size is 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,

• 23:38Scott Tolinski?

  the person who clicked this link might not have tab four, or tab four is used by another product. On the other hand, let's say I have five tabs and I am at the third tab. When I click the suggested item, it should be the third tab. It should not update the first 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

• 24:22Scott Tolinski?

  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 have a long URL with a lot of query parameters.

• 24:43Wes Bos?

  Yeah, the size limit is pretty big.

• 24:46Scott Tolinski?

  That's pretty much the, like, 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 an order, so the order in which they're, I guess you'd have to have unique query parameters, like tab one 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 interface that this reminds me of is on like a product website. Let's say I was working on ford.com. We had an interface where you had to, where you could compare different models of cars.

• 25:29Scott Tolinski?

  So you'd say, I want to 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 want to be able to share that. Say, 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.

• 25:50Wes Bos?

  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.

• 26:33Wes Bos?

  Because you can pass multiple products as an array in, in query params. You would just say, uh, question mark, product equals one, two, three. And then another one, and product equals four, five, six. Now all of a sudden you've passed multiple products to that. And then you could pass a third argument that, or a third 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?

• 27:17Wes Bos?

  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 four types of shows, three options per, per page. And two options for sorting. That is, what, what is four times three?

• 27:42Wes Bos?

  Times two, that's 24 possible permutations per page. And then we have 86 pages, so it's 24 times 86. The page also goes in your app. So that's 2,064 possible URL combinations. And, and I'll tell you, we go into our Google Webmaster search tools and it tells us, hey, there are thousands of unindexable pages. And it's because I've explicitly told Google, don't index every possible page. Like there's some, there's some pages that are not meant to be indexed. We know page one, page two, page three, those should be indexed.

• 28:23Wes Bos?

  But page 87 of hasty treats while you're putting 14 per page? That, that doesn't make sense to actually put on, on Google.

• 28:33Scott Tolinski?

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

• 28:43Wes Bos?

  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's 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 where 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?

• 29:29Wes Bos?

  Oh, that, that's a great question.

• 29:30Scott Tolinski?

  Like I- Super good.

• 29:32Wes Bos?

  Because I was at a conference in Una, who works on Chrome, the Chrome Dev Relations. She basically was like, all right, like what can we add? And I was just like- Hmm.

• 29:46Scott Tolinski?

  Hmm.

• 29:46Wes Bos?

  Good, good question because it's like customizable select. We're doing that. Mixons, 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 box 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'll 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.

• 30:25Wes Bos?

  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 selected. Cause 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 five years and probably the next two or three years

• 31:05Wes Bos?

  has had some significant change in CSS and we're at a point now where a lot of people are, are pretty happy.

• 31:13Scott Tolinski?

  Yeah. Well, we're pretty happy for right now, right?

• 31:16Wes Bos?

  Yeah.

• 31:16Scott Tolinski?

  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 WebXR, man. WebXR, 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

• 31:55Scott Tolinski?

  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 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 3D 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 3D space.

• 32:39Scott Tolinski?

  I would imagine that we would not like that to be entirely the realm of JavaScript forever, right? 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 now. 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 going to be happy camper here. So, yeah. Yeah, that's what, that's where my thoughts are on that.

• 33:21Wes Bos?

  Next question from Beanie Wanting. When are we going to get syntax beanies? Two 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.

• 33:42Scott Tolinski?

  I do. This one right here. Nice and thick. You know, actually,

• 33:48Scott Tolinski?

  my beanie, yeah, it's gotta be one that you can, you can unroll so that I can wear it nice and tall if I want to 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, what would you call that?

• 34:08Wes Bos?

  A little slouch. Yeah.

• 34:10Scott Tolinski?

  A bit of a slouch.

• 34:11Wes Bos?

  Called the slouchy beanie. Sure. Cause I also have, I have one that's like, like oversized. 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. 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, it's sew something onto that and it's sucked in state and then stretch it.

• 34:39Scott Tolinski?

  Like a little, little tag.

• 34:41Wes Bos?

  Yeah, I think that the tag is is probably your, our best bet.

• 34:45Scott Tolinski?

  Yeah, so I'm a beanie fan, you know, 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 one on and a problem. In fact, I got made fun of that for once when I used to work at a computer store. I think I've probably told this before, 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 like, he like looks over at me, I'm on my Apple computer, I'm wearing my beanie in the middle of the summer. I don't know if he was trying to say that to hurt my feelings or what, but.

• 35:22Wes Bos?

  We have another one 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.

• 35:37Scott Tolinski?

  Nice.

• 35:37Wes Bos?

  Hold on.

• 35:38Scott Tolinski?

  Yes.

• 35:38Wes Bos?

  What the hell is a Mermaid design?

• 35:40Scott Tolinski?

  Oh, Mermaid design is.

• 35:41Wes Bos?

  Oh, mermaidjs.org. I've seen this.

• 35:43Scott Tolinski?

  Mermaid diagrams, it doesn't say Mermaid Designs, by the way, it does say Mermaid diagrams.

• 35:48Wes Bos?

  Oh, I read that wrong. Okay, so Mermaid diagrams is a library for building beautiful diagram and charting tools. Is that right?

• 35:59Scott Tolinski?

  Yes, correct.

• 36:00Wes Bos?

  Oh, yeah, for things like swim lanes and flow states and Gantt charts, et cetera, et cetera. That's really, oh, these are actually really nice looking. Oh, I like this a lot.

• 36:13Scott Tolinski?

  Yeah, Mermaid is great. I like Mermaid a lot.

• 36:15Wes Bos?

  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.

• 36:25Scott Tolinski?

  Yeah.

• 36:25Wes Bos?

  That's awesome. That makes sense as SVG. This is cool.

• 36:31Scott Tolinski?

  And you know what's also really good at Mermaid is ChatGPT is super good at Mermaid.

• 36:36Wes Bos?

  Really?

• 36:37Scott Tolinski?

  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.

• 36:45Wes Bos?

  Is the language that Mermaid.

• 36:49Wes Bos?

  Runs in, that's their own DSL, right?

• 36:53Scott Tolinski?

  Yes, I believe so.

• 36:55Wes Bos?

  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 two hardest questions that get in and 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 now. But then when it gets into injecting code into a CMS, you have to make the

• 37:38Wes Bos?

  decision for, do you want to write it like in a, in like your actual code editor? Or do you want to like use a UI to actually manage your, your things? Or do you want to do both? Because like Tina is, is kind of Tina CMS is kind of 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 where, to a point where I need to update it and I had to upgrade MDX version of it. And we use MDX for the syntax website and there's a bazillion plugins that you have to get working just all exactly right.

• 38:18Wes Bos?

  And when it works, man, it is, is it good? But when it breaks or doesn't work, it's just like, I want to share this thought. I want to write a quick blog post, but I don't feel like fussing with it right now. 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? Sometimes I would not use anything else, but.

• 38:42Scott Tolinski?

  Yeah, it depends on who this this blog is for, I suppose. It's for himself. Yeah, but I mean, like as a generalized question, like if you're picking a headless CMS, then sure. Oh, yeah. But that, you know, that's what I do. But 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-SVEX. And it is 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.

• 39:25Scott Tolinski?

  But no, no, what I did is I wanted to have, I wanted to have a non non components based thing, but I wanted to have custom components where, let's say, I guess it's called custom markdown tags. I have just straight up markdown files and I have front matter. And if I want to 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 instead of going like some, I decided to do my own thing, which is stupid, but it works.

• 40:08Scott Tolinski?

  And it actually works pretty nicely and I don't have to worry about it too much. But yeah, I don't recommend necessarily doing that. My favorite headless CMS overall is PocketBase. PocketBase is great. It works super well. It's in one 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 PocketBase schema and import it and just have it update your PocketBase. You can have ChatGPT generate it. It's great. 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 backend of PocketBase 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 PocketBase.

• 40:52Scott Tolinski?

  Payload is awesome. It's also a great choice, like you mentioned. And that's that's pretty much where I'm at.

• 40:59Wes Bos?

  The other thing, and this is also why both my personal website and the Syntax website are on in Markdown, is 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 entire beginner JavaScript course is also in Markdown. It's many hundreds of things, and there's thousands of screenshots. And I've had hundreds of pull requests 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 have a typo here," or something like that.

• 41:43Wes Bos?

  And it's so nice to be able to have that content up on GitHub and just have everybody fix it for you, or add their own things to it.

• 41:52Scott Tolinski?

  Totally. Yeah, I do think that's a good point. And it's also a good point strictly that, like you said, if this is a developer blog for a developer, that's a completely different story than a client. Now, granted, they did say it is for themselves, so, yeah.

• 42:07Wes Bos?

  Yeah, I would not recommend ever giving your client Markdown.

• 42:12Scott Tolinski?

  Yes, absolutely. Last one here, I know we said the last one was the last one, we got one more for you. It's from Omar.

• 42:19Wes Bos?

  Bonus.

• 42:20Scott Tolinski?

  "Before, small and mini 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 small packages back in fashion, or big packages back in fashion, I should say? I don't know, man. I don't necessarily think that. I think you have big packages like Angular, or Svelte, or big libraries, right, that are more batteries included, like SvelteKit. But oftentimes, they're still made up of much smaller ones, and you're still using

• 43:03Scott Tolinski?

  these smaller libraries in the way that you had mentioned, where..."

• 43:09Scott Tolinski?

  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.

• 43:24Wes Bos?

  Routing.

• 43:24Scott Tolinski?

  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.

• 44:06Scott Tolinski?

  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 this felt 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.

• 44:48Scott Tolinski?

  I came from WordPress land, 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.

• 44:57Wes Bos?

  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 know? 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 Tanstack 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.

• 45:39Wes Bos?

  And I think we will forever have this switch of, I want to bring all of my own stuff to, 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 so, Tanstack Start is built on Vinci. Vinci is built on Nitro. Nitro is built on H3. 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.

• 46:24Wes Bos?

  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 it's kind of up to you, the developer.

• 46:39Scott Tolinski?

  Yes, absolutely. Sick.

• 46:41Wes Bos?

  All right, let's move into some sick picks. You got a sick pick for me today?

• 46:46Scott Tolinski?

  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 going to talk about it.

• 46:55Scott Tolinski?

  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 best hockey podcasts. Merrick vs. Waszynski 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 vs. I can't say that. Merrick vs. Waszynski 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.

• 47:36Scott Tolinski?

  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 podcasts 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.

• 48:00Wes Bos?

  Sweet. I'm going to sick pick a monitor. This is one, it was sent to me. It seems like they sent one to literally anyone with a pulse in a YouTube channel.

• 48:10Scott Tolinski?

  They, they didn't send me one.

• 48:12Wes Bos?

  Oh shit. Well, okay.

• 48:13Scott Tolinski?

  No, no, I'm just joking.

• 48:14Wes Bos?

  We'll get them to send you one.

• 48:16Scott Tolinski?

  Yeah. No, I don't need one. By the way, they've sent me some bunch of stuff in the past, but yes, I'll take one if they get at me, whatever.

• 48:22Wes Bos?

  So it's the BenQ RD 280U, which is, doesn't make any sense, but it's, the, the whole idea is that this is a programming monitor and 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 kind of nifty things around, around that. But just coming from a, like, I don't necessarily care that much about those features. I just care about like, it is a 3:2 monitor aspect ratio. So it's almost a square and it gives you the resolution of 2560 wide by 1707

• 49:05Wes Bos?

  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 now. And I have always had the problem where I want a wider monitor, but I, I also want the height. I want it greater than 1440 because I felt like at 1440, I could really only be running one thing height wise. So this is awesome because I'm able to run. Like two apps stacked or three 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 don't miss it at all, which I was very surprised at.

• 49:46Wes Bos?

  So I can still do two or three horizontal, but I can also stack one or two 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 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 did that once and I 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 really happy about that.

• 50:30Wes Bos?

  So if you're looking for a decent monitor, check out the BenQ programming monitor. And also the color on it's 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 going to be like, it's not 120 hertz or whatever. It's 60 hertz. I don't care. I'm not playing, I'm not playing games, you know, 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 off.

• 51:03Scott Tolinski?

  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, where 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, I just feels, I know most people are when they feel, when they use a high refresh rate device, but like.

• 51:22Wes Bos?

  You're like, oh, that's good.

• 51:23Scott Tolinski?

  I, I just feel it.

• 51:24Wes Bos?

  The one thing I heard that someone made so much sense is you can read text while scrolling quickly.

• 51:30Scott Tolinski?

  Yes, yeah.

• 51:31Wes Bos?

  Is that true? Yeah, that's, that's a killer feature of high refresh rates.

• 51:34Scott Tolinski?

  Word, word, word, word.

• 51:36Wes Bos?

  All right. Uh, shameless plugs. What do we want to plug?

• 51:40Scott Tolinski?

  Uh, 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 ya. 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 a link in the show notes below. But we're, we're going hard on YouTube this year. So we'll be over there quite a bit.

• 52:08Wes Bos?

  All right. Happy New Year, everyone.

• 52:09Scott Tolinski?

  Happy New Year.