Tanner Linsley is the Co-Founder & VP of UI / UX at Nozzle. He joins the show to talk about TanStack Router. TanStack is an Open-source software for building better UI and UX. They talk about the vital role that a "router" plays in the architecture of a  web application. Moreover, Tanner shares why he developed his own router and explains the Type safe routing. 

 

Hey, welcome back to another episode of JavaScript Jabber. This week on our panel we have Steve Edwards.

 

Hello from a cold Portland.

 

AJ O'Neil?

 

Lost the window. Oh Oh my mics on okay Well, yo yo yo coming at you live from The shed from the shed

 

Yes,

 

just the

 

we

 

shed

 

are

 

this

 

recording

 

week

 

professionals for those of you listening.

 

Right. We also have Dan Shapir.

 

Hello from a Tel Aviv in turmoil.

 

I'm Charles Max Wood from Top End Devs, and this week we have a special guest. It's Tanner Lindsley. Tanner, do you want to introduce yourself, let us know who you are, why you're famous, all that good stuff?

 

Yeah, sure. Let's see. I started a company about 10 years ago called Nozzle. We reverse engineer Google search rankings and sell that data. Because of that, I've had to build a ton of front end stuff, mostly around like SaaS, like it's a SaaS application, data application. So we got into a lot of querying, a lot of data visuals lots of screens, data exploration. So I got into open source to solve all those problems. And then some of them were not solved really well. So I started building open source libraries to solve those problems. So early on it was like React table, React query, which are now just called Tanstack table and query. I have a charting library that's not that great. There's a virtualization library, which is actually great. And yeah, and then some new stuff that we're working on hopefully this year, working on a router, probably a framework. So yeah.

 

We need another framework, so thank you for that.

 

Yeah, why not, right?

 

We do. We do. The ones we have are terrible.

 

It's been at least

 

Yeah.

 

what a day or two since the last one came out?

 

Yeah, but

 

we kind of need to be pedantic in that it's not so much a framework as it is a meta framework, I think, according to the current

 

Oh.

 

nomiculture.

 

And that,

 

Oh

 

but

 

yeah.

 

should

 

Oh.

 

we clarify that that doesn't mean it's owned by Facebook? I'm going to call it a meta

 

Yeah.

 

framework.

 

Oh, yeah,

 

What a

 

a meta framework

 

terrible

 

is

 

name.

 

any type of framework not created by meta.

 

It's a pseudo

 

Uh...

 

framework,

 

wait, wait.

 

pseudo-formwork.

 

Yeah, there we go. So I'm just curious as we dive in, right, we brought you on to talk about Tanstack. I think there was some noise about you releasing a Tanstack router, but you kind of just, I guess you just kind of whetted my whistle. I'm just really excited to dig into this and go, okay, so what was it out there that you needed to be out there in order for you to be able to reverse engineer Google?

 

Well, obviously there's a lot of back end stuff that I have nothing to do with. So we were a three person co-founder team, all technical.

 

Uh-huh.

 

So there's two other guys who are on the back end and infrastructure. So our CEO is database infrastructure back end guy. And then our main back end guy, Joe, is over all of the data gathering and the entire process, the machine, goes out and gets all that data. So there's a lot of stuff there that we could maybe talk a little bit about, because I know a whole lot about it. But I don't know the inner workings too much. So there's that. But everything that I've dealt with has been from API design forward to pixels, so mostly product-facing and user-facing. But yeah, there's a lot of stuff that we built to do that. So, yeah, I'm excited to be here.

 

Now correct me if I'm wrong, but the 10-stack, well, meta framework, rendering framework, set of tools, whatever we decide to call it, or you decide to call it, is built primarily on top of React, correct?

 

Um, it was. It was built primarily on top of React and there's still a little bit of that, of that nostalgia in a lot of the libraries. Like most people use 10-set query through React. Most people use the table through React, but both query and table have become agnostic. So they are now just kind of core logical libraries different frameworks.

 

So if

 

which

 

Other

 

I wanted

 

libraries

 

to use.

 

are joining that club slowly.

 

OK, so this is interesting to talk about the table just because I'm in a project where I'm looking for a good implementation of a data table. So if I'm working in a Vue project, which is my primary development tool, I could use TanTable with inside of Vue.

 

Yeah. So there's a ViewTable adapter that really is just responsible for hooking up reactivity around your data and options. And then it spits it back out to you in the form like that. Like that adapter is just calling some vanilla TypeScript things and setting them up to use inside of View. So yes, you could use it in View.

 

So just to clarify, all of the 10-stack tools or parts are built in effectively vanilla JavaScript or TypeScript on top of the browser DOM? Or are you

 

as much as

 

using

 

possible.

 

some sort of a framework inside of them?

 

No, no, they're basically just built from the ground up using TypeScript. Usually, some class-based TypeScript, not always. But query table, so the query library, the table library, and the virtual library are all built with agnostic course, and they have adapters. And you could probably build your own adapter for any of those pretty easily. Query is a little more involved, but there's adapters for most everything for query now. Table and virtual are really lightweight, really easy to write adapters for. So if there is an adapter for them, it'd be easy to create one. The charting library I have is React-only currently. And I'm actually planning on not sunsetting it, but just kind of not working on it anymore, writing it into the sunset a little bit. I have reasons around that. We can talk about that later if you want. And then

 

Sadaq.

 

the router is interesting too. because I started out building it in an agnostic way. And I still could do it in an agnostic way. But the problem with that is that the React ecosystem is kind of this snowflake a little bit, where it was the first ecosystem that I really feel like there's a lot of different routing strategies and routing libraries out there.

 

Mm-hmm.

 

but it's kind of its own thing. There's React Router that's dominated the scene for a long time, still does. And then there's Next, which is just its own routing library, right? So as a framework, like React feels strange where like you could have multiple routers in the ecosystem living together. There's not a lot of that in other frameworks, I feel. There still is other routers in Vue and Svelte and Angular and all these, but there's way more more like community gathering, I think, around just one de facto router. And with the way that meta frameworks are going, it's in the best interest of an ecosystem around a framework to unify on a router in a way. React will probably keep having multiple routers and that's fine, but thinking about Solid and Svelte. to have multiple popular routers in the ecosystem, unless all of them can work really seamlessly with SvelteKit or the all-inclusive story. So long story short, I have deprioritized the agnostic approach to the router, mostly because there's already great routers out there for other frameworks, and I don't feel like I need to solve those problems yet. And I'm just going to build 10-stack router React specific. A lot of it's still going to be agnostic, to be honest. Like, I'm just, you know, still

 

you

 

have an agnostic core and just make it React only. Because at the end of the day, I really would love to port a lot of the great things about it to other frameworks if possible. Not through

 

Thank you. Thank you.

 

making another router, but I talk with Ryan Carniato all

 

Thanks for watching!

 

the time about how I want to improve the type system for Solid Router. The best way of doing that is likely not creating yet another router for solid. It's working with Ryan to take the concepts out of 10-sec router and build them into the de facto router for the ecosystem. So

 

I'll

 

that

 

get...

 

would be much harder to do for React router and Next. We're talking about major rewrites to support types and stuff. So it's a bit of a moonshot.

 

