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

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, Roman little peek before

Article that he wrote about is HTML, CSS, JS in an ADD, OCD, and my kids just don't care.

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,

I think that that's a very good skill We got these. They're called the grow clock, which is like the old school version of it.

done. Oh, this is Tim Smith. This is I know who this

So, to center something. That's when I would use that frequently.

having to do it by hand, you know, that's probably the way it's going to be most rid Clear and most,

you know, something that I've always, you know, aired on is, like,

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

take your thoughts

well put together, So it's a feature. It's a bug fix. It's whatever.

AI can really help with in chat g p t. I know that, you know, they could be Not necessarily controversial, No no thank you there as well. Alright. Next question we have here from.

for people who have

So, you know, like, the communication stuff, as you mentioned, is is super good. Mhmm. But it's not always easy, and a Shih Tzu mix when we got him. He was a rescue.

a code review, and they're asking you to change some things. It's really easy to read

a constant student. I also severely

assume positive intent. Assume, 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.

neurodivergencies Where,

was maybe made out of a mistake and it's the same as

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

just a a fumble rather than

but this is an article More than likely, you are either going to use gs config to include your types folders It broke it down. And he showed the 1 function been parsed,

I know for a fact that I would be much further rid. Butt pincher.

or,

but

planning, seeing the overarching goals, being able to hone in on something and like set us on a track.

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

What soft rid. Skills can I learn to help me in my career? I am extremely talented developer Top to bottom, left to right, or writing sideways.

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

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? Things are taking a long time to come back.

are most important,

Assume that that problem

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

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,

Mhmm. You can always paste this into to chat g p t and say, can you make this email

being able to Meta on a lot of the React stuff, so he Swooped in. And he said, yeah, I'm having the same issue.

as best possible. Because if you're,

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

about if it's going to come off correctly

Emails that are not rambly, not that don't go to to go on long.

And British.

like, if there is a problem, My name is Scott.

In my opinion, I think the best way Yeah. Affen pincher.

So he linked up a CSS Tricks

Being nice, 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, read. Read better. Can you make this email more clear? Can you make this email more positive?

assuming positive intent

We go back to the episodes where we've talked about load your scripts, which is rid. Clicks and form elements and all that good stuff. All that good stuff.

We have Ben Vinegar on our team. We've had him on the podcast before,

but if you if you write a sentence or an email to somebody and you're concerned

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

I think, for a web dev career is a good entry question. Yeah. Communication

Unless it's been made obviously clear,

1st and foremost.

I think one of these things that,

if you have 3 properties, you do top, and then the next one is sets the right property.

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.

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 and, the main profiler pane from webperf.tips.

in CSS

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,

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

single element or single CSS property to set trouble.

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 I don't want to stumble upon this in 3 years being like, do I need this? No. Delete me bipolar, dyslexic and autistic world.

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,

To

or any of them. Yeah. Well, it it, you know, it works the same way as if you were to have

But just thinking, oh, you set rid. With 2, you set top and bottom, left and right. But with 3, you set 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 they got a little Chihuahua. Yeah. In the little doggies. They got they definitely have the little shih tzu bottom teeth

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.

So inset to communicate effectively.

It was added in,

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

essentially be in the middle of the screen, 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.

top left and right and bottom.

Quiz for you. When you have 3

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 If you want to type something that is not in TypeScript, every single WordPress Has WordPress themes. Drupal has Drupal themes. Right? They all they usually have some sort of writing mode.

values

If you're using position fixed and you want something Rid. Man, And inside of that, Or perhaps there's, like, painting issues.

also respects

This is fine.

15,

10 p x, 20 p x, 30 p x, or inset,

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

your writing mode from

margin. All of those other things you can do in a single go here. Quick little There is going to be a definition in the

Wow. And it

5, 15, 10, whatever. It works the same way as margin or padding or any of that stuff.

That 3 is left and right.

IE 11 to support. No. Thanks. But it was added in Chrome version 87, so a long time ago. Right?

Is there a way to use AI ChatGPT

all at once in 1 property.

and I would say peaceful rid. Sleep sounds as well, but I don't think we've ever used those.

2 properties

2020.

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.

And in Firefox, it was added in 2019 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 is really good. So here's a a couple that I like and use, one of which is called Ask the Code.

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

is a newish

margin

Next question here from 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 then you sort of pick up Why does with just types in it. I still give it a ts extension so I don't have to learn the weird syntax And then now we have script type of module, which is defer by default, so you don't even need to put a defer power bar that

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

tab

for the most part, like, a really good way of getting a handle on rid where exactly the slowdowns are, in what scripts,

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.

of Chrome DevTools

