Potluck × Soft Skills × Release Notes × Headless CMS × Organizing Code × Inet CSS?

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready.

Rid. We have a ton of really good questions today about rid. What are D. Ts files in TypeScript? What are triple slash directives? Why does rid. One of these, like, funny, like, undefined includes undefined. How come that's true? We'll explain kinda how that works.

Async defer. Is there any reason to put a script tag in the head of a or sorry, not in the head of a document? We used to put it right before the closing body tag. And Do you still need to do that? Whole lot coming at you.

Welcome, Scott. How you doing?

Hey.

I'm doing great. And, actually, before I tell you how I'm doing, let's just take a quick second to say that Syntry, at centry.

I owe the perfect place to capture all of your errors and exceptions if you're working in software and you don't wanna ship bugs or you do ship bugs, because everybody does. Let's face it.

You wanna make sure that you can catalog, log them, and fix them as fast as possible, and that's what Sentry is here for you to do makes Solving your problems super fast. So head on over to century.io.

Use the coupon code tasty treat, all lowercase, all one word, And you'll get 2 months for free.

Yeah. I'm doing good, man. This is it's actually really funny. We haven't talked about this on the pod, but I did a, 23 in me, Like that, Ancestry and Yeah. All that DNA testing stuff. Yeah. And we did it for our dog.

We have 2 dogs, one of which is a Hungarian Puli. She is the dreadlock. She's a purebred. No mystery there. But our other dog Was listed as an Affenpinscher and a Shih Tzu mix when we got him. He was a rescue.

Yeah. And we always thought that was very odd because an Affenpinscher is a rare breed, and sure enough, he looks like an Affenpinscher.

Rid. This is actually very funny. You would like pincher? Yeah. Affen pincher.

Oh my gosh. That is a little bit too close to rid. Butt pincher.

A butt pincher? It's okay. So an Affenpinscher is a German Little dog, they have this cute little face, and and we always really wanted an Affenpinscher. So when we saw 1 on a rescue site, we're like, oh, we're gonna get this Affenpinscher.

Yeah.

But it's a rare breed, so we thought it was kind of odd. Right? And if you take a photo of him on the new version of iOS, less it identifies dogs And it I identifies plants and stuff, the the default camera app in Ios does now. Yep. And if you take a photo of him, it actually says Affenpinscher.

Oh, it identifies him as that. So we're like, okay. He's an Affenpinscher. Right? Turns out he is 0% Affenpinscher.

He is majority, rid Chihuahua. He's majority chihuahua and Shih Tzu and then a multi or yeah. I think there's rid. When when these other little little doggies and he's he's, like, 20 different things, including Superbud.

So, it that blew our mind. We it's like he's 9 years old. We were like, I can't believe this dog we've been thinking is an Affinpinscher the whole time is a chihuahua.

We love him even more now, obviously, but I got mine back. And guess what? I'm 45% British.

Rid Hello. 45.

Oh. Hey. Yeah.

So I can do the British accent now. I think I can just do it. Rid. I think it's allowed for me now if I'm 45%.

At what point are you allowed to start making jokes about, like, what percentage do you have to be to make jokes about that

heritage? Yeah. Totally. Right? I it it blew my mind because I knew I knew my mom's side had, You know, British, but I didn't know how much. I I didn't know it was that much. And meanwhile, I'm only, like, 20% Polish even though my last name It's Talinsky.

So, yes, I, I am from jolly old England. Oh, cool.

Rid. Alright. Let's get on into I think that's wild. And if I looked at that, I could have told you That's some Chihuahua, but I just looked up a picture of Affenpinscher, and they have the they got a little Chihuahua. Yeah. In the little doggies. They got they definitely have the little shih tzu bottom teeth hanging out. You know that little teeth. Little bite.

Rid Yeah. You guys. How how much is that doing your dog? I'm kinda curious to do it on ours. I remember it was not cheap. It's over $100.

Rid. It's frivolous spending, but, like, hey, man. He's a member of our family, and he deserve to know what he is. Yeah. We deserve to know what he is. So, yeah, it's definitely frivolous spending, but, you know, I forgot. I I'll have to find out where it was, where because Courtney set it all up. I was just an observer for this. It's not 23 and me for it's just like another one for dogs.

Yeah. But it was really, really well done. The, you know, the report was really nice and everything. 23 and me, though, I got nothing but good things to say about that. That was a great experience. I'll say that because Now that you know the breeds

like, you know, like possible issues to look out for. Like we have a King Charles Cavalier and like we know, Look out for heart issues. Like that's something that happens with that breed. But if you don't know the breed or if you think you know the breed, rid. I think that that's helpful to know. I think that's worth $100,

you know, if something's worth treating or not or how to treat it. Yeah. It depends. If you if you can If you can afford it and you got a dog, that's a total mystery. Definitely a fun experience for us. Some apartment buildings

make you do that. So if your dog leaves a turd on the lawn, they they genetically test it and send you a bill.

Wow. In the future wild that that's a thing?

Rid. It's it's all very wild. For So even another if if if my dog's ancestor committed a crime and left their DNA there, rid. They can trace that crime back to the ancestry via my dog.

Alright. First question here. You wanna grab it? Yeah. And this one kind of relates to poop in that same sort of way. This is from Ben Hammond. Ben says, not a question, and I just thought this was really fun. So thanks, Ben. Not a question, but some noteworthy context. You guys keep missing my favorite thing about Cyvette, which is a rid Transformer that we've talked about for JavaScript that's kind of like copy CoffeeScript like and, like, a modern version of CoffeeScript. It's very, very wild. I recommend giving it a look. C I v e t. So Ben says, you keep missing my favorite thing about the civet, which is that in some places, the animals re Eat and then poop out coffee beans, and then those poop beans are brewed and sold as a luxury product.

