over 3 years ago Syntax Podcast
Stump’d Gameshow! Answering Coding Interview Questions from AI
- 00:51 Discussing how to prime ChatGPT to generate good interview questions
- 02:33 ChatGPT asks a question on difference between for and while loops in JS
- 11:08 ChatGPT asks a question on difference between rem and em in CSS
- 13:22 ChatGPT asks a callback vs promise question claimed as expert level
- 15:03 ChatGPT asks a hoisting related function question claimed as expert level
- 18:32 ChatGPT asks a GraphQL scalar types question
- 21:40 ChatGPT asks a Deno unstable APIs question
- 26:50 More priming of ChatGPT for hard and obscure questions
- 28:03 ChatGPT asks an aspect ratio CSS question
- 30:29 ChatGPT asks a Svelte beforeUpdate lifecycle hook question
- 32:34 Asking ChatGPT for a hard TypeScript question
- 33:30 ChatGPT asks about differences between unknown and any in TS
- 34:46 ChatGPT asks a question on mapped types in TS
ChatGPT asks an aspect ratio CSS question
Guest 2
wide and tall,
Guest 2
62.5% It does say fetch in a GraphQL
Guest 2
because, you know, we we, for a long time, have had cards, and our cards have always maintained an aspect ratio. So that was, like, a A really nice thing for me to, like, remove an extra div and remove Oh, yeah. CSS that I hated to just, in place, put the aspect ratio CSS in there. Definitely a feature I've wanted for a long time. Here is a, here's a fun question, Wes, for you and it's a Svelte question, so I'm not sure you're going to get it. It says, In Svelte, So that's a that's a good guess. Fetch is unstable in Deno.
Guest 1
how if it's not supported in all the browsers that you need, which it is, or directly passed Has it?
Guest 2
I will answer this. An aspect ratio is the ratio at which something should be displayed.
Guest 2
shape. And you just scale that exactly up for every When you go up, you go, the same amount over so that that shape will always remain the same size. An aspect ratio allows us to define
Guest 2
in one direction,
Guest 2
and it's that rectangular
Guest 2
Yeah. So you you can maintain aspect ratio with a Padding.
Guest 2
An aspect ratio for any given block level element that will then be able to maintain its shape as it grows. I'll ask you a follow-up question just out of my own brain For the sake of the users, that you didn't hit, but, you know, I think you you answered the question perfectly where it was just the only thing that it didn't say oh, this is actually kind of a funny thing too. 1, it had a the very first,
Guest 2
One of them is rarely used and is called before update.
Guest 2
Pixel 10 minutes. I'm freezing my butt off because it just wearing sweatpants out there. I had to give up, man. I had to give up. I was so close.
Guest 2
it goes the same like, every vertical console and debugging. Where is Oh, DOM APIs is a good one. Yeah. But that those aren't unstable.
Guest 2
The 16 by 9, I believe, is, like, 62%,
Guest 2
Typically, people do this with, like, a padding bottom, and you give it a percentage base. So you take that fraction, whether that is, that that you do that.
Guest 2
or something. And you do padding bottom 62.5%, We're getting Deno. We're getting, like, well, whatever the fraction is of 16 by 9. You You have that that that pixel fraction. So you could think of it as you have a square that is literally 16 by 9, prime the pump so that Chegg Epti's questions are are good enough. So I I've been thinking a little bit about this where I think I wanted to, like I wanted to know that we're playing a game show, and I wanted to know that it's based on interview questions. So I just said we're playing we'll be playing a game show asking JavaScript, HTML, CSS, and TypeScript interview questions.
Guest 1
how else Could you maintain aspect ratio before using this property? it is a bit portable and you can do that in JavaScript because of this thing called Java functions are first class citizens,
ChatGPT asks a question on mapped types in TS
Guest 1
map type able to call a function before it is defined. And it's kind of That's called I took my board off. I'm walking around. So are you gonna get a are you gonna buy a new case? I know that the exact same day this happened to you, I also category, data types. What is the difference between unknown and Any in TypeScript, and when should each be used? Yeah. I mean, philosophically, I've been maintaining the list for
Guest 2
advanced types.
Guest 2
A topic is advanced types GraphQL, experimental.
Guest 1
Notation ChatGpT
Guest 1
you loop over you're
Guest 1
and create a new type of it. And I believe it's done with the square bracket I can't explain.
Guest 2
what is the what is a mapped type And how can you use it to create a new type that makes all properties of an existing type optional? types as the API, right, when the data's coming back and forth.
Guest 1
when creating the type Welcome to Syntax. We've got us Stumped for you today. This is the Show where Scott and I ask each other interview questions A show about nothing. Remember, we did a whole show. An email,
Guest 1
type or every property in an existing type
ChatGPT asks a callback vs promise question claimed as expert level
Guest 2
a callback Function is simply just a function
Guest 1
Difficulty level expert category functions.
Guest 2
I I I told Chat g p t. Perfect. May I have another? And it did.
Guest 1
Yeah. Should I should I tell chat gpt that that one wasn't expert? I think you should. That question was not I was trying to I was trying to make it make me a workout Plan for lifting weights. Oh, that's cool. Yeah. I said, you're a personal trainer.
Guest 2
inside of another function when that function's tasks have been complete. At the end of the function, that function is run, and then you can pass in your own function as a parameter into that callback. So, therefore, your function is run at the end of the function that's been called. And, usually, within a callback,
Guest 2
when this function has completed,
Guest 2
A promise is like you're resolving a promise to, 16 by 9 pixels,
Guest 2
the results as they're returned from the function. So, basically, instead Instead of calling a function when that function has completed to get the results, what we're doing is we're saying, hey,
Guest 1
What is the difference between a callback function and a Promise in Node. Js. Oh, that's not expert. Yeah. That's not expert, but I'll answer it anyways because I'm a gentleman here. Okay. So,
Guest 2
parameters within that function have been passed into the callback function.
Guest 1
expert.
Guest 2
using a dot then to do the promise or using a single wait to wait For the function to have completed. Beautiful.
Guest 2
do something when something has been complete. So instead of the callback function running when the function is complete, we're waiting for the results of the function to be complete and then accepting Interesting.
Discussing how to prime ChatGPT to generate good interview questions
Guest 1
So I wrote this prompt and I think it works pretty well. I said, you are a game show host that ask web development interview style questions in order to try and Stump the hosts.
Guest 1
in
Guest 2
I'd like you to give
Guest 1
That is always a good thing to do
Guest 2
I think that, like, a good way to start this episode would be even, like, talking about
Guest 2
So are you looking at the prompt I wrote? No. I was just coming up with that in my head. Okay. So,
Guest 2
for us to answer along with an answer.
Guest 2
question
ChatGPT asks a question on difference between for and while loops in JS
Guest 1
So first question from the robot overlords, difficulty level intermediate category, loops.
Guest 2
you know, what your
Guest 2
get within
Guest 1
Syntax data types,
Guest 1
is AI? Like and, like, what does it where does it come? And I was just like, Alright. Let's get into the 1st question here.
Guest 2
starting point to an ending point. And without you breaking out of that, it's just going to completely it's going to complete. It's gonna run till completion, where a while loop is going to run until a specific case has been hit. And when that case has been hit, Then it will break out and end the loop. So while loop is a little bit less determinant about how long it's going to run. Now granted you can do a while loop where it's like
Guest 2
House planning or different types of things, and here's how we can we can work with it. So we were just doing a little bit of joint exploration. That's a great way to explain it because my wife Was I've been trying to explain it all to her, and she's like, what What is the difference between m and rem units in CSS? When would you use each of them? Oh,
Guest 2
A few people on Instagram saw my Photo of the thing, and they're like, you gotta tell the story about how you lost this. So Oh. They are gone forever. They're on the mountain, and I feel really bad about it because I I was so close. If I think if I would not have gotten that close, I wouldn't have felt bad about it. It would just be like, oh, well. But, like, the fact that I was 14 feet away and I knew the direction that I should have been going,
Guest 1
Yeah. Herman. Good. Nailed it. Look at me. Alright.
Guest 2
on the mountain, and I took the chairlift up. I'm freezing.
Guest 1
So I'm curious if
Guest 2
landed my 1st 3 60 clean After boarding since I was 16 I've been born since I was 16. I'm 37. I landed my 1st three sixty a couple of weeks ago, and I landed it clean. Very first one I ever threw. I landed it clean and rode away. So I was like, oh, I can just do this? And then so I I started saying, like, well, what if I just throw a little bit harder? And the first one was really close. So then I spent, like, the whole day just throwing 5 forties, and I landed a bunch of them. And I I couldn't believe it. I was like, I somebody should have told me this was not this scary. I I should have been doing this a long time ago.
Guest 2
I guess it's it wasn't under the lifts, though. I'm curious No. If It was on to anyone to try to find them. That was a whole another I'm I'm standing on top of a big jump that people are wanting to go off of, so it's like I can't stand up here for too long because everyone's gonna be like, get off the jump, man. Yeah.
Guest 1
3.5 turbo, I believe. And Scott is using the paid version of chat gpt, which is 4. So I'm curious if your your questions will be any different. Yeah. Yeah.
Guest 1
Raycast
Guest 2
I just threw my boots back on, and I'm, like, not dry. It's it's it's, like, 8 degrees out. I'm wearing sweatpants You do not know what it is. How is that different than anything?
Guest 2
But I I get to the bottom of the hill on my last run. We're about to pick Landon up. We got 15 minutes till his lesson's done, and I noticed on my phone that my AirPods case is
Guest 1
I think obtuse knowledge would be fun. We'll see. We'll see if they're good or not. You will ask questions on the topic HTML, CSS, JavaScript, TypeScript, Node. Js, Deno, React, Svelte, and GraphQL. You'll also ask questions on the categories, still had like like dead
Guest 1
AI beta, which is using can go.
Guest 2
Okay. I I I use find my my my AirPods And I get to the little arrow, the spinning arrow, and it says 14 feet this direction. I start walking towards it. Battery on my phone dies.
Guest 2
Like,
Guest 2
So I think the concept of aspect ratio is best described as, like, your phone has an aspect ratio of typically maybe by, like, 16 by 9, and and that's, like, that's, like, for every Topic I I was on the mountain. I was snowboarding. I took the kids up to go snowboarding because this is their spring break, and they they were they were doing ski lessons. And I I was boarding all and I I usually have my pods in my pocket.
Guest 2
And I
Guest 1
So it's kind of like it goes back and forth. Okay,
Guest 2
listed as being on the mount. Oh, man. And this is Keystone, man. It's a it's not like the biggest mountain in Colorado, but it's a it's a big rocky mountain. It's it's huge mountain. The runs are several miles long. That's how, you know, big this mountain is. So I'm like, I'm a I'd already taken off all my gear. I I have no snow pants on. I I'm just, like, wearing shoes, and I'm like,
Guest 2
Like, how could I not find them? I looked everywhere.
Guest 1
like rum bottles that people drop off the lifts.
Guest 2
yeah, it's It's really interesting.
Guest 2
And I I have them in this front breast pocket, and A unique
Guest 2
I went to Apple, and, they told me it'd be $90, and I coughed up $90 to the beneficial case.
Guest 1
I got this one from you. By the way, I am using Parse value, parse literal, and serialize?
Guest 1
chat gpt 3 point whatever turbo,
Guest 2
where where you've pulled this from? So, is basically Question.
Guest 1
You are going to ask me questions about my goals, equipment available,
Guest 2
I have 15 minutes. Can I go look for these things? I have find my my my AirPods in.
Guest 2
So wearing sweatpants, anything you want it to be. It's Fair game.
Guest 1
time
Guest 2
Oh, okay. A a well, a for loop is is going to go essentially from, Topic, syntax.
Guest 1
like, the known number of iterations
Guest 2
from 1,
Guest 1
Yeah. Just bite and chew. Bite and chew. I was so I was so grumpy about it. That sucks.
Guest 2
While x is greater than 5 and then x plus plus but at that point, you might as well be using a for loop. While loops are really easy to end up in an infinite loop scenario as well. So, I I usually opt for a for loop,
Guest 1
when all the snow melts Like I've seen TikToks of people who run hills and they go pick up all the like vapes and
Guest 2
Oh. Doing, like, can you please cite, And guess what? White AirPods in the snow,
Guest 1
we have our daughter's birthday, and she wrote an email to all the parents about the thing. And,
Guest 2
14 feet.
Guest 2
they I've always skied with them in there, snowboarded in them, and I was Throw in some some big time spins this weekend. I I discovered
Guest 1
And they did it, and I said, that's too exciting. Tone it down a little bit. And it popped out another one, and I copy paste it. Sent it to my wife. She's like, man, you're good. And I said that was done with AI. I did not do that. I understand used to yeah, that's pretty much exactly not exactly, but pretty close to what I had asked it. So this morning I was going back and forth and looking at the questions, and initially the questions were very good, and then the questions were too easy.
Guest 1
Question, what is the difference that
Guest 1
she has a problem not necessarily a problem, but you know how Syntax.
Guest 2
Oodle.
ChatGPT asks a hoisting related function question claimed as expert level
Guest 1
is when you use the keyword Function definitions And if a lot of them were unregistered like how you're using it and then below how it how it does it Is below the the function definitions are below it. So and then That's too easy again. Do you mind if I I keep doing this? Because I wanna get a good one. The question was, what's the difference between position relative and absolute? Okay. I'd say that is not obtuse enough. Give me something about a CSS feature that has been released in the last year. I think I think it doesn't know obtuse every
Guest 2
nuance in there where it talked about arrow functions, Courtney has a she she's a technical writer. Right? So Yeah. She's extremely talented at writing, but sometimes I read her emails, and I'm just like, Corey, you gotta, like, you gotta make this flowery. You gotta, like, put some niceties in here. People are gonna read this and think you're, like, really impressive towards it. This is, like, perfect for her to to say, hey. Make this, like, 2 degrees nicer, please. Exactly. That's what I did. I said I took my wife's email and I pasted it, and I said, make this more exciting.
Guest 2
and an arrow function, and how
Guest 2
a fail there,
Guest 2
the fat arrow does not have its own this Arguments, super, or new target bindings. That's the only little bit, but, again, I I didn't explicitly ask for that. The question didn't explicitly ask for that as well. Alright. I said, Give me another one that is obtuse.
Guest 2
arrow function.
Guest 2
Do they affect the concept of hoisting? Which is I think this is kind of
Guest 1
meaning that functions can be
Guest 1
Stored and passed around just like any other piece of Look up the DNS
Guest 2
In JavaScript,
Guest 1
any other piece of data or variable in the programming language.
Guest 1
function Okay.
Guest 2
Expression, several functions or methods inside of here are listed as unstable.
Guest 2
So we have 3 different types of functions and how they set Function expression
Guest 2
This one is also, x difficulty level expert.
Guest 2
an expert because the the initial part might not be expert, but The hoisting part seems like it's a it's a little spicy.
Guest 1
Meaning that category,
Guest 1
So that you can
Guest 2
or anything. Truth. I hear you. Yeah. We're just saying, the response is unknown. That's interesting. Yeah. I I like, I I almost got there. I got there pretty much there. Yeah. I like that. Alright. Here's a expert level difficulty in TypeScript.
Guest 1
Oh, that I like this is a great question. Okay. So function definition or a function declaration,
Guest 2
robots. But it did say about the fat arrow that, some points that you left out that you know, that's fine. You had a big answer. It did. You you asked about hoisting. It didn't ask about scope
Guest 1
is when you stick a you can still declare a function like I just said. However, you stick it into a variable
Guest 2
a function expression,
Guest 1
And that is often referred to as an anonymous function. That's not the question. I'll stay out of that. Yeah. So the question was, how does it affect hoisting?
Guest 2
So we're gonna see if this one is an expert level as category of JavaScript, and the topic is also functions.
Guest 1
which and you give it a name, open, close your parenthesis, any arguments, and then open and close the the block.
Guest 1
The third one is an arrow function Alright. Here is an expert Expert level question on the topic of TypeScript,
Guest 2
the other 2, arrow functions and function expressions, are not hoisted. Yeah. I think that is a lovely explanation. There there was some, That way, you can can transform that value into a date the way through. But I don't know what those those names of those functions are Parse values
Guest 1
Where if you open up the file, you see what it does,
Guest 2
And an arrow function. Also, post the question into the show notes too without the answer. A function definition or a function declaration, Oh, For a scalar type, you first need to define the type that
Guest 2
What's the difference between a function declaration,
ChatGPT asks about differences between unknown and any in TS
Guest 1
And before you call that function
Guest 1
whereas unknown will make you first write a type guard or an if statement before you use it. So like I have an I have an example where
Guest 1
Okay. Whereas any is literally any type ask
Guest 1
unknown any. So the difference between unknown and any
Guest 1
but I will check what it is before I use it.
Guest 1
Is
Guest 1
unknown is saying I do not know the type,
Guest 1
Or before you add 1 to that number, you must first check that it is a number with unknown. With any, it just says, I don't know. Do whatever the hell you want. I don't care. So in general, you should probably use unknown
Guest 2
in most cases. Yeah. Like a fetch response. Right? You it's Courtney and I Courtney never used it. And I was like, hey. Did you know you can use this for trip planning or or the, application of that because I just don't use it very much. All right,
Guest 1
And any will take off will turn off a lot of type checking, TypeScript, you name it. In the past, we've done this where we find a list of interview questions and we ask each other, and we've sort of
Guest 1
it could be a number or could be a function. It could be a string.
Asking ChatGPT for a hard TypeScript question
Guest 2
And then any is, like, you're just saying that this has a type but the type is literally Does r does the r in REM stand for root or does it stand for okay. I didn't know that. Root. That's something I never I never thought about. I don't know why. It would be perfect. Relative. Well, maybe it's relative. Relative to the document? I I I don't know. Yeah. I've never ever been like, oh, I wonder what the r in REM stands for, which I guess I should have. Yeah. Yeah. Root m. Sure. Here's an expert level question on the topic of Node. Js and asynchronous programming I looked for
Guest 1
let's redirect people to back to the show of are hoisted to the top of your document, and the way that you can do that is by and
Guest 2
I don't know in practice, and that It's not your resolvers. It might be in your resolvers.
Guest 2
Like, really, I almost never use unknown myself.
Guest 2
I almost never use any either. So let's see. If a type is unknown, it means It can be anything.
Guest 2
I code example that it gave, it was just a straight up function definition, but it said it was c sharp for some reason. I couldn't tell you why. C sharp copy code. Yeah. I don't I don't know why every the other 2 came out as JavaScript, so,
ChatGPT asks a Deno unstable APIs question
Guest 1
If so, does it have MX records? Like, can it receive email? domain names. It's massive.
Guest 2
So.
Guest 1
running like Rust In TypeScript is where Like 6 or 7 years now, and it's at 60,000
Guest 2
Something with WASM or the temporal API. Okay. Well, temporal doesn't pop up in their docs. So, You know, there is a lot of WebAssembly ones. So Deno Cast, Deo Const, Native Struct, Pointer, Deno Deno brand, those are all WebAssembly APIs. They're all unstable.
Guest 1
Base stuff? Mhmm.
Guest 2
little accordion, you'll see that there's, like, several
Guest 2
DOM APIs,
Guest 1
Alright.
Guest 1
These are really fun. Yeah. Totally fun. Okay. Oh, I closed my chat window. I gotta prime the pump again. Hold on. You gotta season it. I gotta season it. This is not an intermediate question. What's the difference between a div and a span? Come on. We're not gonna ask that question. Oh, come on. I want that question. Sucks.
Guest 1
imports, but that now is no longer stable. I'm curious
Guest 2
You know what I like about this, Wes, is that we're getting GraphQL.
Guest 2
Okay. So maybe not fetch as a whole. Let's see.
Guest 2
Any of the FFI stuff is All of FFI is unstable.
Guest 2
I'll have to pop open the Dino docs for this one.
Guest 1
used that API
Guest 1
domain names, which is like, I use them to filter out like single use emails from my email list.
Guest 1
Not intl.
Guest 1
Yeah. This is a hard one. There's a lot of unstable APIs, but you really have to know Deno to get them. Wow. So that was a good one. That was Yeah. That's a good question because we honestly made us look into it, but I'm stumped. The robot overlords functions, arrays, loops, conditionals, and more. Each time give us the difficulty level. This is also saying I've learned from this prompt. Yeah. Is you you have to tell it what the output looks like. Totally. Each time give us a difficulty level, the category, the question and the answer. Give us 1 question at a time. That's another thing I've learned is that it will just dump a whole bunch of data at you.
Guest 2
So I I, I tried to chastise chat GPT, and I said, resolved DNS is not currently unstable.
Guest 1
So I wrote a node script to loop over every domain name, A function expression and see, is it registered?
Guest 2
As a whole is unstable, but I don't that doesn't make any sense to me because, like you said, the whole thing is based on fetch. But this is I'm I'm looking at the Deno docs themselves, So I I don't necessarily know it's unstable about it. Probably just that not every single aspect of it is stable. Right? I understand that unknown is like you do not know what the type is going to be.
Guest 1
ChatGPT
Guest 1
Unstable.
Guest 2
However, it's possible that the API is stabilized and is no longer required to flag. I appreciate your understanding and provide, Shoves everything down the correct amount and will maintain the aspect ratio, and then you just do position relative on that. And everything inside of there, you do position absolutely inside of Inside of that dev. I like it. I used to do that,
Guest 1
npm,
Guest 2
The Deno resolve DNS API was considered
Guest 1
oh, there's there's one that, Yeah. There's one that's obvious. Oh, what's the new data API? What's that new data API that's gonna replace it? The, not I. Starts with the I.
Guest 1
and a lot of them M's are based on You give it a name. What maybe can you describe what is a scalar type first? Bought a third party case for a set of AirPods that I had that didn't have a case.
Guest 2
knows that. I know. I'm I'm thousand one. That as well. There there's a lot of unstable ones, so I'm like, I have the docs up, and there's a ton of them. Oh my god.
Guest 2
Come on. So are these robot overlords going to overtake us? I don't know. They think that resolved DNS is unstable.
Guest 2
is often used to enable access to the experimental In TypeScript, The seasoning that we're using to so that way that You know, it's coming in as a string and exiting as a string.
Guest 2
I'm trying to think if there's any of them that will be,
Guest 2
What? The whole thing is built on fetch. Yeah. That that actually doesn't make any sense. It says okay.
Guest 1
Well, for a while, it was And everything in that component will be relational to that font size. That's really nice. However, REMS, if you want the whole thing to be document wide or route wide, you said pretty much everything in the GPT response. And then I pulled up the docs for scalars and you were just, like, A
Guest 2
the chat GPT says Resolve DNS is unstable. So I'm interested. Is Resolve DNS that the derived values are up to date when the component renders without causing additional updates. So it allows you to do something without triggering a rerender essentially.
Guest 2
unstable currently. Let's find Resolve DNS.
Guest 2
And I'll provide another obscure question for you. So it tried to give me some lame brained excuse that it's outdated information.
Guest 2
The fetch API has several unstable parts of it. Basic auth, create HTTP, HTTP client, proxy.
Guest 1
Temporal API. I was gonna say it does not start with a lot. Is it temporal API? Okay. I I am stumped. I was gonna either say Web Workers. Mhmm.
Guest 2
Not just straight up JavaScript and CSS questions. So this question is about Deno, and it says, in Deno, the hyphen hyphen unstable flag
Guest 1
Oh, foreign function interface?
Guest 1
You know, I
Guest 1
In Node. Js the other day. No way. Yeah. I so we I have this list of of burner Like, obviously, I can't explain it to you, but it's easier if I just show you. So for another example she had was MX records. So I pruned all of those And, etc. Ask me 1 question at a time because it was just giving me a list of 40 questions.
Guest 2
caught me on that one. Here's Here's a good interesting thing. The, the Deno
Guest 1
out of it, and I used I figured out there's a node API for making DNS requests.
Guest 1
Yeah. That's their answer to
ChatGPT asks a Svelte beforeUpdate lifecycle hook question
Guest 1
Obviously a component is being re rendered, so the before update lifecycle hook would be
Guest 1
You could do anything that was intensive or took time, right? Like just And Are a multiplier value that is based on a value that has been set elsewhere.
Guest 2
I would I would imagine so. Yeah. And their example is pretty basic here. Yeah. And this is again, this not something that I ever use. I think I could do a command find for this in my code base and turn up no results. So I like it. That was a good question.
Guest 2
Yeah. It
Guest 2
Can you explain the purpose of the before Update lifecycle function in Svelte and the best use case for it. So lifecycle hook would be when itineraries for those vacations. We're saying, here's the hotel we're staying at. Here's how many days. Here's the things that we would like to do. We would like a Yeah. 6 day itinerary, but we want this many days of beach days and this and you do have to, like, really work that out. But I always love to tell it to cite its sources,
Guest 2
was. Yeah. I have I have no usage of this ever. This is great because I can now I can tune this a little bit to say, Okay.
Guest 2
give me a type Script questioner. Give me a hard one Yeah. Based on this. This is way better than looking through a repo. I like this. It's great.
Guest 2
before the dom has been painted? Yeah. Yeah. What? Yeah. I one thing I don't know is what why? Like, what's an example you might wanna use that? It's called just before the component updates the DOM. The before update function is asynchronous, which means it does not block the update from occurring. So it just runs right before the DOM is gone, but it's not, does not block. The best use case for before update might be to calculate a derived value based on the components, data, props Before the DOM is updated, this can be useful if you want to ensure
Guest 2
Oh. And and they have a I'll I'll post this this code in the show notes here because I think it's useful to see. But it basically says, here we have a double count variable and allows you to calculate the value of double count,
Guest 1
Schedule or start something
Guest 2
and then that value will be replaced essentially in your Script tag without causing a rerender of the whole thing. But it's it's not a sync, so you couldn't like.
Guest 1
Quick calculations? AI world is you tell it what it is. That's the system input that we talked about on the last one. This is you will ask questions on difficulty levels, intermediate expert in obtuse knowledge. So I had to leave off the beginner ones because they were They were so simple, you know, like it's not. So obtuse knowledge, yeah.
ChatGPT asks a GraphQL scalar types question
Guest 2
Yeah. For some reason, my brain first went to fragments, but a scalar InGraphQL
Guest 2
at its core, can validate And it responded with, I apologize for the outdated information as my knowledge cutoff date is September 2021.
Guest 2
it has a set of built in types to it, but there's a Whole subset of other types that aren't built into GraphQL, parse the value
Guest 2
you would need to define your own scalar,
Guest 2
Topic flags.
Guest 2
things like date. Believe it or not, there's no date type that's into,
Guest 2
Yes. Those are the ones. I can picture them. I can see all 3 of them in my code base, but I cannot Read them. They're just blurry. You know, Then do this thing, whether it is the
Guest 2
And this says difficulty level obtuse what this can do, and I showed her exactly what I did. So kind of fun. Yeah. That is fun. Yeah. Alright. Totally unrelated, but I had a kind of an interesting story about my weekend if you wanted to hear it. I wanna hear it. Yes.
Guest 2
your file. So you define a a scalar.
Guest 1
Oh, man. I don't think I would be able to get this one. Question. How do you define a scalar type in GraphQL? What are your goals? And then Mhmm. What do you have available to it? And it's like a conversation. Right? Like, I get it. It's chat. But Yeah. If you ask it to do 1 at a Time. It's much more manageable. Yeah. It's so funny. We were just using it to do, like, a couple things. We were we were asking it about, like, Vacations and in,
Guest 2
Oh, it's it's a scalar type.
Guest 2
date
Guest 1
Sure. Here's an obtuse level question on the topic of GraphQL
Guest 2
GraphQL by default. So, Saying it as I was reading through the doc. It's amazing. Oh, cool. You nailed that one. I mean, I taught a I taught a course on GraphQL. So I feel like I know this stuff pretty well. But, you know, again, However, you also need
Guest 2
And I'm going to fur I'm going to blank on the functions. But, basically, you have, like, an input in an output type of function that there are several life cycle functions that are available for controlling the behavior of components during their life cycle.
Guest 1
No. That's good. Especially for like even something like GATE. There's often if So Between a for loop and a while loop in JavaScript.
Guest 2
And
Guest 2
current date is equal to type of date, The same way you would string or whatever in GraphQL.
Guest 2
and you could define your own scalar as being a date type.
Guest 2
or category Deno.
Guest 2
I've only read the you you're hearing me say date because it's the only type I've ever written by hand. In fact, Usually, when I use scalars, there's a guild plug in that just imports all of the non typical scalars that you might have, like an email or whatever type.
Guest 2
So I don't write these by hand very often.
Guest 2
a nonstandard type in GraphQL.
Guest 2
And so you would first need to I can throw a 540 and not get hurt. Once I discovered I could do it, I was okay. So to put this into context, I'm not a pro boarder. I Because it's yeah. I I guess I don't I don't I don't know the practical APIs or features. Can you provide an example of an experimental API that requires the They will flag and explain its purpose.
Guest 2
Okay.
Guest 2
in Yeah. That was not expert.
Guest 2
your API type definitions to say,
Guest 2
With that syntaxes is not something you write a whole lot. No.
Guest 2
to say, hey. Here's a scalar and its name is date, usually with a capital letter, capital d, date. This is the type. Then you can then use that type within
Guest 2
Declare scalar
ChatGPT asks a question on difference between rem and em in CSS
Guest 1
A a 2 m based on No. That's that's another one. Yeah. That's old. Another one, but based on CSS
Guest 1
The difference is, is that,
Guest 1
Em's are really nice when you want everything to scale up proportionately to the component. So you could put a font size on your component
Guest 1
whereas
Guest 1
Spot 1, robots 0. Yeah.
Guest 1
use case as well. However,
Guest 2
Yeah. We're we're very good at this. Hey. GPT says the m unit is relative to the font size of its closest or nearest parent element With a set font size while RemUnit is relative to the root elements font size, usually the HTML element. I'm wondering,
Guest 2
category, CSS.
Guest 1
size. So if you were, you can get into trouble with M's.
Guest 1
the parent
Guest 1
REMS are based on the root of your document,
Guest 1
Then you can scale it based on that. So most people now use REMS, but Ems definitely still have their with unlimited questions
Guest 1
are based mostly when I'm doing determined amount of loops. You did it, like, exactly How it says, like, the word
Guest 1
that's a pretty good one. Alright. So, If you do use m's, probably Sometimes you'll ask me to proofread an email to make it Oh, yeah. Nice Oh, yeah. Or, like, fun.
Guest 2
Okay. Difficulty level intermediate
Guest 1
10 pixels would be 20 pixels calculated out and a 2 rem based on 10 pixels would also be 20 pixels.
Guest 1
M's and REM's
Transcript
Guest 1
on coding. So JavaScript, CSS, Node,
Guest 1
used them all. That's why we haven't done a stump in a while. However,
Guest 2
And, we'll see if the robots are going to beat us or not. Yeah. And and and to do this, I think we're We're gonna be trying to I I was saying we're gonna season chat GPT a little bit to to let it make sure that it's giving us the the right type of questions for the types of things that we're gonna be, wanting to have in this. And so that is run should reach for a CSS variable and calc instead. Yeah. Be careful with them. So do you think that I mean, you're obviously, your answer is correct because, Like a plug in for it or someone's written. I I replied to chat g p t, and I said, give me something obscure.
Guest 1
To ask us, which is really cool. So we're going to
Announcer
You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Silinski and Wes Bos.
Guest 1
our Lord and savior AI, Chat GPT, is here must be stuck in a variable
Guest 1
to give us questions based on difficulty, you loop over it and then you put a little question mark On the new type, which then makes it optional. There also are a bunch of helper functions that do that, but that's what it's doing under the hood. Yeah. What about, hoisted. It hoist them up to the top of the document before JavaScript runs it. And that's kind of nice because sometimes you like to write some code
More priming of ChatGPT for hard and obscure questions
Guest 1
Based on obtuse CSS Okay. Hit me. Here's an obtuse level question of the topic of CSS. What is
Guest 2
A div for those of you out there, div is block level of span as the inline. There. Bingo. Now give me something very interesting and saucy. Saucy? Oh. So this will be interesting. Although because Deno or this has an answer to it, and it very well might not be your actual answer. So Where where are you seeing the the list of unstable ones? Do they have a letter beside them? They they have it says yeah. So you have to make sure that the show unstable API box is checked, And then it says unstable as a label next to any of them. So if you check that checkbox and then open up the fetch API,
Guest 1
Oh my gosh. That one is too complex. What is the difference between get derived state from props and component will receive props lifecycle methods?
Guest 2
What is aspect ratio? Give me That's I mean, that's that's a newer feature, and it is somewhat obtuse.
Guest 1
because it's they're all too easy. This one was called.