Visual Editing w/Next.js, Contentful, and Stackbit

Aug 15, 2023

Visual Editing w/Next.js, Contentful, and Stackbit

Finding a workflow that’s good for devs and content writers is hard. In this episode, Tiff Janzen will teach us how to use Stackbit to make all your teams happy.

00:00:00 - Welcome
00:00:27 - Who is Tiff Janzen?
00:02:03 - Is this WYSIWYG editing?
00:09:03 - How flexible is Stackbit with web technology?
00:10:54 - How is Stackbit part of the production stack?
00:20:30 - How to get started with Stackbit?
00:30:21 - Working with content in Contentful
00:36:27 - Using the Stackbit CLI
00:43:22 - Setting up Stackbit config
00:55:25 - Mapping content types
01:04:16 - Configuring the visual editor with Stackbit
01:23:53 - Where can people learn more about Stackbit?

Links

https://www.tiffintech.com/

/ @tiffintech

https://www.stackbit.com/

https://docs.stackbit.com/

https://discord.gg/HUNhjVkznH

https://github.com/stackbit-themes

https://www.learnwithjason.dev/schedule

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)
- Pluralsight (https://lwj.dev/pluralsight)

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.5 -> JASON: Hello, everyone. And welcome to another episode of Learn With Jason. Today on the

9.52 -> show, we've got Tiff Janzen. How you doing?

12.15 -> TIFF: I'm good. How are you doing today?

14.65 -> JASON: I'm great. I'm so excited to have you on the show. This is going to be a lot of

17.53 -> fun. We're using a lot of tech that I'm kind of familiar with but don't get too many opportunities

23.68 -> to work with. So I'm really excited to dig a little deeper. Before we talk about that,

28.18 -> let's talk about you. For folks who haven't heard of you before, do you want to give us

30.72 -> a bit of background on yourself?

32.309 -> TIFF: Sure, sounds great. So a little bit about myself, I started as a software developer

39.559 -> about -- well, about six years ago now, worked at both startups, big companies. After that,

47.53 -> I transitioned into a dev rel role, where I am now at Stackbit. And I also create video

57.82 -> content about how to break into tech, some small kind of coding videos, and just connect

66.09 -> with the community. That's what I love to do. So I'm happy to be here today.

69.659 -> JASON: Yeah, I think this is going to be a lot of fun. So I guess let's maybe let a little

76.34 -> bit of the premise in, then we can talk about the specifics. So we're talking today about

83.58 -> how to build visual editing into a website. So visual editing is not something that is

90.9 -> all that new. We've had visual editing for a long time in different platforms, but I

96.829 -> think it's a little stigmatized. Because I think that a lot of times when devs think

101.38 -> about visual editing, they start thinking about what you see is what you get. For those

107.77 -> of us who have tried to use those as part of a development flow, they tend to come with

112.52 -> a lot of pitfalls and caveats, and it's kind of like learning a whole new programming language

118.95 -> because of how complex they can become. So is that -- like, would you call what we're

126.88 -> doing today WYSIWYG editing?

130.65 -> TIFF: I'm glad you brought that up. Any type of tool that falls into -- not necessarily

143.07 -> falls into, but touches the low-code kind of area, developers go, "not for me." I get

149.19 -> it. A lot of times it's one of those I thinks where your mind goes to similar to what you

153.16 -> just said. There's going to be so much restrictions. I'm not going to be able to use what tech

157.129 -> I want. And we see this oftentimes, too, when you're working on a team, or this is where

162.97 -> I've experienced it a lot. You're working on a team, and you need a tool that you can

169.379 -> work with for both non-technical but also technical people.

173.77 -> Meaning, you're a content-driven, very heavy content-driven website. What website really

180.769 -> isn't nowadays? And you need to find this tool.

184.659 -> So what happens is you end up kind of meeting in the middle and settling. The marketers

189.08 -> want to use a specific tool or content editor, or you have engineers over here saying not

194.92 -> this tool. So you find a tool to meet in the middle with.

199.51 -> To go back to your question, when we dive into Stackbit, it's the complete opposite

206.47 -> in that sense. Stackbit, first of all, doesn't touch your production stack, which I think

210.209 -> is amazing. It also -- you can work with whatever tech you want. You can bring in whether you

216.81 -> want to work with -- like today we're going to work with Next.js and Contentful for the

221.73 -> headless CMS, but you can say work with, you know, if you want to bring in React or Svelte.

231.97 -> There's tons of different examples we have on our site as well.

235.36 -> It really is there to -- I like to say everyone can work in their own environment. So for

240.48 -> me, what drew me to Stackbit initially is because of this exact problem of, you know,

247.15 -> having tools that kind of just met in the middle and didn't really make anyone happy.

250.58 -> In turn, what typically happens is, as an engineer, the marketing or content editors

256.47 -> end up coming to you to make these changes, right.

261.23 -> You're heads down in a feature, you're focused in on it, and as you know, when you're in

267.38 -> the middle of coding something, the worst thing that can happen is getting pulled out

271.199 -> of the zone, right. A lot of times what happens to make these small changes, and although

275.53 -> they're small changes for the content that need to be updated, it takes up a lot of time.

279.57 -> Then you have to get back in the zone. So yeah, I'm really excited. That's what drew

284.41 -> me to Stackbit and this tool.

287.36 -> JASON: That's very cool. And so the way that I've always sort of thought about this is

293.479 -> I have a lot of, like -- I've tried to set up clients or co-workers with easy, and I'm

306.65 -> always going to have to air quote easy, ways to manage websites. The earliest version I

315.039 -> can think of is I tried to make my own content management system early in the day, before

320.26 -> I realized that you shouldn't do that. (Laughter) So I built a little CMS and gave it to some

327.07 -> of my clients. Then I found that, one, it was never flexible enough. They always wanted

331.54 -> to do something I hadn't built yet. And two, it just required a ton of maintenance. I spent

336.8 -> a lot of time trying to figure out, oh, why did it break when they copy/pasted this into

342.02 -> it? Or why did it break when they put this kind of image and not that kind of image?

345.81 -> It was always little headaches that kept me from doing things I wanted to do and putting

350.321 -> me in firefighting mode. From there, I went to WordPress. It was at

355.781 -> least way more flexible, and I still think that WordPress is kind of -- if you want to

360.59 -> start standing up ways to let people that aren't developers manage content, WordPress

365.65 -> is still one of the top contenders in the space because they did an excellent job of

370.71 -> it. Then over years, you know, I got out of the

373.48 -> PHP game. I started working on stuff like I went to Gatsby and later at Netlify. That

379.88 -> led me to a lot of headless CMSs. So stuff like Contentful and Sanity and others. And

385.96 -> whenever you get into this space, I'm like, okay, maybe for an easy side, I should put

390.57 -> somebody toward Webflow. Maybe I should put them toward Wix or somebody in the chat is

398.039 -> saying flashbacks of Dreamweaver. And maybe that would be the right way to do it, but

402.52 -> what I found is that was a trade-off that was so expensive to come back from. Once you

408.919 -> put it into web flow, it's not an easy thing to pull it out of web flow if you decide you

415.27 -> need a more complicated use case or whatever. And I'm sure the Webflow team would tell me

420.419 -> why I'm wrong in that statement because I haven't looked at it in years.

424.099 -> But the experience that I've had, at least, is when you go all in on a visual editor,

429.49 -> you tend to be all in on that visual editor. One of the things that I found when I was

434.59 -> at IBM is I was trying to find a way to let our docs team, our content management team,

443.569 -> people who were fully capable of writing Markdown or doing HTML if they needed to, but really

448.2 -> they just didn't want to. It slowed them down, took them out of their flow. So they wanted

452.729 -> a way to do content editing. I found -- what you said about there being

457.65 -> a compromise where you meet in the middle and nobody is happy, I found it to be a little

462.11 -> different, where whoever was at the top of the reporting chain got to dictate how everybody

467.11 -> else suffered. So in a company that's led by engineers, they'll say, welt, just use

472.449 -> Markdown. Then all the folks who don't want to write Markdown are like, I don't like Markdown.

477.199 -> I want to be able to copy/paste from Microsoft Word. The engineers are like, well, too bad,

481.85 -> that's how it works. Get into GitHub, open a pull request. They're like, I don't know

484.47 -> what a pull request is. Whatever, figure it out.

487.82 -> Or you get a company where the head of the company or the head of the team is a marketing

493.509 -> exec, a copyright or something like that. They say, engineers, I don't care you don't

497.44 -> want to work in this Byzantine editor. So now you have to do these weird workarounds

505.09 -> to try to shoehorn code in a way that the marketing team won't accidently delete or

510.8 -> edit when they're trying to mess things around. So what I'm cautiously optimistic about as

517.479 -> I hear you describe Stackbit is it sounds like this is a little bit of a way for everybody

522.8 -> to have their cake and eat it too. What I'm understanding from the engineering standpoint

527.95 -> is you mention two things that I want to dig into. One is you said it never touches your

533.769 -> production stack. I really want to hear more about that. And two, you mentioned that you

538.43 -> can use it with Next or Svelte or React. So that's probably the easiest one to answer.

545.13 -> I'll ask that first. How flexible is Stackbit? Can I plug it into

548.9 -> plain old HTML and CSS? Does it need to be a framework?

553.38 -> TIFF: So essentially with Stackbit, you can -- it's flexible enough to work with any site

559.64 -> framework that can be run using a Node-based development server. So I mentioned we're going

568.13 -> to be using Next. I mentioned Svelte. A ton of other ones too that I'm blanking on right

575.769 -> now.

576.769 -> JASON: Is something like Vite -- like would Vite work? It would give me a plain HTML site

582.519 -> being served by Vite. I guess I'm curious where is the delineation. Does it need to

588.84 -> be something that runs through, like a Babble or Vite parser for bundling, or is it as long

595.51 -> as a Node server is running, Stackbit can go?

597.66 -> TIFF: As long as a Node server is running, Stackbit can go.

601.15 -> JASON: Oh, cool. Okay.

602.97 -> TIFF: For a lot of examples, I use Next.js and Contentful. We definitely are trying to

608.99 -> work with other examples too. In the docs, there are those examples. But I think the

614.88 -> reason that even for today that we're using Next.js and Contentful is it's just kind of

619.93 -> our go to. Also, there's no additional customization needed or anything. It's just kind of out

626.241 -> of the box ready to go.

628.07 -> JASON: Yeah, it is always kind of nice when you can just plug something in and not have

633.11 -> to think about it anymore. Okay. So then the second part of that question was -- I asked

640.93 -> two things. The first one was about the flexibility and what you could use on the stack. The second

646.73 -> one was not touching the production stack. So can you say more about what that means?

654.269 -> Because in my own mind, what I'm imagining is that in order to use an editor of any kind,

661.57 -> it has to be part of the production stack. So how is Stackbit different? How is it managing

667.2 -> that?

668.2 -> TIFF: So what it is, is when you install -- and we'll go through this. When you install the

673.13 -> Stackbit CLI, it's essentially a site preview you see when you're working with it. So it's

678.69 -> just essentially your site running in the development server. During this time, it's

684.951 -> the only time that Stackbit is necessary to interact with your code.

688.73 -> So anything else that we require in the code can be stripped out for production. We'll

700.3 -> go through this step by step and kind of cover it as we go. It's a good way to visually see

706.79 -> what is happening and why it's not needed. But say we've installed the CLI. We've got

712.8 -> the visual editor up and running. For the development part, it's in a good place.

717.45 -> So what we do is we push our changes to GitHub, to your repo. From there, in Stackbit, you'll

726.029 -> take that repo, and you can go into Stackbit, into your portfolio, and put the URL there.

732.58 -> What that will do is it will spin up a cloud version of that project essentially. So then

739.79 -> your marketers can go in with this URL, modify it, change it, all the content and whatnot,

744.889 -> which is directly reflected back, in this case, in Contentful.

748.32 -> JASON: Okay. Very cool. Very, very cool. Great. So I feel like all my other questions I'm

756.19 -> going to say, like, how does this work, and you're going to say I need to show you code.

759.57 -> So maybe it makes sense to switch over and look at code. So let me push that button,

766.73 -> and we'll head over there. Where the heck did my -- there it is.

769.09 -> TIFF: Actually, Jason, one thing you mentioned I wanted to touch on is -- sorry. Two side

776.87 -> notes. We have a very similar history. You mentioned you started in PHP, I believe. I

781.54 -> did as well. And you worked at IBM. I did as well.

784.63 -> JASON: Wait, okay. We got to go for the trifecta. Were you also a musician?

789.029 -> TIFF: No. Absolutely not.

790.69 -> JASON: Almost. Two for three.

792.76 -> TIFF: Well, video content. We could count that as something.

797.5 -> JASON: Exactly. We're basically the same person is what we've just discovered.

800.88 -> TIFF: Exactly. And I wanted to say, you kind of touched on a little bit, cost. You know,

809.3 -> storing your content in a headless CMS, it can get expensive pretty quickly. I was talking

814.839 -> to actually our solutions engineer, Joe, recently, who's been playing around with this demo.

821.19 -> We're going to be sharing more about it on Stackbit shortly, but playing around with

825.78 -> this idea of separating your content sources and how that can really impact many different

834.26 -> things but also from a financial standpoint. So using your headless CMS to store content

840.649 -> that is --

841.649 -> JASON: Uh-oh.

846.61 -> TIFF: Hello?

852.339 -> JASON: Looks like we're having some connection issues. I'm looking at the stream. It's looking

865.79 -> like it's coming from -- crap. Okay. Let's see how this goes. Everybody just breathe.

873.04 -> Okay. Are you back?

877.199 -> TIFF: I feel like I'm getting back.

884.49 -> JASON: I feel like you're getting back. We're getting audio, but it's a little choppy.

893.87 -> TIFF: We're slowly improving, I think.

897.15 -> JASON: Yes. Okay. All right. So you were in the middle of making a point when we lost

903.63 -> you. You were talking about the storing content in different places.

909.32 -> TIFF: Can you hear my audio now, Jason?

912.97 -> JASON: Yes.

914.28 -> TIFF: Okay. Perfect. I'll continue, but if you stop hearing me, just let me know. So

920.759 -> yeah, storing content in different places. For this example that we were walking through,

925.92 -> he was storing -- he was separating the presentation layer from the data layer of content. So a

931.32 -> lot of times what ends up happening is when you're using a headless CMS, your presentation

936.1 -> layer is tightly coupled to your data layer, meaning that the content you're storing, you're

942.16 -> also defining maybe some of the styling properties there and whatnot.

945.59 -> What this does, though, if you want to reuse that content, which we often do, you have

951.42 -> to -- it's already tied to that specific styling and whatnot. So to reuse it, you're going

956.529 -> to have to either store it in a different space, depending on if it's for a different

961.21 -> website or duplicate it essentially, which can get very expensive very quickly.

967.16 -> So what we were playing around with and really talking about is this idea of storing a presentation

972.779 -> layer. In this example we do, it's with JSON files.

976.35 -> JASON: Oh, interesting.

978 -> TIFF: So your presentation layer is where you define the components that are going to

985.37 -> be -- sorry, the content references and the components using this content. What this does

991.16 -> is it allows you to scale. It's much more cost effective. But then with this architecture

1000.98 -> of having your content stored like this, the miss link really is it still goes back to

1007.329 -> how are your editors or marketers going to be able to work with this now that it's stored

1015.91 -> in two places. So it solves a big problem, but it also creates a new one.

1021.42 -> Then, of course, we bring in Stackbit, that missing link here. So it's able to solve that

1028.08 -> problem of allowing your content editors to just work directly within the visual editor

1032.669 -> with multiple content sources. So I just wanted to touch on that. When it comes to pricing,

1038.11 -> I think it really solves that.

1040.709 -> JASON: Yeah, and that also can solve -- like, one of the things I found is I really like

1047.02 -> the way that different content solutions handle different things. Like, I'm a really big fan

1054.549 -> of -- I'm not going to name names, to not get into a thing, but there's one that is

1061.49 -> maybe great for long-form written content, and there's one that's maybe great for custom

1066.9 -> data types where you want structured data. Other times, like you said, all you really

1071.84 -> need is a JSON blob because you're just trying to list out your categories and you don't

1075.669 -> need a custom headless CMS to put an array of 15 categories together, right. Like, that

1082.69 -> can be JSON. So being able to pull those different things

1086.42 -> together and edit them all through one interface because Stackbit can do that is -- that's

1094.47 -> pretty compelling. So, okay, great. I think now I just want to start playing with it.

1101.39 -> So I'm going to move us into the pair programming view.

1104.15 -> TIFF: Amazing.

1106.34 -> JASON: And why don't we get a window up, if I can find my windows. We're going to bring

1116.909 -> this one over here. And first and foremost, let me do a quick shout out to our live captioning.

1123.95 -> So we've got Rachel here with us from White Coat Captioning today. Thank you so much,

1127.71 -> Rachel, for being here. There is a closed caption button right on your video player

1132.14 -> in Twitch so you can see those there. That is made possible through the generous support

1137.02 -> of our sponsors. We have Netlify, Nx, New Relic, and Pluralsight all kicking in to make

1141.69 -> this show more accessible to more people, which I very much appreciate.

1145.95 -> We are talking today to Tiff. You said you're not on Twitter. So where should I send people

1153.72 -> if they want to keep up with you?

1155.81 -> TIFF: For sure. I would say all other social platforms, I am TiffInTech. So Instagram,

1163.64 -> TikTok, and YouTube. I do have Twitter.

1168.2 -> JASON: Just not using it.

1172.19 -> TIFF: I feel like it's such a dev thing to be using it. I'm just really lacking.

1184.38 -> JASON: I've never once thought about Twitter as being like a requirement. Honestly, it's

1191.309 -> one of those things I wish I didn't do. (Laughter) oh, I've got to pause that so it doesn't make

1199.059 -> noise.

1200.059 -> TIFF: It's a scary place.

1201.059 -> JASON: Okay. All right. Okay. Are we good? Yes. All right. You are still lagging a little

1213.15 -> bit. I apologize if I'm talking over the top of you. How are we doing?

1220.32 -> TIFF: Can you hear me now?

1224.27 -> JASON: I can hear you now. Okay. So I have the Stackbit website up. I've dropped a link

1234.929 -> to that. And that is the extent of what I know here. So what should I do first to get

1241.309 -> this project running?

1243.039 -> TIFF: Amazing. Are you -- well, let's start by cloning this project. So do you want me

1249.65 -> to send -- I know I sent it to you in an email, but do you want me to send it to you in the

1254.54 -> chat, or what's best?

1255.54 -> JASON: Let me see. I don't know if I have the repo. I have the Contentful space.

1263.549 -> TIFF: Okay. Give me a sec here and I will send it to you.

1269.6 -> JASON: We have a chat window here in the video thing.

1274.59 -> TIFF: Perfect. Give me a sec. Everything is moving slower now. So just give me a minute

1289.2 -> here.

1290.2 -> JASON: Cursed by the streaming gods today.

1292.72 -> TIFF: Oh, I know. Okay. Let me see. I know I have it in my email, but it's loading here.

1302.95 -> While it's loading, I'll tell you a little bit about the project we're working on today.

1307.48 -> So it was built by Sean, who is our developer experience engineer, and we wanted to build

1314.87 -> a project that was kind of something you can put your shoes into as far as something we

1321.89 -> all kind of navigate through. So it's a doc site. I know one of the big

1327.95 -> things oftentimes that, as developers, we dislike doing is keeping up-to-date documentation.

1333.279 -> Or maybe it's just me. So he built this doc site. The purpose is to really go through

1342.039 -> what it would be like when you're onboarding at a new company, whether you're a technical

1346.73 -> writer or maybe a developer as well, and you need to start making updates into this documentation.

1352.87 -> Now, obviously, if you're a developer, you can run it locally and make changes that way.

1359.1 -> But even then, it kind of goes back to what you were honing in on earlier. It's like whether

1363.7 -> you're a technical writer or content editor or even developer, some of these things shouldn't

1369.08 -> require you to completely spin up your development server, to then go into your headless CMS,

1376.309 -> to find these changes, then flip back and forth to see them, and then push. Time should

1382.38 -> be spent elsewhere. If even you have the ability to do so. So

1386.51 -> give me a sec here. Let's see if it loaded. Perfect. All righty. Okay.

1404.83 -> JASON: All right.

1412.27 -> TIFF: And I can just drop it in the chat?

1416.16 -> JASON: You can. That's totally fine. All right. So I'm grabbing this link here.

1425.35 -> TIFF: Then wherever you want to put it.

1429.33 -> JASON: Oh, GitHub. So secure. Okay. So I have got this here. In fact, I can -- look at this

1440.981 -> cool thing. They have the GitHub CLI set up to do this for me. So I'm going to move into

1446.789 -> -- actually, no. Here's what I'll do. I'm going to clone this. Then I'm going to fork

1456.34 -> it. Failed to fork? What? Oh, I'm not in the thing. That would make sense. So we're moving

1466.76 -> into the doc site example. And I'm going to fork this one.

1472.64 -> TIFF: Perfect.

1476.429 -> JASON: Oh, it forked into my personal. Whatever. That's fine. So this then gives us -- let's

1488.77 -> take a look. I have a Next site, it looks like. So we're looking at Next. We've got

1503.59 -> Next with React, then some Contentful stuff. Okay.

1509.54 -> TIFF: Exactly. So far --

1513.12 -> JASON: Go ahead.

1515.799 -> TIFF: Sorry, Jason. So far there's no use of Stackbit. I'll let you know when we start

1524.48 -> integration with Stackbit. But this is literally just cloning a Next.js project that has Contentful

1530.159 -> in it already as well. But nothing related to Stackbit here. You can think of it as when

1535.79 -> we're going through the example of you're onboarding to a new company, a new project,

1541.44 -> and they send you the repository. You clone it, and we want to get it running locally.

1546.429 -> So let's -- I'm just looking at your screen here. So then we can just run npm install.

1554.95 -> Then the next step, we'll add some environment tokens that I sent you. Once again, this isn't

1558.98 -> Stackbit related. We're adding in environment tokens for Contentful.

1563.26 -> JASON: Got it. Okay.

1567.28 -> TIFF: And maybe just rename that.

1570.94 -> JASON: Env.local is what I want, right?

1574.61 -> TIFF: Just .env.

1576.94 -> JASON: Okay. We'll do the .env. I'm going to pull this off screen because it's got some

1583.1 -> sensitive details in it. You so kindly sent those to me beforehand so that I don't have

1591.57 -> to do it myself. Okay. So I've got that set. This .env is now created, and it's got these

1599.68 -> values in it. So now am I able to start the server?

1606.809 -> TIFF: Did you npm install? Maybe I missed it.

1612.47 -> JASON: I did run an npm install, yeah.

1615.52 -> TIFF: Okay, perfect. So just run npm run dev. Just start the server up.

1622.86 -> JASON: Okay.

1623.98 -> TIFF: Perfect. We can open it up.

1627.54 -> JASON: All right. So that is running in local host 3000. So I will head over to our browser

1634.21 -> here and fire up 3000. And here's our Acme Corp.

1643.419 -> TIFF: Yeah, so right now we've done nothing new that we're not all familiar with or most

1655.409 -> of us aren't all familiar with in the sense of cloning a project, installing its dependencies

1659.92 -> and running it locally. So this can be any project that you want to work with as we kind

1665.35 -> of spoke about before. I always name everything Acme Corp. I know

1669.26 -> it's from a movie or somewhere. I can't remember exactly. If anyone knows, leave it in the

1673.63 -> chat. But yeah, so this is just a doc site, an example doc site. The content is coming

1679.419 -> from Contentful. So I'll get you to log into Contentful with the email address that I sent

1684.94 -> the invite to. So think of this as, you know, going back

1690.04 -> to our example. You're joining a company.

1694.22 -> JASON: We've got you frozen. Let me get logged into Contentful while we hope you come back.

1710.71 -> Oh, I'm going to have to sign up with -- let's see. This one. Okay. So here's our Acme Corp.

1729.549 -> Let's see. Tiff has dropped. So I'm going to poke around in here for a minute while

1737.309 -> hopefully she rejoins. Yes, chat, this is Arc Browser. It is Mac

1748.44 -> only. I like it very much. I have a couple invites, if folks want them. Send me a whisper,

1755.75 -> DM on Twitter or something. Okay. So we've got content. We've got our 54 entries

1766.419 -> in here, which I'm very glad this was set up beforehand because one of the things that

1772.12 -> we always fall victim to on this show is starting with something that's completely empty, and

1775.87 -> then we spend half the show doing dummy content. Tiff, you're back.

1782.179 -> TIFF: I'm back. Can you hear me?

1786.409 -> JASON: I can hear you, yes.

1789.11 -> TIFF: Perfect. Okay. So I just kind of caught the last bit of that. But yes, so came prepared

1794.52 -> with the content already in place. So yeah, this is where the content is coming from.

1802.15 -> I want to highlight here some different workflows. If you go back to the local host 3000, and

1811.099 -> we'll get into Stackbit right after this, but this is really important. It does a good

1815.13 -> job describing the difference in workflows with and without Stackbit, if that makes sense.

1823.92 -> JASON: Okay.

1824.92 -> TIFF: So if you scroll down a little bit to the docs section, you can see there's a card

1832.799 -> grid there. In our code base, it's just a simple component that's rendering the content

1838.73 -> that is coming from Contentful. If you search card grid, it will be there. So, pretty simple.

1857.299 -> JASON: Okay.

1859.309 -> TIFF: But what I want to kind of touch on here is say you come into this doc site, and

1865.45 -> you're either a -- even if you're a developer, technical writer, whomever you are, and you

1872.139 -> want to change the order of these cards. So in order to do that actually, it's not right

1879.929 -> now through the code that you'd have to do it. You'd have to go into Contentful. What

1886.75 -> you'd have to do is really search for this. So once again, I'm leading you through this

1891.98 -> because I know where all this is. But just imagine you're onboarding to a new company,

1897 -> and you're trying to work through this. So right now if you go to where it says "any,"

1903.46 -> next to content type, if you change that to -- or if we filter by slug even. Sorry, it's

1909.61 -> just a little tiny for me.

1911.37 -> JASON: I see an option for card grid. That looks promising.

1915.6 -> TIFF: Go to page.

1918.23 -> JASON: Okay.

1919.54 -> TIFF: Yeah, page and then you could try card grid too. But let's do it this way for now.

1925.21 -> Then go filter by slug. Let's just try and get to the homepage.

1929.25 -> JASON: And slug for homepage, is that just home?

1932.96 -> TIFF: Oh, sorry, just slash. Just backslash.

1937.799 -> JASON: Okay. So I see the welcome. This looks like the homepage.

1949.2 -> TIFF: Click on that one.

1952.88 -> JASON: Okay.

1954.279 -> TIFF: Then if you scroll down a bit.

1959.899 -> JASON: Card grid.

1961.09 -> TIFF: You can see your card grid, which is embedded in the homepage. Click on card grid.

1967.309 -> Then this is where these three card sections are coming from. So something as simple as

1971.72 -> you want to change -- arrange the order of the content. We have to, you know, flip back

1977.779 -> and forth from our local host, which we have to have the code running locally, spin that

1982.8 -> up. Then we have to go into a different platform. You know, headless CMS. Then kind of sift

1989.269 -> through to find this. This, once again s a very small example. As

1994.139 -> I'm sure you've seen when you're working with headless CMS, the number of content stored

1999.51 -> in them can get hectic quickly. So if we wanted to change these card orders, you could simply

2007.87 -> drag them around. It's fine if you want to or not. But I just wanted to hone in on that

2012.789 -> before we go through using it with Stackbit. You might have to publish it as well. Yeah,

2023.82 -> publish changes.

2026.029 -> JASON: So I think in dev, it's pulling the drafts. I was curious if that was going to

2034.389 -> be the case. And so this takes a second, but it did work, which is pretty -- I mean, that

2040.84 -> is already pretty nice that this is set up to do that.

2044.279 -> TIFF: Yeah, exactly. It's supposed to do that, but because it was taking a sec, I didn't

2051.06 -> know if something silly was going on. So that's great. We'll give it a sec here. So you can

2058.879 -> see this is just kind of one small example that I wanted to highlight before we really

2063 -> dive into it. I think it does a great job on a very small scale of just showing how

2069.909 -> tedious this can be. And once again, I know I'm repeating myself, this is someone that

2076.6 -> has to be decently technical to do. Or at least be trained to do this, as far as cloning

2082.99 -> the repo and things that can go wrong.

2085.879 -> JASON: Right.

2086.879 -> TIFF: So that's really where Stackbit comes in.

2088.91 -> JASON: Oh, it looks like we're losing you again. Maybe try just turning your video off

2103.04 -> for now, and we'll see if we can get a better audio signal.

2105.9 -> TIFF: Okay.

2107.42 -> JASON: That immediately sounded promising.

2110.15 -> TIFF: Hey, Jason. Can you hear me?

2112.72 -> JASON: Yeah, yeah. We'll roll on that. Thanks, everybody, for sticking with us. Oh, and the

2121.76 -> chat says that Acme is from Looney Tunes. All that good stuff.

2129.54 -> TIFF: Amazing. That's cool. Okay. That's from my childhood. So thank you for letting me

2136.92 -> know.

2137.92 -> JASON: All right. So I'm ready now.

2141.73 -> TIFF: Perfect. So open up a second terminal. You can keep your dev server running. Then

2155.55 -> you're in the project. Yes, you are. So type in npm install-g @stackbit/cli. There's a

2169.91 -> few different commands that this gives us. For today, we're going to be going through

2174.829 -> the main one, Stackbit dev, but there's a lot of different customizations that depending

2179.619 -> on your project and whatnot you can dive into. Perfect. Okay.

2185.359 -> JASON: We're using 0.2.84 today. And I'm ready.

2197.52 -> TIFF: Perfect, yep. The latest version. All right. So now all I want you to do -- this

2202.95 -> is literally -- I just want to hone in on this and remind everybody who's watching.

2206.75 -> Up to this point, nothing was Stackbit related. It's very standard, what you do to start up

2213.96 -> a project, right. So now we've installed the CLI. Then I just

2217.17 -> want you to simply run Stackbit dev while your development server is still running.

2222.92 -> JASON: Okay.

2225.29 -> TIFF: Then from there, this creates a URL.

2230 -> JASON: It says forwarding request to local host 3000. We've gotten a source, Stackbit

2240.839 -> is running. Should I click on this?

2244.81 -> TIFF: Yes.

2249.13 -> JASON: Okay. So a few things I'm seeing out of the gate, here's our site. It's got some

2257.859 -> info about Stackbit. Then a bunch of controls that you're going to have to explain to me.

2265.01 -> TIFF: And before I even do that, I want to explain a little bit about -- because for

2269.8 -> me, I was like, okay, what is really going on here? Let's take a step back and kind of

2275.14 -> dive into it a little bit. So we have our dev server running on 3000 still, which we

2282.611 -> need to do when we run Stackbit dev, which we did. What is happening is you can see in

2288.66 -> the URL -- not now on the browser, but given to us in the terminal. It was local host 8090.

2297.2 -> So what we are doing is we are essentially proxying traffic to your dev server. So to

2305.26 -> your local host 3000. This is configurable as well, but for this,

2311.31 -> we'll stick with 3000. What we are doing is we're adding a script to the proxied site,

2319.11 -> which handles content editing capabilities embedded in the site. So it might -- we can

2325.76 -> try looking now. If you go inspect on the site.

2329.319 -> JASON: Inspect. Like this?

2331.78 -> TIFF: Yeah, and then go to -- yep. Then go to your network tab. And you can see here

2342.52 -> the script running. So it's looking for content changes every second essentially. So any changes

2348.23 -> that are made in Contentful, this is how we know. So just to give a bit of insight as

2353.91 -> to what is going on behind the scenes, I guess you could say.

2360.68 -> Then going back, we have up here this kind of suggestion, which I really love, of Stackbit

2366.61 -> config file is missing, which we will add in a second here. But first, to kind of talk

2371.589 -> a little bit about what is going on, the side panel to the left, there's some functions

2377.12 -> or features, I should say, that come right out of the box. If you click on some of them

2382.2 -> there, you can see there is content, for example. If you click on it, it will be empty because

2389.08 -> we still have to add our config file, which will enable Stackbit to talk to Contentful.

2396.18 -> Then there will be content from Contentful there.

2399.97 -> Then if you go down one to component presets, same thing. But right out of the box, we can

2406.599 -> see we're already starting to get the shell of what is happening. And this is literally

2411.71 -> -- this also is a newer feature we have, where you can add in different buttons and links,

2419.09 -> say to docs or other things like that. And you can see in the top left-hand corner, we're

2424.62 -> still working locally. Just a nice way to show that.

2429.11 -> So let's go ahead and add in the Stackbit config file. That's the last step for Stackbit

2435.88 -> that's required. So literally for Stackbit, all we have done thus far is install --

2441.41 -> JASON: Install the CLI, really.

2444.7 -> TIFF: Oh, we're going to install two more dev dependencies first, actually. You can

2452.72 -> stop either one of the -- yeah, you can stop that. Then we're going to install two dev

2459.63 -> dependencies. Once again, because Stackbit isn't touching our production site. It's going

2465.66 -> to be @Stackbit/types.

2466.66 -> JASON: Whoops. I meant to hit space. I hit enter.

2473.609 -> TIFF: That's okay. Then we're going to do the same thing but @Stackbit/cms-contentful.

2484.69 -> And then these are two packages that -- for types, it's because we're working with TypeScript.

2491.5 -> So it gives us more features there. Then with Contentful, because we're working with Contentful.

2497.28 -> JASON: And if I wanted to look at a list of all of your compatible CMSs s there one -- can

2504.5 -> we, like, just go look? Because someone asked is this like Sanity. It's not because Sanity

2511.89 -> is a standalone, headless CMS. And this is like -- you're using Stackbit as a layer on

2517.46 -> top of a different headless CMS, which is pretty dang cool. So yeah, here it's Contentful,

2525.99 -> Markdown, don't know that one. That's Sanity there. Nuxt, React, Angular, Svelte. Pretty

2532.05 -> dang cool these can all be plugged together like that. Sorry, that was my little detour

2537.09 -> because of the chat.

2539.55 -> TIFF: No, and I'm going to add to that detour. For those who are interested in it, with what

2547.859 -> can be used with Stackbit, one thing we did a while back was -- so it can be used with

2553.64 -> any structured content source. So we talk a lot about headless CMSs with Stackbit, but

2558.73 -> this could be -- you could use a database. You could use any API with structured content

2564.52 -> essentially. One thing that our solutions engineer, Joe,

2569.44 -> did -- he always makes the coolest projects -- is he used Figma's API with Stackbit. So

2577.359 -> that was pretty --

2578.64 -> JASON: Cool.

2580.85 -> TIFF: Yeah, and that's really interesting too. Then the designers, you know, you can

2585.869 -> set up a lot of guardrails or specifications, and it just becomes this whole other environment,

2593.39 -> which is amazing. But I won't derail too far off of that. Just to kind of hone in on the

2600 -> content sources.

2601 -> JASON: Yeah, that stuff is really cool.

2603.08 -> TIFF: So let's create this new -- yeah, it is. Back in VS Code, let's create a config

2616 -> file, just in your parent. Perfect. Yep. And we'll call this file Stackbit.config.ts. Perfect.

2627.61 -> Then from here, we're going to import the two dependencies that we just installed. So

2644.559 -> import, curly brackets, Contentful content source. All capital Cs. And it's

2655.64 -> actually not camel case. The first C as well is capital. Then from @Stackbit CMS Contentful.

2664.54 -> Yep. Then we're going to import one more thing.

2668.7 -> Import, curly brackets. This is camel case. @Stackbit/types.

2677.96 -> JASON: Let's see if it's going to give me my auto complete here.

2684.93 -> TIFF: Come on. It's lower case D define. There we go.

2696.869 -> JASON: Define Stackbit config. All right.

2702.56 -> TIFF: Yes, exactly. So those are the two dependencies we need to import. So now we're going to export

2713.91 -> this config file. So we can go export default define Stackbit config. Then inside of there,

2725.05 -> let's put -- oh, yeah. You're already ahead of me. Sorry. It's lagging a second here.

2729.95 -> Then we're going to give Stackbit some information. So let's do Stackbit version. It's camel case.

2740.15 -> Then we're going to do single quotes. And I always pronounce this wrong, the tilde,

2750.56 -> the little wave. Then go SSG name, camel case. And we're using Next.js.

2770.49 -> JASON: Okay.

2772.75 -> TIFF: Then we're going to do content sources, camel case. Third one down. We're going to

2782.609 -> put this in an array. And we're going to do new Contentful content source. Then from there,

2798.04 -> curly brackets. And we're going to give -- now what we're going to do is essentially tell

2802.71 -> Stackbit a bit of information about the Contentful space and organization that we're using. So

2809.42 -> first one we're going to do is space ID. So third one down.

2814.059 -> JASON: And that's going to be --

2815.609 -> TIFF: That's going to be our Contentful -- out of our .env file.

2822.089 -> JASON: Yeah, so I can copy/paste these across. Then what was the other one we needed?

2832.71 -> TIFF: Then do the same for environment.

2839.47 -> JASON: Okay.

2845.45 -> TIFF: Contentful_ environment. Then go preview token. And do same thing. Yes, perfect. Then

2869.93 -> maybe do -- because we're using TypeScript, do exclamation mark after these. I see it's

2875.05 -> giving you a little bit of a headache. So just telling it that it will exist. You don't

2880.55 -> have to worry about being undefined. Oh, no, sorry. After the ID.

2885.75 -> JASON: Oh, I got it. I got it. You know, I've never done that in TypeScript before.

2891.19 -> TIFF: You know, I haven't either until I joined Stackbit. What does it say here?

2900 -> JASON: Space ID environment preview token is not assignable. I think it's missing an

2906.16 -> access token is why it's mad. That's my guess.

2914.089 -> TIFF: Try, yeah. Okay, perfect. Oh, actually, instead of Contentful access token, I changed

2929.29 -> the name in the tokens I sent you. So do Contentful management token. It's different than the

2935.79 -> one you just copied, actually. I was being bad and changed the name.

2942.58 -> JASON: Okay. So now it's happy because it's got all the required fields.

2947.819 -> TIFF: Oh, do exclamation mark on line ten as well, at the end of the environment.

2956.94 -> JASON: Okay.

2958.339 -> TIFF: Give that a save.

2960.69 -> JASON: Oh, wait. Is it export const config?

2963.93 -> TIFF: Or just export default even. Yeah.

2970.17 -> JASON: All right.

2972.99 -> TIFF: It's happy. Perfect. So to kind of talk a little bit about this config file a bit

2981.04 -> more, as I mentioned, this is telling Stackbit a little bit of information about the content

2989.28 -> source we are using. So in this case, giving it some environment tokens and whatnot. Having

2997.54 -> this config file now is what will enable two-way sync. We'll go through that. I think I'm a

3003.53 -> visual learner. So when I speak about things, I'm like, we'll go through it and see it.

3008.38 -> It's just the easiest way to learn from me, I guess.

3011.47 -> So yeah, it enables two-way sync. And let's start Stackbit dev again. I just want to highlight

3017.66 -> here, Jason, if we had Stackbit dev running already and say we stopped our local development

3025.849 -> server instead of Stackbit dev, one thing that's really cool is it doesn't -- we don't

3034.22 -> typically refresh the page. So if you go to local host 8090 now --

3039.391 -> JASON: Did it start?

3044.43 -> TIFF: Perfect. This is what we want. It should be good to go. And this isn't like a warning,

3055.79 -> per se. It's more so just help -- I find it really helpful. You can X out of it, but it's

3061.859 -> just really helpful next steps. So as you can see now, we have our content that is coming

3067.75 -> in from Contentful. We could even do something where it's like -- let's go to -- yeah, let's

3074.891 -> go to change something like the title in the card grid. You can change any kind of content

3082.041 -> here. You can put hello world or anything like that. Then just click out of it, wait

3090.849 -> for it to load there. If you exit out and we go down, where is that

3096.58 -> home section grid?

3098.27 -> JASON: I don't think that's being used.

3103.94 -> TIFF: Let's go back there and go to heading. Yeah, getting started is used.

3111.95 -> JASON: Yeah, okay. We'll add a little exclamation point on that one. Here's the thingy telling

3118.2 -> me it's happening. And look.

3120.079 -> TIFF: Perfect.

3121.079 -> JASON: So, okay. Right out of the gate, this is really impressive because what just changed

3130.339 -> is that for me as a developer, instead of now having to have both the site open for

3137.049 -> dev and Contentful open for dev, I now have it all in one place. So as I'm making my changes

3143.549 -> here, I can change code and see the code change, and I can change content and see it update

3150.09 -> right over here. And that is really, really cool.

3153.799 -> I feel like we're just barely scratching the surface here.

3159.67 -> TIFF: I agree.

3163.109 -> JASON: Oh, good question from the chat. The question is if another user changes content,

3169.47 -> does it live update here too?

3171.559 -> TIFF: Okay, yes. Sorry. Let's take a step back. Yes, it does. Great question. But right

3180 -> now, as you're setting this up, this URL is unique to your machine. So right now, because

3185.44 -> we're in setup phase, it's unique to your machine. But as I kind of alluded to at the

3191.41 -> beginning, which I'll speak more about at the end, once we're done with this process.

3199.87 -> Once we push our changes to GitHub and then we take that repo and input it into your dashboard

3207.49 -> in Stackbit, put in that repository, essentially to make it shareable inside of Stackbit, we

3217.359 -> can create a new -- it will create a new cloud project to point to the GitHub URL.

3222.67 -> It's super user friendly to do, whether you're a developer or marketer. Your marketers could

3228.38 -> do it, for example. As a developer, you could be like, here's a link to this repository.

3233.41 -> I installed Stackbit CLI and two dependencies and added a config file. So then you push

3239.561 -> it, they can take this URL, and put it into Stackbit. Then what will happen is Stackbit

3246.77 -> will essentially create a container. The container basically handles everything we were doing

3252.13 -> but in a hosted environment. Once again, it's not a public URL, but it's a URL that other

3256.859 -> collaborators can be invited to, if that makes sense.

3260.25 -> JASON: Yeah, and for someone who's a content creator, they wouldn't necessarily need to

3265.69 -> use Stackbit at all if they went into Contentful. Like, I just made a change in Contentful,

3270.34 -> and it did live update. So if you were to go into Contentful and make a change, my dev

3275.76 -> environment would update with that change, right?

3279.27 -> TIFF: Correct, yes, yes. So it's working that way right now. But we will -- when you push

3289.64 -> these changes, you don't even need to go into Contentful. It's literally like your marketers

3294.359 -> can come in here and make changes. I say marketers, but as I mentioned, honestly, anyone who wants

3300.79 -> to make smaller -- sorry, not smaller, but anyone who wants to make content-related changes.

3307.17 -> You don't need to go through that whole process. So let's keep on going here. I see that we're

3313.39 -> getting this message up top about configuring your models. So still in the config file -- oh,

3328.119 -> sorry, Jason. Sorry. I keep on flipping back and forth. After line 14, we're going to let

3340.329 -> Stackbit know, I guess, essentially about our models. What this does with model extensions

3348.97 -> is it telling Stackbit what pages are going to come in. If you do camel case model extensions

3353.789 -> --

3354.789 -> JASON: Oh, whoops. Got ahead of myself. Model extensions. Okay.

3361.78 -> TIFF: Then we create an array with an object inside of it.

3370.66 -> JASON: Okay.

3372.4 -> TIFF: So the first one is name. It's going to be page. I can show you afterwards -- oh,

3385.89 -> lower case.

3386.89 -> JASON: Lower case. Ah, so we're currently mapping in Contentful the types, like the

3397.66 -> content types.

3399.039 -> TIFF: Correct, yes. Exactly.

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

3406.28 -> TIFF: If you go into -- yes, content type ID page.

3413.07 -> JASON: Got it. So our content type, the ID is a page. And we are telling Stackbit to

3425.43 -> use this as the page level URLs.

3428.89 -> TIFF: Yes, we are doing that. We're also going to do -- sorry. The next one we're doing is

3435.93 -> type, which is page as well. Because that's actually going through -- the naming is a

3443.02 -> little confusing. So the name page is because -- sorry. Let me take a step back.

3452.95 -> The type is page, but what this type is here is because Stackbit offers three different

3461.13 -> -- I keep using the word type a lot -- but three different types. So we have page, we

3465.55 -> have data, and we have object. So for page, of course, it represents a page, like a blog

3475.329 -> site that has different post models for individual blog posts, whereas for data, which we're

3481.869 -> not going to use in this example, but data is more so content objects, which are either

3487.609 -> standalone or can be accessed globally. Then there also is one for objects, which is more

3492.86 -> so around repeatable content that is embedded in another model. Page type is a very standard

3501.66 -> one, especially when we're doing this for the purpose of creating new pages.

3505.74 -> So you're correct. The next one is regarding the URL. So type in URL path, camel case.

3514.43 -> JASON: Okay.

3517.39 -> TIFF: Then we're going to do two single quotes, slash, curly bracket, and inside of there

3527.2 -> we're going to pass in slug. Slug is essentially some variable interpolation. So it's a field

3536.69 -> that exists on the page model in Contentful. If you go to page, there should be the ID

3544.829 -> there. Yes. So when we're just passing in slug, this will

3551.501 -> allow us to do any pages coming in from Contentful with different slugs, it will show -- we can

3559.589 -> access those.

3561.25 -> JASON: So this -- is the homepage going to cause problems? The homepage is slash. And

3574.63 -> this would result in the URL path being a double slash. Or it's going to fix that for

3579.64 -> us?

3580.71 -> TIFF: Yeah, it's whatever comes in, it's going to fix that for us. In Contentful, I don't

3591.49 -> know -- there is field ID, which is equal to -- for some reason when you were there,

3599.65 -> I didn't see it, of course. Maybe if you go to info. Field ID.

3604.68 -> JASON: I'm sure it's in here somewhere. I haven't used Contentful in a while, so I can't

3612.26 -> remember how to do the field stuff.

3613.26 -> TIFF: I was tinkering around with it yesterday. But regardless, it's always slug. It's whatever

3621.39 -> is being passed in. And if you save that file and navigate back to -- perfect. There we

3629.859 -> go. Once again, you didn't need to refresh or anything. And now at the top, if you actually

3639.9 -> exit out of this and go to the dropdown at the top, you can see all our pages now.

3650.56 -> JASON: Oh, cool. That's slick.

3653.59 -> TIFF: Then the really cool thing is -- I know. I get really excited about it. I think it's

3664.2 -> pretty handy. Once again, if we go back to this example we were speaking about earlier

3673.309 -> with content editors or whomever coming in and oftentimes being like, hey, I need this

3679.89 -> new page created, this new blog post, whatever, yes, you can do that many different ways.

3686.29 -> But it's a one-stop shop, I think the saying is. It's one place where you can do everything.

3693.52 -> Also, you can see on the left-hand side that we now have enabled the pencil icon. Which

3700.661 -> was grayed out up until this point.

3703.46 -> JASON: Oh, cool. So now we get the actual page content.

3709.44 -> TIFF: Exactly. If you want to make changes to that title, for example, welcome to Acme

3717.849 -> Corp.

3718.849 -> JASON: Now we're able to kind of live update the thing.

3728.039 -> TIFF: Exactly. Exactly. So that's really cool. Then another thing, too, I want to highlight

3734.599 -> -- I actually want to highlight a few things here. If you scroll down, you can see the

3742.17 -> different sections where you can literally rearrange the sections here as well. You can

3748.76 -> also add sections and whatnot, which we can cover in a bit here. But yeah, move some around.

3759.48 -> JASON: So this is super handy. You can dive right in here and cause all the changes you

3768.28 -> want to get made to get made. And I think what's really interesting and something important

3773.619 -> to call out here is, like, I have -- Contentful is not aware that Stackbit exists. And Next.js

3782.869 -> is not aware that Stackbit exists. So we've basically added this layer on top. We haven't

3789.14 -> modified our code, and we haven't modified our data model. We just made it easier for

3793.059 -> the things to work together, which is way different from the experiences I've had with

3798.559 -> other kind of visual editors.

3801.41 -> TIFF: Exactly. And the thing is right now, you know, I know we're working through this,

3809.099 -> and it takes some time to work through, but I want to remind people what we have literally

3814.36 -> done. I'm not trying to sound like a broken record. We've installed the CLI. We created

3824.089 -> a config file, which the config file is in our doc. So you essentially can copy the structure

3832.51 -> of it and modify it. What else have we done? We added in the model

3838.31 -> extensions. And that's kind of it, to allow for all of this flexibility now to occur.

3843.64 -> JASON: Yeah. That's pretty slick.

3845.849 -> TIFF: But it's pretty cool. Yeah, so if you go back for a second here to the site, as

3856.329 -> we kind of spoke about before, you can now edit content from the pencil icon or create

3861.4 -> new pages, but I want to take it one step further. This kind of depends on how flexible

3868.059 -> you want your visual editor to be. Once again, it's something that's very powerful about

3874.73 -> Stackbit. We're not here to tell you what to do. If Stackbit stops existing tomorrow,

3881.67 -> your site is not affected. Obviously you don't have the visual editor aspect anymore, but

3885.589 -> it's still running in production. Nothing is affected, which is really cool, in my opinion.

3892.97 -> But one thing that I keep mentioning is I'm a visual learner and I like to be visual.

3897.68 -> I want to talk about my favorite part, which is annotation. This is really cool. I'll tell

3903.23 -> kind of a little story here. A lot of times with content changes, say it's

3909 -> even copy -- so the last company I was at, actually, was at IBM. I was working on the

3914.71 -> consulting side for a very large airline. When you think big companies, you think the

3922.22 -> processes are -- well, sometimes you think they must be super advanced. Other time, they're

3928.04 -> very slow, right. A lot of times this copy would need to be

3931.41 -> changed. Like, simple copy. So say the "Welcome to Acme Corp". So the marketing team would

3941.859 -> write a ticket that this needs to be changed and whatnot. We want it longer. So then it's

3947.279 -> assigned to different developers. No matter how senior or junior you are, the work needs

3954.319 -> to get done. So you get it done. So you make these changes. Then you have to

3957.65 -> take screenshots. This is how it operates. We would take screenshots of the text and

3962.539 -> send them back to the design team and say, hey, do you like this and whatnot. Oftentimes,

3967.599 -> they'd be like, okay, we need to update the text to be longer or shorter based on how

3973.27 -> it looked visually. Obviously, it can be changed with CSS and whatnot. Sometimes they just

3977.039 -> wanted a quick fix. So this is a great way, which we're going

3980.529 -> to dive into, to be able to edit -- we call it editing on the glass, but edit in line.

3985.94 -> So if we go back to our code base here --

3987.48 -> JASON: Edit on the glass sounds like sci-fi.

3991.14 -> TIFF: I know. It sounds really, really high tech. And we're going to go -- let's make

3998.299 -> some changes into our heading. You can search up heading.tsx, please.

4006.56 -> JASON: I should get better at using the VS Code search.

4016.04 -> TIFF: Then from here, if we scroll down, this is our heading component. I'll show you in

4023.43 -> a second where it's used throughout the page. But while we're here, I want to talk about

4028.799 -> two different annotations that you can add to your elements. It doesn't affect your code

4037.4 -> or your workflow or anything like that in the sense of they're pretty short and simple.

4042.089 -> So the first one is called data SB object ID. We're going to add that on line 18 at

4049.65 -> the end. I don't know why, but I always like to add at the end, right after -- yes, ID.

4059.9 -> So data SB-object-ID. Then this is going to be two curly brackets.

4070.559 -> JASON: Double curlies?

4071.94 -> TIFF: No, sorry. I didn't see that there. Then props._ ID. I'll show you where this

4081.94 -> ID is coming from as well. Essentially, the object ID's job that we just added in here

4088.359 -> is to provide context for the record in Contentful that's being edited. So it is set to the value

4097.12 -> of the unique ID of the record in the content source. So it's once again -- you'll really

4102.41 -> get the idea when we go back into the site and we can inspect this. So save that for

4110.66 -> now. Then if you go inspect -- we can look at where

4116.66 -> it's coming from in Contentful too, but if we want to start here, we can go inspect.

4122.85 -> Then click on -- sorry, your screen is really small for me. It should be that one, yes.

4135.859 -> Or actually, go into -- there's a ton that use it in how it works.

4141.699 -> JASON: Okay. Here's a bunch of them. Oh, wait. Something is happening.

4154.489 -> TIFF: Correct, yeah.

4156.96 -> JASON: Everybody see that?

4158.811 -> TIFF: So you can see on these --

4159.811 -> JASON: Okay. So if I click this.

4166.25 -> TIFF: So you can think of it as -- you can make some changes there as well.

4179.449 -> JASON: Very slick.

4181.69 -> TIFF: Then open up Contentful, where the big C is, just to show you where this ID is coming

4192.23 -> from. Then you go info. You can see it right there, entry ID.

4201.179 -> JASON: So what we've done, just to recap -- go ahead.

4205.84 -> TIFF: No, no, no. Go ahead, Jason.

4210.74 -> JASON: So to recap, we have -- the first layer is that you tell Stackbit where your Contentful

4220 -> install is. With no other config, just telling it where Contentful is, it gives you your

4225.98 -> site in the main window with a little chrome around it that gives you the ability to look

4231.52 -> at your content model in Contentful right next to the site on your screen. That way,

4237.1 -> you can, you know, open up your content management and your code in one window, which is great.

4244.31 -> For an extra config, where you map your pages to the slugs, you then tell Stackbit where

4251.54 -> the pages are so you can navigate through the pages and create pages and all those things,

4256.33 -> which is great. Then one step further, you can add this data

4263.69 -> SB object ID and pass in the Contentful object ID, which is basically any one of these Contentful

4271.96 -> objects. You can pass in the entry ID. That allows us to then make it clickable in the

4278.25 -> UI. So this is very slick with how friendly that is to use. It's nice because, again,

4288.4 -> all of this is being done with, right now, exactly one change to our code, which is to

4294.94 -> give a reference as a data attribute, which is not going to change the code -- or change

4299.79 -> the behavior of the app, I should say. We add a data attribute, and then everything

4303.9 -> else is just a layer sitting on top that doesn't ship to production. It's not modifying our

4308.27 -> source code. It's not modifying our CMS. It's just a way to do a visual bridge between the

4313.1 -> two.

4314.34 -> TIFF: Exactly. Yes. Jason, you're so good at explaining. I don't want you to take my

4321.159 -> job. You do too good at explaining it. All right. So let's take this one step further.

4332.31 -> Right now, you know, we're telling Stackbit where the entire record of the content source

4340.19 -> is, right, the unique ID. So we can do this -- I want to show you one more thing here.

4348.25 -> If you go back into your code base in the same file, then we're going to use a very

4358.04 -> similar annotation, but we're going to go into the span on line 19. The first tag there.

4367.159 -> Perfect, right after class name. We're going to use something called field

4372 -> path. This is data SB field-path. And this is going to -- as you can see here, we're

4381.889 -> hinting passing in the body. So make it equal to body in a string.

4388.52 -> JASON: Okay.

4390.53 -> TIFF: Perfect. So what this is doing, the field path is the ID of the field. Or sometimes

4399.411 -> called the name in the content source. In this case, body. So if you go back in here

4404.159 -> now --

4405.159 -> JASON: I didn't need to refresh that, did I? So let me go to how it works. Now it shows

4412.79 -> me text.

4414.17 -> TIFF: Yes. And you can edit. Don't even click on the pencil.

4418.989 -> JASON: Okay. So I just come up here and click.

4425.47 -> TIFF: So now you can even close that side panel. Now your editors can see visually,

4435.97 -> even without the side panel, being able to use that. So let's change this, some text

4442.85 -> here. Then in our smaller component that we're playing around with, let's save this as a

4452.699 -> preset now. So hover over it again. Hover over the entire component. So including where

4463.43 -> it says depreciated.

4464.43 -> JASON: Oh, I see it.

4465.43 -> TIFF: Yeah, so let's do the heading. It would be visually better if it was a bigger component.

4472.889 -> But go save as preset.

4475.32 -> JASON: Okay.

4476.32 -> TIFF: And click there. Then we can give this a name. Just say Jason's heading or whatever

4480.85 -> you want to call it.

4482.84 -> JASON: Then we could create a category or something.

4489.429 -> TIFF: And save. So we just saved this preset. Sorry, we're going to have to go back into

4497.16 -> our code quickly here because I want to show you something cool. So go back to our code

4501.52 -> into the card grid.

4503.43 -> JASON: Card grid.

4505.06 -> TIFF: Yeah, card grid. Where is it there? Yeah. And on line six, let's do another data

4517.2 -> SB object ID. Pass in props._ ID again.

4522.63 -> JASON: Okay.

4525.01 -> TIFF: So now when we go back on the homepage -- sorry, I'm taking you arranged the block

4533.33 -> here.

4534.33 -> JASON: No all good. We're learning a lot here. Oh, I need to exit out of that. So let's go

4544.71 -> to the homepage.

4546.38 -> TIFF: All right. When we scroll down, now we have more -- because we just added that

4556.89 -> data SB object, if you click on the plus button, the top one there, if you hover over it. So

4565.729 -> right above developer guides.

4567.25 -> JASON: I can't. Oh, no. We need padding.

4571.97 -> TIFF: Maybe just click inside there for a sec. Sure. Then go create new.

4580.95 -> JASON: Oh, I had to click on it. I understand. I thought I had to hover. I clicked, and now

4585.35 -> I can do a thing.

4589.53 -> TIFF: Yeah, create new. Then we can see here the heading that we just saved there. So you

4597.23 -> can think, though, how this can become really interesting when you're saving larger components.

4602.47 -> Say you have a component that has an image and text in it that you want to reuse for

4607.639 -> a different blog post or different parts of your documentation, how this becomes so powerful

4614.38 -> so quickly.

4616.3 -> JASON: Yeah, it all just kind of happens very fast, right. And this is what I think is so

4626.659 -> cool about this. People are saying, yeah, but WordPress can do this, Sanity can do this.

4631.81 -> I think the important thing to note here is that it can, if you're using WordPress, if

4639.45 -> you're using Sanity. This would work -- like, we're using it with Contentful. We can use

4646.1 -> it with Sanity as well. We can use it with WordPress as well. So any structured data

4651.93 -> source. You can use it with your database with no CMS at all. Then one of your team

4659.469 -> put together a Figma API demo. So the thing that's nice here is that you

4663.93 -> could theoretically -- like, if you had a team where your marketing blog is run in WordPress,

4672.77 -> your marketing homepage is powered by Contentful or Sanity, and your docs are powered by Markdown,

4682.06 -> you could have the same visual editing experience across the whole site because you can plug

4687.679 -> in all three of those content sources. And that's pretty dang cool.

4692.15 -> TIFF: Exactly. Exactly. And going back to, you know, WordPress, I'm kind of repeating

4701.46 -> what you're saying, but you're locked into so many degrees with these platforms. As you're

4709.76 -> mentioning, you're not locked in with Stackbit. I don't know. Myself and any developer I speak

4716.75 -> to, that's a huge benefit. The freedom and flexibility it brings for you. I don't want

4722.03 -> to be locked in or tied to something that, as my company continues to grow and scale,

4726.62 -> I have to pay so much money to store all this content here. Going back to my example I mentioned

4732.139 -> earlier about breaking down the presentation and data layer.

4735.29 -> When you start thinking about it from a standpoint of scaling and scalability and how you can

4742.03 -> scale sites and working as your team grows and whatnot, it's a no-brainer for me.

4748.01 -> JASON: Mm-hmm. Yeah, and I think the conversation, too, is about who is really going to benefit

4755.54 -> from something like this. You know, I can imagine somebody saying, but isn't this like

4760.57 -> a lot of tooling. But the flip side is when I was at IBM, even when I was at Netlify,

4767.639 -> which is a much smaller company, we had lots of teams with lots of different needs, and

4772.77 -> they didn't want to use the same tools. So we saw a lot of -- there was a lot of issues

4779.179 -> of should we force the docs team to use Sanity because that's what the marketing team standardized

4788.53 -> on for Netlify.com. Should we try to force the DX team to write everything in this tool

4797.739 -> or that tool? And what we found was that each team was more productive using a different

4803.54 -> tool. Because we were a larger team, you know, it really matters. If you've got a team of

4808.23 -> ten people and they're 10% slower because of being forced to use Markdown when they're

4814.55 -> not GitHub experts, that's a significant amount of waste, of them spending all their time

4821.12 -> trying to -- that 10% loss is huge. Ten people with a 10% loss is a whole person

4827.469 -> whose salary is wasted on an average year. So it's very critical that you find ways to

4832.73 -> make people productive. So when you are making those trade-offs, finding tools that allow

4837.76 -> people to use the tools quickly -- and the other thing is if you've got people who don't

4843.29 -> want to use Markdown and they want a visual editor, if you put something like Stackbit

4849.75 -> on top of Markdown or if you have a DX team that doesn't want to log into Contentful but

4855.949 -> they're willing to use a visual editor because they're already using it for the docs or something,

4860.77 -> suddenly you're starting to bring teams together, and you're breaking down those barriers between

4865.12 -> how teams collaborate and whether or not they're willing to collaborate, whether or not they

4868.521 -> feel confident going in and making a suggested change, any of those things that -- it just

4874.03 -> starts to save time. So it's always a trade-off between, like,

4877.699 -> how much tooling are we going to add, how much re-education are we going to do, how

4882.38 -> hard are we willing to fight against people's natural preferences. Because ultimately, we're

4886.12 -> just trying to get people to work in a way that they want to work so they're enjoying

4891.489 -> it here. When people enjoy the work, they do more and better work. Also, how do we minimize

4896.85 -> the amount of time it takes for somebody to get these tasks done. Editing is not the value,

4902.08 -> right. Like, writing the content was the value. Putting it into the CMS should be as close

4906.79 -> to instantaneous as possible. If there's a lot of friction involved in that, you're going

4910.64 -> to end up with wasted time. You're going to end up with people who don't want to follow

4914.08 -> through to the last 10% because they don't want to wrestle the CMS to edit.

4919.69 -> All of that leads to waste, to slowdowns, to slower shipping. At that point, it's worth

4925.17 -> considering can we solve some of these problems with tooling. The answer is not always, but

4929.65 -> sometimes, especially when you've got, I would say, a composable setup where you have lots

4934.62 -> and lots of tools that different teams want to use, finding a good abstraction over all

4939.69 -> those tools can be a huge benefit for a team's productivity.

4944.73 -> TIFF: Exactly, exactly. And on that note, too, you know, if anyone is interested in

4954.04 -> playing around with the project that we worked on today, I don't know, I'm not a major Twitch

4960.29 -> user, but there's a command they can run to start using it. How is it best that I share

4965.58 -> that?

4966.58 -> JASON: To start using Stackbit?

4969.1 -> TIFF: This project, yeah. This specific project as well. They can run npx create Stackbit

4978.29 -> app, and it will essentially produce a fully annotated project.

4985.23 -> JASON: Npx create Stackbit, and what was the rest of it?

4991.94 -> TIFF: Space, dash, dash, example, space, documentation. Just in case anyone wants to play around with

5003.56 -> the project that already has all the bells and whistles in it so you can continue building

5009.68 -> on it and tinkering with it.

5011.16 -> JASON: I'm going to put this into my terminal as well, for anybody who's not looking at

5017.76 -> the Twitch chat. You can see that there. Okay. Well, that, I think -- and this is not as

5025.14 -> far as we can go with this, but it's as far as we have time to go today. So for folks

5030.43 -> who want to learn more, what would you recommend is the right next step for somebody who wants

5036.76 -> to dig in with Stackbit? I'm going to drop the site one more time.

5041.87 -> TIFF: Definitely go to our docs. In our docs, there's examples of how to get started. Then

5051.139 -> myself and a few other team members are always active in our Discord, which is linked at

5057.31 -> the bottom of the website as well. You can always -- oh, where is Discord? Maybe I spoke

5065.55 -> too soon. There we go. Yeah, so we're always in there as well. Even

5072.571 -> after this live, I'll be active in there if anyone has any further questions or wants

5078.42 -> to come say hi and learn more. But yeah, we're always building fun things and tinkering around.

5083.27 -> So come say hi.

5084.3 -> JASON: And then Joe from your team posted Stackbit themes. I'm going to repost that

5088.94 -> so it shows up in the show notes. Lots of good stuff there to get you started.

5093.78 -> And Tiff, I'm going to send everybody to your website, which has links to all your different

5099.369 -> social media platforms. Everybody, make sure you go and follow Tiff. And with that, I am

5105.949 -> going to give one more shout out to our captioning. We've got Rachel from White Coat Captioning

5111.75 -> here today. Thank you so much for being here. It means a lot to me. That is made possible

5116 -> through the support of our sponsors, Netlify, Nx, New Relic, Pluralsight, all kicking in

5121.3 -> to make this show more accessible to more people.

5123.19 -> While you're checking out things on the site, make sure you go and look at the schedule

5126.61 -> because we've got a great schedule coming up. Next week is going to be New Relic observability

5133.429 -> week. So New Relic is a sponsor of the show. We're working together on four straight days

5137.25 -> of streams to go into all the reasons that you will benefit from and why it's maybe worth

5143.32 -> finally learning what the heck observability means if you're working on the web. So that's

5147.53 -> going to be a whole lot of fun. Then we have a whole bunch of fun stuff coming

5151.09 -> up after that. We're going to have Aryan on, talk about how we can share state between

5155.34 -> frameworks. That's going to be really fun. A nerdy deep dive. Kevin is going to show

5159.909 -> us how to build a mobile app using Retool. So even if you don't know how to write mobile

5164.85 -> code, you can build an internal mobile app. We're going to be scanning bar codes with

5169.57 -> phones and things. It sounds wild. I'm excited to see how it all works.

5174.11 -> Yeah, it's going to be great. So make sure you mark your calendar, subscribe on Twitch,

5178.449 -> Twitter, all those places. Tiff, thank you so much for spending time with us today. Any

5183.531 -> parting words for the chat?

5186.15 -> TIFF: No. Thank you so much. I'll try going on camera for a sec here and see if it doesn't

5192.8 -> freeze for a hot sec. Thank you. It's been a pleasure. And I'm looking forward to seeing

5199.04 -> your other ones. I love watching your stream. So thanks for having me on it.

5202.57 -> JASON: Yeah, thanks so much for being here. All right, chat. As always, thanks for hanging

5206.78 -> out with us today. We will see you all next time. Bye.

Source: https://www.youtube.com/watch?v=d0sqRSX5tQ0