I've heard about that. I thought it was cats, but it's Cyvette. So I guess the Cyvette's kinda cat like. Yeah.

Rid. Man, I don't really care how much of a luxury product it is. I need

poop beans. That's just straight up how it is. Rid. You think they could have figured out how to, like, replicate that process without having to sort through the turds of I don't need to eat a poop bean if it's rid. Been created in the lab. I don't need to I would try it. Poop bean. I would try anything. I would try anything once. That's kind of my motto in life, you know, except for, like, maybe math. Rid But I guess I'm I'm happy. Yeah.

No no thank you there as well. Alright. Next question we have here from.

What soft rid. Skills can I learn to help me in my career? I am extremely talented developer and a constant student. I also severely Mentally challenged in many ways. I type out a long list, but there's no point to do it. I am not I am non neurotypical And have made it my professional career a nightmare.

I know for a fact that I would be much further rid and more secure in my career than I am. I am pausing my web dev journey to go back to school. I feel really bad. I've come a long way in learning and knowledge With WebDev and JS specifically, but this is an article I have done. Oh, this is Tim Smith. This is I know who this is. We we talk on big fan of the podcast.

So he linked up a CSS Tricks Article that he wrote about is HTML, CSS, JS in an ADD, OCD, bipolar, dyslexic and autistic world.

So maybe this is more of a better question for Courtney, who's actually

rid able to answer these types of things, but Oh, totally. Yeah. I think I mean, I think we could even ask Courtney some of these things when when she comes on. But I guess, yeah, what Soft skills are most important, I think, for a web dev career is a good entry question. Yeah. Communication

Is probably the biggest one, being able to take your thoughts and clearly communicate them to another, to send Emails that are not rambly, not that don't go to to go on long.

So I can't even get my words out here. Communication all important. But I say do go on long.

We go back to the episodes where we've talked about writing good emails and being able to communicate effectively because that makes that type of thing so important.

I think that that's a very good skill and Also, another skill that not all developers need, but I've I've noticed it, now that, like so syntax part of century.

We have Ben Vinegar on our team. We've had him on the podcast before, and he is really good at just like planning, seeing the overarching goals, being able to hone in on something and like set us on a track.

And that's something that is a very good quality in a manager, and I think a really good quality in a developer as well. I don't necessarily have those skills, but it's nice. Like, you can you see when somebody does have those skills, like, oh, this is I see why people have these. Yeah. I think some even some some, like, really base level stuff,

assuming positive intent if somebody is working with you and somebody does something. Let's say You write some code, and somebody submits a code review, and they're asking you to change some things. It's really easy to read Language there as being, like, negative. Like, fix this, change this, whatever. And you can read that language as fix rid. This, change this. This is bad. Whatever. You can read it that way, or you can read it as, hey, man. Fix this, and and this will be great. You know? You you can apply intent to things just based on how you're personally feeling.

So, you know, something that I've always, you know, aired on is, like, Unless it's been made obviously clear, assume positive intent. Assume, like, if there is a problem, Assume that that problem was maybe made out of a mistake or, just a a fumble rather than rid intent. Right? And if you're always trying to stay on that side of positivity, people will always appreciate that. Rid You know, 1st and foremost, just be nice as much as possible to everybody, and people will help you and respect you way more if you are Being nice, 1st and foremost.

So, you know, like, the communication stuff, as you mentioned, is is super good. Mhmm. But it's not always easy, for people who have neurodivergencies to communicate effectively.

And I think one of these things that, AI can really help with in chat g p t. I know that, you know, they could be Not necessarily controversial, but if you if you write a sentence or an email to somebody and you're concerned about if it's going to come off correctly Mhmm. You can always paste this into to chat g p t and say, can you make this email read. Read better. Can you make this email more clear? Can you make this email more positive? And, you know, that's one of the things that chat GPT is really good at. Yeah. I found it's, like, often bad at things where you're having to pull in obscure knowledge where it has a chance to makes make stuff up. Right? But if you're if you're telling it, here's here's the here's my sentence, and I want you to make this more effective and more clear, it's really good at that. And I I think it can help, some people out in that sort of way, and you can use it as an assistant in those regards. And it and very well may help you.

Cool. Alright. Well, thanks, Tim. Next question is from Chuck Reynolds. He says, I was wondering since you folks are remaking the syntax platform, Have you thought about release notes or a what's new section? Recently at my day job, I have been thinking about the best way to implement this, Not only for users, but also for others within the company that may not have access to technical road maps. I know there are services out there, but maybe starting out with some smaller scale to begin with, any recommendations or suggestions rid would be helpful. As always, thanks for everything you do for the community. So, Chuck, I you know, this is one of those things that you're gonna want to automate this as best possible. Because if you're, having to do it by hand, you know, that's probably the way it's going to be most rid Clear and most, well put together, but it's one of those things that you're just gonna do once and maybe not Continue to do unless it's, like, part of your process.

In my opinion, I think the best way to implement something like this is through Something like conventional commits.

Now that requires you to change your workflow to use conventional commits, and conventional commits is a system Where you are almost you're it it's a it's a whole way of writing your commit messages.

So it's a feature. It's a bug fix. It's whatever.

And if you're using conventional commits, which we'll we'll link up in here. We've talked about it on the show a few times. But if you're using conventional commits, There is a ton of services or features or GitHub actions or whatever that can put together the release notes for you Based on conventional commits.

If you're already writing your commit messages and you're already using Git, then you might as well just implement a system like this. Bingo bango. You got your change lock right there.

