Live from Remix Conf!

Hey, everybody. Welcome!

Welcome to JS Party! This is a live recording.

And at a real party too, in person.

A legit party.

Yes. An after-party, in fact, for the Remix Conference.

Wooh!

Super-exciting.

Yeah, it’s really exciting. I’m here with Ali, I’m Divya, and we are also here with Kent C. Dodds!

Hello! Happy to be here.

Yeah. Kent organized Remix Conf, and also is part of the Remix community. Do you wanna talk more about Remix Conf?

[04:05] Yeah, I would love to talk more about Remix Conf. Thank you so much for coming and being here at the conference. Remix is a web framework; we talked at length about it a couple episodes ago, so you can go back, and we’ll link to that… But yeah, so it’s a web framework for building awesome websites, and when I joined the team back in November, I thought we just should do a conference. It was one of the first things that I did, was start that up. We’d just barely open sourced, but I knew that we had a good community going already with the closed source thing, and so I figured we could probably get 300 to 350 people in Salt Lake if I had the right team to organize the conference and put things together. So I got the right team, and we’ve got the same group, it’s Zero Slope Events, the same group that does React Rally; they’ve done a couple ReactConf, NGConf… Yeah, a bunch of tech conferences. They’re amazing. We’re in the same venues React Rally has been in the past, and we’ve got 330(ish) people at the conference.

That’s awesome. That’s actually a really impressive turnaround on a conference, too. I feel like these things take forever to plan, so six months or so is pretty impressive.

I feel actually pretty proud of that accomplishment.

Pat yourself on the back for that. That’s you. [laughs]

What made you guys wanna have a conference in the first place, considering it’s a project, and you’re building the community? What was the impetus for that?

Yeah, so actually, I was thinking about a Remix conference before I even joined Remix. I was like, “Boy, it sure would be cool to have a Remix conference.” I’d been using Remix before I joined for over a year, and I just loved it. I didn’t wanna talk about anything else… So when I joined the team - this was after they’d gotten funded, and we just said – one of our primary goals was adoption. And Remix is basically an evolution of React Router, so we already have really good adoption. Basically, 7 in 10 React apps are using React Router, so there’s a lot. But we want also to just highlight what the community is doing with the server aspect of what React Router is, which is now Remix.

So I think the idea was we wanted to get people together so that we could help them inspire each other to know what cool things that you can do with Remix. And then also, to share some of the things that we’ve been working on, and that was Michael Jackson’s keynote, which was just like “Here’s a bunch of things that we’re working on… And now I’m done, let’s hand it off to the community.” But yeah, this is definitely not like a money-maker for us or anything. We’re just trying to highlight the community.

That’s awesome. And I wanna shout you out for doing a lot of unique things for this conference too, of having us go out into the city and get lunch in groups today; I thought that was really unique, I’ve never seen that at a conference before… And then having this event tonight, and the Hack and Hang last night… So lots of really cool events. I also really liked the single track and the speakers room [unintelligible 00:07:04.15]

Oh, thank you. Yeah, we borrowed a lot of ideas, and some of these ideas were my own… I’ve been to a lot of conferences, and a lot of things that I like, and there’s things I don’t like about conferences… You’ll notice, we do have music, but you will still be able to hear other people talk when you’re at this after-party. At lots of conferences it’s just like blaring music and you have to yell at each other.

So eating out in the city - that one I borrowed from React Rally… And we also gave our speakers some spending money in the city… Because when you go to speak, you don’t wanna leave with less money than you came. That’s kind of annoying.

For sure.

That’s the whole idea, is like I can go for free. That also I borrowed from React Rally. But one thing that was an original idea that I’m really proud of is we also had back-up speakers. That’s not original, but we recorded the backup speakers’ talk last night, and they’ll be put onto the YouTube channel like usual.

That’s so cool.

I’ve been a back-up speaker before, and you’re in this weird place where you’re like “I hope that somebody gets sick, but I actually don’t…” [laughter]