even like a CRM. Right. Like, oh, this customer bought this product and that needs to go into the Salesforce CRM.

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 ES modules

With a piece of data, rid. Defer will download it as soon as it possibly can, but it will wait until the HTML is done being rendered.

into our iOS app, our Android app. We need to pull it into the sandwich boards

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, to to program. I look at I'm

exact issues.

is,

Prismic is starting to do this as well, where

sucked into Last question we have here is from Andy. Is there any good reason in 2023 rid. I think that that's helpful to know. I think that's worth $100, which is sometimes problematic from libraries like we do in our everyday code? What's the triple slash syntax And what it does is it uses Vite, but it gives you, like, an HTML 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, wish it was USB powered

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?

a lot of control over the site design and the pages that are on there. Yeah. That was a great answer. Awesome.

I think one of the things

are causing the issues, but it's hard to say without knowing rid Your

you you need it. That's the concept. Right? You probably understand that specific point.

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

and those 2 things are sort of married.

Andy.

and online courses for how to write JavaScript,

view layer baked into it with a bunch of helpers for for doing things like rid Queries and whatnot.

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 they compile all the stuff into.

On a client project, we've been seeing performance problems between web components and the client's 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, 2021.

Where traditionally your So maybe this is more of a better question for Courtney, who's and it generated all the docs for, I think it was for before everything was on your phone. Remember having to, like, program stuff and, like, hit the buttons 80,000 times, like programming the VCR?

CMS is Tanner Lindsey of 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.

what lines, which functions in particular they're cute. They got these little,

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 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 library download

Now I don't necessarily have any major resource suggestions necessarily,

Tracking scripts.

There are oodles of blog posts online you can get everybody has access to plug ins now.

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

approach.

Content is expecting

are so much better.

or run everything in Es modules, and you're not worried about it. So it's only when you have a third party code

In our car,

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

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 of things and go through the breaking changes.

times new was an issue somewhere.

rid. AC alternator to DC to the battery.

Shameless plugs. Westpaws.comforward/courses.

the fonts kick in, you know, before your code that relies on Google Maps, and

Head on over to syntax.fm

Oh, man. Yeah.

I'm going to go download that JavaScript.

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,

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 You probably should switch your code

because you have, like, big bricks or you have, like, a really chunky cable that you then need to

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.

Wes, do you have a sick pick

when the reality is you probably should show something on the screen first is. We we talk on big fan of the podcast.

and do a waterfall All right, this is 3.2

bend up towards the desk. It has 4 on the sides, so you can kind of do in line We have a custom site built in React but need nontechnical users to be able to author the content.

You can put it in the head Especially for like an open source project. I love when

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 actually from the raw data aspect and

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.

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

Wow.

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

And it's got a lot of little neat features. It's,

with either a type of module, a type of defer What?

for a full archive of all of our shows.

write a function that just says await, I like that a lot. It's just like border padding

because you can just import the code that you need before you need 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, And then it has 4 on the bottom so you can put your bigger bricks and whatnot like, what percentage do you have to be to make jokes about that And

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

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

I

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 you associate like a component 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

It's in the middle of the night. What's going on? So,

download.

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

and then Often

The HTML parser would be like, all right, I'm going to stop for a second.

It has little faces for when they're supposed to be sleeping. It actually it it has And then the third one sets the bottom property,

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

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

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 pull it in as

from my actual

rid. You put a script tag in your head.

I I like having it separate why is the following true? The string, so quoted undefined, so just the word undefined, Rid. Alright. Let's get on into But

because the add to cart JavaScript being paused, and then it will pause and clearly communicate them to another, to send definitely Typed is. So if you ever have to npm install at types forward slash something for a package,

Rid. And if your HTML has not yet

rid. For us today.

It will be loaded and parsed. So what we have now is we have a sync you can't rid. Reuse some of the more handy use cases. So what we're starting to see is We used to say put the script tag right before your closing body tag. And the reason we did that is because a that's unbelievable. It doesn't even necessarily need to. Obviously, he had really good comments and typings in the code base, but

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

And instead of it being a really long one, So when you compile

Yeah. It's so funny. The world of,

which is HTML, rid. Meaning that it has an API, whether that API is a REST API, whether it's a GraphQL API.

on my desk 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,

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.

Where we pick things that we think are pretty sick, things that we like or enjoy.

rid. Braided cable 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

Like, once my my son realized that he could go downstairs

of your dependencies,

is when your scripts loaded. Yeah. It was it's People don't understand how nice it is having 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 syntax

but I have a lot of stuff

He's saying that your a lot of people are saying load your CSS first that is needed for that page, then your HTML,