Yeah, I agree. You have to automate this type of stuff. I think that would be kind of nice rid. To be able to do that, we haven't. We just kind of been slinging in merging stuff as as we do. But but yeah.

Especially for like an open source project. I love when they compile all the stuff into.

All right, this is 3.2 And it shows you all of the things that were merged, and then you can click through to all of the pull requests and kind of see, oh, why did they add this or how does this change? One of the breaking changes that's especially when you're updating, like, something that's like 4 versions older, you know, like, oh, I haven't touched this thing in 3 years.

Let's update it. It's so nice to be able to go through the major of things and go through the breaking changes.

So That type of thing is extremely handy. I don't know if it's all that as helpful for the syntax website because it's not like People are running

syntax websites. Although, I guess they could. You could run your own podcast off of the syntax platform. It could be cool if you were like I I mean, even if you just had a page on the website that was showing, like, what's new, you know, like, what's new on the site page, and I would appreciate that. I I think it's probably not worth it until it's done. And then when it's done or at least in the release version, then we could implement something like this. But it does require you to, rid. Jump on the conventional commits bandwagon.

Alright. Next question we have here from Kyle Ratti. Can you explain headless CMS and what The use cases, implementations are I understand that they're what they are conceptually, but I struggle to see how they would fit in a production workload We have a custom site built in React but need nontechnical users to be able to author the content.

Alright. So A CMS is something that you log into. You you have your content types. Right? You've got blog posts and pages and Products and each of those pieces of content have different fields inside of them, and they can relate to each other. That's your CMS. And the headless part comes in Where traditionally CMS is also include some sort of theming engine.

WordPress Has WordPress themes. Drupal has Drupal themes. Right? They all they usually have some sort of view layer baked into it with a bunch of helpers for for doing things like rid Queries and whatnot.

The idea with the headless CMS is that the CMS, at the end of the day, just spits out data, rid. Meaning that it has an API, whether that API is a REST API, whether it's a GraphQL API.

Sanity has Grok, Which is their own query language, which is pretty nifty. Go back and listen to that episode. That was a good one.

And then you sort of pick up from the raw data aspect and pull it in as you you need it. That's the concept. Right? You probably understand that specific point.

That kind of becomes a little bit tricky because you have to build literally everything from the ground up and you can't rid. Reuse some of the more handy use cases. So what we're starting to see is Builder. Io, Wix.

I think Prismic is starting to do this as well, where you associate like a component With a piece of data, and those 2 things are sort of married.

And then you can render out that component when that piece of data comes and Sort of like 1 to 1, and it's essentially just like a little a page builder from from there on out. So that tends to be, I think, where the Industry is headed right now. Not everybody. Lots of people just want straight data because we need to pull this into the marketing site. We need to pull this into our Shopify site. We Need to pull this into our application, into our iOS app, our Android app. We need to pull it into the sandwich boards over top when you go to the restaurant. Like, you know, like rid. The whole point is that you have a single place of your data and then your data just ripples throughout. Not your website is not the only place where your data is going to be living. Right.

And that's why a lot of people like to use a headless CMS because they have so many places where that data needs to be sucked into even like a CRM. Right. Like, oh, this customer bought this product and that needs to go into the Salesforce CRM.

So there's that. And that's really helpful. But I think I think the future of a lot of this type of stuff is you can still build your own components in React and marry them up to a component in your CMS.

But then the CMS itself allows you to do things like drag and drop and rid. Relate data and whatnot. So you give your marketing your users at the end of the day, control over the data, but also a lot of control over the site design and the pages that are on there. Yeah. That was a great answer. Awesome.

Next question here from Andy.

Hey, fellas. I'm a front end developer that's worked in Drupal for most of his career, and in the last rid year or so has spent a lot of time in the world of web components.

On a client project, we've been seeing performance problems between web components and the client's Tracking scripts.

Oh. I've been able to find little opportunities and optimizations, but I feel like I still have a lot to learn.

There are oodles of blog posts online and online courses for how to write JavaScript, but I've been unable to find Much there about how to look under the hood on the browser and read heap snapshots. Even Chrome's own dev tools documentation is about 4 years out of date. Any resource suggestions? Now I don't necessarily have any major resource suggestions necessarily, But, you know, the heap snapshot stuff, you probably don't even need to get that deep into it because you can, in the performance tab of Chrome DevTools is, for the most part, like, a really good way of getting a handle on rid where exactly the slowdowns are, in what scripts, what lines, which functions in particular are causing the issues, but it's hard to say without knowing rid Your exact issues.

I think one of the things that you can, like, really invest some time into is Understanding flame graphs.

The flame graph inside of the performance tab of Chrome allows you to really drill down and see which things are taking a long time to execute. Now that's maybe not gonna help with, You know, like memory usage and stuff, but it it feels, you know, it it's feels like it's oftentimes the slowdowns and performance issues are A number of things. Right? Slow network requests.

Things are taking a long time to come back.

Some functions are maybe taking a long time to execute, Or perhaps there's, like, painting issues.

And and a lot of times, you can get really, really far just by debugging those things inside of Both the performance, the performance tab is is such a good one to look into without even having to get into, like, really analyzing the heap stuff.

Rid. Do you have any tips on this, Wes? Have you have you dove deep into that stuff? It it seems like, for the most part, like, That is a very deep, deep well. Yeah.

