📧 Stay Connected for Future Live Events & Our Amazing Newsletter! 📧
Want to be the first to know when we go live again? Subscribe to our mailing list, and you'll receive notifications for all our upcoming live events, as well as our amazing newsletter filled with the latest news, trends, and tips in the JavaScript and web dev realm.
Transcript:
Hello. Can y'all hear me okay?
Think so. Welcome.
Welcome to JavaScript Jam Live. Invite Anthony up here.
Jason, what's up, man? Welcome to the room.
All right. Welcome to JavaScript Jam Live, and we do this every Wednesday, 12:00 PM Pacific Standard Time.
This is where we talk about everything, JavaScript and or web development related. If you are a beginner, Or if you're an advanced user, developer, creator it doesn't matter. We wanna hear from everybody. So feel free to raise your hand, come on up, we'll bring you up to the stage, and you can ask questions. You can state facts, opinions, whatever we wanna hear from you. In fact, it just increases the value for everybody, even the people up here participating and speaking on stage.
And also therefore for the audience too. So come on up whenever you feel like it. We'll bring you on up today. We're gonna be talking about. Render a little bit. Render atl if y'all haven't heard. Last year I got to participate and attend actually more. Yeah, attend, which was awesome. One of the best conferences I've been to for sure.
It's up there in the top. It was really good. They just know how to throw a conference and obviously a lot of people think the same thing because this year it's even bigger. Last year I think they had I think they were expecting under a thousand things. I think they had just over a thousand.
So this year, I believe they're making their way up to 2000 or at 2000 already. So if you haven't gotten your tickets yet, go to renderatl.com. And check it out for yourself. You'll see the speaker lineup and you'll be like, wow. Yeah. Need to get in on that. Not just that, it's just a great time to network with a bunch of awesome people in the tech community.
Lots of people here that are on this with us usually are going be there, I'm sure. So with that being said, thank y'all so much for joining us. I'm gonna go ahead and let's make some intros and then we'll carry on with the conversation. Talk a little bit about the newsletter that we have, what was sent out on talk about some of those topics.
That's what we love to the do. By the way, if you're not on our newsletter yet, it's very easy to sign up. All you gotta do is go to JavaScript jam.com, put in your name and your email and we'll send you that newsletter. Don't miss out on the latest in tech and web development in JavaScript world.
We're in it every day. Folks, just to give that information to y'all, Anthony writes an amazing newsletter and he puts lots of time and effort into it to give you the best value he can, so you won't wanna miss out. Check it out. Alright, intros. My name is Scott Stein and I am the technical community manager at Edgio.
Yo and one of the co-hosts here at JavaScript Jam. Anthony or Ishan, would you like to? Hello, I'm Anthony Campolo. I'm a developer advocate at Edgio and I am VP for Edgio applications platform and I just got my interval workout in. I was running around the house looking for my AirPods. So thank you, Scott.
I was like, where are they? And they fell off on the desk and I've been if I'm a little outta breath that's why. So Nice. But yes thank you for the intro. Maybe we should just tell people what's coming up next week that relates to render and leading up to the conference itself a little bit before we jump into the newsletter, which again, hats off to Anthony.
I thought. He does a great job. I used to do 'em and I'm so much happier. Anthony's doing them now. There's so much better. There's a lot of good stuff in there this week. But before we do that, let's maybe, talk a little bit about render and what we're doing with them starting next week.
Awesome. Yep. So next week we're gonna have an awesome guest on it's gonna be a great time. And the week following is render itself, right? We will be there. Is that the week following? Yeah, 31st. We'll be speaking with James Q Quick for sure. And probably some other people. We're also talking to Tejas right now to get him scheduled, and we'll be recording a podcast with Chris Coyer as well.
So we already got some content planned. It'll be even more coming at you most likely. And we'll be live at the conference. I actually won't but these guys will be podcasting live from the conference. So if you can't make it first of all, try to make it to, to what's a great conference that Scott was talking about.
But if you can't, definitely tune in here. We're gonna have. Interviews with the speakers and the weeks leading up to the conference. And then at the conference we'll have an episode and I think we might get a podcast or two out, out the podcast itself from some guests Absolutely. Yeah. Out of being there.
Yep. Which we love doing those in person recordings actually. It's just so much fun. It, it really makes a difference in, with the environment and just being there face to face with someone rather than just digitally. So it's a great time when those recordings happen because you could really hear it in the recordings.
There's some of the best, some of the best recordings we do are in person so yeah, if you'll be there and you want hang out with us up and come say hi and I both be there and you can join in on the as well. Like Ishan said, we are going live while we're there.
We, that's just like this thing we've been doing now at every event we go to is we try to go live. And we have successfully done that and are going to continue doing that. Be sure to join us on that live because we're gonna have some of the speakers from the event on the live with us to really dig into some cool behind the scenes stuff and answering questions and just kinda hanging out and chat with everybody just like you're at the event there.
And not have to wait in line to talk to them. You can just come up on stage, chat it up. So be sure to join us. That would be on the 30? Yeah. 30 we'll be doing. James will be here. That'll we forward to. Awesome. And I'll just call out, if you're looking at the conference website right now, when you go to it, it has the speakers.
But if you wanna see, what is the actual schedule? It's not in the dropdown, at least I didn't see it in the top dropdown. So you have to scroll down and there's a button that says show speaker topics and then you can see what the schedule is for, what people are talking about at render.
Oh, yeah. And there's, yeah, I'll link it here. Yeah, that's a great idea. There's, there's, as Scott was saying, there's a lot of great speakers Evan Yu creator of, Vue JS. As well as Vite also a former guest on JavaScript Jam. One of our early podcast guests will be a speaker.
Lots of great luminaries like that are speaking. I'm actually going through the latest version of it, James Q, who we talked about, who we're gonna be talking with. Chris Coyer who will also be talking with will also be there or at least we're talking to. So there's a lot of great people that are talking.
I was wondering, when Yeah, Anthony, you look through the list of topics and talks, forget who the speakers are themselves. Is there anything that jumped out at you in terms of overall themes or anything you're like, that's the talk. I'm really interested in looking at anybody else who's looking at it right now.
Feel free to jump in and come up to stage. Yeah. I,
it, last time I tried to. To do this. So search, do it control f and search for topics. And there's a button that says, check out our speaker topics. There we go. Ok. Cool. I'm trying to put in, ok, let's see. Web development 2023, what the data says. Yeah. Has given similar talks like that in the past.
I always enjoy those. Yeah, that's a really good call out. His talks on these are like, just for the audience to contextualize, like Laurie does a lot of data analysis and at the Jamstack conference he looks at what frameworks are the most popular, what are the most popular tools? Definitely somebody to listen to.
He also, I think, contributed to the Web Almanac, if I remember correctly. Yeah. For the JAMstack section I have a little beef with how they did it this year. But regardless he has a what was your criticism of it? I would say that to summarize, I felt like the technical criteria they were using to survey the web for, the size of Thet ecosystem, only basic.
Basically they were finding sites and saying JAMstack, like the challenge you with JAMstack, depending on how you define it, is you can't tell from the outside whether a site was JAMstack or not. You can tell whether it's yeah, but if say they're using qo or they're using 11 with no JavaScript, there's no like server response header, there's nothing that would necessarily indicate maybe, some of these tools sometimes astro embed, some basic framework JavaScript.
But if you're on like Hugo or 11 where there's literally no bleed in, you have no idea if there was created with, spring NBC on Java or it was created with 11. And so it becomes really hard to survey the market and say, and the way the Wet Almanac works is they just basically crawl the web and look for data points.
So I wanna acknowledge it's a real challenge to say, these sites are JAMstack and previous years they would be like, they'd talk about Gatsby versus React, and it was very framework centric, but that leaves out, 11, it leaves out Hugo, it leaves out, some of the granddaddies of the JAMstack era.
And so what they did is they came with another set of criteria or heuristics to see whether a site was JAMstack or not. But that inherently has is a heuristic, so it means it's not completely accurate. And so I don't have to be fair a solve for this problem personally but I also. Feel like it's a little inaccurate, it's not accurate enough that I would be comfortable saying I think that's an actual map of the JAMstack market.
I think there might be other ways to approximate it. But it's still a difficult problem. So Interesting. Yeah, I feel like that's one of those things until you have a better solution, it's just you do the best you can and hopefully someone else comes up with something better and actually implements it, in which case you would then have your own squeak data points to speak on that.
That sounds like ChatGPT's excuse you just come with I, you were, I think I interrupted you. What were the other talks that, that jump out at you? There's some AI stuff that I'll probably be curious about. Guess I'll want AI in React by Gant  I'll be curious to see what that's like.
It doesn't give it a lot of information in the description of the talk, so it's are you generating a React app with AI or are you writing a React app that queries like an AI api? So either of those I would find interesting. Yeah, I'm, I actually, that was the thing I control left on was how many talks have AI in them.
Like four or five. Yeah. So there's there's rise of the robot, how to thrive in the world of ai. And the description sounds like. It's, do these AI tools, make you worried about your future as a web developer, the or not. He's gonna discuss ways you can leverage these tools.
And this goes back to a theme that seems to emerge every week, if not every other week. And we had a, an episode of couple weeks ago where we talked very in depth on this topic about, does AI threaten the future as a web developer? So that's the first AI talk. The next one is the AI and React which sounds really interesting.
Let's see what the next one is after that. Is it only those two? No. Generative AI, a builders guide is gonna be, exploring generative ai. This one looks really interesting and foundational as opposed to just how you can use it. Can I explore, key concepts, like what word embeddings are, what word tove is and large language models and N l P.
So it looks like, it'll give people a lot of context to feel like they know, what the landscape looks like. And where maybe next steps are. Actually, it says right here talk equips attendees with a solid foundation for delving deeper into generative AI's potential across diverse industries.
That looks like a good one. So I'm count in three. That last one I think sounds extremely interesting. I don't know if she's talking about it. So Charlie Gerard is a speaker she used to give three or four years ago, a bunch of talks if you Google for them, and you can probably find them on YouTube, which are like AI.
For front end developers and she was using things like TensorFlow js in the browser where you could code and program and configure a TensorFlow JS network in the browser. Looks like she's talking about protecting, apps from malicious packages. Just still also important topic, but I would Google for her other talks if you're interested in ai and I'll use this opportunity to mention that, we just recently rolled out an ai, another AI powered feature on our platform, which lets people use natural language to actually configure the Edge cdn.
But it's definitely something of the moment. What else for the render, schedule jumped out at you, Anthony, if anything? Evan Yu had one that was like something about crossing the barrier between frameworks, I think is what it was that looked pretty interesting. Oh, I see that. Yeah. I had not noticed that.
Thinking across the framework barrier. Yeah, absolutely. Yeah, that sounds super interesting to me. Cause especially someone who uses a bunch of different frameworks is always context switching and trying to figure out how to explain them to people. It's an interesting exercise. Yeah, that's that's definitely one to tune into.
Look, this is the guy who built one of the most popular frameworks. I don't wanna say single-handedly cause I know there's a lot of contributors, but he didn't have the backing, if any, large organization, angular backed by Google React backed by by, meta slash Facebook and, somebody who definitely looks at these design trade-offs between the frameworks.
And then also build ve, which is, extremely cross-platform and popular as well. And, to get inside the mind of somebody who thinks very deeply about framework trade offs, it'd be great to hear those thoughts. I, that's definitely one that, you're right, that's a good call out.
Yes. Aside from that maybe the Code Sandbox one could be interesting. The technical story and learnings of Code Sandbox, like building a browser editor is just a very, I imagine large, interesting problem space and Code Sandbox, I feel like is not necessarily as nice as some of the other ones these days, but has been around for
hen knowledge about it. That makes sense. I'm trying to figure out, oh, actually I missed another AI talk. There's one, how can we test AI systems which is a really important topic. I don't know, folks, Tuned in, there was a congressional hearing, I think earlier this week specifically about AI and regulation, and that's very relevant to that and reliability.
But I'm scrolling the schedule to try and get a sense of, broad trends. What does this reflect in the market? So I see things that I know that are growing so edge, there's a talk, the bleeding edge of web development. And they'll talk about, edge. And so edge compute is definitely on on people's mind.
Along with ai I see vanilla js making an appearance, which, a few years ago I don't think you saw as much of I see web three making an appearance, but not as much as I think used to be there. I'm curious, as somebody who's worked in that industry, if. Me, that's me extrapolating too much or is it just getting overshadowed?
Anthony, what do you think? Oh, I think it's a couple things. It's the, there's definitely less general mainstream interest in web three right now, both because of kind down cycle in the market over the last year and its place in zeitgeist. I think that it's crypto. And web three stuff works on like long-term time scales or to, to a certain extent.
Like it has ups and downs. Like it had a big peak in 2017, had another big peak in 2021. So extrapolating from that, we may expect them to be hitting the conference circuit again in 2025, but I think that if you're someone who's interested in this stuff, you're kinda, you're not as concerned about that.
It, so like when it is in a bear market, it's kinda a, you don't see it as much, it's gonna kinda come back around. I thought the one talk it looks like do have, has an interesting title, the winners and of crypto and web three. So we'll see. I think that the industry itself is in a weird place because when you look at things like FTX and the whole collapse there and svf possibly going to jail over it all.
So people look at that and say oh, this proves that Web three was like all a scam. And people who were in web three and crypto no, this proves that people weren't actually listening to us. We were telling people why these systems are important, and everyone bought into this, like v who just built another financial system that scanned a bunch of people outta their money through opaque finance laws in The Bahamas.
And that has nothing to do with crypto. Yeah, it's a much larger conversation than we have time for. Yeah. It's like these, this is the thing we were trying to prevent against. The, I, there was a I know expert or pundit who's web three might have just been misnamed. It's just further off, so it might really be web four and it just, the time wasn't quite right, but it might come back in a different form.
I'm noticing Colby also has a, an AI themed talk as well. The other theme that jumps out though, I'll say here, and you don't always see a lot of this, more of it in conferences but it really makes sense cuz render, their byline is, let me go back to the homepage, make sure I don't mess it up, but it's a tech conference where talent feels welcomed.
There's a lot here about growing your career, hiring getting a job, things like that, that aren't always covered. Things about like how you manage teams. So there's a lot of also career stuff as well. And leadership, that's true as well as, so there's a whole category on leadership and entrepreneurship, a whole category on product and project management.
Yeah. Go ahead. Yeah. Also, to. Takes money to run these conferences. And so those topics bring in sponsors for sure. Yeah. Yeah. Makes sense. So those are some of the things that jumped out at me for this year's conference. But excited. Yeah. And then, this is, I think they have a big event at the end of it, or at least they did last year.
I didn't make it to last year's either. But there's a concert at the end, is that correct? Yeah, I don't know if it's their concert. I think it might just be put on somewhere else and they get tickets to it. Cause they had something similar last year I left before I couldn't partake in that cause I had a really early flight or something.
But they had a concert that was happening somewhere and they got tickets for everybody that did ticket essentially. Yeah. Okay. So for those of you have the time to spare, that sounds like. Something I'm personally more of what they did at Remix, like the game night, but yeah, but they do, I will say this too though.
They do have a ton of events every night. There's different things that and they'll get continued sponsorship for these things. For example, one of the nights last year AWS sponsored a dinner, kind of thing. Or yeah, just all kinds of things, honestly. There's usually no lack of in fact, like a lot of these depends, are, so events after events are so popular that the place will fill up and if you don't get there soon, before starting, then you won't be able to get in the door.
And so there's more than one event happening at a time. So obviously there's ones that are hot than others and it's just kinda how it goes, but you can always partake in something where other people are at that you can still network with, continue to build relationships and have a good time. Yeah.
And I see they've got like themes for each day. Jersey Day, cosplay day. Yeah. Tie dye day. Yeah. They had a little bit of this something like a theme last year. They didn't have a whole cosplay thing. And that'll be interesting. Like honestly, I I don't see myself doing it right now, but I'm sure there will be plenty of people doing the cosplay thing.
I just, yeah, don't have anything doing that
Lend Iron Man suit. I'll wear it.
But yeah the Jersey Day actually takes off from their design team Last year had created a jersey for a lot of the people, like the people that worked there and the people that were I don't know what they called them, but almost like advocates, involved in it. And you can actually purchase a jersey their Jersey render, ATL jersey.
It's pretty slick. It's really cool. But they had 'em last year and a few people had 'em, but kinda, I think that's where. Derived from but obviously you can wear any jersey you want. So I was thinking, we should get JavaScript jam jerseys. That'd be Oh, that would be great.
That would be awesome. Maybe for next year Jersey. If, now the question is if you could be any Marvel superhero, which one would you be? Yeah. Whatever you in which Avenger would, whoever. Yeah, exactly. Sorry. But maybe that's a topic for another day. We're right at the halfway point.
Do you wanna do the station break and then we should switch over to, what was in the newsletter. Awesome. Yep. All right. Thank you y'all so much for joining us. I see a lot of PE people here that are always here. So thank you so much for joining us on this awesome Wednesday. As always we love y'all.
Appreciate you guys' support and everything you do. For those of you who are joining us on the recording, thank you so much for you taking the time to listen to this recording. But I just wanna say whether you're a beginner or whether you're advanced developer, it doesn't matter. We love to hear from everybody, so free to raise your hand, come on up.
Request to come up here and have a conversation with us. Love to hear from you, you doesn't matter. State facts, opinions quite ask questions. We'd love to hear it all. In fact, that actually increases the value that everybody is partaking in. So thank you. With that being said, don't forget to sign up for our newsletter because Anthony puts so much time and effort into that and we greatly appreciate it.
But more than the reason, the main reason he puts so much time and effort into it is because we want it to be something that's valuable that you guys will enjoy reading and receiving in your inbox every Tuesday, right? The day before we go live on Wednesday. So if you wanna know what's happening, In the world of JavaScript and web development, be sure to go subscribe@javascriptjam.com.
That's JavaScript jam.com. Go subscribe. Don't miss out. All right, and you know what, if you haven't gotten your ticket for render ATL yet, you could do that too. Render atl.com. That way you can see yes in person. We'll shake hands, high fives, hugs, whatever you want. Yeah. Alright, back to the show, huh? Thanks.
Thank you, Scott. Anthony you know it, I know what jumped out at me, most of all. You can probably guess, but is there anything that you thought was the most interesting or newsworthy from this week's newsletter? Yeah, so there's kind of two main topics that are covered. There's the new view release, which has like a whole bunch of stuff that's probably more interesting for view specific developers, but it was looked like a pretty substantial release.
And then Google io, which is Google's kind of yearly developer conference had a whole bunch of announcements across a wide array of things. So a lot of that was related to web performance and core web vital stuff. So yeah, I'd be definitely, this is thing this is your expertise way more than my, so you're gonna be able to explain this far better than I can.
But there's an announcement about change to the core web vitals. So for people who do know this stuff, they know there's the core web vitals, which is just a, and then. Beyond as a larger kinda set of all of them. And the core ones that are just a handful are always being tweaked and one is being removed and another is being changed out for it next year.
So first input delay is being replaced with interaction to next paint, I think is what it was. Yep. Yeah. So yeah. So you wanna talk about, yeah, so what those are why that's significant and your, we should just talk about Google IO in general. I have not finished going through all the web talks yet myself personally, but this one definitely caught my attention as well just cuz we, performance is so much a part of what we do and what our clients, trust our Iio platform for.
As you said, there's this core vitals that Google measures anytime somebody uses the Chrome browser. On mobile or desktop, there are basically, and in certain cases, taking in a privacy preserving way, performance measurements of those websites that people browse. And then they use that to rank websites according to how fast they are for actual users.
And something that's sometimes called the Chrome User Experience report, but most people know them as web vitals. And there's three key metrics that they've historically used. One is largest Contentful paint, and actually I shouldn't call these performance metrics. We colloquially call them performance metrics, but they're really user experience metrics.
And I'll explain why in a second. But the first one is largest content paint, and that's how fast does it take for the largest. Piece of content on the page above the fold to appear when the page is first loading. So that one's a true performance metric. And it's one a lot of people focus on. The second one is first input delay, which is about when a page loads and you do your very first interaction, your very first tap.
Other than scrolling how long does it take for the page to respond? It's actually not even, how long does it take for the page to respond? It's how long does it take before the handler finishes running? And we'll get to why it's such a poor metric and why they replaced it. And then the last one is cumulative layout shift, which doesn't really measure performance.
It measures how much does the page, Jan, how much does it move around? On users without any notice. So if the page is moving elements around and you're not tapping it, that, that's a layout shift. It's one of the crucial differences, that tip people off when they're using say, a hybrid app that's a mix of web content and native content.
It's like when you load a page, things jump around and native applications don't do that. And there's no reason webpages need to do that. It's just they're built in a way that you can unders, specify things and the browser has to guess. And so as Google wants the web to compete with mobile experiences or native experiences on a level field, reducing this c l s cumulative layout shift is really important.
And these metrics are, extremely important. For say the average e-commerce site, 50% of your traffic might come from Google search results more so if you're like a blog or a news site. And if Google is ranking you above or below your competition, especially in really competitive search results where the quality, the content's probably equal, then performance is going to potentially be a tiebreaker.
And so these can have huge impacts because the amount of traffic you get in Google search results is a power law. Moving from first to second can be a dramatic, maybe even doubling of the amount of traffic you get first to second to third. And it's also it's not just growing your traffic, it's actually stealing it from your competitors.
So you're actually helping yourself and hurting your competition because in all likelihood, the person you were competing with was. A competitor of yours. So they're going down, you are going up. There's only 10 links on the page. It's zero sum. So it's, that's the reason why it's so competitively important.
So Google, there can only be one. There can only be one. Yes. Cut is not just making a high Highlander joke. Yeah. Highlander joke I remember Highlander I never saw the movie, but I always saw the TV show. It was always on right after MacGyver for some reason on the channel I used to watch.
But anyways so Google had these three metrics they used, and they've told us in the past when they rolled these three out that they would change these metrics as the web evolved in the future. But they would give us plenty of warning to do it, that they were doing it. And so they announced that starting next year.
So they're giving us a basically 11 months, it'll be March of 2024. They will. Replace first input, delay with this other metric called interaction to next paint. And I think, or how did I say this first? Input delay I thought was a terrible metric. If your job was to measure user experience, I think I n p will be a better metric.
What was terrible about it? Oh I'll lemme explain it first, but I think people are going to be, so can you expand on that? Yeah. I'm, I think people are gonna be surprised on how poorly they do on i n p. So the problem with first input delay is it's got a lot of problems, but the biggest problem is it only measures the first interaction.
So the very first time you click is all it looks at, and then after that it's done. And there's a lot of variability in that data. So take for example, a page that. Takes a long time to show any content for you to click on until all the JavaScript has loaded. Then the user isn't going to tap on the page till there's something to tap on.
So you could actually, give yourself plenty of time, like a loading screen that's just a spinner that tells the user to wait. It would actually potentially get a better first input delay because from the user experience, the actual appearance of the ui, you can condition when the user clicks.
Now, on the flip side, imagine an experience that aggressively shows the user as much as possible, the ui, but maybe the JavaScript haven't loaded yet and there's an open question, which is better. But in that situation, if they click on something and the JavaScript for that piece hasn't loaded yet, then.
If they happen to click too early and the JavaScript for that widget they're looking for hasn't yet loaded, then you're gonna have a long first input delay. Cause it's suddenly waiting for all that JavaScript to respond. And it also doesn't measure how long it takes for you to update. It only measures how long it takes for the handler to run.
And so there's a lot of ways that first input to light doesn't really capture what you're trying to go for, which is how responsive is the page to user input. It only looks at the very first input and then stops. It's very conditional by, the vague of when somebody ha happens to make that first click.
So in practice, what ended up happening is not that first input. Delay was a hard metric to optimize for. And I think their goal was to capture, websites that had a lot of JavaScript that was running. It turned out in a lot of websites, even if you had a lot of JavaScript it didn't penalize you that much.
So I can tell you from, our experience, most sites. Those, they would struggle more with LCP and c ls than they with fi. Broadly, if you looked at the statistics, FID was like, at least in e-commerce, retail and some of the other verticals we planned was typically one of the easier, the ones you all actually didn't have to worry as much about.
So it was a sometimes highly variable and and sometimes generous metric. The other problem it has that I n p also doesn't solve is there's no good, I don't wanna say there's no good, it's harder to measure in a lab setting. So what do I mean by that? So the measurement is based on actual users talking to your website.
If you're a developer sitting down to optimize this metric you have to simulate those clicks on your page and you don't know when users are actually clicking. So in the lab you have to use heuristics to try and figure out, okay, when are users clicking? And you can use things like total blocking time and other things like the size of the JavaScript, but they may not be directly correlative to, to, to your, what your FID metric is.
I've seen it not line up. Like famously people get lighthouse scores that are poor, but I've seen, poor lighthouse scores get equivalent core vital scores. And there's a lot of potential other reasons for that. So that was the problem with Finn. Did that make sense before I move on to Interaction Next Pain?
Yeah. Plenty. It's like whatever someone explains like yeah.
This is the problem with performance. It's unless it's somebody's job, there isn't always somebody it becomes like the tragedy, the commons. You have to sit there and be constantly thinking about it from a performance angle. Sometimes it's like any other kind of optimization and it can be very easy to forget or, accidentally introduce something that sets it back.
So introduction to next page. To be frank, I haven't spent much time actually optimizing for I N P because it was a new metric and I knew they'd give us a lot of time. Yeah. So how long has it been around you now? Yeah, it's been around for about a year maybe a little bit more than that. They started talking about it in maybe 18 months ago.
I should go and double check. Certainly about a year ago they started talking about it. And was your sense that when they were talking about it, that it was going to replace this or was it more here's a new thing or you see how it goes and then decide? Both. So when they first started talking about it, They, it was very clear like this is a potential candidate, like anybody who could read between the tea leaves, they're floating this as a potential candidate metric.
And I think very shortly after they first mentioned it, they're like, we're considering it as a candidate metric. So they started including it in results in like lighthouse and page speed insights I believe before this announcement. So it just evidence just kept building and building before they finally said it's going to be candid metric.
They put it in, lots of different tools. They added it to the web vitals library the signs were all there. And anytime they talk about a metric, it's oh yeah, this is what they're thinking will improve is a possible change to core vitals. I mean to, as another example is cumulative layout shift.
I was one of the folks that was critical of the original specification for cumulative layout shift because the way they tracked cumulative layout shift was it measured how many layout shifts happen across the entire lifetime of the page. So if you are a single page application where it's a very long lived life cycle for that single page, and you have maybe a small layout shift every, couple interactions, you're gonna get penalized more than a website where a user has maybe the equivalent or more layout shifts in their whole session.
But because they broke it up across separate page boundaries, it actually appeared to be lower cumulative layout chip, even though the single page app from a, layout chip perspective probably was a better experience. And, we weren't the only ones complaining about this.
And the team the Google CR Chrome team was very, receptive. And then they floated a change. They went through a very developed and public process where they said, here's how we're proposing to fix it. They actually laid out three or four different proposals and then asked people for feedback, which are the modifications that, people most like.
So they're doing the same thing with i n p. They're, this is really big financial ramifications as we talked about earlier. So they're being very careful with at least the performance community and being like, here are the changes we expect to have that are coming before they make it official.
And I applaud them for doing that. It's really involving the community in a way, at least for those who are really paying attention to it. So yes, that's my long answer to the question. They both telegraphed it and then officially. We're very clear and said, Hey, this is now gonna be likely to be a candidate metric.
And the way i n p works is rather than just looking at the first input, they look at all the inputs across the lifecycle of the page. And then they'll take, depending on the link of the session, they'll take the, a percentile approach. Something like, we'll take the 98th or 99th largest percentile of the largest interaction.
So they'll throw out the outliers if the session is long enough. And they measure the full-time of the first input delay as far as, I'm just simply looked at how long the handler ran, but interaction to next paint name says interaction to next paint. So it's from the time the user interacted with the page till the time the paint happens.
And that's really important. And to simplify it, in a browser when you. When you click on it, there's a couple things that happens. First, the JavaScript runs, so that's the handler, and that JavaScript is going to, make some dom changes, say, or some other changes, and it's basically asking the browser to do it.
But the browser then has to go through a, render and paint cycle to actually make those changes happen on the screen. And Im p measures all the way through that full life cycle. So if your handler is really short, but actually ask for something that was really aggressive, then you'll get penalized Vice versa if you run for a long time.
But it's a small dom change, you still also get penalized. So it's, everything's getting measured in your interaction. So you really need to think holistically, end to end, to the work you're doing to when it gets painted. So I think that's improvement and I highly recommend the Google IO talk. I think you link to it in the newsletter on how to optimize web responsiveness with interaction to next paint.
Because I think it was a really good example. They decided to not use vanilla js and they decided to use React. And they used a very simple auto complete example where, as you're typing, how long does it take for something to appear and what are the right ways to solve any work through a bunch of examples in using suspense and then debouncing and then actually aborting the autocomplete in order to properly, not take up too much time when users are interacting.
So as you're typing into the autocomplete, being sure those search results update responsibly, but it, you're not waiting for the auto complete results. To show before you actually update the keyboard input to show the text field that you're searching in so that the autocomplete doesn't feel like clunky.
It's a really I'm not really giving you justice, I think, but it's a really good concrete example of, especially for folks using React on how to think about i p So let me pause. I've been talking for a while. See what if that makes sense. Oh, we've got Andre here. Yeah, I was gonna say if Andre wanted to, I'm trying, I'm grabbing the link to the video and posting it.
Performance level. Yeah, exactly. Performance. You guys just saw him at remix, I think speaking on performance. Yeah. I would love to get his thoughts on I p he might be on the web version, in which case he can't come up. But under feel free to hand and bring up to stage. Be curious your take. Somebody also in this space that definitely caught my eye in the newsletter.
Also before, because, it's performance is my original background. And they had telegraphed that this was coming. In fact, one of my coworkers said, IMP is now officially a metric. And I'm like, oh, really? I thought they were gonna, that was ery, was gonna, and I was like, I expected them to wait to Google IO to announce it.
And he's Google IO is today. And I'm like, oh man. I was so focused on what we were doing with three. I totally, I had someone thought it was like a week later. So this wasn't, I don't think that big of a surprise that they did this, but it was it's certainly, I think a good thing coming. Did you hear other, yeah.
Good. Did you hear other news from Google io at all? I think there was the broad headline news obviously about how. They're, what they're doing with ai. That took up the beginning of the keynote. I haven't yet, as I mentioned earlier, gone through the developer keynote or all the web talks.
There's a really good one they have. It's like web wrap up and she goes through all their announcements that they had for the web. And I saw there was stuff, angular adopting signals and a few others. But obviously the performance one caught most of my attention. I'm actually pulling up the page right now and then going, and I'm filtering on web to see what else jumps out.
Yeah, there's the rethinking reactivity with signals. There's another talk on optimizing core vitals, the nine most effective core vitals optimizations for 2023. There's a talk on advanced APIs that I have meaning to watch, but I haven't yet watched about project Fugo and better access to hardware.
It's always great and interesting to see, people really extending the web platform the thing that might get buried, but I think is really huge. And it will sneak up on all of us if you're not paying attention to it though. And they mention this in the wrap up and they mention it in some talks that I have not yet watched.
There's one like preparing for the end of third party cookies, the privacy moves that they're doing like ending support for third party cookies like that is on the horizon. And if you're like an old curmudgeony developer, you may not realize that trend is coming and is happening sooner than you might think.
They're deprecating some of the information you used to get out the user agent. All sorts of data like that is. It seems like the trend is on its way out. And so that's definitely something to pay attention to. And it's like a feature going away and I think old time developers might get caught off guard and if your app depends on these, whether it's for AB testing or retargeting or things like that you may not even realize it honestly, depending on the tools and products you use, especially in the Jams stack, rule stitch tools together.
And obviously your vendors are going to, be on top of this cuz it critical to them working. But I think that's one that'll sneak up on people. And also still remains to be seen how it gets fleshed out because the attempts like fledge and flock have stalled as alternatives to cookies.
And it's not clear what's on the horizon there. Fledge and flock. Yes. So this what? Yeah, so this was an attempt to replace cookies with AI generated cohorts. Where they would, so right, as an advertiser, you don't want everyone's data, right? As a third party adver, like you want, say, I'm trying to get you to buy, I don't know, socks, socks with whimsical marvel superheroes, Avengers on them. So I want like people who are interested in comic books and happen to watch those movies or searched for, Ironman cosplay outfit, like we were talking about earlier. But I don't need to know everything else.
They searched. So if you could just give me the cohort that represents that in theory I should, I'd be happier. You can't predict what all those cohorts are. Now, I don't know the full details of how fledge and flock work, but it was this idea that the browser would federate, it's called federated learning of cohorts would actually figure out what these cohorts are and you could target the cohorts as a proxy for targeting the users directly based on their data.
But. And I might be, not doing this justice and mixing things up, but basically I think a lot of advertising platforms felt like it gave too much power to the browser and cut a lot of players outta the industry. And so it stalled. And so it still remains to be seen what the right solution.
So it's in some ways really scary. There's a attempt to get more privacy, which makes sense, but like, how do we still keep the economy of the internet going and what the alternative is? I don't think it's fully arrived yet. And so it's gonna be an interesting, scary new world in some sense.
I mean I'm, I think the further we get away from the internet being funded by companies mining highly specific personal data to sell us things, the more we can get away from that, the better personally. I think that is still gonna be hard because subscription models, I think it can work for a lot of things.
Not necessarily all things. So I dunno. Yeah, it's gonna be interesting to see where it goes. So I like the idea of privacy. I like you being able to control your privacy where all disagree is, I think there is value there and it sounds bad when you're like mining everything we do. Highly personal, but like when you, there's value there, but it needs to be optin.
It needs to be optin. And there needs to be an alternative. You don't wanna do that. Yes, exactly. But, discovery and automation, like how do you find out about things that would be useful to you, whether they're services to buy or my favorite example is like Alexa by searching for it.
I'll give you an example. So my favorite example is Alexa. There's a huge amount of potential in these assistance, especially now with, the powers of large language models. But what I really want is a future where, I'm like talking to my spouse and I'm like, oh, we're out of paper towels and I don't have to say that, Hey Alexa, add paper towels to the groceries list.
It'll just say the next, this is possible, but you need to run the model on your own personal data that's on your machine. And that's something that's gonna be hard. Exactly. We, the needs to be done in a privacy preserving way. Apple I think was really out ahead on this about how we can do privacy preserving ai.
So let me just, so I guess I'm, my point is I think we're aligned here. We just express it differently. It needs to be it's a question of how is it going to even be possible to do it on your own machine? Have that be available. Cause most of the companies that are making all this profit off of user data, they don't want to make it possible for you to do it on your own machine and keep your data private.
I don't know if I would ascribe that intent. I think it varies by company and like there's certain advertisers. It does. Yes. Who they just doesn't want Exactly. But Google does. They do on behalf of the large audience of people of advertisers they need to advertise to who each individually does not think they're going for that niche of a thing.
But if you're like trying to find people who want to, you know what was Ironman cosplay outfit, right? I don't know. Flock will. Come up with that. It may not be like, think of how much the ability to find your small cohort of people who are similar to you on the internet. That wasn't possible in the past because we didn't have, it's a flip side, several sort.
We've got greater fragmentation now. But it also means, people can find each other who are, who have similar interests. We're way off JavaScript topic, but we can, the point is, the trend is definitely towards greater privacy. And we need, and it's not clear what, what's gonna replace that.
And so that could catch up on, on people. The other thing that I was gonna say that I thought was an interesting development is they have this new thing that they came out called Baseline. And as a web developer, it's basically the list of, it's like that can I use, but it's like they. They short circuit it for you and just be like, okay, yes.
Here are the things you can rely on because they're in most of the browsers, they've done that, they've done the work you do. When you go to, can I use and be like, okay, can I use this? Which of the browsers that support it? Do these ones matter or not? It's just the baseline. These are the, and it's the signal you can use as a developer, like when you can reliably start using it.
And hopefully, I think it'll help justify when folks can, use new APIs or not. There's a lot of these that are in browsers and people don't realize. One which I expected more talk about was web push. Because web push is now in iOS and I don't think I saw anything about that, but it's another example of a web api, advanced API that you know now is more cross platform than people realize.
So those are the ones that jumped out at me. I'm actually scrolling through it right now, see if there's anything else. Pasky also got a lot of attention but that was it. I dunno if there's anything else. If you're looking at the program right now that jumps out at you. The, so the other thing I highlight in the newsletter was more performance debugging tools.
Oh, yes. For the crow. The, there's like an extension. They have. I've never used this extension, so I don't really have a ton of context on this, but it seemed like it was a big deal. I have not used it yet. But yeah, the, this is something I should have talked about earlier. If you were trying to debug things like interaction to next paint in the past, like Lighthouse only measured, for example first load.
And slowly over the year, this is another over the last 24 months they've been, and I was critical of this for years, that people focused on Lighthouse and only first load. They've been basically not only enhancing the performance tooling, but they've actually started, he making it better at diagnosing problems in performance during the life cycle of the whole page and not just on first load and things that happen later.
So you can now, automate a script and have lighthouse say, okay, during this part of the session when the user does this and you can test against that. And so I just say in general, they keep, improving the tooling to handle these new metrics and that's really useful. There was the react visualizer as well that you had in the newsletter that I thought was really cool and I wanted to try out.
I thought that was really interesting, especially for React developers. I know when I was first getting into React, just like when your code actually runs in the life cycle, this is like. It does all the console lock statements for you. Which was, which is really useful.
Yeah, that one was cool. It for people who haven't seen it, it basically helps you trace through how your, render rendering is happening in React. So when you have components they'll mount and they'll render and then they'll like, they'll do this kinda whole dance. It's the React life cycle.
And so this is a library that basically creates like a UI that shows you each step it goes through.
Yeah. This is something that confused the crap out of me when I was a bootcamp student and learning about React, especially cause it used to be more explicit Back when you were writing class components. You'd have like component did mount and all that kinda stuff. And now I feel like the life cycle kinda happens underneath and people learn like how to use the hooks and then may not necessarily think about or even know that's happening.
But then when they hit edge cases and where bugs come up, then they're like, wait, what is happening? Yeah. No I think they, they take it for granted that they don't realize things are happening. And it's not until you get really deep that you trip over it. I think it's more useful now than ever with hooks because I feel like hooks sometimes obscure these things.
A great example actually is this talk that you linked to that we mentioned interaction to Next Pain, optimizing it. He goes through and one of the things he does is he has a hook. And the hook, he's trying to de he's playing the part of a developers and he is going through and, it's an auto complete.
And he's tried to fix everything. And what's actually happening is the reason his interaction to next pain is so poor is because when you click the third character, the handler for the second character was still running and that's what was delaying you. So you might think, oh, why when I hit the third characters, it's still taking so long, it's because the second character, you cued that workup and only now did it come and hit you.
And I think this is exactly like correlation, like hooks I have to say, do tend to hide that type of complexity. And you don't, if you don't have a strong mental model of when they run. And look, I've even been there where it's like I have to do console log, figure out when something is running.
So this is a great it's a great I think it's gonna help people in debugging and getting their hands on react. I think it should be part of every beginner course to illustrate how to use hooks. Cool. Glad I included it. Awesome. Sweet. Thank y'all so much for the amazing conversation. Thank y'all for listening to the audience. We love it when y'all join us for our JavaScript Jam Live on Wednesdays at 12:00 PM Pacific Standard time as always. So don't forget to join us for next week.
We're gonna be having hopefully, I believe, a Speaker Forum render atl. And we'll definitely be having the following week we'll be at render atl. What's up, Alexis? And see the heart there. I believe. Alexis is gonna render as well, so that'll be cool if y'all are going. Yeah, so excited for that.
It's always an amazing time, so yes. Don't forget to get your ticket to render retail. If you haven't, there's gonna be about 2000 other web developers and just well, developers in general out there. So yeah, don't wanna miss that out on actually, real quick, Monica just hopped in. She's one of the speakers.
We'll be there. Oh, hey Monica. What's up? So excited. We were just actually talking for about 30 minutes or so in the beginning about render ATL and the topics at hand. Yeah, if you wanna come up and share a bit, feel free we'd love to hear from you. We can click. I know it's don't worry.
We gotta render guest super casual minute last second here. Welcome, what's
excited everyone. And also speaker. That's so cool. Whatcha gonna be talking about? Yeah, that's what I was gonna talking about creative coding. So kinda a little bit different than what I do in my day to day. So I focus on like just a bunch of like react, but I wanna have fun at and talk about how you can build stuff with code that's like more for fun or for whatever.
Just not like specifically like I have to build something useful or whatnot.
Very cool. So what, like generating like more like artwork kind of stuff? Yes. So using like P five js and canvas APIs to create art.
Super sweet. Yeah, that sounds very interesting. And Yeah. What kinda what was that library you said? So there's P five js, it's part of the processing foundation, so processing, they have processing, which is Java based. And then there's P five Gs, which is a JavaScript version of like the processing library.
And they have some other versions as well. But it's just a, like a, like visual API to quickly get up and running with putting things into a canvas. And then they also have some extensions where you can play around with audio API or like webcam input and stuff like that.
Very cool. And you spoke at Remix Comp as well. Did you want, was that a similar talk or did you do a different talk about that? Sorry, remix. I did a different talk. So I was talking about MDX and how you can use MDX to make your markdown content more accessible. So MDX is a way where you can write or import react components into markdown.
Super helpful for documentation if you wanna have like interactive examples for folks. And if you all are familiar with the new React docs, they use a lot of MDX on there for the interactive like playgrounds and different checkpoints on within the documentation to gauge like understanding and help reinforce concepts.
So I did to talk about like how you can use that in remix and a little bit more about the whole MDX ecosystem and if you wanted to create custom. To transform your MDX content into a different format or whatnot. Just like kinda diving into that. I feel like there's a lot that goes into mdx definitely something I wanna talk about more in the future.
And I spoke at like the first MDX comp, so I've been using it for a little while. Wow, that's super cool. Yeah, I was at Remix Comp. I didn't catch a lot of the talks, but I'm gonna watch the recording for this one because I avoided MDX for a long time and partly just because I found really hard to configure and when I was using it until Astros MDX integration, I found like really nice and that's what I'm using now for my blog.
So I don't really bring in react components too much. Basically I'm just for the part writing straight markdown, but all of my blog is written with mdx. Files and I'm always big on trying to make my stuff as accessible as possible. So this is a really relevant topic to me.
Very cool. Yeah, I feel like I was looking into there's a lot of like tools within the MDX ecosystem, but like terms of like models of how to put everything together. I think there's definitely like some lacking. And I used to use like MDX slides and it seems like now, like there's no version that's super well maintained.
So that's something I might look into once I have some more time. But I definitely MDX fly. Is that what you saying? I think there's like MDX deck and then there was like a next to JS version of MDX deck, so you can create a presentation with mdx. Interesting. But the versions I saw and that I used to use, they don't seem to be like very maintained.
Like they're a few versions behind in terms of like next and node and all these things. So not super great. Yeah, exactly. That's why, that's one of the reasons why I would avoid stuff like md. Yeah. It's just a huge kinda mess. Yeah. So I'm hoping it gets easier for folks. It's like a great tool, but I definitely can understand where you're coming from in terms of the ecosystem.
It's a little bit of have to get your hands ready to find, to get a, like a good solution going. Totally. Yeah. That is shoe to a certain excited just for markdown at all. Markdown is like the ultimate, created through evolution of many people over many years and many different forms and many different libraries.
Markdown a fascinating thing.
Was there anything else you were excited about for render?
Is that for me specifically or sorry. Yeah, absolutely. You only guess up here right now. Yeah. Yeah, no, I think I'm just like super excited about all of the different speakers who are gonna be there in terms of, there's a lot of folks who haven't the opportunity to hear them speak. And obviously I'm not gonna everyone speak, there's a of speakers.
But I'm excited to have the opportunity and also just the opportunity to connect with the larger tech community. Cause every year I'm like, I see renders happening and it seems like this like super awesome event. Yeah. That brings together people from all different parts of tech.
So I am like super excited about that and can't remember the last time I went tol. So also just like excited to, to go someplace. I haven't been in a while. But yeah, it seems super exciting. I can't believe it's almost like it's only two weeks away, so it's right around the corner. It's coming quick For sure.
I'm excited for it too. Yeah. Thank you so much for sharing that. Holy cow oh man, it's popping. I went last year and yeah, you got something to be looking forward to and excited about. That's for sure. There is never a dull moment at render atl. I promise. It's good. The food, the events after events, the after events, the everything.
It's good. The drip is all good. Like for real? Oh man, I can't wait. Yes, 100 is right for sure. Monica, by the way. And I think just kinda this out there to the audience. You haven't heard this before, but we be there. JavaScript Jam, Anthony and I, we will be there. We'll be around mingling with everybody.
So feel free to come say hi to us. And we're gonna be doing a live Twitter space while we're there, just like this, right? It'll be on Wednesday, so that's actually workshop day. So there will be more, there will be speakers there. And then I feel like there'll be a lot more availability to join us during our JavaScript GM Live on Wednesday the 31st.
I believe it's Monica, we would love to have you, if you are wanting to entertain that. I know we're gonna be having James q quick on with us on the 31st as well while we're there live at the event. So just to give, some input of what's been happening at the event so far, and what you're enjoying and just the scenery, everything, kinda bringing people, bringing the event to people through spaces.
Would love to have you, Monica, join us if you wanna, it'd be 12:00 PM Pacific Standard Time. So what is that, like three eastern while we're there? So yeah, that'll be cool.
Okay. Yeah, no, I'll definitely be in touch and let you know. Cause I know I'm traveling that day, so I may be not in a good spot to word hop into the space, but I definitely will be interested if I'm stationary. Understood. Yeah. Awesome. Thank you so much. Appreciate and we're excited for your your talk, so that'll be really cool.
Everybody, if you're gonna render atl, check out Monica and her talk. Let's see. I'm looking at the schedule, but you probably know off the top of your head, maybe don't, but do you know when you're talk what day? Sometime. What's the first day? Thursday? Yeah, it's on the first. Yeah. Yeah. So on that first day, I think in that sometime in the afternoon.
Yeah. Okay, cool. So yeah, in the afternoons if you go over to the jumbotron here in the spaces, that's what we call it, the jumbotron. If you scroll up and then scroll to the right you can see all the different posts we got up there. You can see or to the left, maybe in your case if you haven't seen 'em all render atl.com/speaker topics.
If you click on that, that'll take you to all the speakers, their topics and all that good stuff. So you can kinda see like the schedule ish, I believe that is highlighted in that. Be sure to check it out and take a note of the ones you wanna check out, including Monica. Of course. Awesome.
Sweet. We probably close that unless there's anything else you wanted to about Monica or places you Yeah.
Where can they find you? Monica? Click your Twitter face and follow you right now. Yes. There you go. Oh, sorry, I got stuck like clicking on that speaker conference link. Yeah, you can find me like here on Twitter, my website, Monica on blue. Monica. That's all about the best places to find me and then if we wanna see like my GitHub or anything that's on link to on my website on links, monica.dev.
I do have a link to like my mbx talk as well as the like actual like remix mdx like demo site if folks are interested in learning a little bit more about mdx. And then I think also on links, Monica, I have. An example of a blue sky P five Js bot that I created. So if folks are on blue sky or like interested in like just getting a, like a sneak peek of P five that's something that I have to on my on my site.
Okay, cool. Awesome. Thank you so much. Thank you. Monica has a lot of value out there for all y'all, so be sure to follow her, obviously, right? Yeah, check out her talk from remix as well which is linked in her step. So be sure to do the hope. Yeah, if you got value from anybody up here on stage today, feel free to click on their face, click follow, because if you got value from them here, you're gonna get value from them in other places.
This is how it works. Y'all. Obviously JavaScript Jam would love your follow if you. We have these talks every Wednesday, 12:00 PM six standard time. Join us next week. We're gonna have hopefully a speaker from render a TL with us and then the week following, like I said before, we're gonna be at render.
So if you're not there, you're squared. But hey, you know what? You're gonna be there, aren't you? Yeah. Get your ticket. It's gonna be fun. We love y'all. Thank you so much for everybody here. Appreciate you. We'll see you in the next one. On the next one.
Y'all love you.