No Covid. [laughter]

[08:09] Yeah, absolutely not. So yeah, that was one thing that I’m excited that it will be able to be heard. They’ve put a lot of work and effort into preparing those talks. I also put the Twitter avatars on the badgers.

That’s also smart. So people can recognize you.

Yeah, exactly.

Yeah… Unless your Twitter picture is like ten years before your current, which I think many of us are guilty of doing…

Yeah, for sure.

We’ve definitely changed in the last two years of not going to conferences…

Absolutely.

At least I have.

I was thinking the same. And plus if you love drawing too, like their profile pictures.

Yeah. So it was super-fun. And after the conference day, now I have a lot of ideas of cool things that we’ll do next year.

That’s awesome. And it keeps going tomorrow, too. Y’all are doing the hangout day.

Yeah, yeah. Originally, I wanted to take everybody to Lagoon, it’s this theme park and you go on rollercoasters and stuff… But they’re only open on weekends in May, so…

Oh, okay… [laughs]

I’m somehow unsurprised that you wanted to take people to an amusement park… [laughs] Not surprised at all…

That’s my jam, that’s what I do for fun. It’s logistically challenging to do stuff like that.

Sure, yeah.

But it was like “But I still want people to feel like they can go out and do something fun”, so I just came up with this idea to think of a ton of fun things that people could do and that they would do with each other if they just had the inspiration to do that… So we’ve got - I don’t know, probably a list of 20 things and places people can go… And we had one person run a marathon actually on Saturday, like a half-marathon…

Woow…!

And we have a bunch of people playing pickleball, and disc golf… And I actually went on a one-wheel ride with a bunch of folks today, which was sweet… And yeah, tomorrow people are gonna be going out and doing fun stuff.

So really, this is 100% – like I said, we’re not making any money off of this. In my mind, if we end up with more money at the end of all this, then that’s a failure in my mind, because we could use that money to do something cool for the conference. So it’s 100% a huge thank you to the sponsors, because this wouldn’t have been possible without them. We just wanna get the community together and have the conversations that you have at an in-person conference.

Cool.

That’s awesome. Should we talk to some of the speakers?

Yeah, let’s get some speakers up. I’m gonna leave now, thanks everybody… I’m gonna hand this over to some speakers, so thank you for having me.

Yeah, for sure.

For sure, for sure. Thanks for having us.

Hello, Henri.

We have lift-off! [laughter]

Welcome!

Bonsoir! I’ve gotta say good evening to both of you. I haven’t seen either of you in like - well, years.

Yeah, exactly.

It’s been years, yeah.

I think we’ve met for the first time in Amsterdam, before all of this craziness happened…

I feel it was JSConf EU.

Yeah, or the Mozilla Conference.

Berlin, yeah.

VSource

Oh, you are correct. I think it was VSource maybe. I thought it was JSConf EU.

Same thing. Same week.

Either way. I’m happy to see both of you guys. Ladies. Pardon me. So it’s been a hot minute… And actually, when I found out this was happening, I’m like “Oh my god, I totally remember this”, because I think I attended one, and I can’t remember where it was, but it was a lot of fun then, too.

Yeah, that’s awesome.

I think live podcasts are kind of cool.

Yeah, and a lot has changed for you. You’re at RealWebPageTest now, and doing stuff there…

Hey, merci… Yeah, you know, having fun, just –

Tell us more about that.

Yeah, introduce yourself, for everybody who’s listening. We know you, but…

Oh, okay. So hello, bonsoir, all the listeners out there. My name is Henri, and I’m mostly known as @HenriHelvetica on Twitter. That Netscape avatar that you thought you saw - you did see. And I’m here at Remix Conf in Salt Lake City… And I spoke earlier today and I talked about performance, but specifically with regards to a company I work for, which is WebPageTest by Catchpoint… And where we live and breathe performance, user experience, and in part, developer experience now as well. So yeah, it’s a pile of fun.