Honestly, I kind of agree with the author here is that there needs to be something. Adiosmani has a couple of blog posts on how to use the flame craft stuff. And like you said, it's pretty old, But I don't think that stuff has really changed all that much. That's probably still good for it. It's Interesting. I would like to see or maybe even talk to somebody of like, all right, now that you have this flame graph, how do you read this type of thing? And how do you see Which is being slowing it down. And what kind of performance issues are you having? Like you said, like is Is it a painting issue? Like, is it taking forever to paint? Or is there some sort of like parsing issue? Like like you said, the tracking scripts, Maybe something is being blocked or they're doing an inefficient loop inside of it, so you need to sort of dig down into that. I specifically Had an issue with the Blue Sky API on GitHub.

And

I opened an issue. Let me I'm gonna find it and link it up in the show notes. So while Wes is looking for that, I do wanna say I've posted a couple of blog posts in here, understanding flame graphs From webperf.tips and, the main profiler pane from webperf.tips.

These blog posts really break things down in terms of Identifying issues, especially thread issues, identifying long running function issues, and and being able to really encapsulate. In fact, rid. I've never personally seen this blog post before I started looking a little bit more into this question and or this blog at all. And I gotta say, he's got a lot of great topics on here. So this might be a neat place to look, and most of the things are relatively up to date 2023, 2022.

So,

rid. A lot of good stuff here. I found it. So I had opened up an issue on the blue sky app proto, basically their library for working with the Blue Sky API. And I said like I ran into The issue where I couldn't run it in a Cloudflare Worker because it was taking 300 milliseconds to parse the library.

So that was an issue somewhere.

One of those functions was doing some heap of work That was was too slow. So I posted it. And, Vincent Reimer, who he works at Meta on a lot of the React stuff, so he Swooped in. And he said, yeah, I'm having the same issue.

And he posted a flame graph that showed exactly. And then he It broke it down. And he showed the 1 function called Add Lexicon is taking 300 milliseconds.

And just looking at it, you can say, okay, I understand. Rid. So sometimes it's the best learning is where you can see the output and say and say someone someone's literally pointing to this function, And then you look at the flame graph and you go, oh, I can see that that add lexicons function Spanning the entire flame graph and their stuff that's nested in inside of it, that's it's clear to me. Okay, that's how to read a flame graph. So I'll link up this in the show notes.

Just click on through to it and read through. There's a couple other people in there that are like Much smarter than I that are showing the script evaluation and showing the time that it took up, and those can be rid Extremely helpful when debugging these performance issues. Sick. Next question from Caesar Salad.

Why do we need dot d dot TS files in TypeScript. Why isn't it enough to export types from libraries like we do in our everyday code? What's the triple slash syntax used in those like reference types equals Vclient When starting a Vee project with TS. Thank you. All right. So .d. Ts files in TypeScript have a number of different reasons. So the first one being They are generated by libraries.

So when you compile your library From TypeScript to JavaScript, you also kick out .d. Ts files because when you npm install a project, You aren't requiring TypeScript from known modules.

You're requiring JavaScript from known modules, and JavaScript has no types. So you need an accompanying accompanying d. Ts file that has all of the types in it. So you have a function in your JavaScript called Say hi. That takes in a name that's a string.

There is going to be a definition in the file rid. That says all right in this file, in this module, there is a function called sayHi.

It takes in a string and returns a new string And and you can do that. So that's that's mostly what they're used for in the TypeScript land. However, you yourself sometimes will need to add a d dot ts file To your TypeScript.

And the reason behind that is, a, if you want to extend something globally.

So Like, for example, in the syntax website, I think we have, like, locals, which is like a global variable that's available to us, and you need to add Something onto the global scope.

Often with Express, you want to extend, not just replace, but you want to say, alright, rid. I want to extend what the middlewares are adding into the middle scope. So you use that or if you have a File that is not typed at all. So you have a JavaScript file or you have, like, a NPM module you installed. It's just plain old JavaScript.

If you want to type something that is not in TypeScript, you can type them in d. Ts files totally separately and you'll get all the benefits of the autocomplete and type checking that you're used to. And that's what definitely Typed is. So if you ever have to npm install at types forward slash something for a package, those that's the reason we have that is because those modules themselves rid Do not have types, and somebody else has gone and said, alright. Well, I'm going to figure out the entire API of this package, rid And I'm going to write all the types for them, all the functions, all the inputs, all the outputs, all of that stuff. And All that you're doing when you install those types is you're downloading .ts files that display defined modules in all their inputs and outputs. Rid.

Finally, the last one, the triple slash directives.

Almost never will you need these.

This was sort of an older thing from early TypeScript days where if you need to associate Types with a specific file, you could use a special comment that references.

More than likely, you are either going to use gs config to include your types folders or you're going to just import the types into your TypeScript like a regular import value.

Rid. I think they're only around A for legacy and B sometimes like things like Vite and whatever build tools need to Explicitly reference it, and it's there for you, but never in my life have I had to use a triple slash directive. Wow. Yeah. D d.ts files are definitely one of those aspects when you're

first getting into TypeScript. You're like, oh, my god. I got to figure out a new weird file extension with some rid. Different conventions or different functionality.

It's definitely, like, one of those weird things, that takes a little bit to to get get your head around. Even if

You are writing a file with just types in it. I still give it a ts extension so I don't have to learn the weird syntax of the DOTS because DOTS files definition files can only have types in them. TS files can have types and JavaScript code inside of them. And there are some situations where you have to explicitly define a module, you'll need a D. Ts or if you want to rid globally extend like we talked about in the first thing. But in most cases, I just have a .ts file with my types in it, and I can import rid

them. Word. Alright. Well, next question is also from Caesar, but I'm not sure if it's the Caesar salad or just Caesar, maybe Caesar Casino or any of those. Caesar, says, I was checking out Scott's implementation of Hop over with the polyfill in the new syntax.fm site.

