Check out Your Network Tab - Michael Carter
00:00.00
Kent
Hello everyone my name is kent seed odds and this is the remix podcast where we talk about how to make your user experience better and I am joined by Michael Carter say hi Michael so happy to have you Michael um, so Michael and I met through the remix discord.
00:10.47
Michael
Hello. Everyone.
00:19.46
Kent
Um, I think that's where where we first started interacting was on there. Yeah yeah, okay so we we've passed by each other on the internet a few times and now we are actually able to see one another which is always a ah fun pleasure.
00:21.48
Michael
Probably on Twitter I think I've messaged you a couple times on Twitter. So.
00:38.48
Kent
But Michael I'd I'd love for everybody to get to know you a little bit. Could you introduce yourself, you can be as personal or professional as you like. So.
00:44.20
Michael
Okay, thanks yeah, my name is Michael Carter um I'm a software engineer with 30 years of experience. Um, my online nickname is Kilaman um, it's short for Kilimanjaro so an academic consultant company named volcanic technology. So I had a whole bunch of.
00:56.55
Kent
Ah, wow, That's cool.
01:03.81
Michael
Names with volcanoes. So and you were sure I needed a short handle so kill them in is how that came about um and I've been doing development like I said for 30 years I'm primarily a dot net developer. Um, so. Javascript and node and all those kind of things are more of a personal passion and as well as we're planning on migrating to the node and remix definitely as we upgrade our our systems I do development I do web and mobile development. So.
01:33.66
Kent
Sweet.
01:41.36
Michael
Yeah, it's been pretty awesome. It's funny because um I taught my daughter Sarah how to program and we've gone through your testing react and javascript and the epic react courses she loves it and and when she heard that I was going to be on the podcast. She was like my dad you're.
01:49.24
Kent
Oh sweet.
02:01.12
Michael
Cool now cause you're you're you're meet somebody famous so and she thinks you're web famous at least so that was awesome. She actually got her first programming job a few few months ago and she she really loves it so a lot of that.
02:01.80
Kent
Ah, ah yeah, yeah.
02:12.97
Kent
Oh congrats to her that's awesome. Oh well. Thank you? That's nice. That's nice to hear. Um so thirty years of web development my goodness like there. There are not many people in the world who can claim that they are 30 years in and still going.
02:16.54
Michael
Lot of that Thanks to you and your courses. So.
02:24.72
Michael
You know.
02:32.47
Kent
On Web development. That's amazing.
02:34.67
Michael
I've been doing you know I started out doing um c programming on the commodore amiga and then I you know got my first job right out of high school and then we did. My first real web stuff was Microsoft's actor server pages so remix kind of you know, just like ph p you kind of get that whole request response dealing with form submits and things like that. So. It's it's come full circle for me. Definitely.
02:59.19
Kent
Is? Yeah, yeah, it's kind of fun to I remember when next came out Guillermo would talk about how what he really wanted was ah the php experience where you have a single file and that. Ah, in a file system and when you navigate to that um path on the web server. It just runs that executes that file and whatever that file you know returns is the response that you get um and I I feel like they got. They got pretty close. But remix has just really nailed that sort of experience. Um, and then add added a bunch of really needed um features like nesa droututing and stuff. Um that ah you know we're kind of remixing the the cool tech of modern technology what we have today with.
03:39.16
Michael
Both definitely.
03:56.63
Kent
That experience that we had back. You know before I was programming.
03:58.39
Michael
Right? So yeah, um I think one of the benefits that remix has is that you get to focus more on your business on the business logic and not necessarily the plumbing that you had to do with react.. There was so much Boilerplate. Um. Any type of mutations or what have you had to do the whole you know, prevent default like kind of stuff it so it was kind of really hard I Wish we had remix when I was teaching my daughter how to program it's I think it would have made more sense to her. Um, but yeah I've I've really enjoyed programming this nice.
04:21.98
Kent
Yeah.
04:27.98
Kent
Yeah, yeah.
04:38.27
Michael
Was actually when you tweeted. Ah, you had been tweet talking about remix and you know I had none about Michael and Ryan through react router and their and their online training and stuff like that. So and I was very interested in it and as soon as you you tweeted the the buylink I think a little early so. I was one of the few that got that dollar test license. Oh yeah, I've I've been I've been with remix since day one and I love it. You know, um I've been tinkering. You know, definitely going into the the source code and kind of like seeing how it works and you.
04:57.67
Kent
Yeah, whoops.
05:15.24
Michael
I was one of the ones that helped um, add the source map support and then I did we you know I I figured out how to do the little tilde ah thing so we could get past that. So just you know a couple of things that you know I was like as I.
05:18.65
Kent
Oh yeah, yeah, thank you. Yeah.
05:32.71
Michael
Worked with it. It was like hey I wish I had this so I was just go in and figure out how to do it and you know post the patch online. So.
05:37.61
Kent
Yeah, that that actually those early days of remix were really fun because like it was just ah, ah everybody in the community was there because they wanted to be there and they were like excited and interested and and they'd put money down and so like we were all um.
05:42.43
Michael
Um, yeah, um.
05:56.16
Kent
Very invested in this and so like that early group of supporters. Yeah, that was a fun time early times remix.
06:01.50
Michael
And now you know I try to be on the of the remix discord and you know I answer as many questions as I can but you know I just go away for lunch and then I come back and there's like 200 plus messages. It's just really hard to to to keep up with it. But yeah I try to be as helpful.
06:11.84
Kent
Yeah.
06:20.93
Michael
As possible because you know I want everybody's experience with remix to be a positive one. So.
06:26.63
Kent
So oh thank you? So do I Yeah I felt that way so much that I decided to join the company.
06:31.99
Michael
Oh again, that was like I was kind of a no brainer I you know I I went I think everybody in the community was was not surprised and we're reading for you. We got that position. So um, so yeah, good.
06:41.36
Kent
Yeah, yeah, you know like when that happened I thought like it. It would be nice if everybody's new job was an obvious thing like oh yeah, obviously they'd work there. You know like cause that would mean that. Was ah a job that they really wanted that that they fit really well and um, anyway, but 1 1 thing that you mentioned earlier that had me thinking about the like all the boiler plate you typically have in a react application I saw I think it was just yesterday somebody tweeted asking. Um, for. Ah, good forms library and react and they mentioned a bunch that like are the first ones people typically think of when they think of forms library in react and and why they didn't really like those and so I was thinking. Okay, what would I say well like use remix. Ah, you don't really need a forms library when you're using remix and it's because all of that boilerplate and. And wiring up of stuff is ah like it's handled for you. Um, and you don't have to worry about wiring things up like and you only really get this when your frontend and your backend work together seamlessly like they do with remix.
07:49.98
Michael
Yeah, definitely. Um, in fact, when people ask that on the Discord I generally point them to my remix Params Helper which is primarily more for server side validation. Um, because you know just.
08:00.30
Kent
And.
08:07.48
Michael
When you're submitting a form any type of user input. You want to one validate and make sure that that its the data is in the correct format I'm using Zod in that to to generate the schema and then do the parsing and because I can use that same schema on the client then I created some helpers that that actually set the.
08:09.11
Kent
Yeah.
08:14.75
Kent
Yeah.
08:26.11
Michael
The name the type and required and those kind of things the standard html attributes so that you get native browser validation without having to have a specific forms library and you know it's worked well for me, it's simple. It's it doesn't have a lot of bells and whistles yet. But it handles. Um, and the majority of use cases that I have so um, yeah, and that's one of the things about remix is that you can really just deal getp back to the platform level and and standard Javascript standard html http stuff and not have to um.
08:54.53
Kent
I yeah.
09:03.25
Michael
Be so invested in the react aspect of it react just happens to be the vue framework that that we're using, um, but you know with Remikex you don't have. You're not tied down to that you you can use the standard web development technologies that that have been around forever. So that's. I think that was the number one allure for me learning about remix is you know like I said I've been in the business for 30 years so I know the web platform. Um, so it's nice to be able to leverage a lot of that stuff that I was using before in in the react. Ecosystem. So um, so so yeah, it's it's it's been really fun. It's but I think um, there was a a quote where you know it makes you know remix makes web development fun again and I probably agree with that because you know.
09:54.66
Kent
Yeah.
09:59.93
Michael
I've had more fun in the last you know six months using remix and I have you know in the last ten years probably so
10:06.45
Kent
Yeah, you know, um and what's really cool about that property of remix leveraging the web platform So Well is the um, the user experience that you get out of that. Um, and so like using Native. Um. Browser validation stuff like with your utility for you know the required property and stuff. Um, screen readers and and browsers behave in unique ways and in helpful ways for users when you're using those technologies. Um, and and it also means that those things will work. Before the Javascript finishes loading before the app is hydrated um or if it never hydrates at all for you know Network problems or whatever and so um, you know like I've had the experience where I'm I'm using an app. And I go to navigate and my connection goes down for some reason. Maybe I'm going through a tunnel or something and the app is totally unusable. Um I mean at some point you do need an internet connection to to talk to a database. But um, the the less reliance that you have um or or maybe the more resilience that you have.
11:10.73
Michael
Threat.
11:20.91
Kent
I Guess um against those sorts of situations the the better. The user experience is and so relying on the platform for those things. Just really, um, it ah enables the browser to make the user experience really stellar and.
11:33.55
Michael
Oh Definitely I You know in my day job. Um, the the apps that I create um because it's it's for field technicians and sometimes they're in areas with Spotty Network. So the apps that I write actually have to be able to work Offline. So Everything is you know, saved locally and then synced up to the server once they have Connect. So um, you know at some point I know that remix is going to have you know service Worker support. So You know we can even go Beyond You know the um, the current Usability user experience. Quick fast access that we have now to support that offline mode so that if you do have a lost Connection. You could just you know store your requests in the service worker and then play it back once it's done and then you know your ability to do that So remix just opens up so many possibilities. Um, I'm currently rewriting my blog. Um, it's a Kilaman Dev and I'm using Cloudflare Cloudflare. Workers. Sorry try to say that fast cloudflare workers and it's been a joy you know and what's what's interesting is that.
12:39.36
Kent
Yeah.
12:46.62
Kent
Ah.
12:50.12
Michael
Again because it's more like a browser api on the bat on the back end versus the node api. You know there are some um restrictions that you have or being able to do the kind of things that you would typically do in ah a node type application.
13:01.36
Kent
And.
13:08.91
Michael
Um, so one of the things that I've done is I've leveraged the fact that um, all my code is on Github and I use Github actions to act as my node server Essentially so um because I use mdx for my content and I'm using your um.
13:17.91
Kent
Yeah.
13:26.93
Michael
Um, Dex Bundler in order to get. You can't really do the compiling on a cloudflare worker because it doesn't support the eval which when it takes that code and and evaluates it so what I do is. When I do the commit the the content to github the github action will actually do the compiling and then post the html and the code to to my backend to the serve to the worker which then stores that content in. Um.
14:01.83
Kent
And.
14:02.32
Michael
Kv store and so now all I have to do is when I hit the blog. Yeah url. It just takes the slug and does a Kv get and and just streams that back down so from a user experience aspect. It's blazingly fast because it's all on a head.
14:17.45
Kent
It Yeah, it's like outrageously fat like faster than ssg it's crazy. Yeah.
14:21.94
Michael
Yeah, exactly you. It's kind of like quasi ssg because I I am just statically generating the you know the html and that at the time that I'm committing. But yeah, it's still dynamic if I want to do authentication I could still have authenticated pages.
14:35.27
Kent
And yeah.
14:41.60
Michael
All that kind of stuff that you need um to make a truly dynamic site you can still do that. But you know you can kind of leverage. Whatever platform you're doing whether it's cloudflare or fly dot io for node you can then leverage those unique characteristics of the platform and. Just make your app even better. So that's one of the again remix is just it's been a godsend I've um and I've had I've tried all the different technologies over the years but by far this is the one that really gets you the closest to. Just writing your um, you know the happy path is is what I you don't have to worry so much about all the air conditions and those kind of things because especially with the you know air boundaries and the catch boundaries that you know whoever just whoever came up with the catch throw. Response for catch boundaries. That's like that was so smart because that really um, allows you to at the beginning of your loaders and actions you know, check for all the error conditions and then just bail out and then let the catch boundary render it and then.
15:41.63
Kent
Yeah.
15:56.85
Michael
After you do all those things. Everything else is now happy path and you can just focus on that. So that's kind of where I'm you know I just been focused so much on getting the um you know web.
15:58.64
Kent
Yeah.
16:16.14
Michael
Platform on my on my app. Just sorry I'm kind of blabering now.
16:20.60
Kent
No, no, no, no, you're good. Yeah, like your your blog is kind of what I think that I would try to do what you're doing if I were to rewrite my blog. So my blog is on fly io. And so it's still at the edge because fly has multiple region like or regional deploys I have 6 regions throughout the world. It's not quite the ah hundreds or I don't know how many regions conflare has but many um, but but and and all my data is in those regions and everything too and so my app is like most.
16:47.42
Michael
Right.
16:56.17
Kent
Pages respond within two hundred and fifty milliseconds or less yours is like sometimes less than a hundred which is crazy. Um, so yeah, it's it's pretty wild what this modern technology can do and remix is just so well suited for taking advantage of.
17:14.49
Michael
Yeah, definitely um, you know one of the things is you know your your app is a lot more complex than mine. You know you do a lot more things so having a node backend. You know, suited you? Well you know you have a lot of database access and things like that. So mine is more serving up.
17:15.18
Kent
This modern tech.
17:28.90
Kent
Yeah, yeah.
17:34.90
Michael
You know, static content you know with your team. You know the team concept. You know you're having a lot more um, things reflected in that. So um, but the fact that you still can do you know sub Secondd um in a rendering is this is still pretty amazing considering it hack. You know.
17:41.25
Kent
Yeah.
17:48.99
Kent
Yeah, yeah.
17:52.37
Michael
Most of the websites. You know you could that's 2 or 3 seconds just to load the page. Let alone make it interactive. So.
17:53.84
Kent
And we yeah you know I think sometimes we forget as developers how slow the rest of the web is when we're so used to navigating around developer blogs that are static site generated stuck on a Cdn and we think that's like. Um, that's normal to have like five hundred milliseconds or less response time to get a static file and so like then when you go to a site that's actually got user stuff and and dynamic. Ah, stuff where you can't cache that stuff on a Cdn yeah, lots of websites are multiple seconds before you get any sort of response. So the fact that um, that I can get 250 or less milliseconds or less. Um and every page is unique to every user. Um. Like that's actually pretty sweet and and I'm not Amazon like I'm just one one guy and remix enabled me to do that.
18:55.60
Michael
Right? Yeah, like you said the the web platform um capabilities you know, computing on the edge has just gotten so much better over the last few years so if you no longer it's no longer. A. Magic to do that. It used to be. You know you had to set up a you know you had to manage all of that if you wanted to replicate your site across multiple locations and you had to set up different data. You know, go to set up your data different data sets. But now it's like a 1 ne-stop thing. So yeah, it's it's no longer. Um, you know for us.
19:17.51
Kent
Right.
19:25.50
Kent
Yeah I.
19:32.71
Michael
Small fry have to just you know settle for a single vps somewhere on like digital ocean or whatever to host your host your app you can play with the big boys and and that's I think that democratizes um in a web web applications. Definitely.
19:39.27
Kent
Right? Yeah, it would you. So oh yeah, like I guess for a long time. Your option was like and you know a single node on you know, somewhere in its specific region for a dynamic app or the jamstack so that you can have you know your. Static html distributed all over the world and those were your options and given that those were your options like Ssg and ah you know the Cdn approach the jamstack approach is which is like drastically easier because you're literally just putting files on on a. You know you basically drag and drop. But and you can set that up to be automated. So there's no server to to worry about and you ended up with ah what felt like a much faster user experience and especially if it was just static content then it certainly was a faster user experience and and so I got caught up in that too. That's.
20:25.58
Michael
O.
20:42.88
Kent
When I did my blog Originally um, it was like yeah, why wouldn't I go with static site generation and and put it on a Cdn it's way better than managing a server. Um, and at the time serverless wasn't quite ready to to render a react app and so. Yeah I was just like yep this is great. Um, and even with serverless like you're still you pick a region you know and and so if you want it to be fast everywhere in the World. You are still stuck with ah with having to do um, static site generation. Um. And so that you could deploy it all over the world but just the infrastructure has gotten so good now that you can just deploy your app all over the place have data Replicas everywhere make things you know, compute on the edge. It's amazing and and at the end of the day like this isn't all just like fun technical babel. Stuff that we're just doing because it's fun. Technically it is fun technically but it ends up in a much better user experience with my app now. Um well before when I was doing static site generation. As soon as I wanted to add something dynamic like my workshops to say there are tickets available I had to have a loading spinner. And so you'd you'd see this flash of loading State I hated that it was not good for users. You know things would pop in place. So if you don't have a loading spinner then it pops in place when it does load like so you've got to have some sort of loading State. It's really annoying or you would have to restatically generate everything and that's the Isr stuff the incremental static regeneration.
21:57.73
Michael
Exactly.
22:14.55
Kent
Which is like really complex um solution to this problem that we kind of made you know, invented for loves so now like my site if I wanted to want to do anything dynamic it all just it. It can happen and I don't have to.
22:20.10
Michael
Exactly.
22:31.51
Kent
Worry about the the problems of managing servers and stuff. It's way easier to do that. Um, and and and it's like just as fast as Ssg and way more capable so we're in a pretty exciting time now. So.
22:42.22
Michael
Yeah cloud-based computing. You know that once they started that that took a load off of my plate or yeah manage your own servers and all that kind of stuff and and now you can just kind of outsource that to you know some Cloud providers. So um, yeah.
22:48.92
Kent
Yeah. Yeah.
23:00.50
Michael
I definitely feel that you know with static site generation. Um, you know like you said, if it's static content. It's fine. But once you once it needs to load data or even if you just want to you know do some kind of mutation. You know it needs the Javascript and it and you know and um. Just like before when you know you may be able to deploy the static part on the edge. You still ended up having you know a single backend server or you know so you know serverless region I think that's why a lot of um systems like. Firebase and those became popular was because you know they were at least they gave you the database and the user authentication those kind of things but with remix you know you can control all of that and so you have a lot more flexibility with remix because now and you're you're in charge of you know how you want to handle your data and.
23:45.20
Kent
Yeah.
23:55.94
Michael
Being able to serve it up quickly. So The remix definitely has opened up a lot of doors. It's made not only the user experience better, but the developer experience I you know I can't say enough about how much more productive I feel. Um, writing remix code because again I'm just focusing On. You know what is you know? What is the purpose of this app instead of the all the you know the boilerplate that you typically have to do to to get an app working.
24:25.90
Kent
Yeah, and you know, um, when I think about that um I've heard that said many times with different technologies over the years like firebase is a really good example of situations where like yeah you can you know, just let the. All the plate go you just bring in our library and and so many things are easy and what makes remix unique in this attitude is that um, it's not that like remix is just like this library you bring in and it takes care of everything for you necessarily. It's that it has the right fundamentals and primitives nailed down for you so that the code that you write is simple and and so like you can understand it. You can change it whereas other abstractions that I've written or that I've used are a lot more like we handle everything for you. And there's an Api for anything. You could possibly imagine you'd want to do and where remix is we take care of all the fundamentals we smooth things over with the platforms and things and we give you we expose the web platform apis to you that you just use those and so. The the difference or the important difference. There is that um you spend ah with a former you spend a lot of time learning ah the the library learning those specific. Yeah Apis reading those Docs and bumping in the edges of the use cases that they were thinking about when they built their solution. Um, but with remix you spend a lot more of your time learning the web platform better so that you can use those web platform Apis and and because the foundation is just so solid. The code that you end up writing you have a lot of control over that and and you can make it. It doesn't become ah a matter of oh I need to go look up the docs to see how do I do you know make a qr code so people can log in it becomes a matter of oh I see my code that I wrote right there and I know exactly how I could implement something like that because it's it's there. It's in front of me. So there's less api. Ah, to to learn about and the Api that you do learn about is like transferable skills because it's the web platform. So.
26:44.10
Michael
Oh definitely I think one of the nice things about um remix is you know I've had to browse through multiple web apps and it's some you know it's hard because you know typically you have to look at 4 or 5 different pages just to see you know you know. Files just to see exactly you know how this particular feature is working whereas with remix you know plus tailwind you know everything can be all in 1 um 1 in one file so they can see you know what data is being. You know, retrieved you can see how the data is mutated. You can see how it's rendered. All the styling and so forth. So um, not having to juggle multiple files I think that's also makes makes things a lot easier. So.
27:30.39
Kent
Yeah, totally that's that's a big win I'm a huge fan of of being able to just see everything in 1 1 place co-location is big, um, cool. So we're we're coming down toward the end of our time here. So I think we should start talking about what our key takeaway is so like.
27:37.29
Michael
Are.
27:48.67
Kent
What would you say? Michael is the the 1 thing based on like some of the stuff we've talked about what's the 1 thing that could help our listeners make their user experience better whether or not it has to do with remakes.
28:00.13
Michael
Um I think just to be cognizant of you know how your app loads for the user. Um, because that's their first impression of your site. So if it if it's. Takes a long time to load or you have the loading spinners or it fails because Javascript hasn't finished loading. You know those are all things that you know I'm going to give you a bad experience for the user. So the fact that remix. Um, it's not that it's doesn't require javascript. But it's once it once it's loaded the initial html payload you know your app is pretty much ready to go. You can people will view it all. The data is already there you know if there's a form they can still submit it those kind of things are not broken. Um.
28:42.89
Kent
Yeah.
28:55.76
Michael
If You don't have you know a fast connection to download you know megabytes worth of javascript that a lot of Applications. Do So I think um, if you see that your current app um is experiencing that then definitely give remix it a try because um. Gives you a lot more control over how those assets are loaded for the client and gives it for the user and and gives them um, a better experience definitely and not only that like I said before the developer experience is just you know a joy to work with So. It's kind of a win win. You know so both The. User and the developer are happy and that's always a good thing in my Book. So.
29:36.94
Kent
yeah yeah I agree yeah absolutely yeah that that would be a good thing. Good takeaway. So for everybody listening go to your app and open up your network tab do a hard reload pretend that you've you're a user that's never been to this app before. And see what that experience is like maybe slow down the network tab to to simulate what it's like for your Ceo who's in Shanghai to load your app and and see if maybe they would talk to you about that if they were in that situation. Um, hey.
30:09.59
Michael
Exactly.
30:12.58
Kent
Thanks so much Michael what's what's a good place for people to to connect with you and keep up with what you're doing so.
30:15.66
Michael
Um, like I said um I'm in the process of revamping my dev blog. It's going to be http://kilaman.dev. Um, also I'm on Twitter at Kilaman and Github is http://github.com/kiloman so I tried to i. Anytime. A new service comes up I try to sign in before someone snatches my name so well yours a pretty unique so I don't know you know unless someone really want to impersonate you I think you're pretty pretty set say oh.
30:34.47
Kent
Yeah, yeah I know that feeling well.
30:43.77
Kent
Yeah I hope so there have been people who've tried to impersonate me and that is frustrating. Yeah well hey, thanks so much Michael this has been a pleasure and thanks everybody for listening. We'll talk to you next time.
30:56.48
Michael
All right, Thank you Bye bye.