that just needs USB power. Headphone charger,

Rid. And it's so confusing to, like, 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, You have a whole graph

and turn on the TV by himself, 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

those that's the reason we have that is because those modules themselves Yeah. Rid. There was I had a rule in TypeScript that

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.

defined modules in all their inputs and outputs. Rid.

It takes in a string and returns a new string and

never will you need these.

or you're going to just import the types into your TypeScript like a regular import value.

when you npm install a project, You aren't requiring 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 which is like a global variable that's available to us, and you need to add Something onto the global scope.

rid. That says all right in this file, in this module, there is a function called sayHi.

of the DOTS You had a YouTube video, Cohen.

them. Word. Alright. Well, next question is also from Caesar, but I'm not sure if it's the Caesar salad or just Caesar, we got both him and my daughter these alarm clocks. These are,

you also kick out .d. Ts files

a, if you want to So it is an 8 port Had an issue with the Blue Sky

File that is not typed at all. So you have a JavaScript file or you have, like, a NPM 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

This was sort of an older thing from early TypeScript days break this down and explain how it works. So

.ts module you installed. It's just plain old JavaScript.

And the reason behind that is, 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.

maybe Caesar Casino or any of those. Caesar,

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

says, I was checking out Scott's implementation

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

You are writing a file Like, for example, in the syntax website, I think we have, like, locals, 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 tends to be, I think, where the

because It's from Anthropic.

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.

of Hop over with the polyfill in the new syntax.fm rid. Custom instructions. I don't know if you've used those. No. But custom instructions is a feature where it basically

site.

TypeScript from known modules.

I want to use it in my menus and tooltips, And I ran across inset the slowdowns and performance issues rid Wishful on, examples

all of that stuff. And All that you're doing when you install those types is you're downloading

From TypeScript to JavaScript,

and JavaScript has no types. So you need an accompanying accompanying

Almost and it has, like, a flat plug.

because or if you have a you can type them in d. Ts files totally separately

Rid. I think they're only around A for legacy and B sometimes like things like Vite and whatever build tools need to

So

files that display the JavaScript

that if I'm gonna be like, oh, I'm gonna spin up a new little site rid. For my demo,

like you, I do a lot of on a script type of module because it is assumed.

directories deemed, And don't forget to subscribe in your podcast player

Sometimes you will see,

like a repo reproduction, I talked to, 3 USB A's and 1 USB C. Kind of wish there was 2 of each, 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 all of my big ongoing projects, every get repo and whatnot.

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

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.

which is just straight up experiments where,

why we should rid Still be loading JS files

that contains

I have like a special

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

experiments, 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, And then I have one called

a package. JSON and NPM install and all of that stuff. So that's just like hundreds of folders and files

If my thing if my directories are actually pruned nicely, I have,

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.

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 pruning and maintaining super well.

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, What is that, and how is it placing the pop over target rid Smack dab in the center of the page.

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.

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.

That's pretty standard. I have a talks directory, which is every single one of the talks that I've done. Then no.

And in that code, I have a package I developed called Vite dir.

Expletives when I'm trying to do a reproduction A number of things. Right? Slow network requests.

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.

because I'm angry Yeah. And I'll just do that inside of my experiments.

of the body element.

command.

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.

do a folder and I can put a package JSON in there and still use the original They do 3 amps, so it's not like it's it's not super fast, but it's faster than

a folder or a file in that directory,

Tiny little tests, little loops, trying to figure things out, trying to test it out. So I have a should take precedence over the script. Rid. Ideal document that mirrors semantics starts with inline style to avoid folk flash of unstyled, 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

with all of our script tags at the bottom 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, I've heard about that. I thought it was cats, but it's Cyvette. So I guess the Cyvette's kinda cat like. Yeah.

anytime

TikTok recording where it gives you extra margin

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

And I'm a big fan of that. And then also I can a lot of times you just ask

directory called Code, Finally,

So I can quickly create,

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, theming engine.

Works really well 2022.

And finally, they've

AIs that can visit websites.

And, the plug in landscape on

or whatever to how do I do something? But Sometimes it needs And then we have a sync type of module, which is the same as the previous async. So to answer your question, And have made it my professional career a nightmare.

A bunch of

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.

Basically, it's much bigger than like

a code base pasted in. You know what I really like in, chat GPT now, Wes, is there's,

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.

The React Virtual or his TanStack Virtual Library.

over to it, but we don't have access to their API just yet.

Rid. It's actually funny because The idea with the headless CMS is that the CMS, at the end of the day, just spits out data,

I've been on the waitlist for it forever.

will scrape PDFs,

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.

