00:00.00
Kent
Hello everyone this is Kent C Dodds and I'm joined by my friend Jenna say hi Jenna hi this is the remix podcast where we talk about how to make your web application user experience that much better.

00:05.77
Jenna
Hi.

00:17.80
Kent
Um, Jenna I actually forgot to double check your last name. What's your last name Smith yeah awesome awesome Jenna Smith so ah Jenna and I let's see we met and I think just through the remix discord early days

00:20.40
Jenna
Oh smith a really hard 1 don't forget it and.

00:33.69
Jenna
Yeah.

00:35.63
Kent
Um, you are one of the early supporters of remix as was I at the time was not working at remix. So thank you for making it possible for remix to be a thing. Um I'd love to.

00:43.82
Jenna
Yeah, it was actually a Christmas present to myself. So on topic it was a Christmas present to myself last year I bought it at Christmas. Yeah.

00:52.56
Kent
Woo. Awesome! Very cool. Yeah,, that's awesome. Um, yeah I Want to get to know you a little bit. Um, and for the people listening to get to know you So um, yeah, just love to hear who you are what you're about, Um, what what you like And. Ah, like where you work why you use remix all that stuff. So Let's let's hear about you.

01:13.94
Jenna
Yeah, so I'm I'm Jenna and I am a ux developer. Um, and I've been doing it for as long as I can remember to be honest, probably about 20 years um so yeah I started off just actually as a designer. Tinkering with a bit of Html and Css and very quickly got bored of how opinionated designers I was there. Yeah I haven't got the patience for that like hats off to designers I don't know how they do it? Um, but yeah, like I found myself enjoying html css and coding side a bit more. So um.

01:35.19
Kent
Ah, oh no I.

01:50.98
Jenna
Ah, been doing all of that ever since I'm working at a company called modules now and it's all been front end the entire time. Um, so I'm doing like bradis primitives at the moment for modules building accessible react components and and I enjoy like. Yeah, accessibility progressive enhancement remix really stood out with me stood out to me because of that it was trying to take the web back to how I remember it being twenty years ago um and you know when I was doing stuff that long ago and Javascript was something most people disabled.

02:18.41
Kent
Yeah Wow I.

02:28.20
Jenna
So there's a lot of people disabling javascript because of security and you had to learn how to build components and things that work without Javascript so it was really really good. Fun and remix was like yes I need this in my life I want to be doing that up again. Um, so yeah.

02:40.47
Kent
Ah.

02:46.63
Jenna
Been great I've really enjoyed tinkering with remix.

02:47.60
Kent
Oh that's that's sweet. Um, so back then when um, when you had to like like back twenty years ago when you were building um websites what? what tech were you using back then.

03:03.21
Jenna
Um, well it was just h html and Css like it wasn't um I oh I was building a ph b yeah like I was doing ph p css and html stuff but I wouldn't call myself a backend developer I would never call myself a backend developer and but.

03:07.23
Kent
So you didn't have like a server side language or anything. Okay, yeah.

03:22.45
Jenna
You did sort of have to do you did sort of have to do a lot of backendy stuff to try and get a website to render and but yeah it was. It was very basic stuff. We didn't have much of a tall belt back then um and it was all like trying to support I e 6 which was awful. Yeah, um.

03:27.12
Kent
Yeah.

03:37.21
Kent
Wow.

03:42.21
Jenna
But you know it I really enjoyed it because it forced you to learn like the darker corners of these languages that that people don't really like there's a lot of powerful stuff. You can do with css that people never really tinker with because you know we have tailwind and it makes everything like it makes most.

03:57.15
Kent
Yeah I.

04:00.50
Jenna
Common things quite easy to achieve. But there is a lot you can do with Css that can sort of get rid of the need for javascript in some cases. So yeah, it's ah it's it's been quite quite simple at the start. Um, and then I learned jquery.

04:05.74
Kent
I.

04:19.38
Jenna
And that's where it all. Um it olds it all started getting more javascript even from there. Sorry.

04:21.60
Kent
Now at that at that point you're yeah yeah, you're you're just like well at that point you're just like well that maybe there are some users who disabled javascript but they just won't be able to use this app.

