00:00.00
Kent
Hello everyone this is the remix podcast. My name is Kent C Dodds and I am joined by Sergio and I have no idea how to say your last name. So what is how do you say that salamri. Okay, cool. So Sergio Salamri

00:10.73
Sergio
Um, it's salamri. The.

00:18.51
Kent
And if you've been around the remix community for any length of time then you'll probably know Sergio from whether it's ah him answering your question and Discord or blog post or um, one of the libraries that he's made so yeah, sergios. Very heavily involved in the remix community and very much appreciated so Sergio before we get too much into our conversation and love for people to get to know you a little bit so tell us about yourself. You can be as personal professional as you like we just want to get to know you perfect.

00:51.92
Sergio
Good hello everybody I'm Tao Salry and I'm from Argentina and live in Brook at I to live from a new few years after I leave Argentina to leave in Columbia first and I'm a father of a baby at the bur anymore. But it made it and yeah and yeah had been using and remix for like a year eating I don't remember that moment I bought the license because it was the when it was still paid.

01:11.40
Kent
Ah, that does happen I.

01:30.24
Sergio
And have been doing weatherre for like 8 g stts it will be 9

01:33.82
Kent
And cool cool. Um my son for some reason has just really fallen in love with Argentina he's 6 I'm not sure why he did but he just really likes argent if if he found out that I had talked to somebody who. Is originally from Argentina I'll tell him later and he'll be like oh my gosh. So that's exciting. So um, you got into web but you said around eight years ago I'd love to hear what got you into web in the first place. So.

02:04.12
Sergio
Well when I was like 10 years or or something like that I don't remember excel here and I wanted to learn how websites work how all of this magic that makes something on the browser in thatra at that moment. Happens and someone show me some links to start learning now next start the learning and then and I went the bad way using bring river and I stopped learning development just this is just yesterday the visual leader and years later as still.

02:33.46
Kent
I.

02:42.53
Sergio
Hate I pick course on online know in online course for development I and running with Javascript was my first line programming language and then I started working on it in Argenina in a company there and then move it to Colombia. In and in startups and I highly working on the startups from them.

03:03.96
Kent
Sweet. Yeah um I remember using dream weaver when I was a kid as well. If you don't mind me asking how old are you I'm 33 how old are you 29 yeah so we're not too too far off you know from that that time growing up and.

03:13.80
Sergio
A 10 to 9

03:22.60
Kent
And I I do remember using some of that dream Weaver stuff early on and just like oh okay, moving on and then finding it again later? um, Cool. So I'm now I'm curious. What got you into into remix so you started at at these companies. Um. Are like yeah I mean I guess I should just end the question there. What got you into remix.

03:47.43
Sergio
And but I got the newsletters fear like it was a new shining thing I can read about that was there was everything like to just subscribe to the news laterter. But then when I was starting to read it. The newsletter I started the phone like. This just solved on my problems in web development I was doing a web application at that moment using rior rails for the backend and the logging part. Um, and then using something called webpaard to build the application where buggger is and. Ah, je from Google price to basic league give you refi at the web so you need to do about yourself. Um, and you but using Greg wrote and that query I usually you said execut your before that um I was doing all of those things that you read.

04:31.20
Kent
I got it.

04:46.49
Sergio
Blogs Works tutorialial outside a conference. They all say that you should do these things like skelettons everywhere and a browser inside cash and like that and it was starting to see all the promise of that like to will it was not perfect. A lot.

04:49.97
Kent
Yeah, yeah.

05:06.26
Sergio
But states were not perfect. They building my action that this that this is not load that fast or it has problems and sometimes things jump on the screen because they were loading more things and a lot of water for requests I was tradinging because I was.

05:16.97
Kent
Yeah.

