Paige_Niedringhaus:
Hello everyone, welcome to another episode of React Roundup. I'm gonna be your host today, Paige Neidringhouse, and I am joined by one of our esteemed panelists, Jack Harrington. So, welcome to another episode of React Roundup. I'm gonna be your host today, Paige Neidringhouse, and I am joined by one of our esteemed panelists, Jack Harrington. So, welcome to another episode of React Roundup. I'm gonna be your host today, Paige Neidringhouse, and I am joined by one of our esteemed panelists,
Jack_Herrington:
Hello, how are you doing?
Paige_Niedringhaus:
And our special guest today is Vijit Ali. Welcome back, Vijit.
Vijit_Ail:
Sorry, can we go back? My surname is Ail.
Paige_Niedringhaus:
I'll...
Vijit_Ail:
Just
Paige_Niedringhaus:
pardon
Vijit_Ail:
Ail,
Paige_Niedringhaus:
me,
Vijit_Ail:
yeah.
Paige_Niedringhaus:
let me... I will redo that then.
Jack_Herrington:
Thank you from the
Vijit_Ail:
It's
Jack_Herrington:
top.
Vijit_Ail:
okay.
Paige_Niedringhaus:
Welcome to another episode of React Roundup, everybody. I am your host today, Paige Neadringhouse, and we are joined by one of our regular panelists, Jack Harrington.
Jack_Herrington:
Hello there.
Paige_Niedringhaus:
And our special guest today is Vigit Ail. Welcome, Vigit.
Vijit_Ail:
Hi everyone.
Paige_Niedringhaus:
So, Vigit, I know that you have been on React Roundup in the past, but for those of you who have not heard, maybe you could give us a quick intro of who you are, why you're famous, and what we'll be talking about today.
Vijit_Ail:
Well, my name is Vijit Hile and I'm a software engineer from Mumbai and I work primarily on React and Node.js and apart from that, I do a bit of technical writing on the internet.
Jack_Herrington:
Awesome.
Paige_Niedringhaus:
Excellent.
Jack_Herrington:
So I hear you have a strong interest in super bass and how
Vijit_Ail:
Yeah.
Jack_Herrington:
it works with react, I'm guessing. Can you tell us a little bit about that?
Vijit_Ail:
So SuperBase is a cloud platform that allows developers to create backend services for their frontend apps without writing a single line of backend code. So that's how powerful it is.
Jack_Herrington:
Oh, very
Vijit_Ail:
And
Jack_Herrington:
cool.
Vijit_Ail:
it is complete. Sorry. And
Jack_Herrington:
No, it's okay.
Vijit_Ail:
yeah, it is completely open source and it provides features like all database file storage and auto generated API is just out of the box. So you don't have to do anything of that on your way.
Jack_Herrington:
Nice. And is there like a client layer for react that's already built?
Vijit_Ail:
Yeah, yeah. So SuperBase basically has many client libraries for even for their one for JavaScript, Python and yeah.
Paige_Niedringhaus:
That's excellent. So how would you get started with SuperBase if you had like either a create react app or maybe like a next JS project? How do you integrate the two together?
Vijit_Ail:
So basically, SuperBaseJS has a JavaScript client called SuperBaseJS, and you can just do npm install and initialize the main class and pass your public key. And yeah, that's pretty much it. And after that, if you want to get data, if you want to post data, that's all you can do through the library.
Jack_Herrington:
Oh, very cool. So what is it like a wrapper around an existing database or is it its own kind of data? What kind of database is it? Like a SQL database, object store?
Vijit_Ail:
Yeah,
Paige_Niedringhaus:
Postgres.
Vijit_Ail:
so SuperBiz leverages Postgres, which is a relational database. And what it does is Postgres automatically generates the REST APIs using an extension called Postgres with a T. And so what it does is it introspects your whole schema, like whatever schemas you have made in your SuperBiz dashboard. It will go through all of them and auto-generate an API for that, which you can communicate through your front-end, basically. You don't have to write the APIs by yourself manually or calling. You can simply just use the client library.
Paige_Niedringhaus:
Very nice.
Jack_Herrington:
And it's all TypeScript
Paige_Niedringhaus:
And, uh,
Jack_Herrington:
and strongly typed and all that? Nope, sorry.
Paige_Niedringhaus:
Yeah. Ha ha ha.
Jack_Herrington:
I feel like we have some delay.
Vijit_Ail:
Yeah. So, SuperBase does not have TypeScript layer out of the box, it is just plain JavaScript library.
Jack_Herrington:
Okay, so you need to generate some types for it
Vijit_Ail:
Yeah,
Jack_Herrington:
to map to
Vijit_Ail:
yeah.
Jack_Herrington:
the types that you have in your tables. Do
Vijit_Ail:
Good night, good night.
Jack_Herrington:
you use a tool for that or does Hand do that? Or do you use TypeScript at all?
Vijit_Ail:
Oh, I do use TypeScript, but mostly just you have to build the types yourself. Whatever your API you're calling, you're going to have to check what's the response and then build the type.
Paige_Niedringhaus:
Interesting. So does it offer a GraphQL support as well?
Vijit_Ail:
I don't think that it supports GraphQL at this moment. I think it's
Paige_Niedringhaus:
Mm-hmm.
Vijit_Ail:
still experimental, but like they are building it, they're still working on it.
Jack_Herrington:
That's cool. So like
Vijit_Ail:
Yeah.
Jack_Herrington:
I'm also there's a strong interest out there and off as well. So is it off specific to your database? Is it does it work with other vendors? Like how can I do like Google off and all that?
Vijit_Ail:
Yeah, so basically if you want, if you only want to use the odd layer of SuperBiz, even that you can do, you don't have to, uh, even if you don't want to use the database layer or the other functionalities, you can simply just use the odd functionalities right out of the box and pass your Google API keys. And yeah, it just works.
Jack_Herrington:
Wow, nice.
Vijit_Ail:
Yeah, so
Paige_Niedringhaus:
what I want
Vijit_Ail:
the
Paige_Niedringhaus:
to
Vijit_Ail:
whole
Paige_Niedringhaus:
hear.
Vijit_Ail:
process of bootstrapping or application is just fast.
Paige_Niedringhaus:
Nice. So how did you get started with SuperBase? Like what initially drew you to it? Or was it like a work project or just something that you're interested in learning?
Vijit_Ail:
So the thing is I found SuperBase through just, you know, like I actually wanted a cloud database where I can store because I'm too lazy to set up everything on
Jack_Herrington:
Hehehehehehe
Vijit_Ail:
my local machine. So I was like, let me just search for anything that has cloud support for databases. So yeah,
Paige_Niedringhaus:
Mm-hmm.
Vijit_Ail:
that's where I found SuperBase and which basically has a free tire of 500 MB or something. So that is pretty much enough for any application.
Jack_Herrington:
Nice, are you using it at work or are you just messing
Vijit_Ail:
No,
Jack_Herrington:
around with it on your own?
Vijit_Ail:
right now we don't use it at work. It's basically for my own explorations.
Jack_Herrington:
Yeah, yeah, yeah, sure. Cool. I'm just curious, what are you using them for? What are the experimental
Vijit_Ail:
Uh,
Jack_Herrington:
apps?
Vijit_Ail:
any kind of app that does not require any backend applications. I was thinking like, for example, uh, you can make blog applications and you don't even have to write a single and a backend code for that because it has auth, it has the APIs and yeah, it has the database, everything. So, so you can think of super base as a CMS, a sort of CMS, because you don't have to know database, database knowledge. You don't have to be. like a database savvy or something to get started with the APIs. Cause like for a non-technical person, the database is just like a spreadsheet. Like you can just update the data in line in the data.
Jack_Herrington:
Nice.
Paige_Niedringhaus:
Nice. So one of the blog articles that we've linked, that we'll link to in the show notes about Super Bass talks a little bit about something called Super Bass Studio. Could you tell us a little bit more about what that is?
Vijit_Ail:
So that is the dashboard that is there on the SuperBase platform, which you can browse through and check your table collections, create new schemas, right? And you don't have to write any SQL queries for that. You can use the graph, the interface for that. And basically what it will allow you to do is create tables and add new entries to your... database. Yeah, that and even it can it allows you to access your users data. Right. You can send invite other users to your platform directly from your data dashboard.
Jack_Herrington:
Awesome. So this kind of stuff, I've always found that the kind of gotcha with these, the no writing your own API stuff is around like triggers. Like if I add a particular record to a database, I want things to happen based on that kind of thing. Like, you know, some summation stuff or whatever, some other tables get updated. Is that, can you do that sort of stuff?
Vijit_Ail:
Yeah, you can do that. Basically, SuperBase is a post-reservoir database behind the scenes. So
Jack_Herrington:
Hmm.
Vijit_Ail:
whatever you can do with the post-reservoir database, that you can do with SuperBase. That's the thing. So basically, you can create triggers. For example, if you add a new entry in the users table, then some other table can be updated. For example, if you add a new entry
Jack_Herrington:
Hmm.
Vijit_Ail:
He has, if the user has updated his verified his email, so that you can set a flag for that.
Jack_Herrington:
Cool. Do I use that, like, do I write that in SQL, or what do I write that in?
Vijit_Ail:
Yeah, you can. So basically you can write a database function for that. And so it's a database function, which is like, which resides natively in the database.
Jack_Herrington:
Yeah, yeah, yeah. So I full
Vijit_Ail:
Yeah.
Jack_Herrington:
on write like, wow, okay. I haven't done that in a long
Paige_Niedringhaus:
I'm sorry.
Jack_Herrington:
time.
Paige_Niedringhaus:
I'm sorry.
Vijit_Ail:
So yeah, so basically you don't have to write an application middle layer for that to update your query.
Jack_Herrington:
Yeah, I can see why this is so popular.
Paige_Niedringhaus:
So one question that I have is I've used Firebase a little bit, which I think is Google's version. What like what benefits or why would you choose SuperBase over Firebase or one of the other options that are out there for kind of cloud backends and cloud databases and such?
Vijit_Ail:
So primarily Firebase is not open source. That's the main thing. And apart from that, most of the stuff SuperBase has is open source. You can self-host it yourself. That functionality you won't get with Firebase. And even the, what you can see, the setup of the whole project is a bit
Jack_Herrington:
Hmm.
Vijit_Ail:
easier with SuperBase.
Paige_Niedringhaus:
Good enough for me.
Jack_Herrington:
Okay. Nice. So outside of like auth and database stuff, what else is in SuperBase? I know you mentioned it early on.
Vijit_Ail:
SuperBase also has file storage. So
Jack_Herrington:
Hmm,
Vijit_Ail:
under
Jack_Herrington:
alright.
Vijit_Ail:
the hood,
Jack_Herrington:
No, it doesn't make sense.
Vijit_Ail:
SuperBase uses S3 to upload the data. And yeah, and other than that, we have like Firebase, we have, they have real time subscription, whenever
Jack_Herrington:
No!
Vijit_Ail:
data update. Yeah,
Paige_Niedringhaus:
That's nice.
Vijit_Ail:
so that means.
Jack_Herrington:
Yeah.
Vijit_Ail:
There's one thing that Firebase. does better than SuperBase is offline caching. Firebase has that functionality that it does optimistic update on your UI, but SuperBase does not have that out of the box.
Paige_Niedringhaus:
Hmm. I mean, I could definitely see how that would be useful for certain applications, but I bet that there's probably the majority of them where that's not necessarily a deal breaker, in which case, SuperBase, which is open source is a big thing. So that's pretty awesome that it's completely open source. So how do they make money?
Jack_Herrington:
Ha ha ha. Who knows? Making money, so rated.
Paige_Niedringhaus:
People buy them a coffee, Patreon.
Vijit_Ail:
Yeah.
Jack_Herrington:
Yes, you can. Yes, that would be fun. A big company out of that.
Paige_Niedringhaus:
I guess if maybe if you're not doing the self-hosted route of SuperBase, there's probably some nice things that you can tack on and pay for if you're like a big customer or an enterprise level customer.
Vijit_Ail:
All right.
Jack_Herrington:
Yeah, that makes sense.
Paige_Niedringhaus:
Cool.
Jack_Herrington:
Actually, I'm curious about the file storage stuff. So for like if you upload images and stuff, does it also have that cool thing where you can like read it, mention them or have multiple image sizes or have it do all the compression work for you?
Vijit_Ail:
No, I don't think that is there with SuperBase. All the optimization you have to do at your side.
Jack_Herrington:
Oh, okay.
Vijit_Ail:
But
Jack_Herrington:
That's not a bad thing.
Vijit_Ail:
the SuperBase has a cool dashboard for browsing through your files, like how you would browse through your files on a Mac device.
Paige_Niedringhaus:
Nice.
Jack_Herrington:
Cool.
Paige_Niedringhaus:
So
Jack_Herrington:
And
Paige_Niedringhaus:
another
Jack_Herrington:
you're mainly
Paige_Niedringhaus:
thing
Jack_Herrington:
using this on
Paige_Niedringhaus:
does...
Jack_Herrington:
them. Oops,
Paige_Niedringhaus:
No,
Jack_Herrington:
sorry.
Paige_Niedringhaus:
go ahead, Jack.
Jack_Herrington:
Oh, so you're mainly using this on web then? Or are you using for like native, React Native as well or?
Vijit_Ail:
No, currently I'm just exploring it on the web because on the mobile application, it's still not fully supported. Some functionalities like I mentioned, offline storage is not out of the box. So for using it on the mobile web, mobile application, it still has a long way to go.
Paige_Niedringhaus:
soon.
Jack_Herrington:
Hehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehehe
Paige_Niedringhaus:
So one of the questions or one of the things that it looks like SuperBase has is edge computing or edge functions, is that correct?
Vijit_Ail:
Right, right.
Paige_Niedringhaus:
Cool.
Vijit_Ail:
So
Paige_Niedringhaus:
So how,
Vijit_Ail:
edge functions are
Paige_Niedringhaus:
yeah,
Vijit_Ail:
basically.
Paige_Niedringhaus:
give us an example of what edge functions are.
Vijit_Ail:
So edge functions are basically TypeScript functions that run on the Dino environment. And they are executed closer to the user. Unlike other serverless functions like AWS Lambda, it does not execute on a particular location. It will get executed at a server nearer to the user using your application.
Jack_Herrington:
I'm guessing that's not an open source thing. That's probably where they're making their money. That kind of support for that
Vijit_Ail:
Yeah.
Jack_Herrington:
at scale. So what would you imagine using that for?
Vijit_Ail:
So like you can use it for sending your email, right? You can create a separate email service to do. So for example, if you want, if you have a blog application and you have a subscriber list, right? So that for that, you don't, you won't have to create a whole different server and then write the code. You can simply just create a new function and. Yeah, just like any other API, you get the request body. And from that, you can simply save it in your database, or you can add in your military.
Jack_Herrington:
That's really cool. So will SuperBase also help me host my application?
Vijit_Ail:
No, no, SuperBase currently does not have that. I don't have the support for serving HTML. If you try to serve HTML, it will automatically get changed to plain text.
Jack_Herrington:
Oh, yeah.
Vijit_Ail:
Yeah.
Jack_Herrington:
Okay. Makes sense.
Paige_Niedringhaus:
Fair enough, yeah.
Jack_Herrington:
So I want to put this up. Basically, I would have one, I'd add my deployed app, and then it would connect using the key then to the SuperBase instance.
Vijit_Ail:
Subskrybuj nas.
Jack_Herrington:
And we're not worried about that key leaking.
Vijit_Ail:
So the thing with the key is that SuperBase offers two keys. One is the public key and the other one is the service key. So the service role key is like a master key to your application, right? So you would want to use that key in a server context, but the public key can be exposed to the client side, but the thing with public key is that the public key can have by default has access to all your database, right? So to prevent that, you have to write RLS rules in the database. So these are like authentication rules that you would write natively in the database. So for example, you can prevent, you can avoid an update on a particular table, like based on the authorization key. Or let's say you can also prevent a user from updating another user's data. So for each one of those, we have certain rules in RLS.
Paige_Niedringhaus:
Interesting.
Jack_Herrington:
Makes sense.
Paige_Niedringhaus:
So, yeah. So how, for somebody who is brand new to SuperBass and wanted to get started with it, what would you, how would you advise that they start to get familiar with it?
Vijit_Ail:
are just like just with creating your own application, exploring the documents, because the documentation of SuperBase is very straightforward. They have everything you need to get started on the SuperBase platform.
Jack_Herrington:
Nice. Have you done this? You've been working with, I mean, we talked about it earlier with Page, you know, create React app versus Next.js. Have you tried it with Next.js as well?
Vijit_Ail:
Yeah, next even with nature it was the same way.
Jack_Herrington:
Yeah, yeah. I mean, it seems like in terms of your APIs, you might want to actually like proxy them through Next.js to hide that server key.
Vijit_Ail:
Yeah, because like if you use the server key in the server context, then in the next days, it would be hidden, right?
Jack_Herrington:
Right, exactly. Yeah,
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
it's not that you got to run a server, which is not often great. You know, there's that.
Paige_Niedringhaus:
Hehehehe Well, cool. Is there anything else that you think that people should know about Supa Bass that we haven't covered yet? Because it sounds pretty powerful overall.
Vijit_Ail:
Fun fact about SuperBase is recently they have announced VASM support. That means
Jack_Herrington:
Oh
Vijit_Ail:
you can run full-fledged Postgres database inside a browser. So that's a whole new thing.
Jack_Herrington:
Is that
Paige_Niedringhaus:
Wow.
Jack_Herrington:
out? Can we look at it today?
Vijit_Ail:
Yeah, I think it is out like a couple of weeks back only it was released. So I guess it's still experimental, I feel. But yeah, that's a pretty powerful feature to have. So I think
Jack_Herrington:
Hey,
Vijit_Ail:
with this,
Jack_Herrington:
I'm down
Vijit_Ail:
we can
Jack_Herrington:
with experimental
Vijit_Ail:
even solve
Jack_Herrington:
stuff.
Vijit_Ail:
that offline, offline storage stuff.
Jack_Herrington:
Hmm
Paige_Niedringhaus:
Yeah. Very cool.
Jack_Herrington:
OK, so I'm kind of like, why? OK, so I'm just quick looked at that. Like, I'm going to run Postgres in the browser. I'm assuming when my so is that just for? Give me a give me a scenario like why am I going to do that?
Vijit_Ail:
So for example, we do like in the browser currently, we have local storage and we have another, I don't remember the name. We have a kind of storage in the browser,
Jack_Herrington:
Session
Vijit_Ail:
right?
Jack_Herrington:
storage.
Vijit_Ail:
Session and another one we have like a SQL.
Jack_Herrington:
Mmm, yeah, yeah, yeah, there's a sequel like Airbase in it. Yeah, too.
Vijit_Ail:
Right,
Paige_Niedringhaus:
Mm-hmm.
Vijit_Ail:
right. So in that context, if you want to use something more powerful like Postgres, because it has a lot of relational capabilities and it can force constraints on your data. So that is one thing powerful. Like if your app has a lot of critical data that you can manage in the browser.
Jack_Herrington:
Oh, cool. All right. That sort of makes some sense. If I want to do like a Gmail
Paige_Niedringhaus:
theory.
Jack_Herrington:
thing, I could literally have like your email inbox in. In Postgres in Wasm.
Vijit_Ail:
That's all right.
Jack_Herrington:
Yeah, cool.
Paige_Niedringhaus:
as the future.
Jack_Herrington:
Ha ha ha! sure I hope I don't know what that one I love the things like like stack blitz out there where you know you can run an entire next JS instance like right in the browser
Paige_Niedringhaus:
Yes.
Jack_Herrington:
and I've actually found in some cases it's actually faster to do that because it's it's running basically out of a RAM disk and it's it it's quick so it's cool you know I could basically
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
run all you could run your entire stack in wasm
Paige_Niedringhaus:
Yeah. Speaking of stack blitz, did you see the, the keynote that they did recently at view comp for codeflow?
Jack_Herrington:
No.
Paige_Niedringhaus:
So I just learned about it this week and I think it was maybe a week or two back they announced it but Codeflow is this new initiative by StackBlitz to basically bring VS code into your browser. So you get the entire VS code set up with your plugins, your preferred tooling, your everything and With it, you can take a GitHub repo, plug it into the URL, and it will basically import the repos if you cloned it. You can pull down branches, you can open pull requests, you can look at other people's pull requests, and you never actually have to pull the code locally into VS Code so that you can play with it, change it, review it, add to it, whatever. It's really, really cool.
Jack_Herrington:
That's really cool. Yeah.
Paige_Niedringhaus:
Yeah,
Jack_Herrington:
I mean, I think there's
Paige_Niedringhaus:
I mean it's.
Jack_Herrington:
something similar on the GitHub side. Like you can hit period on a project and open up an embedded editor.
Paige_Niedringhaus:
I think so. It seemed similar, but the thing that was nice, because I've not really used the GitHub version of it, is that it looks, the code flow thing looks exactly like your BS code editor that you would use locally on your machine, like to a T. But the thing
Jack_Herrington:
That's
Paige_Niedringhaus:
is,
Jack_Herrington:
pretty
Paige_Niedringhaus:
it's
Jack_Herrington:
slick.
Paige_Niedringhaus:
all done in the browser, so you don't actually have to check the code out locally, start it up. clone the repo, whatever, it's just all available to you.
Jack_Herrington:
That's pretty sweet. Nice.
Paige_Niedringhaus:
Yeah, and I know I've just totally derailed the conversation, but I just read about this the
Jack_Herrington:
No,
Paige_Niedringhaus:
other
Jack_Herrington:
no,
Paige_Niedringhaus:
day
Jack_Herrington:
it's
Vijit_Ail:
Thank
Jack_Herrington:
cool!
Vijit_Ail:
you.
Paige_Niedringhaus:
and was like, this is the coolest thing.
Jack_Herrington:
There is so much cool stuff going on. And I mean, I get people always talk about how the future of all of this is like, we'll no longer have our MacBooks or our ThinkPads or... Actbooks is what I've been using forever. And we'll just have, you know, some commodity hardware or whatever. And it's because everything you're doing is just on the web anyway.
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
And I don't know how I feel about that. Like, I kind of like having a, you know, how would that feel if I'm on a plane or something like that? I don't know. Probably not great. But maybe
Paige_Niedringhaus:
Yeah,
Jack_Herrington:
with WISEM,
Paige_Niedringhaus:
I mean,
Jack_Herrington:
I guess it's good.
Paige_Niedringhaus:
it's not quite there yet. Like the project that I just plugged into Codeflow to see how it would work actually had its own backend server that was built in. It had a node server that it was
Jack_Herrington:
Mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
Paige_Niedringhaus:
using. So it wasn't quite smart enough to figure out that it needed to install all the dependencies for these different folders that were kind of nested within one another. And then I hit some cores issues almost immediately because even though it's supposed to be localhost 3000, it's like webflow.localhost slash something 3000.
Jack_Herrington:
Right. Yeah.
Paige_Niedringhaus:
So not quite perfect. I'm not, I couldn't figure out how to get around the cores errors before I had to actually go on and do work. But, you know, once they kind of figure that out or there's some... There's probably documentation that I just didn't look for of how to get around those sorts of things. I think it could be really huge. And like the things that I really see it being beneficial for our PR reviews, because trying to pull down somebody's local code while you're doing something else in the same repose pane. And also for our designers and our designers who don't necessarily need to, or shouldn't have to run code locally to see what something looks like. If they can just go to GitHub and then open up code flow and be able to see what the actual site looks like. I mean, that seems like such a huge win for everybody.
Jack_Herrington:
Yeah, I think you should aspire to where your project is set up so that it could be usable this way. Right? In
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
your case, you know, you should... If that's a thing, I think it shows a certain amount of code quality. And like, oh, OK, our project setup quality, that's like, it can run anywhere. It could run on your local machine. It could run inside of, you know, Safari, whatever. It's all good.
Paige_Niedringhaus:
Exactly.
Jack_Herrington:
I don't know, what do you think about this remote coding idea? Does that sound appealing?
Vijit_Ail:
Yeah, I think it's good because like, like, page said, like, you don't have to set up everything on your local machine. So that saves a lot of time.
Jack_Herrington:
Definitely. So, I don't actually think we talked about what you do for a regular JDAB. What do you do when you're not working on or playing around with SuperBase?
Vijit_Ail:
So I am software engineers from Mumbai, and I work at a health tech company called Tootsie, which provides a linear solution across India. So, yeah,
Jack_Herrington:
Nice.
Vijit_Ail:
so we have like a complete JavaScript stack, we have React on the front end and NestJS on the back end, right? So, yeah.
Jack_Herrington:
And then you write articles about this kind of stuff that you get excited about.
Vijit_Ail:
Right, so whatever I come across like while exploring or at work whatever new thing I learned and I just Post it on the internet because that's the best way to share your knowledge Right
Jack_Herrington:
Mm-hmm. Yeah.
Vijit_Ail:
Yeah
Paige_Niedringhaus:
Totally agree.
Vijit_Ail:
I recently saw your video on Making the context fast
Jack_Herrington:
Mm-hmm.
Vijit_Ail:
So that's that's a new thing. I learned the
Jack_Herrington:
Cool.
Vijit_Ail:
way you did the whole subscribe thing and the getter and service
Jack_Herrington:
Oh, thanks, man. Yeah,
Vijit_Ail:
Thank
Jack_Herrington:
that was
Vijit_Ail:
you.
Jack_Herrington:
a fun one to do.
Paige_Niedringhaus:
Jack,
Jack_Herrington:
Thanks for
Paige_Niedringhaus:
for
Jack_Herrington:
plugging
Paige_Niedringhaus:
those
Vijit_Ail:
Thank
Paige_Niedringhaus:
of
Jack_Herrington:
my channel.
Paige_Niedringhaus:
us who
Vijit_Ail:
you.
Paige_Niedringhaus:
have not seen it, yeah, would you like to give us a little more information about it? Ha ha ha.
Jack_Herrington:
Oh, sure. Yeah, so there's I. And every time I talk about state managers and things like Jotai or Sushitan or whatever, people are like, Oh, what about context? You know, do we even need one of those anymore? We have context. I'm like, OK, you know, context is great for slow moving things like a theme or a, you know, the user identification. So there's like if you change it, it's OK if a lot of components re-render because you expect that right. It's a theme. You know, whatever, or it's user ID. They're logging in, they're logging out. You expect a big change, right? But there's also, there's a new hook that came out with 18, use sync external store that makes actually using React, using context in a pub sub model, where I kind of subscribe to the context so that I don't necessarily. get updated when it changes. I only get updated when things that I care about within the context change. It's actually pretty easy. And so the video went over kind of how to do that and then kind of went a little bit extra into like TypeScript stuff and like how to make it generic. And of course, a lot of the comments I get are like, yeah, but Joe Ty and Sustan do all this. I'm like, yes, but you just asked for the context. Yeah. Okay. Yes.
Paige_Niedringhaus:
Hehehehe
Jack_Herrington:
Anyway. You can't make everybody happy all the time. But it was a fun experiment. Did you enjoy it, Vaget?
Vijit_Ail:
Yeah,
Jack_Herrington:
It seems like you
Vijit_Ail:
I
Jack_Herrington:
got
Vijit_Ail:
did.
Jack_Herrington:
some out of it. Good. Okay. Awesome.
Paige_Niedringhaus:
Nice. Um, so Vigit, maybe you could tell us a little bit more about Toothsea because it sounds, you said it was a health tech company, but like what exactly, health tech is a very large industry, so what exactly are they helping people to do?
Vijit_Ail:
So currently there are like two paddlers going on. Sorry guys, I have to get the door. This
Jack_Herrington:
Hahaha
Vijit_Ail:
is, excuse me.
Paige_Niedringhaus:
problem.
Jack_Herrington:
Okay. Anyway, soldering. Do you
Paige_Niedringhaus:
Yes.
Jack_Herrington:
use flux? Okay.
Paige_Niedringhaus:
Yes. So,
Jack_Herrington:
Alright,
Paige_Niedringhaus:
so
Jack_Herrington:
I gotta get my flux
Paige_Niedringhaus:
for those
Jack_Herrington:
game
Paige_Niedringhaus:
of you.
Jack_Herrington:
on.
Paige_Niedringhaus:
Yeah, I don't know if we want to include this part of the podcast or cut it out,
Jack_Herrington:
Yeah,
Paige_Niedringhaus:
but.
Jack_Herrington:
we'll just
Paige_Niedringhaus:
Okay.
Jack_Herrington:
edit this part out. Yeah, there you
Paige_Niedringhaus:
Yeah, I
Jack_Herrington:
go.
Paige_Niedringhaus:
let
Jack_Herrington:
Edit until
Paige_Niedringhaus:
me think
Jack_Herrington:
Vigy gets
Paige_Niedringhaus:
my
Jack_Herrington:
back.
Paige_Niedringhaus:
my coworker recently got me into soldering and because we have I work for a hardware company. So we have boards, we have. Yesterday I needed to solder two wires together to actually solder a jumper wire to a button that had just Red and a black wire coming out of it. So I don't even remember what what I found on YouTube it was like Chris fixes or something and Chris does all sorts of Soldering and he had like a soldering gun and he had the soldering the heat up soldering iron,
Jack_Herrington:
Yeah
Paige_Niedringhaus:
which is what I have It was a great video because he showed, you know, to do the the X twists for wires. He showed how to do like the interweaving, which you were describing yesterday on Twitter. He showed like just putting, you know, a ton of flux on the connection
Jack_Herrington:
Hehehehehehe
Paige_Niedringhaus:
and then just magically heating up the wires itself and just like dripping the solder. across the top and it I mean it is so magic when you just see it like flow with no effort right across everything it was awesome. And then
Jack_Herrington:
There
Paige_Niedringhaus:
it
Jack_Herrington:
you
Paige_Niedringhaus:
turns
Jack_Herrington:
go.
Paige_Niedringhaus:
out that my husband
Jack_Herrington:
Sorry.
Paige_Niedringhaus:
actually
Jack_Herrington:
Oh.
Paige_Niedringhaus:
had a heat gun so we um he and he had some of the heat heat shrink wrap that you can use
Jack_Herrington:
Shrink wrap,
Paige_Niedringhaus:
to
Jack_Herrington:
yeah.
Paige_Niedringhaus:
seal up those connections so
Jack_Herrington:
I shrink
Paige_Niedringhaus:
did
Jack_Herrington:
shrink
Paige_Niedringhaus:
that
Jack_Herrington:
tubing.
Paige_Niedringhaus:
as well
Jack_Herrington:
Yeah.
Paige_Niedringhaus:
I
Jack_Herrington:
He
Paige_Niedringhaus:
mean
Jack_Herrington:
drank.
Paige_Niedringhaus:
I felt amazing.
Jack_Herrington:
It is
Paige_Niedringhaus:
This
Jack_Herrington:
a good
Paige_Niedringhaus:
is so
Jack_Herrington:
feeling.
Paige_Niedringhaus:
cool.
Jack_Herrington:
Hi, Viji, welcome back.
Vijit_Ail:
Hi.
Jack_Herrington:
We're just
Vijit_Ail:
Sorry.
Jack_Herrington:
picking
Paige_Niedringhaus:
All right.
Jack_Herrington:
up on a conversation we had on Twitter.
Paige_Niedringhaus:
Yeah. Back to the podcast.
Jack_Herrington:
Cool, yeah, so the HealthTech startup. So I think we're talking about that.
Paige_Niedringhaus:
Mm-hmm.
Vijit_Ail:
Right, so currently with Toothsea, there are like two parallels. One is like we have a parent brand called Mako under which two brands come in. One is Toothsea and another one is Skinzie. So Toothsea provides all the dental aspects of your of a person and the Skinzie aspect is for the skin treatments like derma facials and laser treatment. And so
Paige_Niedringhaus:
That
Vijit_Ail:
I
Paige_Niedringhaus:
makes sense.
Vijit_Ail:
primarily work with Tootsie. And yeah, so basically we do the whole dental thing. We create plans for the users. And from that, whatever suits the user.
Jack_Herrington:
That's really cool. Nice.
Paige_Niedringhaus:
Very cool.
Jack_Herrington:
And you use, you use react and node use next, or what do you, what do you, what's your stack?
Vijit_Ail:
Right, so for the whole style, on the front end we have Next.js, and on the backend we use Nest, which is like,
Jack_Herrington:
Awesome.
Vijit_Ail:
yeah.
Jack_Herrington:
Huge phone nest.
Paige_Niedringhaus:
I haven't, yeah, I haven't heard a lot of people talk about Nest, but it is, it's like Express, correct?
Vijit_Ail:
Right, right,
Jack_Herrington:
It's
Vijit_Ail:
so
Jack_Herrington:
a-
Vijit_Ail:
it is built on top of Express, basically. So the thing with Express is that it has a lot of, like it allows you, gives you a lot of freedom, like how you want to structure your code, but Nest has a certain way of organizing your code and dividing it into modules. Like something you would do in a Spring Boot application or in Angular, it's all that.
Jack_Herrington:
It feels a lot like Java.
Vijit_Ail:
Right,
Jack_Herrington:
It's got
Vijit_Ail:
right.
Jack_Herrington:
a lot of TypeScript, a lot of a lot of annotations, got a very model
Paige_Niedringhaus:
Mm-hmm.
Jack_Herrington:
view controller feel. Um, yeah, a lot of wiring, a lot of wiring,
Vijit_Ail:
Thank you.
Jack_Herrington:
but you know, once you get it going, it's very reliable. I'll
Paige_Niedringhaus:
Yeah.
Jack_Herrington:
give you that. Very cool.
Paige_Niedringhaus:
Well, Vigit,
Jack_Herrington:
So Viji,
Paige_Niedringhaus:
is
Jack_Herrington:
oh
Paige_Niedringhaus:
there
Jack_Herrington:
there.
Paige_Niedringhaus:
any? Go ahead, Jack.
Jack_Herrington:
No, no, no, please go.
Paige_Niedringhaus:
Well, I was just gonna ask, is there anything else that we haven't covered that you've been working on or that you'd like to talk about today?
Vijit_Ail:
I guess we have covered pretty much everything.
Jack_Herrington:
Nice. Have any new articles that are coming out that we should be excited about?
Vijit_Ail:
Currently, yeah, we were just talking about NestJS and currently I have an article in progress on creating microservices with NestJS and Kafka.
Jack_Herrington:
Mm-hmm.
Paige_Niedringhaus:
Cool.
Vijit_Ail:
So that will come out in a month.
Jack_Herrington:
Very cool.
Paige_Niedringhaus:
Cool. Yeah, we'll be looking forward to that then. All right, well, I think that this is the portion of the show where we'll go into picks, and these could be television shows that you're watching. There's been a lot of kitchen products and tech products
Jack_Herrington:
Hehehehe
Paige_Niedringhaus:
in the past that we've talked about. So, Jack, would you like to start us off with a pick this week?
Jack_Herrington:
Yeah. So my tech pick for the week is going to be that you should read the RFC that came out on use, which just got released. It's a big deal in the React community, but if you haven't seen it, I would definitely read it. I think it's one of those that's going to change how we do React as much as Hooks did. And the new RFC basically makes first class citizens, I guess, out of Promises in React. And so on the client side, you can literally just say, import this use. It's a hook, kind of like a hook. It's basically a hook. And then you just point at a promise. And when the promise resolves, your component gets re-rendered with the new data. You're good to go. So it makes it very, very clean. And then on the server side, it's really cool. You can do async components and just literally fetch your data right inside the component, which is really neat. Using async await. awesome. You can actually try it out today on the client side. I don't think there's any server implementation of it yet though, so can't wait to try it there. But really cool. And if you're a React developer, I think you gotta keep up on it.
Paige_Niedringhaus:
Good one. So I will go next. My pick for this week, we've actually just talked about in the show, it's going to be code flow. So
Jack_Herrington:
Oh yeah.
Paige_Niedringhaus:
if you like, like I was saying, it's just it's like VS code, but in a browser, and I, it's in beta right now. So I think anybody can sign up, go check it out, play with it, see the video of how the creator uses it. So head on over to StackBlitz and look for CodeFlow and just test it out, because they want all the feedback, they want you to tell them what's good, what's not, what's buggy. But it just seems like such a cool step forward, and I can see so many applications where it would make developers' lives easier. So I'm definitely gonna be checking it out myself. And, Vigit. Do you have anything that you'd like to recommend to our listeners?
Vijit_Ail:
So you both have done a tech pick. So I'll do a non-tech pick, which would be the House of Dragon shoes on
Jack_Herrington:
Oh yeah!
Vijit_Ail:
HBO. You should definitely check it out. There's a lot of politics going
Paige_Niedringhaus:
Yes.
Vijit_Ail:
on. And yeah.
Jack_Herrington:
Hahaha It's our Sunday night family watch, even though it's not exactly a family show. But when you have kids that
Vijit_Ail:
Okay.
Jack_Herrington:
are
Paige_Niedringhaus:
Ha
Jack_Herrington:
a little
Paige_Niedringhaus:
ha ha.
Jack_Herrington:
older, more like a family. But, you know, the neighbors show up and we kind of gather around. I love it. We used to do that with Game of Thrones. And now it's great to have it back with House of Dragon.
Paige_Niedringhaus:
Nice.
Jack_Herrington:
And it's not quite like I say, like Lord of the Rings just doesn't have that stop. And like, it doesn't feel as the new Lord of the Rings show. Doesn't feel as I don't know, as
Paige_Niedringhaus:
It's not as gripping.
Jack_Herrington:
that much as Yeah, something like that. Thanks for reminding us, though. That is a great show.
Paige_Niedringhaus:
Yeah, good suggestion.
Jack_Herrington:
Bummer that it's almost done with the season.
Vijit_Ail:
Ich bin alle die Meinung.
Jack_Herrington:
Yeah. Ugh. I wish there were more.
Paige_Niedringhaus:
Awesome. Well, great picks. So one last question for you, Vajeet. If people want to get in touch with you, where can they find you?
Vijit_Ail:
They can easily find me on Google because if you type in my name, you'll find everything about me and
Jack_Herrington:
Hehehehe
Paige_Niedringhaus:
Hehehe
Vijit_Ail:
even on LinkedIn because my name is quite unique. I'm just an easy person to find.
Paige_Niedringhaus:
Excellent.
Jack_Herrington:
Awesome. See you then.
Paige_Niedringhaus:
Well, thank you again for joining us and we will see everybody on the next React Roundup.