04:36.11
Jenna
Yeah, exactly. Well it's it's more about so it was more the progressive enhancement side of it right? where it was like okay this tab component for people that don't have Javascript will just be a load of headers with text underneath. But then when people enable javascript. It would sort of collapse into like this. Tab interface that we all are used to today. Um, so it wasn't about making the 2 experiences like for like it was you know having an experience that people without javascript could use still they could still buy things on your website. They could still access access the content and. And then people with Javascript would get this like nicer shiny um or compat like swshy youi. Um.

05:17.11
Kent
Yeah, yeah, so ah, ah for those who are unfamiliar with progressive enhancement as a term can you kind of define What that is, um, you you gave an example of the the tabs. But yeah, just like what what is progressive enhancement.

05:34.60
Jenna
Um, car. How would I define it? Yeah, it's just a a usable experience for people without Javascript and and like provide a usable experience for people without javascript and enhance it and with interactivity using Javascript.

05:52.90
Kent
No, no, no, that's good. Yeah yeah I think of progressive enhancement in like in the general sense is that um you you give them something that works with ah the bare minimum.

05:53.69
Jenna
Um, I'm not sure how to define It's ah it's ah so.

06:09.97
Jenna
Yeah.

06:12.50
Kent
That they have and that's not just a Javascript thing. It could also be the sensors that are on the device the like whatever permissions your app has so like an example of that would be if you're a pizza delivery place and you say hey like. You know and tell us where you are so we can bring your delivery and you also have this ability to say you know current location and so we we can get their geooc location from the device and and that would progressively enhance it. So I don't have to manually type it I I just because I have this capability on my device. Yeah, it can be.

06:45.35
Jenna
Think.

06:50.95
Kent
Auto-filled so that's like an enhancement to to the app but it works without that feature and so the same same thing with ah with whether or not javascript is is enabled or I think today it's more like whether Javascript is successfully loaded or if it's still loading. Um as well.

06:54.70
Jenna
Exactly yeah.

07:09.44
Jenna
Yeah, yeah I think one of the key points as well is um and like a lot of people when I talk to them about this are like well how can I build a tab component without javascript like it's just not possible and um, like well it doesn't have to be a tab component like progressively enhancement isn't like like replicating what you've built with javascript without it.

07:10.12
Kent
That's kind of how I think about it. So.

07:28.31
Jenna
Like you can. It's It's literally just providing an experience so that people can achieve what they need to achieve and and that can look and behave any way you want it to behave it just has to be accessible. Um, yeah.

07:38.82
Kent
So yeah, well and and that's actually 1 thing that um, I've had people ask me about because we do talk about how remix works without Javascript and. We try to focus more on remix works before the Javascript loads because most people are like yeah well the Javascript's going to load like it just does so but the the real power is that we like the app works before it loads. But um, even um, even in that that vein. Um, we don't really We're not thinking so much about working without Javascript because there are some things that you cannot do in an accessible way without Javascript and you've mentioned that you do a lot with accessibility. Um, and you want to talk a little bit about like what what are some of the things you need Javascript for from an accessibility perspective.

08:32.22
Jenna
Honestly I it not much but it is. There's a lot of Aria roles and stuff that connects things together. So that's all just html like attributes and but yeah, like.

08:35.87
Kent
And.

08:49.75
Jenna
When you need to add and remove those attributes That's where javascript comes in um, but a lot of accessibility can be. You can get quite far with accessibility without without javascript I mean I can't think of any I'm struggling to think of an example on the spot now where I would think oh other than like adding removing attributes and things like that.

08:49.82
Kent
And.

08:59.69
Kent
I.

09:09.21
Jenna
Um, getting the Ids of elements and putting that id into another attribute and things like that a lot of it can be done manually as well and so I can't think why do you have an example that you can think of that.

09:14.24
Kent
And.

09:20.47
Kent
Yeah, so what ah what I was thinking of was and and actually maybe this is because we're coming at it from 2 different angles where you've been doing this for much longer than I have um and so you had to make it accessible without javascript and so um, instead of ah so. Like in your mind. It's like we can build it a different way and then and then enhance it with Javascript and and now that we have Javascript. We can have these cool things so it doesn't have to be a tabs ui for people without javascript in my mind I'm thinking um well like I I just I guess I'd never really thought about.