05:25.58
Sergio
Using suspense to do that The fetching with that query. So if you had 3 Ch Mark Queries actually and the same component. You will make the first component block the next query that fifth query is block the next query so you will start having a water fault and a help components will like 4 5 queries. So. Lot of them time and they take through the request and then brings a so all of thatmetically moving everything to each other. It makes a lot of sense when it was freeing all of that layout routes. It was super interesting at that moment because I was. Doing some similar things with that routeer also working on Nexttjs applications and they not have that so you had to duplicate a lot of calls everywhere and if you want to do server surrendering Index and you need to refetch all the layout and data you already have a game. Even thank you navigating again because they don't have layout routes or you need to move the fetch into the client and lose the serverside rendering benefits.

06:32.67
Kent
Yeah, right? Yeah exactly and um, yeah, and maybe I wonder if that's actually why? Okay so taking a step back? Um I haven't been able to figure out why the next team has been pushing people to static site generation. And isr and doing stuff on the client because they have a server and now I'm wondering if maybe that's why is because otherwise you have to to Refetch everything when the client is hydrated and as as you described? yeah.

07:07.00
Sergio
And and not sure because the fierce versions of next have these getting prop mental that was basically like a load mode can run both client side and server side so they do that originally and they also and you just read the regions. Version of some delliion notes about and next they said and they save a you need to do search around. It is the way and then they started doing they add the as message ssg features and the Isr features and my started sending that.

07:33.48
Kent
Yeah.

07:44.60
Sergio
It has probably something to do with the business that makes sense they said serverless and static pages and it makes sense for them to try to push that. But and I never have anyone to wait them. They didn't add li fruits for example, even with SS and g.

07:59.45
Kent
I yeah.

08:03.68
Sergio
It makes sense to have value goods.

08:04.80
Kent
It? Yeah yeah, it's true like it's really annoying to have to have that layout component that and that is responsible for rendering. Basically everything on the screen that you don't care about for this particular route that you're writing so that nested routing helps a lot with that sort of thing from like even the developers. Ah, experience perspective so you were having these these problems with your app at your Work. Can you describe the app that you were experiencing these problems with.

08:36.46
Sergio
And the russian done lab for things like Alinea or Jira you got plus having p and jira but with another metal ui and so lot those tasks and they had like place of task and a list of.

08:43.15
Kent
And.

08:54.56
Sergio
Know that's that we are just working on and connected by bending to do completed or waiting for the video data that and you had to open the task and it make fancy things like if you click at the task I Only have some part of information from the list. So when you open the Da detail page. Ah, show ah part of that information immediately and spinners for the rest. Um, then the rest were loading and then I had and like steps on on the task and you click it on the step and changing the the detail of it on the step but a like the sidebar. The list of steps and main information of that's whats still there like a layout right? Um, in the lamon of his spinot forms he and then things like we use it for a Skeleton U device and the designity design as skeletons. Uive. The only designs usually the full Ui so we had to keep the the skeletons updated or self in the front of him and remember that if we change something we need to make the sketton.

09:59.56
Kent
And.

10:06.69
Kent
You? Yeah yeah, and that's that's no fun Han ah the other day it occurred to me that the best kind of skeleton ui is the one that actually has all of the real data.

10:06.88
Sergio
Sample looks similar to the final ride.

10:13.80
Sergio
Yeah.

10:23.22
Sergio
Yet 7

10:24.70
Kent
So no skeleton you eye at all just make it make it so that you don't need the skeleton you eye in the first place. That's the best kind of skeleton you I I can imagine. So um, you had all these problems with the app that you had at work.

10:35.46
Sergio
Yeah.

10:43.72
Kent
Um, where where would you say you got the expertise to be able to identify or or like because you were really early on with remix. You were one of the first people to to really get it and start using it where did you get the expertise to. Be able to look at remix and say oh yeah, that solves solved my problems. So.

