Build a scalable design system for enterprise websites with Payload CMS & Next.js

Aug 15, 2023

Build a scalable design system for enterprise websites with Payload CMS & Next.js

How do you make the dream of a design system for your company stand up to the reality of other teams actually using it in prod? James Mikrut will show us how.

00:00:00 - Welcome
00:00:23 - Who is James Mikrut?
00:04:53 - How do you build something cohesive?
00:20:15 - Starting with the Figma file
00:22:23 - Talking about block spacing
00:30:12 - How websites can be set up
00:35:56 - How do you ensure the right amount of flexibility in your layout blocks?
00:47:41 - What about accessibility?
00:57:31 - In the code of the Payload app
01:04:01 - How does versioning work?
01:22:37 - Tips for maintenance of design systems
01:23:52 - Where to find out more about Payload

Repo: https://github.com/payloadcms/learn-w…

Links

https://twitter.com/JamesMikrut

https://payloadcms.com/

https://github.com/payloadcms/learn-w…

https://payloadcms.com/docs/getting-s…

https://www.learnwithjason.dev/

https://www.learnwithjason.dev/schedule

https://jamstack.org/conf

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

This episode was sponsored by:
- Netlify (https://lwj.dev/netlify)
- Nx (https://lwj.dev/nx)
- Backlight (https://lwj.dev/backlight)

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.54 -> JASON: Hello, everyone, and welcome to another episode of Learn With Jason.

9.59 -> Today on the show, we've got James.

12.51 -> James, how you doing?

14.44 -> JAMES: I'm great.

15.44 -> How are you?

16.44 -> JASON: I'm great.

17.44 -> I'm excited to have you on the show let's start by setting some context.

24.34 -> Do you want to give a background on yourself?

28.07 -> JAMES: I have a hybrid background.

30.38 -> I started as a UI designer.

32.78 -> I just had a natural interest in writing code, so I taught myself how to write JavaScript

40.3 -> primarily, starting in 2010 or so.

43.579 -> Then I kind of followed all the way through as a full-stack engineer for the last 12 years

48.059 -> or so.

49.059 -> So I'm half design, half development.

51.93 -> I really sink my teeth into the React ecosystem and front-end stuff in specific.

57.579 -> But I write TypeScript front to back.

60.83 -> I'm the CEO of Payload CMS.

63.84 -> Just went full time on it, actually.

66.22 -> I've been in the agency world for the last seven years.

70.1 -> We're closing the agency down, bringing all the employees over to Payload and just going

74.59 -> full speed ahead on Payload.

75.92 -> So it's a really exciting time for me.

77.5 -> JASON: Yeah, yeah, that's super exciting.

80.09 -> Always a good moment when you're able to actually go full time on the thing, right?

86.29 -> How long were you working on Payload CMS before you went full time on it?

89.78 -> JAMES: A couple years.

91.52 -> My agency was using it as dog food for our own projects.

95.479 -> And those projects were anything from a full e-commerce custom product designer to, like,

100.88 -> an Uber for snowplows to enterprise websites, you name it.

104.799 -> But we took a lot of care in the design of the API to try and reduce breaking changes

110.969 -> as much as possible once we released it for public beta and now 1.0 production.

116.909 -> So it's been years in the making.

118.92 -> But we've been -- since 1.0, we released 1.0 in July of this past summer, and that was

126.789 -> right in the middle of YCombinator.

131.2 -> And I had a newborn.

132.62 -> JASON: Sounds like you've had a real boring go of it.

142.42 -> JAMES: I don't know what day it is.

146.989 -> I don't know what time it is.

149.89 -> JASON: Yeah, no kidding.

150.98 -> Geesh.

151.98 -> So that's exciting.

153.04 -> So I'm always curious when it comes to something like this.

155.709 -> You were at agency.

157.42 -> You built out Payload CMS, presumably to scratch your own itch.

161.15 -> You had a need.

162.81 -> You wanted to solve things in a way that you didn't feel was being met by the market.

169.37 -> So here's a question.

174.879 -> Is Payload CMS boot strapped, or did you end up taking investment for it?

180.2 -> JAMES: We built the entire thing, including all the way up to 1.0, completely bootstrapped.

186.069 -> But we did just graduate from YCombinator summer 2022 batch.

190.29 -> So that was our first investment we took.

193.67 -> Then we just raised a bunch of money from some pretty notable investors, which we have

199.42 -> an announcement coming out within the next month.

202.2 -> It's going to coincide with our launch week, which is November 14th.

206.599 -> We're going to do a fundraising announcement among many other things.

210.4 -> So we're no longer bootstrapped, but for the first couple years, we definitely -- after

215.59 -> hours, passion project, pouring our heart and soul into this.

219.76 -> As you know, it's open sourced as well.

222.239 -> So it's just fully MIT license, and we got there bootstrapped for sure.

226.189 -> JASON: Very cool.

227.189 -> Well, congratulations on the raise.

228.76 -> Look forward to that announcement.

231.84 -> So let's talk a little bit about -- actually, I kind of want to do two things here.

238.129 -> We're talking today about building scalable design systems for enterprise websites.

243.12 -> This is sort of -- this is the holy grail, right.

245.069 -> When I went over to IBM in 2016, one of the big things that they were struggling with

252.79 -> -- my whole feed just went super weird.

255.92 -> JAMES: I see that, yeah.

257.579 -> JASON: It looks okay on -- hmm.

260.989 -> JAMES: Yeah, I think it's good.

264.6 -> I think it's our little preview window that's jacked up.

267.139 -> JASON: Well, that's not good.

269.11 -> Let's see if it clears itself up when it comes time for screen share.

272.52 -> We'll cross that bridge when we come to it.

275.35 -> Okay.

276.51 -> So when I joined IBM, there was a project under way that had been under way for a while

284.68 -> called carbon design system.

287.1 -> The intention of this project was how do you get 30-plus teams who all need to build for

294.41 -> the web who use Angular, Vue, React, Backbone, jQuery, no framework.

302.66 -> How do you get them all to build something in a way that feels cohesive?

307.5 -> And how do you do that in a way that doesn't require you to just wield the hammer of authority

313.86 -> and basically tell people do it this way or you're fired?

316.86 -> Right?

317.86 -> And something that I thought was really unique about carbon was that they had the buy-in

323.27 -> that they could have gone out and just, like, swung that hammer and said no, this is the

327.06 -> way we do things.

328.06 -> You either adopt this or you're fired.

331.12 -> And instead, they wanted to win the hearts and minds of developers and actually get them

336.31 -> to choose this design system.

340.169 -> And it's hard.

341.389 -> You know, it is an extremely challenging thing to do, to go out and convince people who,

347.71 -> you know -- let's do a little philosophical aside.

352.18 -> Are you familiar with the concept of dark matter developers?

354.57 -> JAMES: No.

355.59 -> JASON: So there's this idea that when you get on Twitter, you're seeing the loudest

362.25 -> and most visible voices in development.

363.99 -> And they're the extreme edges of the bell curve, right.

369.35 -> The vast majority of developers, you know, there are millions of developers, they don't

374.189 -> -- they're not on Twitter.

375.98 -> They're not on social media.

376.98 -> We don't hear from them.

378 -> They're just doing their jobs.

380.349 -> So for those developers, those dark matter developers, they're not in it for, like, the

386.4 -> excitement of the latest framework or the drama on JavaScript Twitter.

392.09 -> They're there because they've got a job, they've got to ship this thing, then they want to

396.389 -> go home and spend time with their families or have their hobbies or whatever it is they

400.02 -> do.

401.02 -> At IBM, there are a lot of folks who don't identify as their career.

407.15 -> They're not there because they live and breathe code.

411.56 -> In a lot of cases, they've inherited systems that are really -- they're legacy code.

416.75 -> They haven't been updated in a really long time.

419.66 -> There are, you know, a lot of issues with it.

422.06 -> It's basically so complicated at this point it's like what I've joked is an append-only

427.08 -> file, where you know, it's a million lines of code and they can old add to the bottom

433.199 -> because they don't know how to change anything at the top because it's all 15 years old.

437.009 -> I don't know what happens when you delete that.

441.16 -> So when you have got a group of developers who absolutely do not want excitement in their

446.67 -> job, you can't go out and run a hype tour.

448.759 -> Oh, we've got this amazing build or this new component system!

451.9 -> It's going to change everything!

453.24 -> It's going to be so nice and modern!

454.69 -> They're like, I don't care.

455.69 -> Don't make me do work.

456.69 -> Don't touch my stuff.

457.72 -> Right?

458.72 -> Like, I got tickets.

460.09 -> I need to get these tickets done, and then I want to go home.

462.54 -> So what you're talking about is an extremely challenging thing, right?

467.879 -> At least in my experience.

469.8 -> So how do you approach this?

471.539 -> I guess what led you to even think that this was the right topic to try to tackle?

475.56 -> JAMES: So I have to draw an important distinction.

478.289 -> Like, carbon design from IBM and material design from Google, those are like true visual

485.21 -> design languages that, like, focus on the very, very granular pieces of a UI language,

490.99 -> like shadows and depth and what pixel-rounded edges you need for many different components.

497.58 -> There's, like, an infinite depth to that entire arena of work, but what I'm going to focus

504.34 -> on today is actually more about how to set up like a tool for editors to use.

510.479 -> It's more about giving control but not giving too much control.

514.64 -> Because if you think about a page builder, like Square Space or any of those, even Web

523.12 -> Flow to an extent, you get so much control and then your editing team goes crazy.

528.69 -> Then they have red paragraph and bold, italic, underline all in the same little area.

535.47 -> They just get wild with the tools they're given, and they have too much control.

540.56 -> They end up creating a Frankenstein out of the tools that you've given them.

544.88 -> So for me, today's topic will be about how to structure a CMS and then the front end

551.33 -> that corresponds with it to deliver enterprise editors with the flexibility that they need

558.55 -> to be able to maintain a large web project over time but not allow them to go off the

563.82 -> rails and create the Frankenstein we want to avoid.

567.4 -> So the design system that I'm talking about is like maybe one level up of the minutia

572.2 -> at the shadows and border radius, and it's more about how you structure a CMS so you

578.39 -> deliver just the right amount of control in a very deliberate manner so that it can't

584.75 -> be hijacked and manipulated, right.

588.34 -> And I'm passionate about that.

590.91 -> For me, being that I sit on kind of the design and development table both, I've had to design

596.99 -> and build large CMS for a lot of my agency clients.

600.99 -> One of them was Klarna, actually, in 2019.

605.399 -> They had, you know, 30 content editors from all over the world.

609.7 -> There was a site for Germany, for Sweden, for Australia, North America, UK, and they

615.741 -> all had to use these same tools but to express very different messages.

619.98 -> So how do you design these tools and then equip content managers with tools that they

626.829 -> can be productive with but not go off the rails?

629.589 -> JASON: Got you.

630.779 -> Okay.

631.779 -> That makes sense.

633.019 -> And so is this the, like, intended purpose of Payload CMS?

640.66 -> It's that pairing with the editors and the developers to try to set up the right guidelines?

646.959 -> Or is this an application of Payload CMS?

649.44 -> JAMES: I think it's an application of Payload, and I think we got to get a little philosophical

653.76 -> again for a second.

654.76 -> JASON: Let's do it.

655.76 -> This is my favorite part of the show.

656.76 -> JAMES: So right now, there's one blanket term to refer to anything like what Payload is

665.07 -> and what Strappy is and Sanity.

669.399 -> Content management system, right.

671.08 -> But in reality, content management system is thought of as managing content for brochure

678.01 -> websites, right.

679.26 -> Like you use a content management system to power a website.

684.3 -> But in reality, content to the internet means a lot more.

687.92 -> Like, let's take for example Spotify.

690.84 -> Someone at Spotify has to manage album art and playlists and artist descriptions and

696.12 -> all of the metadata that goes with that.

697.85 -> Then the content gets used in apps.

700.7 -> It doesn't get used in a website, but it's still content that powers the internet.

705.06 -> In the same way as that, you could, with a content management system that's appropriately

709.72 -> flexible, you could manage orders, manage shipments, manage requests, manage customer

715.31 -> profiles.

716.47 -> All of that is content that you need to have an admin interface to manage.

721.12 -> But is that really a CMS?

722.55 -> It's hard to put a label on it, right.

724.61 -> So I think the industry as a whole is kind of needing a better label for the power that

732.19 -> managing content represents outside of just calling everything a CMS.

737.079 -> So the reason I'm saying this is because I think Payload, one application, is to power

741.51 -> websites in the right way so that they can't be turned into Frankenstein, but Payload is

747.41 -> much more powerful than that.

748.57 -> It actually borders on an application framework because of our deep access control and because

753.93 -> of our hook-based infrastructure and all this server-side stuff.

758.58 -> So I wouldn't want to trivialize it by saying this is the only thing it's good for, but

762.88 -> that's why we just picked the label CMS for now.

765.04 -> Because that's what everybody resonates with.

766.54 -> But I think there's room for improvement there.

769.18 -> JASON: And you bring up something interesting, which is kind of touching on what I'm starting

776.389 -> to feel as a bit of a sea change in the way we relate to the internet in general.

783.72 -> I feel like when first started building for the web, the website was sort of an add on.

792.86 -> The app was an add on.

795.37 -> And you would use it as a bonus to go along with the retail experience or the in-person

801.699 -> experience or sitting down at the restaurant.

805.57 -> Now the website for, you know, betterment, for example, the financial institution, that's

813.57 -> their entire experience.

814.88 -> I don't know if you can even get a person on the phone and have a phone experience.

819.36 -> They don't have branches, so you can't walk in anywhere.

823.269 -> There is no real-life experience of betterment.

826.39 -> The website is everything.

827.75 -> JAMES: Absolutely.

828.839 -> JASON: And their app and web interface is the whole thing.

833.199 -> And that fundamental shift has really pushed a lot of things that I think would have been

839.19 -> considered specialty, like a deep content experience for an ultra complex set of inventory

846.49 -> management or whatever it was.

850.291 -> It kind of felt like for a while we looked at it as, well, if you have really complex

854.48 -> inventory, you use something like Shopify.

858.329 -> Because they're built for managing inventory.

862.62 -> And anything else is just content, right.

864.43 -> So just put it into a CMS.

866.17 -> So you bring up a really good point that we've sort of evolved to an additional layer here

872 -> where the web is the primary entry point for the vast majority of businesses, and for many

878.48 -> businesses now, it's the only surface area.

881.76 -> Which means all of that complexity is in the web now.

886.5 -> And we have to be able to both as web developers, you know, think and reason about it, which

892.19 -> is why I get so excited about things like serverless functions and edge functions.

895.82 -> It flattens that learning curve of dealing with that complexity.

899.55 -> But then you also have to think about how you manage, you know, how do the people who

903.44 -> work on the website work?

905.19 -> What are the ergonomics?

908.14 -> How do you make sure you don't create this Frankenstein mess of people have unlimited

915.649 -> flexibility and will absolutely use it, you know.

918.519 -> We've all seen posters designed in Microsoft Word by somebody who didn't have any constraints.

924.67 -> And that's clearly not an acceptable way to move forward on the web.

929.67 -> So this is interesting.

930.67 -> You're in a cool space here.

932.62 -> And I like the angle.

934.69 -> I like where your head's at.

935.82 -> JAMES: Yeah, you know, it all just kind of arose out of necessity, like you said early

940.55 -> on.

941.55 -> Because my agency was building pretty complex things, and we'd have to kind of assemble

945.98 -> different technologies.

947.66 -> Sometimes we would build a Laravel app if we had super complex stuff.

956.519 -> But we've built this as like a silver bullet solution.

964.019 -> You own the back end as well as the front end.

966.31 -> So you can build any type of functionality, integrate with any third-party service because

970.87 -> you've got the back-end infrastructure already.

973.75 -> And it's just the beginning, you know.

975.58 -> We've got a lot of stuff in store.

976.98 -> And I'm pretty excited about it.

978.45 -> But the industry is changing, like you said.

981.87 -> Content is critical, and to power critical infrastructure, you need to have a tool that

985.949 -> you can rely on.

987.029 -> That's what we're trying to do.

988.73 -> JASON: Got it.

989.73 -> Got it, got it.

990.73 -> Okay.

991.73 -> So let's talk through a little bit of what we're going to do today, specifically.

995.51 -> So we're going to be working with the Next.js app.

998.06 -> We're going to set it up with Payload CMS.

1001.54 -> How do you -- like, what is the overarching goal for what we're going to accomplish?

1006.389 -> JAMES: So I have three things.

1008.269 -> Number one is a Figma file.

1010.24 -> Number two is the CMS repo itself.

1013.829 -> So the Figma file gets translated into the CMS.

1016.95 -> And then we're going to have a website repo on Next.js as well.

1020.05 -> All of it's built in TypeScript on both the CMS and the Next side.

1023.18 -> But you can see the progression of going from Figma to the CMS to the website.

1028.16 -> And we can just go just review them all.

1030.419 -> I don't think we really need to write any code today unless we find something we want

1034.25 -> to play around with.

1035.299 -> But my team and I just kind of splashed out a bunch of stuff over the last, I'd say, 24

1041.89 -> hours.

1042.89 -> It was kind of a mad sprint here, but we got some cool stuff done, and it should be -- let

1049.86 -> me share these with you real quick.

1054.48 -> It should be pretty cool.

1055.559 -> JASON: Nice.

1056.559 -> All right.

1057.559 -> Well, while you're doing that, I'm going to flip us over into our Next view here.

1061.08 -> We're going to move over into the pair programming view.

1064.44 -> I'm going to move the cameras off so we don't get inception.

1068.31 -> Here we go.

1069.79 -> And so first, let's do a shout out to the captioning.

1074.21 -> We have Rachel with us today.

1076.4 -> This episode, like every episode, is being live captioned.

1079.85 -> That's through White Coat Captioning.

1080.929 -> Thank you very much.

1081.929 -> And that's made possible through the support of our sponsors.

1085.4 -> We have Netlify, Nx, and New Relic and soon Plural Site.

1089.169 -> Still working on that paperwork.

1091.159 -> We're going to have the support that allows this show to continue to function.

1095.549 -> So, thank you all very much for that.

1097.27 -> We're talking today to James.

1098.59 -> Make sure you head over and give a follow on the Old Tweeter.

1104.26 -> And we're talking about -- I'm in the wrong window.

1107.38 -> We're talking about Payload CMS.

1109.91 -> I'm making a guess.

1110.91 -> There it is.

1112.08 -> Payloadcms.com.

1113.28 -> Make sure you go over and give that a follow as well.

1117.049 -> All right.

1118.929 -> So at this point, I have installed MongoDB.

1125.17 -> Let's make sure that worked.

1126.21 -> What is that?

1127.21 -> JAMES: I don't know.

1133.34 -> Usually it would just tell you the version.

1141.179 -> Looks like you have it, though.

1142.41 -> JASON: Do I need to -- brew services.

1145.79 -> Oh, I have to actually start it.

1147.321 -> That's what I did wrong.

1149.23 -> So we'll start it.

1155.36 -> JAMES: Looks promising.

1157.87 -> JASON: Still no.

1162.309 -> Let's see.

1163.32 -> Oh, don't you tell me I have to restart my computer for this to function.

1167.71 -> JAMES: We can just get a Mongo Atlas, too, if we want.

1170.88 -> JASON: We might need to.

1172.97 -> Brew services restart.

1174.94 -> Why do you think I need Postgres?

1181.11 -> Make sure Postgres is stopped?

1183.179 -> JAMES: Oh, maybe does it run on the same port?

1187.02 -> JASON: Same data directory.

1189.75 -> You can move to a different one.

1193.49 -> Why is Mongo using Postgres at all?

1197.15 -> JAMES: Looks like it's probably just conflict of the place that it stores the data.

1203.9 -> Well, we probably could get pretty far without even needing the database.

1209.6 -> Like, we could pull up the Figma file and review that.

1213.19 -> JASON: Yeah, let's start there.

1215.48 -> Then we can start digging into the other pieces and solve those problems as we get to them.

1223.649 -> I've learned my lesson.

1224.73 -> I'm going to set up the database ahead of time next time.

1228.33 -> JAMES: That's all good.

1230.03 -> We'll figure it out.

1231.28 -> Okay.

1232.28 -> So you can actually click on my pointer there.

1234.271 -> Yeah, then you just follow me.

1235.47 -> But basically what I've got here is just a quick-and-dirty Figma file that goes over

1241.9 -> principles we tried to bake into our front-end framework when we translate CMS building blocks.

1248.75 -> There's a couple very important, like, fundamental rules that if you follow, everything will

1255.039 -> become a lot easier.

1256.51 -> The first one is just setting your type properly.

1258.98 -> This is no surprise to anybody, but typically, the designers at my agency would go through

1263.34 -> and create type styles out of a different heading and maybe some branded elements as

1269.9 -> well.

1270.9 -> So maybe we have large-body copy in addition to the headings.

1273.46 -> Then a label and just some button styles here.

1277.1 -> Like this is all meant to be pretty wireframe and not highly designed.

1281.02 -> More so just to show the intent of the different pieces that build up a typical CMS.

1287.12 -> But we also show the margins.

1289.23 -> So this heading one here has 72 pixels on the top and 48 on the bottom.

1295.049 -> 60 and 48, blah, blah, blah.

1296.049 -> Then we do this for each break point.

1298.17 -> So this is the large break point here.

1301.57 -> And then we have another set of type styles for the laptop-size break point.

1306.79 -> Then we have another one for mobile.

1309.33 -> If you lay this out like this in Figma as a reference, then your engineers that actually

1313.18 -> have to translate the site are going to have a lot easier of a time just translating all

1317.1 -> of this stuff over into CSS.

1319.27 -> So when we clone those repos down, we'll be able to see how they translate into the CSS.

1324.57 -> But this is pretty much where we start.

1326.62 -> And it's just a quick get everybody on the same page and have a source of truth for the

1332.04 -> type sizing and the hierarchy.

1333.87 -> This is just all the system font, so it's SF pro whatever display.

1338.2 -> JASON: Right, right.

1339.58 -> JAMES: But yeah, so after we define the type and the buttons, we want to talk about block

1345.72 -> spacing.

1347.539 -> Block spacing is something you can quickly run into a lot of problems unless you very,

1352.84 -> very clearly and deliberately structure it.

1355.59 -> So typically for a lot of websites, you have different background color blocks and the

1360.65 -> funny thing about those is what I'm looking at here is like three blocks.

1366.23 -> Content block, content block, content block.

1368.75 -> The first one should have 120 pixels padding on the top.

1373.62 -> But if the second block is the same background color as the first, it should have less space

1379.549 -> between them.

1382.08 -> If you doubled up the 120, that's going to be a huge space between the blocks, right?

1386.56 -> So you want to have some programmatic way of enforcing block spacing that blocks of

1391.88 -> the same background color can collapse their margins on top of each other.

1397.669 -> And maybe I skipped a little bit of this, but generally, everything that we do nowadays

1402.82 -> is going to be on a layout-building mentality, like a block-building mentality.

1407.01 -> So all the big CMSs do this really well.

1410.11 -> Prisma has slices, which are great.

1412.61 -> Contentful, you can build in references to other content models.

1417.12 -> And you want to craft your page content on a layout-building mentality.

1422.83 -> But when you give that control to editors and you don't have a very good mindset over

1428.14 -> how to space the blocks from one another so that the vertical rhythm is always going to

1434.54 -> be build on your baseline grid and it will always be appropriately spaced no matter what

1441.77 -> the block background colors are, right.

1444.12 -> So if you switch to a dark background, bam, you're going to need 120 pixels again.

1451.4 -> But if the two blocks are the same background color, then they should condense and be smaller.

1455.45 -> JASON: Gotcha, gotcha.

1457.1 -> JAMES: So we try to spell all of that out as much as possible.

1460.05 -> Then we try to programmatically enforce it when we get to the front end in the Next.js

1465.62 -> stuff.

1466.62 -> So we've got a lot of that stuff to show as well.

1468.44 -> But this is huge.

1469.919 -> This will help your site feel consistent and structured rather than if you're defining

1475.27 -> block spacing all willy-nilly on every single block and it's different everywhere.

1479.76 -> It's going to lack that vertical rhythm that's so necessary.

1483.169 -> JASON: Right.

1484.83 -> Right.

1485.83 -> And as a big fan of willy-nilly myself, I have to agree with this.

1490.059 -> It's not right everywhere.

1491.95 -> JAMES: Exactly.

1493.69 -> If you can enforce it programmatically, you're going to get aesthetics as well.

1501.04 -> And the other thing is if you're putting text inside a block, you need to turn off the first

1509.35 -> child's top margin and the last child's bottom margin.

1513.88 -> This is wrong because this is going to create too much space.

1517.64 -> So you have to automatically disable the top and bottom margins because we have on our

1522.539 -> -- what is this?

1523.539 -> H4?

1524.539 -> We have 36 pixels on top of it.

1526.14 -> But if you keep that, your rhythm is going to be all crazy because you're going to have

1530.231 -> the 36 pixels up here, and it's going to overlap.

1533.74 -> You're going to create extra space.

1535.62 -> So you have to turn that top and bottom margin off for your first and last.

1541.55 -> Again, doing that programmatically is going to be the best bet because you're editors

1544.14 -> won't be able to screw it up.

1545.75 -> JASON: Exactly right.

1547.73 -> I think one of the big pieces that is really challenging with this is as engineers, we

1556.289 -> are -- like, we have a tendency toward configuration.

1562.57 -> And we think to ourselves, well, somebody might need that.

1564.64 -> So I'll just add a switch for it.

1566.669 -> You know, let them set that to true if they need that margin.

1569.919 -> Or margin collapse true.

1571.809 -> Something like that.

1573.69 -> You start making all these configurations, but when you hand this to an editor and they

1578.14 -> open the page and it's just a thousand check boxes, they're like I'm just not going to

1583.04 -> use this.

1585.82 -> Immediate overwhelm.

1587.62 -> Or worse, they just start checking buttons and they're not 100% sure what they do.

1592.11 -> Then they don't go back to a default so it just ends up being kind of messy.

1599.47 -> Or each one -- this is always my favorite.

1602.3 -> Each one adopts their own signature style, as all of white house have received an email

1606.98 -> that was clearly edited to use, like, Comic Sans or something.

1611.95 -> Ah, I see you found the font setting in your email editor, right.

1616.87 -> You don't want your CMS to have that same option, where somebody can be like, well,

1619.93 -> I want every page I write to have a signature style.

1623.059 -> JAMES: I could not have said any of that better myself.

1626.539 -> You don't know how many times I've built a CMS and I've included the check boxes for,

1631.91 -> like, turn off top margin, turn off bottom margin.

1635.48 -> Padding top, medium.

1636.59 -> Padding top large.

1638.21 -> Giving them too much control like that is the killer of any good UI.

1643.429 -> Honestly, even the most power users of your CMS probably don't want that.

1649.549 -> They probably want it handled for them.

1652.289 -> So if you can come up with a mindset of building that interior structure, your project is going

1657.79 -> to be more successful.

1658.79 -> And that's pretty much like the ethos of what I'm trying to show today.

1661.95 -> JASON: And I think the other thing to consider for folks looking at this saying I want that

1670.679 -> setting, what job is somebody showing up to do when they use a tool?

1677.17 -> You know, I'm an engineer.

1678.42 -> I'm showing up because I need to tweak this stuff.

1681.51 -> So of course the job I need my tools to do is to give me that optionality.

1686.269 -> Maybe my components let me do that.

1688.77 -> But as a content editor, the job I'm showing up to do is putting content on this website.

1697.39 -> I'm not there to design.

1698.61 -> I'm not there to configure, and if I have to, it takes me out of the job that I'm trying

1703.87 -> to do and into a different job.

1705.89 -> And that context switching is hard.

1708.12 -> And it also puts people out of their expertise.

1710.15 -> An expert writer is not necessarily an expert designer and vice versa.

1715.659 -> And that's why we don't want designers writing ad copy and we don't want advertisers writing

1721.239 -> -- like doing our designs.

1724.25 -> And the CMS needs to respect who's here to do what job and make sure that they keep sending

1732.049 -> the right context.

1733.52 -> JAMES: Exactly.

1735.14 -> And it's funny.

1736.14 -> In the comments right now, we have Ben Myers saying he wants red, bold, upper case, underline,

1741.019 -> and italicized.

1742.019 -> Maybe we can make a special CMS for you.

1746.08 -> JASON: (Laughter).

1747.91 -> That one just publishes to nowhere, Ben.

1750.1 -> JAMES: That's called brutalist design right there.

1754.57 -> Have fun.

1755.76 -> Yeah.

1756.86 -> No, I think we're really on the same page with all of this so far.

1761.59 -> It's good stuff.

1762.68 -> But yeah, this is where we start.

1765.5 -> And this little Figma exercise here is very rudimentary.

1769.64 -> We didn't put any time to making this beautiful from a design perspective.

1775.34 -> It's utilitarian.

1776.34 -> It's supposed to be the nuts and bolts, the core ideas.

1780.35 -> So obviously we didn't pick the fonts or anything.

1782.769 -> I think with this, this is just kind of a quick style guide.

1786.11 -> We usually write up some rules, how to break it down on laptop, mobile, large, stuff like

1791.44 -> that.

1792.44 -> And then we just kind of set up the road map for when we go to start writing the code.

1795.69 -> We have an exact understanding of what we're going to do.

1797.62 -> So with that, let's look at the second part of the Figma file, shall we?

1802.419 -> JASON: Let's do it.

1803.549 -> Where do I go?

1805.08 -> Oh, I'm following you.

1806.61 -> JAMES: Yeah, you can just follow me.

1809.299 -> So with any website, at least for my agency the last probably four years, this is our

1816.159 -> kind of paradigm.

1817.22 -> We break up the website interface into the hero section, which is above the fold.

1823.95 -> That's like the -- "above the fold" in quotes, I guess.

1826.1 -> The fold doesn't exist.

1828.51 -> But the hero section, this is what a lot of people consider as a template, which it's

1833.35 -> not a template.

1834.35 -> It's just the first block on the page.

1838.039 -> Heroes are kind of going to need to be visually distinct from one another.

1843.72 -> Like on a homepage, you're probably going to have a high-impact, very graphical, like

1850.159 -> something that's going to make a branded statement.

1852.14 -> Then when you get further into the website, you're going to have more utilitarian heroes

1856.1 -> that maybe have a couple jobs to fill.

1858.08 -> Maybe a couple calls to action.

1860.47 -> Then the tertiary pages like privacy policy and things like that are going to have the

1865.25 -> lowest impact.

1866.84 -> Just give me a headline and get to the page content, right.

1869.15 -> JASON: Right.

1870.15 -> JAMES: But that first section, the heroes, what we try to do is come up with a set of

1875.38 -> heroes.

1876.38 -> When we're doing the UI design, we say what does this website need to do?

1879.769 -> What are the heroes we need to build?

1882.33 -> Oftentimes we'll end up with like eight to ten of them, maybe content and media, maybe

1887.111 -> a slider, maybe full screen image background, maybe a video background, maybe some kind

1892.429 -> of broken grid.

1893.83 -> Whatever it is.

1894.929 -> The branded heroes, like, that's the first item on the page.

1897.799 -> So on a page-by-page basis, you're going to choose which hero you want to render.

1903.95 -> The hero is not a layout building block.

1907.059 -> The hero is a static one-off thing per page that you choose to render.

1913.32 -> For this example, what we've got is a high-impact hero, which is just real quick and easy.

1919.15 -> Like an image and some calls to action and a headline with the large body.

1923.91 -> Then we show the grid.

1925.75 -> So it's a 12-column grid.

1927.63 -> Everything is based on 12 pixels baseline.

1930.35 -> And it's as simple as can be, right.

1933.73 -> The design isn't crazy, but the idea is that the editor should be able to choose from the

1938.95 -> heroes, and the first one we have is the high-impact hero that could be good for a homepage or

1944.07 -> a campaign page or whatever.

1946.769 -> By the way, I have a cold, and I can barely breathe.

1948.95 -> So if you feel like I'm breathing through my nose, it's because I -- yes, I'm dying.

1955.38 -> So, cool.

1957.32 -> But yeah, so this is the large break point.

1959.96 -> This is like 1920 pixels, similar.

1963.38 -> Breaks down to a laptop screen size.

1967.32 -> The gutter gets a little smaller on the outside there.

1970.5 -> And the grid gets a little more condensed.

1972.389 -> Then the mobile.

1975 -> But this is all the high-impact hero.

1977.049 -> Then we have another medium-impact hero.

1979.76 -> Just a little less from a visual perspective.

1982.34 -> Still has an image.

1985.36 -> Breaks down on mobile.

1987.98 -> Finally, we have the low impact.

1991.23 -> This is the utilitarian one.

1992.97 -> Just straightforward.

1994.11 -> No imagery.

1995.25 -> JASON: Got it.

1996.25 -> Okay.

1997.25 -> JAMES: If you can choose which hero on a page-by-page basis, then you can craft the user journey

2003.2 -> from the landing page all the way to the conversion point by starting high and ending up utilitarian

2010.12 -> inside lower-level like into the user journey.

2013.05 -> So typically, this is just three different heroes, and you can name them whatever you

2016.82 -> want.

2017.82 -> But the idea would be that you build your CMS to have a very static set of deliberately

2023.049 -> designed hero options.

2025.32 -> Then from there, you start to leverage the layout builder itself.

2030.049 -> JASON: Right.

2031.799 -> JAMES: But the layout blocks are separate than the hero.

2035.139 -> So you choose the hero then go into the layout blocks.

2038.61 -> The layout blocks are meant to give variety and versatility.

2044.139 -> Maybe to get a little philosophical once again, even though I'm a designer, I firmly believe

2050.82 -> that a successful design does not start by painting a pretty picture or starting in wire

2058.81 -> frames.

2059.81 -> It needs to start around the message or the problem at hand and the solution through the

2064.58 -> content of the page.

2067.389 -> So for me as a designer, if somebody asks me to build their website or design their

2071.399 -> website, I'm going to say, okay, what's your message?

2073.29 -> What do you need to do?

2075.17 -> What's your content?

2076.24 -> What do you want to do with this website?

2078.389 -> And it's really going to be up to the content to determine the shape of the page, right.

2085.25 -> Every page, the, quote, design of the page is based on the content.

2092.369 -> JASON: You're bringing up what I think is what I notice to be the fundamental tension

2099.29 -> of block builders and thoughtful design.

2106.3 -> What you end up with is, okay, so the message dictates we need these things to exist.

2113.19 -> The blocks dictate that everything needs to fit into these boxes.

2118.05 -> One of the main tensions that I see come in is that you've got a very thoughtful layout

2126.099 -> builder that cannot service the needs of the message that needs to be sent.

2131.82 -> So then people talk themselves into a, well, just this once we'll do a one-off bespoke

2137.849 -> landing page.

2138.89 -> Just this once we'll do it as a microsite instead.

2142.18 -> Then we'll clearly maintain that.

2145.8 -> And then you get this sprawling maintenance burden of like, welt, we one-offed that thing,

2151.65 -> we escaped the design system for this thing, we made a microsite for this launch, and now

2156.99 -> all of that is aging.

2159.47 -> Because it's not maintained with the rest of the system.

2162 -> So as we're looking at -- so you've got these layout blocks, right.

2166.7 -> When you're starting with your message, how do you make sure that you've got the right

2172.79 -> amount of flexibility in your layout blocks to support any message?

2177.04 -> JAMES: Really good question.

2179.29 -> So we actually, at my agency, would never even start identifying what layout blocks

2187.06 -> we need until after we've gone through a very thorough wire framing process.

2191.78 -> And when I'm saying wire frames, a lot of people think of wire frames and splash something

2196.15 -> together with boxes with Xs in them.

2199.39 -> You just check it off your plate.

2201.27 -> As a designer, yep, I did my job.

2203 -> I did wire frames.

2204.17 -> But in reality, it's so much more important than that because what you do is you take

2209.079 -> the message from the client, you take the message from the project, and you distill

2213.15 -> it out into, okay, we have this job to do on this page, we have this job to do on this

2218.25 -> page, we have this job to do on this page.

2220.569 -> Do we see any overlap of these different jobs?

2222.79 -> Can we find the lowest common denominator of these pieces that need to play together

2227.55 -> and design for the message?

2231.45 -> We identify what layout building blocks we need based on what each page needs to do.

2237.46 -> So you don't say, like, hey, content editor, here's your six blocks, have fun.

2242.569 -> Write your message according to these six blocks.

2244.21 -> You say content editor, what's your message?

2246.59 -> Let me design you some blocks for your message.

2249.18 -> And you try to be as holistic as possible from square one.

2252.75 -> So right when you start, you don't go start pulling stuff out of thin air.

2257.83 -> You work with wire frames.

2259.609 -> You try to massage the content into appropriate layouts that are effective.

2263.19 -> Then you figure out the lowest common denominators and extract those into your layout blocks.

2267.7 -> JASON: Got you.

2269.25 -> I understand.

2270.579 -> So it's not really like -- because originally you said you start with the message and then

2276.069 -> you go to wire frames.

2277.069 -> But you even -- like, it sounds like they're kind of in the same thing.

2280.869 -> Like the message drives the wire frames, the wire frames drive the presentation.

2286.609 -> When you start looking at the presentation as something too, you can see its visual weight

2290.05 -> and say that's too much on this message.

2292.72 -> Let's de-emphasize a little there.

2294.42 -> Or this needs to be two pages.

2295.74 -> There's too much content for this to be one page.

2299.609 -> I like it when it feels collaborative like that, where you've got somebody who's the

2305.19 -> message person, the content owner.

2307.97 -> Then you've got a designer.

2309.14 -> Then you've gotten a engineer.

2310.56 -> All kind of looking at things from their own perspectives and helping pull out a simplified

2316.52 -> system.

2317.52 -> This is challenging, right.

2318.52 -> I think a lot of companies either don't have the processes in place or don't have the collaborative

2324.67 -> muscle built to really facilitate this kind of, like, hey, let's get everybody in a room

2330.96 -> and work on this at once.

2332.2 -> It's like, you do content and then you throw it at the designer.

2334.99 -> The designer will take the content and turn it into a wire frame and throw that at developer,

2339.84 -> who will turn it into a thing.

2342.67 -> So this is -- I like where your head's at on this.

2346.38 -> JAMES: Absolutely.

2347.64 -> Like, wire frames -- I'd like to stress the importance of wire frames, and I'd like to

2352.56 -> say the majority of the design and the thinking actually happens here, rather than the UI

2358.109 -> phase that would follow that, from my process, really.

2361.39 -> The UI phase is really a designer's job.

2364.19 -> If you're going to be applying branding to wire frames, then the content writers should

2370.19 -> have little to no overlap there.

2371.82 -> But in the wire framing stage, just like you said, you've got to get the engineering involved.

2376.49 -> You've got to get the design thinking involved.

2378.501 -> And you got to get the writing involved.

2380.589 -> And there needs to be a collaborative process here.

2382.81 -> If nowhere else, it needs to happen here.

2385.97 -> And if you do your job right here, you'll have an easy time throughout the rest of the

2390.69 -> website.

2391.69 -> JASON: Mm-hmm.

2392.69 -> Yeah, headunderwater is chiming in to agree.

2394.5 -> I think that's -- yeah, it's saying tell me what you need instead of here's what you need.

2399.58 -> I think that's such a subtle but important distinction when you're working collaboratively

2405.98 -> to make sure you don't start by saying I have a solution.

2409.88 -> You start by asking what problem needs to be solved.

2412.52 -> JAMES: Absolutely.

2413.52 -> JASON: And it's so, so -- I mean, I am the worst at this.

2417.359 -> I love jumping to a solution.

2419.04 -> Somebody is like, we need a new landing page.

2420.76 -> I have so many ideas!

2422.45 -> Instead of saying what for, why do we need to make this, who is it serving, who benefits

2428.14 -> from this existing, why is this more important than the other list of things we need to do.

2432.66 -> Like, who's asking these questions if it's not me?

2436.28 -> And I think that's a really challenging skill because it's fun to build stuff.

2441.46 -> I totally want to go do a new design.

2443.319 -> That sounds like a blast.

2445.52 -> But we got to start with why.

2447.859 -> What purpose does it serve?

2449.41 -> JAMES: Well, you know, I feel like a lot of this industry gets a bad rap because they

2454.99 -> don't follow these principles we're talking about right now.

2458.079 -> Exactly what headunderwater just said.

2460.53 -> Tell me first what you need.

2462.28 -> If you go on awards.com, there's a lot of really beautiful work on that website.

2466.49 -> But it's all so designed.

2469.02 -> It's all -- you can even miss the message, and 90% of the website is on there because

2474.17 -> there's so much happening you just want to scroll and you're looking at the interactions

2477.63 -> rather than reading the messages.

2479.38 -> To me, that's always a little backwards.

2483.339 -> To really be successful in a business goal, you need to say tell me what you need as a

2488.38 -> designer, rather than here's what my shininess just came out like.

2494.58 -> It's backwards, if you do that.

2496.52 -> And I feel like a lot of designers fall into that trap.

2498.829 -> They end up making beautiful things, but are they utilitarian?

2502.16 -> Are they useful?

2503.32 -> Maybe not.

2504.32 -> It's a classic trap.

2505.72 -> JASON: Absolutely.

2506.78 -> Yeah, if you want to make art, make art.

2508.8 -> But remember -- I went on a little mini rant about this on Twitter not too long ago, about

2514.64 -> how people who are doing this job because they want to do their hobby professionally

2520.67 -> can do a lot of damage because they're not looking at it as, like, I'm here to do a job

2527.06 -> and I want to do this job as well as I can.

2529.9 -> They're looking at it as I get to play with my favorite toys for a living, and I'm going

2534.44 -> to play.

2535.84 -> And I don't care if I'm doing a good job.

2538.24 -> JAMES: Exactly.

2539.24 -> JASON: And that leads to a lot of unnecessary rebuilds and the stuff that you see on awards

2547.2 -> where it's just clearly somebody was like, what if I could make the design do this, and

2552.89 -> the message is what they filled in to make the website not just text.

2559.44 -> It's not about the message at all.

2562.51 -> Yeah, this is a business, not art school.

2566.64 -> That's a good way to put it, headunderwater.

2568.9 -> Yeah, so anyway.

2571.809 -> We've got layout blocks here.

2573.71 -> So we talked about heroes.

2575.27 -> We've got some layout blocks.

2577.059 -> Let's keep on moving so I don't completely burn the whole time here.

2581.43 -> JAMES: Yeah, I can talk about these types of things for a long time.

2585.779 -> So yeah, let's keep moving.

2587.349 -> Okay.

2588.349 -> So like I've been saying, this is very rudimentary.

2591.75 -> We have three layout blocks for the purpose of this tutorial because I want to show how

2596.62 -> to scaffold them and connect them so that the editor can drag and drop and build things.

2601.78 -> But the content block is going to be pretty multifaceted.

2607.49 -> What we've got is maybe a type field where you can choose between what layout you want.

2613.15 -> We're not building a column selector.

2615.37 -> We're not doing add column, add column, add column.

2618.43 -> We're saying choose what layout you want.

2621.809 -> Is that a single column?

2623.569 -> Okay.

2624.569 -> Is this a half and half?

2625.81 -> Is this two-thirds, one-third?

2627.5 -> Or is this three column?

2628.73 -> Those are the only options.

2629.88 -> They can't go crazy.

2631.2 -> They can't do a one-fifth, four-fifths.

2634.46 -> You know what I'm saying?

2635.46 -> They can't go crazy with any type of column system they want.

2637.81 -> They're not going to set their widths themselves.

2640.27 -> They're going to choose from a drop-down what lay you want do you want.

2644.599 -> Then we need to render them the appropriate rich text editors to fill up those contents

2650.49 -> based on what type they choose.

2652.46 -> So if I turn on the grid, that leaves us to make some pretty, like, deliberate design

2658.29 -> decisions.

2659.29 -> For example, one-column content block, if this was stretched all the way over here,

2664.96 -> that's not going to be good for anybody.

2666.44 -> There's that classic rule in the design world.

2670.48 -> Limit the amount of words per line so that it's comfortable to read.

2674.089 -> You don't want to have a 12-column, 1-column block.

2677.43 -> So we can restrict that to nine columns and keep that a little easier to read.

2682.41 -> If we do that with a select field where they drop down and say, okay, I want a one column,

2687.01 -> then we can enforce that on the editor.

2689.69 -> And they will have no choice.

2691.47 -> They have to deal with it.

2693.339 -> We as designers can back that up when we say, oh, you can't have that be wider because it

2698.839 -> becomes uncomfortable to read, right.

2700.71 -> JASON: Yeah, exactly.

2702.44 -> And these are these little things.

2705.14 -> Like, at some point, I just learned there was a maximum scan length for lines before

2712.829 -> it became hard to read.

2714.56 -> I don't know where I learned that.

2716.23 -> I don't know why I remember it.

2718.13 -> But it's just a thing I do that most people who have not worked as a designer will never

2723.76 -> -- like, why would you ever think about that?

2726.65 -> Sometimes you look at a design and go, that's kind of hard to read, but you don't know why.

2730.71 -> So you just sort of, well, yeah, I'll let somebody else fix it.

2734.57 -> So letting the system solve these problems is such a critical thing to think through.

2740.71 -> JAMES: Absolutely.

2741.76 -> That's what we try to do.

2745.74 -> Each one of these columns has the ability to add a link below it.

2751.7 -> That will all be hard coded.

2752.7 -> The link will only be able to go after the rich text field.

2755.98 -> So you can't have a paragraph and then a big button and then another paragraph because

2759.67 -> that's going to look all manic.

2762.099 -> You want to restrict those things as much as you can.

2765.19 -> JASON: Absolutely.

2766.19 -> JAMES: They'll all stack the same on mobile.

2768.7 -> Then we have a media block to show a different type of block.

2771.839 -> You can have it centered on the screen or full screen.

2774.859 -> Pretty straightforward.

2776.42 -> Not a lot to see there.

2778 -> Then the last someone the call to action.

2781.22 -> This is a little banner with a background color and some buttons on the right-hand side.

2786.55 -> But let's say that this -- generally we're going to have 15 different layout blocks that

2790.97 -> are very versatile in design in nature so the editor can craft visual styles throughout

2798.859 -> the entire website, especially if you're doing an enterprise website.

2801.66 -> You might have 300 pages, each with very different content needs.

2807.23 -> So your library of layout blocks can be much more than three, but as long as each one is

2813.43 -> very deliberately designed and constrained so that they can't hijack the intent.

2818.15 -> JASON: Right.

2819.72 -> Right, right.

2821.28 -> JAMES: So what we'll do is we'll go take a look at the CMS.

2827.26 -> I guess we should probably sign up for Mongo Atlas.

2829.599 -> If we can't do that, we can always look at the code on GitHub.

2833 -> This will all be open source, and we can even put the links to the GitHub somewhere.

2838.569 -> JASON: I think I have an Atlas account.

2843.609 -> So let me see.

2845.83 -> I'm going to see if they -- wait.

2849.36 -> What if I already signed in?

2852.6 -> Because I could have sworn that I did this already.

2858.339 -> JAMES: Todd, accessibility.

2865.77 -> That's a great question from the comments.

2868.9 -> Everything should be built with accessibility in mind.

2871.29 -> And admittedly, I'm still learning a lot about that because I feel like it's a moving target.

2876.7 -> Over time, things change and accessibility needs to keep up with that.

2881.82 -> But all of the design system, every layout block should be built with accessibility in

2885.66 -> mind.

2886.66 -> I don't know if that's a cop-out or not to your question.

2891.369 -> JASON: Are we in?

2895.27 -> Is it happening?

2898.19 -> JAMES: Something is happening.

2899.83 -> JASON: Something is happening.

2900.83 -> We're waiting on Google Ads.

2903.71 -> JAMES: No ad block?

2906.8 -> JASON: Oh, no.

2909.79 -> Let's see.

2911.78 -> Come on now.

2912.95 -> JAMES: I don't have ad block either, actually.

2916.24 -> I should.

2917.24 -> JASON: I always think about it.

2918.24 -> Like, oh, yeah, I'm going to do this.

2920.19 -> Then as soon as I turn it on, things break in weird ways.

2924.04 -> Then I think that apps have bugs.

2925.93 -> I'm like filing false reports, like turn off your ad block.

2930.01 -> So I just keep it off.

2932.65 -> Whatever.

2934.079 -> It's fine.

2935.079 -> Okay.

2936.079 -> So I have an account.

2937.19 -> Let's see if they'll let me create.

2939.39 -> Oh, come on.

2941.89 -> Is the internet going slow, or are we having a little issue on Mongo?

2946.36 -> JAMES: I'm seeing some pixelization in your web cam here and there.

2951.319 -> JASON: Let's see.

2953.63 -> How many services can I run on my computer at the same time before it explodes?

2958.609 -> All right.

2960.549 -> We're going to call this Payload CMS.

2964.099 -> Don't need anything special, right?

2968.329 -> Just create a project.

2970.65 -> While we're doing that, I'm going to reload these.

2980.369 -> So here's the CMS.

2982.16 -> I need to fork this, right?

2984.26 -> JAMES: You can just clone it.

2986.45 -> Just clone it down.

2987.73 -> JASON: So I'm going to move into my GitHub here.

2999.7 -> JAMES: Yep.

3005.97 -> Then the only thing you should have to do is cp.env.example.

3008.4 -> Oh, yeah, you'll also -- do you use yarn?

3013.8 -> JASON: I can, sure.

3015.589 -> Do I have it installed?

3018.799 -> I don't have yarn installed on this computer.

3020.83 -> (Laughter)

3021.83 -> JAMES: So just make sure you pass legacy peer devs.

3026.66 -> JASON: Like this?

3029.75 -> Or camel case?

3031.39 -> JAMES: Exactly like that.

3032.79 -> So dash deps.

3034.819 -> Yeah.

3036.47 -> Nailed it.

3039.77 -> Then there's an env example.

3041.98 -> You can copy that and make a real env out of it.

3044.69 -> JASON: Got it.

3045.69 -> JAMES: And that will have your connection string to Mongo inside of it.

3049.339 -> JASON: Got it, got it, got it.

3051.109 -> Okay.

3052.109 -> JAMES: I think that's pretty much all you need.

3055.24 -> Payload is all code based.

3057.119 -> So everything is contained right inside the repo.

3059.65 -> No migrations.

3060.65 -> JASON: Nice, nice.

3061.68 -> All right.

3062.68 -> So come on.

3068.74 -> Somebody is like at my door yelling.

3070.45 -> Let me just close this real quick.

3072.339 -> JAMES: Follow your heart.

3075.84 -> JASON: Don't know what that's all about.

3079.67 -> So then you said copy the .env.example.

3082.41 -> JAMES: Then you want to vim .env.

3087.21 -> JASON: Oh, here we go.

3089.319 -> We're in vim.

3090.579 -> This is the rest of the episode.

3092.27 -> Soy need to set up my Payload in secret.

3097.97 -> Which I'm going to do over here.

3099.92 -> JAMES: Yep, so build a database.

3103.52 -> Just do the free.

3104.52 -> That's probably fine.

3109.06 -> And yep, that's all good.

3110.17 -> JASON: That's all fine.

3111.17 -> We'll put it in Oregon because that's close to me.

3113.91 -> All this is good.

3115.9 -> Here we go.

3117.25 -> JAMES: Looks good.

3119.099 -> JASON: Username and password, right?

3122.38 -> JAMES: Yep.

3124.01 -> JASON: So we'll do one of these.

3127.69 -> And one of these.

3129.74 -> Let me autogenerate, actually, then I'll copy that.

3134.14 -> Now, is it going to give me --

3139.14 -> JAMES: Yep, you're going to want to do local environment.

3145.059 -> JASON: Okay.

3147.549 -> Do I have to put my own .env in here?

3154.78 -> JAMES: You might have to get your IP.

3157.66 -> If you just Google what is my IP and put it in there, just to be safe.

3162.47 -> JASON: Okay.

3163.47 -> JAMES: Yeah, just pop that bad boy in there.

3167.7 -> When can say?

3170.32 -> It's probably going to change too.

3172.92 -> JASON: It'll be fine for now.

3176.28 -> So we'll do that.

3177.96 -> Go to databases.

3179.559 -> Then when I connect, is that going to pop up the string unencrypted?

3187.29 -> JAMES: I don't know.

3190.42 -> But that actually -- yeah.

3191.92 -> JASON: Let me just pull it off screen.

3196.21 -> JAMES: Then you want to put it in that env file and never open the env file ever again.

3202.8 -> JASON: Yep.

3203.829 -> Okay.

3204.829 -> So here is my -- I'll pull this over here.

3211.95 -> I'm going to -- oh, my god, I just remembered how to delete to the end of the string.

3219.91 -> That was magical.

3222.64 -> Where the heck is the -- is the Payload secret?

3225.49 -> The password I created?

3226.49 -> JAMES: Nope, just type in a random string.

3228.69 -> That's used for salting the passwords that are saved in the database.

3232.47 -> Just crypto hashing string.

3234.9 -> JASON: Get off here, otherwise you're going to show all my stuff.

3243.5 -> There we go.

3245.65 -> There's the password.

3249.01 -> And escape.

3252.53 -> I have quit vim, everyone.

3257.12 -> So that's done.

3259.2 -> JAMES: So you should be able to just run yarn dev or npm run dev.

3263.38 -> And we can see if you can connect to your database or not.

3267.27 -> Nope.

3268.27 -> JASON: App crashed.

3269.59 -> Bad auth?

3270.76 -> I did it.

3271.76 -> But I did it, though.

3272.76 -> Let me see if I need to do anything.

3277.95 -> Okay.

3279.69 -> So it's not actually showing the password.

3282.43 -> So they escape here.

3284.53 -> I created the password.

3289.76 -> I did that.

3291.119 -> Ensure any option params are URL encoded.

3294.83 -> I did that.

3296.88 -> JAMES: Yeah, that should be it.

3299.96 -> The only other thing I would think might be wrong is if your IP already changed.

3306.78 -> It's definitely not static, right?

3309.339 -> Still the same.

3311.41 -> JASON: Looks the same.

3312.98 -> So why are you like this?

3316.7 -> All right.

3319.42 -> Chat, just don't blow my stuff up here.

3323.72 -> Let's just double check this .env.

3327.74 -> Do I have so quote anything?

3334.539 -> JAMES: No.

3335.9 -> JASON: So this is correct.

3337.77 -> JAMES: Yeah, that looks good.

3339.49 -> JASON: All right.

3340.53 -> What the heck are you doing then?

3343.51 -> Try one more time.

3349.039 -> Cannot connect to MongoDB.

3350.48 -> Bad auth.

3352.239 -> So why would it have bad auth?

3354.319 -> Can I set -- you can't just tell it to allow, like, any -- I want you to allow any connections.

3366.71 -> That's all.

3368.95 -> Edit configuration.

3371.18 -> I did this before.

3372.98 -> I don't know why it's not working now.

3376.02 -> Shared, right.

3379.68 -> That's all correct.

3385.18 -> Turn on.

3388.84 -> Yeah, that's all fine.

3391.349 -> Now I can't even find that thing.

3398.19 -> Connect on your VSCode.

3400.549 -> That's not right.

3404.309 -> JAMES: If you do the compass one.

3407.77 -> JASON: That looks exactly the same, though.

3411.85 -> JAMES: Does it?

3412.88 -> I think there's a few less options there at the end.

3415.56 -> JASON: Hmm.

3417.24 -> All right.

3418.91 -> Let's just delete some options.

3424.63 -> Still doesn't like the auth.

3435.81 -> So I don't know why it doesn't like that auth, but maybe we just need to look at the code

3440.01 -> here because we're going to run out of time otherwise.

3441.89 -> JAMES: Yep.

3442.89 -> I think that's fine.

3443.89 -> JASON: All right.

3444.89 -> So let's do that.

3446.089 -> I'll pull it up in here.

3447.869 -> And we can peek at it.

3451.069 -> JAMES: There's going to be plenty to see if we just look at the code anyway.

3455.98 -> JASON: Great.

3456.98 -> So I'm in the code.

3459.2 -> JAMES: Yep, okay.

3461.38 -> So a Payload app is basically an express server.

3465.18 -> So the entry point is server.ts.

3468.72 -> And it uses your own express server.

3471.4 -> So in the future, we're going to create some way to deploy this to lambda functions or

3476.21 -> even edge functions, but for now, this is all how it is.

3481.359 -> So you just create a new express server and run Payload data async.

3486.839 -> And list it on your express server.

3489.869 -> So if you want to mount any other express routes or if you want to continue to maintain

3494.579 -> functionality outside of Payload, you own your own express server and can do whatever

3498.52 -> you want.

3499.77 -> But for example, one of the cool things we're doing in this file is seeding initial data.

3506 -> You can see on line 24 right there how we're seeding.

3510.23 -> If we have an environment variable called Payload seed, then it will just automatically

3514.579 -> create a first user and create a home page for you and upload some media.

3520.55 -> So let's go into that seed script and take a look at that.

3523.21 -> JASON: Okay.

3524.42 -> That's coming in from seed.

3527.03 -> JAMES: Yep.

3529.95 -> So this is all with Payload's local API.

3533.25 -> It's just an async function that will create a user.

3535.66 -> That's just a simple dummy local-hose user.

3538 -> Password is test.

3539.74 -> But then we're creating a media document as well and actually uploading local JPEG directly

3547.49 -> from our Git repo into the database and into our cloud storage.

3552.369 -> So there will be a photo we can use in our posts.

3555.789 -> Then we're creating some homepage JSON and replacing a bunch of media relationship IDs

3562.97 -> there.

3563.97 -> So replacing that with image ID, creating a page, creating another page, and then finally,

3572.16 -> we're creating the main menu.

3574.2 -> The main menu there is a global.

3576.2 -> So this is something that Payload does that a lot of other CMSs don't do.

3580.6 -> Collections are many documents of the same shape.

3584.589 -> But globals are a singleton.

3586.619 -> There's only one.

3588.089 -> So you can use them for headers, footers, menu structures, things that don't exist more

3596.41 -> than once.

3597.51 -> So we're creating that right there.

3601.829 -> And that's it.

3603.26 -> It's all just seeded data.

3605.089 -> When we fire this up, say we could get Mongo working, then we would be able to instantly

3610.369 -> see all this information in the database.

3614.349 -> JASON: Very cool, yeah.

3618.18 -> And then, all right, so once we're in here, these are just the actual data of the page.

3626.24 -> Structured data is always nice.

3627.359 -> You can kind of figure out what's going on.

3629.549 -> Pretty straightforward.

3630.549 -> So we've got a block called hero.

3632.16 -> It's got a rich text type.

3633.47 -> It has children in it.

3635.72 -> I love stuff like that.

3638.73 -> JAMES: So then let's go to the payload config.

3644.7 -> It's the entry point for any Payload app.

3648.43 -> This is how you completely define everything that Payload specifically does.

3652.44 -> So we looked at the server.

3654.16 -> But that didn't have anything about hour collection schemas or anything.

3657.539 -> All that's done in the Payload config.

3660.23 -> It's all TypeScript.

3662.51 -> You can import React components.

3664.2 -> You can pass React components directly to the fig, and it will render it in the dashboard.

3668.819 -> Everything is done right here.

3670.49 -> This is a pretty simple one, but you can see we have three collections.

3673.98 -> Media, page, and users.

3676.001 -> Then we have the one global for main menu.

3677.91 -> If you can go into pages, we'll look at that real quick.

3684.63 -> Pages are set up to be a collection config.

3688.57 -> We have versions and drafts enabled just by passing drafts true.

3692.52 -> So that will allow you to maintain draft copies before you publish it.

3695.94 -> Then you can preview those in your front-end environment.

3699.89 -> Access control read is set to only allow people to read published only, which is pretty cool.

3704.99 -> JASON: Okay.

3705.99 -> I'm going to click into that because it's -- okay.

3712.33 -> So basically you get to say only the users own stuff or only logged in users.

3723.72 -> JAMES: So this is saying if there is a user, then they can read whatever they want.

3730.67 -> Return true, they read whatever they want.

3732.17 -> JASON: Right.

3733.17 -> JAMES: But if there is no user, then we're going to return a query constraint that dynamically

3739.38 -> restricts which documents can be read to only those that have a status of published.

3745.97 -> JASON: Gotcha.

3746.97 -> So this is the, like, by default, the public role is anything you've published within the

3756.079 -> CMS is visible because it would be visible on the website anyway.

3759.94 -> So you don't have to worry about somebody hitting that end point.

3763.869 -> JAMES: Exactly, yeah.

3765.319 -> And there's all kinds of access control stuff you can do.

3767.64 -> You can restrict, create, read, update, delete versions.

3771.68 -> Everything you can do right there.

3772.76 -> But the cool part is by returning that query constraint, that dynamically gets built up

3779.16 -> when we go to fetch the data.

3780.67 -> So it's a granular security system that lets you build any type of access control you can

3787.8 -> think of.

3788.8 -> It's much more than role based.

3790.64 -> Although, you could do role-based access control if you wanted to.

3794.97 -> JASON: Gotcha.

3796.03 -> Yeah, I understand.

3797.63 -> So then we're defining our fields.

3799.799 -> And then Todd has a good question about the -- like, is it keyboard nav?

3807.38 -> I know I can't get Mongo running.

3809.91 -> I can't actually open this up to try it.

3812.039 -> But if I'm in, can I do keyboard nav through the whole CMS?

3816.06 -> JAMES: Yes.

3817.16 -> Yes, you can.

3819.369 -> It's an ongoing effort to improve it.

3821.48 -> For example, the rich text editor has 16 tool bar buttons in some cases.

3826.79 -> Sometimes you might want to skip those.

3828.23 -> So we have a skip to input button we want to build.

3832.52 -> There's just basically a never-ending amount of improvements that we can make, and we're

3836.901 -> going to start focusing on that seriously.

3838.869 -> But yeah, you can navigate around with the keyboard for sure.

3841.42 -> JASON: Nice.

3842.42 -> And then DerTieran is asking does that include an audit log, who published what at what time?

3850.49 -> JAMES: Yes.

3851.95 -> You can dif them too in the CMS.

3855.799 -> JASON: Oh.

3857.309 -> Love a good dif.

3858.54 -> JAMES: Yeah, the package -- ah, I'm not a big fan of the package we use, to be honest.

3863.2 -> It's very impressive, but they haven't updated to React 18, and it hasn't been updated in

3868.17 -> a minute.

3869.17 -> So that's why I had to do the legacy peer deps.

3873.59 -> They don't support React 18.

3875.75 -> But if you want to dif what version was created or updated by who, you would just have an

3882.609 -> updated by field that gets dynamically populated by the user, like using a field hook.

3888.809 -> So then that would store on each version whenever anybody creates a version of a document.

3893.64 -> You'd be able to dif and see who created that document.

3896.53 -> JASON: Gotcha.

3897.67 -> I understand.

3898.8 -> Cool.

3899.8 -> Yeah, that's great.

3900.8 -> And the difs are always so useful.

3905.349 -> I have a technical question you're free to defer on.

3908.39 -> How are you actually managing that?

3911.48 -> Are you using CRDTs, something else?

3914.099 -> JAMES: The actual versions themselves?

3915.95 -> JASON: Yeah, how are you managing those difs?

3917.92 -> How to you keep track of that type of collaborative thing?

3921.66 -> JAMES: That's a good question.

3924.079 -> So because we're using Mongo, we can store -- we have another separate collection for

3928.25 -> the versions for any given collection.

3929.839 -> And we just store the entire document.

3932.27 -> We give controls to say how many versions do you want to store before we start deleting

3936.849 -> the old ones.

3938.49 -> Then you just dif the entire document against the currently published one.

3942.02 -> JASON: Gotcha.

3943.02 -> JAMES: We did that very intentionally because that way if you want to merge in fields, like

3950.66 -> if you want to read a draft post, you want to merge in some fields from the published

3954.799 -> to the draft to create one full document, it's a little easier.

3960.049 -> Also, for access control reasons.

3963.03 -> Because the same way that you can return a query constraint from that read access control,

3967.91 -> you can do the same thing for versions as well.

3970.44 -> JASON: Okay.

3971.57 -> JAMES: And all that does is just builds up a Mongo query that you can get very granular

3978.31 -> and say these versions should only be readable by the public, and these are readable only

3983.22 -> by the users.

3990.29 -> But this right here, what you're looking at, see that fields hero on line 33?

3996.51 -> So the UI, and I think -- so anybody that's watching this, you can pull up this code and

4000.4 -> run it on your own machine.

4002.13 -> But we have it split up into tabs.

4005.829 -> The first tab is a hero tab.

4008.39 -> If you go into that line 33, that hero, the cool thing about Payload is because it's all

4012.96 -> config based, you can organize your fields and reuse your fields and abstract them into

4018.819 -> separate files and do whatever you want, all in TypeScript and make it really, really maintainable

4023.74 -> and extensible.

4025.15 -> So this hero field might be used in other types of collections in the future, so you

4028.551 -> put it into a field, like another file.

4032.369 -> Then we just import it and pass it to the config.

4034.98 -> It's not JSON.

4035.98 -> It's full TypeScript.

4036.98 -> So you can use functions to generate these things.

4039.52 -> You can extend them.

4041.289 -> You can do all kinds of stuff.

4042.789 -> But, yeah, that's pretty cool.

4045.24 -> I'll get back to that in a second.

4047.99 -> JASON: Got it.

4049.569 -> Great.

4050.569 -> Okay.

4051.569 -> So we've got our fields here.

4053.109 -> We're feeding in the fields what looks to be a collection of additional fields.

4059.619 -> So it's like a group block.

4062.24 -> That's always kind of a nice way to work so it's not just a stack of inputs.

4066.93 -> They're thematically associated to actually be part of the same thing.

4072.839 -> JAMES: Exactly.

4074.88 -> JASON: Let's see.

4077.89 -> What else should we look at?

4079.619 -> JAMES: There's one other thing in the hero I want to look at real quick, in that file.

4085.099 -> So if you scroll down, you can see we have high impact, medium impact, and low impact.

4090 -> Those are the selection options.

4091.109 -> Those are the type, like I was mentioning.

4093.75 -> That's how the editor will be able to choose what type do I want.

4096.969 -> But if you remember back to the mock-ups, the low impact had no media field, right.

4103.659 -> But the high and the medium did have a media field.

4106.29 -> JASON: Right.

4107.29 -> JAMES: So scroll down a little bit and find that media field.

4110.17 -> Right here.

4111.17 -> You can see we have a condition that will conditionally render this field if the type

4117.39 -> is either high impact or medium impact.

4120.089 -> So if you choose low impact, this field will simply just omit itself from the admin UI.

4125.21 -> JASON: Nice.

4126.25 -> JAMES: Which is super cool.

4127.88 -> This feature, it pains me to admit this, but WordPress did it the best.

4132.739 -> And it's of the only CMSs with advanced custom fields that has conditional logic like this.

4142.2 -> But this is super powerful because you can build really flexible and dynamic UI for your

4147.31 -> admins so they only ever see what's relevant to them at the time.

4153.48 -> JASON: Yeah, I mean, let's give WordPress its flowers.

4157.23 -> There's a reason it powers, what, 40% of the internet.

4161.79 -> Whatever the amount is.

4163.33 -> It's because it's really good.

4164.94 -> The reason people dislike WordPress is because they built too complicated of things on top

4171.67 -> of it.

4172.67 -> Of core of WordPress is fantastic.

4175.109 -> Advanced custom fields is potentially the most useful plug-in of my entire career.

4181.75 -> JAMES: Agreed.

4182.92 -> Agreed.

4183.92 -> It was a huge inspiration for what we did with Payload because I've done a lot of stuff

4188.44 -> I'm really proud of with WordPress, to be honest.

4190.67 -> JASON: Absolutely.

4191.859 -> I built my whole career on it.

4193.5 -> I did a decade of work as an agency runner, all in WordPress.

4198.179 -> I tried building my own CMS and spent all my time maintaining the dang CMS.

4201.92 -> I was like, I should just use WordPress and focus on supporting my clients instead of

4207.489 -> all this -- and you know, I did -- I was doing marketing websites.

4212.62 -> There was no reason for me to be building and maintaining my own CMS.

4216.63 -> It was just because I thought it was fun.

4218.35 -> JAMES: Yep.

4219.35 -> JASON: Remember, chat, when I talk about passionate developers causing problems, it was me.

4226.23 -> (Laughter) I have caused more problems for myself and my teams than anybody I know because

4232.54 -> I get excited about things and want to do them for the sake of doing them.

4235.89 -> And you know, sometimes you just got to use the right tool for the job and don't reinvent

4241.679 -> a wheel.

4242.75 -> But yeah, so this is such a killer feature.

4248.59 -> Because it's so -- it is so hard when you've got a CMS to train people that, like, certain

4256.83 -> fields don't always work.

4258.98 -> JAMES: Yep.

4260.11 -> JASON: Just an absolute nightmare to try to get that across.

4263.53 -> JAMES: Nailed it.

4265.16 -> I completely agree.

4266.739 -> Like, yeah, it's been a thorn in my side for a lot of bigger projects I've used, like more

4271.51 -> modern headless CMSs where I did not use WordPress and went another modern one that lacked conditional

4276.66 -> logic.

4277.66 -> The editors are like, I have to skip over these 16 fields because they don't apply right

4281.33 -> now.

4282.33 -> I have to cognitive associate these fields apply here but not here but not here.

4288.469 -> You just hide them in Payload.

4290.06 -> It's just a function where you return a Boolean, and you're done.

4296.8 -> If you see that condition function has two arguments, the first one is underscore because

4300.989 -> we're not using it here, but the second one is sibling data.

4304.72 -> It's only the immediately adjacent fields.

4308.949 -> So the first argument is the full document.

4311.37 -> Then you can parse down whatever.

4313.239 -> But if you're deep inside of an array or deep inside of a block and you only need to look

4318.35 -> at that row of the data, then you can use the sibling data argument and look at the

4323.22 -> immediately adjacent fields, which makes it a lot easier.

4325.989 -> JASON: Yeah, because there are reasons that you would want to do something like you have

4331.53 -> a global setting for -- actually, this wouldn't even be that.

4337.05 -> This is the individual document.

4340.36 -> JAMES: Yep, yep.

4342.13 -> Individual document.

4343.4 -> But let's say you have a mega menu and like 13 links.

4346.6 -> You want to enable an icon for a mega menu item and it's the eighth item.

4354.16 -> You need to show and hide that field based on the eighth item check box.

4360.02 -> You have to drill down and how do you know you're in the eighth one.

4364.29 -> It's complicated, but basically, we took care of all of it for you.

4367.99 -> That's why we're pulling type from the sibling data there.

4370.58 -> JASON: Yeah, that's nice.

4372.61 -> That is very nice.

4374.55 -> At least my conditional logic is almost always related to the document itself.

4382.13 -> And to something that's nearby.

4384.28 -> I have switched off the image toggle.

4386.65 -> I need to hide the image field.

4389.31 -> Something like that.

4390.65 -> It's almost never like, well, we checked a box in the global setting that should enable

4394.74 -> this extra thing.

4396.83 -> Sometimes you need that.

4397.909 -> But it's pretty rare.

4399.429 -> JAMES: Absolutely.

4401.01 -> So, yeah, I think that's all we really need to look at in the hero, and we're almost done

4405.1 -> with the Payload side.

4406.1 -> Then we can jump to the Next side.

4408.01 -> JASON: We have about ten minutes left.

4411.699 -> So why don't we hop on over, unless there was something very specific you wanted to

4415.9 -> show.

4416.9 -> JAMES: Just the blocks.

4418.46 -> And you're right there.

4419.989 -> This will be one minute.

4421.449 -> Just scroll down a little bit in the tab there, or in the pages.

4425.03 -> Right here.

4426.03 -> You can see we've got a layout with blocks.

4427.65 -> Then we import the three different blocks we have.

4430.56 -> Those are configs that each correspond to one of the blocks we've built in our design.

4437 -> So you can maintain this.

4438.18 -> You can additional blocks.

4439.47 -> Just import them and pass it.

4441.311 -> And then we'll map these blocks and these field schemas to React components.

4446.42 -> JASON: Got it.

4449.039 -> So let's hop into this.

4452.98 -> You know what, I'm just going to even skip the part where we have to download this thing.

4457.67 -> I'm going to open it up in GitHub editor.

4459.94 -> JAMES: That's a really good idea.

4462.05 -> JASON: These things are so dope.

4463.239 -> JAMES: I know.

4464.239 -> I always forget about it.

4465.71 -> JASON: Well, they don't advertise it very well.

4468.05 -> But for anybody going, what did you just do, you just have to press the period button when

4472.02 -> you're looking at a repo, and it's going to turn this on.

4475.05 -> So this is a VSCode in the browser.

4476.82 -> It's dope.

4478.159 -> JAMES: Yes.

4480.85 -> Very cool.

4481.85 -> JASON: But my connection is going to mess with me today.

4485.389 -> Come on.

4486.389 -> Go, go, go.

4487.389 -> You can do it.

4488.389 -> JAMES: It'll be worth it.

4489.44 -> Yeah, I got to use this more.

4492.28 -> JASON: You know, you say this is going to be faster than cloning it, and the universe

4496.449 -> immediately teaches you a lesson.

4497.929 -> Let's see if I can get to -- give me the content.

4502.25 -> Come on.

4503.25 -> Oh, it's activating extensions.

4504.73 -> It's turning a bunch of stuff on.

4507.69 -> So this is that first-load experience where it's got to configure based on the project

4511.48 -> settings and all that kind of stuff.

4513.05 -> JAMES: Oh, this is just a straight-up Next site.

4515.57 -> I would expect this would be pretty fast actually.

4517.66 -> JASON: I think they have a handful of things they got to get.

4521.75 -> Reload required.

4522.75 -> Don't you do that to me.

4525.7 -> Come on.

4526.7 -> Let's go.

4528.04 -> Go faster.

4529.04 -> There we go.

4530.04 -> Here's our stuff.

4531.04 -> JAMES: Beautiful.

4532.04 -> All right.

4533.33 -> So I'm sure the universe is familiar with Next.js at this point.

4538.29 -> If you're not, you should be.

4540.06 -> I love Next.

4541.06 -> It's beautiful.

4542.679 -> But what we've got here, and you went right to it, so index said -- so, this is interesting.

4548.58 -> You ever had a homepage template that needs to be slashed or whatever, but then it's the

4554.06 -> same exact rendering necessary for any other page.

4557.98 -> So your homepage will render the same, quote, template as your about page.

4563.02 -> Whatever.

4564.02 -> They're both pages, and they both come from the same place in the CMS.

4567.91 -> But you need to have two different files stubbed out in Next.js for that.

4572.31 -> Here's out solution to that.

4573.949 -> So I just import from the .slug and re-export from this and then reshare the code.

4580.31 -> You see that?

4581.31 -> JASON: Got you.

4582.31 -> Got you.

4583.31 -> Okay.

4584.31 -> So into the slug we go.

4585.31 -> JAMES: Yeah, this is where all the meat is of the page.

4589.1 -> But it's statically rendered.

4591.449 -> So all we're doing is we're rendering out the hero and the blocks.

4594.739 -> We have components for those two things.

4596.6 -> So hero will be responsible for selecting which hero type you've decided to render.

4601.93 -> Then the blocks we pass at the array of block data, which is all fetched by GraphQL.

4609.58 -> If you scroll down, you can see Apollo client, where we're fetching a page from the query.

4617.35 -> And we're actually caching.

4618.89 -> We're using Apollo specifically here to cache data so that when we statically build our

4625.489 -> site, and if there's 300 pages, you have to blast that global data end point.

4630.3 -> You have to fetch the main menu, the footer, all those different global pieces of data

4634.659 -> you need to fetch for every single page you statically render.

4640.26 -> That's 300 hits to your API, all for the same exact data.

4643.87 -> So we've done get Apollo client, which if you command click into that, or however you

4649.1 -> do that here.

4650.389 -> JASON: Is this going to do the thing I want?

4654.42 -> It is.

4655.5 -> Perfect.

4656.5 -> JAMES: Almost.

4657.5 -> Still got to click on the path there.

4661.4 -> JASON: Come on, dog.

4664.38 -> There we go.

4666.62 -> Nope.

4667.62 -> (Laughter) Here we go.

4670.34 -> JAMES: So we basically keep it as a let on line three.

4674.89 -> If it doesn't exist, then we new it up.

4678.699 -> It will allow us to cache those global data queries so that only the first page that's

4685.56 -> statically rendered will fetch them.

4687.219 -> Then we use them from cache.

4689.17 -> Therefore, we don't blow up our CMS API.

4692.869 -> You could, but just a little optimization that I think is cool.

4696.42 -> JASON: And I don't know if Payload CMS has rate limit, but a lot of APIs will have rate

4700.86 -> limits.

4701.86 -> It can be surprising when you're statically generating something that during your build

4707.93 -> process, you hit the rate limit and you're like, what, why?

4710.28 -> I only called one build.

4712.53 -> But each page is a request, and a fast build system is going to send off 500 requests in

4718.5 -> under a second, which you know, most APIs that weren't designed for that kind of static

4723.94 -> build will go, wait, this is wrong, and then they shut you down.

4727.52 -> Then you have to add -- then you have to add time-outs or something.

4731.86 -> It can get really challenging.

4733.19 -> So yeah, figuring better ways to complete that will help.

4738.93 -> JAMES: Totally.

4739.93 -> We have rate limits, but it's customizable because you own your server.

4743.92 -> You can increase the rate limit, turn it off, whatever you want.

4746.04 -> JASON: Got it.

4747.04 -> JAMES: This is just an optimization that I think is cool.

4750.5 -> But hopping back over to that slug file there.

4752.94 -> JASON: All right.

4754.469 -> So we've loaded our data.

4756.88 -> Here it is.

4759.69 -> We get it out.

4760.84 -> So we send in the page.

4762.89 -> Where did this page come from?

4765.55 -> JAMES: Imported it.

4767.34 -> JASON: Oh, got it.

4769.56 -> Okay.

4770.56 -> And then we get -- we send in the variable slug.

4772.929 -> Good.

4773.929 -> JAMES: Then boom.

4775.85 -> Done.

4776.85 -> Fetch the data.

4777.85 -> JASON: Beauty.

4778.85 -> JAMES: Yeah, pretty straightforward.

4781.81 -> And then we use the data.

4783.74 -> So I guess we could look at the hero component or the blocks component.

4787.36 -> Either one.

4788.36 -> JASON: Let's do it.

4789.36 -> So this hero component I think is going to be fun because it is -- let's see.

4794.261 -> It's going to be one of these.

4795.29 -> Let's start with the high impact.

4797.51 -> JAMES: Yep.

4799.13 -> So not a lot of code.

4801.54 -> We always use faceless UI wherever we can.

4804.6 -> It's our homegrown set of components.

4807.21 -> I like Tailwind.

4808.21 -> I like what they're doing.

4811.09 -> I've never really used bootstrap or material UI really.

4815.81 -> I like to roll my own CSS.

4818.37 -> So this little framework here, it's not a lot of code, but it's pretty straightforward,

4823.31 -> and I don't think I needed to pull in a library for that.

4825.88 -> So I didn't.

4827.43 -> The only things that we're leveraging faceless UI for is for your break points.

4836.08 -> That's it.

4837.4 -> JASON: Nice, nice.

4839.38 -> Cool.

4840.38 -> So we've got -- so we're setting up a gutter, which I'm assuming is your margin system that

4847.06 -> you've made.

4848.06 -> Oh, your left and right.

4849.56 -> And then we've got grid and cell.

4852.38 -> Okay.

4853.38 -> That gives us the ability to set up the -- because it's a 12-column grid.

4857.81 -> JAMES: Correct.

4858.87 -> JASON: Then we throw in the rich content, which we saw over here.

4865.239 -> Where are my heroes?

4866.4 -> JAMES: Scroll up.

4867.43 -> Yep.

4868.43 -> JASON: So we have rich content here.

4869.889 -> JAMES: Yep.

4870.889 -> JASON: Then we've got links.

4873.09 -> So these are the calls to action, I'm assuming.

4877.63 -> JAMES: Yep.

4878.63 -> JASON: So that's going to be these.

4880.33 -> JAMES: Yep.

4881.33 -> JASON: Then we've got our media.

4883.37 -> JAMES: Exactly.

4884.989 -> JASON: Which is here.

4886.659 -> Then if we go to low impact, it's much simpler.

4892.4 -> It doesn't have any of that media, and it's just rich text.

4896.69 -> JAMES: Exactly.

4898.28 -> Then that index.tsx is what's responsible for determining which hero to render.

4903.56 -> So all we do is create a store of the heroes.

4907.37 -> Then render the hero that they selected.

4909.95 -> So it's real simple.

4910.95 -> JASON: Yeah, yeah, nice and straightforward.

4913.8 -> Well, cool.

4917.4 -> The structure of this makes sense, right.

4919.9 -> You've got a CMS.

4924.51 -> The data in the CMS is structured.

4927.29 -> It's got TypeScript.

4928.53 -> It's going to give us the ability to kind of define our different blocks down to the

4934.64 -> field level, but then kind of expanding up into these more, like, comprehensive, like

4939.6 -> here's the full block.

4942.37 -> And you could probably take that a step further and compose blocks into premade layouts if

4946.54 -> you wanted templates.

4949.37 -> Then what comes out in the React app or the Next app is basically the same structure of

4957.92 -> content.

4958.92 -> Then you just kind of map a component to the layout block.

4962.32 -> Do you have any tips or tricks with the two minutes we have left for people who are building

4967.929 -> these out to help with the maintenance of as your CMS evolves, how do you keep it from

4973.21 -> breaking your components too badly?

4975.17 -> JAMES: Number one, use TypeScript.

4978.12 -> That's huge.

4980.159 -> That's honestly saved me so much time and effort over the last two or three years.

4985.19 -> We went full in on it and never looked back, and it was huge.

4988.51 -> Be as strict as you can with your typing.

4991.55 -> Try to leverage it as much as possible.

4993.1 -> Don't use any -- you're going to sort a lot of things out on your own just by using TypeScript.

4998.4 -> But also, try to -- I wouldn't try to refactor and try to stay as dry as you can until you

5004.3 -> have the majority of the parts in place.

5005.98 -> Then you can kind of consolidate at that point.

5008.449 -> But that's a step that you should definitely do.

5010.58 -> Like deliberately do it.

5013.73 -> Set aside some time.

5015.15 -> Like, okay, we've got most of this in place.

5017.23 -> Now it's time to try to dry up some of it if we can.

5020.853 -> That will help over the long run.

5022.12 -> But don't do it too prematurely.

5023.87 -> If you do, then you're going to create heartache for yourself.

5026.38 -> But just having that mind set of try to do that at some point, that's going to help out

5032 -> a lot.

5033 -> JASON: Gotcha.

5034 -> All right.

5035 -> So James, where should someone go if they want to dig deeper and do more?

5039.94 -> JAMES: Well, I think we should circulate the links to those two repos.

5044.989 -> Those would be great learning resources for people if they want to take a look at those.

5048.65 -> JASON: All right.

5049.65 -> So we'll toss those into the chat here.

5052.73 -> Then I think I can go to the repository.

5057.73 -> There it is.

5060.25 -> Drop that one.

5061.81 -> JAMES: Then getting started with Payload is just npx create-payload-app.

5066.9 -> We have a couple videos on YouTube to check out.

5071.57 -> Get you going.

5073.42 -> Nice and easy.

5075.26 -> JASON: Nice.

5076.489 -> All right.

5077.719 -> Make sure, everyone, go and follow James if you have more questions about Payload.

5081.59 -> If you want to ask anything, send that straight across.

5085.449 -> This episode, like every episode has been live captioned.

5088.55 -> We've had Rachel with us all day from White Coat Captioning.

5091.46 -> Thank you so much, Rachel.

5093.13 -> That's made possible through the support of our sponsors.

5095.28 -> Netlify, Nx, New Relic all kicking in to make this show more accessible to more people,

5100.94 -> which I appreciate very much.

5102.51 -> While you're checking out things on the site, make sure you go and take a look at the schedule.

5105.679 -> We've got so much good stuff coming up.

5107.989 -> It's going to be incredible.

5109.889 -> We had a switch.

5111.159 -> Mark is not able to join us.

5112.159 -> We're going to have Eli Lucas instead.

5114.489 -> We're going to look at component tests and web apps using Cypress.

5117.57 -> That's going to be super fun.

5119.07 -> We have Brian talking about the new framework Enhance.

5123.56 -> Colby Fayock is going to talk about Next.js with Cloudinary.

5128.34 -> Joyce Park, we had to reschedule this because I couldn't get my computer to work.

5133.83 -> We're going to talk about FIDO2.

5139.409 -> And if you haven't seen Shaundai's original episode, check it out.

5143.56 -> She's talking about React app performance.

5146.909 -> And Seb is coming on.

5148.08 -> We're going to talk about documentation with Docusaurus 2.0.

5153.24 -> That's just what I've had time to put on the site.

5155.23 -> There will be more.

5156.72 -> Make sure you add on Google calendar, follow on Twitch, subscribe on YouTube.

5160.66 -> All the things because it makes my little heart smile to see those numbers go up.

5165.08 -> James, thank you so much for taking some time to hang out.

5168.489 -> This has been an absolute blast.

5171.54 -> Any parting words before we go and raid?

5174.469 -> We're going to go raid Julie.

5176.92 -> JAMES: I am excited to see you at Jamstack Conf coming up.

5180.94 -> JASON: Yes!

5181.94 -> Please get tickets to Jamstack Conf, everyone.

5183.639 -> It is going to be so much fun.

5187.13 -> We have an in-person event, if you're in the San Francisco area or want to come.

5192.56 -> There's going to be a bunch of us there.

5193.73 -> It's going to be super fun.

5194.83 -> We have a lot of good parties.

5196.52 -> We're going to do like a puppy-petting party, if you want low key, or we have an algo rave

5201.16 -> with Dan Styles, who's been on the show before.

5203.67 -> We'll do music, and it'll be super fun.

5207.63 -> Or you can attend for free online, if you want.

5210.27 -> Virtually, we're going to have all sorts of fun stuff going there as well.

5214.54 -> So James, we'll see you at Jamstack Conf.

5217.14 -> Thank you all for hanging out.

5218.31 -> We're going to go raid Julie.

5220.429 -> See you all next time.

Source: https://www.youtube.com/watch?v=xH0enyhUH18