09:53.15
Jenna
Yeah.

09:59.31
Kent
Um, having basically 2 completely user experiences. Um, as like the progressive enhancement mechanism but that totally makes sense that you could do that. So what what I was thinking of was ah like a combo box. There's no.

10:13.43
Jenna
Um, yeah.

10:14.28
Kent
Like combo box built in to the web like there's a select element and but if you want to style that or anything you have to build your own sort of combo box or type ahead or or something and and that's the sort of thing you just that will not work without Javascript.

10:23.50
Jenna
Yeah, yeah, so that again, you're talking like that's the progressively enhanced experience. A combo box is like the be all and end all like shiny singing and all dancing thing that I want at the end of it but before you get there.

10:32.58
Kent
I yeah. Yeah I.

10:41.28
Jenna
You can provide just a select box. You know like they can still achieve the same end goal. It's not as good of an experience. Um, but you know you can still select some items from a list or and that they might just put a text box on the page where you can search for phrases and then it lists them underneath and they can click those.

10:42.15
Kent
Yeah I.

11:00.73
Jenna
Like there are loads of experiences that you can do without Javascript like actually submitting forms that reload the page and stuff like that and and then you say when Javascript is enabled we prevent the form from submitting and instead we pop up this combo box dropdown thing instead. So yeah I like.

11:15.61
Kent
Yeah I.

11:20.30
Jenna
Javascript for combo boxes and tabs and everything like that. Yes, it's definitely needed if you want to create those like those interfaces but you can and you can progressively um enhance like simpler experiences to get there.

11:36.46
Kent
So yeah, you're you're opening my mind here because like I hadn't ever thought about it that way. Um I always just kind of thought Well okay so when um, ah when I got my my remix app I can have most of it working just fine.

11:39.31
Jenna
Um, yeah.

11:52.96
Kent
But yeah, if I've got like a Modal or a combo box or all these other things then like um I mean most of the app works like the trash icon to delete the thing works. But like you know this? um you know my type ahead thing maybe won't work. Um, but now I'm I'm yeah.

12:06.24
Jenna
Yeah, like the dialogue is really is a really interesting example the dialogue because years ago before component-rive ah design was ever a thing like there was no sort such thing as building react components for little portions of Uui that didn't exist but back then we still had this like dialoguey thing. Concept. So what we used to do was we would have a and a login page For example, that would be like slash login and it would have your header and your footer and your sidebar and then your logging in the middle or whatever like wherever you wanted and the fluff around your loggin page. But then we would be like ah but I'd quite like to. Render that login page in a little nodeal window when you're here on this particular page. So what we would do instead was we would use Javascript. We would load that page in an iframe in the dialogue and there'd be a piece of Javascript that would run on that page that would say check if I'm in an Iframe and if I am. Then add a class to my body that would tell the page that I'm in an Iframe and that class would hide the header would hide the footer would hide the sidebar would hide all of the stuff around the edges of the page so that you just had the little login screen in the modal and but these are all like crazy little progressive enhancement tricks that we used to do um.

13:20.84
Kent
That Wow that's that's amazing.

13:23.67
Jenna
Yeah, like and and that's what that um, tweet the tweet I posted I guess we can share it at the end for people that aren't aware of it. But the tweet I posted The reason I know about that is because of that kind of dialogue experience where if they clicked the link and for some reason the dialogue didn't open.

13:30.58
Kent
Yeah I.

13:43.45
Jenna
And something was broken. They would still go to the login page with the header and the footer on it and all the other stuff and so yeah, it's there's There's so many you don't have to provide this same experience. You can sort of hack things around a little bit to try and like know.

13:57.72
Kent
Yeah, oh yeah, that's very cool. Um, and so now now I'm just like wow like so I've just been thinking. Um, the the cool thing with remix is that your app works before the Javascript loads but in in the back of my mind was always like.

14:01.98
Jenna
Yeah.

14:17.65
Kent
Well I mean it it generally works but like you've got all these things that may require javascript now I'm like no no like you can make it work really well and so now my next question is since you have all this experience. Um you you said that remix really um, appealed to you.

14:17.84
Jenna
Um.

14:36.49
Kent
Is it is it because of this like ability that you have to progressively enhance things and and how have you like as you've been experimenting with that like what's your experience been like.