11:01.56
Sergio
In I think it was because I did many things can make a live like working on an education background which has seen similar layouts. They it almost always cuts this kind of layout with. Ah, column that is always there and a little that changed and I had all this time this problems and that layout put solves and with a lot of of times this kind of application different application but doing the similar elses and. Like main life like all the things you need to do all the time the to make them work with a gri u ads right? and when I'm reading the news later and and watching the videos of Thes Channel from writing. I was like oh yeah, this solves this problem with this I mean dis more money like money to look out that well because the load that has data I need and I don't need to do this hacks to have lightouts in next because. It's really built in the front in the router.

12:14.71
Kent
I Yeah, that's ah, that's awesome. So yeah, you're also like you do a lot with ah, an abstracting remix to have like a little helpers and things. Um, what? Ah as as. Probably the most prolific remix library author in existence right Now. What would you say is um, like what is it like to build a library for remix like how easy is it from the outside of the application.

12:35.63
Sergio
Print.

12:51.63
Kent
Build abstractions that work well with it and.

12:52.35
Sergio
well well I usually do is to just build lead inside the app and then see how kind of selected I remove the arbitr specific things then they then they had a few issues with things like. In the server cycle and remingx I need to do a comment Js models and in the brush and tend need to work on the browser I need to use. Yeah esm um models and sometimes package has server-side. Um clients I go but they still need to build both versions. Even for service I only niical because it will still need to have the import line and theer and that that but tell that he basically started just using touch bit and compiler to tank. Um for each sta and thank you right now many have tested up.

13:39.88
Kent
Yeah.

13:47.17
Sergio
Solve and it's easy to just keep add things especially for Remis us just data file documented. It's body and that it and bull versions.

13:55.26
Kent
Yeah, yeah, so you feel like it's um well I guess the thing I was trying to to get at is how abstractable is remix and what about remix makes it easy to build libraries.

14:07.91
Sergio
I Think because of the api of the react and that we and the request and response object abstract Server Cycle It's producing especially because it will work on every platform you can deploy rammix to the field version of. But the might fix attempts to build something like authentication for remix was with passport Ts like because it's I could use Express I Just tried that and I had this brand like I wanted to deploy it to back sell I couldn't release http://passportjs anymore.

14:43.30
Kent
Yeah, yeah, I I was really surprised when I implemented authentication on my site. How straightforward it was because the the last time I did authentication by myself was with passport js and express back in like 2014 or 2015 and so yeah, probably 2014 and so it was um, kind of kind of fuzzy but Ryan gave me like a list of like here are the things like in order. This is what needs to happen when you do authentication like not with remix just like in general I was like yeah I should be able to do that and I was really surprised how. Straightforward that was and now here you have this library that that integrates perfectly with remix and potentially anything else that uses request response and um and then you have ah different strategies or adapters or whatever for different authentication providers.

15:30.26
Sergio
Um, yeah.

15:40.60
Sergio
Yeah, yeah, yeah I was thinking that one other devil day hope to continually that get and remix out to work in a clothes for the workers app without reics and just global work that because they use the same request and visual outs.

15:53.37
Kent
And.

15:58.86
Sergio
So you stop throwing responses. It will be the same as should order and yeah I'm i' bestally co build that library plus a lot of trials and of how to do authentication because whatever we know.

16:02.67
Kent
I yeah.

16:17.18
Sergio
We use al and when I was trying things in reingx say what? like hey but can I do let's do the frontend application of where I work multi in remix and try different things that I need to have under education in 1 of tools west for application with. Old Chi so I tried but approach like a create ak which is terribleable because it stores the token on local storers and then if you need on the server you send it to the server to store it to a cookie and and of logging out the gates. Harder because they saw another thing men storage. Dont know with the usage authentication if you have remove that you can log in again without 0 client side then I try in the passport way then I but I didn't like it that me to put the user information on the context subject the load of and actions. So you can. Also you can deploy to 1 setexpress and then I will as I was this all of these ideas on the disco frameworks and someone pointed me out to a tutorial from cloudfre. And spending whole withoutt identification without zeroing cloudflare. We don't need to add any landcing and just with code and I implement because they engaged special same pre because and and responses I implemented everything present then I tried to and stimulize it. Um, decide to create this premix out package and go with a similar approach to passport strategies. You can attach to the authenticatoring instance and say use the outci strategy and you configued everything there 1 time and mean your code just say authenticate without 0.

