Episode Summary
Introduction
- Welcome to Syntax, a podcast focused on web development.
- Today's episode features a potluck format where listeners' questions are answered.
Key Topics Discussed
-
Monorepos
- A listener questions the need for multiple repositories for different layers of an application.
- The hosts advocate for monorepos, suggesting tools like PNPM and Turbo Repo to streamline workflows. For more on this topic, check out our summary on Building the Ultimate Auto Space Parking Application, which discusses project organization strategies.
-
Node.js Ecosystem
- A Java developer expresses concerns about the maintenance of Node.js libraries.
- The hosts discuss the variability in library maintenance and the importance of established packages. If you're interested in the latest developments in the Node.js ecosystem, you might find our summary on Introducing Lynx: The New JavaScript Framework from ByteDance insightful.
-
Cloudflare Workers vs. Traditional Servers
- A listener asks if a React application can function without a traditional server.
- The hosts explain how Cloudflare workers can handle server-side tasks while maintaining a simple client-side application. For a deeper dive into server-side rendering with modern frameworks, see our summary on Why OpenAI Migrated from Next.js to Remix: An In-Depth Analysis.
-
Using Tanstack Query with Next.js
- A listener questions the necessity of Tanstack Query for managing state in Next.js applications.
- The hosts discuss upcoming features in Next.js that may address caching and state management without Tanstack Query. To learn more about implementing state management in Next.js, check out our summary on Implementing Your Own Design System in Next.js.
-
Advice for New Developers
- The hosts share insights on the importance of curiosity and building projects to gain experience.
- They emphasize the value of sharing work and engaging with the developer community. For those looking to showcase their skills, consider our guide on Build a Modern Frontend Developer Portfolio Using Next.js, Tailwind CSS, and Sentry.
Conclusion
- The episode wraps up with recommendations for tools and practices in modern web development, encouraging listeners to explore and experiment with new technologies.
welcome to syntax today we got a potluck episode for you today keep the questions coming syntaxm um in the URL bar you can
submit your own question and we'll answer it on a future episode today we're talking about monor repos really
good explanation or really good question about a problem somebody has that a monor repo is going to solve it do you
really need a server for a react application or is a cloudflare worker enough for for when you need that a Java
developer thinks that the NodeJS ecosystem is a mess a good question about like how do you possibly use
Nex.js without Tanstack query so we're going to go into a lot of the new invalidation APIs on Nex.js someone
transitioning from uh a musician to an engineer and all kinds of new stuff let's get on into it i'm wearing a
different shirt right now because we forgot to record this intro so now we're going to cut to me and Scott awesome and
if you would like the best tools to make sure your application is running as smoothly as possible head on over to
centry.io in fact they just added uptime monitoring which is uh something that I use uptime monitoring all the time and
now I don't have to go somewhere else for it i can have it directly in my my Sentry settings to make sure my
applications are up as much as I think they are in fact uh I had an issue Wes with my habit path which was hosted on
Koolifi and something happened with my Koolifi or my server and it crashed and I didn't realize that it crashed but
what it didn't do is it didn't restart all of my services so here I I I know that my server is up and running but the
habit path was down and I didn't know because I mean I use I didn't know until I used somebody sent me a message or
whatever but that's exactly the type of issue you don't want with any application especially something if
other people are using it right so uptime monitoring is something that's important to have on just about any web
property that you care about people seeing because if you're not checking it 24/7 and it goes down you might not have
any clue so check it out centry.io/sintax sign up and get two months for free with the coupon code
tasty treat this podcast is presented by Sentry uh let's get into the pot questions Wes first question here from
Secret Agent hello Wes Scott and CJ been listening for a few years as I've transitioned from being a musician to
software engineer thanks for all of the help over the years and specifically Scott for showing me a music major can
be a developer that's me just got my first full-time job but I find myself wondering if we are shooting ourselves
in the foot we have a separate repo for each layer of our app the front end rest stopy layer what oh rest a rest API
resty hereby for a word a rest api is going to be called a resttopi it's a resttopy I I
just read that it's all one word here the rest api layer I was like what's a rest stopppy layer this is uh
fascinating so their their front end resty okay anyway carry on yeah let's carry on uh the front end the rest API
services layer the repo layer workflows and task layer Each time I make a change that spans more than one layer I have to
do more than one PR get something reviewed more than once and then make sure the merge and deploy happens at the
same time to make sure everything works together in prod as expected i get decoupling but for a small startup this
feels excessive is this an instance where a monor repo would help or do you have some other advice for me thanks for
answering to me when I read this question I'm smashing I'm smashing the monor repo button because I I like that
and I like that workflow and there's a lot of monor repo tools out there some of which are very heavy-handed and feel
like they can take over a whole lot i use PNPM with PNPM workspaces uh npm also has workspaces that are a little
bit more cumbersome they exist yarn has workspaces so workspaces are a great way to get monoro stuff going i'd also
recommend using turbo repo which is something I didn't think I needed for a long time but then I'm running like five
dev processes at once turbo Repo makes that so much easier and so much faster so I I highly recommend you know my my
workflow for this is PNPM workspaces in Turbo Repo and that's it and I I I think personally that's a a nice way to be for
something like this if you are hoping that deploying everything at the same time is your approach to making
everything work together it sounds like you need a monor repo if you are not then you need to start versioning your
APIs meaning that you leave the old version of whatever API running for a while until enough of your traffic has
has moved over um and you can do that either by different domain names um API key is a is another common way where you
you generate an API key that's attached to a specific version of an API um but like that's that's so incredibly complex
especially for a startup where a monor repo is a much better approach to this type of thing that like you see some of
these node modules that are published like for example Nex.js has has that but they have next.js JS image they have
like six or seven different versions and every single time they publish one version of something every other package
gets published as well right and that way all of the changes can go out as one especially if you're trying to update a
backend API as well as update like a UI layer and your resttopi API is also being updated it's all got to go out at
once and it's so much easier in a monor repo just casually throwing in the resty in there uh Paulo Ricardo says "Hello
I'm a Java developer condolences for professional reasons is taking his first steps in Node.js greetings from Portugal
i'm wondering if it's my impression if most Node.js libraries are generally poorly maintained coming from nearly 20
years of Java development i've noticed at least at least on the back end for things like OMS and caching the latest
release of many node libraries seems to be several years behind they often appear to be maintained as a hobby
rather than a structured approach i'm used to seeing this in Java what are your experiences in Node.js in this
regard do you feel like everything is abandoned or generally more well-maintained that's a good question i
I think like there are a whole slew of packages in the node ecosystem that are sort of I don't know
like like I'm thinking of express I'm thinking of of mongoose I'm thinking of some of the more established packages
that are maybe not the things that we reach for immediately and these are maybe the things that you're finding
when you Google like web server in in node or something like that and you kind of have to be in the know of what's
going on because if you were to look at the most popular packages in NodeJS those are maybe not the things that you
would grab right off the the bat but I don't know you're talking about OMS we have several really well-maintained OMS
several good approaches to caching i I don't think that this is necessarily the approach although the Node.js JS and
JavaScript ecosystem does tend to change what we like to use much more frequently than uh a more established something
like like the Java ecosystem especially it's much more corporate you know yeah it's interesting you know I I also you
know come across this in like the Rust ecosystem where I found a lot of abandoned Rust packages and people say
that they're done but then I'll find like stuff that just straight up doesn't work and then you're you're pawing
through it and there's like oh this hasn't been touched in like 2 years and so I think I find less of that with
JavaScript and you know it could just be ignorance on all parts on my part so yeah it really depends on I guess what
you're using how established it is there could be abandoned stuff or there could just be like you know it's been baked
into the the language now or you know there's no reason to use X Y and Z but for the most part I don't necessarily
feel like I've had this issue one thing I'll also say about that is because JavaScript is kind of bring your own for
everything you gotta like piece together the parts yourself for the most part it can be often very hard to figure out
what do I use for X Y and Z what do I use for an OM what I use for type validation all of those things and if
you simply are just googling for that it's it's really hard to find out what people are actually being used i like to
use socket.dev dev when searching my dependencies and that does give you a little bit of a better idea of of what's
being used but I would like even something further of like okay here's a package like what have people switched
to or like what are similar packages in this area you know you when you're shopping for something on like Amazon
and it's like well you might also like this one which comes with an Allen key you're like yeah okay I would like
All right next one here from Brett Perry Ush Brett uh he specifically says not Perry like Peri uh so Peri Perryi sorry
sorry Perry i called you Perry piri Brett uh hey Syntax Nation i have ideas for a new collaborationbased product
that will start as a micro app and add more micro apps over time to make a suite i'm wondering if I should do
straightup spelt kit or go local first with Power Sync Scott's new hotness which would you use my first question
for you all been following you from prey syntax days yeah I I've seen Brett uh online a lot so shout out to Brett
what's up so you know what I would use i don't know i'm using pretty much I'm pretty much using zero sync for
everything right now typically with spelt uh spelt kit specifically i wrote the library bindings for it i really
like it i have a few production apps working with it right now that said zeroync is not shaky super shaky ground
but things change you know there's been changes here and there to the permission system to the uh the schema definitions
and that stuff's kind of happening as it goes now I don't think it's going to massively change but it's not the most
absolute solid ground today that said if you're the type of person who doesn't mind that type of thing um and you want
to use something like that man zero is a great option i I I have such a good workflow going right now with zeroync
west because there's a great drizzle to zeroync schema translator where essentially you write your schema in
drizzle like typical um that way you can take advantage of the migrations all the drizzle stuff whenever you want to use
the drizzle stuff and then you essentially just take those schemas directly pipe it into this function and
it gets your zero sync schema automatically configured so that way it's not like you have to maintain two
schemas because uh you have your your your Postgress DB is super easy set up whatever run the migrations and then on
the other side you get zero sync to do all that stuff i also have my own like o system and stuff like that which I'm
working on um but you know I think for the most part I I think it's a really great platform and I I've really enjoyed
building on it in fact I just added some new features to my habit tracker uh that's built with zero sync and it was
just a joy right to be able to update the schema uh via migrations with Drizzle and then just have that those
changes be available to you on the front end you you're calling essentially what feels like an OM on the front end but
you're getting that local data saving you're getting that sync in the back end so hey if if that sounds like something
that fits the type of project you're building like that's the one thing you didn't really mention is that like Yeah
what do you like micro apps can can you take a stab at explaining what a micro app would be and multiple micro apps uh
I would imagine just like even like onepage utilities or something like that i honestly have zero clue what what
micro apps mean in this context nothing against you Brad i just don't know some sort of like suite of tools that
are used for I don't know we like for example in in syntax and the editing side right we
have so many little tools that we've built for helping us push the podcast out and I I would consider those micro
apps so the kind of nice thing about building micro apps is you could possibly try many things out and then
and then if they're small enough you can port them over they're micro right you can try a whole bunch of different
stacks especially if you're going to go this approach of what Scott said is use Drizzle for the OM and then that way
ducking out of Zero or or whatever if if you decide it's not for you it's a very easy thing to do yeah i think of this
like fuel so we we have a site fuel fue fuel yes yeah which is like a full of a bunch of different utilities command
pallet color generators lines and uh all kind like noise generators and all kinds of cool stuff i I think of this when I
think about micro apps but if if we're wrong about that Brett let us know because that that's kind of what I
envision sharing utilities across multiple apps right like you're like I need this thing again i need to convert
to SVG in six of these apps so I'm going to share the utility across all of them word chaff GPT says many people on
Twitter Reddit and YouTube are adamant that you don't need Tanstack query adamnant is that how you say it it's
adamant but uh I'm happy really i'm happy that I'm not the only one uh goofing up today you know I think my
whole life is a lie i always have to damn it cuz it's like well I'm damn near sure that it's this way yes oh my god I
love it actually I I prefer that i I How am I not damn near i'm damn near sure yeah that's a damn adamant adamant
sounds yeah that makes a lot of sense think about it man there's so many parts of my life no one has anyone has ever
corrected me oh my god you know speaking of Wes you know how I don't know if you know holidays but we all know I don't
know any holidays this is just a a part of our brains right i I I sat down with my wife the other night and she quizzed
me on every single holiday and it was just hilarious she's like "What month is this holiday in?" And I was just like
"What is the day what is Thanksgiving what is It's like all the holiday I only got two of them right i got Christmas
and Halloween right i'm I didn't get any of the other like I could you know I could obviously I know what either." Oh
it was brutal and And I think every single one she was just in tears because she couldn't believe I I didn't know
what day Easter was or what day anything was uh even Thanksgiving i Man I don't I don't think I could tell you when Easter
is like I know it's in April sometimes i think sometimes it's in March also in Canada half of our holidays are named
after like the queen so we have like Victoria Day and things like that and I I could tell you where Canada Day is
that's about it and I can tell you the Fourth of July is because Fourth of July Cinco de Mayo uh she she said one of
them and I and I was like that might as well be Boxing Day for me i have zero concept of of what day that holiday is
boxing Day i know when Boxing Boxing Day is the day after Christmas and Boxing Day is like Canada's Black Day unboxing
day and we we would like the morning of after Christmas we all we would just go wait outside the stores at like 5:00 a.m
which is a crazy thing to do the day after Christmas and you get all the deals but now we have Boxing Day as well
anyways he's adamant that you don't need Tanstack query with Nex.js i don't understand how you can manage caching
revalidation and optimistic UI without it um so my question is how does one manage a sync state without Tanacquery
in XJS i'm talking about instant updates to the UI followed by fresh data from the server without affecting the router
cache that's really important because currently when you you call revalidate path which is the Nex.js API for
invalidating a cache on a page so if you in XJS if you've got some like server actions you have some data loaded and
you want to anyone that's on that page you want to like reload part of that page right you just call revalidate path
and pass it the string to what path you're on and it will just refresh all of the the queries and data that is on
that p path so he says when you call revalidate path the entire router cache is purged on the client which is awful
UX which is is true like you're you're literally nuking the entire page and and starting again the docs say a future
version of Nex will stop this behavior the entire routercast is purged when you call router.refresh from the client to
pull fresh data on route am I missing something or is there really no way to make granular updates on the server that
are synced with the client yes you are missing that next.js XJS has a API that is coming it's it's been in dev for a
while and I bet we'll see it soon um it's the unstable cache API that looks a lot like Tanstack query in Nex.js
because in my opinion Tanstack query is is the best API in the world and we need that everywhere else so the way that
this works is you tag your queries and you you tag any action with you can tag them with paths as well as a a timeout
meaning that this data will be stale after however many time however many milliseconds and then you can refresh it
but then you can also tag them which is much more important to me because I much rather tag uh something as like podcast
episodes or shop items versus having to revalidate paths i don't know what page my items are going to be on i'm big on
component-based design i like when components can fetch their own data react Suspense makes that really nice
but if if you're telling me you I have to pass you a list of pages to revalidate I don't know i don't possibly
know which pages those are going to be on so I don't like that API but the tagging them is really nice because you
can tag it as like item six but then you can also just tag it as an item and in that case you can invalidate all items
or a specific item by its tag number so that API is coming you can you can use it already in X.js i've used it in
production several times already and I'm a big fan of that as well as Nex.js is also rolling out this idea of just
caching not just like fetching resources but Nex.js is also rolling out the idea of just caching a component's output um
so rather than like statically generating an entire page you can statically generate a component or you
can cache a component's output multiple times so for example I have like a Twitter feed in my footer of my website
or the syntax one i I might want to cach that for like five hours worth of tweets or or a full days worth of of podcast
and then um have that thing revalidated so that's so that's a nice way to uh cache stuff that is maybe shared between
users um and then finally uh React 19 all the React Suspense all the server component stuff also has ways to do
optimistic UI not to say you shouldn't use Tanacquery i'm a big fan of it but I think that that's why people are are
saying that yeah word sick thank you for that Wes all right next one here from Famous Potatoes when starting a project
I often wonder if I really need to use a server in my codebase i think it's much easier to build a spa but there are some
things you cannot do client side at least securely and need a server like email some databases or libraries that
are only built for servers but now that workers Cloudflare workers are more prevalent do you think it's reasonable
to build a clientside app that does not use a server but pushes all of the server side stuff to a worker the
benefit being that you could build a spa that benefits from simplicity in the codebase and the ability to host a
static site but still has the ability to do traditional serverside stuff using a cloud-based worker can you think of use
cases where this would fall apart uh yes i do this all the time and you know one of the reasons why I do this all the
time is because Spelkit makes it easy to have uh adapters for where you output you throw the Cloudflare adapter in
there you post it up and then you got your workers running as you know essentially functions for you uh for any
server side stuff you need and that way when you're using like uh server.ts or whatever as a route that that works on
the server where it needs to and then everything else can be spa if you want it to you could even have serverside
rendering that way too but I a lot of times I'm I'm building apps that have like dynamic bits in them that don't
need serverside rendering for the app piece server side functioning sending email all that stuff works great uh I've
been doing it also too now with AWS and SST so that's really uh pretty nice to be able to throw up on SST you use again
the same thing like an adapter for it and then uh AWS just runs those as lambdas instead of uh having to have a
traditional server so I would say nine times out of 10 like this is exactly how I'm deploying things these days what
Scott explained is the approach I would take as well and that's not a totally separate instance i I think like the
famous potatoes who asked this question is asking is like should I just like totally deploy my spa app somewhere and
then if I need to I can I can fire up some workers and and sort of communicate between the two that's a great way to
approach it but I would use something like spelt kit or next.js JS or tensac start or solidstar or something that is
just puts it all into one meaning that you can do your whole app client side but at that moment where you do need a
little sip of server you know you do need to do something server side it's so incredibly easy to do that on the server
because you simply just like like install kit you just name its sererver.js JS and all of a sudden that
will will be running on the server or you can throw a um like a server action in there and that code will run on the
server because that rusty back and forth of of hopping between them can be a bit of a pain unless you have a much more
mature application where you have a very clear API and a very clear front end and you you sort of talk back and forth
between those that's pretty common but if you're building from something from scratch and you're doing it all in
JavaScript I would certainly pick something that allows you to do both and you don't have to use the server side
stuff and unless until you actually need it and I in my opinion that's the the best approach because so many times I've
I've whipped up a quick little like vap only client side and then I I hit I need a sip of server side it needs
something to run on the server now I'm I'm opening up a new tab in my console you know I'm getting Hano fired up in
that and I'm like I should have I should have used something that I just have it all in one word totally yes max SC says
um you've discussed implementing zero with spelt and Scott has even created the zero spelt package how would you
load data in speltkit though would you use pluspage.js JS or stick with loading data in components and go directly and
page.spel files yes good question how would you do this Scott i Yeah I I pretty much skip the loaders entirely
the way that it works is like especially because the the way that that a uh the spelt zero package works is that it uses
it uses spelt stores to do everything in runes so it makes more sense to just toss it into a component i I have some I
recently published an AI chatbot uh that's done with zero in spelt as a part of the challenge that the zero team
issued um which was actually a lot of fun because the way that it worked Wes was that like when I send a message and
I type in it it's doing the zeroync stuff but then it's also firing off a message to the server the server goes
off and does all the AI stuff and as the response is coming back from OpenAI it's streaming into the database and zero is
watching the database and anytime the database updates it's updating the UI so the streaming is working by the AI
response is streaming into the database and the zeroync is just recognizing those changes and updating the UI and
patching the UI uh so it's insanely fast basically you're just tossing it in and if it needs to respond to parameters
like page parameters or something or even like other inputs you just throw it into a derived and yeah I I'll have more
docs on this but I'll link that repo up that has a lot of good examples on how to do this though um it's actually been
really really cool to see how many people are utilizing this zeros felt like like they issued this challenge for
anybody to build this AI chatbot and who who could do it and just to see like people using my library to to do all
that with has been it's been pretty great cuz I I use it myself for all kinds of stuff so I you know I feel the
pain when there is pain or I I know where to fix when things are breaking or whatever but to have so many other
people using it is is pretty dope so that's interesting to me that you said like you're doing all of the data
stuff like in the component right you're not doing it in a page at a page level or in a page loader is that right
correct yeah that's my like preferred way to do things as well and the reason why a lot of people say like don't fetch
in component but fetch at a page level um is because you can get waterfalls meaning that like uh you load a
component that fetches data comes back renders out some UI oh that UI now renders a different component realizes
that component needs some data goes off fetch it right that's how you get a waterfall but with local first you're
not so much worried about the network waterfall you're not worried about the network waterfall really at all right
that's why you can do that yeah and and also the uh the zero spelt package it saves every query that you do into a a t
or like um a map so if if I do a query once and it it hashes like what the the query actually is so uh if I do that
query once with one set of parameters it saves it into a map and then it doesn't have to redo that subscription or
anything like that that that will just exist so it's going to keep reusing that same that same data source every single
time so and and not to mention the data loading is incredibly fast anyway so it's it's pretty shocking yeah beautiful
i like it yeah next question from Ronnie do you think nowadays it makes makes sense to diversify to full stack
developer instead of being only front-end focus and learn something like PHP Laravel Python Flask or Java no it
says Flash i know it says Python probably meant to say Flask but don't learn yeah I think it meant to say Flask
uh and then Java Spring framework but I don't know if that's supposed to be it might have been auto spring yeah
probably so some autocorrect issues but Ronnie I do think that it's probably important to spend some time learning
these things i do also personally feel like front-end development is a deep enough well that you should like be able
to become a deep expert in some front-end development topics in a way that like you just can't if you're
spending all your time focusing on on full stack stuff so me personally I like the challenge of full stack stuff the
thing I like the most about it is that I can build full things myself without anybody else but I'm not a a part of a
small like a team where I'm doing one specific thing and I do feel like with the the advancements to CSS the
advancements to JavaScript all that kind of UI code stuff I think front-end focus is still very much a thing or at very
least UI focus like I'm building UIs with with this or that more so than just like just straight up client side code i
mean whether or not you're doing it server side or you know HTML stuff this is there's so much there's a deep well
here so I personally would pick up uh full stack stuff for fun to understand the process more to know how these
things work better uh but in the same regard if you're looking to become a an expert at one topic then by all means I
think front end is a deep enough well for that yeah that's that's interesting it's a UI focused developer um that's a
great way to put it because as much as people want to be like I only do the CSS yes that's that's not really a reality
unless you are extremely good at CSS and you work at like a very large company where you're absolutely killing it right
like you work at Stripe and like you're just focusing in on on CSS even then I think some of the the smart people that
work at on the next level stuff at Stripe are probably also very good at JavaScript so
I would say it makes sense to at least be comfortable with the full stack especially if you're trying to get a job
today as much as we would love to just sit in our little box and say I just want to focus on this thing because this
is what I love i don't think that those are where most of the jobs are most of the jobs are going to want you to be
able to jump in and work on whatever needs to be worked on and you can be part of a t a team where someone will
say "Give that to Scott or give that to Wes." Because they're going to do the best job at that they really know the
internals of X Y and Z but when something breaks you got to be able to jump in and and figure this type of
stuff out and as AI is getting better for you to be able to explain how things work and be able to reason about
different code bases I really think being a full stack dev with a focus on one of these areas
is is the way forward and I don't know that you would get a very good and a well-paying job otherwise yeah word
crispy codes what do you think is a better way to track backend changes besides websockets i have a scenario
where I upload a video that is supposed to undergo some processing stages so I need to keep track of whether the video
is pending completed or failed since I can upload multiple files i tried pulling mechanisms but it makes frequent
API calls which is costly i really need some help or advice thank you so what he's explaining here is that you upload
a video and on the server you you need to wait for it needs to process it right needs to maybe make captions and the
status of that uh job needs to constantly be sent back to the client side and there's several ways you can do
this right you can open up a websocket when you upload it and and just send back data as it's needed you can use
server sent events where you you ask for a request you open up or like a fetch request and then that stays open for
however long and then the server can just sort of send data back to you as it's needed or you can do polling which
is just like what's the update what's the update what's the update and in most cases for this type of work you're going
to be using polling um that's what I see most often um because if you need to open multiple tabs or if you close the
tab and reopen it it's much easier to simply just ask for the status of job 299 and get it back and update the UI
he's saying it's expensive here which it shouldn't be expensive because you're simply doing some sort of like database
query and then sending back a very small amount of text back if you're doing bazillions of them maybe but it
shouldn't be very expensive and he's probably using something where you pay based on the like the serverless
function that has been instantiated and every single time you run one of those you have to pay for it so if that's the
case maybe look at how you can I don't know make that make that a bit cheaper i don't think that there's any other way
around this and there are bazillions of apps out there that simply just use this simple polling technique yeah I know
polling always feels like the easiest for me for some reason even if it's not for some reason it just feels like the
easiest it it is it's because it's it's like stateless right um totally it's simply just what's the status and it
comes back with the status and you can recreate that at at any time so unless you actually need real time or like
streaming where like something is like like an AI response is simply streaming back the updates in real time and you
need to show that to the user but if it's simply every 10 seconds you're checking if it's done or not you can
also do things like you can decrease the polling in the first like if if you think ah it's going to take at least
five minutes maybe the first minute or two you only send a request once or if somebody has their tab not focused then
then don't send the request every two seconds you know or if if they haven't move their mouse there's a lot of things
you can do to decide how frequently you should send that request so maybe that's an avenue you should go down is how do I
how do I do this less or simply just put a refresh button on there for the user you know let the user click on and see
if they if they literally care you can click on the button and see if there's an update yeah yeah word there's been a
lot of talk about the zero sync stuff in this but that would work really well for something like this because again you're
just making changes to the database and it's listening on a websocket that sync process runs or whatever and that that
uses websockets so I have a lot of experience using websockets from Meteor days and now this and um as a technology
when it works and it's all just set up and whatever it just feels great to have that real timeness about everything it's
just something I like uh next one here from Anan this question is for Wes all right Wes you ready you have so many
course sites with different domains why don't you use subdomains for each course is this a security purpose or another
reason i've had this question many many times especially in the early days of doing courses people everybody was doing
it at like a forward slash so it would be like westboss.com/javascript instead of
instead of on its own domain name and my whole philosophy in life is make it a thing meaning that if you put your hard
effort into making something package it up and ship it out as a thing make it a thing give it a title you know give it
make make some graphics for it both because the the perceived value of it is is much higher there can be like SEO
aspects to it that's never been a play for me with my courses but a lot of people will do separate domain names
because they'll put a lot of specific content on that domain also people like to sell their things i did it myself
keycode.info was a little side project that I had and it's simply you press a code a key and it will tell you the key
code the location it say everything about the JavaScript event of a key up event and I put that on a separate
domain name rather than forward slashkeycode on westboss.com simply because I wanted it to be its own thing
and a nice benefit of that is toptal a couple years ago came along and they bought the whole thing from me i sold
them a website that shows you data on event on a JavaScript event which is a bit of a silly thing but they did it
right and and it was it was a significant amount of money that I made from it so I'm a big fan of putting
everything on its own domain name simply just from the perceived value and the ability to move things around should you
want to um there's no security issue in fact the security is a pain in the butt because uh I have a couple things where
I want to share data between domain names off is not cross domain name but there's several other things cross
domain name whether I show a banner or not uh if you've bought the course I don't show the banner that's a pain in
the butt to try to crossdomain share that info man I I have experience with this because of level up tutorials I did
kind of the opposite approach where every single one was part of a bigger thing right so instead of each course
being its own thing I did each one as part of level up tutorials and I got to say you know I feel like that was a
harder approach because it kind of devalued every single thing I did where like I have a new 24 video course coming
out every single month why did I do that there's so so much material and it all had like
less intention or weight uh given to it when in reality it's like I was putting in the work on those those projects i
was really like hustling on them and like grinding on it but like yeah it probably would have been better to make
them a thing instead and like make them bigger because I I think it was doing my content a disservice not not like even
like financial reasons but I think it was doing my content to make make it more feel like disposable or more
youtuby by releasing so much all under under one thing but hey it's out there and it's free now levelup.video if you
want to check that out it's all for free now next one from object object uh could you guys talk about the pros and cons of
a codebased routing versus filebased routing currently experimenting with Nex.js to tensac and looking for some
direction thanks so yeah the idea with with the codebased or config based routing versus file-based is um when you
want to create a new page in a file-based routing you simply just you make a folder called like about uh and
then inside of that you might have like an index.tsx or you might have a page.js or
whatever the whatever framework you're using that's a filebased routing and then there are also ways to do things
like optional params like if you want to do uh slashblog but then you also want to do for/blog slash one right and you
you want to optionally put in the page number into the params a config one would simply have you write out the
config for your router and and declare what all the routes are and say when somebody hits one of these render out
this component um whereas a file-based one is simply just putting folders and I've gone back and forth between them i
don't love file-based routing but it's all I've used in the last probably three years yeah same and I don't love it
because I find it hard to navigate through all of my pages there's there's ways in in VS Code to rename the tabs
and whatnot but I don't know that I've I have a a favorite of these i don't know what are your thoughts that's
just my approach here is I'm I'm not sure what I like the best yeah in in my mind it all comes down to like with like
programmic based routing it makes it way easier to do like conditional routing things um because you have the full
power of JavaScript or that front-end framework in your router where with file systembased routers I feel like they all
struggle when it comes to all right I have like this group of routes that has a different like subgroup now i have
this parameter-based route that needs to adhere to these uh guidelines like for instance this felt kit routing system is
very good but it's it's kind of its own thing you can like you have like rest routes you have routes where the
parameter is locked to a specific reax you have uh like grouped routes you have nested layouts in all these ways and uh
if you want to have a nested layout route system that's a part of a different tree or whatever it it just
makes it all more complex than it would if you were doing it in a in a in a codebased routing system but on the
other hand you gain things like code splitting uh and that stuff is way easier and less effortful if you're not
having to do it yourself and to tell your application where to split and what to load when to load dynamically
whatever the framework just takes care of it for you so for me at the end of the day I prefer the file-based routing
for the benefits you get automatically for it rather than uh having to deal with that stuff myself and then I will
learn the syntax for file-based routing i'll learn all that stuff i will deal with it even if it's not my favorite
thing middleear is is another kind of pain in the butt one where like I want middleares to apply to these three
routes and they're not like for/admin whatever then you got to do it but also like the syntax website like our open
graph images are sort of outside of this the syntax layout um and in order for us to do that we need to have like a
parenthesis blank and a parenthesis site sort of route inside of there but I think that's fine because I don't know
like once you understand it it's a little bit weird but once you understand what it's doing I think it's totally
fine i I didn't even think about the the code splitting route another one is you visit a page in a new codebase i want to
fix something that's on this page it's very easy to figure out where to edit that code because you simply just go to
the page the filebased route for that page and then you start clicking through the components until you find what
you're looking for whereas like how many times have you opened up a codebase before you're like I have no idea
where to even look for this thing that's like I I still have like a fairly big express app for my course platform and I
moved almost all of my routes into one file at one point and that was so nice because now I was able to just open up
the routes file and it's hundreds of lines long but it's very easy to see what the routes are and then I can click
through to the controllers of each of them uh and actually see the code that runs when people visit those URLs last
one here from Eddie i'm new to web development only going into my second year of learning webdev do you guys have
any advice for new developers that are new in this field new developers that are new in this field absolutely Eddie
this I feel like this is something we haven't even touched on in a while it is a question we've gotten a number of
times through potlucks but you know we've been on we've been on the air in the airwaves since 2017 so definitely
want to hit this one again you know what do we recommend for people who are newer to this stuff i I think the biggest and
best advice that I can give you Eddie is that your curiosity is your superpower it's your superpower towards being
focused it's your superpower towards gaining knowledge it's your superpower towards building things that you will
actually use enjoy and like advance your learning so let your curiosity drive you dive into things explore topics get deep
on some things get wide on other things but like for the most part find stuff that you enjoy making try to make it
struggle through it don't give up ask questions all of those things and you know be open-minded uh I think a a
struggle that maybe not a struggle but like a a problem that a lot of newer developers have is they might listen to
some influencer on YouTube or something and then build their entire not just personality but their entire developer
skill base based on what somebody else has said is the way to do it there are so many different paths that are all
valid and all work and if you like something and something feels nice to you and you're productive with it and uh
so and so influencer says that it's garbage don't you don't need to listen to them you know uh I think keeping a
very open mind staying curious and you know working hard to build things for both yourself for other people nailing
the job requirements whatever um is the way to go yeah having that open mind is is absolutely key so my advice here is
build lots of things build lots of little things um having that success after success will give you crazy
momentum in your career share what you've built share what you've learned those things uh simply just putting it
up on GitHub writing a blog post making a a video about what you've built is unbelievable i've had major major leaps
and bounds in my career simply by showing what people what I have built and that's led to conference talks and
paid freelancing jobs and job offers and stuff all over the place right and the last thing is like join the conversation
and like ask lots of questions so if you are part of this community right you're listening to this podcast you're finding
web developers wherever it is that you like to hang out that is going to be big for your career word absolutely yes yeah
we should do another we many years ago we did one like advice for new developers but let's we'll follow that
up as well especially as like the the job market has changed and everything has changed right last time we did that
a LLMs weren't a thing i mean there was just so much that's changed so I do think uh my advice will significantly
have changed there in many different ways so well that's it let's get into our next section which is sick picks
shameless plugs the stuff that we think is great and that uh you might maybe should be paying attention to wes I have
a sick pick that I've sickpicked before in the past um but hey it's a rep but I I'm coming at this from a whole another
year of experience so maybe about a yearish ago I sickpicked a financial like tracking app if you've ever used
Mint or something like that or Personal Capital there's so many of these now like Copilot Money blah blah blah i've
been using Monarch for over a year now and at first when I I started using it there was a lot of like "Wow this is
really great it all works super well it looks nice it feels nice i I can tell I'm going to like this." But now I've
been using it for over a year it's like really part of my general workflow where I'm approving transactions i'm
categorizing them i'm using like the San Key flowcharts for where my money is going and how how much of percentages is
going to all of the different things i'm using all of the budgeting tools the goals all of these uh things and I I use
it every single day so I can safely say from my perspective I've used a lot of these things uh this has been my
favorite one by far the biggest complaint you will see people have with Monarch is that accounts disconnect but
like I feel like web developers should know better that the way that works is that many of these are unofficial APIs
and uh like for instance our our mortgage lender is like the worst like 1990s website and the fact that Monarch
works at all with that mortgage provider is shocking to me so like if it disconnects every once in a while no big
deal yeah so behind all of these financial apps are is a company called Plaid and they provide APIs for all of
these banks and like I I think it's the wild west these there's probably developers working at Plaid that are
just like "Well today I wrote a SOAP API thing that will go around or I'm sure they have some crazy processes to to get
that data out of your bank." I have it with my Freshbooks it constantly constantly disconnects and it's such a
pain in the butt and they all they do is point the finger at Plaid which makes me really mad yeah but at the end of the
day you got to know that like some of they don't have real APIs there and there's so many there's no APIs for a
lot of these banks on their own stuff there's millions of bank we have four banks in Canada what do you got down
there like bazillion i don't even know i mean yeah i mean we're in a credit union that I've been at for a long time so on
top of that you have like All right now I'm at a credit union with its own software and who knows what so yeah um
either way I I like this a lot the reports are really great it feels nice to like go through this you know monthly
with my wife and uh look at where we're at at the budgets and see all the stuff and yeah it it's fun and it's a good UI
um so check it out beautiful i'm going to pick these like Pelican cases um or
whatever they're called this one's called a SKB case um and these things are awesome i have a couple bigger ones
i have one on wheels um I'm up up at my cottage right now and when I go to the cottage I bring all of my recording gear
not all of it i have I have doubles of everything but I bring the expensive camera i bring my laptop my wife brings
her her camera and her laptop and stuff like that and I'm always scared that things are going to get busted or if you
have to bring something on a plane so these cases besides looking like super badass like they have like nice foam
inside of them that you can like cut out to match whatever it is that you're working on they're like pressure
sealed if you ever need to get a nice Pelican case or what's the name for these that is like not the like trade
name pelican case is the name of it but many companies make these i have no clue case rugged yeah some kind of rugged uh
waterproof case are they waterproof yeah oh yeah certainly they uh don't buy one that isn't cuz that that's very
important i'm sure someday my kids are going to take this out of the car because it's in their way and leave it
in the snow or something like that you know it's happened many times so big fan of these all right that's all we got for
today uh shameless plugs let's check out the Syntax YouTube channel we just posted a banger of a video with uh the
folks behind the TypeScript rewrite to go that was a lot of fun today's the day we released it so we're kind of all
hopped up on that release so check it out yeah also you know it's so funny somebody commented about the skateboard
that was in the background of CJ's set if you don't know about it we have a store of all this kind of stuff so if
you head to century.shop sen t r y.shop shop we'll have the link in the show we have so
much cool stuff there and there's like Century swag obviously but we have a syntax skateboard we have miniature
skateboards we have all kinds of sick pick t-shirts and hats and we got some cool new stuff coming that like uh Wes
has had access to for way too long that I have not had access i've been testing i'm a I'm a I'm the official tester for
the merch so you probably have seen it in a couple videos but they're coming yeah there's a lot of cool stuff coming
so check it out at century.shop as well but yeah that's all I got that's it thanks for tuning in peace
Heads up!
This summary and transcript were automatically generated using AI with the Free YouTube Transcript Summary Tool by LunaNotes.
Generate a summary for freeRelated Summaries