14:46.10
Jenna
Yeah, like 100% that is what drew me to Remi. Well initially what Drew me was nested layouts and nested roots and yeah and because I've been filling with that stuff for so long with like breadcrumbs and stuff like that and it's just so powerful. Um.

14:52.90
Kent
That Yeah, that's really nice.

14:59.41
Kent
Yeah, yeah.

15:04.80
Jenna
But yeah when I realized the progressive enhancement side of it existed as well. I was just like mind-blown this is because everyone always thinks you know oh well who doesn't have javascript anymore. Well you know if I'm on the underground the London underground and I'm connected. The internet and just as I go under the tunnel I disconnect and the javascript hasn't let downloaded yet. Well and I have to wait until I get out of the tunnel before I can like interact with anything like I mean you do anyway, you got you got no internet when you're in the tunnel. So even click a link. It wouldn't go anywhere but you know like there are circumstances where people's connections drop and ah.

15:28.96
Kent
Yeah, yeah, yeah.

15:40.10
Jenna
They can't download the Javascript and when the connection comes back. They're on a page that they can't use you know so like that even for accessibility. Um, we ideally would want the ids and things in the aria roles and attributes to be there.

15:43.83
Kent
Right.

15:57.87
Jenna
Before the Javascript kicks in otherwise when the screen reader is trying to read the document. It will have to wait for the javascript bundle to to rent to load before the screen reader can like use your like time to interactive for a screen reader is now like broken because they have to wait to up script as well. Like so.

16:11.99
Kent
Yeah I.

16:16.68
Jenna
Really I want all my ids on my page from the server like all my aria roles in everything all my Aria attributes and everything filled in on the server. Um, and yeah, like that side of remix to me was just like ah like this is just so much fun as well. They is so. Fun to think of how you can convert these experiences into something that someone can use without Javascript. Um I just I haven't actually so the project I'm building the side project project I've been building I started building it a year ago when I first started tinkering with remix and. Then just got swamped doing work stuff and like trying to try to manage my work life balance whenever I wasn't working I was like ah do I want to do a side project I don't know like so it hasn't had much love I haven't done any and progressive enhancement type stuff on it really at the moment but it has made me realize. Some of the remix and not remix some of our radix primitives could be improved um to work progressively enhanced and like the avatar component that we have for example, this is a really simple one and we take the image src that you give us and then we. Wait we check to see if it's loaded first so that you can do loads of loading states and things in your avatar and then when it's loaded. We put the src on the image on the image tag. The trouble with putting the image on the ssc tag when it's loaded is that now that image is never going to load on the server if there's no javascript like.

17:36.27
Kent
That right.

17:50.91
Kent
M.

17:53.64
Jenna
There's no like if we just put the src attribute on by default like it. It loaded the the image rendered with the src the htt the path of the image was on the image then I could just let that load on the server. Um, and then on the javascript side I could. Do the same thing like check if that's loaded and if it has give them this information but we're not doing that We're're. We're preventing the src from being attached to the image until it's loaded which is breaking the server-side rendered image like it just doesn't ever load the image and it's such a simple thing. It's like I never would have. Thought of that or even noticed if I hadn't tried it in remix I put our component into remix and I was like this is broken like I'm disabled javascript and my avatar never loads when it should. There's no reason why it shouldn't That's a really simple one. Um, so I've really enjoyed that it just makes you think about things a bit more and.

18:41.58
Kent
You right.

18:49.92
Jenna
Play with these components and try and try and make them work without javascript because some of it's really easy. It's not that hard.

18:54.81
Kent
Yeah, yeah, well and um, the the cool things that you can do once you do have Javascript on the page too with remix like the optimistic ui and stuff have you played around with any of of those things. Yeah.

19:10.36
Jenna
No not I've read the docs on them the chat news transition and stuff like that I've I've I did like a simple form a year ago, but the Api was completely different back then like it's changed so much since I've like properly tinkered with it.

19:13.21
Kent
And.

19:19.50
Kent
And.

19:24.78
Kent
It? Yeah yeah, it has.

19:26.88
Jenna
But I have been like upgrading every time I upgrade and read the Docs every time. But yeah I love it I Love the way that remix is going with all of that and optimistic Ui and the form stuff where they're just using like native form Apis Um, which is always.