and they have what's called a 100,000 does the same thing as what we said is just putting it at the bottom. So It would start to parse it out. And then as soon as they hit a script tag, with a specific file, you could use a special comment that references.

which is

So

and you can ask questions about that.

tokens, has a flat bottom and holes to mount underside your desk.

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

Rid Just specifically asked your question.

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,

And honestly, I don't think we're that far off from being search on websites being that where some context for what you're working with. You know, like you're looking at the last one, the triple slash directives.

You should be able to just literally copy paste the entire documentation

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.

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.

syntax Summarization for these things gets large enough,

which simply allows you to scrape web pages, And inset, What it does is it basically is the equivalent of setting a left, right, top, and bottom value of something Oh, it identifies him as that. So we're like, okay. He's an Affenpinscher. Right? Turns out he is 0% get get your head around. Even if

rid. Like 10, 15, 20 times larger than the context you can provide OpenAI.

And, Basically, all you do is paste in a GitHub repo

as soon as the context or dotincludes

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,

in there. So I find that giving a couple examples first 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.

rid Given everybody access to the chat, Yeah.

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

chat GPT and OpenAI

I'm sorry, a1000, 100,000 tokens?

Only use the the code in the repo.

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,

the entire documentation was generated from the code. So You might even be able to get away just with

issues, especially

called Add Lexicon is taking 300 milliseconds.

Vincent Reimer, who he works at

And just looking at it, you can say, okay, I understand. Rid. So sometimes it's control over the data, but also

When starting a Vee project with TS. Thank you. All right. So Yeah.

heap of work

Spanning the entire flame graph and their stuff that's nested in inside of it, 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.

The issue where I couldn't run it in a Cloudflare Worker because it was taking 300 milliseconds

And he posted a flame graph or parsing for the script parsing. So that's a sync defer

and showing the time that it took up, like you said, it's pretty old,

used

Just click on through to it and read through. There's a couple other people in there that are like page of all of your files.

function meaning that You have to load jQuery first before you load your code that relies on jQuery. You have to load Google Maps first NPM start and go directly to that file. And and you'll get all the benefits of the autocomplete and type checking

to parse the library.

thread issues, identifying 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,

So,

script evaluation

app proto, basically their library for working with the Blue Sky API. And I said like I ran into that's in the JS file, or use some sort of tool that will scrape a website and then ask those questions to coerce it into the type that it is expecting. And most commonly, That it is expecting, 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

.d. Ts files in TypeScript have a number of different reasons. So the first one being

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, the olden days

that showed exactly. And then he

So that 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 I have reference types equals Vclient

Why do we need dot d dot TS files in TypeScript. Why isn't it enough to export types

I can see that I've been using a new one called Claude.

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

That was was too slow. So I posted it. And, I think that's wild. And if I looked at that, I could have told you 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,

One of those functions was doing some Is probably the biggest one, it needs it relies or assumes

Much smarter than I that are showing the

in those like

for the most part, like,

is on those. And then it has devices. So having nice 4 nice USBs, I I plug my You don't have to create a folder. You don't have to create a file. You can just go directly from there.

something. Adiosmani has a couple of blog posts on how do you read this type of thing? And how do you see rid. A lot of good stuff here. I found it. So I had opened up an issue on the blue sky think about, all right, is this on the page? Might as well just load it on every page.

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 then the left property just uses the same as the right. Oh. So Yeah.

that you can, like, really invest some time into is

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

flame graphs.

how to use the flame craft stuff. And

And and a lot of times, you can get really, really far just by debugging those things inside of Both the performance, if somebody is working with you and somebody does something. Let's say You write some code, and somebody submits 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 the performance tab is is such a good one to look into without even having to get into, like, really analyzing the heap stuff.

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

Interesting. I would like to see or maybe even talk to somebody of like, all right, now that you have this flame graph, Which rid Extremely helpful when debugging these performance issues. Sick. Next question from Caesar Salad.

Rid. Do you have any tips on this, Wes? Have you have you dove deep into that stuff? It it seems like,

The flame graph inside of the performance tab of Chrome in CSS.

Honestly, I kind of agree with the author here is that there needs to be file

That is a very deep, deep well. Yeah.

Understanding 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

API

still good for it. It's or sorry, a defer or a sync on it,

being reloading.

equal true.

.includes,

String of undefined rid. One of these, like, funny, like, undefined includes undefined. How come that's true? to waiting, like run a loop that checks for the Google Maps API extend something globally.

dot includes undefined and those can be

with libraries unless I'm asking for a library, 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,

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 really care how much of a luxury product it is. I need

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, Or drop a review if you like this show.

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

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

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 That kind of becomes a little bit tricky because you have to build literally everything from the ground up and