18:07.37
Kent
And.

18:07.83
Sergio
But it and and he got working and then I read how old and how all out 2 works because when I read the first version Michael askska me does this support or you and say they should and. Any funnel out that I zero actually that's the same thing so I removed the out to a specific code from the alche strategy created the genetic one every and gave a more strategy like itth help Google and. And knew there was something at this core and um moreology started some people from the community started to create now they are alwaysed different packages so it's easier to maintain because I was having to all the strategies and there was up like 10 more than 10 strategies and say.

18:57.98
Kent
I yeah.

19:01.17
Sergio
We have the find hundred otherives but perhaps it will be impossible for me to these themselves. So let's just move everything into baggages and we want the getian strategy for Adam 11 thing linear something that it's possible to do learning with linear but you want to do that. Just do it.

19:04.93
Kent
Yeah I.

19:21.80
Sergio
Reach it yourself.

19:21.11
Kent
I yeah yeah I think that was a wise strategy. So um, cool. So um, ah oh man I had a ah a thought that came into my mind but now it's gone. Um, one one thing that you mentioned though was ah. That you were able to get authentication working without any client side code. Um and that was 1 thing that I really appreciated about remix early on when I was doing authentication on my site was because I started with firebase authentication and I've never really felt really great about how much code you have to send to the client. For firebase authentication to work but I was just kind of like well I guess this is how much it takes to to do authentication and then um I realized that oh you know what? I could move some of that ah over to the backend and when I that was actually an afternoon of work because remix just makes that front-end. Backend and so seamless and then I realized you know what there's actually a whole lot going on here and I was able to implement it myself just handle the whole thing. Um and with ah you know, ah user objects in my postgres database in the session and and everything. Um, so. Yeah I've been really impressed at you know, remix's ability because of that seamless client server ah to move more of your code over to the backend and I found out that um, like when I was almost done with my site I was like oh my gosh. I've spent more time writing backend code than frontend code like for the first time ever. Ah so I'm curious when before remix did you do much backend code or were you mostly a frontend engineer.

21:02.64
Sergio
I have always been more frontend than backend and it was on my last job but I started to do I learned writings and I started to do more backend things from time to time. It seemed that a lot a and. I still use phrase my own job and still a little that much back and go but I haven't told about that and if that frontend code is not only and browser and code. But it's not just html Css and javascript because for example. How you generate the ht and server its responsibility of the frontend and a lot of things that happens on the server run should be responsibility to the frontendline youl and the backend shouldn be the one creating the yeah urls own application at least not and maybe from the api but not for the ui. Urls in a pretty job and have I had to go to djanggo and pay the url and the controller and you and other things cycle load the javascripttic thing to render yet and it makes no center if I am the front them and created views. You make sense like really yeah urls and if I know the urls and I know that that doesn't mean it makes sense I also can from things that the http hiters of the p of the ri what the response right? like I want what I want to proload or how I want to catch this specific. Yeah for the ui macs can still do that for api endpoints. I dont care about that. How did do that. But for the url for u I I am the ones that knows more about how these should be cached so these things that happens on the server should still be considered part of the front engine.