19:35.11
Kent
I.

19:46.28
Jenna
Bothffered me about some of these form libraries that we have available to us at the moment because I've known about form data api for so long and I'm like it does all of that for you like it's there. Um, so you know it's It's really exciting.

19:52.49
Kent
yeah yeah yeah yeah I I always say like yeah yeah, I always say that it's funny. Um I I kind of I pretty much started my journey in web dev after the like. The most common practice was how you submit a form is you have an onsummit handler and the first thing it does is say event prevent default and the next like 30 lines are doing what the event prevent default would do so you're like turning it up and then manually doing all of what it would have done anyway.

20:24.75
Jenna
Yeah, exactly yeah exactly which is the why I love remix so much because it's It's not. It's teaching people how to do all of this stuff again. It's showing people what exists that what already exists for them to use.

20:31.35
Kent
Ah.

20:44.74
Jenna
Um, and it's going to be like great and I'm so excited that people are going to learn all this stuff because then there's so much more that we can do when once you have all that knowledge at the moment. A lot of a lot of stuff out. There is great and it gets you up to speed really really quickly. But it hides some of the underlying. Tech on what's going on which can be quite restricting I think um once you know it will you? yeah.

21:06.10
Kent
I Yeah yeah yeah I think that um what what I loved about remix was that I could tell that it was really nailing the fundamentals and so like there there's something to be sad for um, for hiding some of the.

21:17.36
Jenna
Yeah.

21:25.96
Kent
Implementation details I guess of building a website so that you can be productive but then exposing the web platform so that you can do what you need to do ah being able to to change things and and and understand what the code is doing.

21:28.15
Jenna
Yeah.

21:34.69
Jenna
Um, yeah.

21:43.85
Kent
Ah, without having to dive into the code of the framework and so I love that I spend a lot more time on an mdn than on the remix stocks when I'm learning to build a website.

21:45.18
Jenna
Yeah, thanks that? yeah.

21:54.80
Jenna
Oh that's cool. That's so cool. Yeah I said to someone recently like it just improves the developer experience of the web like it's already giving. It's not giving you anything new. Really, it's just improving the developer experience of what we already have and.

22:09.93
Kent
So yeah, so is remix progressively enhancing web development. Then yeah first.

22:11.73
Jenna
And it's.

22:15.42
Jenna
Yeah, like 100%. It's ah it's definite It's like when g when jquery came Javascript was so hard to work with like Javascript was. To get it to work in loads of different browsers. We didn't have these nice Javascript Apis we have now there was no query select all like that didn't exist like so it was you had to type several lines of code just to like query an element on the page and like manipulate it and bla la and and I was just like whoa I'm never going to be a developer that's.

22:34.94
Kent
Yeah.

22:46.15
Kent
I yeah.

22:50.12
Jenna
Too much that's too much but and jre came along and it was like okay we're just going to take Javascript put a nice little Api around it and make it like just make the dx better for Javascript and. Then it went crazy. Everyone was like oh I'm a Javascript developer at http://ojqueryblahblabla wow and then people started to learn javascript and that's how that's how I learned javascript because I was like you know Jquery is really cool and then I was like what's actually going on here and they taught you javascript slowly sort of um. And I feel like remix is doing a similar thing to Javascript to Jquery. It's like the platform is there and you have all of these moving parts so you can put together yourself, but it's just too intimidating and whereas remix is like provided this amazing developer experience that pulls all of that stuff together gets you up and running really quick. But you're still learning what's going on underneath you still you still know like yeah, it's you're still learning what what's powering it and and so you can use that knowledge to your advantage later on. It's great. It's really great.

23:53.32
Kent
So oh yeah, yeah, those skills transfer and that's cannot be overstated on how how useful that is. Um yeah I actually refer to remix as the jquery for the platform. Um because like like.

23:56.66
Jenna
Yeah, are 100%

24:07.35
Jenna
Yeah, yeah.