I want to use it in my menus and tooltips, And I ran across inset in CSS.

What is that, and how is it placing the pop over target rid Smack dab in the center of the page.

So inset is a newish property. Let me see when it was added to can I use because, inset is is relatively a recent add to CSS and one of those things that I have been very excited to have, and I it's it's green, and it's been green for a little while now? So you can use this and without feeling bad about it, unless, of course, you have, You know, IE 11 to support. No. Thanks. But it was added in Chrome version 87, so a long time ago. Right? 2020.

It was added in, Safari version 14.1 2021.

And in Firefox, it was added in 2019 in version 66. So Needless to say, it's been in the browser for a little bit, but people haven't necessarily been using it for that long because it's still new.

And inset, What it does is it basically is the equivalent of setting a left, right, top, and bottom value of something all at once in 1 property.

It's particularly useful if you are using something like position fixed.

If you're using position fixed and you want something To essentially be in the middle of the screen,

you can say inset. I had no idea about this. You've never seen inset? Rid. Oh, man. I thought you're going to talk about, like, box shadow inset.

This is fine.

Sorry. Go ahead. I'm just amazed. Rid. No. It it's great. And this is a property that I don't think a lot of people know about. But, again, inset, it it it is primarily used when your position fixed or or Or Absolute. Position absoluting something, and you want to set its top right bottom left values. And you can actually do 4 different values if you want it to be rid. Inset, and it's the same as any of the other properties there. It's the trouble top right, bottom left. Right? So you can set 4 different values. You can say 15, 5, 15, 10, whatever. It works the same way as margin or padding or any of that stuff.

It's a great property, and it can really help you center things in the page. It, For me, what I use it for is in times when I would position fix something, and I would say left, 0, right, 0, top, 0, bottom 0. You can now just say inset 0, and you don't have to write those 4 properties.

Wow. And it also respects writing mode.

So if you are turning your writing mode from Top to bottom, left to right, or writing sideways.

It will respect that so you don't have to change your top right, bottom left. Oh, this is awesome. I had no idea about this. It's a single single element or single CSS property to set trouble.

I like that a lot. It's just like border padding margin. All of those other things you can do in a single go here. Quick little Quiz for you. When you have 3 values in CSS for setting top, right, bottom, left, What where do they apply? Well, you do the the top is the first one. So if I say if I say margin 10 p x, 20 p x, 30 p x, or inset,

or any of them. Yeah. Well, it it, you know, it works the same way as if you were to have 2 properties Where, if you have 3 properties, you do top, and then the next one is sets the right property.

And then the third one sets the bottom property, And then the left property just uses the same as the right. Oh. So Yeah.

And that's the same with margin. And, likewise, if you have 2 properties in your setting margin, If you set the top and then the right, then the bottom automatically gets the top, and the left automatically gets the right. So it works the exact same, yeah, in in that way. I I never you know what? I guess, I do use 3 somewhat often, especially if you're doing like This has a top margin of a 1 rem, a a bottom margin of 1 rem, but then the left and right of auto, to center something. That's when I would use that frequently.

That's a good way to put it. I always have just remembered it.

That 3 is left and right.

But just thinking, oh, you set rid. With 2, you set top and bottom, left and right. But with 3, you set top left and right and bottom.

Rid Beautiful. Beautiful. Beautiful. Next question we'll hear from Luke Sutter.

Is there a way to use AI ChatGPT To more quickly and easily understand technical documentation, I feel like there is a good use case for AI, and I'm not sure how to do it. Absolutely. This is a very good use case for it because a lot of times you just ask or whatever to how do I do something? But Sometimes it needs context for what you're working with. You know, like you're looking at some sort of documentation and You need to be able to understand it. So a really good use case for it is literally just copy pasting the entire thing or using one of these other rid AIs that can visit websites.

So I know the Bing AI will be able to visit a website and answer a question.

I've been using a new one called Claude.

I've been on the waitlist for it forever.

It's from Anthropic.

And finally, they've rid Given everybody access to the chat, and they have what's called a 100,000 tokens, which is I'm sorry, a1000, 100,000 tokens? Yeah.

Basically, it's much bigger than like rid. Like 10, 15, 20 times larger than the context you can provide OpenAI.

And I was hoping to switch the syntax Summarization over to it, but we don't have access to their API just yet.

But as soon as the context for these things gets large enough, You should be able to just literally copy paste the entire documentation or use some sort of tool that will scrape a website and then ask those questions in there. So I find that giving a couple examples first and then asking your question can really help you hone in on how this type of thing works or using it as a glorified search because, like, you don't want to have to dig through it as an example.

Rid Just specifically asked your question.

And honestly, I don't think we're that far off from being search on websites being that where some we talked to Frederick of Astro and they built a little bot for it. We built a little bot for syntax where we can ask it questions given the context of every single syntax

transcript ever. So that type of stuff is really not all that far off. Yeah. And And I do wanna say too if you're using just, you know, chat GPT, if you have a subscription of that and you have access to GPT 4, you can get everybody has access to plug ins now.

And, the plug in landscape on chat GPT and OpenAI is really good. So here's a a couple that I like and use, one of which is called Ask the Code.

And, Basically, all you do is paste in a GitHub repo to ask the code, and you say, Scan this repo and it scans the whole repo for you. And then you can ask questions specifically about the repo.

Works really well If the entire documentation for whatever you're doing is in that repo as well, because now you have access to the source and the documentation, and you can ask questions about that.

So that that's worked really well for me. I've passed it several different GitHub repos and said and then asked the questions to compare the 2. Hey.