Yeah, getting to that, to the concept of a type router in a minute, because I think that's one of the most important topics for us to talk about. But just to touch on what you mentioned before about other frameworks being more locked to a particular router implementation, I think that's almost by necessity. I mean, it seems to be the way things are going. something like QUIC. QUIC is intrinsically tied to its router implementation. It kind of everything revolves around its router implementation. And I think some of the other frameworks are kind of going in the same direction. It's only really with React that for such a long time the library was router agnostic and managed to succeed despite this fact so that there of router implementations that happened at the point where you couldn't really go back.

 

Right.

 

But I don't know what will happen with Remix, but it seems like the next router might eventually take over, don't you think? They're kind of in a way promoting next as the future of React.

 

Yeah, it's uncomfortable for me to think about a lot of this because React Router is great and Remix is fantastic. I use them both. And Next is great and I use it as well. And then I think about the things that I've heard from the React core team about how Next is just going to be an implementation

 

We lost you.

 

I was gonna say, I think he froze.

 

a router, right? and not necessarily the router. And I think the React Core team would really want to stay away from that, but reality kind of says otherwise right now because the only... Like, they're working really closely with the next team. I think some of them are now working for Versel. And I just feel like that may be their end goal, like that may be the moon that they're shooting at. But at the end of the day, how much work is it going to have to be put in put in to have a router that works the way that React wants it to? That's my question. So is it going to be worth it to have another router that can do that? I don't know. I think so. I think it's going to be worth it. But right now, Next is kind of the only one that they're saying, oh, yeah, it's the router that we're putting all of these ideas into. Those ideas are really hard to nail down, in my opinion, about what is actually happening. inside of the magical Next Router for server components and all that. Which I think is why Remix took the approach that they did. And that's why I think it's actually really cool that they did that. They just kind of said, we don't want to wait around for server components. We don't want to wait around for a lot of this stuff to proliferate through the React team into whoever their favorite is right now. They just kind of went ahead and did it and came up with their own flavor. really cool. But I would like to see there be multiple routers still in the ecosystem. Obviously, I'm building one, so I want to see that flexibility stay there. The idea that Next.js and the Art React team are working so closely together to build this router that's going to work perfectly with server components, it's both really intriguing and also kind of scary, because and the patterns and the cool things about server components and whatnot to feel locked away inside of this framework.

 

So

 

But

 

this is the

 

I

 

question

 

know that sometimes

 

I have.

 

that's what has to happen for things to progress. You got to work really tightly with people to work on new ideas and proliferate new technology. So

 

This

 

I'm

 

is

 

just

 

the question

 

hoping for the best.

 

I have in regards to the whole router scenario is normally we want separation of concerns, right? There's a benefit to vertical integration where everything is coupled with everything else. But typically, isn't that the whole point of component driven architecture is that you're not coupling everything to everything else, that you can have discrete pieces that can perform their responsibility? So why? Why is there such a... Why is the router so fundamental to the whole architecture of the application rather than just being a pluggable component to begin with? Why does it tend towards

 

Yeah,

 

that?

 

I think in the past it has been very componentized because we are doing everything on the client. And when you're doing everything on the client, the entire ecosystem was based around the client, right? As soon as you're in that context, yeah, everything can stay really componentized and just handle what it needs to handle. But over the last five, six years, as things have started pushing back through SSR you know, meta frameworks and now server components going back to kind of server-driven routing with, you know, SPA routing kind of being added in now. That's changing because I feel like it's exactly with React. They're adding server component stuff and at some point you have to have opinions about, you know, how things are moving across the server through I.O. and to control that experience, you have to have your logic living at a higher layer of abstraction and being able to only render pieces that it needs to and move things around and intercept things and send them to the server and back. And the best place, the only place to do that really is in a router. So where React didn't need to have any opinions before, they kind of need to have at least some plugins that are pluggable opinions on routing going forward. And React itself doesn't really have a whole lot of opinions. The way that I understand it is there's just this endpoint, this pluggable endpoint that you can feed React and say, hey, when we're doing server component things, this is where I need you to point and call things. And then you need to have a router on the back end that can understand all of those calls and be able to understand and use server stuff, it needs to be able to only render pieces of the page that have changed and package them up and stream them down. So it's just getting way more complex from the router's perspective. It's just getting more complex to satisfy these new constraints.

 

Yeah, I have to agree very much with everything you're saying. I mean, I think there are two really core pieces to what meta frameworks are, which are becoming like kind of touching and interfacing with everything. One of them is, as you explained, is the router, which kind of needs to know what's happening on the client, what's happening on the server, how to get data across from one side to the other. And the other is the bundler, where you need to be. And in fact, the bundler and the router need to kind of know what each one of them is doing because which code is being sent to the client really depends on where you're going and where you're coming from and stuff like that.

 

Absolutely. I always, not always, I guess for the last year I like to ask people, you know, like what is a framework to you? Like what does that even mean? When people say like, oh, you have a meta framework or whatever. Like what are you talking about? What does a framework give you when people say a framework? And everybody has different answers, but really I've been able to boil it down to most people are referring to a big portion of a meta framework being a router. has everything to do with how it interacts with the server, whether that's just SSR into the client and then fully hydrated, whether that's an incrementally, progressively hydrated thing like remix, or now going full server components. Those are all different flavors of the server part of a framework. And then the other parts of what is a framework, a lot of it comes down to It's just the flavor of how you do that. And then there's also this underlying portion that's about deployment. So people talk about a framework. Sometimes they're talking about a utility or a tool that you can... Hang on a second.

 

and mark the clip so that we know where to take it out.

 

Hold on guys, I have something I might need to look at. Hold on.

 

No problem.

 

I've been there.

 

Yeah, unfortunately mine are older now.

 

So just FYI, I've got a few questions I want to squeeze in here

 

Oh, go

 

at some

 

for

 

point

 

it.

 

too. So, well,

 

Go

 

Yeah?

 

usually

 

for it.

 

Dan,

 

Come on.

 

I can always, when somebody's talking and I can hear a question coming up, I can see you take a breath and you're ready to jump in right away. So I try

 

Yeah,

 

not to

 

well,

 

step

 

I'm an

 

on

 

Israeli.

 

you.

 

You know, I've been thinking maybe we should talk about some sort of a mechanism, although it might be problematic for video, but for somebody like to do something like this with his hand when they want to say something.

 

Oh, I see radio shows like Dan Patrick's show. They do that all the time. They raise their hands when they wanna say something. Oh,

 

Yeah.

 

it's a big

 

You

 

deal.

 

could use

 

I...

 

the chat too if we're all watching the chat.

 

Yeah, I never notice

 

I

 

things

 

do, I

 

in

 

say,

 

the

 

hey,

 

chat.

 

I got something I want to say, and 15 minutes later I get in.

 

Yeah, I never notice things in the chat. I have to be blunt. But yeah, sure, when Tanner finishes what he was saying, assuming he remembers what he was saying, feel free to ask your questions, Steve. I have to tell you that the social networks are making a huge difference with everything having to do with demonstrations. So like last night in kind of a shock around something like 9 something p.m. the prime minister dismissed the minister

 