Yeah, it was cool to see you walk through that process of using RealWebPageTest, and the different parts of it that people might not be using… Because I think there are parts of WebPageTest that I’m like “Let me just run it through and see what the LCP is”, and that’s all I care about, and that’s it, and then I close it.

Yeah, and I totally understand that. That’s just natural. We’ve grown accustomed to with whatever product we use; it does something well that we like, and we just kind of dive in and use it for that and just get out. But considering sort of like the environment that has been created of late, where performance is really being discussed more prominently, I think there needs to be some discussion about the features that are available to them, that they might not know about, and specifically, what they do.

And the biggest picture - I’d say bigger, but I think the biggest picture overall is what I’ve talked about, which is performance literacy. I think that – I’m not saying it’s not there, but generally, I think it could improve… And that’s going to be sort of like my mandate this year, for sure, my campaign. It’s just to show people, having them understand what’s going on, why they need to particularly pay attention to one part, or understand what it means.

Definitely. I think especially in the frameworks space… The CSS, HTML, JavaScript developers have always really talked about performance a lot, and those conferences always bring it up in a lot of their talks… But today was really unique at React Remix Conference to be speaking about performance in almost all of the talks. I thought that was really cool and different compared to a lot of other conferences.

Yeah. It felt very Perf Now, you know?

Yeah. [laughs]

Yeah, exactly.

[15:37] You know, I have to say this… When I first found out that this conference was happening, it was immediately on my radar, because I felt Remix was buzzing. And I also felt that they had been so adamant in indicating to people, letting them know that they were pretty performant in using our tool, so I just could not miss that… But a) I was happy I came, and b) I remember maybe like three days out I was looking at the actual speaker line-up and their abstracts, and I couldn’t believe the amount of performance conversations that were taking place… And I come from a moment in time where it was myself and that was it. And to have ongoing talks about like a little performance here, and there, and your LCP is going improve…

Divya, you might remember in 2019, during my keynote, I said at Performance Now in Amsterdam “Lighthouse is largely responsible for what’s going on in terms of people chatting about it. And now you add Lighthouse, Core Web Vitals and there’s like a huge tent of people who are pretty interested… And that’s why I think - you know, when I joined WebPageTest, it was like the best time on Earth to be into performance right now. There are so many people who want more information.

Yeah. Lighthouse is such an entry point for so many people, but still so many people don’t even know about that… I talk about it in some of my talks about SEO, and writing blog posts that are good… Just like, “Hey, also send your blog through a Lighthouse test, because it will affect your Google ranking”, and people are like, “Oh, I’d never heard about this before.”

Yeah. You know, it’s interesting, because Lighthouse - if I remember correctly, Lighthouse really started as like a PWA tool, and then they added performance, SEO, best practices, accessibility, and the PWA is still there. And now it basically has been transformed, co-opted as a performance tool. No one cares about anything else. It’s like, “What’s your Lighthouse score?”

Lighthouse score, yeah. And post it on Twitter.

And they’re not like “Oh, here’s my SEO score.” Like, “SEO? What’s that? What’s your performance score, bro?” So it has become synonymous to performance, which is really interesting, because that’s where the people chose to take it. And now it’s like, “Okay–” So today was about like “Okay, let me show you the details about these scores and these times that you see”, and there’s a lot more to it.

So I had a great time today, to open the post-keynote talk… Which - again, I didn’t know till about 48 hours before…

Oh, wow.

So – well, is Kent still here? I was actually supposed to be a pre-recorded talk.

Oh, got it. Got it.

And then I got the call, they’re like “You’ve been super-sized.” [laughter]

You’ve been promoted.

Yeah, you’ve been promoted. And then I got the top slot, and I was like “Alright, let’s go have some fun.”

That’s awesome.

So how are things with you two? Everything’s love? Work good?

Yeah, for sure, for sure. Having lots of fun building stuff, talking to people… What else could you ask for, right?

I guess so.

