RenderATL and New Core Web Vitals
JSJam covers RenderATL, new web performance metrics, AI, creative coding, and the evolving JavaScript ecosystem
Episode Description
JavaScript Jam previews Render ATL conference talks, breaks down Google's Core Web Vitals changes, and chats with a speaker about creative coding and MDX.
Episode Summary
This JavaScript Jam Live episode opens with the hosts promoting the upcoming Render ATL conference, highlighting its growth to around 2,000 attendees and previewing notable speakers like Evan Yu, Chris Coyer, and James Q. Quick. The conversation shifts to examining the conference schedule, where AI-themed talks, Web3's diminishing presence, and career-focused sessions stand out as trends. The bulk of the episode centers on Google I/O announcements, particularly the replacement of First Input Delay with Interaction to Next Paint as a Core Web Vital starting in 2024. Ishan Anand explains why FID was a flawed metric—it only measured the first user interaction and could be gamed—while INP captures all interactions across a page's lifecycle and measures through the full paint cycle, making it a more honest gauge of responsiveness. The discussion extends to Google's privacy initiatives around deprecating third-party cookies and the stalled Fledge/FLoC alternatives, sparking a debate about balancing advertising economics with user privacy. The episode wraps with a surprise appearance from speaker Marigel (Monica), who shares details about her Render ATL talk on creative coding with P5.js and her Remix Conf talk on using MDX for accessible documentation.
Chapters
00:00:00 - Introduction and Render ATL Preview
The hosts welcome listeners to JavaScript Jam Live and outline the show's open format, encouraging audience participation regardless of experience level. Scott reflects on attending Render ATL the previous year and notes the conference has nearly doubled in size, now approaching 2,000 attendees.
The team discusses upcoming content plans around Render, including interviews with James Q. Quick and Chris Coyer, as well as live podcasting from the conference floor. They encourage listeners to subscribe to the JavaScript Jam newsletter and highlight that in-person recordings tend to produce some of their best episodes due to the energy of face-to-face interaction.
00:08:25 - Exploring the Render ATL Speaker Lineup
Ishan walks through the conference schedule, calling out Evan Yu's talk on thinking across framework barriers and Lori Voss's data-driven state-of-web-development presentation. This leads to a tangent about the challenges of surveying the Jamstack ecosystem through the Web Almanac, since static site generators like Hugo and Eleventy leave no detectable server-side footprint.
Anthony highlights several AI-themed talks on the schedule, including sessions on AI in React, generative AI foundations, and testing AI systems. The hosts note the emergence of AI as a recurring conference theme while observing that Web3 content has diminished, likely due to the crypto market downturn and the FTX fallout shifting public perception of the space.
00:16:49 - Framework Talks, Career Content, and Conference Culture
The conversation turns to Evan Yu's unique perspective as someone who built Vue without major corporate backing and also created the widely adopted Vite build tool. Anthony flags the CodeSandbox talk as an intriguing deep dive into the challenges of building a browser-based editor over many years.
Ishan notes that Render ATL distinguishes itself with substantial career, leadership, and entrepreneurship content alongside technical talks. Scott adds that these broader topics also help attract conference sponsors. The hosts discuss the conference's social events, themed days including cosplay and jersey day, and the networking opportunities that extend well beyond the formal sessions.
00:28:39 - Google I/O and the Core Web Vitals Shakeup
The discussion pivots to the JavaScript Jam newsletter, focusing on Google I/O announcements. Ishan provides a thorough breakdown of Core Web Vitals—Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift—explaining how these metrics influence search rankings and can meaningfully shift traffic between competing sites.
Ishan details why First Input Delay was a poor metric: it only captured the very first interaction, could be inadvertently gamed by delaying UI rendering, and didn't measure through to the paint cycle. He explains that most e-commerce sites found FID relatively easy to pass, making it less useful as a differentiator compared to LCP and CLS.
00:39:11 - Interaction to Next Paint Deep Dive
Ishan explains how Interaction to Next Paint improves on FID by measuring all user interactions across a page's full lifecycle rather than just the first click. INP uses a percentile-based approach, throwing out outliers in longer sessions, and critically measures from the moment of interaction all the way through the browser's render and paint cycle.
The hosts discuss a recommended Google I/O talk that demonstrates INP optimization using a React autocomplete example, showing how debouncing, suspense, and aborting stale requests can improve responsiveness. They touch on how React hooks can obscure the timing of when handlers execute, making tools like the React lifecycle visualizer especially valuable for debugging performance issues.
00:47:15 - Google I/O Broader Announcements and Privacy Changes
Anthony asks about other Google I/O news, and Ishan highlights the deprecation of third-party cookies as a potentially disruptive change that could catch developers off guard, particularly those relying on AB testing or retargeting. He explains the stalled Fledge and FLoC proposals, which attempted to replace cookie-based targeting with browser-generated cohorts but faced pushback from the advertising industry.
The conversation evolves into a broader debate about privacy versus the economics of the ad-supported internet. Anthony argues for opt-in data collection, while Ishan acknowledges the discovery value that targeted advertising provides. They also touch on Google's new Baseline initiative for tracking cross-browser API support, web push arriving on iOS, and improved Chrome performance debugging tools.
01:01:13 - Guest Appearance: Monica on Creative Coding and MDX
Speaker Marigel (Monica) joins the space and shares her excitement about attending Render ATL for the first time. She describes her upcoming talk on creative coding using P5.js and the Canvas API, a departure from her day-to-day React work that focuses on building things purely for fun and artistic expression.
Monica also recaps her Remix Conf talk on using MDX to create more accessible markdown documentation, referencing the new React docs as a strong example of interactive MDX usage. The hosts discuss the MDX ecosystem's configuration challenges and the lack of well-maintained slide deck tools, before wrapping with details on where to find Monica online and reminders about the upcoming live episodes from Render ATL.
Transcript
00:00:00 - Scott Steinlage
Hello, hello. Can y'all hear me okay? I think so. Welcome, welcome to JavaScript Jam Live. Invite Anthony up here. There we go. All right, Jason. What's up, man? Welcome to the room.
00:00:36 - Anthony Campolo
Yo, yo.
00:00:36 - Scott Steinlage
All right. Welcome to JavaScript Jam Live. We do this every Wednesday, 12 p.m. Pacific Standard Time. This is where we talk about everything JavaScript- and web-development-related. If you are a beginner or if you're an advanced user, developer, creator, it doesn't matter. We want to 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 want to 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 going to be talking about Render a little bit. Render ATL, if y'all haven't heard. Last year I got to attend, which was awesome. One of the best conferences I've been to, for sure. It's up there at the top. It was really good. I mean, 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.
00:02:32 - Scott Steinlage
Last year I think they were expecting under a thousand. I think they had just over a thousand show up. This year I believe they're making their way up to 2,000 or are at 2,000 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 to be there, I'm sure. So with that being said, thank you all so much for joining us. I'm going to 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 that, talk about some of those topics, because that's what we love to do. By the way, if you're not on our newsletter yet, it's very easy to sign up. All you got to do is go to JavaScriptJam.com. JavaScriptJam.
00:03:51 - Scott Steinlage
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 and the JavaScript world. We're in it every day, folks, just to give that information to y'all.
00:04:08 - Marigel
[unclear].
00:04:09 - Scott Steinlage
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 want to miss out. Check it out. All right, intros. My name is Scott Steinlage, and I am the technical community manager at Edgio and one of the co-hosts here at JavaScript Jam. Anthony or Ishan, would you like to.
00:04:32 - Anthony Campolo
Hello, I am Anthony Campolo. I'm a developer advocate at Edgio.
00:04:37 - Ishan Anand
And I am Ishan Anand. 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. Couldn't find them. They fell off on the desk. So if I'm a little out of breath, that's why. 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, you know, again, hats off to Anthony. He does a great job. I used to do them, and I'm so much happier Anthony's doing them now. They're 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.
00:05:40 - Scott Steinlage
Awesome. Yep. So next week we're going to have an awesome guest on. It's going to be a great time. And the week following is Render itself, right? So we will be there. Is that the week following?
00:05:57 - Anthony Campolo
Yeah, that'll be the 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, and there'll be even more coming at you, most likely.
00:06:17 - Ishan Anand
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 what is a great conference, as Scott was talking about. But if you can't, definitely tune in here. We're gonna have interviews with the speakers in 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 of the conference itself from some guests.
00:06:49 - Scott Steinlage
Absolutely, yeah, out of being there. Yep. We love doing those in-person recordings, actually. It's just so much fun. It really makes a difference 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 can really hear it in the recordings. I mean, some of the best recordings we do are in person. So yeah, if you'll be there and you want to hang out with us, hit us up and come say hi. Anthony and I will both be there, and you can join in on the fun as well. Like Ishan said, we are going live while we're there. That's just this thing we've been doing now at every event we go to. We try to go live, and we have successfully done that and are going to continue doing that. So be sure to join us on that live because we're going to have some of the speakers from the event on the live with us to really dig into some cool behind-the-scenes stuff and answer questions and just kind of hang out and chat with everybody.
00:08:01 - Scott Steinlage
Just like you're at the event there and don't have to wait in line to talk to them. You can just kind of come up on stage and chat it up. So be sure to join us. That would be on the 31st. Yeah, the 31st. We'll be doing that. James Q. Quick will be here with us. That'll be one of the people, and we will have several others. So looking forward to it. Awesome.
00:08:25 - Ishan Anand
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 want to see what the actual schedule is, 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.
00:08:55 - Scott Steinlage
I'll link it here.
00:08:55 - Ishan Anand
Yeah, that's a great idea. 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. Quick, who we talked about, who we're going to be talking with. Chris Coyer, who we'll 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, Anthony, you looked 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 the stage.
00:09:57 - Anthony Campolo
Yeah, I need to actually get to that page and look at it, because I'm glad you said this because I wasn't able to find it last time I tried to do this.
00:10:07 - Ishan Anand
So search, do a control-F, right, and search for topics, and there's a button that says check out our speaker topics.
00:10:15 - Anthony Campolo
There we go.
00:10:16 - Scott Steinlage
Okay. Yeah, cool. I'm trying to put it in.
00:10:18 - Anthony Campolo
Okay, let's see. Web Development 2023, What the Data Says. Yeah, Lori Voss has given similar talks like that in the past. I always enjoy those.
00:10:29 - Ishan Anand
Yeah, that's a really good callout. Just for the audience to contextualize, Lori does a lot of data analysis, and at the Jamstack conference looks at what frameworks are the most popular, what are the most popular tools. Definitely somebody to listen to. I think Lori also contributed to the Web Almanac, if I remember correctly, for the Jamstack section. I have a little beef with how they did it this year, but regardless.
00:11:03 - Anthony Campolo
What was your criticism of it?
00:11:07 - Ishan Anand
I would say that, to summarize, I felt like the technical criteria they were using to survey the web for the size of the Jamstack ecosystem only looked... Basically they were finding fast sites and saying they're Jamstack. The challenge you have with Jamstack, depending on how you define it, is you can't tell from the outside whether a site was Jamstack or not. If, say, they're using Hugo or they're using Eleventy with no JavaScript, there's no server response header, there's nothing that would necessarily indicate it. Maybe some of these tools sometimes, like Astro, embed some basic framework JavaScript. But if you're on Hugo or Eleventy, where there's literally no bleed-in, you have no idea if it was just created with Spring MVC on Java or it was created with Eleventy. And so it becomes really hard to survey the market and say these sites are Jamstack. The way the Web Almanac works is they just basically crawl the web and look for data points. So I want to acknowledge it's a real challenge to say these sites are Jamstack. In previous years, they would talk about Gatsby versus React and it was very framework-centric.
00:12:21 - Ishan Anand
But that leaves out Eleventy. It leaves out Hugo. It leaves out some of the granddaddies of the Jamstack era. And so what they did is they came up with another set of criteria or heuristics to see whether a site was Jamstack or not. But that inherently is a heuristic, so it means it's not completely accurate. And so I don't, to be fair, have 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, like, 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.
00:13:06 - Anthony Campolo
Interesting. Yeah, I feel like that's one of those things. Until you have a better solution, it's just like, 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 sweet data points.
00:13:24 - Ishan Anand
That sounds like ChatGPT. Well, I think I interrupted you. What were the other talks that jumped out at you?
00:13:36 - Anthony Campolo
I mean, there's some AI stuff that I'll probably be curious about. I guess AI in React by Gant Laborde. I'll be curious to see what that's like. It doesn't give a lot of information in the description of the talk. So it's like, are you generating a React app with AI, or are you running a React app that queries an AI API? Either of those I would find interesting.
00:14:02 - Ishan Anand
Yeah, actually that was the thing I control-F'ed on, was how many talks have AI in them.
00:14:09 - Anthony Campolo
So like four or five.
00:14:11 - Ishan Anand
Yeah, so there's Rise of the Robots: How to Thrive in the World of AI, right? And the description sounds like it's, do these AI tools make you worried about your future as a web developer? Fear not. He's going to 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. We had an episode a 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 in React, which sounds really interesting. Let's see what the next one is after that. Is it only those two? No. Generative AI: A Builder's Guide is going to be exploring generative AI. This one looks really interesting and foundational as opposed to just how you can use it. He's going to explore key concepts like what word embeddings are, what Word2Vec is, and large language models and NLP. 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.
00:15:35 - Ishan Anand
Actually, it says right here, this 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 counting 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. She was using things like TensorFlow.js in the browser, where you could kind of code and program and configure a TensorFlow.js network in the browser. Looks like she's talking about protecting apps from malicious packages, which is still also an 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 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 about the Render schedule jumped out at you, Anthony?
00:16:49 - Ishan Anand
If anything?
00:16:53 - Anthony Campolo
Evan Yu had one that was like something about crossing the barrier between frameworks, I think is what it was. That looked pretty interesting.
00:17:02 - Ishan Anand
Oh, I see that. Yeah, I had not noticed that.
00:17:07 - Anthony Campolo
Thinking across the framework barrier.
00:17:11 - Ishan Anand
Yeah, absolutely.
00:17:12 - Anthony Campolo
Yeah, that sounds super interesting to me because, especially as 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.
00:17:25 - Ishan Anand
Yeah, that's definitely one to tune into. I mean, look, this is the guy who built one of the most popular frameworks. I don't want to say single-handedly because I know there's a lot of contributors, but he didn't have the backing of any large organization. Angular, backed by Google. React, backed by Meta slash Facebook. And somebody who definitely looks at these design tradeoffs between the frameworks, and then also built Vite, which is extremely cross-platform and popular as well. To get inside the mind of somebody who thinks very deeply about framework tradeoffs, it'd be great to hear those thoughts. That's definitely one that, you're right, that's a good callout.
00:18:14 - Anthony Campolo
Yes. From that, maybe the CodeSandbox one could be interesting. The technical story and learnings of CodeSandbox building a browser editor is just a very, I imagine, large, interesting problem space. And CodeSandbox, I feel like, is not necessarily as nice as some of the other ones these days, but it has been around for a really long time. I'm sure he's acquired a ton of
00:18:40 - Ishan Anand
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, like what does this reflect in the market? So I see things that I know 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 people's minds, along with AI. I see vanilla JS making an appearance, which, you know, a few years ago I don't think you saw as much of. I see Web3 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 that's me extrapolating too much or is it just getting overshadowed? Anthony, what do you think?
00:19:59 - Anthony Campolo
Oh, I mean, I think it's a couple things. There's definitely less general mainstream interest in Web3 right now, both because of the down cycle in the market over the last year and AI kind of taking its place in the zeitgeist. I think that crypto and Web3 stuff works on long-term timescales to a certain extent. 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 not as concerned about that. So when it is in a bear market, you don't see it as much, but you know it's going to kind of come back around. I thought the one talk it looks like they do have has an interesting title, The Winners and Victims of Crypto and Web3. 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 SBF possibly going to jail over it all, people look at that and say, oh, this proves that Web3 was all a scam.
00:21:15 - Anthony Campolo
And people who are in Web3 and crypto are like, 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 wunderkind who just built another financial system that scammed a bunch of people out of their money through opaque finance laws in the Bahamas. And that has nothing to do with crypto. So yeah, it's a much larger conversation than we have time for.
00:21:38 - Ishan Anand
Yeah, it's like this is the thing we were trying to prevent. There was an expert or pundit who was like, Web3 might have just been misnamed. It's just further off, so it might really be Web4, and the time wasn't quite right, but it might come back in a different form. I'm noticing Colby also has an AI-themed talk as well. The other theme that jumps out, though, and you don't always see a lot of this, you've seen more of it in conferences, but it really makes sense because Render, their byline is, let me go back to the homepage and 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 how you manage teams. So there's a lot of career stuff as well, and leadership as well. There's a whole category on leadership and entrepreneurship. A whole category on product and project management.
00:22:57 - Ishan Anand
Yeah, go ahead.
00:22:58 - Scott Steinlage
Yeah, I was just gonna say, to be fair, it takes money to run these conferences, right? And so those topics bring in sponsors, for sure.
00:23:09 - Ishan Anand
Yeah, yeah, makes sense. So those are some of the things that jumped out at me for this year's conference, but.
00:23:19 - Scott Steinlage
Excited.
00:23:20 - Ishan Anand
Yeah. And then 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?
00:23:34 - Scott Steinlage
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 because they kind of had something similar last year. I left before. I couldn't partake in that because 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 get a Render ticket, essentially. Yeah.
00:23:56 - Ishan Anand
Okay. So for those of you who have the time to spare, that sounds like something. I'm personally more into what they did at Remix, like the game night, but.
00:24:06 - Scott Steinlage
Yeah, but I will say this too, though, that they do have a ton of events every night. There's different things, and they'll get continued sponsorship for these things. For example, one of the nights last year, AWS sponsored a dinner kind of thing. Yeah, just all kinds of things, honestly. There's usually no lack of... In fact, a lot of these after-events are so popular that the place will fill up, and if you don't get there soon, before it starts, 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 are ones that are hotter than others, and it's just kind of 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.
00:25:04 - Ishan Anand
Yeah, and I see they've got themes for each day. Jersey Day, Cosplay Day.
00:25:09 - Scott Steinlage
Yeah, yeah, they had a little bit of something like a theme last year. They didn't have a whole cosplay thing, and that'll be interesting. Honestly, 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 don't have anything for doing that. If you can lend me an Iron Man suit, I'll wear it. But yeah, Jersey Day actually kind of takes off from their design team. Last year they had created a jersey for a lot of the people that worked there and the people that were, I don't know what they called them, but almost like advocates, I guess, involved in it. And you can actually purchase a jersey, their Render ATL jersey. It's pretty slick. It's really cool. They had them last year, and a few people had them, but I think that's kind of where it derived from. But obviously you can wear any jersey you want. So I was thinking we should get JavaScript Jam jerseys.
00:26:26 - Ishan Anand
That would be great. That would be awesome. Maybe for next year.
00:26:30 - Scott Steinlage
Yeah. Anyway, if...
00:26:34 - Ishan Anand
Now the question is, if you could be any Marvel superhero, which one would you be?
00:26:39 - Scott Steinlage
Right.
00:26:40 - Ishan Anand
Which Avenger would you...? Yeah, exactly.
00:26:42 - Anthony Campolo
Sorry.
00:26:44 - Ishan Anand
But maybe that's a topic for another day. So we're right at the halfway point. Do you want to do the station break and then we should switch over to what was in the newsletter, Anthony?
00:26:56 - Scott Steinlage
Yep.
00:26:56 - Ishan Anand
All right.
00:26:56 - Scott Steinlage
Thank you all so much for joining us. I see a lot of people here that are always here, so thank you so much for joining us on this awesome Wednesday. As always, we love you, appreciate your guys' support and everything you do. For those of you who are joining us on the recording, thank you so much for taking the time to listen to this recording. But I just want to say, whether you're a beginner or whether you're an advanced developer, it doesn't matter. We love to hear from everybody, so feel free to raise your hand, come on up, request to come up here and have a conversation with us. We'd love to hear from you. It doesn't matter. State facts, opinions, 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 that, the main reason he puts so much time and effort into it is because we want it to be something valuable that you guys will enjoy reading and receiving in your inbox every Tuesday, right?
00:28:06 - Scott Steinlage
The day before we go live on Wednesday. So if you want to know what's happening in the world of JavaScript and web development, be sure to go subscribe at JavaScriptJam.com. That's JavaScriptJam.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. RenderATL.com. That way you can see us in person. We'll shake hands, high fives, hugs, whatever you want. Yeah. All right, back to the show, huh? Thanks.
00:28:39 - Ishan Anand
Thank you, Scott. So, Anthony, 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?
00:28:56 - Anthony Campolo
Yes, there's kind of two main topics that are covered. There's the new Vue release, which has a whole bunch of stuff that's probably more interesting for Vue-specific developers, but it looks like a pretty substantial release. And then Google I/O, which is Google's yearly developer conference, had a whole bunch of announcements across a wide array of things. A lot of that was related to web performance and core web vitals stuff. So yeah, definitely this is your expertise way more than mine, so you're gonna be able to explain this far better than I can. But there's an announcement about a 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 handful, and then there's more web vitals kind of beyond that as a larger 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.
00:30:04 - Ishan Anand
Yep. Yeah.
00:30:08 - Anthony Campolo
So you want to talk about what those are, why that's significant, and...
00:30:12 - Ishan Anand
Right, we should just talk about Google I/O 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 because performance is so much a part of what we do and what our clients trust our Edgio platform for. So as you said, there's this core vitals that Google measures. Anytime somebody uses the Chrome browser on mobile or desktop, they are basically, 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 in 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. Actually, I shouldn't call these performance metrics. We kind of 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 Contentful 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.
00:31:37 - Ishan Anand
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. Then the last one is Cumulative Layout Shift, which doesn't really measure performance. It measures how much does the page jank? 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'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. When you load a page, things jump around, and native applications don't do that. And there's no reason web pages need to do that. They're just built in a way that you can underspecify things and the browser has to guess.
00:32:45 - Ishan Anand
And so as Google wants the web to compete with mobile experiences, or native experiences, on a level field, reducing this CLS, Cumulative Layout Shift, is really important. And these metrics are extremely important. For, say, the average ecommerce 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 of 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 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 are competing with was a competitor of yours. So they're going down, you're going up. There's only 10 links on the page.
00:34:06 - Ishan Anand
It's zero sum. So that's the reason why it's so competitively important. So Google, there can only be one. There can only be one. Yes.
00:34:15 - Anthony Campolo
Made a Highlander joke.
00:34:17 - Ishan Anand
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 that they were doing it. And so they announced that starting next year, so they're giving us 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, how do I say this? First Input Delay I thought was a terrible metric. If your job was to measure user experience, I think INP will be a better metric.
00:35:14 - Anthony Campolo
What was terrible about it?
00:35:15 - Ishan Anand
Let me explain that first, but I think people are going to be surprised at how poorly they do on INP. 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. Well 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 can condition when the user clicks. Now on the flip side, imagine an experience that aggressively shows the user as much as possible of the UI, but maybe the JavaScript handlers 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 going to have a long First Input Delay because it's suddenly waiting for all that JavaScript to respond.
00:36:33 - Ishan Anand
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. There's a lot of ways that First Input Delay 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 vagaries of when somebody 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. 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.
00:37:33 - Ishan Anand
So I can tell you from our experience, most sites would struggle more with LCP and CLS than they would with FID. Broadly, if you looked at the statistics, FID was, at least in ecommerce, retail, and some of the other verticals we play in, typically one of the easier ones you all actually didn't have to worry as much about. So it was sometimes a highly variable and sometimes generous metric. The other problem it has, that INP also doesn't solve, is there's no good... I don't want to say there's no good. It's harder to measure in a lab setting. So what do I mean by that? The measurement is based on actual users interacting with your website. If you're a developer sitting down to optimize this metric, well, 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 kind of 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 what your FID metric is.
00:38:50 - Ishan Anand
I've seen it not line up. Famously, people get Lighthouse scores that are poor. But I've seen poor Lighthouse scores get equivalent Core Web Vitals scores, and there's a lot of potential other reasons for that. So that was the problem with FID. Did that make sense before I move on to Interaction to Next Paint?
00:39:11 - Anthony Campolo
Yeah, this stuff, it's like whenever someone explains, it's like, yeah, it makes sense. It's just like, it's a lot.
00:39:17 - Ishan Anand
It's just a lot. There's a lot of context, and unless it's somebody's job, there isn't always somebody. It becomes like the tragedy of 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 Interaction to Next Paint. To be frank, I haven't spent much time actually optimizing for INP because it was a new metric and I knew they'd give us a lot of time.
00:39:52 - Anthony Campolo
Yeah. So how long has it been around now?
00:39:55 - Ishan Anand
Yeah, it's been around for about a year, maybe a little bit more than that. They started talking about it maybe 18 months ago. I should go and double-check. Certainly about a year ago, they started talking about it.
00:40:08 - Anthony Campolo
And was your sense that when they were talking about that it was going to replace this, or was it more like, here's a new thing, we'll see how it goes and then decide?
00:40:18 - Ishan Anand
So when they first started talking about it, it was very clear like, this is a potential candidate. 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 were like, we're considering it as a candidate metric. So they started including it in results in Lighthouse and PageSpeed Insights, I believe, before this announcement. So evidence just kept building and building before they finally said it's going to be a candidate metric.
00:40:48 - Scott Steinlage
They.
00:40:48 - Ishan Anand
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 like, oh yeah, this is what they're thinking will improve as a possible change to Core Web Vitals. Another example is Cumulative Layout Shift. I was one of the folks that was critical of the original specifications 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're a single-page application, where it's a very long-lived lifecycle for that single page, and you have maybe a small layout shift every couple interactions, you're going to 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 Shift, even though the single-page app, from a layout-shift perspective, probably was a better experience. And we weren't the only ones complaining about this. The Google Chrome team was very receptive, and then they floated a change.
00:42:16 - Ishan Anand
They went through a very develop-in-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 liked. So they were doing the same thing with INP. This has 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 were very clear and said, hey, this is now likely going to be a candidate metric. And the way INP works is, rather than just looking at the first input, they look at all the inputs across the lifecycle of the page. Then they'll take, depending on the length of the session, a percentile approach.
00:43:26 - Ishan Anand
Something like they'll take the 98th or 99th percentile and throw out the outliers if the session is long enough. And they measure the full time. First Input Delay, as far as I understand, just simply looked at how long the handler ran. But Interaction to Next Paint, the name says interaction to next paint. So it's from the time the user interacted with the page till the time the paint happens. That's really important. To simplify it, in a browser, when you click on it, there's a couple things that happen. First, the JavaScript runs. That's the handler. And that JavaScript is going to make some DOM changes, say, or some other changes. 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 INP measures all the way through that full lifecycle. So if your handler is really short but actually asks 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.
00:44:43 - Ishan Anand
So everything's getting measured in your interaction. So you really need to think holistically end to end, from the work you're doing to when it gets painted. So I think that's an improvement, and I highly recommend the Google I/O talk, I think you linked 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 autocomplete example where, as you're typing, how long does it take for something to appear and what are the right ways to solve it. He worked through a bunch of examples 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, it'll show those search results and update responsively, but you're not waiting for the autocomplete 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 clunky.
00:45:46 - Ishan Anand
I'm not really giving it justice, I think, but it's a really good concrete example, especially for folks using React, on how to think about INP. So let me pause. I've been talking for a while. See if that makes sense. Oh, we've got Henri here.
00:46:05 - Anthony Campolo
Yeah, I was gonna say, if Henri wanted to... I'm grabbing the link to the video and posting it.
00:46:10 - Scott Steinlage
Yeah, performance lover.
00:46:13 - Ishan Anand
Yeah, exactly. You guys just saw him at Remix, I think. Speaking of performance, yeah, I would love to get his thoughts on INP. He might be on the web version, in which case he can't come up. But Henri, feel free to raise your hand and we'll bring you up to the stage. I'd be curious to get your take as somebody also in this space. So that definitely caught my eye in the newsletter. Also, before, because performance is kind of my original background, and they had telegraphed that this was coming. In fact, one of my coworkers said INP is now officially a metric. And I'm like, oh really? I thought they were gonna... I expected them to wait to Google I/O to announce it. And he's like, Google I/O is today. And I'm like, oh man, I was so focused on what we're doing with Remix I totally 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 certainly, I think, a good thing coming.
00:47:15 - Anthony Campolo
Did you hear other good news from Google I/O at all?
00:47:21 - Ishan Anand
You know, I think there was the broad headline news obviously about 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. 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 filtering on web to see what else jumps out. Yeah, there's Rethinking Reactivity with Signals. There's another talk on optimizing Core Web Vitals, The Nine Most Effective Core Web Vitals Optimizations for 2023. There's a talk on advanced APIs that I have been meaning to watch, but I haven't yet, about Project Fugu 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.
00:48:51 - Ishan Anand
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, that is on the horizon. And if you're like an old curmudgeonly developer, you may not realize that that trend is coming and is happening sooner than you might think. They're deprecating some of the information you used to get out of the user agent. All sorts of data like that, it seems like the trend is on its way out, and so that's definitely something to pay attention to. It's kind of 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 A/B 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 Jamstack world where you stitch tools together. And obviously your vendors are going to be on top of this because it's critical to them working.
00:49:58 - Ishan Anand
But I think that's one that'll sneak up on people. And it also still remains to be seen how it gets fleshed out because the attempts like Fledge and FLoC kind of have stalled as alternatives to cookies, and it's not clear what's on the horizon there.
00:50:14 - Anthony Campolo
Fledge and FLoC.
00:50:15 - Ishan Anand
Yes. So right, as an advertiser you don't want everyone's data, right? As a third-party advertiser, you want, say I'm trying to get you to buy, I don't know, socks, right? Socks with whimsical Marvel superheroes, Avengers on them. So I want people who are interested in comic books and happen to watch those movies or searched for Iron Man cosplay outfit, right, like we were talking about earlier. But I don't need to know everything else they searched, right? So if you could just give me the cohort that represents that, in theory I'd be happier. But you can't predict what all those cohorts are. Now I don't know the full details of how Fledge and FLoC worked, but it was this idea that the browser would use what's called federated learning of cohorts to 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, basically I think a lot of advertising platforms felt like it gave too much power to the browser and cut a lot of players out of the industry, and so it kind of stalled. So it still remains to be seen what the right solution is.
00:51:42 - Ishan Anand
So it's in some ways really scary. There's an attempt to get more privacy, which makes sense. But how do we still keep the economy of the internet going? And what the alternative is, I don't think has fully arrived yet. So it's going to be an interesting, scary new world in some sense.
00:52:03 - Anthony Campolo
I mean, 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. So I think that is still gonna be hard because subscription models I think can work for a lot of things, not necessarily all things. So I don't know. Yeah, it's gonna be interesting to see where it goes.
00:52:31 - Ishan Anand
So I like the idea of privacy. I like you being able to control your privacy. Where I'll 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...
00:52:45 - Anthony Campolo
There's value there. But it needs to be opt in.
00:52:47 - Ishan Anand
It needs to be opt in.
00:52:48 - Anthony Campolo
I mean, and there needs to be an alternative for people who don't want to do that.
00:52:51 - Ishan Anand
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 Alexa. There's a huge amount of potential in these assistants, especially now with the power of large language models. But what I really want is a future where I'm talking to my spouse and I'm like, oh, we're out of paper towels. And I don't have to say, hey Alexa, add paper towels to the grocery list. It'll just...
00:53:30 - Anthony Campolo
Yeah, but you need to run the models on your own personal data that's siloed on your machine and that's something that's gonna be hard.
00:53:37 - Ishan Anand
Exactly. So they need 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... I guess my point is I think we're aligned here. We just express it differently. It needs to be opt in.
00:53:54 - Anthony Campolo
Well, it's a question of, is it even going to be possible to do it on your own machine and have that be available? Because 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.
00:54:13 - Ishan Anand
I don't know if I would ascribe that intent. I think it varies by company, and there are certain advertisers.
00:54:21 - Anthony Campolo
It does vary, yes. Some don't want to, but Google does.
00:54:27 - Ishan Anand
They do, on behalf of the large audience of advertisers they need to advertise to, who each individually do not think they're going for that niche of a thing. But if you're trying to find people who want an Iron Man cosplay outfit, right, I don't know if FLoC will come up with that. It may not be that specific. 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 the flip side. It's a double-edged sword. We've got greater fragmentation now, but it also means people can find each other who have similar interests. We're way off JavaScript topic, but the point is the trend is definitely towards greater privacy, and it's not clear what's going to replace that. And so that could catch up on people. The other thing that I was going to say that I thought was an interesting development is they have this new thing that they came out with called Baseline. And as a web developer, it's basically the list of... It's kind of like Can I Use?
00:55:36 - Ishan Anand
But it's like they short-circuit it for you and just say, okay, yes, here are the things you can rely on because they're in most of the browsers. They've kind of 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 are the browsers that support it? Do these ones matter or not? It's just the baseline. These are the... And it's kind of 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. So 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 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. Passkeys also got a lot of attention, but that was it.
00:56:43 - Ishan Anand
I don't know if there's anything else. If you're looking at the program right now, that jumps out at you.
00:56:50 - Anthony Campolo
So the other thing I highlighted in the newsletter was more performance debugging tools for Chrome. There's 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.
00:57:07 - Ishan Anand
I have not used it yet. But yeah, this is something I should have talked about earlier. If you were trying to debug things like Interaction to Next Paint in the past, Lighthouse only measured, for example, first load. And slowly, over the last 24 months, they've been... I was critical of this for years, that people focused on Lighthouse and only first load. They've been not only enhancing the performance tooling, but they've actually started making it better at diagnosing problems in performance during the lifecycle 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. I'd 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 lifecycle...
00:58:25 - Ishan Anand
This does all the console.log statements for you, which is really useful.
00:58:34 - Anthony Campolo
Yeah, that one was cool. For people who haven't seen it, it basically helps you trace through how your rendering is happening in React. When you have components, they'll mount and they'll render and then they'll do this whole dance. It's the React lifecycle. And so this is a library that basically creates 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 boot camp student and learning about React, especially because it used to be more explicit back when you were writing class components. You'd have componentDidMount and all that kind of stuff. And now I feel like the lifecycle kind of happens underneath and people learn how to use the hooks and then may not necessarily think about it or even know that's happening. But then when they hit edge cases and weird bugs come up, then they're like, wait, what is happening?
00:59:36 - Ishan Anand
Yeah, no, I think they take it for granted. 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 Paint, optimizing it. He goes through and one of the things he does is he has a hook and he's trying to debug. He's playing the part of the developer and he's going through, and it's an autocomplete, and he's tried to fix everything. What's actually happening is the reason his Interaction to Next Paint 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 character is it still taking so long? It's because the second character, you queued that work up, and only now did it come and hit you. And I think this is exactly that relationship.
01:00:42 - Ishan Anand
The hooks, I have to say, do tend to hide that type of complexity, and 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 great. I think it's going to 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. So cool.
01:01:13 - Anthony Campolo
Glad I included it.
01:01:15 - Scott Steinlage
Awesome. Sweet. Well, thank you all so much for the amazing conversation. Thank you all for listening in the audience. We love it when y'all join us for our JavaScript Jam Live on Wednesdays at 12 p.m. Pacific Standard Time, as always. So don't forget to join us for next week. We're hopefully going to be having a speaker from Render ATL, and then the following week we'll be at Render ATL. What's up, Alexis? I see the heart there. I believe Alexis is going to 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 ATL if you haven't. There's gonna be about 2,000 other web developers, and just, well, developers in general, out there. So yeah, don't want to miss out on that.
01:02:17 - Anthony Campolo
Real quick, Monica just hopped in. She's one of the speakers who will be there.
01:02:20 - Scott Steinlage
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 want to come up and share a bit, feel free. We'd love to hear from you. I know it's kind of last minute.
01:02:41 - Anthony Campolo
Got a Render guest.
01:02:43 - Scott Steinlage
Super casual, last minute, last second here. Woo. Marigel, welcome.
01:02:50 - Marigel
Thank you. Yeah, I'm excited to see this space is happening. It'll be my first Render, so I'm excited to meet everyone and also be there as a speaker.
01:03:01 - Scott Steinlage
That's so cool. What are you going to be talking about?
01:03:04 - Anthony Campolo
Yeah, that's what I was going to say.
01:03:06 - Marigel
Talking about creative coding, so kind of a little bit different than what I do in my day to day. I focus on just a bunch of React. But I want to have fun at Render and talk about how you can build stuff with code that's more for fun or for whatever, just not specifically like, I have to build something useful or whatnot.
01:03:34 - Anthony Campolo
Very cool. So what, like generating, like more like
01:03:38 - Ishan Anand
artwork kind of stuff.
01:03:39 - Marigel
Yes. So using P5.js and Canvas APIs to create art.
01:03:48 - Ishan Anand
Super sweet.
01:03:49 - Anthony Campolo
Yeah, sounds very interesting. And yeah, we're kind of like... What was that library you said?
01:03:54 - Marigel
So there's P5.js. It's part of the Processing Foundation. So Processing, they have Processing, which is Java-based, and then there's P5.js, which is a JavaScript version of the Processing library. And they have some other versions as well, but it's just a 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 the Audio API or webcam input and stuff like that.
01:04:30 - Anthony Campolo
Very cool. And you spoke at Remix Conf as well. Was that a similar talk? Did you do a different talk?
01:04:38 - Marigel
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 want to have interactive examples for folks. And if you are familiar with the new React docs, they use a lot of MDX on there for the interactive playgrounds and different checkpoints within the documentation to gauge understanding and help reinforce concepts. So I did a talk about how you can use that in Remix and a little bit more about the whole MDX ecosystem. And if you wanted to create custom plugins to transform your MDX content into a different format or whatnot, just kind of diving into that. I feel like there's a lot that goes into MDX, so definitely something I want to talk about more in the future. And I spoke at the first MDX Conf, so I've been using it for a little while.
01:05:47 - Anthony Campolo
Wow, that's super cool. Yeah, I mean I was at Remix Conf. I didn't catch a lot of the talks, but I'm going to watch the recording for this one because I avoided MDX for a long time partly just because I found it really hard to configure. And then Astro's MDX integration I found 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 most 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.
01:06:30 - Marigel
Very cool. Yeah, I feel like I was looking into... There's a lot of tools within the MDX ecosystem. But in terms of models of how to put everything together, I think there's definitely some lacking. I used to use MDX Slides, and it seems like now there's no version that's super well maintained. So that's something I might look into once I have some more time.
01:06:54 - Anthony Campolo
[unclear].
01:06:56 - Marigel
I think there's MDX Deck, and then there was a Next.js version of MDX Deck so you can create a presentation with MDX.
01:07:05 - Anthony Campolo
Interesting.
01:07:06 - Marigel
But the versions I saw and that I used to use, they don't seem to be very maintained. They're a few versions behind in terms of Next and Node and all these things. So not super great.
01:07:20 - Anthony Campolo
Yeah, exactly. That's one of the reasons why I would avoid stuff like MDX. Yeah, just a huge kind of mess.
01:07:26 - Marigel
Yeah. So I'm hoping it gets easier for folks because it is a great tool, but I definitely can understand where you're coming from in terms of the ecosystem. It's a little bit of, you have to get your hands dirty to get a good solution going.
01:07:41 - Anthony Campolo
Totally. Yeah, that is true to a certain extent just for Markdown at all. Markdown is like the ultimate, created through evolution of many, many people over many, many years and many different forms in many different libraries. I find Markdown just a fascinating thing. Was there anything else you were excited about for Render?
01:08:15 - Marigel
Is that for me specifically?
01:08:17 - Anthony Campolo
Absolutely. You're the only guest up here right now?
01:08:20 - Marigel
Yeah, yeah. I think I'm just super excited about all of the different speakers who are going to be there. There's a lot of folks who I haven't had the opportunity to hear speak, and obviously I'm not going to be able to hear everyone speak because there's a lot of speakers at Render. But I'm excited to have that opportunity, and also just the opportunity to connect with the larger tech community because every year I see Render happening and it seems like this super awesome event that brings together people from all different parts of tech. So I am super excited about that and can't remember the last time I went to ATL, so also just excited to go someplace I haven't been in a while. But yeah, it seems super exciting. I can't believe it's only like two weeks away, so it's right around the corner.
01:09:08 - Scott Steinlage
It's coming quick, for sure. I'm excited for it too. Yeah. Well, thank you so much for sharing that. I mean, 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, the after-events, the after-after-events, everything. It's good. The drip, it's all good, for real. Oh man, I can't wait. Yes, 100 is right for sure, Monica, by the way. And I think, just to kind of throw this out there to the audience as well, if you haven't heard this before, but we will 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 going to 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 speakers there, and then I feel like there'll be a lot more availability to join us during our JavaScript Jam Live on Wednesday the 31st, I believe it is.
01:10:21 - Scott Steinlage
So Monica, we would love to have you, if you're 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 kind of give some input as to what's been happening at the event so far and what you're enjoying and just kind of the scenery, everything, kind of bringing the event to people through Spaces. So would love to have you, Monica, join us if you want to. It'd be 12 p.m. Pacific Standard Time, so what is that, like 3 Eastern while we're there? So yeah, that'll be cool.
01:10:59 - Marigel
Okay. Yeah, no, I'll definitely be in touch and let you know because I know I'm traveling that day, so I may be, oh, not in a good spot to hop into the space, but I definitely will be interested if I'm stationary.
01:11:12 - Scott Steinlage
Understood. Yeah. Awesome. Well, thank you so much. Appreciate it. And we're excited for your talk. So that'll be really cool. Everybody, if you're going to 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, or maybe you don't, but do you know when you're giving your talk? What day, sometime?
01:11:34 - Marigel
What's the first day? Thursday?
01:11:36 - Scott Steinlage
Yeah, it's on the first, yeah.
01:11:38 - Marigel
Yeah. So on that first day, I think sometime in the afternoon. Yeah.
01:11:43 - Scott Steinlage
Okay, cool. So yeah, in the afternoons, if you go to the Jumbotron here in the Spaces, that's what we call it, the Jumbotron. If you scroll up and then kind of scroll to the right, you can see all the different posts we got up there. Or to the left maybe, in your case, if you haven't seen them all. RenderATL.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 kind of see the schedule-ish. I believe that is highlighted in that. So be sure to check it out and take note of the ones you want to check out, including Monica, of course. So awesome.
01:12:28 - Ishan Anand
Sweet.
01:12:29 - Anthony Campolo
We should probably close that unless there's anything else you wanted to talk about, Monica, or places you want to point our listeners to to find more of your stuff.
01:12:36 - Scott Steinlage
Yeah, please do that. Where can they find you, Monica?
01:12:45 - Anthony Campolo
Click your Twitter face and follow you right now.
01:12:48 - Marigel
Yeah, sorry, I got stuck clicking on the speaker topics link. Yeah, you can find me here on Twitter. My website, monica.dev. I'm on Bluesky, monica.dev as well. Those are probably the best places to find me. And then if you want to see my GitHub or anything, that's linked on my website, on links.monica.dev. I do have a link to my MDX talk as well as the actual Remix MDX demo site if folks are interested in learning a little bit more about MDX. And then I think also on links.monica.dev I have an example of a Bluesky P5.js bot that I created. So if folks are on Bluesky or interested in getting a sneak peek of P5, that's something that I have linked on my site.
01:13:51 - Scott Steinlage
Okay, cool. Awesome. Thank you so much.
01:13:55 - Ishan Anand
Thank you.
01:13:55 - Scott Steinlage
She has a lot of value out there for all y'all, so be sure to follow her, obviously, right? I mean, yeah, check out her talk from Remix as well, which is linked in her stuff. So be sure to do that. 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 going to get value from them in other places. This is how it works, y'all. Obviously, JavaScript Jam would love your follow too, if you want to. We have these talks every Wednesday, 12 p.m. Pacific Standard Time. Join us next week. We're gonna hopefully have a speaker from Render ATL with us. And then the week following, like I said before, we're gonna be at Render, so if you're not there, [unclear]. 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, so much to everybody here. Appreciate you. We'll see you in the next one.
01:14:52 - Anthony Campolo
On the next one.
01:15:14 - Scott Steinlage
All right, thank y'all. Love you guys. Peace.