I saw

 

of

 

that.

 

defense,

 

Mr. Defense, wasn't it? Yeah. Yeah.

 

the

 

Yeah.

 

secretary

 

Yeah. 

 

of

 

Yeah.

 

defense,

 

Yeah. Yeah.

 

exactly.

 

Yeah. 

 

And

 

Yeah.

 

like

 

Yeah. 

 

immediately messages started flying on. We mostly use WhatsApp here in Israel. So immediately messages started flying like everybody, like to the streets as it were. And within like 30 minutes to an hour, there was like a rally with something like 300,000 people and blocking

 

In Tel

 

one

 

Aviv,

 

of them,

 

yeah.

 

blocking probably the main intersection in Tel Aviv, like literally spilled into the highway. The police literally had no chance because there's no way you're going to stop 300,000 people.

 

Right.

 

Well, not without like love fire, but we're not there yet. Fortunately. Yeah.

 

So why is Facebook? Why do they let you do this because Facebook

 

What do you mean?

 

seems to get involved in political

 

WhatsApp

 

stuff

 

is

 

and

 

Facebook.

 

shut it

 

No,

 

down. Yeah,

 

yeah,

 

what's up is Facebook?

 

WhatsApp is, they've remained really apolitical. It's just a messaging app. Instead of using message, like instead of messaging, people don't message in Israel, they use WhatsApp. So it's just

 

Signals

 

a messaging

 

better.

 

platform. And you know, it's not a content platform. It's not like Facebook, where Facebook decides which content you see. It's just you, you know, join, like messaging other people, or joining groups where you message on the group. That's it.

 

Sorry,

 

Anyway,

 

guys.

 

Ted, do you remember

 

Potential.

 

where you were, Tanner?

 

No, it's a potential medical emergency,

 

Oh yeah, you

 

but

 

need to

 

crisis

 

leave?

 

avert. No,

 

The child did

 

everything's

 

not

 

out.

 

eat the coin cell battery after all.

 

Everything's okay, but scared me for a minute.

 

Glad to hear everything's fine.

 

We were talking about

 

routing

 

how...

 

the integration, the why the server side aspect being why things have to be more tightly coupled. That's,

 

server

 

that's

 

components

 

the last thing

 

stuff

 

I remember.

 

like that

 

Yeah. And then the data fetching too. Oh, the

 

Yes.

 

last piece that I was going to talk about, you can probably mark right here if you want. The last piece that I was going to say is, everybody is also concerned with the underlying deployment strategies. Like if you look at Next.js, it's not just founded on like a great framework, right? But it's also built on like a really good deployment strategy. And Next.js has really fought hard to have that work well. Remix is the same way, like maintaining adapters and the story behind just deploying and getting your stuff out there. And supporting like the spectrum of things that need to be working really well to deploy all these different types of like the different types of applications, right? The deploying ISR versus, you know, all static or fully server, long running servers, serverless. deployment architecture that goes into that. And which is why I'm really attracted to Astro, because they've solved a lot of that without marrying themselves to a JavaScript framework of choice. And they just say, hey, we'll support everything, which is really attractive. So it's all these things of routing and data and bundling. Bundling is another part which is going to become even more important. with server components because now your bundler has to know how to do all the server component stuff. So it's just things as we created this really intricate and honestly pretty great ecosystem of SPA land. Right? And now we're trying to move everything back to the server. And

 

Hahaha

 

it's creating a huge shift in like, Okay, all of our tools need to get way better now and need to work. Everything needs to be a little more tightly coupled and bundled. Like there's this constant unbundling and bundling of ecosystems.

 

Uh huh.

 

And right now, we're in a bundling phase where for everything to work in unison and harmony, it has to get closer together. So that's why you're seeing all these things kind of conflate into a single location. And I'm sure we'll get there and it will be great. And there'll be a season of productivity. a new paradigm will come along, we'll be like, crap, we have to unbundle this to move forward. And so you'll see it again, unbundle. So my piece of this is that I don't really care a whole lot about what framework I'm using or... I don't care too much about the tools themselves as much as the assurances that I want. And one of the reasons I started building my router was because no one at the time was taking routing type safety seriously. Absolutely no one. And still, Next.js added some stuff, just barely, in an experimental thing about type safe paths and routes and stuff. I saw it as a necessity. The things that I was building at Nozzle, they are so big and interconnected stream type safety around all of my links and keeping data in search params. Like, I can't tell you how much state I've hoisted out of use state into the search params. And we're not talking just like, oh, what page are you on, right? It's like 10 widgets on a screen. Every widget has its own state, which is like a big chunk of JSON that basically constitutes a SQL query happening on the server, right? And then all the display logic to show it to the user. So it's a lot of state in the URL. and no

 

That's

 

one...

 

awesome though. That's

 

yeah.

 

awesome that you've, cause it, cause I, that is the thing that we had right with jQuery, jQuery had jqbbq and I don't know how we fell so far to the point where now you can't copy and paste a URL and get anything resembling at all what you were at on the other side. So I am extremely happy to hear that cause I think that is the

 

Yeah.

 

worst aspect of, well, there's a lot of worse if it, if it doesn't work at all, that's obviously the worst. thing which many

 

Right.

 

I can't tell you in the last two weeks how many sites I've gone to I can't even pay I can't click the pay button to give them my money right but

 

Right.

 

but after that I think routing being able to share a URL from your computer to somebody else's I'm so happy to hear that you're working on that and really taking it seriously

 

You know, just

 

And honestly,

 

to give, if I can just give my two cents on that for a second, because I've also been running into this problem recently from a different amusing perspective. So I've got accepted to several conferences to speak at, and I wanted to post links to my talk at these conferences on Twitter. And in some cases, I either just can't, because there is no URL with parameters to my talk or I have to

 

Thanks for watching!

 

open like dev tools find IDs in the page and start copying and pasting them like into the URL manually it's like like

 

We're

 

URLs

 

back to cookie-based routing.

 

like URLs they're like you know URLs yeah

 

Yep.

 

Yeah, it's enraging too because Next and Remix, they do a really good job for the most part, for most of the things. Everything about Remix is route-based. You do all of your data fetching and loaders off of the route, same with Next. So they do really well with page level at the page level stuff, to be honest. They do pretty well. but it's search params that fall flat on their face. Because in both, and not just these, but many, many routers out there, you just say, what are search params? It's a black bag of string to unknown type. Now it's a record of string to unknown. It could be anything you want, or it could be nothing. We have no idea, right? And the utilities around manipulating search params are garbage. They're just like, okay, create a new record of string to any and give it to us and we'll shove it into the URL. Like there's no thought about validation, there's no thought about serialization. You know, can you put JSON in there? Can you not? What's gonna happen if I hand an array of something to a search params API? Is it gonna, you know, is it going to comma separate them and put them into the URL? Is it gonna encode them? Is it going to, you know, What's going to happen? So a lot of those questions, I've been through those questions. And I wanted to build the state of the app. That's the thing. There's kind of this, people are going to say, well, there's no apps versus sites anymore. It's all just the same. Right? And that's not true. I feel like there's the spirit of the app that lives on. And there's a big difference between a content site and an e-commerce site. and an application or managing complex state, right? Have you ever been to Amazon and clicked on all the filters in the sidebar and seen what it does to the URL? Like, it's insane.

 