Which of these following libraries does x y z? Which of them don't? Can you give me a table of the features of these 3 libraries? And it will do all that stuff really easily for you, especially if you, you know, say, hey.

Only use the the code in the repo.

I have another one called Talk with the Docs is a good one, a plug in that I use. Another one that I use all the time is called Scraper, which simply allows you to scrape web pages, you know, whole web page. You give the URL, and it'll scrape the whole web page. That works really well. Rid. WebPilot will scrape PDFs, as well. So, yeah, I I've been using plug ins a lot. And, Specifically, I think the one that I use the most is ask the code because, again, people put their docs. They put all their stuff in their repo. You just pass in the repo and and ask away.

Rid. It's actually funny because I talked to, Tanner Lindsey of 10stack stuff, And he he said that he just fed it his entire typed codebase and it generated all the docs for, I think it was for The React Virtual or his TanStack Virtual Library.

So that's unbelievable. It doesn't even necessarily need to. Obviously, he had really good comments and typings in the code base, but the entire documentation was generated from the code. So You might even be able to get away just with

a code base pasted in. You know what I really like in, chat GPT now, Wes, is there's, rid. Custom instructions. I don't know if you've used those. No. But custom instructions is a feature where it basically rid.

A bunch of text to the start of every single chat. Mhmm. So for instance, it's like, what would you like chat g p ready. To know to provide better responses, and how would you like chat GPT to respond are the 2 prompts. And you paste those in, and then you you don't have to specify ton of stuff at the start of each chat, or you don't have to give a context.

For instance, I, you know, I told it, I want all code snippets to be in snake case using e s m Oh, yeah. Of it. Chad GPT loves to give me common JS, and I always have to yell at it. Stop giving me common JS. What are you doing? Oh, and then I say, Never give me examples with libraries unless I'm asking for a library, because I found, like, I would ask it to do, you know, a certain API fetch or something, and it would always bring in Axios. I'm like a we have Fetch. I don't wanna use rid. Axios right now for this. I'm not using it, but it would just give me libraries when I didn't need them or want them. Next question. I'll I'll I'll say the question, and I'll see If you can answer it, in JavaScript,

why is the following true? The string, so quoted undefined, so just the word undefined, .includes, and then you pass it undefined, so not a string, the actual type of undefined. So why does String of undefined dot includes undefined equal true.

I don't know. I wonder I've never used rid. Dot includes undefined before. So I wonder if you were to do literally anything dot includes undefined if it would be true.

I don't know, to be honest. I have no idea. It's

because dotincludes is expecting a string, right? Because it's it's a method that That lives on a string. So if you're trying to see, so what it does, JavaScript doesn't throw errors when you try to, like, put a type.

Like, let's say you put a number into a string. Right? Hello. My name is Wes, and I am age years old. Mhmm. It's not gonna say, hey. Age Is a number. And you're putting me in a string. It doesn't because it it does something called coercion, meaning that if it's not the type That it is expecting, it will try to coerce it into the type that it is expecting. And most commonly, rid. You are trying to do something like, coerce a number or a boolean or something into a string. So .includes will say, all right, well, you silly goose. You didn't pass me a string. I'm just going to call the tostring method on it. And if you go into your terminal and type undefined.

Tostring or no, then you get an error. That's not how it works, but rid. The browser will first turn it into a string before it runs it. So the reason why that is true is because undefined equals undefined.

It's the same reason why, Quote 1 includes the number 1 is also true.

Coercion.

Yeah. Rid. There was I had a rule in TypeScript that I forget what what a rule it was, but it's really annoying where, like, I could I literally couldn't even put a I couldn't put a number inside of a template string because it's like, hey. You're putting a it's like, come on. I I know how JavaScript works. It's gonna turn the number into a string. Right? So rid. I had I had to turn that off. You're the I know more than you guy. You're the, Yeah. Put a dot to string on it.

Alright. Next question from Rich. Rid. Rich says I have a ton of development directories containing code for projects I'm working on or completed, things that I started and didn't finish, Things I'm learning to code. Code to play with, new features, scripts, etcetera.

With all the things you guys work on, how do you organize your code directories? Rid. I'm a tell you this. I, you know, organizing my code directory is something that I am very rid Wishful on, but not something I end up actually pruning and maintaining super well.

So I have a site's directory inside of my user directory.

And inside of that, If my thing if my directories are actually pruned nicely, I have, several different directors. One that's called archive. Old project I don't care about, stuff that was just temporary, stuff that's, like, you know, not relevant.

Now I have one called syntax sites. It just used to be the syntax website, but now it's syntax sites because we have a number of different things going on. I have a level up tutorial sites folder. That's just All the projects I was working on for level up tutorials.

And then the big one I have is called oh, I have one for for talks, if I'm giving talks because I do a lot of code that's talks.

And then I have one called experiments, which is just straight up experiments where, anytime I create a directory or I wanna run anything for the 1st time. I just wanna give it a try. Like yesterday, I I Installed party kit and using their, you know, npm create party kit, command.

I'm gonna do that in my experiments. And then if it becomes a real thing, I'll move it out and be into its own thing.

Sometimes you will see, directories deemed, Expletives when I'm trying to do a reproduction because I'm angry Yeah. And I'll just do that inside of my experiments.

So there are several there of which I'm not going to say on this podcast. Yeah. Mine is similar. I have a sites directory

that contains all of my big ongoing projects, every get repo and whatnot.

That's pretty standard. I have a talks directory, which is every single one of the talks that I've done. Then like you, I do a lot of Tiny little tests, little loops, trying to figure things out, trying to test it out. So I have a directory called Code, And in that code, I have a package I developed called Vite dir.