Yeah. I mean, it’s interesting, because I’m interested in the work that you do, and Tim, and the team that you are working with is wonderful at RealWebPageTest. And it’s interesting at least looking at the trajectory that I’ve been moving towards… So I did a lot of frontend, and now I’m pretty much full-stack towards the end of the stack, not the front… And I’m actually curious if from your experience and working on RealWebPageTest what the trends look like, as people start talking more about server-side rendered apps… You see Next.js bringing up their things, and Remix is doing – I guess they call themselves center stack… I guess full stack… But I’m wondering if you see that in the trends, or at least in the data that you guys are collecting.

That’s a very interesting question, and you may get an even more interesting answer.

That’s what I’m looking for. [laughs]

The one thing that I realized is that having sort of run the JAMstack Toronto Meetup, and being exposed there, everything that’s going on with what you discussed is still such a small part of the web. It’s obviously very new, very well-discussed in our little bubble… But you break out of that and it’s like “This is not the main discussion.”

Yeah, people are still building websites, and…

WordPress, yeah.

Yeah, though this is not the main discussion, you know what I mean?

Yeah, true.

So I’ll be frank - I’m really spending a lot of time watching what’s happening on the WordPress site, because some of you may or may not know, last fall they officially announced a core performance team…

[20:25] Oh, that’s cool.

…so my ears were like “Okay…” So I’ve been following them closely. I think I told this to someone earlier today - Douglas Crockford once said, how’s the quote go again? Basically, the frontend is like a disaster. That’s where your problems will keep coming up, day in and day out. I’m not saying that with all that’s happening on the modern development side that we shouldn’t keep an eye on that, but just - it’s still such a small pie. There’s so many bigger problems to take on, and they’re more of in a classic frontend/backend split.

That’s fair. What are you most excited about working on at RealWebPageTest now? Is there a new feature that you’re working on, or what’s new, what’s upcoming?

I mean, can I ask my lawyer first?

[laughs] Read your NDA…

Yeah, did you sign an NDA?

Okay, apparently nothing’s happening…

Okay, yeah…

You know, I will say this… I get back to the literacy idea, because that means it’s like having workshops; that means it’s like presenting, that means it’s being able to have conversations with people about performance where they can speak from a more learned place. And so this education that needs to take place, and that’s going to take place this year, I think is a lot of fun. It’s almost like the early days, say, of JAMstack. You’re like, “Oh, this is kind of interesting”, and then watching it sort of like snowball into what it is now… And the whole idea - again, I know people argued about the name, and yadda-yadda-yadda… I started to call it just the modern stack. What is going on? It’s modern development. Let’s go.

I’m excited about that, I’m excited about helping people unlock, when they’re looking at data and metrics, to be like “Oh, I know what’s going on here.”

Yeah, I guess that makes sense, because as long as we’re building for the web, regardless of what framework, stack, technology, whatever, the browser is gonna render it and performance is gonna come into play either way.

And you’re just gonna wait for the results, and that’s it.

Yeah. That’s great. And the literacy will always – there’s always a need there.

Yeah. Like any web development, there’s literacy that needs to be achieved for people to be able to speak in that confidence, where it’s like “Oh, here’s what’s going on there etc.”

I have to give a shout-out to my team, everyone at WPT, as we call it - Tim, Scott, Jeff, JQ, Jeena, Mikayla, William…

All the other people. The entire Catchpoint team…

Yeah, and I mean –

[unintelligible 00:23:09.21]

Catchpoint and WebPageTest is like this, but we’re trying to do great work, and hopefully people could come along and be part of it.

Yeah.

That’s awesome.

Exciting.

Hopefully I’ll be on your podcast soon.

Oh yeah, we’d love to have you at some point. That’d be great.

Yeah, that would be really cool. We should do a whole episode.

Something a bit more formal… I’ve been having some backchannel talks, but… We could continue that afterwards.

Yeah, we’ll keep talking