24:11.48
Kent
With with browsers and like I basically um I did a ah little bit of Java development early on but I didn't really start becoming a um, very useful developer I guess until I started doing browser stuff and we always complained with the browsers that like. But you've got so many versions and screen sizes and stuff and and that's true. Um, but the backend doesn't necessarily have it super easy either because you have lots of especially now because we have platform as a service you have lots of different platforms and even some javascript environments that aren't. And node so we have Dino and we have conflare workers and fastly has a thing and Aws has a thing for compute on the edge and they're not javascript environments and so or are they're not ah node environments and so there's there's a lot of differences on these different platforms and ah and so remix and so like building for the web isn't. Um, and I mean like you're not necessarily deploying your app to all of those platforms. So it's not quite the same thing. But um, what's nice is that you can learn remix and remix will just normalize the platforms for you and so it doesn't matter where you're deploying to because like the core of your code is going to all be the same. Um.

25:27.90
Jenna
Yeah, so.

25:30.80
Kent
And so making it you know and so that's why I kind of think of remix as jquery for the platform just to make it more accessible.

25:34.48
Jenna
Yeah I agree here. Definitely I 100% agree I ah like I've seen a lot of people saying or tweeting about oh how it's being. It's really opinionated and all of this stuff and I'm like really like no, it's it's really not okay.

25:51.60
Kent
So.

25:53.58
Jenna
It's interesting that people think that because you know they're not used to just being given the platform I guess I Just they it's It's really interesting because I'm like no no this is this is just giving you what the web is. It's not. It's not like I don't feel restricted when I use remix particularly I mean I have to pick.

25:59.32
Kent
So yeah.

26:05.40
Kent
Yeah.

26:13.40
Jenna
My deployment target and and I'm not even going to start talking about the backend and any of that stuff because that's way over my head like whenever I know it says that you can pick whichever target you want. But then I'm like right I don't want I want to try a different one now and I'm like oh how do I change it I don't know I'm too scared to touch anything. But um, yeah, it's a.

26:25.90
Kent
So.

26:32.50
Jenna
It is just such a good tool like and I don't know it's gonna be interesting to see if those people later think or later realize you know that it isn't opinionated. Um, it's It's quite. You can do whatever you want. It's really, it's really quite.

26:45.30
Kent
Yeah I think where a lot of that comes from is people have gotten used to using things like Css and Js and css modules and these non-standard things. Um that ah um, with the exception of Css modules they they. Work with um with remix but you have to do some weird things because ah and because they're not standard and so so like you you totally can use Css and Js and we've got guides for that and stuff like that.

27:10.73
Jenna
Um, yeah.

27:18.72
Kent
You you said that you're using stitches which is a Css and Js library but it has it's a unique take and I don't have a lot of experience with stitches has ah have you played around with that with remix at all.

27:27.85
Jenna
Yeah, so um, it's a lot of these css in Js libraries require like a double render. Um, so if you want them to work. Server-side. You have to sort of like render the app first to get all the css from all the components that rendered on screen and then you have that css and then you render again with that css and um for the first like when it's rendering from the server but with stitches because a lot of the There's there aren't there isn't really runtime. We try to recommend against you can do runtime if you want to as a like override but we try and say don't do that if you can avoid it and most of what the most of what you write in stitches is written up front like static. Um, so we can you can get. Css upfront without the double render and and render its server-side and because it's all written upfront statically no runtime even responsiveness works. Um, so I can you know render my screen really really small. And the first render from the server will have all the right start styles in it. Um, for that screen size It's um, it's it's cool. But yeah, the stitches team There are definitely some improvements that they can make that it will be getting the css for your entire app like um on that first render um, so.

28:53.48
Kent
I yeah.

28:57.70
Jenna
There are improvements that the stitches a team are looking into at the moment to I think they're doing static ah build extraction of your styles build time um to try and yeah improve.

29:05.85
Kent
Yeah.

29:13.15
Jenna
These sorts of experiences with remix and I think even the react team have said that they don't support the css in Js way of doing things so with react eighteen I think yeah I think with react 18 people are soon going to have to start shifting over to build time styles. Anyway.

29:22.27
Kent
I yeah.

29:32.90
Jenna
See I don't know I haven't followed that space quite closely enough. But and.

29:33.71
Kent
Yeah, yeah for for us. We're just so um, um so focused on that network tab and what the network tab is doing because it um you can sometimes look at the network tab and you. Don't even need to see the ui to know what experience the user is having um when the network tab looks a certain way and um and so the way that we've done things with Css and gs um is is like it it works but it's.