Collaborative Insights: A Deep Dive with Kallie and Friends
Join Kallie and her guests for a fascinating discussion on collaboration and creativity!

Why OpenAI Migrated from Next.js to Remix: An In-Depth Analysis
Explore the reasons behind OpenAI's shift from Next.js to Remix and how it impacts performance and development.

Exploring High-Performance Experimentation with Notion, Statig, and Vercel
In this engaging webinar, industry experts discuss how Notion leverages Statig and Vercel to enhance performance through high-quality experimentation. The session covers team introductions, personal journeys, and insights into effective web development practices, including the use of feature flags and performance metrics.

Building the Ultimate Auto Space Parking Application
Learn how to create an advanced parking application with Auto Space using modern technologies.

The Struggles of Using Firefox: A Developer's Perspective
Explore the frustrations of using Firefox for web development and the need for better browser standards.
Most Viewed Summaries

Mastering Inpainting with Stable Diffusion: Fix Mistakes and Enhance Your Images
Learn to fix mistakes and enhance images with Stable Diffusion's inpainting features effectively.

A Comprehensive Guide to Using Stable Diffusion Forge UI
Explore the Stable Diffusion Forge UI, customizable settings, models, and more to enhance your image generation experience.

How to Use ChatGPT to Summarize YouTube Videos Efficiently
Learn how to summarize YouTube videos with ChatGPT in just a few simple steps.

Ultimate Guide to Installing Forge UI and Flowing with Flux Models
Learn how to install Forge UI and explore various Flux models efficiently in this detailed guide.

How to Install and Configure Forge: A New Stable Diffusion Web UI
Learn to install and configure the new Forge web UI for Stable Diffusion, with tips on models and settings.