Marketing Automation With Customer io + Next js

Aug 15, 2023

Marketing Automation With Customer io + Next js

Joel hooks has been building full-featured marketing automation using Nextjs \u0026 Customer.io for some of the most popular dev education sites out there. In this episode, he’ll share how it’s done!

00:00:00 Welcome
00:01:00 Guest introduction
00:03:32 Topic introduction
00:22:28 Where should we start?
00:30:57 Working from a root page vs a subdirectory
00:39:18 Refactoring a bit
00:44:13 Switching to automation from hard coded
00:59:05 Checking if someone is a customer
01:02:41 What could go wrong?
01:09:45 Working with visible source
01:17:56 Jason pretends he’s a hacker
01:25:09 When should you start paying for automation?

* demo: https://marketing-automation-next.net…

* repo: https://github.com/learnwithjason/mar…

Links:

* https://nextjs.org/docs/middleware

* https://fauna.com

* https://www.amazon.com/Dont-Make-Me-T…

* https://createandsell.co/courses/mast…

* https://joelhooks.com/marketing-autom…

* https://developer.mozilla.org/en-US/d…

* https://github.com/eggheadio/egghead-…

* https://www.learnwithjason.dev/person…

* https://customer.io/

* https://convertkit.com/

* https://jason.af/egghead

Watch future episodes live at https://twitch.tv/jlengstorf