I’ve got some paperwork we could sign…

Perfect.

So let’s go. Thanks for having me.

Yeah, thanks for joining.

Thanks for talking with us.

By all means, man. Ladies, thank you. Who’s up next?

I think –

Oh, there we go. Storyblok’s in the building, let’s go!

Arisa, welcome!

Yeah, thank you. Do you wanna introduce yourself? I know you gave the Storyblok talk, so… Yeah, can you speak more to that as well?

Sure, sure. My name is Arisa, and I’m originally from Japan, but living in Germany. Storyblok is a headless CMS, and I work in there as a developer relations engineer. Not just on the headless CMS… What makes it unique is that we have the real-time visual editor, so whenever you make content changes, you can take a look at it and see in one screen.

[24:37] We’re based on the atomic design methodology; it means that you can reuse the components, as many as you want, and you can nest these reusable components in any levels. So you can only, for example, define only the necessary components that you need, and you don’t need to duplicate unnecessary [unintelligible 00:24:57.25] components.

So that’s what we have… And here for today’s talk I was showing that, let’s say, choices of choosing the technologies; I was showing as one of the examples that imagine that if you are for example in your everyday life, when you face something non-user-friendly interface, then maybe in the end you will be able to get something you wanted to have, but the journey until you will be able to get the things you wanted to have, or the things you wanted to achieve - it’s not going to be nice. Same thing could be transferred or would be applied in the tech world.

I was showing how resilient, fast, very smooth and organized experience you can get from, let’s say, Storyblok and Remix. Because on the fly, Remix already provides a very nice way to dynamically handle the routes. Let’s say anyone who doesn’t have the developer experience - they can easily create nested routes dynamically, from let’s say the dashboard and the visual editor… And developers can focus on their own work, and stuff like that. So that’s something what I was giving a talk today.

Oh, cool. So that means with the way you’re using or Storyblok works with Remix is - can you speak more to that? It’s just the routing layer and how the components get loaded?

Yeah, sure, sure. So the thing is, once you define components from the Storyblok side by giving a name of the component and by giving the levels of the components, how you want to nest, and the next step you can do at the Remix side is that - well, you can, first of all, define the component to be dynamically rendered. To do that, we provide JSON files for the draft version and the published version.

Of, for draft AND published, they’re separate JSON files.

Yeah, yeah.

Okay.

So if you wanna see, for example, a cleaner version of the draft JSON, you can just take a look at the published version… Because for the draft version we have additional property to show all these components are editable… But you don’t need to see that in the published component.

I see, yeah. Okay. Because it’s a post. So if someone were publishing like a blog or something - I mean, with Storyblok that’s what you’re doing, right?

Got it. It’s a CMS, yeah.

Yeah, exactly. So what you can take a look at from this draft JSON is that you’re gonna see all the components are in an array object. So you’re gonna see that if you want to dynamically return these components, you’re gonna actually use the map to render automatically.

Sorry, can you say that again?

Oh, sorry - you can actually map these array objects, so that you don’t have to worry about to manually create for example let’s say the component files, and you don’t need to worry about to create the logic to manually render these components. You can just call one API that is provided from our SDK.

[28:11] In Remix’s case you can just use our React SDK. So you can call one of the APIs that is fully equipped to handle all the dynamic component rendering part, so conditionally, it will decide - like, if the dynamic components are there, then it’s gonna return. But if not, then maybe you can put some nice error handling to show “Hey, the name of the component doesn’t exist”, stuff like that. And you don’t have to worry about to build this kind of workflow by yourself. You can just call this API and you just call this API as a JSX component, and everything is all set. You don’t need to worry about what kind of components the users are going to define, let’s say inside of another component. Everything is already set in there.

Okay.

How have you been enjoying the conference and working with Remix?

Oh, I am really enjoying it a lot, and I need to insist that these is one of the best conferences I’ve ever attended… I mean, this is my third time joining an in-person conference…

Oh, wow. Nice!