Mm-hmm.

 

Huh.

 

It's storing all of that information in the URL, because if you take that URL and send it to somebody, you need to make sure that they're going to see the exact same filters, the exact same stuff. And it's really hard to manage that in, you know, a React application. So that's been the biggest driver for building my router. Now, all the other stuff has just been side effects. Because I have my own router that can handle the types and the search params well, I also have to have solutions around data fetching. And now people are asking about the solutions around, well, does it support server components? And how can I stream? Right? So I'm kind of being, you know, or a type safe router that can handle really good search programs, then that's my bar. But everybody else is like, well, because you have that, you basically need to have a meta framework as well. So.

 

Ha ha ha ha!

 

I think it might be worth explaining a little bit what a type safe router actually means. You mentioned it several times but you didn't really go into the details of what that means. I think it would be worthwhile for listeners.

 

Yeah, and I'd also like to know that where do the errors surface, because I feel like that could be a very bad experience when I just, you know, at first blush.

 

For sure. So type safe routing, let me walk you down the concepts of what's happening. So usually you have at the top of your route tree, you're building this route tree, right? Because everything we do now is component-based, same with our routes. They're like these components and they're hierarchical. And as you're building your route tree, going down your route tree, you are defining structure. for your application. You're defining all the available URLs that are going to be there. And then for every unique representation of the URL hierarchy, at every single branch and leaf node of your route hierarchy, there is a type of function signature, if you can imagine it that way. And it's what parameters can I send into this route? And what is it going to return or make available to me? Parameters are a combination of path params that are going into the URL, like the path part of the URL itself. Search params, which to most people is just big black box, right? But for us, it's, okay, here's this structured, it's a structured generic that you can pass to search params. And then what you get back is usually in the form of, you know, what's the loader data that you're getting back? what are the unique context that has been built up by this route. So if you can think of the entire route tree as you match a route and build the route match for an individual URL, as you go down the route tree that you've matched, you can kind of add things into the context that you're carrying down the route tree until you get to where you actually render your routes. And where you render your routes is where consume all that stuff, right? So it's basically a function. When you call the function, you're writing links and navigate calls, right? So you write your link component, you say link to, and that's a parameter in the function. SearchParam's is another parameter in the function. So if you kind of draw that similarity, hopefully you can see how it very much is TypeScript. Like writing a link, and you're feeding it a bunch of parameters, those all need to be typed. And then when you're inside of a component that's rendering the result of a route, you need to have access to the context, the loader data, you need to know where you can navigate from there in a relative sense and if it's possible. If you're manipulating search params, you need to know the types exactly for what are my current search params and what are the search params like where I'm going. And if you can figure out those two things, you can write a type safe reducer function that will feed you the current search params for the page you're on, fully typed. You can manipulate them into the new type, and then it will type check everything and make sure that you're only performing navigations to valid places with valid structure. And when you get there, you can consume out of the routing layer is fully typed. To do all of that together takes a lot of architecture that is based on TypeScript and how TypeScript works. You can't just grab React Router or any old router off the street and say, we're going to add types to this, because it has to be thought of from day one. How is this going to work with TypeScript? And I know that because I tried it. I tried to write full types. I had tried to backport types onto React Router version six beta for a year, and I just couldn't get it to work.

 

I'm not surprised, I have to say.

 

And Next.js is super cool. They're doing generated stuff. You can back your way into it a little bit if you use generated code, right? Code generation.

 

Yeah.

 

And there's actually other libraries out there that can do code generation for React Router for Next and stuff that will generate type safe API helpers for you to use. That's really cool. But Tanzac Router doesn't need any code generation. It's just TypeScript and it works fully compiled.

 

So if I can take a practical example just to make it a bit clear, if

 

you

 

I change the route, the route tree, you know, either remove an existing, let's say I remove an existing route or rename an existing route, if somewhere in the code I have neglected to fix the code for that new route, I will get a type error. That's essentially.

 

Right.

 

that you're providing. It's not that I have to avoid broken routes using, I don't know, let's say tests. It's I avoid broken routes because my code literally can't compile if I have a broken

 

Right.

 

route. That's like

 

Right.

 

the key benefit. Obviously, additional benefit is that I get completion so that if I'm starting to type some sort of a route into one of my links, then I get the the typing properly. And in the context

 

Right.

 

of of params, if I understand it, basically, you know, effectively what's like practically implemented as a string in a certain format effectively becomes typed params of a function. So again, I

 

Right.

 

can't misinterpret one of the parameters. If I try to do that again,

 

Right.

 

the code just won't compile.

 

Exactly. And you know the path param completion and checking, that's kind of first base. And that's where a lot of people are right now, is making sure that you can't write a path that doesn't exist or that you can get autocomplete. That's great. The search param stuff is much harder, and that's something that I've been working on for at least a year. And that's where your search parameters are validation-based. getting a string of could be just garbage, right? It literally is the first piece of UI that your users have on your app is the text input at the top of the screen. People forget that the URL is just a text box. They can put anything they want in there. And so when you get that, you need to validate it. Just like you would validate data coming from an external API, write it straight into your app, you have to validate that stuff. And in the process of validating it, you can type it correctly. So the examples in Tanstack Router use Zod, but you could use really whatever you wanted as a validation library. Zod's great because it validates and it type checks and casts it correctly. So as that string comes out of Tanstack Router, it's being parsed, fed through your validator, hopefully through something like Zod, the other end as a fully validated and fully typed data structure. It's not a string. It really is just JavaScript JSON at that point. And to your point about, well, if I remove a route here or there, will it bark at me? And it's like, yeah, it will. But also search params. So say you chose pagination as an API early on in your app. Page index is a very common thing, and you're putting page index up in your URL, right? Say 10 months from now, you're like, crap, we have to move to cursor-based pagination, we can't use page index anymore. It doesn't make sense to use that. Some developer goes into one of your routes and changes page index to cursor. Now, every single URL that was using, like writing to that route and manipulating page index, even if you had path checking, right, would still be busted. And that's why you need the strict search param checking as well. So you change that. And in Tanstack Router, anywhere that you are referencing that type of page index or that shape, that verified shape that you are passing around everywhere, those are going to fail as well. And you can actually use this to version in a way. You can version your URL. your URL search parameters, and have backward support for older URL versions and schemas, which is something that we're working or we're experimenting with at Nozzle right now. So literally someone goes and bookmarks, so take a complex situation, now add time, and it will just get worse, right? So somebody goes and bookmarks your URL that has page index 3, you know? they wanted to see a certain page or something or a filter. And then one of your developers changes it, you see it, red flags are where you fix it all, right? But now you've changed the URL schema and that old bookmark link that some other user had, you don't want that to break, right? You want it to go to the same page and you want to give them the same experience as best possible. So you can version your URLs and say, hey, every URL that we create right in this version of our code, we're just going to give it a version of one. up. And then for every version of your URLs that you break, you can pass an upgrade path from old search params to new search params. And if possible, intercept those old URLs coming into your app, run them through the updater cycles, reduce them through these functions to upgrade them to the newest URL schema, and then apply it.

 