22:53.74
Kent
Yeah I suppose the the definition actually I remember talking with with engineers who'd been around for a longer time and they continue when I was at Paypal they would refer to my node server as the frontend. Um. And I was like but that's running on a server like that's the beckend and so like these terminologies get get kind of mixed up and and um, what I find interesting is I would also talk to. Ah, people who would call themselves web developers but they are working primarily on servers and I I was always surprised by that like well I yeah I guess you're building stuff for the web so that makes you a web developer. Um, and I never really um, realized that I was actually only half of a web developer. Um, or or not not really, but like um I only did half of web dev I could never do the full thing all all on my own. Um because I was just doing everything on the frontend. Um, and now like. You could totally do that and there are a lot of companies where you have backend engineers who are dedicated and just giving you apis and even in remix you can hit those apis directlyly but um, it it was just eye-opening to me when I realized oh I um I now have so much more power and I'm a full stack web. Ah, developer now because I have remix and it just makes that um that client server interaction. So seamless.

24:24.54
Sergio
Yeah, suddenly and you can actually make remix wall I say full stack and do everything in remix like build your wall business logic in reisx like or your database tables and. Um, how they interact and jobs and everything put the put all that in running or you can use a framework specialization for that that right for example and or Janggo that has all of these things and it either starts thinking about the model and then it goes to the yeah urls and then's there. It's posting Api.

24:53.12
Kent
In.

25:02.15
Sergio
And let the the re be the frontend they declined application of that that the worksts on the server Port also works on the browser. The user.

25:10.15
Kent
It? Yeah yeah, cool. Um, so Sergio what would you say if if you could have everybody do 1 thing to make their user experience of their app better. What would you say is the 1 thing um to you'd recommend I be like. You you use a lot of websites on the internet today and lots of them are super annoying. What's 1 thing they could all do to make your experience using those websites better. So.

25:36.69
Sergio
I Think using the yeah urls to change things in the Ui and in in my son's school they have like the internal email as not an adult email and. You click on an email and click Back. You will go back to the logging page. You Click don't change the url and it's really and that happens like it should. It's scrolling on the browser use the browser features and lets do browser things just saying use it best I own the browser and not on them. Mobile application.

26:15.75
Kent
I I think using the yeah url is a great piece of advice and you've got remix which definitely embraces the url. Um for for things. What what would you say since we have just a little bit of time Left. What would you say about like a dashboard application where um. They do update the url but it's mostly in the query string where you only have one page and just a bunch of widgets on that page that control things through the query string and do you have any experience with that and any bits of advice on how to make that experience better and.

26:50.90
Sergio
Well specifically with remix. It's and it's complex because you have lot of components that may need to be updated independently and you may not want to reload all the components just to get the data once so you can maybe be. Just forget about service and rendering and that say it's that where you will use Js and just say same as much as you can sellside and then just fetch delca for each wit client site and try to run them at the same time fetch everything in parallel and um. Last we were discussing and two days ago and the disco and that was using I friendss and to render the components and so you can say each widget is a yeah url and the main page.

27:37.28
Kent
I yeah.

27:48.81
Sergio
Where you have all Wi is basic a lot of I from your end and that way each one can load independently and kind have their own javascripttic code loading the independent on the threat and they itself who they name and editing with service surrounding but it was likely with I idea to try.

28:03.34
Kent
It? yeah yeah I mean it is a web platform api so that is using the platform. But yeah I don't know that there are a couple of interesting things about that. Yeah, like 1 thing that people will say well.

28:08.34
Sergio
And show how much reductionion and really is that.

28:22.68
Kent
Want to be able to um you know, be able to bookmark that or I want it to persist the the filters that I have set up or something and I'm pretty sure you could manage that actually with sessions and and if you want to share it then you can probably generate a persisted you know id for some sort of persistent. Settings or something like that. It's an interesting thing to explore. Um, but yeah, um, with ah the last minute or so that we've got here Sergio what would you say is the best way for people to keep up with you and and follow the things that you're working on and.

28:58.92
Sergio
And follow me at did that and start here the X a hour in Discor and im the almost holiday and night.

29:12.44
Kent
Yeah, well and and the community definitely appreciates it. Hopefully you get some time with your baby as well. And yeah, thank you so much sergio for giving us some of your time today and thanks everybody for listening. We'll talk to you later. Bye.