29:52.53
Jenna
M.

30:06.91
Kent
It could be drastically improved um from a user experience standpoint like being able to cache your css like having a url for the css makes a really big difference. Um, and so yeah, anyway I think that's kind of why people are like well remix is so opinionated. Well no it just it.

30:14.68
Jenna
Yeah, yeah.

30:27.37
Kent
Eliminated all of the problems that led you to these tools in the first place. So ah I mean feel free to bring your tools along with you. But you're going to find out pretty quick that you don't need those anymore.

30:29.11
Jenna
Yeah, yeah.

30:35.27
Jenna
Yeah I think I remember you tweeted a long time ago about um, react server components and you were saying how like you weren't excited by them really because you've been using remix and you don't feel like you have that problem and I was and I when you treat it I was like yes, just yes I feel exactly the same like because.

30:47.86
Kent
I yeah.

30:55.40
Jenna
Me it was like this the css modules and Css in Js and react server components all sort of sit in this same bucket to me of solutions that we've come up with to solve problems that we created um right.

31:05.82
Kent
Yeah, yes, yes I.

31:11.11
Jenna
So it's just like okay and that's what I love about remix instead of being like okay well let's add another solution to a problem that we created they've gone. Okay, how can we just avoid the problem we created in the first place and and use what that exists on the platform that we already have like for us use and so yeah I'm super excited about it because.

31:16.20
Kent
Yes.

31:30.31
Jenna
Yeah I agree all these things that we've created to solve problems that we created are probably ah probably the things that are making that people think that remix is opinionated but hopefully they'll see the power of it some point and yeah, those things won't matter too much I I Even like I was chatting in the.

31:38.11
Kent
Yeah, yeah, yeah, yeah.

31:49.43
Jenna
Discord channel about Css and Js and stitches and stuff and Ryan was talking about how you know if you if you've got a css yeah url that we can cache and all of that stuff that's sort of the way we want to go and I was reading the styling docs on remix and it was.

31:59.25
Kent
I yeah.

32:06.60
Jenna
Saying about you know, loading style sheets for each page and each nested root and all of this stuff and I was like ah is there something I'm missing here and I was this close to like packing it in with Css and Js and everything and just being like you know what I'm going to go back to basics I got to use Css and just like just use css as it was because there was nothing really wrong with it.

32:17.49
Kent
And.

32:24.40
Jenna
The only thing I would miss is then typing like yeah like if if we could get like typed Css I'd like get rid of Css and Js completely I wouldn't bother all.

32:25.38
Kent
That Yeah, that's the biggest thing. Yeah.

32:33.93
Kent
So yeah yeah I I can almost hear some of the audience members screaming vanilla extract which is this like typed css thing that um, that still doesn't give you a Url to Css and so that.

32:41.20
Jenna
Um, yeah.

32:51.59
Kent
It's not quite there. But if if we could find a way to generate a css file that we could get a url for then? yeah we would be we would be there. But yeah, the the typing is the biggest challenge and and this is part of the reason that I really like tailwind because there are plugins for you know for saying hey this tailwind cost doesn't exist.

33:09.40
Jenna
That to me as a whole that's that's again, like progressive enhancement right? if I could have a style sheet that I could write that was just css at the end of the day but I had the ability to type it like.

33:11.42
Kent
Um, but yeah, anyway, we we yeah.

33:25.49
Jenna
Typing would be like a really nice progressive enhancement like we don't need to reinvent the the wheel and create this whole new Css library or language or whatever like Css does the job. We just need a better dx for it somehow.

33:34.36
Kent
I yeah yeah and I'm sure that that is possible like remix has a very defined mechanism for including css on the page and somebody could write a tool that like can find okay, you're in this Css file. Or or you're in this typescript file and it is um in this route or it's being used on these routes and I can find all of the css files that will be included on the page when that route is active and so I know exactly all this the class names that you have available like that. That totally is possible. So maybe it'll happen one day.

34:12.69
Jenna
Yeah, yeah, yeah, the only the only part I'm worried about as like a component library author is ah how like how are component library is gonna provide styles for their design systems and things like that and that will be an interesting challenge.