So redirection

 

So...

 

becomes a typed function.

 

Yeah, because redirection works great. As long as you do redirection up in the server, it's always fantastic, right? But at what point do you think it's going to be safe to do redirection of search params, complex search params on the server? And we're technically working on that as well, right? But for now, the best place to do search param redirection is technically in the client if you're using something more than just a string in a string key value, right? You have to be able to parse that and run it through functions and upgrade it. So it's an interesting challenge that we have, you know, to be able to allow users to bookmark things and share links and have those work very far into the future, even when we change URL structure. All of which is insane to think about if you were just using something like the URL search params class that you're given in the browser, which is incredibly naive. There's so many layers to this problem that it's something that has to be solved, first class by a router.

 

So Tanner, I want to switch topics for a little minute. And Dan, before I forget, you'd mentioned about something about putting your two cents in. Have you ever wondered why you put your two cents in, but it's a penny for your thoughts. Somebody's making a penny. But anyway, so Tanner, I noticed that, you know, I'm looking at all our pictures here and you called this the Tan Stack and all of you and along with the rest of us are pretty white. So I'm just curious as to see where the name Tan Stack come from in case I might've missed that somewhere.

 

I'm not Tan, that's for sure. But my name is Tanner, so it kind of works out.

 

Okay.

 

That's what I

 

No,

 

figured.

 

it was initially a joke. I was just building these tools and they were just under just whatever names, you know, it had nothing to do with me at the time. But one of my friends, Sean Wang, AKA Swix,

 

Thanks.

 

we were sitting at a React rally a couple of years ago. And he was like, man, you need a name for all your stuff. And I was like, yeah. but I don't know what I would call it, you know, and he's like, it's the stack, the tan stack, and he kind of just jokingly said it. And everybody else at the table was like, Oh, that's kind of cool. And I'm like, no, I don't want to name something with my name in it. That's, that's a very Linus Torvald thing to do. I don't want to do that. And he's like,

 

Ha ha ha.

 

no, it's catchy. You should use it. Cause jam stack was a super hot term

 

Right.

 

at the time.

 

You mean

 

And

 

have Linus

 

he.

 

renamed Git after himself?

 

Yeah. And he just kind of started telling people that. And then he tweeted it a few times and it just kind of started catching on. And then I referred to it in conversation once and nobody even blinked at me. They were just like, oh yeah, cool. And so I decided that when I was going agnostic with my libraries, that I was just going to lean into it really hard and see what happens. Mostly because there wasn't like, no SEO for Tanstack. I think there's a little bit for some kind of tanning lotion or something. But if you Google Tanstack, you're not really going to get a lot of other things. So it was a good SEO branding move. And I don't mind a little bit of attribution to the projects I've created. But I didn't want it to be so personalized that I have somebody else run the company or sell it or whatever in the future. I think Tansec is generic enough that it's still okay to do that. Yeah, that's how it came to be.

 

Cool. So I was looking at the table implementation, you know, why you were, you guys were getting into the nitty gritty on routing. And I noticed that you work pretty closely with AG grid.

 

Yeah.

 

And you know, we had Niall Crosby on, uh,

 

Hmm.

 

it's been a while, a year or two, one of the best podcast episodes ever that we've done because he brought

 

I love

 

the dad

 

Niall.

 

jokes and then some, it was awesome. But, um, I'm just curious to see a couple of questions on the table. One, I'm curious to see how it is you're working with. I mean, they have their separate product. Are you basically a wrapper around AG grid or how is that integration?

 

So it's funny, there isn't really a lot, like any code level integration between AG Grid and Tanstack Table. So really what happened is that, AG Grid is just this mega powerhouse of a product that can do incredible things that I would never ever want to implement in Tanstack Table, nor would I have the time to do it without becoming a company like AG Grid. Right? And AG Grid, its purpose is to empower those types of solutions and help really large complex organizations have pivot tables in Excel and like this full power suite, you know? And they're not really concerned with writing, you know, with providing a ridiculously simple, free, open source table creator. that's also really lightweight. So we kind of accept these specific constraints for each of our libraries. And everybody pegged us as competitors, really from the beginning, when in fact, me and Niall, we've been talking for a while and we're not really competitors. We're just two very different implementations for the different spaces in data grid ecosystem. But there's a lot of other companies out there who are trying to rival AG Grid, and there's a lot of other open source tables who are trying to rival TanSec table. And we just kind of decided we wanted to share ideas and share concepts and make sure that we were making each other better as much as possible. And also it's an alignment of ecosystem. I don't plan on ever creating a company out of TanSec table, a big fat data grid company, you know, licensing and stuff like that. And I don't want to build the features for that. But I needed somewhere to send people when they say, oh, hey, I'm X Fortune 100 company and we need a pivot table for our stock exchange app or whatever. And I'm going to say, you should just go use AG Grid. Like I needed an official partner to say, for this side of the, for these use cases that we don't cover, this is our preferred route and it's an educated one and it's a decent handoff to say, okay, go play around with AG Grid.

 

And it's

 

And

 

a type

 

similarly,

 

route.

 

AG Grid, when they get questions of, hey, well, are you guys going to build a headless version? I need a table library that weighs less than 70 kilobytes or whatever and some really lightweight. They don't want to have to Well, if that's your main use case, you go use Tanstack table. Right. So I guess if I would classify it, it'd be, it's more like, uh, like an ecosystem marketing partnership.

 

So a

 

Just

 

question

 

to

 

about the term you just

 

help each other

 

used.

 

out.

 

We kind of touched it in the conversation we had briefly before we started recording. It used to be that when people said headless, I took that to mean that they are UI-less, kind of like Puppeteer being a headless browser.

 

Yeah.

 

But now, more and more, let's say, headless CMSs as opposed to WordPress, where the WordPress, the CMS, has its own user So you have a headless CMS which doesn't have a user interface. But now more

 

Right.

 

and more I'm seeing like this combination of headless UI. And you kind of also mentioned it in the context of the 10 stack table, that it's kind of a headless UI. So it seems like to me like a bit of a contradiction in terms. What does headless UI actually mean?

 

I think it's an ironic term. It is. It's maybe a misnomer,

 

Ha ha ha ha ha!

 

but I like it because there is some truth to it. So headless UI, headless meaning you're taking the UI out of it. So what is headless UI? I think it's taking, maybe we're splitting hairs a little bit here, but it's taking the actual visual markup and styling out of the picture. Because user interface just isn't just markup and styling. There's a lot of logic to it. And so when you hear headless UI, I believe that's what people are referring to. And that's what I refer to is that we're talking about utilities that are built that provide you everything to build the UI except for the visual markup and style piece of it.

 

Unfortunately,

 

Don't

 

So.

 

we just call

 

Chuck.

 

that a library?

 

What?

 

Don't we

 

Thank

 

just

 

you.

 

call

 

Good night.

 

that a library?

 

Yeah, but I mean, aggrid is a library too. It's not headless though. It's just one more way of differentiating, just another differentiating term.

 

Like, OK, so component is something that is meant to render. Library is something that is meant to process or do work. I don't.

 