And what it does is it uses Vite, but it gives you, like, an HTML page of all of your files.

So I can quickly create, a folder or a file in that directory, NPM start and go directly to that file. And it's TypeScript, it's feat, it's live reload, it's everything that I possibly would want without having to do a package. JSON and NPM install and all of that stuff. So that's just like hundreds of folders and files full of little demos and whatnot. Any TikTok code I do, I throw it in there, and I find that to be really helpful because it's You don't have to create a folder. You don't have to create a file. You can just go directly from there.

And I'm a big fan of that. And then also I can do a folder and I can put a package JSON in there and still use the original reloading.

So just like a big fan of that to be able to say, oh, you know what? I do want to package JSON here. And you just make 1 and you've entered your own project.

Have one last one. It's a package called delete me or sorry, a folder called delete me. And anything that goes in there is not safe, meaning that I don't want to stumble upon this in 3 years being like, do I need this? No. Delete me is you can delete it at any time. You should be safe. Just not today. Right? Yeah. Well, just as as soon as you're done that like, if I'm making, like, a reproduction, like a repo reproduction,

saying. I'll put it in the MeetMe, and then as soon as it's not safe to delete today. It. Okay. Yeah. I if I'm doing demos, especially for, like, TikToks or Instagrams, I'm almost always doing it on, like, a CodePen or,

Stackblitz or one of those. I tend to keep those off my computer. Oh, yeah. You don't you don't like having it on your rid. Machine, all your, like, all your plugins and everything. I'm so easy to get distracted

that if I'm gonna be like, oh, I'm gonna spin up a new little site rid. For my demo, I'm in the like. Alright. It's npm installing, and then I'm like, oh, let me look somewhere else. But that's the whole point of my My directory is that you don't have to NPM install anything. You create a sure you create an HTML file. Yeah. And you're up and running. You don't even are you creative? That's really, really what I need, and maybe I'll just take a cue from there. But it's like, I'll just pop open CodePen. I have my CodePen, so I can just Drop in some divs, and and and sure enough, it is a little obnoxious that you don't get your own tooling and your own workflows and your auto completions and all that stuff. So, Yeah, maybe. Maybe I should do that. And if you're recording,

I have like a special TikTok recording where it gives you extra margin and a little bit bigger because, like, so it's easier for the people to read. Otherwise, you're trying to, like, crop and you're getting the line numbers in the way. You know, it does. That's what I'm doing. Rid. Yeah. Yeah. You're so smart, Wes. You're so you're so wise. Alright. Thank you. Thank you. I know.

Last question we have here is from Andy. Is there any good reason in 2023 why we should rid Still be loading JS files with all of our script tags at the bottom of the body element.

Would it Not make more sense to put the script tags in the head or at the top of the body with the async and defer attributes. This way, scripts can load as early as possible, but still avoid being render blocking. All right, so let's break this down and explain how it works. So the olden days We used to say put the script tag right before your closing body tag. And the reason we did that is because a Often the JavaScript that's in the JS file, it needs it relies or assumes that something is going to be on the page. So you say, all right, well, I'm going to listen for click on a link. I'm going to listen for a Hover over this form input.

Rid. And if your HTML has not yet been parsed, your script will run first, and all say, well, there's there's no links on this page. There's nothing in here. And that's because you're running it too early. Right? So we said, alright, just put at the bottom. Also, the other the other thing about that is rid. You put a script tag in your head.

HTML would download.

It would start to parse it out. And then as soon as they hit a script tag, The HTML parser would be like, all right, I'm going to stop for a second.

I'm going to go download that JavaScript.

I'm going to go run all of that JavaScript.

And then once that's all done, I'm going to continue on. And there's a possibility that you're it's called render blocking, right? Your user is sitting there with a blank page in front of them because your JavaScript is downloading and parsing when the reality is you probably should show something on the screen first because the add to cart JavaScript is going to load a little bit after that. And that is totally fine, right? Like, by the time someone actually does some sort of interaction, It will be loaded and parsed. So what we have now is we have a sync attributes. So you say script source equals whatever, and You put in a sync attribute on there. And what that will do is it will download the script at the same time as the HTML is being parsed, Which is nice. They're doing it at the same time instead of being paused, and then it will pause the HTML rendering or parsing for the script parsing. So that's a sync defer does the same thing as what we said is just putting it at the bottom. So rid. Defer will download it as soon as it possibly can, but it will wait until the HTML is done being rendered.

And then now we have script type of module, which is defer by default, so you don't even need to put a defer on a script type of module because it is assumed.

And then we have a sync type of module, which is the same as the previous async. So to answer your question, no.

You can put it in the head with either a type of module, a type of defer or sorry, a defer or a sync on it, And you'll be in good shape. The only time you might still want to do that is when you are waiting on the order of your imports, meaning that You have to load jQuery first before you load your code that relies on jQuery. You have to load Google Maps first before your code that relies on Google Maps, and You probably should switch your code to waiting, like run a loop that checks for the Google Maps API or write a function that just says await, import Google Maps or run everything in Es modules, and you're not worried about it. So it's only when you have a third party code that you have to assume that it's on the page. Will you need that? But there are way better ways to go about it than having to put all your script tags in a specific order and do a waterfall approach.

Wow.

Yeah. It's so funny. The world of, you know, modern frameworks have avoided so many people from having to even Think about this stuff. So it's it's, it's it's funny that that used to be, like, one of the biggest problems we faced when working with JavaScript

is when your scripts loaded. Yeah. It was it's People don't understand how nice it is having ES modules because you can just import the code that you need before you need it.