34:30.10
Kent
Yeah, yeah, my first impression for the design systems and and component library side of things is um, you typically have those those styles on like every page right? So you'd put that what I would do or what I've done.

34:32.60
Jenna
Have.

34:48.98
Kent
Is I have a ah vendor css file that I use post css to have these at imports and I import all the the vendor stuff and that one's included on the route. Um, and so that that ends up working for me pretty well and I think that would work with the.. The idea that we just discussed about making that work with typing so somebody build that that would be great.

35:08.36
Jenna
Um, so do you have like all the component for all of this stuff. Sorry all the styles for all the components that you're using your entire app are all imported in 1 style sheet.

35:20.27
Kent
Um, so on my app I'm using tailwind. So yes, yeah, but yeah I think that that's both the simplest and probably the best um from a component library standpoint um with the exception of um stuff that.

35:23.41
Jenna
Um, ah, okay, yes, yeah, so.

35:40.33
Kent
Isn't going to be on every page like ah like a date picker and stuff like that. Um, that one it may be better to just include on a as as used basis. Um, but after like but.

35:41.96
Jenna
Um, yeah. Yeah, so like think I think I made a fallen foul of that same mindset where we created Css in Js libraries because we were like oh cool. It only renders the cs only like puts the css on the page for the things that are rendered on screen.

36:03.46
Kent
No.

36:05.21
Jenna
And so then you're not, You're not loading as much Css and that's really cool and you get better performance. But then if I think about it. Well you know if you're rendering. Ah like if you've got all the css for all the components and it's cached does it really matter it like we so we sort of stopped this server-side rendering thing and lost the cache and then we were trying to like solve.

36:15.62
Kent
Right.

36:23.32
Jenna
This problem of having all the css on the page with Javascript and because we didn't have the cash um, and so it's like does it matter if once you've got cash do these things really matter I don't know like I need to like play with all this stuff but maybe not maybe it's fine to just render all your stuff for every bait.

36:27.20
Kent
Yeah yep, yep yep.

36:38.72
Kent
Yeah, yeah, well and and tailwind just blows my mind because you can have a really sizable app with lots of styles. Um, and only like 10 kilobytes of Css for the entire app like that that blows my mind. Um, it's really cool. So anyway.

36:41.84
Jenna
Yeah.

36:52.86
Jenna
Place.

36:58.00
Kent
It's been just such a pleasure to chat with you Jenna um I'd love to just wrap things up by saying what would you say is our our big takeaway for people for this episode like what's the 1 thing that could improve everybody's user experience if they think about this a little bit more and and do whatever.

37:17.37
Jenna
Um, if you're using remix go into your root file and comment out the script component and just play with your app like just play with your app and you'll see so many things that you can improve really really easily that will just make your user experience So much better for people.

37:17.58
Kent
To improve that and.

37:23.95
Kent
Yeah.

37:37.20
Jenna
Like switch javascript off just have a play. Yeah.

37:38.82
Kent
It? Yeah I think that's a great one. Um, so let's go with that. So go turn off your javascript if you're not using remix then you can and just in your devtools you can say disable javascript. Um, there's an option for that and it will fail to load all of the Javascript which does happen that. So you you gave the example of the um London underground that literally happened to me I was using ah my phone on the London underground um, and ah yeah, and the app that I was loading I just was looking at a white screen until I I got connected again and then I had to refresh um.

38:17.96
Jenna
So yeah.

38:18.20
Kent
So yeah, um, go ahead and and turn that off and and see what it would be like for Jenna on the line in underground.

38:24.41
Jenna
To me? Yeah, take.

38:27.95
Kent
So cool Jenna thank you so much is there a place that people can connect with you and keep up with what you're doing.

38:35.91
Jenna
Yeah, sure I am on Twitter as Jens but jjenzed said Gen Jens was taken so I had to add an extra j and an extra zed and so I'm on Twitter it. Twitter as Jen's and I also have a gen jen's blog which is jj n zzed dot com and I just blog about react stuff and componentd drivenven architecture and stuff like that.

38:55.69
Kent
For. Oh that's wonderful, awesome! Well hey Jens thank you so much for joining me for the for this time and yeah, we'll see everybody next week bye

39:13.70
Jenna
Thank you very much for having me bye.