LiftedCommerce - Remix & Shopify Hydrogen Tutorial
내용
[subtitle-meta] lang=en auto=True
hello Internet in this video we're going
to study in great details Shopify
hydrogen architecture so in the previous
video where we left we looked at how how
Shopify hydrogen store looks like from a
customer point of view so from a user
point of view so we're looking at this
store that was that was scaffolded by
the Shopify CLI but this time we get the
developer size view of the the Shopify
hydrogen store Okay so
just before we get into the nitty-gritty
details it's important to say that
Shopify hydrogen is based on the the
remix framework which is a very very
very powerful framework for creating
highly Dynamic and super fast
um websites and web apps powered by
um
react okay so it's created by the same
folk who created the react router
package okay so it's a very very Solid
Rock Solid framework and no wonder
Shopify choose this to build hydrogen on
top of so that's why if you if you're
familiar with remix you'll know that it
has the concept of a loader and actions
and and it's a very powerful
concept and on which to build apps so if
we for example visit again the home page
you see that the loader for the home
page was visited here right which is
basically this route here okay the local
dot index and I'm going to explain what
that is and especially that local part
so if you visit the collection okay
you're gonna see that the collection
route was visited right and uh to make
that even more clearer we can add a
console log here okay
to to and then if you visit the product
page which is the products local
products handle here we can see that the
um that this particular loader will be
visited so if you go there and we visit
the product okay
and voila see in products handle Handler
okay loader so now with that with that
in mind knowing that hydrogen is
basically
remix but with some
um
nice developer experience and um
like a wrapper for for easy integration
with with Shopify as you can already
even see here you have Shopify hydrogen
type so you don't have to create types
to solve the guideline the select
adoption and stuff like that so and the
components and stuff so it's very well
integrated with the Shopify ecosystem so
what this what I think is the best way
to build custom software is to use
Shopify use uh the tools they give you
they are powerful and solid so let's
start by
um what I would like to do in this video
with that introduction out of the way is
have a look at this repo that was
created for us from the bottom up so
let's have a look at each file obviously
I'm not going to have a look at all of
them uh the the what's that theme
important so the first one obviously we
chose typescript if you remember when
you scaffolding project which shows
typescriptions of JavaScript
um so that's that's the typescript
configuration file here as you can see
uh the notable thing it is fine is that
we are adding some types okay we are
adding types that are specific to oxygen
Walker types and what what is oxygen
well the same way
um hydrogen is powered by remix
Shopify oxygen is powered by cloudflare
Walkers okay so cloudflare has this
product called cloudflare platform so if
you have a look quickly online
cloudflare
a cloud flare
platform
okay you see that this is basically what
Shopify oops
Dot copyrify platforms workers and stuff
like that like that they have this
product yeah
um
I can't find it at the moment but yeah
if we type let's say Shopify how we
build how we build now we'll add the
link to the in the description how we
build oxygen
Shopify
okay
[Music]
I will build oxygen we'll see I'll add
the link to this uh blog post in the
description but basically they explain
how they see they're using cloudflare
underneath right so oxygen is basically
Cloud flare with some interaction with
some integration to the Shopify
ecosystem so
um
let's say for example you see here you
have the storefront Walkers and then
every time a
user or shopper visits your store a
cloud flare Walker is around okay and
that cloudflare walk is deeply
integrated with the Shopify ecosystem as
you can see here right you can see here
that the simple integrated with Shopify
that's why yeah if you're if you're
using oxygen you get things like
analytics out of the box without having
to do them yourself and a few other
things that you have to do yourself
obviously it's not impossible but it
yeah if you're using oxygen you get a
lot of things out of the box for free
um so yeah highly recommend it if you if
you if you are a
store owner and they don't have a lot of
Dev resources to do some of these things
yourself obviously if you're doing them
yourself you have a lot more flexibility
and you can choose and you know the
technology stack
the way that suits you best but yeah if
you don't have those resources obviously
you want to use oxygen and hydrogen to
power your custom stuff and so going
back to this the next file here
obviously is Darwin CSS I want to
drilled too much into this but basically
uh yeah Darwin is a very popular way of
styling
um web apps webs websites nowadays and
this is the the configuration file for
Darwin so now next up is this file here
let me collapse this a little bit the
next stop is this far here we have the
storefront API this is automatically
generated file and this is a very very
interesting file and reason is is
basically adding a lot a lot of types to
your own
typescript
um
environment and which which you wouldn't
have to do yourself so if you search for
example product okay oops sort of right
on
and one of that so if you search for
product for example we do like this okay
all right
so
um you can see that for example here you
have predictive product frontman or all
of these types are there's a deep
integration with the storefront API as
you can see in the store from the API is
everywhere so you don't have to the nice
thing about
um using hydrogen is that you don't have
to recreate all of this so there's only
a type into that integration with the
Shopify hydrogen so every
um
every end point in the Shopify hydrogen
has an equivalent if we go back to the
mock shop for one moment here mock shop
mark.shop yeah you see here that this is
an endpoint that's returning products
right and once you do this query right
you need to have it tagged you need to
have the the data that are returned by
the query
typed for more for a better developer
experience and to be able to catch box a
lot easier right so this is for example
a Json here which has a
and the payload here you see you have
the title the description and so on you
don't want those uh API points to return
on type data so yeah using this
obviously if you're using any of the
um react framework or any other like web
framework you can you can just copy it
paste this and I think it should work
it will work definitely but yeah here
you have it for free from from Shopify
CLI so highly recommend Shopify hydrogen
we have building star fronts so now this
one is a very important one here the
server.ts basically um to have to to
analyze it we're going to have a look at
at it quickly at a glance and then top
the bottom bottom up okay so here we
have
this file we have first of all all the
Imports here obviously let me collect
that for now but here you have
um this file first of all is the
development and the production server
okay so when you run
um
npm run Dev as we did to launch this app
this is the server that is powering the
app okay and it's like I said earlier
Cloud
um Shopify oxygen is powered by
cloudflare and in local development mode
you have what is called mini mini uh
mini uh oxygen right I think they have
it somewhere here they write it
somewhere here mini oxygen okay and mini
oxygen when you run npm run Dev okay the
first thing let's run is this this
um This Server here and it's gonna
inject bindings into your
um your uh your your server okay so
cloudflare has this concept of bindings
and one of them is the environment
variables another one is the um the
cloudflare KV the cloudflare
um the key values and the cloudflare
durable objects and stuff like that all
of these things are Bindings that
um
cloudflare inject into the function
because you have to remember this is
this is function it's not a long running
server like like something like node so
whenever a request is sent to the
cloudflare uh Walker okay a new function
is created in in on on the edge okay on
an edge a server an age platform to run
that function okay so this it's not a
long running server like a node or an
Express server that's very important to
keep in mind so every time you run this
function okay
this this is clever injects bindings
into your execution context like you
have here the execution context itself
you have the environment variables you
have the request that was sent by the
user right so the next thing that
happens okay is obviously we want to
check if um
the session secret so if that
environment variable is defined if it's
not defined we need that defined so if
it's not defined then that's potentially
maybe the developer forgot to do that
and we don't want the app to run on on
on other on not authenticated right that
would be big security concern so if the
session secret is not defined we throw
an arrow here and then this wait until
I'll come back to that later but it's
very important because
the way of because of the way the edge
works right so uh when a request is
complete the let's say you send a
request to the database or to an API
when a request is completed you need to
tell the worker that that request has
completed so and then you have to buy
like you basically here it's an it's a
callback that will execute the um the
the tier up operation let's say you you
connect to a database okay and then you
uh maybe let me show an example of this
I don't know if I can find it online uh
if we find the neon database neon DB
cloudflare pages example all right you
see clearly
um what I'm talking about is integration
here you will see what I'm talking about
here
um I have code examples
let me see if I can find it
uh yeah exactly there we go so you see
here this is what this wait until it's
all about you see you create uh in this
case neon is basically a serverless
postgres database that integrates
perfectly with cloudflare so here we
create a client for the for the
serverless database we connect to the
client okay we then we we make a query
we we set a query to the database and
then we wait until this is non-blocking
so the first one is going to continue
but we need to close the connection
because remember once again this is a
serverless environment it's not a long
running server so we need to tell the
fetch function okay when to When when
when when when the uh it's basically a
callback that we
we instruct our
cloudflare Walker function that the
fetch or the the query has completed and
it needs to be closed okay because
otherwise
next the next when the next query is
sent okay when the next view is sent
the um the the clefler Walker will still
be in execution and you can't have like
yeah you basically get a narrow so if
you don't use this wait until you get
the now so that's what it's doing here
and um this is a very simple example
where you can see you can see it in
operation and that's why you have it
here okay
and that's why also you see here in the
storefront Shopify uses this for example
to close when when Shopify when you
instantiate the the
shop storefront client that Shopify
gives you okay they need that function
because they are doing obviously
um graphql queries and when the query is
completed they need to instruct
Lafayette to shut down the connection
rights and stuff like that so that's why
they need that context okay and
obviously here looking at it from a more
high level let me collapse this for the
first okay
you can see here click here so we have
remember we have the execution context
here but in addition to that we have the
upload context okay so it 'll show you
what the upload context is let's open uh
this F is this let's go to the
definition of this thing okay this
environment variable interface you have
here the definition of the upload
context so what's the difference between
execution context and the upload context
very very important thing to know when
you're using remix okay so the execution
context is everything that uh cloudflare
or the execution environment whether
you're deploying to netlify or
cloudflare of yourself or in this case
oxygen which is basically like a Shopify
wrapped cloudflare Walker environment
okay so everything that the server
injects into your fetch function that's
what is called the execution context
okay now for your app context is
everything that the loaders are using so
if you go for example to products
dot handle okay
this is the context this is the upload
context as you can see if I hover on it
you see it it says upload context right
and that upload context as defined here
has four five things in it it has the
environment variables okay all the
environment variables are necessary for
the storefront to run and these are like
I said earlier bindings injected
from here okay these are bindings
injected into your fetch function by the
cloudflare walker okay so these are
automatically injected into your cloth
into your fetch function by cloudflare
but you need to define the interface
here to have types okay then you have
your card okay you have your storefront
you have your session which is basically
load handling the authentication for you
and you have that weight until function
that I explained earlier right because
sometimes you need to
most of the time I highly recommend to
have that wait until in your services
like like the storefront service the
card service but sometimes you need to
have them a bit more granularity on how
you use the weight until function so you
need to pass that as well into your
loaders and actions and in this
particular case we don't need we don't
use I think this uh
in this Lotus but some of the loaders in
this app do and we're going to have a
look at them in subsequent videos I'm
I'm sure so uh this is the this is this
is the difference between an upload
context and the serve the execution uh
context okay and one thing that's very
important to know is that the the
environment variables like
the way environment variables walk in
cloudflare a bit different to the way
they work in in node for example in the
node project if you're familiar with
node you know that pretty much
everywhere in your app if you do
process.f that say I don't know
server I don't know Shopify
[Music]
Shopify storefront
storefront API
URL or API key okay you will have access
to this environment variable anywhere in
the code okay but that's not going to
work if you are using cloudflare which
is basically what oxygen is under the
under the hood right it's not going to
work so that's why it's very important
when you're still on in the server
context here when you're defining your
server context anything that needs to be
accessed by the loaders okay needs to be
provided in this m okay like like the
amp that is defined here okay it needs
to be it needs to be added here in the
bindings here like this and then you
need to pass them down into the upload
context so that they can be used in your
um in your um
uh context I think the best way to have
a look at this is to look at the route
the root route okay which is this one if
I open the context here you can see
we're getting a lot more things you're
getting the stuff from the section of
the card right so and and if you want it
we can get the interview as well there's
not going to be a typescript complaint
and I can't I can have a look I can
cancel log even
and console log the F thing okay I can
cancel log this
and you see it's like and then I'm gonna
adjust some stringify
the whole thing or device is not going
to be visible okay so if I do this okay
you'll see what is provided to us so if
I refresh the app very quickly
uh localhost
it's like
localhost like this and I see here you
see all the environment variables were
printed for me right all of them all of
the environment variables are printed
okay so that's how you pass in
environment variables
um in a in a Shopify hydrogen store form
if you do that the way you do it
normally node is not going to work at
all right so I hope I hope I hope you
get the point obviously while you're
still
in the server context in the server.ts
file
the process because here you still have
access to
process.n.node M okay but anywhere else
apart from this file you don't have
access to this anymore so you need
anything that you any environment value
you think you need have need for you
need to add them to this amp obviously
in this case we are basically only we're
only using the amp that was defined in
the bindings by
Walker environment or in the Shopify
oxygen environment and then we're
passing them like this okay but yeah
that's basically it in terms of what
this is the difference between execution
context and upload context I hope that
it's clear and one more important thing
is in that in that in that same um train
of thoughts is that because you can't
have access to your environment
libraries it's very important that all
your service all your services like the
storefront API the card and if you had a
CMS you're going to have like a cost
let's say You're Gonna Define a CMS like
this CMS service something like that and
you're gonna have
um CMS service sorry and you're gonna
have like um let's say I don't know
sanity
client okay and then you're gonna pass
the the API key like this
and it's gonna come from once again as
you know now after sanity
key okay because once again anywhere
else from this file you don't have
access to these things okay you don't
have access to
um
uh for example let's say you didn't
Define this here okay anywhere else from
this file and the loaders you don't have
access to the F okay we don't have
access to the environment but I will
still loaders and obviously the actions
as well so
the the best place therefore to create
your services is once you're in is when
you're in this in this execution and
when once you're defining the fetch
function okay that's the best place to
do that because here you have access to
the environment variables and you can
instantiate your your services like this
and then pass them down to the execution
context here like this okay and if you
do that okay they'll be accessible in
your
um in your execution context so
obviously here we can come here and we
can add one more thing and say okay you
can say sanity
sanity client and then we can Define
this as let's say a string for now okay
just to make things very simple
oh let's say yeah let's define this as a
string okay and then if I do this sanity
sanity CMS
like this okay so it is CMS and I come
here I Define the sanity
um sanity CMS and I add that like that
as a string
just to add some gibberish here and then
I put it here okay
just read this now in all your routes
okay you have access to sanity okay so
the sanity
CMS here and then I can console log that
here obviously it's a string right there
I don't need to stringify it anymore but
let's just do it for the sake of it
um so if I Collapse you see it's already
there it's already there that's how you
inject the dependency in your
um in your store from the API and that's
the best way to share
um basically like business logic
functions
business logic functions with your
loaders and actions okay I hope you see
how how this works you come here in the
upload context you define what it's
going to look like obviously here it's a
very simple example I just put in a
string but you can put anything you want
okay and in your server.ts you
instantiate that object and you pass it
down in the get load context function
and all of and just with that it's not
accessible from your
loaders and actions in in the remix
routes okay I hope that is clear I spend
a lot of time on this but this is very
important
um and one final thing sorry to to spend
a lot of time on this but this is very
important I usually don't recommend like
it's done here to pass in the
environment variables in the upload
context right because business is very
easy to uh
to for for bad console log let's say I
uh let's say the developer okay let's
say the developer
the developer gets the environment
variable here like this okay and then
sends them
in
the return thing okay send them here
like this by mistake all right okay by
mistake or the developer can send the
context
to uh to uh let's say to to to to the
products page okay like this and then
all of the sudden you have your contacts
here right oops sorry context like this
with the environment variables right and
if I console up this you see in the
browser environment that now all our
environment variables are visible
because I'm logging the context right so
that's why usually if I if I open the um
the uh
consult here and I refresh this which
which page is that is the product handle
page so if I visit the product page you
see the context is visible let me zoom
on this a bit more
with all the environment variables
visible to the user you see which is a
big big problem right like this is a
security concern the the like the
developer especially if you don't have
like highly like if you have genuine
developers in your team right they can
do this kind of mistakes right they can
expose security uh like
as they were debugging something while
they were working on on the project they
may expose highly critical information
and without before you know it your
store is under attack and and Things Are
your customer details are stolen and
stuff like that credit cards information
so I think it's it's quite dangerous to
expose
the environment variables to pass down
the environment variables in the upload
context so usually what I what I do I
don't pass this here I will instead
Force every service I will wrap this
within a service right so for example
like they did here for the storefront or
the card okay
so if I come here in the storefront you
see every service like the storefront
service the the let's say for the sake
of the sanity service in case it wasn't
a real client or the card service every
service that needs to to to
anywhere I need to interact with the
environment variables I'll wrap that in
a service and instantiate it like this
so that I never ever ever
expose the environment variables in the
upload context I think that's a bad
practice so yeah that's that's the last
thing I wanted to say about this so let
me revert anyway I'll do that off camera
so the next thing as part of the
architecture of this project that I
think is interesting for us to have a
look at is this I think we already saw
some of this
um so it's explaining the server of ts5
so yeah basically this is this thing
here one thing you may not have noticed
this but this environment variable so
this interface
for handling the environment right away
is defined in the global is declared in
the global okay so it means that
whenever we are using this m thing we
don't have to import it okay which is
quite nice so anything any of any um
type
that you think will be very used in your
application
let's say we are defining an interface
for custom a custom type okay a custom
type
you define it here anything that you
think is going to be used very very very
often and you don't want to keep
importing it everywhere in your app
right you say Okay
property one property one it's a string
property too
is a number right
let's do that like that right you don't
have to import this just like you don't
have to import interface as we when we
were using it here you see never in the
Imports you see the mention of
um offer and right and uh that's quite
handy and useful when you have custom
types that are used a lot in your app
you don't want to keep importing them it
just makes your app you know your code a
bit dirty
so if I Define a custom type an instance
of that custom type I'll just call it
custom type and then I type it as oops
custom type see here so I don't need to
Define it and and um
yeah typescript already knows that I
need to pass in the string to this guy
and for prop 2 I need to pass in a
number okay and typescript is very happy
and you see here I never needed to
import this so that's why this remix.m
file is for because we make.m the D dot
TS is four so you can add types custom
types to the remix context here and
that's very very handy and I use that
all the time in My remix projects
the things that are for objects that are
like ubiquitous in the app the
remixconfig.js file okay this one is
very interesting as well uh but it's
more like remix specific so here you
define the server which is what we saw
here before and explain to you that it
was the server in the in the in
um
development environment is going to run
if you if you're using uh Shopify oxygen
it's going to use mini oxygen if you're
using classical it's going to use mini
flare and in production it's going to
use oxygen and cloudflare expects
respectively okay so uh another one
that's interesting here obviously we're
saying that we're using Talent we're
using post CSS and a few other things
that are important I think watch files
yeah these watch pads is interesting
because mini flare or mini oxygen
compiles your code into this public
folder here okay and this is where
basically uh things like the bundle and
so on I defined and so on that's so
that's why it keeps the server watches
this folder here for changes and uh and
changes your app
accordingly as you make changes this
future flux because remix at the moment
is undergoing some
like a migration from one point like the
version one version 0.2 and there are a
lot of improvements so I highly
recommend I now add this in the
description this link in the description
they are very very good changes that
were added introduced in um version two
namely account I think out of all this
the things that are very interesting to
me particularly as a storefront
developer is how you handle the meta
tags so there are some very good in
improvements on how you handle
um The Meta tags here and the headers so
it makes uh doing SEO for your store a
lot easier okay and a lot more flexible
as well another very interesting thing
is how to do routing some people don't
like this way this new way I do think
it's a lot more cleaner and easier and I
makes a better developer experience so
check that out I'll add the links in the
description so our next stop really is
um the post CSS really this is just
about configuring The Towering CSS
to style our files or if you're not
familiar with this go in the talent
documentation tell me CS documentation
and if you check post CSS to explain
what this is the package you're Json
obviously is familiar to everyone that
has been has run a JavaScript pack a
project
uh here these scripts are basically all
the npm Run search and search for
example we ran the first one which was
npm run Dev okay you can run npm run
preview npm run type check so if you
have typescript
if you wanted to make sure that your
file your project is okay with as fast
types typescript goes you can run type
check and it's gonna check your your
project and make sure that there's no
typescript error and if they were in our
case there is not it will have to it
would have it would have highlighted it
here okay uh build obviously when you're
ready to deploy your project to
production you're gonna run create a
bundle here let's see npm run build
and it's going to create a production
bundle obviously most of the time you
don't do this manually yourself you let
your cicd do that for you so you're
gonna connect your project you're gonna
push your product to a repository like
git or big bucket or gitlab and so on
and then they have cicd for example
GitHub functions to uh
to do all this this uh continuous
integration and continuous deployment
for you obviously in a production
settings you want to have a script for
running your tests about your unit test
and your into a test and if you uh if
you have a premium lifted Commerce
starter kit we have obviously tests a
huge battery of tests and put unit test
integration tests and the end-to-end
test to make sure that your app is um it
is always running smoothly for your
users and they don't have issues so
that's very important obviously there's
the starter kit here that Shopify gives
you doesn't have tests but any
production product should have this very
important uh the next stop in this file
basically we Define a preacher config
it's got the standard thing the
dependencies here it's quite minimal but
functional here you see we have a lot of
Shopify specific things like the Shopify
CLI the Shopify hydrogen Shopify remix
for oxygen so Shopify hydrogen like I
said earlier is basically remix right
it's basically remix and Shopify
oxygen is basically a clever Walkers
okay and then you have graph here
because the store from the API is a
graphql API like we saw before with the
mock shop I closed it again but we saw
that earlier and then you have the the
dev dependencies right so that's
standard stuff
I think the next important thing really
in this thing is to quickly have a look
at what is in here okay so you have this
semi-close the other things here because
becoming confusing like to have a lot
minimal set of files opened so here we
have some utilities
function and hook so you have a utility
hook that is used by uh that was created
by Shopify to get the variant of a
product based on the product handle and
by handle we mean like if you're
visiting a page like this one
products short and so on this is the
handle and as you can even see that in
the routes
instead defined here you see these wild
products sorry this one
handle that's that's the we can lock
that actually for you to see so if we
lock the handle you can see here uh if
you look back handle log hello
okay let me connect it collapse this one
command this one sorry
and I will move this into refresh this
you'll see the handle
[Music]
this is the handle here
shorts okay so you have this utility
function okay to uh create the product
variant you the Euro of a variant based
on the handle and the selected option so
you see here when the user selects
something okay when you just select this
is the function that's basically uh this
is the um
this is the thing that's that's called
okay so when the user changes the
variance and stuff is this the the URL
is generated by this hook and this hook
uses this business logic obviously like
I said earlier in the production
environment product in a production
product you need to have unit tests for
these kind of things and that's what one
of the things that lifted Comics brings
is making sure that Beyond we go beyond
the the default starter kit that is
provided by the library by the Shopify
CLI okay we put things like unit tests
security enhanced security and stuff
like that so check us out on lifted
converse.com so to continue in terms of
this repo structure
the next thing is the root.tx
the route is basically the root route
okay so that's the first react component
that is uh run okay when you visit a
page okay before running any
like the actual routes here
individual rounds for each page this is
kind of like the The Meta route okay
this is the first Dom
and even as you can see here this is
where we created the HTML okay the HTML
is created here HTML page that's where
we start the definition of our HTML
document right so uh here you can see oh
sorry this is the error boundary first
of all let's see here the app this is
the HTML right you can see here how it's
structured we have the lung and
obviously when we look at the
internationalization we will Define
we'll see how to dynamically Define the
language of our page right which is very
good for uh
SEO and stuff like that and user
experience as well and then we have the
metas and then we have the The Meta tags
right so this is a component that's
provided by remix to handle SEO for us
okay so when you add this meta okay so
this is going to basically pull the meta
every round if you remember every route
has defines a meta you see Meta here
and when you add this matter here okay
the method that is defined when you
export this meta from an individual Rank
and you add this component in the root
route okay now when you visit that photo
page that is what is created so you see
here for this particular page we have
hydrogen and then the product title and
that's exactly what's happening here so
if I change this and I say custom
storefront
custom storefront and I save right you
see it changes right this is changes
here that's exactly what you do and to
show you that the two are connected if I
comment this one out it's not going to
disappear you see it disappears it's no
longer showing us that so the two are
connected so the method here is
connected is basically rendering adding
to your HTML document anything that you
define in the individual route okay
obviously when you're doing and that's
again one of the things that um lifted
commas brings to the table is that we
have an in-depth SEO uh
meta description with much more than
just the title okay and go far beyond
that we add title the description
um
open graph HTTP headers and stuff like
that we had a lot of things if you have
a multi-store multi uh an international
story are things like HF Lang and stuff
like that to our starter kit so check us
out once again on lifted comments.com uh
if you if you need an in-depth SEO some
starter kit that goes a lot more deeper
into SEO so
now similarly for the links any link
that you define here basically this uh
where you define your assets in this
case the tower in CSS the reset Styles
and so on so every
like assets
you define them in the links here and
then they are rendered here okay so this
is the head the header of your component
and then you have the body okay and
usually you can also add a footer but
then they didn't add one here in this
case and then you have the layout the
layout is basically a component that
comes with um
with the scaffolding the shop by CLI
they give you a nice obviously if you're
building this is just like a minimum
right so obviously this is one of the
things that you're gonna customize or
completely rewrite if you're building if
you want to improve the look and feel
it's just like very minimalistic
layout is just the the menu here
and then the uh yeah and then the
content here so very minimalistic but it
works obviously so and then inside of
this layout then you will render the
page okay so to show you what I mean by
that if I comment this out
and I add something else obviously if I
commend the size for gonna give me a
narrow and then I if I come here you can
see it's empty what is this see the page
is now empty and whatever page I go to
is going to be empty because this
Outlook is basically this Outlet sorry
it's basically
um the rendering inside of this layout
the route that you're currently visiting
and remember each round defines a meta
defines a loader
finds um
this is just the utility function but
defines the default export in each route
is the component that's been rendered
right so you see here you have the
default the default component the
default react component is this product
here so if I put that back
in the route in the in the route in the
in the root route okay
the outlet back you see it's back
but if I go back to the bottom page
where on which we were before it's back
but to show you once again that the two
are connected If instead of rendering
this thing here I rendered some
gibberish
return uh
no
nothing
yeah nothing
I do like this you see this is nothing
right so this is the products handle
route and then instead of returning
whatever the document the page should
have I'm returning some gibberish it's
gonna show me this and even more so if I
return if I remove this entirely okay
it's going to return adjacent that was
contained in the loader that was
returned by the loader so you can turn
your route into uh like Json apis
basically so if I comment this out all
together
look at this like this you see it
returns oh one sec
you can oh it depends on what you're
returning from here so you can force
this to I think yeah it's because this
is a differ but if it was a simple Json
let's say I return return oh sorry
done Json okay Jason
and I do nothing
nothing
like this I'm gonna see nothing
say nothing completely it's now you've
turned your route into a Json into an
API into an API endpoint right instead
of an HTML so now it's turning stop
returning HDM is returning Json okay so
that's how you do that okay that's why
sometimes in some remix project you have
a route called
routes then API dot the raw that you
want to Define and in those kind of
routes instead of returning a HTML with
the with the cost with the with the real
component you just Define the loader if
it's a get endpoint or the action if
it's a post endpoint and then and then
from there you have an API endpoint
powered by remix so I'm gonna comment
this one out again and remove this
nothing and remove this one here and
that'll be it really and then we'll be
back to what we had earlier which is the
product page right
so the next stop here for us to look at
um is the school restoration okay the
school restoration component is very
nice one uh added by the remix team and
basically what this is is if I go let me
see if I can demo this for you guys if I
scroll down to this level okay see I'm
on the root page I'm on the home page
okay and I scroll down okay
and then I visit
a collection page
and then I go back you see I'm still at
the bottom right I don't know if you
noticed that but let me do that again
I'm on the root page okay the home page
sorry I scroll down okay and then I
visit a different page and then I go
back you see I'm still at the level
where I was before before I went to the
collection page I'm not when I go back
I'm not
um at the top of the page right which is
really really good it's a good school
experience so if I come in a doubt let's
see how this cool experience looks like
now but whatever I done
roots
okay I commented that out all right so
let's try and do that again I think I'm
I'm correctly saying that this is what
this is for okay so let's do an extra
Let me refresh the page let's scroll
down okay are we at the bottom again and
then I visit the collection page
and then I go back uh
thing yeah let me let me try and do that
again it's cool and then I go back
see I'm at the top you see let me do
that again Let me refresh the page okay
I'm at the top I scroll down okay
and then I visit the collections page
and then I go back you see I'm back at
the top of the page right
so this is what the scroll restoration
component does okay so let me comment at
that again comment that in again
and redo the experiment once more okay
let me refresh the page I scroll down
okay visit the collections page and then
I scroll back and then I visit the page
that was back in the history you see
because of that component I have a very
nice
visit experience right so the user can
go back and forth between page and still
keep the context or the the location or
the the what he was based in the context
of where he was in between page
navigation which I think is very good
and we get that for free with remix
which is a great great thing and then
this is basically for developers the
scripts here is uh basically handling
the hydration of your so if you're using
JavaScript which obviously remix Works
goes a long way without using JavaScript
right so that's one of the biggest
selling points of remix but obviously
most these days most websites have
JavaScript sorry most users have
JavaScript enabled on their browser so
this is for adding nice things like uh
um
optimistic UI and stuff like that if
you're using the scripts and so on and
then live reload is basically when I
make changes on a development
environment
when I change let's say this file okay I
never have to reload I never have to
reload the page but the changes to be
visible to for me to me right it just
happens when I change something here uh
in the in in anywhere in the code base
basically the changes are reflected
instantaneously or or or or
a short amount of time because of this
live reload component that is added here
and it's important to say that um one
thing it's important to say that the
order in which these are added to the
page models not not all of them and I
think I don't know I don't remember
exactly for memory but the meta or the
score restoration the order in which
they are added to the HTML page model
somewhat so please check out the I think
it's the remix culture page here if you
come here the remix gorgeous
you'll find out what I'm talking about
the gorgeous
okay good so visit this page you will
see
um there's some intricacies on how the
the the
um maybe not this page but yeah you get
the point okay so it's important to be
careful how you you stack the components
in this page okay so now after with that
out of the way
the next stop for us is the entry server
okay so TX
all right so this one basically is the
middleware it's remixes middleware okay
so if you're doing things like
internationalization uh if you're doing
things like internationalization
um uh a b testing and stuff like that
this is where you want to play you want
to do this kind of things right so you
want to get because every request that
gets sent
to
every route that is visited by the user
first executes this middleware okay and
this is a server Midwest it's going to
run on the server and it has the context
it has the request it has the response
status code it has a response headers
but these are just like
things that you can override here as you
can see it's get over overwritten here
like this and then you create a body
okay so you can see if I return if I for
example here you see we are streaming
the uh the return body okay so instead
of doing that if I do cons
dot if I delete let's say I do let body
equals to this okay you can see it's
returning that and then I do net I do
body
because I just want to override that
okay body equals nothing once again and
you see that we have nothing pretty much
in every page now so let me do this like
this okay
and then
you know coming this one out of it
doesn't get typescript error okay
when I go back to my page and I refresh
you see we have nothing okay
nothing once more because this is a
middleware and this is not just specific
to the collections page it's specific is
everything every page will return this
because this is the middleware okay
nothing so that tells you if you want to
do things like like I said earlier heavy
personalization and stuff like that you
have the context of a request and from
the context of request you can get which
user it is okay you can you can have
like a because the request carries a
token that is associated with the user
resistant page at any given time it
comes things like the user's location
and stuff like that so you can say okay
if the user is visiting the page from
the US oh I need to remove that
okay so if the user is visiting the page
the the the the website from the US do
this if the user is visiting the the the
the
website from in the UK do this so in
this case for example let's console log
what is in the request log
request and then I'll go adjusting
25.
I don't know if this will work but let's
try
okay so let's cancel log whatever it is
that we have in the in the request that
they send and you'll see what is
available for us to play with when we do
this uh
okay let's see
I don't think we have much uh console
log request let me leave it again
[Music]
all right I don't think we have much in
this um
yeah I think it's yeah this is not a
student I need to get like
oh God and how you get to that let me
get the body of the request let me try
that
okay refresh this
[Music]
yeah I've forgotten how you yeah
basically how you can uh get this one
but you get the point I was I was trying
to to console log I've forgotten how you
do that but let's try to construct some
of the things that we have in the
requests here so you can see what's
available to us I think the euro the
request your oh yeah request your things
like that right
request Euro you can see that here where
is that uh
well I don't oh yeah I think this is I
don't think I can console off from here
or could I
anyway never mind I was trying to show
you
um things that have I really request
um but yeah the next thing you want to
know about this is that in the case of a
boat okay because here we are streaming
the content okay so we're streaming the
content and and what what do I mean by
streaming the content okay we are
awaiting the content
um
because here for example I think the
case of a products page okay which is
obviously the most important page one of
the most important page on an e-commerce
store you want to make that page to load
extremely fast right you want that page
to load very fast okay and when you're
loading a product page obviously you
want to load the page the product itself
like like this this is done here okay
this is the product itself but you want
to load let's say I don't know uh the
variance
like you want you may have a
recommendation engine
and and obviously we don't want to do
this the context here this is what I was
doing as I was Denmark
security concerns earlier so let's move
that
let's remove that from our
server.tx as well let's do that
already okay so that's good so
what that was where was I okay so here I
was saying you can have you see all the
things that we're returning from the
product page here we are returning the
product and the product variants if I go
to the collection page let's say
collections handle let's see what's
defined in there in the loader
just a collection okay
but yeah I can make my point from here
okay my point is this is more important
than this okay the products variants
typically I think this this may be not
the the best example but imagine you had
recommendations recommended recommended
all right similar part as well okay
similar
products something like that when you
had a storefront query query I say I
don't know similar
products
[Music]
products okay okay obviously that okay
doesn't exist but just for the sake of
argument right so let's say we have
something like this okay for the sake of
argument you have let's say this was
taking a lot of time to return okay you
can add that to the context like this
similar products okay
Canada to the context and then what this
will do is this is an awaited query okay
this is awaited the product here
okay so this will wait in the in the
load to return but anything else that is
not awaited
will be sent as a promise as you see
here this is a promise if I hover on
this I think I can make my point just
with the violence anyway if you if
you're over here you see that this is a
promise right this is a promise
and this is an actual thing it's not a
promise anymore okay so which that means
is that is that when I'm visiting this
page okay and I'm visiting a page like
this one okay
the product that we want to see is
rendered first and then say imagine we
had some recommendations below the page
below the product itself
we don't need
when you're rendering this page we need
to show the product itself fast the
recommendations can come later
and that's why we call streaming the
content of a page of an HTML page okay
so the content is being streamed okay so
if I go back here which is photos so we
have here the content is being streamed
uh bit by bit so we first give the
content the main content to the user and
then supporting contents like product
various and product recommendations can
come later on that is when we are given
the experience to a natural user okay
both in the case of search engines
we want we want the the the the Google
crawler or the bin crowler to see the
whole page okay this is very important
for SEO this this bit here very very
important from SEO perspective okay
you want Google to see the whole page
okay because
if Google comes and just says this and
uh all your this could be first let's
see that thin content and then all your
SEO goodies that you have added at the
bottom and so on the description all the
things that you spend a lot of time your
content team spend a lot of time writing
may not be visible to the search engine
so from an SEO perspective this is this
this these three lines are very
important okay and what they're doing is
if this is a boat if the request was
made by your boat and this is both it's
provided to you by this nice JavaScript
library called eastbold okay
we await okay we await the whole content
until all the body is ready okay before
before sending a response very important
folks very important if you want to get
good SEO results with your Shopify
hydrogen store phone you await the whole
body okay before returning the the
response otherwise the search engine
like I said earlier major see this bit
may just see this part which is already
awaited but the non-awaited bit may not
be seen it depends on how long it will
take to do it but in in but
that means that you also when you're
awaiting content you need to make sure
also that it's fast okay because if it's
not fast then you're going to be
penalized by boats in terms of uh your
current vitals right so if the awaited
content takes way too long to return
let's say five seconds even one two
three seconds that's really too long so
it means that for every page that the
board is crawling is spending two three
seconds that's not good the crowd budget
and stuff like that
you're gonna you're gonna be um you know
if you have a lot of pages for example
you're gonna have to index all of them
as fast as you want okay so very very
important so as you can see here lifted
Commerce technically Savvy but in terms
of SEO as well very very technical
Discovery in terms of technical SEO on
page SEO you know what you're doing so
check us out on liftedcommons.com and uh
hope you you'll find great and you have
great resources there as well so now if
you go to the
entry.client okay this is very
um simple page it's basically handling
the hydration for us it's very technical
so I won't get into that and finally we
have our routes really oh first of all
the Towering CSS where we Define the
target style is very minimalistic at
this time but it does the job for the
purpose of the demo store then we have a
route okay this is basically all the uh
this is basically remix okay and we're
gonna get into the details of each of
these routes in subsequent videos but
just in terms of the structure okay what
this local brackets
dollar symbol local is all about this is
the it's it what it's what's called an
optional segment so if I go to the remix
documentation and I check the routes
okay you'll have the concept of an
optional segment okay optional segment
where is that you see exactly here and
then this is for the language and the
idea is the store can be visited by
let's say someone in France okay you can
visit products like this okay obviously
this one this is not defined and let's
say English
I don't know if this is defined
okay it's not defined because the the
language is not um the language is not
defined so it's just here for this it's
it's the capabilities they are
implemented in the store phone but it's
not yet
um added okay capabilities that
provision is made for you to to render
to this little page in different
languages but the different languages
have not been added okay so that's what
it's for and it's optional meaning that
let's say if you have the default
language of your store okay in the
different language I'll say most of you
watching this will be English okay
so for a different language usually you
don't want a different language to
appear in the URL okay but for other
languages Spanish and French and stuff
like that you want products F slash FR
slash products and one side note there
at lifted commas we have
um
uh
um
templates that allow you not only to
translate to add you have starter kits
that not only allow you to translate the
um to add the local here but also
translate the segment itself okay
because you can see here what Shopify
gives you out of the box it's Alpha
slash products yes in the case of
Spanish slash products the the segment
itself is not translated but we managed
to create starter kits at lifted commas
that allows you to create to translate
even the segment itself so it's hyper
hyper localized and Hyper and it's very
powerful from an SEO perspective if you
want to translate the the the path
segment itself so now if you go back
here we have the index file this is your
site map okay I'm gonna create a
specific video specifically dedicated to
this so let's skip that check encourage
you to check the channel uh when that
once that comes out
and obviously similar to that you have
the robot txt same thing I'm going to
create a video specifically for that and
uh for all your
um
active the predictive search right and
demo to you initially uh this this thing
here the search here basically it's
using this thing called the predictive
search and you see it uses the API like
I was saying earlier this this route
only defines the loader and the action
and it doesn't Define
a react component so it can be used as
an API and that's exactly what they're
doing here in this uh demo store and you
have the blog okay this is just gonna
render the blog posts that are on your
your Shopify Plus account okay so I
think all in all I highly encourage you
to have a look at this obviously like I
said just do a quick walkthrough I'm
gonna drill down into each of these
throughout individually in subsequent
videos similarly for the components
which I think will be the next video
we're going to look at the
all the uh Shopify hydrogen components
right what is provided to us by Shopify
when it comes to the components that
they give us to create the Shopify
hydrogen store I hope you found this
video useful we cover a lot of things we
cover a lot of things in terms of
security in terms of SEO in terms of
customization and performance and so on
so I hope you found this video and if
you did please give it a like give us a
like and uh feel free to visit lifted
comments.com if you need help with any
Shopify plus Shopify hydrogen related
services and check our starter kits to
see what we can do how we can help and
help you launch your shopify's custom
store a lot quicker than it will take
normally thank you for watching and I'll
see you in the next one cheers
원문 자막 펼치기
WEBVTT Kind: captions Language: en 00:00:01.319 --> 00:00:03.530 align:start position:0% hello<00:00:01.979><c> Internet</c><00:00:02.340><c> in</c><00:00:02.879><c> this</c><00:00:03.000><c> video</c><00:00:03.120><c> we're</c><00:00:03.360><c> going</c> 00:00:03.530 --> 00:00:03.540 align:start position:0% hello Internet in this video we're going 00:00:03.540 --> 00:00:05.269 align:start position:0% hello Internet in this video we're going to<00:00:03.600><c> study</c><00:00:03.840><c> in</c><00:00:04.020><c> great</c><00:00:04.259><c> details</c><00:00:04.740><c> Shopify</c> 00:00:05.269 --> 00:00:05.279 align:start position:0% to study in great details Shopify 00:00:05.279 --> 00:00:08.330 align:start position:0% to study in great details Shopify hydrogen<00:00:06.180><c> architecture</c><00:00:07.020><c> so</c><00:00:07.859><c> in</c><00:00:08.040><c> the</c><00:00:08.220><c> previous</c> 00:00:08.330 --> 00:00:08.340 align:start position:0% hydrogen architecture so in the previous 00:00:08.340 --> 00:00:12.730 align:start position:0% hydrogen architecture so in the previous video<00:00:08.700><c> where</c><00:00:09.059><c> we</c><00:00:09.240><c> left</c><00:00:09.480><c> we</c><00:00:10.260><c> looked</c><00:00:10.559><c> at</c><00:00:10.620><c> how</c><00:00:11.480><c> how</c> 00:00:12.730 --> 00:00:12.740 align:start position:0% video where we left we looked at how how 00:00:12.740 --> 00:00:15.890 align:start position:0% video where we left we looked at how how Shopify<00:00:13.740><c> hydrogen</c><00:00:14.340><c> store</c><00:00:14.519><c> looks</c><00:00:15.000><c> like</c><00:00:15.059><c> from</c><00:00:15.660><c> a</c> 00:00:15.890 --> 00:00:15.900 align:start position:0% Shopify hydrogen store looks like from a 00:00:15.900 --> 00:00:18.290 align:start position:0% Shopify hydrogen store looks like from a customer<00:00:16.139><c> point</c><00:00:17.039><c> of</c><00:00:17.220><c> view</c><00:00:17.340><c> so</c><00:00:17.580><c> from</c><00:00:17.820><c> a</c><00:00:18.000><c> user</c> 00:00:18.290 --> 00:00:18.300 align:start position:0% customer point of view so from a user 00:00:18.300 --> 00:00:19.970 align:start position:0% customer point of view so from a user point<00:00:18.480><c> of</c><00:00:18.660><c> view</c><00:00:18.720><c> so</c><00:00:18.900><c> we're</c><00:00:19.140><c> looking</c><00:00:19.320><c> at</c><00:00:19.680><c> this</c> 00:00:19.970 --> 00:00:19.980 align:start position:0% point of view so we're looking at this 00:00:19.980 --> 00:00:22.310 align:start position:0% point of view so we're looking at this store<00:00:20.220><c> that</c><00:00:21.000><c> was</c><00:00:21.180><c> that</c><00:00:21.480><c> was</c><00:00:21.660><c> scaffolded</c><00:00:22.140><c> by</c> 00:00:22.310 --> 00:00:22.320 align:start position:0% store that was that was scaffolded by 00:00:22.320 --> 00:00:25.429 align:start position:0% store that was that was scaffolded by the<00:00:22.500><c> Shopify</c><00:00:22.859><c> CLI</c><00:00:23.520><c> but</c><00:00:24.119><c> this</c><00:00:24.300><c> time</c><00:00:24.480><c> we</c><00:00:24.720><c> get</c><00:00:24.960><c> the</c> 00:00:25.429 --> 00:00:25.439 align:start position:0% the Shopify CLI but this time we get the 00:00:25.439 --> 00:00:29.570 align:start position:0% the Shopify CLI but this time we get the developer<00:00:26.100><c> size</c><00:00:26.400><c> view</c><00:00:26.760><c> of</c><00:00:27.800><c> the</c><00:00:28.800><c> the</c><00:00:29.099><c> Shopify</c> 00:00:29.570 --> 00:00:29.580 align:start position:0% developer size view of the the Shopify 00:00:29.580 --> 00:00:33.110 align:start position:0% developer size view of the the Shopify hydrogen<00:00:30.240><c> store</c><00:00:31.140><c> Okay</c><00:00:31.619><c> so</c> 00:00:33.110 --> 00:00:33.120 align:start position:0% hydrogen store Okay so 00:00:33.120 --> 00:00:36.110 align:start position:0% hydrogen store Okay so just<00:00:33.899><c> before</c><00:00:34.320><c> we</c><00:00:34.980><c> get</c><00:00:35.160><c> into</c><00:00:35.280><c> the</c><00:00:35.460><c> nitty-gritty</c> 00:00:36.110 --> 00:00:36.120 align:start position:0% just before we get into the nitty-gritty 00:00:36.120 --> 00:00:38.090 align:start position:0% just before we get into the nitty-gritty details<00:00:36.660><c> it's</c><00:00:36.780><c> important</c><00:00:37.140><c> to</c><00:00:37.380><c> say</c><00:00:37.559><c> that</c> 00:00:38.090 --> 00:00:38.100 align:start position:0% details it's important to say that 00:00:38.100 --> 00:00:41.150 align:start position:0% details it's important to say that Shopify<00:00:38.640><c> hydrogen</c><00:00:39.420><c> is</c><00:00:39.899><c> based</c><00:00:40.320><c> on</c><00:00:40.559><c> the</c><00:00:40.800><c> the</c> 00:00:41.150 --> 00:00:41.160 align:start position:0% Shopify hydrogen is based on the the 00:00:41.160 --> 00:00:43.970 align:start position:0% Shopify hydrogen is based on the the remix<00:00:41.520><c> framework</c><00:00:42.300><c> which</c><00:00:43.079><c> is</c><00:00:43.260><c> a</c><00:00:43.559><c> very</c><00:00:43.739><c> very</c> 00:00:43.970 --> 00:00:43.980 align:start position:0% remix framework which is a very very 00:00:43.980 --> 00:00:47.209 align:start position:0% remix framework which is a very very very<00:00:44.600><c> powerful</c><00:00:45.600><c> framework</c><00:00:46.559><c> for</c><00:00:46.800><c> creating</c> 00:00:47.209 --> 00:00:47.219 align:start position:0% very powerful framework for creating 00:00:47.219 --> 00:00:50.150 align:start position:0% very powerful framework for creating highly<00:00:47.820><c> Dynamic</c><00:00:48.360><c> and</c><00:00:48.600><c> super</c><00:00:49.079><c> fast</c> 00:00:50.150 --> 00:00:50.160 align:start position:0% highly Dynamic and super fast 00:00:50.160 --> 00:00:54.410 align:start position:0% highly Dynamic and super fast um<00:00:50.719><c> websites</c><00:00:51.719><c> and</c><00:00:51.899><c> web</c><00:00:52.079><c> apps</c><00:00:52.440><c> powered</c><00:00:53.280><c> by</c> 00:00:54.410 --> 00:00:54.420 align:start position:0% um websites and web apps powered by 00:00:54.420 --> 00:00:55.250 align:start position:0% um websites and web apps powered by um 00:00:55.250 --> 00:00:55.260 align:start position:0% um 00:00:55.260 --> 00:00:58.910 align:start position:0% um react<00:00:56.160><c> okay</c><00:00:56.640><c> so</c><00:00:57.180><c> it's</c><00:00:57.360><c> created</c><00:00:57.780><c> by</c><00:00:58.140><c> the</c><00:00:58.800><c> same</c> 00:00:58.910 --> 00:00:58.920 align:start position:0% react okay so it's created by the same 00:00:58.920 --> 00:01:03.130 align:start position:0% react okay so it's created by the same folk<00:00:59.460><c> who</c><00:01:00.059><c> created</c><00:01:00.360><c> the</c><00:01:00.719><c> react</c><00:01:01.559><c> router</c> 00:01:03.130 --> 00:01:03.140 align:start position:0% folk who created the react router 00:01:03.140 --> 00:01:06.469 align:start position:0% folk who created the react router package<00:01:04.140><c> okay</c><00:01:04.440><c> so</c><00:01:04.799><c> it's</c><00:01:04.920><c> a</c><00:01:05.159><c> very</c><00:01:05.280><c> very</c><00:01:05.519><c> Solid</c> 00:01:06.469 --> 00:01:06.479 align:start position:0% package okay so it's a very very Solid 00:01:06.479 --> 00:01:10.149 align:start position:0% package okay so it's a very very Solid Rock<00:01:06.960><c> Solid</c><00:01:07.760><c> framework</c><00:01:08.760><c> and</c><00:01:09.000><c> no</c><00:01:09.180><c> wonder</c> 00:01:10.149 --> 00:01:10.159 align:start position:0% Rock Solid framework and no wonder 00:01:10.159 --> 00:01:14.149 align:start position:0% Rock Solid framework and no wonder Shopify<00:01:11.159><c> choose</c><00:01:11.820><c> this</c><00:01:12.060><c> to</c><00:01:12.540><c> build</c><00:01:13.320><c> hydrogen</c><00:01:13.920><c> on</c> 00:01:14.149 --> 00:01:14.159 align:start position:0% Shopify choose this to build hydrogen on 00:01:14.159 --> 00:01:17.570 align:start position:0% Shopify choose this to build hydrogen on top<00:01:14.520><c> of</c><00:01:14.700><c> so</c><00:01:15.140><c> that's</c><00:01:16.140><c> why</c><00:01:16.380><c> if</c><00:01:16.860><c> you</c><00:01:17.040><c> if</c><00:01:17.400><c> you're</c> 00:01:17.570 --> 00:01:17.580 align:start position:0% top of so that's why if you if you're 00:01:17.580 --> 00:01:20.030 align:start position:0% top of so that's why if you if you're familiar<00:01:17.880><c> with</c><00:01:18.060><c> remix</c><00:01:18.420><c> you'll</c><00:01:19.020><c> know</c><00:01:19.200><c> that</c><00:01:19.439><c> it</c> 00:01:20.030 --> 00:01:20.040 align:start position:0% familiar with remix you'll know that it 00:01:20.040 --> 00:01:22.429 align:start position:0% familiar with remix you'll know that it has<00:01:20.220><c> the</c><00:01:20.460><c> concept</c><00:01:20.759><c> of</c><00:01:20.939><c> a</c><00:01:21.119><c> loader</c><00:01:21.540><c> and</c><00:01:21.780><c> actions</c> 00:01:22.429 --> 00:01:22.439 align:start position:0% has the concept of a loader and actions 00:01:22.439 --> 00:01:25.450 align:start position:0% has the concept of a loader and actions and<00:01:22.619><c> and</c><00:01:23.000><c> it's</c><00:01:24.000><c> a</c><00:01:24.299><c> very</c><00:01:24.479><c> powerful</c> 00:01:25.450 --> 00:01:25.460 align:start position:0% and and it's a very powerful 00:01:25.460 --> 00:01:28.910 align:start position:0% and and it's a very powerful concept<00:01:26.460><c> and</c><00:01:26.700><c> on</c><00:01:27.119><c> which</c><00:01:27.360><c> to</c><00:01:27.479><c> build</c><00:01:27.659><c> apps</c><00:01:28.080><c> so</c><00:01:28.619><c> if</c> 00:01:28.910 --> 00:01:28.920 align:start position:0% concept and on which to build apps so if 00:01:28.920 --> 00:01:32.690 align:start position:0% concept and on which to build apps so if we<00:01:29.159><c> for</c><00:01:29.400><c> example</c><00:01:29.640><c> visit</c><00:01:30.000><c> again</c><00:01:30.799><c> the</c><00:01:31.799><c> home</c><00:01:32.400><c> page</c> 00:01:32.690 --> 00:01:32.700 align:start position:0% we for example visit again the home page 00:01:32.700 --> 00:01:35.749 align:start position:0% we for example visit again the home page you<00:01:33.420><c> see</c><00:01:33.840><c> that</c><00:01:34.680><c> the</c><00:01:34.920><c> loader</c><00:01:35.280><c> for</c><00:01:35.460><c> the</c><00:01:35.640><c> home</c> 00:01:35.749 --> 00:01:35.759 align:start position:0% you see that the loader for the home 00:01:35.759 --> 00:01:37.969 align:start position:0% you see that the loader for the home page<00:01:36.060><c> was</c><00:01:36.299><c> visited</c><00:01:37.020><c> here</c><00:01:37.259><c> right</c><00:01:37.500><c> which</c><00:01:37.860><c> is</c> 00:01:37.969 --> 00:01:37.979 align:start position:0% page was visited here right which is 00:01:37.979 --> 00:01:41.990 align:start position:0% page was visited here right which is basically<00:01:38.400><c> this</c><00:01:38.880><c> route</c><00:01:39.240><c> here</c><00:01:40.140><c> okay</c><00:01:40.680><c> the</c><00:01:41.340><c> local</c> 00:01:41.990 --> 00:01:42.000 align:start position:0% basically this route here okay the local 00:01:42.000 --> 00:01:43.609 align:start position:0% basically this route here okay the local dot<00:01:42.420><c> index</c><00:01:42.659><c> and</c><00:01:42.780><c> I'm</c><00:01:42.900><c> going</c><00:01:43.140><c> to</c><00:01:43.140><c> explain</c><00:01:43.320><c> what</c> 00:01:43.609 --> 00:01:43.619 align:start position:0% dot index and I'm going to explain what 00:01:43.619 --> 00:01:46.310 align:start position:0% dot index and I'm going to explain what that<00:01:43.860><c> is</c><00:01:44.040><c> and</c><00:01:44.880><c> especially</c><00:01:45.540><c> that</c><00:01:45.659><c> local</c><00:01:45.900><c> part</c> 00:01:46.310 --> 00:01:46.320 align:start position:0% that is and especially that local part 00:01:46.320 --> 00:01:48.830 align:start position:0% that is and especially that local part so<00:01:47.040><c> if</c><00:01:47.159><c> you</c><00:01:47.280><c> visit</c><00:01:47.460><c> the</c><00:01:47.700><c> collection</c><00:01:48.119><c> okay</c> 00:01:48.830 --> 00:01:48.840 align:start position:0% so if you visit the collection okay 00:01:48.840 --> 00:01:51.170 align:start position:0% so if you visit the collection okay you're<00:01:49.560><c> gonna</c><00:01:49.740><c> see</c><00:01:50.040><c> that</c><00:01:50.700><c> the</c><00:01:50.880><c> collection</c> 00:01:51.170 --> 00:01:51.180 align:start position:0% you're gonna see that the collection 00:01:51.180 --> 00:01:55.429 align:start position:0% you're gonna see that the collection route<00:01:51.479><c> was</c><00:01:51.780><c> visited</c><00:01:52.320><c> right</c><00:01:52.880><c> and</c><00:01:53.880><c> uh</c><00:01:54.240><c> to</c><00:01:54.600><c> make</c> 00:01:55.429 --> 00:01:55.439 align:start position:0% route was visited right and uh to make 00:01:55.439 --> 00:01:58.249 align:start position:0% route was visited right and uh to make that<00:01:55.920><c> even</c><00:01:56.159><c> more</c><00:01:56.340><c> clearer</c><00:01:56.820><c> we</c><00:01:57.180><c> can</c><00:01:57.360><c> add</c><00:01:58.079><c> a</c> 00:01:58.249 --> 00:01:58.259 align:start position:0% that even more clearer we can add a 00:01:58.259 --> 00:02:01.069 align:start position:0% that even more clearer we can add a console<00:01:58.560><c> log</c><00:01:58.740><c> here</c><00:01:59.040><c> okay</c> 00:02:01.069 --> 00:02:01.079 align:start position:0% console log here okay 00:02:01.079 --> 00:02:03.889 align:start position:0% console log here okay to<00:02:01.619><c> to</c><00:02:01.920><c> and</c><00:02:02.820><c> then</c><00:02:03.000><c> if</c><00:02:03.180><c> you</c><00:02:03.299><c> visit</c><00:02:03.420><c> the</c><00:02:03.720><c> product</c> 00:02:03.889 --> 00:02:03.899 align:start position:0% to to and then if you visit the product 00:02:03.899 --> 00:02:06.170 align:start position:0% to to and then if you visit the product page<00:02:04.380><c> which</c><00:02:05.040><c> is</c><00:02:05.219><c> the</c><00:02:05.399><c> products</c><00:02:05.880><c> local</c> 00:02:06.170 --> 00:02:06.180 align:start position:0% page which is the products local 00:02:06.180 --> 00:02:09.710 align:start position:0% page which is the products local products<00:02:06.840><c> handle</c><00:02:07.380><c> here</c><00:02:07.680><c> we</c><00:02:07.979><c> can</c><00:02:08.220><c> see</c><00:02:08.520><c> that</c><00:02:09.239><c> the</c> 00:02:09.710 --> 00:02:09.720 align:start position:0% products handle here we can see that the 00:02:09.720 --> 00:02:12.530 align:start position:0% products handle here we can see that the um that<00:02:10.440><c> this</c><00:02:10.679><c> particular</c><00:02:11.180><c> loader</c><00:02:12.180><c> will</c><00:02:12.420><c> be</c> 00:02:12.530 --> 00:02:12.540 align:start position:0% um that this particular loader will be 00:02:12.540 --> 00:02:14.750 align:start position:0% um that this particular loader will be visited<00:02:12.900><c> so</c><00:02:13.080><c> if</c><00:02:13.200><c> you</c><00:02:13.319><c> go</c><00:02:13.500><c> there</c><00:02:13.680><c> and</c><00:02:14.400><c> we</c><00:02:14.640><c> visit</c> 00:02:14.750 --> 00:02:14.760 align:start position:0% visited so if you go there and we visit 00:02:14.760 --> 00:02:16.850 align:start position:0% visited so if you go there and we visit the<00:02:15.000><c> product</c><00:02:15.180><c> okay</c> 00:02:16.850 --> 00:02:16.860 align:start position:0% the product okay 00:02:16.860 --> 00:02:20.150 align:start position:0% the product okay and<00:02:17.280><c> voila</c><00:02:17.640><c> see</c><00:02:17.940><c> in</c><00:02:18.660><c> products</c><00:02:19.140><c> handle</c><00:02:19.500><c> Handler</c> 00:02:20.150 --> 00:02:20.160 align:start position:0% and voila see in products handle Handler 00:02:20.160 --> 00:02:24.170 align:start position:0% and voila see in products handle Handler okay<00:02:20.580><c> loader</c><00:02:21.540><c> so</c><00:02:21.959><c> now</c><00:02:22.680><c> with</c><00:02:23.520><c> that</c><00:02:23.700><c> with</c><00:02:24.000><c> that</c> 00:02:24.170 --> 00:02:24.180 align:start position:0% okay loader so now with that with that 00:02:24.180 --> 00:02:26.750 align:start position:0% okay loader so now with that with that in<00:02:24.300><c> mind</c><00:02:24.480><c> knowing</c><00:02:25.200><c> that</c><00:02:25.800><c> hydrogen</c><00:02:26.520><c> is</c> 00:02:26.750 --> 00:02:26.760 align:start position:0% in mind knowing that hydrogen is 00:02:26.760 --> 00:02:28.190 align:start position:0% in mind knowing that hydrogen is basically 00:02:28.190 --> 00:02:28.200 align:start position:0% basically 00:02:28.200 --> 00:02:31.130 align:start position:0% basically remix<00:02:28.920><c> but</c><00:02:29.640><c> with</c><00:02:29.940><c> some</c> 00:02:31.130 --> 00:02:31.140 align:start position:0% remix but with some 00:02:31.140 --> 00:02:32.949 align:start position:0% remix but with some um 00:02:32.949 --> 00:02:32.959 align:start position:0% um 00:02:32.959 --> 00:02:36.550 align:start position:0% um nice<00:02:33.959><c> developer</c><00:02:34.560><c> experience</c><00:02:35.099><c> and</c><00:02:35.940><c> um</c> 00:02:36.550 --> 00:02:36.560 align:start position:0% nice developer experience and um 00:02:36.560 --> 00:02:40.070 align:start position:0% nice developer experience and um like<00:02:37.560><c> a</c><00:02:37.920><c> wrapper</c><00:02:38.280><c> for</c><00:02:38.640><c> for</c><00:02:38.879><c> easy</c><00:02:39.480><c> integration</c> 00:02:40.070 --> 00:02:40.080 align:start position:0% like a wrapper for for easy integration 00:02:40.080 --> 00:02:42.350 align:start position:0% like a wrapper for for easy integration with<00:02:40.500><c> with</c><00:02:40.739><c> Shopify</c><00:02:41.340><c> as</c><00:02:42.000><c> you</c><00:02:42.180><c> can</c><00:02:42.239><c> already</c> 00:02:42.350 --> 00:02:42.360 align:start position:0% with with Shopify as you can already 00:02:42.360 --> 00:02:44.869 align:start position:0% with with Shopify as you can already even<00:02:42.660><c> see</c><00:02:42.959><c> here</c><00:02:43.260><c> you</c><00:02:43.620><c> have</c><00:02:43.860><c> Shopify</c><00:02:44.280><c> hydrogen</c> 00:02:44.869 --> 00:02:44.879 align:start position:0% even see here you have Shopify hydrogen 00:02:44.879 --> 00:02:46.550 align:start position:0% even see here you have Shopify hydrogen type<00:02:45.120><c> so</c><00:02:45.360><c> you</c><00:02:45.540><c> don't</c><00:02:45.660><c> have</c><00:02:45.780><c> to</c><00:02:45.900><c> create</c><00:02:46.080><c> types</c> 00:02:46.550 --> 00:02:46.560 align:start position:0% type so you don't have to create types 00:02:46.560 --> 00:02:48.710 align:start position:0% type so you don't have to create types to<00:02:46.739><c> solve</c><00:02:47.099><c> the</c><00:02:47.640><c> guideline</c><00:02:48.180><c> the</c><00:02:48.420><c> select</c> 00:02:48.710 --> 00:02:48.720 align:start position:0% to solve the guideline the select 00:02:48.720 --> 00:02:50.990 align:start position:0% to solve the guideline the select adoption<00:02:49.200><c> and</c><00:02:49.319><c> stuff</c><00:02:49.500><c> like</c><00:02:49.680><c> that</c><00:02:49.860><c> so</c><00:02:50.160><c> and</c><00:02:50.700><c> the</c> 00:02:50.990 --> 00:02:51.000 align:start position:0% adoption and stuff like that so and the 00:02:51.000 --> 00:02:53.390 align:start position:0% adoption and stuff like that so and the components<00:02:51.540><c> and</c><00:02:51.720><c> stuff</c><00:02:51.900><c> so</c><00:02:52.200><c> it's</c><00:02:52.319><c> very</c><00:02:52.680><c> well</c> 00:02:53.390 --> 00:02:53.400 align:start position:0% components and stuff so it's very well 00:02:53.400 --> 00:02:56.270 align:start position:0% components and stuff so it's very well integrated<00:02:54.360><c> with</c><00:02:54.720><c> the</c><00:02:54.840><c> Shopify</c><00:02:55.200><c> ecosystem</c><00:02:55.860><c> so</c> 00:02:56.270 --> 00:02:56.280 align:start position:0% integrated with the Shopify ecosystem so 00:02:56.280 --> 00:02:58.850 align:start position:0% integrated with the Shopify ecosystem so what<00:02:56.580><c> this</c><00:02:56.819><c> what</c><00:02:57.060><c> I</c><00:02:57.420><c> think</c><00:02:57.480><c> is</c><00:02:57.720><c> the</c><00:02:57.959><c> best</c><00:02:58.200><c> way</c> 00:02:58.850 --> 00:02:58.860 align:start position:0% what this what I think is the best way 00:02:58.860 --> 00:03:00.589 align:start position:0% what this what I think is the best way to<00:02:59.099><c> build</c><00:02:59.220><c> custom</c><00:02:59.519><c> software</c><00:03:00.120><c> is</c><00:03:00.300><c> to</c><00:03:00.480><c> use</c> 00:03:00.589 --> 00:03:00.599 align:start position:0% to build custom software is to use 00:03:00.599 --> 00:03:03.470 align:start position:0% to build custom software is to use Shopify<00:03:01.200><c> use</c><00:03:01.860><c> uh</c><00:03:02.400><c> the</c><00:03:02.640><c> tools</c><00:03:03.060><c> they</c><00:03:03.180><c> give</c><00:03:03.360><c> you</c> 00:03:03.470 --> 00:03:03.480 align:start position:0% Shopify use uh the tools they give you 00:03:03.480 --> 00:03:06.350 align:start position:0% Shopify use uh the tools they give you they<00:03:03.720><c> are</c><00:03:03.900><c> powerful</c><00:03:04.260><c> and</c><00:03:04.440><c> solid</c><00:03:04.860><c> so</c><00:03:05.760><c> let's</c> 00:03:06.350 --> 00:03:06.360 align:start position:0% they are powerful and solid so let's 00:03:06.360 --> 00:03:07.970 align:start position:0% they are powerful and solid so let's start<00:03:06.720><c> by</c> 00:03:07.970 --> 00:03:07.980 align:start position:0% start by 00:03:07.980 --> 00:03:09.770 align:start position:0% start by um what<00:03:08.819><c> I</c><00:03:08.940><c> would</c><00:03:09.000><c> like</c><00:03:09.120><c> to</c><00:03:09.239><c> do</c><00:03:09.300><c> in</c><00:03:09.420><c> this</c><00:03:09.599><c> video</c> 00:03:09.770 --> 00:03:09.780 align:start position:0% um what I would like to do in this video 00:03:09.780 --> 00:03:13.130 align:start position:0% um what I would like to do in this video with<00:03:10.560><c> that</c><00:03:10.680><c> introduction</c><00:03:11.280><c> out</c><00:03:12.000><c> of</c><00:03:12.120><c> the</c><00:03:12.239><c> way</c><00:03:12.360><c> is</c> 00:03:13.130 --> 00:03:13.140 align:start position:0% with that introduction out of the way is 00:03:13.140 --> 00:03:15.770 align:start position:0% with that introduction out of the way is have<00:03:13.500><c> a</c><00:03:13.620><c> look</c><00:03:13.860><c> at</c><00:03:14.459><c> this</c><00:03:14.640><c> repo</c><00:03:15.120><c> that</c><00:03:15.659><c> was</c> 00:03:15.770 --> 00:03:15.780 align:start position:0% have a look at this repo that was 00:03:15.780 --> 00:03:18.410 align:start position:0% have a look at this repo that was created<00:03:16.200><c> for</c><00:03:16.500><c> us</c><00:03:16.620><c> from</c><00:03:17.220><c> the</c><00:03:17.519><c> bottom</c><00:03:18.000><c> up</c><00:03:18.180><c> so</c> 00:03:18.410 --> 00:03:18.420 align:start position:0% created for us from the bottom up so 00:03:18.420 --> 00:03:20.030 align:start position:0% created for us from the bottom up so let's<00:03:18.540><c> have</c><00:03:18.720><c> a</c><00:03:18.840><c> look</c><00:03:18.900><c> at</c><00:03:19.080><c> each</c><00:03:19.319><c> file</c><00:03:19.680><c> obviously</c> 00:03:20.030 --> 00:03:20.040 align:start position:0% let's have a look at each file obviously 00:03:20.040 --> 00:03:21.410 align:start position:0% let's have a look at each file obviously I'm<00:03:20.159><c> not</c><00:03:20.340><c> going</c><00:03:20.400><c> to</c><00:03:20.519><c> have</c><00:03:20.640><c> a</c><00:03:20.760><c> look</c><00:03:20.879><c> at</c><00:03:21.060><c> all</c><00:03:21.300><c> of</c> 00:03:21.410 --> 00:03:21.420 align:start position:0% I'm not going to have a look at all of 00:03:21.420 --> 00:03:23.869 align:start position:0% I'm not going to have a look at all of them<00:03:21.599><c> uh</c><00:03:22.560><c> the</c><00:03:22.800><c> the</c><00:03:22.920><c> what's</c><00:03:23.519><c> that</c><00:03:23.700><c> theme</c> 00:03:23.869 --> 00:03:23.879 align:start position:0% them uh the the what's that theme 00:03:23.879 --> 00:03:26.630 align:start position:0% them uh the the what's that theme important<00:03:24.420><c> so</c><00:03:25.200><c> the</c><00:03:25.440><c> first</c><00:03:25.560><c> one</c><00:03:25.739><c> obviously</c><00:03:26.159><c> we</c> 00:03:26.630 --> 00:03:26.640 align:start position:0% important so the first one obviously we 00:03:26.640 --> 00:03:28.070 align:start position:0% important so the first one obviously we chose<00:03:26.879><c> typescript</c><00:03:27.420><c> if</c><00:03:27.659><c> you</c><00:03:27.780><c> remember</c><00:03:27.900><c> when</c> 00:03:28.070 --> 00:03:28.080 align:start position:0% chose typescript if you remember when 00:03:28.080 --> 00:03:32.350 align:start position:0% chose typescript if you remember when you<00:03:28.260><c> scaffolding</c><00:03:29.159><c> project</c><00:03:29.459><c> which</c><00:03:29.819><c> shows</c> 00:03:32.350 --> 00:03:32.360 align:start position:0% 00:03:32.360 --> 00:03:34.610 align:start position:0% typescriptions<00:03:33.360><c> of</c><00:03:33.599><c> JavaScript</c> 00:03:34.610 --> 00:03:34.620 align:start position:0% typescriptions of JavaScript 00:03:34.620 --> 00:03:36.350 align:start position:0% typescriptions of JavaScript um<00:03:34.680><c> so</c><00:03:34.920><c> that's</c><00:03:35.220><c> that's</c><00:03:35.459><c> the</c><00:03:35.760><c> typescript</c> 00:03:36.350 --> 00:03:36.360 align:start position:0% um so that's that's the typescript 00:03:36.360 --> 00:03:39.170 align:start position:0% um so that's that's the typescript configuration<00:03:36.900><c> file</c><00:03:37.379><c> here</c><00:03:37.700><c> as</c><00:03:38.700><c> you</c><00:03:38.879><c> can</c><00:03:39.000><c> see</c> 00:03:39.170 --> 00:03:39.180 align:start position:0% configuration file here as you can see 00:03:39.180 --> 00:03:43.130 align:start position:0% configuration file here as you can see uh<00:03:40.019><c> the</c><00:03:40.560><c> notable</c><00:03:40.860><c> thing</c><00:03:41.159><c> it</c><00:03:41.580><c> is</c><00:03:41.760><c> fine</c><00:03:42.000><c> is</c><00:03:42.360><c> that</c> 00:03:43.130 --> 00:03:43.140 align:start position:0% uh the notable thing it is fine is that 00:03:43.140 --> 00:03:46.009 align:start position:0% uh the notable thing it is fine is that we<00:03:43.620><c> are</c><00:03:43.799><c> adding</c><00:03:44.099><c> some</c><00:03:44.340><c> types</c><00:03:44.819><c> okay</c><00:03:45.239><c> we</c><00:03:45.840><c> are</c> 00:03:46.009 --> 00:03:46.019 align:start position:0% we are adding some types okay we are 00:03:46.019 --> 00:03:49.250 align:start position:0% we are adding some types okay we are adding<00:03:46.260><c> types</c><00:03:46.620><c> that</c><00:03:46.739><c> are</c><00:03:46.980><c> specific</c><00:03:47.340><c> to</c><00:03:48.260><c> oxygen</c> 00:03:49.250 --> 00:03:49.260 align:start position:0% adding types that are specific to oxygen 00:03:49.260 --> 00:03:53.930 align:start position:0% adding types that are specific to oxygen Walker<00:03:49.940><c> types</c><00:03:50.940><c> and</c><00:03:51.739><c> what</c><00:03:52.739><c> what</c><00:03:53.159><c> is</c><00:03:53.400><c> oxygen</c> 00:03:53.930 --> 00:03:53.940 align:start position:0% Walker types and what what is oxygen 00:03:53.940 --> 00:03:56.809 align:start position:0% Walker types and what what is oxygen well<00:03:54.379><c> the</c><00:03:55.379><c> same</c><00:03:55.560><c> way</c> 00:03:56.809 --> 00:03:56.819 align:start position:0% well the same way 00:03:56.819 --> 00:03:59.449 align:start position:0% well the same way um<00:03:56.879><c> hydrogen</c><00:03:57.599><c> is</c><00:03:57.780><c> powered</c><00:03:58.200><c> by</c><00:03:58.379><c> remix</c> 00:03:59.449 --> 00:03:59.459 align:start position:0% um hydrogen is powered by remix 00:03:59.459 --> 00:04:02.149 align:start position:0% um hydrogen is powered by remix Shopify<00:04:00.060><c> oxygen</c><00:04:00.840><c> is</c><00:04:01.140><c> powered</c><00:04:01.500><c> by</c><00:04:01.680><c> cloudflare</c> 00:04:02.149 --> 00:04:02.159 align:start position:0% Shopify oxygen is powered by cloudflare 00:04:02.159 --> 00:04:05.390 align:start position:0% Shopify oxygen is powered by cloudflare Walkers<00:04:02.819><c> okay</c><00:04:03.120><c> so</c><00:04:03.780><c> cloudflare</c><00:04:04.379><c> has</c><00:04:04.980><c> this</c> 00:04:05.390 --> 00:04:05.400 align:start position:0% Walkers okay so cloudflare has this 00:04:05.400 --> 00:04:08.149 align:start position:0% Walkers okay so cloudflare has this product<00:04:05.580><c> called</c><00:04:06.019><c> cloudflare</c><00:04:07.019><c> platform</c><00:04:07.620><c> so</c><00:04:07.980><c> if</c> 00:04:08.149 --> 00:04:08.159 align:start position:0% product called cloudflare platform so if 00:04:08.159 --> 00:04:10.670 align:start position:0% product called cloudflare platform so if you<00:04:08.280><c> have</c><00:04:08.519><c> a</c><00:04:08.640><c> look</c><00:04:08.819><c> quickly</c><00:04:09.480><c> online</c> 00:04:10.670 --> 00:04:10.680 align:start position:0% you have a look quickly online 00:04:10.680 --> 00:04:13.910 align:start position:0% you have a look quickly online cloudflare 00:04:13.910 --> 00:04:13.920 align:start position:0% 00:04:13.920 --> 00:04:16.430 align:start position:0% a<00:04:14.400><c> cloud</c><00:04:14.580><c> flare</c> 00:04:16.430 --> 00:04:16.440 align:start position:0% a cloud flare 00:04:16.440 --> 00:04:18.110 align:start position:0% a cloud flare platform 00:04:18.110 --> 00:04:18.120 align:start position:0% platform 00:04:18.120 --> 00:04:22.450 align:start position:0% platform okay<00:04:18.660><c> you</c><00:04:19.500><c> see</c><00:04:19.859><c> that</c><00:04:20.160><c> this</c><00:04:20.340><c> is</c><00:04:20.519><c> basically</c><00:04:21.139><c> what</c> 00:04:22.450 --> 00:04:22.460 align:start position:0% okay you see that this is basically what 00:04:22.460 --> 00:04:24.950 align:start position:0% okay you see that this is basically what Shopify<00:04:23.460><c> oops</c> 00:04:24.950 --> 00:04:24.960 align:start position:0% Shopify oops 00:04:24.960 --> 00:04:28.670 align:start position:0% Shopify oops Dot<00:04:25.919><c> copyrify</c><00:04:26.639><c> platforms</c><00:04:27.479><c> workers</c><00:04:28.259><c> and</c><00:04:28.560><c> stuff</c> 00:04:28.670 --> 00:04:28.680 align:start position:0% Dot copyrify platforms workers and stuff 00:04:28.680 --> 00:04:30.350 align:start position:0% Dot copyrify platforms workers and stuff like<00:04:28.800><c> that</c><00:04:28.919><c> like</c><00:04:29.160><c> that</c><00:04:29.340><c> they</c><00:04:29.940><c> have</c><00:04:30.120><c> this</c> 00:04:30.350 --> 00:04:30.360 align:start position:0% like that like that they have this 00:04:30.360 --> 00:04:33.110 align:start position:0% like that like that they have this product<00:04:30.540><c> yeah</c> 00:04:33.110 --> 00:04:33.120 align:start position:0% product yeah 00:04:33.120 --> 00:04:34.550 align:start position:0% product yeah um 00:04:34.550 --> 00:04:34.560 align:start position:0% um 00:04:34.560 --> 00:04:36.830 align:start position:0% um I<00:04:35.400><c> can't</c><00:04:35.520><c> find</c><00:04:35.759><c> it</c><00:04:35.940><c> at</c><00:04:36.060><c> the</c><00:04:36.180><c> moment</c><00:04:36.360><c> but</c><00:04:36.600><c> yeah</c> 00:04:36.830 --> 00:04:36.840 align:start position:0% I can't find it at the moment but yeah 00:04:36.840 --> 00:04:39.530 align:start position:0% I can't find it at the moment but yeah if<00:04:37.320><c> we</c><00:04:37.500><c> type</c><00:04:37.740><c> let's</c><00:04:38.040><c> say</c><00:04:38.280><c> Shopify</c><00:04:38.880><c> how</c><00:04:39.300><c> we</c> 00:04:39.530 --> 00:04:39.540 align:start position:0% if we type let's say Shopify how we 00:04:39.540 --> 00:04:42.530 align:start position:0% if we type let's say Shopify how we build<00:04:39.780><c> how</c><00:04:40.500><c> we</c><00:04:40.680><c> build</c><00:04:40.940><c> now</c><00:04:41.940><c> we'll</c><00:04:42.180><c> add</c><00:04:42.360><c> the</c> 00:04:42.530 --> 00:04:42.540 align:start position:0% build how we build now we'll add the 00:04:42.540 --> 00:04:44.210 align:start position:0% build how we build now we'll add the link<00:04:42.720><c> to</c><00:04:42.960><c> the</c><00:04:43.139><c> in</c><00:04:43.380><c> the</c><00:04:43.560><c> description</c><00:04:43.740><c> how</c><00:04:44.040><c> we</c> 00:04:44.210 --> 00:04:44.220 align:start position:0% link to the in the description how we 00:04:44.220 --> 00:04:45.830 align:start position:0% link to the in the description how we build<00:04:44.400><c> oxygen</c> 00:04:45.830 --> 00:04:45.840 align:start position:0% build oxygen 00:04:45.840 --> 00:04:48.290 align:start position:0% build oxygen Shopify 00:04:48.290 --> 00:04:48.300 align:start position:0% Shopify 00:04:48.300 --> 00:04:49.730 align:start position:0% Shopify okay 00:04:49.730 --> 00:04:49.740 align:start position:0% okay 00:04:49.740 --> 00:04:51.409 align:start position:0% okay [Music] 00:04:51.409 --> 00:04:51.419 align:start position:0% [Music] 00:04:51.419 --> 00:04:54.230 align:start position:0% [Music] I<00:04:51.900><c> will</c><00:04:52.139><c> build</c><00:04:52.259><c> oxygen</c><00:04:52.860><c> we'll</c><00:04:53.220><c> see</c><00:04:53.400><c> I'll</c><00:04:54.000><c> add</c> 00:04:54.230 --> 00:04:54.240 align:start position:0% I will build oxygen we'll see I'll add 00:04:54.240 --> 00:04:56.390 align:start position:0% I will build oxygen we'll see I'll add the<00:04:54.360><c> link</c><00:04:54.540><c> to</c><00:04:54.720><c> this</c><00:04:55.020><c> uh</c><00:04:55.500><c> blog</c><00:04:55.860><c> post</c><00:04:55.979><c> in</c><00:04:56.280><c> the</c> 00:04:56.390 --> 00:04:56.400 align:start position:0% the link to this uh blog post in the 00:04:56.400 --> 00:04:58.730 align:start position:0% the link to this uh blog post in the description<00:04:56.639><c> but</c><00:04:57.000><c> basically</c><00:04:57.500><c> they</c><00:04:58.500><c> explain</c> 00:04:58.730 --> 00:04:58.740 align:start position:0% description but basically they explain 00:04:58.740 --> 00:05:01.070 align:start position:0% description but basically they explain how<00:04:59.280><c> they</c><00:04:59.460><c> see</c><00:04:59.699><c> they're</c><00:05:00.000><c> using</c><00:05:00.360><c> cloudflare</c> 00:05:01.070 --> 00:05:01.080 align:start position:0% how they see they're using cloudflare 00:05:01.080 --> 00:05:03.710 align:start position:0% how they see they're using cloudflare underneath<00:05:01.440><c> right</c><00:05:01.740><c> so</c><00:05:02.040><c> oxygen</c><00:05:02.940><c> is</c><00:05:03.300><c> basically</c> 00:05:03.710 --> 00:05:03.720 align:start position:0% underneath right so oxygen is basically 00:05:03.720 --> 00:05:07.249 align:start position:0% underneath right so oxygen is basically Cloud<00:05:04.380><c> flare</c><00:05:04.979><c> with</c><00:05:05.639><c> some</c><00:05:06.419><c> interaction</c><00:05:06.900><c> with</c> 00:05:07.249 --> 00:05:07.259 align:start position:0% Cloud flare with some interaction with 00:05:07.259 --> 00:05:08.810 align:start position:0% Cloud flare with some interaction with some<00:05:07.500><c> integration</c><00:05:07.979><c> to</c><00:05:08.220><c> the</c><00:05:08.400><c> Shopify</c> 00:05:08.810 --> 00:05:08.820 align:start position:0% some integration to the Shopify 00:05:08.820 --> 00:05:11.210 align:start position:0% some integration to the Shopify ecosystem<00:05:09.360><c> so</c> 00:05:11.210 --> 00:05:11.220 align:start position:0% ecosystem so 00:05:11.220 --> 00:05:12.230 align:start position:0% ecosystem so um 00:05:12.230 --> 00:05:12.240 align:start position:0% um 00:05:12.240 --> 00:05:14.510 align:start position:0% um let's<00:05:12.900><c> say</c><00:05:13.020><c> for</c><00:05:13.320><c> example</c><00:05:13.560><c> you</c><00:05:13.740><c> see</c><00:05:14.160><c> here</c><00:05:14.340><c> you</c> 00:05:14.510 --> 00:05:14.520 align:start position:0% let's say for example you see here you 00:05:14.520 --> 00:05:16.430 align:start position:0% let's say for example you see here you have<00:05:14.699><c> the</c><00:05:14.880><c> storefront</c><00:05:15.360><c> Walkers</c><00:05:15.900><c> and</c><00:05:16.259><c> then</c> 00:05:16.430 --> 00:05:16.440 align:start position:0% have the storefront Walkers and then 00:05:16.440 --> 00:05:19.629 align:start position:0% have the storefront Walkers and then every<00:05:17.220><c> time</c><00:05:17.520><c> a</c> 00:05:19.629 --> 00:05:19.639 align:start position:0% every time a 00:05:19.639 --> 00:05:23.390 align:start position:0% every time a user<00:05:20.639><c> or</c><00:05:20.820><c> shopper</c><00:05:21.300><c> visits</c><00:05:21.960><c> your</c><00:05:22.020><c> store</c><00:05:22.400><c> a</c> 00:05:23.390 --> 00:05:23.400 align:start position:0% user or shopper visits your store a 00:05:23.400 --> 00:05:26.689 align:start position:0% user or shopper visits your store a cloud<00:05:24.360><c> flare</c><00:05:24.840><c> Walker</c><00:05:25.380><c> is</c><00:05:25.620><c> around</c><00:05:25.800><c> okay</c><00:05:26.340><c> and</c> 00:05:26.689 --> 00:05:26.699 align:start position:0% cloud flare Walker is around okay and 00:05:26.699 --> 00:05:28.310 align:start position:0% cloud flare Walker is around okay and that<00:05:26.880><c> cloudflare</c><00:05:27.419><c> walk</c><00:05:27.600><c> is</c><00:05:27.900><c> deeply</c> 00:05:28.310 --> 00:05:28.320 align:start position:0% that cloudflare walk is deeply 00:05:28.320 --> 00:05:31.490 align:start position:0% that cloudflare walk is deeply integrated<00:05:28.740><c> with</c><00:05:29.220><c> the</c><00:05:29.400><c> Shopify</c><00:05:29.759><c> ecosystem</c><00:05:30.500><c> as</c> 00:05:31.490 --> 00:05:31.500 align:start position:0% integrated with the Shopify ecosystem as 00:05:31.500 --> 00:05:34.249 align:start position:0% integrated with the Shopify ecosystem as you<00:05:31.620><c> can</c><00:05:31.800><c> see</c><00:05:31.979><c> here</c><00:05:32.400><c> right</c><00:05:32.940><c> you</c><00:05:33.660><c> can</c><00:05:33.780><c> see</c><00:05:34.020><c> here</c> 00:05:34.249 --> 00:05:34.259 align:start position:0% you can see here right you can see here 00:05:34.259 --> 00:05:35.930 align:start position:0% you can see here right you can see here that<00:05:34.560><c> the</c><00:05:34.680><c> simple</c><00:05:34.919><c> integrated</c><00:05:35.400><c> with</c><00:05:35.580><c> Shopify</c> 00:05:35.930 --> 00:05:35.940 align:start position:0% that the simple integrated with Shopify 00:05:35.940 --> 00:05:38.270 align:start position:0% that the simple integrated with Shopify that's<00:05:36.360><c> why</c><00:05:36.600><c> yeah</c><00:05:37.020><c> if</c><00:05:37.740><c> you're</c><00:05:37.860><c> if</c><00:05:38.100><c> you're</c> 00:05:38.270 --> 00:05:38.280 align:start position:0% that's why yeah if you're if you're 00:05:38.280 --> 00:05:40.370 align:start position:0% that's why yeah if you're if you're using<00:05:38.580><c> oxygen</c><00:05:39.539><c> you</c><00:05:39.840><c> get</c><00:05:39.960><c> things</c><00:05:40.199><c> like</c> 00:05:40.370 --> 00:05:40.380 align:start position:0% using oxygen you get things like 00:05:40.380 --> 00:05:42.290 align:start position:0% using oxygen you get things like analytics<00:05:41.039><c> out</c><00:05:41.340><c> of</c><00:05:41.460><c> the</c><00:05:41.520><c> box</c><00:05:41.699><c> without</c><00:05:42.000><c> having</c> 00:05:42.290 --> 00:05:42.300 align:start position:0% analytics out of the box without having 00:05:42.300 --> 00:05:43.670 align:start position:0% analytics out of the box without having to<00:05:42.479><c> do</c><00:05:42.600><c> them</c><00:05:42.780><c> yourself</c><00:05:42.960><c> and</c><00:05:43.320><c> a</c><00:05:43.440><c> few</c><00:05:43.560><c> other</c> 00:05:43.670 --> 00:05:43.680 align:start position:0% to do them yourself and a few other 00:05:43.680 --> 00:05:46.210 align:start position:0% to do them yourself and a few other things<00:05:43.979><c> that</c><00:05:44.580><c> you</c><00:05:44.759><c> have</c><00:05:44.940><c> to</c><00:05:45.120><c> do</c><00:05:45.300><c> yourself</c> 00:05:46.210 --> 00:05:46.220 align:start position:0% things that you have to do yourself 00:05:46.220 --> 00:05:49.070 align:start position:0% things that you have to do yourself obviously<00:05:47.220><c> it's</c><00:05:47.340><c> not</c><00:05:47.520><c> impossible</c><00:05:48.060><c> but</c><00:05:48.780><c> it</c> 00:05:49.070 --> 00:05:49.080 align:start position:0% obviously it's not impossible but it 00:05:49.080 --> 00:05:51.650 align:start position:0% obviously it's not impossible but it yeah<00:05:49.380><c> if</c><00:05:49.979><c> you're</c><00:05:50.639><c> using</c><00:05:50.759><c> oxygen</c><00:05:51.240><c> you</c><00:05:51.419><c> get</c><00:05:51.539><c> a</c> 00:05:51.650 --> 00:05:51.660 align:start position:0% yeah if you're using oxygen you get a 00:05:51.660 --> 00:05:55.129 align:start position:0% yeah if you're using oxygen you get a lot<00:05:51.780><c> of</c><00:05:51.900><c> things</c><00:05:52.080><c> out</c><00:05:52.380><c> of</c><00:05:52.680><c> the</c><00:05:52.919><c> box</c><00:05:53.039><c> for</c><00:05:53.759><c> free</c> 00:05:55.129 --> 00:05:55.139 align:start position:0% lot of things out of the box for free 00:05:55.139 --> 00:05:57.890 align:start position:0% lot of things out of the box for free um so<00:05:55.919><c> yeah</c><00:05:56.160><c> highly</c><00:05:56.639><c> recommend</c><00:05:57.000><c> it</c><00:05:57.180><c> if</c><00:05:57.600><c> you</c><00:05:57.720><c> if</c> 00:05:57.890 --> 00:05:57.900 align:start position:0% um so yeah highly recommend it if you if 00:05:57.900 --> 00:06:00.050 align:start position:0% um so yeah highly recommend it if you if you<00:05:58.139><c> if</c><00:05:58.320><c> you</c><00:05:58.560><c> are</c><00:05:58.740><c> a</c> 00:06:00.050 --> 00:06:00.060 align:start position:0% you if you are a 00:06:00.060 --> 00:06:01.969 align:start position:0% you if you are a store<00:06:00.660><c> owner</c><00:06:01.080><c> and</c><00:06:01.199><c> they</c><00:06:01.320><c> don't</c><00:06:01.500><c> have</c><00:06:01.620><c> a</c><00:06:01.800><c> lot</c><00:06:01.860><c> of</c> 00:06:01.969 --> 00:06:01.979 align:start position:0% store owner and they don't have a lot of 00:06:01.979 --> 00:06:03.890 align:start position:0% store owner and they don't have a lot of Dev<00:06:02.220><c> resources</c><00:06:02.820><c> to</c><00:06:03.060><c> do</c><00:06:03.240><c> some</c><00:06:03.419><c> of</c><00:06:03.539><c> these</c><00:06:03.720><c> things</c> 00:06:03.890 --> 00:06:03.900 align:start position:0% Dev resources to do some of these things 00:06:03.900 --> 00:06:05.450 align:start position:0% Dev resources to do some of these things yourself<00:06:04.139><c> obviously</c><00:06:04.800><c> if</c><00:06:04.979><c> you're</c><00:06:05.100><c> doing</c><00:06:05.280><c> them</c> 00:06:05.450 --> 00:06:05.460 align:start position:0% yourself obviously if you're doing them 00:06:05.460 --> 00:06:07.010 align:start position:0% yourself obviously if you're doing them yourself<00:06:05.639><c> you</c><00:06:06.000><c> have</c><00:06:06.120><c> a</c><00:06:06.240><c> lot</c><00:06:06.300><c> more</c><00:06:06.479><c> flexibility</c> 00:06:07.010 --> 00:06:07.020 align:start position:0% yourself you have a lot more flexibility 00:06:07.020 --> 00:06:10.550 align:start position:0% yourself you have a lot more flexibility and<00:06:07.860><c> you</c><00:06:08.039><c> can</c><00:06:08.160><c> choose</c><00:06:08.520><c> and</c><00:06:09.259><c> you</c><00:06:10.259><c> know</c><00:06:10.380><c> the</c> 00:06:10.550 --> 00:06:10.560 align:start position:0% and you can choose and you know the 00:06:10.560 --> 00:06:13.390 align:start position:0% and you can choose and you know the technology<00:06:10.919><c> stack</c> 00:06:13.390 --> 00:06:13.400 align:start position:0% technology stack 00:06:13.400 --> 00:06:16.129 align:start position:0% technology stack the<00:06:14.400><c> way</c><00:06:14.520><c> that</c><00:06:14.699><c> suits</c><00:06:15.060><c> you</c><00:06:15.180><c> best</c><00:06:15.419><c> but</c><00:06:15.780><c> yeah</c><00:06:15.960><c> if</c> 00:06:16.129 --> 00:06:16.139 align:start position:0% the way that suits you best but yeah if 00:06:16.139 --> 00:06:18.409 align:start position:0% the way that suits you best but yeah if you<00:06:16.259><c> don't</c><00:06:16.440><c> have</c><00:06:16.680><c> those</c><00:06:16.979><c> resources</c><00:06:17.759><c> obviously</c> 00:06:18.409 --> 00:06:18.419 align:start position:0% you don't have those resources obviously 00:06:18.419 --> 00:06:21.170 align:start position:0% you don't have those resources obviously you<00:06:18.840><c> want</c><00:06:18.960><c> to</c><00:06:19.080><c> use</c><00:06:19.199><c> oxygen</c><00:06:19.800><c> and</c><00:06:20.400><c> hydrogen</c><00:06:20.940><c> to</c> 00:06:21.170 --> 00:06:21.180 align:start position:0% you want to use oxygen and hydrogen to 00:06:21.180 --> 00:06:23.090 align:start position:0% you want to use oxygen and hydrogen to power<00:06:21.419><c> your</c><00:06:21.660><c> custom</c><00:06:21.840><c> stuff</c><00:06:22.199><c> and</c><00:06:22.500><c> so</c><00:06:22.740><c> going</c> 00:06:23.090 --> 00:06:23.100 align:start position:0% power your custom stuff and so going 00:06:23.100 --> 00:06:26.270 align:start position:0% power your custom stuff and so going back<00:06:23.340><c> to</c><00:06:23.580><c> this</c><00:06:23.940><c> the</c><00:06:24.840><c> next</c><00:06:25.020><c> file</c><00:06:25.440><c> here</c> 00:06:26.270 --> 00:06:26.280 align:start position:0% back to this the next file here 00:06:26.280 --> 00:06:28.430 align:start position:0% back to this the next file here obviously<00:06:26.819><c> is</c><00:06:26.940><c> Darwin</c><00:06:27.419><c> CSS</c><00:06:27.900><c> I</c><00:06:28.139><c> want</c><00:06:28.319><c> to</c> 00:06:28.430 --> 00:06:28.440 align:start position:0% obviously is Darwin CSS I want to 00:06:28.440 --> 00:06:30.290 align:start position:0% obviously is Darwin CSS I want to drilled<00:06:28.740><c> too</c><00:06:29.039><c> much</c><00:06:29.160><c> into</c><00:06:29.280><c> this</c><00:06:29.580><c> but</c><00:06:29.819><c> basically</c> 00:06:30.290 --> 00:06:30.300 align:start position:0% drilled too much into this but basically 00:06:30.300 --> 00:06:32.870 align:start position:0% drilled too much into this but basically uh<00:06:30.960><c> yeah</c><00:06:31.080><c> Darwin</c><00:06:31.680><c> is</c><00:06:31.860><c> a</c><00:06:32.039><c> very</c><00:06:32.160><c> popular</c><00:06:32.340><c> way</c><00:06:32.699><c> of</c> 00:06:32.870 --> 00:06:32.880 align:start position:0% uh yeah Darwin is a very popular way of 00:06:32.880 --> 00:06:34.550 align:start position:0% uh yeah Darwin is a very popular way of styling 00:06:34.550 --> 00:06:34.560 align:start position:0% styling 00:06:34.560 --> 00:06:37.730 align:start position:0% styling um<00:06:34.620><c> web</c><00:06:35.460><c> apps</c><00:06:35.759><c> webs</c><00:06:36.120><c> websites</c><00:06:36.600><c> nowadays</c><00:06:37.560><c> and</c> 00:06:37.730 --> 00:06:37.740 align:start position:0% um web apps webs websites nowadays and 00:06:37.740 --> 00:06:39.770 align:start position:0% um web apps webs websites nowadays and this<00:06:38.280><c> is</c><00:06:38.340><c> the</c><00:06:38.520><c> the</c><00:06:38.819><c> configuration</c><00:06:39.300><c> file</c><00:06:39.600><c> for</c> 00:06:39.770 --> 00:06:39.780 align:start position:0% this is the the configuration file for 00:06:39.780 --> 00:06:42.529 align:start position:0% this is the the configuration file for Darwin<00:06:40.259><c> so</c><00:06:40.740><c> now</c><00:06:40.979><c> next</c><00:06:41.280><c> up</c><00:06:41.460><c> is</c><00:06:41.819><c> this</c><00:06:42.060><c> file</c><00:06:42.300><c> here</c> 00:06:42.529 --> 00:06:42.539 align:start position:0% Darwin so now next up is this file here 00:06:42.539 --> 00:06:44.689 align:start position:0% Darwin so now next up is this file here let<00:06:42.780><c> me</c><00:06:42.960><c> collapse</c><00:06:43.500><c> this</c><00:06:43.620><c> a</c><00:06:43.800><c> little</c><00:06:43.800><c> bit</c><00:06:43.979><c> the</c> 00:06:44.689 --> 00:06:44.699 align:start position:0% let me collapse this a little bit the 00:06:44.699 --> 00:06:46.430 align:start position:0% let me collapse this a little bit the next<00:06:44.819><c> stop</c><00:06:45.000><c> is</c><00:06:45.240><c> this</c><00:06:45.479><c> far</c><00:06:45.660><c> here</c><00:06:45.900><c> we</c><00:06:46.139><c> have</c><00:06:46.259><c> the</c> 00:06:46.430 --> 00:06:46.440 align:start position:0% next stop is this far here we have the 00:06:46.440 --> 00:06:49.010 align:start position:0% next stop is this far here we have the storefront<00:06:46.979><c> API</c><00:06:47.340><c> this</c><00:06:47.699><c> is</c><00:06:48.020><c> automatically</c> 00:06:49.010 --> 00:06:49.020 align:start position:0% storefront API this is automatically 00:06:49.020 --> 00:06:52.309 align:start position:0% storefront API this is automatically generated<00:06:49.819><c> file</c><00:06:50.819><c> and</c><00:06:51.479><c> this</c><00:06:51.660><c> is</c><00:06:51.780><c> a</c><00:06:51.960><c> very</c><00:06:52.080><c> very</c> 00:06:52.309 --> 00:06:52.319 align:start position:0% generated file and this is a very very 00:06:52.319 --> 00:06:54.469 align:start position:0% generated file and this is a very very interesting<00:06:52.800><c> file</c><00:06:53.220><c> and</c><00:06:53.520><c> reason</c><00:06:53.759><c> is</c><00:06:54.120><c> is</c> 00:06:54.469 --> 00:06:54.479 align:start position:0% interesting file and reason is is 00:06:54.479 --> 00:06:57.830 align:start position:0% interesting file and reason is is basically<00:06:55.199><c> adding</c><00:06:56.160><c> a</c><00:06:56.280><c> lot</c><00:06:56.400><c> a</c><00:06:56.639><c> lot</c><00:06:56.759><c> of</c><00:06:56.880><c> types</c><00:06:57.300><c> to</c> 00:06:57.830 --> 00:06:57.840 align:start position:0% basically adding a lot a lot of types to 00:06:57.840 --> 00:06:59.050 align:start position:0% basically adding a lot a lot of types to your<00:06:58.139><c> own</c> 00:06:59.050 --> 00:06:59.060 align:start position:0% your own 00:06:59.060 --> 00:07:00.710 align:start position:0% your own typescript 00:07:00.710 --> 00:07:00.720 align:start position:0% typescript 00:07:00.720 --> 00:07:02.290 align:start position:0% typescript um 00:07:02.290 --> 00:07:02.300 align:start position:0% um 00:07:02.300 --> 00:07:05.450 align:start position:0% um environment<00:07:03.300><c> and</c><00:07:04.199><c> which</c><00:07:04.620><c> which</c><00:07:04.860><c> you</c><00:07:05.160><c> wouldn't</c> 00:07:05.450 --> 00:07:05.460 align:start position:0% environment and which which you wouldn't 00:07:05.460 --> 00:07:07.370 align:start position:0% environment and which which you wouldn't have<00:07:05.699><c> to</c><00:07:05.819><c> do</c><00:07:06.000><c> yourself</c><00:07:06.180><c> so</c><00:07:06.660><c> if</c><00:07:06.720><c> you</c><00:07:06.960><c> search</c><00:07:07.139><c> for</c> 00:07:07.370 --> 00:07:07.380 align:start position:0% have to do yourself so if you search for 00:07:07.380 --> 00:07:09.950 align:start position:0% have to do yourself so if you search for example<00:07:07.680><c> product</c><00:07:08.100><c> okay</c><00:07:08.639><c> oops</c><00:07:09.600><c> sort</c><00:07:09.720><c> of</c><00:07:09.780><c> right</c> 00:07:09.950 --> 00:07:09.960 align:start position:0% example product okay oops sort of right 00:07:09.960 --> 00:07:10.969 align:start position:0% example product okay oops sort of right on 00:07:10.969 --> 00:07:10.979 align:start position:0% on 00:07:10.979 --> 00:07:13.129 align:start position:0% on and<00:07:11.580><c> one</c><00:07:12.060><c> of</c><00:07:12.240><c> that</c><00:07:12.360><c> so</c><00:07:12.479><c> if</c><00:07:12.660><c> you</c><00:07:12.780><c> search</c><00:07:12.960><c> for</c> 00:07:13.129 --> 00:07:13.139 align:start position:0% and one of that so if you search for 00:07:13.139 --> 00:07:17.270 align:start position:0% and one of that so if you search for product<00:07:13.380><c> for</c><00:07:13.800><c> example</c><00:07:14.120><c> we</c><00:07:15.120><c> do</c><00:07:15.300><c> like</c><00:07:15.539><c> this</c><00:07:15.840><c> okay</c> 00:07:17.270 --> 00:07:17.280 align:start position:0% product for example we do like this okay 00:07:17.280 --> 00:07:18.890 align:start position:0% product for example we do like this okay all<00:07:17.940><c> right</c> 00:07:18.890 --> 00:07:18.900 align:start position:0% all right 00:07:18.900 --> 00:07:20.689 align:start position:0% all right so 00:07:20.689 --> 00:07:20.699 align:start position:0% so 00:07:20.699 --> 00:07:23.930 align:start position:0% so um you<00:07:21.240><c> can</c><00:07:21.419><c> see</c><00:07:21.660><c> that</c><00:07:22.560><c> for</c><00:07:23.099><c> example</c><00:07:23.340><c> here</c><00:07:23.639><c> you</c> 00:07:23.930 --> 00:07:23.940 align:start position:0% um you can see that for example here you 00:07:23.940 --> 00:07:26.390 align:start position:0% um you can see that for example here you have<00:07:24.180><c> predictive</c><00:07:24.720><c> product</c><00:07:25.139><c> frontman</c><00:07:25.740><c> or</c><00:07:26.039><c> all</c> 00:07:26.390 --> 00:07:26.400 align:start position:0% have predictive product frontman or all 00:07:26.400 --> 00:07:29.089 align:start position:0% have predictive product frontman or all of<00:07:26.520><c> these</c><00:07:26.759><c> types</c><00:07:27.240><c> are</c><00:07:28.199><c> there's</c><00:07:28.740><c> a</c><00:07:28.979><c> deep</c> 00:07:29.089 --> 00:07:29.099 align:start position:0% of these types are there's a deep 00:07:29.099 --> 00:07:31.249 align:start position:0% of these types are there's a deep integration<00:07:29.699><c> with</c><00:07:30.000><c> the</c><00:07:30.120><c> storefront</c><00:07:30.660><c> API</c><00:07:31.020><c> as</c> 00:07:31.249 --> 00:07:31.259 align:start position:0% integration with the storefront API as 00:07:31.259 --> 00:07:32.809 align:start position:0% integration with the storefront API as you<00:07:31.380><c> can</c><00:07:31.500><c> see</c><00:07:31.620><c> in</c><00:07:31.740><c> the</c><00:07:31.919><c> store</c><00:07:32.039><c> from</c><00:07:32.220><c> the</c><00:07:32.400><c> API</c><00:07:32.639><c> is</c> 00:07:32.809 --> 00:07:32.819 align:start position:0% you can see in the store from the API is 00:07:32.819 --> 00:07:35.990 align:start position:0% you can see in the store from the API is everywhere<00:07:33.180><c> so</c><00:07:33.680><c> you</c><00:07:34.680><c> don't</c><00:07:34.800><c> have</c><00:07:35.039><c> to</c><00:07:35.340><c> the</c><00:07:35.639><c> nice</c> 00:07:35.990 --> 00:07:36.000 align:start position:0% everywhere so you don't have to the nice 00:07:36.000 --> 00:07:37.309 align:start position:0% everywhere so you don't have to the nice thing<00:07:36.240><c> about</c> 00:07:37.309 --> 00:07:37.319 align:start position:0% thing about 00:07:37.319 --> 00:07:39.770 align:start position:0% thing about um<00:07:37.380><c> using</c><00:07:38.039><c> hydrogen</c><00:07:38.699><c> is</c><00:07:39.180><c> that</c><00:07:39.360><c> you</c><00:07:39.479><c> don't</c><00:07:39.660><c> have</c> 00:07:39.770 --> 00:07:39.780 align:start position:0% um using hydrogen is that you don't have 00:07:39.780 --> 00:07:41.689 align:start position:0% um using hydrogen is that you don't have to<00:07:40.020><c> recreate</c><00:07:40.500><c> all</c><00:07:40.740><c> of</c><00:07:40.860><c> this</c><00:07:40.979><c> so</c><00:07:41.280><c> there's</c><00:07:41.460><c> only</c> 00:07:41.689 --> 00:07:41.699 align:start position:0% to recreate all of this so there's only 00:07:41.699 --> 00:07:44.150 align:start position:0% to recreate all of this so there's only a<00:07:42.000><c> type</c><00:07:42.240><c> into</c><00:07:42.539><c> that</c><00:07:42.960><c> integration</c><00:07:43.440><c> with</c><00:07:43.919><c> the</c> 00:07:44.150 --> 00:07:44.160 align:start position:0% a type into that integration with the 00:07:44.160 --> 00:07:47.390 align:start position:0% a type into that integration with the Shopify<00:07:45.000><c> hydrogen</c><00:07:45.599><c> so</c><00:07:45.840><c> every</c> 00:07:47.390 --> 00:07:47.400 align:start position:0% Shopify hydrogen so every 00:07:47.400 --> 00:07:48.110 align:start position:0% Shopify hydrogen so every um 00:07:48.110 --> 00:07:48.120 align:start position:0% um 00:07:48.120 --> 00:07:51.529 align:start position:0% um every<00:07:48.960><c> end</c><00:07:49.199><c> point</c><00:07:49.500><c> in</c><00:07:50.340><c> the</c><00:07:50.460><c> Shopify</c><00:07:50.819><c> hydrogen</c> 00:07:51.529 --> 00:07:51.539 align:start position:0% every end point in the Shopify hydrogen 00:07:51.539 --> 00:07:54.230 align:start position:0% every end point in the Shopify hydrogen has<00:07:52.500><c> an</c><00:07:52.800><c> equivalent</c><00:07:53.220><c> if</c><00:07:53.460><c> we</c><00:07:53.639><c> go</c><00:07:53.759><c> back</c><00:07:53.880><c> to</c><00:07:54.120><c> the</c> 00:07:54.230 --> 00:07:54.240 align:start position:0% has an equivalent if we go back to the 00:07:54.240 --> 00:07:58.330 align:start position:0% has an equivalent if we go back to the mock<00:07:54.539><c> shop</c><00:07:54.720><c> for</c><00:07:55.259><c> one</c><00:07:55.440><c> moment</c><00:07:55.620><c> here</c><00:07:56.539><c> mock</c><00:07:57.539><c> shop</c> 00:07:58.330 --> 00:07:58.340 align:start position:0% mock shop for one moment here mock shop 00:07:58.340 --> 00:08:01.370 align:start position:0% mock shop for one moment here mock shop mark.shop<00:07:59.340><c> yeah</c><00:08:00.000><c> you</c><00:08:00.300><c> see</c><00:08:00.479><c> here</c><00:08:00.720><c> that</c><00:08:01.020><c> this</c><00:08:01.259><c> is</c> 00:08:01.370 --> 00:08:01.380 align:start position:0% mark.shop yeah you see here that this is 00:08:01.380 --> 00:08:03.650 align:start position:0% mark.shop yeah you see here that this is an<00:08:01.500><c> endpoint</c><00:08:01.919><c> that's</c><00:08:02.460><c> returning</c><00:08:03.000><c> products</c> 00:08:03.650 --> 00:08:03.660 align:start position:0% an endpoint that's returning products 00:08:03.660 --> 00:08:06.290 align:start position:0% an endpoint that's returning products right<00:08:03.900><c> and</c><00:08:04.740><c> once</c><00:08:04.979><c> you</c><00:08:05.099><c> do</c><00:08:05.280><c> this</c><00:08:05.460><c> query</c><00:08:05.819><c> right</c> 00:08:06.290 --> 00:08:06.300 align:start position:0% right and once you do this query right 00:08:06.300 --> 00:08:08.210 align:start position:0% right and once you do this query right you<00:08:06.599><c> need</c><00:08:06.720><c> to</c><00:08:06.840><c> have</c><00:08:07.080><c> it</c><00:08:07.319><c> tagged</c><00:08:07.740><c> you</c><00:08:07.979><c> need</c><00:08:08.099><c> to</c> 00:08:08.210 --> 00:08:08.220 align:start position:0% you need to have it tagged you need to 00:08:08.220 --> 00:08:11.029 align:start position:0% you need to have it tagged you need to have<00:08:08.520><c> the</c><00:08:08.880><c> the</c><00:08:09.060><c> data</c><00:08:09.780><c> that</c><00:08:10.380><c> are</c><00:08:10.500><c> returned</c><00:08:10.860><c> by</c> 00:08:11.029 --> 00:08:11.039 align:start position:0% have the the data that are returned by 00:08:11.039 --> 00:08:12.070 align:start position:0% have the the data that are returned by the<00:08:11.220><c> query</c> 00:08:12.070 --> 00:08:12.080 align:start position:0% the query 00:08:12.080 --> 00:08:15.890 align:start position:0% the query typed<00:08:13.460><c> for</c><00:08:14.460><c> more</c><00:08:14.639><c> for</c><00:08:15.060><c> a</c><00:08:15.300><c> better</c><00:08:15.419><c> developer</c> 00:08:15.890 --> 00:08:15.900 align:start position:0% typed for more for a better developer 00:08:15.900 --> 00:08:18.350 align:start position:0% typed for more for a better developer experience<00:08:16.199><c> and</c><00:08:16.380><c> to</c><00:08:16.560><c> be</c><00:08:16.680><c> able</c><00:08:16.800><c> to</c><00:08:16.919><c> catch</c><00:08:17.340><c> box</c><00:08:17.520><c> a</c> 00:08:18.350 --> 00:08:18.360 align:start position:0% experience and to be able to catch box a 00:08:18.360 --> 00:08:20.150 align:start position:0% experience and to be able to catch box a lot<00:08:18.419><c> easier</c><00:08:18.840><c> right</c><00:08:19.139><c> so</c><00:08:19.440><c> this</c><00:08:19.620><c> is</c><00:08:19.740><c> for</c><00:08:19.979><c> example</c> 00:08:20.150 --> 00:08:20.160 align:start position:0% lot easier right so this is for example 00:08:20.160 --> 00:08:22.670 align:start position:0% lot easier right so this is for example a<00:08:20.400><c> Json</c><00:08:20.699><c> here</c><00:08:21.000><c> which</c><00:08:21.360><c> has</c><00:08:21.539><c> a</c> 00:08:22.670 --> 00:08:22.680 align:start position:0% a Json here which has a 00:08:22.680 --> 00:08:24.950 align:start position:0% a Json here which has a and<00:08:23.280><c> the</c><00:08:23.520><c> payload</c><00:08:23.879><c> here</c><00:08:24.180><c> you</c><00:08:24.419><c> see</c><00:08:24.599><c> you</c><00:08:24.780><c> have</c> 00:08:24.950 --> 00:08:24.960 align:start position:0% and the payload here you see you have 00:08:24.960 --> 00:08:27.770 align:start position:0% and the payload here you see you have the<00:08:25.139><c> title</c><00:08:25.560><c> the</c><00:08:25.740><c> description</c><00:08:26.160><c> and</c><00:08:26.580><c> so</c><00:08:26.759><c> on</c><00:08:26.940><c> you</c> 00:08:27.770 --> 00:08:27.780 align:start position:0% the title the description and so on you 00:08:27.780 --> 00:08:31.129 align:start position:0% the title the description and so on you don't<00:08:27.900><c> want</c><00:08:28.340><c> those</c><00:08:29.340><c> uh</c><00:08:29.879><c> API</c><00:08:30.300><c> points</c><00:08:30.780><c> to</c><00:08:30.900><c> return</c> 00:08:31.129 --> 00:08:31.139 align:start position:0% don't want those uh API points to return 00:08:31.139 --> 00:08:34.730 align:start position:0% don't want those uh API points to return on<00:08:31.560><c> type</c><00:08:31.860><c> data</c><00:08:32.419><c> so</c><00:08:33.419><c> yeah</c><00:08:33.779><c> using</c><00:08:34.560><c> this</c> 00:08:34.730 --> 00:08:34.740 align:start position:0% on type data so yeah using this 00:08:34.740 --> 00:08:37.010 align:start position:0% on type data so yeah using this obviously<00:08:35.159><c> if</c><00:08:35.399><c> you're</c><00:08:35.520><c> using</c><00:08:35.760><c> any</c><00:08:36.060><c> of</c><00:08:36.300><c> the</c> 00:08:37.010 --> 00:08:37.020 align:start position:0% obviously if you're using any of the 00:08:37.020 --> 00:08:40.670 align:start position:0% obviously if you're using any of the um<00:08:37.039><c> react</c><00:08:38.039><c> framework</c><00:08:38.520><c> or</c><00:08:39.000><c> any</c><00:08:39.240><c> other</c><00:08:39.479><c> like</c><00:08:40.260><c> web</c> 00:08:40.670 --> 00:08:40.680 align:start position:0% um react framework or any other like web 00:08:40.680 --> 00:08:42.649 align:start position:0% um react framework or any other like web framework<00:08:41.159><c> you</c><00:08:41.459><c> can</c><00:08:41.760><c> you</c><00:08:41.940><c> can</c><00:08:42.060><c> just</c><00:08:42.180><c> copy</c><00:08:42.599><c> it</c> 00:08:42.649 --> 00:08:42.659 align:start position:0% framework you can you can just copy it 00:08:42.659 --> 00:08:45.910 align:start position:0% framework you can you can just copy it paste<00:08:43.200><c> this</c><00:08:43.320><c> and</c><00:08:43.979><c> I</c><00:08:44.159><c> think</c><00:08:44.279><c> it</c><00:08:44.399><c> should</c><00:08:44.580><c> work</c> 00:08:45.910 --> 00:08:45.920 align:start position:0% paste this and I think it should work 00:08:45.920 --> 00:08:49.070 align:start position:0% paste this and I think it should work it<00:08:46.920><c> will</c><00:08:47.040><c> work</c><00:08:47.279><c> definitely</c><00:08:47.880><c> but</c><00:08:48.600><c> yeah</c><00:08:48.779><c> here</c> 00:08:49.070 --> 00:08:49.080 align:start position:0% it will work definitely but yeah here 00:08:49.080 --> 00:08:52.370 align:start position:0% it will work definitely but yeah here you<00:08:49.260><c> have</c><00:08:49.440><c> it</c><00:08:49.560><c> for</c><00:08:49.740><c> free</c><00:08:50.360><c> from</c><00:08:51.360><c> from</c><00:08:51.600><c> Shopify</c> 00:08:52.370 --> 00:08:52.380 align:start position:0% you have it for free from from Shopify 00:08:52.380 --> 00:08:57.050 align:start position:0% you have it for free from from Shopify CLI<00:08:53.040><c> so</c><00:08:53.519><c> highly</c><00:08:53.940><c> recommend</c><00:08:54.800><c> Shopify</c><00:08:56.060><c> hydrogen</c> 00:08:57.050 --> 00:08:57.060 align:start position:0% CLI so highly recommend Shopify hydrogen 00:08:57.060 --> 00:09:01.070 align:start position:0% CLI so highly recommend Shopify hydrogen we<00:08:57.540><c> have</c><00:08:57.779><c> building</c><00:08:58.339><c> star</c><00:08:59.339><c> fronts</c><00:08:59.760><c> so</c><00:09:00.300><c> now</c><00:09:00.480><c> this</c> 00:09:01.070 --> 00:09:01.080 align:start position:0% we have building star fronts so now this 00:09:01.080 --> 00:09:03.290 align:start position:0% we have building star fronts so now this one<00:09:01.200><c> is</c><00:09:01.440><c> a</c><00:09:01.620><c> very</c><00:09:01.800><c> important</c><00:09:02.220><c> one</c><00:09:02.459><c> here</c><00:09:02.940><c> the</c> 00:09:03.290 --> 00:09:03.300 align:start position:0% one is a very important one here the 00:09:03.300 --> 00:09:06.050 align:start position:0% one is a very important one here the server.ts<00:09:04.200><c> basically</c><00:09:05.160><c> um</c><00:09:05.220><c> to</c><00:09:05.519><c> have</c><00:09:05.640><c> to</c><00:09:05.820><c> to</c> 00:09:06.050 --> 00:09:06.060 align:start position:0% server.ts basically um to have to to 00:09:06.060 --> 00:09:07.430 align:start position:0% server.ts basically um to have to to analyze<00:09:06.480><c> it</c><00:09:06.540><c> we're</c><00:09:06.720><c> going</c><00:09:06.899><c> to</c><00:09:06.959><c> have</c><00:09:07.019><c> a</c><00:09:07.140><c> look</c><00:09:07.260><c> at</c> 00:09:07.430 --> 00:09:07.440 align:start position:0% analyze it we're going to have a look at 00:09:07.440 --> 00:09:10.730 align:start position:0% analyze it we're going to have a look at at<00:09:08.100><c> it</c><00:09:08.399><c> quickly</c><00:09:09.180><c> at</c><00:09:09.300><c> a</c><00:09:09.540><c> glance</c><00:09:09.720><c> and</c><00:09:10.019><c> then</c><00:09:10.200><c> top</c> 00:09:10.730 --> 00:09:10.740 align:start position:0% at it quickly at a glance and then top 00:09:10.740 --> 00:09:14.810 align:start position:0% at it quickly at a glance and then top the<00:09:11.040><c> bottom</c><00:09:11.459><c> bottom</c><00:09:11.820><c> up</c><00:09:11.940><c> okay</c><00:09:12.500><c> so</c><00:09:13.500><c> here</c><00:09:14.100><c> we</c> 00:09:14.810 --> 00:09:14.820 align:start position:0% the bottom bottom up okay so here we 00:09:14.820 --> 00:09:15.829 align:start position:0% the bottom bottom up okay so here we have 00:09:15.829 --> 00:09:15.839 align:start position:0% have 00:09:15.839 --> 00:09:19.670 align:start position:0% have this<00:09:16.680><c> file</c><00:09:17.060><c> we</c><00:09:18.060><c> have</c><00:09:18.240><c> first</c><00:09:18.720><c> of</c><00:09:18.899><c> all</c><00:09:19.019><c> all</c><00:09:19.500><c> the</c> 00:09:19.670 --> 00:09:19.680 align:start position:0% this file we have first of all all the 00:09:19.680 --> 00:09:21.650 align:start position:0% this file we have first of all all the Imports<00:09:20.160><c> here</c><00:09:20.399><c> obviously</c><00:09:20.940><c> let</c><00:09:21.120><c> me</c><00:09:21.300><c> collect</c> 00:09:21.650 --> 00:09:21.660 align:start position:0% Imports here obviously let me collect 00:09:21.660 --> 00:09:24.110 align:start position:0% Imports here obviously let me collect that<00:09:21.839><c> for</c><00:09:22.019><c> now</c><00:09:22.200><c> but</c><00:09:22.680><c> here</c><00:09:22.920><c> you</c><00:09:23.160><c> have</c> 00:09:24.110 --> 00:09:24.120 align:start position:0% that for now but here you have 00:09:24.120 --> 00:09:28.370 align:start position:0% that for now but here you have um<00:09:24.440><c> this</c><00:09:25.440><c> file</c><00:09:26.040><c> first</c><00:09:26.279><c> of</c><00:09:26.459><c> all</c><00:09:26.779><c> is</c><00:09:27.779><c> the</c> 00:09:28.370 --> 00:09:28.380 align:start position:0% um this file first of all is the 00:09:28.380 --> 00:09:30.530 align:start position:0% um this file first of all is the development<00:09:28.860><c> and</c><00:09:29.519><c> the</c><00:09:29.640><c> production</c><00:09:30.000><c> server</c> 00:09:30.530 --> 00:09:30.540 align:start position:0% development and the production server 00:09:30.540 --> 00:09:32.810 align:start position:0% development and the production server okay<00:09:30.959><c> so</c><00:09:31.320><c> when</c><00:09:31.620><c> you</c><00:09:31.800><c> run</c> 00:09:32.810 --> 00:09:32.820 align:start position:0% okay so when you run 00:09:32.820 --> 00:09:33.430 align:start position:0% okay so when you run um 00:09:33.430 --> 00:09:33.440 align:start position:0% um 00:09:33.440 --> 00:09:36.889 align:start position:0% um npm<00:09:34.440><c> run</c><00:09:35.040><c> Dev</c><00:09:35.339><c> as</c><00:09:35.700><c> we</c><00:09:35.820><c> did</c><00:09:36.000><c> to</c><00:09:36.240><c> launch</c><00:09:36.420><c> this</c><00:09:36.660><c> app</c> 00:09:36.889 --> 00:09:36.899 align:start position:0% npm run Dev as we did to launch this app 00:09:36.899 --> 00:09:39.410 align:start position:0% npm run Dev as we did to launch this app this<00:09:37.560><c> is</c><00:09:37.680><c> the</c><00:09:37.920><c> server</c><00:09:38.279><c> that</c><00:09:38.700><c> is</c><00:09:38.880><c> powering</c><00:09:39.300><c> the</c> 00:09:39.410 --> 00:09:39.420 align:start position:0% this is the server that is powering the 00:09:39.420 --> 00:09:41.930 align:start position:0% this is the server that is powering the app<00:09:39.600><c> okay</c><00:09:39.899><c> and</c><00:09:40.800><c> it's</c><00:09:40.980><c> like</c><00:09:41.279><c> I</c><00:09:41.459><c> said</c><00:09:41.580><c> earlier</c> 00:09:41.930 --> 00:09:41.940 align:start position:0% app okay and it's like I said earlier 00:09:41.940 --> 00:09:43.070 align:start position:0% app okay and it's like I said earlier Cloud 00:09:43.070 --> 00:09:43.080 align:start position:0% Cloud 00:09:43.080 --> 00:09:46.030 align:start position:0% Cloud um Shopify<00:09:43.800><c> oxygen</c><00:09:44.459><c> is</c><00:09:44.940><c> powered</c><00:09:45.420><c> by</c> 00:09:46.030 --> 00:09:46.040 align:start position:0% um Shopify oxygen is powered by 00:09:46.040 --> 00:09:49.009 align:start position:0% um Shopify oxygen is powered by cloudflare<00:09:47.040><c> and</c><00:09:47.399><c> in</c><00:09:47.880><c> local</c><00:09:48.060><c> development</c><00:09:48.660><c> mode</c> 00:09:49.009 --> 00:09:49.019 align:start position:0% cloudflare and in local development mode 00:09:49.019 --> 00:09:52.610 align:start position:0% cloudflare and in local development mode you<00:09:49.920><c> have</c><00:09:50.160><c> what</c><00:09:50.399><c> is</c><00:09:50.519><c> called</c><00:09:50.760><c> mini</c><00:09:51.120><c> mini</c><00:09:51.839><c> uh</c> 00:09:52.610 --> 00:09:52.620 align:start position:0% you have what is called mini mini uh 00:09:52.620 --> 00:09:55.910 align:start position:0% you have what is called mini mini uh mini<00:09:53.040><c> uh</c><00:09:53.580><c> oxygen</c><00:09:54.120><c> right</c><00:09:54.779><c> I</c><00:09:55.140><c> think</c><00:09:55.260><c> they</c><00:09:55.500><c> have</c> 00:09:55.910 --> 00:09:55.920 align:start position:0% mini uh oxygen right I think they have 00:09:55.920 --> 00:09:57.230 align:start position:0% mini uh oxygen right I think they have it<00:09:56.040><c> somewhere</c><00:09:56.339><c> here</c><00:09:56.580><c> they</c><00:09:56.820><c> write</c><00:09:57.060><c> it</c> 00:09:57.230 --> 00:09:57.240 align:start position:0% it somewhere here they write it 00:09:57.240 --> 00:10:00.530 align:start position:0% it somewhere here they write it somewhere<00:09:57.540><c> here</c><00:09:57.720><c> mini</c><00:09:58.440><c> oxygen</c><00:09:59.040><c> okay</c><00:09:59.360><c> and</c><00:10:00.360><c> mini</c> 00:10:00.530 --> 00:10:00.540 align:start position:0% somewhere here mini oxygen okay and mini 00:10:00.540 --> 00:10:04.610 align:start position:0% somewhere here mini oxygen okay and mini oxygen<00:10:01.140><c> when</c><00:10:01.500><c> you</c><00:10:01.680><c> run</c><00:10:01.980><c> npm</c><00:10:02.519><c> run</c><00:10:02.760><c> Dev</c><00:10:03.180><c> okay</c><00:10:03.620><c> the</c> 00:10:04.610 --> 00:10:04.620 align:start position:0% oxygen when you run npm run Dev okay the 00:10:04.620 --> 00:10:07.370 align:start position:0% oxygen when you run npm run Dev okay the first<00:10:04.740><c> thing</c><00:10:04.920><c> let's</c><00:10:05.160><c> run</c><00:10:05.459><c> is</c><00:10:06.000><c> this</c><00:10:06.420><c> this</c> 00:10:07.370 --> 00:10:07.380 align:start position:0% first thing let's run is this this 00:10:07.380 --> 00:10:10.790 align:start position:0% first thing let's run is this this um<00:10:07.440><c> This</c><00:10:08.279><c> Server</c><00:10:08.580><c> here</c><00:10:08.899><c> and</c><00:10:09.899><c> it's</c><00:10:10.620><c> gonna</c> 00:10:10.790 --> 00:10:10.800 align:start position:0% um This Server here and it's gonna 00:10:10.800 --> 00:10:14.570 align:start position:0% um This Server here and it's gonna inject<00:10:11.399><c> bindings</c><00:10:12.360><c> into</c><00:10:12.959><c> your</c> 00:10:14.570 --> 00:10:14.580 align:start position:0% inject bindings into your 00:10:14.580 --> 00:10:17.870 align:start position:0% inject bindings into your um<00:10:14.720><c> your</c><00:10:15.720><c> uh</c><00:10:15.899><c> your</c><00:10:16.200><c> your</c><00:10:16.200><c> server</c><00:10:16.860><c> okay</c><00:10:17.160><c> so</c> 00:10:17.870 --> 00:10:17.880 align:start position:0% um your uh your your server okay so 00:10:17.880 --> 00:10:20.090 align:start position:0% um your uh your your server okay so cloudflare<00:10:18.600><c> has</c><00:10:18.839><c> this</c><00:10:19.019><c> concept</c><00:10:19.320><c> of</c><00:10:19.560><c> bindings</c> 00:10:20.090 --> 00:10:20.100 align:start position:0% cloudflare has this concept of bindings 00:10:20.100 --> 00:10:22.490 align:start position:0% cloudflare has this concept of bindings and<00:10:20.459><c> one</c><00:10:20.640><c> of</c><00:10:20.760><c> them</c><00:10:20.940><c> is</c><00:10:21.120><c> the</c><00:10:21.500><c> environment</c> 00:10:22.490 --> 00:10:22.500 align:start position:0% and one of them is the environment 00:10:22.500 --> 00:10:25.670 align:start position:0% and one of them is the environment variables<00:10:23.160><c> another</c><00:10:23.459><c> one</c><00:10:23.760><c> is</c><00:10:23.940><c> the</c><00:10:24.660><c> um</c><00:10:24.720><c> the</c> 00:10:25.670 --> 00:10:25.680 align:start position:0% variables another one is the um the 00:10:25.680 --> 00:10:29.150 align:start position:0% variables another one is the um the cloudflare<00:10:26.580><c> KV</c><00:10:27.540><c> the</c><00:10:27.959><c> cloudflare</c> 00:10:29.150 --> 00:10:29.160 align:start position:0% cloudflare KV the cloudflare 00:10:29.160 --> 00:10:31.430 align:start position:0% cloudflare KV the cloudflare um the<00:10:30.000><c> key</c><00:10:30.360><c> values</c><00:10:30.720><c> and</c><00:10:30.899><c> the</c><00:10:31.019><c> cloudflare</c> 00:10:31.430 --> 00:10:31.440 align:start position:0% um the key values and the cloudflare 00:10:31.440 --> 00:10:33.050 align:start position:0% um the key values and the cloudflare durable<00:10:31.860><c> objects</c><00:10:32.339><c> and</c><00:10:32.459><c> stuff</c><00:10:32.640><c> like</c><00:10:32.760><c> that</c><00:10:32.880><c> all</c> 00:10:33.050 --> 00:10:33.060 align:start position:0% durable objects and stuff like that all 00:10:33.060 --> 00:10:36.170 align:start position:0% durable objects and stuff like that all of<00:10:33.180><c> these</c><00:10:33.360><c> things</c><00:10:33.899><c> are</c><00:10:34.200><c> Bindings</c><00:10:34.800><c> that</c> 00:10:36.170 --> 00:10:36.180 align:start position:0% of these things are Bindings that 00:10:36.180 --> 00:10:36.970 align:start position:0% of these things are Bindings that um 00:10:36.970 --> 00:10:36.980 align:start position:0% um 00:10:36.980 --> 00:10:39.350 align:start position:0% um cloudflare<00:10:37.980><c> inject</c><00:10:38.339><c> into</c><00:10:38.880><c> the</c><00:10:39.060><c> function</c> 00:10:39.350 --> 00:10:39.360 align:start position:0% cloudflare inject into the function 00:10:39.360 --> 00:10:41.030 align:start position:0% cloudflare inject into the function because<00:10:39.540><c> you</c><00:10:39.839><c> have</c><00:10:40.140><c> to</c><00:10:40.260><c> remember</c><00:10:40.380><c> this</c><00:10:40.920><c> is</c> 00:10:41.030 --> 00:10:41.040 align:start position:0% because you have to remember this is 00:10:41.040 --> 00:10:42.829 align:start position:0% because you have to remember this is this<00:10:41.279><c> is</c><00:10:41.459><c> function</c><00:10:41.880><c> it's</c><00:10:42.060><c> not</c><00:10:42.300><c> a</c><00:10:42.480><c> long</c><00:10:42.600><c> running</c> 00:10:42.829 --> 00:10:42.839 align:start position:0% this is function it's not a long running 00:10:42.839 --> 00:10:45.889 align:start position:0% this is function it's not a long running server<00:10:43.440><c> like</c><00:10:43.800><c> like</c><00:10:44.040><c> something</c><00:10:44.459><c> like</c><00:10:44.760><c> node</c><00:10:45.060><c> so</c> 00:10:45.889 --> 00:10:45.899 align:start position:0% server like like something like node so 00:10:45.899 --> 00:10:48.769 align:start position:0% server like like something like node so whenever<00:10:46.680><c> a</c><00:10:47.100><c> request</c><00:10:47.459><c> is</c><00:10:47.820><c> sent</c><00:10:48.120><c> to</c><00:10:48.660><c> the</c> 00:10:48.769 --> 00:10:48.779 align:start position:0% whenever a request is sent to the 00:10:48.779 --> 00:10:54.769 align:start position:0% whenever a request is sent to the cloudflare<00:10:49.519><c> uh</c><00:10:50.519><c> Walker</c><00:10:51.060><c> okay</c><00:10:52.220><c> a</c><00:10:53.220><c> new</c><00:10:53.779><c> function</c> 00:10:54.769 --> 00:10:54.779 align:start position:0% cloudflare uh Walker okay a new function 00:10:54.779 --> 00:10:59.269 align:start position:0% cloudflare uh Walker okay a new function is<00:10:55.140><c> created</c><00:10:55.800><c> in</c><00:10:56.519><c> in</c><00:10:56.640><c> on</c><00:10:57.000><c> on</c><00:10:57.120><c> the</c><00:10:57.839><c> edge</c><00:10:58.019><c> okay</c><00:10:58.860><c> on</c> 00:10:59.269 --> 00:10:59.279 align:start position:0% is created in in on on the edge okay on 00:10:59.279 --> 00:11:03.050 align:start position:0% is created in in on on the edge okay on an<00:10:59.640><c> edge</c><00:10:59.940><c> a</c><00:11:00.540><c> server</c><00:11:00.959><c> an</c><00:11:01.320><c> age</c><00:11:01.560><c> platform</c><00:11:02.040><c> to</c><00:11:02.880><c> run</c> 00:11:03.050 --> 00:11:03.060 align:start position:0% an edge a server an age platform to run 00:11:03.060 --> 00:11:06.530 align:start position:0% an edge a server an age platform to run that<00:11:03.839><c> function</c><00:11:04.440><c> okay</c><00:11:04.860><c> so</c><00:11:05.279><c> this</c><00:11:05.820><c> it's</c><00:11:06.180><c> not</c><00:11:06.360><c> a</c> 00:11:06.530 --> 00:11:06.540 align:start position:0% that function okay so this it's not a 00:11:06.540 --> 00:11:08.509 align:start position:0% that function okay so this it's not a long<00:11:06.660><c> running</c><00:11:06.899><c> server</c><00:11:07.560><c> like</c><00:11:07.800><c> a</c><00:11:07.980><c> node</c><00:11:08.220><c> or</c><00:11:08.399><c> an</c> 00:11:08.509 --> 00:11:08.519 align:start position:0% long running server like a node or an 00:11:08.519 --> 00:11:10.850 align:start position:0% long running server like a node or an Express<00:11:08.700><c> server</c><00:11:09.120><c> that's</c><00:11:10.079><c> very</c><00:11:10.320><c> important</c><00:11:10.680><c> to</c> 00:11:10.850 --> 00:11:10.860 align:start position:0% Express server that's very important to 00:11:10.860 --> 00:11:13.490 align:start position:0% Express server that's very important to keep<00:11:10.980><c> in</c><00:11:11.100><c> mind</c><00:11:11.279><c> so</c><00:11:11.640><c> every</c><00:11:12.240><c> time</c><00:11:12.480><c> you</c><00:11:12.720><c> run</c><00:11:13.200><c> this</c> 00:11:13.490 --> 00:11:13.500 align:start position:0% keep in mind so every time you run this 00:11:13.500 --> 00:11:15.530 align:start position:0% keep in mind so every time you run this function<00:11:13.920><c> okay</c> 00:11:15.530 --> 00:11:15.540 align:start position:0% function okay 00:11:15.540 --> 00:11:20.569 align:start position:0% function okay this<00:11:16.980><c> this</c><00:11:17.399><c> is</c><00:11:17.959><c> clever</c><00:11:18.959><c> injects</c><00:11:19.800><c> bindings</c> 00:11:20.569 --> 00:11:20.579 align:start position:0% this this is clever injects bindings 00:11:20.579 --> 00:11:23.750 align:start position:0% this this is clever injects bindings into<00:11:21.360><c> your</c><00:11:21.959><c> execution</c><00:11:22.440><c> context</c><00:11:23.040><c> like</c><00:11:23.519><c> you</c> 00:11:23.750 --> 00:11:23.760 align:start position:0% into your execution context like you 00:11:23.760 --> 00:11:26.090 align:start position:0% into your execution context like you have<00:11:24.120><c> here</c><00:11:24.300><c> the</c><00:11:24.839><c> execution</c><00:11:25.260><c> context</c><00:11:25.740><c> itself</c> 00:11:26.090 --> 00:11:26.100 align:start position:0% have here the execution context itself 00:11:26.100 --> 00:11:28.069 align:start position:0% have here the execution context itself you<00:11:26.760><c> have</c><00:11:26.940><c> the</c><00:11:27.060><c> environment</c><00:11:27.420><c> variables</c><00:11:27.959><c> you</c> 00:11:28.069 --> 00:11:28.079 align:start position:0% you have the environment variables you 00:11:28.079 --> 00:11:30.290 align:start position:0% you have the environment variables you have<00:11:28.260><c> the</c><00:11:28.440><c> request</c><00:11:28.860><c> that</c><00:11:29.160><c> was</c><00:11:29.279><c> sent</c><00:11:29.519><c> by</c><00:11:29.940><c> the</c> 00:11:30.290 --> 00:11:30.300 align:start position:0% have the request that was sent by the 00:11:30.300 --> 00:11:33.170 align:start position:0% have the request that was sent by the user<00:11:30.660><c> right</c><00:11:30.959><c> so</c><00:11:31.920><c> the</c><00:11:32.579><c> next</c><00:11:32.700><c> thing</c><00:11:32.940><c> that</c> 00:11:33.170 --> 00:11:33.180 align:start position:0% user right so the next thing that 00:11:33.180 --> 00:11:35.389 align:start position:0% user right so the next thing that happens<00:11:33.480><c> okay</c><00:11:34.200><c> is</c><00:11:34.560><c> obviously</c><00:11:34.920><c> we</c><00:11:35.100><c> want</c><00:11:35.279><c> to</c> 00:11:35.389 --> 00:11:35.399 align:start position:0% happens okay is obviously we want to 00:11:35.399 --> 00:11:40.030 align:start position:0% happens okay is obviously we want to check<00:11:35.579><c> if</c><00:11:36.839><c> um</c> 00:11:40.030 --> 00:11:40.040 align:start position:0% 00:11:40.040 --> 00:11:42.530 align:start position:0% the<00:11:41.040><c> session</c><00:11:41.220><c> secret</c><00:11:41.579><c> so</c><00:11:42.120><c> if</c><00:11:42.420><c> that</c> 00:11:42.530 --> 00:11:42.540 align:start position:0% the session secret so if that 00:11:42.540 --> 00:11:44.269 align:start position:0% the session secret so if that environment<00:11:42.959><c> variable</c><00:11:43.380><c> is</c><00:11:43.560><c> defined</c><00:11:43.920><c> if</c><00:11:44.100><c> it's</c> 00:11:44.269 --> 00:11:44.279 align:start position:0% environment variable is defined if it's 00:11:44.279 --> 00:11:46.850 align:start position:0% environment variable is defined if it's not<00:11:44.459><c> defined</c><00:11:44.880><c> we</c><00:11:45.300><c> need</c><00:11:45.480><c> that</c><00:11:45.660><c> defined</c><00:11:46.140><c> so</c><00:11:46.440><c> if</c> 00:11:46.850 --> 00:11:46.860 align:start position:0% not defined we need that defined so if 00:11:46.860 --> 00:11:48.829 align:start position:0% not defined we need that defined so if it's<00:11:47.279><c> not</c><00:11:47.459><c> defined</c><00:11:47.880><c> then</c><00:11:48.060><c> that's</c><00:11:48.300><c> potentially</c> 00:11:48.829 --> 00:11:48.839 align:start position:0% it's not defined then that's potentially 00:11:48.839 --> 00:11:51.290 align:start position:0% it's not defined then that's potentially maybe<00:11:49.440><c> the</c><00:11:49.740><c> developer</c><00:11:50.100><c> forgot</c><00:11:50.579><c> to</c><00:11:50.820><c> do</c><00:11:51.120><c> that</c> 00:11:51.290 --> 00:11:51.300 align:start position:0% maybe the developer forgot to do that 00:11:51.300 --> 00:11:53.810 align:start position:0% maybe the developer forgot to do that and<00:11:52.019><c> we</c><00:11:52.380><c> don't</c><00:11:52.500><c> want</c><00:11:52.680><c> the</c><00:11:52.920><c> app</c><00:11:53.040><c> to</c><00:11:53.279><c> run</c><00:11:53.459><c> on</c><00:11:53.700><c> on</c> 00:11:53.810 --> 00:11:53.820 align:start position:0% and we don't want the app to run on on 00:11:53.820 --> 00:11:57.590 align:start position:0% and we don't want the app to run on on on<00:11:54.480><c> other</c><00:11:55.200><c> on</c><00:11:55.680><c> not</c><00:11:56.220><c> authenticated</c><00:11:57.060><c> right</c><00:11:57.420><c> that</c> 00:11:57.590 --> 00:11:57.600 align:start position:0% on other on not authenticated right that 00:11:57.600 --> 00:11:59.810 align:start position:0% on other on not authenticated right that would<00:11:57.779><c> be</c><00:11:58.200><c> big</c><00:11:58.380><c> security</c><00:11:58.560><c> concern</c><00:11:59.279><c> so</c><00:11:59.519><c> if</c><00:11:59.700><c> the</c> 00:11:59.810 --> 00:11:59.820 align:start position:0% would be big security concern so if the 00:11:59.820 --> 00:12:01.550 align:start position:0% would be big security concern so if the session<00:12:00.060><c> secret</c><00:12:00.420><c> is</c><00:12:00.720><c> not</c><00:12:00.899><c> defined</c><00:12:01.200><c> we</c><00:12:01.380><c> throw</c> 00:12:01.550 --> 00:12:01.560 align:start position:0% session secret is not defined we throw 00:12:01.560 --> 00:12:04.130 align:start position:0% session secret is not defined we throw an<00:12:01.800><c> arrow</c><00:12:02.160><c> here</c><00:12:02.339><c> and</c><00:12:03.000><c> then</c><00:12:03.120><c> this</c><00:12:03.300><c> wait</c><00:12:03.600><c> until</c> 00:12:04.130 --> 00:12:04.140 align:start position:0% an arrow here and then this wait until 00:12:04.140 --> 00:12:06.050 align:start position:0% an arrow here and then this wait until I'll<00:12:04.800><c> come</c><00:12:04.980><c> back</c><00:12:05.100><c> to</c><00:12:05.220><c> that</c><00:12:05.399><c> later</c><00:12:05.640><c> but</c><00:12:05.940><c> it's</c> 00:12:06.050 --> 00:12:06.060 align:start position:0% I'll come back to that later but it's 00:12:06.060 --> 00:12:08.269 align:start position:0% I'll come back to that later but it's very<00:12:06.300><c> important</c><00:12:06.720><c> because</c> 00:12:08.269 --> 00:12:08.279 align:start position:0% very important because 00:12:08.279 --> 00:12:10.730 align:start position:0% very important because the<00:12:08.940><c> way</c><00:12:09.060><c> of</c><00:12:09.360><c> because</c><00:12:09.540><c> of</c><00:12:09.839><c> the</c><00:12:10.079><c> way</c><00:12:10.260><c> the</c><00:12:10.560><c> edge</c> 00:12:10.730 --> 00:12:10.740 align:start position:0% the way of because of the way the edge 00:12:10.740 --> 00:12:15.650 align:start position:0% the way of because of the way the edge works<00:12:11.220><c> right</c><00:12:11.399><c> so</c><00:12:11.839><c> uh</c><00:12:12.860><c> when</c><00:12:13.860><c> a</c><00:12:14.399><c> request</c><00:12:14.760><c> is</c> 00:12:15.650 --> 00:12:15.660 align:start position:0% works right so uh when a request is 00:12:15.660 --> 00:12:16.910 align:start position:0% works right so uh when a request is complete<00:12:16.019><c> the</c><00:12:16.140><c> let's</c><00:12:16.260><c> say</c><00:12:16.440><c> you</c><00:12:16.560><c> send</c><00:12:16.740><c> a</c> 00:12:16.910 --> 00:12:16.920 align:start position:0% complete the let's say you send a 00:12:16.920 --> 00:12:19.310 align:start position:0% complete the let's say you send a request<00:12:17.160><c> to</c><00:12:17.399><c> the</c><00:12:17.519><c> database</c><00:12:17.940><c> or</c><00:12:18.480><c> to</c><00:12:18.779><c> an</c><00:12:19.019><c> API</c> 00:12:19.310 --> 00:12:19.320 align:start position:0% request to the database or to an API 00:12:19.320 --> 00:12:22.009 align:start position:0% request to the database or to an API when<00:12:19.980><c> a</c><00:12:20.160><c> request</c><00:12:20.459><c> is</c><00:12:20.700><c> completed</c><00:12:21.300><c> you</c><00:12:21.660><c> need</c><00:12:21.779><c> to</c> 00:12:22.009 --> 00:12:22.019 align:start position:0% when a request is completed you need to 00:12:22.019 --> 00:12:24.170 align:start position:0% when a request is completed you need to tell<00:12:22.320><c> the</c><00:12:22.740><c> worker</c><00:12:23.160><c> that</c><00:12:23.279><c> that</c><00:12:23.579><c> request</c><00:12:23.880><c> has</c> 00:12:24.170 --> 00:12:24.180 align:start position:0% tell the worker that that request has 00:12:24.180 --> 00:12:27.470 align:start position:0% tell the worker that that request has completed<00:12:25.019><c> so</c><00:12:25.320><c> and</c><00:12:26.220><c> then</c><00:12:26.399><c> you</c><00:12:26.880><c> have</c><00:12:27.000><c> to</c><00:12:27.180><c> buy</c> 00:12:27.470 --> 00:12:27.480 align:start position:0% completed so and then you have to buy 00:12:27.480 --> 00:12:30.710 align:start position:0% completed so and then you have to buy like<00:12:28.019><c> you</c><00:12:28.320><c> basically</c><00:12:28.740><c> here</c><00:12:29.100><c> it's</c><00:12:29.399><c> an</c><00:12:30.000><c> it's</c><00:12:30.540><c> a</c> 00:12:30.710 --> 00:12:30.720 align:start position:0% like you basically here it's an it's a 00:12:30.720 --> 00:12:34.550 align:start position:0% like you basically here it's an it's a callback<00:12:31.079><c> that</c><00:12:31.980><c> will</c><00:12:32.160><c> execute</c><00:12:32.700><c> the</c><00:12:33.779><c> um</c><00:12:33.839><c> the</c> 00:12:34.550 --> 00:12:34.560 align:start position:0% callback that will execute the um the 00:12:34.560 --> 00:12:36.829 align:start position:0% callback that will execute the um the the tier<00:12:35.040><c> up</c><00:12:35.279><c> operation</c><00:12:36.000><c> let's</c><00:12:36.300><c> say</c><00:12:36.420><c> you</c><00:12:36.660><c> you</c> 00:12:36.829 --> 00:12:36.839 align:start position:0% the tier up operation let's say you you 00:12:36.839 --> 00:12:40.069 align:start position:0% the tier up operation let's say you you connect<00:12:37.320><c> to</c><00:12:37.560><c> a</c><00:12:37.740><c> database</c><00:12:38.160><c> okay</c><00:12:38.519><c> and</c><00:12:39.480><c> then</c><00:12:39.660><c> you</c> 00:12:40.069 --> 00:12:40.079 align:start position:0% connect to a database okay and then you 00:12:40.079 --> 00:12:43.069 align:start position:0% connect to a database okay and then you uh<00:12:41.100><c> maybe</c><00:12:41.579><c> let</c><00:12:41.880><c> me</c><00:12:42.000><c> show</c><00:12:42.180><c> an</c><00:12:42.300><c> example</c><00:12:42.600><c> of</c><00:12:42.899><c> this</c> 00:12:43.069 --> 00:12:43.079 align:start position:0% uh maybe let me show an example of this 00:12:43.079 --> 00:12:45.769 align:start position:0% uh maybe let me show an example of this I<00:12:43.320><c> don't</c><00:12:43.560><c> know</c><00:12:43.680><c> if</c><00:12:43.800><c> I</c><00:12:43.980><c> can</c><00:12:44.040><c> find</c><00:12:44.220><c> it</c><00:12:44.399><c> online</c><00:12:44.779><c> uh</c> 00:12:45.769 --> 00:12:45.779 align:start position:0% I don't know if I can find it online uh 00:12:45.779 --> 00:12:49.069 align:start position:0% I don't know if I can find it online uh if<00:12:45.959><c> we</c><00:12:46.200><c> find</c><00:12:46.440><c> the</c><00:12:46.680><c> neon</c><00:12:47.180><c> database</c><00:12:48.180><c> neon</c><00:12:48.779><c> DB</c> 00:12:49.069 --> 00:12:49.079 align:start position:0% if we find the neon database neon DB 00:12:49.079 --> 00:12:52.250 align:start position:0% if we find the neon database neon DB cloudflare<00:12:49.860><c> pages</c><00:12:50.639><c> example</c><00:12:51.300><c> all</c><00:12:51.720><c> right</c><00:12:51.779><c> you</c> 00:12:52.250 --> 00:12:52.260 align:start position:0% cloudflare pages example all right you 00:12:52.260 --> 00:12:53.629 align:start position:0% cloudflare pages example all right you see<00:12:52.500><c> clearly</c> 00:12:53.629 --> 00:12:53.639 align:start position:0% see clearly 00:12:53.639 --> 00:12:56.030 align:start position:0% see clearly um what<00:12:54.360><c> I'm</c><00:12:54.540><c> talking</c><00:12:54.720><c> about</c><00:12:54.959><c> is</c><00:12:55.440><c> integration</c> 00:12:56.030 --> 00:12:56.040 align:start position:0% um what I'm talking about is integration 00:12:56.040 --> 00:12:58.730 align:start position:0% um what I'm talking about is integration here<00:12:56.579><c> you</c><00:12:57.480><c> will</c><00:12:57.660><c> see</c><00:12:57.839><c> what</c><00:12:58.200><c> I'm</c><00:12:58.380><c> talking</c><00:12:58.560><c> about</c> 00:12:58.730 --> 00:12:58.740 align:start position:0% here you will see what I'm talking about 00:12:58.740 --> 00:13:00.050 align:start position:0% here you will see what I'm talking about here 00:13:00.050 --> 00:13:00.060 align:start position:0% here 00:13:00.060 --> 00:13:02.509 align:start position:0% here um<00:13:00.180><c> I</c><00:13:00.660><c> have</c><00:13:00.839><c> code</c><00:13:01.079><c> examples</c> 00:13:02.509 --> 00:13:02.519 align:start position:0% um I have code examples 00:13:02.519 --> 00:13:05.949 align:start position:0% um I have code examples let<00:13:03.060><c> me</c><00:13:03.240><c> see</c><00:13:03.360><c> if</c><00:13:03.420><c> I</c><00:13:03.600><c> can</c><00:13:03.720><c> find</c><00:13:03.959><c> it</c> 00:13:05.949 --> 00:13:05.959 align:start position:0% let me see if I can find it 00:13:05.959 --> 00:13:10.069 align:start position:0% let me see if I can find it uh<00:13:06.959><c> yeah</c><00:13:07.680><c> exactly</c><00:13:08.100><c> there</c><00:13:08.519><c> we</c><00:13:08.700><c> go</c><00:13:08.820><c> so</c><00:13:09.540><c> you</c><00:13:09.899><c> see</c> 00:13:10.069 --> 00:13:10.079 align:start position:0% uh yeah exactly there we go so you see 00:13:10.079 --> 00:13:12.470 align:start position:0% uh yeah exactly there we go so you see here<00:13:10.380><c> this</c><00:13:11.220><c> is</c><00:13:11.339><c> what</c><00:13:11.519><c> this</c><00:13:11.700><c> wait</c><00:13:11.940><c> until</c><00:13:12.180><c> it's</c> 00:13:12.470 --> 00:13:12.480 align:start position:0% here this is what this wait until it's 00:13:12.480 --> 00:13:16.370 align:start position:0% here this is what this wait until it's all<00:13:12.660><c> about</c><00:13:12.839><c> you</c><00:13:13.500><c> see</c><00:13:13.740><c> you</c><00:13:14.579><c> create</c><00:13:14.959><c> uh</c><00:13:15.959><c> in</c><00:13:16.320><c> this</c> 00:13:16.370 --> 00:13:16.380 align:start position:0% all about you see you create uh in this 00:13:16.380 --> 00:13:18.350 align:start position:0% all about you see you create uh in this case<00:13:16.560><c> neon</c><00:13:17.100><c> is</c><00:13:17.279><c> basically</c><00:13:17.639><c> a</c><00:13:17.880><c> serverless</c> 00:13:18.350 --> 00:13:18.360 align:start position:0% case neon is basically a serverless 00:13:18.360 --> 00:13:20.150 align:start position:0% case neon is basically a serverless postgres<00:13:18.899><c> database</c><00:13:19.440><c> that</c><00:13:19.740><c> integrates</c> 00:13:20.150 --> 00:13:20.160 align:start position:0% postgres database that integrates 00:13:20.160 --> 00:13:22.910 align:start position:0% postgres database that integrates perfectly<00:13:20.579><c> with</c><00:13:20.760><c> cloudflare</c><00:13:21.300><c> so</c><00:13:22.200><c> here</c><00:13:22.620><c> we</c> 00:13:22.910 --> 00:13:22.920 align:start position:0% perfectly with cloudflare so here we 00:13:22.920 --> 00:13:24.530 align:start position:0% perfectly with cloudflare so here we create<00:13:23.100><c> a</c><00:13:23.279><c> client</c><00:13:23.579><c> for</c><00:13:24.000><c> the</c><00:13:24.120><c> for</c><00:13:24.300><c> the</c> 00:13:24.530 --> 00:13:24.540 align:start position:0% create a client for the for the 00:13:24.540 --> 00:13:26.569 align:start position:0% create a client for the for the serverless<00:13:24.839><c> database</c><00:13:25.320><c> we</c><00:13:25.920><c> connect</c><00:13:26.160><c> to</c><00:13:26.399><c> the</c> 00:13:26.569 --> 00:13:26.579 align:start position:0% serverless database we connect to the 00:13:26.579 --> 00:13:30.050 align:start position:0% serverless database we connect to the client<00:13:26.820><c> okay</c><00:13:27.240><c> we</c><00:13:28.139><c> then</c><00:13:28.380><c> we</c><00:13:28.620><c> we</c><00:13:29.040><c> make</c><00:13:29.339><c> a</c><00:13:29.700><c> query</c> 00:13:30.050 --> 00:13:30.060 align:start position:0% client okay we then we we make a query 00:13:30.060 --> 00:13:32.750 align:start position:0% client okay we then we we make a query we<00:13:30.540><c> we</c><00:13:30.779><c> set</c><00:13:31.139><c> a</c><00:13:31.320><c> query</c><00:13:31.500><c> to</c><00:13:31.680><c> the</c><00:13:31.860><c> database</c><00:13:32.220><c> and</c> 00:13:32.750 --> 00:13:32.760 align:start position:0% we we set a query to the database and 00:13:32.760 --> 00:13:35.690 align:start position:0% we we set a query to the database and then<00:13:32.880><c> we</c><00:13:33.120><c> wait</c><00:13:33.300><c> until</c><00:13:33.600><c> this</c><00:13:34.079><c> is</c><00:13:34.200><c> non-blocking</c> 00:13:35.690 --> 00:13:35.700 align:start position:0% then we wait until this is non-blocking 00:13:35.700 --> 00:13:37.190 align:start position:0% then we wait until this is non-blocking so<00:13:36.180><c> the</c><00:13:36.300><c> first</c><00:13:36.480><c> one</c><00:13:36.660><c> is</c><00:13:36.839><c> going</c><00:13:36.959><c> to</c><00:13:37.019><c> continue</c> 00:13:37.190 --> 00:13:37.200 align:start position:0% so the first one is going to continue 00:13:37.200 --> 00:13:39.470 align:start position:0% so the first one is going to continue but<00:13:37.740><c> we</c><00:13:38.339><c> need</c><00:13:38.519><c> to</c><00:13:38.760><c> close</c><00:13:38.940><c> the</c><00:13:39.300><c> connection</c> 00:13:39.470 --> 00:13:39.480 align:start position:0% but we need to close the connection 00:13:39.480 --> 00:13:41.810 align:start position:0% but we need to close the connection because<00:13:40.019><c> remember</c><00:13:40.320><c> once</c><00:13:40.860><c> again</c><00:13:40.920><c> this</c><00:13:41.519><c> is</c><00:13:41.639><c> a</c> 00:13:41.810 --> 00:13:41.820 align:start position:0% because remember once again this is a 00:13:41.820 --> 00:13:43.370 align:start position:0% because remember once again this is a serverless<00:13:42.240><c> environment</c><00:13:42.660><c> it's</c><00:13:42.839><c> not</c><00:13:43.079><c> a</c><00:13:43.260><c> long</c> 00:13:43.370 --> 00:13:43.380 align:start position:0% serverless environment it's not a long 00:13:43.380 --> 00:13:46.009 align:start position:0% serverless environment it's not a long running<00:13:43.620><c> server</c><00:13:44.160><c> so</c><00:13:44.279><c> we</c><00:13:44.459><c> need</c><00:13:44.639><c> to</c><00:13:44.820><c> tell</c><00:13:45.120><c> the</c> 00:13:46.009 --> 00:13:46.019 align:start position:0% running server so we need to tell the 00:13:46.019 --> 00:13:48.710 align:start position:0% running server so we need to tell the fetch<00:13:46.440><c> function</c><00:13:46.740><c> okay</c><00:13:47.279><c> when</c><00:13:47.880><c> to</c><00:13:48.060><c> When</c><00:13:48.480><c> when</c> 00:13:48.710 --> 00:13:48.720 align:start position:0% fetch function okay when to When when 00:13:48.720 --> 00:13:50.810 align:start position:0% fetch function okay when to When when when when<00:13:48.899><c> when</c><00:13:49.079><c> the</c><00:13:49.920><c> uh</c><00:13:50.100><c> it's</c><00:13:50.399><c> basically</c><00:13:50.639><c> a</c> 00:13:50.810 --> 00:13:50.820 align:start position:0% when when when the uh it's basically a 00:13:50.820 --> 00:13:52.910 align:start position:0% when when when the uh it's basically a callback<00:13:51.240><c> that</c><00:13:52.079><c> we</c> 00:13:52.910 --> 00:13:52.920 align:start position:0% callback that we 00:13:52.920 --> 00:13:55.430 align:start position:0% callback that we we<00:13:53.339><c> instruct</c><00:13:53.880><c> our</c> 00:13:55.430 --> 00:13:55.440 align:start position:0% we instruct our 00:13:55.440 --> 00:13:57.829 align:start position:0% we instruct our cloudflare<00:13:56.040><c> Walker</c><00:13:56.579><c> function</c><00:13:56.880><c> that</c><00:13:57.240><c> the</c> 00:13:57.829 --> 00:13:57.839 align:start position:0% cloudflare Walker function that the 00:13:57.839 --> 00:14:00.290 align:start position:0% cloudflare Walker function that the fetch<00:13:58.260><c> or</c><00:13:58.500><c> the</c><00:13:58.680><c> the</c><00:13:58.800><c> query</c><00:13:59.220><c> has</c><00:13:59.579><c> completed</c><00:13:59.940><c> and</c> 00:14:00.290 --> 00:14:00.300 align:start position:0% fetch or the the query has completed and 00:14:00.300 --> 00:14:02.150 align:start position:0% fetch or the the query has completed and it<00:14:00.480><c> needs</c><00:14:00.839><c> to</c><00:14:00.959><c> be</c><00:14:01.079><c> closed</c><00:14:01.500><c> okay</c><00:14:01.740><c> because</c> 00:14:02.150 --> 00:14:02.160 align:start position:0% it needs to be closed okay because 00:14:02.160 --> 00:14:03.530 align:start position:0% it needs to be closed okay because otherwise 00:14:03.530 --> 00:14:03.540 align:start position:0% otherwise 00:14:03.540 --> 00:14:06.110 align:start position:0% otherwise next<00:14:04.320><c> the</c><00:14:04.620><c> next</c><00:14:04.800><c> when</c><00:14:05.100><c> the</c><00:14:05.279><c> next</c><00:14:05.459><c> query</c><00:14:05.760><c> is</c> 00:14:06.110 --> 00:14:06.120 align:start position:0% next the next when the next query is 00:14:06.120 --> 00:14:08.990 align:start position:0% next the next when the next query is sent<00:14:06.360><c> okay</c><00:14:06.899><c> when</c><00:14:07.320><c> the</c><00:14:07.560><c> next</c><00:14:07.680><c> view</c><00:14:07.860><c> is</c><00:14:08.160><c> sent</c> 00:14:08.990 --> 00:14:09.000 align:start position:0% sent okay when the next view is sent 00:14:09.000 --> 00:14:11.930 align:start position:0% sent okay when the next view is sent the<00:14:10.019><c> um</c><00:14:10.019><c> the</c><00:14:10.380><c> the</c><00:14:10.380><c> clefler</c><00:14:11.160><c> Walker</c><00:14:11.579><c> will</c><00:14:11.760><c> still</c> 00:14:11.930 --> 00:14:11.940 align:start position:0% the um the the clefler Walker will still 00:14:11.940 --> 00:14:13.670 align:start position:0% the um the the clefler Walker will still be<00:14:12.120><c> in</c><00:14:12.240><c> execution</c><00:14:12.600><c> and</c><00:14:12.839><c> you</c><00:14:13.019><c> can't</c><00:14:13.139><c> have</c><00:14:13.380><c> like</c> 00:14:13.670 --> 00:14:13.680 align:start position:0% be in execution and you can't have like 00:14:13.680 --> 00:14:16.310 align:start position:0% be in execution and you can't have like yeah<00:14:14.519><c> you</c><00:14:15.060><c> basically</c><00:14:15.360><c> get</c><00:14:15.540><c> a</c><00:14:15.720><c> narrow</c><00:14:16.019><c> so</c><00:14:16.200><c> if</c> 00:14:16.310 --> 00:14:16.320 align:start position:0% yeah you basically get a narrow so if 00:14:16.320 --> 00:14:18.829 align:start position:0% yeah you basically get a narrow so if you<00:14:16.440><c> don't</c><00:14:16.560><c> use</c><00:14:16.860><c> this</c><00:14:17.339><c> wait</c><00:14:17.880><c> until</c><00:14:18.120><c> you</c><00:14:18.660><c> get</c> 00:14:18.829 --> 00:14:18.839 align:start position:0% you don't use this wait until you get 00:14:18.839 --> 00:14:20.810 align:start position:0% you don't use this wait until you get the<00:14:18.959><c> now</c><00:14:19.200><c> so</c><00:14:19.440><c> that's</c><00:14:19.620><c> what</c><00:14:19.860><c> it's</c><00:14:20.040><c> doing</c><00:14:20.459><c> here</c> 00:14:20.810 --> 00:14:20.820 align:start position:0% the now so that's what it's doing here 00:14:20.820 --> 00:14:23.150 align:start position:0% the now so that's what it's doing here and<00:14:21.600><c> um</c><00:14:21.600><c> this</c><00:14:21.959><c> is</c><00:14:22.079><c> a</c><00:14:22.260><c> very</c><00:14:22.380><c> simple</c><00:14:22.620><c> example</c> 00:14:23.150 --> 00:14:23.160 align:start position:0% and um this is a very simple example 00:14:23.160 --> 00:14:25.550 align:start position:0% and um this is a very simple example where<00:14:23.399><c> you</c><00:14:23.639><c> can</c><00:14:23.760><c> see</c><00:14:24.079><c> you</c><00:14:25.079><c> can</c><00:14:25.200><c> see</c><00:14:25.320><c> it</c><00:14:25.440><c> in</c> 00:14:25.550 --> 00:14:25.560 align:start position:0% where you can see you can see it in 00:14:25.560 --> 00:14:27.829 align:start position:0% where you can see you can see it in operation<00:14:25.980><c> and</c><00:14:26.700><c> that's</c><00:14:26.880><c> why</c><00:14:27.180><c> you</c><00:14:27.540><c> have</c><00:14:27.660><c> it</c> 00:14:27.829 --> 00:14:27.839 align:start position:0% operation and that's why you have it 00:14:27.839 --> 00:14:29.150 align:start position:0% operation and that's why you have it here<00:14:28.139><c> okay</c> 00:14:29.150 --> 00:14:29.160 align:start position:0% here okay 00:14:29.160 --> 00:14:32.690 align:start position:0% here okay and<00:14:29.760><c> that's</c><00:14:29.880><c> why</c><00:14:30.120><c> also</c><00:14:30.540><c> you</c><00:14:31.380><c> see</c><00:14:31.620><c> here</c><00:14:32.040><c> in</c><00:14:32.579><c> the</c> 00:14:32.690 --> 00:14:32.700 align:start position:0% and that's why also you see here in the 00:14:32.700 --> 00:14:36.290 align:start position:0% and that's why also you see here in the storefront<00:14:33.300><c> Shopify</c><00:14:34.200><c> uses</c><00:14:34.980><c> this</c><00:14:35.279><c> for</c><00:14:36.000><c> example</c> 00:14:36.290 --> 00:14:36.300 align:start position:0% storefront Shopify uses this for example 00:14:36.300 --> 00:14:39.470 align:start position:0% storefront Shopify uses this for example to<00:14:36.720><c> close</c><00:14:37.019><c> when</c><00:14:37.320><c> when</c><00:14:37.620><c> Shopify</c><00:14:38.519><c> when</c><00:14:39.300><c> you</c> 00:14:39.470 --> 00:14:39.480 align:start position:0% to close when when Shopify when you 00:14:39.480 --> 00:14:41.269 align:start position:0% to close when when Shopify when you instantiate<00:14:40.079><c> the</c><00:14:40.260><c> the</c> 00:14:41.269 --> 00:14:41.279 align:start position:0% instantiate the the 00:14:41.279 --> 00:14:43.850 align:start position:0% instantiate the the shop<00:14:41.880><c> storefront</c><00:14:42.660><c> client</c><00:14:43.079><c> that</c><00:14:43.440><c> Shopify</c> 00:14:43.850 --> 00:14:43.860 align:start position:0% shop storefront client that Shopify 00:14:43.860 --> 00:14:46.370 align:start position:0% shop storefront client that Shopify gives<00:14:44.220><c> you</c><00:14:44.399><c> okay</c><00:14:44.820><c> they</c><00:14:45.600><c> need</c><00:14:45.839><c> that</c><00:14:46.019><c> function</c> 00:14:46.370 --> 00:14:46.380 align:start position:0% gives you okay they need that function 00:14:46.380 --> 00:14:49.370 align:start position:0% gives you okay they need that function because<00:14:46.860><c> they</c><00:14:47.399><c> are</c><00:14:47.579><c> doing</c><00:14:47.760><c> obviously</c> 00:14:49.370 --> 00:14:49.380 align:start position:0% because they are doing obviously 00:14:49.380 --> 00:14:52.550 align:start position:0% because they are doing obviously um<00:14:49.760><c> graphql</c><00:14:50.760><c> queries</c><00:14:51.420><c> and</c><00:14:51.779><c> when</c><00:14:51.959><c> the</c><00:14:52.139><c> query</c><00:14:52.320><c> is</c> 00:14:52.550 --> 00:14:52.560 align:start position:0% um graphql queries and when the query is 00:14:52.560 --> 00:14:54.769 align:start position:0% um graphql queries and when the query is completed<00:14:52.980><c> they</c><00:14:53.279><c> need</c><00:14:53.519><c> to</c><00:14:53.779><c> instruct</c> 00:14:54.769 --> 00:14:54.779 align:start position:0% completed they need to instruct 00:14:54.779 --> 00:14:56.569 align:start position:0% completed they need to instruct Lafayette<00:14:55.320><c> to</c><00:14:55.680><c> shut</c><00:14:55.980><c> down</c><00:14:56.160><c> the</c><00:14:56.339><c> connection</c> 00:14:56.569 --> 00:14:56.579 align:start position:0% Lafayette to shut down the connection 00:14:56.579 --> 00:14:58.790 align:start position:0% Lafayette to shut down the connection rights<00:14:57.420><c> and</c><00:14:57.540><c> stuff</c><00:14:57.720><c> like</c><00:14:57.899><c> that</c><00:14:58.079><c> so</c><00:14:58.320><c> that's</c><00:14:58.560><c> why</c> 00:14:58.790 --> 00:14:58.800 align:start position:0% rights and stuff like that so that's why 00:14:58.800 --> 00:15:01.550 align:start position:0% rights and stuff like that so that's why they<00:14:59.040><c> need</c><00:14:59.220><c> that</c><00:14:59.519><c> context</c><00:14:59.940><c> okay</c><00:15:00.600><c> and</c> 00:15:01.550 --> 00:15:01.560 align:start position:0% they need that context okay and 00:15:01.560 --> 00:15:04.910 align:start position:0% they need that context okay and obviously<00:15:02.279><c> here</c><00:15:02.779><c> looking</c><00:15:03.779><c> at</c><00:15:04.079><c> it</c><00:15:04.199><c> from</c><00:15:04.560><c> a</c><00:15:04.740><c> more</c> 00:15:04.910 --> 00:15:04.920 align:start position:0% obviously here looking at it from a more 00:15:04.920 --> 00:15:06.769 align:start position:0% obviously here looking at it from a more high<00:15:05.220><c> level</c><00:15:05.399><c> let</c><00:15:05.699><c> me</c><00:15:05.820><c> collapse</c><00:15:06.240><c> this</c><00:15:06.360><c> for</c><00:15:06.600><c> the</c> 00:15:06.769 --> 00:15:06.779 align:start position:0% high level let me collapse this for the 00:15:06.779 --> 00:15:07.910 align:start position:0% high level let me collapse this for the first<00:15:06.959><c> okay</c> 00:15:07.910 --> 00:15:07.920 align:start position:0% first okay 00:15:07.920 --> 00:15:12.230 align:start position:0% first okay you<00:15:08.579><c> can</c><00:15:08.699><c> see</c><00:15:09.060><c> here</c><00:15:10.220><c> click</c><00:15:11.220><c> here</c><00:15:11.519><c> so</c><00:15:11.820><c> we</c><00:15:12.060><c> have</c> 00:15:12.230 --> 00:15:12.240 align:start position:0% you can see here click here so we have 00:15:12.240 --> 00:15:14.689 align:start position:0% you can see here click here so we have remember<00:15:13.019><c> we</c><00:15:13.380><c> have</c><00:15:13.560><c> the</c><00:15:13.740><c> execution</c><00:15:14.160><c> context</c> 00:15:14.689 --> 00:15:14.699 align:start position:0% remember we have the execution context 00:15:14.699 --> 00:15:17.269 align:start position:0% remember we have the execution context here<00:15:14.940><c> but</c><00:15:15.839><c> in</c><00:15:16.079><c> addition</c><00:15:16.260><c> to</c><00:15:16.440><c> that</c><00:15:16.620><c> we</c><00:15:16.800><c> have</c><00:15:16.980><c> the</c> 00:15:17.269 --> 00:15:17.279 align:start position:0% here but in addition to that we have the 00:15:17.279 --> 00:15:20.150 align:start position:0% here but in addition to that we have the upload<00:15:17.820><c> context</c><00:15:18.240><c> okay</c><00:15:18.660><c> so</c><00:15:19.079><c> it</c><00:15:19.680><c> 'll</c><00:15:19.680><c> show</c><00:15:20.040><c> you</c> 00:15:20.150 --> 00:15:20.160 align:start position:0% upload context okay so it 'll show you 00:15:20.160 --> 00:15:24.470 align:start position:0% upload context okay so it 'll show you what<00:15:20.279><c> the</c><00:15:20.459><c> upload</c><00:15:20.820><c> context</c><00:15:21.180><c> is</c><00:15:21.540><c> let's</c><00:15:22.199><c> open</c><00:15:22.500><c> uh</c> 00:15:24.470 --> 00:15:24.480 align:start position:0% what the upload context is let's open uh 00:15:24.480 --> 00:15:27.530 align:start position:0% what the upload context is let's open uh this<00:15:25.260><c> F</c><00:15:25.560><c> is</c><00:15:26.519><c> this</c><00:15:26.820><c> let's</c><00:15:27.060><c> go</c><00:15:27.240><c> to</c><00:15:27.360><c> the</c> 00:15:27.530 --> 00:15:27.540 align:start position:0% this F is this let's go to the 00:15:27.540 --> 00:15:30.949 align:start position:0% this F is this let's go to the definition<00:15:27.860><c> of</c><00:15:28.860><c> this</c><00:15:29.100><c> thing</c><00:15:29.579><c> okay</c><00:15:30.000><c> this</c> 00:15:30.949 --> 00:15:30.959 align:start position:0% definition of this thing okay this 00:15:30.959 --> 00:15:33.350 align:start position:0% definition of this thing okay this environment<00:15:31.620><c> variable</c><00:15:32.040><c> interface</c><00:15:32.579><c> you</c><00:15:33.240><c> have</c> 00:15:33.350 --> 00:15:33.360 align:start position:0% environment variable interface you have 00:15:33.360 --> 00:15:35.090 align:start position:0% environment variable interface you have here<00:15:33.540><c> the</c><00:15:33.779><c> definition</c><00:15:33.959><c> of</c><00:15:34.440><c> the</c><00:15:34.620><c> upload</c> 00:15:35.090 --> 00:15:35.100 align:start position:0% here the definition of the upload 00:15:35.100 --> 00:15:37.129 align:start position:0% here the definition of the upload context<00:15:35.519><c> so</c><00:15:36.240><c> what's</c><00:15:36.480><c> the</c><00:15:36.660><c> difference</c><00:15:36.839><c> between</c> 00:15:37.129 --> 00:15:37.139 align:start position:0% context so what's the difference between 00:15:37.139 --> 00:15:39.769 align:start position:0% context so what's the difference between execution<00:15:37.800><c> context</c><00:15:38.279><c> and</c><00:15:38.579><c> the</c><00:15:38.760><c> upload</c><00:15:39.120><c> context</c> 00:15:39.769 --> 00:15:39.779 align:start position:0% execution context and the upload context 00:15:39.779 --> 00:15:42.650 align:start position:0% execution context and the upload context very<00:15:40.740><c> very</c><00:15:40.920><c> important</c><00:15:41.339><c> thing</c><00:15:41.639><c> to</c><00:15:41.820><c> know</c><00:15:42.000><c> when</c> 00:15:42.650 --> 00:15:42.660 align:start position:0% very very important thing to know when 00:15:42.660 --> 00:15:44.810 align:start position:0% very very important thing to know when you're<00:15:42.839><c> using</c><00:15:43.139><c> remix</c><00:15:43.380><c> okay</c><00:15:43.860><c> so</c><00:15:44.160><c> the</c><00:15:44.339><c> execution</c> 00:15:44.810 --> 00:15:44.820 align:start position:0% you're using remix okay so the execution 00:15:44.820 --> 00:15:48.949 align:start position:0% you're using remix okay so the execution context<00:15:45.420><c> is</c><00:15:45.959><c> everything</c><00:15:46.860><c> that</c><00:15:47.639><c> uh</c><00:15:48.180><c> cloudflare</c> 00:15:48.949 --> 00:15:48.959 align:start position:0% context is everything that uh cloudflare 00:15:48.959 --> 00:15:51.110 align:start position:0% context is everything that uh cloudflare or<00:15:49.320><c> the</c><00:15:49.440><c> execution</c><00:15:49.860><c> environment</c><00:15:50.519><c> whether</c> 00:15:51.110 --> 00:15:51.120 align:start position:0% or the execution environment whether 00:15:51.120 --> 00:15:52.850 align:start position:0% or the execution environment whether you're<00:15:51.300><c> deploying</c><00:15:51.720><c> to</c><00:15:51.839><c> netlify</c><00:15:52.440><c> or</c> 00:15:52.850 --> 00:15:52.860 align:start position:0% you're deploying to netlify or 00:15:52.860 --> 00:15:55.129 align:start position:0% you're deploying to netlify or cloudflare<00:15:53.459><c> of</c><00:15:53.760><c> yourself</c><00:15:54.000><c> or</c><00:15:54.779><c> in</c><00:15:54.899><c> this</c><00:15:55.019><c> case</c> 00:15:55.129 --> 00:15:55.139 align:start position:0% cloudflare of yourself or in this case 00:15:55.139 --> 00:15:58.269 align:start position:0% cloudflare of yourself or in this case oxygen<00:15:55.740><c> which</c><00:15:56.040><c> is</c><00:15:56.160><c> basically</c><00:15:56.519><c> like</c><00:15:57.000><c> a</c><00:15:57.300><c> Shopify</c> 00:15:58.269 --> 00:15:58.279 align:start position:0% oxygen which is basically like a Shopify 00:15:58.279 --> 00:16:01.490 align:start position:0% oxygen which is basically like a Shopify wrapped<00:15:59.480><c> cloudflare</c><00:16:00.480><c> Walker</c><00:16:00.959><c> environment</c> 00:16:01.490 --> 00:16:01.500 align:start position:0% wrapped cloudflare Walker environment 00:16:01.500 --> 00:16:05.150 align:start position:0% wrapped cloudflare Walker environment okay<00:16:01.920><c> so</c><00:16:02.880><c> everything</c><00:16:03.360><c> that</c><00:16:04.019><c> the</c><00:16:04.260><c> server</c> 00:16:05.150 --> 00:16:05.160 align:start position:0% okay so everything that the server 00:16:05.160 --> 00:16:08.030 align:start position:0% okay so everything that the server injects<00:16:06.120><c> into</c><00:16:06.360><c> your</c><00:16:06.600><c> fetch</c><00:16:07.019><c> function</c><00:16:07.380><c> that's</c> 00:16:08.030 --> 00:16:08.040 align:start position:0% injects into your fetch function that's 00:16:08.040 --> 00:16:09.650 align:start position:0% injects into your fetch function that's what<00:16:08.279><c> is</c><00:16:08.459><c> called</c><00:16:08.579><c> the</c><00:16:08.760><c> execution</c><00:16:09.120><c> context</c> 00:16:09.650 --> 00:16:09.660 align:start position:0% what is called the execution context 00:16:09.660 --> 00:16:13.250 align:start position:0% what is called the execution context okay<00:16:10.040><c> now</c><00:16:11.040><c> for</c><00:16:11.519><c> your</c><00:16:11.760><c> app</c><00:16:12.060><c> context</c><00:16:13.019><c> is</c> 00:16:13.250 --> 00:16:13.260 align:start position:0% okay now for your app context is 00:16:13.260 --> 00:16:16.069 align:start position:0% okay now for your app context is everything<00:16:13.560><c> that</c><00:16:14.040><c> the</c><00:16:14.339><c> loaders</c><00:16:14.760><c> are</c><00:16:15.120><c> using</c><00:16:15.899><c> so</c> 00:16:16.069 --> 00:16:16.079 align:start position:0% everything that the loaders are using so 00:16:16.079 --> 00:16:18.470 align:start position:0% everything that the loaders are using so if<00:16:16.260><c> you</c><00:16:16.380><c> go</c><00:16:16.560><c> for</c><00:16:16.740><c> example</c><00:16:17.040><c> to</c><00:16:17.279><c> products</c> 00:16:18.470 --> 00:16:18.480 align:start position:0% if you go for example to products 00:16:18.480 --> 00:16:20.750 align:start position:0% if you go for example to products dot<00:16:19.139><c> handle</c><00:16:19.440><c> okay</c> 00:16:20.750 --> 00:16:20.760 align:start position:0% dot handle okay 00:16:20.760 --> 00:16:22.970 align:start position:0% dot handle okay this<00:16:21.360><c> is</c><00:16:21.480><c> the</c><00:16:21.720><c> context</c><00:16:22.019><c> this</c><00:16:22.320><c> is</c><00:16:22.500><c> the</c><00:16:22.620><c> upload</c> 00:16:22.970 --> 00:16:22.980 align:start position:0% this is the context this is the upload 00:16:22.980 --> 00:16:24.710 align:start position:0% this is the context this is the upload context<00:16:23.339><c> as</c><00:16:23.579><c> you</c><00:16:23.699><c> can</c><00:16:23.760><c> see</c><00:16:23.880><c> if</c><00:16:24.000><c> I</c><00:16:24.180><c> hover</c><00:16:24.420><c> on</c><00:16:24.600><c> it</c> 00:16:24.710 --> 00:16:24.720 align:start position:0% context as you can see if I hover on it 00:16:24.720 --> 00:16:27.590 align:start position:0% context as you can see if I hover on it you<00:16:24.839><c> see</c><00:16:25.019><c> it</c><00:16:25.380><c> it</c><00:16:25.500><c> says</c><00:16:25.920><c> upload</c><00:16:26.519><c> context</c><00:16:27.000><c> right</c> 00:16:27.590 --> 00:16:27.600 align:start position:0% you see it it says upload context right 00:16:27.600 --> 00:16:30.590 align:start position:0% you see it it says upload context right and<00:16:28.320><c> that</c><00:16:28.560><c> upload</c><00:16:29.040><c> context</c><00:16:29.459><c> as</c><00:16:29.760><c> defined</c><00:16:30.240><c> here</c> 00:16:30.590 --> 00:16:30.600 align:start position:0% and that upload context as defined here 00:16:30.600 --> 00:16:33.710 align:start position:0% and that upload context as defined here has<00:16:31.560><c> four</c><00:16:31.920><c> five</c><00:16:32.519><c> things</c><00:16:32.760><c> in</c><00:16:32.940><c> it</c><00:16:33.120><c> it</c><00:16:33.300><c> has</c><00:16:33.480><c> the</c> 00:16:33.710 --> 00:16:33.720 align:start position:0% has four five things in it it has the 00:16:33.720 --> 00:16:35.990 align:start position:0% has four five things in it it has the environment<00:16:34.079><c> variables</c><00:16:34.740><c> okay</c><00:16:35.339><c> all</c><00:16:35.760><c> the</c> 00:16:35.990 --> 00:16:36.000 align:start position:0% environment variables okay all the 00:16:36.000 --> 00:16:37.790 align:start position:0% environment variables okay all the environment<00:16:36.300><c> variables</c><00:16:36.779><c> are</c><00:16:37.079><c> necessary</c><00:16:37.500><c> for</c> 00:16:37.790 --> 00:16:37.800 align:start position:0% environment variables are necessary for 00:16:37.800 --> 00:16:40.730 align:start position:0% environment variables are necessary for the<00:16:37.980><c> storefront</c><00:16:38.399><c> to</c><00:16:38.639><c> run</c><00:16:39.300><c> and</c><00:16:40.019><c> these</c><00:16:40.320><c> are</c><00:16:40.440><c> like</c> 00:16:40.730 --> 00:16:40.740 align:start position:0% the storefront to run and these are like 00:16:40.740 --> 00:16:43.430 align:start position:0% the storefront to run and these are like I<00:16:40.860><c> said</c><00:16:40.980><c> earlier</c><00:16:41.339><c> bindings</c><00:16:42.060><c> injected</c> 00:16:43.430 --> 00:16:43.440 align:start position:0% I said earlier bindings injected 00:16:43.440 --> 00:16:45.769 align:start position:0% I said earlier bindings injected from<00:16:44.040><c> here</c><00:16:44.279><c> okay</c><00:16:44.699><c> these</c><00:16:45.180><c> are</c><00:16:45.360><c> bindings</c> 00:16:45.769 --> 00:16:45.779 align:start position:0% from here okay these are bindings 00:16:45.779 --> 00:16:48.769 align:start position:0% from here okay these are bindings injected<00:16:46.440><c> into</c><00:16:46.860><c> your</c><00:16:47.100><c> fetch</c><00:16:47.459><c> function</c><00:16:47.820><c> by</c><00:16:48.600><c> the</c> 00:16:48.769 --> 00:16:48.779 align:start position:0% injected into your fetch function by the 00:16:48.779 --> 00:16:51.769 align:start position:0% injected into your fetch function by the cloudflare<00:16:49.320><c> walker</c><00:16:50.160><c> okay</c><00:16:50.519><c> so</c><00:16:51.360><c> these</c><00:16:51.660><c> are</c> 00:16:51.769 --> 00:16:51.779 align:start position:0% cloudflare walker okay so these are 00:16:51.779 --> 00:16:53.569 align:start position:0% cloudflare walker okay so these are automatically<00:16:52.259><c> injected</c><00:16:52.800><c> into</c><00:16:53.040><c> your</c><00:16:53.279><c> cloth</c> 00:16:53.569 --> 00:16:53.579 align:start position:0% automatically injected into your cloth 00:16:53.579 --> 00:16:55.249 align:start position:0% automatically injected into your cloth into<00:16:53.820><c> your</c><00:16:54.060><c> fetch</c><00:16:54.360><c> function</c><00:16:54.600><c> by</c><00:16:54.839><c> cloudflare</c> 00:16:55.249 --> 00:16:55.259 align:start position:0% into your fetch function by cloudflare 00:16:55.259 --> 00:16:56.870 align:start position:0% into your fetch function by cloudflare but<00:16:55.560><c> you</c><00:16:55.680><c> need</c><00:16:55.800><c> to</c><00:16:55.920><c> define</c><00:16:56.100><c> the</c><00:16:56.399><c> interface</c> 00:16:56.870 --> 00:16:56.880 align:start position:0% but you need to define the interface 00:16:56.880 --> 00:16:59.569 align:start position:0% but you need to define the interface here<00:16:57.120><c> to</c><00:16:57.360><c> have</c><00:16:57.540><c> types</c><00:16:58.019><c> okay</c><00:16:58.500><c> then</c><00:16:59.220><c> you</c><00:16:59.459><c> have</c> 00:16:59.569 --> 00:16:59.579 align:start position:0% here to have types okay then you have 00:16:59.579 --> 00:17:02.509 align:start position:0% here to have types okay then you have your<00:16:59.820><c> card</c><00:17:00.000><c> okay</c><00:17:00.600><c> you</c><00:17:01.500><c> have</c><00:17:01.620><c> your</c><00:17:01.860><c> storefront</c> 00:17:02.509 --> 00:17:02.519 align:start position:0% your card okay you have your storefront 00:17:02.519 --> 00:17:04.549 align:start position:0% your card okay you have your storefront you<00:17:02.880><c> have</c><00:17:03.000><c> your</c><00:17:03.180><c> session</c><00:17:03.420><c> which</c><00:17:04.020><c> is</c><00:17:04.199><c> basically</c> 00:17:04.549 --> 00:17:04.559 align:start position:0% you have your session which is basically 00:17:04.559 --> 00:17:06.650 align:start position:0% you have your session which is basically load<00:17:04.980><c> handling</c><00:17:05.520><c> the</c><00:17:05.640><c> authentication</c><00:17:06.179><c> for</c><00:17:06.540><c> you</c> 00:17:06.650 --> 00:17:06.660 align:start position:0% load handling the authentication for you 00:17:06.660 --> 00:17:09.049 align:start position:0% load handling the authentication for you and<00:17:07.140><c> you</c><00:17:07.319><c> have</c><00:17:07.439><c> that</c><00:17:07.919><c> weight</c><00:17:08.100><c> until</c><00:17:08.520><c> function</c> 00:17:09.049 --> 00:17:09.059 align:start position:0% and you have that weight until function 00:17:09.059 --> 00:17:10.870 align:start position:0% and you have that weight until function that<00:17:09.299><c> I</c><00:17:09.540><c> explained</c><00:17:09.839><c> earlier</c><00:17:10.140><c> right</c><00:17:10.380><c> because</c> 00:17:10.870 --> 00:17:10.880 align:start position:0% that I explained earlier right because 00:17:10.880 --> 00:17:13.689 align:start position:0% that I explained earlier right because sometimes<00:17:11.880><c> you</c><00:17:12.360><c> need</c><00:17:12.720><c> to</c> 00:17:13.689 --> 00:17:13.699 align:start position:0% sometimes you need to 00:17:13.699 --> 00:17:17.150 align:start position:0% sometimes you need to most<00:17:14.699><c> of</c><00:17:14.880><c> the</c><00:17:15.000><c> time</c><00:17:15.179><c> I</c><00:17:15.959><c> highly</c><00:17:16.319><c> recommend</c><00:17:16.740><c> to</c> 00:17:17.150 --> 00:17:17.160 align:start position:0% most of the time I highly recommend to 00:17:17.160 --> 00:17:19.850 align:start position:0% most of the time I highly recommend to have<00:17:17.819><c> that</c><00:17:18.240><c> wait</c><00:17:18.720><c> until</c><00:17:18.959><c> in</c><00:17:19.439><c> your</c><00:17:19.620><c> services</c> 00:17:19.850 --> 00:17:19.860 align:start position:0% have that wait until in your services 00:17:19.860 --> 00:17:22.250 align:start position:0% have that wait until in your services like<00:17:20.520><c> like</c><00:17:20.760><c> the</c><00:17:21.000><c> storefront</c><00:17:21.480><c> service</c><00:17:21.780><c> the</c> 00:17:22.250 --> 00:17:22.260 align:start position:0% like like the storefront service the 00:17:22.260 --> 00:17:24.710 align:start position:0% like like the storefront service the card<00:17:22.439><c> service</c><00:17:22.799><c> but</c><00:17:23.699><c> sometimes</c><00:17:24.179><c> you</c><00:17:24.419><c> need</c><00:17:24.600><c> to</c> 00:17:24.710 --> 00:17:24.720 align:start position:0% card service but sometimes you need to 00:17:24.720 --> 00:17:27.949 align:start position:0% card service but sometimes you need to have<00:17:24.959><c> them</c><00:17:25.319><c> a</c><00:17:25.799><c> bit</c><00:17:25.980><c> more</c><00:17:26.160><c> granularity</c><00:17:26.880><c> on</c><00:17:27.780><c> how</c> 00:17:27.949 --> 00:17:27.959 align:start position:0% have them a bit more granularity on how 00:17:27.959 --> 00:17:29.990 align:start position:0% have them a bit more granularity on how you<00:17:28.079><c> use</c><00:17:28.260><c> the</c><00:17:28.439><c> weight</c><00:17:28.799><c> until</c><00:17:29.100><c> function</c><00:17:29.580><c> so</c><00:17:29.820><c> you</c> 00:17:29.990 --> 00:17:30.000 align:start position:0% you use the weight until function so you 00:17:30.000 --> 00:17:31.909 align:start position:0% you use the weight until function so you need<00:17:30.059><c> to</c><00:17:30.179><c> pass</c><00:17:30.419><c> that</c><00:17:30.660><c> as</c><00:17:30.840><c> well</c><00:17:31.080><c> into</c><00:17:31.500><c> your</c> 00:17:31.909 --> 00:17:31.919 align:start position:0% need to pass that as well into your 00:17:31.919 --> 00:17:34.490 align:start position:0% need to pass that as well into your loaders<00:17:32.580><c> and</c><00:17:32.760><c> actions</c><00:17:33.240><c> and</c><00:17:34.080><c> in</c><00:17:34.320><c> this</c> 00:17:34.490 --> 00:17:34.500 align:start position:0% loaders and actions and in this 00:17:34.500 --> 00:17:36.110 align:start position:0% loaders and actions and in this particular<00:17:34.740><c> case</c><00:17:35.039><c> we</c><00:17:35.400><c> don't</c><00:17:35.520><c> need</c><00:17:35.700><c> we</c><00:17:35.940><c> don't</c> 00:17:36.110 --> 00:17:36.120 align:start position:0% particular case we don't need we don't 00:17:36.120 --> 00:17:37.909 align:start position:0% particular case we don't need we don't use<00:17:36.299><c> I</c><00:17:36.539><c> think</c><00:17:36.720><c> this</c><00:17:36.900><c> uh</c> 00:17:37.909 --> 00:17:37.919 align:start position:0% use I think this uh 00:17:37.919 --> 00:17:40.430 align:start position:0% use I think this uh in<00:17:38.460><c> this</c><00:17:38.580><c> Lotus</c><00:17:39.059><c> but</c><00:17:39.299><c> some</c><00:17:39.600><c> of</c><00:17:39.780><c> the</c><00:17:39.840><c> loaders</c><00:17:40.260><c> in</c> 00:17:40.430 --> 00:17:40.440 align:start position:0% in this Lotus but some of the loaders in 00:17:40.440 --> 00:17:42.049 align:start position:0% in this Lotus but some of the loaders in this<00:17:40.559><c> app</c><00:17:40.799><c> do</c><00:17:41.100><c> and</c><00:17:41.460><c> we're</c><00:17:41.640><c> going</c><00:17:41.760><c> to</c><00:17:41.880><c> have</c><00:17:41.940><c> a</c> 00:17:42.049 --> 00:17:42.059 align:start position:0% this app do and we're going to have a 00:17:42.059 --> 00:17:43.730 align:start position:0% this app do and we're going to have a look<00:17:42.179><c> at</c><00:17:42.299><c> them</c><00:17:42.419><c> in</c><00:17:42.600><c> subsequent</c><00:17:43.140><c> videos</c><00:17:43.320><c> I'm</c> 00:17:43.730 --> 00:17:43.740 align:start position:0% look at them in subsequent videos I'm 00:17:43.740 --> 00:17:47.750 align:start position:0% look at them in subsequent videos I'm I'm<00:17:44.100><c> sure</c><00:17:44.640><c> so</c><00:17:45.600><c> uh</c><00:17:46.559><c> this</c><00:17:46.860><c> is</c><00:17:46.919><c> the</c><00:17:47.160><c> this</c><00:17:47.400><c> is</c><00:17:47.520><c> this</c> 00:17:47.750 --> 00:17:47.760 align:start position:0% I'm sure so uh this is the this is this 00:17:47.760 --> 00:17:49.070 align:start position:0% I'm sure so uh this is the this is this is<00:17:47.820><c> the</c><00:17:47.880><c> difference</c><00:17:48.059><c> between</c><00:17:48.360><c> an</c><00:17:48.600><c> upload</c> 00:17:49.070 --> 00:17:49.080 align:start position:0% is the difference between an upload 00:17:49.080 --> 00:17:51.830 align:start position:0% is the difference between an upload context<00:17:49.500><c> and</c><00:17:49.919><c> the</c><00:17:50.100><c> serve</c><00:17:50.520><c> the</c><00:17:50.700><c> execution</c><00:17:51.120><c> uh</c> 00:17:51.830 --> 00:17:51.840 align:start position:0% context and the serve the execution uh 00:17:51.840 --> 00:17:54.049 align:start position:0% context and the serve the execution uh context<00:17:52.260><c> okay</c><00:17:52.559><c> and</c><00:17:53.220><c> one</c><00:17:53.460><c> thing</c><00:17:53.580><c> that's</c><00:17:53.760><c> very</c> 00:17:54.049 --> 00:17:54.059 align:start position:0% context okay and one thing that's very 00:17:54.059 --> 00:17:56.570 align:start position:0% context okay and one thing that's very important<00:17:54.480><c> to</c><00:17:54.780><c> know</c><00:17:54.900><c> is</c><00:17:55.440><c> that</c><00:17:55.679><c> the</c><00:17:56.460><c> the</c> 00:17:56.570 --> 00:17:56.580 align:start position:0% important to know is that the the 00:17:56.580 --> 00:17:59.029 align:start position:0% important to know is that the the environment<00:17:57.120><c> variables</c><00:17:57.660><c> like</c> 00:17:59.029 --> 00:17:59.039 align:start position:0% environment variables like 00:17:59.039 --> 00:18:02.510 align:start position:0% environment variables like the<00:17:59.760><c> way</c><00:17:59.940><c> environment</c><00:18:00.539><c> variables</c><00:18:01.140><c> walk</c><00:18:01.620><c> in</c> 00:18:02.510 --> 00:18:02.520 align:start position:0% the way environment variables walk in 00:18:02.520 --> 00:18:05.029 align:start position:0% the way environment variables walk in cloudflare<00:18:03.299><c> a</c><00:18:03.660><c> bit</c><00:18:03.780><c> different</c><00:18:04.020><c> to</c><00:18:04.740><c> the</c><00:18:04.919><c> way</c> 00:18:05.029 --> 00:18:05.039 align:start position:0% cloudflare a bit different to the way 00:18:05.039 --> 00:18:09.650 align:start position:0% cloudflare a bit different to the way they<00:18:05.340><c> work</c><00:18:05.580><c> in</c><00:18:06.620><c> in</c><00:18:07.620><c> node</c><00:18:08.580><c> for</c><00:18:09.000><c> example</c><00:18:09.299><c> in</c><00:18:09.480><c> the</c> 00:18:09.650 --> 00:18:09.660 align:start position:0% they work in in node for example in the 00:18:09.660 --> 00:18:10.970 align:start position:0% they work in in node for example in the node<00:18:09.900><c> project</c><00:18:10.080><c> if</c><00:18:10.440><c> you're</c><00:18:10.559><c> familiar</c><00:18:10.860><c> with</c> 00:18:10.970 --> 00:18:10.980 align:start position:0% node project if you're familiar with 00:18:10.980 --> 00:18:13.310 align:start position:0% node project if you're familiar with node<00:18:11.340><c> you</c><00:18:12.059><c> know</c><00:18:12.539><c> that</c><00:18:12.840><c> pretty</c><00:18:13.140><c> much</c> 00:18:13.310 --> 00:18:13.320 align:start position:0% node you know that pretty much 00:18:13.320 --> 00:18:15.730 align:start position:0% node you know that pretty much everywhere<00:18:13.860><c> in</c><00:18:14.160><c> your</c><00:18:14.340><c> app</c><00:18:14.580><c> if</c><00:18:15.240><c> you</c><00:18:15.480><c> do</c> 00:18:15.730 --> 00:18:15.740 align:start position:0% everywhere in your app if you do 00:18:15.740 --> 00:18:18.490 align:start position:0% everywhere in your app if you do process.f<00:18:16.740><c> that</c><00:18:17.160><c> say</c><00:18:17.400><c> I</c><00:18:17.580><c> don't</c><00:18:17.760><c> know</c> 00:18:18.490 --> 00:18:18.500 align:start position:0% process.f that say I don't know 00:18:18.500 --> 00:18:21.840 align:start position:0% process.f that say I don't know server<00:18:19.500><c> I</c><00:18:20.220><c> don't</c><00:18:20.340><c> know</c><00:18:20.460><c> Shopify</c> 00:18:21.840 --> 00:18:21.850 align:start position:0% server I don't know Shopify 00:18:21.850 --> 00:18:22.970 align:start position:0% server I don't know Shopify [Music] 00:18:22.970 --> 00:18:22.980 align:start position:0% [Music] 00:18:22.980 --> 00:18:26.230 align:start position:0% [Music] Shopify<00:18:23.760><c> storefront</c> 00:18:26.230 --> 00:18:26.240 align:start position:0% Shopify storefront 00:18:26.240 --> 00:18:29.230 align:start position:0% Shopify storefront storefront<00:18:27.240><c> API</c> 00:18:29.230 --> 00:18:29.240 align:start position:0% storefront API 00:18:29.240 --> 00:18:32.810 align:start position:0% storefront API URL<00:18:30.240><c> or</c><00:18:30.539><c> API</c><00:18:30.960><c> key</c><00:18:31.260><c> okay</c><00:18:31.740><c> you</c><00:18:32.340><c> will</c><00:18:32.520><c> have</c><00:18:32.700><c> access</c> 00:18:32.810 --> 00:18:32.820 align:start position:0% URL or API key okay you will have access 00:18:32.820 --> 00:18:34.549 align:start position:0% URL or API key okay you will have access to<00:18:33.120><c> this</c><00:18:33.240><c> environment</c><00:18:33.660><c> variable</c><00:18:34.020><c> anywhere</c><00:18:34.440><c> in</c> 00:18:34.549 --> 00:18:34.559 align:start position:0% to this environment variable anywhere in 00:18:34.559 --> 00:18:36.770 align:start position:0% to this environment variable anywhere in the<00:18:34.679><c> code</c><00:18:34.860><c> okay</c><00:18:35.280><c> but</c><00:18:35.880><c> that's</c><00:18:36.179><c> not</c><00:18:36.419><c> going</c><00:18:36.660><c> to</c> 00:18:36.770 --> 00:18:36.780 align:start position:0% the code okay but that's not going to 00:18:36.780 --> 00:18:39.710 align:start position:0% the code okay but that's not going to work<00:18:36.960><c> if</c><00:18:37.440><c> you</c><00:18:37.620><c> are</c><00:18:37.799><c> using</c><00:18:38.160><c> cloudflare</c><00:18:38.760><c> which</c> 00:18:39.710 --> 00:18:39.720 align:start position:0% work if you are using cloudflare which 00:18:39.720 --> 00:18:42.350 align:start position:0% work if you are using cloudflare which is<00:18:39.900><c> basically</c><00:18:40.260><c> what</c><00:18:40.559><c> oxygen</c><00:18:41.400><c> is</c><00:18:41.640><c> under</c><00:18:42.120><c> the</c> 00:18:42.350 --> 00:18:42.360 align:start position:0% is basically what oxygen is under the 00:18:42.360 --> 00:18:44.330 align:start position:0% is basically what oxygen is under the under<00:18:42.600><c> the</c><00:18:42.840><c> hood</c><00:18:42.900><c> right</c><00:18:43.140><c> it's</c><00:18:43.799><c> not</c><00:18:44.039><c> going</c><00:18:44.220><c> to</c> 00:18:44.330 --> 00:18:44.340 align:start position:0% under the hood right it's not going to 00:18:44.340 --> 00:18:46.850 align:start position:0% under the hood right it's not going to work<00:18:44.460><c> so</c><00:18:44.760><c> that's</c><00:18:44.880><c> why</c><00:18:45.120><c> it's</c><00:18:45.240><c> very</c><00:18:45.539><c> important</c> 00:18:46.850 --> 00:18:46.860 align:start position:0% work so that's why it's very important 00:18:46.860 --> 00:18:49.850 align:start position:0% work so that's why it's very important when<00:18:47.520><c> you're</c><00:18:47.700><c> still</c><00:18:48.000><c> on</c><00:18:48.960><c> in</c><00:18:49.200><c> the</c><00:18:49.380><c> server</c> 00:18:49.850 --> 00:18:49.860 align:start position:0% when you're still on in the server 00:18:49.860 --> 00:18:52.730 align:start position:0% when you're still on in the server context<00:18:50.520><c> here</c><00:18:50.700><c> when</c><00:18:50.940><c> you're</c><00:18:51.120><c> defining</c><00:18:51.740><c> your</c> 00:18:52.730 --> 00:18:52.740 align:start position:0% context here when you're defining your 00:18:52.740 --> 00:18:55.490 align:start position:0% context here when you're defining your server<00:18:53.039><c> context</c><00:18:53.460><c> anything</c><00:18:54.000><c> that</c><00:18:54.960><c> needs</c><00:18:55.200><c> to</c><00:18:55.320><c> be</c> 00:18:55.490 --> 00:18:55.500 align:start position:0% server context anything that needs to be 00:18:55.500 --> 00:18:59.450 align:start position:0% server context anything that needs to be accessed<00:18:56.120><c> by</c><00:18:57.120><c> the</c><00:18:57.419><c> loaders</c><00:18:57.900><c> okay</c><00:18:58.260><c> needs</c><00:18:59.220><c> to</c><00:18:59.280><c> be</c> 00:18:59.450 --> 00:18:59.460 align:start position:0% accessed by the loaders okay needs to be 00:18:59.460 --> 00:19:02.390 align:start position:0% accessed by the loaders okay needs to be provided<00:18:59.880><c> in</c><00:19:00.179><c> this</c><00:19:00.360><c> m</c><00:19:00.600><c> okay</c><00:19:01.380><c> like</c><00:19:01.679><c> like</c><00:19:01.860><c> the</c> 00:19:02.390 --> 00:19:02.400 align:start position:0% provided in this m okay like like the 00:19:02.400 --> 00:19:05.210 align:start position:0% provided in this m okay like like the amp<00:19:02.700><c> that</c><00:19:02.820><c> is</c><00:19:02.940><c> defined</c><00:19:03.299><c> here</c><00:19:03.660><c> okay</c><00:19:04.020><c> it</c><00:19:04.980><c> needs</c> 00:19:05.210 --> 00:19:05.220 align:start position:0% amp that is defined here okay it needs 00:19:05.220 --> 00:19:07.190 align:start position:0% amp that is defined here okay it needs to<00:19:05.340><c> be</c><00:19:05.520><c> it</c><00:19:05.820><c> needs</c><00:19:06.120><c> to</c><00:19:06.179><c> be</c><00:19:06.299><c> added</c><00:19:06.660><c> here</c><00:19:06.840><c> in</c><00:19:07.080><c> the</c> 00:19:07.190 --> 00:19:07.200 align:start position:0% to be it needs to be added here in the 00:19:07.200 --> 00:19:09.110 align:start position:0% to be it needs to be added here in the bindings<00:19:07.559><c> here</c><00:19:07.860><c> like</c><00:19:08.160><c> this</c><00:19:08.340><c> and</c><00:19:08.760><c> then</c><00:19:08.880><c> you</c> 00:19:09.110 --> 00:19:09.120 align:start position:0% bindings here like this and then you 00:19:09.120 --> 00:19:12.529 align:start position:0% bindings here like this and then you need<00:19:09.240><c> to</c><00:19:09.419><c> pass</c><00:19:09.660><c> them</c><00:19:09.900><c> down</c><00:19:10.460><c> into</c><00:19:11.460><c> the</c><00:19:12.059><c> upload</c> 00:19:12.529 --> 00:19:12.539 align:start position:0% need to pass them down into the upload 00:19:12.539 --> 00:19:17.150 align:start position:0% need to pass them down into the upload context<00:19:12.960><c> so</c><00:19:13.679><c> that</c><00:19:13.919><c> they</c><00:19:14.160><c> can</c><00:19:14.340><c> be</c><00:19:14.580><c> used</c><00:19:15.020><c> in</c><00:19:16.020><c> your</c> 00:19:17.150 --> 00:19:17.160 align:start position:0% context so that they can be used in your 00:19:17.160 --> 00:19:19.330 align:start position:0% context so that they can be used in your um<00:19:17.220><c> in</c><00:19:18.000><c> your</c><00:19:18.539><c> um</c> 00:19:19.330 --> 00:19:19.340 align:start position:0% um in your um 00:19:19.340 --> 00:19:22.130 align:start position:0% um in your um uh<00:19:20.340><c> context</c><00:19:21.059><c> I</c><00:19:21.299><c> think</c><00:19:21.480><c> the</c><00:19:21.600><c> best</c><00:19:21.720><c> way</c><00:19:21.840><c> to</c><00:19:22.020><c> have</c> 00:19:22.130 --> 00:19:22.140 align:start position:0% uh context I think the best way to have 00:19:22.140 --> 00:19:23.510 align:start position:0% uh context I think the best way to have a<00:19:22.260><c> look</c><00:19:22.380><c> at</c><00:19:22.500><c> this</c><00:19:22.620><c> is</c><00:19:22.860><c> to</c><00:19:22.980><c> look</c><00:19:23.100><c> at</c><00:19:23.220><c> the</c><00:19:23.340><c> route</c> 00:19:23.510 --> 00:19:23.520 align:start position:0% a look at this is to look at the route 00:19:23.520 --> 00:19:26.810 align:start position:0% a look at this is to look at the route the<00:19:24.179><c> root</c><00:19:24.419><c> route</c><00:19:24.600><c> okay</c><00:19:25.140><c> which</c><00:19:25.620><c> is</c><00:19:25.799><c> this</c><00:19:26.039><c> one</c><00:19:26.160><c> if</c> 00:19:26.810 --> 00:19:26.820 align:start position:0% the root route okay which is this one if 00:19:26.820 --> 00:19:28.430 align:start position:0% the root route okay which is this one if I<00:19:27.059><c> open</c><00:19:27.240><c> the</c><00:19:27.480><c> context</c><00:19:27.780><c> here</c><00:19:27.960><c> you</c><00:19:28.200><c> can</c><00:19:28.320><c> see</c> 00:19:28.430 --> 00:19:28.440 align:start position:0% I open the context here you can see 00:19:28.440 --> 00:19:30.049 align:start position:0% I open the context here you can see we're<00:19:28.679><c> getting</c><00:19:28.919><c> a</c><00:19:29.160><c> lot</c><00:19:29.280><c> more</c><00:19:29.400><c> things</c><00:19:29.700><c> you're</c> 00:19:30.049 --> 00:19:30.059 align:start position:0% we're getting a lot more things you're 00:19:30.059 --> 00:19:31.430 align:start position:0% we're getting a lot more things you're getting<00:19:30.240><c> the</c><00:19:30.480><c> stuff</c><00:19:30.600><c> from</c><00:19:30.900><c> the</c><00:19:31.080><c> section</c><00:19:31.260><c> of</c> 00:19:31.430 --> 00:19:31.440 align:start position:0% getting the stuff from the section of 00:19:31.440 --> 00:19:34.190 align:start position:0% getting the stuff from the section of the<00:19:31.559><c> card</c><00:19:31.679><c> right</c><00:19:32.100><c> so</c><00:19:32.880><c> and</c><00:19:33.059><c> and</c><00:19:33.299><c> if</c><00:19:33.840><c> you</c><00:19:33.900><c> want</c><00:19:34.080><c> it</c> 00:19:34.190 --> 00:19:34.200 align:start position:0% the card right so and and if you want it 00:19:34.200 --> 00:19:36.350 align:start position:0% the card right so and and if you want it we<00:19:34.380><c> can</c><00:19:34.500><c> get</c><00:19:34.620><c> the</c><00:19:34.799><c> interview</c><00:19:34.980><c> as</c><00:19:35.340><c> well</c><00:19:35.520><c> there's</c> 00:19:36.350 --> 00:19:36.360 align:start position:0% we can get the interview as well there's 00:19:36.360 --> 00:19:38.029 align:start position:0% we can get the interview as well there's not<00:19:36.539><c> going</c><00:19:36.660><c> to</c><00:19:36.720><c> be</c><00:19:36.840><c> a</c><00:19:36.960><c> typescript</c><00:19:37.320><c> complaint</c> 00:19:38.029 --> 00:19:38.039 align:start position:0% not going to be a typescript complaint 00:19:38.039 --> 00:19:40.250 align:start position:0% not going to be a typescript complaint and<00:19:38.340><c> I</c><00:19:38.460><c> can't</c><00:19:38.700><c> I</c><00:19:39.360><c> can</c><00:19:39.480><c> have</c><00:19:39.600><c> a</c><00:19:39.780><c> look</c><00:19:39.840><c> I</c><00:19:40.140><c> can</c> 00:19:40.250 --> 00:19:40.260 align:start position:0% and I can't I can have a look I can 00:19:40.260 --> 00:19:41.990 align:start position:0% and I can't I can have a look I can cancel<00:19:40.500><c> log</c><00:19:40.919><c> even</c> 00:19:41.990 --> 00:19:42.000 align:start position:0% cancel log even 00:19:42.000 --> 00:19:46.190 align:start position:0% cancel log even and<00:19:42.419><c> console</c><00:19:42.840><c> log</c><00:19:43.080><c> the</c><00:19:43.500><c> F</c><00:19:44.039><c> thing</c><00:19:44.880><c> okay</c><00:19:45.480><c> I</c><00:19:46.020><c> can</c> 00:19:46.190 --> 00:19:46.200 align:start position:0% and console log the F thing okay I can 00:19:46.200 --> 00:19:48.049 align:start position:0% and console log the F thing okay I can cancel<00:19:46.740><c> log</c><00:19:47.100><c> this</c> 00:19:48.049 --> 00:19:48.059 align:start position:0% cancel log this 00:19:48.059 --> 00:19:52.250 align:start position:0% cancel log this and<00:19:48.600><c> you</c><00:19:48.720><c> see</c><00:19:49.440><c> it's</c><00:19:49.740><c> like</c><00:19:50.520><c> and</c><00:19:51.179><c> then</c><00:19:51.960><c> I'm</c><00:19:52.140><c> gonna</c> 00:19:52.250 --> 00:19:52.260 align:start position:0% and you see it's like and then I'm gonna 00:19:52.260 --> 00:19:55.789 align:start position:0% and you see it's like and then I'm gonna adjust<00:19:52.440><c> some</c><00:19:52.919><c> stringify</c> 00:19:55.789 --> 00:19:55.799 align:start position:0% adjust some stringify 00:19:55.799 --> 00:19:57.590 align:start position:0% adjust some stringify the<00:19:56.100><c> whole</c><00:19:56.280><c> thing</c><00:19:56.520><c> or</c><00:19:56.820><c> device</c><00:19:57.059><c> is</c><00:19:57.299><c> not</c><00:19:57.419><c> going</c> 00:19:57.590 --> 00:19:57.600 align:start position:0% the whole thing or device is not going 00:19:57.600 --> 00:20:02.630 align:start position:0% the whole thing or device is not going to<00:19:57.720><c> be</c><00:19:57.780><c> visible</c><00:19:58.679><c> okay</c><00:19:59.400><c> so</c><00:19:59.700><c> if</c><00:19:59.880><c> I</c><00:20:00.059><c> do</c><00:20:00.179><c> this</c><00:20:00.419><c> okay</c> 00:20:02.630 --> 00:20:02.640 align:start position:0% to be visible okay so if I do this okay 00:20:02.640 --> 00:20:05.330 align:start position:0% to be visible okay so if I do this okay you'll<00:20:03.000><c> see</c><00:20:03.179><c> what</c><00:20:03.360><c> is</c><00:20:03.600><c> provided</c><00:20:04.080><c> to</c><00:20:04.320><c> us</c><00:20:04.500><c> so</c><00:20:05.160><c> if</c> 00:20:05.330 --> 00:20:05.340 align:start position:0% you'll see what is provided to us so if 00:20:05.340 --> 00:20:08.870 align:start position:0% you'll see what is provided to us so if I<00:20:05.640><c> refresh</c><00:20:06.360><c> the</c><00:20:06.539><c> app</c><00:20:06.780><c> very</c><00:20:07.140><c> quickly</c> 00:20:08.870 --> 00:20:08.880 align:start position:0% I refresh the app very quickly 00:20:08.880 --> 00:20:13.549 align:start position:0% I refresh the app very quickly uh<00:20:09.780><c> localhost</c> 00:20:13.549 --> 00:20:13.559 align:start position:0% 00:20:13.559 --> 00:20:14.690 align:start position:0% it's<00:20:13.860><c> like</c> 00:20:14.690 --> 00:20:14.700 align:start position:0% it's like 00:20:14.700 --> 00:20:18.409 align:start position:0% it's like localhost<00:20:15.600><c> like</c><00:20:16.320><c> this</c><00:20:16.679><c> and</c><00:20:17.580><c> I</c><00:20:17.700><c> see</c><00:20:17.880><c> here</c><00:20:18.120><c> you</c> 00:20:18.409 --> 00:20:18.419 align:start position:0% localhost like this and I see here you 00:20:18.419 --> 00:20:20.450 align:start position:0% localhost like this and I see here you see<00:20:18.600><c> all</c><00:20:19.320><c> the</c><00:20:19.500><c> environment</c><00:20:19.799><c> variables</c><00:20:20.280><c> were</c> 00:20:20.450 --> 00:20:20.460 align:start position:0% see all the environment variables were 00:20:20.460 --> 00:20:22.789 align:start position:0% see all the environment variables were printed<00:20:20.820><c> for</c><00:20:21.000><c> me</c><00:20:21.179><c> right</c><00:20:21.600><c> all</c><00:20:22.020><c> of</c><00:20:22.140><c> them</c><00:20:22.320><c> all</c><00:20:22.679><c> of</c> 00:20:22.789 --> 00:20:22.799 align:start position:0% printed for me right all of them all of 00:20:22.799 --> 00:20:24.409 align:start position:0% printed for me right all of them all of the<00:20:22.980><c> environment</c><00:20:23.280><c> variables</c><00:20:23.820><c> are</c><00:20:24.000><c> printed</c> 00:20:24.409 --> 00:20:24.419 align:start position:0% the environment variables are printed 00:20:24.419 --> 00:20:26.870 align:start position:0% the environment variables are printed okay<00:20:24.960><c> so</c><00:20:25.679><c> that's</c><00:20:25.919><c> how</c><00:20:26.160><c> you</c><00:20:26.460><c> pass</c><00:20:26.700><c> in</c> 00:20:26.870 --> 00:20:26.880 align:start position:0% okay so that's how you pass in 00:20:26.880 --> 00:20:28.909 align:start position:0% okay so that's how you pass in environment<00:20:27.360><c> variables</c> 00:20:28.909 --> 00:20:28.919 align:start position:0% environment variables 00:20:28.919 --> 00:20:31.549 align:start position:0% environment variables um<00:20:28.980><c> in</c><00:20:29.580><c> a</c><00:20:29.760><c> in</c><00:20:29.940><c> a</c><00:20:30.120><c> Shopify</c><00:20:30.480><c> hydrogen</c><00:20:31.080><c> store</c><00:20:31.260><c> form</c> 00:20:31.549 --> 00:20:31.559 align:start position:0% um in a in a Shopify hydrogen store form 00:20:31.559 --> 00:20:33.710 align:start position:0% um in a in a Shopify hydrogen store form if<00:20:32.160><c> you</c><00:20:32.340><c> do</c><00:20:32.580><c> that</c><00:20:32.760><c> the</c><00:20:33.059><c> way</c><00:20:33.179><c> you</c><00:20:33.419><c> do</c><00:20:33.660><c> it</c> 00:20:33.710 --> 00:20:33.720 align:start position:0% if you do that the way you do it 00:20:33.720 --> 00:20:35.570 align:start position:0% if you do that the way you do it normally<00:20:34.080><c> node</c><00:20:34.500><c> is</c><00:20:34.679><c> not</c><00:20:34.860><c> going</c><00:20:35.100><c> to</c><00:20:35.220><c> work</c><00:20:35.340><c> at</c> 00:20:35.570 --> 00:20:35.580 align:start position:0% normally node is not going to work at 00:20:35.580 --> 00:20:38.090 align:start position:0% normally node is not going to work at all<00:20:35.760><c> right</c><00:20:36.179><c> so</c><00:20:36.900><c> I</c><00:20:37.080><c> hope</c><00:20:37.200><c> I</c><00:20:37.380><c> hope</c><00:20:37.620><c> I</c><00:20:37.799><c> hope</c><00:20:37.980><c> you</c> 00:20:38.090 --> 00:20:38.100 align:start position:0% all right so I hope I hope I hope you 00:20:38.100 --> 00:20:40.070 align:start position:0% all right so I hope I hope I hope you get<00:20:38.280><c> the</c><00:20:38.400><c> point</c><00:20:38.580><c> obviously</c><00:20:39.360><c> while</c><00:20:39.840><c> you're</c> 00:20:40.070 --> 00:20:40.080 align:start position:0% get the point obviously while you're 00:20:40.080 --> 00:20:41.210 align:start position:0% get the point obviously while you're still 00:20:41.210 --> 00:20:41.220 align:start position:0% still 00:20:41.220 --> 00:20:43.970 align:start position:0% still in<00:20:41.940><c> the</c><00:20:42.120><c> server</c><00:20:42.419><c> context</c><00:20:42.780><c> in</c><00:20:43.020><c> the</c><00:20:43.140><c> server.ts</c> 00:20:43.970 --> 00:20:43.980 align:start position:0% in the server context in the server.ts 00:20:43.980 --> 00:20:44.810 align:start position:0% in the server context in the server.ts file 00:20:44.810 --> 00:20:44.820 align:start position:0% file 00:20:44.820 --> 00:20:47.810 align:start position:0% file the<00:20:45.419><c> process</c><00:20:45.660><c> because</c><00:20:46.160><c> here</c><00:20:47.160><c> you</c><00:20:47.460><c> still</c><00:20:47.580><c> have</c> 00:20:47.810 --> 00:20:47.820 align:start position:0% the process because here you still have 00:20:47.820 --> 00:20:49.510 align:start position:0% the process because here you still have access<00:20:48.059><c> to</c> 00:20:49.510 --> 00:20:49.520 align:start position:0% access to 00:20:49.520 --> 00:20:52.549 align:start position:0% access to process.n.node<00:20:50.520><c> M</c><00:20:50.820><c> okay</c><00:20:51.179><c> but</c><00:20:51.900><c> anywhere</c><00:20:52.380><c> else</c> 00:20:52.549 --> 00:20:52.559 align:start position:0% process.n.node M okay but anywhere else 00:20:52.559 --> 00:20:54.169 align:start position:0% process.n.node M okay but anywhere else apart<00:20:53.160><c> from</c><00:20:53.280><c> this</c><00:20:53.460><c> file</c><00:20:53.700><c> you</c><00:20:53.880><c> don't</c><00:20:54.000><c> have</c> 00:20:54.169 --> 00:20:54.179 align:start position:0% apart from this file you don't have 00:20:54.179 --> 00:20:56.409 align:start position:0% apart from this file you don't have access<00:20:54.360><c> to</c><00:20:54.600><c> this</c><00:20:54.840><c> anymore</c><00:20:55.020><c> so</c><00:20:55.860><c> you</c><00:20:56.100><c> need</c> 00:20:56.409 --> 00:20:56.419 align:start position:0% access to this anymore so you need 00:20:56.419 --> 00:20:59.810 align:start position:0% access to this anymore so you need anything<00:20:57.419><c> that</c><00:20:58.380><c> you</c><00:20:58.559><c> any</c><00:20:59.280><c> environment</c><00:20:59.640><c> value</c> 00:20:59.810 --> 00:20:59.820 align:start position:0% anything that you any environment value 00:20:59.820 --> 00:21:02.029 align:start position:0% anything that you any environment value you<00:21:00.120><c> think</c><00:21:00.299><c> you</c><00:21:00.419><c> need</c><00:21:00.720><c> have</c><00:21:00.960><c> need</c><00:21:01.200><c> for</c><00:21:01.440><c> you</c> 00:21:02.029 --> 00:21:02.039 align:start position:0% you think you need have need for you 00:21:02.039 --> 00:21:05.330 align:start position:0% you think you need have need for you need<00:21:02.160><c> to</c><00:21:02.340><c> add</c><00:21:03.240><c> them</c><00:21:03.419><c> to</c><00:21:03.720><c> this</c><00:21:03.960><c> amp</c><00:21:04.559><c> obviously</c> 00:21:05.330 --> 00:21:05.340 align:start position:0% need to add them to this amp obviously 00:21:05.340 --> 00:21:07.190 align:start position:0% need to add them to this amp obviously in<00:21:05.460><c> this</c><00:21:05.580><c> case</c><00:21:05.700><c> we</c><00:21:06.000><c> are</c><00:21:06.179><c> basically</c><00:21:06.419><c> only</c><00:21:06.840><c> we're</c> 00:21:07.190 --> 00:21:07.200 align:start position:0% in this case we are basically only we're 00:21:07.200 --> 00:21:09.409 align:start position:0% in this case we are basically only we're only<00:21:07.440><c> using</c><00:21:07.799><c> the</c><00:21:08.039><c> amp</c><00:21:08.400><c> that</c><00:21:08.580><c> was</c><00:21:08.760><c> defined</c><00:21:09.240><c> in</c> 00:21:09.409 --> 00:21:09.419 align:start position:0% only using the amp that was defined in 00:21:09.419 --> 00:21:16.090 align:start position:0% only using the amp that was defined in the<00:21:09.600><c> bindings</c><00:21:10.020><c> by</c> 00:21:16.090 --> 00:21:16.100 align:start position:0% 00:21:16.100 --> 00:21:19.370 align:start position:0% Walker<00:21:17.100><c> environment</c><00:21:17.520><c> or</c><00:21:18.480><c> in</c><00:21:18.660><c> the</c><00:21:18.840><c> Shopify</c> 00:21:19.370 --> 00:21:19.380 align:start position:0% Walker environment or in the Shopify 00:21:19.380 --> 00:21:20.990 align:start position:0% Walker environment or in the Shopify oxygen<00:21:20.039><c> environment</c><00:21:20.460><c> and</c><00:21:20.760><c> then</c><00:21:20.820><c> we're</c> 00:21:20.990 --> 00:21:21.000 align:start position:0% oxygen environment and then we're 00:21:21.000 --> 00:21:23.690 align:start position:0% oxygen environment and then we're passing<00:21:21.419><c> them</c><00:21:21.539><c> like</c><00:21:21.780><c> this</c><00:21:22.020><c> okay</c><00:21:22.620><c> but</c><00:21:23.220><c> yeah</c> 00:21:23.690 --> 00:21:23.700 align:start position:0% passing them like this okay but yeah 00:21:23.700 --> 00:21:25.909 align:start position:0% passing them like this okay but yeah that's<00:21:24.000><c> basically</c><00:21:24.360><c> it</c><00:21:24.600><c> in</c><00:21:25.020><c> terms</c><00:21:25.200><c> of</c><00:21:25.380><c> what</c> 00:21:25.909 --> 00:21:25.919 align:start position:0% that's basically it in terms of what 00:21:25.919 --> 00:21:28.130 align:start position:0% that's basically it in terms of what this<00:21:26.100><c> is</c><00:21:26.280><c> the</c><00:21:26.520><c> difference</c><00:21:26.700><c> between</c><00:21:27.140><c> execution</c> 00:21:28.130 --> 00:21:28.140 align:start position:0% this is the difference between execution 00:21:28.140 --> 00:21:30.049 align:start position:0% this is the difference between execution context<00:21:28.620><c> and</c><00:21:28.860><c> upload</c><00:21:29.220><c> context</c><00:21:29.580><c> I</c><00:21:29.760><c> hope</c><00:21:29.880><c> that</c> 00:21:30.049 --> 00:21:30.059 align:start position:0% context and upload context I hope that 00:21:30.059 --> 00:21:32.149 align:start position:0% context and upload context I hope that it's<00:21:30.179><c> clear</c><00:21:30.419><c> and</c><00:21:31.020><c> one</c><00:21:31.260><c> more</c><00:21:31.440><c> important</c><00:21:31.860><c> thing</c> 00:21:32.149 --> 00:21:32.159 align:start position:0% it's clear and one more important thing 00:21:32.159 --> 00:21:35.930 align:start position:0% it's clear and one more important thing is<00:21:32.460><c> in</c><00:21:33.299><c> that</c><00:21:33.539><c> in</c><00:21:33.720><c> that</c><00:21:33.900><c> in</c><00:21:34.140><c> that</c><00:21:34.380><c> same</c><00:21:35.039><c> um</c><00:21:35.460><c> train</c> 00:21:35.930 --> 00:21:35.940 align:start position:0% is in that in that in that same um train 00:21:35.940 --> 00:21:39.049 align:start position:0% is in that in that in that same um train of<00:21:36.179><c> thoughts</c><00:21:36.539><c> is</c><00:21:37.260><c> that</c><00:21:37.919><c> because</c><00:21:38.580><c> you</c><00:21:39.000><c> can't</c> 00:21:39.049 --> 00:21:39.059 align:start position:0% of thoughts is that because you can't 00:21:39.059 --> 00:21:40.190 align:start position:0% of thoughts is that because you can't have<00:21:39.299><c> access</c><00:21:39.480><c> to</c><00:21:39.780><c> your</c><00:21:39.900><c> environment</c> 00:21:40.190 --> 00:21:40.200 align:start position:0% have access to your environment 00:21:40.200 --> 00:21:42.169 align:start position:0% have access to your environment libraries<00:21:40.679><c> it's</c><00:21:40.860><c> very</c><00:21:41.100><c> important</c><00:21:41.460><c> that</c><00:21:41.820><c> all</c> 00:21:42.169 --> 00:21:42.179 align:start position:0% libraries it's very important that all 00:21:42.179 --> 00:21:46.250 align:start position:0% libraries it's very important that all your<00:21:42.360><c> service</c><00:21:43.460><c> all</c><00:21:44.460><c> your</c><00:21:44.700><c> services</c><00:21:45.020><c> like</c><00:21:46.020><c> the</c> 00:21:46.250 --> 00:21:46.260 align:start position:0% your service all your services like the 00:21:46.260 --> 00:21:49.190 align:start position:0% your service all your services like the storefront<00:21:46.740><c> API</c><00:21:47.400><c> the</c><00:21:48.120><c> card</c><00:21:48.240><c> and</c><00:21:48.539><c> if</c><00:21:48.720><c> you</c><00:21:48.840><c> had</c><00:21:49.020><c> a</c> 00:21:49.190 --> 00:21:49.200 align:start position:0% storefront API the card and if you had a 00:21:49.200 --> 00:21:50.930 align:start position:0% storefront API the card and if you had a CMS<00:21:49.620><c> you're</c><00:21:49.860><c> going</c><00:21:50.039><c> to</c><00:21:50.159><c> have</c><00:21:50.220><c> like</c><00:21:50.460><c> a</c><00:21:50.700><c> cost</c> 00:21:50.930 --> 00:21:50.940 align:start position:0% CMS you're going to have like a cost 00:21:50.940 --> 00:21:53.750 align:start position:0% CMS you're going to have like a cost let's<00:21:51.419><c> say</c><00:21:51.600><c> You're</c><00:21:52.080><c> Gonna</c><00:21:52.320><c> Define</c><00:21:52.500><c> a</c><00:21:52.860><c> CMS</c><00:21:53.340><c> like</c> 00:21:53.750 --> 00:21:53.760 align:start position:0% let's say You're Gonna Define a CMS like 00:21:53.760 --> 00:21:56.570 align:start position:0% let's say You're Gonna Define a CMS like this<00:21:53.940><c> CMS</c><00:21:54.480><c> service</c><00:21:54.840><c> something</c><00:21:55.440><c> like</c><00:21:55.740><c> that</c><00:21:55.919><c> and</c> 00:21:56.570 --> 00:21:56.580 align:start position:0% this CMS service something like that and 00:21:56.580 --> 00:21:57.830 align:start position:0% this CMS service something like that and you're<00:21:56.700><c> gonna</c><00:21:56.880><c> have</c> 00:21:57.830 --> 00:21:57.840 align:start position:0% you're gonna have 00:21:57.840 --> 00:22:00.950 align:start position:0% you're gonna have um CMS<00:21:58.799><c> service</c><00:21:59.220><c> sorry</c><00:21:59.760><c> and</c><00:22:00.659><c> you're</c><00:22:00.780><c> gonna</c> 00:22:00.950 --> 00:22:00.960 align:start position:0% um CMS service sorry and you're gonna 00:22:00.960 --> 00:22:02.810 align:start position:0% um CMS service sorry and you're gonna have<00:22:01.320><c> like</c><00:22:01.919><c> um</c><00:22:01.919><c> let's</c><00:22:02.280><c> say</c><00:22:02.460><c> I</c><00:22:02.580><c> don't</c><00:22:02.760><c> know</c> 00:22:02.810 --> 00:22:02.820 align:start position:0% have like um let's say I don't know 00:22:02.820 --> 00:22:03.970 align:start position:0% have like um let's say I don't know sanity 00:22:03.970 --> 00:22:03.980 align:start position:0% sanity 00:22:03.980 --> 00:22:06.590 align:start position:0% sanity client<00:22:04.980><c> okay</c><00:22:05.640><c> and</c><00:22:05.820><c> then</c><00:22:06.000><c> you're</c><00:22:06.120><c> gonna</c><00:22:06.299><c> pass</c> 00:22:06.590 --> 00:22:06.600 align:start position:0% client okay and then you're gonna pass 00:22:06.600 --> 00:22:09.049 align:start position:0% client okay and then you're gonna pass the<00:22:06.840><c> the</c><00:22:07.140><c> API</c><00:22:07.679><c> key</c><00:22:07.919><c> like</c><00:22:08.340><c> this</c> 00:22:09.049 --> 00:22:09.059 align:start position:0% the the API key like this 00:22:09.059 --> 00:22:11.630 align:start position:0% the the API key like this and<00:22:09.539><c> it's</c><00:22:09.659><c> gonna</c><00:22:09.900><c> come</c><00:22:10.140><c> from</c><00:22:10.380><c> once</c><00:22:11.340><c> again</c><00:22:11.400><c> as</c> 00:22:11.630 --> 00:22:11.640 align:start position:0% and it's gonna come from once again as 00:22:11.640 --> 00:22:14.289 align:start position:0% and it's gonna come from once again as you<00:22:11.880><c> know</c><00:22:12.000><c> now</c><00:22:12.240><c> after</c><00:22:12.960><c> sanity</c> 00:22:14.289 --> 00:22:14.299 align:start position:0% you know now after sanity 00:22:14.299 --> 00:22:17.750 align:start position:0% you know now after sanity key<00:22:15.299><c> okay</c><00:22:15.780><c> because</c><00:22:16.380><c> once</c><00:22:17.039><c> again</c><00:22:17.100><c> anywhere</c> 00:22:17.750 --> 00:22:17.760 align:start position:0% key okay because once again anywhere 00:22:17.760 --> 00:22:19.190 align:start position:0% key okay because once again anywhere else<00:22:17.940><c> from</c><00:22:18.299><c> this</c><00:22:18.480><c> file</c><00:22:18.720><c> you</c><00:22:18.900><c> don't</c><00:22:19.020><c> have</c> 00:22:19.190 --> 00:22:19.200 align:start position:0% else from this file you don't have 00:22:19.200 --> 00:22:21.049 align:start position:0% else from this file you don't have access<00:22:19.380><c> to</c><00:22:19.679><c> these</c><00:22:20.039><c> things</c><00:22:20.159><c> okay</c><00:22:20.520><c> you</c><00:22:20.940><c> don't</c> 00:22:21.049 --> 00:22:21.059 align:start position:0% access to these things okay you don't 00:22:21.059 --> 00:22:22.370 align:start position:0% access to these things okay you don't have<00:22:21.240><c> access</c><00:22:21.480><c> to</c> 00:22:22.370 --> 00:22:22.380 align:start position:0% have access to 00:22:22.380 --> 00:22:22.970 align:start position:0% have access to um 00:22:22.970 --> 00:22:22.980 align:start position:0% um 00:22:22.980 --> 00:22:25.610 align:start position:0% um uh<00:22:23.880><c> for</c><00:22:24.179><c> example</c><00:22:24.419><c> let's</c><00:22:24.720><c> say</c><00:22:24.840><c> you</c><00:22:25.080><c> didn't</c> 00:22:25.610 --> 00:22:25.620 align:start position:0% uh for example let's say you didn't 00:22:25.620 --> 00:22:28.669 align:start position:0% uh for example let's say you didn't Define<00:22:25.919><c> this</c><00:22:26.220><c> here</c><00:22:26.520><c> okay</c><00:22:27.080><c> anywhere</c><00:22:28.080><c> else</c><00:22:28.260><c> from</c> 00:22:28.669 --> 00:22:28.679 align:start position:0% Define this here okay anywhere else from 00:22:28.679 --> 00:22:30.409 align:start position:0% Define this here okay anywhere else from this<00:22:28.919><c> file</c><00:22:29.159><c> and</c><00:22:29.400><c> the</c><00:22:29.580><c> loaders</c><00:22:29.940><c> you</c><00:22:30.179><c> don't</c><00:22:30.299><c> have</c> 00:22:30.409 --> 00:22:30.419 align:start position:0% this file and the loaders you don't have 00:22:30.419 --> 00:22:32.750 align:start position:0% this file and the loaders you don't have access<00:22:30.600><c> to</c><00:22:30.840><c> the</c><00:22:31.020><c> F</c><00:22:31.200><c> okay</c><00:22:31.860><c> we</c><00:22:32.400><c> don't</c><00:22:32.640><c> have</c> 00:22:32.750 --> 00:22:32.760 align:start position:0% access to the F okay we don't have 00:22:32.760 --> 00:22:34.130 align:start position:0% access to the F okay we don't have access<00:22:32.880><c> to</c><00:22:33.120><c> the</c><00:22:33.240><c> environment</c><00:22:33.600><c> but</c><00:22:33.840><c> I</c><00:22:34.020><c> will</c> 00:22:34.130 --> 00:22:34.140 align:start position:0% access to the environment but I will 00:22:34.140 --> 00:22:35.930 align:start position:0% access to the environment but I will still<00:22:34.380><c> loaders</c><00:22:34.980><c> and</c><00:22:35.100><c> obviously</c><00:22:35.340><c> the</c><00:22:35.520><c> actions</c> 00:22:35.930 --> 00:22:35.940 align:start position:0% still loaders and obviously the actions 00:22:35.940 --> 00:22:37.190 align:start position:0% still loaders and obviously the actions as<00:22:36.059><c> well</c><00:22:36.240><c> so</c> 00:22:37.190 --> 00:22:37.200 align:start position:0% as well so 00:22:37.200 --> 00:22:40.250 align:start position:0% as well so the<00:22:37.799><c> the</c><00:22:37.860><c> best</c><00:22:38.580><c> place</c><00:22:38.820><c> therefore</c><00:22:39.539><c> to</c><00:22:40.080><c> create</c> 00:22:40.250 --> 00:22:40.260 align:start position:0% the the best place therefore to create 00:22:40.260 --> 00:22:42.470 align:start position:0% the the best place therefore to create your<00:22:40.620><c> services</c><00:22:40.860><c> is</c><00:22:41.280><c> once</c><00:22:41.640><c> you're</c><00:22:41.760><c> in</c><00:22:42.000><c> is</c><00:22:42.299><c> when</c> 00:22:42.470 --> 00:22:42.480 align:start position:0% your services is once you're in is when 00:22:42.480 --> 00:22:45.950 align:start position:0% your services is once you're in is when you're<00:22:42.659><c> in</c><00:22:42.960><c> this</c><00:22:43.200><c> in</c><00:22:43.799><c> this</c><00:22:44.480><c> execution</c><00:22:45.480><c> and</c> 00:22:45.950 --> 00:22:45.960 align:start position:0% you're in this in this execution and 00:22:45.960 --> 00:22:48.169 align:start position:0% you're in this in this execution and when<00:22:46.320><c> once</c><00:22:46.799><c> you're</c><00:22:46.980><c> defining</c><00:22:47.640><c> the</c><00:22:47.820><c> fetch</c> 00:22:48.169 --> 00:22:48.179 align:start position:0% when once you're defining the fetch 00:22:48.179 --> 00:22:50.090 align:start position:0% when once you're defining the fetch function<00:22:48.480><c> okay</c><00:22:48.900><c> that's</c><00:22:49.260><c> the</c><00:22:49.500><c> best</c><00:22:49.679><c> place</c><00:22:49.860><c> to</c> 00:22:50.090 --> 00:22:50.100 align:start position:0% function okay that's the best place to 00:22:50.100 --> 00:22:51.669 align:start position:0% function okay that's the best place to do<00:22:50.220><c> that</c><00:22:50.340><c> because</c><00:22:50.580><c> here</c><00:22:50.880><c> you</c><00:22:51.059><c> have</c><00:22:51.240><c> access</c><00:22:51.419><c> to</c> 00:22:51.669 --> 00:22:51.679 align:start position:0% do that because here you have access to 00:22:51.679 --> 00:22:54.110 align:start position:0% do that because here you have access to the<00:22:52.679><c> environment</c><00:22:53.039><c> variables</c><00:22:53.580><c> and</c><00:22:53.820><c> you</c><00:22:54.000><c> can</c> 00:22:54.110 --> 00:22:54.120 align:start position:0% the environment variables and you can 00:22:54.120 --> 00:22:56.690 align:start position:0% the environment variables and you can instantiate<00:22:54.780><c> your</c><00:22:55.140><c> your</c><00:22:55.620><c> services</c><00:22:55.980><c> like</c><00:22:56.520><c> this</c> 00:22:56.690 --> 00:22:56.700 align:start position:0% instantiate your your services like this 00:22:56.700 --> 00:22:59.870 align:start position:0% instantiate your your services like this and<00:22:57.360><c> then</c><00:22:57.480><c> pass</c><00:22:57.720><c> them</c><00:22:58.020><c> down</c><00:22:58.320><c> to</c><00:22:59.159><c> the</c><00:22:59.400><c> execution</c> 00:22:59.870 --> 00:22:59.880 align:start position:0% and then pass them down to the execution 00:22:59.880 --> 00:23:02.630 align:start position:0% and then pass them down to the execution context<00:23:00.480><c> here</c><00:23:00.840><c> like</c><00:23:01.200><c> this</c><00:23:01.440><c> okay</c><00:23:01.799><c> and</c><00:23:02.340><c> if</c><00:23:02.520><c> you</c> 00:23:02.630 --> 00:23:02.640 align:start position:0% context here like this okay and if you 00:23:02.640 --> 00:23:05.510 align:start position:0% context here like this okay and if you do<00:23:02.880><c> that</c><00:23:03.059><c> okay</c><00:23:03.539><c> they'll</c><00:23:04.260><c> be</c><00:23:04.440><c> accessible</c><00:23:04.860><c> in</c> 00:23:05.510 --> 00:23:05.520 align:start position:0% do that okay they'll be accessible in 00:23:05.520 --> 00:23:06.350 align:start position:0% do that okay they'll be accessible in your 00:23:06.350 --> 00:23:06.360 align:start position:0% your 00:23:06.360 --> 00:23:08.210 align:start position:0% your um<00:23:06.419><c> in</c><00:23:06.900><c> your</c><00:23:07.140><c> execution</c><00:23:07.500><c> context</c><00:23:07.980><c> so</c> 00:23:08.210 --> 00:23:08.220 align:start position:0% um in your execution context so 00:23:08.220 --> 00:23:10.430 align:start position:0% um in your execution context so obviously<00:23:08.580><c> here</c><00:23:08.820><c> we</c><00:23:09.000><c> can</c><00:23:09.120><c> come</c><00:23:09.299><c> here</c><00:23:09.600><c> and</c><00:23:10.260><c> we</c> 00:23:10.430 --> 00:23:10.440 align:start position:0% obviously here we can come here and we 00:23:10.440 --> 00:23:13.130 align:start position:0% obviously here we can come here and we can<00:23:10.559><c> add</c><00:23:10.860><c> one</c><00:23:11.220><c> more</c><00:23:11.400><c> thing</c><00:23:11.640><c> and</c><00:23:12.179><c> say</c><00:23:12.419><c> okay</c><00:23:12.659><c> you</c> 00:23:13.130 --> 00:23:13.140 align:start position:0% can add one more thing and say okay you 00:23:13.140 --> 00:23:15.110 align:start position:0% can add one more thing and say okay you can<00:23:13.320><c> say</c><00:23:13.620><c> sanity</c> 00:23:15.110 --> 00:23:15.120 align:start position:0% can say sanity 00:23:15.120 --> 00:23:17.510 align:start position:0% can say sanity sanity<00:23:15.960><c> client</c><00:23:16.440><c> and</c><00:23:16.799><c> then</c><00:23:16.980><c> we</c><00:23:17.159><c> can</c><00:23:17.340><c> Define</c> 00:23:17.510 --> 00:23:17.520 align:start position:0% sanity client and then we can Define 00:23:17.520 --> 00:23:20.990 align:start position:0% sanity client and then we can Define this<00:23:17.880><c> as</c><00:23:18.059><c> let's</c><00:23:18.600><c> say</c><00:23:19.039><c> a</c><00:23:20.039><c> string</c><00:23:20.400><c> for</c><00:23:20.580><c> now</c><00:23:20.760><c> okay</c> 00:23:20.990 --> 00:23:21.000 align:start position:0% this as let's say a string for now okay 00:23:21.000 --> 00:23:23.090 align:start position:0% this as let's say a string for now okay just<00:23:21.299><c> to</c><00:23:21.419><c> make</c><00:23:21.600><c> things</c><00:23:21.780><c> very</c><00:23:22.020><c> simple</c> 00:23:23.090 --> 00:23:23.100 align:start position:0% just to make things very simple 00:23:23.100 --> 00:23:25.970 align:start position:0% just to make things very simple oh<00:23:23.760><c> let's</c><00:23:24.059><c> say</c><00:23:24.299><c> yeah</c><00:23:24.960><c> let's</c><00:23:25.260><c> define</c><00:23:25.440><c> this</c><00:23:25.679><c> as</c><00:23:25.860><c> a</c> 00:23:25.970 --> 00:23:25.980 align:start position:0% oh let's say yeah let's define this as a 00:23:25.980 --> 00:23:29.390 align:start position:0% oh let's say yeah let's define this as a string<00:23:26.280><c> okay</c><00:23:26.520><c> and</c><00:23:27.480><c> then</c><00:23:27.600><c> if</c><00:23:27.900><c> I</c><00:23:28.080><c> do</c><00:23:28.320><c> this</c><00:23:28.740><c> sanity</c> 00:23:29.390 --> 00:23:29.400 align:start position:0% string okay and then if I do this sanity 00:23:29.400 --> 00:23:32.090 align:start position:0% string okay and then if I do this sanity sanity<00:23:30.299><c> CMS</c> 00:23:32.090 --> 00:23:32.100 align:start position:0% sanity CMS 00:23:32.100 --> 00:23:35.029 align:start position:0% sanity CMS like<00:23:32.700><c> this</c><00:23:32.880><c> okay</c><00:23:33.179><c> so</c><00:23:33.539><c> it</c><00:23:33.900><c> is</c><00:23:34.020><c> CMS</c><00:23:34.440><c> and</c><00:23:34.740><c> I</c><00:23:34.919><c> come</c> 00:23:35.029 --> 00:23:35.039 align:start position:0% like this okay so it is CMS and I come 00:23:35.039 --> 00:23:37.909 align:start position:0% like this okay so it is CMS and I come here<00:23:35.280><c> I</c><00:23:35.700><c> Define</c><00:23:35.940><c> the</c><00:23:36.240><c> sanity</c> 00:23:37.909 --> 00:23:37.919 align:start position:0% here I Define the sanity 00:23:37.919 --> 00:23:41.630 align:start position:0% here I Define the sanity um<00:23:38.340><c> sanity</c><00:23:39.020><c> CMS</c><00:23:40.020><c> and</c><00:23:40.440><c> I</c><00:23:40.620><c> add</c><00:23:40.860><c> that</c><00:23:41.039><c> like</c><00:23:41.400><c> that</c> 00:23:41.630 --> 00:23:41.640 align:start position:0% um sanity CMS and I add that like that 00:23:41.640 --> 00:23:43.490 align:start position:0% um sanity CMS and I add that like that as<00:23:41.880><c> a</c><00:23:42.120><c> string</c> 00:23:43.490 --> 00:23:43.500 align:start position:0% as a string 00:23:43.500 --> 00:23:45.770 align:start position:0% as a string just<00:23:43.860><c> to</c><00:23:44.159><c> add</c><00:23:44.340><c> some</c><00:23:44.580><c> gibberish</c><00:23:45.120><c> here</c><00:23:45.299><c> and</c><00:23:45.659><c> then</c> 00:23:45.770 --> 00:23:45.780 align:start position:0% just to add some gibberish here and then 00:23:45.780 --> 00:23:47.630 align:start position:0% just to add some gibberish here and then I<00:23:46.020><c> put</c><00:23:46.260><c> it</c><00:23:46.440><c> here</c><00:23:46.679><c> okay</c> 00:23:47.630 --> 00:23:47.640 align:start position:0% I put it here okay 00:23:47.640 --> 00:23:50.630 align:start position:0% I put it here okay just<00:23:48.240><c> read</c><00:23:48.480><c> this</c><00:23:48.780><c> now</c><00:23:49.440><c> in</c><00:23:49.919><c> all</c><00:23:50.100><c> your</c><00:23:50.280><c> routes</c> 00:23:50.630 --> 00:23:50.640 align:start position:0% just read this now in all your routes 00:23:50.640 --> 00:23:53.510 align:start position:0% just read this now in all your routes okay<00:23:50.940><c> you</c><00:23:51.299><c> have</c><00:23:51.480><c> access</c><00:23:51.720><c> to</c><00:23:52.140><c> sanity</c><00:23:52.799><c> okay</c><00:23:53.220><c> so</c> 00:23:53.510 --> 00:23:53.520 align:start position:0% okay you have access to sanity okay so 00:23:53.520 --> 00:23:55.010 align:start position:0% okay you have access to sanity okay so the<00:23:53.760><c> sanity</c> 00:23:55.010 --> 00:23:55.020 align:start position:0% the sanity 00:23:55.020 --> 00:23:57.770 align:start position:0% the sanity CMS<00:23:55.799><c> here</c><00:23:56.100><c> and</c><00:23:56.400><c> then</c><00:23:56.520><c> I</c><00:23:56.760><c> can</c><00:23:56.880><c> console</c><00:23:57.419><c> log</c><00:23:57.539><c> that</c> 00:23:57.770 --> 00:23:57.780 align:start position:0% CMS here and then I can console log that 00:23:57.780 --> 00:23:59.210 align:start position:0% CMS here and then I can console log that here<00:23:58.020><c> obviously</c><00:23:58.380><c> it's</c><00:23:58.500><c> a</c><00:23:58.679><c> string</c><00:23:58.860><c> right</c><00:23:59.039><c> there</c> 00:23:59.210 --> 00:23:59.220 align:start position:0% here obviously it's a string right there 00:23:59.220 --> 00:24:01.250 align:start position:0% here obviously it's a string right there I<00:23:59.340><c> don't</c><00:23:59.460><c> need</c><00:23:59.580><c> to</c><00:23:59.640><c> stringify</c><00:24:00.059><c> it</c><00:24:00.299><c> anymore</c><00:24:00.480><c> but</c> 00:24:01.250 --> 00:24:01.260 align:start position:0% I don't need to stringify it anymore but 00:24:01.260 --> 00:24:04.490 align:start position:0% I don't need to stringify it anymore but let's<00:24:01.559><c> just</c><00:24:01.919><c> do</c><00:24:02.460><c> it</c><00:24:02.580><c> for</c><00:24:02.820><c> the</c><00:24:02.940><c> sake</c><00:24:03.059><c> of</c><00:24:03.240><c> it</c> 00:24:04.490 --> 00:24:04.500 align:start position:0% let's just do it for the sake of it 00:24:04.500 --> 00:24:06.710 align:start position:0% let's just do it for the sake of it um<00:24:04.559><c> so</c><00:24:04.860><c> if</c><00:24:05.100><c> I</c><00:24:05.280><c> Collapse</c><00:24:06.059><c> you</c><00:24:06.240><c> see</c><00:24:06.360><c> it's</c><00:24:06.539><c> already</c> 00:24:06.710 --> 00:24:06.720 align:start position:0% um so if I Collapse you see it's already 00:24:06.720 --> 00:24:08.570 align:start position:0% um so if I Collapse you see it's already there<00:24:07.080><c> it's</c><00:24:07.440><c> already</c><00:24:07.620><c> there</c><00:24:07.919><c> that's</c><00:24:08.159><c> how</c><00:24:08.400><c> you</c> 00:24:08.570 --> 00:24:08.580 align:start position:0% there it's already there that's how you 00:24:08.580 --> 00:24:12.110 align:start position:0% there it's already there that's how you inject<00:24:08.880><c> the</c><00:24:09.059><c> dependency</c><00:24:09.860><c> in</c><00:24:10.860><c> your</c> 00:24:12.110 --> 00:24:12.120 align:start position:0% inject the dependency in your 00:24:12.120 --> 00:24:14.450 align:start position:0% inject the dependency in your um in<00:24:13.020><c> your</c><00:24:13.080><c> store</c><00:24:13.380><c> from</c><00:24:13.620><c> the</c><00:24:13.740><c> API</c><00:24:14.100><c> and</c><00:24:14.280><c> that's</c> 00:24:14.450 --> 00:24:14.460 align:start position:0% um in your store from the API and that's 00:24:14.460 --> 00:24:17.930 align:start position:0% um in your store from the API and that's the<00:24:14.640><c> best</c><00:24:14.820><c> way</c><00:24:15.260><c> to</c><00:24:16.260><c> share</c> 00:24:17.930 --> 00:24:17.940 align:start position:0% the best way to share 00:24:17.940 --> 00:24:20.390 align:start position:0% the best way to share um<00:24:18.000><c> basically</c><00:24:18.720><c> like</c><00:24:18.960><c> business</c><00:24:19.679><c> logic</c> 00:24:20.390 --> 00:24:20.400 align:start position:0% um basically like business logic 00:24:20.400 --> 00:24:21.770 align:start position:0% um basically like business logic functions 00:24:21.770 --> 00:24:21.780 align:start position:0% functions 00:24:21.780 --> 00:24:23.750 align:start position:0% functions business<00:24:22.440><c> logic</c><00:24:22.980><c> functions</c><00:24:23.400><c> with</c><00:24:23.640><c> your</c> 00:24:23.750 --> 00:24:23.760 align:start position:0% business logic functions with your 00:24:23.760 --> 00:24:26.450 align:start position:0% business logic functions with your loaders<00:24:24.240><c> and</c><00:24:24.419><c> actions</c><00:24:24.960><c> okay</c><00:24:25.320><c> I</c><00:24:25.919><c> hope</c><00:24:26.100><c> you</c><00:24:26.220><c> see</c> 00:24:26.450 --> 00:24:26.460 align:start position:0% loaders and actions okay I hope you see 00:24:26.460 --> 00:24:29.149 align:start position:0% loaders and actions okay I hope you see how<00:24:26.640><c> how</c><00:24:26.940><c> this</c><00:24:27.240><c> works</c><00:24:27.539><c> you</c><00:24:27.720><c> come</c><00:24:27.960><c> here</c><00:24:28.200><c> in</c><00:24:28.980><c> the</c> 00:24:29.149 --> 00:24:29.159 align:start position:0% how how this works you come here in the 00:24:29.159 --> 00:24:32.090 align:start position:0% how how this works you come here in the upload<00:24:29.580><c> context</c><00:24:30.000><c> you</c><00:24:30.720><c> define</c><00:24:30.980><c> what</c><00:24:31.980><c> it's</c> 00:24:32.090 --> 00:24:32.100 align:start position:0% upload context you define what it's 00:24:32.100 --> 00:24:33.710 align:start position:0% upload context you define what it's going<00:24:32.280><c> to</c><00:24:32.400><c> look</c><00:24:32.520><c> like</c><00:24:32.640><c> obviously</c><00:24:33.120><c> here</c><00:24:33.419><c> it's</c><00:24:33.600><c> a</c> 00:24:33.710 --> 00:24:33.720 align:start position:0% going to look like obviously here it's a 00:24:33.720 --> 00:24:35.090 align:start position:0% going to look like obviously here it's a very<00:24:33.840><c> simple</c><00:24:34.020><c> example</c><00:24:34.380><c> I</c><00:24:34.559><c> just</c><00:24:34.679><c> put</c><00:24:34.860><c> in</c><00:24:34.980><c> a</c> 00:24:35.090 --> 00:24:35.100 align:start position:0% very simple example I just put in a 00:24:35.100 --> 00:24:36.890 align:start position:0% very simple example I just put in a string<00:24:35.400><c> but</c><00:24:35.520><c> you</c><00:24:35.700><c> can</c><00:24:35.820><c> put</c><00:24:36.000><c> anything</c><00:24:36.419><c> you</c><00:24:36.720><c> want</c> 00:24:36.890 --> 00:24:36.900 align:start position:0% string but you can put anything you want 00:24:36.900 --> 00:24:40.130 align:start position:0% string but you can put anything you want okay<00:24:37.320><c> and</c><00:24:38.100><c> in</c><00:24:38.340><c> your</c><00:24:38.520><c> server.ts</c><00:24:39.480><c> you</c> 00:24:40.130 --> 00:24:40.140 align:start position:0% okay and in your server.ts you 00:24:40.140 --> 00:24:42.470 align:start position:0% okay and in your server.ts you instantiate<00:24:40.740><c> that</c><00:24:40.919><c> object</c><00:24:41.280><c> and</c><00:24:41.880><c> you</c><00:24:42.059><c> pass</c><00:24:42.240><c> it</c> 00:24:42.470 --> 00:24:42.480 align:start position:0% instantiate that object and you pass it 00:24:42.480 --> 00:24:45.770 align:start position:0% instantiate that object and you pass it down<00:24:42.720><c> in</c><00:24:43.200><c> the</c><00:24:43.380><c> get</c><00:24:43.500><c> load</c><00:24:43.860><c> context</c><00:24:44.780><c> function</c> 00:24:45.770 --> 00:24:45.780 align:start position:0% down in the get load context function 00:24:45.780 --> 00:24:49.010 align:start position:0% down in the get load context function and<00:24:46.200><c> all</c><00:24:46.380><c> of</c><00:24:46.559><c> and</c><00:24:46.919><c> just</c><00:24:47.580><c> with</c><00:24:47.820><c> that</c><00:24:48.000><c> it's</c><00:24:48.780><c> not</c> 00:24:49.010 --> 00:24:49.020 align:start position:0% and all of and just with that it's not 00:24:49.020 --> 00:24:51.310 align:start position:0% and all of and just with that it's not accessible<00:24:49.500><c> from</c><00:24:50.100><c> your</c> 00:24:51.310 --> 00:24:51.320 align:start position:0% accessible from your 00:24:51.320 --> 00:24:55.450 align:start position:0% accessible from your loaders<00:24:52.320><c> and</c><00:24:52.500><c> actions</c><00:24:52.980><c> in</c><00:24:53.280><c> in</c><00:24:53.580><c> the</c><00:24:53.760><c> remix</c> 00:24:55.450 --> 00:24:55.460 align:start position:0% loaders and actions in in the remix 00:24:55.460 --> 00:24:59.330 align:start position:0% loaders and actions in in the remix routes<00:24:56.460><c> okay</c><00:24:56.700><c> I</c><00:24:57.179><c> hope</c><00:24:57.360><c> that</c><00:24:57.600><c> is</c><00:24:57.720><c> clear</c><00:24:58.159><c> I</c><00:24:59.159><c> spend</c> 00:24:59.330 --> 00:24:59.340 align:start position:0% routes okay I hope that is clear I spend 00:24:59.340 --> 00:25:01.010 align:start position:0% routes okay I hope that is clear I spend a<00:24:59.460><c> lot</c><00:24:59.580><c> of</c><00:24:59.640><c> time</c><00:24:59.820><c> on</c><00:25:00.059><c> this</c><00:25:00.179><c> but</c><00:25:00.419><c> this</c><00:25:00.659><c> is</c><00:25:00.840><c> very</c> 00:25:01.010 --> 00:25:01.020 align:start position:0% a lot of time on this but this is very 00:25:01.020 --> 00:25:02.270 align:start position:0% a lot of time on this but this is very important 00:25:02.270 --> 00:25:02.280 align:start position:0% important 00:25:02.280 --> 00:25:05.750 align:start position:0% important um<00:25:02.360><c> and</c><00:25:03.360><c> one</c><00:25:03.659><c> final</c><00:25:03.900><c> thing</c><00:25:04.260><c> sorry</c><00:25:05.039><c> to</c><00:25:05.280><c> to</c><00:25:05.520><c> spend</c> 00:25:05.750 --> 00:25:05.760 align:start position:0% um and one final thing sorry to to spend 00:25:05.760 --> 00:25:07.010 align:start position:0% um and one final thing sorry to to spend a<00:25:05.880><c> lot</c><00:25:05.940><c> of</c><00:25:06.059><c> time</c><00:25:06.179><c> on</c><00:25:06.299><c> this</c><00:25:06.480><c> but</c><00:25:06.600><c> this</c><00:25:06.780><c> is</c><00:25:06.900><c> very</c> 00:25:07.010 --> 00:25:07.020 align:start position:0% a lot of time on this but this is very 00:25:07.020 --> 00:25:10.250 align:start position:0% a lot of time on this but this is very important<00:25:07.700><c> I</c><00:25:08.700><c> usually</c><00:25:08.940><c> don't</c><00:25:09.179><c> recommend</c><00:25:09.720><c> like</c> 00:25:10.250 --> 00:25:10.260 align:start position:0% important I usually don't recommend like 00:25:10.260 --> 00:25:12.350 align:start position:0% important I usually don't recommend like it's<00:25:10.440><c> done</c><00:25:10.740><c> here</c><00:25:10.980><c> to</c><00:25:11.820><c> pass</c><00:25:12.000><c> in</c><00:25:12.240><c> the</c> 00:25:12.350 --> 00:25:12.360 align:start position:0% it's done here to pass in the 00:25:12.360 --> 00:25:14.149 align:start position:0% it's done here to pass in the environment<00:25:12.780><c> variables</c><00:25:13.260><c> in</c><00:25:13.620><c> the</c><00:25:13.799><c> upload</c> 00:25:14.149 --> 00:25:14.159 align:start position:0% environment variables in the upload 00:25:14.159 --> 00:25:17.990 align:start position:0% environment variables in the upload context<00:25:14.640><c> right</c><00:25:14.880><c> because</c><00:25:15.600><c> business</c><00:25:16.760><c> is</c><00:25:17.760><c> very</c> 00:25:17.990 --> 00:25:18.000 align:start position:0% context right because business is very 00:25:18.000 --> 00:25:20.029 align:start position:0% context right because business is very easy<00:25:18.299><c> to</c><00:25:19.080><c> uh</c> 00:25:20.029 --> 00:25:20.039 align:start position:0% easy to uh 00:25:20.039 --> 00:25:23.950 align:start position:0% easy to uh to<00:25:20.820><c> for</c><00:25:21.059><c> for</c><00:25:21.059><c> bad</c><00:25:21.960><c> console</c><00:25:22.320><c> log</c><00:25:22.559><c> let's</c><00:25:23.039><c> say</c><00:25:23.220><c> I</c> 00:25:23.950 --> 00:25:23.960 align:start position:0% to for for bad console log let's say I 00:25:23.960 --> 00:25:27.409 align:start position:0% to for for bad console log let's say I uh<00:25:24.960><c> let's</c><00:25:25.620><c> say</c><00:25:25.860><c> the</c><00:25:26.039><c> developer</c><00:25:26.520><c> okay</c><00:25:26.940><c> let's</c> 00:25:27.409 --> 00:25:27.419 align:start position:0% uh let's say the developer okay let's 00:25:27.419 --> 00:25:29.330 align:start position:0% uh let's say the developer okay let's say<00:25:27.659><c> the</c><00:25:27.779><c> developer</c> 00:25:29.330 --> 00:25:29.340 align:start position:0% say the developer 00:25:29.340 --> 00:25:31.130 align:start position:0% say the developer the<00:25:29.820><c> developer</c><00:25:30.240><c> gets</c><00:25:30.600><c> the</c><00:25:30.779><c> environment</c> 00:25:31.130 --> 00:25:31.140 align:start position:0% the developer gets the environment 00:25:31.140 --> 00:25:33.890 align:start position:0% the developer gets the environment variable<00:25:31.559><c> here</c><00:25:31.740><c> like</c><00:25:32.100><c> this</c><00:25:32.279><c> okay</c><00:25:32.779><c> and</c><00:25:33.779><c> then</c> 00:25:33.890 --> 00:25:33.900 align:start position:0% variable here like this okay and then 00:25:33.900 --> 00:25:35.630 align:start position:0% variable here like this okay and then sends<00:25:34.380><c> them</c> 00:25:35.630 --> 00:25:35.640 align:start position:0% sends them 00:25:35.640 --> 00:25:36.890 align:start position:0% sends them in 00:25:36.890 --> 00:25:36.900 align:start position:0% in 00:25:36.900 --> 00:25:40.490 align:start position:0% in the<00:25:37.740><c> return</c><00:25:38.100><c> thing</c><00:25:39.059><c> okay</c><00:25:39.539><c> send</c><00:25:39.960><c> them</c><00:25:40.200><c> here</c> 00:25:40.490 --> 00:25:40.500 align:start position:0% the return thing okay send them here 00:25:40.500 --> 00:25:44.630 align:start position:0% the return thing okay send them here like<00:25:40.980><c> this</c><00:25:41.539><c> by</c><00:25:42.539><c> mistake</c><00:25:43.020><c> all</c><00:25:43.500><c> right</c><00:25:43.679><c> okay</c><00:25:44.039><c> by</c> 00:25:44.630 --> 00:25:44.640 align:start position:0% like this by mistake all right okay by 00:25:44.640 --> 00:25:46.909 align:start position:0% like this by mistake all right okay by mistake<00:25:45.120><c> or</c><00:25:45.539><c> the</c><00:25:45.900><c> developer</c><00:25:46.320><c> can</c><00:25:46.500><c> send</c><00:25:46.740><c> the</c> 00:25:46.909 --> 00:25:46.919 align:start position:0% mistake or the developer can send the 00:25:46.919 --> 00:25:47.990 align:start position:0% mistake or the developer can send the context 00:25:47.990 --> 00:25:48.000 align:start position:0% context 00:25:48.000 --> 00:25:52.250 align:start position:0% context to<00:25:48.659><c> uh</c><00:25:49.140><c> to</c><00:25:49.860><c> uh</c><00:25:50.159><c> let's</c><00:25:50.760><c> say</c><00:25:50.940><c> to</c><00:25:51.240><c> to</c><00:25:51.240><c> to</c><00:25:51.480><c> to</c><00:25:51.659><c> the</c> 00:25:52.250 --> 00:25:52.260 align:start position:0% to uh to uh let's say to to to to the 00:25:52.260 --> 00:25:54.230 align:start position:0% to uh to uh let's say to to to to the products<00:25:52.679><c> page</c><00:25:52.919><c> okay</c><00:25:53.220><c> like</c><00:25:53.580><c> this</c><00:25:53.820><c> and</c><00:25:54.120><c> then</c> 00:25:54.230 --> 00:25:54.240 align:start position:0% products page okay like this and then 00:25:54.240 --> 00:25:56.570 align:start position:0% products page okay like this and then all<00:25:54.480><c> of</c><00:25:54.600><c> the</c><00:25:54.720><c> sudden</c><00:25:54.960><c> you</c><00:25:55.679><c> have</c><00:25:55.860><c> your</c><00:25:56.039><c> contacts</c> 00:25:56.570 --> 00:25:56.580 align:start position:0% all of the sudden you have your contacts 00:25:56.580 --> 00:26:00.590 align:start position:0% all of the sudden you have your contacts here<00:25:56.700><c> right</c><00:25:57.360><c> oops</c><00:25:58.200><c> sorry</c><00:25:58.400><c> context</c><00:25:59.400><c> like</c><00:25:59.760><c> this</c> 00:26:00.590 --> 00:26:00.600 align:start position:0% here right oops sorry context like this 00:26:00.600 --> 00:26:02.870 align:start position:0% here right oops sorry context like this with<00:26:01.200><c> the</c><00:26:01.380><c> environment</c><00:26:01.679><c> variables</c><00:26:02.220><c> right</c><00:26:02.460><c> and</c> 00:26:02.870 --> 00:26:02.880 align:start position:0% with the environment variables right and 00:26:02.880 --> 00:26:05.870 align:start position:0% with the environment variables right and if<00:26:03.059><c> I</c><00:26:03.240><c> console</c><00:26:03.659><c> up</c><00:26:03.900><c> this</c><00:26:04.200><c> you</c><00:26:05.039><c> see</c><00:26:05.279><c> in</c><00:26:05.760><c> the</c> 00:26:05.870 --> 00:26:05.880 align:start position:0% if I console up this you see in the 00:26:05.880 --> 00:26:08.570 align:start position:0% if I console up this you see in the browser<00:26:06.299><c> environment</c><00:26:06.720><c> that</c><00:26:07.559><c> now</c><00:26:07.860><c> all</c><00:26:08.400><c> our</c> 00:26:08.570 --> 00:26:08.580 align:start position:0% browser environment that now all our 00:26:08.580 --> 00:26:10.430 align:start position:0% browser environment that now all our environment<00:26:09.539><c> variables</c><00:26:10.020><c> are</c><00:26:10.140><c> visible</c> 00:26:10.430 --> 00:26:10.440 align:start position:0% environment variables are visible 00:26:10.440 --> 00:26:12.830 align:start position:0% environment variables are visible because<00:26:10.679><c> I'm</c><00:26:10.919><c> logging</c><00:26:11.340><c> the</c><00:26:11.520><c> context</c><00:26:11.880><c> right</c><00:26:12.179><c> so</c> 00:26:12.830 --> 00:26:12.840 align:start position:0% because I'm logging the context right so 00:26:12.840 --> 00:26:15.830 align:start position:0% because I'm logging the context right so that's<00:26:13.140><c> why</c><00:26:13.320><c> usually</c><00:26:13.740><c> if</c><00:26:13.980><c> I</c><00:26:14.100><c> if</c><00:26:14.220><c> I</c><00:26:14.400><c> open</c><00:26:14.580><c> the</c><00:26:15.179><c> um</c> 00:26:15.830 --> 00:26:15.840 align:start position:0% that's why usually if I if I open the um 00:26:15.840 --> 00:26:17.090 align:start position:0% that's why usually if I if I open the um the uh 00:26:17.090 --> 00:26:17.100 align:start position:0% the uh 00:26:17.100 --> 00:26:20.750 align:start position:0% the uh consult<00:26:17.880><c> here</c><00:26:18.659><c> and</c><00:26:18.900><c> I</c><00:26:19.140><c> refresh</c><00:26:19.559><c> this</c><00:26:19.799><c> which</c> 00:26:20.750 --> 00:26:20.760 align:start position:0% consult here and I refresh this which 00:26:20.760 --> 00:26:22.850 align:start position:0% consult here and I refresh this which which<00:26:21.059><c> page</c><00:26:21.419><c> is</c><00:26:21.600><c> that</c><00:26:21.779><c> is</c><00:26:22.020><c> the</c><00:26:22.200><c> product</c><00:26:22.320><c> handle</c> 00:26:22.850 --> 00:26:22.860 align:start position:0% which page is that is the product handle 00:26:22.860 --> 00:26:25.370 align:start position:0% which page is that is the product handle page<00:26:23.100><c> so</c><00:26:23.220><c> if</c><00:26:23.340><c> I</c><00:26:23.520><c> visit</c><00:26:23.640><c> the</c><00:26:23.880><c> product</c><00:26:24.059><c> page</c><00:26:24.539><c> you</c> 00:26:25.370 --> 00:26:25.380 align:start position:0% page so if I visit the product page you 00:26:25.380 --> 00:26:27.710 align:start position:0% page so if I visit the product page you see<00:26:25.620><c> the</c><00:26:25.860><c> context</c><00:26:26.159><c> is</c><00:26:26.340><c> visible</c><00:26:26.700><c> let</c><00:26:27.179><c> me</c><00:26:27.299><c> zoom</c> 00:26:27.710 --> 00:26:27.720 align:start position:0% see the context is visible let me zoom 00:26:27.720 --> 00:26:28.970 align:start position:0% see the context is visible let me zoom on<00:26:27.840><c> this</c><00:26:27.960><c> a</c><00:26:28.140><c> bit</c><00:26:28.200><c> more</c> 00:26:28.970 --> 00:26:28.980 align:start position:0% on this a bit more 00:26:28.980 --> 00:26:30.890 align:start position:0% on this a bit more with<00:26:29.700><c> all</c><00:26:29.880><c> the</c><00:26:30.000><c> environment</c><00:26:30.299><c> variables</c> 00:26:30.890 --> 00:26:30.900 align:start position:0% with all the environment variables 00:26:30.900 --> 00:26:33.350 align:start position:0% with all the environment variables visible<00:26:31.620><c> to</c><00:26:31.860><c> the</c><00:26:32.039><c> user</c><00:26:32.340><c> you</c><00:26:32.520><c> see</c><00:26:32.700><c> which</c><00:26:33.000><c> is</c><00:26:33.179><c> a</c> 00:26:33.350 --> 00:26:33.360 align:start position:0% visible to the user you see which is a 00:26:33.360 --> 00:26:35.330 align:start position:0% visible to the user you see which is a big<00:26:33.480><c> big</c><00:26:33.779><c> problem</c><00:26:34.260><c> right</c><00:26:34.620><c> like</c><00:26:34.860><c> this</c><00:26:35.100><c> is</c><00:26:35.220><c> a</c> 00:26:35.330 --> 00:26:35.340 align:start position:0% big big problem right like this is a 00:26:35.340 --> 00:26:37.730 align:start position:0% big big problem right like this is a security<00:26:35.520><c> concern</c><00:26:36.240><c> the</c><00:26:36.960><c> the</c><00:26:37.200><c> like</c><00:26:37.559><c> the</c> 00:26:37.730 --> 00:26:37.740 align:start position:0% security concern the the like the 00:26:37.740 --> 00:26:39.049 align:start position:0% security concern the the like the developer<00:26:38.100><c> especially</c><00:26:38.460><c> if</c><00:26:38.580><c> you</c><00:26:38.700><c> don't</c><00:26:38.820><c> have</c> 00:26:39.049 --> 00:26:39.059 align:start position:0% developer especially if you don't have 00:26:39.059 --> 00:26:41.450 align:start position:0% developer especially if you don't have like<00:26:39.419><c> highly</c><00:26:40.140><c> like</c><00:26:40.500><c> if</c><00:26:40.740><c> you</c><00:26:40.799><c> have</c><00:26:40.980><c> genuine</c> 00:26:41.450 --> 00:26:41.460 align:start position:0% like highly like if you have genuine 00:26:41.460 --> 00:26:43.549 align:start position:0% like highly like if you have genuine developers<00:26:41.880><c> in</c><00:26:42.120><c> your</c><00:26:42.240><c> team</c><00:26:42.480><c> right</c><00:26:42.720><c> they</c><00:26:43.380><c> can</c> 00:26:43.549 --> 00:26:43.559 align:start position:0% developers in your team right they can 00:26:43.559 --> 00:26:45.409 align:start position:0% developers in your team right they can do<00:26:43.679><c> this</c><00:26:43.919><c> kind</c><00:26:44.039><c> of</c><00:26:44.220><c> mistakes</c><00:26:44.700><c> right</c><00:26:45.000><c> they</c><00:26:45.299><c> can</c> 00:26:45.409 --> 00:26:45.419 align:start position:0% do this kind of mistakes right they can 00:26:45.419 --> 00:26:49.190 align:start position:0% do this kind of mistakes right they can expose<00:26:46.039><c> security</c><00:26:47.120><c> uh</c><00:26:48.120><c> like</c> 00:26:49.190 --> 00:26:49.200 align:start position:0% expose security uh like 00:26:49.200 --> 00:26:51.409 align:start position:0% expose security uh like as<00:26:49.740><c> they</c><00:26:49.980><c> were</c><00:26:50.100><c> debugging</c><00:26:50.640><c> something</c><00:26:50.880><c> while</c> 00:26:51.409 --> 00:26:51.419 align:start position:0% as they were debugging something while 00:26:51.419 --> 00:26:53.690 align:start position:0% as they were debugging something while they<00:26:51.600><c> were</c><00:26:51.720><c> working</c><00:26:51.900><c> on</c><00:26:52.140><c> on</c><00:26:52.320><c> the</c><00:26:52.559><c> project</c><00:26:52.700><c> they</c> 00:26:53.690 --> 00:26:53.700 align:start position:0% they were working on on the project they 00:26:53.700 --> 00:26:57.470 align:start position:0% they were working on on the project they may<00:26:53.880><c> expose</c><00:26:54.799><c> highly</c><00:26:55.799><c> critical</c><00:26:56.159><c> information</c> 00:26:57.470 --> 00:26:57.480 align:start position:0% may expose highly critical information 00:26:57.480 --> 00:27:00.110 align:start position:0% may expose highly critical information and<00:26:57.960><c> without</c><00:26:58.200><c> before</c><00:26:59.100><c> you</c><00:26:59.340><c> know</c><00:26:59.520><c> it</c><00:26:59.700><c> your</c> 00:27:00.110 --> 00:27:00.120 align:start position:0% and without before you know it your 00:27:00.120 --> 00:27:02.870 align:start position:0% and without before you know it your store<00:27:00.360><c> is</c><00:27:00.600><c> under</c><00:27:00.779><c> attack</c><00:27:01.020><c> and</c><00:27:01.559><c> and</c><00:27:01.799><c> Things</c><00:27:02.159><c> Are</c> 00:27:02.870 --> 00:27:02.880 align:start position:0% store is under attack and and Things Are 00:27:02.880 --> 00:27:05.090 align:start position:0% store is under attack and and Things Are your<00:27:03.360><c> customer</c><00:27:03.600><c> details</c><00:27:04.320><c> are</c><00:27:04.440><c> stolen</c><00:27:04.919><c> and</c> 00:27:05.090 --> 00:27:05.100 align:start position:0% your customer details are stolen and 00:27:05.100 --> 00:27:06.710 align:start position:0% your customer details are stolen and stuff<00:27:05.220><c> like</c><00:27:05.400><c> that</c><00:27:05.580><c> credit</c><00:27:05.880><c> cards</c><00:27:06.419><c> information</c> 00:27:06.710 --> 00:27:06.720 align:start position:0% stuff like that credit cards information 00:27:06.720 --> 00:27:10.610 align:start position:0% stuff like that credit cards information so<00:27:07.440><c> I</c><00:27:08.220><c> think</c><00:27:08.520><c> it's</c><00:27:08.760><c> it's</c><00:27:09.059><c> quite</c><00:27:09.539><c> dangerous</c><00:27:10.020><c> to</c> 00:27:10.610 --> 00:27:10.620 align:start position:0% so I think it's it's quite dangerous to 00:27:10.620 --> 00:27:12.190 align:start position:0% so I think it's it's quite dangerous to expose 00:27:12.190 --> 00:27:12.200 align:start position:0% expose 00:27:12.200 --> 00:27:15.830 align:start position:0% expose the<00:27:13.200><c> environment</c><00:27:13.620><c> variables</c><00:27:14.100><c> to</c><00:27:15.000><c> pass</c><00:27:15.600><c> down</c> 00:27:15.830 --> 00:27:15.840 align:start position:0% the environment variables to pass down 00:27:15.840 --> 00:27:17.570 align:start position:0% the environment variables to pass down the<00:27:15.960><c> environment</c><00:27:16.260><c> variables</c><00:27:16.799><c> in</c><00:27:17.039><c> the</c><00:27:17.159><c> upload</c> 00:27:17.570 --> 00:27:17.580 align:start position:0% the environment variables in the upload 00:27:17.580 --> 00:27:19.909 align:start position:0% the environment variables in the upload context<00:27:17.940><c> so</c><00:27:18.360><c> usually</c><00:27:18.720><c> what</c><00:27:18.840><c> I</c><00:27:18.960><c> what</c><00:27:19.260><c> I</c><00:27:19.380><c> do</c><00:27:19.559><c> I</c> 00:27:19.909 --> 00:27:19.919 align:start position:0% context so usually what I what I do I 00:27:19.919 --> 00:27:22.870 align:start position:0% context so usually what I what I do I don't<00:27:20.100><c> pass</c><00:27:20.340><c> this</c><00:27:20.640><c> here</c><00:27:20.940><c> I</c><00:27:21.900><c> will</c><00:27:22.140><c> instead</c> 00:27:22.870 --> 00:27:22.880 align:start position:0% don't pass this here I will instead 00:27:22.880 --> 00:27:25.850 align:start position:0% don't pass this here I will instead Force<00:27:23.880><c> every</c><00:27:24.179><c> service</c><00:27:24.539><c> I</c><00:27:25.260><c> will</c><00:27:25.440><c> wrap</c><00:27:25.620><c> this</c> 00:27:25.850 --> 00:27:25.860 align:start position:0% Force every service I will wrap this 00:27:25.860 --> 00:27:27.529 align:start position:0% Force every service I will wrap this within<00:27:26.220><c> a</c><00:27:26.340><c> service</c><00:27:26.520><c> right</c><00:27:26.880><c> so</c><00:27:27.120><c> for</c><00:27:27.299><c> example</c> 00:27:27.529 --> 00:27:27.539 align:start position:0% within a service right so for example 00:27:27.539 --> 00:27:29.450 align:start position:0% within a service right so for example like<00:27:27.779><c> they</c><00:27:27.960><c> did</c><00:27:28.140><c> here</c><00:27:28.320><c> for</c><00:27:28.620><c> the</c><00:27:28.799><c> storefront</c><00:27:29.220><c> or</c> 00:27:29.450 --> 00:27:29.460 align:start position:0% like they did here for the storefront or 00:27:29.460 --> 00:27:30.950 align:start position:0% like they did here for the storefront or the<00:27:29.640><c> card</c><00:27:29.820><c> okay</c> 00:27:30.950 --> 00:27:30.960 align:start position:0% the card okay 00:27:30.960 --> 00:27:34.250 align:start position:0% the card okay so<00:27:31.500><c> if</c><00:27:31.799><c> I</c><00:27:31.980><c> come</c><00:27:32.159><c> here</c><00:27:32.460><c> in</c><00:27:32.940><c> the</c><00:27:33.120><c> storefront</c><00:27:33.539><c> you</c> 00:27:34.250 --> 00:27:34.260 align:start position:0% so if I come here in the storefront you 00:27:34.260 --> 00:27:36.350 align:start position:0% so if I come here in the storefront you see<00:27:34.500><c> every</c><00:27:34.919><c> service</c><00:27:35.220><c> like</c><00:27:35.700><c> the</c><00:27:35.880><c> storefront</c> 00:27:36.350 --> 00:27:36.360 align:start position:0% see every service like the storefront 00:27:36.360 --> 00:27:38.570 align:start position:0% see every service like the storefront service<00:27:36.720><c> the</c><00:27:37.260><c> the</c><00:27:37.620><c> let's</c><00:27:37.980><c> say</c><00:27:38.159><c> for</c><00:27:38.279><c> the</c><00:27:38.460><c> sake</c> 00:27:38.570 --> 00:27:38.580 align:start position:0% service the the let's say for the sake 00:27:38.580 --> 00:27:40.370 align:start position:0% service the the let's say for the sake of<00:27:38.700><c> the</c><00:27:38.820><c> sanity</c><00:27:39.299><c> service</c><00:27:39.600><c> in</c><00:27:39.840><c> case</c><00:27:40.020><c> it</c><00:27:40.200><c> wasn't</c> 00:27:40.370 --> 00:27:40.380 align:start position:0% of the sanity service in case it wasn't 00:27:40.380 --> 00:27:44.930 align:start position:0% of the sanity service in case it wasn't a<00:27:41.299><c> real</c><00:27:42.299><c> client</c><00:27:42.659><c> or</c><00:27:43.380><c> the</c><00:27:43.559><c> card</c><00:27:43.740><c> service</c><00:27:44.039><c> every</c> 00:27:44.930 --> 00:27:44.940 align:start position:0% a real client or the card service every 00:27:44.940 --> 00:27:49.730 align:start position:0% a real client or the card service every service<00:27:45.299><c> that</c><00:27:46.260><c> needs</c><00:27:46.799><c> to</c><00:27:47.700><c> to</c><00:27:47.940><c> to</c> 00:27:49.730 --> 00:27:49.740 align:start position:0% service that needs to to to 00:27:49.740 --> 00:27:51.710 align:start position:0% service that needs to to to anywhere<00:27:50.520><c> I</c><00:27:50.820><c> need</c><00:27:50.940><c> to</c><00:27:51.059><c> interact</c><00:27:51.360><c> with</c><00:27:51.539><c> the</c> 00:27:51.710 --> 00:27:51.720 align:start position:0% anywhere I need to interact with the 00:27:51.720 --> 00:27:53.450 align:start position:0% anywhere I need to interact with the environment<00:27:52.020><c> variables</c><00:27:52.500><c> I'll</c><00:27:52.740><c> wrap</c><00:27:53.039><c> that</c><00:27:53.279><c> in</c> 00:27:53.450 --> 00:27:53.460 align:start position:0% environment variables I'll wrap that in 00:27:53.460 --> 00:27:55.370 align:start position:0% environment variables I'll wrap that in a<00:27:53.580><c> service</c><00:27:53.820><c> and</c><00:27:54.240><c> instantiate</c><00:27:54.840><c> it</c><00:27:54.960><c> like</c><00:27:55.200><c> this</c> 00:27:55.370 --> 00:27:55.380 align:start position:0% a service and instantiate it like this 00:27:55.380 --> 00:27:57.649 align:start position:0% a service and instantiate it like this so<00:27:55.679><c> that</c><00:27:55.860><c> I</c><00:27:56.100><c> never</c><00:27:56.340><c> ever</c><00:27:56.700><c> ever</c> 00:27:57.649 --> 00:27:57.659 align:start position:0% so that I never ever ever 00:27:57.659 --> 00:28:00.230 align:start position:0% so that I never ever ever expose<00:27:58.380><c> the</c><00:27:58.799><c> environment</c><00:27:59.220><c> variables</c><00:27:59.760><c> in</c><00:28:00.120><c> the</c> 00:28:00.230 --> 00:28:00.240 align:start position:0% expose the environment variables in the 00:28:00.240 --> 00:28:01.909 align:start position:0% expose the environment variables in the upload<00:28:00.659><c> context</c><00:28:01.020><c> I</c><00:28:01.260><c> think</c><00:28:01.380><c> that's</c><00:28:01.559><c> a</c><00:28:01.740><c> bad</c> 00:28:01.909 --> 00:28:01.919 align:start position:0% upload context I think that's a bad 00:28:01.919 --> 00:28:05.510 align:start position:0% upload context I think that's a bad practice<00:28:02.360><c> so</c><00:28:03.360><c> yeah</c><00:28:03.740><c> that's</c><00:28:04.740><c> that's</c><00:28:04.980><c> the</c><00:28:05.220><c> last</c> 00:28:05.510 --> 00:28:05.520 align:start position:0% practice so yeah that's that's the last 00:28:05.520 --> 00:28:07.370 align:start position:0% practice so yeah that's that's the last thing<00:28:05.700><c> I</c><00:28:05.820><c> wanted</c><00:28:05.940><c> to</c><00:28:06.179><c> say</c><00:28:06.299><c> about</c><00:28:06.539><c> this</c><00:28:06.840><c> so</c><00:28:07.140><c> let</c> 00:28:07.370 --> 00:28:07.380 align:start position:0% thing I wanted to say about this so let 00:28:07.380 --> 00:28:09.730 align:start position:0% thing I wanted to say about this so let me<00:28:07.559><c> revert</c><00:28:08.159><c> anyway</c><00:28:08.340><c> I'll</c><00:28:08.640><c> do</c><00:28:08.760><c> that</c><00:28:08.880><c> off</c><00:28:09.240><c> camera</c> 00:28:09.730 --> 00:28:09.740 align:start position:0% me revert anyway I'll do that off camera 00:28:09.740 --> 00:28:13.130 align:start position:0% me revert anyway I'll do that off camera so<00:28:10.740><c> the</c><00:28:11.279><c> next</c><00:28:11.460><c> thing</c><00:28:11.760><c> as</c><00:28:12.419><c> part</c><00:28:12.659><c> of</c><00:28:12.840><c> the</c> 00:28:13.130 --> 00:28:13.140 align:start position:0% so the next thing as part of the 00:28:13.140 --> 00:28:15.049 align:start position:0% so the next thing as part of the architecture<00:28:13.620><c> of</c><00:28:13.860><c> this</c><00:28:14.039><c> project</c><00:28:14.279><c> that</c><00:28:14.880><c> I</c> 00:28:15.049 --> 00:28:15.059 align:start position:0% architecture of this project that I 00:28:15.059 --> 00:28:16.490 align:start position:0% architecture of this project that I think<00:28:15.179><c> is</c><00:28:15.360><c> interesting</c><00:28:15.720><c> for</c><00:28:15.960><c> us</c><00:28:16.080><c> to</c><00:28:16.260><c> have</c><00:28:16.380><c> a</c> 00:28:16.490 --> 00:28:16.500 align:start position:0% think is interesting for us to have a 00:28:16.500 --> 00:28:18.950 align:start position:0% think is interesting for us to have a look<00:28:16.620><c> at</c><00:28:16.799><c> is</c><00:28:17.640><c> this</c><00:28:17.940><c> I</c><00:28:18.179><c> think</c><00:28:18.299><c> we</c><00:28:18.419><c> already</c><00:28:18.659><c> saw</c> 00:28:18.950 --> 00:28:18.960 align:start position:0% look at is this I think we already saw 00:28:18.960 --> 00:28:20.390 align:start position:0% look at is this I think we already saw some<00:28:19.260><c> of</c><00:28:19.380><c> this</c> 00:28:20.390 --> 00:28:20.400 align:start position:0% some of this 00:28:20.400 --> 00:28:22.789 align:start position:0% some of this um<00:28:20.460><c> so</c><00:28:20.940><c> it's</c><00:28:21.179><c> explaining</c><00:28:21.600><c> the</c><00:28:21.779><c> server</c><00:28:22.140><c> of</c><00:28:22.320><c> ts5</c> 00:28:22.789 --> 00:28:22.799 align:start position:0% um so it's explaining the server of ts5 00:28:22.799 --> 00:28:26.210 align:start position:0% um so it's explaining the server of ts5 so<00:28:23.580><c> yeah</c><00:28:23.760><c> basically</c><00:28:24.360><c> this</c><00:28:25.200><c> is</c><00:28:25.380><c> this</c><00:28:26.039><c> thing</c> 00:28:26.210 --> 00:28:26.220 align:start position:0% so yeah basically this is this thing 00:28:26.220 --> 00:28:28.730 align:start position:0% so yeah basically this is this thing here<00:28:26.460><c> one</c><00:28:26.940><c> thing</c><00:28:27.120><c> you</c><00:28:27.779><c> may</c><00:28:28.140><c> not</c><00:28:28.260><c> have</c><00:28:28.380><c> noticed</c> 00:28:28.730 --> 00:28:28.740 align:start position:0% here one thing you may not have noticed 00:28:28.740 --> 00:28:31.250 align:start position:0% here one thing you may not have noticed this<00:28:28.860><c> but</c><00:28:29.159><c> this</c><00:28:29.880><c> environment</c><00:28:30.240><c> variable</c><00:28:30.720><c> so</c> 00:28:31.250 --> 00:28:31.260 align:start position:0% this but this environment variable so 00:28:31.260 --> 00:28:33.110 align:start position:0% this but this environment variable so this<00:28:31.679><c> interface</c> 00:28:33.110 --> 00:28:33.120 align:start position:0% this interface 00:28:33.120 --> 00:28:35.090 align:start position:0% this interface for<00:28:33.779><c> handling</c><00:28:34.200><c> the</c><00:28:34.320><c> environment</c><00:28:34.620><c> right</c><00:28:34.919><c> away</c> 00:28:35.090 --> 00:28:35.100 align:start position:0% for handling the environment right away 00:28:35.100 --> 00:28:36.950 align:start position:0% for handling the environment right away is<00:28:35.220><c> defined</c><00:28:35.700><c> in</c><00:28:35.760><c> the</c><00:28:35.880><c> global</c><00:28:36.179><c> is</c><00:28:36.360><c> declared</c><00:28:36.840><c> in</c> 00:28:36.950 --> 00:28:36.960 align:start position:0% is defined in the global is declared in 00:28:36.960 --> 00:28:39.769 align:start position:0% is defined in the global is declared in the<00:28:37.080><c> global</c><00:28:37.440><c> okay</c><00:28:38.000><c> so</c><00:28:39.000><c> it</c><00:28:39.360><c> means</c><00:28:39.659><c> that</c> 00:28:39.769 --> 00:28:39.779 align:start position:0% the global okay so it means that 00:28:39.779 --> 00:28:41.930 align:start position:0% the global okay so it means that whenever<00:28:40.260><c> we</c><00:28:40.440><c> are</c><00:28:40.559><c> using</c><00:28:40.860><c> this</c><00:28:41.100><c> m</c><00:28:41.279><c> thing</c><00:28:41.640><c> we</c> 00:28:41.930 --> 00:28:41.940 align:start position:0% whenever we are using this m thing we 00:28:41.940 --> 00:28:43.909 align:start position:0% whenever we are using this m thing we don't<00:28:42.120><c> have</c><00:28:42.240><c> to</c><00:28:42.419><c> import</c><00:28:42.659><c> it</c><00:28:43.020><c> okay</c><00:28:43.320><c> which</c><00:28:43.740><c> is</c> 00:28:43.909 --> 00:28:43.919 align:start position:0% don't have to import it okay which is 00:28:43.919 --> 00:28:47.210 align:start position:0% don't have to import it okay which is quite<00:28:44.159><c> nice</c><00:28:44.460><c> so</c><00:28:45.059><c> anything</c><00:28:45.299><c> any</c><00:28:46.200><c> of</c><00:28:46.500><c> any</c><00:28:47.220><c> um</c> 00:28:47.210 --> 00:28:47.220 align:start position:0% quite nice so anything any of any um 00:28:47.220 --> 00:28:48.289 align:start position:0% quite nice so anything any of any um type 00:28:48.289 --> 00:28:48.299 align:start position:0% type 00:28:48.299 --> 00:28:50.930 align:start position:0% type that<00:28:48.900><c> you</c><00:28:49.020><c> think</c><00:28:49.200><c> will</c><00:28:49.440><c> be</c><00:28:49.620><c> very</c><00:28:50.279><c> used</c><00:28:50.520><c> in</c><00:28:50.820><c> your</c> 00:28:50.930 --> 00:28:50.940 align:start position:0% that you think will be very used in your 00:28:50.940 --> 00:28:52.310 align:start position:0% that you think will be very used in your application 00:28:52.310 --> 00:28:52.320 align:start position:0% application 00:28:52.320 --> 00:28:56.570 align:start position:0% application let's<00:28:52.799><c> say</c><00:28:52.980><c> we</c><00:28:53.220><c> are</c><00:28:53.400><c> defining</c><00:28:53.880><c> an</c><00:28:54.000><c> interface</c> 00:28:56.570 --> 00:28:56.580 align:start position:0% 00:28:56.580 --> 00:29:01.669 align:start position:0% for<00:28:57.179><c> custom</c><00:28:58.140><c> a</c><00:28:59.100><c> custom</c><00:28:59.520><c> type</c><00:28:59.880><c> okay</c><00:29:00.380><c> a</c><00:29:01.380><c> custom</c> 00:29:01.669 --> 00:29:01.679 align:start position:0% for custom a custom type okay a custom 00:29:01.679 --> 00:29:02.810 align:start position:0% for custom a custom type okay a custom type 00:29:02.810 --> 00:29:02.820 align:start position:0% type 00:29:02.820 --> 00:29:05.090 align:start position:0% type you<00:29:03.360><c> define</c><00:29:03.539><c> it</c><00:29:03.840><c> here</c><00:29:04.080><c> anything</c><00:29:04.500><c> that</c><00:29:04.919><c> you</c> 00:29:05.090 --> 00:29:05.100 align:start position:0% you define it here anything that you 00:29:05.100 --> 00:29:07.130 align:start position:0% you define it here anything that you think<00:29:05.279><c> is</c><00:29:05.460><c> going</c><00:29:05.640><c> to</c><00:29:05.760><c> be</c><00:29:05.820><c> used</c><00:29:06.059><c> very</c><00:29:06.659><c> very</c><00:29:06.900><c> very</c> 00:29:07.130 --> 00:29:07.140 align:start position:0% think is going to be used very very very 00:29:07.140 --> 00:29:09.169 align:start position:0% think is going to be used very very very often<00:29:07.740><c> and</c><00:29:08.400><c> you</c><00:29:08.580><c> don't</c><00:29:08.700><c> want</c><00:29:08.880><c> to</c><00:29:09.000><c> keep</c> 00:29:09.169 --> 00:29:09.179 align:start position:0% often and you don't want to keep 00:29:09.179 --> 00:29:10.909 align:start position:0% often and you don't want to keep importing<00:29:09.720><c> it</c><00:29:09.900><c> everywhere</c><00:29:10.320><c> in</c><00:29:10.559><c> your</c><00:29:10.740><c> app</c> 00:29:10.909 --> 00:29:10.919 align:start position:0% importing it everywhere in your app 00:29:10.919 --> 00:29:13.330 align:start position:0% importing it everywhere in your app right<00:29:11.279><c> you</c><00:29:12.000><c> say</c><00:29:12.240><c> Okay</c> 00:29:13.330 --> 00:29:13.340 align:start position:0% right you say Okay 00:29:13.340 --> 00:29:17.510 align:start position:0% right you say Okay property<00:29:14.340><c> one</c><00:29:14.840><c> property</c><00:29:15.840><c> one</c><00:29:16.080><c> it's</c><00:29:16.440><c> a</c><00:29:16.620><c> string</c> 00:29:17.510 --> 00:29:17.520 align:start position:0% property one property one it's a string 00:29:17.520 --> 00:29:19.810 align:start position:0% property one property one it's a string property<00:29:18.360><c> too</c> 00:29:19.810 --> 00:29:19.820 align:start position:0% property too 00:29:19.820 --> 00:29:23.750 align:start position:0% property too is<00:29:20.820><c> a</c><00:29:21.179><c> number</c><00:29:21.539><c> right</c> 00:29:23.750 --> 00:29:23.760 align:start position:0% is a number right 00:29:23.760 --> 00:29:25.970 align:start position:0% is a number right let's<00:29:23.940><c> do</c><00:29:24.179><c> that</c><00:29:24.360><c> like</c><00:29:24.539><c> that</c><00:29:24.720><c> right</c><00:29:25.320><c> you</c><00:29:25.679><c> don't</c> 00:29:25.970 --> 00:29:25.980 align:start position:0% let's do that like that right you don't 00:29:25.980 --> 00:29:27.830 align:start position:0% let's do that like that right you don't have<00:29:26.100><c> to</c><00:29:26.220><c> import</c><00:29:26.340><c> this</c><00:29:26.820><c> just</c><00:29:27.360><c> like</c><00:29:27.539><c> you</c><00:29:27.720><c> don't</c> 00:29:27.830 --> 00:29:27.840 align:start position:0% have to import this just like you don't 00:29:27.840 --> 00:29:29.810 align:start position:0% have to import this just like you don't have<00:29:27.960><c> to</c><00:29:28.080><c> import</c><00:29:28.200><c> interface</c><00:29:28.919><c> as</c><00:29:29.220><c> we</c><00:29:29.460><c> when</c><00:29:29.640><c> we</c> 00:29:29.810 --> 00:29:29.820 align:start position:0% have to import interface as we when we 00:29:29.820 --> 00:29:31.909 align:start position:0% have to import interface as we when we were<00:29:29.940><c> using</c><00:29:30.240><c> it</c><00:29:30.299><c> here</c><00:29:30.480><c> you</c><00:29:30.720><c> see</c><00:29:30.899><c> never</c><00:29:31.500><c> in</c><00:29:31.740><c> the</c> 00:29:31.909 --> 00:29:31.919 align:start position:0% were using it here you see never in the 00:29:31.919 --> 00:29:34.490 align:start position:0% were using it here you see never in the Imports<00:29:32.460><c> you</c><00:29:32.940><c> see</c><00:29:33.240><c> the</c><00:29:33.360><c> mention</c><00:29:33.600><c> of</c> 00:29:34.490 --> 00:29:34.500 align:start position:0% Imports you see the mention of 00:29:34.500 --> 00:29:37.669 align:start position:0% Imports you see the mention of um<00:29:34.760><c> offer</c><00:29:35.760><c> and</c><00:29:36.059><c> right</c><00:29:36.360><c> and</c><00:29:36.899><c> uh</c><00:29:37.080><c> that's</c><00:29:37.440><c> quite</c> 00:29:37.669 --> 00:29:37.679 align:start position:0% um offer and right and uh that's quite 00:29:37.679 --> 00:29:40.190 align:start position:0% um offer and right and uh that's quite handy<00:29:38.159><c> and</c><00:29:38.399><c> useful</c><00:29:38.820><c> when</c><00:29:39.600><c> you</c><00:29:39.779><c> have</c><00:29:39.899><c> custom</c> 00:29:40.190 --> 00:29:40.200 align:start position:0% handy and useful when you have custom 00:29:40.200 --> 00:29:43.549 align:start position:0% handy and useful when you have custom types<00:29:40.980><c> that</c><00:29:41.100><c> are</c><00:29:41.399><c> used</c><00:29:42.179><c> a</c><00:29:42.840><c> lot</c><00:29:42.960><c> in</c><00:29:43.260><c> your</c><00:29:43.380><c> app</c> 00:29:43.549 --> 00:29:43.559 align:start position:0% types that are used a lot in your app 00:29:43.559 --> 00:29:45.049 align:start position:0% types that are used a lot in your app you<00:29:43.799><c> don't</c><00:29:43.919><c> want</c><00:29:43.980><c> to</c><00:29:44.100><c> keep</c><00:29:44.220><c> importing</c><00:29:44.700><c> them</c><00:29:44.880><c> it</c> 00:29:45.049 --> 00:29:45.059 align:start position:0% you don't want to keep importing them it 00:29:45.059 --> 00:29:46.909 align:start position:0% you don't want to keep importing them it just<00:29:45.240><c> makes</c><00:29:45.419><c> your</c><00:29:45.659><c> app</c><00:29:45.960><c> you</c><00:29:46.320><c> know</c><00:29:46.440><c> your</c><00:29:46.620><c> code</c><00:29:46.740><c> a</c> 00:29:46.909 --> 00:29:46.919 align:start position:0% just makes your app you know your code a 00:29:46.919 --> 00:29:48.590 align:start position:0% just makes your app you know your code a bit<00:29:47.039><c> dirty</c> 00:29:48.590 --> 00:29:48.600 align:start position:0% bit dirty 00:29:48.600 --> 00:29:51.529 align:start position:0% bit dirty so<00:29:49.200><c> if</c><00:29:49.380><c> I</c><00:29:49.559><c> Define</c><00:29:49.740><c> a</c><00:29:50.100><c> custom</c><00:29:50.460><c> type</c><00:29:50.880><c> an</c><00:29:51.240><c> instance</c> 00:29:51.529 --> 00:29:51.539 align:start position:0% so if I Define a custom type an instance 00:29:51.539 --> 00:29:53.269 align:start position:0% so if I Define a custom type an instance of<00:29:51.720><c> that</c><00:29:51.899><c> custom</c><00:29:52.200><c> type</c><00:29:52.559><c> I'll</c><00:29:52.860><c> just</c><00:29:53.039><c> call</c><00:29:53.159><c> it</c> 00:29:53.269 --> 00:29:53.279 align:start position:0% of that custom type I'll just call it 00:29:53.279 --> 00:29:57.289 align:start position:0% of that custom type I'll just call it custom<00:29:53.580><c> type</c><00:29:54.299><c> and</c><00:29:54.600><c> then</c><00:29:54.779><c> I</c><00:29:55.020><c> type</c><00:29:55.200><c> it</c><00:29:55.440><c> as</c><00:29:55.860><c> oops</c> 00:29:57.289 --> 00:29:57.299 align:start position:0% custom type and then I type it as oops 00:29:57.299 --> 00:30:01.130 align:start position:0% custom type and then I type it as oops custom<00:29:58.220><c> type</c><00:29:59.220><c> see</c><00:29:59.760><c> here</c><00:30:00.059><c> so</c><00:30:00.419><c> I</c><00:30:00.779><c> don't</c><00:30:00.840><c> need</c><00:30:01.020><c> to</c> 00:30:01.130 --> 00:30:01.140 align:start position:0% custom type see here so I don't need to 00:30:01.140 --> 00:30:04.070 align:start position:0% custom type see here so I don't need to Define<00:30:01.380><c> it</c><00:30:01.679><c> and</c><00:30:02.460><c> and</c><00:30:03.179><c> um</c> 00:30:04.070 --> 00:30:04.080 align:start position:0% Define it and and um 00:30:04.080 --> 00:30:06.409 align:start position:0% Define it and and um yeah<00:30:04.559><c> typescript</c><00:30:05.399><c> already</c><00:30:05.640><c> knows</c><00:30:06.179><c> that</c><00:30:06.240><c> I</c> 00:30:06.409 --> 00:30:06.419 align:start position:0% yeah typescript already knows that I 00:30:06.419 --> 00:30:08.049 align:start position:0% yeah typescript already knows that I need<00:30:06.539><c> to</c><00:30:06.720><c> pass</c><00:30:06.840><c> in</c><00:30:07.080><c> the</c><00:30:07.200><c> string</c><00:30:07.440><c> to</c><00:30:07.620><c> this</c><00:30:07.799><c> guy</c> 00:30:08.049 --> 00:30:08.059 align:start position:0% need to pass in the string to this guy 00:30:08.059 --> 00:30:11.090 align:start position:0% need to pass in the string to this guy and<00:30:09.059><c> for</c><00:30:09.299><c> prop</c><00:30:09.600><c> 2</c><00:30:09.840><c> I</c><00:30:10.260><c> need</c><00:30:10.440><c> to</c><00:30:10.559><c> pass</c><00:30:10.740><c> in</c><00:30:10.919><c> a</c> 00:30:11.090 --> 00:30:11.100 align:start position:0% and for prop 2 I need to pass in a 00:30:11.100 --> 00:30:13.730 align:start position:0% and for prop 2 I need to pass in a number<00:30:11.279><c> okay</c><00:30:12.059><c> and</c><00:30:12.659><c> typescript</c><00:30:13.080><c> is</c><00:30:13.320><c> very</c><00:30:13.500><c> happy</c> 00:30:13.730 --> 00:30:13.740 align:start position:0% number okay and typescript is very happy 00:30:13.740 --> 00:30:15.590 align:start position:0% number okay and typescript is very happy and<00:30:14.279><c> you</c><00:30:14.460><c> see</c><00:30:14.640><c> here</c><00:30:14.820><c> I</c><00:30:14.940><c> never</c><00:30:15.120><c> needed</c><00:30:15.480><c> to</c> 00:30:15.590 --> 00:30:15.600 align:start position:0% and you see here I never needed to 00:30:15.600 --> 00:30:18.230 align:start position:0% and you see here I never needed to import<00:30:15.779><c> this</c><00:30:16.200><c> so</c><00:30:16.740><c> that's</c><00:30:16.919><c> why</c><00:30:17.100><c> this</c><00:30:17.460><c> remix.m</c> 00:30:18.230 --> 00:30:18.240 align:start position:0% import this so that's why this remix.m 00:30:18.240 --> 00:30:21.289 align:start position:0% import this so that's why this remix.m file<00:30:18.840><c> is</c><00:30:19.020><c> for</c><00:30:19.200><c> because</c><00:30:19.860><c> we</c><00:30:20.039><c> make.m</c><00:30:20.399><c> the</c><00:30:20.820><c> D</c><00:30:21.000><c> dot</c> 00:30:21.289 --> 00:30:21.299 align:start position:0% file is for because we make.m the D dot 00:30:21.299 --> 00:30:24.889 align:start position:0% file is for because we make.m the D dot TS<00:30:21.539><c> is</c><00:30:21.720><c> four</c><00:30:21.960><c> so</c><00:30:22.260><c> you</c><00:30:22.980><c> can</c><00:30:23.100><c> add</c><00:30:23.600><c> types</c><00:30:24.600><c> custom</c> 00:30:24.889 --> 00:30:24.899 align:start position:0% TS is four so you can add types custom 00:30:24.899 --> 00:30:27.889 align:start position:0% TS is four so you can add types custom types<00:30:25.380><c> to</c><00:30:25.559><c> the</c><00:30:25.740><c> remix</c><00:30:25.919><c> context</c><00:30:26.580><c> here</c><00:30:26.940><c> and</c> 00:30:27.889 --> 00:30:27.899 align:start position:0% types to the remix context here and 00:30:27.899 --> 00:30:30.110 align:start position:0% types to the remix context here and that's<00:30:28.380><c> very</c><00:30:28.620><c> very</c><00:30:28.799><c> handy</c><00:30:29.279><c> and</c><00:30:29.580><c> I</c><00:30:29.700><c> use</c><00:30:29.940><c> that</c> 00:30:30.110 --> 00:30:30.120 align:start position:0% that's very very handy and I use that 00:30:30.120 --> 00:30:32.389 align:start position:0% that's very very handy and I use that all<00:30:30.299><c> the</c><00:30:30.480><c> time</c><00:30:30.539><c> in</c><00:30:30.840><c> My</c><00:30:30.960><c> remix</c><00:30:31.140><c> projects</c> 00:30:32.389 --> 00:30:32.399 align:start position:0% all the time in My remix projects 00:30:32.399 --> 00:30:34.870 align:start position:0% all the time in My remix projects the<00:30:32.940><c> things</c><00:30:33.179><c> that</c><00:30:33.419><c> are</c><00:30:33.659><c> for</c><00:30:33.960><c> objects</c><00:30:34.440><c> that</c><00:30:34.620><c> are</c> 00:30:34.870 --> 00:30:34.880 align:start position:0% the things that are for objects that are 00:30:34.880 --> 00:30:38.409 align:start position:0% the things that are for objects that are like<00:30:35.880><c> ubiquitous</c><00:30:36.539><c> in</c><00:30:36.779><c> the</c><00:30:36.960><c> app</c><00:30:37.140><c> the</c> 00:30:38.409 --> 00:30:38.419 align:start position:0% like ubiquitous in the app the 00:30:38.419 --> 00:30:41.389 align:start position:0% like ubiquitous in the app the remixconfig.js<00:30:39.419><c> file</c><00:30:39.840><c> okay</c><00:30:40.260><c> this</c><00:30:41.100><c> one</c><00:30:41.220><c> is</c> 00:30:41.389 --> 00:30:41.399 align:start position:0% remixconfig.js file okay this one is 00:30:41.399 --> 00:30:43.970 align:start position:0% remixconfig.js file okay this one is very<00:30:41.580><c> interesting</c><00:30:41.940><c> as</c><00:30:42.179><c> well</c><00:30:42.419><c> uh</c><00:30:43.260><c> but</c><00:30:43.740><c> it's</c> 00:30:43.970 --> 00:30:43.980 align:start position:0% very interesting as well uh but it's 00:30:43.980 --> 00:30:45.950 align:start position:0% very interesting as well uh but it's more<00:30:44.220><c> like</c><00:30:44.399><c> remix</c><00:30:44.880><c> specific</c><00:30:45.360><c> so</c><00:30:45.600><c> here</c><00:30:45.779><c> you</c> 00:30:45.950 --> 00:30:45.960 align:start position:0% more like remix specific so here you 00:30:45.960 --> 00:30:47.690 align:start position:0% more like remix specific so here you define<00:30:46.140><c> the</c><00:30:46.440><c> server</c><00:30:46.799><c> which</c><00:30:47.039><c> is</c><00:30:47.159><c> what</c><00:30:47.399><c> we</c><00:30:47.520><c> saw</c> 00:30:47.690 --> 00:30:47.700 align:start position:0% define the server which is what we saw 00:30:47.700 --> 00:30:49.190 align:start position:0% define the server which is what we saw here<00:30:47.940><c> before</c><00:30:48.120><c> and</c><00:30:48.360><c> explain</c><00:30:48.539><c> to</c><00:30:48.840><c> you</c><00:30:48.899><c> that</c><00:30:49.080><c> it</c> 00:30:49.190 --> 00:30:49.200 align:start position:0% here before and explain to you that it 00:30:49.200 --> 00:30:51.830 align:start position:0% here before and explain to you that it was<00:30:49.380><c> the</c><00:30:49.500><c> server</c><00:30:49.860><c> in</c><00:30:50.580><c> the</c><00:30:50.760><c> in</c><00:30:50.940><c> the</c><00:30:51.059><c> in</c> 00:30:51.830 --> 00:30:51.840 align:start position:0% was the server in the in the in 00:30:51.840 --> 00:30:52.370 align:start position:0% was the server in the in the in um 00:30:52.370 --> 00:30:52.380 align:start position:0% um 00:30:52.380 --> 00:30:54.230 align:start position:0% um development<00:30:53.159><c> environment</c><00:30:53.640><c> is</c><00:30:53.880><c> going</c><00:30:54.000><c> to</c><00:30:54.120><c> run</c> 00:30:54.230 --> 00:30:54.240 align:start position:0% development environment is going to run 00:30:54.240 --> 00:30:57.590 align:start position:0% development environment is going to run if<00:30:54.539><c> you</c><00:30:54.659><c> if</c><00:30:54.840><c> you're</c><00:30:55.020><c> using</c><00:30:55.380><c> uh</c><00:30:56.220><c> Shopify</c><00:30:57.059><c> oxygen</c> 00:30:57.590 --> 00:30:57.600 align:start position:0% if you if you're using uh Shopify oxygen 00:30:57.600 --> 00:31:00.049 align:start position:0% if you if you're using uh Shopify oxygen it's<00:30:57.720><c> going</c><00:30:57.899><c> to</c><00:30:57.960><c> use</c><00:30:58.080><c> mini</c><00:30:58.320><c> oxygen</c><00:30:59.399><c> if</c><00:30:59.880><c> you're</c> 00:31:00.049 --> 00:31:00.059 align:start position:0% it's going to use mini oxygen if you're 00:31:00.059 --> 00:31:01.370 align:start position:0% it's going to use mini oxygen if you're using<00:31:00.240><c> classical</c><00:31:00.480><c> it's</c><00:31:00.779><c> going</c><00:31:00.899><c> to</c><00:31:01.020><c> use</c><00:31:01.080><c> mini</c> 00:31:01.370 --> 00:31:01.380 align:start position:0% using classical it's going to use mini 00:31:01.380 --> 00:31:03.649 align:start position:0% using classical it's going to use mini flare<00:31:01.860><c> and</c><00:31:02.580><c> in</c><00:31:02.760><c> production</c><00:31:03.120><c> it's</c><00:31:03.419><c> going</c><00:31:03.539><c> to</c> 00:31:03.649 --> 00:31:03.659 align:start position:0% flare and in production it's going to 00:31:03.659 --> 00:31:05.810 align:start position:0% flare and in production it's going to use<00:31:03.779><c> oxygen</c><00:31:04.440><c> and</c><00:31:04.620><c> cloudflare</c><00:31:05.220><c> expects</c> 00:31:05.810 --> 00:31:05.820 align:start position:0% use oxygen and cloudflare expects 00:31:05.820 --> 00:31:10.490 align:start position:0% use oxygen and cloudflare expects respectively<00:31:06.539><c> okay</c><00:31:07.520><c> so</c><00:31:08.779><c> uh</c><00:31:09.779><c> another</c><00:31:10.200><c> one</c> 00:31:10.490 --> 00:31:10.500 align:start position:0% respectively okay so uh another one 00:31:10.500 --> 00:31:11.930 align:start position:0% respectively okay so uh another one that's<00:31:10.740><c> interesting</c><00:31:11.220><c> here</c><00:31:11.460><c> obviously</c><00:31:11.820><c> we're</c> 00:31:11.930 --> 00:31:11.940 align:start position:0% that's interesting here obviously we're 00:31:11.940 --> 00:31:13.310 align:start position:0% that's interesting here obviously we're saying<00:31:12.240><c> that</c><00:31:12.360><c> we're</c><00:31:12.480><c> using</c><00:31:12.659><c> Talent</c><00:31:13.140><c> we're</c> 00:31:13.310 --> 00:31:13.320 align:start position:0% saying that we're using Talent we're 00:31:13.320 --> 00:31:17.269 align:start position:0% saying that we're using Talent we're using<00:31:13.500><c> post</c><00:31:13.740><c> CSS</c><00:31:14.539><c> and</c><00:31:15.860><c> a</c><00:31:16.860><c> few</c><00:31:16.919><c> other</c><00:31:17.100><c> things</c> 00:31:17.269 --> 00:31:17.279 align:start position:0% using post CSS and a few other things 00:31:17.279 --> 00:31:22.789 align:start position:0% using post CSS and a few other things that<00:31:17.520><c> are</c><00:31:17.700><c> important</c><00:31:18.120><c> I</c><00:31:18.659><c> think</c><00:31:19.039><c> watch</c><00:31:20.039><c> files</c> 00:31:22.789 --> 00:31:22.799 align:start position:0% 00:31:22.799 --> 00:31:25.789 align:start position:0% yeah<00:31:23.340><c> these</c><00:31:23.820><c> watch</c><00:31:24.000><c> pads</c><00:31:24.600><c> is</c><00:31:25.320><c> interesting</c> 00:31:25.789 --> 00:31:25.799 align:start position:0% yeah these watch pads is interesting 00:31:25.799 --> 00:31:28.990 align:start position:0% yeah these watch pads is interesting because<00:31:26.059><c> mini</c><00:31:27.059><c> flare</c><00:31:27.539><c> or</c><00:31:27.840><c> mini</c><00:31:28.020><c> oxygen</c> 00:31:28.990 --> 00:31:29.000 align:start position:0% because mini flare or mini oxygen 00:31:29.000 --> 00:31:32.450 align:start position:0% because mini flare or mini oxygen compiles<00:31:30.000><c> your</c><00:31:30.539><c> code</c><00:31:30.919><c> into</c><00:31:31.919><c> this</c><00:31:32.279><c> public</c> 00:31:32.450 --> 00:31:32.460 align:start position:0% compiles your code into this public 00:31:32.460 --> 00:31:34.909 align:start position:0% compiles your code into this public folder<00:31:33.059><c> here</c><00:31:33.299><c> okay</c><00:31:33.779><c> and</c><00:31:34.320><c> this</c><00:31:34.559><c> is</c><00:31:34.679><c> where</c> 00:31:34.909 --> 00:31:34.919 align:start position:0% folder here okay and this is where 00:31:34.919 --> 00:31:38.450 align:start position:0% folder here okay and this is where basically<00:31:35.460><c> uh</c><00:31:36.240><c> things</c><00:31:37.140><c> like</c><00:31:37.559><c> the</c><00:31:37.799><c> bundle</c><00:31:38.159><c> and</c> 00:31:38.450 --> 00:31:38.460 align:start position:0% basically uh things like the bundle and 00:31:38.460 --> 00:31:40.310 align:start position:0% basically uh things like the bundle and so<00:31:38.580><c> on</c><00:31:38.760><c> I</c><00:31:38.880><c> defined</c><00:31:39.299><c> and</c><00:31:39.480><c> so</c><00:31:39.600><c> on</c><00:31:39.779><c> that's</c><00:31:39.960><c> so</c> 00:31:40.310 --> 00:31:40.320 align:start position:0% so on I defined and so on that's so 00:31:40.320 --> 00:31:42.110 align:start position:0% so on I defined and so on that's so that's<00:31:40.500><c> why</c><00:31:40.620><c> it</c><00:31:40.740><c> keeps</c><00:31:41.039><c> the</c><00:31:41.340><c> server</c><00:31:41.640><c> watches</c> 00:31:42.110 --> 00:31:42.120 align:start position:0% that's why it keeps the server watches 00:31:42.120 --> 00:31:46.070 align:start position:0% that's why it keeps the server watches this<00:31:42.960><c> folder</c><00:31:43.320><c> here</c><00:31:43.559><c> for</c><00:31:43.860><c> changes</c><00:31:44.340><c> and</c><00:31:44.940><c> uh</c><00:31:45.179><c> and</c> 00:31:46.070 --> 00:31:46.080 align:start position:0% this folder here for changes and uh and 00:31:46.080 --> 00:31:48.250 align:start position:0% this folder here for changes and uh and changes<00:31:46.620><c> your</c><00:31:46.860><c> app</c> 00:31:48.250 --> 00:31:48.260 align:start position:0% changes your app 00:31:48.260 --> 00:31:51.110 align:start position:0% changes your app accordingly<00:31:49.260><c> as</c><00:31:49.679><c> you</c><00:31:49.799><c> make</c><00:31:49.980><c> changes</c><00:31:50.460><c> this</c> 00:31:51.110 --> 00:31:51.120 align:start position:0% accordingly as you make changes this 00:31:51.120 --> 00:31:54.230 align:start position:0% accordingly as you make changes this future<00:31:51.360><c> flux</c><00:31:51.960><c> because</c><00:31:52.799><c> remix</c><00:31:53.520><c> at</c><00:31:53.940><c> the</c><00:31:54.120><c> moment</c> 00:31:54.230 --> 00:31:54.240 align:start position:0% future flux because remix at the moment 00:31:54.240 --> 00:31:56.210 align:start position:0% future flux because remix at the moment is<00:31:54.600><c> undergoing</c><00:31:55.320><c> some</c> 00:31:56.210 --> 00:31:56.220 align:start position:0% is undergoing some 00:31:56.220 --> 00:31:58.970 align:start position:0% is undergoing some like<00:31:56.580><c> a</c><00:31:56.700><c> migration</c><00:31:57.120><c> from</c><00:31:57.480><c> one</c><00:31:57.720><c> point</c><00:31:57.960><c> like</c><00:31:58.799><c> the</c> 00:31:58.970 --> 00:31:58.980 align:start position:0% like a migration from one point like the 00:31:58.980 --> 00:32:02.269 align:start position:0% like a migration from one point like the version<00:31:59.159><c> one</c><00:31:59.460><c> version</c><00:31:59.940><c> 0.2</c><00:32:00.600><c> and</c><00:32:01.500><c> there</c><00:32:02.100><c> are</c><00:32:02.220><c> a</c> 00:32:02.269 --> 00:32:02.279 align:start position:0% version one version 0.2 and there are a 00:32:02.279 --> 00:32:03.649 align:start position:0% version one version 0.2 and there are a lot<00:32:02.399><c> of</c><00:32:02.520><c> improvements</c><00:32:03.120><c> so</c><00:32:03.240><c> I</c><00:32:03.419><c> highly</c> 00:32:03.649 --> 00:32:03.659 align:start position:0% lot of improvements so I highly 00:32:03.659 --> 00:32:04.970 align:start position:0% lot of improvements so I highly recommend<00:32:04.020><c> I</c><00:32:04.200><c> now</c><00:32:04.380><c> add</c><00:32:04.559><c> this</c><00:32:04.740><c> in</c><00:32:04.860><c> the</c> 00:32:04.970 --> 00:32:04.980 align:start position:0% recommend I now add this in the 00:32:04.980 --> 00:32:06.289 align:start position:0% recommend I now add this in the description<00:32:05.220><c> this</c><00:32:05.520><c> link</c><00:32:05.760><c> in</c><00:32:05.880><c> the</c><00:32:06.000><c> description</c> 00:32:06.289 --> 00:32:06.299 align:start position:0% description this link in the description 00:32:06.299 --> 00:32:09.049 align:start position:0% description this link in the description they<00:32:07.080><c> are</c><00:32:07.320><c> very</c><00:32:07.440><c> very</c><00:32:07.679><c> good</c><00:32:08.279><c> changes</c><00:32:08.760><c> that</c> 00:32:09.049 --> 00:32:09.059 align:start position:0% they are very very good changes that 00:32:09.059 --> 00:32:12.049 align:start position:0% they are very very good changes that were<00:32:09.240><c> added</c><00:32:09.600><c> introduced</c><00:32:10.200><c> in</c><00:32:10.799><c> um</c><00:32:10.799><c> version</c><00:32:11.700><c> two</c> 00:32:12.049 --> 00:32:12.059 align:start position:0% were added introduced in um version two 00:32:12.059 --> 00:32:14.990 align:start position:0% were added introduced in um version two namely<00:32:12.899><c> account</c><00:32:13.140><c> I</c><00:32:13.679><c> think</c><00:32:13.860><c> out</c><00:32:14.340><c> of</c><00:32:14.580><c> all</c><00:32:14.700><c> this</c> 00:32:14.990 --> 00:32:15.000 align:start position:0% namely account I think out of all this 00:32:15.000 --> 00:32:16.909 align:start position:0% namely account I think out of all this the<00:32:15.600><c> things</c><00:32:15.960><c> that</c><00:32:16.080><c> are</c><00:32:16.260><c> very</c><00:32:16.440><c> interesting</c><00:32:16.740><c> to</c> 00:32:16.909 --> 00:32:16.919 align:start position:0% the things that are very interesting to 00:32:16.919 --> 00:32:19.549 align:start position:0% the things that are very interesting to me<00:32:17.100><c> particularly</c><00:32:17.840><c> as</c><00:32:18.840><c> a</c><00:32:19.080><c> storefront</c> 00:32:19.549 --> 00:32:19.559 align:start position:0% me particularly as a storefront 00:32:19.559 --> 00:32:21.590 align:start position:0% me particularly as a storefront developer<00:32:19.980><c> is</c><00:32:20.340><c> how</c><00:32:20.640><c> you</c><00:32:20.760><c> handle</c><00:32:21.179><c> the</c><00:32:21.299><c> meta</c> 00:32:21.590 --> 00:32:21.600 align:start position:0% developer is how you handle the meta 00:32:21.600 --> 00:32:24.190 align:start position:0% developer is how you handle the meta tags<00:32:21.960><c> so</c><00:32:22.200><c> there</c><00:32:22.919><c> are</c><00:32:23.159><c> some</c><00:32:23.340><c> very</c><00:32:23.580><c> good</c><00:32:23.760><c> in</c> 00:32:24.190 --> 00:32:24.200 align:start position:0% tags so there are some very good in 00:32:24.200 --> 00:32:26.750 align:start position:0% tags so there are some very good in improvements<00:32:25.200><c> on</c><00:32:25.380><c> how</c><00:32:25.559><c> you</c><00:32:25.740><c> handle</c> 00:32:26.750 --> 00:32:26.760 align:start position:0% improvements on how you handle 00:32:26.760 --> 00:32:29.930 align:start position:0% improvements on how you handle um<00:32:26.820><c> The</c><00:32:27.779><c> Meta</c><00:32:28.020><c> tags</c><00:32:28.380><c> here</c><00:32:28.559><c> and</c><00:32:28.860><c> the</c><00:32:28.980><c> headers</c><00:32:29.340><c> so</c> 00:32:29.930 --> 00:32:29.940 align:start position:0% um The Meta tags here and the headers so 00:32:29.940 --> 00:32:33.230 align:start position:0% um The Meta tags here and the headers so it<00:32:30.120><c> makes</c><00:32:30.419><c> uh</c><00:32:31.140><c> doing</c><00:32:31.620><c> SEO</c><00:32:32.220><c> for</c><00:32:32.520><c> your</c><00:32:32.640><c> store</c><00:32:32.940><c> a</c> 00:32:33.230 --> 00:32:33.240 align:start position:0% it makes uh doing SEO for your store a 00:32:33.240 --> 00:32:36.110 align:start position:0% it makes uh doing SEO for your store a lot<00:32:33.360><c> easier</c><00:32:33.720><c> okay</c><00:32:34.559><c> and</c><00:32:35.340><c> a</c><00:32:35.460><c> lot</c><00:32:35.580><c> more</c><00:32:35.760><c> flexible</c> 00:32:36.110 --> 00:32:36.120 align:start position:0% lot easier okay and a lot more flexible 00:32:36.120 --> 00:32:38.450 align:start position:0% lot easier okay and a lot more flexible as<00:32:36.419><c> well</c><00:32:36.659><c> another</c><00:32:37.200><c> very</c><00:32:37.740><c> interesting</c><00:32:38.100><c> thing</c> 00:32:38.450 --> 00:32:38.460 align:start position:0% as well another very interesting thing 00:32:38.460 --> 00:32:41.630 align:start position:0% as well another very interesting thing is<00:32:38.580><c> how</c><00:32:39.120><c> to</c><00:32:39.360><c> do</c><00:32:39.600><c> routing</c><00:32:40.279><c> some</c><00:32:41.279><c> people</c><00:32:41.460><c> don't</c> 00:32:41.630 --> 00:32:41.640 align:start position:0% is how to do routing some people don't 00:32:41.640 --> 00:32:44.149 align:start position:0% is how to do routing some people don't like<00:32:41.880><c> this</c><00:32:42.120><c> way</c><00:32:42.299><c> this</c><00:32:42.600><c> new</c><00:32:42.840><c> way</c><00:32:43.020><c> I</c><00:32:43.320><c> do</c><00:32:43.500><c> think</c> 00:32:44.149 --> 00:32:44.159 align:start position:0% like this way this new way I do think 00:32:44.159 --> 00:32:47.149 align:start position:0% like this way this new way I do think it's<00:32:44.340><c> a</c><00:32:44.520><c> lot</c><00:32:44.640><c> more</c><00:32:44.820><c> cleaner</c><00:32:45.299><c> and</c><00:32:45.539><c> easier</c><00:32:45.960><c> and</c><00:32:46.320><c> I</c> 00:32:47.149 --> 00:32:47.159 align:start position:0% it's a lot more cleaner and easier and I 00:32:47.159 --> 00:32:49.610 align:start position:0% it's a lot more cleaner and easier and I makes<00:32:47.760><c> a</c><00:32:48.000><c> better</c><00:32:48.240><c> developer</c><00:32:48.779><c> experience</c><00:32:49.140><c> so</c> 00:32:49.610 --> 00:32:49.620 align:start position:0% makes a better developer experience so 00:32:49.620 --> 00:32:51.710 align:start position:0% makes a better developer experience so check<00:32:50.279><c> that</c><00:32:50.460><c> out</c><00:32:50.640><c> I'll</c><00:32:50.940><c> add</c><00:32:51.120><c> the</c><00:32:51.299><c> links</c><00:32:51.480><c> in</c><00:32:51.600><c> the</c> 00:32:51.710 --> 00:32:51.720 align:start position:0% check that out I'll add the links in the 00:32:51.720 --> 00:32:54.649 align:start position:0% check that out I'll add the links in the description<00:32:51.960><c> so</c><00:32:52.740><c> our</c><00:32:52.919><c> next</c><00:32:53.159><c> stop</c><00:32:53.399><c> really</c><00:32:53.760><c> is</c> 00:32:54.649 --> 00:32:54.659 align:start position:0% description so our next stop really is 00:32:54.659 --> 00:32:56.870 align:start position:0% description so our next stop really is um the<00:32:55.080><c> post</c><00:32:55.320><c> CSS</c><00:32:55.799><c> really</c><00:32:56.100><c> this</c><00:32:56.520><c> is</c><00:32:56.640><c> just</c> 00:32:56.870 --> 00:32:56.880 align:start position:0% um the post CSS really this is just 00:32:56.880 --> 00:33:00.889 align:start position:0% um the post CSS really this is just about<00:32:57.059><c> configuring</c><00:32:57.659><c> The</c><00:32:57.899><c> Towering</c><00:32:58.440><c> CSS</c> 00:33:00.889 --> 00:33:00.899 align:start position:0% about configuring The Towering CSS 00:33:00.899 --> 00:33:04.190 align:start position:0% about configuring The Towering CSS to<00:33:01.620><c> style</c><00:33:01.860><c> our</c><00:33:02.159><c> files</c><00:33:02.940><c> or</c><00:33:03.360><c> if</c><00:33:03.899><c> you're</c><00:33:04.020><c> not</c> 00:33:04.190 --> 00:33:04.200 align:start position:0% to style our files or if you're not 00:33:04.200 --> 00:33:05.570 align:start position:0% to style our files or if you're not familiar<00:33:04.500><c> with</c><00:33:04.620><c> this</c><00:33:04.740><c> go</c><00:33:04.980><c> in</c><00:33:05.100><c> the</c><00:33:05.279><c> talent</c> 00:33:05.570 --> 00:33:05.580 align:start position:0% familiar with this go in the talent 00:33:05.580 --> 00:33:07.789 align:start position:0% familiar with this go in the talent documentation<00:33:06.240><c> tell</c><00:33:06.840><c> me</c><00:33:07.020><c> CS</c><00:33:07.320><c> documentation</c> 00:33:07.789 --> 00:33:07.799 align:start position:0% documentation tell me CS documentation 00:33:07.799 --> 00:33:09.710 align:start position:0% documentation tell me CS documentation and<00:33:07.980><c> if</c><00:33:08.279><c> you</c><00:33:08.399><c> check</c><00:33:08.520><c> post</c><00:33:08.820><c> CSS</c><00:33:09.240><c> to</c><00:33:09.480><c> explain</c> 00:33:09.710 --> 00:33:09.720 align:start position:0% and if you check post CSS to explain 00:33:09.720 --> 00:33:11.810 align:start position:0% and if you check post CSS to explain what<00:33:10.080><c> this</c><00:33:10.200><c> is</c><00:33:10.380><c> the</c><00:33:11.039><c> package</c><00:33:11.340><c> you're</c><00:33:11.520><c> Json</c> 00:33:11.810 --> 00:33:11.820 align:start position:0% what this is the package you're Json 00:33:11.820 --> 00:33:13.490 align:start position:0% what this is the package you're Json obviously<00:33:12.240><c> is</c><00:33:12.360><c> familiar</c><00:33:12.779><c> to</c><00:33:12.899><c> everyone</c><00:33:13.140><c> that</c> 00:33:13.490 --> 00:33:13.500 align:start position:0% obviously is familiar to everyone that 00:33:13.500 --> 00:33:15.889 align:start position:0% obviously is familiar to everyone that has<00:33:13.740><c> been</c><00:33:13.919><c> has</c><00:33:14.159><c> run</c><00:33:14.399><c> a</c><00:33:14.640><c> JavaScript</c><00:33:15.179><c> pack</c><00:33:15.480><c> a</c> 00:33:15.889 --> 00:33:15.899 align:start position:0% has been has run a JavaScript pack a 00:33:15.899 --> 00:33:17.289 align:start position:0% has been has run a JavaScript pack a project 00:33:17.289 --> 00:33:17.299 align:start position:0% project 00:33:17.299 --> 00:33:21.230 align:start position:0% project uh<00:33:18.299><c> here</c><00:33:19.080><c> these</c><00:33:19.799><c> scripts</c><00:33:20.159><c> are</c><00:33:20.519><c> basically</c><00:33:20.820><c> all</c> 00:33:21.230 --> 00:33:21.240 align:start position:0% uh here these scripts are basically all 00:33:21.240 --> 00:33:23.930 align:start position:0% uh here these scripts are basically all the<00:33:21.480><c> npm</c><00:33:22.080><c> Run</c><00:33:22.799><c> search</c><00:33:23.159><c> and</c><00:33:23.340><c> search</c><00:33:23.580><c> for</c> 00:33:23.930 --> 00:33:23.940 align:start position:0% the npm Run search and search for 00:33:23.940 --> 00:33:25.570 align:start position:0% the npm Run search and search for example<00:33:24.179><c> we</c><00:33:24.360><c> ran</c><00:33:24.600><c> the</c><00:33:24.720><c> first</c><00:33:24.899><c> one</c><00:33:25.080><c> which</c><00:33:25.320><c> was</c> 00:33:25.570 --> 00:33:25.580 align:start position:0% example we ran the first one which was 00:33:25.580 --> 00:33:29.750 align:start position:0% example we ran the first one which was npm<00:33:26.580><c> run</c><00:33:26.960><c> Dev</c><00:33:27.960><c> okay</c><00:33:28.320><c> you</c><00:33:28.679><c> can</c><00:33:28.799><c> run</c><00:33:28.980><c> npm</c><00:33:29.580><c> run</c> 00:33:29.750 --> 00:33:29.760 align:start position:0% npm run Dev okay you can run npm run 00:33:29.760 --> 00:33:33.409 align:start position:0% npm run Dev okay you can run npm run preview<00:33:30.360><c> npm</c><00:33:31.260><c> run</c><00:33:31.440><c> type</c><00:33:32.399><c> check</c><00:33:32.700><c> so</c><00:33:33.120><c> if</c><00:33:33.299><c> you</c> 00:33:33.409 --> 00:33:33.419 align:start position:0% preview npm run type check so if you 00:33:33.419 --> 00:33:35.509 align:start position:0% preview npm run type check so if you have<00:33:33.659><c> typescript</c> 00:33:35.509 --> 00:33:35.519 align:start position:0% have typescript 00:33:35.519 --> 00:33:37.370 align:start position:0% have typescript if<00:33:36.000><c> you</c><00:33:36.059><c> wanted</c><00:33:36.240><c> to</c><00:33:36.480><c> make</c><00:33:36.779><c> sure</c><00:33:36.899><c> that</c><00:33:37.140><c> your</c> 00:33:37.370 --> 00:33:37.380 align:start position:0% if you wanted to make sure that your 00:33:37.380 --> 00:33:40.310 align:start position:0% if you wanted to make sure that your file<00:33:37.679><c> your</c><00:33:38.159><c> project</c><00:33:38.399><c> is</c><00:33:39.059><c> okay</c><00:33:39.360><c> with</c><00:33:39.720><c> as</c><00:33:40.140><c> fast</c> 00:33:40.310 --> 00:33:40.320 align:start position:0% file your project is okay with as fast 00:33:40.320 --> 00:33:42.409 align:start position:0% file your project is okay with as fast types<00:33:40.740><c> typescript</c><00:33:41.220><c> goes</c><00:33:41.640><c> you</c><00:33:41.760><c> can</c><00:33:41.880><c> run</c><00:33:42.179><c> type</c> 00:33:42.409 --> 00:33:42.419 align:start position:0% types typescript goes you can run type 00:33:42.419 --> 00:33:45.169 align:start position:0% types typescript goes you can run type check<00:33:42.720><c> and</c><00:33:43.320><c> it's</c><00:33:43.440><c> gonna</c><00:33:43.679><c> check</c><00:33:44.580><c> your</c><00:33:45.000><c> your</c> 00:33:45.169 --> 00:33:45.179 align:start position:0% check and it's gonna check your your 00:33:45.179 --> 00:33:46.610 align:start position:0% check and it's gonna check your your project<00:33:45.480><c> and</c><00:33:45.840><c> make</c><00:33:45.960><c> sure</c><00:33:46.080><c> that</c><00:33:46.260><c> there's</c><00:33:46.440><c> no</c> 00:33:46.610 --> 00:33:46.620 align:start position:0% project and make sure that there's no 00:33:46.620 --> 00:33:49.490 align:start position:0% project and make sure that there's no typescript<00:33:47.159><c> error</c><00:33:47.640><c> and</c><00:33:47.820><c> if</c><00:33:48.000><c> they</c><00:33:48.179><c> were</c><00:33:48.419><c> in</c><00:33:49.380><c> our</c> 00:33:49.490 --> 00:33:49.500 align:start position:0% typescript error and if they were in our 00:33:49.500 --> 00:33:51.710 align:start position:0% typescript error and if they were in our case<00:33:49.679><c> there</c><00:33:49.860><c> is</c><00:33:50.039><c> not</c><00:33:50.159><c> it</c><00:33:50.820><c> will</c><00:33:51.000><c> have</c><00:33:51.179><c> to</c><00:33:51.299><c> it</c> 00:33:51.710 --> 00:33:51.720 align:start position:0% case there is not it will have to it 00:33:51.720 --> 00:33:53.330 align:start position:0% case there is not it will have to it would<00:33:51.840><c> have</c><00:33:51.899><c> it</c><00:33:52.140><c> would</c><00:33:52.260><c> have</c><00:33:52.440><c> highlighted</c><00:33:53.159><c> it</c> 00:33:53.330 --> 00:33:53.340 align:start position:0% would have it would have highlighted it 00:33:53.340 --> 00:33:56.690 align:start position:0% would have it would have highlighted it here<00:33:53.580><c> okay</c><00:33:54.320><c> uh</c><00:33:55.320><c> build</c><00:33:55.559><c> obviously</c><00:33:56.100><c> when</c><00:33:56.519><c> you're</c> 00:33:56.690 --> 00:33:56.700 align:start position:0% here okay uh build obviously when you're 00:33:56.700 --> 00:33:58.610 align:start position:0% here okay uh build obviously when you're ready<00:33:56.880><c> to</c><00:33:57.480><c> deploy</c><00:33:58.019><c> your</c><00:33:58.140><c> project</c><00:33:58.380><c> to</c> 00:33:58.610 --> 00:33:58.620 align:start position:0% ready to deploy your project to 00:33:58.620 --> 00:34:00.590 align:start position:0% ready to deploy your project to production<00:33:58.980><c> you're</c><00:33:59.460><c> gonna</c><00:33:59.640><c> run</c><00:33:59.940><c> create</c><00:34:00.360><c> a</c> 00:34:00.590 --> 00:34:00.600 align:start position:0% production you're gonna run create a 00:34:00.600 --> 00:34:03.289 align:start position:0% production you're gonna run create a bundle<00:34:00.960><c> here</c><00:34:01.200><c> let's</c><00:34:01.559><c> see</c><00:34:01.740><c> npm</c><00:34:02.159><c> run</c><00:34:02.340><c> build</c> 00:34:03.289 --> 00:34:03.299 align:start position:0% bundle here let's see npm run build 00:34:03.299 --> 00:34:04.730 align:start position:0% bundle here let's see npm run build and<00:34:03.720><c> it's</c><00:34:03.899><c> going</c><00:34:04.080><c> to</c><00:34:04.140><c> create</c><00:34:04.260><c> a</c><00:34:04.440><c> production</c> 00:34:04.730 --> 00:34:04.740 align:start position:0% and it's going to create a production 00:34:04.740 --> 00:34:07.009 align:start position:0% and it's going to create a production bundle<00:34:05.220><c> obviously</c><00:34:05.820><c> most</c><00:34:06.480><c> of</c><00:34:06.600><c> the</c><00:34:06.720><c> time</c><00:34:06.840><c> you</c> 00:34:07.009 --> 00:34:07.019 align:start position:0% bundle obviously most of the time you 00:34:07.019 --> 00:34:09.109 align:start position:0% bundle obviously most of the time you don't<00:34:07.200><c> do</c><00:34:07.320><c> this</c><00:34:07.500><c> manually</c><00:34:07.919><c> yourself</c><00:34:08.220><c> you</c><00:34:08.940><c> let</c> 00:34:09.109 --> 00:34:09.119 align:start position:0% don't do this manually yourself you let 00:34:09.119 --> 00:34:11.810 align:start position:0% don't do this manually yourself you let your<00:34:09.359><c> cicd</c><00:34:09.960><c> do</c><00:34:10.260><c> that</c><00:34:10.379><c> for</c><00:34:10.560><c> you</c><00:34:10.740><c> so</c><00:34:11.580><c> you're</c> 00:34:11.810 --> 00:34:11.820 align:start position:0% your cicd do that for you so you're 00:34:11.820 --> 00:34:13.490 align:start position:0% your cicd do that for you so you're gonna<00:34:12.000><c> connect</c><00:34:12.359><c> your</c><00:34:12.720><c> project</c><00:34:12.899><c> you're</c><00:34:13.320><c> gonna</c> 00:34:13.490 --> 00:34:13.500 align:start position:0% gonna connect your project you're gonna 00:34:13.500 --> 00:34:16.430 align:start position:0% gonna connect your project you're gonna push<00:34:13.740><c> your</c><00:34:13.980><c> product</c><00:34:14.159><c> to</c><00:34:14.460><c> a</c><00:34:15.139><c> repository</c><00:34:16.139><c> like</c> 00:34:16.430 --> 00:34:16.440 align:start position:0% push your product to a repository like 00:34:16.440 --> 00:34:19.849 align:start position:0% push your product to a repository like git<00:34:16.859><c> or</c><00:34:17.580><c> big</c><00:34:17.879><c> bucket</c><00:34:18.300><c> or</c><00:34:18.659><c> gitlab</c><00:34:19.320><c> and</c><00:34:19.560><c> so</c><00:34:19.679><c> on</c> 00:34:19.849 --> 00:34:19.859 align:start position:0% git or big bucket or gitlab and so on 00:34:19.859 --> 00:34:22.010 align:start position:0% git or big bucket or gitlab and so on and<00:34:20.460><c> then</c><00:34:20.580><c> they</c><00:34:20.760><c> have</c><00:34:20.940><c> cicd</c><00:34:21.599><c> for</c><00:34:21.839><c> example</c> 00:34:22.010 --> 00:34:22.020 align:start position:0% and then they have cicd for example 00:34:22.020 --> 00:34:24.649 align:start position:0% and then they have cicd for example GitHub<00:34:22.560><c> functions</c><00:34:23.099><c> to</c><00:34:23.760><c> uh</c> 00:34:24.649 --> 00:34:24.659 align:start position:0% GitHub functions to uh 00:34:24.659 --> 00:34:27.770 align:start position:0% GitHub functions to uh to<00:34:25.200><c> do</c><00:34:25.320><c> all</c><00:34:25.679><c> this</c><00:34:25.919><c> this</c><00:34:26.460><c> uh</c><00:34:26.879><c> continuous</c> 00:34:27.770 --> 00:34:27.780 align:start position:0% to do all this this uh continuous 00:34:27.780 --> 00:34:29.149 align:start position:0% to do all this this uh continuous integration<00:34:28.200><c> and</c><00:34:28.379><c> continuous</c><00:34:28.740><c> deployment</c> 00:34:29.149 --> 00:34:29.159 align:start position:0% integration and continuous deployment 00:34:29.159 --> 00:34:31.250 align:start position:0% integration and continuous deployment for<00:34:29.460><c> you</c><00:34:29.639><c> obviously</c><00:34:30.540><c> in</c><00:34:30.780><c> a</c><00:34:30.960><c> production</c> 00:34:31.250 --> 00:34:31.260 align:start position:0% for you obviously in a production 00:34:31.260 --> 00:34:34.669 align:start position:0% for you obviously in a production settings<00:34:31.919><c> you</c><00:34:32.339><c> want</c><00:34:32.520><c> to</c><00:34:32.639><c> have</c><00:34:32.879><c> a</c><00:34:33.599><c> script</c><00:34:34.500><c> for</c> 00:34:34.669 --> 00:34:34.679 align:start position:0% settings you want to have a script for 00:34:34.679 --> 00:34:36.649 align:start position:0% settings you want to have a script for running<00:34:34.919><c> your</c><00:34:35.280><c> tests</c><00:34:35.639><c> about</c><00:34:35.879><c> your</c><00:34:36.179><c> unit</c><00:34:36.359><c> test</c> 00:34:36.649 --> 00:34:36.659 align:start position:0% running your tests about your unit test 00:34:36.659 --> 00:34:39.829 align:start position:0% running your tests about your unit test and<00:34:36.899><c> your</c><00:34:37.020><c> into</c><00:34:37.260><c> a</c><00:34:37.679><c> test</c><00:34:37.919><c> and</c><00:34:38.580><c> if</c><00:34:38.760><c> you</c><00:34:39.060><c> uh</c><00:34:39.480><c> if</c> 00:34:39.829 --> 00:34:39.839 align:start position:0% and your into a test and if you uh if 00:34:39.839 --> 00:34:42.070 align:start position:0% and your into a test and if you uh if you<00:34:39.960><c> have</c><00:34:40.080><c> a</c><00:34:40.260><c> premium</c><00:34:40.560><c> lifted</c><00:34:41.220><c> Commerce</c> 00:34:42.070 --> 00:34:42.080 align:start position:0% you have a premium lifted Commerce 00:34:42.080 --> 00:34:47.030 align:start position:0% you have a premium lifted Commerce starter<00:34:43.080><c> kit</c><00:34:43.320><c> we</c><00:34:44.159><c> have</c><00:34:44.399><c> obviously</c><00:34:45.119><c> tests</c><00:34:46.040><c> a</c> 00:34:47.030 --> 00:34:47.040 align:start position:0% starter kit we have obviously tests a 00:34:47.040 --> 00:34:50.089 align:start position:0% starter kit we have obviously tests a huge<00:34:47.639><c> battery</c><00:34:47.820><c> of</c><00:34:48.179><c> tests</c><00:34:48.599><c> and</c><00:34:48.780><c> put</c><00:34:49.440><c> unit</c><00:34:49.740><c> test</c> 00:34:50.089 --> 00:34:50.099 align:start position:0% huge battery of tests and put unit test 00:34:50.099 --> 00:34:52.129 align:start position:0% huge battery of tests and put unit test integration<00:34:50.760><c> tests</c><00:34:51.300><c> and</c><00:34:51.480><c> the</c><00:34:51.659><c> end-to-end</c> 00:34:52.129 --> 00:34:52.139 align:start position:0% integration tests and the end-to-end 00:34:52.139 --> 00:34:55.970 align:start position:0% integration tests and the end-to-end test<00:34:52.379><c> to</c><00:34:52.619><c> make</c><00:34:52.800><c> sure</c><00:34:52.919><c> that</c><00:34:53.359><c> your</c><00:34:54.359><c> app</c><00:34:54.540><c> is</c><00:34:55.200><c> um</c><00:34:55.200><c> it</c> 00:34:55.970 --> 00:34:55.980 align:start position:0% test to make sure that your app is um it 00:34:55.980 --> 00:34:57.950 align:start position:0% test to make sure that your app is um it is<00:34:56.399><c> always</c><00:34:56.520><c> running</c><00:34:56.820><c> smoothly</c><00:34:57.480><c> for</c><00:34:57.780><c> your</c> 00:34:57.950 --> 00:34:57.960 align:start position:0% is always running smoothly for your 00:34:57.960 --> 00:35:00.710 align:start position:0% is always running smoothly for your users<00:34:58.320><c> and</c><00:34:58.560><c> they</c><00:34:58.680><c> don't</c><00:34:58.859><c> have</c><00:34:59.180><c> issues</c><00:35:00.180><c> so</c> 00:35:00.710 --> 00:35:00.720 align:start position:0% users and they don't have issues so 00:35:00.720 --> 00:35:02.690 align:start position:0% users and they don't have issues so that's<00:35:00.960><c> very</c><00:35:01.200><c> important</c><00:35:01.619><c> obviously</c><00:35:02.460><c> there's</c> 00:35:02.690 --> 00:35:02.700 align:start position:0% that's very important obviously there's 00:35:02.700 --> 00:35:04.670 align:start position:0% that's very important obviously there's the<00:35:03.000><c> starter</c><00:35:03.300><c> kit</c><00:35:03.480><c> here</c><00:35:03.720><c> that</c><00:35:03.900><c> Shopify</c><00:35:04.380><c> gives</c> 00:35:04.670 --> 00:35:04.680 align:start position:0% the starter kit here that Shopify gives 00:35:04.680 --> 00:35:06.530 align:start position:0% the starter kit here that Shopify gives you<00:35:04.859><c> doesn't</c><00:35:05.040><c> have</c><00:35:05.280><c> tests</c><00:35:05.760><c> but</c><00:35:05.940><c> any</c> 00:35:06.530 --> 00:35:06.540 align:start position:0% you doesn't have tests but any 00:35:06.540 --> 00:35:09.589 align:start position:0% you doesn't have tests but any production<00:35:07.020><c> product</c><00:35:07.520><c> should</c><00:35:08.520><c> have</c><00:35:08.760><c> this</c><00:35:09.000><c> very</c> 00:35:09.589 --> 00:35:09.599 align:start position:0% production product should have this very 00:35:09.599 --> 00:35:13.010 align:start position:0% production product should have this very important<00:35:10.520><c> uh</c><00:35:11.520><c> the</c><00:35:11.760><c> next</c><00:35:11.880><c> stop</c><00:35:12.060><c> in</c><00:35:12.599><c> this</c><00:35:12.780><c> file</c> 00:35:13.010 --> 00:35:13.020 align:start position:0% important uh the next stop in this file 00:35:13.020 --> 00:35:14.930 align:start position:0% important uh the next stop in this file basically<00:35:13.440><c> we</c><00:35:13.740><c> Define</c><00:35:13.859><c> a</c><00:35:14.160><c> preacher</c><00:35:14.579><c> config</c> 00:35:14.930 --> 00:35:14.940 align:start position:0% basically we Define a preacher config 00:35:14.940 --> 00:35:17.089 align:start position:0% basically we Define a preacher config it's<00:35:15.240><c> got</c><00:35:15.540><c> the</c><00:35:15.839><c> standard</c><00:35:16.200><c> thing</c><00:35:16.380><c> the</c> 00:35:17.089 --> 00:35:17.099 align:start position:0% it's got the standard thing the 00:35:17.099 --> 00:35:19.849 align:start position:0% it's got the standard thing the dependencies<00:35:17.760><c> here</c><00:35:18.240><c> it's</c><00:35:18.839><c> quite</c><00:35:19.079><c> minimal</c><00:35:19.500><c> but</c> 00:35:19.849 --> 00:35:19.859 align:start position:0% dependencies here it's quite minimal but 00:35:19.859 --> 00:35:22.430 align:start position:0% dependencies here it's quite minimal but functional<00:35:20.640><c> here</c><00:35:21.000><c> you</c><00:35:21.240><c> see</c><00:35:21.420><c> we</c><00:35:21.960><c> have</c><00:35:22.140><c> a</c><00:35:22.260><c> lot</c><00:35:22.380><c> of</c> 00:35:22.430 --> 00:35:22.440 align:start position:0% functional here you see we have a lot of 00:35:22.440 --> 00:35:24.710 align:start position:0% functional here you see we have a lot of Shopify<00:35:23.040><c> specific</c><00:35:23.700><c> things</c><00:35:24.000><c> like</c><00:35:24.180><c> the</c><00:35:24.359><c> Shopify</c> 00:35:24.710 --> 00:35:24.720 align:start position:0% Shopify specific things like the Shopify 00:35:24.720 --> 00:35:27.829 align:start position:0% Shopify specific things like the Shopify CLI<00:35:25.500><c> the</c><00:35:25.740><c> Shopify</c><00:35:26.040><c> hydrogen</c><00:35:26.700><c> Shopify</c><00:35:27.420><c> remix</c> 00:35:27.829 --> 00:35:27.839 align:start position:0% CLI the Shopify hydrogen Shopify remix 00:35:27.839 --> 00:35:31.490 align:start position:0% CLI the Shopify hydrogen Shopify remix for<00:35:28.320><c> oxygen</c><00:35:28.859><c> so</c><00:35:29.820><c> Shopify</c><00:35:30.660><c> hydrogen</c><00:35:31.200><c> like</c><00:35:31.380><c> I</c> 00:35:31.490 --> 00:35:31.500 align:start position:0% for oxygen so Shopify hydrogen like I 00:35:31.500 --> 00:35:33.410 align:start position:0% for oxygen so Shopify hydrogen like I said<00:35:31.619><c> earlier</c><00:35:31.920><c> is</c><00:35:32.220><c> basically</c><00:35:32.640><c> remix</c><00:35:32.940><c> right</c> 00:35:33.410 --> 00:35:33.420 align:start position:0% said earlier is basically remix right 00:35:33.420 --> 00:35:36.849 align:start position:0% said earlier is basically remix right it's<00:35:33.660><c> basically</c><00:35:34.020><c> remix</c><00:35:34.460><c> and</c><00:35:35.460><c> Shopify</c> 00:35:36.849 --> 00:35:36.859 align:start position:0% it's basically remix and Shopify 00:35:36.859 --> 00:35:40.550 align:start position:0% it's basically remix and Shopify oxygen<00:35:37.859><c> is</c><00:35:38.160><c> basically</c><00:35:38.579><c> a</c><00:35:39.180><c> clever</c><00:35:39.720><c> Walkers</c> 00:35:40.550 --> 00:35:40.560 align:start position:0% oxygen is basically a clever Walkers 00:35:40.560 --> 00:35:42.410 align:start position:0% oxygen is basically a clever Walkers okay<00:35:40.980><c> and</c><00:35:41.520><c> then</c><00:35:41.640><c> you</c><00:35:41.760><c> have</c><00:35:41.880><c> graph</c><00:35:42.240><c> here</c> 00:35:42.410 --> 00:35:42.420 align:start position:0% okay and then you have graph here 00:35:42.420 --> 00:35:44.750 align:start position:0% okay and then you have graph here because<00:35:42.780><c> the</c><00:35:43.140><c> store</c><00:35:43.380><c> from</c><00:35:43.619><c> the</c><00:35:43.800><c> API</c><00:35:44.099><c> is</c><00:35:44.400><c> a</c> 00:35:44.750 --> 00:35:44.760 align:start position:0% because the store from the API is a 00:35:44.760 --> 00:35:47.569 align:start position:0% because the store from the API is a graphql<00:35:45.300><c> API</c><00:35:45.839><c> like</c><00:35:46.440><c> we</c><00:35:46.619><c> saw</c><00:35:46.800><c> before</c><00:35:46.980><c> with</c><00:35:47.400><c> the</c> 00:35:47.569 --> 00:35:47.579 align:start position:0% graphql API like we saw before with the 00:35:47.579 --> 00:35:50.270 align:start position:0% graphql API like we saw before with the mock<00:35:47.820><c> shop</c><00:35:48.000><c> I</c><00:35:48.480><c> closed</c><00:35:48.780><c> it</c><00:35:48.900><c> again</c><00:35:49.140><c> but</c><00:35:49.859><c> we</c><00:35:50.040><c> saw</c> 00:35:50.270 --> 00:35:50.280 align:start position:0% mock shop I closed it again but we saw 00:35:50.280 --> 00:35:51.950 align:start position:0% mock shop I closed it again but we saw that<00:35:50.460><c> earlier</c><00:35:50.820><c> and</c><00:35:51.000><c> then</c><00:35:51.180><c> you</c><00:35:51.300><c> have</c><00:35:51.480><c> the</c><00:35:51.660><c> the</c> 00:35:51.950 --> 00:35:51.960 align:start position:0% that earlier and then you have the the 00:35:51.960 --> 00:35:54.109 align:start position:0% that earlier and then you have the the dev<00:35:52.200><c> dependencies</c><00:35:52.859><c> right</c><00:35:53.280><c> so</c><00:35:53.820><c> that's</c> 00:35:54.109 --> 00:35:54.119 align:start position:0% dev dependencies right so that's 00:35:54.119 --> 00:35:55.609 align:start position:0% dev dependencies right so that's standard<00:35:54.540><c> stuff</c> 00:35:55.609 --> 00:35:55.619 align:start position:0% standard stuff 00:35:55.619 --> 00:35:57.950 align:start position:0% standard stuff I<00:35:56.160><c> think</c><00:35:56.339><c> the</c><00:35:56.640><c> next</c><00:35:56.820><c> important</c><00:35:57.240><c> thing</c><00:35:57.540><c> really</c> 00:35:57.950 --> 00:35:57.960 align:start position:0% I think the next important thing really 00:35:57.960 --> 00:36:00.410 align:start position:0% I think the next important thing really in<00:35:58.380><c> this</c><00:35:58.560><c> thing</c><00:35:58.740><c> is</c><00:35:59.460><c> to</c><00:35:59.640><c> quickly</c><00:35:59.880><c> have</c><00:36:00.119><c> a</c><00:36:00.300><c> look</c> 00:36:00.410 --> 00:36:00.420 align:start position:0% in this thing is to quickly have a look 00:36:00.420 --> 00:36:04.010 align:start position:0% in this thing is to quickly have a look at<00:36:00.780><c> what</c><00:36:01.020><c> is</c><00:36:01.260><c> in</c><00:36:01.440><c> here</c><00:36:01.680><c> okay</c><00:36:02.099><c> so</c><00:36:02.579><c> you</c><00:36:02.880><c> have</c><00:36:03.060><c> this</c> 00:36:04.010 --> 00:36:04.020 align:start position:0% at what is in here okay so you have this 00:36:04.020 --> 00:36:05.630 align:start position:0% at what is in here okay so you have this semi-close<00:36:04.619><c> the</c><00:36:04.740><c> other</c><00:36:04.920><c> things</c><00:36:05.099><c> here</c><00:36:05.339><c> because</c> 00:36:05.630 --> 00:36:05.640 align:start position:0% semi-close the other things here because 00:36:05.640 --> 00:36:08.329 align:start position:0% semi-close the other things here because becoming<00:36:06.300><c> confusing</c><00:36:06.720><c> like</c><00:36:07.560><c> to</c><00:36:07.800><c> have</c><00:36:07.980><c> a</c><00:36:08.160><c> lot</c> 00:36:08.329 --> 00:36:08.339 align:start position:0% becoming confusing like to have a lot 00:36:08.339 --> 00:36:10.609 align:start position:0% becoming confusing like to have a lot minimal<00:36:08.820><c> set</c><00:36:09.060><c> of</c><00:36:09.180><c> files</c><00:36:09.480><c> opened</c><00:36:09.900><c> so</c><00:36:10.140><c> here</c><00:36:10.380><c> we</c> 00:36:10.609 --> 00:36:10.619 align:start position:0% minimal set of files opened so here we 00:36:10.619 --> 00:36:12.370 align:start position:0% minimal set of files opened so here we have<00:36:10.800><c> some</c><00:36:11.160><c> utilities</c> 00:36:12.370 --> 00:36:12.380 align:start position:0% have some utilities 00:36:12.380 --> 00:36:16.010 align:start position:0% have some utilities function<00:36:13.380><c> and</c><00:36:13.740><c> hook</c><00:36:13.980><c> so</c><00:36:14.700><c> you</c><00:36:14.880><c> have</c><00:36:15.060><c> a</c><00:36:15.240><c> utility</c> 00:36:16.010 --> 00:36:16.020 align:start position:0% function and hook so you have a utility 00:36:16.020 --> 00:36:19.069 align:start position:0% function and hook so you have a utility hook<00:36:16.440><c> that</c><00:36:16.980><c> is</c><00:36:17.160><c> used</c><00:36:17.400><c> by</c><00:36:17.820><c> uh</c><00:36:18.180><c> that</c><00:36:18.660><c> was</c><00:36:18.839><c> created</c> 00:36:19.069 --> 00:36:19.079 align:start position:0% hook that is used by uh that was created 00:36:19.079 --> 00:36:22.430 align:start position:0% hook that is used by uh that was created by<00:36:19.320><c> Shopify</c><00:36:19.800><c> to</c><00:36:20.460><c> get</c><00:36:20.820><c> the</c><00:36:21.119><c> variant</c><00:36:21.900><c> of</c><00:36:22.260><c> a</c> 00:36:22.430 --> 00:36:22.440 align:start position:0% by Shopify to get the variant of a 00:36:22.440 --> 00:36:25.490 align:start position:0% by Shopify to get the variant of a product<00:36:22.680><c> based</c><00:36:23.460><c> on</c><00:36:23.520><c> the</c><00:36:23.700><c> product</c><00:36:23.839><c> handle</c><00:36:24.839><c> and</c> 00:36:25.490 --> 00:36:25.500 align:start position:0% product based on the product handle and 00:36:25.500 --> 00:36:27.290 align:start position:0% product based on the product handle and by<00:36:25.619><c> handle</c><00:36:26.099><c> we</c><00:36:26.280><c> mean</c><00:36:26.520><c> like</c><00:36:26.880><c> if</c><00:36:27.180><c> you're</c> 00:36:27.290 --> 00:36:27.300 align:start position:0% by handle we mean like if you're 00:36:27.300 --> 00:36:29.410 align:start position:0% by handle we mean like if you're visiting<00:36:27.720><c> a</c><00:36:27.900><c> page</c><00:36:28.140><c> like</c><00:36:28.320><c> this</c><00:36:28.560><c> one</c> 00:36:29.410 --> 00:36:29.420 align:start position:0% visiting a page like this one 00:36:29.420 --> 00:36:33.050 align:start position:0% visiting a page like this one products<00:36:30.420><c> short</c><00:36:31.020><c> and</c><00:36:31.320><c> so</c><00:36:31.500><c> on</c><00:36:31.760><c> this</c><00:36:32.760><c> is</c><00:36:32.880><c> the</c> 00:36:33.050 --> 00:36:33.060 align:start position:0% products short and so on this is the 00:36:33.060 --> 00:36:35.150 align:start position:0% products short and so on this is the handle<00:36:33.420><c> and</c><00:36:33.839><c> as</c><00:36:33.960><c> you</c><00:36:34.140><c> can</c><00:36:34.380><c> even</c><00:36:34.500><c> see</c><00:36:34.800><c> that</c><00:36:34.980><c> in</c> 00:36:35.150 --> 00:36:35.160 align:start position:0% handle and as you can even see that in 00:36:35.160 --> 00:36:36.290 align:start position:0% handle and as you can even see that in the<00:36:35.280><c> routes</c> 00:36:36.290 --> 00:36:36.300 align:start position:0% the routes 00:36:36.300 --> 00:36:38.630 align:start position:0% the routes instead<00:36:36.960><c> defined</c><00:36:37.320><c> here</c><00:36:37.500><c> you</c><00:36:37.980><c> see</c><00:36:38.160><c> these</c><00:36:38.400><c> wild</c> 00:36:38.630 --> 00:36:38.640 align:start position:0% instead defined here you see these wild 00:36:38.640 --> 00:36:41.690 align:start position:0% instead defined here you see these wild products<00:36:39.440><c> sorry</c><00:36:40.440><c> this</c><00:36:40.920><c> one</c> 00:36:41.690 --> 00:36:41.700 align:start position:0% products sorry this one 00:36:41.700 --> 00:36:44.810 align:start position:0% products sorry this one handle<00:36:42.420><c> that's</c><00:36:43.200><c> that's</c><00:36:43.500><c> the</c><00:36:43.740><c> we</c><00:36:44.280><c> can</c><00:36:44.700><c> lock</c> 00:36:44.810 --> 00:36:44.820 align:start position:0% handle that's that's the we can lock 00:36:44.820 --> 00:36:46.849 align:start position:0% handle that's that's the we can lock that<00:36:45.060><c> actually</c><00:36:45.359><c> for</c><00:36:45.720><c> you</c><00:36:45.900><c> to</c><00:36:46.020><c> see</c><00:36:46.140><c> so</c><00:36:46.500><c> if</c><00:36:46.740><c> we</c> 00:36:46.849 --> 00:36:46.859 align:start position:0% that actually for you to see so if we 00:36:46.859 --> 00:36:49.910 align:start position:0% that actually for you to see so if we lock<00:36:47.040><c> the</c><00:36:47.220><c> handle</c><00:36:47.599><c> you</c><00:36:48.599><c> can</c><00:36:48.720><c> see</c><00:36:48.900><c> here</c><00:36:49.200><c> uh</c><00:36:49.680><c> if</c> 00:36:49.910 --> 00:36:49.920 align:start position:0% lock the handle you can see here uh if 00:36:49.920 --> 00:36:54.950 align:start position:0% lock the handle you can see here uh if you<00:36:50.040><c> look</c><00:36:50.220><c> back</c><00:36:50.400><c> handle</c><00:36:51.140><c> log</c><00:36:52.140><c> hello</c> 00:36:54.950 --> 00:36:54.960 align:start position:0% you look back handle log hello 00:36:54.960 --> 00:36:57.770 align:start position:0% you look back handle log hello okay<00:36:55.260><c> let</c><00:36:55.800><c> me</c><00:36:55.920><c> connect</c><00:36:56.460><c> it</c><00:36:56.760><c> collapse</c><00:36:57.359><c> this</c><00:36:57.480><c> one</c> 00:36:57.770 --> 00:36:57.780 align:start position:0% okay let me connect it collapse this one 00:36:57.780 --> 00:36:59.990 align:start position:0% okay let me connect it collapse this one command<00:36:58.740><c> this</c><00:36:58.920><c> one</c><00:36:59.099><c> sorry</c> 00:36:59.990 --> 00:37:00.000 align:start position:0% command this one sorry 00:37:00.000 --> 00:37:03.349 align:start position:0% command this one sorry and<00:37:00.599><c> I</c><00:37:00.839><c> will</c><00:37:00.900><c> move</c><00:37:01.079><c> this</c><00:37:01.320><c> into</c><00:37:02.180><c> refresh</c><00:37:03.180><c> this</c> 00:37:03.349 --> 00:37:03.359 align:start position:0% and I will move this into refresh this 00:37:03.359 --> 00:37:04.510 align:start position:0% and I will move this into refresh this you'll<00:37:03.720><c> see</c><00:37:03.839><c> the</c><00:37:03.960><c> handle</c> 00:37:04.510 --> 00:37:04.520 align:start position:0% you'll see the handle 00:37:04.520 --> 00:37:10.329 align:start position:0% you'll see the handle [Music] 00:37:10.329 --> 00:37:10.339 align:start position:0% 00:37:10.339 --> 00:37:12.589 align:start position:0% this<00:37:11.339><c> is</c><00:37:11.400><c> the</c><00:37:11.520><c> handle</c><00:37:11.820><c> here</c> 00:37:12.589 --> 00:37:12.599 align:start position:0% this is the handle here 00:37:12.599 --> 00:37:15.530 align:start position:0% this is the handle here shorts<00:37:13.320><c> okay</c><00:37:13.980><c> so</c><00:37:14.400><c> you</c><00:37:14.820><c> have</c><00:37:15.000><c> this</c><00:37:15.180><c> utility</c> 00:37:15.530 --> 00:37:15.540 align:start position:0% shorts okay so you have this utility 00:37:15.540 --> 00:37:19.849 align:start position:0% shorts okay so you have this utility function<00:37:16.140><c> okay</c><00:37:16.880><c> to</c><00:37:17.880><c> uh</c><00:37:18.480><c> create</c><00:37:18.960><c> the</c><00:37:19.560><c> product</c> 00:37:19.849 --> 00:37:19.859 align:start position:0% function okay to uh create the product 00:37:19.859 --> 00:37:23.150 align:start position:0% function okay to uh create the product variant<00:37:20.460><c> you</c><00:37:21.420><c> the</c><00:37:21.720><c> Euro</c><00:37:22.079><c> of</c><00:37:22.200><c> a</c><00:37:22.380><c> variant</c><00:37:22.680><c> based</c> 00:37:23.150 --> 00:37:23.160 align:start position:0% variant you the Euro of a variant based 00:37:23.160 --> 00:37:25.849 align:start position:0% variant you the Euro of a variant based on<00:37:23.220><c> the</c><00:37:23.400><c> handle</c><00:37:23.760><c> and</c><00:37:24.540><c> the</c><00:37:24.720><c> selected</c><00:37:25.140><c> option</c><00:37:25.560><c> so</c> 00:37:25.849 --> 00:37:25.859 align:start position:0% on the handle and the selected option so 00:37:25.859 --> 00:37:28.190 align:start position:0% on the handle and the selected option so you<00:37:26.040><c> see</c><00:37:26.220><c> here</c><00:37:26.520><c> when</c><00:37:27.240><c> the</c><00:37:27.420><c> user</c><00:37:27.720><c> selects</c> 00:37:28.190 --> 00:37:28.200 align:start position:0% you see here when the user selects 00:37:28.200 --> 00:37:31.370 align:start position:0% you see here when the user selects something<00:37:28.320><c> okay</c><00:37:29.160><c> when</c><00:37:30.000><c> you</c><00:37:30.240><c> just</c><00:37:30.420><c> select</c><00:37:30.780><c> this</c> 00:37:31.370 --> 00:37:31.380 align:start position:0% something okay when you just select this 00:37:31.380 --> 00:37:33.770 align:start position:0% something okay when you just select this is<00:37:31.500><c> the</c><00:37:31.619><c> function</c><00:37:31.920><c> that's</c><00:37:32.220><c> basically</c><00:37:32.700><c> uh</c><00:37:33.420><c> this</c> 00:37:33.770 --> 00:37:33.780 align:start position:0% is the function that's basically uh this 00:37:33.780 --> 00:37:35.450 align:start position:0% is the function that's basically uh this is<00:37:34.200><c> the</c><00:37:34.740><c> um</c> 00:37:35.450 --> 00:37:35.460 align:start position:0% is the um 00:37:35.460 --> 00:37:37.970 align:start position:0% is the um this<00:37:35.880><c> is</c><00:37:36.000><c> the</c><00:37:36.119><c> thing</c><00:37:36.300><c> that's</c><00:37:36.540><c> that's</c><00:37:36.980><c> called</c> 00:37:37.970 --> 00:37:37.980 align:start position:0% this is the thing that's that's called 00:37:37.980 --> 00:37:40.310 align:start position:0% this is the thing that's that's called okay<00:37:38.640><c> so</c><00:37:39.000><c> when</c><00:37:39.180><c> the</c><00:37:39.359><c> user</c><00:37:39.599><c> changes</c><00:37:40.079><c> the</c> 00:37:40.310 --> 00:37:40.320 align:start position:0% okay so when the user changes the 00:37:40.320 --> 00:37:43.190 align:start position:0% okay so when the user changes the variance<00:37:40.740><c> and</c><00:37:40.920><c> stuff</c><00:37:41.160><c> is</c><00:37:41.880><c> this</c><00:37:42.119><c> the</c><00:37:42.359><c> the</c><00:37:42.480><c> URL</c> 00:37:43.190 --> 00:37:43.200 align:start position:0% variance and stuff is this the the URL 00:37:43.200 --> 00:37:45.410 align:start position:0% variance and stuff is this the the URL is<00:37:43.320><c> generated</c><00:37:43.619><c> by</c><00:37:43.920><c> this</c><00:37:44.040><c> hook</c><00:37:44.280><c> and</c><00:37:45.060><c> this</c><00:37:45.240><c> hook</c> 00:37:45.410 --> 00:37:45.420 align:start position:0% is generated by this hook and this hook 00:37:45.420 --> 00:37:47.450 align:start position:0% is generated by this hook and this hook uses<00:37:45.900><c> this</c><00:37:46.020><c> business</c><00:37:46.260><c> logic</c><00:37:46.800><c> obviously</c><00:37:47.280><c> like</c> 00:37:47.450 --> 00:37:47.460 align:start position:0% uses this business logic obviously like 00:37:47.460 --> 00:37:49.310 align:start position:0% uses this business logic obviously like I<00:37:47.640><c> said</c><00:37:47.760><c> earlier</c><00:37:48.119><c> in</c><00:37:48.900><c> the</c><00:37:49.020><c> production</c> 00:37:49.310 --> 00:37:49.320 align:start position:0% I said earlier in the production 00:37:49.320 --> 00:37:51.109 align:start position:0% I said earlier in the production environment<00:37:49.800><c> product</c><00:37:50.160><c> in</c><00:37:50.700><c> a</c><00:37:50.820><c> production</c> 00:37:51.109 --> 00:37:51.119 align:start position:0% environment product in a production 00:37:51.119 --> 00:37:53.810 align:start position:0% environment product in a production product<00:37:51.480><c> you</c><00:37:52.079><c> need</c><00:37:52.200><c> to</c><00:37:52.380><c> have</c><00:37:52.859><c> unit</c><00:37:53.220><c> tests</c><00:37:53.760><c> for</c> 00:37:53.810 --> 00:37:53.820 align:start position:0% product you need to have unit tests for 00:37:53.820 --> 00:37:55.790 align:start position:0% product you need to have unit tests for these<00:37:54.060><c> kind</c><00:37:54.180><c> of</c><00:37:54.240><c> things</c><00:37:54.420><c> and</c><00:37:54.780><c> that's</c><00:37:54.960><c> what</c><00:37:55.260><c> one</c> 00:37:55.790 --> 00:37:55.800 align:start position:0% these kind of things and that's what one 00:37:55.800 --> 00:37:57.770 align:start position:0% these kind of things and that's what one of<00:37:55.980><c> the</c><00:37:56.040><c> things</c><00:37:56.220><c> that</c><00:37:56.520><c> lifted</c><00:37:57.060><c> Comics</c><00:37:57.420><c> brings</c> 00:37:57.770 --> 00:37:57.780 align:start position:0% of the things that lifted Comics brings 00:37:57.780 --> 00:38:01.670 align:start position:0% of the things that lifted Comics brings is<00:37:58.339><c> making</c><00:37:59.339><c> sure</c><00:37:59.700><c> that</c><00:38:00.000><c> Beyond</c><00:38:00.780><c> we</c><00:38:01.020><c> go</c><00:38:01.200><c> beyond</c> 00:38:01.670 --> 00:38:01.680 align:start position:0% is making sure that Beyond we go beyond 00:38:01.680 --> 00:38:04.310 align:start position:0% is making sure that Beyond we go beyond the<00:38:02.220><c> the</c><00:38:02.400><c> default</c><00:38:03.180><c> starter</c><00:38:03.660><c> kit</c><00:38:03.900><c> that</c><00:38:04.200><c> is</c> 00:38:04.310 --> 00:38:04.320 align:start position:0% the the default starter kit that is 00:38:04.320 --> 00:38:06.589 align:start position:0% the the default starter kit that is provided<00:38:04.800><c> by</c><00:38:05.040><c> the</c><00:38:05.220><c> library</c><00:38:05.460><c> by</c><00:38:06.000><c> the</c><00:38:06.240><c> Shopify</c> 00:38:06.589 --> 00:38:06.599 align:start position:0% provided by the library by the Shopify 00:38:06.599 --> 00:38:10.490 align:start position:0% provided by the library by the Shopify CLI<00:38:07.260><c> okay</c><00:38:08.040><c> we</c><00:38:08.520><c> put</c><00:38:08.760><c> things</c><00:38:09.359><c> like</c><00:38:09.540><c> unit</c><00:38:09.780><c> tests</c> 00:38:10.490 --> 00:38:10.500 align:start position:0% CLI okay we put things like unit tests 00:38:10.500 --> 00:38:12.829 align:start position:0% CLI okay we put things like unit tests security<00:38:11.160><c> enhanced</c><00:38:12.000><c> security</c><00:38:12.180><c> and</c><00:38:12.660><c> stuff</c> 00:38:12.829 --> 00:38:12.839 align:start position:0% security enhanced security and stuff 00:38:12.839 --> 00:38:15.109 align:start position:0% security enhanced security and stuff like<00:38:13.020><c> that</c><00:38:13.200><c> so</c><00:38:13.920><c> check</c><00:38:14.160><c> us</c><00:38:14.280><c> out</c><00:38:14.460><c> on</c><00:38:14.640><c> lifted</c> 00:38:15.109 --> 00:38:15.119 align:start position:0% like that so check us out on lifted 00:38:15.119 --> 00:38:18.530 align:start position:0% like that so check us out on lifted converse.com<00:38:15.680><c> so</c><00:38:16.680><c> to</c><00:38:17.160><c> continue</c><00:38:17.400><c> in</c><00:38:18.180><c> terms</c><00:38:18.420><c> of</c> 00:38:18.530 --> 00:38:18.540 align:start position:0% converse.com so to continue in terms of 00:38:18.540 --> 00:38:20.810 align:start position:0% converse.com so to continue in terms of this<00:38:18.960><c> repo</c><00:38:19.680><c> structure</c> 00:38:20.810 --> 00:38:20.820 align:start position:0% this repo structure 00:38:20.820 --> 00:38:23.890 align:start position:0% this repo structure the<00:38:21.359><c> next</c><00:38:21.540><c> thing</c><00:38:21.660><c> is</c><00:38:21.839><c> the</c><00:38:22.020><c> root.tx</c> 00:38:23.890 --> 00:38:23.900 align:start position:0% the next thing is the root.tx 00:38:23.900 --> 00:38:26.990 align:start position:0% the next thing is the root.tx the<00:38:24.900><c> route</c><00:38:25.099><c> is</c><00:38:26.099><c> basically</c><00:38:26.400><c> the</c><00:38:26.579><c> root</c><00:38:26.820><c> route</c> 00:38:26.990 --> 00:38:27.000 align:start position:0% the route is basically the root route 00:38:27.000 --> 00:38:31.390 align:start position:0% the route is basically the root route okay<00:38:27.359><c> so</c><00:38:28.200><c> that's</c><00:38:28.740><c> the</c><00:38:29.099><c> first</c><00:38:29.820><c> react</c><00:38:30.480><c> component</c> 00:38:31.390 --> 00:38:31.400 align:start position:0% okay so that's the first react component 00:38:31.400 --> 00:38:35.210 align:start position:0% okay so that's the first react component that<00:38:32.400><c> is</c><00:38:32.640><c> uh</c><00:38:33.119><c> run</c><00:38:33.420><c> okay</c><00:38:33.960><c> when</c><00:38:34.380><c> you</c><00:38:34.560><c> visit</c><00:38:34.800><c> a</c> 00:38:35.210 --> 00:38:35.220 align:start position:0% that is uh run okay when you visit a 00:38:35.220 --> 00:38:38.569 align:start position:0% that is uh run okay when you visit a page<00:38:35.520><c> okay</c><00:38:35.820><c> before</c><00:38:36.780><c> running</c><00:38:37.200><c> any</c> 00:38:38.569 --> 00:38:38.579 align:start position:0% page okay before running any 00:38:38.579 --> 00:38:41.750 align:start position:0% page okay before running any like<00:38:39.000><c> the</c><00:38:39.240><c> actual</c><00:38:39.839><c> routes</c><00:38:40.260><c> here</c> 00:38:41.750 --> 00:38:41.760 align:start position:0% like the actual routes here 00:38:41.760 --> 00:38:44.930 align:start position:0% like the actual routes here individual<00:38:42.599><c> rounds</c><00:38:43.079><c> for</c><00:38:43.260><c> each</c><00:38:43.440><c> page</c><00:38:43.820><c> this</c><00:38:44.820><c> is</c> 00:38:44.930 --> 00:38:44.940 align:start position:0% individual rounds for each page this is 00:38:44.940 --> 00:38:47.089 align:start position:0% individual rounds for each page this is kind<00:38:45.180><c> of</c><00:38:45.300><c> like</c><00:38:45.420><c> the</c><00:38:45.720><c> The</c><00:38:45.900><c> Meta</c><00:38:46.500><c> route</c><00:38:46.619><c> okay</c> 00:38:47.089 --> 00:38:47.099 align:start position:0% kind of like the The Meta route okay 00:38:47.099 --> 00:38:49.569 align:start position:0% kind of like the The Meta route okay this<00:38:47.460><c> is</c><00:38:47.640><c> the</c><00:38:47.760><c> first</c><00:38:48.119><c> Dom</c> 00:38:49.569 --> 00:38:49.579 align:start position:0% this is the first Dom 00:38:49.579 --> 00:38:52.490 align:start position:0% this is the first Dom and<00:38:50.579><c> even</c><00:38:51.359><c> as</c><00:38:51.540><c> you</c><00:38:51.720><c> can</c><00:38:51.839><c> see</c><00:38:51.960><c> here</c><00:38:52.140><c> this</c><00:38:52.380><c> is</c> 00:38:52.490 --> 00:38:52.500 align:start position:0% and even as you can see here this is 00:38:52.500 --> 00:38:55.849 align:start position:0% and even as you can see here this is where<00:38:52.680><c> we</c><00:38:52.859><c> created</c><00:38:53.160><c> the</c><00:38:53.460><c> HTML</c><00:38:54.060><c> okay</c><00:38:54.599><c> the</c><00:38:55.320><c> HTML</c> 00:38:55.849 --> 00:38:55.859 align:start position:0% where we created the HTML okay the HTML 00:38:55.859 --> 00:38:58.250 align:start position:0% where we created the HTML okay the HTML is<00:38:56.040><c> created</c><00:38:56.339><c> here</c><00:38:56.700><c> HTML</c><00:38:57.540><c> page</c><00:38:57.839><c> that's</c><00:38:58.020><c> where</c> 00:38:58.250 --> 00:38:58.260 align:start position:0% is created here HTML page that's where 00:38:58.260 --> 00:39:00.310 align:start position:0% is created here HTML page that's where we<00:38:58.440><c> start</c><00:38:58.619><c> the</c><00:38:58.800><c> definition</c><00:38:58.980><c> of</c><00:38:59.339><c> our</c><00:38:59.520><c> HTML</c> 00:39:00.310 --> 00:39:00.320 align:start position:0% we start the definition of our HTML 00:39:00.320 --> 00:39:04.730 align:start position:0% we start the definition of our HTML document<00:39:01.320><c> right</c><00:39:01.820><c> so</c><00:39:02.820><c> uh</c><00:39:03.420><c> here</c><00:39:03.720><c> you</c><00:39:04.020><c> can</c><00:39:04.140><c> see</c><00:39:04.320><c> oh</c> 00:39:04.730 --> 00:39:04.740 align:start position:0% document right so uh here you can see oh 00:39:04.740 --> 00:39:06.770 align:start position:0% document right so uh here you can see oh sorry<00:39:04.980><c> this</c><00:39:05.280><c> is</c><00:39:05.400><c> the</c><00:39:05.579><c> error</c><00:39:05.940><c> boundary</c><00:39:06.300><c> first</c> 00:39:06.770 --> 00:39:06.780 align:start position:0% sorry this is the error boundary first 00:39:06.780 --> 00:39:09.050 align:start position:0% sorry this is the error boundary first of<00:39:06.960><c> all</c><00:39:07.079><c> let's</c><00:39:07.320><c> see</c><00:39:07.500><c> here</c><00:39:07.680><c> the</c><00:39:07.920><c> app</c><00:39:08.099><c> this</c><00:39:08.940><c> is</c> 00:39:09.050 --> 00:39:09.060 align:start position:0% of all let's see here the app this is 00:39:09.060 --> 00:39:12.109 align:start position:0% of all let's see here the app this is the<00:39:09.180><c> HTML</c><00:39:09.800><c> right</c><00:39:10.800><c> you</c><00:39:11.160><c> can</c><00:39:11.280><c> see</c><00:39:11.400><c> here</c><00:39:11.700><c> how</c><00:39:11.940><c> it's</c> 00:39:12.109 --> 00:39:12.119 align:start position:0% the HTML right you can see here how it's 00:39:12.119 --> 00:39:14.450 align:start position:0% the HTML right you can see here how it's structured<00:39:12.599><c> we</c><00:39:13.200><c> have</c><00:39:13.380><c> the</c><00:39:13.560><c> lung</c><00:39:13.920><c> and</c> 00:39:14.450 --> 00:39:14.460 align:start position:0% structured we have the lung and 00:39:14.460 --> 00:39:15.770 align:start position:0% structured we have the lung and obviously<00:39:14.700><c> when</c><00:39:15.000><c> we</c><00:39:15.119><c> look</c><00:39:15.420><c> at</c><00:39:15.599><c> the</c> 00:39:15.770 --> 00:39:15.780 align:start position:0% obviously when we look at the 00:39:15.780 --> 00:39:17.390 align:start position:0% obviously when we look at the internationalization<00:39:16.680><c> we</c><00:39:17.040><c> will</c><00:39:17.220><c> Define</c> 00:39:17.390 --> 00:39:17.400 align:start position:0% internationalization we will Define 00:39:17.400 --> 00:39:20.150 align:start position:0% internationalization we will Define we'll<00:39:17.760><c> see</c><00:39:17.940><c> how</c><00:39:18.119><c> to</c><00:39:18.300><c> dynamically</c><00:39:18.960><c> Define</c><00:39:19.260><c> the</c> 00:39:20.150 --> 00:39:20.160 align:start position:0% we'll see how to dynamically Define the 00:39:20.160 --> 00:39:22.069 align:start position:0% we'll see how to dynamically Define the language<00:39:20.339><c> of</c><00:39:20.640><c> our</c><00:39:20.820><c> page</c><00:39:21.180><c> right</c><00:39:21.420><c> which</c><00:39:21.780><c> is</c><00:39:21.900><c> very</c> 00:39:22.069 --> 00:39:22.079 align:start position:0% language of our page right which is very 00:39:22.079 --> 00:39:23.930 align:start position:0% language of our page right which is very good<00:39:22.320><c> for</c><00:39:22.619><c> uh</c> 00:39:23.930 --> 00:39:23.940 align:start position:0% good for uh 00:39:23.940 --> 00:39:26.150 align:start position:0% good for uh SEO<00:39:24.839><c> and</c><00:39:25.020><c> stuff</c><00:39:25.260><c> like</c><00:39:25.380><c> that</c><00:39:25.560><c> and</c><00:39:25.740><c> user</c> 00:39:26.150 --> 00:39:26.160 align:start position:0% SEO and stuff like that and user 00:39:26.160 --> 00:39:28.430 align:start position:0% SEO and stuff like that and user experience<00:39:26.520><c> as</c><00:39:26.760><c> well</c><00:39:26.940><c> and</c><00:39:27.720><c> then</c><00:39:27.839><c> we</c><00:39:28.020><c> have</c><00:39:28.200><c> the</c> 00:39:28.430 --> 00:39:28.440 align:start position:0% experience as well and then we have the 00:39:28.440 --> 00:39:31.130 align:start position:0% experience as well and then we have the metas<00:39:28.859><c> and</c><00:39:29.160><c> then</c><00:39:29.280><c> we</c><00:39:29.460><c> have</c><00:39:29.640><c> the</c><00:39:29.940><c> The</c><00:39:30.420><c> Meta</c><00:39:30.839><c> tags</c> 00:39:31.130 --> 00:39:31.140 align:start position:0% metas and then we have the The Meta tags 00:39:31.140 --> 00:39:33.290 align:start position:0% metas and then we have the The Meta tags right<00:39:31.440><c> so</c><00:39:32.160><c> this</c><00:39:32.400><c> is</c><00:39:32.520><c> a</c><00:39:32.700><c> component</c><00:39:33.060><c> that's</c> 00:39:33.290 --> 00:39:33.300 align:start position:0% right so this is a component that's 00:39:33.300 --> 00:39:36.589 align:start position:0% right so this is a component that's provided<00:39:33.780><c> by</c><00:39:33.960><c> remix</c><00:39:34.200><c> to</c><00:39:34.920><c> handle</c><00:39:35.339><c> SEO</c><00:39:36.180><c> for</c><00:39:36.420><c> us</c> 00:39:36.589 --> 00:39:36.599 align:start position:0% provided by remix to handle SEO for us 00:39:36.599 --> 00:39:40.250 align:start position:0% provided by remix to handle SEO for us okay<00:39:36.900><c> so</c><00:39:37.260><c> when</c><00:39:37.440><c> you</c><00:39:37.619><c> add</c><00:39:37.859><c> this</c><00:39:38.160><c> meta</c><00:39:38.880><c> okay</c><00:39:39.660><c> so</c> 00:39:40.250 --> 00:39:40.260 align:start position:0% okay so when you add this meta okay so 00:39:40.260 --> 00:39:42.829 align:start position:0% okay so when you add this meta okay so this<00:39:40.380><c> is</c><00:39:40.500><c> going</c><00:39:40.680><c> to</c><00:39:40.800><c> basically</c><00:39:41.220><c> pull</c><00:39:41.940><c> the</c><00:39:42.420><c> meta</c> 00:39:42.829 --> 00:39:42.839 align:start position:0% this is going to basically pull the meta 00:39:42.839 --> 00:39:46.069 align:start position:0% this is going to basically pull the meta every<00:39:43.200><c> round</c><00:39:43.440><c> if</c><00:39:43.859><c> you</c><00:39:44.339><c> remember</c><00:39:44.780><c> every</c><00:39:45.780><c> route</c> 00:39:46.069 --> 00:39:46.079 align:start position:0% every round if you remember every route 00:39:46.079 --> 00:39:51.109 align:start position:0% every round if you remember every route has<00:39:47.060><c> defines</c><00:39:48.060><c> a</c><00:39:48.420><c> meta</c><00:39:48.839><c> you</c><00:39:49.140><c> see</c><00:39:49.320><c> Meta</c><00:39:49.920><c> here</c> 00:39:51.109 --> 00:39:51.119 align:start position:0% has defines a meta you see Meta here 00:39:51.119 --> 00:39:54.010 align:start position:0% has defines a meta you see Meta here and<00:39:51.960><c> when</c><00:39:52.320><c> you</c><00:39:52.440><c> add</c><00:39:52.680><c> this</c><00:39:52.859><c> matter</c><00:39:53.040><c> here</c><00:39:53.400><c> okay</c> 00:39:54.010 --> 00:39:54.020 align:start position:0% and when you add this matter here okay 00:39:54.020 --> 00:39:56.630 align:start position:0% and when you add this matter here okay the<00:39:55.020><c> method</c><00:39:55.320><c> that</c><00:39:55.500><c> is</c><00:39:55.619><c> defined</c><00:39:56.040><c> when</c><00:39:56.460><c> you</c> 00:39:56.630 --> 00:39:56.640 align:start position:0% the method that is defined when you 00:39:56.640 --> 00:40:00.109 align:start position:0% the method that is defined when you export<00:39:57.060><c> this</c><00:39:57.540><c> meta</c><00:39:57.960><c> from</c><00:39:58.500><c> an</c><00:39:59.220><c> individual</c><00:39:59.760><c> Rank</c> 00:40:00.109 --> 00:40:00.119 align:start position:0% export this meta from an individual Rank 00:40:00.119 --> 00:40:02.630 align:start position:0% export this meta from an individual Rank and<00:40:00.960><c> you</c><00:40:01.140><c> add</c><00:40:01.320><c> this</c><00:40:01.619><c> component</c><00:40:02.040><c> in</c><00:40:02.280><c> the</c><00:40:02.400><c> root</c> 00:40:02.630 --> 00:40:02.640 align:start position:0% and you add this component in the root 00:40:02.640 --> 00:40:05.329 align:start position:0% and you add this component in the root route<00:40:02.820><c> okay</c><00:40:03.240><c> now</c><00:40:03.599><c> when</c><00:40:03.900><c> you</c><00:40:04.079><c> visit</c><00:40:04.260><c> that</c><00:40:04.619><c> photo</c> 00:40:05.329 --> 00:40:05.339 align:start position:0% route okay now when you visit that photo 00:40:05.339 --> 00:40:08.810 align:start position:0% route okay now when you visit that photo page<00:40:05.820><c> that</c><00:40:06.660><c> is</c><00:40:06.780><c> what</c><00:40:07.079><c> is</c><00:40:07.260><c> created</c><00:40:07.619><c> so</c><00:40:08.040><c> you</c><00:40:08.579><c> see</c> 00:40:08.810 --> 00:40:08.820 align:start position:0% page that is what is created so you see 00:40:08.820 --> 00:40:11.569 align:start position:0% page that is what is created so you see here<00:40:09.180><c> for</c><00:40:09.900><c> this</c><00:40:10.140><c> particular</c><00:40:10.440><c> page</c><00:40:10.980><c> we</c><00:40:11.400><c> have</c> 00:40:11.569 --> 00:40:11.579 align:start position:0% here for this particular page we have 00:40:11.579 --> 00:40:14.270 align:start position:0% here for this particular page we have hydrogen<00:40:12.180><c> and</c><00:40:12.359><c> then</c><00:40:12.540><c> the</c><00:40:12.660><c> product</c><00:40:12.839><c> title</c><00:40:13.560><c> and</c> 00:40:14.270 --> 00:40:14.280 align:start position:0% hydrogen and then the product title and 00:40:14.280 --> 00:40:16.130 align:start position:0% hydrogen and then the product title and that's<00:40:14.400><c> exactly</c><00:40:14.880><c> what's</c><00:40:15.060><c> happening</c><00:40:15.599><c> here</c><00:40:15.839><c> so</c> 00:40:16.130 --> 00:40:16.140 align:start position:0% that's exactly what's happening here so 00:40:16.140 --> 00:40:17.870 align:start position:0% that's exactly what's happening here so if<00:40:16.320><c> I</c><00:40:16.500><c> change</c><00:40:16.680><c> this</c><00:40:16.920><c> and</c><00:40:17.099><c> I</c><00:40:17.280><c> say</c><00:40:17.460><c> custom</c> 00:40:17.870 --> 00:40:17.880 align:start position:0% if I change this and I say custom 00:40:17.880 --> 00:40:19.910 align:start position:0% if I change this and I say custom storefront 00:40:19.910 --> 00:40:19.920 align:start position:0% storefront 00:40:19.920 --> 00:40:23.750 align:start position:0% storefront custom<00:40:20.640><c> storefront</c><00:40:21.420><c> and</c><00:40:22.020><c> I</c><00:40:22.200><c> save</c><00:40:22.380><c> right</c><00:40:23.339><c> you</c> 00:40:23.750 --> 00:40:23.760 align:start position:0% custom storefront and I save right you 00:40:23.760 --> 00:40:26.089 align:start position:0% custom storefront and I save right you see<00:40:24.000><c> it</c><00:40:24.180><c> changes</c><00:40:24.540><c> right</c><00:40:24.900><c> this</c><00:40:25.500><c> is</c><00:40:25.680><c> changes</c> 00:40:26.089 --> 00:40:26.099 align:start position:0% see it changes right this is changes 00:40:26.099 --> 00:40:29.329 align:start position:0% see it changes right this is changes here<00:40:26.339><c> that's</c><00:40:27.300><c> exactly</c><00:40:27.660><c> what</c><00:40:27.839><c> you</c><00:40:28.020><c> do</c><00:40:28.200><c> and</c><00:40:29.040><c> to</c> 00:40:29.329 --> 00:40:29.339 align:start position:0% here that's exactly what you do and to 00:40:29.339 --> 00:40:31.010 align:start position:0% here that's exactly what you do and to show<00:40:29.640><c> you</c><00:40:29.760><c> that</c><00:40:29.880><c> the</c><00:40:30.000><c> two</c><00:40:30.180><c> are</c><00:40:30.300><c> connected</c><00:40:30.599><c> if</c><00:40:30.839><c> I</c> 00:40:31.010 --> 00:40:31.020 align:start position:0% show you that the two are connected if I 00:40:31.020 --> 00:40:33.230 align:start position:0% show you that the two are connected if I comment<00:40:31.320><c> this</c><00:40:31.500><c> one</c><00:40:31.740><c> out</c><00:40:31.920><c> it's</c><00:40:32.760><c> not</c><00:40:33.000><c> going</c><00:40:33.119><c> to</c> 00:40:33.230 --> 00:40:33.240 align:start position:0% comment this one out it's not going to 00:40:33.240 --> 00:40:35.569 align:start position:0% comment this one out it's not going to disappear<00:40:33.660><c> you</c><00:40:33.960><c> see</c><00:40:34.140><c> it</c><00:40:34.380><c> disappears</c><00:40:34.980><c> it's</c><00:40:35.400><c> no</c> 00:40:35.569 --> 00:40:35.579 align:start position:0% disappear you see it disappears it's no 00:40:35.579 --> 00:40:37.970 align:start position:0% disappear you see it disappears it's no longer<00:40:35.760><c> showing</c><00:40:36.119><c> us</c><00:40:36.240><c> that</c><00:40:36.480><c> so</c><00:40:37.260><c> the</c><00:40:37.560><c> two</c><00:40:37.740><c> are</c> 00:40:37.970 --> 00:40:37.980 align:start position:0% longer showing us that so the two are 00:40:37.980 --> 00:40:40.490 align:start position:0% longer showing us that so the two are connected<00:40:38.400><c> so</c><00:40:38.640><c> the</c><00:40:38.880><c> method</c><00:40:39.240><c> here</c><00:40:39.500><c> is</c> 00:40:40.490 --> 00:40:40.500 align:start position:0% connected so the method here is 00:40:40.500 --> 00:40:43.849 align:start position:0% connected so the method here is connected<00:40:40.980><c> is</c><00:40:41.280><c> basically</c><00:40:41.900><c> rendering</c><00:40:42.900><c> adding</c> 00:40:43.849 --> 00:40:43.859 align:start position:0% connected is basically rendering adding 00:40:43.859 --> 00:40:46.790 align:start position:0% connected is basically rendering adding to<00:40:44.160><c> your</c><00:40:44.460><c> HTML</c><00:40:45.300><c> document</c><00:40:45.660><c> anything</c><00:40:46.140><c> that</c><00:40:46.619><c> you</c> 00:40:46.790 --> 00:40:46.800 align:start position:0% to your HTML document anything that you 00:40:46.800 --> 00:40:48.849 align:start position:0% to your HTML document anything that you define<00:40:46.980><c> in</c><00:40:47.520><c> the</c><00:40:47.640><c> individual</c><00:40:48.000><c> route</c><00:40:48.300><c> okay</c> 00:40:48.849 --> 00:40:48.859 align:start position:0% define in the individual route okay 00:40:48.859 --> 00:40:51.710 align:start position:0% define in the individual route okay obviously<00:40:49.859><c> when</c><00:40:50.760><c> you're</c><00:40:50.880><c> doing</c><00:40:51.119><c> and</c><00:40:51.540><c> that's</c> 00:40:51.710 --> 00:40:51.720 align:start position:0% obviously when you're doing and that's 00:40:51.720 --> 00:40:54.050 align:start position:0% obviously when you're doing and that's again<00:40:51.960><c> one</c><00:40:52.200><c> of</c><00:40:52.380><c> the</c><00:40:52.440><c> things</c><00:40:52.560><c> that</c><00:40:53.220><c> um</c><00:40:53.220><c> lifted</c> 00:40:54.050 --> 00:40:54.060 align:start position:0% again one of the things that um lifted 00:40:54.060 --> 00:40:56.150 align:start position:0% again one of the things that um lifted commas<00:40:54.420><c> brings</c><00:40:54.720><c> to</c><00:40:54.900><c> the</c><00:40:55.079><c> table</c><00:40:55.260><c> is</c><00:40:55.740><c> that</c><00:40:55.980><c> we</c> 00:40:56.150 --> 00:40:56.160 align:start position:0% commas brings to the table is that we 00:40:56.160 --> 00:41:00.170 align:start position:0% commas brings to the table is that we have<00:40:56.400><c> an</c><00:40:56.820><c> in-depth</c><00:40:57.300><c> SEO</c><00:40:57.780><c> uh</c> 00:41:00.170 --> 00:41:00.180 align:start position:0% have an in-depth SEO uh 00:41:00.180 --> 00:41:02.450 align:start position:0% have an in-depth SEO uh meta<00:41:00.960><c> description</c><00:41:01.260><c> with</c><00:41:01.800><c> much</c><00:41:02.099><c> more</c><00:41:02.220><c> than</c> 00:41:02.450 --> 00:41:02.460 align:start position:0% meta description with much more than 00:41:02.460 --> 00:41:05.030 align:start position:0% meta description with much more than just<00:41:02.640><c> the</c><00:41:02.820><c> title</c><00:41:03.240><c> okay</c><00:41:03.599><c> and</c><00:41:04.260><c> go</c><00:41:04.500><c> far</c><00:41:04.680><c> beyond</c> 00:41:05.030 --> 00:41:05.040 align:start position:0% just the title okay and go far beyond 00:41:05.040 --> 00:41:09.230 align:start position:0% just the title okay and go far beyond that<00:41:05.160><c> we</c><00:41:05.520><c> add</c><00:41:05.820><c> title</c><00:41:06.300><c> the</c><00:41:07.140><c> description</c> 00:41:09.230 --> 00:41:09.240 align:start position:0% that we add title the description 00:41:09.240 --> 00:41:10.069 align:start position:0% that we add title the description um 00:41:10.069 --> 00:41:10.079 align:start position:0% um 00:41:10.079 --> 00:41:13.849 align:start position:0% um open<00:41:10.859><c> graph</c><00:41:11.720><c> HTTP</c><00:41:12.720><c> headers</c><00:41:13.320><c> and</c><00:41:13.560><c> stuff</c><00:41:13.740><c> like</c> 00:41:13.849 --> 00:41:13.859 align:start position:0% open graph HTTP headers and stuff like 00:41:13.859 --> 00:41:15.950 align:start position:0% open graph HTTP headers and stuff like that<00:41:14.040><c> we</c><00:41:14.280><c> had</c><00:41:14.460><c> a</c><00:41:14.640><c> lot</c><00:41:14.760><c> of</c><00:41:14.880><c> things</c><00:41:15.060><c> if</c><00:41:15.599><c> you</c><00:41:15.780><c> have</c> 00:41:15.950 --> 00:41:15.960 align:start position:0% that we had a lot of things if you have 00:41:15.960 --> 00:41:19.370 align:start position:0% that we had a lot of things if you have a<00:41:16.079><c> multi-store</c><00:41:17.000><c> multi</c><00:41:18.000><c> uh</c><00:41:18.599><c> an</c><00:41:19.200><c> international</c> 00:41:19.370 --> 00:41:19.380 align:start position:0% a multi-store multi uh an international 00:41:19.380 --> 00:41:21.770 align:start position:0% a multi-store multi uh an international story<00:41:19.920><c> are</c><00:41:20.220><c> things</c><00:41:20.400><c> like</c><00:41:20.579><c> HF</c><00:41:21.060><c> Lang</c><00:41:21.359><c> and</c><00:41:21.599><c> stuff</c> 00:41:21.770 --> 00:41:21.780 align:start position:0% story are things like HF Lang and stuff 00:41:21.780 --> 00:41:23.630 align:start position:0% story are things like HF Lang and stuff like<00:41:21.900><c> that</c><00:41:22.079><c> to</c><00:41:22.260><c> our</c><00:41:22.500><c> starter</c><00:41:22.859><c> kit</c><00:41:23.099><c> so</c><00:41:23.220><c> check</c><00:41:23.460><c> us</c> 00:41:23.630 --> 00:41:23.640 align:start position:0% like that to our starter kit so check us 00:41:23.640 --> 00:41:26.810 align:start position:0% like that to our starter kit so check us out<00:41:23.820><c> once</c><00:41:24.180><c> again</c><00:41:24.240><c> on</c><00:41:24.480><c> lifted</c><00:41:24.900><c> comments.com</c><00:41:25.820><c> uh</c> 00:41:26.810 --> 00:41:26.820 align:start position:0% out once again on lifted comments.com uh 00:41:26.820 --> 00:41:30.589 align:start position:0% out once again on lifted comments.com uh if<00:41:27.060><c> you</c><00:41:27.180><c> if</c><00:41:27.359><c> you</c><00:41:28.079><c> need</c><00:41:28.260><c> an</c><00:41:28.980><c> in-depth</c><00:41:29.460><c> SEO</c><00:41:29.880><c> some</c> 00:41:30.589 --> 00:41:30.599 align:start position:0% if you if you need an in-depth SEO some 00:41:30.599 --> 00:41:33.109 align:start position:0% if you if you need an in-depth SEO some starter<00:41:31.380><c> kit</c><00:41:31.560><c> that</c><00:41:31.800><c> goes</c><00:41:32.040><c> a</c><00:41:32.160><c> lot</c><00:41:32.280><c> more</c><00:41:32.460><c> deeper</c> 00:41:33.109 --> 00:41:33.119 align:start position:0% starter kit that goes a lot more deeper 00:41:33.119 --> 00:41:35.470 align:start position:0% starter kit that goes a lot more deeper into<00:41:33.300><c> SEO</c><00:41:33.920><c> so</c> 00:41:35.470 --> 00:41:35.480 align:start position:0% into SEO so 00:41:35.480 --> 00:41:38.390 align:start position:0% into SEO so now<00:41:36.480><c> similarly</c><00:41:37.260><c> for</c><00:41:37.380><c> the</c><00:41:37.560><c> links</c><00:41:37.859><c> any</c><00:41:38.099><c> link</c> 00:41:38.390 --> 00:41:38.400 align:start position:0% now similarly for the links any link 00:41:38.400 --> 00:41:40.250 align:start position:0% now similarly for the links any link that<00:41:38.700><c> you</c><00:41:38.760><c> define</c><00:41:38.940><c> here</c><00:41:39.300><c> basically</c><00:41:39.720><c> this</c><00:41:39.960><c> uh</c> 00:41:40.250 --> 00:41:40.260 align:start position:0% that you define here basically this uh 00:41:40.260 --> 00:41:42.170 align:start position:0% that you define here basically this uh where<00:41:40.500><c> you</c><00:41:40.619><c> define</c><00:41:40.740><c> your</c><00:41:41.040><c> assets</c><00:41:41.339><c> in</c><00:41:42.060><c> this</c> 00:41:42.170 --> 00:41:42.180 align:start position:0% where you define your assets in this 00:41:42.180 --> 00:41:44.870 align:start position:0% where you define your assets in this case<00:41:42.359><c> the</c><00:41:42.720><c> tower</c><00:41:42.960><c> in</c><00:41:43.200><c> CSS</c><00:41:43.619><c> the</c><00:41:44.040><c> reset</c><00:41:44.400><c> Styles</c> 00:41:44.870 --> 00:41:44.880 align:start position:0% case the tower in CSS the reset Styles 00:41:44.880 --> 00:41:47.950 align:start position:0% case the tower in CSS the reset Styles and<00:41:45.119><c> so</c><00:41:45.240><c> on</c><00:41:45.420><c> so</c><00:41:45.960><c> every</c> 00:41:47.950 --> 00:41:47.960 align:start position:0% and so on so every 00:41:47.960 --> 00:41:51.530 align:start position:0% and so on so every like<00:41:48.960><c> assets</c> 00:41:51.530 --> 00:41:51.540 align:start position:0% like assets 00:41:51.540 --> 00:41:53.510 align:start position:0% like assets you<00:41:52.020><c> define</c><00:41:52.260><c> them</c><00:41:52.500><c> in</c><00:41:52.740><c> the</c><00:41:52.859><c> links</c><00:41:53.160><c> here</c><00:41:53.280><c> and</c> 00:41:53.510 --> 00:41:53.520 align:start position:0% you define them in the links here and 00:41:53.520 --> 00:41:55.849 align:start position:0% you define them in the links here and then<00:41:53.700><c> they</c><00:41:53.940><c> are</c><00:41:54.119><c> rendered</c><00:41:54.720><c> here</c><00:41:55.020><c> okay</c><00:41:55.320><c> so</c><00:41:55.680><c> this</c> 00:41:55.849 --> 00:41:55.859 align:start position:0% then they are rendered here okay so this 00:41:55.859 --> 00:41:57.950 align:start position:0% then they are rendered here okay so this is<00:41:55.980><c> the</c><00:41:56.220><c> head</c><00:41:56.400><c> the</c><00:41:56.820><c> header</c><00:41:57.119><c> of</c><00:41:57.420><c> your</c><00:41:57.540><c> component</c> 00:41:57.950 --> 00:41:57.960 align:start position:0% is the head the header of your component 00:41:57.960 --> 00:42:00.710 align:start position:0% is the head the header of your component and<00:41:58.140><c> then</c><00:41:58.320><c> you</c><00:41:58.500><c> have</c><00:41:58.619><c> the</c><00:41:58.859><c> body</c><00:41:59.040><c> okay</c><00:41:59.940><c> and</c> 00:42:00.710 --> 00:42:00.720 align:start position:0% and then you have the body okay and 00:42:00.720 --> 00:42:02.390 align:start position:0% and then you have the body okay and usually<00:42:01.020><c> you</c><00:42:01.260><c> can</c><00:42:01.380><c> also</c><00:42:01.619><c> add</c><00:42:01.740><c> a</c><00:42:01.920><c> footer</c><00:42:02.220><c> but</c> 00:42:02.390 --> 00:42:02.400 align:start position:0% usually you can also add a footer but 00:42:02.400 --> 00:42:04.130 align:start position:0% usually you can also add a footer but then<00:42:02.579><c> they</c><00:42:02.700><c> didn't</c><00:42:03.000><c> add</c><00:42:03.300><c> one</c><00:42:03.540><c> here</c><00:42:03.780><c> in</c><00:42:03.960><c> this</c> 00:42:04.130 --> 00:42:04.140 align:start position:0% then they didn't add one here in this 00:42:04.140 --> 00:42:07.010 align:start position:0% then they didn't add one here in this case<00:42:04.760><c> and</c><00:42:05.760><c> then</c><00:42:05.940><c> you</c><00:42:06.060><c> have</c><00:42:06.180><c> the</c><00:42:06.359><c> layout</c><00:42:06.720><c> the</c> 00:42:07.010 --> 00:42:07.020 align:start position:0% case and then you have the layout the 00:42:07.020 --> 00:42:08.810 align:start position:0% case and then you have the layout the layout<00:42:07.320><c> is</c><00:42:07.560><c> basically</c><00:42:07.920><c> a</c><00:42:08.099><c> component</c><00:42:08.520><c> that</c> 00:42:08.810 --> 00:42:08.820 align:start position:0% layout is basically a component that 00:42:08.820 --> 00:42:10.730 align:start position:0% layout is basically a component that comes<00:42:09.119><c> with</c><00:42:09.660><c> um</c> 00:42:10.730 --> 00:42:10.740 align:start position:0% comes with um 00:42:10.740 --> 00:42:14.089 align:start position:0% comes with um with<00:42:11.400><c> the</c><00:42:11.660><c> scaffolding</c><00:42:12.660><c> the</c><00:42:12.900><c> shop</c><00:42:13.380><c> by</c><00:42:13.619><c> CLI</c> 00:42:14.089 --> 00:42:14.099 align:start position:0% with the scaffolding the shop by CLI 00:42:14.099 --> 00:42:16.730 align:start position:0% with the scaffolding the shop by CLI they<00:42:14.940><c> give</c><00:42:15.119><c> you</c><00:42:15.240><c> a</c><00:42:15.359><c> nice</c><00:42:15.540><c> obviously</c><00:42:16.200><c> if</c><00:42:16.560><c> you're</c> 00:42:16.730 --> 00:42:16.740 align:start position:0% they give you a nice obviously if you're 00:42:16.740 --> 00:42:19.670 align:start position:0% they give you a nice obviously if you're building<00:42:17.300><c> this</c><00:42:18.300><c> is</c><00:42:18.420><c> just</c><00:42:18.599><c> like</c><00:42:18.780><c> a</c><00:42:19.020><c> minimum</c> 00:42:19.670 --> 00:42:19.680 align:start position:0% building this is just like a minimum 00:42:19.680 --> 00:42:22.250 align:start position:0% building this is just like a minimum right<00:42:20.040><c> so</c><00:42:20.820><c> obviously</c><00:42:21.359><c> this</c><00:42:21.780><c> is</c><00:42:21.900><c> one</c><00:42:22.020><c> of</c><00:42:22.200><c> the</c> 00:42:22.250 --> 00:42:22.260 align:start position:0% right so obviously this is one of the 00:42:22.260 --> 00:42:24.410 align:start position:0% right so obviously this is one of the things<00:42:22.380><c> that</c><00:42:22.560><c> you're</c><00:42:22.680><c> gonna</c><00:42:23.000><c> customize</c><00:42:24.000><c> or</c> 00:42:24.410 --> 00:42:24.420 align:start position:0% things that you're gonna customize or 00:42:24.420 --> 00:42:26.810 align:start position:0% things that you're gonna customize or completely<00:42:25.020><c> rewrite</c><00:42:25.560><c> if</c><00:42:25.859><c> you're</c><00:42:26.040><c> building</c><00:42:26.280><c> if</c> 00:42:26.810 --> 00:42:26.820 align:start position:0% completely rewrite if you're building if 00:42:26.820 --> 00:42:28.670 align:start position:0% completely rewrite if you're building if you<00:42:27.000><c> want</c><00:42:27.119><c> to</c><00:42:27.240><c> improve</c><00:42:27.540><c> the</c><00:42:27.720><c> look</c><00:42:28.320><c> and</c><00:42:28.500><c> feel</c> 00:42:28.670 --> 00:42:28.680 align:start position:0% you want to improve the look and feel 00:42:28.680 --> 00:42:31.329 align:start position:0% you want to improve the look and feel it's<00:42:28.920><c> just</c><00:42:29.160><c> like</c><00:42:29.339><c> very</c><00:42:29.579><c> minimalistic</c> 00:42:31.329 --> 00:42:31.339 align:start position:0% it's just like very minimalistic 00:42:31.339 --> 00:42:35.510 align:start position:0% it's just like very minimalistic layout<00:42:32.339><c> is</c><00:42:32.700><c> just</c><00:42:32.940><c> the</c><00:42:33.240><c> the</c><00:42:33.660><c> menu</c><00:42:33.900><c> here</c> 00:42:35.510 --> 00:42:35.520 align:start position:0% layout is just the the menu here 00:42:35.520 --> 00:42:38.870 align:start position:0% layout is just the the menu here and<00:42:36.180><c> then</c><00:42:36.359><c> the</c><00:42:36.720><c> uh</c><00:42:37.140><c> yeah</c><00:42:37.920><c> and</c><00:42:38.339><c> then</c><00:42:38.520><c> the</c> 00:42:38.870 --> 00:42:38.880 align:start position:0% and then the uh yeah and then the 00:42:38.880 --> 00:42:41.690 align:start position:0% and then the uh yeah and then the content<00:42:39.240><c> here</c><00:42:39.540><c> so</c><00:42:39.960><c> very</c><00:42:40.619><c> minimalistic</c><00:42:41.339><c> but</c><00:42:41.520><c> it</c> 00:42:41.690 --> 00:42:41.700 align:start position:0% content here so very minimalistic but it 00:42:41.700 --> 00:42:43.550 align:start position:0% content here so very minimalistic but it works<00:42:41.940><c> obviously</c><00:42:42.359><c> so</c><00:42:42.720><c> and</c><00:42:42.900><c> then</c><00:42:43.020><c> inside</c><00:42:43.320><c> of</c> 00:42:43.550 --> 00:42:43.560 align:start position:0% works obviously so and then inside of 00:42:43.560 --> 00:42:46.910 align:start position:0% works obviously so and then inside of this<00:42:43.800><c> layout</c><00:42:44.220><c> then</c><00:42:45.180><c> you</c><00:42:45.359><c> will</c><00:42:45.540><c> render</c><00:42:45.920><c> the</c> 00:42:46.910 --> 00:42:46.920 align:start position:0% this layout then you will render the 00:42:46.920 --> 00:42:49.069 align:start position:0% this layout then you will render the page<00:42:47.160><c> okay</c><00:42:47.579><c> so</c><00:42:47.940><c> to</c><00:42:48.240><c> show</c><00:42:48.359><c> you</c><00:42:48.480><c> what</c><00:42:48.660><c> I</c><00:42:48.839><c> mean</c><00:42:48.960><c> by</c> 00:42:49.069 --> 00:42:49.079 align:start position:0% page okay so to show you what I mean by 00:42:49.079 --> 00:42:51.230 align:start position:0% page okay so to show you what I mean by that<00:42:49.260><c> if</c><00:42:49.560><c> I</c><00:42:49.680><c> comment</c><00:42:49.980><c> this</c><00:42:50.160><c> out</c> 00:42:51.230 --> 00:42:51.240 align:start position:0% that if I comment this out 00:42:51.240 --> 00:42:53.690 align:start position:0% that if I comment this out and<00:42:51.660><c> I</c><00:42:51.839><c> add</c><00:42:52.079><c> something</c><00:42:52.380><c> else</c><00:42:52.859><c> obviously</c><00:42:53.460><c> if</c><00:42:53.579><c> I</c> 00:42:53.690 --> 00:42:53.700 align:start position:0% and I add something else obviously if I 00:42:53.700 --> 00:42:55.250 align:start position:0% and I add something else obviously if I commend<00:42:54.000><c> the</c><00:42:54.180><c> size</c><00:42:54.240><c> for</c><00:42:54.540><c> gonna</c><00:42:54.839><c> give</c><00:42:55.020><c> me</c><00:42:55.140><c> a</c> 00:42:55.250 --> 00:42:55.260 align:start position:0% commend the size for gonna give me a 00:42:55.260 --> 00:42:58.490 align:start position:0% commend the size for gonna give me a narrow<00:42:55.980><c> and</c><00:42:56.640><c> then</c><00:42:57.060><c> I</c><00:42:57.240><c> if</c><00:42:57.420><c> I</c><00:42:57.599><c> come</c><00:42:57.720><c> here</c><00:42:57.900><c> you</c><00:42:58.319><c> can</c> 00:42:58.490 --> 00:42:58.500 align:start position:0% narrow and then I if I come here you can 00:42:58.500 --> 00:43:01.069 align:start position:0% narrow and then I if I come here you can see<00:42:58.680><c> it's</c><00:42:58.920><c> empty</c><00:42:59.339><c> what</c><00:42:59.700><c> is</c><00:42:59.880><c> this</c><00:43:00.060><c> see</c><00:43:00.660><c> the</c><00:43:00.960><c> page</c> 00:43:01.069 --> 00:43:01.079 align:start position:0% see it's empty what is this see the page 00:43:01.079 --> 00:43:03.470 align:start position:0% see it's empty what is this see the page is<00:43:01.319><c> now</c><00:43:01.500><c> empty</c><00:43:01.980><c> and</c><00:43:02.339><c> whatever</c><00:43:02.579><c> page</c><00:43:03.060><c> I</c><00:43:03.180><c> go</c><00:43:03.359><c> to</c> 00:43:03.470 --> 00:43:03.480 align:start position:0% is now empty and whatever page I go to 00:43:03.480 --> 00:43:05.630 align:start position:0% is now empty and whatever page I go to is<00:43:03.839><c> going</c><00:43:04.020><c> to</c><00:43:04.079><c> be</c><00:43:04.200><c> empty</c><00:43:04.560><c> because</c><00:43:05.220><c> this</c> 00:43:05.630 --> 00:43:05.640 align:start position:0% is going to be empty because this 00:43:05.640 --> 00:43:08.630 align:start position:0% is going to be empty because this Outlook<00:43:06.060><c> is</c><00:43:06.900><c> basically</c><00:43:07.319><c> this</c><00:43:07.980><c> Outlet</c><00:43:08.220><c> sorry</c> 00:43:08.630 --> 00:43:08.640 align:start position:0% Outlook is basically this Outlet sorry 00:43:08.640 --> 00:43:10.670 align:start position:0% Outlook is basically this Outlet sorry it's<00:43:09.420><c> basically</c> 00:43:10.670 --> 00:43:10.680 align:start position:0% it's basically 00:43:10.680 --> 00:43:14.150 align:start position:0% it's basically um<00:43:10.880><c> the</c><00:43:11.900><c> rendering</c><00:43:12.900><c> inside</c><00:43:13.140><c> of</c><00:43:13.440><c> this</c><00:43:13.740><c> layout</c> 00:43:14.150 --> 00:43:14.160 align:start position:0% um the rendering inside of this layout 00:43:14.160 --> 00:43:16.430 align:start position:0% um the rendering inside of this layout the<00:43:15.060><c> route</c><00:43:15.240><c> that</c><00:43:15.480><c> you're</c><00:43:15.599><c> currently</c><00:43:16.079><c> visiting</c> 00:43:16.430 --> 00:43:16.440 align:start position:0% the route that you're currently visiting 00:43:16.440 --> 00:43:18.710 align:start position:0% the route that you're currently visiting and<00:43:16.619><c> remember</c><00:43:16.800><c> each</c><00:43:17.339><c> round</c><00:43:17.640><c> defines</c><00:43:18.119><c> a</c><00:43:18.300><c> meta</c> 00:43:18.710 --> 00:43:18.720 align:start position:0% and remember each round defines a meta 00:43:18.720 --> 00:43:20.930 align:start position:0% and remember each round defines a meta defines<00:43:19.680><c> a</c><00:43:19.859><c> loader</c> 00:43:20.930 --> 00:43:20.940 align:start position:0% defines a loader 00:43:20.940 --> 00:43:23.150 align:start position:0% defines a loader finds<00:43:22.319><c> um</c> 00:43:23.150 --> 00:43:23.160 align:start position:0% finds um 00:43:23.160 --> 00:43:25.130 align:start position:0% finds um this<00:43:23.640><c> is</c><00:43:23.700><c> just</c><00:43:23.940><c> the</c><00:43:24.119><c> utility</c><00:43:24.420><c> function</c><00:43:24.900><c> but</c> 00:43:25.130 --> 00:43:25.140 align:start position:0% this is just the utility function but 00:43:25.140 --> 00:43:27.349 align:start position:0% this is just the utility function but defines<00:43:25.619><c> the</c><00:43:25.800><c> default</c><00:43:26.220><c> export</c><00:43:26.640><c> in</c><00:43:26.940><c> each</c><00:43:27.119><c> route</c> 00:43:27.349 --> 00:43:27.359 align:start position:0% defines the default export in each route 00:43:27.359 --> 00:43:29.569 align:start position:0% defines the default export in each route is<00:43:27.960><c> the</c><00:43:28.140><c> component</c><00:43:28.619><c> that's</c><00:43:28.859><c> been</c><00:43:29.160><c> rendered</c> 00:43:29.569 --> 00:43:29.579 align:start position:0% is the component that's been rendered 00:43:29.579 --> 00:43:32.569 align:start position:0% is the component that's been rendered right<00:43:30.000><c> so</c><00:43:30.839><c> you</c><00:43:31.079><c> see</c><00:43:31.319><c> here</c><00:43:31.619><c> you</c><00:43:32.099><c> have</c><00:43:32.339><c> the</c> 00:43:32.569 --> 00:43:32.579 align:start position:0% right so you see here you have the 00:43:32.579 --> 00:43:34.609 align:start position:0% right so you see here you have the default<00:43:33.300><c> the</c><00:43:33.599><c> default</c><00:43:34.020><c> component</c><00:43:34.440><c> the</c> 00:43:34.609 --> 00:43:34.619 align:start position:0% default the default component the 00:43:34.619 --> 00:43:37.910 align:start position:0% default the default component the default<00:43:35.099><c> react</c><00:43:35.400><c> component</c><00:43:35.819><c> is</c><00:43:36.540><c> this</c><00:43:36.960><c> product</c> 00:43:37.910 --> 00:43:37.920 align:start position:0% default react component is this product 00:43:37.920 --> 00:43:40.490 align:start position:0% default react component is this product here<00:43:38.280><c> so</c><00:43:38.640><c> if</c><00:43:38.819><c> I</c><00:43:39.000><c> put</c><00:43:39.180><c> that</c><00:43:39.359><c> back</c> 00:43:40.490 --> 00:43:40.500 align:start position:0% here so if I put that back 00:43:40.500 --> 00:43:43.309 align:start position:0% here so if I put that back in<00:43:40.980><c> the</c><00:43:41.099><c> route</c><00:43:41.280><c> in</c><00:43:42.060><c> the</c><00:43:42.180><c> in</c><00:43:42.420><c> the</c><00:43:42.540><c> route</c><00:43:42.720><c> in</c><00:43:43.260><c> the</c> 00:43:43.309 --> 00:43:43.319 align:start position:0% in the route in the in the route in the 00:43:43.319 --> 00:43:45.109 align:start position:0% in the route in the in the route in the in<00:43:43.500><c> the</c><00:43:43.619><c> root</c><00:43:43.800><c> route</c><00:43:44.040><c> okay</c> 00:43:45.109 --> 00:43:45.119 align:start position:0% in the root route okay 00:43:45.119 --> 00:43:47.990 align:start position:0% in the root route okay the<00:43:45.359><c> outlet</c><00:43:45.599><c> back</c><00:43:46.020><c> you</c><00:43:46.560><c> see</c><00:43:46.800><c> it's</c><00:43:47.040><c> back</c> 00:43:47.990 --> 00:43:48.000 align:start position:0% the outlet back you see it's back 00:43:48.000 --> 00:43:49.670 align:start position:0% the outlet back you see it's back but<00:43:48.359><c> if</c><00:43:48.540><c> I</c><00:43:48.660><c> go</c><00:43:48.780><c> back</c><00:43:48.900><c> to</c><00:43:49.079><c> the</c><00:43:49.200><c> bottom</c><00:43:49.500><c> page</c> 00:43:49.670 --> 00:43:49.680 align:start position:0% but if I go back to the bottom page 00:43:49.680 --> 00:43:51.290 align:start position:0% but if I go back to the bottom page where<00:43:49.800><c> on</c><00:43:49.980><c> which</c><00:43:50.160><c> we</c><00:43:50.339><c> were</c><00:43:50.460><c> before</c><00:43:50.640><c> it's</c><00:43:51.000><c> back</c> 00:43:51.290 --> 00:43:51.300 align:start position:0% where on which we were before it's back 00:43:51.300 --> 00:43:53.750 align:start position:0% where on which we were before it's back but<00:43:52.140><c> to</c><00:43:52.500><c> show</c><00:43:52.740><c> you</c><00:43:52.859><c> once</c><00:43:53.160><c> again</c><00:43:53.220><c> that</c><00:43:53.460><c> the</c><00:43:53.640><c> two</c> 00:43:53.750 --> 00:43:53.760 align:start position:0% but to show you once again that the two 00:43:53.760 --> 00:43:56.390 align:start position:0% but to show you once again that the two are<00:43:54.000><c> connected</c><00:43:54.420><c> If</c><00:43:55.319><c> instead</c><00:43:55.740><c> of</c><00:43:55.859><c> rendering</c> 00:43:56.390 --> 00:43:56.400 align:start position:0% are connected If instead of rendering 00:43:56.400 --> 00:43:58.130 align:start position:0% are connected If instead of rendering this<00:43:56.700><c> thing</c><00:43:57.000><c> here</c><00:43:57.300><c> I</c><00:43:57.599><c> rendered</c><00:43:57.960><c> some</c> 00:43:58.130 --> 00:43:58.140 align:start position:0% this thing here I rendered some 00:43:58.140 --> 00:43:59.270 align:start position:0% this thing here I rendered some gibberish 00:43:59.270 --> 00:43:59.280 align:start position:0% gibberish 00:43:59.280 --> 00:44:02.630 align:start position:0% gibberish return<00:43:59.880><c> uh</c> 00:44:02.630 --> 00:44:02.640 align:start position:0% return uh 00:44:02.640 --> 00:44:03.950 align:start position:0% return uh no 00:44:03.950 --> 00:44:03.960 align:start position:0% no 00:44:03.960 --> 00:44:05.329 align:start position:0% no nothing 00:44:05.329 --> 00:44:05.339 align:start position:0% nothing 00:44:05.339 --> 00:44:06.950 align:start position:0% nothing yeah<00:44:05.819><c> nothing</c> 00:44:06.950 --> 00:44:06.960 align:start position:0% yeah nothing 00:44:06.960 --> 00:44:08.690 align:start position:0% yeah nothing I do<00:44:07.380><c> like</c><00:44:07.560><c> this</c><00:44:07.680><c> you</c><00:44:07.920><c> see</c><00:44:08.099><c> this</c><00:44:08.400><c> is</c><00:44:08.520><c> nothing</c> 00:44:08.690 --> 00:44:08.700 align:start position:0% I do like this you see this is nothing 00:44:08.700 --> 00:44:12.609 align:start position:0% I do like this you see this is nothing right<00:44:09.319><c> so</c><00:44:10.319><c> this</c><00:44:10.680><c> is</c><00:44:10.800><c> the</c><00:44:11.040><c> products</c><00:44:11.520><c> handle</c> 00:44:12.609 --> 00:44:12.619 align:start position:0% right so this is the products handle 00:44:12.619 --> 00:44:15.829 align:start position:0% right so this is the products handle route<00:44:13.619><c> and</c><00:44:13.980><c> then</c><00:44:14.520><c> instead</c><00:44:15.300><c> of</c><00:44:15.359><c> returning</c> 00:44:15.829 --> 00:44:15.839 align:start position:0% route and then instead of returning 00:44:15.839 --> 00:44:17.870 align:start position:0% route and then instead of returning whatever<00:44:16.140><c> the</c><00:44:16.680><c> document</c><00:44:17.099><c> the</c><00:44:17.400><c> page</c><00:44:17.579><c> should</c> 00:44:17.870 --> 00:44:17.880 align:start position:0% whatever the document the page should 00:44:17.880 --> 00:44:19.849 align:start position:0% whatever the document the page should have<00:44:18.060><c> I'm</c><00:44:18.300><c> returning</c><00:44:18.720><c> some</c><00:44:18.900><c> gibberish</c><00:44:19.440><c> it's</c> 00:44:19.849 --> 00:44:19.859 align:start position:0% have I'm returning some gibberish it's 00:44:19.859 --> 00:44:22.550 align:start position:0% have I'm returning some gibberish it's gonna<00:44:20.099><c> show</c><00:44:20.760><c> me</c><00:44:20.940><c> this</c><00:44:21.180><c> and</c><00:44:21.480><c> even</c><00:44:21.660><c> more</c><00:44:21.839><c> so</c><00:44:22.079><c> if</c><00:44:22.380><c> I</c> 00:44:22.550 --> 00:44:22.560 align:start position:0% gonna show me this and even more so if I 00:44:22.560 --> 00:44:25.550 align:start position:0% gonna show me this and even more so if I return<00:44:22.819><c> if</c><00:44:23.819><c> I</c><00:44:24.000><c> remove</c><00:44:24.180><c> this</c><00:44:24.540><c> entirely</c><00:44:25.079><c> okay</c> 00:44:25.550 --> 00:44:25.560 align:start position:0% return if I remove this entirely okay 00:44:25.560 --> 00:44:28.010 align:start position:0% return if I remove this entirely okay it's<00:44:26.220><c> going</c><00:44:26.400><c> to</c><00:44:26.520><c> return</c><00:44:26.700><c> adjacent</c><00:44:27.420><c> that</c><00:44:27.780><c> was</c> 00:44:28.010 --> 00:44:28.020 align:start position:0% it's going to return adjacent that was 00:44:28.020 --> 00:44:29.329 align:start position:0% it's going to return adjacent that was contained<00:44:28.380><c> in</c><00:44:28.560><c> the</c><00:44:28.680><c> loader</c><00:44:29.040><c> that</c><00:44:29.220><c> was</c> 00:44:29.329 --> 00:44:29.339 align:start position:0% contained in the loader that was 00:44:29.339 --> 00:44:31.670 align:start position:0% contained in the loader that was returned<00:44:29.700><c> by</c><00:44:29.819><c> the</c><00:44:29.940><c> loader</c><00:44:30.359><c> so</c><00:44:30.599><c> you</c><00:44:31.200><c> can</c><00:44:31.319><c> turn</c> 00:44:31.670 --> 00:44:31.680 align:start position:0% returned by the loader so you can turn 00:44:31.680 --> 00:44:35.210 align:start position:0% returned by the loader so you can turn your<00:44:32.160><c> route</c><00:44:32.400><c> into</c><00:44:32.700><c> uh</c><00:44:33.599><c> like</c><00:44:34.079><c> Json</c><00:44:34.680><c> apis</c> 00:44:35.210 --> 00:44:35.220 align:start position:0% your route into uh like Json apis 00:44:35.220 --> 00:44:37.069 align:start position:0% your route into uh like Json apis basically<00:44:35.640><c> so</c><00:44:35.880><c> if</c><00:44:36.000><c> I</c><00:44:36.180><c> comment</c><00:44:36.480><c> this</c><00:44:36.599><c> out</c><00:44:36.780><c> all</c> 00:44:37.069 --> 00:44:37.079 align:start position:0% basically so if I comment this out all 00:44:37.079 --> 00:44:38.270 align:start position:0% basically so if I comment this out all together 00:44:38.270 --> 00:44:38.280 align:start position:0% together 00:44:38.280 --> 00:44:40.910 align:start position:0% together look<00:44:38.880><c> at</c><00:44:39.060><c> this</c><00:44:39.180><c> like</c><00:44:39.420><c> this</c><00:44:39.599><c> you</c><00:44:40.319><c> see</c><00:44:40.500><c> it</c> 00:44:40.910 --> 00:44:40.920 align:start position:0% look at this like this you see it 00:44:40.920 --> 00:44:43.670 align:start position:0% look at this like this you see it returns<00:44:41.640><c> oh</c><00:44:42.119><c> one</c><00:44:42.420><c> sec</c> 00:44:43.670 --> 00:44:43.680 align:start position:0% returns oh one sec 00:44:43.680 --> 00:44:47.150 align:start position:0% returns oh one sec you<00:44:44.220><c> can</c><00:44:44.280><c> oh</c><00:44:45.119><c> it</c><00:44:45.839><c> depends</c><00:44:46.319><c> on</c><00:44:46.440><c> what</c><00:44:46.859><c> you're</c> 00:44:47.150 --> 00:44:47.160 align:start position:0% you can oh it depends on what you're 00:44:47.160 --> 00:44:49.490 align:start position:0% you can oh it depends on what you're returning<00:44:47.640><c> from</c><00:44:47.880><c> here</c><00:44:48.180><c> so</c><00:44:48.540><c> you</c><00:44:48.839><c> can</c><00:44:48.960><c> force</c> 00:44:49.490 --> 00:44:49.500 align:start position:0% returning from here so you can force 00:44:49.500 --> 00:44:51.109 align:start position:0% returning from here so you can force this<00:44:49.680><c> to</c><00:44:49.980><c> I</c><00:44:50.280><c> think</c><00:44:50.400><c> yeah</c><00:44:50.520><c> it's</c><00:44:50.760><c> because</c><00:44:50.880><c> this</c> 00:44:51.109 --> 00:44:51.119 align:start position:0% this to I think yeah it's because this 00:44:51.119 --> 00:44:53.990 align:start position:0% this to I think yeah it's because this is<00:44:51.240><c> a</c><00:44:51.420><c> differ</c><00:44:51.660><c> but</c><00:44:52.319><c> if</c><00:44:52.500><c> it</c><00:44:52.619><c> was</c><00:44:52.800><c> a</c><00:44:53.040><c> simple</c><00:44:53.280><c> Json</c> 00:44:53.990 --> 00:44:54.000 align:start position:0% is a differ but if it was a simple Json 00:44:54.000 --> 00:44:58.190 align:start position:0% is a differ but if it was a simple Json let's<00:44:54.300><c> say</c><00:44:54.480><c> I</c><00:44:54.660><c> return</c><00:44:55.280><c> return</c><00:44:56.280><c> oh</c><00:44:57.119><c> sorry</c> 00:44:58.190 --> 00:44:58.200 align:start position:0% let's say I return return oh sorry 00:44:58.200 --> 00:45:02.170 align:start position:0% let's say I return return oh sorry done<00:44:59.119><c> Json</c><00:45:00.119><c> okay</c><00:45:00.900><c> Jason</c> 00:45:02.170 --> 00:45:02.180 align:start position:0% done Json okay Jason 00:45:02.180 --> 00:45:05.150 align:start position:0% done Json okay Jason and<00:45:03.180><c> I</c><00:45:03.359><c> do</c><00:45:03.540><c> nothing</c> 00:45:05.150 --> 00:45:05.160 align:start position:0% and I do nothing 00:45:05.160 --> 00:45:07.670 align:start position:0% and I do nothing nothing 00:45:07.670 --> 00:45:07.680 align:start position:0% nothing 00:45:07.680 --> 00:45:11.510 align:start position:0% nothing like<00:45:07.740><c> this</c><00:45:08.579><c> I'm</c><00:45:09.300><c> gonna</c><00:45:09.480><c> see</c><00:45:10.200><c> nothing</c> 00:45:11.510 --> 00:45:11.520 align:start position:0% like this I'm gonna see nothing 00:45:11.520 --> 00:45:14.630 align:start position:0% like this I'm gonna see nothing say<00:45:12.060><c> nothing</c><00:45:12.540><c> completely</c><00:45:13.140><c> it's</c><00:45:13.859><c> now</c><00:45:14.220><c> you've</c> 00:45:14.630 --> 00:45:14.640 align:start position:0% say nothing completely it's now you've 00:45:14.640 --> 00:45:17.750 align:start position:0% say nothing completely it's now you've turned<00:45:15.060><c> your</c><00:45:15.240><c> route</c><00:45:15.540><c> into</c><00:45:15.900><c> a</c><00:45:16.200><c> Json</c><00:45:16.680><c> into</c><00:45:17.520><c> an</c> 00:45:17.750 --> 00:45:17.760 align:start position:0% turned your route into a Json into an 00:45:17.760 --> 00:45:20.690 align:start position:0% turned your route into a Json into an API<00:45:18.119><c> into</c><00:45:18.720><c> an</c><00:45:19.020><c> API</c><00:45:19.319><c> endpoint</c><00:45:19.740><c> right</c><00:45:20.099><c> instead</c> 00:45:20.690 --> 00:45:20.700 align:start position:0% API into an API endpoint right instead 00:45:20.700 --> 00:45:22.790 align:start position:0% API into an API endpoint right instead of<00:45:20.819><c> an</c><00:45:21.000><c> HTML</c><00:45:21.599><c> so</c><00:45:21.780><c> now</c><00:45:21.960><c> it's</c><00:45:22.140><c> turning</c><00:45:22.560><c> stop</c> 00:45:22.790 --> 00:45:22.800 align:start position:0% of an HTML so now it's turning stop 00:45:22.800 --> 00:45:25.790 align:start position:0% of an HTML so now it's turning stop returning<00:45:23.160><c> HDM</c><00:45:23.520><c> is</c><00:45:23.640><c> returning</c><00:45:24.060><c> Json</c><00:45:24.420><c> okay</c><00:45:25.200><c> so</c> 00:45:25.790 --> 00:45:25.800 align:start position:0% returning HDM is returning Json okay so 00:45:25.800 --> 00:45:27.530 align:start position:0% returning HDM is returning Json okay so that's<00:45:25.980><c> how</c><00:45:26.220><c> you</c><00:45:26.339><c> do</c><00:45:26.520><c> that</c><00:45:26.700><c> okay</c><00:45:27.060><c> that's</c><00:45:27.300><c> why</c> 00:45:27.530 --> 00:45:27.540 align:start position:0% that's how you do that okay that's why 00:45:27.540 --> 00:45:30.109 align:start position:0% that's how you do that okay that's why sometimes<00:45:27.960><c> in</c><00:45:28.140><c> some</c><00:45:28.680><c> remix</c><00:45:29.040><c> project</c><00:45:29.520><c> you</c><00:45:29.880><c> have</c> 00:45:30.109 --> 00:45:30.119 align:start position:0% sometimes in some remix project you have 00:45:30.119 --> 00:45:31.390 align:start position:0% sometimes in some remix project you have a<00:45:30.300><c> route</c><00:45:30.480><c> called</c> 00:45:31.390 --> 00:45:31.400 align:start position:0% a route called 00:45:31.400 --> 00:45:35.390 align:start position:0% a route called routes<00:45:32.400><c> then</c><00:45:33.060><c> API</c><00:45:33.720><c> dot</c><00:45:34.500><c> the</c><00:45:34.859><c> raw</c><00:45:35.160><c> that</c><00:45:35.280><c> you</c> 00:45:35.390 --> 00:45:35.400 align:start position:0% routes then API dot the raw that you 00:45:35.400 --> 00:45:36.770 align:start position:0% routes then API dot the raw that you want<00:45:35.520><c> to</c><00:45:35.640><c> Define</c><00:45:35.760><c> and</c><00:45:36.119><c> in</c><00:45:36.300><c> those</c><00:45:36.420><c> kind</c><00:45:36.660><c> of</c> 00:45:36.770 --> 00:45:36.780 align:start position:0% want to Define and in those kind of 00:45:36.780 --> 00:45:40.250 align:start position:0% want to Define and in those kind of routes<00:45:37.200><c> instead</c><00:45:37.740><c> of</c><00:45:37.800><c> returning</c><00:45:38.160><c> a</c><00:45:38.359><c> HTML</c><00:45:39.359><c> with</c> 00:45:40.250 --> 00:45:40.260 align:start position:0% routes instead of returning a HTML with 00:45:40.260 --> 00:45:41.870 align:start position:0% routes instead of returning a HTML with the<00:45:40.380><c> with</c><00:45:40.619><c> the</c><00:45:40.740><c> cost</c><00:45:40.859><c> with</c><00:45:41.280><c> the</c><00:45:41.400><c> with</c><00:45:41.579><c> the</c><00:45:41.760><c> real</c> 00:45:41.870 --> 00:45:41.880 align:start position:0% the with the cost with the with the real 00:45:41.880 --> 00:45:44.930 align:start position:0% the with the cost with the with the real component<00:45:42.480><c> you</c><00:45:42.960><c> just</c><00:45:43.200><c> Define</c><00:45:43.380><c> the</c><00:45:43.680><c> loader</c><00:45:44.579><c> if</c> 00:45:44.930 --> 00:45:44.940 align:start position:0% component you just Define the loader if 00:45:44.940 --> 00:45:47.809 align:start position:0% component you just Define the loader if it's<00:45:45.060><c> a</c><00:45:45.240><c> get</c><00:45:45.500><c> endpoint</c><00:45:46.500><c> or</c><00:45:47.160><c> the</c><00:45:47.339><c> action</c><00:45:47.579><c> if</c> 00:45:47.809 --> 00:45:47.819 align:start position:0% it's a get endpoint or the action if 00:45:47.819 --> 00:45:49.609 align:start position:0% it's a get endpoint or the action if it's<00:45:48.000><c> a</c><00:45:48.119><c> post</c><00:45:48.240><c> endpoint</c><00:45:48.720><c> and</c><00:45:49.079><c> then</c><00:45:49.200><c> and</c><00:45:49.440><c> then</c> 00:45:49.609 --> 00:45:49.619 align:start position:0% it's a post endpoint and then and then 00:45:49.619 --> 00:45:51.349 align:start position:0% it's a post endpoint and then and then from<00:45:49.859><c> there</c><00:45:50.040><c> you</c><00:45:50.339><c> have</c><00:45:50.520><c> an</c><00:45:50.640><c> API</c><00:45:50.940><c> endpoint</c> 00:45:51.349 --> 00:45:51.359 align:start position:0% from there you have an API endpoint 00:45:51.359 --> 00:45:53.750 align:start position:0% from there you have an API endpoint powered<00:45:52.079><c> by</c><00:45:52.200><c> remix</c><00:45:52.500><c> so</c><00:45:52.980><c> I'm</c><00:45:53.220><c> gonna</c><00:45:53.400><c> comment</c> 00:45:53.750 --> 00:45:53.760 align:start position:0% powered by remix so I'm gonna comment 00:45:53.760 --> 00:45:55.970 align:start position:0% powered by remix so I'm gonna comment this<00:45:54.000><c> one</c><00:45:54.119><c> out</c><00:45:54.359><c> again</c><00:45:54.660><c> and</c><00:45:55.319><c> remove</c><00:45:55.680><c> this</c> 00:45:55.970 --> 00:45:55.980 align:start position:0% this one out again and remove this 00:45:55.980 --> 00:45:58.730 align:start position:0% this one out again and remove this nothing<00:45:56.280><c> and</c><00:45:57.060><c> remove</c><00:45:57.300><c> this</c><00:45:57.660><c> one</c><00:45:57.780><c> here</c><00:45:58.140><c> and</c> 00:45:58.730 --> 00:45:58.740 align:start position:0% nothing and remove this one here and 00:45:58.740 --> 00:46:00.829 align:start position:0% nothing and remove this one here and that'll<00:45:59.040><c> be</c><00:45:59.160><c> it</c><00:45:59.280><c> really</c><00:45:59.460><c> and</c><00:46:00.300><c> then</c><00:46:00.420><c> we'll</c><00:46:00.660><c> be</c> 00:46:00.829 --> 00:46:00.839 align:start position:0% that'll be it really and then we'll be 00:46:00.839 --> 00:46:03.349 align:start position:0% that'll be it really and then we'll be back<00:46:01.020><c> to</c><00:46:01.200><c> what</c><00:46:01.560><c> we</c><00:46:01.740><c> had</c><00:46:01.920><c> earlier</c><00:46:02.280><c> which</c><00:46:02.880><c> is</c><00:46:03.060><c> the</c> 00:46:03.349 --> 00:46:03.359 align:start position:0% back to what we had earlier which is the 00:46:03.359 --> 00:46:04.910 align:start position:0% back to what we had earlier which is the product<00:46:03.599><c> page</c><00:46:04.079><c> right</c> 00:46:04.910 --> 00:46:04.920 align:start position:0% product page right 00:46:04.920 --> 00:46:08.630 align:start position:0% product page right so<00:46:05.640><c> the</c><00:46:06.000><c> next</c><00:46:06.119><c> stop</c><00:46:06.359><c> here</c><00:46:06.780><c> for</c><00:46:07.079><c> us</c><00:46:07.260><c> to</c><00:46:07.500><c> look</c><00:46:07.680><c> at</c> 00:46:08.630 --> 00:46:08.640 align:start position:0% so the next stop here for us to look at 00:46:08.640 --> 00:46:12.290 align:start position:0% so the next stop here for us to look at um<00:46:09.119><c> is</c><00:46:10.020><c> the</c><00:46:10.260><c> school</c><00:46:10.440><c> restoration</c><00:46:10.980><c> okay</c><00:46:11.520><c> the</c> 00:46:12.290 --> 00:46:12.300 align:start position:0% um is the school restoration okay the 00:46:12.300 --> 00:46:14.030 align:start position:0% um is the school restoration okay the school<00:46:12.480><c> restoration</c><00:46:13.020><c> component</c><00:46:13.560><c> is</c><00:46:13.680><c> very</c> 00:46:14.030 --> 00:46:14.040 align:start position:0% school restoration component is very 00:46:14.040 --> 00:46:17.210 align:start position:0% school restoration component is very nice<00:46:14.220><c> one</c><00:46:14.460><c> uh</c><00:46:15.180><c> added</c><00:46:15.540><c> by</c><00:46:15.720><c> the</c><00:46:15.900><c> remix</c><00:46:16.020><c> team</c><00:46:16.500><c> and</c> 00:46:17.210 --> 00:46:17.220 align:start position:0% nice one uh added by the remix team and 00:46:17.220 --> 00:46:19.849 align:start position:0% nice one uh added by the remix team and basically<00:46:17.520><c> what</c><00:46:17.760><c> this</c><00:46:17.940><c> is</c><00:46:18.180><c> is</c><00:46:18.540><c> if</c><00:46:18.839><c> I</c><00:46:19.079><c> go</c><00:46:19.260><c> let</c><00:46:19.680><c> me</c> 00:46:19.849 --> 00:46:19.859 align:start position:0% basically what this is is if I go let me 00:46:19.859 --> 00:46:23.150 align:start position:0% basically what this is is if I go let me see<00:46:20.280><c> if</c><00:46:20.819><c> I</c><00:46:20.940><c> can</c><00:46:21.060><c> demo</c><00:46:21.480><c> this</c><00:46:21.660><c> for</c><00:46:21.839><c> you</c><00:46:22.020><c> guys</c><00:46:22.140><c> if</c><00:46:22.980><c> I</c> 00:46:23.150 --> 00:46:23.160 align:start position:0% see if I can demo this for you guys if I 00:46:23.160 --> 00:46:26.270 align:start position:0% see if I can demo this for you guys if I scroll<00:46:23.400><c> down</c><00:46:23.700><c> to</c><00:46:24.240><c> this</c><00:46:24.420><c> level</c><00:46:24.660><c> okay</c><00:46:25.140><c> see</c><00:46:26.040><c> I'm</c> 00:46:26.270 --> 00:46:26.280 align:start position:0% scroll down to this level okay see I'm 00:46:26.280 --> 00:46:28.130 align:start position:0% scroll down to this level okay see I'm on<00:46:26.460><c> the</c><00:46:26.579><c> root</c><00:46:26.819><c> page</c><00:46:27.060><c> I'm</c><00:46:27.420><c> on</c><00:46:27.599><c> the</c><00:46:27.720><c> home</c><00:46:27.960><c> page</c> 00:46:28.130 --> 00:46:28.140 align:start position:0% on the root page I'm on the home page 00:46:28.140 --> 00:46:30.710 align:start position:0% on the root page I'm on the home page okay<00:46:28.380><c> and</c><00:46:28.740><c> I</c><00:46:28.920><c> scroll</c><00:46:29.099><c> down</c><00:46:29.400><c> okay</c> 00:46:30.710 --> 00:46:30.720 align:start position:0% okay and I scroll down okay 00:46:30.720 --> 00:46:32.510 align:start position:0% okay and I scroll down okay and<00:46:31.260><c> then</c><00:46:31.380><c> I</c><00:46:31.619><c> visit</c> 00:46:32.510 --> 00:46:32.520 align:start position:0% and then I visit 00:46:32.520 --> 00:46:34.250 align:start position:0% and then I visit a<00:46:32.880><c> collection</c><00:46:33.180><c> page</c> 00:46:34.250 --> 00:46:34.260 align:start position:0% a collection page 00:46:34.260 --> 00:46:36.950 align:start position:0% a collection page and<00:46:34.740><c> then</c><00:46:34.859><c> I</c><00:46:35.040><c> go</c><00:46:35.220><c> back</c><00:46:35.520><c> you</c><00:46:36.119><c> see</c><00:46:36.240><c> I'm</c><00:46:36.540><c> still</c><00:46:36.720><c> at</c> 00:46:36.950 --> 00:46:36.960 align:start position:0% and then I go back you see I'm still at 00:46:36.960 --> 00:46:38.930 align:start position:0% and then I go back you see I'm still at the<00:46:37.079><c> bottom</c><00:46:37.380><c> right</c><00:46:37.800><c> I</c><00:46:38.400><c> don't</c><00:46:38.579><c> know</c><00:46:38.700><c> if</c><00:46:38.819><c> you</c> 00:46:38.930 --> 00:46:38.940 align:start position:0% the bottom right I don't know if you 00:46:38.940 --> 00:46:41.089 align:start position:0% the bottom right I don't know if you noticed<00:46:39.240><c> that</c><00:46:39.420><c> but</c><00:46:39.720><c> let</c><00:46:40.500><c> me</c><00:46:40.680><c> do</c><00:46:40.800><c> that</c><00:46:40.920><c> again</c> 00:46:41.089 --> 00:46:41.099 align:start position:0% noticed that but let me do that again 00:46:41.099 --> 00:46:44.089 align:start position:0% noticed that but let me do that again I'm<00:46:41.700><c> on</c><00:46:41.880><c> the</c><00:46:42.000><c> root</c><00:46:42.240><c> page</c><00:46:42.540><c> okay</c><00:46:42.900><c> the</c><00:46:43.680><c> home</c><00:46:43.920><c> page</c> 00:46:44.089 --> 00:46:44.099 align:start position:0% I'm on the root page okay the home page 00:46:44.099 --> 00:46:47.750 align:start position:0% I'm on the root page okay the home page sorry<00:46:44.420><c> I</c><00:46:45.420><c> scroll</c><00:46:45.780><c> down</c><00:46:46.020><c> okay</c><00:46:46.619><c> and</c><00:46:47.460><c> then</c><00:46:47.579><c> I</c> 00:46:47.750 --> 00:46:47.760 align:start position:0% sorry I scroll down okay and then I 00:46:47.760 --> 00:46:50.270 align:start position:0% sorry I scroll down okay and then I visit<00:46:48.000><c> a</c><00:46:48.300><c> different</c><00:46:48.480><c> page</c><00:46:48.839><c> and</c><00:46:49.680><c> then</c><00:46:49.800><c> I</c><00:46:50.040><c> go</c> 00:46:50.270 --> 00:46:50.280 align:start position:0% visit a different page and then I go 00:46:50.280 --> 00:46:53.390 align:start position:0% visit a different page and then I go back<00:46:50.640><c> you</c><00:46:51.300><c> see</c><00:46:51.480><c> I'm</c><00:46:52.440><c> still</c><00:46:52.740><c> at</c><00:46:53.099><c> the</c><00:46:53.220><c> level</c> 00:46:53.390 --> 00:46:53.400 align:start position:0% back you see I'm still at the level 00:46:53.400 --> 00:46:56.030 align:start position:0% back you see I'm still at the level where<00:46:53.880><c> I</c><00:46:54.119><c> was</c><00:46:54.300><c> before</c><00:46:54.660><c> before</c><00:46:55.200><c> I</c><00:46:55.500><c> went</c><00:46:55.680><c> to</c><00:46:55.859><c> the</c> 00:46:56.030 --> 00:46:56.040 align:start position:0% where I was before before I went to the 00:46:56.040 --> 00:46:58.130 align:start position:0% where I was before before I went to the collection<00:46:56.339><c> page</c><00:46:56.700><c> I'm</c><00:46:57.000><c> not</c><00:46:57.180><c> when</c><00:46:57.599><c> I</c><00:46:57.780><c> go</c><00:46:57.900><c> back</c> 00:46:58.130 --> 00:46:58.140 align:start position:0% collection page I'm not when I go back 00:46:58.140 --> 00:46:59.630 align:start position:0% collection page I'm not when I go back I'm<00:46:58.500><c> not</c> 00:46:59.630 --> 00:46:59.640 align:start position:0% I'm not 00:46:59.640 --> 00:47:01.670 align:start position:0% I'm not um<00:46:59.700><c> at</c><00:47:00.000><c> the</c><00:47:00.119><c> top</c><00:47:00.240><c> of</c><00:47:00.420><c> the</c><00:47:00.540><c> page</c><00:47:00.780><c> right</c><00:47:01.079><c> which</c><00:47:01.560><c> is</c> 00:47:01.670 --> 00:47:01.680 align:start position:0% um at the top of the page right which is 00:47:01.680 --> 00:47:03.530 align:start position:0% um at the top of the page right which is really<00:47:01.920><c> really</c><00:47:02.160><c> good</c><00:47:02.400><c> it's</c><00:47:02.640><c> a</c><00:47:02.819><c> good</c><00:47:03.060><c> school</c> 00:47:03.530 --> 00:47:03.540 align:start position:0% really really good it's a good school 00:47:03.540 --> 00:47:06.530 align:start position:0% really really good it's a good school experience<00:47:04.079><c> so</c><00:47:04.920><c> if</c><00:47:05.099><c> I</c><00:47:05.280><c> come</c><00:47:05.460><c> in</c><00:47:05.579><c> a</c><00:47:05.760><c> doubt</c><00:47:06.119><c> let's</c> 00:47:06.530 --> 00:47:06.540 align:start position:0% experience so if I come in a doubt let's 00:47:06.540 --> 00:47:08.270 align:start position:0% experience so if I come in a doubt let's see<00:47:06.780><c> how</c><00:47:06.960><c> this</c><00:47:07.140><c> cool</c><00:47:07.440><c> experience</c><00:47:07.800><c> looks</c><00:47:08.160><c> like</c> 00:47:08.270 --> 00:47:08.280 align:start position:0% see how this cool experience looks like 00:47:08.280 --> 00:47:10.910 align:start position:0% see how this cool experience looks like now<00:47:08.579><c> but</c><00:47:09.300><c> whatever</c><00:47:09.480><c> I</c><00:47:09.839><c> done</c> 00:47:10.910 --> 00:47:10.920 align:start position:0% now but whatever I done 00:47:10.920 --> 00:47:12.410 align:start position:0% now but whatever I done roots 00:47:12.410 --> 00:47:12.420 align:start position:0% roots 00:47:12.420 --> 00:47:15.530 align:start position:0% roots okay<00:47:13.380><c> I</c><00:47:13.619><c> commented</c><00:47:14.040><c> that</c><00:47:14.160><c> out</c><00:47:14.400><c> all</c><00:47:14.819><c> right</c><00:47:14.940><c> so</c> 00:47:15.530 --> 00:47:15.540 align:start position:0% okay I commented that out all right so 00:47:15.540 --> 00:47:16.970 align:start position:0% okay I commented that out all right so let's<00:47:15.720><c> try</c><00:47:15.960><c> and</c><00:47:16.079><c> do</c><00:47:16.200><c> that</c><00:47:16.319><c> again</c><00:47:16.440><c> I</c><00:47:16.680><c> think</c><00:47:16.800><c> I'm</c> 00:47:16.970 --> 00:47:16.980 align:start position:0% let's try and do that again I think I'm 00:47:16.980 --> 00:47:18.890 align:start position:0% let's try and do that again I think I'm I'm<00:47:17.220><c> correctly</c><00:47:18.000><c> saying</c><00:47:18.359><c> that</c><00:47:18.420><c> this</c><00:47:18.599><c> is</c><00:47:18.720><c> what</c> 00:47:18.890 --> 00:47:18.900 align:start position:0% I'm correctly saying that this is what 00:47:18.900 --> 00:47:21.589 align:start position:0% I'm correctly saying that this is what this<00:47:19.079><c> is</c><00:47:19.200><c> for</c><00:47:19.380><c> okay</c><00:47:19.680><c> so</c><00:47:20.579><c> let's</c><00:47:21.000><c> do</c><00:47:21.300><c> an</c><00:47:21.420><c> extra</c> 00:47:21.589 --> 00:47:21.599 align:start position:0% this is for okay so let's do an extra 00:47:21.599 --> 00:47:23.390 align:start position:0% this is for okay so let's do an extra Let<00:47:21.900><c> me</c><00:47:22.020><c> refresh</c><00:47:22.380><c> the</c><00:47:22.500><c> page</c><00:47:22.800><c> let's</c><00:47:23.099><c> scroll</c> 00:47:23.390 --> 00:47:23.400 align:start position:0% Let me refresh the page let's scroll 00:47:23.400 --> 00:47:26.150 align:start position:0% Let me refresh the page let's scroll down<00:47:23.579><c> okay</c><00:47:23.940><c> are</c><00:47:24.599><c> we</c><00:47:24.780><c> at</c><00:47:24.900><c> the</c><00:47:24.960><c> bottom</c><00:47:25.200><c> again</c><00:47:25.380><c> and</c> 00:47:26.150 --> 00:47:26.160 align:start position:0% down okay are we at the bottom again and 00:47:26.160 --> 00:47:28.010 align:start position:0% down okay are we at the bottom again and then<00:47:26.339><c> I</c><00:47:26.460><c> visit</c><00:47:26.579><c> the</c><00:47:26.819><c> collection</c><00:47:27.119><c> page</c> 00:47:28.010 --> 00:47:28.020 align:start position:0% then I visit the collection page 00:47:28.020 --> 00:47:30.950 align:start position:0% then I visit the collection page and<00:47:28.500><c> then</c><00:47:28.680><c> I</c><00:47:28.859><c> go</c><00:47:28.980><c> back</c><00:47:29.240><c> uh</c> 00:47:30.950 --> 00:47:30.960 align:start position:0% and then I go back uh 00:47:30.960 --> 00:47:32.930 align:start position:0% and then I go back uh thing<00:47:31.500><c> yeah</c><00:47:31.740><c> let</c><00:47:32.040><c> me</c><00:47:32.160><c> let</c><00:47:32.280><c> me</c><00:47:32.460><c> try</c><00:47:32.520><c> and</c><00:47:32.700><c> do</c><00:47:32.819><c> that</c> 00:47:32.930 --> 00:47:32.940 align:start position:0% thing yeah let me let me try and do that 00:47:32.940 --> 00:47:36.170 align:start position:0% thing yeah let me let me try and do that again<00:47:33.060><c> it's</c><00:47:34.020><c> cool</c><00:47:34.380><c> and</c><00:47:34.800><c> then</c><00:47:34.920><c> I</c><00:47:35.040><c> go</c><00:47:35.220><c> back</c> 00:47:36.170 --> 00:47:36.180 align:start position:0% again it's cool and then I go back 00:47:36.180 --> 00:47:38.690 align:start position:0% again it's cool and then I go back see<00:47:36.599><c> I'm</c><00:47:36.960><c> at</c><00:47:37.079><c> the</c><00:47:37.260><c> top</c><00:47:37.380><c> you</c><00:47:37.800><c> see</c><00:47:37.920><c> let</c><00:47:38.339><c> me</c><00:47:38.520><c> do</c> 00:47:38.690 --> 00:47:38.700 align:start position:0% see I'm at the top you see let me do 00:47:38.700 --> 00:47:41.630 align:start position:0% see I'm at the top you see let me do that<00:47:38.819><c> again</c><00:47:39.319><c> Let</c><00:47:40.319><c> me</c><00:47:40.500><c> refresh</c><00:47:40.859><c> the</c><00:47:40.980><c> page</c><00:47:41.220><c> okay</c> 00:47:41.630 --> 00:47:41.640 align:start position:0% that again Let me refresh the page okay 00:47:41.640 --> 00:47:45.290 align:start position:0% that again Let me refresh the page okay I'm<00:47:42.480><c> at</c><00:47:42.660><c> the</c><00:47:42.839><c> top</c><00:47:42.960><c> I</c><00:47:43.380><c> scroll</c><00:47:43.619><c> down</c><00:47:43.920><c> okay</c> 00:47:45.290 --> 00:47:45.300 align:start position:0% I'm at the top I scroll down okay 00:47:45.300 --> 00:47:47.150 align:start position:0% I'm at the top I scroll down okay and<00:47:45.720><c> then</c><00:47:45.839><c> I</c><00:47:45.960><c> visit</c><00:47:46.140><c> the</c><00:47:46.319><c> collections</c><00:47:46.920><c> page</c> 00:47:47.150 --> 00:47:47.160 align:start position:0% and then I visit the collections page 00:47:47.160 --> 00:47:50.569 align:start position:0% and then I visit the collections page and<00:47:48.000><c> then</c><00:47:48.119><c> I</c><00:47:48.300><c> go</c><00:47:48.480><c> back</c><00:47:48.660><c> you</c><00:47:49.560><c> see</c><00:47:49.800><c> I'm</c><00:47:49.980><c> back</c><00:47:50.400><c> at</c> 00:47:50.569 --> 00:47:50.579 align:start position:0% and then I go back you see I'm back at 00:47:50.579 --> 00:47:52.430 align:start position:0% and then I go back you see I'm back at the<00:47:50.700><c> top</c><00:47:50.880><c> of</c><00:47:51.060><c> the</c><00:47:51.180><c> page</c><00:47:51.420><c> right</c> 00:47:52.430 --> 00:47:52.440 align:start position:0% the top of the page right 00:47:52.440 --> 00:47:55.370 align:start position:0% the top of the page right so<00:47:53.280><c> this</c><00:47:53.460><c> is</c><00:47:53.579><c> what</c><00:47:53.880><c> the</c><00:47:54.060><c> scroll</c><00:47:54.599><c> restoration</c> 00:47:55.370 --> 00:47:55.380 align:start position:0% so this is what the scroll restoration 00:47:55.380 --> 00:47:58.430 align:start position:0% so this is what the scroll restoration component<00:47:56.339><c> does</c><00:47:56.579><c> okay</c><00:47:57.060><c> so</c><00:47:57.660><c> let</c><00:47:57.780><c> me</c><00:47:57.960><c> comment</c><00:47:58.260><c> at</c> 00:47:58.430 --> 00:47:58.440 align:start position:0% component does okay so let me comment at 00:47:58.440 --> 00:48:00.829 align:start position:0% component does okay so let me comment at that<00:47:58.619><c> again</c><00:47:58.859><c> comment</c><00:47:59.579><c> that</c><00:47:59.760><c> in</c><00:47:59.940><c> again</c> 00:48:00.829 --> 00:48:00.839 align:start position:0% that again comment that in again 00:48:00.839 --> 00:48:03.829 align:start position:0% that again comment that in again and<00:48:01.680><c> redo</c><00:48:02.099><c> the</c><00:48:02.280><c> experiment</c><00:48:02.700><c> once</c><00:48:03.119><c> more</c><00:48:03.240><c> okay</c> 00:48:03.829 --> 00:48:03.839 align:start position:0% and redo the experiment once more okay 00:48:03.839 --> 00:48:06.290 align:start position:0% and redo the experiment once more okay let<00:48:04.200><c> me</c><00:48:04.380><c> refresh</c><00:48:04.740><c> the</c><00:48:04.920><c> page</c><00:48:05.160><c> I</c><00:48:05.760><c> scroll</c><00:48:06.060><c> down</c> 00:48:06.290 --> 00:48:06.300 align:start position:0% let me refresh the page I scroll down 00:48:06.300 --> 00:48:10.069 align:start position:0% let me refresh the page I scroll down okay<00:48:07.280><c> visit</c><00:48:08.280><c> the</c><00:48:08.520><c> collections</c><00:48:09.119><c> page</c><00:48:09.359><c> and</c><00:48:09.960><c> then</c> 00:48:10.069 --> 00:48:10.079 align:start position:0% okay visit the collections page and then 00:48:10.079 --> 00:48:12.710 align:start position:0% okay visit the collections page and then I<00:48:10.260><c> scroll</c><00:48:10.440><c> back</c><00:48:10.740><c> and</c><00:48:11.280><c> then</c><00:48:11.640><c> I</c><00:48:11.819><c> visit</c><00:48:12.000><c> the</c><00:48:12.300><c> page</c> 00:48:12.710 --> 00:48:12.720 align:start position:0% I scroll back and then I visit the page 00:48:12.720 --> 00:48:15.349 align:start position:0% I scroll back and then I visit the page that<00:48:13.380><c> was</c><00:48:13.560><c> back</c><00:48:13.800><c> in</c><00:48:13.920><c> the</c><00:48:14.099><c> history</c><00:48:14.220><c> you</c><00:48:15.180><c> see</c> 00:48:15.349 --> 00:48:15.359 align:start position:0% that was back in the history you see 00:48:15.359 --> 00:48:17.990 align:start position:0% that was back in the history you see because<00:48:15.960><c> of</c><00:48:16.260><c> that</c><00:48:16.440><c> component</c><00:48:16.980><c> I</c><00:48:17.400><c> have</c><00:48:17.579><c> a</c><00:48:17.819><c> very</c> 00:48:17.990 --> 00:48:18.000 align:start position:0% because of that component I have a very 00:48:18.000 --> 00:48:19.390 align:start position:0% because of that component I have a very nice 00:48:19.390 --> 00:48:19.400 align:start position:0% nice 00:48:19.400 --> 00:48:23.109 align:start position:0% nice visit<00:48:20.400><c> experience</c><00:48:21.060><c> right</c><00:48:21.300><c> so</c><00:48:21.599><c> the</c><00:48:21.780><c> user</c><00:48:22.140><c> can</c> 00:48:23.109 --> 00:48:23.119 align:start position:0% visit experience right so the user can 00:48:23.119 --> 00:48:26.089 align:start position:0% visit experience right so the user can go<00:48:24.119><c> back</c><00:48:24.540><c> and</c><00:48:24.720><c> forth</c><00:48:24.960><c> between</c><00:48:25.200><c> page</c><00:48:25.680><c> and</c><00:48:25.920><c> still</c> 00:48:26.089 --> 00:48:26.099 align:start position:0% go back and forth between page and still 00:48:26.099 --> 00:48:29.150 align:start position:0% go back and forth between page and still keep<00:48:26.400><c> the</c><00:48:26.640><c> context</c><00:48:27.060><c> or</c><00:48:27.480><c> the</c><00:48:27.780><c> the</c><00:48:28.260><c> location</c><00:48:28.619><c> or</c> 00:48:29.150 --> 00:48:29.160 align:start position:0% keep the context or the the location or 00:48:29.160 --> 00:48:32.150 align:start position:0% keep the context or the the location or the<00:48:29.339><c> the</c><00:48:29.460><c> what</c><00:48:30.000><c> he</c><00:48:30.180><c> was</c><00:48:30.619><c> based</c><00:48:31.619><c> in</c><00:48:31.680><c> the</c><00:48:31.859><c> context</c> 00:48:32.150 --> 00:48:32.160 align:start position:0% the the what he was based in the context 00:48:32.160 --> 00:48:34.430 align:start position:0% the the what he was based in the context of<00:48:32.400><c> where</c><00:48:32.700><c> he</c><00:48:32.880><c> was</c><00:48:33.060><c> in</c><00:48:33.660><c> between</c><00:48:33.960><c> page</c> 00:48:34.430 --> 00:48:34.440 align:start position:0% of where he was in between page 00:48:34.440 --> 00:48:36.170 align:start position:0% of where he was in between page navigation<00:48:34.859><c> which</c><00:48:35.280><c> I</c><00:48:35.400><c> think</c><00:48:35.579><c> is</c><00:48:35.700><c> very</c><00:48:35.940><c> good</c> 00:48:36.170 --> 00:48:36.180 align:start position:0% navigation which I think is very good 00:48:36.180 --> 00:48:38.450 align:start position:0% navigation which I think is very good and<00:48:36.359><c> we</c><00:48:36.480><c> get</c><00:48:36.660><c> that</c><00:48:36.780><c> for</c><00:48:36.960><c> free</c><00:48:37.200><c> with</c><00:48:38.040><c> remix</c> 00:48:38.450 --> 00:48:38.460 align:start position:0% and we get that for free with remix 00:48:38.460 --> 00:48:40.849 align:start position:0% and we get that for free with remix which<00:48:38.880><c> is</c><00:48:39.119><c> a</c><00:48:39.300><c> great</c><00:48:39.480><c> great</c><00:48:39.720><c> thing</c><00:48:40.020><c> and</c><00:48:40.740><c> then</c> 00:48:40.849 --> 00:48:40.859 align:start position:0% which is a great great thing and then 00:48:40.859 --> 00:48:42.530 align:start position:0% which is a great great thing and then this<00:48:41.099><c> is</c><00:48:41.220><c> basically</c><00:48:41.520><c> for</c><00:48:41.760><c> developers</c><00:48:42.240><c> the</c> 00:48:42.530 --> 00:48:42.540 align:start position:0% this is basically for developers the 00:48:42.540 --> 00:48:45.650 align:start position:0% this is basically for developers the scripts<00:48:42.960><c> here</c><00:48:43.140><c> is</c><00:48:44.099><c> uh</c><00:48:44.460><c> basically</c><00:48:45.000><c> handling</c> 00:48:45.650 --> 00:48:45.660 align:start position:0% scripts here is uh basically handling 00:48:45.660 --> 00:48:49.130 align:start position:0% scripts here is uh basically handling the<00:48:45.839><c> hydration</c><00:48:46.260><c> of</c><00:48:47.119><c> your</c><00:48:48.119><c> so</c><00:48:48.480><c> if</c><00:48:48.599><c> you're</c><00:48:48.780><c> using</c> 00:48:49.130 --> 00:48:49.140 align:start position:0% the hydration of your so if you're using 00:48:49.140 --> 00:48:52.730 align:start position:0% the hydration of your so if you're using JavaScript<00:48:50.040><c> which</c><00:48:50.460><c> obviously</c><00:48:50.960><c> remix</c><00:48:51.960><c> Works</c> 00:48:52.730 --> 00:48:52.740 align:start position:0% JavaScript which obviously remix Works 00:48:52.740 --> 00:48:55.010 align:start position:0% JavaScript which obviously remix Works goes<00:48:53.280><c> a</c><00:48:53.400><c> long</c><00:48:53.520><c> way</c><00:48:53.700><c> without</c><00:48:54.119><c> using</c><00:48:54.540><c> JavaScript</c> 00:48:55.010 --> 00:48:55.020 align:start position:0% goes a long way without using JavaScript 00:48:55.020 --> 00:48:57.710 align:start position:0% goes a long way without using JavaScript right<00:48:55.440><c> so</c><00:48:55.800><c> that's</c><00:48:56.700><c> one</c><00:48:57.060><c> of</c><00:48:57.180><c> the</c><00:48:57.420><c> biggest</c> 00:48:57.710 --> 00:48:57.720 align:start position:0% right so that's one of the biggest 00:48:57.720 --> 00:49:00.950 align:start position:0% right so that's one of the biggest selling<00:48:58.260><c> points</c><00:48:58.619><c> of</c><00:48:58.980><c> remix</c><00:48:59.760><c> but</c><00:49:00.599><c> obviously</c> 00:49:00.950 --> 00:49:00.960 align:start position:0% selling points of remix but obviously 00:49:00.960 --> 00:49:03.950 align:start position:0% selling points of remix but obviously most<00:49:01.200><c> these</c><00:49:01.680><c> days</c><00:49:02.000><c> most</c><00:49:03.000><c> websites</c><00:49:03.720><c> have</c> 00:49:03.950 --> 00:49:03.960 align:start position:0% most these days most websites have 00:49:03.960 --> 00:49:06.829 align:start position:0% most these days most websites have JavaScript<00:49:04.619><c> sorry</c><00:49:05.520><c> most</c><00:49:05.940><c> users</c><00:49:06.540><c> have</c> 00:49:06.829 --> 00:49:06.839 align:start position:0% JavaScript sorry most users have 00:49:06.839 --> 00:49:09.430 align:start position:0% JavaScript sorry most users have JavaScript<00:49:07.319><c> enabled</c><00:49:07.800><c> on</c><00:49:07.980><c> their</c><00:49:08.099><c> browser</c><00:49:08.460><c> so</c> 00:49:09.430 --> 00:49:09.440 align:start position:0% JavaScript enabled on their browser so 00:49:09.440 --> 00:49:14.150 align:start position:0% JavaScript enabled on their browser so this<00:49:10.440><c> is</c><00:49:10.619><c> for</c><00:49:10.800><c> adding</c><00:49:11.339><c> nice</c><00:49:12.060><c> things</c><00:49:12.359><c> like</c><00:49:12.720><c> uh</c> 00:49:14.150 --> 00:49:14.160 align:start position:0% this is for adding nice things like uh 00:49:14.160 --> 00:49:16.930 align:start position:0% this is for adding nice things like uh um 00:49:16.930 --> 00:49:16.940 align:start position:0% 00:49:16.940 --> 00:49:19.490 align:start position:0% optimistic<00:49:17.940><c> UI</c><00:49:18.480><c> and</c><00:49:18.660><c> stuff</c><00:49:18.900><c> like</c><00:49:19.079><c> that</c><00:49:19.260><c> if</c> 00:49:19.490 --> 00:49:19.500 align:start position:0% optimistic UI and stuff like that if 00:49:19.500 --> 00:49:22.790 align:start position:0% optimistic UI and stuff like that if you're<00:49:19.619><c> using</c><00:49:20.060><c> the</c><00:49:21.060><c> scripts</c><00:49:21.540><c> and</c><00:49:21.900><c> so</c><00:49:22.020><c> on</c><00:49:22.200><c> and</c> 00:49:22.790 --> 00:49:22.800 align:start position:0% you're using the scripts and so on and 00:49:22.800 --> 00:49:25.609 align:start position:0% you're using the scripts and so on and then<00:49:23.099><c> live</c><00:49:23.700><c> reload</c><00:49:24.240><c> is</c><00:49:24.480><c> basically</c><00:49:24.900><c> when</c><00:49:25.440><c> I</c> 00:49:25.609 --> 00:49:25.619 align:start position:0% then live reload is basically when I 00:49:25.619 --> 00:49:27.530 align:start position:0% then live reload is basically when I make<00:49:25.800><c> changes</c><00:49:26.339><c> on</c><00:49:27.000><c> a</c><00:49:27.180><c> development</c> 00:49:27.530 --> 00:49:27.540 align:start position:0% make changes on a development 00:49:27.540 --> 00:49:28.849 align:start position:0% make changes on a development environment 00:49:28.849 --> 00:49:28.859 align:start position:0% environment 00:49:28.859 --> 00:49:32.750 align:start position:0% environment when<00:49:29.640><c> I</c><00:49:30.000><c> change</c><00:49:30.599><c> let's</c><00:49:31.020><c> say</c><00:49:31.260><c> this</c><00:49:31.500><c> file</c><00:49:31.740><c> okay</c><00:49:32.099><c> I</c> 00:49:32.750 --> 00:49:32.760 align:start position:0% when I change let's say this file okay I 00:49:32.760 --> 00:49:35.050 align:start position:0% when I change let's say this file okay I never<00:49:32.940><c> have</c><00:49:33.240><c> to</c><00:49:33.359><c> reload</c><00:49:34.079><c> I</c><00:49:34.319><c> never</c><00:49:34.500><c> have</c><00:49:34.800><c> to</c> 00:49:35.050 --> 00:49:35.060 align:start position:0% never have to reload I never have to 00:49:35.060 --> 00:49:37.670 align:start position:0% never have to reload I never have to reload<00:49:36.060><c> the</c><00:49:36.180><c> page</c><00:49:36.480><c> but</c><00:49:36.900><c> the</c><00:49:37.140><c> changes</c><00:49:37.380><c> to</c><00:49:37.560><c> be</c> 00:49:37.670 --> 00:49:37.680 align:start position:0% reload the page but the changes to be 00:49:37.680 --> 00:49:40.370 align:start position:0% reload the page but the changes to be visible<00:49:37.920><c> to</c><00:49:38.160><c> for</c><00:49:38.400><c> me</c><00:49:38.579><c> to</c><00:49:38.819><c> me</c><00:49:39.000><c> right</c><00:49:39.300><c> it</c><00:49:40.140><c> just</c> 00:49:40.370 --> 00:49:40.380 align:start position:0% visible to for me to me right it just 00:49:40.380 --> 00:49:43.010 align:start position:0% visible to for me to me right it just happens<00:49:40.619><c> when</c><00:49:41.099><c> I</c><00:49:41.280><c> change</c><00:49:41.520><c> something</c><00:49:41.819><c> here</c><00:49:42.300><c> uh</c> 00:49:43.010 --> 00:49:43.020 align:start position:0% happens when I change something here uh 00:49:43.020 --> 00:49:44.870 align:start position:0% happens when I change something here uh in<00:49:43.200><c> the</c><00:49:43.319><c> in</c><00:49:43.500><c> in</c><00:49:43.680><c> anywhere</c><00:49:44.280><c> in</c><00:49:44.460><c> the</c><00:49:44.520><c> code</c><00:49:44.640><c> base</c> 00:49:44.870 --> 00:49:44.880 align:start position:0% in the in in anywhere in the code base 00:49:44.880 --> 00:49:46.970 align:start position:0% in the in in anywhere in the code base basically<00:49:45.420><c> the</c><00:49:46.079><c> changes</c><00:49:46.380><c> are</c><00:49:46.560><c> reflected</c> 00:49:46.970 --> 00:49:46.980 align:start position:0% basically the changes are reflected 00:49:46.980 --> 00:49:50.170 align:start position:0% basically the changes are reflected instantaneously<00:49:47.760><c> or</c><00:49:48.060><c> or</c><00:49:48.900><c> or</c><00:49:49.020><c> or</c> 00:49:50.170 --> 00:49:50.180 align:start position:0% instantaneously or or or or 00:49:50.180 --> 00:49:53.750 align:start position:0% instantaneously or or or or a<00:49:51.180><c> short</c><00:49:51.660><c> amount</c><00:49:51.960><c> of</c><00:49:52.020><c> time</c><00:49:52.200><c> because</c><00:49:53.040><c> of</c><00:49:53.400><c> this</c> 00:49:53.750 --> 00:49:53.760 align:start position:0% a short amount of time because of this 00:49:53.760 --> 00:49:56.770 align:start position:0% a short amount of time because of this live<00:49:54.300><c> reload</c><00:49:54.900><c> component</c><00:49:55.619><c> that</c><00:49:55.920><c> is</c><00:49:56.040><c> added</c><00:49:56.400><c> here</c> 00:49:56.770 --> 00:49:56.780 align:start position:0% live reload component that is added here 00:49:56.780 --> 00:50:00.650 align:start position:0% live reload component that is added here and<00:49:57.780><c> it's</c><00:49:58.200><c> important</c><00:49:58.619><c> to</c><00:49:58.859><c> say</c><00:49:59.040><c> that</c><00:49:59.880><c> um</c><00:49:59.880><c> one</c> 00:50:00.650 --> 00:50:00.660 align:start position:0% and it's important to say that um one 00:50:00.660 --> 00:50:02.329 align:start position:0% and it's important to say that um one thing<00:50:00.780><c> it's</c><00:50:01.140><c> important</c><00:50:01.500><c> to</c><00:50:01.680><c> say</c><00:50:01.859><c> that</c><00:50:02.099><c> the</c> 00:50:02.329 --> 00:50:02.339 align:start position:0% thing it's important to say that the 00:50:02.339 --> 00:50:04.550 align:start position:0% thing it's important to say that the order<00:50:02.520><c> in</c><00:50:03.240><c> which</c><00:50:03.420><c> these</c><00:50:03.839><c> are</c><00:50:03.900><c> added</c><00:50:04.319><c> to</c><00:50:04.440><c> the</c> 00:50:04.550 --> 00:50:04.560 align:start position:0% order in which these are added to the 00:50:04.560 --> 00:50:06.650 align:start position:0% order in which these are added to the page<00:50:04.800><c> models</c><00:50:05.400><c> not</c><00:50:05.760><c> not</c><00:50:05.880><c> all</c><00:50:06.119><c> of</c><00:50:06.240><c> them</c><00:50:06.359><c> and</c><00:50:06.540><c> I</c> 00:50:06.650 --> 00:50:06.660 align:start position:0% page models not not all of them and I 00:50:06.660 --> 00:50:07.430 align:start position:0% page models not not all of them and I think<00:50:06.780><c> I</c><00:50:06.960><c> don't</c><00:50:07.020><c> know</c><00:50:07.079><c> I</c><00:50:07.140><c> don't</c><00:50:07.380><c> remember</c> 00:50:07.430 --> 00:50:07.440 align:start position:0% think I don't know I don't remember 00:50:07.440 --> 00:50:09.530 align:start position:0% think I don't know I don't remember exactly<00:50:07.920><c> for</c><00:50:08.040><c> memory</c><00:50:08.339><c> but</c><00:50:08.579><c> the</c><00:50:08.819><c> meta</c><00:50:09.180><c> or</c><00:50:09.359><c> the</c> 00:50:09.530 --> 00:50:09.540 align:start position:0% exactly for memory but the meta or the 00:50:09.540 --> 00:50:11.930 align:start position:0% exactly for memory but the meta or the score<00:50:09.720><c> restoration</c><00:50:10.460><c> the</c><00:50:11.460><c> order</c><00:50:11.579><c> in</c><00:50:11.819><c> which</c> 00:50:11.930 --> 00:50:11.940 align:start position:0% score restoration the order in which 00:50:11.940 --> 00:50:14.270 align:start position:0% score restoration the order in which they<00:50:12.119><c> are</c><00:50:12.240><c> added</c><00:50:12.480><c> to</c><00:50:12.599><c> the</c><00:50:12.839><c> HTML</c><00:50:13.560><c> page</c><00:50:13.920><c> model</c> 00:50:14.270 --> 00:50:14.280 align:start position:0% they are added to the HTML page model 00:50:14.280 --> 00:50:17.630 align:start position:0% they are added to the HTML page model somewhat<00:50:14.880><c> so</c><00:50:15.420><c> please</c><00:50:16.380><c> check</c><00:50:16.619><c> out</c><00:50:16.800><c> the</c><00:50:17.160><c> I</c><00:50:17.520><c> think</c> 00:50:17.630 --> 00:50:17.640 align:start position:0% somewhat so please check out the I think 00:50:17.640 --> 00:50:21.829 align:start position:0% somewhat so please check out the I think it's<00:50:17.819><c> the</c><00:50:18.060><c> remix</c><00:50:18.359><c> culture</c><00:50:19.339><c> page</c><00:50:20.339><c> here</c><00:50:21.119><c> if</c><00:50:21.660><c> you</c> 00:50:21.829 --> 00:50:21.839 align:start position:0% it's the remix culture page here if you 00:50:21.839 --> 00:50:24.290 align:start position:0% it's the remix culture page here if you come<00:50:21.960><c> here</c><00:50:22.140><c> the</c><00:50:22.680><c> remix</c><00:50:22.920><c> gorgeous</c> 00:50:24.290 --> 00:50:24.300 align:start position:0% come here the remix gorgeous 00:50:24.300 --> 00:50:26.390 align:start position:0% come here the remix gorgeous you'll<00:50:24.960><c> find</c><00:50:25.200><c> out</c><00:50:25.380><c> what</c><00:50:25.680><c> I'm</c><00:50:25.859><c> talking</c><00:50:26.099><c> about</c> 00:50:26.390 --> 00:50:26.400 align:start position:0% you'll find out what I'm talking about 00:50:26.400 --> 00:50:29.450 align:start position:0% you'll find out what I'm talking about the<00:50:27.060><c> gorgeous</c> 00:50:29.450 --> 00:50:29.460 align:start position:0% the gorgeous 00:50:29.460 --> 00:50:32.390 align:start position:0% the gorgeous okay<00:50:29.940><c> good</c><00:50:30.240><c> so</c><00:50:30.780><c> visit</c><00:50:31.079><c> this</c><00:50:31.380><c> page</c><00:50:31.680><c> you</c><00:50:32.160><c> will</c> 00:50:32.390 --> 00:50:32.400 align:start position:0% okay good so visit this page you will 00:50:32.400 --> 00:50:33.170 align:start position:0% okay good so visit this page you will see 00:50:33.170 --> 00:50:33.180 align:start position:0% see 00:50:33.180 --> 00:50:36.410 align:start position:0% see um there's<00:50:33.599><c> some</c><00:50:34.020><c> intricacies</c><00:50:34.980><c> on</c><00:50:35.280><c> how</c><00:50:35.940><c> the</c> 00:50:36.410 --> 00:50:36.420 align:start position:0% um there's some intricacies on how the 00:50:36.420 --> 00:50:38.450 align:start position:0% um there's some intricacies on how the the<00:50:36.780><c> the</c> 00:50:38.450 --> 00:50:38.460 align:start position:0% the the 00:50:38.460 --> 00:50:41.329 align:start position:0% the the um maybe<00:50:39.240><c> not</c><00:50:39.720><c> this</c><00:50:39.900><c> page</c><00:50:40.140><c> but</c><00:50:40.319><c> yeah</c><00:50:40.500><c> you</c><00:50:40.920><c> get</c> 00:50:41.329 --> 00:50:41.339 align:start position:0% um maybe not this page but yeah you get 00:50:41.339 --> 00:50:43.190 align:start position:0% um maybe not this page but yeah you get the<00:50:41.520><c> point</c><00:50:41.700><c> okay</c><00:50:42.119><c> so</c><00:50:42.359><c> it's</c><00:50:42.540><c> important</c><00:50:42.839><c> to</c><00:50:43.079><c> be</c> 00:50:43.190 --> 00:50:43.200 align:start position:0% the point okay so it's important to be 00:50:43.200 --> 00:50:46.490 align:start position:0% the point okay so it's important to be careful<00:50:43.500><c> how</c><00:50:43.800><c> you</c><00:50:44.240><c> you</c><00:50:45.240><c> stack</c><00:50:45.780><c> the</c><00:50:45.960><c> components</c> 00:50:46.490 --> 00:50:46.500 align:start position:0% careful how you you stack the components 00:50:46.500 --> 00:50:49.670 align:start position:0% careful how you you stack the components in<00:50:46.680><c> this</c><00:50:46.859><c> page</c><00:50:47.280><c> okay</c><00:50:47.760><c> so</c><00:50:48.180><c> now</c><00:50:48.839><c> after</c><00:50:49.200><c> with</c><00:50:49.559><c> that</c> 00:50:49.670 --> 00:50:49.680 align:start position:0% in this page okay so now after with that 00:50:49.680 --> 00:50:50.809 align:start position:0% in this page okay so now after with that out<00:50:49.859><c> of</c><00:50:49.920><c> the</c><00:50:50.040><c> way</c> 00:50:50.809 --> 00:50:50.819 align:start position:0% out of the way 00:50:50.819 --> 00:50:53.990 align:start position:0% out of the way the<00:50:51.300><c> next</c><00:50:51.540><c> stop</c><00:50:51.720><c> for</c><00:50:52.079><c> us</c><00:50:52.319><c> is</c><00:50:52.559><c> the</c><00:50:52.800><c> entry</c><00:50:53.160><c> server</c> 00:50:53.990 --> 00:50:54.000 align:start position:0% the next stop for us is the entry server 00:50:54.000 --> 00:50:55.910 align:start position:0% the next stop for us is the entry server okay<00:50:54.420><c> so</c><00:50:54.780><c> TX</c> 00:50:55.910 --> 00:50:55.920 align:start position:0% okay so TX 00:50:55.920 --> 00:50:58.670 align:start position:0% okay so TX all<00:50:56.460><c> right</c><00:50:56.640><c> so</c><00:50:56.940><c> this</c><00:50:57.180><c> one</c><00:50:57.359><c> basically</c><00:50:57.780><c> is</c><00:50:58.260><c> the</c> 00:50:58.670 --> 00:50:58.680 align:start position:0% all right so this one basically is the 00:50:58.680 --> 00:51:00.829 align:start position:0% all right so this one basically is the middleware<00:50:59.040><c> it's</c><00:50:59.400><c> remixes</c><00:50:59.940><c> middleware</c><00:51:00.480><c> okay</c> 00:51:00.829 --> 00:51:00.839 align:start position:0% middleware it's remixes middleware okay 00:51:00.839 --> 00:51:02.890 align:start position:0% middleware it's remixes middleware okay so<00:51:01.440><c> if</c><00:51:01.559><c> you're</c><00:51:01.740><c> doing</c><00:51:01.920><c> things</c><00:51:02.220><c> like</c> 00:51:02.890 --> 00:51:02.900 align:start position:0% so if you're doing things like 00:51:02.900 --> 00:51:05.809 align:start position:0% so if you're doing things like internationalization<00:51:04.400><c> uh</c><00:51:05.400><c> if</c><00:51:05.520><c> you're</c><00:51:05.700><c> doing</c> 00:51:05.809 --> 00:51:05.819 align:start position:0% internationalization uh if you're doing 00:51:05.819 --> 00:51:08.089 align:start position:0% internationalization uh if you're doing things<00:51:06.000><c> like</c><00:51:06.180><c> internationalization</c> 00:51:08.089 --> 00:51:08.099 align:start position:0% things like internationalization 00:51:08.099 --> 00:51:12.530 align:start position:0% things like internationalization um<00:51:08.660><c> uh</c><00:51:09.660><c> a</c><00:51:09.960><c> b</c><00:51:10.140><c> testing</c><00:51:10.740><c> and</c><00:51:11.640><c> stuff</c><00:51:12.119><c> like</c><00:51:12.359><c> that</c> 00:51:12.530 --> 00:51:12.540 align:start position:0% um uh a b testing and stuff like that 00:51:12.540 --> 00:51:15.109 align:start position:0% um uh a b testing and stuff like that this<00:51:13.500><c> is</c><00:51:13.619><c> where</c><00:51:13.859><c> you</c><00:51:14.040><c> want</c><00:51:14.160><c> to</c><00:51:14.280><c> play</c><00:51:14.400><c> you</c><00:51:14.819><c> want</c> 00:51:15.109 --> 00:51:15.119 align:start position:0% this is where you want to play you want 00:51:15.119 --> 00:51:16.670 align:start position:0% this is where you want to play you want to<00:51:15.180><c> do</c><00:51:15.300><c> this</c><00:51:15.480><c> kind</c><00:51:15.660><c> of</c><00:51:15.720><c> things</c><00:51:15.900><c> right</c><00:51:16.200><c> so</c><00:51:16.500><c> you</c> 00:51:16.670 --> 00:51:16.680 align:start position:0% to do this kind of things right so you 00:51:16.680 --> 00:51:19.370 align:start position:0% to do this kind of things right so you want<00:51:16.859><c> to</c><00:51:16.980><c> get</c><00:51:17.099><c> because</c><00:51:17.400><c> every</c><00:51:18.000><c> request</c><00:51:18.540><c> that</c> 00:51:19.370 --> 00:51:19.380 align:start position:0% want to get because every request that 00:51:19.380 --> 00:51:20.569 align:start position:0% want to get because every request that gets<00:51:19.680><c> sent</c> 00:51:20.569 --> 00:51:20.579 align:start position:0% gets sent 00:51:20.579 --> 00:51:22.329 align:start position:0% gets sent to 00:51:22.329 --> 00:51:22.339 align:start position:0% to 00:51:22.339 --> 00:51:25.609 align:start position:0% to every<00:51:23.339><c> route</c><00:51:23.579><c> that</c><00:51:23.880><c> is</c><00:51:24.000><c> visited</c><00:51:24.359><c> by</c><00:51:24.480><c> the</c><00:51:24.720><c> user</c> 00:51:25.609 --> 00:51:25.619 align:start position:0% every route that is visited by the user 00:51:25.619 --> 00:51:29.569 align:start position:0% every route that is visited by the user first<00:51:26.339><c> executes</c><00:51:27.180><c> this</c><00:51:27.720><c> middleware</c><00:51:28.260><c> okay</c><00:51:28.680><c> and</c> 00:51:29.569 --> 00:51:29.579 align:start position:0% first executes this middleware okay and 00:51:29.579 --> 00:51:31.370 align:start position:0% first executes this middleware okay and this<00:51:29.760><c> is</c><00:51:29.940><c> a</c><00:51:30.059><c> server</c><00:51:30.420><c> Midwest</c><00:51:30.780><c> it's</c><00:51:31.140><c> going</c><00:51:31.319><c> to</c> 00:51:31.370 --> 00:51:31.380 align:start position:0% this is a server Midwest it's going to 00:51:31.380 --> 00:51:34.190 align:start position:0% this is a server Midwest it's going to run<00:51:31.559><c> on</c><00:51:31.740><c> the</c><00:51:32.040><c> server</c><00:51:32.400><c> and</c><00:51:33.059><c> it</c><00:51:33.240><c> has</c><00:51:33.480><c> the</c><00:51:33.780><c> context</c> 00:51:34.190 --> 00:51:34.200 align:start position:0% run on the server and it has the context 00:51:34.200 --> 00:51:37.069 align:start position:0% run on the server and it has the context it<00:51:34.559><c> has</c><00:51:34.740><c> the</c><00:51:34.920><c> request</c><00:51:35.280><c> it</c><00:51:35.819><c> has</c><00:51:36.000><c> the</c><00:51:36.359><c> response</c> 00:51:37.069 --> 00:51:37.079 align:start position:0% it has the request it has the response 00:51:37.079 --> 00:51:39.109 align:start position:0% it has the request it has the response status<00:51:37.260><c> code</c><00:51:37.680><c> it</c><00:51:37.980><c> has</c><00:51:38.160><c> a</c><00:51:38.400><c> response</c><00:51:38.760><c> headers</c> 00:51:39.109 --> 00:51:39.119 align:start position:0% status code it has a response headers 00:51:39.119 --> 00:51:41.150 align:start position:0% status code it has a response headers but<00:51:39.540><c> these</c><00:51:39.780><c> are</c><00:51:39.839><c> just</c><00:51:40.020><c> like</c> 00:51:41.150 --> 00:51:41.160 align:start position:0% but these are just like 00:51:41.160 --> 00:51:43.190 align:start position:0% but these are just like things<00:51:41.520><c> that</c><00:51:41.819><c> you</c><00:51:41.940><c> can</c><00:51:42.059><c> override</c><00:51:42.540><c> here</c><00:51:42.839><c> as</c><00:51:43.079><c> you</c> 00:51:43.190 --> 00:51:43.200 align:start position:0% things that you can override here as you 00:51:43.200 --> 00:51:45.589 align:start position:0% things that you can override here as you can<00:51:43.319><c> see</c><00:51:43.440><c> it's</c><00:51:43.680><c> get</c><00:51:43.980><c> over</c><00:51:44.359><c> overwritten</c><00:51:45.359><c> here</c> 00:51:45.589 --> 00:51:45.599 align:start position:0% can see it's get over overwritten here 00:51:45.599 --> 00:51:47.630 align:start position:0% can see it's get over overwritten here like<00:51:46.319><c> this</c><00:51:46.500><c> and</c><00:51:46.680><c> then</c><00:51:46.800><c> you</c><00:51:46.980><c> create</c><00:51:47.220><c> a</c><00:51:47.460><c> body</c> 00:51:47.630 --> 00:51:47.640 align:start position:0% like this and then you create a body 00:51:47.640 --> 00:51:53.630 align:start position:0% like this and then you create a body okay<00:51:48.680><c> so</c><00:51:49.680><c> you</c><00:51:50.099><c> can</c><00:51:50.220><c> see</c><00:51:50.460><c> if</c><00:51:50.880><c> I</c><00:51:51.119><c> return</c><00:51:51.980><c> if</c><00:51:52.980><c> I</c><00:51:53.160><c> for</c> 00:51:53.630 --> 00:51:53.640 align:start position:0% okay so you can see if I return if I for 00:51:53.640 --> 00:51:55.490 align:start position:0% okay so you can see if I return if I for example<00:51:53.880><c> here</c><00:51:54.180><c> you</c><00:51:54.420><c> see</c><00:51:54.540><c> we</c><00:51:54.780><c> are</c><00:51:54.960><c> streaming</c> 00:51:55.490 --> 00:51:55.500 align:start position:0% example here you see we are streaming 00:51:55.500 --> 00:51:59.150 align:start position:0% example here you see we are streaming the<00:51:56.040><c> uh</c><00:51:56.220><c> the</c><00:51:56.579><c> return</c><00:51:56.700><c> body</c><00:51:57.240><c> okay</c><00:51:58.140><c> so</c><00:51:58.800><c> instead</c> 00:51:59.150 --> 00:51:59.160 align:start position:0% the uh the return body okay so instead 00:51:59.160 --> 00:52:01.609 align:start position:0% the uh the return body okay so instead of<00:51:59.280><c> doing</c><00:51:59.460><c> that</c><00:51:59.700><c> if</c><00:51:59.940><c> I</c><00:52:00.119><c> do</c><00:52:00.300><c> cons</c> 00:52:01.609 --> 00:52:01.619 align:start position:0% of doing that if I do cons 00:52:01.619 --> 00:52:06.230 align:start position:0% of doing that if I do cons dot<00:52:02.460><c> if</c><00:52:03.119><c> I</c><00:52:03.380><c> delete</c><00:52:04.380><c> let's</c><00:52:05.099><c> say</c><00:52:05.339><c> I</c><00:52:05.579><c> do</c><00:52:05.700><c> let</c><00:52:05.940><c> body</c> 00:52:06.230 --> 00:52:06.240 align:start position:0% dot if I delete let's say I do let body 00:52:06.240 --> 00:52:08.690 align:start position:0% dot if I delete let's say I do let body equals<00:52:06.780><c> to</c><00:52:06.839><c> this</c><00:52:07.140><c> okay</c><00:52:07.380><c> you</c><00:52:08.280><c> can</c><00:52:08.460><c> see</c><00:52:08.579><c> it's</c> 00:52:08.690 --> 00:52:08.700 align:start position:0% equals to this okay you can see it's 00:52:08.700 --> 00:52:11.870 align:start position:0% equals to this okay you can see it's returning<00:52:09.240><c> that</c><00:52:09.720><c> and</c><00:52:10.020><c> then</c><00:52:10.200><c> I</c><00:52:10.380><c> do</c><00:52:10.619><c> net</c><00:52:11.339><c> I</c><00:52:11.700><c> do</c> 00:52:11.870 --> 00:52:11.880 align:start position:0% returning that and then I do net I do 00:52:11.880 --> 00:52:12.650 align:start position:0% returning that and then I do net I do body 00:52:12.650 --> 00:52:12.660 align:start position:0% body 00:52:12.660 --> 00:52:14.630 align:start position:0% body because<00:52:13.200><c> I</c><00:52:13.619><c> just</c><00:52:13.740><c> want</c><00:52:13.859><c> to</c><00:52:14.040><c> override</c><00:52:14.400><c> that</c> 00:52:14.630 --> 00:52:14.640 align:start position:0% because I just want to override that 00:52:14.640 --> 00:52:17.329 align:start position:0% because I just want to override that okay<00:52:14.880><c> body</c><00:52:15.180><c> equals</c><00:52:15.780><c> nothing</c><00:52:15.960><c> once</c><00:52:16.500><c> again</c><00:52:16.619><c> and</c> 00:52:17.329 --> 00:52:17.339 align:start position:0% okay body equals nothing once again and 00:52:17.339 --> 00:52:19.190 align:start position:0% okay body equals nothing once again and you<00:52:17.520><c> see</c><00:52:17.760><c> that</c><00:52:18.000><c> we</c><00:52:18.240><c> have</c><00:52:18.420><c> nothing</c><00:52:18.660><c> pretty</c><00:52:19.079><c> much</c> 00:52:19.190 --> 00:52:19.200 align:start position:0% you see that we have nothing pretty much 00:52:19.200 --> 00:52:21.530 align:start position:0% you see that we have nothing pretty much in<00:52:19.380><c> every</c><00:52:19.559><c> page</c><00:52:19.859><c> now</c><00:52:20.160><c> so</c><00:52:20.520><c> let</c><00:52:20.640><c> me</c><00:52:20.819><c> do</c><00:52:21.000><c> this</c><00:52:21.180><c> like</c> 00:52:21.530 --> 00:52:21.540 align:start position:0% in every page now so let me do this like 00:52:21.540 --> 00:52:23.809 align:start position:0% in every page now so let me do this like this<00:52:21.720><c> okay</c> 00:52:23.809 --> 00:52:23.819 align:start position:0% this okay 00:52:23.819 --> 00:52:24.950 align:start position:0% this okay and<00:52:24.180><c> then</c> 00:52:24.950 --> 00:52:24.960 align:start position:0% and then 00:52:24.960 --> 00:52:26.390 align:start position:0% and then you<00:52:25.079><c> know</c><00:52:25.260><c> coming</c><00:52:25.440><c> this</c><00:52:25.740><c> one</c><00:52:25.859><c> out</c><00:52:25.980><c> of</c><00:52:26.160><c> it</c> 00:52:26.390 --> 00:52:26.400 align:start position:0% you know coming this one out of it 00:52:26.400 --> 00:52:28.490 align:start position:0% you know coming this one out of it doesn't<00:52:26.460><c> get</c><00:52:26.700><c> typescript</c><00:52:27.119><c> error</c><00:52:27.540><c> okay</c> 00:52:28.490 --> 00:52:28.500 align:start position:0% doesn't get typescript error okay 00:52:28.500 --> 00:52:30.890 align:start position:0% doesn't get typescript error okay when<00:52:28.859><c> I</c><00:52:29.040><c> go</c><00:52:29.160><c> back</c><00:52:29.339><c> to</c><00:52:29.520><c> my</c><00:52:29.700><c> page</c><00:52:29.880><c> and</c><00:52:30.359><c> I</c><00:52:30.480><c> refresh</c> 00:52:30.890 --> 00:52:30.900 align:start position:0% when I go back to my page and I refresh 00:52:30.900 --> 00:52:34.069 align:start position:0% when I go back to my page and I refresh you<00:52:31.500><c> see</c><00:52:31.619><c> we</c><00:52:31.800><c> have</c><00:52:31.980><c> nothing</c><00:52:32.220><c> okay</c> 00:52:34.069 --> 00:52:34.079 align:start position:0% you see we have nothing okay 00:52:34.079 --> 00:52:36.530 align:start position:0% you see we have nothing okay nothing<00:52:34.619><c> once</c><00:52:35.160><c> more</c><00:52:35.339><c> because</c><00:52:35.760><c> this</c><00:52:36.300><c> is</c><00:52:36.420><c> a</c> 00:52:36.530 --> 00:52:36.540 align:start position:0% nothing once more because this is a 00:52:36.540 --> 00:52:38.089 align:start position:0% nothing once more because this is a middleware<00:52:36.900><c> and</c><00:52:37.140><c> this</c><00:52:37.260><c> is</c><00:52:37.440><c> not</c><00:52:37.559><c> just</c><00:52:37.800><c> specific</c> 00:52:38.089 --> 00:52:38.099 align:start position:0% middleware and this is not just specific 00:52:38.099 --> 00:52:40.150 align:start position:0% middleware and this is not just specific to<00:52:38.339><c> the</c><00:52:38.520><c> collections</c><00:52:39.000><c> page</c><00:52:39.240><c> it's</c><00:52:39.420><c> specific</c><00:52:39.720><c> is</c> 00:52:40.150 --> 00:52:40.160 align:start position:0% to the collections page it's specific is 00:52:40.160 --> 00:52:42.710 align:start position:0% to the collections page it's specific is everything<00:52:41.160><c> every</c><00:52:41.640><c> page</c><00:52:41.940><c> will</c><00:52:42.180><c> return</c><00:52:42.359><c> this</c> 00:52:42.710 --> 00:52:42.720 align:start position:0% everything every page will return this 00:52:42.720 --> 00:52:44.510 align:start position:0% everything every page will return this because<00:52:43.260><c> this</c><00:52:43.500><c> is</c><00:52:43.619><c> the</c><00:52:43.740><c> middleware</c><00:52:44.099><c> okay</c> 00:52:44.510 --> 00:52:44.520 align:start position:0% because this is the middleware okay 00:52:44.520 --> 00:52:47.569 align:start position:0% because this is the middleware okay nothing<00:52:44.940><c> so</c><00:52:45.780><c> that</c><00:52:46.020><c> tells</c><00:52:46.380><c> you</c><00:52:46.500><c> if</c><00:52:47.160><c> you</c><00:52:47.280><c> want</c><00:52:47.400><c> to</c> 00:52:47.569 --> 00:52:47.579 align:start position:0% nothing so that tells you if you want to 00:52:47.579 --> 00:52:50.390 align:start position:0% nothing so that tells you if you want to do<00:52:47.700><c> things</c><00:52:47.940><c> like</c><00:52:48.180><c> like</c><00:52:48.480><c> I</c><00:52:48.660><c> said</c><00:52:48.780><c> earlier</c><00:52:49.680><c> heavy</c> 00:52:50.390 --> 00:52:50.400 align:start position:0% do things like like I said earlier heavy 00:52:50.400 --> 00:52:53.030 align:start position:0% do things like like I said earlier heavy personalization<00:52:51.240><c> and</c><00:52:51.780><c> stuff</c><00:52:52.020><c> like</c><00:52:52.140><c> that</c><00:52:52.380><c> you</c> 00:52:53.030 --> 00:52:53.040 align:start position:0% personalization and stuff like that you 00:52:53.040 --> 00:52:54.770 align:start position:0% personalization and stuff like that you have<00:52:53.160><c> the</c><00:52:53.339><c> context</c><00:52:53.700><c> of</c><00:52:53.880><c> a</c><00:52:54.000><c> request</c><00:52:54.300><c> and</c><00:52:54.599><c> from</c> 00:52:54.770 --> 00:52:54.780 align:start position:0% have the context of a request and from 00:52:54.780 --> 00:52:57.410 align:start position:0% have the context of a request and from the<00:52:54.900><c> context</c><00:52:55.260><c> of</c><00:52:55.380><c> request</c><00:52:55.740><c> you</c><00:52:56.280><c> can</c><00:52:56.400><c> get</c><00:52:56.640><c> which</c> 00:52:57.410 --> 00:52:57.420 align:start position:0% the context of request you can get which 00:52:57.420 --> 00:52:59.750 align:start position:0% the context of request you can get which user<00:52:57.839><c> it</c><00:52:58.020><c> is</c><00:52:58.200><c> okay</c><00:52:58.559><c> you</c><00:52:59.040><c> can</c><00:52:59.160><c> you</c><00:52:59.400><c> can</c><00:52:59.520><c> have</c> 00:52:59.750 --> 00:52:59.760 align:start position:0% user it is okay you can you can have 00:52:59.760 --> 00:53:02.089 align:start position:0% user it is okay you can you can have like<00:53:00.059><c> a</c><00:53:00.359><c> because</c><00:53:00.780><c> the</c><00:53:01.140><c> request</c><00:53:01.440><c> carries</c><00:53:01.920><c> a</c> 00:53:02.089 --> 00:53:02.099 align:start position:0% like a because the request carries a 00:53:02.099 --> 00:53:04.609 align:start position:0% like a because the request carries a token<00:53:02.460><c> that</c><00:53:02.880><c> is</c><00:53:03.059><c> associated</c><00:53:03.540><c> with</c><00:53:03.900><c> the</c><00:53:04.079><c> user</c> 00:53:04.609 --> 00:53:04.619 align:start position:0% token that is associated with the user 00:53:04.619 --> 00:53:07.790 align:start position:0% token that is associated with the user resistant<00:53:05.099><c> page</c><00:53:05.339><c> at</c><00:53:06.180><c> any</c><00:53:06.359><c> given</c><00:53:06.720><c> time</c><00:53:06.960><c> it</c> 00:53:07.790 --> 00:53:07.800 align:start position:0% resistant page at any given time it 00:53:07.800 --> 00:53:10.130 align:start position:0% resistant page at any given time it comes<00:53:08.160><c> things</c><00:53:08.520><c> like</c><00:53:08.819><c> the</c><00:53:09.480><c> user's</c><00:53:09.960><c> location</c> 00:53:10.130 --> 00:53:10.140 align:start position:0% comes things like the user's location 00:53:10.140 --> 00:53:12.530 align:start position:0% comes things like the user's location and<00:53:10.800><c> stuff</c><00:53:11.040><c> like</c><00:53:11.220><c> that</c><00:53:11.460><c> so</c><00:53:11.760><c> you</c><00:53:12.000><c> can</c><00:53:12.059><c> say</c><00:53:12.300><c> okay</c> 00:53:12.530 --> 00:53:12.540 align:start position:0% and stuff like that so you can say okay 00:53:12.540 --> 00:53:15.230 align:start position:0% and stuff like that so you can say okay if<00:53:13.200><c> the</c><00:53:13.500><c> user</c><00:53:13.800><c> is</c><00:53:13.980><c> visiting</c><00:53:14.460><c> the</c><00:53:14.579><c> page</c><00:53:14.819><c> from</c> 00:53:15.230 --> 00:53:15.240 align:start position:0% if the user is visiting the page from 00:53:15.240 --> 00:53:21.430 align:start position:0% if the user is visiting the page from the<00:53:15.599><c> US</c><00:53:15.780><c> oh</c><00:53:16.380><c> I</c><00:53:16.619><c> need</c><00:53:16.859><c> to</c><00:53:16.980><c> remove</c><00:53:17.520><c> that</c> 00:53:21.430 --> 00:53:21.440 align:start position:0% 00:53:21.440 --> 00:53:24.589 align:start position:0% okay<00:53:22.440><c> so</c><00:53:22.980><c> if</c><00:53:23.220><c> the</c><00:53:23.339><c> user</c><00:53:23.579><c> is</c><00:53:23.640><c> visiting</c><00:53:24.119><c> the</c><00:53:24.300><c> page</c> 00:53:24.589 --> 00:53:24.599 align:start position:0% okay so if the user is visiting the page 00:53:24.599 --> 00:53:27.950 align:start position:0% okay so if the user is visiting the page the<00:53:25.260><c> the</c><00:53:25.559><c> the</c><00:53:25.619><c> the</c><00:53:25.980><c> website</c><00:53:26.819><c> from</c><00:53:27.119><c> the</c><00:53:27.300><c> US</c><00:53:27.420><c> do</c> 00:53:27.950 --> 00:53:27.960 align:start position:0% the the the the website from the US do 00:53:27.960 --> 00:53:31.010 align:start position:0% the the the the website from the US do this<00:53:28.140><c> if</c><00:53:28.440><c> the</c><00:53:28.559><c> user</c><00:53:28.800><c> is</c><00:53:28.920><c> visiting</c><00:53:29.339><c> the</c><00:53:29.579><c> the</c><00:53:30.020><c> the</c> 00:53:31.010 --> 00:53:31.020 align:start position:0% this if the user is visiting the the the 00:53:31.020 --> 00:53:31.870 align:start position:0% this if the user is visiting the the the the 00:53:31.870 --> 00:53:31.880 align:start position:0% the 00:53:31.880 --> 00:53:35.809 align:start position:0% the website<00:53:32.880><c> from</c><00:53:33.119><c> in</c><00:53:34.020><c> the</c><00:53:34.200><c> UK</c><00:53:34.440><c> do</c><00:53:34.740><c> this</c><00:53:34.920><c> so</c><00:53:35.280><c> in</c> 00:53:35.809 --> 00:53:35.819 align:start position:0% website from in the UK do this so in 00:53:35.819 --> 00:53:38.030 align:start position:0% website from in the UK do this so in this<00:53:35.940><c> case</c><00:53:36.059><c> for</c><00:53:36.359><c> example</c><00:53:36.660><c> let's</c><00:53:37.020><c> console</c><00:53:37.800><c> log</c> 00:53:38.030 --> 00:53:38.040 align:start position:0% this case for example let's console log 00:53:38.040 --> 00:53:43.190 align:start position:0% this case for example let's console log what<00:53:38.400><c> is</c><00:53:38.640><c> in</c><00:53:38.880><c> the</c><00:53:39.059><c> request</c><00:53:39.420><c> log</c> 00:53:43.190 --> 00:53:43.200 align:start position:0% 00:53:43.200 --> 00:53:46.390 align:start position:0% request<00:53:43.740><c> and</c><00:53:44.579><c> then</c><00:53:44.760><c> I'll</c><00:53:44.940><c> go</c><00:53:45.119><c> adjusting</c> 00:53:46.390 --> 00:53:46.400 align:start position:0% request and then I'll go adjusting 00:53:46.400 --> 00:53:47.990 align:start position:0% request and then I'll go adjusting 25. 00:53:47.990 --> 00:53:48.000 align:start position:0% 25. 00:53:48.000 --> 00:53:49.490 align:start position:0% 25. I<00:53:48.300><c> don't</c><00:53:48.480><c> know</c><00:53:48.599><c> if</c><00:53:48.720><c> this</c><00:53:48.839><c> will</c><00:53:49.020><c> work</c><00:53:49.140><c> but</c><00:53:49.319><c> let's</c> 00:53:49.490 --> 00:53:49.500 align:start position:0% I don't know if this will work but let's 00:53:49.500 --> 00:53:50.390 align:start position:0% I don't know if this will work but let's try 00:53:50.390 --> 00:53:50.400 align:start position:0% try 00:53:50.400 --> 00:53:53.270 align:start position:0% try okay<00:53:50.819><c> so</c><00:53:51.180><c> let's</c><00:53:51.359><c> cancel</c><00:53:51.839><c> log</c><00:53:52.200><c> whatever</c><00:53:52.859><c> it</c><00:53:53.160><c> is</c> 00:53:53.270 --> 00:53:53.280 align:start position:0% okay so let's cancel log whatever it is 00:53:53.280 --> 00:53:55.970 align:start position:0% okay so let's cancel log whatever it is that<00:53:53.579><c> we</c><00:53:53.700><c> have</c><00:53:53.940><c> in</c><00:53:54.119><c> the</c><00:53:54.359><c> in</c><00:53:54.839><c> the</c><00:53:55.079><c> request</c><00:53:55.680><c> that</c> 00:53:55.970 --> 00:53:55.980 align:start position:0% that we have in the in the request that 00:53:55.980 --> 00:53:57.710 align:start position:0% that we have in the in the request that they<00:53:56.160><c> send</c><00:53:56.339><c> and</c><00:53:57.000><c> you'll</c><00:53:57.240><c> see</c><00:53:57.359><c> what</c><00:53:57.540><c> is</c> 00:53:57.710 --> 00:53:57.720 align:start position:0% they send and you'll see what is 00:53:57.720 --> 00:54:00.290 align:start position:0% they send and you'll see what is available<00:53:57.900><c> for</c><00:53:58.380><c> us</c><00:53:58.500><c> to</c><00:53:58.680><c> play</c><00:53:58.859><c> with</c><00:53:59.099><c> when</c><00:53:59.940><c> we</c><00:54:00.119><c> do</c> 00:54:00.290 --> 00:54:00.300 align:start position:0% available for us to play with when we do 00:54:00.300 --> 00:54:02.150 align:start position:0% available for us to play with when we do this<00:54:00.540><c> uh</c> 00:54:02.150 --> 00:54:02.160 align:start position:0% this uh 00:54:02.160 --> 00:54:03.950 align:start position:0% this uh okay<00:54:02.579><c> let's</c><00:54:03.180><c> see</c> 00:54:03.950 --> 00:54:03.960 align:start position:0% okay let's see 00:54:03.960 --> 00:54:06.770 align:start position:0% okay let's see I<00:54:04.260><c> don't</c><00:54:04.380><c> think</c><00:54:04.619><c> we</c><00:54:04.740><c> have</c><00:54:04.920><c> much</c><00:54:05.220><c> uh</c><00:54:06.059><c> console</c> 00:54:06.770 --> 00:54:06.780 align:start position:0% I don't think we have much uh console 00:54:06.780 --> 00:54:08.870 align:start position:0% I don't think we have much uh console log<00:54:06.960><c> request</c><00:54:07.619><c> let</c><00:54:08.040><c> me</c><00:54:08.400><c> leave</c><00:54:08.460><c> it</c><00:54:08.640><c> again</c> 00:54:08.870 --> 00:54:08.880 align:start position:0% log request let me leave it again 00:54:08.880 --> 00:54:10.970 align:start position:0% log request let me leave it again [Music] 00:54:10.970 --> 00:54:10.980 align:start position:0% [Music] 00:54:10.980 --> 00:54:14.089 align:start position:0% [Music] all<00:54:11.520><c> right</c><00:54:11.579><c> I</c><00:54:12.300><c> don't</c><00:54:12.480><c> think</c><00:54:12.599><c> we</c><00:54:12.780><c> have</c><00:54:13.020><c> much</c><00:54:13.380><c> in</c> 00:54:14.089 --> 00:54:14.099 align:start position:0% all right I don't think we have much in 00:54:14.099 --> 00:54:15.829 align:start position:0% all right I don't think we have much in this<00:54:14.700><c> um</c> 00:54:15.829 --> 00:54:15.839 align:start position:0% this um 00:54:15.839 --> 00:54:18.109 align:start position:0% this um yeah<00:54:16.380><c> I</c><00:54:16.859><c> think</c><00:54:16.980><c> it's</c><00:54:17.160><c> yeah</c><00:54:17.460><c> this</c><00:54:17.700><c> is</c><00:54:17.819><c> not</c><00:54:17.880><c> a</c> 00:54:18.109 --> 00:54:18.119 align:start position:0% yeah I think it's yeah this is not a 00:54:18.119 --> 00:54:21.170 align:start position:0% yeah I think it's yeah this is not a student<00:54:18.180><c> I</c><00:54:18.480><c> need</c><00:54:18.599><c> to</c><00:54:18.720><c> get</c><00:54:18.900><c> like</c> 00:54:21.170 --> 00:54:21.180 align:start position:0% student I need to get like 00:54:21.180 --> 00:54:24.470 align:start position:0% student I need to get like oh<00:54:21.420><c> God</c><00:54:21.720><c> and</c><00:54:22.020><c> how</c><00:54:22.200><c> you</c><00:54:22.380><c> get</c><00:54:23.280><c> to</c><00:54:23.460><c> that</c><00:54:23.700><c> let</c><00:54:24.420><c> me</c> 00:54:24.470 --> 00:54:24.480 align:start position:0% oh God and how you get to that let me 00:54:24.480 --> 00:54:26.329 align:start position:0% oh God and how you get to that let me get<00:54:24.660><c> the</c><00:54:24.780><c> body</c><00:54:24.960><c> of</c><00:54:25.260><c> the</c><00:54:25.440><c> request</c><00:54:25.740><c> let</c><00:54:26.099><c> me</c><00:54:26.220><c> try</c> 00:54:26.329 --> 00:54:26.339 align:start position:0% get the body of the request let me try 00:54:26.339 --> 00:54:28.730 align:start position:0% get the body of the request let me try that 00:54:28.730 --> 00:54:28.740 align:start position:0% 00:54:28.740 --> 00:54:31.190 align:start position:0% okay<00:54:29.700><c> refresh</c><00:54:30.660><c> this</c> 00:54:31.190 --> 00:54:31.200 align:start position:0% okay refresh this 00:54:31.200 --> 00:54:33.230 align:start position:0% okay refresh this [Music] 00:54:33.230 --> 00:54:33.240 align:start position:0% [Music] 00:54:33.240 --> 00:54:34.910 align:start position:0% [Music] yeah<00:54:33.720><c> I've</c><00:54:33.839><c> forgotten</c><00:54:34.200><c> how</c><00:54:34.440><c> you</c><00:54:34.559><c> yeah</c> 00:54:34.910 --> 00:54:34.920 align:start position:0% yeah I've forgotten how you yeah 00:54:34.920 --> 00:54:37.549 align:start position:0% yeah I've forgotten how you yeah basically<00:54:35.640><c> how</c><00:54:35.819><c> you</c><00:54:36.059><c> can</c><00:54:36.300><c> uh</c><00:54:36.839><c> get</c><00:54:37.200><c> this</c><00:54:37.380><c> one</c> 00:54:37.549 --> 00:54:37.559 align:start position:0% basically how you can uh get this one 00:54:37.559 --> 00:54:39.290 align:start position:0% basically how you can uh get this one but<00:54:37.740><c> you</c><00:54:37.859><c> get</c><00:54:37.980><c> the</c><00:54:38.099><c> point</c><00:54:38.280><c> I</c><00:54:38.520><c> was</c><00:54:38.819><c> I</c><00:54:39.059><c> was</c><00:54:39.180><c> trying</c> 00:54:39.290 --> 00:54:39.300 align:start position:0% but you get the point I was I was trying 00:54:39.300 --> 00:54:41.450 align:start position:0% but you get the point I was I was trying to<00:54:39.540><c> to</c><00:54:39.960><c> console</c><00:54:40.440><c> log</c><00:54:40.680><c> I've</c><00:54:40.920><c> forgotten</c><00:54:41.160><c> how</c><00:54:41.339><c> you</c> 00:54:41.450 --> 00:54:41.460 align:start position:0% to to console log I've forgotten how you 00:54:41.460 --> 00:54:43.309 align:start position:0% to to console log I've forgotten how you do<00:54:41.579><c> that</c><00:54:41.700><c> but</c><00:54:41.940><c> let's</c><00:54:42.180><c> try</c><00:54:42.420><c> to</c><00:54:42.599><c> construct</c><00:54:42.960><c> some</c> 00:54:43.309 --> 00:54:43.319 align:start position:0% do that but let's try to construct some 00:54:43.319 --> 00:54:44.329 align:start position:0% do that but let's try to construct some of<00:54:43.440><c> the</c><00:54:43.500><c> things</c><00:54:43.619><c> that</c><00:54:43.800><c> we</c><00:54:43.920><c> have</c><00:54:44.099><c> in</c><00:54:44.220><c> the</c> 00:54:44.329 --> 00:54:44.339 align:start position:0% of the things that we have in the 00:54:44.339 --> 00:54:46.250 align:start position:0% of the things that we have in the requests<00:54:44.700><c> here</c><00:54:44.880><c> so</c><00:54:45.480><c> you</c><00:54:45.720><c> can</c><00:54:45.900><c> see</c><00:54:46.079><c> what's</c> 00:54:46.250 --> 00:54:46.260 align:start position:0% requests here so you can see what's 00:54:46.260 --> 00:54:48.770 align:start position:0% requests here so you can see what's available<00:54:46.500><c> to</c><00:54:46.859><c> us</c><00:54:47.040><c> I</c><00:54:47.160><c> think</c><00:54:47.339><c> the</c><00:54:47.520><c> euro</c><00:54:48.420><c> the</c> 00:54:48.770 --> 00:54:48.780 align:start position:0% available to us I think the euro the 00:54:48.780 --> 00:54:51.650 align:start position:0% available to us I think the euro the request<00:54:49.020><c> your</c><00:54:49.380><c> oh</c><00:54:49.619><c> yeah</c><00:54:49.800><c> request</c><00:54:50.460><c> your</c><00:54:50.819><c> things</c> 00:54:51.650 --> 00:54:51.660 align:start position:0% request your oh yeah request your things 00:54:51.660 --> 00:54:53.089 align:start position:0% request your oh yeah request your things like<00:54:51.900><c> that</c><00:54:52.020><c> right</c> 00:54:53.089 --> 00:54:53.099 align:start position:0% like that right 00:54:53.099 --> 00:54:55.910 align:start position:0% like that right request<00:54:53.579><c> Euro</c><00:54:54.180><c> you</c><00:54:54.780><c> can</c><00:54:54.839><c> see</c><00:54:54.960><c> that</c><00:54:55.200><c> here</c><00:54:55.500><c> where</c> 00:54:55.910 --> 00:54:55.920 align:start position:0% request Euro you can see that here where 00:54:55.920 --> 00:54:58.849 align:start position:0% request Euro you can see that here where is<00:54:56.099><c> that</c><00:54:56.280><c> uh</c> 00:54:58.849 --> 00:54:58.859 align:start position:0% is that uh 00:54:58.859 --> 00:55:01.790 align:start position:0% is that uh well<00:54:59.460><c> I</c><00:54:59.640><c> don't</c><00:54:59.819><c> oh</c><00:55:00.000><c> yeah</c><00:55:00.300><c> I</c><00:55:00.480><c> think</c><00:55:00.599><c> this</c><00:55:00.839><c> is</c><00:55:01.020><c> I</c> 00:55:01.790 --> 00:55:01.800 align:start position:0% well I don't oh yeah I think this is I 00:55:01.800 --> 00:55:03.349 align:start position:0% well I don't oh yeah I think this is I don't<00:55:01.920><c> think</c><00:55:02.040><c> I</c><00:55:02.220><c> can</c><00:55:02.339><c> console</c><00:55:02.760><c> off</c><00:55:03.000><c> from</c><00:55:03.240><c> here</c> 00:55:03.349 --> 00:55:03.359 align:start position:0% don't think I can console off from here 00:55:03.359 --> 00:55:05.329 align:start position:0% don't think I can console off from here or<00:55:04.020><c> could</c><00:55:04.319><c> I</c> 00:55:05.329 --> 00:55:05.339 align:start position:0% or could I 00:55:05.339 --> 00:55:07.549 align:start position:0% or could I anyway<00:55:05.819><c> never</c><00:55:06.300><c> mind</c><00:55:06.540><c> I</c><00:55:06.900><c> was</c><00:55:07.020><c> trying</c><00:55:07.140><c> to</c><00:55:07.319><c> show</c> 00:55:07.549 --> 00:55:07.559 align:start position:0% anyway never mind I was trying to show 00:55:07.559 --> 00:55:08.270 align:start position:0% anyway never mind I was trying to show you 00:55:08.270 --> 00:55:08.280 align:start position:0% you 00:55:08.280 --> 00:55:11.750 align:start position:0% you um<00:55:08.660><c> things</c><00:55:09.660><c> that</c><00:55:09.900><c> have</c><00:55:10.020><c> I</c><00:55:10.260><c> really</c><00:55:10.440><c> request</c> 00:55:11.750 --> 00:55:11.760 align:start position:0% um things that have I really request 00:55:11.760 --> 00:55:14.089 align:start position:0% um things that have I really request um<00:55:11.819><c> but</c><00:55:12.540><c> yeah</c><00:55:12.660><c> the</c><00:55:13.020><c> next</c><00:55:13.140><c> thing</c><00:55:13.380><c> you</c><00:55:13.800><c> want</c><00:55:13.980><c> to</c> 00:55:14.089 --> 00:55:14.099 align:start position:0% um but yeah the next thing you want to 00:55:14.099 --> 00:55:17.329 align:start position:0% um but yeah the next thing you want to know<00:55:14.280><c> about</c><00:55:14.520><c> this</c><00:55:15.119><c> is</c><00:55:15.599><c> that</c><00:55:15.900><c> in</c><00:55:16.740><c> the</c><00:55:16.800><c> case</c><00:55:16.920><c> of</c><00:55:17.160><c> a</c> 00:55:17.329 --> 00:55:17.339 align:start position:0% know about this is that in the case of a 00:55:17.339 --> 00:55:19.790 align:start position:0% know about this is that in the case of a boat<00:55:17.520><c> okay</c><00:55:17.940><c> because</c><00:55:18.599><c> here</c><00:55:18.960><c> we</c><00:55:19.260><c> are</c><00:55:19.440><c> streaming</c> 00:55:19.790 --> 00:55:19.800 align:start position:0% boat okay because here we are streaming 00:55:19.800 --> 00:55:21.710 align:start position:0% boat okay because here we are streaming the<00:55:19.920><c> content</c><00:55:20.280><c> okay</c><00:55:20.520><c> so</c><00:55:21.000><c> we're</c><00:55:21.180><c> streaming</c><00:55:21.540><c> the</c> 00:55:21.710 --> 00:55:21.720 align:start position:0% the content okay so we're streaming the 00:55:21.720 --> 00:55:24.230 align:start position:0% the content okay so we're streaming the content<00:55:22.020><c> and</c><00:55:22.319><c> and</c><00:55:22.559><c> what</c><00:55:23.460><c> what</c><00:55:23.700><c> do</c><00:55:23.880><c> I</c><00:55:23.940><c> mean</c><00:55:24.059><c> by</c> 00:55:24.230 --> 00:55:24.240 align:start position:0% content and and what what do I mean by 00:55:24.240 --> 00:55:26.150 align:start position:0% content and and what what do I mean by streaming<00:55:24.660><c> the</c><00:55:24.839><c> content</c><00:55:25.140><c> okay</c><00:55:25.380><c> we</c><00:55:25.980><c> are</c> 00:55:26.150 --> 00:55:26.160 align:start position:0% streaming the content okay we are 00:55:26.160 --> 00:55:28.130 align:start position:0% streaming the content okay we are awaiting<00:55:26.640><c> the</c><00:55:27.059><c> content</c> 00:55:28.130 --> 00:55:28.140 align:start position:0% awaiting the content 00:55:28.140 --> 00:55:28.809 align:start position:0% awaiting the content um 00:55:28.809 --> 00:55:28.819 align:start position:0% um 00:55:28.819 --> 00:55:31.609 align:start position:0% um because<00:55:29.819><c> here</c><00:55:30.359><c> for</c><00:55:30.780><c> example</c><00:55:31.079><c> I</c><00:55:31.380><c> think</c><00:55:31.500><c> the</c> 00:55:31.609 --> 00:55:31.619 align:start position:0% because here for example I think the 00:55:31.619 --> 00:55:33.829 align:start position:0% because here for example I think the case<00:55:31.740><c> of</c><00:55:32.040><c> a</c><00:55:32.220><c> products</c><00:55:32.700><c> page</c><00:55:32.940><c> okay</c><00:55:33.240><c> which</c><00:55:33.720><c> is</c> 00:55:33.829 --> 00:55:33.839 align:start position:0% case of a products page okay which is 00:55:33.839 --> 00:55:35.690 align:start position:0% case of a products page okay which is obviously<00:55:34.260><c> the</c><00:55:34.440><c> most</c><00:55:34.619><c> important</c><00:55:34.980><c> page</c><00:55:35.220><c> one</c><00:55:35.579><c> of</c> 00:55:35.690 --> 00:55:35.700 align:start position:0% obviously the most important page one of 00:55:35.700 --> 00:55:37.430 align:start position:0% obviously the most important page one of the<00:55:35.760><c> most</c><00:55:35.880><c> important</c><00:55:36.000><c> page</c><00:55:36.480><c> on</c><00:55:36.599><c> an</c><00:55:36.960><c> e-commerce</c> 00:55:37.430 --> 00:55:37.440 align:start position:0% the most important page on an e-commerce 00:55:37.440 --> 00:55:39.770 align:start position:0% the most important page on an e-commerce store<00:55:37.619><c> you</c><00:55:38.339><c> want</c><00:55:38.460><c> to</c><00:55:38.579><c> make</c><00:55:38.760><c> that</c><00:55:39.000><c> page</c><00:55:39.240><c> to</c><00:55:39.480><c> load</c> 00:55:39.770 --> 00:55:39.780 align:start position:0% store you want to make that page to load 00:55:39.780 --> 00:55:42.710 align:start position:0% store you want to make that page to load extremely<00:55:40.319><c> fast</c><00:55:40.619><c> right</c><00:55:41.119><c> you</c><00:55:42.119><c> want</c><00:55:42.300><c> that</c><00:55:42.540><c> page</c> 00:55:42.710 --> 00:55:42.720 align:start position:0% extremely fast right you want that page 00:55:42.720 --> 00:55:45.710 align:start position:0% extremely fast right you want that page to<00:55:43.020><c> load</c><00:55:43.319><c> very</c><00:55:43.619><c> fast</c><00:55:43.920><c> okay</c><00:55:44.520><c> and</c><00:55:45.300><c> when</c><00:55:45.599><c> you're</c> 00:55:45.710 --> 00:55:45.720 align:start position:0% to load very fast okay and when you're 00:55:45.720 --> 00:55:47.750 align:start position:0% to load very fast okay and when you're loading<00:55:46.140><c> a</c><00:55:46.260><c> product</c><00:55:46.440><c> page</c><00:55:46.859><c> obviously</c><00:55:47.400><c> you</c> 00:55:47.750 --> 00:55:47.760 align:start position:0% loading a product page obviously you 00:55:47.760 --> 00:55:49.730 align:start position:0% loading a product page obviously you want<00:55:47.880><c> to</c><00:55:48.000><c> load</c><00:55:48.240><c> the</c><00:55:48.420><c> page</c><00:55:48.599><c> the</c><00:55:49.020><c> product</c><00:55:49.200><c> itself</c> 00:55:49.730 --> 00:55:49.740 align:start position:0% want to load the page the product itself 00:55:49.740 --> 00:55:52.609 align:start position:0% want to load the page the product itself like<00:55:50.700><c> like</c><00:55:51.300><c> this</c><00:55:51.540><c> this</c><00:55:51.720><c> is</c><00:55:51.900><c> done</c><00:55:52.079><c> here</c><00:55:52.319><c> okay</c> 00:55:52.609 --> 00:55:52.619 align:start position:0% like like this this is done here okay 00:55:52.619 --> 00:55:55.309 align:start position:0% like like this this is done here okay this<00:55:53.040><c> is</c><00:55:53.220><c> the</c><00:55:53.280><c> product</c><00:55:53.460><c> itself</c><00:55:54.059><c> but</c><00:55:55.020><c> you</c><00:55:55.140><c> want</c> 00:55:55.309 --> 00:55:55.319 align:start position:0% this is the product itself but you want 00:55:55.319 --> 00:55:58.190 align:start position:0% this is the product itself but you want to<00:55:55.500><c> load</c><00:55:55.800><c> let's</c><00:55:56.220><c> say</c><00:55:56.460><c> I</c><00:55:56.819><c> don't</c><00:55:56.880><c> know</c><00:55:57.000><c> uh</c><00:55:57.960><c> the</c> 00:55:58.190 --> 00:55:58.200 align:start position:0% to load let's say I don't know uh the 00:55:58.200 --> 00:56:00.290 align:start position:0% to load let's say I don't know uh the variance 00:56:00.290 --> 00:56:00.300 align:start position:0% variance 00:56:00.300 --> 00:56:01.970 align:start position:0% variance like<00:56:00.900><c> you</c><00:56:01.140><c> want</c><00:56:01.260><c> you</c><00:56:01.440><c> may</c><00:56:01.740><c> have</c><00:56:01.859><c> a</c> 00:56:01.970 --> 00:56:01.980 align:start position:0% like you want you may have a 00:56:01.980 --> 00:56:03.530 align:start position:0% like you want you may have a recommendation<00:56:02.520><c> engine</c> 00:56:03.530 --> 00:56:03.540 align:start position:0% recommendation engine 00:56:03.540 --> 00:56:05.630 align:start position:0% recommendation engine and<00:56:04.140><c> and</c><00:56:04.319><c> obviously</c><00:56:04.980><c> we</c><00:56:05.160><c> don't</c><00:56:05.280><c> want</c><00:56:05.400><c> to</c><00:56:05.520><c> do</c> 00:56:05.630 --> 00:56:05.640 align:start position:0% and and obviously we don't want to do 00:56:05.640 --> 00:56:07.549 align:start position:0% and and obviously we don't want to do this<00:56:05.819><c> the</c><00:56:06.119><c> context</c><00:56:06.480><c> here</c><00:56:06.720><c> this</c><00:56:06.960><c> is</c><00:56:07.079><c> what</c><00:56:07.319><c> I</c><00:56:07.440><c> was</c> 00:56:07.549 --> 00:56:07.559 align:start position:0% this the context here this is what I was 00:56:07.559 --> 00:56:09.170 align:start position:0% this the context here this is what I was doing<00:56:07.740><c> as</c><00:56:07.920><c> I</c><00:56:08.160><c> was</c><00:56:08.280><c> Denmark</c> 00:56:09.170 --> 00:56:09.180 align:start position:0% doing as I was Denmark 00:56:09.180 --> 00:56:11.329 align:start position:0% doing as I was Denmark security<00:56:09.540><c> concerns</c><00:56:10.380><c> earlier</c><00:56:10.680><c> so</c><00:56:10.980><c> let's</c><00:56:11.099><c> move</c> 00:56:11.329 --> 00:56:11.339 align:start position:0% security concerns earlier so let's move 00:56:11.339 --> 00:56:12.530 align:start position:0% security concerns earlier so let's move that 00:56:12.530 --> 00:56:12.540 align:start position:0% that 00:56:12.540 --> 00:56:15.010 align:start position:0% that let's<00:56:13.020><c> remove</c><00:56:13.260><c> that</c><00:56:13.619><c> from</c><00:56:13.859><c> our</c> 00:56:15.010 --> 00:56:15.020 align:start position:0% let's remove that from our 00:56:15.020 --> 00:56:22.990 align:start position:0% let's remove that from our server.tx<00:56:16.020><c> as</c><00:56:16.200><c> well</c><00:56:16.319><c> let's</c><00:56:16.559><c> do</c><00:56:16.740><c> that</c> 00:56:22.990 --> 00:56:23.000 align:start position:0% 00:56:23.000 --> 00:56:26.809 align:start position:0% already<00:56:24.000><c> okay</c><00:56:24.720><c> so</c><00:56:24.960><c> that's</c><00:56:25.140><c> good</c><00:56:25.380><c> so</c> 00:56:26.809 --> 00:56:26.819 align:start position:0% already okay so that's good so 00:56:26.819 --> 00:56:30.170 align:start position:0% already okay so that's good so what<00:56:27.599><c> that</c><00:56:27.960><c> was</c><00:56:28.140><c> where</c><00:56:28.319><c> was</c><00:56:28.559><c> I</c><00:56:28.740><c> okay</c><00:56:29.099><c> so</c><00:56:29.520><c> here</c><00:56:29.819><c> I</c> 00:56:30.170 --> 00:56:30.180 align:start position:0% what that was where was I okay so here I 00:56:30.180 --> 00:56:32.690 align:start position:0% what that was where was I okay so here I was<00:56:30.300><c> saying</c><00:56:30.599><c> you</c><00:56:31.140><c> can</c><00:56:31.260><c> have</c><00:56:31.559><c> you</c><00:56:32.220><c> see</c><00:56:32.400><c> all</c><00:56:32.520><c> the</c> 00:56:32.690 --> 00:56:32.700 align:start position:0% was saying you can have you see all the 00:56:32.700 --> 00:56:33.950 align:start position:0% was saying you can have you see all the things<00:56:32.880><c> that</c><00:56:33.119><c> we're</c><00:56:33.180><c> returning</c><00:56:33.599><c> from</c><00:56:33.780><c> the</c> 00:56:33.950 --> 00:56:33.960 align:start position:0% things that we're returning from the 00:56:33.960 --> 00:56:35.510 align:start position:0% things that we're returning from the product<00:56:34.140><c> page</c><00:56:34.500><c> here</c><00:56:34.680><c> we</c><00:56:34.859><c> are</c><00:56:35.040><c> returning</c><00:56:35.339><c> the</c> 00:56:35.510 --> 00:56:35.520 align:start position:0% product page here we are returning the 00:56:35.520 --> 00:56:37.309 align:start position:0% product page here we are returning the product<00:56:35.640><c> and</c><00:56:35.940><c> the</c><00:56:36.059><c> product</c><00:56:36.180><c> variants</c><00:56:36.780><c> if</c><00:56:37.020><c> I</c><00:56:37.200><c> go</c> 00:56:37.309 --> 00:56:37.319 align:start position:0% product and the product variants if I go 00:56:37.319 --> 00:56:39.349 align:start position:0% product and the product variants if I go to<00:56:37.440><c> the</c><00:56:37.680><c> collection</c><00:56:38.099><c> page</c><00:56:38.579><c> let's</c><00:56:39.059><c> say</c> 00:56:39.349 --> 00:56:39.359 align:start position:0% to the collection page let's say 00:56:39.359 --> 00:56:41.809 align:start position:0% to the collection page let's say collections<00:56:40.200><c> handle</c><00:56:40.680><c> let's</c><00:56:41.520><c> see</c><00:56:41.700><c> what's</c> 00:56:41.809 --> 00:56:41.819 align:start position:0% collections handle let's see what's 00:56:41.819 --> 00:56:44.329 align:start position:0% collections handle let's see what's defined<00:56:42.359><c> in</c><00:56:42.480><c> there</c><00:56:42.660><c> in</c><00:56:42.960><c> the</c><00:56:43.079><c> loader</c> 00:56:44.329 --> 00:56:44.339 align:start position:0% defined in there in the loader 00:56:44.339 --> 00:56:46.730 align:start position:0% defined in there in the loader just<00:56:44.880><c> a</c><00:56:45.059><c> collection</c><00:56:45.420><c> okay</c> 00:56:46.730 --> 00:56:46.740 align:start position:0% just a collection okay 00:56:46.740 --> 00:56:48.650 align:start position:0% just a collection okay but<00:56:47.160><c> yeah</c><00:56:47.339><c> I</c><00:56:47.520><c> can</c><00:56:47.640><c> make</c><00:56:47.760><c> my</c><00:56:48.000><c> point</c><00:56:48.119><c> from</c><00:56:48.420><c> here</c> 00:56:48.650 --> 00:56:48.660 align:start position:0% but yeah I can make my point from here 00:56:48.660 --> 00:56:52.609 align:start position:0% but yeah I can make my point from here okay<00:56:49.020><c> my</c><00:56:49.740><c> point</c><00:56:49.980><c> is</c><00:56:50.359><c> this</c><00:56:51.359><c> is</c><00:56:52.079><c> more</c><00:56:52.200><c> important</c> 00:56:52.609 --> 00:56:52.619 align:start position:0% okay my point is this is more important 00:56:52.619 --> 00:56:55.130 align:start position:0% okay my point is this is more important than<00:56:52.800><c> this</c><00:56:53.040><c> okay</c><00:56:53.520><c> the</c><00:56:54.300><c> products</c><00:56:54.720><c> variants</c> 00:56:55.130 --> 00:56:55.140 align:start position:0% than this okay the products variants 00:56:55.140 --> 00:56:58.130 align:start position:0% than this okay the products variants typically<00:56:55.800><c> I</c><00:56:56.700><c> think</c><00:56:56.819><c> this</c><00:56:57.420><c> this</c><00:56:57.599><c> may</c><00:56:57.839><c> be</c><00:56:58.020><c> not</c> 00:56:58.130 --> 00:56:58.140 align:start position:0% typically I think this this may be not 00:56:58.140 --> 00:57:00.849 align:start position:0% typically I think this this may be not the<00:56:58.319><c> the</c><00:56:58.500><c> best</c><00:56:58.980><c> example</c><00:56:59.339><c> but</c><00:56:59.640><c> imagine</c><00:56:59.880><c> you</c><00:57:00.300><c> had</c> 00:57:00.849 --> 00:57:00.859 align:start position:0% the the best example but imagine you had 00:57:00.859 --> 00:57:06.109 align:start position:0% the the best example but imagine you had recommendations<00:57:02.359><c> recommended</c><00:57:03.359><c> recommended</c> 00:57:06.109 --> 00:57:06.119 align:start position:0% recommendations recommended recommended 00:57:06.119 --> 00:57:09.049 align:start position:0% recommendations recommended recommended all<00:57:06.599><c> right</c><00:57:07.020><c> similar</c><00:57:07.740><c> part</c><00:57:07.920><c> as</c><00:57:08.220><c> well</c><00:57:08.400><c> okay</c> 00:57:09.049 --> 00:57:09.059 align:start position:0% all right similar part as well okay 00:57:09.059 --> 00:57:10.370 align:start position:0% all right similar part as well okay similar 00:57:10.370 --> 00:57:10.380 align:start position:0% similar 00:57:10.380 --> 00:57:13.309 align:start position:0% similar products<00:57:11.339><c> something</c><00:57:11.819><c> like</c><00:57:12.119><c> that</c><00:57:12.720><c> when</c><00:57:13.140><c> you</c> 00:57:13.309 --> 00:57:13.319 align:start position:0% products something like that when you 00:57:13.319 --> 00:57:18.230 align:start position:0% products something like that when you had<00:57:13.500><c> a</c><00:57:13.680><c> storefront</c><00:57:14.339><c> query</c><00:57:15.260><c> query</c><00:57:16.579><c> I</c><00:57:17.579><c> say</c><00:57:17.819><c> I</c> 00:57:18.230 --> 00:57:18.240 align:start position:0% had a storefront query query I say I 00:57:18.240 --> 00:57:20.030 align:start position:0% had a storefront query query I say I don't<00:57:18.300><c> know</c><00:57:18.420><c> similar</c> 00:57:20.030 --> 00:57:20.040 align:start position:0% don't know similar 00:57:20.040 --> 00:57:21.220 align:start position:0% don't know similar products 00:57:21.220 --> 00:57:21.230 align:start position:0% products 00:57:21.230 --> 00:57:22.450 align:start position:0% products [Music] 00:57:22.450 --> 00:57:22.460 align:start position:0% [Music] 00:57:22.460 --> 00:57:25.790 align:start position:0% [Music] products<00:57:23.460><c> okay</c><00:57:24.000><c> okay</c><00:57:24.500><c> obviously</c><00:57:25.500><c> that</c><00:57:25.680><c> okay</c> 00:57:25.790 --> 00:57:25.800 align:start position:0% products okay okay obviously that okay 00:57:25.800 --> 00:57:27.349 align:start position:0% products okay okay obviously that okay doesn't<00:57:26.160><c> exist</c><00:57:26.460><c> but</c><00:57:26.640><c> just</c><00:57:26.819><c> for</c><00:57:26.940><c> the</c><00:57:27.059><c> sake</c><00:57:27.180><c> of</c> 00:57:27.349 --> 00:57:27.359 align:start position:0% doesn't exist but just for the sake of 00:57:27.359 --> 00:57:29.450 align:start position:0% doesn't exist but just for the sake of argument<00:57:27.720><c> right</c><00:57:27.900><c> so</c><00:57:28.200><c> let's</c><00:57:28.500><c> say</c><00:57:28.680><c> we</c><00:57:29.220><c> have</c> 00:57:29.450 --> 00:57:29.460 align:start position:0% argument right so let's say we have 00:57:29.460 --> 00:57:31.250 align:start position:0% argument right so let's say we have something<00:57:29.640><c> like</c><00:57:29.940><c> this</c><00:57:30.180><c> okay</c><00:57:30.540><c> for</c><00:57:30.839><c> the</c><00:57:31.020><c> sake</c><00:57:31.140><c> of</c> 00:57:31.250 --> 00:57:31.260 align:start position:0% something like this okay for the sake of 00:57:31.260 --> 00:57:34.010 align:start position:0% something like this okay for the sake of argument<00:57:31.819><c> you</c><00:57:32.819><c> have</c><00:57:33.000><c> let's</c><00:57:33.420><c> say</c><00:57:33.599><c> this</c><00:57:33.839><c> was</c> 00:57:34.010 --> 00:57:34.020 align:start position:0% argument you have let's say this was 00:57:34.020 --> 00:57:36.530 align:start position:0% argument you have let's say this was taking<00:57:34.200><c> a</c><00:57:34.500><c> lot</c><00:57:34.619><c> of</c><00:57:34.740><c> time</c><00:57:34.980><c> to</c><00:57:35.280><c> return</c><00:57:35.460><c> okay</c><00:57:35.880><c> you</c> 00:57:36.530 --> 00:57:36.540 align:start position:0% taking a lot of time to return okay you 00:57:36.540 --> 00:57:38.150 align:start position:0% taking a lot of time to return okay you can<00:57:36.720><c> add</c><00:57:36.839><c> that</c><00:57:37.079><c> to</c><00:57:37.260><c> the</c><00:57:37.380><c> context</c><00:57:37.680><c> like</c><00:57:37.920><c> this</c> 00:57:38.150 --> 00:57:38.160 align:start position:0% can add that to the context like this 00:57:38.160 --> 00:57:40.309 align:start position:0% can add that to the context like this similar<00:57:38.880><c> products</c><00:57:39.420><c> okay</c> 00:57:40.309 --> 00:57:40.319 align:start position:0% similar products okay 00:57:40.319 --> 00:57:43.670 align:start position:0% similar products okay Canada<00:57:40.859><c> to</c><00:57:41.220><c> the</c><00:57:41.400><c> context</c><00:57:41.700><c> and</c><00:57:42.420><c> then</c><00:57:42.660><c> what</c><00:57:43.500><c> this</c> 00:57:43.670 --> 00:57:43.680 align:start position:0% Canada to the context and then what this 00:57:43.680 --> 00:57:46.790 align:start position:0% Canada to the context and then what this will<00:57:43.920><c> do</c><00:57:44.099><c> is</c><00:57:44.460><c> this</c><00:57:45.000><c> is</c><00:57:45.119><c> an</c><00:57:45.300><c> awaited</c><00:57:45.839><c> query</c><00:57:46.260><c> okay</c> 00:57:46.790 --> 00:57:46.800 align:start position:0% will do is this is an awaited query okay 00:57:46.800 --> 00:57:50.150 align:start position:0% will do is this is an awaited query okay this<00:57:47.280><c> is</c><00:57:47.460><c> awaited</c><00:57:48.000><c> the</c><00:57:48.359><c> product</c><00:57:48.540><c> here</c> 00:57:50.150 --> 00:57:50.160 align:start position:0% this is awaited the product here 00:57:50.160 --> 00:57:53.390 align:start position:0% this is awaited the product here okay<00:57:50.760><c> so</c><00:57:51.180><c> this</c><00:57:51.480><c> will</c><00:57:51.780><c> wait</c><00:57:52.500><c> in</c><00:57:52.920><c> the</c><00:57:53.040><c> in</c><00:57:53.220><c> the</c> 00:57:53.390 --> 00:57:53.400 align:start position:0% okay so this will wait in the in the 00:57:53.400 --> 00:57:55.670 align:start position:0% okay so this will wait in the in the load<00:57:53.640><c> to</c><00:57:53.940><c> return</c><00:57:54.119><c> but</c><00:57:54.599><c> anything</c><00:57:54.900><c> else</c><00:57:55.200><c> that</c><00:57:55.500><c> is</c> 00:57:55.670 --> 00:57:55.680 align:start position:0% load to return but anything else that is 00:57:55.680 --> 00:57:57.109 align:start position:0% load to return but anything else that is not<00:57:55.920><c> awaited</c> 00:57:57.109 --> 00:57:57.119 align:start position:0% not awaited 00:57:57.119 --> 00:58:00.109 align:start position:0% not awaited will<00:57:57.660><c> be</c><00:57:57.900><c> sent</c><00:57:58.140><c> as</c><00:57:58.920><c> a</c><00:57:59.099><c> promise</c><00:57:59.460><c> as</c><00:57:59.819><c> you</c><00:57:59.940><c> see</c> 00:58:00.109 --> 00:58:00.119 align:start position:0% will be sent as a promise as you see 00:58:00.119 --> 00:58:01.970 align:start position:0% will be sent as a promise as you see here<00:58:00.300><c> this</c><00:58:00.599><c> is</c><00:58:00.720><c> a</c><00:58:00.900><c> promise</c><00:58:01.200><c> if</c><00:58:01.380><c> I</c><00:58:01.559><c> hover</c><00:58:01.859><c> on</c> 00:58:01.970 --> 00:58:01.980 align:start position:0% here this is a promise if I hover on 00:58:01.980 --> 00:58:03.410 align:start position:0% here this is a promise if I hover on this<00:58:02.160><c> I</c><00:58:02.400><c> think</c><00:58:02.520><c> I</c><00:58:02.640><c> can</c><00:58:02.700><c> make</c><00:58:02.819><c> my</c><00:58:03.000><c> point</c><00:58:03.119><c> just</c> 00:58:03.410 --> 00:58:03.420 align:start position:0% this I think I can make my point just 00:58:03.420 --> 00:58:05.569 align:start position:0% this I think I can make my point just with<00:58:03.540><c> the</c><00:58:03.720><c> violence</c><00:58:04.079><c> anyway</c><00:58:04.319><c> if</c><00:58:05.280><c> you</c><00:58:05.400><c> if</c> 00:58:05.569 --> 00:58:05.579 align:start position:0% with the violence anyway if you if 00:58:05.579 --> 00:58:07.190 align:start position:0% with the violence anyway if you if you're<00:58:05.760><c> over</c><00:58:05.940><c> here</c><00:58:06.180><c> you</c><00:58:06.420><c> see</c><00:58:06.540><c> that</c><00:58:06.720><c> this</c><00:58:06.900><c> is</c><00:58:07.020><c> a</c> 00:58:07.190 --> 00:58:07.200 align:start position:0% you're over here you see that this is a 00:58:07.200 --> 00:58:10.730 align:start position:0% you're over here you see that this is a promise<00:58:07.500><c> right</c><00:58:07.740><c> this</c><00:58:08.040><c> is</c><00:58:08.160><c> a</c><00:58:08.339><c> promise</c> 00:58:10.730 --> 00:58:10.740 align:start position:0% 00:58:10.740 --> 00:58:13.069 align:start position:0% and<00:58:11.339><c> this</c><00:58:11.520><c> is</c><00:58:11.640><c> an</c><00:58:11.819><c> actual</c><00:58:12.119><c> thing</c><00:58:12.359><c> it's</c><00:58:12.720><c> not</c><00:58:12.900><c> a</c> 00:58:13.069 --> 00:58:13.079 align:start position:0% and this is an actual thing it's not a 00:58:13.079 --> 00:58:16.309 align:start position:0% and this is an actual thing it's not a promise<00:58:13.380><c> anymore</c><00:58:13.619><c> okay</c><00:58:14.099><c> so</c><00:58:15.000><c> which</c><00:58:15.540><c> that</c><00:58:15.960><c> means</c> 00:58:16.309 --> 00:58:16.319 align:start position:0% promise anymore okay so which that means 00:58:16.319 --> 00:58:18.410 align:start position:0% promise anymore okay so which that means is<00:58:16.619><c> that</c><00:58:16.859><c> is</c><00:58:17.400><c> that</c><00:58:17.579><c> when</c><00:58:17.760><c> I'm</c><00:58:17.940><c> visiting</c><00:58:18.300><c> this</c> 00:58:18.410 --> 00:58:18.420 align:start position:0% is that is that when I'm visiting this 00:58:18.420 --> 00:58:20.630 align:start position:0% is that is that when I'm visiting this page<00:58:18.660><c> okay</c><00:58:19.020><c> and</c><00:58:19.500><c> I'm</c><00:58:19.740><c> visiting</c><00:58:20.040><c> a</c><00:58:20.220><c> page</c><00:58:20.460><c> like</c> 00:58:20.630 --> 00:58:20.640 align:start position:0% page okay and I'm visiting a page like 00:58:20.640 --> 00:58:21.950 align:start position:0% page okay and I'm visiting a page like this<00:58:20.880><c> one</c><00:58:21.000><c> okay</c> 00:58:21.950 --> 00:58:21.960 align:start position:0% this one okay 00:58:21.960 --> 00:58:24.530 align:start position:0% this one okay the<00:58:22.619><c> product</c><00:58:22.920><c> that</c><00:58:23.520><c> we</c><00:58:23.700><c> want</c><00:58:23.819><c> to</c><00:58:24.000><c> see</c><00:58:24.119><c> is</c> 00:58:24.530 --> 00:58:24.540 align:start position:0% the product that we want to see is 00:58:24.540 --> 00:58:26.690 align:start position:0% the product that we want to see is rendered<00:58:24.960><c> first</c><00:58:25.200><c> and</c><00:58:25.559><c> then</c><00:58:25.740><c> say</c><00:58:25.980><c> imagine</c><00:58:26.220><c> we</c> 00:58:26.690 --> 00:58:26.700 align:start position:0% rendered first and then say imagine we 00:58:26.700 --> 00:58:28.970 align:start position:0% rendered first and then say imagine we had<00:58:26.940><c> some</c><00:58:27.180><c> recommendations</c><00:58:27.839><c> below</c><00:58:28.500><c> the</c><00:58:28.680><c> page</c> 00:58:28.970 --> 00:58:28.980 align:start position:0% had some recommendations below the page 00:58:28.980 --> 00:58:31.370 align:start position:0% had some recommendations below the page below<00:58:29.640><c> the</c><00:58:29.760><c> product</c><00:58:30.000><c> itself</c> 00:58:31.370 --> 00:58:31.380 align:start position:0% below the product itself 00:58:31.380 --> 00:58:33.470 align:start position:0% below the product itself we<00:58:31.920><c> don't</c><00:58:32.040><c> need</c> 00:58:33.470 --> 00:58:33.480 align:start position:0% we don't need 00:58:33.480 --> 00:58:35.930 align:start position:0% we don't need when<00:58:33.960><c> you're</c><00:58:34.079><c> rendering</c><00:58:34.559><c> this</c><00:58:34.680><c> page</c><00:58:34.859><c> we</c><00:58:35.760><c> need</c> 00:58:35.930 --> 00:58:35.940 align:start position:0% when you're rendering this page we need 00:58:35.940 --> 00:58:40.130 align:start position:0% when you're rendering this page we need to<00:58:36.180><c> show</c><00:58:36.859><c> the</c><00:58:37.859><c> product</c><00:58:38.040><c> itself</c><00:58:38.640><c> fast</c><00:58:39.140><c> the</c> 00:58:40.130 --> 00:58:40.140 align:start position:0% to show the product itself fast the 00:58:40.140 --> 00:58:42.410 align:start position:0% to show the product itself fast the recommendations<00:58:40.740><c> can</c><00:58:41.160><c> come</c><00:58:41.339><c> later</c> 00:58:42.410 --> 00:58:42.420 align:start position:0% recommendations can come later 00:58:42.420 --> 00:58:44.450 align:start position:0% recommendations can come later and<00:58:42.839><c> that's</c><00:58:42.960><c> why</c><00:58:43.140><c> we</c><00:58:43.319><c> call</c><00:58:43.500><c> streaming</c><00:58:44.280><c> the</c> 00:58:44.450 --> 00:58:44.460 align:start position:0% and that's why we call streaming the 00:58:44.460 --> 00:58:46.849 align:start position:0% and that's why we call streaming the content<00:58:44.880><c> of</c><00:58:45.059><c> a</c><00:58:45.240><c> page</c><00:58:45.480><c> of</c><00:58:45.660><c> an</c><00:58:45.839><c> HTML</c><00:58:46.319><c> page</c><00:58:46.680><c> okay</c> 00:58:46.849 --> 00:58:46.859 align:start position:0% content of a page of an HTML page okay 00:58:46.859 --> 00:58:50.750 align:start position:0% content of a page of an HTML page okay so<00:58:47.520><c> the</c><00:58:47.700><c> content</c><00:58:48.059><c> is</c><00:58:48.299><c> being</c><00:58:48.540><c> streamed</c><00:58:49.200><c> okay</c><00:58:49.859><c> so</c> 00:58:50.750 --> 00:58:50.760 align:start position:0% so the content is being streamed okay so 00:58:50.760 --> 00:58:53.329 align:start position:0% so the content is being streamed okay so if<00:58:50.940><c> I</c><00:58:51.119><c> go</c><00:58:51.299><c> back</c><00:58:51.480><c> here</c><00:58:51.780><c> which</c><00:58:52.140><c> is</c><00:58:52.380><c> photos</c><00:58:52.559><c> so</c><00:58:53.160><c> we</c> 00:58:53.329 --> 00:58:53.339 align:start position:0% if I go back here which is photos so we 00:58:53.339 --> 00:58:55.809 align:start position:0% if I go back here which is photos so we have<00:58:53.520><c> here</c><00:58:53.700><c> the</c><00:58:54.000><c> content</c><00:58:54.299><c> is</c><00:58:54.480><c> being</c><00:58:54.780><c> streamed</c> 00:58:55.809 --> 00:58:55.819 align:start position:0% have here the content is being streamed 00:58:55.819 --> 00:58:58.849 align:start position:0% have here the content is being streamed uh<00:58:56.819><c> bit</c><00:58:57.240><c> by</c><00:58:57.359><c> bit</c><00:58:57.599><c> so</c><00:58:57.960><c> we</c><00:58:58.140><c> first</c><00:58:58.319><c> give</c><00:58:58.619><c> the</c> 00:58:58.849 --> 00:58:58.859 align:start position:0% uh bit by bit so we first give the 00:58:58.859 --> 00:59:01.490 align:start position:0% uh bit by bit so we first give the content<00:58:59.220><c> the</c><00:58:59.700><c> main</c><00:58:59.880><c> content</c><00:59:00.240><c> to</c><00:59:00.359><c> the</c><00:59:00.540><c> user</c><00:59:00.900><c> and</c> 00:59:01.490 --> 00:59:01.500 align:start position:0% content the main content to the user and 00:59:01.500 --> 00:59:03.170 align:start position:0% content the main content to the user and then<00:59:01.619><c> supporting</c><00:59:02.220><c> contents</c><00:59:02.760><c> like</c><00:59:02.880><c> product</c> 00:59:03.170 --> 00:59:03.180 align:start position:0% then supporting contents like product 00:59:03.180 --> 00:59:04.970 align:start position:0% then supporting contents like product various<00:59:03.660><c> and</c><00:59:03.839><c> product</c><00:59:04.020><c> recommendations</c><00:59:04.619><c> can</c> 00:59:04.970 --> 00:59:04.980 align:start position:0% various and product recommendations can 00:59:04.980 --> 00:59:07.910 align:start position:0% various and product recommendations can come<00:59:05.160><c> later</c><00:59:05.520><c> on</c><00:59:06.299><c> that</c><00:59:07.020><c> is</c><00:59:07.140><c> when</c><00:59:07.319><c> we</c><00:59:07.500><c> are</c><00:59:07.619><c> given</c> 00:59:07.910 --> 00:59:07.920 align:start position:0% come later on that is when we are given 00:59:07.920 --> 00:59:10.630 align:start position:0% come later on that is when we are given the<00:59:08.099><c> experience</c><00:59:08.700><c> to</c><00:59:09.000><c> a</c><00:59:09.299><c> natural</c><00:59:09.540><c> user</c><00:59:10.200><c> okay</c> 00:59:10.630 --> 00:59:10.640 align:start position:0% the experience to a natural user okay 00:59:10.640 --> 00:59:14.809 align:start position:0% the experience to a natural user okay both<00:59:11.640><c> in</c><00:59:12.119><c> the</c><00:59:12.240><c> case</c><00:59:12.420><c> of</c><00:59:12.660><c> search</c><00:59:12.960><c> engines</c> 00:59:14.809 --> 00:59:14.819 align:start position:0% both in the case of search engines 00:59:14.819 --> 00:59:17.930 align:start position:0% both in the case of search engines we<00:59:15.540><c> want</c><00:59:15.720><c> we</c><00:59:16.079><c> want</c><00:59:16.260><c> the</c><00:59:16.440><c> the</c><00:59:16.680><c> the</c><00:59:16.680><c> the</c><00:59:16.940><c> Google</c> 00:59:17.930 --> 00:59:17.940 align:start position:0% we want we want the the the the Google 00:59:17.940 --> 00:59:20.089 align:start position:0% we want we want the the the the Google crawler<00:59:18.540><c> or</c><00:59:18.900><c> the</c><00:59:19.020><c> bin</c><00:59:19.260><c> crowler</c><00:59:19.559><c> to</c><00:59:19.799><c> see</c><00:59:19.920><c> the</c> 00:59:20.089 --> 00:59:20.099 align:start position:0% crawler or the bin crowler to see the 00:59:20.099 --> 00:59:21.890 align:start position:0% crawler or the bin crowler to see the whole<00:59:20.220><c> page</c><00:59:20.520><c> okay</c><00:59:20.880><c> this</c><00:59:21.180><c> is</c><00:59:21.299><c> very</c><00:59:21.540><c> important</c> 00:59:21.890 --> 00:59:21.900 align:start position:0% whole page okay this is very important 00:59:21.900 --> 00:59:24.829 align:start position:0% whole page okay this is very important for<00:59:22.140><c> SEO</c><00:59:22.619><c> this</c><00:59:22.859><c> this</c><00:59:23.099><c> bit</c><00:59:23.640><c> here</c><00:59:23.880><c> very</c><00:59:24.720><c> very</c> 00:59:24.829 --> 00:59:24.839 align:start position:0% for SEO this this bit here very very 00:59:24.839 --> 00:59:27.530 align:start position:0% for SEO this this bit here very very important<00:59:25.260><c> from</c><00:59:25.440><c> SEO</c><00:59:25.920><c> perspective</c><00:59:26.400><c> okay</c> 00:59:27.530 --> 00:59:27.540 align:start position:0% important from SEO perspective okay 00:59:27.540 --> 00:59:29.870 align:start position:0% important from SEO perspective okay you<00:59:28.140><c> want</c><00:59:28.380><c> Google</c><00:59:28.740><c> to</c><00:59:29.040><c> see</c><00:59:29.220><c> the</c><00:59:29.460><c> whole</c><00:59:29.579><c> page</c> 00:59:29.870 --> 00:59:29.880 align:start position:0% you want Google to see the whole page 00:59:29.880 --> 00:59:32.150 align:start position:0% you want Google to see the whole page okay<00:59:30.420><c> because</c> 00:59:32.150 --> 00:59:32.160 align:start position:0% okay because 00:59:32.160 --> 00:59:35.930 align:start position:0% okay because if<00:59:32.760><c> Google</c><00:59:33.059><c> comes</c><00:59:33.900><c> and</c><00:59:34.200><c> just</c><00:59:34.380><c> says</c><00:59:34.740><c> this</c><00:59:34.980><c> and</c> 00:59:35.930 --> 00:59:35.940 align:start position:0% if Google comes and just says this and 00:59:35.940 --> 00:59:38.930 align:start position:0% if Google comes and just says this and uh<00:59:36.480><c> all</c><00:59:37.260><c> your</c><00:59:37.440><c> this</c><00:59:38.040><c> could</c><00:59:38.160><c> be</c><00:59:38.280><c> first</c><00:59:38.700><c> let's</c> 00:59:38.930 --> 00:59:38.940 align:start position:0% uh all your this could be first let's 00:59:38.940 --> 00:59:41.390 align:start position:0% uh all your this could be first let's see<00:59:39.119><c> that</c><00:59:39.299><c> thin</c><00:59:39.540><c> content</c><00:59:39.900><c> and</c><00:59:40.680><c> then</c><00:59:40.859><c> all</c><00:59:41.220><c> your</c> 00:59:41.390 --> 00:59:41.400 align:start position:0% see that thin content and then all your 00:59:41.400 --> 00:59:43.910 align:start position:0% see that thin content and then all your SEO<00:59:41.880><c> goodies</c><00:59:42.540><c> that</c><00:59:42.780><c> you</c><00:59:42.900><c> have</c><00:59:43.020><c> added</c><00:59:43.319><c> at</c><00:59:43.799><c> the</c> 00:59:43.910 --> 00:59:43.920 align:start position:0% SEO goodies that you have added at the 00:59:43.920 --> 00:59:45.890 align:start position:0% SEO goodies that you have added at the bottom<00:59:44.220><c> and</c><00:59:44.460><c> so</c><00:59:44.579><c> on</c><00:59:44.760><c> the</c><00:59:44.940><c> description</c><00:59:45.240><c> all</c><00:59:45.660><c> the</c> 00:59:45.890 --> 00:59:45.900 align:start position:0% bottom and so on the description all the 00:59:45.900 --> 00:59:47.930 align:start position:0% bottom and so on the description all the things<00:59:46.559><c> that</c><00:59:46.799><c> you</c><00:59:46.920><c> spend</c><00:59:47.099><c> a</c><00:59:47.280><c> lot</c><00:59:47.400><c> of</c><00:59:47.460><c> time</c><00:59:47.640><c> your</c> 00:59:47.930 --> 00:59:47.940 align:start position:0% things that you spend a lot of time your 00:59:47.940 --> 00:59:49.789 align:start position:0% things that you spend a lot of time your content<00:59:48.299><c> team</c><00:59:48.420><c> spend</c><00:59:48.780><c> a</c><00:59:48.900><c> lot</c><00:59:49.020><c> of</c><00:59:49.140><c> time</c><00:59:49.319><c> writing</c> 00:59:49.789 --> 00:59:49.799 align:start position:0% content team spend a lot of time writing 00:59:49.799 --> 00:59:52.130 align:start position:0% content team spend a lot of time writing may<00:59:50.400><c> not</c><00:59:50.640><c> be</c><00:59:50.760><c> visible</c><00:59:51.059><c> to</c><00:59:51.240><c> the</c><00:59:51.480><c> search</c><00:59:51.900><c> engine</c> 00:59:52.130 --> 00:59:52.140 align:start position:0% may not be visible to the search engine 00:59:52.140 --> 00:59:55.190 align:start position:0% may not be visible to the search engine so<00:59:52.559><c> from</c><00:59:53.040><c> an</c><00:59:53.280><c> SEO</c><00:59:53.640><c> perspective</c><00:59:54.059><c> this</c><00:59:54.480><c> is</c><00:59:54.660><c> this</c> 00:59:55.190 --> 00:59:55.200 align:start position:0% so from an SEO perspective this is this 00:59:55.200 --> 00:59:56.510 align:start position:0% so from an SEO perspective this is this this<00:59:55.319><c> these</c><00:59:55.740><c> three</c><00:59:55.799><c> lines</c><00:59:56.099><c> are</c><00:59:56.339><c> very</c> 00:59:56.510 --> 00:59:56.520 align:start position:0% this these three lines are very 00:59:56.520 --> 00:59:58.849 align:start position:0% this these three lines are very important<00:59:56.880><c> okay</c><00:59:57.240><c> and</c><00:59:57.960><c> what</c><00:59:58.140><c> they're</c><00:59:58.319><c> doing</c><00:59:58.500><c> is</c> 00:59:58.849 --> 00:59:58.859 align:start position:0% important okay and what they're doing is 00:59:58.859 --> 01:00:01.250 align:start position:0% important okay and what they're doing is if<00:59:59.099><c> this</c><00:59:59.339><c> is</c><00:59:59.460><c> a</c><00:59:59.640><c> boat</c><00:59:59.819><c> if</c><01:00:00.359><c> the</c><01:00:00.540><c> request</c><01:00:00.900><c> was</c> 01:00:01.250 --> 01:00:01.260 align:start position:0% if this is a boat if the request was 01:00:01.260 --> 01:00:03.829 align:start position:0% if this is a boat if the request was made<01:00:01.500><c> by</c><01:00:01.740><c> your</c><01:00:01.859><c> boat</c><01:00:02.099><c> and</c><01:00:02.880><c> this</c><01:00:03.000><c> is</c><01:00:03.240><c> both</c><01:00:03.480><c> it's</c> 01:00:03.829 --> 01:00:03.839 align:start position:0% made by your boat and this is both it's 01:00:03.839 --> 01:00:05.870 align:start position:0% made by your boat and this is both it's provided<01:00:04.260><c> to</c><01:00:04.380><c> you</c><01:00:04.500><c> by</c><01:00:04.740><c> this</c><01:00:04.980><c> nice</c><01:00:05.220><c> JavaScript</c> 01:00:05.870 --> 01:00:05.880 align:start position:0% provided to you by this nice JavaScript 01:00:05.880 --> 01:00:08.890 align:start position:0% provided to you by this nice JavaScript library<01:00:06.180><c> called</c><01:00:06.540><c> eastbold</c><01:00:07.260><c> okay</c> 01:00:08.890 --> 01:00:08.900 align:start position:0% library called eastbold okay 01:00:08.900 --> 01:00:13.370 align:start position:0% library called eastbold okay we<01:00:09.900><c> await</c><01:00:10.500><c> okay</c><01:00:11.160><c> we</c><01:00:11.579><c> await</c><01:00:12.000><c> the</c><01:00:12.180><c> whole</c><01:00:12.299><c> content</c> 01:00:13.370 --> 01:00:13.380 align:start position:0% we await okay we await the whole content 01:00:13.380 --> 01:00:17.170 align:start position:0% we await okay we await the whole content until<01:00:14.040><c> all</c><01:00:14.520><c> the</c><01:00:14.700><c> body</c><01:00:14.880><c> is</c><01:00:15.599><c> ready</c><01:00:15.900><c> okay</c><01:00:16.319><c> before</c> 01:00:17.170 --> 01:00:17.180 align:start position:0% until all the body is ready okay before 01:00:17.180 --> 01:00:21.170 align:start position:0% until all the body is ready okay before before<01:00:18.380><c> sending</c><01:00:19.380><c> a</c><01:00:19.559><c> response</c><01:00:20.099><c> very</c><01:00:20.760><c> important</c> 01:00:21.170 --> 01:00:21.180 align:start position:0% before sending a response very important 01:00:21.180 --> 01:00:23.030 align:start position:0% before sending a response very important folks<01:00:21.660><c> very</c><01:00:22.079><c> important</c><01:00:22.440><c> if</c><01:00:22.619><c> you</c><01:00:22.740><c> want</c><01:00:22.799><c> to</c><01:00:22.920><c> get</c> 01:00:23.030 --> 01:00:23.040 align:start position:0% folks very important if you want to get 01:00:23.040 --> 01:00:26.030 align:start position:0% folks very important if you want to get good<01:00:23.280><c> SEO</c><01:00:23.760><c> results</c><01:00:24.079><c> with</c><01:00:25.079><c> your</c><01:00:25.380><c> Shopify</c> 01:00:26.030 --> 01:00:26.040 align:start position:0% good SEO results with your Shopify 01:00:26.040 --> 01:00:28.789 align:start position:0% good SEO results with your Shopify hydrogen<01:00:26.579><c> store</c><01:00:26.819><c> phone</c><01:00:27.119><c> you</c><01:00:27.839><c> await</c><01:00:28.260><c> the</c><01:00:28.619><c> whole</c> 01:00:28.789 --> 01:00:28.799 align:start position:0% hydrogen store phone you await the whole 01:00:28.799 --> 01:00:32.450 align:start position:0% hydrogen store phone you await the whole body<01:00:29.099><c> okay</c><01:00:29.880><c> before</c><01:00:30.559><c> returning</c><01:00:31.559><c> the</c><01:00:32.280><c> the</c> 01:00:32.450 --> 01:00:32.460 align:start position:0% body okay before returning the the 01:00:32.460 --> 01:00:35.210 align:start position:0% body okay before returning the the response<01:00:33.359><c> otherwise</c><01:00:34.200><c> the</c><01:00:34.859><c> search</c><01:00:34.980><c> engine</c> 01:00:35.210 --> 01:00:35.220 align:start position:0% response otherwise the search engine 01:00:35.220 --> 01:00:38.089 align:start position:0% response otherwise the search engine like<01:00:35.579><c> I</c><01:00:35.700><c> said</c><01:00:35.819><c> earlier</c><01:00:36.119><c> major</c><01:00:36.599><c> see</c><01:00:36.960><c> this</c><01:00:37.200><c> bit</c> 01:00:38.089 --> 01:00:38.099 align:start position:0% like I said earlier major see this bit 01:00:38.099 --> 01:00:40.970 align:start position:0% like I said earlier major see this bit may<01:00:38.640><c> just</c><01:00:38.940><c> see</c><01:00:39.059><c> this</c><01:00:39.299><c> part</c><01:00:39.559><c> which</c><01:00:40.559><c> is</c><01:00:40.740><c> already</c> 01:00:40.970 --> 01:00:40.980 align:start position:0% may just see this part which is already 01:00:40.980 --> 01:00:43.490 align:start position:0% may just see this part which is already awaited<01:00:41.640><c> but</c><01:00:42.000><c> the</c><01:00:42.180><c> non-awaited</c><01:00:42.839><c> bit</c><01:00:42.960><c> may</c><01:00:43.319><c> not</c> 01:00:43.490 --> 01:00:43.500 align:start position:0% awaited but the non-awaited bit may not 01:00:43.500 --> 01:00:45.230 align:start position:0% awaited but the non-awaited bit may not be<01:00:43.680><c> seen</c><01:00:43.799><c> it</c><01:00:44.099><c> depends</c><01:00:44.400><c> on</c><01:00:44.520><c> how</c><01:00:44.760><c> long</c><01:00:44.880><c> it</c><01:00:45.059><c> will</c> 01:00:45.230 --> 01:00:45.240 align:start position:0% be seen it depends on how long it will 01:00:45.240 --> 01:00:48.470 align:start position:0% be seen it depends on how long it will take<01:00:45.420><c> to</c><01:00:45.540><c> do</c><01:00:45.900><c> it</c><01:00:46.020><c> but</c><01:00:46.319><c> in</c><01:00:46.920><c> in</c><01:00:47.099><c> but</c> 01:00:48.470 --> 01:00:48.480 align:start position:0% take to do it but in in but 01:00:48.480 --> 01:00:50.870 align:start position:0% take to do it but in in but that<01:00:49.140><c> means</c><01:00:49.500><c> that</c><01:00:49.859><c> you</c><01:00:50.099><c> also</c><01:00:50.520><c> when</c><01:00:50.760><c> you're</c> 01:00:50.870 --> 01:00:50.880 align:start position:0% that means that you also when you're 01:00:50.880 --> 01:00:52.430 align:start position:0% that means that you also when you're awaiting<01:00:51.359><c> content</c><01:00:51.720><c> you</c><01:00:51.960><c> need</c><01:00:52.079><c> to</c><01:00:52.200><c> make</c><01:00:52.260><c> sure</c> 01:00:52.430 --> 01:00:52.440 align:start position:0% awaiting content you need to make sure 01:00:52.440 --> 01:00:55.430 align:start position:0% awaiting content you need to make sure also<01:00:52.740><c> that</c><01:00:52.920><c> it's</c><01:00:53.099><c> fast</c><01:00:53.400><c> okay</c><01:00:53.880><c> because</c><01:00:54.359><c> if</c><01:00:55.140><c> it's</c> 01:00:55.430 --> 01:00:55.440 align:start position:0% also that it's fast okay because if it's 01:00:55.440 --> 01:00:56.569 align:start position:0% also that it's fast okay because if it's not<01:00:55.619><c> fast</c><01:00:55.799><c> then</c><01:00:56.099><c> you're</c><01:00:56.220><c> going</c><01:00:56.339><c> to</c><01:00:56.460><c> be</c> 01:00:56.569 --> 01:00:56.579 align:start position:0% not fast then you're going to be 01:00:56.579 --> 01:00:59.510 align:start position:0% not fast then you're going to be penalized<01:00:57.059><c> by</c><01:00:57.240><c> boats</c><01:00:57.780><c> in</c><01:00:58.440><c> terms</c><01:00:58.680><c> of</c><01:00:58.859><c> uh</c><01:00:59.160><c> your</c> 01:00:59.510 --> 01:00:59.520 align:start position:0% penalized by boats in terms of uh your 01:00:59.520 --> 01:01:02.390 align:start position:0% penalized by boats in terms of uh your current<01:00:59.760><c> vitals</c><01:01:00.480><c> right</c><01:01:00.660><c> so</c><01:01:01.380><c> if</c><01:01:01.680><c> the</c><01:01:01.859><c> awaited</c> 01:01:02.390 --> 01:01:02.400 align:start position:0% current vitals right so if the awaited 01:01:02.400 --> 01:01:04.309 align:start position:0% current vitals right so if the awaited content<01:01:02.700><c> takes</c><01:01:03.240><c> way</c><01:01:03.540><c> too</c><01:01:03.720><c> long</c><01:01:03.900><c> to</c><01:01:04.200><c> return</c> 01:01:04.309 --> 01:01:04.319 align:start position:0% content takes way too long to return 01:01:04.319 --> 01:01:07.010 align:start position:0% content takes way too long to return let's<01:01:04.859><c> say</c><01:01:05.040><c> five</c><01:01:05.339><c> seconds</c><01:01:05.640><c> even</c><01:01:06.180><c> one</c><01:01:06.780><c> two</c> 01:01:07.010 --> 01:01:07.020 align:start position:0% let's say five seconds even one two 01:01:07.020 --> 01:01:09.049 align:start position:0% let's say five seconds even one two three<01:01:07.200><c> seconds</c><01:01:07.500><c> that's</c><01:01:08.160><c> really</c><01:01:08.400><c> too</c><01:01:08.700><c> long</c><01:01:08.880><c> so</c> 01:01:09.049 --> 01:01:09.059 align:start position:0% three seconds that's really too long so 01:01:09.059 --> 01:01:10.789 align:start position:0% three seconds that's really too long so it<01:01:09.180><c> means</c><01:01:09.420><c> that</c><01:01:09.480><c> for</c><01:01:09.780><c> every</c><01:01:09.960><c> page</c><01:01:10.260><c> that</c><01:01:10.680><c> the</c> 01:01:10.789 --> 01:01:10.799 align:start position:0% it means that for every page that the 01:01:10.799 --> 01:01:12.530 align:start position:0% it means that for every page that the board<01:01:10.920><c> is</c><01:01:11.220><c> crawling</c><01:01:11.520><c> is</c><01:01:11.700><c> spending</c><01:01:12.059><c> two</c><01:01:12.299><c> three</c> 01:01:12.530 --> 01:01:12.540 align:start position:0% board is crawling is spending two three 01:01:12.540 --> 01:01:15.470 align:start position:0% board is crawling is spending two three seconds<01:01:12.839><c> that's</c><01:01:13.440><c> not</c><01:01:13.680><c> good</c><01:01:13.920><c> the</c><01:01:14.640><c> crowd</c><01:01:15.180><c> budget</c> 01:01:15.470 --> 01:01:15.480 align:start position:0% seconds that's not good the crowd budget 01:01:15.480 --> 01:01:16.930 align:start position:0% seconds that's not good the crowd budget and<01:01:15.720><c> stuff</c><01:01:15.900><c> like</c><01:01:16.079><c> that</c> 01:01:16.930 --> 01:01:16.940 align:start position:0% and stuff like that 01:01:16.940 --> 01:01:19.730 align:start position:0% and stuff like that you're<01:01:17.940><c> gonna</c><01:01:18.059><c> you're</c><01:01:18.299><c> gonna</c><01:01:18.420><c> be</c><01:01:19.200><c> um</c><01:01:19.260><c> you</c><01:01:19.680><c> know</c> 01:01:19.730 --> 01:01:19.740 align:start position:0% you're gonna you're gonna be um you know 01:01:19.740 --> 01:01:21.710 align:start position:0% you're gonna you're gonna be um you know if<01:01:20.460><c> you</c><01:01:20.579><c> have</c><01:01:20.700><c> a</c><01:01:20.760><c> lot</c><01:01:20.880><c> of</c><01:01:20.940><c> pages</c><01:01:21.180><c> for</c><01:01:21.480><c> example</c> 01:01:21.710 --> 01:01:21.720 align:start position:0% if you have a lot of pages for example 01:01:21.720 --> 01:01:23.349 align:start position:0% if you have a lot of pages for example you're<01:01:21.900><c> gonna</c><01:01:22.079><c> have</c><01:01:22.260><c> to</c><01:01:22.440><c> index</c><01:01:22.740><c> all</c><01:01:22.980><c> of</c><01:01:23.160><c> them</c> 01:01:23.349 --> 01:01:23.359 align:start position:0% you're gonna have to index all of them 01:01:23.359 --> 01:01:26.630 align:start position:0% you're gonna have to index all of them as<01:01:24.359><c> fast</c><01:01:24.540><c> as</c><01:01:24.720><c> you</c><01:01:24.960><c> want</c><01:01:25.260><c> okay</c><01:01:25.680><c> so</c><01:01:26.160><c> very</c><01:01:26.460><c> very</c> 01:01:26.630 --> 01:01:26.640 align:start position:0% as fast as you want okay so very very 01:01:26.640 --> 01:01:29.690 align:start position:0% as fast as you want okay so very very important<01:01:27.180><c> so</c><01:01:28.079><c> as</c><01:01:28.200><c> you</c><01:01:28.380><c> can</c><01:01:28.440><c> see</c><01:01:28.559><c> here</c><01:01:28.859><c> lifted</c> 01:01:29.690 --> 01:01:29.700 align:start position:0% important so as you can see here lifted 01:01:29.700 --> 01:01:32.329 align:start position:0% important so as you can see here lifted Commerce<01:01:30.319><c> technically</c><01:01:31.319><c> Savvy</c><01:01:31.859><c> but</c><01:01:31.980><c> in</c><01:01:32.160><c> terms</c> 01:01:32.329 --> 01:01:32.339 align:start position:0% Commerce technically Savvy but in terms 01:01:32.339 --> 01:01:34.430 align:start position:0% Commerce technically Savvy but in terms of<01:01:32.400><c> SEO</c><01:01:33.000><c> as</c><01:01:33.119><c> well</c><01:01:33.240><c> very</c><01:01:33.839><c> very</c><01:01:34.020><c> technical</c> 01:01:34.430 --> 01:01:34.440 align:start position:0% of SEO as well very very technical 01:01:34.440 --> 01:01:36.770 align:start position:0% of SEO as well very very technical Discovery<01:01:35.099><c> in</c><01:01:35.280><c> terms</c><01:01:35.460><c> of</c><01:01:35.520><c> technical</c><01:01:36.000><c> SEO</c><01:01:36.540><c> on</c> 01:01:36.770 --> 01:01:36.780 align:start position:0% Discovery in terms of technical SEO on 01:01:36.780 --> 01:01:39.109 align:start position:0% Discovery in terms of technical SEO on page<01:01:37.079><c> SEO</c><01:01:37.500><c> you</c><01:01:38.040><c> know</c><01:01:38.160><c> what</c><01:01:38.339><c> you're</c><01:01:38.520><c> doing</c><01:01:38.760><c> so</c> 01:01:39.109 --> 01:01:39.119 align:start position:0% page SEO you know what you're doing so 01:01:39.119 --> 01:01:42.470 align:start position:0% page SEO you know what you're doing so check<01:01:39.540><c> us</c><01:01:39.720><c> out</c><01:01:39.839><c> on</c><01:01:40.280><c> liftedcommons.com</c><01:01:41.280><c> and</c><01:01:42.240><c> uh</c> 01:01:42.470 --> 01:01:42.480 align:start position:0% check us out on liftedcommons.com and uh 01:01:42.480 --> 01:01:45.349 align:start position:0% check us out on liftedcommons.com and uh hope<01:01:42.900><c> you</c><01:01:43.400><c> you'll</c><01:01:44.400><c> find</c><01:01:44.520><c> great</c><01:01:44.760><c> and</c><01:01:45.059><c> you</c><01:01:45.240><c> have</c> 01:01:45.349 --> 01:01:45.359 align:start position:0% hope you you'll find great and you have 01:01:45.359 --> 01:01:47.990 align:start position:0% hope you you'll find great and you have great<01:01:45.599><c> resources</c><01:01:46.140><c> there</c><01:01:46.380><c> as</c><01:01:46.559><c> well</c><01:01:46.799><c> so</c><01:01:47.520><c> now</c><01:01:47.760><c> if</c> 01:01:47.990 --> 01:01:48.000 align:start position:0% great resources there as well so now if 01:01:48.000 --> 01:01:49.030 align:start position:0% great resources there as well so now if you<01:01:48.119><c> go</c><01:01:48.240><c> to</c><01:01:48.359><c> the</c> 01:01:49.030 --> 01:01:49.040 align:start position:0% you go to the 01:01:49.040 --> 01:01:53.270 align:start position:0% you go to the entry.client<01:01:50.040><c> okay</c><01:01:50.400><c> this</c><01:01:51.119><c> is</c><01:01:51.359><c> very</c> 01:01:53.270 --> 01:01:53.280 align:start position:0% entry.client okay this is very 01:01:53.280 --> 01:01:55.190 align:start position:0% entry.client okay this is very um<01:01:53.339><c> simple</c><01:01:53.819><c> page</c><01:01:54.240><c> it's</c><01:01:54.540><c> basically</c><01:01:54.780><c> handling</c> 01:01:55.190 --> 01:01:55.200 align:start position:0% um simple page it's basically handling 01:01:55.200 --> 01:01:57.589 align:start position:0% um simple page it's basically handling the<01:01:55.380><c> hydration</c><01:01:55.799><c> for</c><01:01:56.160><c> us</c><01:01:56.339><c> it's</c><01:01:56.880><c> very</c><01:01:57.180><c> technical</c> 01:01:57.589 --> 01:01:57.599 align:start position:0% the hydration for us it's very technical 01:01:57.599 --> 01:02:00.890 align:start position:0% the hydration for us it's very technical so<01:01:57.900><c> I</c><01:01:58.140><c> won't</c><01:01:58.200><c> get</c><01:01:58.500><c> into</c><01:01:58.619><c> that</c><01:01:58.920><c> and</c><01:01:59.880><c> finally</c><01:02:00.660><c> we</c> 01:02:00.890 --> 01:02:00.900 align:start position:0% so I won't get into that and finally we 01:02:00.900 --> 01:02:03.109 align:start position:0% so I won't get into that and finally we have<01:02:01.020><c> our</c><01:02:01.200><c> routes</c><01:02:01.619><c> really</c><01:02:01.859><c> oh</c><01:02:02.579><c> first</c><01:02:02.880><c> of</c><01:02:03.059><c> all</c> 01:02:03.109 --> 01:02:03.119 align:start position:0% have our routes really oh first of all 01:02:03.119 --> 01:02:05.030 align:start position:0% have our routes really oh first of all the<01:02:03.299><c> Towering</c><01:02:03.780><c> CSS</c><01:02:04.260><c> where</c><01:02:04.500><c> we</c><01:02:04.619><c> Define</c><01:02:04.740><c> the</c> 01:02:05.030 --> 01:02:05.040 align:start position:0% the Towering CSS where we Define the 01:02:05.040 --> 01:02:07.490 align:start position:0% the Towering CSS where we Define the target<01:02:05.280><c> style</c><01:02:05.700><c> is</c><01:02:06.059><c> very</c><01:02:06.720><c> minimalistic</c><01:02:07.319><c> at</c> 01:02:07.490 --> 01:02:07.500 align:start position:0% target style is very minimalistic at 01:02:07.500 --> 01:02:10.309 align:start position:0% target style is very minimalistic at this<01:02:07.680><c> time</c><01:02:07.859><c> but</c><01:02:08.160><c> it</c><01:02:08.640><c> does</c><01:02:08.880><c> the</c><01:02:09.119><c> job</c><01:02:09.299><c> for</c><01:02:10.140><c> the</c> 01:02:10.309 --> 01:02:10.319 align:start position:0% this time but it does the job for the 01:02:10.319 --> 01:02:13.010 align:start position:0% this time but it does the job for the purpose<01:02:10.619><c> of</c><01:02:10.859><c> the</c><01:02:10.980><c> demo</c><01:02:11.339><c> store</c><01:02:11.520><c> then</c><01:02:12.480><c> we</c><01:02:12.660><c> have</c><01:02:12.839><c> a</c> 01:02:13.010 --> 01:02:13.020 align:start position:0% purpose of the demo store then we have a 01:02:13.020 --> 01:02:16.010 align:start position:0% purpose of the demo store then we have a route<01:02:13.200><c> okay</c><01:02:13.740><c> this</c><01:02:14.460><c> is</c><01:02:14.579><c> basically</c><01:02:14.940><c> all</c><01:02:15.359><c> the</c><01:02:15.660><c> uh</c> 01:02:16.010 --> 01:02:16.020 align:start position:0% route okay this is basically all the uh 01:02:16.020 --> 01:02:18.410 align:start position:0% route okay this is basically all the uh this<01:02:16.559><c> is</c><01:02:16.680><c> basically</c><01:02:16.920><c> remix</c><01:02:17.220><c> okay</c><01:02:17.700><c> and</c><01:02:18.240><c> we're</c> 01:02:18.410 --> 01:02:18.420 align:start position:0% this is basically remix okay and we're 01:02:18.420 --> 01:02:20.210 align:start position:0% this is basically remix okay and we're gonna<01:02:18.540><c> get</c><01:02:18.780><c> into</c><01:02:18.960><c> the</c><01:02:19.260><c> details</c><01:02:19.680><c> of</c><01:02:19.859><c> each</c><01:02:20.099><c> of</c> 01:02:20.210 --> 01:02:20.220 align:start position:0% gonna get into the details of each of 01:02:20.220 --> 01:02:23.270 align:start position:0% gonna get into the details of each of these<01:02:20.520><c> routes</c><01:02:20.940><c> in</c><01:02:21.599><c> subsequent</c><01:02:22.140><c> videos</c><01:02:22.440><c> but</c> 01:02:23.270 --> 01:02:23.280 align:start position:0% these routes in subsequent videos but 01:02:23.280 --> 01:02:25.970 align:start position:0% these routes in subsequent videos but just<01:02:23.520><c> in</c><01:02:23.700><c> terms</c><01:02:23.940><c> of</c><01:02:24.000><c> the</c><01:02:24.359><c> structure</c><01:02:24.839><c> okay</c><01:02:25.200><c> what</c> 01:02:25.970 --> 01:02:25.980 align:start position:0% just in terms of the structure okay what 01:02:25.980 --> 01:02:28.130 align:start position:0% just in terms of the structure okay what this<01:02:26.339><c> local</c><01:02:26.640><c> brackets</c> 01:02:28.130 --> 01:02:28.140 align:start position:0% this local brackets 01:02:28.140 --> 01:02:31.430 align:start position:0% this local brackets dollar<01:02:28.740><c> symbol</c><01:02:29.280><c> local</c><01:02:29.579><c> is</c><01:02:29.880><c> all</c><01:02:30.059><c> about</c><01:02:30.260><c> this</c><01:02:31.260><c> is</c> 01:02:31.430 --> 01:02:31.440 align:start position:0% dollar symbol local is all about this is 01:02:31.440 --> 01:02:34.430 align:start position:0% dollar symbol local is all about this is the<01:02:31.859><c> it's</c><01:02:32.700><c> it</c><01:02:33.000><c> what</c><01:02:33.299><c> it's</c><01:02:33.540><c> what's</c><01:02:33.720><c> called</c><01:02:33.960><c> an</c> 01:02:34.430 --> 01:02:34.440 align:start position:0% the it's it what it's what's called an 01:02:34.440 --> 01:02:37.069 align:start position:0% the it's it what it's what's called an optional<01:02:34.980><c> segment</c><01:02:35.579><c> so</c><01:02:36.180><c> if</c><01:02:36.299><c> I</c><01:02:36.480><c> go</c><01:02:36.599><c> to</c><01:02:36.780><c> the</c><01:02:36.900><c> remix</c> 01:02:37.069 --> 01:02:37.079 align:start position:0% optional segment so if I go to the remix 01:02:37.079 --> 01:02:39.710 align:start position:0% optional segment so if I go to the remix documentation<01:02:38.040><c> and</c><01:02:38.700><c> I</c><01:02:38.880><c> check</c><01:02:39.059><c> the</c><01:02:39.299><c> routes</c> 01:02:39.710 --> 01:02:39.720 align:start position:0% documentation and I check the routes 01:02:39.720 --> 01:02:42.410 align:start position:0% documentation and I check the routes okay<01:02:40.380><c> you'll</c><01:02:41.339><c> have</c><01:02:41.520><c> the</c><01:02:41.700><c> concept</c><01:02:42.000><c> of</c><01:02:42.180><c> an</c> 01:02:42.410 --> 01:02:42.420 align:start position:0% okay you'll have the concept of an 01:02:42.420 --> 01:02:45.410 align:start position:0% okay you'll have the concept of an optional<01:02:42.900><c> segment</c><01:02:43.440><c> okay</c><01:02:44.099><c> optional</c><01:02:44.880><c> segment</c> 01:02:45.410 --> 01:02:45.420 align:start position:0% optional segment okay optional segment 01:02:45.420 --> 01:02:48.530 align:start position:0% optional segment okay optional segment where<01:02:45.780><c> is</c><01:02:46.020><c> that</c><01:02:46.200><c> you</c><01:02:46.500><c> see</c><01:02:46.740><c> exactly</c><01:02:47.579><c> here</c><01:02:47.880><c> and</c> 01:02:48.530 --> 01:02:48.540 align:start position:0% where is that you see exactly here and 01:02:48.540 --> 01:02:50.569 align:start position:0% where is that you see exactly here and then<01:02:48.660><c> this</c><01:02:48.900><c> is</c><01:02:49.020><c> for</c><01:02:49.200><c> the</c><01:02:49.380><c> language</c><01:02:49.619><c> and</c><01:02:50.400><c> the</c> 01:02:50.569 --> 01:02:50.579 align:start position:0% then this is for the language and the 01:02:50.579 --> 01:02:53.569 align:start position:0% then this is for the language and the idea<01:02:50.880><c> is</c><01:02:51.119><c> the</c><01:02:52.020><c> store</c><01:02:52.260><c> can</c><01:02:52.559><c> be</c><01:02:52.740><c> visited</c><01:02:53.220><c> by</c> 01:02:53.569 --> 01:02:53.579 align:start position:0% idea is the store can be visited by 01:02:53.579 --> 01:02:56.270 align:start position:0% idea is the store can be visited by let's<01:02:54.359><c> say</c><01:02:54.540><c> someone</c><01:02:54.780><c> in</c><01:02:55.079><c> France</c><01:02:55.319><c> okay</c><01:02:55.680><c> you</c><01:02:56.099><c> can</c> 01:02:56.270 --> 01:02:56.280 align:start position:0% let's say someone in France okay you can 01:02:56.280 --> 01:03:00.470 align:start position:0% let's say someone in France okay you can visit<01:02:56.460><c> products</c><01:02:57.660><c> like</c><01:02:58.260><c> this</c><01:02:58.559><c> okay</c><01:02:59.480><c> obviously</c> 01:03:00.470 --> 01:03:00.480 align:start position:0% visit products like this okay obviously 01:03:00.480 --> 01:03:03.109 align:start position:0% visit products like this okay obviously this<01:03:00.839><c> one</c><01:03:01.020><c> this</c><01:03:01.559><c> is</c><01:03:01.619><c> not</c><01:03:01.920><c> defined</c><01:03:02.400><c> and</c><01:03:02.880><c> let's</c> 01:03:03.109 --> 01:03:03.119 align:start position:0% this one this is not defined and let's 01:03:03.119 --> 01:03:04.430 align:start position:0% this one this is not defined and let's say<01:03:03.299><c> English</c> 01:03:04.430 --> 01:03:04.440 align:start position:0% say English 01:03:04.440 --> 01:03:07.089 align:start position:0% say English I<01:03:05.040><c> don't</c><01:03:05.160><c> know</c><01:03:05.280><c> if</c><01:03:05.460><c> this</c><01:03:05.640><c> is</c><01:03:05.819><c> defined</c> 01:03:07.089 --> 01:03:07.099 align:start position:0% I don't know if this is defined 01:03:07.099 --> 01:03:09.589 align:start position:0% I don't know if this is defined okay<01:03:08.099><c> it's</c><01:03:08.339><c> not</c><01:03:08.520><c> defined</c><01:03:08.940><c> because</c><01:03:09.119><c> the</c><01:03:09.420><c> the</c> 01:03:09.589 --> 01:03:09.599 align:start position:0% okay it's not defined because the the 01:03:09.599 --> 01:03:12.049 align:start position:0% okay it's not defined because the the language<01:03:09.960><c> is</c><01:03:10.380><c> not</c><01:03:10.980><c> um</c><01:03:10.980><c> the</c><01:03:11.640><c> language</c><01:03:11.760><c> is</c><01:03:11.940><c> not</c> 01:03:12.049 --> 01:03:12.059 align:start position:0% language is not um the language is not 01:03:12.059 --> 01:03:15.230 align:start position:0% language is not um the language is not defined<01:03:12.420><c> so</c><01:03:12.599><c> it's</c><01:03:13.140><c> just</c><01:03:13.380><c> here</c><01:03:14.220><c> for</c><01:03:14.520><c> this</c><01:03:14.760><c> it's</c> 01:03:15.230 --> 01:03:15.240 align:start position:0% defined so it's just here for this it's 01:03:15.240 --> 01:03:16.910 align:start position:0% defined so it's just here for this it's it's<01:03:15.359><c> the</c><01:03:15.720><c> capabilities</c><01:03:16.260><c> they</c><01:03:16.740><c> are</c> 01:03:16.910 --> 01:03:16.920 align:start position:0% it's the capabilities they are 01:03:16.920 --> 01:03:18.530 align:start position:0% it's the capabilities they are implemented<01:03:17.400><c> in</c><01:03:17.579><c> the</c><01:03:17.700><c> store</c><01:03:17.880><c> phone</c><01:03:18.119><c> but</c><01:03:18.359><c> it's</c> 01:03:18.530 --> 01:03:18.540 align:start position:0% implemented in the store phone but it's 01:03:18.540 --> 01:03:19.430 align:start position:0% implemented in the store phone but it's not<01:03:18.720><c> yet</c> 01:03:19.430 --> 01:03:19.440 align:start position:0% not yet 01:03:19.440 --> 01:03:21.530 align:start position:0% not yet um<01:03:19.559><c> added</c><01:03:19.980><c> okay</c><01:03:20.339><c> capabilities</c><01:03:21.180><c> that</c> 01:03:21.530 --> 01:03:21.540 align:start position:0% um added okay capabilities that 01:03:21.540 --> 01:03:24.549 align:start position:0% um added okay capabilities that provision<01:03:21.960><c> is</c><01:03:22.200><c> made</c><01:03:22.380><c> for</c><01:03:22.680><c> you</c><01:03:22.799><c> to</c><01:03:23.040><c> to</c><01:03:23.640><c> render</c> 01:03:24.549 --> 01:03:24.559 align:start position:0% provision is made for you to to render 01:03:24.559 --> 01:03:26.510 align:start position:0% provision is made for you to to render to<01:03:25.559><c> this</c><01:03:25.740><c> little</c><01:03:25.920><c> page</c><01:03:26.220><c> in</c><01:03:26.400><c> different</c> 01:03:26.510 --> 01:03:26.520 align:start position:0% to this little page in different 01:03:26.520 --> 01:03:27.829 align:start position:0% to this little page in different languages<01:03:26.819><c> but</c><01:03:27.180><c> the</c><01:03:27.359><c> different</c><01:03:27.599><c> languages</c> 01:03:27.829 --> 01:03:27.839 align:start position:0% languages but the different languages 01:03:27.839 --> 01:03:30.109 align:start position:0% languages but the different languages have<01:03:28.140><c> not</c><01:03:28.319><c> been</c><01:03:28.440><c> added</c><01:03:28.859><c> okay</c><01:03:29.160><c> so</c><01:03:29.700><c> that's</c><01:03:29.880><c> what</c> 01:03:30.109 --> 01:03:30.119 align:start position:0% have not been added okay so that's what 01:03:30.119 --> 01:03:32.569 align:start position:0% have not been added okay so that's what it's<01:03:30.240><c> for</c><01:03:30.540><c> and</c><01:03:31.260><c> it's</c><01:03:31.440><c> optional</c><01:03:31.920><c> meaning</c><01:03:32.220><c> that</c> 01:03:32.569 --> 01:03:32.579 align:start position:0% it's for and it's optional meaning that 01:03:32.579 --> 01:03:34.549 align:start position:0% it's for and it's optional meaning that let's<01:03:33.359><c> say</c><01:03:33.540><c> if</c><01:03:33.720><c> you</c><01:03:33.839><c> have</c><01:03:33.960><c> the</c><01:03:34.140><c> default</c> 01:03:34.549 --> 01:03:34.559 align:start position:0% let's say if you have the default 01:03:34.559 --> 01:03:36.770 align:start position:0% let's say if you have the default language<01:03:34.799><c> of</c><01:03:35.040><c> your</c><01:03:35.220><c> store</c><01:03:35.460><c> okay</c><01:03:36.000><c> in</c><01:03:36.599><c> the</c> 01:03:36.770 --> 01:03:36.780 align:start position:0% language of your store okay in the 01:03:36.780 --> 01:03:39.289 align:start position:0% language of your store okay in the different<01:03:36.960><c> language</c><01:03:37.460><c> I'll</c><01:03:38.460><c> say</c><01:03:38.700><c> most</c><01:03:39.000><c> of</c><01:03:39.180><c> you</c> 01:03:39.289 --> 01:03:39.299 align:start position:0% different language I'll say most of you 01:03:39.299 --> 01:03:41.510 align:start position:0% different language I'll say most of you watching<01:03:39.660><c> this</c><01:03:39.780><c> will</c><01:03:40.020><c> be</c><01:03:40.200><c> English</c><01:03:40.380><c> okay</c> 01:03:41.510 --> 01:03:41.520 align:start position:0% watching this will be English okay 01:03:41.520 --> 01:03:43.730 align:start position:0% watching this will be English okay so<01:03:42.180><c> for</c><01:03:42.480><c> a</c><01:03:42.660><c> different</c><01:03:42.780><c> language</c><01:03:43.079><c> usually</c><01:03:43.559><c> you</c> 01:03:43.730 --> 01:03:43.740 align:start position:0% so for a different language usually you 01:03:43.740 --> 01:03:45.049 align:start position:0% so for a different language usually you don't<01:03:43.859><c> want</c><01:03:44.040><c> a</c><01:03:44.160><c> different</c><01:03:44.339><c> language</c><01:03:44.700><c> to</c> 01:03:45.049 --> 01:03:45.059 align:start position:0% don't want a different language to 01:03:45.059 --> 01:03:48.530 align:start position:0% don't want a different language to appear<01:03:45.420><c> in</c><01:03:45.540><c> the</c><01:03:45.780><c> URL</c><01:03:46.440><c> okay</c><01:03:46.880><c> but</c><01:03:47.880><c> for</c><01:03:48.299><c> other</c> 01:03:48.530 --> 01:03:48.540 align:start position:0% appear in the URL okay but for other 01:03:48.540 --> 01:03:51.349 align:start position:0% appear in the URL okay but for other languages<01:03:48.960><c> Spanish</c><01:03:49.859><c> and</c><01:03:50.520><c> French</c><01:03:50.880><c> and</c><01:03:51.180><c> stuff</c> 01:03:51.349 --> 01:03:51.359 align:start position:0% languages Spanish and French and stuff 01:03:51.359 --> 01:03:54.589 align:start position:0% languages Spanish and French and stuff like<01:03:51.540><c> that</c><01:03:51.780><c> you</c><01:03:52.020><c> want</c><01:03:52.260><c> products</c><01:03:53.040><c> F</c><01:03:53.760><c> slash</c><01:03:54.299><c> FR</c> 01:03:54.589 --> 01:03:54.599 align:start position:0% like that you want products F slash FR 01:03:54.599 --> 01:03:57.309 align:start position:0% like that you want products F slash FR slash<01:03:55.140><c> products</c><01:03:55.619><c> and</c><01:03:56.160><c> one</c><01:03:56.339><c> side</c><01:03:56.579><c> note</c><01:03:56.819><c> there</c> 01:03:57.309 --> 01:03:57.319 align:start position:0% slash products and one side note there 01:03:57.319 --> 01:04:00.589 align:start position:0% slash products and one side note there at<01:03:58.319><c> lifted</c><01:03:58.740><c> commas</c><01:03:59.400><c> we</c><01:03:59.640><c> have</c> 01:04:00.589 --> 01:04:00.599 align:start position:0% at lifted commas we have 01:04:00.599 --> 01:04:01.150 align:start position:0% at lifted commas we have um 01:04:01.150 --> 01:04:01.160 align:start position:0% um 01:04:01.160 --> 01:04:02.750 align:start position:0% um uh 01:04:02.750 --> 01:04:02.760 align:start position:0% uh 01:04:02.760 --> 01:04:03.530 align:start position:0% uh um 01:04:03.530 --> 01:04:03.540 align:start position:0% um 01:04:03.540 --> 01:04:05.990 align:start position:0% um templates<01:04:04.380><c> that</c><01:04:04.920><c> allow</c><01:04:05.220><c> you</c><01:04:05.339><c> not</c><01:04:05.579><c> only</c><01:04:05.700><c> to</c> 01:04:05.990 --> 01:04:06.000 align:start position:0% templates that allow you not only to 01:04:06.000 --> 01:04:08.690 align:start position:0% templates that allow you not only to translate<01:04:06.180><c> to</c><01:04:06.599><c> add</c><01:04:06.920><c> you</c><01:04:07.920><c> have</c><01:04:08.040><c> starter</c><01:04:08.460><c> kits</c> 01:04:08.690 --> 01:04:08.700 align:start position:0% translate to add you have starter kits 01:04:08.700 --> 01:04:11.990 align:start position:0% translate to add you have starter kits that<01:04:08.819><c> not</c><01:04:08.940><c> only</c><01:04:09.059><c> allow</c><01:04:09.420><c> you</c><01:04:09.540><c> to</c><01:04:09.799><c> translate</c><01:04:10.799><c> the</c> 01:04:11.990 --> 01:04:12.000 align:start position:0% that not only allow you to translate the 01:04:12.000 --> 01:04:15.410 align:start position:0% that not only allow you to translate the um<01:04:12.059><c> to</c><01:04:12.900><c> add</c><01:04:13.020><c> the</c><01:04:13.740><c> local</c><01:04:14.040><c> here</c><01:04:14.579><c> but</c><01:04:15.180><c> also</c> 01:04:15.410 --> 01:04:15.420 align:start position:0% um to add the local here but also 01:04:15.420 --> 01:04:17.329 align:start position:0% um to add the local here but also translate<01:04:15.720><c> the</c><01:04:16.140><c> segment</c><01:04:16.559><c> itself</c><01:04:17.040><c> okay</c> 01:04:17.329 --> 01:04:17.339 align:start position:0% translate the segment itself okay 01:04:17.339 --> 01:04:19.670 align:start position:0% translate the segment itself okay because<01:04:17.880><c> you</c><01:04:18.119><c> can</c><01:04:18.299><c> see</c><01:04:18.480><c> here</c><01:04:18.780><c> what</c><01:04:19.200><c> Shopify</c> 01:04:19.670 --> 01:04:19.680 align:start position:0% because you can see here what Shopify 01:04:19.680 --> 01:04:22.490 align:start position:0% because you can see here what Shopify gives<01:04:20.220><c> you</c><01:04:20.339><c> out</c><01:04:20.579><c> of</c><01:04:20.700><c> the</c><01:04:20.819><c> box</c><01:04:21.000><c> it's</c><01:04:21.900><c> Alpha</c> 01:04:22.490 --> 01:04:22.500 align:start position:0% gives you out of the box it's Alpha 01:04:22.500 --> 01:04:25.309 align:start position:0% gives you out of the box it's Alpha slash<01:04:23.099><c> products</c><01:04:23.640><c> yes</c><01:04:24.599><c> in</c><01:04:24.960><c> the</c><01:04:25.020><c> case</c><01:04:25.140><c> of</c> 01:04:25.309 --> 01:04:25.319 align:start position:0% slash products yes in the case of 01:04:25.319 --> 01:04:27.710 align:start position:0% slash products yes in the case of Spanish<01:04:25.559><c> slash</c><01:04:25.980><c> products</c><01:04:26.520><c> the</c><01:04:27.119><c> the</c><01:04:27.299><c> segment</c> 01:04:27.710 --> 01:04:27.720 align:start position:0% Spanish slash products the the segment 01:04:27.720 --> 01:04:30.170 align:start position:0% Spanish slash products the the segment itself<01:04:28.079><c> is</c><01:04:28.319><c> not</c><01:04:28.500><c> translated</c><01:04:28.980><c> but</c><01:04:29.400><c> we</c><01:04:29.700><c> managed</c> 01:04:30.170 --> 01:04:30.180 align:start position:0% itself is not translated but we managed 01:04:30.180 --> 01:04:32.990 align:start position:0% itself is not translated but we managed to<01:04:30.359><c> create</c><01:04:30.740><c> starter</c><01:04:31.740><c> kits</c><01:04:32.040><c> at</c><01:04:32.160><c> lifted</c><01:04:32.579><c> commas</c> 01:04:32.990 --> 01:04:33.000 align:start position:0% to create starter kits at lifted commas 01:04:33.000 --> 01:04:34.730 align:start position:0% to create starter kits at lifted commas that<01:04:33.240><c> allows</c><01:04:33.599><c> you</c><01:04:33.660><c> to</c><01:04:33.900><c> create</c><01:04:34.140><c> to</c><01:04:34.559><c> translate</c> 01:04:34.730 --> 01:04:34.740 align:start position:0% that allows you to create to translate 01:04:34.740 --> 01:04:37.730 align:start position:0% that allows you to create to translate even<01:04:35.460><c> the</c><01:04:35.760><c> segment</c><01:04:36.059><c> itself</c><01:04:36.480><c> so</c><01:04:36.900><c> it's</c><01:04:37.140><c> hyper</c> 01:04:37.730 --> 01:04:37.740 align:start position:0% even the segment itself so it's hyper 01:04:37.740 --> 01:04:40.970 align:start position:0% even the segment itself so it's hyper hyper<01:04:38.299><c> localized</c><01:04:39.299><c> and</c><01:04:39.420><c> Hyper</c><01:04:39.839><c> and</c><01:04:40.380><c> it's</c><01:04:40.740><c> very</c> 01:04:40.970 --> 01:04:40.980 align:start position:0% hyper localized and Hyper and it's very 01:04:40.980 --> 01:04:43.010 align:start position:0% hyper localized and Hyper and it's very powerful<01:04:41.280><c> from</c><01:04:41.520><c> an</c><01:04:41.760><c> SEO</c><01:04:42.059><c> perspective</c><01:04:42.480><c> if</c><01:04:42.960><c> you</c> 01:04:43.010 --> 01:04:43.020 align:start position:0% powerful from an SEO perspective if you 01:04:43.020 --> 01:04:45.470 align:start position:0% powerful from an SEO perspective if you want<01:04:43.200><c> to</c><01:04:43.319><c> translate</c><01:04:43.559><c> the</c><01:04:44.160><c> the</c><01:04:44.880><c> the</c><01:04:44.880><c> path</c> 01:04:45.470 --> 01:04:45.480 align:start position:0% want to translate the the the path 01:04:45.480 --> 01:04:47.809 align:start position:0% want to translate the the the path segment<01:04:45.780><c> itself</c><01:04:46.140><c> so</c><01:04:46.799><c> now</c><01:04:46.980><c> if</c><01:04:47.220><c> you</c><01:04:47.400><c> go</c><01:04:47.579><c> back</c> 01:04:47.809 --> 01:04:47.819 align:start position:0% segment itself so now if you go back 01:04:47.819 --> 01:04:49.970 align:start position:0% segment itself so now if you go back here<01:04:48.119><c> we</c><01:04:48.420><c> have</c><01:04:48.599><c> the</c><01:04:48.780><c> index</c><01:04:49.020><c> file</c><01:04:49.260><c> this</c><01:04:49.500><c> is</c><01:04:49.619><c> your</c> 01:04:49.970 --> 01:04:49.980 align:start position:0% here we have the index file this is your 01:04:49.980 --> 01:04:51.950 align:start position:0% here we have the index file this is your site<01:04:50.160><c> map</c><01:04:50.400><c> okay</c><01:04:50.880><c> I'm</c><01:04:51.180><c> gonna</c><01:04:51.359><c> create</c><01:04:51.720><c> a</c> 01:04:51.950 --> 01:04:51.960 align:start position:0% site map okay I'm gonna create a 01:04:51.960 --> 01:04:54.470 align:start position:0% site map okay I'm gonna create a specific<01:04:52.260><c> video</c><01:04:52.799><c> specifically</c><01:04:53.760><c> dedicated</c><01:04:54.240><c> to</c> 01:04:54.470 --> 01:04:54.480 align:start position:0% specific video specifically dedicated to 01:04:54.480 --> 01:04:56.930 align:start position:0% specific video specifically dedicated to this<01:04:54.660><c> so</c><01:04:54.839><c> let's</c><01:04:55.020><c> skip</c><01:04:55.200><c> that</c><01:04:55.440><c> check</c><01:04:56.339><c> encourage</c> 01:04:56.930 --> 01:04:56.940 align:start position:0% this so let's skip that check encourage 01:04:56.940 --> 01:04:59.150 align:start position:0% this so let's skip that check encourage you<01:04:57.119><c> to</c><01:04:57.240><c> check</c><01:04:57.599><c> the</c><01:04:57.780><c> channel</c><01:04:58.020><c> uh</c><01:04:58.740><c> when</c><01:04:58.980><c> that</c> 01:04:59.150 --> 01:04:59.160 align:start position:0% you to check the channel uh when that 01:04:59.160 --> 01:05:01.069 align:start position:0% you to check the channel uh when that once<01:04:59.460><c> that</c><01:04:59.579><c> comes</c><01:04:59.940><c> out</c> 01:05:01.069 --> 01:05:01.079 align:start position:0% once that comes out 01:05:01.079 --> 01:05:03.170 align:start position:0% once that comes out and<01:05:01.559><c> obviously</c><01:05:02.099><c> similar</c><01:05:02.520><c> to</c><01:05:02.640><c> that</c><01:05:02.760><c> you</c><01:05:03.000><c> have</c> 01:05:03.170 --> 01:05:03.180 align:start position:0% and obviously similar to that you have 01:05:03.180 --> 01:05:05.930 align:start position:0% and obviously similar to that you have the<01:05:03.359><c> robot</c><01:05:03.660><c> txt</c><01:05:04.460><c> same</c><01:05:05.460><c> thing</c><01:05:05.579><c> I'm</c><01:05:05.760><c> going</c><01:05:05.880><c> to</c> 01:05:05.930 --> 01:05:05.940 align:start position:0% the robot txt same thing I'm going to 01:05:05.940 --> 01:05:08.450 align:start position:0% the robot txt same thing I'm going to create<01:05:06.059><c> a</c><01:05:06.299><c> video</c><01:05:06.420><c> specifically</c><01:05:07.020><c> for</c><01:05:07.260><c> that</c><01:05:07.500><c> and</c> 01:05:08.450 --> 01:05:08.460 align:start position:0% create a video specifically for that and 01:05:08.460 --> 01:05:10.849 align:start position:0% create a video specifically for that and uh<01:05:08.760><c> for</c><01:05:09.420><c> all</c><01:05:09.720><c> your</c> 01:05:10.849 --> 01:05:10.859 align:start position:0% uh for all your 01:05:10.859 --> 01:05:12.190 align:start position:0% uh for all your um 01:05:12.190 --> 01:05:12.200 align:start position:0% um 01:05:12.200 --> 01:05:14.450 align:start position:0% um active<01:05:13.200><c> the</c><01:05:13.380><c> predictive</c><01:05:13.740><c> search</c><01:05:13.980><c> right</c><01:05:14.280><c> and</c> 01:05:14.450 --> 01:05:14.460 align:start position:0% active the predictive search right and 01:05:14.460 --> 01:05:17.690 align:start position:0% active the predictive search right and demo<01:05:14.880><c> to</c><01:05:15.059><c> you</c><01:05:15.240><c> initially</c><01:05:16.040><c> uh</c><01:05:17.040><c> this</c><01:05:17.280><c> this</c><01:05:17.460><c> thing</c> 01:05:17.690 --> 01:05:17.700 align:start position:0% demo to you initially uh this this thing 01:05:17.700 --> 01:05:19.730 align:start position:0% demo to you initially uh this this thing here<01:05:17.940><c> the</c><01:05:18.299><c> search</c><01:05:18.540><c> here</c><01:05:18.839><c> basically</c><01:05:19.559><c> it's</c> 01:05:19.730 --> 01:05:19.740 align:start position:0% here the search here basically it's 01:05:19.740 --> 01:05:21.289 align:start position:0% here the search here basically it's using<01:05:20.099><c> this</c><01:05:20.280><c> thing</c><01:05:20.460><c> called</c><01:05:20.640><c> the</c><01:05:20.819><c> predictive</c> 01:05:21.289 --> 01:05:21.299 align:start position:0% using this thing called the predictive 01:05:21.299 --> 01:05:23.809 align:start position:0% using this thing called the predictive search<01:05:21.540><c> and</c><01:05:22.020><c> you</c><01:05:22.200><c> see</c><01:05:22.380><c> it</c><01:05:22.500><c> uses</c><01:05:22.859><c> the</c><01:05:23.040><c> API</c><01:05:23.460><c> like</c> 01:05:23.809 --> 01:05:23.819 align:start position:0% search and you see it uses the API like 01:05:23.819 --> 01:05:26.270 align:start position:0% search and you see it uses the API like I<01:05:24.000><c> was</c><01:05:24.119><c> saying</c><01:05:24.359><c> earlier</c><01:05:24.740><c> this</c><01:05:25.740><c> this</c><01:05:25.980><c> route</c> 01:05:26.270 --> 01:05:26.280 align:start position:0% I was saying earlier this this route 01:05:26.280 --> 01:05:28.490 align:start position:0% I was saying earlier this this route only<01:05:26.760><c> defines</c><01:05:27.240><c> the</c><01:05:27.420><c> loader</c><01:05:27.839><c> and</c><01:05:28.079><c> the</c><01:05:28.260><c> action</c> 01:05:28.490 --> 01:05:28.500 align:start position:0% only defines the loader and the action 01:05:28.500 --> 01:05:30.710 align:start position:0% only defines the loader and the action and<01:05:29.280><c> it</c><01:05:29.400><c> doesn't</c><01:05:29.579><c> Define</c> 01:05:30.710 --> 01:05:30.720 align:start position:0% and it doesn't Define 01:05:30.720 --> 01:05:34.309 align:start position:0% and it doesn't Define a<01:05:31.619><c> react</c><01:05:32.579><c> component</c><01:05:33.119><c> so</c><01:05:33.540><c> it</c><01:05:33.660><c> can</c><01:05:33.780><c> be</c><01:05:33.900><c> used</c><01:05:34.079><c> as</c> 01:05:34.309 --> 01:05:34.319 align:start position:0% a react component so it can be used as 01:05:34.319 --> 01:05:35.930 align:start position:0% a react component so it can be used as an<01:05:34.440><c> API</c><01:05:34.799><c> and</c><01:05:34.980><c> that's</c><01:05:35.160><c> exactly</c><01:05:35.579><c> what</c><01:05:35.760><c> they're</c> 01:05:35.930 --> 01:05:35.940 align:start position:0% an API and that's exactly what they're 01:05:35.940 --> 01:05:38.809 align:start position:0% an API and that's exactly what they're doing<01:05:36.119><c> here</c><01:05:36.420><c> in</c><01:05:36.780><c> this</c><01:05:37.020><c> uh</c><01:05:37.260><c> demo</c><01:05:37.799><c> store</c><01:05:37.980><c> and</c><01:05:38.700><c> you</c> 01:05:38.809 --> 01:05:38.819 align:start position:0% doing here in this uh demo store and you 01:05:38.819 --> 01:05:40.789 align:start position:0% doing here in this uh demo store and you have<01:05:39.000><c> the</c><01:05:39.119><c> blog</c><01:05:39.480><c> okay</c><01:05:39.720><c> this</c><01:05:40.260><c> is</c><01:05:40.440><c> just</c><01:05:40.559><c> gonna</c> 01:05:40.789 --> 01:05:40.799 align:start position:0% have the blog okay this is just gonna 01:05:40.799 --> 01:05:43.609 align:start position:0% have the blog okay this is just gonna render<01:05:41.640><c> the</c><01:05:42.359><c> blog</c><01:05:42.540><c> posts</c><01:05:42.900><c> that</c><01:05:42.960><c> are</c><01:05:43.140><c> on</c><01:05:43.380><c> your</c> 01:05:43.609 --> 01:05:43.619 align:start position:0% render the blog posts that are on your 01:05:43.619 --> 01:05:46.970 align:start position:0% render the blog posts that are on your your<01:05:44.099><c> Shopify</c><01:05:44.819><c> Plus</c><01:05:45.119><c> account</c><01:05:45.420><c> okay</c><01:05:46.020><c> so</c><01:05:46.859><c> I</c> 01:05:46.970 --> 01:05:46.980 align:start position:0% your Shopify Plus account okay so I 01:05:46.980 --> 01:05:48.770 align:start position:0% your Shopify Plus account okay so I think<01:05:47.099><c> all</c><01:05:47.280><c> in</c><01:05:47.460><c> all</c><01:05:47.640><c> I</c><01:05:47.880><c> highly</c><01:05:48.359><c> encourage</c><01:05:48.660><c> you</c> 01:05:48.770 --> 01:05:48.780 align:start position:0% think all in all I highly encourage you 01:05:48.780 --> 01:05:50.510 align:start position:0% think all in all I highly encourage you to<01:05:48.900><c> have</c><01:05:49.079><c> a</c><01:05:49.200><c> look</c><01:05:49.260><c> at</c><01:05:49.440><c> this</c><01:05:49.619><c> obviously</c><01:05:50.099><c> like</c><01:05:50.339><c> I</c> 01:05:50.510 --> 01:05:50.520 align:start position:0% to have a look at this obviously like I 01:05:50.520 --> 01:05:52.910 align:start position:0% to have a look at this obviously like I said<01:05:50.640><c> just</c><01:05:51.420><c> do</c><01:05:51.599><c> a</c><01:05:51.780><c> quick</c><01:05:51.960><c> walkthrough</c><01:05:52.619><c> I'm</c> 01:05:52.910 --> 01:05:52.920 align:start position:0% said just do a quick walkthrough I'm 01:05:52.920 --> 01:05:54.349 align:start position:0% said just do a quick walkthrough I'm gonna<01:05:53.040><c> drill</c><01:05:53.400><c> down</c><01:05:53.579><c> into</c><01:05:53.819><c> each</c><01:05:54.059><c> of</c><01:05:54.180><c> these</c> 01:05:54.349 --> 01:05:54.359 align:start position:0% gonna drill down into each of these 01:05:54.359 --> 01:05:56.870 align:start position:0% gonna drill down into each of these throughout<01:05:54.660><c> individually</c><01:05:55.260><c> in</c><01:05:56.160><c> subsequent</c> 01:05:56.870 --> 01:05:56.880 align:start position:0% throughout individually in subsequent 01:05:56.880 --> 01:05:58.970 align:start position:0% throughout individually in subsequent videos<01:05:57.180><c> similarly</c><01:05:58.079><c> for</c><01:05:58.260><c> the</c><01:05:58.440><c> components</c> 01:05:58.970 --> 01:05:58.980 align:start position:0% videos similarly for the components 01:05:58.980 --> 01:06:00.230 align:start position:0% videos similarly for the components which<01:05:59.099><c> I</c><01:05:59.280><c> think</c><01:05:59.400><c> will</c><01:05:59.520><c> be</c><01:05:59.700><c> the</c><01:05:59.819><c> next</c><01:06:00.000><c> video</c> 01:06:00.230 --> 01:06:00.240 align:start position:0% which I think will be the next video 01:06:00.240 --> 01:06:02.349 align:start position:0% which I think will be the next video we're<01:06:00.839><c> going</c><01:06:01.079><c> to</c><01:06:01.140><c> look</c><01:06:01.319><c> at</c><01:06:01.500><c> the</c> 01:06:02.349 --> 01:06:02.359 align:start position:0% we're going to look at the 01:06:02.359 --> 01:06:06.109 align:start position:0% we're going to look at the all<01:06:03.359><c> the</c><01:06:03.540><c> uh</c><01:06:03.900><c> Shopify</c><01:06:04.619><c> hydrogen</c><01:06:05.520><c> components</c> 01:06:06.109 --> 01:06:06.119 align:start position:0% all the uh Shopify hydrogen components 01:06:06.119 --> 01:06:09.170 align:start position:0% all the uh Shopify hydrogen components right<01:06:06.420><c> what</c><01:06:06.839><c> is</c><01:06:07.020><c> provided</c><01:06:07.559><c> to</c><01:06:07.920><c> us</c><01:06:08.040><c> by</c><01:06:08.339><c> Shopify</c> 01:06:09.170 --> 01:06:09.180 align:start position:0% right what is provided to us by Shopify 01:06:09.180 --> 01:06:11.630 align:start position:0% right what is provided to us by Shopify when<01:06:09.420><c> it</c><01:06:09.599><c> comes</c><01:06:09.900><c> to</c><01:06:10.079><c> the</c><01:06:10.460><c> components</c><01:06:11.460><c> that</c> 01:06:11.630 --> 01:06:11.640 align:start position:0% when it comes to the components that 01:06:11.640 --> 01:06:14.270 align:start position:0% when it comes to the components that they<01:06:11.819><c> give</c><01:06:12.000><c> us</c><01:06:12.180><c> to</c><01:06:12.480><c> create</c><01:06:12.660><c> the</c><01:06:13.280><c> Shopify</c> 01:06:14.270 --> 01:06:14.280 align:start position:0% they give us to create the Shopify 01:06:14.280 --> 01:06:16.730 align:start position:0% they give us to create the Shopify hydrogen<01:06:14.940><c> store</c><01:06:15.180><c> I</c><01:06:16.020><c> hope</c><01:06:16.200><c> you</c><01:06:16.319><c> found</c><01:06:16.559><c> this</c> 01:06:16.730 --> 01:06:16.740 align:start position:0% hydrogen store I hope you found this 01:06:16.740 --> 01:06:18.650 align:start position:0% hydrogen store I hope you found this video<01:06:16.920><c> useful</c><01:06:17.339><c> we</c><01:06:17.579><c> cover</c><01:06:17.819><c> a</c><01:06:18.059><c> lot</c><01:06:18.119><c> of</c><01:06:18.240><c> things</c><01:06:18.359><c> we</c> 01:06:18.650 --> 01:06:18.660 align:start position:0% video useful we cover a lot of things we 01:06:18.660 --> 01:06:20.089 align:start position:0% video useful we cover a lot of things we cover<01:06:18.900><c> a</c><01:06:19.140><c> lot</c><01:06:19.260><c> of</c><01:06:19.319><c> things</c><01:06:19.500><c> in</c><01:06:19.799><c> terms</c><01:06:20.040><c> of</c> 01:06:20.089 --> 01:06:20.099 align:start position:0% cover a lot of things in terms of 01:06:20.099 --> 01:06:23.230 align:start position:0% cover a lot of things in terms of security<01:06:20.460><c> in</c><01:06:21.000><c> terms</c><01:06:21.240><c> of</c><01:06:21.359><c> SEO</c><01:06:21.960><c> in</c><01:06:22.319><c> terms</c><01:06:22.559><c> of</c> 01:06:23.230 --> 01:06:23.240 align:start position:0% security in terms of SEO in terms of 01:06:23.240 --> 01:06:25.730 align:start position:0% security in terms of SEO in terms of customization<01:06:24.240><c> and</c><01:06:24.720><c> performance</c><01:06:25.200><c> and</c><01:06:25.440><c> so</c><01:06:25.619><c> on</c> 01:06:25.730 --> 01:06:25.740 align:start position:0% customization and performance and so on 01:06:25.740 --> 01:06:27.770 align:start position:0% customization and performance and so on so<01:06:26.280><c> I</c><01:06:26.400><c> hope</c><01:06:26.579><c> you</c><01:06:26.700><c> found</c><01:06:26.880><c> this</c><01:06:27.119><c> video</c><01:06:27.359><c> and</c><01:06:27.660><c> if</c> 01:06:27.770 --> 01:06:27.780 align:start position:0% so I hope you found this video and if 01:06:27.780 --> 01:06:30.289 align:start position:0% so I hope you found this video and if you<01:06:27.960><c> did</c><01:06:28.140><c> please</c><01:06:28.500><c> give</c><01:06:28.859><c> it</c><01:06:28.980><c> a</c><01:06:29.099><c> like</c><01:06:29.339><c> give</c><01:06:30.059><c> us</c><01:06:30.180><c> a</c> 01:06:30.289 --> 01:06:30.299 align:start position:0% you did please give it a like give us a 01:06:30.299 --> 01:06:32.870 align:start position:0% you did please give it a like give us a like<01:06:30.420><c> and</c><01:06:30.720><c> uh</c><01:06:31.319><c> feel</c><01:06:31.680><c> free</c><01:06:31.859><c> to</c><01:06:32.039><c> visit</c><01:06:32.220><c> lifted</c> 01:06:32.870 --> 01:06:32.880 align:start position:0% like and uh feel free to visit lifted 01:06:32.880 --> 01:06:35.150 align:start position:0% like and uh feel free to visit lifted comments.com<01:06:33.539><c> if</c><01:06:33.960><c> you</c><01:06:34.140><c> need</c><01:06:34.260><c> help</c><01:06:34.500><c> with</c><01:06:34.740><c> any</c> 01:06:35.150 --> 01:06:35.160 align:start position:0% comments.com if you need help with any 01:06:35.160 --> 01:06:38.450 align:start position:0% comments.com if you need help with any Shopify<01:06:35.819><c> plus</c><01:06:36.420><c> Shopify</c><01:06:37.140><c> hydrogen</c><01:06:37.859><c> related</c> 01:06:38.450 --> 01:06:38.460 align:start position:0% Shopify plus Shopify hydrogen related 01:06:38.460 --> 01:06:42.829 align:start position:0% Shopify plus Shopify hydrogen related services<01:06:38.880><c> and</c><01:06:39.839><c> check</c><01:06:40.140><c> our</c><01:06:40.460><c> starter</c><01:06:41.460><c> kits</c><01:06:41.839><c> to</c> 01:06:42.829 --> 01:06:42.839 align:start position:0% services and check our starter kits to 01:06:42.839 --> 01:06:46.329 align:start position:0% services and check our starter kits to see<01:06:43.799><c> what</c><01:06:44.039><c> we</c><01:06:44.160><c> can</c><01:06:44.280><c> do</c><01:06:44.520><c> how</c><01:06:45.299><c> we</c><01:06:45.480><c> can</c><01:06:45.599><c> help</c><01:06:45.780><c> and</c> 01:06:46.329 --> 01:06:46.339 align:start position:0% see what we can do how we can help and 01:06:46.339 --> 01:06:50.089 align:start position:0% see what we can do how we can help and help<01:06:47.339><c> you</c><01:06:47.520><c> launch</c><01:06:48.240><c> your</c><01:06:48.539><c> shopify's</c><01:06:49.260><c> custom</c> 01:06:50.089 --> 01:06:50.099 align:start position:0% help you launch your shopify's custom 01:06:50.099 --> 01:06:52.309 align:start position:0% help you launch your shopify's custom store<01:06:50.520><c> a</c><01:06:50.940><c> lot</c><01:06:51.059><c> quicker</c><01:06:51.480><c> than</c><01:06:51.720><c> it</c><01:06:51.960><c> will</c><01:06:52.079><c> take</c> 01:06:52.309 --> 01:06:52.319 align:start position:0% store a lot quicker than it will take 01:06:52.319 --> 01:06:54.470 align:start position:0% store a lot quicker than it will take normally<01:06:52.740><c> thank</c><01:06:53.520><c> you</c><01:06:53.700><c> for</c><01:06:53.819><c> watching</c><01:06:54.119><c> and</c><01:06:54.359><c> I'll</c> 01:06:54.470 --> 01:06:54.480 align:start position:0% normally thank you for watching and I'll 01:06:54.480 --> 01:06:57.859 align:start position:0% normally thank you for watching and I'll see<01:06:54.599><c> you</c><01:06:54.720><c> in</c><01:06:54.780><c> the</c><01:06:54.900><c> next</c><01:06:55.020><c> one</c><01:06:55.200><c> cheers</c>