This episode was sponsored by:
- Netlify (https://lwj.dev/netlify)
- Fauna (https://lwj.dev/fauna)
- Auth0 (https://lwj.dev/auth0)

Live transcription by White Coat Captioning (https://whitecoatcaptioning.com/)

Credits:

Local Elevator by Kevin MacLeod is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/…)
Source: http://incompetech.com/music/royalty-…
Artist: http://incompetech.com/

Busybody by Audionautix is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/…)
Artist: http://audionautix.com/

Additional sound effects obtained from https://www.zapsplat.com

Content

4.64 -> hello everyone and welcome to another

7.2 -> episode of learn with jason this is our

8.88 -> first episode of uh 2022 so i am very

12.24 -> excited to bring back

14 -> good friends multiple guests uh joel

16.48 -> hooks how you doing man doing great how

18.32 -> are you doing i'm doing great i'm uh i'm

20.24 -> excited to have you back i we always do

23.119 -> something wild whenever you're on the

24.32 -> show so i'm looking forward to it uh

26.56 -> show's usually fun but i try to keep it

28.16 -> all business jason

35.2 -> there's no whimsy here today folks

37.52 -> we're not here to have fun

38.9 -> [Laughter]

40.96 -> that's fine you really gotta define fun

42.559 -> in your own way and this is like how i

44.079 -> define my my this is how i entertain

45.84 -> myself um

47.68 -> and make money on the internet so that's

49.36 -> not where yeah well actually i would

51.12 -> love to um you know i feel like you have

54 -> a

54.879 -> sort of collection of things that you do

56.559 -> so so for folks who aren't familiar with

58.559 -> your work do you want to give us a bit

59.76 -> of a background

61.199 -> uh so um i'm a co-founder of egghead i o

65.199 -> uh so we've been working on that for the

66.88 -> last eight years which is

68.96 -> my

69.68 -> record length for a job of any sort um

71.84 -> so it's actually kind of unusual for me

73.439 -> to like work a job for that long and

74.96 -> it's weird because i've been building

76.24 -> the same software for eight years so

78.56 -> acad i o is my primary line of business

80.72 -> we do uh we work with with other

82.56 -> partners to launch course products like

84.799 -> kensey dodds we we helped him with epic

86.64 -> react and

87.84 -> uh dan abramov and maggie appleton we

90.24 -> helped them with just javascript so we

92.079 -> do some of that on the side taking what

93.439 -> we've learned

94.479 -> at egghead and applying that to like

96.799 -> course launches and like product product

99.04 -> launches for for

100.479 -> um programming experts basically so we

103.04 -> we do a lot of that these days as well

104.799 -> mm-hmm yeah and yeah the ben the chat uh

108.159 -> all i had to do was turn it off and turn

109.36 -> it on again and it's it's back now uh

111.439 -> thank you for the sub chris 30 months oh

113.6 -> my goodness um

116.24 -> it's it kind of blows my mind that i've

117.68 -> even been doing this show for 30 months

119.2 -> but

120.079 -> yeah it's like that's a

123.04 -> it's just relentless like the way you

124.64 -> you you produce shows uh just blows my

126.88 -> mind because um i've done a podcast and

129.2 -> you know like i made it like a year and

130.399 -> a half and and that was

132.8 -> you know but it's like like it's just

134 -> like you have to like the the steady

136.56 -> habit of the thing is is really really

138.72 -> quite quite interesting it's the i i

141.2 -> swear it's the secret to

143.04 -> to everything man is you just keep

144.56 -> showing up right like you're showing up

146.959 -> showing up keep doing the thing and then

148.48 -> uh and then also like find people to

151.36 -> help you know i have uh like aidan helps

153.44 -> me with the the scheduling and he runs

155.44 -> the website and the twitter account and

157.28 -> i've got chris helping me with the

158.56 -> editing of the

160 -> the shows and like getting them posted

161.44 -> up on youtube and i think without that

162.879 -> stuff i would be

164.08 -> there's no way i'd keep doing it it's

165.519 -> just i mean when you start a thing you

167.12 -> have to kind of do it all because yeah

168.879 -> nobody even knows what you're doing and

170.08 -> there's no example of it and you have it

171.68 -> in your head and you're like well this

172.879 -> is what it needs to be so you're making

174.879 -> it and then

176.16 -> as you bring you know you figure out

177.68 -> what it is then you can bring

178.72 -> collaborators in and tell them well this

180.48 -> is what and that's the like that's

181.68 -> always been a challenge that's a real

182.8 -> it's a daily challenge for me still but

184.8 -> it's like you know

186.239 -> you your show right like you you know

188.319 -> and have the vision you're kind of the

189.519 -> ceo of learn with jason so you have to

191.44 -> like figure that out over time but you

193.2 -> know um when you start bringing in

195.28 -> people to help it really it becomes more

196.8 -> fun and interesting too honestly

198.08 -> absolutely yeah and there's different

199.84 -> ways to bring in help right so like i i

201.68 -> hired help for the things that were i

204.159 -> just i don't even know how to start

205.599 -> automating but i also automated a bunch

207.44 -> of stuff and and that's um that's

209.76 -> something that i actually learned

211.519 -> from you

212.64 -> was uh

214 -> how to make the robots do some of the

215.84 -> work around like automation and

217.599 -> marketing and things like that so so um

220.48 -> and that's that's kind of what we're

221.36 -> talking about today is is this

223.92 -> automation and and how to make some

226.319 -> things just

228.08 -> go away so that you don't have to think

229.599 -> about them so an example of what i've

231.2 -> done i learned with jason is i use

233.28 -> calendly to book right and whenever

236.319 -> somebody books through my calendly link

238.48 -> it automatically like i have zapier set

241.92 -> up to detect new calendar events and

244.4 -> then it automatically invites the

246.319 -> captioning service like i've got uh

248 -> jordan on today doing captioning um and

250.4 -> i and it also alerts aiden who who does

253.04 -> the the actual booking part and kind of

255.36 -> kicks off this whole initial setup so

258.079 -> that all i have to do is write a

259.199 -> description for the episode and that is

261.919 -> you know that's really really nice to to

263.84 -> just have that stuff

265.36 -> happen it's it's a few clicks stuff that

268 -> i don't have to do it saves me five

269.199 -> minutes an episode but you know i'm at

271.199 -> close to 300 episodes now and that's

272.8 -> that's a lot of minutes saved

274.72 -> i don't think it's even about the

276 -> minutes for me because like you you are

278.24 -> saving minutes and you have minutes to

280.4 -> spare probably right like there's

281.6 -> there's minutes of your day where you

283.759 -> you could fit that in but what it does

285.199 -> is it removes like

286.8 -> a layer of tedium from the process to

288.88 -> where you'll actually

290.72 -> actually do it right like it's like

292.32 -> doing that same stuff over and over

294.32 -> again i do one when danger is like

296.16 -> jumping in like i'm gonna automate this

297.6 -> right away right like you know like

299.199 -> folks get in there and it's like i want

300.32 -> to build robots instead of doing the

302.16 -> actual work and i think that's like an

303.84 -> important thing to understand because i

305.36 -> know like you did this manually before

307.68 -> you ever automated it

309.28 -> and like getting in there and you know

310.72 -> like figuring out what you actually need

312.16 -> and when you're your own user by talking

314.4 -> to your users is kind of a

316.96 -> that's a challenge right because we if

318.56 -> we can lie to anybody we can lie to

320 -> ourselves and you know like anything

321.919 -> that follows that but you know i mean

323.28 -> like it's like the

324.8 -> uh just as programmers like it's just

326.639 -> easy to jump into the to the to the code

328.88 -> and try to automate stuff really early

330.88 -> versus like let's come up with an actual

332.96 -> process

334.24 -> that that works and do it do a long form

336.72 -> and then slice the valuable pieces off

339.52 -> of that instead of you know like trying

341.199 -> to like jump to a solution i guess yeah

344.08 -> for sure so so actually that's a i mean

347.039 -> how how do you make that call like

349.28 -> because there is a spectrum of you you

351.44 -> got to do it for yourself you got to

352.88 -> learn how the thing works um you can

354.96 -> delegate it to a person that you pay and

358.08 -> then you can try to build an automation

360.08 -> and that automation comes with you know

362.639 -> the upside of the thing just happens

364.16 -> automatically and the downside of you

365.6 -> got to keep that automation working and

367.199 -> maintenance all those things um

370.4 -> what are the the kind of heuristics

371.919 -> you're using when you're making the call

373.36 -> about do you do it yourself do you pay

374.639 -> somebody else do you build a robot

378.08 -> good question um like if i could give a

380.639 -> definitive answer i'd i'd

383.12 -> probably be doing a lot better i have no

384.96 -> idea right like to me it's like i'm

386.56 -> always i'm always just trying to like i

388.08 -> kind of play it by ear and i do

389.6 -> everything long form and i i think i

391.12 -> over indexed on on automation and trying

393.36 -> to

394.4 -> um

395.28 -> i've done it a few times right like

396.56 -> where i'll build a process i'll build an

398.56 -> extensive process and it's based on my

401.12 -> experience and assumptions versus like

403.12 -> going

404.16 -> um and when i say you know like talking

406 -> to your users and it's difficult when

407.52 -> you are your only user or whatever but

409.36 -> like like

410.56 -> if you're if i'm doing it for a business

412.96 -> i know that what i need to do first is

415.199 -> like find out what problems people

416.639 -> actually have before i go in and like

419.68 -> tell them that here's a solution which

421.199 -> is a very push model right like instead

422.8 -> of like getting in there and talking to

424 -> people and you know what sort of

425.44 -> problems are you actually having and a

426.72 -> lot of my job these days is like

428.319 -> supporting my team that way to where i'm

429.919 -> you know like what do they need

431.68 -> in terms of daily process what do they

433.36 -> need to like have automated and what's

435.28 -> important for them to do their jobs

437.039 -> better and then they're you know

439.759 -> the idea would be that they would then

442.16 -> support the users and and we we were

444.319 -> building kind of a layered step of that

446.479 -> kind of support because you know like

448.319 -> when you're you're managing or leading

450.16 -> teams like that's your job right like

452.24 -> you are there to support the team so

454 -> they can better support the end users or

456.4 -> customers that they're they're servicing

458.8 -> um whatever you know however those

460.24 -> layers might be hopefully there's only a

461.52 -> few

463.52 -> yeah well i've heard this described on

465.36 -> like on big companies they'll spin up a

467.199 -> whole like internal tools team and and

469.44 -> the whole job of the internal tools team

471.199 -> is

471.84 -> treat the developers on the team as the

473.599 -> customer and just build stuff to make

476.08 -> them more effective um and and yeah so

479.599 -> that it is interesting because i like

481.36 -> for me at least i found that

483.599 -> i i also have the tendency to try to

485.84 -> automate early um i think it might just

487.759 -> be like the toxic trait of developers as

489.599 -> we're like i can automate this task uh i

491.52 -> think there's like xkcd that that that

494.24 -> rips this apart pretty handily but

496.16 -> the

497.039 -> the problem that i've run into is that

499.44 -> for me at least a lot of the things i do

501.919 -> aren't repetitive enough to be truly

504.72 -> automated like yes i respond to a lot of

507.039 -> emails but none of my emails are like

508.72 -> copy paste right um so the only thing

511.36 -> that really is automatable for me is

514.399 -> learn with jason because every episode i

517.279 -> learned with jason it's like it's on a

519.039 -> schedule it has the same format you know

521.599 -> we do that we do the same thing with a

523.68 -> different guest twice a week and if it

526 -> wasn't for that very specific

528.8 -> very predictable process i don't think

530.64 -> it would make sense to automate because

532 -> like you know the robots can't make a

534.16 -> judgment call about oh well we're going

536.16 -> to actually this time it's not going to

537.6 -> be

538.32 -> you know a two guest it's going to be

540.32 -> four guests or whatever like you can't

542.16 -> do that it's got to be very like very

544.64 -> structured and that rigidity comes from

547.2 -> you know just doing the doing the show

549.12 -> enough times that i realized like i

550.88 -> don't need to make the format of the

552.32 -> show interesting the content is much

553.839 -> interesting

557.04 -> well i mean and you know at the end of

558.399 -> the day it's like okay you have a

559.92 -> checklist and it's a checklist that you

562.08 -> use every single time and you know the

565.04 -> steps that never change that's the stuff

566.88 -> that you can automate and and you have

568.64 -> to like run through the checklist and

570.24 -> refine that

571.44 -> and then that's where you can identify

573.36 -> right like parts of the process that now

575.68 -> um lend themselves well to automation

578.24 -> and and

579.2 -> capturing because it's like you wouldn't

580.88 -> want to um

582.32 -> i don't know it's like when when you

583.76 -> have users coming to your website

586.16 -> and um

588.399 -> like say you're gathering emails right

589.68 -> like you have a new business and you're

590.72 -> gathering some emails and you're getting

592.72 -> 10 signups a week um at that point i can

595.6 -> literally google each one of those

597.36 -> individuals

598.56 -> reach out to them um ask them you know

600.72 -> like why are you here what are you doing

602 -> you know what you're into here how are

603.36 -> you solving this problem currently like

605.04 -> ask them questions

606.64 -> when you get to 100 users your ability

608.64 -> to do that for each one right gets

610.72 -> dramatically lowered so you know can i

612.48 -> do a survey question now so i'll

614.079 -> automate and add a survey question

616.16 -> and then that will put them you know are

617.44 -> you a developer or a designer you know

619.2 -> for instance and you can you can ask

620.8 -> them

621.519 -> uh that and then you can you can i'm i'm

623.6 -> really only trying to talk to developers

625.04 -> right now so i'm going to get 10 of

626.72 -> those on the phone every week versus

629.6 -> every single person that signs up and

631.2 -> you're slowly you know and then over 500

634 -> uh people on your list right like as you

636 -> you gain momentum and you kind of hone

637.76 -> in the solution or whatever it is you're

639.76 -> doing to help those people that's when

641.04 -> you can really start thinking about

642.079 -> automation and i'm talking about like

644.24 -> automating emails and onboarding

645.839 -> sequences and that kind of thing um when

647.6 -> i want to do this uh just because we're

649.36 -> we're gonna we're gonna talk about

651.04 -> customer relationship managers and all

652.88 -> that fun stuff today yeah yeah yeah so

654.64 -> let's let's talk a little bit about like

656 -> the specifics of today so so

658.16 -> what we have written down is that we're

659.44 -> going to do marketing automation with

660.8 -> customer i o and next js um

664.079 -> what like

665.6 -> what i know there's a ton of stuff that

667.92 -> that can be done i know that you've

669.839 -> you've shown me some of the systems that

671.12 -> you use uh in terms of personalizing

673.519 -> experiences based on what people do in

675.04 -> email so so today what what did you want

677.519 -> to tackle as our project

680.32 -> it's purely technical i don't have a lot

681.92 -> of um

683.04 -> like from the marketing perspective like

684.48 -> the strategy one of the things that

686.399 -> always aggravates me is when i go to a

689.12 -> website that i'm a subscriber or a

691.12 -> member of

692.399 -> and the home page is

694.959 -> um you know it looks like i'm i'm a new

697.519 -> customer right like you go there and

698.959 -> it's like it's like click here for your

700.399 -> dashboards in the corner

702.399 -> but it's still the marketing front page

704.48 -> and that's how it was on egghead and it

705.68 -> was it was difficult for us we actually

707.12 -> took the opposite approach where we

708.399 -> didn't have a marketing homepage and

709.76 -> gave everybody the same

711.6 -> kind of like here's all the content like

713.68 -> our curated content section and what i

716.24 -> would prefer is if if you come to our

718 -> page like what can we do at that point

720.72 -> to like understand who you are do we

722.48 -> actually know you

723.839 -> um why are you coming to the site are

725.36 -> you one of our instructors are you a

726.88 -> customer there's all these questions

728.399 -> that we could use to present um

730.959 -> a a varied home page and and you know

733.44 -> like if you're

734.639 -> using any any modern system you can do

736.48 -> that by

737.839 -> you know i use react so you can have a

739.6 -> use effect hook that checks and sees you

742 -> know

742.88 -> aren't they logged in and after load it

744.56 -> would load them in

746 -> um

747.36 -> but the problem with that is like you

748.56 -> get flashing and stuff right like it's

749.839 -> just the user experience isn't that

751.279 -> great or you redirect them and the url

753.2 -> changes or you know something kind of

755.12 -> unexpected happens to the user they kind

756.88 -> of just like diminishes their their

758.959 -> overall experience in what they're doing

761.6 -> uh but with next 12

764.24 -> um next gs12 they introduced middleware

768.079 -> um so you can you can write this

770 -> middleware and the middleware actually

772.079 -> runs

773.12 -> on

774.24 -> before the pages is served so it's at

776.48 -> the server level it's edge distributed

779.92 -> depending on where you're deploying to

781.92 -> uh and and you get like this really nice

783.76 -> ability to intercept requests

786.959 -> do some sort of work

788.56 -> and then

789.6 -> write the page that responds so you can

791.92 -> you can pick and choose kind of what

793.279 -> what page you want to respond or have

795.36 -> like a follow-through default that

796.56 -> everybody ends up going to if they don't

798.079 -> they don't match something

799.68 -> um so we're using customer i o which i

801.92 -> like quite a bit it makes just a nice

803.6 -> flexible has good automations and um

806.959 -> kind of lets you do transactional and

808.88 -> marketing emails meaning you can send

811.68 -> receipts and that sort of thing right or

813.92 -> marketing materials because there's like

815.839 -> legally there's two different

817.04 -> distinctions between the types of emails

818.72 -> you're sending and what you need to do

820.24 -> to do that um so we've been using them a

822.16 -> lot and i like them a lot and they have

823.519 -> a pretty good api and it kind of allows

825.36 -> you to

826.56 -> um outside of your own user database

829.68 -> capture user information and kind of use

831.839 -> their kind of existing way that they

833.279 -> attach to users

834.959 -> in the browser and keep information and

837.279 -> even if they're not logged in i can

839.279 -> like know who they are because they

840.639 -> clicked on a link in our email that sort

842.32 -> of thing which is really oh yeah

844.88 -> well that's

845.76 -> that's really cool because then then i

847.36 -> can capture that and then display you

848.959 -> know like i know you're a customer like

850.959 -> you we don't need to sell to you we can

852.959 -> instead you know just ask you to log in

854.639 -> so you can access your stuff

856.72 -> what you're bringing up something that i

857.92 -> think is really interesting because i i

860 -> know

860.8 -> that

861.76 -> data collection makes developers queasy

863.92 -> sometimes they're like oh no it's about

865.279 -> everything in in private mode no no data

867.44 -> collection at all

868.639 -> and that's for good reason like a lot of

870.8 -> the stuff that this that that companies

872.72 -> are doing feels really shady to to like

876 -> scrape as much personal data as they can

878.16 -> but i think that you know that that's

879.6 -> the unfortunate like far end of that

881.519 -> spectrum because in the middle there's a

883.36 -> lot of really cool stuff that we can do

884.959 -> i love the fact that when i go to a

886.959 -> website if that website knows who i am

890.399 -> it it shows me like go to your dashboard

892.88 -> instead of sign up now here's a deal

894.48 -> like well i already paid you i can't get

896.16 -> that deal anymore it doesn't apply to me

898.24 -> show me stuff that's relevant or or if i

901.44 -> have gone through part of the site show

904.56 -> me like what's next you know i'm uh

907.04 -> you've hey you did like step one of our

909.12 -> thing we know that now and when you go

911.519 -> to this this part of the docs we're

912.88 -> actually going to surface this section

914.639 -> of the docs that you need or whatever it

916.48 -> is like you can actually make a really

918.56 -> personalized experience and that's

920.399 -> useful that's not slimy like you you can

922.72 -> be evil of course like any tool can be

924.8 -> used for evil but i really really like

927.04 -> it when it's used to

929.04 -> usefully personalize

931.04 -> yeah and i mean it's it's because it's

932.88 -> manipulation at the end of the day and

934.56 -> there's like you know like the white hat

936.16 -> gray hat black hat style approach to to

939.12 -> thinking about that where you know like

940.56 -> i can be doing this in a nefarious way

942 -> where i'm trying to manipulate

943.68 -> you into some ends that that only serves

946 -> me and doesn't serve you

948.079 -> but my the way i look at it and i think

950.48 -> where it gets really sketchy is when you

952.16 -> start selling and sharing the data

954 -> across yes providers to me like that's

956.56 -> you know like they didn't request that

957.839 -> it's all about consent and not tricking

959.279 -> people into the terms of service um so

961.279 -> like we always like double opt-in and we

963.04 -> want to do that sort of thing with

964.079 -> people who are marketing to them um just

966.32 -> to you know like verify that that you

968.16 -> know we understand what's about to

969.759 -> happen so

970.88 -> like you're you're signing up for this

972.24 -> and we're gonna send this and try to be

973.44 -> useful and not just sell you stuff

976 -> so i think that's super important and

977.839 -> especially you know it's like the

978.88 -> consent part of it um which uh you know

981.839 -> just just generally um

984.399 -> oh my gosh i got started thinking about

986.24 -> consent and i lost my train of thought

989.04 -> it was good i think uh you know there's

993.04 -> so i think that's just a good like

994.72 -> couching of everything that we're

995.92 -> talking about here what we're what we're

997.199 -> doing here is not talking about getting

999.839 -> you know data and and using

1002.24 -> psychological tricks to you know use

1004.24 -> this one weird trick to to make more

1006.32 -> money this is very much about like

1009.04 -> we can we can interact with our users in

1012.72 -> ways that like if if you have opted into

1015.279 -> my list then you've you've said hey i

1017.279 -> want information for you if you click on

1018.8 -> a list on something from my email i know

1021.6 -> something about your intent because i

1023.6 -> wrote that email for a purpose and if

1026.079 -> you express that intent i can then

1027.839 -> customize the content like i can make

1030.079 -> the things i build significantly more

1031.76 -> useful by just using the information

1034.4 -> that somebody's giving me in a very

1036.319 -> consensual way right like we're not

1038.319 -> buying a list from facebook and trying

1039.919 -> to do pattern matching to figure out you

1041.679 -> know what you might pay us for we're

1043.36 -> very much saying like hey you said you

1045.28 -> are into javascript i'm gonna show you

1047.839 -> javascript um that that's a really

1050.4 -> interesting way of of making our apps

1052.64 -> more useful that is beneficial to the

1055.52 -> user you know

1056.72 -> it's pretty straightforward it's like

1057.919 -> they signed up for that and and at the

1059.52 -> end of the day and i remember my my

1061.44 -> previous thought like this is how i

1063.28 -> think about it and i love state machines

1065.2 -> i use xdate like every application i

1067.52 -> write ends up with with a state machine

1069.28 -> i think they're useful even at like a

1070.88 -> low scale

1072.16 -> but if you think about a user and their

1074.08 -> their overall experience with your your

1076.559 -> product or or whatever even even like

1078.64 -> your blog they're they're they're in a

1080.4 -> state machine at any given time they are

1082.799 -> in a state and they want to transition

1084.88 -> from from one state to the next and if

1086.64 -> you can understand you know like these

1088 -> are the available transitions and

1089.44 -> present them

1090.559 -> um where it's it's pretty accurate you

1092.4 -> know it's not ever going to be really

1093.919 -> perfect but you can say well you you

1095.52 -> know i know this about you you like this

1097.12 -> this and this

1098.32 -> um

1099.36 -> here's you know this is what you you

1101.039 -> previously have interacted with like

1102.559 -> here's the next state and here's the you

1104.559 -> know selection of states that you you

1106.48 -> have to choose from um and what we can

1108.64 -> do to like help you get where it is

1110.799 -> you're trying to to go because nobody

1112.64 -> like for us nobody wakes up in the

1114.08 -> mornings like

1115.28 -> oh i need to go watch a course today

1118.4 -> like that isn't what they think it just

1119.919 -> it isn't right like they use our site

1121.679 -> because they have something going on in

1123.2 -> their lives

1124.24 -> where they need to like pick up that and

1125.84 -> some people do watch it like netflix

1127.84 -> that's fine like if that's your

1128.88 -> entertainment like like please like

1130.799 -> indulge uh but for most of us it's like

1133.76 -> oh i'm trying to solve a specific

1135.12 -> problem with technology and there's this

1137.6 -> course that is you know like the

1139.36 -> promises that it can get me from a to b

1141.36 -> and that's what people are doing so why

1142.96 -> are they why they there why are they

1144.64 -> interacting with your site at this time

1146.08 -> what's going on in their lives and how

1147.44 -> can we help them it's always like an

1148.88 -> interesting

1150.4 -> you know like trying to trying to be

1151.919 -> useful and trying to like present in

1154 -> terms of what they may want versus kind

1156.24 -> of the universal thing um like dropping

1158.88 -> them into the soup

1160.48 -> yeah yeah i mean like yeah and like

1163.12 -> nothing wrong with soup but like yeah a

1165.12 -> lot of times i i want the meal to be

1167.2 -> catered to me like you know sometimes

1168.799 -> you want to go on an adventure and just

1170.24 -> dive in and

1171.44 -> see what's out there but like most of

1173.44 -> the time i'm

1174.96 -> i got a i got a goal like you know i'm

1177.679 -> i'm i show up on egghead because i

1180.64 -> am working on a project and i find a

1183.039 -> thing that i want to build and i've

1184.32 -> never built it before and so i go to

1185.919 -> egghead and i'm like

1187.919 -> think like i searched the thing

1189.76 -> and

1190.799 -> the better the personalization is the

1192.32 -> more likely it is that the first thing i

1193.76 -> see is the course i want to watch that

1195.12 -> helps me solve that problem that i have

1196.64 -> right now at which point i go man

1198.72 -> egghead is the best it always shows me

1200.24 -> exactly what i need i solve my problem i

1202.24 -> move on with my life you know it's it's

1204 -> like money well spent to have that

1205.28 -> egghead subscription i think that's the

1206.96 -> kind of personalization that we're

1208.08 -> really looking for how do i walk away

1209.919 -> from any interaction with a web property

1212.08 -> feeling like i just got exactly what i

1214.799 -> needed none of my time was wasted nobody

1216.799 -> asked me for things i didn't need i

1218.799 -> basically showed up and it it

1220.159 -> effectively read my mind because i gave

1222.24 -> enough information through my actions

1224.32 -> and intent

1225.44 -> that it didn't have to ask me like do

1228 -> you like javascript like it already knew

1229.84 -> it did so okay i automatically filtered

1232 -> the results to prioritize javascript

1233.679 -> like great perfect this is all really

1235.6 -> really helpful to me um

1237.84 -> and that's that's a really great example

1239.679 -> right like it's like you you're you're

1241.12 -> personalizing but you're you're really

1242.72 -> just like respecting

1244.32 -> what they've done in your time it's like

1245.84 -> the kind of the

1247.2 -> don't uh

1249.28 -> don't make me think yeah that book is is

1251.2 -> like the the kind of the quintessential

1252.799 -> idea just in the title right like that

1254.559 -> that carries so much weight in terms of

1256.799 -> how to interact with users and i also

1258.48 -> want to say most of these ideas

1260.48 -> um for me like the my primary source is

1262.96 -> brennan dunn um and and he captures like

1265.44 -> all of this really in a very detailed

1267.84 -> way in uh the book mastering convertkit

1270.159 -> which to me is like the absolute best um

1274 -> kind of

1275.44 -> really value driven marketing automation

1278.4 -> that i've ever seen and it's convertkit

1280.08 -> but i i apply the principles and

1281.6 -> customer i o and and you drip it doesn't

1283.919 -> matter like

1285.12 -> whatever platform you're on um his stuff

1288.159 -> is really fantastic and and you know

1290.72 -> like if you want it like oh that's

1292.24 -> really interesting to me dive into his

1293.919 -> his work um because there's some really

1295.679 -> great ideas in there for sure yeah and

1298 -> we'll uh those will be linked in the

1299.919 -> show notes i just dropped him in the

1301.12 -> chat as well

1302.24 -> um

1303.12 -> all right so

1304.88 -> i'm excited to actually see this in

1306.4 -> action so let's let's switch over into

1308.96 -> our pairing view and uh and before we

1311.84 -> get started i'm gonna just take a quick

1313.6 -> moment to shout out to the sponsors

1314.88 -> we've got uh jordan from white coat

1317.039 -> captioning right now is here making this

1319.36 -> whole show more accessible by doing the

1321.039 -> live captions you can find those on the

1322.559 -> home page of the site uh learn with

1324.08 -> jason.dev and

1326.32 -> we that's possible because of our

1328.24 -> sponsors we've got netlify fauna and

1329.919 -> auth0 all kicking in to uh to cover the

1332.799 -> cost there and that that means a lot to

1334.48 -> me um we're hanging out with joel today

1336.32 -> make sure you go give them a follow on

1338.159 -> twitter

1339.28 -> and we're gonna be using next js

1342.88 -> and

1344.84 -> customer.io to uh

1347.039 -> to build some stuff

1348.64 -> so

1349.36 -> what's my what's my first step here like

1351.28 -> what's the first thing i should do if we

1352.48 -> want to get going

1353.679 -> um so we don't we didn't set up anything

1355.52 -> uh

1356.24 -> we're figuring empty folder we can use

1358.48 -> create next app and we're going to make

1360.12 -> a next app and they have some starters

1362.559 -> and and one of them is with tailwind css

1365.28 -> which is a pretty good one i always use

1367.28 -> so it's npx

1369.28 -> create hyphen next hyphen app at latest

1372.32 -> okay npx create

1375.679 -> if i can spell it next app at latest

1378.96 -> space hyphen hyphen ts i'm a

1381.919 -> i use typescript uh and then so there's

1384 -> some examples and and do you think it'd

1385.44 -> be useful to start with one with like

1386.799 -> tailwind or whatever setup do you use

1388.48 -> tailwind

1390.4 -> that's gonna be all on you so like you

1392.32 -> you're in charge of visuals and whimsy

1394.32 -> uh

1396 -> let's see let's see how much time we we

1398.159 -> have uh to to do any visuals and or it

1401.12 -> doesn't even matter for what we're

1402.24 -> trying to accomplish we can just use the

1404 -> stock page and

1405.44 -> let's start with the stock page and see

1406.799 -> how it goes and then i what i put in the

1408.24 -> name of a folder here right

1410.159 -> well i'm going to say hyphen hyphen

1411.76 -> example with tailwind css because it's

1413.76 -> the only way i'll ever accomplish

1414.96 -> anything so

1417.039 -> is it like that

1418.88 -> yeah that's it and then space and

1420.32 -> whatever the folder name is okay let's

1421.919 -> call this marketing automation

1427.76 -> yep

1429.039 -> yeah this just goes through there

1432.08 -> okay

1435.919 -> and it's creating the folder doing all

1437.6 -> the things

1440.88 -> get all the types

1443.679 -> you know i i feel like i fought

1446.4 -> i fought it for a long time and i i just

1449.2 -> like i do like typescript

1451.279 -> uh then i need to npm

1454.32 -> it already installed everything so we

1455.84 -> can just run dev

1457.2 -> i think so

1461.12 -> hopefully it worked i actually tested it

1462.559 -> just to make sure that i wouldn't be

1463.76 -> lying too

1465.6 -> all right so we have let's see that

1467.44 -> opened in the wrong thingy here's

1470.24 -> here's our site so we've got a basic

1471.919 -> site here

1473.279 -> all good

1474.32 -> um and then i'm gonna

1476.48 -> open this up

1478.88 -> so that we can look at it

1481.76 -> and then i'll start it again

1484.159 -> um all right so we've got a

1486.4 -> basic site here's our pages we've got

1488.4 -> our index page

1489.919 -> um

1490.88 -> kind of leave that all as is but if i

1493.36 -> want to make a change i can say like

1496.159 -> hello chat

1498.24 -> save it and it's it's there so we're in

1501.44 -> we're in great shape we've got ourselves

1503.12 -> a hot reloading app everything is good

1506.159 -> can we make just another page that that

1508.48 -> has a has a different h1 yeah let's do

1510.799 -> it um do you want to we could even you

1513.039 -> could even copy and paste just as a base

1514.72 -> but uh just just let's call the this

1517.84 -> this one welcome

1520.32 -> or i don't know it doesn't matter cool

1522.72 -> so we'll go there

1524.4 -> get this

1525.6 -> and for this one let's just simplify it

1527.84 -> all the way down to just an h1 yeah so

1530.4 -> we'll go all the way down to

1533.6 -> here

1535.2 -> and then we'll get rid of all of the

1537.2 -> maybe we'll keep the head

1542.96 -> and we can go over to welcome

1546.88 -> okay so now we've got a basic site so

1549.36 -> one of the the principles here is that

1550.72 -> any any page we make is the site a page

1552.559 -> that you can actually just generally get

1553.919 -> to like google index it whatever you

1555.679 -> could you know like exclude it if you

1557.12 -> wanted to but it doesn't matter like

1558.32 -> this is a viable page we have like

1559.84 -> welcome

1561.039 -> um

1561.919 -> and then we can just have our root for

1563.679 -> for right now and we could extend that

1565.279 -> if we want more pages we can think about

1567.2 -> that

1568.08 -> that's what i did wrong

1570.4 -> okay so we've got a a simple site no no

1573.76 -> bells and whistles on it um

1576.24 -> got our default style sheet and

1578.64 -> did you change the text on them or they

1580.159 -> do they say the same thing oh

1581.84 -> yeah let's change it

1585.36 -> okay so there's our welcome page head

1587.6 -> back got our hello chat

1590.159 -> in my to-do list this was create a fun

1591.84 -> home page um so i think we've

1593.36 -> accomplished that

1596 -> that

1596.84 -> one it is extremely fun um so

1600.559 -> we can

1601.919 -> now we're kind of set up and we can we

1603.84 -> can display two pages um in nextgs 12

1608.4 -> they introduced the idea of uh

1611.6 -> of middleware okay um so we want to

1614.24 -> create some middleware

1616.32 -> in between um

1618.88 -> the the request for our home page and

1621.44 -> and the way that you do this is is

1623.039 -> inside of pages

1624.799 -> uh you create this file

1626.4 -> and the name of that file is underscore

1628.4 -> middleware.ts

1632.08 -> okay

1633.84 -> so one thing i am not sure of

1635.76 -> is

1636.72 -> if middleware runs

1638.799 -> in a local environment when you run

1642.399 -> npm run dev

1644.24 -> um

1645.2 -> so i'd be curious about that and the

1647.44 -> only way we can find out is to actually

1650.72 -> run some middleware and

1653.44 -> when i when i do this i'm always going

1655.039 -> to go to the next.js docs uh

1658.159 -> specifically the github repo looking the

1660 -> examples and and they have like a ton of

1662.08 -> middleware examples

1663.84 -> and like i'm always going to go like

1665.36 -> find something and cut and paste the

1666.88 -> middleware example if i'm i'm learning a

1668.88 -> new feature there's no

1671.2 -> no world where i don't just

1673.44 -> grab the like the simple example so we

1675.2 -> can do that we want to you know get the

1677.279 -> hello world going and see if this even

1679.279 -> functions in our local environment okay

1681.2 -> so let's see if it picked it up

1684 -> um

1685.36 -> it doesn't say anything but if it worked

1687.52 -> it's gonna

1689.84 -> okay there it is so there's our there's

1691.52 -> a middleware and this is the interesting

1693.44 -> thing about this because

1695.44 -> with with what we've done here returning

1697.12 -> a new response we're basically saying we

1699.2 -> don't care what's on the page just

1700.72 -> delete it all replace it with this and

1703.039 -> so you know we can put we've officially

1705.44 -> ruined our our fun home page and does

1708 -> this uh

1711.039 -> does that do what we want

1713.84 -> probably

1715.039 -> no it's plain text so we would have to

1716.48 -> actually set it as as text html and and

1719.039 -> things like that and so that's a that's

1720.48 -> a that's a response so that's like if

1722.24 -> you go to mbn and look at the the

1725.2 -> response that's a that's a core api

1727.679 -> right like that's that's something that

1728.96 -> that we just get with node or the

1730.96 -> browser

1732 -> um in javascript the response is a type

1734.96 -> so it's it's typically you're building a

1736.559 -> response and you can use this particular

1738.64 -> object and return a response

1742.24 -> yeah so we

1744.159 -> uh let's see how would we do that we get

1746.08 -> a new response and then we can

1748.399 -> we create one though it's all showing us

1750 -> how to use them

1751.2 -> um honestly we're gonna we're gonna and

1753.44 -> and then so

1754.48 -> you also i think and i believe when we

1756.88 -> imported

1758 -> i don't know it might just be types

1760.08 -> did it

1761.039 -> have the in our in our actual code it

1763.76 -> did yeah we did get uh so we're not

1766.64 -> using next response yet um so they

1769.2 -> actually have a helper called next

1770.72 -> response so you can use just a normal

1772.399 -> response and return that but we'll get

1774.08 -> pretty quick into into using next

1776.08 -> response

1777.919 -> but what we want to do is like let's

1779.12 -> let's get our page back um this is what

1781.76 -> we want to uh accomplish so

1783.84 -> uh inside of the middleware function if

1785.679 -> you just say like const response or

1788.32 -> we'll we're going to use let because

1789.6 -> we're actually going to change the

1790.559 -> response so let uh response equals next

1793.36 -> response dot next um and what this does

1798.159 -> i i honestly didn't haven't even looked

1800.399 -> up the docs for why this works you don't

1802.159 -> need any arguments you can just call

1803.6 -> next

1805.279 -> okay

1806.24 -> and we're gonna return that so return

1807.52 -> that response

1811.279 -> why is it yelling at me

1813.679 -> it was imported using oh using import

1815.76 -> type that's right yeah that needs to be

1817.279 -> on its own line because those other two

1819.039 -> are types so just next response needs to

1820.88 -> be by oh well this yeah this one by

1823.44 -> itself

1824.88 -> and this one

1826.88 -> i'm totally not used to that error

1828.24 -> message but i've seen it a lot in the

1829.6 -> last couple months

1831.2 -> um so what this should do is just return

1833.039 -> us back to normal like uh the

1836.64 -> hey there we are so that's just grabbing

1838.64 -> the the response and saying um

1841.76 -> like next like what's the and i i

1844.48 -> would would read that probably and see

1846.399 -> what's actually going on that was just

1847.6 -> what the example said and it works it

1849.36 -> just basically gives you that raw

1850.48 -> response

1851.679 -> um that we're that we're looking for

1853.919 -> um so

1856.159 -> at this point like i'm i'm setting up a

1857.6 -> switch statement um so we want to do

1859.519 -> something and this is this is an issue

1861.12 -> so

1861.919 -> um

1862.72 -> if you've done this at the root if you

1864.24 -> set a middleware at the root

1866.159 -> uh like let's go try to make

1868.24 -> um well it would work better if it was

1870.399 -> broken so we can we can uh maybe return

1872.32 -> a response or something just to the the

1874.08 -> problem here is it it is um

1877.6 -> uh nests or it's it's uh

1880 -> as you said if it's

1882.08 -> all the way down your page tree like

1883.76 -> every page in your entire tree is going

1885.679 -> to run this middleware everything under

1887.84 -> it and because this is at the top level

1889.36 -> and we're dealing with our root page

1891.279 -> it's actually trickier than if you're in

1893.12 -> like

1894 -> a subfolder because only the stuff in

1895.84 -> the subfolder would be affected so this

1897.44 -> is actually going to affect our entire

1899.36 -> app

1900.399 -> which isn't isn't what we want we want

1902.24 -> to be able to um

1905.12 -> like only affect the the top one and and

1908.399 -> the the easy way to do that is with a

1910.08 -> it's going to be an if

1911.76 -> and we're going to look at and we have

1913.36 -> the request so we have the the next

1915.279 -> request there it's coming in so if

1916.559 -> requests.nexturl.pathname

1921.279 -> equals just forward slash

1927.279 -> yeah

1929.44 -> so now now we could you know and you

1931.12 -> could test this by making a subfolder

1933.36 -> called test and and putting an index in

1935.44 -> there and running it and seeing that

1937.12 -> this does not affect it and that's like

1939.519 -> you know like i always try to verify

1941.12 -> that sort of thing just to make sure

1942.24 -> because this is we're at the top level

1943.919 -> so this can return

1945.6 -> and that's a good idea

1946.96 -> so if we do it like this oh i gotta do a

1949.36 -> new response

1950.64 -> uh then this one should give us

1953.44 -> well nothing right but if i go back to

1955.6 -> the home page

1957.44 -> if i can click this right

1960.48 -> we're top level so now we've got

1962.96 -> only one page being affected that's good

1967.919 -> another problem here and this is

1969.519 -> strictly because we're in the root and

1971.039 -> we're trying to affect the home page

1972.399 -> because the problem is that we we show

1974.399 -> the user the marketing site and not the

1976.159 -> their dashboard um is

1978.559 -> the core of that a problem here is that

1980.799 -> that

1981.6 -> um

1983.44 -> you know anything like a fave icon or an

1986 -> images folder or anything that's

1987.679 -> essentially in your public folder

1990.48 -> like your your site map like everything

1992.88 -> like that

1993.919 -> uh is now going to

1996.48 -> return your your

1998.64 -> whatever it is you set up so it you know

2000.72 -> like previously we had the response you

2002.32 -> get that for your site map for instance

2004.72 -> um that's a good point

2007.519 -> uh so i'm gonna

2010.88 -> can i just use the chat how do i do this

2013.039 -> i'll send it to you this way

2014.72 -> okay

2016.559 -> pasting regex in your twitch chat

2019.2 -> um

2020.399 -> so so up at the top i'm gonna set this

2022.159 -> const and it's public file and this is

2024.32 -> the regex and i cut and pasted this

2025.84 -> originally

2026.96 -> and it just works um so there there we

2029.84 -> are

2032.24 -> and and what this is what we're going to

2033.919 -> do is we're going to do kind of a

2036.88 -> just a test so

2038.64 -> once once we get that under under

2040.32 -> response we're going to say if public

2042 -> file

2047.36 -> dot test

2048.879 -> and then we're gonna say

2050.079 -> uh the same

2051.72 -> request.nexturl.path name

2056.24 -> return response

2060 -> okay

2062.159 -> so like this is our default right like

2063.76 -> if this is some sort of public file you

2065.44 -> know now we can get our fave icon back

2067.119 -> now we can you know get any that would

2068.72 -> be like any style sheets like there's

2070.24 -> all sorts of of things like mischief

2072.879 -> and we're actually making a lot of

2074.32 -> mischief like doing this at the top

2075.919 -> level to be honest and so some of this

2077.76 -> is mitigating yeah and i learned most of

2079.839 -> this the hard way

2080.52 -> [Laughter]

2084.24 -> i'm just just throwing it out there as

2086 -> we as we go through because just the the

2087.76 -> nature of this this is like i said it's

2089.04 -> a lot simpler if you're somewhere else

2090.56 -> but the top level is a great place to

2092.159 -> start and you can use these techniques

2093.679 -> elsewhere but like if i was in a

2095.04 -> subfolder i wouldn't need the public

2096.48 -> file because i'm not going to have right

2098.32 -> in in those routes um this is only valid

2101.359 -> because we are at the top level yes and

2103.839 -> and to for anybody who's not familiar

2105.839 -> with the what the regex means we're

2107.2 -> basically saying anything that ends in a

2109.04 -> like a dot something extension um

2111.839 -> because this is nice

2112.96 -> because i wasn't familiar either but

2115.2 -> so this means the end of the string this

2117.28 -> is zero or more characters and this is a

2119.599 -> an escaped period so like

2121.839 -> in this um you know

2123.76 -> thing.jpeg matches

2126.079 -> thing doesn't um so this would get

2128.48 -> passed straight through and then this

2130.4 -> would would move on to the next role

2133.92 -> very impressed with that explanation

2135.55 -> [Laughter]

2139.44 -> um all right so we've got that we've got

2141.359 -> we've got our two safeguards we aren't

2143.44 -> going to serve any public files

2145.44 -> and we're getting into the path name

2147.359 -> now is kind of where it gets interesting

2149.119 -> because we're at the root

2150.96 -> and what we want to do let's just um

2153.119 -> like go in and open the browser up in in

2155.119 -> the

2155.92 -> dev tools

2158.8 -> right

2159.68 -> dev tools let's do it

2162.24 -> and we're going to go over and

2163.68 -> application and cookies

2166.32 -> cooking and we want it

2167.76 -> for this site so localhost

2171.839 -> and and this point let's just create one

2173.28 -> and we're going to call it welcome and

2174.56 -> it's just going to say true

2176.079 -> how do you

2177.599 -> there's a way to do this

2179.28 -> there is usually i just click the second

2180.88 -> line because the like the blank line

2182.96 -> under the first line oh well that's

2184.88 -> easier than i thought it was going to be

2186.64 -> um sorry where did you want it to be

2188.96 -> we'll just say welcome the cookie name

2190.72 -> will be welcome

2192.56 -> and then true or one or

2194.96 -> anything literally okay

2198.8 -> that's uh that should all be good we'll

2201.2 -> leave the rest of it out for now

2204.079 -> okay

2206.4 -> all right so back in in our code uh now

2208.8 -> we have a cookie and and normally you'd

2210.8 -> write that from someplace else right

2212 -> like you're not gonna users aren't gonna

2214 -> write cookie well most users i read a

2216.16 -> lot of cookies in my my personal life

2218.4 -> but um

2220.56 -> now now we wanna check and and the way

2222.16 -> we can do that uh the the request

2224 -> actually carries a really nice object

2226.079 -> called cookie so request.cookies

2229.28 -> and this is a next request so like if

2231.04 -> you're dealing with a browser request

2232.48 -> object you're not going to get this and

2234.079 -> then we're going to use the square

2235.359 -> bracket notation to access an object

2238.56 -> with the text and we're going to say

2239.839 -> welcome

2241.2 -> and for me i'm going to console log this

2242.8 -> just to see if it comes through like

2244.079 -> that's that's always my move

2249.28 -> okay so that will show up uh let's go

2252.079 -> here and then it's going to show up in

2253.52 -> this

2254.56 -> console log right should yeah

2257.52 -> did you refresh did i refresh i'm gonna

2260.079 -> say are you on the root page am i on the

2262.56 -> root page i was not on the root page

2264.64 -> yeah so it's working as expected if

2266.24 -> you're on welcome this stuff doesn't

2267.44 -> happen right like you you're where we

2268.96 -> wanted you to be

2270.48 -> um is it the log or did you see it it

2272.48 -> did yeah it's it's logged true down here

2275.04 -> okay

2276.079 -> well i'm off screen that's why

2278.32 -> occluded

2279.599 -> cool so

2280.8 -> now you can start thinking about this

2282 -> right like one we're on the server when

2284.32 -> we're setting those cookies right like

2285.599 -> set them you can set them as as secure

2288.079 -> if you're on like locally it doesn't

2290.24 -> matter but like if we're on a server we

2291.68 -> want them to be secure

2293.28 -> i'm usually going http only so we can't

2296.32 -> read that like we're not going to be

2297.359 -> able to read this cookie necessarily

2298.8 -> from the clients i just want to you know

2301.119 -> like like set it up to where it's it's

2303.119 -> as kind you know like a nice safe secure

2304.8 -> cookie we're not sharing it around we

2306.4 -> just are writing that for our own uses

2308 -> so we didn't do that here but like

2309.28 -> typically that's what i'm going to do

2310.96 -> but what's interesting is if it's a

2313.599 -> server cookie

2315.119 -> you can read that in these requests and

2316.96 -> then um

2318.88 -> like you can intercept that so you can

2320.32 -> read and write these these cookies and

2322 -> then you know like in cookies have been

2324.16 -> around for a long time and they're

2325.599 -> pretty well documented and but they're

2327.52 -> really useful for this kind of thing and

2329.2 -> that's how you know like you're storing

2330.4 -> sessions you're storing that kind of

2331.52 -> thing and we're gonna

2332.88 -> basically uh put some data in

2335.92 -> the browser cookie that we can read on

2337.52 -> the server side and then uh adjusts the

2340 -> page accordingly so when we get that we

2342.64 -> can go in and uh add another if

2344.72 -> statement and we're going to look and

2345.92 -> see if welcome is true and then we're

2348 -> going to

2348.96 -> change our response

2350.48 -> okay so i'm going to i'm going to do a

2353.2 -> little bit of like so we don't end up in

2355.04 -> the

2356.48 -> um

2358.48 -> like bracket hell i'm going to refactor

2360.48 -> a little bit i'm going to refactor a

2361.76 -> little bit because what we can do here

2364.4 -> is we can return the response

2367.52 -> right and then that means we can put

2369.2 -> this one over here and we can say

2371.76 -> uh

2373.04 -> you know if

2378.4 -> and am i gonna that's actually so that's

2380.56 -> actually gonna go in

2383.28 -> the if statement above and then i'm

2385.52 -> going to we're going to switch it and

2386.96 -> i'm going to use a little

2388.72 -> uh switch statement trick that kyle

2390.96 -> shevlin taught me okay but that goes in

2393.119 -> there where you are saying if next url

2395.119 -> equals forward slash that we want to

2397.44 -> that's where we're going to check the

2398.4 -> cookie so we're not we don't really care

2399.68 -> about that cookie

2401.2 -> we can just copy that whole if into into

2403.119 -> the

2404.16 -> like same place or we don't know like in

2406.48 -> in the body of the if statement like

2408.079 -> we're going to check and see if it's the

2409.119 -> root page and then inside of that we

2411.119 -> want to check and see what our cookie

2413.119 -> value is got it okay so i'm gonna i'll

2416.079 -> um i'll undo my refactor then um and

2419.2 -> let's

2422.88 -> check if it's the cookie and then we're

2425.2 -> here

2426.16 -> all right so

2427.92 -> is a that's a pro move right there you

2429.68 -> can tell jason's been doing this a while

2431.28 -> uh and and uh i don't know after you

2433.599 -> program javascript for any length of

2435.04 -> time like the defensive measures that

2436.48 -> you take against javascript um this is

2438.96 -> one of them

2440.72 -> and my reasoning for that uh is that

2443.04 -> this i'm pretty sure is a string

2445.119 -> and so yeah

2447.44 -> from a string to whatever the thing is

2451.04 -> so so this is where this gets really

2452.4 -> cool so now we can say uh if if this is

2454.88 -> the case if welcome is true

2457.359 -> we want to say response equals

2461.68 -> next response dot rewrite

2466.72 -> and that's saying it's going to rewrite

2467.92 -> the page and it's going to rewrite it

2469.52 -> with the response it gets from the the

2471.44 -> following url we're going to say forward

2472.72 -> slash welcome

2474.8 -> oh

2476.319 -> that okay

2478.319 -> okay cool things yeah and

2481.359 -> we'll we can just refresh now and see

2483.359 -> what happens for us

2485.52 -> so

2486.64 -> i mean this is the core of it this is

2487.839 -> like at the end of the day like if you

2489.44 -> can do this yeah you can literally do

2491.44 -> anything that you you want and there's

2493.92 -> some restrictions there but like you can

2495.44 -> literally do anything you want

2497.359 -> um and

2499.359 -> serve different so you can you can think

2501.28 -> of this and and uh i don't we can just

2503.599 -> go to um the switch statement and my

2506.8 -> uh i use switch true

2509.599 -> okay i don't know if you've seen this so

2511.2 -> like just below the if let's let's state

2513.359 -> not inside of that yeah yeah below this

2515.76 -> one

2518.72 -> switch true

2520.4 -> okay

2521.52 -> and and then so the case in this case is

2524.64 -> um we're going to use the condition

2527.359 -> above it so the boolean

2529.319 -> request.cookies is our first case

2538.72 -> okay

2539.839 -> and then response rewrite same same body

2545.68 -> and then uh you want to have a break

2548.48 -> always got to remember that or it just

2550.319 -> falls through

2552 -> and

2554 -> no

2555.28 -> we're gonna sit now with that that one's

2556.72 -> gonna actually be the the oh wait break

2558.96 -> is the word i was looking for wow beer

2562.64 -> nice i wish you had an emoji for beer

2566.319 -> so we're not returning the response

2567.52 -> we're gonna we're gonna we're gonna

2568.8 -> stick with like a single return for the

2570.48 -> most part we return early up there if

2572.16 -> the path name doesn't match but here

2573.68 -> we're going to write the default so we

2575.839 -> can just the the default is response

2578.319 -> equals next response dot next

2581.2 -> i mean we we do that above so it's

2582.72 -> probably not necessary but it's going to

2584.48 -> gripe at you if you don't have a default

2585.92 -> and that is the default right like our

2587.359 -> default if none of these conditions

2588.88 -> match and and just to kind of explain

2590.4 -> what happened here we say switch and

2592.079 -> we're switching on true so we're just

2593.76 -> switching on a straight boolean

2595.76 -> and our situation is is true so anytime

2598.8 -> the case is true

2600.48 -> it'll fall through into that one and we

2602.16 -> need some quotes around that okay

2604.64 -> so

2605.68 -> now we can stack cases and you can think

2607.52 -> like what are the different situations

2608.96 -> what are the different cookies that we

2610.16 -> have set uh that could be in play here

2612.72 -> that would would cause the the user to

2614.8 -> get a different home page and you know

2616.24 -> like very good it could be they're an

2617.599 -> instructor or

2619.2 -> um they prefer react uh they prefer

2622 -> javascript like we can we can start

2624.16 -> thinking about you know like who this

2625.68 -> person is and what their current status

2627.2 -> is or you know they've looked at our

2629.119 -> they've looked at our sales page but

2630.48 -> haven't bought right so we can encourage

2632.96 -> them or show them or you know like offer

2635.04 -> discounts like you can at this point do

2636.72 -> all sorts of of

2638.64 -> fun

2641.2 -> um fun things

2643.52 -> that that are useful too so like

2645.599 -> literally you can do things that are fun

2646.88 -> but then you can also do things that are

2648.72 -> useful and hopefully mutually profitable

2651.2 -> from the value sense

2652.96 -> yeah yeah yeah okay so we now we have

2655.839 -> the ability to to make decisions based

2658.319 -> on on conditions um but right now we are

2661.599 -> kind of hard-coding this stuff

2663.44 -> so we could you know we could also check

2665.68 -> like if we wanted to make another page

2667.599 -> we could set it to false or whatever but

2669.2 -> uh

2670.56 -> but i'm i'm assuming this is where i can

2672.079 -> set that to some other value right like

2674.64 -> i don't know if if yeah like what's

2680.48 -> i'm wondering because of the boolean

2682.079 -> actually like if it's if it exists if

2684.48 -> it's non if it's not undefined would it

2687.28 -> be true i don't

2689.2 -> i don't know how that sort of casting i

2690.64 -> would probably say uh cookie's welcome

2692.56 -> equals equals equals true inside of the

2694.4 -> boolean but that's maybe redundant

2697.04 -> that's how i'd normally

2698.56 -> format oh

2702.24 -> should it be like that no no i do i'm

2704.72 -> going to probably do a text search at

2705.839 -> this point in my code that i'm looking

2707.28 -> at over here i'm using

2709.92 -> oh you're you're doing it like i'm i'm

2711.92 -> parsing it but yeah i'd check and see if

2713.92 -> that value is is

2716.4 -> the string unless i'm parsing it it's

2719.119 -> like

2719.92 -> jason

2720.88 -> okay so that that does the thing

2723.599 -> yep

2724.96 -> this

2727.04 -> does the thing

2728.48 -> yep

2732.8 -> does the thing okay so all right we got

2735.28 -> it we got it working

2736.96 -> uh it's it's correctly responding to the

2739.52 -> value of our our cookie

2741.68 -> and

2743.839 -> now we want to start setting these

2745.119 -> cookies i'm assuming

2748.48 -> the cookie is an interesting thing but

2750 -> then um what if it's like

2752.16 -> remote data of some sort

2755.28 -> that's where to me it gets really

2756.56 -> interesting and this is where customer

2758 -> and i was like well i i'm using customer

2760.319 -> i o but it doesn't actually matter like

2761.839 -> what what the the lesson here is is that

2764.48 -> we are loading data

2766.24 -> from some remote source so what's your

2768.079 -> like go to if you want

2769.839 -> like like

2771.52 -> quick cloud data do you have an api that

2773.2 -> you use like uh things i go to are like

2775.359 -> super base uh and and i think of so i

2777.68 -> think of customer io as a database in

2779.359 -> the cloud uh super base you know a sewer

2782.4 -> it doesn't matter like what where you

2783.76 -> know like where where is your place that

2785.28 -> you go to

2786.56 -> uh sanity amplify cms um yeah whatever

2790.079 -> right like it doesn't matter at that

2791.599 -> point but like what we want to do is

2792.96 -> actually load some data from from some

2795.44 -> remote source and we're going to use

2796.64 -> that to like check the current condition

2798.319 -> of the user

2799.52 -> customer io is something you can sign up

2801.2 -> for you know like i'm

2803.119 -> uh it

2806.079 -> i don't know it's pretty easy and

2807.52 -> honestly it's it's not that user

2808.96 -> friendly and when you start using the

2810.24 -> api so that's why it occurred to me that

2812.319 -> maybe using something else

2815.119 -> i love supa bass i don't know what do

2816.8 -> you what do you love right now what's

2818.24 -> what's been fun on the data front for

2819.76 -> you lately i mean i i

2822 -> kind of bounce around between a bunch of

2823.359 -> them i'm trying to think what i've been

2824.4 -> using most recently uh

2827.04 -> i actually haven't used supabase because

2829.359 -> i've been waiting for john myers to come

2830.88 -> on this show

2832.56 -> well he and i that's not a great one i'm

2834.56 -> just like if you if you have some some

2836.24 -> way you get data currently then let's

2838.079 -> let's do fauna because fauna is a their

2840.8 -> sponsor yeah i got uh

2843.119 -> i got i have an account i know that all

2846 -> works

2847.2 -> and uh that way we don't have to we

2849.359 -> don't think too hard about

2851.599 -> the fauna stuffs all right so i'm logged

2853.359 -> in

2854.24 -> i'm gonna create a database

2856.16 -> and we'll call this one uh marketing

2859.839 -> automation

2861.04 -> yeah put it in uh us

2864.64 -> create

2866.559 -> all right

2868.4 -> yeah this is the move over customer out

2870.079 -> because we can

2871.76 -> because it doesn't matter that's that's

2873.04 -> the whole point here and you could

2874 -> literally like use the twitter api i

2875.76 -> don't know like you could you can use

2876.96 -> all sorts of data sources at this point

2878.96 -> all right so let me do a

2880.8 -> i'll just create a new

2883.28 -> file we'll just do this db

2884.96 -> schema.graphql

2887.359 -> and we'll put a um

2890.4 -> what do we want like a user type

2893.52 -> give them an id

2895.68 -> give them an email

2899.2 -> and what what else do you need

2903.2 -> um

2904.24 -> i don't know that would work you're

2905.359 -> going to be the you're going to be the

2906.4 -> user so we don't need like we we at this

2909.119 -> point we can you know like maybe i'm the

2910.559 -> okay i'm the user so what yeah what do

2912.24 -> you want to switch on here um

2917.04 -> let's see we use like technology

2918.8 -> customer we can we can have uh uh

2923.28 -> well user is fine i'm just saying like

2924.64 -> we can like that you know like is

2926.16 -> customer base oh gosh you got you got

2927.68 -> you um yeah um

2934 -> so do a customer

2936 -> whether or not they're a customer

2937.76 -> um

2939.119 -> one of the cool things about like tying

2940.8 -> the email automation to this process is

2942.96 -> uh and and like it's it's really and i

2945.52 -> think we've talked about this actually i

2946.8 -> think like if i recall the previous time

2949.119 -> i was on here we're talking about

2950.16 -> convertkit and

2951.92 -> um like setting cookies and loading data

2954 -> from convertkit and what's cool when i

2956.88 -> do that is is when i send email

2958.72 -> automated emails from a service

2961.52 -> most of them have the ability to

2963.44 -> attach a

2964.559 -> user identifier to the link

2967.2 -> as a as a query parameter so what's neat

2969.76 -> is like if i send out emails and they

2971.68 -> click that

2972.88 -> when they come to the site it's actually

2974.079 -> carrying that with them so like that's a

2975.92 -> like a mode of persistence

2978.8 -> beyond the cookie which is browser

2980.8 -> session so if they click on their phone

2982.4 -> i know who it is if they click on their

2984.16 -> desktop i know who it is if they click

2986.079 -> on a computer at the public library i

2988.559 -> know who it is and can use that

2990.24 -> information accordingly um so we're not

2992.319 -> going to get that here right like this

2993.68 -> is this is a way we're almost

2995.68 -> it's almost like creating a session and

2997.68 -> like having a logged in user at this

2999.359 -> point so this is more useful in terms of

3001.44 -> like just a straight like dashboard

3003.119 -> versus marketing page

3004.96 -> uh kind of switch um yeah because what

3006.96 -> we're effectively creating is a user and

3008.8 -> then we're don't

3010.72 -> don't model your user sessions this way

3012.8 -> please like use use some other way to do

3015.119 -> this but

3016.24 -> that's that's what we're we're

3018.079 -> ultimately doing i think is is

3020.16 -> that

3021.04 -> mimicking that approach yes versus the

3023.839 -> email email cycle which i love but uh

3027.52 -> is more complicated

3029.28 -> so i'm just going to take a couple notes

3030.64 -> here uh that's going to be our endpoint

3032.559 -> i need to set up some api keys

3035.2 -> um we're going to give this a server key

3037.28 -> and we'll make sure that it's

3041.28 -> like next middleware

3043.68 -> and this is gonna

3045.68 -> share the key

3048.4 -> so nobody mess with this right now i

3050.72 -> think i can make it can i make it read

3052.72 -> only

3053.68 -> whatever um we're not going to worry

3055.599 -> about it too much because uh

3058.16 -> you know it is what it is

3060.8 -> that's good yeah well we're probably

3062.72 -> going to get hacked like give it give

3064.079 -> the chat five minutes um

3066.319 -> let me

3067.599 -> can you just put in a dot end and it'll

3069.119 -> just work or do you have to do it a

3070.16 -> certain way

3072.559 -> it just works

3074.16 -> that ain't that env.local i think it's

3076.559 -> not local okay

3078.88 -> okay and then we'll do like fauna api

3082.88 -> key

3084.72 -> and stick that in i still can't figure

3086.8 -> out how to turn that

3088.64 -> thing off um okay so now

3092 -> we should be able to do uh

3094.24 -> assuming i have access to fetch i can go

3096.48 -> to my

3098.559 -> fauna

3100.319 -> endpoint

3101.68 -> oops

3104.72 -> and we can hit that as

3107.76 -> post we can give it headers of um

3113.04 -> authorization

3114.72 -> and that gets a look do i remember this

3117.599 -> off the top of my head bearer and then

3119.2 -> we put in the process dot n dot

3122.079 -> fauna api key uh and i

3125.52 -> think that's all we need to send in the

3126.88 -> headers and then we can do a body and

3128.48 -> the body is gonna be

3131.2 -> uh json stringify

3135.76 -> of uh a query

3138.48 -> and variables

3140.72 -> which variables is going to be an empty

3143.119 -> object and the query can be

3146.24 -> um

3148.96 -> we want to get the user so let's go back

3150.559 -> over here and actually build this out we

3152.16 -> can uh

3158.8 -> yeah at the end of the day um

3160.96 -> you're gonna you know like you have to

3162.64 -> make some assumptions about the user

3164 -> like you have it stored we stored in a

3165.2 -> cookie right like whatever the id is so

3167.2 -> user the the user id

3169.68 -> um is what we'd have in the in the

3171.04 -> cookie and we'd say um like next user

3173.92 -> maybe is the cookie name or something

3175.68 -> something like that

3178.48 -> what did i do wrong here

3184.64 -> what

3192.4 -> oh it's this id is it

3195.76 -> hold on

3198.079 -> i think i did a

3200.4 -> i think i did a bad thing

3203.359 -> okay you know what i'm not gonna fix

3204.8 -> that i missed something in the graphql

3206.48 -> schema for fauna that would like

3207.76 -> identify

3208.96 -> this as the actual id field but

3211.04 -> personally i like the the other one

3212.8 -> better because um sequential numerical

3215.119 -> ids are guessable and uh yeah are prone

3218.079 -> to more mischief than

3219.839 -> uh other types so that that's fine and

3222.88 -> and ultimately we're going to want this

3224.16 -> in some sort of function like load user

3226 -> or

3226.8 -> or whatever and that's going to be async

3229.44 -> and we also want to make sure that that

3231.2 -> our

3232.96 -> middleware function that we return is is

3235.119 -> also async

3237.04 -> so we can do uh

3239.839 -> that type of thing in there

3242.96 -> okay so we'll go async uh that means i

3245.76 -> need this

3247.28 -> to be

3249.119 -> let's get a response that's going to be

3251.2 -> we'll await

3252.8 -> the fetch and then uh down here we can

3255.359 -> do an if

3256.88 -> you gotta experience okay then we can

3260.24 -> throw a new error

3266.24 -> very helpful error um and i need this

3268.64 -> one

3270.079 -> and then down here if that works we'll

3272.72 -> uh

3278.4 -> do you want fetch you don't have to did

3279.839 -> you do that to json is that what the

3281.839 -> that's yeah that's this one here

3284.319 -> again this is a thing i picked i don't

3285.92 -> remember who i saw this from but i

3288.16 -> didn't know okay it was a thing but

3289.28 -> that's that is a cool one yeah it's

3291.04 -> helpful for the the quickest of error

3293.68 -> handling and then i'm going to do one

3295.359 -> more thing here which is to uh to add

3298.88 -> the id as a variable

3301.119 -> um

3302.48 -> we can

3305.44 -> pass that in

3307.76 -> and pass in the id like so

3311.839 -> and then down here so now what will

3313.92 -> happen is it will have to pass an id

3316.24 -> into this function

3317.68 -> and then that will send back whoever the

3320.4 -> id is there so then

3323.28 -> to use it in here we could do something

3325.839 -> like

3326.72 -> customer equals await load user

3329.68 -> and we can hard code that user id for a

3331.68 -> second and console log it

3334.4 -> and that'll let us know whether or not

3335.92 -> we did the thing

3337.28 -> um and that should happen on any request

3339.28 -> so let's see if it worked

3341.52 -> where's my

3343.44 -> this one this one this one here

3346.4 -> nice

3348.72 -> refreshing

3350.4 -> it did the thing invalid database secret

3353.04 -> i did something wrong

3355.92 -> uh oh maybe i need to stop it you gotta

3357.52 -> restart like it doesn't pick those up

3360.16 -> there's end local okay

3362.96 -> good

3365.28 -> and now

3367.76 -> variable id expected type of id all

3370.4 -> right i can write valid graphql

3376.079 -> try that again

3377.839 -> there is our user

3379.28 -> nice

3380.16 -> um so now you can take that and instead

3382 -> of hard coding that we can we can move

3383.76 -> that to our cookie the id that we're

3386.48 -> looking up we're gonna assume that we

3387.839 -> have the the user's id and a cookie okay

3391.04 -> versus in in the application

3393.28 -> so let's add one we'll say uh

3396.88 -> user id we'll put this in uh we'll click

3400.4 -> all those same boxes

3403.839 -> good

3404.72 -> yes

3405.599 -> all right so now we have a user id

3408.72 -> and so in here we can get uh

3415.28 -> your id is going to be rec dot

3420 -> user id

3422.48 -> and then i'll drop this in here

3426.88 -> and theoretically speaking when i

3428.4 -> refresh the page we get

3431.76 -> there it is okay so then if i go and i

3434.799 -> switch this out to our other one let's

3436.559 -> go to our collections

3438.48 -> and here is

3441.599 -> what

3442.4 -> okay whatever

3443.76 -> go back out here

3447.119 -> change our user id

3450 -> then when i refresh the page

3452.64 -> we see our other customer

3455.2 -> so

3456 -> there we go we're now looking up from a

3457.359 -> database as part of our middleware

3459.68 -> it's pretty slick

3463.04 -> all right so now that i have this what

3464.799 -> should i do with it

3466.48 -> um so we're actually going to move that

3467.599 -> into that switch statement right like we

3469.28 -> don't we want to switch

3470.96 -> based on on this the like results i

3473.44 -> don't know we can load that before the

3474.64 -> switch statement it's just it's part of

3476.16 -> our our

3477.839 -> um

3478.64 -> cookie check basically if you have a

3480 -> customer then you want to rewrite like

3482.079 -> if if you don't so i'm probably gonna

3483.839 -> you know check the cookie first

3485.76 -> and if we have that cookie

3487.68 -> if that cookie exists so if it you know

3490.4 -> like you can do what you did before we

3492.079 -> just drop the boolean in there

3494 -> uh or

3495.68 -> i don't think we really need that

3496.64 -> welcome anymore either but we can we can

3498.4 -> keep it because they're gonna stack

3500.079 -> right like the first one that's true

3501.28 -> it's going to fall through so

3503.28 -> now it's just a test

3504.799 -> we'll check if the user id

3507.119 -> just exists at all so i think you can

3508.88 -> remove that whole thing um so if it

3511.119 -> exists and then we want to load it so we

3512.72 -> want to move that that const

3514.839 -> customer

3516.48 -> just the customer part not the user id

3518.24 -> part into

3520.88 -> because the user id we want to external

3522.96 -> because we need that before we start

3524.559 -> start looking at cases but if that's

3526.079 -> true then we want to load the customer

3527.839 -> we don't want to do we don't want to do

3529.44 -> superfluous async activity if we don't

3531.359 -> have

3532.4 -> the need to right like if that doesn't

3533.839 -> exist there's no need to

3535.599 -> send that to them yeah um you know or

3538.559 -> check or get an error handle errors so

3540.48 -> we want to wait and

3542.079 -> uh do that this way mm-hmm

3544.4 -> okay so now if if if it is a customer

3547.76 -> and the the current customer is

3551.2 -> so you that you at this point you'd also

3553.28 -> check to see if they are a customer

3555.599 -> and and this is where i'm also going to

3556.88 -> start thinking about how do i extract

3558.16 -> this maybe this is a helper file that

3559.92 -> sort of thing

3560.88 -> something to note about middleware while

3562.24 -> we're talking about

3563.52 -> different things is you have access to

3564.88 -> some apis but it's restricted

3566.96 -> it's a restricted environment

3569.2 -> for it's

3571.68 -> like cloudflare like different people

3573.68 -> have these node runtimes right that are

3575.359 -> reduced node runtimes in these

3577.28 -> environments to be safer so you can't

3578.88 -> just import everything

3580.96 -> under the sun and get it done you have

3582.799 -> to have like a constraint i know like

3584.24 -> fetch is okay and there's there's some

3585.68 -> other things but there's just limits so

3587.76 -> yeah because it would be like

3590.079 -> pretty

3591.119 -> destructive if we were trying to do

3593.52 -> like a bunch of file like fs like file

3596.559 -> system access and you might even have

3598.4 -> that like i don't know exactly what it

3599.839 -> is but like there's like they there are

3601.599 -> some limits and just something to be

3603.28 -> aware of they can be like gotchas like

3604.64 -> if you import stuff and it starts

3605.92 -> throwing weird errors it's usually your

3607.359 -> imports like they're doing something

3609.119 -> like some browser access even like as a

3612.319 -> i don't know i don't fully understand it

3613.76 -> i just know that you are in a limited

3615.28 -> run time usually when you're in these

3616.559 -> environments

3617.839 -> so we can just say user.customer but you

3620.319 -> can keep the equals truth that that's

3622 -> what you like

3623.119 -> um so then then we can

3625.2 -> at that point we can

3627.2 -> write the response right like we can we

3629.04 -> can do the uh so we can say response

3631.04 -> equals rewrite welcome

3633.119 -> because we're welcoming welcoming them

3634.72 -> if they are a customer

3640.72 -> okay and otherwise

3643.839 -> we bounce them out otherwise it's good

3645.599 -> it's not even hit the default at that

3646.96 -> point if you're there it's not going to

3648.16 -> hit the default but it's not going to

3649.28 -> change it either because we have

3651.119 -> a default default

3652.64 -> um that we we've done before so so we

3654.64 -> should be good and at this point because

3656.559 -> our customer is true and you can switch

3657.839 -> them out now you'll see if your customer

3660.4 -> if you are a customer at switching it

3661.92 -> out i think the one that we are now is

3664.64 -> true so this should give us welcome

3668.839 -> oh i'm doing something wrong

3671.119 -> um let's see

3673.2 -> it says our customer is true oh oh oh i

3675.359 -> know what i'm doing wrong we gotta um

3677.76 -> we gotta get some data and then yeah so

3679.839 -> let me

3680.799 -> actually return that out of our customer

3686.72 -> and we will return data find

3690.96 -> what's it

3692.079 -> data find user by id

3696.319 -> and that'll give us our actual customer

3698.88 -> so now

3701.68 -> what

3703.52 -> oh boy oh boy what have i done i

3707.2 -> returned response

3710.839 -> what cannot read properties of undefined

3713.76 -> it's no longer doing the thing which

3715.52 -> means

3717.039 -> it is

3721.2 -> yeah what is data

3726.88 -> data data

3728.799 -> oh

3730.24 -> data data data data

3733.119 -> and now we've got a now we've got a

3734.559 -> customer okay

3735.839 -> so let me

3737.44 -> and if you switch that out we'll we'll

3739.039 -> see though

3740.16 -> alright so i'm gonna go grab my other

3741.68 -> user

3746.24 -> which is

3747.599 -> this one

3753.44 -> drop it in here

3758.16 -> reload

3759.359 -> and we go to the home page

3760.88 -> okay

3762.48 -> yeah and you know that's uh i mean it's

3765.119 -> great what what could go wrong here that

3767.039 -> you think

3768.799 -> uh

3769.52 -> like infinite things i would assume

3772.24 -> well actually no hold on let me see the

3774 -> top top handful of things that could go

3775.76 -> wrong at this point now that now that

3777.039 -> we're doing async stuff because that

3778.4 -> always

3779.28 -> you know that oh that's a can of worms

3780.799 -> right right

3782.559 -> so i mean we've got

3784.24 -> fortunately we've got good safeguards

3785.839 -> here where uh

3787.68 -> if we don't get so i skipped some of the

3789.839 -> stuff that like we would have been here

3791.2 -> for three hours like i was or losing

3793.2 -> whole days of of work and sleep because

3795.599 -> we can't figure out what's going wrong

3796.88 -> and it's affecting our customers we've

3798.16 -> solved some of those already um

3800.96 -> but there's more yeah so there are a

3803.039 -> couple things that i'm seeing here like

3804.16 -> if our if our

3806 -> request here fails we don't have a catch

3808.4 -> like we don't have an uh any way to

3810.319 -> catch that

3811.359 -> so it would just blow up the whole page

3813.68 -> instead of sending a default response um

3816.319 -> if our user

3817.12 -> [Music]

3819.119 -> we're not doing any checking to make

3820.48 -> sure that like

3822.16 -> this i guess this would this would just

3824.559 -> return undefined so it would fail and

3826.079 -> then break and then hit our return

3827.76 -> response um

3830.079 -> yeah the try catch is a big one like i'm

3832.319 -> like generally speaking i'm going to

3834.319 -> wrap all of this in a try catch because

3836.799 -> like if if all everything fails i want

3838.96 -> to log it and send it to century or

3840.559 -> whatever yeah um

3842.72 -> so let's do a big try catch

3846.319 -> uh we'll just take all of this

3851.039 -> catch error if we get in there for now

3853.2 -> we'll just console log it

3855.039 -> and i would just return response yeah

3857.039 -> we'll return the response okay that way

3858.64 -> our app doesn't fail but our our

3860.24 -> customization fails

3862 -> and that is okay

3864.079 -> and technically we just keep our single

3866 -> return response we don't need both of

3867.44 -> them and we could just like if if

3868.88 -> something bad happens at the bottom we

3870.4 -> return response we don't need two of

3872.319 -> them we just need one of them uh oh i

3874.24 -> see what you mean yeah we can do that

3877.039 -> like out of all these because we're set

3878.48 -> in response as we are we only need the a

3881.28 -> single return response we don't need

3883.359 -> to stack them up like that yeah i got

3885.68 -> you

3886.799 -> yeah so that gets us

3889.359 -> that's looking okay

3891.599 -> i mean this is at least safe enough that

3893.039 -> like if we if we do something silly we

3896.079 -> at least just do nothing it just returns

3898.72 -> the page

3899.92 -> here's something i learned

3901.599 -> while i was doing this

3903.359 -> is that when you i gotta hold on to a

3905.2 -> second

3911.76 -> all right so if you're doing this

3913.839 -> locally you're in

3916.4 -> you're in a specific runtime environment

3918.24 -> right and if you do this remotely you're

3920.24 -> in a different run-time environment

3922.64 -> with new restrictions

3924.4 -> locally this could take three minutes

3925.92 -> for a response to happen uh huh but when

3928.799 -> you deploy this and and it really

3930.799 -> depends on the environment where you're

3932 -> deploying it so i can't tell you

3933.359 -> specifically i used versailles and i

3936.4 -> assumed it was like a serverless

3937.599 -> function and i went and read the docs

3939.039 -> and the limits there and you do have a

3940.799 -> limit on your serverless functions i

3942.24 -> think this all goes all the way to

3943.44 -> cloudflare or all the way to aws or

3946.16 -> whatever like if you're using lambda

3947.76 -> like you have a runtime limit on how

3950.16 -> long these processes can spin and some

3952.24 -> of them are pretty big

3953.68 -> for this one for middleware as it turns

3955.92 -> out and took me

3958.079 -> it took me longer than i care to admit

3960.24 -> to like finally get this and i was

3961.76 -> crying on twitter and there you know

3963.2 -> like their support's helping me and

3965.039 -> everybody's doing that as it turns out

3967.28 -> um unlike

3968.64 -> serverless functions where it's like an

3970.16 -> eight second timeout or 15 second or

3972.4 -> whatever you have exactly 1.5 seconds to

3975.359 -> return a response from this function or

3976.88 -> it's going to time out

3978.24 -> and that is because this is a middleware

3980.72 -> and because you are

3982 -> running an edge function just for a

3983.76 -> specific purpose the response timeout is

3986.4 -> 1.5 milliseconds the actual function

3989.839 -> itself can can after you return the

3992 -> response you can actually still do work

3993.68 -> so you can return the response and you

3995.119 -> can still be like processing data or

3996.72 -> doing other things and that can take up

3998.24 -> to like

3999.119 -> 15 or 30 seconds or whatever like you

4001.52 -> have for this good amount of time but if

4003.359 -> you do not return a response within 1.5

4006.559 -> seconds um it just it throws an error

4009.52 -> and and it logs nothing and you get like

4012.4 -> i got no clues as to what was going on

4015.2 -> and it was only because i was calling

4017.119 -> i'm calling the customer

4019.039 -> i o api

4020.48 -> which unlike

4021.839 -> like modern you know like edge functions

4023.92 -> where it's distributed and it's close to

4025.44 -> the user and this is actually kind of

4026.799 -> part of the the issue

4028.319 -> those functions are getting distributed

4030 -> so like folks in india and africa were

4032.16 -> having a really hard time because the

4033.68 -> customer i o response itself took a

4035.839 -> while to return

4037.92 -> over 1.5 seconds so i kept getting those

4040 -> times out so what i needed to do was

4042.319 -> build a safeguard in

4044.72 -> around the fetch call

4047.44 -> which in my case is uh

4049.68 -> i don't know i should probably just

4050.559 -> share a link huh

4052.319 -> yeah yeah let's do it

4059.599 -> i'll paste it paste it in chat um

4064.48 -> so this is this is how i load the

4066.48 -> customer and where do you where do i

4068.48 -> give links to you is it no that's i'm

4070.4 -> grabbing it right out of the chat there

4072.64 -> um okay

4073.839 -> so here's my here's my full like loader

4076.559 -> for customer i o and at the top you have

4078.88 -> the fetch which is kind of what you

4080.16 -> wrote but you'll notice that there's

4081.359 -> some interesting

4083.28 -> work here one i have a timeout const

4085.68 -> that i'm setting

4087.2 -> after i set a timeout variable i think

4089.28 -> that's what then

4090.64 -> i should look at mine so i have timed

4092 -> out is it timed out false that's how we

4094.319 -> start

4095.44 -> we go in and we look and there's there's

4096.719 -> a 1.25 milliseconds basically i had some

4099.679 -> padding

4101.12 -> this is when i love to use comments i'm

4102.799 -> not a big commenter in my code but like

4104.88 -> this one i'm commenting because like how

4107.199 -> would anybody know otherwise should i

4108.96 -> probably have a comment link to the docs

4111.359 -> as well

4112.96 -> and then i have a set timeout so i run

4114.64 -> the set timeout and i capture the id of

4116.48 -> the set timeout and what that allows me

4117.839 -> to do is cancel the set timeout later

4120.48 -> and if settimeout comes it says timed

4122.239 -> out equals true and actually just

4123.679 -> rejects the promise so i'm you'll notice

4125.92 -> it's wrapped in a promise up top

4128.159 -> which is a async function

4130.159 -> wrapped in a promise and that gives me

4131.839 -> resolve reject

4133.359 -> um

4135.04 -> then then

4136.4 -> we we fetch and and we have a i used

4139.52 -> fetch and then i'm capturing it like a

4141.44 -> promise so i have

4143.04 -> uh

4143.839 -> return the response with normal

4145.92 -> and if it's timed out then we we skip it

4148.96 -> um

4150 -> because we've already sent a response at

4151.44 -> that point anyway so no point and then

4153.279 -> finally we clear the timeout id

4155.199 -> regardless of what happens

4157.839 -> the dot finally is is one that uh

4160.799 -> i feel like i i almost never need it and

4162.799 -> then when i need it i'm so happy that it

4164.319 -> exists

4165.359 -> yeah i mean like in in this case you

4167.44 -> could just have that same thing and both

4169.12 -> of them but it's just nice right like

4170.48 -> like to me it reads really well because

4172.159 -> promises can get kind of kind of bulky

4174 -> and

4174.64 -> you reduce repetition but you reduce

4176.64 -> repetition in a way that makes things

4178.08 -> clear not in like a really abstract way

4180.4 -> where i'm moving it out to some other

4181.92 -> location or whatever yeah

4184.08 -> yeah so that's that's i mean this is

4185.839 -> useful so uh i'm probably we've got

4189.12 -> about like 15-ish minutes left um so we

4192.56 -> we probably won't implement that here

4194 -> but we'll we'll put a link to this in

4195.52 -> the

4196.4 -> in the show notes for anybody who wants

4197.76 -> to look at setting up the timeout

4200.84 -> um this is critical like if you you are

4203.679 -> actually going to do this this this was

4205.679 -> one of the hardest to figure out and and

4207.36 -> i you can look and um the link that i

4209.679 -> pasted is

4211.12 -> like our entire website so you can

4212.48 -> literally

4213.52 -> see what we don't this is our production

4215.199 -> website so we we work with visible

4217.44 -> source

4218.64 -> no support implied or given

4221.07 -> [Laughter]

4227.28 -> that's the that's the way this is and

4228.8 -> and but this this this approach works

4230.64 -> really good and after you know like i

4232.08 -> got it dialed in and the little little

4233.84 -> fail safe here like i can do this and

4235.84 -> and it's great and

4237.28 -> the next thing i want to do

4238.96 -> um and we can do this now for what we're

4241.12 -> working on is when we get that response

4243.679 -> um

4244.8 -> you know like what do you do with that

4246 -> information and what i want to do is is

4248.48 -> like once i have that user data i don't

4250.88 -> need to load it on every single page

4252.4 -> load like every time they come here i

4253.76 -> don't need to load that instead we can

4255.199 -> actually write a cookie too

4257.36 -> so i can load that user data and then

4259.52 -> write that that so we have the id but

4261.6 -> then we can actually like write the user

4263.44 -> to a cookie

4264.719 -> in this response and then it's basically

4266.88 -> cached at that point

4268.4 -> um so we can then load it and then you

4270.88 -> know if we have the cookie and it

4272.32 -> already has the data and the id matches

4274.32 -> what the data is in the cookie let's

4276.32 -> just return that data instead of doing

4278 -> anything async so we can make sure that

4279.76 -> we are giving the user the fastest

4281.92 -> response uh which is what they do

4284.64 -> deserve i think yeah

4286.56 -> so is there a way that i can

4289.76 -> do i like

4291.44 -> so so down basically um

4294.159 -> if you go to the we have a little case

4295.84 -> there we know we have a customer and uh

4298.8 -> we have if user.customer equals true but

4302 -> that doesn't even matter so uh even

4303.6 -> below that so if customer if

4305.36 -> user.customer like uh if or if user

4308.4 -> right like so we can say if we have a

4309.92 -> user at all okay

4311.84 -> um we can

4314.64 -> then uh call response.cookie

4319.12 -> and we're gonna say uh with a the string

4321.12 -> user that's the cookie name

4323.76 -> so you can call response.cookie is a is

4326.159 -> a function that actually writes that

4328.239 -> yeah like response.cookie is a function

4330.159 -> call um you can call in a couple ways

4332.32 -> it's also an object i don't know why or

4334 -> what or how that works um and then i'm

4336.159 -> going to say json.stringify

4339.12 -> user

4340.88 -> okay all right

4346.88 -> okay

4347.92 -> so then that means that up here

4351.28 -> i would want to

4352.88 -> check

4354.32 -> well i don't even know if i'd need to do

4355.92 -> that we we can do that i would do it

4357.44 -> like personally i'm going to do it so

4358.88 -> where we have user here

4360.88 -> that's where i'm i'm doing it right like

4362.48 -> if we

4363.76 -> um oh on the way i actually did it is i

4366 -> passed it into my load function so i

4367.76 -> passed cookies customer or cookies user

4371.28 -> okay into my load function as a second

4373.44 -> argument and then just handle all the

4375.44 -> like if it exists stuff

4377.76 -> in that particular instead of yeah just

4381.44 -> just like that and if it's blank then we

4383.44 -> handle it in there we're checking it

4384.64 -> later too because we'll we'll write it

4386.08 -> back regardless

4387.679 -> um but then like our caching is handled

4390.08 -> in our load function versus in our our

4392.239 -> middleware and usually like this load

4393.84 -> function is going to be off somewhere

4395.92 -> else for me because i'm going to use it

4397.44 -> because you can use this same load

4399.28 -> function you can use this inside of um

4402.32 -> with next if you have like a git server

4404.08 -> side props

4405.28 -> for instance you can use the same load

4406.96 -> function to do similar work and in other

4409.44 -> pages kind of close or if you like in

4411.44 -> react you could use react query or

4414.08 -> swr or whatever and use the same exact

4416.239 -> function okay to load data at runtime

4419.28 -> not only on the server

4421.199 -> there might be some issues having server

4423.199 -> cookies and loading some of this data

4426.64 -> from

4428.08 -> the client side if it's server if it's

4430.56 -> uh h2e only i'm pretty sure you can only

4433.199 -> load that from the server and not right

4435.04 -> you can't access it with javascript

4436.64 -> which is actually one of the things that

4437.76 -> i think is so cool about this like

4439.76 -> serverless functions and middleware and

4441.44 -> stuff like that is you get the security

4443.199 -> of http only cookies but you still get

4445.92 -> to use the javascript stuff you know

4449.04 -> just in a more secure environment like

4450.8 -> now somebody can write a third-party

4452.56 -> script that's like give me somebody's

4453.92 -> email address because it won't run but

4455.92 -> like your serverless functions that's

4457.28 -> your code you know what you're doing and

4458.56 -> you're you know it's assuming you are

4460.239 -> not doing evil uh which you shouldn't be

4462.96 -> chat yeah

4465.76 -> but assuming you you know then you you

4467.199 -> get secure options that still have all

4469.199 -> the convenience of working with

4470.32 -> javascript that you already know yeah

4472.08 -> and usually like you know get

4473.52 -> server-side props and that sort of thing

4474.88 -> is basically giving you a function that

4476.88 -> runs on the server that's similar to

4478.48 -> this middleware this middleware is lower

4480.159 -> level than that but they're all in the

4481.44 -> same chain right like so i can i can run

4483.28 -> that and i can pass data from here to

4485.44 -> there and you can rewrite with like

4486.56 -> query parameters and that sort of thing

4488 -> too if you wanted to and like you can

4489.84 -> really have a good amount of data that

4491.199 -> you can pass along

4492.64 -> to

4493.44 -> the the final request or whatever and

4495.28 -> you know i can load that user in a

4497.199 -> secure cookie

4498.88 -> um

4500.08 -> which is better like in you know like

4501.679 -> especially when you're talking about

4502.719 -> developers in the space that we're in

4504.48 -> there

4505.6 -> they're often looking at what you're

4507.6 -> you're writing in the cookies about them

4509.28 -> so it's just good good practice yeah so

4511.92 -> so one question i have about this so uh

4514.159 -> first this is what i just implemented

4516.08 -> which is i'm i'm checking if the cookie

4517.84 -> exists i'm parsing it if it exists

4519.679 -> otherwise i'm setting to false and then

4521.6 -> if i have a

4522.88 -> user i'm just returning that yeah just

4525.36 -> bail do i need to manually expire this

4528.32 -> or it'll expire once they leave the

4530.239 -> session right

4531.76 -> by default yeah it's session um and you

4533.679 -> can you can this session works for you

4535.6 -> that's fine or you can like set it to um

4539.28 -> a time

4540.48 -> which whatever you have to go look up

4541.679 -> the api and so like in a

4544.08 -> like thinking for what i would what i

4545.6 -> would probably do if i was building this

4546.8 -> in production just if you know if any of

4548.56 -> you are thinking about implementing this

4549.92 -> yourselves i would probably set the

4551.84 -> cookie to live like a week or 30 days or

4554.4 -> something but then you have to go into

4556.64 -> your user management stuff and if

4558.239 -> somebody cancels their account if they

4560.48 -> unsubscribe if they do whatever user

4562.56 -> actions that would affect their user you

4564.48 -> then also have to manage the cookie as

4566 -> part of that process instead of just

4567.199 -> letting it expire which means that hey

4569.04 -> the next time they come back they'll

4570.159 -> just pull the fresh data um

4572.88 -> but yeah that's

4574.159 -> so this is all right so this is cool so

4575.6 -> this means then um

4577.36 -> so so a lot of times especially with

4578.719 -> this one right like i don't mind if

4580.32 -> sometimes i get this particular one

4582.48 -> wrong like if i'm i'm

4584.64 -> because i'm applying middleware to the

4586.32 -> very root of my site

4587.92 -> if sometimes that like misses the mark a

4590.239 -> little bit i'm not as worried and in my

4592.159 -> apps i'm going to like load and write

4595.52 -> that cookie in other places also so i'm

4597.84 -> going to still use git server-side props

4599.679 -> on certain pages and maybe even the

4601.12 -> welcome page where the welcome page is

4603.12 -> going to use the same call and

4605.04 -> if i've already been through this flow

4606.4 -> that cookie is going to be cashed right

4607.76 -> like so it's not going to affect get

4609.44 -> server-side props but if for some reason

4611.28 -> you know like and then i don't know

4612.239 -> there's all sorts it's cash right at

4613.679 -> this point we have to invalidate it and

4615.6 -> and have a

4617.199 -> a policy in place that that makes sure

4619.84 -> our data is as fresh as it needs to be

4622.96 -> to make sure the user experience isn't

4624.64 -> broken so that's kind of

4626.32 -> you know it depends on the data at the

4628.56 -> end of the day and and what what it is

4630.239 -> you're loading and who you're loading it

4631.84 -> for i think

4632.96 -> matters a lot also screwed that up here

4635.199 -> we go that should actually do the thing

4637.04 -> now so

4638.88 -> yeah then we get back a cached user

4643.199 -> and you should check and see you know

4644.64 -> does the id match

4646.159 -> um there's another one so like in your

4648.32 -> your

4649.76 -> because if

4650.719 -> that's another thing that can happen it

4652 -> could be two different users so if it's

4653.52 -> not the same user you still want you

4654.96 -> need to load

4656.8 -> and cache user id equals we'll do the do

4659.28 -> the trick for sure

4662.84 -> okay so that does the thing and then

4667.12 -> so that's our user that is not a

4669.12 -> customer right so if i go in then

4671.92 -> and let's i mean let's force the failure

4674.08 -> case i'm gonna

4676.48 -> i'm gonna i'm gonna pretend i'm a hacker

4678.719 -> and i'm going to

4680.719 -> modify my cookie here

4682.88 -> reload

4684.159 -> and it did not hit the cache

4686.88 -> and it's showing me

4688.64 -> the the true thing so that that was a

4691.199 -> good check i wouldn't have actually

4692.48 -> thought of that one until somebody told

4694.239 -> me that they were

4695.44 -> getting there and that's you know like

4696.719 -> the way i'm using it where you can click

4698 -> on an email and it's pretty rare right

4699.84 -> like most of our devices are personal i

4701.92 -> mean as far as that goes but like you

4703.679 -> can't guarantee that so if somebody

4705.6 -> clicks on an email and somebody else

4707.6 -> follows up i don't want to

4709.28 -> in inadvertently or otherwise and we

4711.28 -> don't use this to like expose user

4713.28 -> information anyway it's always just like

4715.04 -> a switch like hey

4716.8 -> you like javascript so there you go or

4719.52 -> we're not even that sophisticated right

4721.04 -> now now it's it's it's literally

4723.36 -> um

4724.64 -> are you a member are you an instructor

4726.96 -> or are you are you anonymous or you know

4729.28 -> are you

4730.239 -> a non-member user and uh that's kind of

4733.199 -> our our segments and and one of the cool

4735.44 -> things that i mentioned brennan's

4737.44 -> course because i i reference it a lot is

4739.6 -> he talks about having a segmentation

4741.44 -> strategy before you even think about

4743.76 -> personalization personalization

4746.32 -> is an optimization on top of a

4749.28 -> foundation of strong segmentation where

4751.84 -> you are segmenting your users into

4755.52 -> two to five buckets

4757.92 -> um not too many because it you know like

4759.84 -> if you think about the switch statement

4761.36 -> or how many times we're nesting ifs in

4763.44 -> this little example that we're doing so

4765.12 -> every segment

4766.4 -> is a new facet

4767.92 -> that that adds that um what is it

4770.88 -> cyclomatic complexity to this decision

4774.239 -> tree right like that that is what you're

4776.239 -> you're you're stacking on top of

4778.08 -> yourself um your brain six months from

4780.8 -> now

4781.679 -> all of your teammates and

4784 -> ultimately your user base too because if

4786.48 -> your complexity gets too much for you to

4788.64 -> understand it is going to deliver bad

4790.8 -> experiences for your users um i think uh

4794.08 -> in in in terms of

4796.159 -> you know just just your thing working

4797.92 -> properly one uh one way that i've seen

4800.719 -> this done that i thought was really

4802 -> clever is uh uniform.dev

4805.6 -> did a cool thing i had them on

4808.159 -> uh let me just look at this instead of

4810.4 -> trying to

4813.44 -> so we did this thing on personalization

4815.36 -> and the the way that that uniform does

4817.36 -> it is whenever somebody performs an

4820 -> action they they visit a page or they do

4822.719 -> a thing it increases a score

4825.04 -> right so if you're if you're watching a

4826.8 -> user and that user has a javascript

4828.48 -> store of xero and then they visit the

4830.639 -> the javascript sub page of course is you

4832.719 -> can go all right plus 50 for javascript

4835.199 -> um and then if they go something else

4837.04 -> they can go oh plus 50 for for uh go or

4840.4 -> whatever and then you can that way

4842.8 -> you're instead of trying to say like

4844.32 -> okay so this person is a user and they

4847.84 -> like javascript but they also subscribe

4849.84 -> to this email sequence and they they

4851.76 -> visited this you know whatever like

4853.84 -> instead of of trying to manage all these

4855.84 -> independent variables you're just

4856.96 -> basically saying like okay any action

4859.12 -> either

4860.56 -> has no effect or increases or decreases

4862.719 -> a score for a certain

4864.48 -> like category right and so for a lot of

4866.96 -> sites you you can basically just operate

4868.8 -> on these scores and say all right so

4870 -> whatever their highest score is sort

4871.36 -> that stuff to the top

4872.84 -> um

4874.56 -> we do we do that a lot and that that

4876.08 -> customer i o is fantastic for this um

4878.719 -> because you can dynamically update

4880.32 -> properties and it keeps a really nice

4881.6 -> database so we do that across our topics

4883.52 -> like we tag everything at the topic

4885.04 -> level

4885.92 -> um and then our increasing scores and

4888.239 -> we're not using it very well but like

4890.08 -> we've been we've been doing this and

4891.28 -> it's called um you know it's like lead

4893.679 -> scoring is yeah the marketing term uh

4896.56 -> when you when you're when you're

4897.52 -> thinking about that way and you can give

4898.719 -> them an overall score so like we have

4901.28 -> uh

4902.4 -> say a react score or a javascript score

4904.96 -> typescript score whatever and then we

4907.12 -> also have like a learner score right

4908.8 -> like so if you do anything it adds to

4910.96 -> your learner score and like when we do a

4912.8 -> marketing campaign if your learner score

4914.32 -> is zero like you haven't done anything

4916.239 -> with the site i'm not even i'm not going

4917.679 -> to hassle you with emails you don't want

4919.6 -> um we you know like you have to have

4921.36 -> some you know is your learner score five

4923.12 -> like we want to like like we want to

4924.639 -> send emails to people that are

4925.84 -> interested in what we're sending them to

4927.44 -> yeah and we want to show them what

4929.199 -> they're interested in and help them as

4930.96 -> much as we can so we're not like

4933.36 -> we don't want to be a pest we want to

4935.679 -> actually help you like like learn and do

4938.08 -> what you want to do not like force you

4940.08 -> into you know like an anxiety tunnel so

4942.239 -> you can bye bye buy or whatever um just

4944.96 -> long term it works out better the more

4946.48 -> helpful we are

4948 -> as an organization but that's a great

4949.28 -> approach and customer io does a really

4951.44 -> like that's the reason i actually

4953.04 -> started using the tool it has some great

4954.56 -> stuff going on but like their ability to

4956.48 -> use it as

4957.76 -> a very lightweight database with a

4960 -> decent api

4961.52 -> um

4962.4 -> it's just it's it's and then it ends up

4964.639 -> being friendly to members of your team

4966.8 -> that aren't developers right like

4968.239 -> sending somebody necessarily to a fauna

4970.32 -> or a super superbase or whatever they're

4972.08 -> great applications but they're really

4974.56 -> made for

4975.679 -> developers they're they're like

4978.159 -> maybe even out of the low code territory

4980.32 -> and

4981.12 -> this is customer io once it's set up is

4983.52 -> very in the no code territory for or

4986.48 -> other folks that aren't developers on

4988.08 -> your team which is very nice yeah i do

4990.32 -> like the the kind of the effectiveness

4992.719 -> of of these tools that let you go you

4994.639 -> know no code if you get into the ui and

4996.4 -> then low code if you want to kind of

4998.159 -> integrate and you can get pretty wild

5000.08 -> with api customization if you want to

5002 -> really build out some complex stuff

5004.48 -> it's a hard abstraction to get right but

5006.48 -> it's really exciting when it works

5009.52 -> i'm also really glad that chris picked

5011.36 -> up on the the nsync reference because i

5013.28 -> very much wanted to start singing when

5014.88 -> you did the the bye bye bye

5018.88 -> i mean if you feel that always feel free

5021.679 -> for me anyway like i'm i'm here for it

5023.92 -> for sure

5025.28 -> yeah and

5026.4 -> there's you know like there's there's a

5027.44 -> lot of tools to do this there's a lot of

5028.96 -> different ways um to to approach this i

5031.52 -> think this core of what we talked about

5032.96 -> today is really powerful though and i

5034.48 -> got so excited

5035.92 -> when i saw middleware get announced this

5037.52 -> was like the first thing that jumped

5038.719 -> into my head and because it's a problem

5040.719 -> that i've had on our site and that i've

5042.4 -> hated across the internet when i'm like

5044.88 -> why don't you just if you know like you

5046.32 -> know i'm a customer show me the dang

5047.679 -> dashboard don't show me the marketing

5048.96 -> page every time right it's annoying to

5051.12 -> me and i'm easily annoyed though so like

5053.44 -> i don't i don't take it too personally

5055.12 -> when sites do that to me but like at the

5056.639 -> same time it always has felt like it

5058.639 -> could be better and i think we've lost a

5060.639 -> lot of that and a lot of our kind of

5062.32 -> client side and static site and all this

5064.56 -> stuff and you can still get all the

5065.76 -> benefits of those things like your

5067.199 -> static site generation it doesn't affect

5068.96 -> that you can do that all day long

5071.04 -> um you just you know keep it simple

5072.88 -> though that's probably like having the

5074.159 -> good segmentation strategy and

5075.76 -> understanding

5076.96 -> the like one

5078.56 -> to five different segments that you

5081.199 -> are actually servicing and you know like

5083.44 -> it's something like this i want to keep

5084.48 -> that very simple

5085.92 -> um and not you know try to do

5088.32 -> i don't know like you can you can

5090.639 -> i get you could probably abstract it and

5092.32 -> make it you know like it's less complex

5095.199 -> and yeah so if statement

5097.36 -> with with larger segments um and do

5099.679 -> fancier stuff but like at this point

5101.36 -> because of that 1.5 seconds anyway like

5103.28 -> you are really

5104.8 -> you know like you you got to keep it

5106.96 -> keep it lean for sure

5109.04 -> um

5109.84 -> we got a question from tony uh what's

5112.08 -> the customer list size that's the sweet

5114.239 -> spot to start paying for this kind of

5115.76 -> automation or is it more like roi based

5118 -> for you

5120.239 -> oh like when would i sign up for

5121.44 -> customer io mm-hmm

5123.76 -> gosh i don't know like you you

5127.36 -> you need to have it right like how are

5128.639 -> you gonna how are you gonna get by

5129.76 -> otherwise and there's probably you know

5131.12 -> like you can as a developer like you can

5132.8 -> go to something like super base that's

5134.08 -> probably gonna be less expensive to get

5135.36 -> into

5137.36 -> and customer i o is kind of kind of

5139.199 -> pricey and something like convertkit

5141.36 -> with their free tier

5142.96 -> is i don't know if you get api access

5144.96 -> though they know how to get the money

5146.239 -> from you uh and i'm i'm kind of spoiled

5148.159 -> because i have revenue uh and i'm able

5150.96 -> to fund some of this stuff um so if

5153.04 -> you're talking about like

5154.639 -> i'm bootstrapping a business and i need

5156.239 -> to know when i should start paying

5158.239 -> um

5159.12 -> gosh that's a that's a hard question to

5160.719 -> answer

5162.159 -> yeah i mean i think it's it's like how

5164 -> serious are you about it too because

5165.28 -> like you know i have i have things that

5167.52 -> i would love to go in and and do more

5169.679 -> automation on like you know learn with

5171.28 -> jason but it's not my full-time job it's

5173.36 -> not something that i'm going to put

5175.12 -> tons and tons of effort into and so

5177.52 -> spending a lot of money on on automation

5180.08 -> for something i don't actually have the

5181.679 -> time or intention to fully support right

5183.6 -> now is not a good use of my time but if

5185.84 -> like if something changes and i go full

5187.679 -> time on learn with jason i'm suddenly

5189.36 -> going to be paying for a lot of tools

5190.719 -> like this to try to make the site more

5192.08 -> useful to people and and make that stuff

5193.92 -> really work um

5195.76 -> so i'm going to paste this in chat and

5197.28 -> and just to talk about it because i

5198.719 -> think that circles back to what we were

5199.92 -> talking about at the beginning it's like

5200.96 -> when do you automate and

5203.199 -> this

5205.12 -> this

5206.08 -> little workshop that brandon gave and he

5207.84 -> gave me permission just to essentially

5209.76 -> like spill the tea on the entire thing

5211.6 -> with with the summary but like he gets

5213.44 -> in there and it's automation best

5214.639 -> practices and recommendations and

5216.88 -> like the number one thing he's saying is

5218.32 -> like get in

5219.52 -> and do it the hard way do it long form

5222.32 -> like have a simple form that feeds a

5224.48 -> google doc

5225.92 -> and captures emails and then talk to

5227.76 -> those people

5228.88 -> and don't worry about any of this and

5230.8 -> splitting when you're you're first doing

5232.32 -> it and you're talking to people and

5233.44 -> you're designing a solution you start to

5234.8 -> gain momentum

5236.159 -> um as you as you proceed

5238.48 -> and that is is how you understand it's

5241.12 -> like okay well i'm actually servicing

5242.639 -> this people are succeeding with what i'm

5244.239 -> offering uh people are signing up i'm

5246.32 -> actually helping them and guiding them

5247.76 -> along their journey

5249.28 -> and if i did this i could do that

5251.36 -> better right like not even really

5253.36 -> thinking about yourself or your life but

5254.8 -> thinking about their lives and what

5256.56 -> value you're bringing to their lives

5258 -> instead of

5258.96 -> uh what what you are how you are

5260.8 -> improving your own through automation

5262.8 -> your life is important but like i feel

5264.48 -> like your ability to automate some have

5266.56 -> learned with jason actually improves all

5268.08 -> of our lives because your show is better

5269.6 -> you get to think about higher level

5270.719 -> things and you actually do it so you

5273.76 -> know like that is that is important and

5275.28 -> that's thinking about the users because

5276.4 -> if this didn't exist at all

5278.32 -> then that would be bad right like uh

5282.08 -> and because you automate you're able to

5283.92 -> do it and you're able to do it longer

5285.44 -> and more consistently so that's good for

5286.96 -> your users so really like i think at the

5288.639 -> end of the day you have to think about

5289.84 -> them

5290.639 -> instead of you

5291.92 -> and is that you know like is this

5293.52 -> something that you're doing for yourself

5294.96 -> or is it something that you're doing for

5296.639 -> the customers that you serve and if you

5298.56 -> take that kind of service attitude

5300 -> towards the thing i think you're gonna

5301.44 -> find that it's better in general and you

5303.36 -> run into a lot less ethical problems

5305.199 -> yeah and like it's just generally like

5307.36 -> the way i want to think about this sort

5309.04 -> of thing versus like what's in it for me

5311.6 -> for sure i found that it follows pretty

5313.12 -> well like if you you work like that and

5314.96 -> you really work on trying to provide

5316.32 -> value and bringing value to their lives

5319.36 -> um

5320.239 -> your own success kind of kind of

5322.159 -> contrail that

5323.44 -> and fairly predictably like you know

5325.52 -> like in terms of of building a little

5327.6 -> little base of luck to stand on that's a

5329.6 -> good way to think about it nice well uh

5332.719 -> so that is that is all the time we have

5334.48 -> today so let me do a quick tear down of

5336.239 -> of everything here we've had jordan with

5337.92 -> us from white coat captioning all day

5339.52 -> doing the live captioning that's at the

5340.88 -> home page of the site learn with

5341.92 -> jason.dev that is made possible through

5344.32 -> our sponsors netlify fauna and auth0 all

5346.96 -> kicking in to make the show a little

5348.08 -> more accessible and while you're

5349.92 -> checking out things on the site make

5351.04 -> sure you go and check the schedule we

5352.48 -> got a lot of good stuff coming up it's a

5354.48 -> new year a whole lot of new content

5356.239 -> coming down we're going to be talking to

5358 -> alex about trpc which is something that

5361.04 -> i don't understand at all and i'm really

5362.56 -> excited to learn more we're going to get

5364.239 -> into supabase next week we're going to

5365.679 -> get into automation with n8n and a whole

5367.84 -> bunch of things that i haven't posted

5369.199 -> yet lots of lots of good stuff here so

5370.96 -> make sure you get over there

5372.48 -> you can subscribe on twitch follow uh is

5374.88 -> free and you'll get notified when i go

5376.32 -> live you can add this google calendar

5377.679 -> link and it will show up in your google

5379.36 -> calendar so you know when the show is

5380.8 -> going to happen

5382.32 -> make sure you go and follow joel on

5384.56 -> twitter that is a

5386.4 -> good time it's just grumpy posts all day

5388.96 -> in the most pleasant way possible

5392.8 -> and uh yeah any any final words for

5394.88 -> everybody joel

5396.32 -> oh i really appreciate it i'm looking

5398.639 -> for if you do like use this stuff i'd

5400.08 -> love to see it too so like if you make

5401.6 -> use of this thing send it to me and

5404.8 -> i'd like to check it out

5406.48 -> if you have any questions too or you

5408.239 -> know like you're digging into the code

5409.28 -> base feel free to reach out as well

5411.04 -> absolutely all right y'all we're going

5412.56 -> to call this one done so stay tuned

5414.4 -> we're going to go find somebody to raid

5415.92 -> joel thank you so much for your time we

5417.6 -> will see you all next time cheers

Source: https://www.youtube.com/watch?v=PIOMMQuwq8Y