Lighthouse v11 Remix v2 and Astro v3
Lighthouse, Remix, and Astro updates lead a lively discussion on performance, accessibility, and frameworks in this developer-focused chat
Episode Description
JavaScript Jam covers Lighthouse 11's accessibility upgrades, Astro 3.0's View Transitions API, Remix v2's future flags, and a beginner's question on layout shift.
Episode Summary
This episode of JavaScript Jam opens with co-host Anthony Campolo walking through the latest Lighthouse release, highlighting significant accessibility improvements tied to better alignment with the Axe auditing tool and the promotion of Interaction to Next Paint from experimental to a standard core web vital. The discussion naturally branches into React Aria and Adobe's Spectrum design system, with panelists debating its maturity, hook-based architecture, and challenges integrating with server-rendered frameworks like Next.js. A newcomer named Carol asks about Cumulative Layout Shift on her newly deployed Vercel site, prompting a practical group explanation about placeholder dimensions and lazy-loaded content. The conversation then shifts to Astro 3.0, where regular contributor Fuzzy highlights the View Transitions API graduating from experimental, a revamped image component, and notably faster build and dev server times. A Chrome developer blog post co-authored by Astro and Google team members is surfaced in real time. The panel briefly touches on Remix v2's clever "future flags" migration strategy, compares Qwik's mutation story to Remix's more mature ecosystem, and jokes about OpenAI's new ChatGPT Enterprise pricing requiring a sales call. Throughout, the hosts encourage audience participation and plug the JavaScript Jam newsletter.
Chapters
00:00:00 - Welcome and Lighthouse 11 Accessibility Updates
Scott opens the weekly JavaScript Jam live show with his usual invitation for developers of all levels to join the conversation, and Anthony shares personal news before jumping into the newsletter topics. The pair quickly pivot to Lighthouse's latest release, which Anthony flags as an important but easy-to-overlook upgrade for developers who treat Lighthouse as a quick pre-ship checklist rather than a power tool.
Anthony breaks down the key changes, focusing on new accessibility audits around ARIA roles and the realignment of audit weighting to better match the Axe accessibility engine. He explains that Lighthouse is essentially outsourcing its accessibility scoring to Axe's established impact levels, which should give developers more accurate and actionable results. He also notes that Interaction to Next Paint has moved out of experimental status to become a standard core web vital with SEO implications.
00:08:01 - React Aria, Adobe Spectrum, and Server Rendering Challenges
Bro Nifty brings up Ryan Florence's commentary praising React Aria's accessibility over Radix UI, sparking a group discussion about Adobe's component ecosystem. Anthony traces React Aria's lineage back to its original 2016 commit under the name Coral UI React, while Jason (Carol) explains that Spectrum is Adobe's umbrella design system and React Aria provides headless, hook-based building blocks for creating accessible components.
The conversation turns practical when Jason points out that React Aria's heavy reliance on context providers creates friction with server-rendered frameworks like Next.js and Remix. He notes that libraries like shadcn/ui were designed with newer server rendering patterns in mind, which could limit React Aria's adoption unless the team adapts its architecture. Bro Nifty mentions he suggested to the shadcn creator that React Aria could replace Radix as the underlying accessibility layer.
00:15:27 - Cumulative Layout Shift Explained for Beginners
Carol, a beginner developer learning while working as an operations analyst, asks about Cumulative Layout Shift after deploying her first site to Vercel. Her site features an SVG animation and a newsletter form, and she notices the animation loads after the form, causing what appears to be a visual shift. The group rallies to explain the concept, with Anthony recommending explicit width and height settings as a common fix.
Bro Nifty initially describes CLS as a responsive design issue but corrects himself, clarifying it is about whether placeholder space is reserved for late-loading content. Brad provides a relatable e-commerce example where a discount banner loads after the page, pushing content down and causing accidental taps. Anthony directs Carol to web.dev as the go-to resource for understanding core web vitals and suggests checking Lighthouse scores on nested pages, not just the homepage.
00:24:28 - Astro 3.0: View Transitions, Faster Builds, and Image Overhaul
Fuzzy joins to champion Astro 3.0, calling it a maturity release that has been thoroughly tested across multiple release candidates. He highlights the View Transitions API graduating from experimental, explaining that developers who previously enabled the experimental flag only need to remove it since their implementation code is already in place. He also flags a breaking change to the image component, which now imports from an assets folder.
The group discusses significant build performance improvements, with Fuzzy attributing faster times to the core team refactoring async generators into synchronous operations. Anthony surfaces a same-day Chrome developer blog post about Astro's View Transitions co-authored by Astro and Google team members, and the panel marvels at the collaborative relationship. Fuzzy explains the API works by holding snapshots of current and incoming views in memory, enabling slide and morph animations natively.
00:36:32 - Remix v2 Future Flags, Qwik Comparisons, and ChatGPT Enterprise
Anthony introduces Remix v2's "future flags" migration strategy, where developers adopt upcoming breaking changes incrementally so that upgrading to v2 requires only a version bump with no code modifications. Bro Nifty compares Remix favorably to both Next.js and Qwik, arguing Remix has a more mature mutation story and richer built-in features, while Qwik's mutation handling still feels rough despite its innovative approach to hydration.
The conversation drifts to a Qwik-based course platform called Code Raiders, where the panel notes that fast-moving framework changes have already broken the course code. Scott and Anthony joke about OpenAI's new ChatGPT Enterprise product requiring a sales call for pricing, and Corey Quinn's and Dax's running jokes about AWS costs come up as a humorous aside. The episode wraps with a mention that Astro 3.0 changed its localhost port to 4321 as a "liftoff" countdown Easter egg, and the hosts sign off until next Wednesday.
Transcript
00:00:00 - Scott Steinlage
Welcome to Java, Java, Java, Java, JavaScript Jam Live. Yeah, live. We do this every Wednesday at 12:00pm Pacific Standard Time. Welcome to everybody jumping in. Appreciate y'all coming. Lots of great things going on in the dev world here this week. Some big releases from some big things. Yeah, it's great. We'll get more into that in a moment, very soon here, very soon. But yeah, I just want to say, whether you're a beginner developer or an experienced, longtime, awesome, amazing developer, it doesn't matter. We want to hear from everybody. In fact, feel free to request to come up and we can chitty-chat. You can ask questions, you can state facts, opinions, whatever. It doesn't matter.
00:01:05 - Anthony Campolo
Even heresies.
00:01:06 - Scott Steinlage
Heresies, heresy. I say it doesn't matter. Come on up and we can talk about it. Okay, we'll talk it out.
00:01:14 - Anthony Campolo
The more blasphemous, the better.
00:01:16 - Scott Steinlage
Totally. I mean, Twitter loves negativity, so yeah.
00:01:21 - Anthony Campolo
So blasphemy could be positive.
00:01:23 - Scott Steinlage
I guess it could be blasphemy. It's usually in a negative context, isn't it? I don't know. I guess it depends on who... what you're...
00:01:32 - Anthony Campolo
Well, it could be a blasphemy against a ruling class that is unfit to rule.
00:01:39 - Scott Steinlage
Yeah. All right.
00:01:42 - Anthony Campolo
Like Lighthouse, am I right?
00:01:44 - Scott Steinlage
Yeah, I think that's in the conversation today. That's blasphemy. All right, well, if y'all are not subscribed to the JavaScript Jam newsletter, go check it out. Go to JavaScriptJam.com and get on that because you'll know exactly what we're talking about. And if you're not, you're under a rock somewhere. Okay, well, no, that might be harsh. Sorry, y'all. I tried to trigger some people here. Okay. I didn't even know. I must be the one under a rock. Anthony let me know through his amazing newsletter that Lighthouse got the upgrade, y'all. Oh, go to JavaScriptJam.com, subscribe. Anthony, what's up, dude?
00:02:34 - Anthony Campolo
Not much. Just getting married in a week. Less than a week. Yeah.
00:02:41 - Scott Steinlage
How long has this been in the plans for like, what, eight months, nine months, 10 months? How long has it been now?
00:02:46 - Anthony Campolo
Over a year.
00:02:47 - Scott Steinlage
Over a year? Dang, bro. Has it been that long? Wow.
00:02:49 - Anthony Campolo
Yeah. So I think I proposed in July.
00:02:53 - Scott Steinlage
Yeah, I guess you did.
00:02:54 - Anthony Campolo
2022.
00:02:55 - Scott Steinlage
Oh, my goodness.
00:02:56 - Anthony Campolo
Give or take a month.
00:02:58 - Scott Steinlage
Dude, time flies.
00:03:00 - Anthony Campolo
Yeah, yeah, yeah.
00:03:02 - Scott Steinlage
Big claps. Woo, woo. Andy's getting married, y'all.
00:03:10 - Anthony Campolo
Self-applause.
00:03:14 - Scott Steinlage
It could have come from me, y'...
00:03:15 - Bro Nifty
All.
00:03:15 - Scott Steinlage
Okay.
00:03:18 - Anthony Campolo
But yeah, so that's exciting. Also working on some demos for stuff at Edgio, so that's exciting. Don't know if I can actually speak about them, but they involve functions that are in a place that some may call the edge.
00:03:42 - Scott Steinlage
That was...
00:03:44 - Anthony Campolo
Yeah, but that's all I'll say right now. And if you are sniping on my GitHub, you would get much more information about this than I'm saying right now.
00:03:55 - Scott Steinlage
Hint, hint. Anyway, super cool. That's exciting.
00:04:02 - Anthony Campolo
Yeah, no, it's great because this is something that, with us being called Edgio, we gotta make sure we do right. And I think we got some interesting stuff cooking.
00:04:12 - Scott Steinlage
Yes, yes, yes. Exciting. So hopefully nobody's in Florida. Well, I don't know how bad it is. I didn't even look, honestly. I knew it was heading there. I didn't look recently into what the news was, but is it bad, or is it just downgraded to a tropical storm, or...?
00:04:30 - Anthony Campolo
Anyway, the headlines I'm seeing don't look positive.
00:04:36 - Scott Steinlage
Oh, boy.
00:04:37 - Anthony Campolo
Well, it's not as bad as Hawaii, let me put it that way.
00:04:40 - Scott Steinlage
Oh, geez. Yeah, that'd be hard to compare.
00:04:43 - Anthony Campolo
Yeah, sure.
00:04:45 - Scott Steinlage
Anyway, hoping everybody's okay there. Yeah, stay safe, y'all. Yeah. So do you want to jump into the newsletter, or...?
00:04:54 - Anthony Campolo
Sure. I'd also encourage anyone in the audience, I mean, I'm just gonna throw out some invites to regulars.
00:05:02 - Scott Steinlage
The link is at the top there, y'all, by the way, if you want to join us.
00:05:06 - Anthony Campolo
Yeah. So I can't say I know a whole lot about this new Lighthouse version. I just saw that it was coming out, and I thought it would be worth highlighting because it's a very important tool that tends to get used by most devs. If you are someone who is using a tool frequently, then it can be hard to actually know when new stuff gets added. Especially with a tool like this, it's very easy to fall into a pattern of, okay, I'm gonna build my site, and once I'm about to ship it, I'll run Lighthouse on it real quick, be like, oh, here's some obvious things, here's a whole bunch of stuff that doesn't really matter very much, and then you kind of don't think about it too much and ship it. I think that's kind of how some people view a tool like Lighthouse. And I kind of understand that because there are so many tools in the process of building a thing that you hopefully have some sort of confidence is working correctly in other ways.
00:06:07 - Anthony Campolo
But if you kind of treat it like a power tool, you can realize that this is a very, very sophisticated hunk of software that does a whole lot of stuff for you. So some of the things to call out here: I thought the most interesting one they highlighted was big accessibility improvements. So they have what they're calling accessibility audits, including ARIA role, ARIA dialog name, and ARIA text. So they seem to all have to do with ARIA. That's what I'm surmising from this. And they said the weighting of all audits has been reevaluated to align better with the respective Axe rule impact levels. This could be a lot of jargon if someone doesn't know accessibility stuff, but Axe is kind of the underlying accessibility tool that powers the accessibility audits in Lighthouse. So basically what they're saying is we are making sure that what you're getting is more closely aligned to what you would get if you just used Axe proper, which is probably a good thing for them to outsource because it's a very important part of auditing a website that is highly specific. It requires very specific tooling.
00:07:18 - Anthony Campolo
And people I know who are big into accessibility, like Ben Myers, he always will say Axe is the first tool you gotta learn. So yeah, that's kind of the big highlight on that, and then a whole bunch of other little things. The most important one is probably that Interaction to Next Paint is moving from experimental to just regular, I guess. So this is what we've talked about in the past. It's a new core web vital that is going to be more heavily weighted in terms of things like SEO ranking. So it's important to understand what that is and how it works. But yes, that's kind of a big brain dump right there. Bro Nifty, what is up, my man?
00:08:01 - Bro Nifty
Yo. Yeah, it looks like in your write-up here you're bringing up the Lighthouse stuff, which talks a lot about accessibility, and also the Remix version 2. I always struggle to recall the names, but who's the main guy over there at Remix who is talking about React Aria versus the... oh my God.
00:08:31 - Anthony Campolo
Chance.
00:08:32 - Bro Nifty
Possibly not Chance. No, it's not. KCD doesn't work there. It's not Michael, it's not Chance, but the other one, the main guy. I talk to him a lot too, and I just always forget. Ryan Florence. Ryan. Thank you. Yes. He was making some commentary about how good React Aria's accessibility is compared to Radix UI. And I just want to check, because I haven't really used out-of-the-box components, whatever. I just kind of tool around and make my own. But it is really nice. React Aria is really nice. The accessibility on that is really good. So I agree.
00:09:17 - Anthony Campolo
Yeah. React Aria is a tool that I've always heard about, never actually used it, but I think it is... is it now called React Spectrum, or is this something different?
00:09:26 - Bro Nifty
Yeah, I've always thought of it as React Aria, and the guy who does... I think the guy who works on Parcel or something. I'm probably totally getting it confused.
00:09:37 - Anthony Campolo
No, I think you're right. Yeah.
00:09:39 - Bro Nifty
Does he work...? Okay, yeah. So that super, super duper smart guy. Oh my gosh. I don't know if that's my... I think it is, computer making noises there. I apologize. Maybe I'll just make a last point and just go on mute here. Yeah. The accessibility factor of React Aria, or whatever it is, the Adobe components...
00:10:06 - Anthony Campolo
Yeah. So it's under a project now called React Spectrum. It's still called React Aria. I'm linking it right now on the Jumbotron.
00:10:14 - Scott Steinlage
Yeah.
00:10:15 - Carol
If I understand it correctly, Spectrum's like the umbrella of a bunch of different things, including Aria.
00:10:24 - Anthony Campolo
Yeah. This is cool because actually I remember when React Aria was just an open source library. So it seems like now it has legit corporate backing, is what I'm surmising from this.
00:10:35 - Carol
If I remember right, I think Aria came out of Adobe originally.
00:10:40 - Anthony Campolo
Oh, did it? I think so. So it's kind of one of those things where you have an open source, kind of skunkworks project, and then at a certain point it probably got enough upkeep that they're like, hey, let's...
00:10:51 - Carol
Yeah, it was their...
00:10:52 - Anthony Campolo
It was their thing.
00:10:53 - Carol
Implementation of their design system, which I think that's what Spectrum is supposed to be, their umbrella design system.
00:11:01 - Anthony Campolo
That's really interesting. Yeah. If I remember that history correctly. So it looks like from the links here...
00:11:06 - Scott Steinlage
Yeah.
00:11:08 - Anthony Campolo
Have you used this, Jason?
00:11:10 - Carol
I've used it a little bit just to play around with it. Nothing in production, though.
00:11:14 - Anthony Campolo
So what does it do, aside from ARIA stuff, I guess, is my question.
00:11:18 - Fuzzy
Yeah.
00:11:18 - Carol
So it's...
00:11:19 - Fuzzy
Yeah.
00:11:20 - Carol
Again, I'm not an expert by any means, but it's just a bunch of hooks to give you that headless kind of design system. If you're looking to build a design system, here's all the tools you would need to do all the boilerplate stuff that doesn't involve the actual design itself, right? So that whole theory around component libraries that don't actually give you a component library but let you build one, that's where they started from. So now you have this whole library of hooks, essentially. In terms of timeline, I think it was probably one of the earlier hook-based component libraries, or headless component libraries. And of course, because it's Adobe and they need to support ARIA from government contracts and all that other good stuff, they had to make sure that they supported accessibility from the beginning as opposed to bolting it on like some other component libraries. So yeah, I think that's kind of...
00:12:15 - Anthony Campolo
Yeah, that makes a lot of sense. Look at the initial commit here. It says 5-3-2016.
00:12:20 - Carol
Yeah, so that's pretty early then.
00:12:21 - Anthony Campolo
Wow. It was originally called Coral UI React Compose, using Cloud UI style guidelines from Coral UI. There's your deep cut right there.
00:12:32 - Carol
And it started at Adobe from the looks of it.
00:12:35 - Anthony Campolo
Yeah, I just went to the Adobe GitHub repo and went back to the first commit.
00:12:39 - Scott Steinlage
Cool.
00:12:40 - Anthony Campolo
Any other thoughts from people on Lighthouse and what they're coming out with? They also, I thought it was interesting, mentioned manual audits. They're like, manual audits are now automatically displayed once all automated audits are successfully passed. Despite scoring a perfect score in automated audits, it's emphasized that manual testing remains crucial. So I'm curious what exactly they mean by that, because to me Lighthouse by definition is an automated test suite. So how do you use Lighthouse to run a manual audit? I guess I don't really understand what they're talking about there.
00:13:18 - Bro Nifty
It looked like there is some new stuff going on. I thought they knocked out one of their core web vitals and they're kind of degrading one of them, saying like, actually, this isn't as important as we thought. We're gonna either just keep everything but that as the main ones, or promote another one up from somewhere else. I thought I heard that somewhere, but that's totally hearsay. So I don't really know what I'm talking about. You've got First Contentful and Largest Contentful Paint. You've got first interaction time. I think they're doing something around the interaction time. I'm not exactly sure. But the layout shift, that's the big one. So you got the first and largest, and then the layout shift, that's the jank one. And then the interaction, the delay for hydration, the hydration-tax one. I think they're doing something about the hydration-tax one, but I could be totally off there. But anyway, the thread that Ryan was in... I think I'm on your website and it's giving me a clicking noise, which is really weird.
00:14:30 - Bro Nifty
But Ryan and Ross and Kent C. Dodds and Devin, who created Parcel, yeah, they're all talking about this. And we're talking about shadcn. Shad has a really, really great sense of style, uses Tailwind, and honestly I'm not really a style guru, and sometimes Tailwind can be a little confusing, just generally. So I would rather defer to him. But what Ryan was saying was that he doesn't like the underlying Radix accessibility story there. He said it's not as good as Adobe Aria. So I suggested to Shad, refactor your styles, put your styles on top of Adobe React Aria instead. He liked my comment, so we'll see. Maybe that'll be kind of neat. That'd be kind of a cool story to see if that came out. But yeah, that's all I have there.
00:15:27 - Anthony Campolo
Carol, get your hand up. What's up? You want to introduce yourself also?
00:15:31 - Carol
Hello, hello. Yeah, my name is Carol, and I am learning development while working as an operations analyst. I have a really beginner question. I hope you don't mind.
00:15:45 - Anthony Campolo
No, absolutely not.
00:15:47 - Carol
Great. So I deployed a website to Vercel yesterday. It's a simple thing, but since you are talking about Lighthouse and all that stuff, and one thing that you were just talking about is layout shift, I wonder... I'm not sure what it is. So the website that I've deployed has an SVG animation and a newsletter form. So I'm wondering, if the website is loading and the form is shown first, and then after a few milliseconds maybe the animation is showing, does it count as a layout shift? If you'd like to have a look, it's the last tweet I've posted, the link to the website, if you would like to have a look and tell me if this is the layout shift or if I don't understand this.
00:16:47 - Bro Nifty
The layout shift is when it is a different display on different size screens. So if it's responsive and you change it from mobile into medium size to large size or whatever, based on the pixels, and it shifts around your layout, your content is shifting around. That's what it is. It's not whether your animation is animating or not.
00:17:14 - Carol
All right, I need to read about it more, probably. Thank you.
00:17:19 - Anthony Campolo
Did you say you had a tweet about this? I'm looking at your timeline right now. I'm not sure which one you're referring to. I can pin it, though, to the top.
00:17:28 - Carol
I will pin it then, if you want to have a look.
00:17:32 - Anthony Campolo
Yeah, no, go for it. I always like to bring the hive mind into problem solving like this. Yeah, I know with cumulative layout shift, that could be a tricky one, because it will kind of depend on when you're loading something. So if you're loading something too late, you'll render the page before you have the assets you need, and then once that shows up, then all of a sudden it shifts everything on the page. So some ways to avoid that can be setting explicit width and heights, either through CSS or on your components or something, so that even if you don't have an asset at the time it arrives, it's already taking up the amount of space it needs to. So I have no idea if that has anything to do with your issue, but that's just one tip I know about cumulative layout shift. So yeah.
00:18:19 - Scott Steinlage
Yeah.
00:18:19 - Carol
So basically the animation is a client component, and the form is actually... no, the form is as well, a client component. But this animation is loading slower, and it looks to me like layout is shifting because one thing is shown first and then the other thing. I was thinking that this is it.
00:18:41 - Anthony Campolo
Yeah. So then maybe try and isolate where that animation is being shown. Is that contained in something that has the dimensions already set so that even if it hasn't fully loaded yet, it will still take up the amount of space it needs to take up, just kind of as a blank image, I guess?
00:18:58 - Carol
All right, thanks. I will definitely read about this more as well.
00:19:02 - Anthony Campolo
Yeah, I'll pin just a couple links to the top as well. This is one of those things I highly recommend. Anytime you have an issue related to Core Web Vitals, these types of things, there's always good resources on web.dev. That's the first place I go to try and parse any of these weird core web vitals things.
00:19:24 - Carol
You know, one more thing. When I'm looking in the Vercel analytics over there, my score is showing that it's good, so probably it's all right.
00:19:35 - Fuzzy
Yeah.
00:19:36 - Anthony Campolo
Yeah. Typically that's a good first pass. There are ways in which you can get good scores, but things are still kind of janky in ways they can't detect. But those tend to be weird edge-case kind of stuff. So if you're just running your own personal site and you're getting all hundreds, that's usually a good sign. I would just recommend checking in on, because that might be just running on your home page, so if you click into more deeply nested pages, are you still getting hundreds or are you getting different scores?
00:20:08 - Carol
I will do that. I do have some pages other than the first page there.
00:20:15 - Bro Nifty
Oh, yeah. Anthony was right. I was wrong. I said responsive. It is related to responsive, but it's more related to having a placeholder. So if your animation comes in, it's not related to whether it's starting or not, it's whether there's a placeholder or not. So if you're lazy-loading something and it comes in later or whatever, then does it push the whole page down when it pops in, or did you make a blank space that's the exact same dimensions whether it's there or not?
00:20:56 - Scott Steinlage
But...
00:20:57 - Bro Nifty
So yeah, it's related, but not exactly. So yeah. Anyways...
00:21:02 - Anthony Campolo
The explanation for cumulative layout shift and then how to optimize cumulative layout shift, these are fun terms we learn because of Lighthouse. All comes back to Lighthouse. Yeah. Do people want to have thoughts on that? Or do we want to kind of shift into the Remix v2 discussion? And Scott, you can go ahead and give us a station break while we're at it. Looks like we got two people coming up.
00:21:33 - Carol
I did have one comment on the Aria stuff. I had to step away for a minute.
00:21:37 - Anthony Campolo
Yeah, go for it. Yeah.
00:21:39 - Carol
The one thing I noticed when trying to use it with Next, and probably with frameworks like Remix, is it was harder to use with server rendering because it relies heavily on context and whatnot. So you do end up wrapping anyway. There were some unnecessary wrappers, things like what shadcn doesn't have to deal with, and it was more built from the ground up to work with newer frameworks like Next, or server-rendered frameworks like Next and hopefully Remix. So I think that might make adoption harder unless Aria fixes those problems or changes their strategy to better support Next and things. That would just be something to keep in mind.
00:22:27 - Anthony Campolo
So it's probably okay given its age.
00:22:30 - Carol
It was probably meant for a Create React App-type app where it's all client-side rendering.
00:22:35 - Anthony Campolo
Yeah, I'm sure. Right. Yeah, that was some of the stuff that...
00:22:38 - Bro Nifty
was some of the things I had...
00:22:39 - Carol
to work around when playing with it with a Next-based app. Anyway, just thought I'd close off that thought process.
00:22:48 - Anthony Campolo
Yeah. Thank you. Brad and Fuzzy, what's up, guys?
00:22:51 - Fuzzy
Waka waka waka.
00:22:53 - Anthony Campolo
Hey guys, do either of you have thoughts for the current topic you want to weigh in on?
00:22:59 - Brad
Yes, I'm working away here, so I can't talk much, but I'm listening. Hope everybody's doing well. I've not caught one of these for a while now. It was on the topic of the layout shift stuff. I must say I missed... I didn't hear entirely the original question from...
00:23:16 - Bro Nifty
From Carol.
00:23:16 - Brad
But to add on to that, a common example of it, which I think is what you were getting at, Bro Nifty, is like the top bar on an e-commerce site. Because I've seen this a lot on recent projects where you have maybe an offer, discount thing...
00:23:35 - Scott Steinlage
Right.
00:23:35 - Brad
You've got the discount code and it only loads for certain users, something like this. That's like the top layout-shift thing of e-commerce sites, where the site loads and then it drops down 40 pixels because it loads this banner in. And the solution to that is server-side rendering. There are sort of ways you can hack it on the front end, but the perfect solution is server-side rendering, as I found.
00:23:58 - Anthony Campolo
Yeah, like mobile especially, I get this all the time when I go to websites. It's absolutely maddening.
00:24:05 - Brad
Definitely. It's when you go to tap a button, and then by the time you're tapping it, it's moved down and you tap something else. That's one of the key examples that I know on web.dev or something. But yeah, I don't know if this is helpful at all to the original thing, but I heard and I was gonna give my two cents, and just say hey, so that's it for me. Thanks.
00:24:24 - Anthony Campolo
Word. Good to have you, Brad. What's up, Fuzzy Bear?
00:24:28 - Fuzzy
Sup, troops? How are we all doing?
00:24:31 - Anthony Campolo
Good. Doing even better now you're here, my man. Yeah.
00:24:34 - Bro Nifty
Oh, dude.
00:24:35 - Fuzzy
Literally, honestly, man, you wouldn't believe the [unclear] that I'm having right now.
00:24:40 - Scott Steinlage
Bump.
00:24:40 - Fuzzy
I'm kind of in between my dinner getting ready, and I've seen these guys on, and I was thinking, well, sorry, you're going to be talking about Astro at some point. Somebody needs to represent.
00:24:51 - Anthony Campolo
What's the Astro 3.0 news? I was just watching the stream with James Q. Quick and Ben talking about Astro, and we're building JavaScript Jam on Astro right now. So relevant to our enterprise, yes.
00:25:04 - Fuzzy
Oh, good. Right, so improvements under the hood, right? Predominantly, v3 is the maturity one, right? I love the fact that we're at v3. Legit, the project's two years old, we're on our third stable version release, you know, and it's been battle-tested.
00:25:21 - Carol
This.
00:25:21 - Fuzzy
There's been, what, I think they were on release candidate 7 or 11, one of the two, right? And the numbers in between. But yeah, it's been tested right before it's been put out into major release. So it's like the View Transitions API. Oh my God. Oh my God. Like, this is...
00:25:44 - Anthony Campolo
Yeah, that's going to be a big one. I'm excited for that just because I've heard about View Transitions so much. This is the first framework I've seen that's basically like, here, config, and then it just... I don't know, because I think...
00:25:58 - Fuzzy
It's not that either. You don't need it in the config either, bro.
00:26:02 - Carol
Right.
00:26:02 - Fuzzy
Because that's the thing, right? Astro does this thing where we put it in the experimental flag in the config while we're testing things in development for a while, and it feels like that feature has been there forever. That's what the project likes, when the feature set has been there for that long where it's already ingrained in the code base. All you need to do is just delete the flag from the config, but your implemented code of that feature set is already there, if you get me. We just graduated out from experimental into the major code base. There is one big breaking change, I would say, for those of us who are using Astro. The Astro image component has been super overhauled. The imports need to be updated, basically, is what I'm trying to say. All that is in the box.
00:26:55 - Anthony Campolo
You go to the experimental, or the assets folder now?
00:26:59 - Fuzzy
Yeah, it's gone into the assets folder.
00:27:01 - Anthony Campolo
Yeah.
00:27:02 - Fuzzy
Which I had been crying about ever since version 0.2.2, right? It's finally here. Legit, there are so many good things, and there's another treat that these guys probably won't notice unless you run previous versions of Astro and just run the build times to see the difference. But this one here is significantly faster than the previous versions of Astro.
00:27:31 - Carol
Yeah.
00:27:32 - Anthony Campolo
Does that make a difference in just build time or also dev server startup time?
00:27:38 - Fuzzy
Both.
00:27:40 - Anthony Campolo
That's one thing I noticed. With my blog, I've got maybe 100 pages, but even that, because they're big chunky markdown pages and a pretty big initial cold start, every time I start my dev server it's not a huge deal, but it's something I always notice.
00:27:55 - Scott Steinlage
I know.
00:27:56 - Fuzzy
I mean, the thing is, right, in Astroland, because there's two sides of things with Vite, right? There's the dev server, there's Vite land and Astroland, right? So in Astroland, Bjorn, Emma, and Nate and others in the core team, basically Erica, you name them, were progressively refactoring the code base. Originally there were a lot of things being done using async generators under the hood to stringify everything, et cetera. But that's no longer the case. They've made a lot more things synchronous. They really have fixed things up a wee bit. They're saying around 30% faster, but to be honest, I've noticed they're at least twice as fast.
00:28:57 - Anthony Campolo
Awesome. Aside from that, actually, I just pinned this. This is very cool. You have a post on the Google developer, the Chrome developer blog, about Astro View Transitions with a byline by Fred, Matt, and Maxi, and then Addy and Kara Erickson. So this is legit. And this just dropped today.
00:29:22 - Fuzzy
For real? I haven't seen that. I mean, to be honest, Maxi was one of the first people in the community who was really behind the View Transition API as soon as it was getting...
00:29:36 - Anthony Campolo
I remember he did a Syntax episode about it. Exactly, yeah.
00:29:40 - Fuzzy
I mean, it was just the fact that he was using Astro. The core team and him kind of engaged, and yeah, the moment it landed and the browsers were taking it seriously, that's when the core team decided to take it seriously.
00:30:00 - Scott Steinlage
And put it in there.
00:30:01 - Fuzzy
Because in all honesty, that's the one thing.
00:30:03 - Scott Steinlage
Right.
00:30:03 - Fuzzy
It's like we were saying that for a while. The View Transitions API was always on the radar to see where it landed. We're all happy where it's landed. We're happy how it's been implemented. And honestly, dudes, it's like legit magic.
00:30:20 - Bro Nifty
It is really nice. It is really nice. Yeah. It was Addy, who works on the Chrome team there and wrote the patterns, I think it's patterns.dev, with Lydia.
00:30:28 - Fuzzy
Yep, yep.
00:30:29 - Bro Nifty
Together, yeah. So he's all up on the Chrome team and doing all that stuff, and then wrote the write-up on Astro. That's one thing about getting in early on some of these patterns and some of these features and some of these frameworks and different things, these libraries, is that you can get in the mix and talk to people who are doing very important things. It's just like, wow, what a great way to really get in there, right? This is amazing. This is great. So amazing. Yeah, yeah. It reminded me because basically it looks like what they did, they implemented this sort of like an iPhone app or whatever, like a mobile app. You can do kind of like a slide and then it goes to the next thing, sort of like a swiper.
00:31:21 - Scott Steinlage
Yeah, yeah.
00:31:22 - Fuzzy
Slide animation, yeah, yeah. So basically it kind of comes with a bit of CSS3, right? And the way the View Transition API works is effectively taking a snapshot of your current and a snapshot of the new and throwing the two together. It's holding the two snapshots in memory at the same moment in time.
00:31:47 - Scott Steinlage
I mean...
00:31:47 - Fuzzy
Yeah, cool. Yes, that slide one is really cool. Personally speaking, I like the morph. I like morphing between things, man. It's so funky.
00:31:58 - Bro Nifty
Yeah, that's cool. I'm so glad that these smart people got that implemented because I was looking at something like that in... the same guy who created React also works on ReScript, and that's sort of like some weird functional programming thing. I don't remember the guy's name, but somebody who...
00:32:19 - Anthony Campolo
Jordan Walke.
00:32:20 - Fuzzy
Yeah, Jordan.
00:32:22 - Bro Nifty
So somebody who...
00:32:22 - Anthony Campolo
My question is...
00:32:24 - Fuzzy
Sorry, guys, I need to go. I'm getting a phone call. All right.
00:32:27 - Anthony Campolo
All right, cool. Well, I'll ask about star wipes later. All right. Yeah, you were talking about ReScript. What's the tangent there?
00:32:37 - Bro Nifty
The tangent is that they had implemented this in ReScript, and I was trying to follow it and was like, oh man, I'd love to have this work on my...
00:32:47 - Anthony Campolo
On...
00:32:47 - Bro Nifty
It was just regular HTML and CSS and Midjourney photographs, a whole library of photographs from Midjourney. Just HTML and CSS, just vanilla UI with ReScript, not like JavaScript. It was ReScript, and they were doing this animation, this transition, whatever this is called we're talking about right now, this transitions API, exactly, the view transitions, but in ReScript. And I was like, oh man. But I can't follow that code. I'm not smart enough. But it looks like they basically used that and then put it into Chrome, is what I understand right now. Astro has implemented it. I haven't actually used it directly from Chrome, or implemented this at all. But yeah, I did see this a while ago, and it did overlap with the similar thing with mobile transitions.
00:33:44 - Fuzzy
Oh yeah, no, it definitely feels like the prep on the browser side of things is to bring in more of a feature set from the mobile world, so that way we can make the web properly cross-platform. So that way we have APIs for the mobile that... it happens, you know. There's just a lot of work to it. But gentlemen, talk about a lot of work, I need to run. Sorry it's been so short.
00:34:12 - Anthony Campolo
Good man. Thanks for joining. Great to chat.
00:34:15 - Fuzzy
Right. Peace and love, and keep well, right?
00:34:21 - Anthony Campolo
Scott, what's up, my man?
00:34:24 - Scott Steinlage
Yo, what's up, everybody? Thanks, if you can understand what I'm saying. Thanks so much for joining. Appreciate y'all. We do this every Wednesday, 12pm Pacific Standard Time. Be sure to follow us if you're not already. That way you can be notified, let you know when we're going live, you know? And you know what? Also check out our newsletter, JavaScriptJam.com. Sign up right there. It's free. There's some value there for you, though. We talk about all the latest and greatest tech, web dev, JavaScript, obviously, and more. And Anthony's the one who writes that up every week, puts some time into it. So yeah, give it a good read. That's typically what... Remix, Remix... typically that's what we're talking about when it comes to Wednesday. And we have some fun guests that join us occasionally as well. And not just that, just fun people who hop in like Fuzzy and obviously our regulars, Bro Nifty, Jason, Brad, many, many folks. So yeah, good time, good times. Yeah. Thanks for joining us today, Carol. Appreciate that. And it doesn't matter whether you're a beginner or whether you're an advanced developer, we love to hear from everybody.
00:36:02 - Scott Steinlage
But be sure to request to come up, ask questions, state facts, comments. Doesn't matter. We want to hear everything. Yep, yep, yep. So exciting stuff here with Lighthouse, Remix, Astro build. Like I said, there are some big things that have happened over the last couple weeks here, even just really this week, so it's been pretty cool to see all this tech making strides. It's fun.
00:36:32 - Anthony Campolo
Oh yeah, yeah. It's always something moving forward. What's fun about having so many different frameworks, so many different teams and people working on stuff? I've not been without a headline since I started.
00:36:48 - Scott Steinlage
Yeah, that's true. It'd be hard pressed not to, sure.
00:36:53 - Anthony Campolo
And people are talking about how nothing happened in August, and there's kind of some truth to that. But at the same time, even if you look for minor releases, there's big stuff happening, and even some major releases are release candidates for major releases. Like Remix volume two, version two, right?
00:37:17 - Scott Steinlage
Yeah, exactly. And you know, it's so funny, here's another one we didn't even include in here, which is OpenAI's Enterprise, you know.
00:37:25 - Anthony Campolo
Yeah, it's that type of thing, though. What do you... did they have a pricing for it, or were you just joking when you said it was gonna be like 10 grand?
00:37:33 - Scott Steinlage
I was kidding. You have to contact sales to even get a number.
00:37:37 - Anthony Campolo
That's how you know it's real enterprise. A real enterprise solution would never tell you the price.
00:37:43 - Scott Steinlage
That's how you know it's going to be expensive.
00:37:45 - Anthony Campolo
Yes, exactly.
00:37:46 - Carol
Sorry, I missed the product. What was it?
00:37:49 - Anthony Campolo
ChatGPT Enterprise.
00:37:56 - Scott Steinlage
Unlimited access, folks. Unlimited. Yeah, yeah.
00:38:01 - Anthony Campolo
I would not make good use of that access on account of the enterprise. I would just keep asking it stupid stuff about philosophy and things for 10 grand a month.
00:38:16 - Bro Nifty
The guy who does the AWS cost stuff, he has some consulting organization. He had a funny take. I don't have it pulled up, but it was about Corey...
00:38:30 - Anthony Campolo
Corey Quinn.
00:38:31 - Bro Nifty
Yeah, funny.
00:38:34 - Anthony Campolo
What's his take?
00:38:36 - Bro Nifty
Oh my God. I don't have it offhand. I can't do it justice. But he was basically saying, oh yeah, enterprise. Let me guess, let me guess. What's the enterprise offering for ChatGPT? Like, they put it in a cargo shipping container kind of thing and dump it on the thing and let you self-host it or whatever. It was just something you just run...
00:38:57 - Anthony Campolo
ChatGPT in Docker, basically. Yeah, I could totally see that. Nice, nice. Yeah, I'll go ahead and... Oh yeah, there it is. I already got it up there. So yeah, check that out if you're curious about enterprise ChatGPT and you just can't get enough ChatGPT in your life.
00:39:22 - Scott Steinlage
Really want to support them.
00:39:24 - Bro Nifty
Him and Dax have the best AWS takes. They're just constantly ragging on AWS. It's funny. No offense, I like AWS, but they have really funny...
00:39:33 - Anthony Campolo
Well, it's funny because Dax's entire company is by definition built on AWS. He built a tool that could have been called AWS lock-in. And Corey is paid to give people advice on what to do about their AWS. Every single piece of work they do is with AWS, and then they just trash it every day. It's pretty incredible.
00:40:00 - Scott Steinlage
I mean, that's Twitter. You have to have something to constantly throw bricks at. If not, then you're not going to be anybody on Twitter. Sorry. Which is why, you know, I'm not, so...
00:40:25 - Anthony Campolo
Hey, you're getting up there. Before you know it, you'll have a thousand followers.
00:40:29 - Scott Steinlage
Oh, joy. What's the engagement, one of a thousand? Yeah. Yeah, buddy. Well, thank you all so much. This has been so fun. Been a great time thus far. Love the joke.
00:40:43 - Anthony Campolo
So does anyone actually care about Remix v2? Apparently it's got future flags, which means they built, not feature flags, future flags. Because they're like, we're going to build this thing. It's not a thing yet, but it's going to be a thing. So we're going to make your code work like this thing exists, so that when the thing does exist it won't break your code. Which is actually, I hand it to them, a very smart idea.
00:41:09 - Scott Steinlage
Super smart, yeah.
00:41:11 - Anthony Campolo
So the idea being that if you kept up with these future flags, when v2 drops it will be like you just upgrade your number and you won't need to actually change anything or make any modifications to your code because you would have already made those modifications through the future flags that were in v1.x versions. That's at least the idea I'm getting from the blog post. I don't have any Remix apps in production, so I can't say for sure, but that's the vibe I got.
00:41:42 - Scott Steinlage
Geez, you should get on that. Set up a Shopify store.
00:41:48 - Anthony Campolo
Hey, bruh. Yeah, I could sell...
00:41:50 - Scott Steinlage
Make a headless Remix.
00:41:51 - Anthony Campolo
Shopify templates.
00:41:53 - Scott Steinlage
Yes, make it headless.
00:41:57 - Bro Nifty
One thing I will say about Remix: I was working with Qwik, which is probably the biggest main competitor there, and I like Qwik a lot, but I feel like it's not quite as snappy. The responsiveness with it feels a little buggy when you're doing a mutation.
00:42:11 - Anthony Campolo
Which one? Qwik or Remix?
00:42:13 - Bro Nifty
Qwik, Qwik. Qwik, not Remix.
00:42:14 - Anthony Campolo
No, it's a lot newer, so it makes sense.
00:42:17 - Bro Nifty
Remix is golden. It has all the built-ins that Next.js makes you do manually, and basically the people over at the React core team basically copied the work of Ryan Florence. You got Remix dialed in. It's been dialed in from the beginning, and Next is just now getting up to speed. There's just a richer feature set. It's more mature in Remix than Next. But that's my comparison. But yeah, with Qwik, which would be the kind of standalone non-React one, you can pull React into it just like you can with Astro. It handles standalone components and kind of composes them together. But Qwik City on its own runs really well if you want it really fast. But as far as the mutation story, it feels a little buggy to me.
00:43:22 - Anthony Campolo
Yeah, that doesn't surprise me because, not having React itself to build on, you gotta probably do a lot of heavy lifting just to get to even parity with that, let alone then build a meta framework on top. So yeah, I'm still pulling for Qwik. I think it's just a cool idea. So I always like it when someone comes in and tries to shake up the game, and I'll support them pretty much just for that reason and because I like the team. But if I was literally giving some advice on what to put into production, it would be a hard sell to sell someone on Qwik today just because of where it is in its life cycle, and I'm sure they would acknowledge that.
00:44:08 - Bro Nifty
Yeah, yeah. I bought a bunch of courses from this company that uses both Next and Qwik, and they liked Qwik better because they didn't have to deal with useEffect, and the dependency management is kind of automatic in that. I'm gonna come and check that out. But yeah, that guy liked it better than Next, so he's just like, yeah, this is a lot less to maintain. It's quicker to get through. And there are mutations in that too. It's a SaaS app which combines a bunch of different stuff. It's called Code Raiders. Not like I'm trying to sell, I'm not trying to sell.
00:44:47 - Anthony Campolo
No, you're fine. Yeah, Code Raiders, like Raiders of the Lost Ark.
00:44:53 - Bro Nifty
Yeah, yeah, yeah. So they got a bunch of... they got Web3 and a bunch of different apps. Got this backtesting, like financial-strategy backtesting. So it's like, if you did this strategy, this is how it would have paid off, and if you did this one, whatever. So it's got this whole thing. Did that Next.js...
00:45:13 - Anthony Campolo
Do they do it with crypto?
00:45:16 - Bro Nifty
I think he just did regular market stuff. You could have done it with crypto.
00:45:18 - Anthony Campolo
I mean, yes, it's all the same. It's just numbers going up and down at the end of the day.
00:45:25 - Scott Steinlage
Cool.
00:45:25 - Anthony Campolo
Yeah. I think I have the right link for that. I'm posting that right now. Yeah. So many frameworks, so many things you can do with them. Is that the Code Raiders you're talking about? CodeRaiders.com.
00:45:43 - Bro Nifty
They don't have, surprisingly enough, they don't have a...
00:45:47 - Anthony Campolo
They don't have a website?
00:45:50 - Bro Nifty
No, they have a website.
00:45:50 - Anthony Campolo
Yeah.
00:45:51 - Bro Nifty
They don't have a presence on... I haven't found them in terms of social media, though. They just have the website. I found them from a Google search. I was just searching for Qwik.
00:46:03 - Anthony Campolo
Are the courses good? Like, have you actually gone through them?
00:46:07 - Bro Nifty
Yeah, they're good. Unfortunately, because Qwik is moving so fast and they have breaking changes, there is some broken code because...
00:46:17 - Anthony Campolo
Yeah, I would not build a course around Qwik. I would straight up say, you should wait. I guess they hit 1.0, so from that respect you could. But if they had built it before that, pre-1.0, that's probably where they would have gotten caught.
00:46:36 - Bro Nifty
Yeah, the main thing was that in the routing scheme, it used to be you could name a file anything, but now it has to be index.ts or index.tsx in a named route folder. So that's why it was breaking. Everything else is fine, though.
00:46:58 - Anthony Campolo
Gotcha. Well, I'm looking at the courses right now, and I see every single thing in the courses list is either GPT stuff or crypto stuff. I don't even see any frameworks. I'm not sure what courses you're even talking about, but these look interesting. ChatGPT AI voice chatbot build with React and FastAPI combo, build auto-GPT code-writing AI tool with Rust and GPT-4.
00:47:25 - Bro Nifty
Okay. Yeah, there's one that just talks about Qwik for a SaaS, and it kind of combines a bunch of different services. It fronts it with a... I see.
00:47:38 - Anthony Campolo
So there's the courses section, then there's the code section. So this is not a course, this is just code. It's only 15 bucks.
00:47:47 - Bro Nifty
Oh yeah, interesting. Yeah, the code doesn't work out of the box, though. But there's a YouTube...
00:47:53 - Anthony Campolo
This was created in January 2023, so yeah, that makes sense. That was way pre-1.0.
00:48:01 - Bro Nifty
Yeah. So the scheme is that you can walk through the YouTube course and it gives you all the stuff, but it doesn't give you the code. If you want to buy the code and run it, you can. Of course it doesn't work, though, because it needs some...
00:48:17 - Anthony Campolo
Yeah, if you pay for a template, the least you could ask is if the thing actually runs. Seems like a pretty baseline requirement.
00:48:31 - Bro Nifty
It's good, I think. I think the fundamentals are good, though. But yeah, it doesn't run as advertised, though. Yeah.
00:48:43 - Anthony Campolo
Okay, well, we gave him a little bit of press. It sounds like they're trying their best. So we'll give them credit for even building a Qwik course at all. That's a big lift. But that's cool. Yeah. I think the more content, the better. Even if it's slightly broken content, that's better than just nothing, you know?
00:49:06 - Bro Nifty
Yes.
00:49:07 - Fuzzy
Word.
00:49:07 - Anthony Campolo
All right, well, I think we're... wrap it up here.
00:49:11 - Carol
Right.
00:49:12 - Scott Steinlage
Can you hear me?
00:49:16 - Anthony Campolo
I can hear you.
00:49:17 - Fuzzy
Yep.
00:49:17 - Scott Steinlage
That's weird. It wasn't showing that I was talking. Something interesting about Astro, though: instead of localhost 3000, it's now localhost 4321.
00:49:31 - Anthony Campolo
Oh, is it?
00:49:32 - Scott Steinlage
Yeah.
00:49:33 - Anthony Campolo
That's funny because Redwood's always been 8910. So having numbers in a certain order that makes it easy to remember is, again, something that Astro ripped off from Redwood.
00:49:45 - Scott Steinlage
But it's so funny, though, because 4321, liftoff.
00:49:47 - Anthony Campolo
Right. Like, that's pretty brilliant.
00:49:50 - Scott Steinlage
Yeah.
00:49:50 - Anthony Campolo
Is that in Astro 3?
00:49:52 - Scott Steinlage
Yeah.
00:49:53 - Anthony Campolo
Wow. Good for them. We're going live tomorrow, right?
00:49:59 - Scott Steinlage
We'll...
00:49:59 - Anthony Campolo
We'll have to. We'll upgrade to Astro 3.
00:50:02 - Scott Steinlage
Yeah, we'll do it. Just so we get 4321 in there when we do some stuff. It should be fun. Although technically we don't need the localhost at this point because you've got something out there. But anyway.
00:50:18 - Anthony Campolo
Well, yeah, but when you're developing it, you're not just...
00:50:20 - Scott Steinlage
Yeah, yeah, yeah.
00:50:20 - Anthony Campolo
Ship to production every time you want to see something change. Why not?
00:50:23 - Scott Steinlage
Why not?
00:50:24 - Anthony Campolo
Why not? Even Edgio, nothing's stopping you. Ship to production wherever you want. You got future branches, you got side branches. You got all sorts of branches.
00:50:34 - Scott Steinlage
Branches. They're just not on Redwood branches. Oh, man. All right, cool. Well, it's been fun, folks. Thanks for joining us. Always good conversation here on Wednesday. We'll be here next Wednesday. Well, actually, Anthony, I don't think you'll be here next Wednesday. Yeah, you'll be here. Yeah, yeah.
00:51:00 - Anthony Campolo
I'm taking off Monday and Tuesday.
00:51:02 - Scott Steinlage
Okay, right, cool. All right, see you next Wednesday, 12pm Pacific Standard Time. Be sure to bring your pants. What? Your pants. Yeah, pants.
00:51:10 - Anthony Campolo
You don't need pants for Twitter Spaces. What are you talking about?
00:51:15 - Scott Steinlage
All right, y'all. Peace out.