I'm with you. I am

 

Thank

 

with

 

you.

 

you

 

Thank you.

 

on that one. And I kind of played those strings a little bit in the early days of React table. People didn't get that. Mostly because component architecture wasn't fully embraced in the web ecosystem like it is today. It'd probably do better today if we did it again. But like component versus

 

you

 

library, people just, especially new people coming into programming, they don't know what the difference is between that. through it.

 

Thank you. Thank you.

 

So for better or worse, it got a coined term. The first place I actually heard it was from Kent C. Dodds, who built a library called Downshift in React, and it used render props. So you rendered a component called Downshift, but then it just fed you a child as a function, which gave you all of the logic and all the things to hook up your own UI. So that's kind of where, like, was it still a component? Yes, it was. it was.

 

hmm

 

Was it a library? Yes, it was, but it was headless, right? It's

 

so

 

that

 

it's kind of like

 

last

 

a

 

little differentiating piece.

 

like blaming Kent.

 

Yeah.

 

So it's kind of like a higher order sort of a component that provides some component functionality but not the actual component-ness of the component as it were.

 

Let's call it decoupled logic is really what it is.

 

Yuppie

 

Is we've decoupled the logic from the rendering process.

 

Well,

 

Oh.

 

unfortunately, to go back to what you said earlier, Chuck and I really can't split hairs. If you see this, you know what I mean. So, I mean, usually when I see the Headless UI, it's, you know, I think probably one of the more common ones that I've seen is like a tailwind, you know, where it's just, you add your classes

 

Yeah.

 

to your markup and you style and theme, seam things that way. They have back, they actually have a library called Headless UI. I think if you go to headlessui.com, that's, you know, it's their components that you import in and plug into, you know, you a React project. But yeah, the answer to that took my question. That was my next question on adding stuff on top of it. Now, do you need any type of plug-in or adapter, I guess, for specific libraries, like, for instance, a tailwind, or if you wanted to use, I don't know, Bulma or Bootstrap or something else? Or do you just install it and start adding your classes and your markup?

 

Yeah, you don't really need too much of it. Most of the adapters are just based on the real... It's based on the framework and how it interprets specific attributes and props that you send back. So there's a little bit of an assumption with my libraries that when you say, hey, give me the props that I need to attach to this thing or the functions that I need to attach to this thing, that your framework's gonna be able to understand those. Like, I think one of the most agnostic ones is probably the virtualizer, like the React Virtual, Svelte, or Solid Virtual Library, like 10-second virtual. It doesn't really use the concept of props really anymore. It's just kind of like, give me the size. Give me the size of the virtualizer. Give me the current index, the offsets. Give me the measurements. So even the concepts themselves inside of the library to where it's not a prop or an attribute or a binding, it's just data, right? And you're working with callbacks or Pub-Sub or whatever to fish that data in and out of your component that you hook up. So that's kind of the best case scenario. And there's some that have prop getters. So like, Tanzac Table has prop getters, like, hey, give me the props that I'm going to use to put onto this React component. Some of that can change. a little bit between frameworks. But yeah, for the most part, you can use anything you want. So Tanstack table is agnostic and headless. One of my contributors, Kevin Vandy, he used Tanstack table to create another library called Material React table that is a competitor to the Mui table. But it uses Tanstack table under the hood, but wraps everything up in the Material component architecture. There's, you know, you can do all of my stuff is implemented with Tailwind. So you can just hook it up to Tailwind. You could hook it up to anything you want really. Because at the end of the day, it's just data. Page indexes, click handlers, you know, mapping over data, rendering rows of things. So you

 

So

 

can use

 

you

 

anything

 

have to

 

you

 

actually

 

want.

 

define your table TRTD markup in your component, and then you're just basically plugging in the data.

 

I lost you guys for a sec.

 

Yeah. So what I asked was, so in the table one, for instance, you're just giving the data and not actually the table structure. So in my component, I'm going to find my table elements, my tr, td, thead, tbody, that kind of stuff.

 

Yep, exactly. In fact, if you go to tansac.com, click on Tansac table, and then just scroll down. There is a full width example on Code Sandbox. If

 

Yeah,

 

you

 

I

 

go to source.

 

haven't been able to get those to come up, so I've been trying to look

 

Oh,

 

at

 

really?

 

that. Yeah.

 

I can actually get you a permalink here, then. That would just go straight to the example. But I'll give you, so here's a basic example. Source, main. I'm just going to paste this into. So if you click on that link and go down, you'll have to use the file explorer to click on main.tsx in the source directory.

 

Mm-hmm.

 

But in that file, you will see the table structure. And it's just a big roller coaster of JSX where we're creating the table, the T head, looping over header groups to create table header rows, T body rows. and so on and so forth. So it can be as simple or as complex as you want. Like my table component in Nozzle itself is... hang on my little girl is screaming. My table component

 

you

 

in Nozzle itself is 650 lines long. Right? There's utilities in there. It's using Tailwind. There's utilities in here to show and hide filters. So I built filter bars and dev tools around it. So Table has dev tools that you can put in there. And I've just kind of built my own structure exactly how I want it for Nozzle. Under the hood, it uses TensorFlow. table. So.

 

Cool. I'm going to start heading us toward the end of the show with pics and stuff. Tanner, if people want to find out more, what's the best place for them to go learn more about Tanstack or to connect with you on social media or GitHub?

 

Tansack.com is kind of the home for all the libraries.

 

My daughter does it too, but she's seven and at school right now.

 

I have to ask Tanner, how old is she?

 

She's two years old.

 

Well, in that case, it's perfectly legitimate.

 

Yeah. Yep.

 

Hang on. Okay, I'll redo my redo it so The best place to go is tan sack comm Home for all the libraries you can follow me on Twitter at Tanner Linsley and then Yeah, all of the all the maintainers That helped me out are on Twitter as well. You can follow TK Dodo Dominic Dorfmeister You can also follow Kevin Vandy and Pysic is the one who's working on React or on 10 stack virtual right now.

 

I think it's pretty amazing

 

Awesome.

 

that you took an actual business need, which is all the stuff that you're doing for Nozzle, but turned it into such an amazing collection of open source software. I think it's really dope.

 

Thanks, that's awesome. Yeah, and really we've just built a lot of these tools to help us out in building our own products, right? And that's something that I wanna stay true to for as long as possible. Is, you know, it's fun to have open source and yeah, helps me make a little extra money on the side here and there and it helps my contributors make a little extra money as well. But at the end of the day, we're all building these things because we need them in production for real world, real world use cases. And I think that's what really drives the innovation is just the practicality and the pragmatism that comes from having a product, you know, that has users and people who, you know, at the end of the day, users who don't care if you use TypeScript or not. But they help you drive your product forward and make good decisions, you know.

 

Awesome. All right, well, let's go ahead and do our self promo real quick. I wanna change it up just a little bit because sometimes I feel like we get long-winded on this particular area. So do the self promos, but do it in like 30 seconds. All right. Steve,

 

easy.

 

what are you working on that people should know about?

 