You don't have to ever think about, all right, is this on the page? Might as well just load it on every page.

You have a whole graph of your dependencies, and the tooling can figure it out. I did ask on Twitter, like, is there any use case for putting it? We had Brian Rolouz says Some arguments that parse in a vow of interactive elements, which is HTML, should take precedence over the script. Rid. Ideal document that mirrors semantics starts with inline style to avoid folk flash of unstyled, Content followed by working HTML, followed by reactive code. Necessary. No. Neither is pretty. That's kind of interesting is He's saying that your a lot of people are saying load your CSS first that is needed for that page, then your HTML, Because by the 1st time that the HTML is put on the page, the CSS has already been parsed and is on the page. So you're not going to get a quick little like times new Roman little peek before the fonts kick in, you know, and then load your scripts, which is rid. Clicks and form elements and all that good stuff. All that good stuff.

Cool. Well, now is the part of the show where we get into sick picks Where we pick things that we think are pretty sick, things that we like or enjoy.

Wes, do you have a sick pick rid. For us today.

I'm going to sick pick a new surge protector power bar that I got for my desk at the cottage.

So it is an 8 port power bar that has a flat bottom and holes to mount underside your desk.

And instead of it being a really long one, which is sometimes problematic because you have, like, big bricks or you have, like, a really chunky cable that you then need to bend up towards the desk. It has 4 on the sides, so you can kind of do in line And then it has 4 on the bottom so you can put your bigger bricks and whatnot on those. And then it has 3 USB A's and 1 USB C. Kind of wish there was 2 of each, but I have a lot of stuff on my desk that just needs USB power. Headphone charger, iPhone charger, watch charger, micro USB, USB C, right? Like all these cables just I have under my monitor. And when I need to charge something, I just grab 1 and plug it in. I don't like when those are plugged into my computer because you plug it in. It's like, do you want to allow accessory or, like, oh, yeah, no photos, start Importing or Dropbox is like, do you want to back this up? I don't want any of that. I just want power. I just want to charge the thing, you know? So I I like having it separate from my actual devices. So having nice 4 nice USBs, I I plug my monitor lamp in. I plugged my, obviously, my watch charger, my iPhone charger, all that good stuff into it. And it's it has the rid. Braided cable

Yeah. Which is really nice,

and it has, like, a flat plug.

You know? So you you plug it in, and it's nice and flat against the wall. And it was like like $25. And I was like, people people hit on Amazon and whatnot for for, like, taking stuff. But if I went to, like, In Canada, I would probably go to Canadian Tire, and I would probably say $50 for, like, a crappy one that my grandpa had, and they haven't updated it in a 1000000 years, you know? Rid. And these ones are so much better.

They do 3 amps, so it's not like it's it's not super fast, but it's faster than one amp like your cheap ones. Sometimes these power bars have really slow USB charging, and it's not even worth it. You know, you see that with the In our car, we have USB ports, but they're too slow. So you end up like it's crazy. But we bring we literally bring the like plug in rid. Into and we we have a plug in our car, so we plug in a little AC DC converter and then charge the kids iPads off of that, which is crazy because you're going rid. AC alternator to DC to the battery.

You're going AC to DC like 4 times before it hits your rid iPad.

Yeah. Yeah. Totally. Check it on out. I will link up the search pressure I used. Sick.

I'm going to sick pick a little Hippo alarm clock. That's a little kid's alarm clock. We had issues with our kids waking up at, like, 4 or 5 in the morning and going downstairs.

Like, once my my son realized that he could go downstairs and turn on the TV by himself, it was like, oh, I woke up. I wanna go watch some some TV.

You know? And it's like we'd we'd wake up, and we'd be like, what is going on? There's somebody watching TV downstairs.

It's in the middle of the night. What's going on? So, we got both him and my daughter these alarm clocks. These are, they're cute. They got these little, Little digital, little smiley faces on them, and they help kids understand essentially, like, when they can when they can wake up and get out of bed. It's all, You know, you set, like, a, a a a time that it's, like, green, and he's got a smiley face on it. So for us, it's like 7 o'clock because We want the kids sleeping at least till 7 Yeah. And then they can get out of bed. And once once the alarm is green And it's got a smiley face. That means, hey. You can get out. You can go downstairs, and that's okay.

And it's got a lot of little neat features. It's, like USB chargeable, so you don't have to worry about replacing batteries on it. It has, like, a nightlight baked in if you want a nightlight.

It has little faces for when they're supposed to be sleeping. It actually it it has peaceful rid. Sleep sounds as well, but I don't think we've ever used those.

So I'm gonna maybe try to figure out these peaceful sleep rid. But it's it's built like a break. You know, kid could toss it around and say it's not going to break.

We got these. They're called the grow clock, which is like the old school version of it.

I wish it was USB powered and my kids just don't care.

Rid. And it's so confusing to, like, to to program. I look at I'm before everything was on your phone. Remember having to, like, program stuff and, like, hit the buttons 80,000 times, like programming the VCR? Yeah. It's one of those things where you have to hit it a 1000000 times and you and then 6 months later, it it needs to be reprogrammed again. You're like, What? You had a YouTube video, Cohen.

Oh, man. Yeah.

Yeah. That's no fun. This thing, nice and easy. There is a lot of buttons on the bottom, but it's pretty pretty relatively easy to to figure out. Beautiful.

Shameless plugs. Westpaws.comforward/courses.

Check out a list of all the courses that I have available. Bunch of free ones. Bunch of paid ones. Tech. Rid. Well, thanks so much for tuning in. We will catch you on Friday for a supper club. Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows.

And don't forget to subscribe in your podcast player Or drop a review if you like this show.