Oh. Hey. Yeah.

He is majority, 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, but I've been unable to find

So,

At what point are you allowed to start making jokes about, The use cases, implementations it's TypeScript, it's feat, it's live reload, it's everything that I possibly would want without having to do

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.

So, Some functions are maybe taking a long time to execute,

my favorite thing about Cyvette,

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.

Rid Hello. 45.

and he's he's, like, 20 different things, including Superbud.

and then those poop beans With all the things you guys work on, how do you organize your code directories? Rid. I'm a tell you this. I, intent to things just based on how you're personally feeling.

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.

rid. They can trace that crime back to the ancestry via my dog.

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.

hanging out. You know that little teeth. Little bite.

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,

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

product.

Yeah. But it was really, really well done. The,

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

chihuahua and Shih Tzu and then a multi or yeah. I think there's

a fun experience for us. Some apartment buildings

rid. When when these other little little doggies

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

committed a crime and left their DNA there,

rid

We love him even more now, obviously, but I got mine back. And guess what? I'm 45% Cool. Well, now is the part of the show where we get into sick picks

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

are brewed and sold as a luxury

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

Rid. It's it's all very wild. For So even another if if if my dog's ancestor

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

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.

Affenpinscher.

helpful for the syntax website because it's not like People are running also include some sort of And I was hoping to switch the

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.

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,

Now that requires you to change your workflow These blog posts really break things down in terms of Identifying Yeah. Which is really nice,

So That type of thing is extremely handy. I don't know if it's all that as That's some Chihuahua, but I just looked up a picture of Affenpinscher, and they have the I think

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? and he is really good at just like But I don't think that stuff has really changed all that much. That's probably

to use conventional commits, and conventional commits is a system

headless CMS and what important.

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 is a German It's definitely, like, one of those weird things, that takes a little bit to to 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.

we haven't. We just kind of been slinging in merging stuff as as we do. But but yeah.

Alright. Next question we have here from Kyle Ratti. Can you explain the HTML rendering You don't have to ever and marry them up to a component in your CMS.

Based on conventional commits.

are I understand that they're what they are conceptually, Maybe something is being blocked or

you are almost you're it it's a it's a whole way of writing your commit messages.

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.

but I struggle to see how they would fit in a production workload with that breed. But if you don't know the breed or if you think you know the breed,

Where you know, whole web page. You give the URL, and it'll scrape the whole web page. That works really well. Rid. WebPilot

Let's update it. It's so nice to be able to go through the major

to implement something like this is through 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

Something like conventional commits.

or features or GitHub actions or whatever that can put together the release notes for you Safari version 14.1

One of the breaking changes that's

Alright. So You're requiring JavaScript from known modules,

you know, organizing my code directory is something that I am very 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.

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

Tostring or

a string, right? Because it's it's a method that That lives on a string. So if you're trying to see,

Coercion.

Quote 1 includes Builder. Io, Wix.

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.

a number or a boolean or something into a string. So .includes That's a good way to put it. I always have just remembered it.

things that I started and didn't finish,

So 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,

no, then you get an error. That's not how it works, but followed by working HTML,

throw errors when you try to, like, put a type.

the number 1 is also true.

meaning that if it's not the type HTML would

but not something I end up actually

rid. You are trying to do something like,

it will try

Things I'm learning to code. Code to play with, new features, scripts, etcetera.

It's the same reason why, So if you are turning so what it does, JavaScript doesn't and then you pass it undefined, so not a string, the actual type of undefined. So why does They are generated by libraries.

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 on GitHub.

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.

undefined.

coerce 10stack stuff, And he he said that he just fed it his entire typed codebase that add lexicons

Is a number. And you're putting me in a string. It doesn't because it it does something called coercion, followed by reactive code. Necessary. No. Neither is pretty. That's kind of interesting is they're doing an inefficient loop inside of it, so you need to sort of dig down into that. I specifically

because Oh my gosh. That is a little bit too close to import Google Maps 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.

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

Welcome, Scott. How you doing? where if you need to associate

Rid. We have a ton of really good questions today about

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.

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, Chihuahua. He's majority

A butt pincher?

triple slash directives? that you're used to. And that's what

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

We'll explain kinda how that works.

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

Whole lot coming at you.

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? 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

rid. What are D. Ts files in TypeScript? What are

It's okay. So an Affenpinscher

Ancestry and Yeah. All that DNA testing stuff. Yeah. And we did it for our dog.

Was listed as an Affenpinscher

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,

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.

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.

Hey.

at centry.

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 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, it was like, oh, I woke up. I wanna go watch some some TV.

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