Nothing new since last week. Just still banging away on my inertia view Laravel project. That's a lot of fun. I keep thinking I need to start doing some blogging about some of the things I've been encountering and working on in that. But other than also hosting views on view, nothing really new. So, thanks for joining us. I hope you enjoyed this. If you did, please like, share, and subscribe. And if you haven't already, you can find me on Twitter at www.patreon.com.au. And if you haven't already, you can find me on Twitter at www.patreon.com.au. And if you haven't already,

 

Awesome. Dan, what are you working on that people should know about?

 

Mostly demonstrating for Israel to remain a democracy. That's kind of filling up a lot of our time. Last night, we went out because of events that are happening in Israel. We went out at 10 a.m. At 10 p.m., sorry. We only got back home at around 2 a.m. From demonstrating in the streets. So, you know, takes up time.

 

All right, AJ, what are you working on that people should know about?

 

still doing the Beyond Code course work. It's still still working on shell workshop stuff. And then. Hard drives are here. Network gear is here. The palette of servers is on the way and we are looking at the name BNNA. So it's BNNA.net. There's no website yet, but the cloud hosting, privately owned cloud hosting is coming together.

 

Nice. For me, I've got two things. One is the book club. We're starting a new book next week. It is the Compound Effect by Darren Hardy. It's a self-improvement book, not a programming book. And then we're doing seven languages in seven weeks. And then the other thing that I've got going is I'm doing a game dev meetup. It's gonna be a weekly call. We're going through Jason Wyman's game dev bootcamp. You can sign up for it. topvendevs.com slash game dev and then use the code JavaScript 5 you'll get 20% off and then just let me know that you bought the course and we'll jump in on the call and we're just going to talk about what we're learning in the course. So kind of self-paced nothing you know rigid. So anyway Tanner what are you working on that people should

 

you

 

know about that we haven't already talked about I guess?

 

Yeah, we talked about a lot of them right now. You know, I've been working for the last three weeks on a big sprint at Nozzle at my startup. If anybody listening is into SEO or runs a marketing agency or is over marketing for their company, you need to come check out Nozzle. We're doing some pretty amazing things. And then something I'm excited about recently too is a library called Observable Plot by Observable HQ. I don't know if you guys have heard of it, That's the reason I'm probably going to be sunsetting my data vis library.

 

By the way

 

Nice.

 

Tanner, I have to say your daughter is beautiful and that's one more reason for people to watch this on YouTube.

 

Oh, thanks. Yeah.

 

Yeah.

 

She saw you guys and immediately calmed down. So yeah. Thanks.

 

Nice. All right, let's do picks. Steve, what are your picks?

 

So came across a pretty cool little article on Hacker News. It's in a publication called Pedapixel. And its title is How John Glenn's $40 Camera Forced NASA to Rethink Space Missions. And it's one of those things that shows how just some little scratch-your-own-its type of thing can really have a big impact. And it just talks about how his Mercury mission had been delayed and delayed and delayed and delayed. And so he went and bought a little $40 camera from a local drugstore. NASA engineers helped fix it up so he could use it in space, put a handle on it, and did a couple of little things. Took some really awesome pictures, and they got back, and NASA's like, hmm, we should be taking pictures on these space missions so people can see what we're actually seeing up there. And as a result of what they saw there, they ended up adding things to future missions to really capture the video and the pictures that are up there. for my dad jokes of the week, which is as I like to say, and I think I'm probably the only person that likes to say this is sort of the high point of every episode. So there's this chemistry student, teacher says to his student, hey, did you know that atoms have mass? And he said, mass? I didn't even know they were Catholic.

 

Thanks for watching!

 

Right? And then, with all them

 

Thank you, Dan, for giving me something to laugh at.

 

Uh, just a more of an observation. Books can teach you everything you need to know, except how to read.

 

I don't actually agree with that one, I have to say.

 

Okay, well don't look too deep into that was more of a joke but and then finally They're supposed to be a new time travel movie coming out next year. It was actually pretty good Those are my

 

All

 

picks.

 

right, AJ, what are your picks?

 

I don't think I have anything new on picks. I'm just, I'm just really excited about putting together these, these servers. And, oh no, I do have one thing. Uh, I don't know if I mentioned this before, but for the first time ever, I have time machine backups working over the network and that is through a Dell R7 20 with a, with a, I think it's a flash controller. I didn't flash it, but it came that way in HBA mode, put my raid disks in there. Put. And free nas on it probably too complicated for the average person But for people that are doing interested in home lab stuff our 720 is just a very normal regular Server to get for a home lab pretty inexpensive and then proxmox allows you to run virtual machines And you can run true nas on it directly where you can run proxmox and true man I had a buddy help me set it up anyway. It's cool That I now finally finally finally access all of my stuff over the network and so can my wife. It's not just a raid hooked up to my computer. It's a raid on a NAS and time machine backups are working between both of our computers. I don't have to ask my wife to plug in the drive to the computer occasionally because she wouldn't do that. And we both have business stuff where backups are important. So it's nice. It's nice.

 

Out of

 

So

 

curiosity,

 

hopefully I'll have some material on how to do that later.

 

AJ,

 

We need a blog post

 

out of

 

on

 

curiosity,

 

that.

 

why do you back up to an actual drive, physical drive rather than let's say to the cloud?

 

Because I'm me. I don't like the cloud. I don't

 

Ha!

 

I don't like that. You know this, you know this, I don't like the idea that someone else. It for I mean read read the terms of service on iCloud that their guarantee is zero guarantee zero warranty zero liability zero SLA there is no. And if you talk with people that have used iCloud for backups. had a problem and needed to restore, either they can't figure it out or something went wrong at some point it was turned off and they didn't realize it was turned off and they don't have their backups. So it just iCloud, it gives you peace of mind in that you think that something's happening. But in conversations I've had with people, it has not been reliable. And also, it's not a backup if you don't have the original. When you use iCloud. deletes the files off of your computer. So now you have no backup. There's one copy of the data and it's an iCloud and you don't have the copy locally. So I... You know what I, what I want is the box, you know, just give me, give me the box. And then, and then I would use iCloud as a backup, but if I don't have the original, then I don't have a backup. So it's a philosophical thing, but I, I don't think it's a good place to go where we are all slaves to big tech, where we own nothing and are happy about it.

 

Alright, well... I love the rants. I just, I do, I get a kick out of them. All right, Dan, what are your picks?

 

So I'm going to add one that I didn't plan on just because of the stuff that AJ just said about the cloud. It's the stories of the bastard operator from hell or BOFH, if you've ever heard about it. It's a fictional sys administrator from the early 90s who manages the systems in some fictitious university. And the reason that AJ reminded me of it is because his favorite way to back up stuff is to just send it into Dev Null. And that's a really fast backup. And also the story where somebody complains rather in a rude sort of way about the fact that they don't have a sufficiently large quota in their system. So he frees up lots of quota for them by erasing all of their files. And I recommend them. We'll put a link to them if I can find it So that would be my my first pick. My second is unfortunately not so funny and pleasant We've been talking about the fact that it's pretty Extreme times that's called it like that here in Israel. I mean we are we it feels to us like we're literally fighting for our democracy Where the newly elected government in Israel is trying to take away a our rights and to eliminate all the safeguards against, you know, sort of, that's called a dictatorial type of a government. And, you know, nobody would have thought a year ago that we would be in a situation like this or even six months ago or even four months ago, yet here we are. in seeing a lot of people coming together and literally willing to fight against it. We talked about the fact that, something like 10% of the country is actively participating in demonstrations. If you think about it in the context of the US, it's as if over 30 million people were out in the streets demonstrating, not just supporting things from their living room Or or thinking, you know that this you know, this shouldn't happen But actually taking to the streets and demonstrating against it it's really heartening to see all the people coming together in this way and and hopefully we'll be able to to prevent the bad things from happening, so this would be my second pick and my Third and final pick as always, you know, we can think of even worse Case scenarios would be the ongoing war in Ukraine, which is still ongoing So anything people listening can do to help either

 

Did he

 

the

 

freeze?

 

people To help either the people of Israel or the people of Ukraine. Please do so Thank you

 

All right, well, hopefully Riverside caught all that because you cut out there toward the end, Dan.

 

I would hope so.

 

It probably did. Um, all right. I lost track of who we've had go. We had Steve A.J. and Dan go, right?

 

Yes.

 

picks. All right, I'll do some picks. So I usually do a board game pick. This week it's between two castles. And it's kind of a different board game. Usually what you're doing is you're usually either trying to like build an engine or, you know, build a deck that helps you win stuff or things like that. This one's a little bit different because it's a semi-cooperative game. And what you're doing is you're building two castles. You're building one on your right And the person sitting next to you is doing the same thing. They're building one on the right and one on the left. And so if they're sitting to your right, the one on their left is the same one as the one on your right. And so you're working together to build these castles. And so you draw these tiles that have rooms for the castle and they'll have rules about how you can place them and how they score. And as you build the castle on your left and the castle on your right, you're trying to get them both as high scoring as possible. is that at the end of the game, whichever castle is your second highest castle, right? So whichever one is lower of the two, that's your score, whatever that castle scores. So that means that you want to have number one on one side and number two on the other side. And so is everybody else. And so it's really interesting take on gameplay because it's got this dynamic where you're working with one person on one castle. working with another person on the other castle and you're trying to figure out, like I said, how to build them up so that they can... so that you can win. When we played this before, yeah, the guy that won, yeah, he had number one on his right and number two on his left. And so he won, right? But, you know, the person who he shared the top scoring castle with on the other side, his second highest castle wasn't as high as scoring, so he didn't win. And so anyway, it's really interesting. It's, and like I said, it's between two castles of Mad King Ludwig. I think we played it in about an hour. There were five of us, you can play up to seven players. And Board Game Geek has a weight of 2.17. So it's a pretty easy casual game. There are a lot of combinations you can do in a lot of rooms that do different things. But at the end of the day, it's not so complicated that it's just impossible to figure out what your strategy should be. So, anyway, so that's my pick there. I already did kind of the self promo stuff. The only other pick I have, so this weekend I did a triathlon except that they canceled the bike because of ice on the road. So it was sort of a triathlon. It was a 5K with a 300 meter swim at the end. It was awesome and I felt really good about it at the end. I'm still a little bit tired from it. Not that it was a particularly long race. for an hour, it just really, because I finished in under an hour, it was just, yeah, I was so tired. Like all that day and Sunday, Saturday and Sunday, I was just sitting on the couch just dozing in and out. But anyway, totally loving it and it's awesome. So if you're into triathlons, let me know. I'd love to like put together a little group maybe on our, oh, I need to talk about that too for a second. community and I'm working on changing it over. I set it up as family.topendevs.com but now it's going to be hub.topendevs.com. That's where all the courses are going to be. It's where the community discussions are going to be. You can see when somebody schedules a new episode and start, you know, if you have questions that you want us to ask them and things, you can ask in there. So it's going to be pretty awesome and I'm really excited for all of that. All of our current hosts should have already gotten invites. If you haven't, let me know. But yeah, we're kind of putting everything together there so that we can have the kinds of conversations that I kind of wanted out of Slack, but wasn't quite having them happen. But yeah, like I said, all the content for the courses, the book club and everything else is going to be in there for now. So anyway, I'm pretty excited to be moving ahead for that. And then join us for the game dev meetings. Tanner, what are your picks?

 

I guess I accidentally did one of my picks under

 

All

 

self-promotion.

 

good.

 

But observable plot is my favorite library right now, my new favorite library. It really is good. If you wanna explore data really quickly, I had a couple of tweets about it that explain why I think it's amazing. But it's good enough where with a couple more features, so it doesn't have tool tips built in yet, and it doesn't have

 

Mm-hmm.

 

cursors or crosshairs yet. But once it has those two things, I'm pretty sure I'm moving over most of my data viz anywhere that I do data viz. I'm moving it over to that library. It's really good. Go check it out. It's by Observable, which is a cool company because they have their Observable product, which is like these notebooks that are fully reactive. So it's kind of like writing markdown in code and whatnot, but it's fully reactive code, kind of like an Excel sheet. It's pretty fun to work with. So that's my first tech pick. My next pick is I just got a Tonal, which is the fitness apparatus that mounts on your wall, that has kind of like the digital weight inside it and everything with a screen on the front.

 

Oh those look cool.

 

It is a lot of fun. It is really great because I just we have not had time to go to the gym with kids. Gyms aren't super close. And this has kind of like, I have tried a couple of to try and supplement that problem. Like I did Supernatural for a year, about a year ago, a year and a half ago. And that was a lot of fun, but very single dimensional. But we got this tonal and I just love it. It's like going to the gym for 40, 50 minutes a day. But it's just right there in your house. It's great. So a lot of fun. And then my last pick, which is totally random, but last night I downloaded the Metroid Prime game. The remastered version on my Switch. And I played that game as a youth on my GameCube, which is a very first game that came with the GameCube when I was little. Man, that thing looks good and I'm having a lot of fun with it. I have not had a lot of fun with like an adventure shooter game in a long time. And believe it or not, it's the remastered Metroid Prime last night that I was like, I'd rather be playing that than working right now. So

 

Nice.

 

that was a lot of fun.

 

I have a GameCube right up there in my office. And yeah, we won't talk about how much time I spend on it.

 

I lent mine to somebody to play Super Smash Bros like, you know, six years ago and never saw it again. So yeah,

 

Well,

 

don't do that.

 

if you want one, you talk to me. I'll get you hooked up.

 

Hahaha

 

I've done some mods on them so that you can play the games from SD card when the laser goes bad or so that the laser doesn't

 

Thanks for watching!

 

go bad and but but now the switch pretty much has every game that I Was playing on the

 

Yeah.

 

GameCube is now on the switch. So I don't Have it pulled out the GameCube in a while

 

Yeah,

 

I

 

I have.

 

gotta pull

 

Alright.

 

it out to finish my Final Fantasy VI game save though.

 

Yeah, I have an open emu on my computer and occasionally play some games through there with some weird PS3-looking controllers that I plug in there, but it doesn't cover all the bases.

 

Alright, well I'm gonna wrap this up. You got a little nerd talk in there, guys. I like it. Folks, Max out.

 

Adiós.