JASON: Hello, everyone, and welcome to another
episode of Learn With Jason. Today on the show we've got Facundo. How you doing? FACUNDO: Hey, how are you, Jason? Everything cool here. JASON: Doing great. Excited to have you on the show. We're tackling something pretty challenging
today, but before we dive into what that is, let's talk a little bit about you. You want to give everybody a bit of an overview
of who you are, what you do, all those good things? FACUNDO: Sure, of course. Well, hello, everyone. My name is Facundo Giuliani. I'm from Argentina. I'm a developer relations engineer at Storyblok. It's a content management system that we'll
use today. So we'll go deeper into that later during
the session. But yeah, developer relations engineer during
these last couple of years. I was involved in the community, creating
content, sharing content with the community, speaking at events, virtual events, now in
person that they are coming back. I had the chance to meet Jason in person in
Atlanta last June. But yeah, before that, I spent several years
of my life, I would say 12, 15, I really don't remember, being a developer with different
technologies, front-end technologies, back-end technologies. A lot of things that brought me to this place. I'm not only developing and creating products,
web projects, applications, but also talking about them or seeing the content that we can
create to share with the people. So yeah, super excited to be here. JASON: Absolutely, yeah. So we are talking today about personalization. So personalization is one of those things
that we hear thrown around a lot, but I don't even know if I know exactly what it means. So for folks who aren't familiar with the
term, what do we mean when we say something like personalization? FACUNDO: So, from my point of view, I would
say that when we talk about personalization, we are talking about offering different experiences
to the people, depending on certain aspects. I mean, not necessarily speaking about web
development or web projects, right. I mean, in general. In life, you also get personalized experiences,
let's say. If you go to a shopping mall, for instance,
and you go to search in store because you want to buy some T-shirts, and you enter by
yourself to the shop, you will have the people working at the shop that probably will see
you and see that you are looking for a particular T-shirt. You go, you buy it, and you go out. I mean, you pay, of course. But if they see that, I don't know, a family
enters with a couple of children, let's say, and they start talking about that or they
start seeing the different products that they are selling, probably the seller, I mean the
employees from the shop, they will come to the family, offer support, asking about what
they are looking for. So the question is what's the difference between
a person that goes straight to the T-shirt that they want to buy and the family that
is taking a look there. Well, this difference in the treatment, let's
say, of the employees of the shop, we are talking about personalized experiences. JASON: Right. FACUNDO: I mean, that's -- I don't know -- an
analogy I like. Another analogy that I like. If you live in a big city, you can see that. Probably if you live in a small town, you
see it more frequently. If you go always to the same coffee shop to
always get the breakfast or always read the newspaper while you are drinking coffee in
the morning, okay, you go once, you go twice, you go another time, another time, et cetera. After ten times, I mean, probably the waiter
or the waitress that is working at the coffee shop, they will say, hey, Jason, how are you? Same as always? The difference if you go for the first time,
you know. So again, personalization. Like differentiating the users or the customers
by different aspects and offering them different experiences based on that, right. JASON: Right, yeah. I think you bring up something that I think
is important. I feel like a lot of times when we start thinking
about customized web experiences, because of all the different ways that they get abused,
it can feel like, I don't know if I'm comfortable with that. I don't want to track my users. I don't want to do this or that. That's such a bummer because I love that experience
of walking into my local coffee shop and they know my order. It just makes me feel like I'm in a place
that's mine. And that feeling of personalization, that
this is a place where I am a regular, and it's a place I choose to be, and I want it
to feel tailored to me, simply by my usage. That feels really, really good. So when we talk about personalization, there's
definitely a way to make it evil. We've learned every good innovation will eventually
be used for evil. That's really a bummer, but it doesn't necessarily
mean we should never use these innovations. So today, I want to focus on the good uses,
which are how do we get a website to think about our what is my usual. I'm coming to your website. How do you make me feel like I've been here
before? Like the experience is tailored for me specifically. So I guess maybe that's a good question for
you. How do you do that on the web? How do you make me feel like I'm seeing the
same person behind the counter who remembers my order? FACUNDO: Yeah, that's a good point. Based on different aspects of the person browsing
the website, if you're talking about a web project, for instance. But I mean, going more in generic terms, let's
say, you can see, for instance, the location of where the person is browsing your website. To give you an example, I see you're now in
a T-shirt because you're in the United States and it's summer. Down here in Argentina, we're in winter. So for example, offering personalized content
is like if I enter to a website and see a sign that says enjoy the summer, it's like,
okay, I have to wait like six months to do that. So getting the location of the person that
is visiting gives you that possibility. Another cool thing is, for instance, showing
the weather to the person that enters into your website. You can show the specific weather for the
city where that person lives. Speaking about this, you go in every day to
the same coffee shop. In a certain way, you need to keep track of
what that person is browsing, right. I mean, what's the preferences of that user
when browsing your website. Which pages the users are visiting, which
products they are buying, probably. Talking about a more familiar case, these
e-commerce platforms. I won't name them. But you go, and you start to get suggestions
about previous purchases. So it's like -- I mean, you can keep track
of certain things depending on how you implement your project, depending on how you build your
project. You will have certain ways or other ways,
depending on how you prefer to use that information and how you track that information will depend
on that. JASON: Right. Yeah, and it really opens up a fun dev problem
if you think about how do I make a website useful based on somebody's behavior. There are little signals we get. Okay. So I show up to a website for the first time. I've never used it before. You're going to give me a set of defaults. Now, without me ever having visited that before,
if we're able to figure out what country I'm in, you've already mentioned a great option,
which is okay, I'm coming from a country that's currently in summer. So show me a summer scene. Or if I ran an e-commerce site that sold rain
jackets, you could just build a personalization that's like, hey, the current weather in your
area is rainy. So I'm going to say, hey, it's raining outside. You want 20% off a rain jacket? Little things like that make it feel smart. And that's before you ever even know this
person. Then as they do things, if they log in and
give you information like I'm a business owner, I buy wholesale, I'm shopping for a gift,
whatever it is. Each of those things is a detail that if I
was in person, I would change the way I was talking to you because now I know more about
what you're interested in. FACUNDO: Exactly. JASON: I think about the fact that when I
was -- when I used to run my agency. The first question you would ask anybody who
called about a project is what are you looking to accomplish. Then they would start telling you about their
business. They would tell you about what their problem
is and what numbers they're trying to change. You start to get this bigger picture. The next sentence out of my mouth was never
the same sentence twice. It was always like, okay, based on what you
said here, here, and here, I think we should focus on this. Here's an area that I want to dig into. And it would personalize what I'm trying to
offer them to the problem they're trying to solve. We can do that through a conversation, and
the conversation can be interactions on the website. You can make that really heavy handed. Like when you sign up to a new product and
they're like, how many employees are in your business, what's your primary use case, and
you have to check all these bocks as part of onboarding. But there's also just like, I clicked on the
men's clothing. That's a point in the direction of men's clothing
as being my primary interest. So you know, maybe just bubble those items
to the top of the list. Then if I then go and click on women's clothing
twice, now I have two points for women's and one points for men's. So we'll just bubble women's up now. We can do it behaviorally without having to
track anything or ask for any data. That stuff is fascinating. FACUNDO: Yeah, sure, sure. In fact, you mentioned something that is very
important or for me is good to mention. Personalization is not about -- I mean, when
you talk about how intrusive you are or watching your steps. On the other hand, what you can do is explicitly
get those details. Okay, where do you live? As you said, how many employees does your
organization have? You can ask for the details. If I'm asking you the details and you're answering
them, we agree that information, you are able to share that with me. Now that I have this information, I can do
certain things about that. JASON: Yeah, absolutely love that stuff. It's such a -- I don't know. It feels like it's one of those things that
feels out of reach. Actually, that's a good dovetail into talking
about the tech here. In my logical mind, I understand this is valuable. I know that if I've got somebody coming who
is shopping at a store that I own, they are more interested in some items than others,
assuming I have a store with categories of products. I know that if somebody who likes hats sees
hats, they're more likely to buy something than if I showed them soap. But like, how? What is the technical underpinning of this? What are you using to make this happen? FACUNDO: Well, I mean, that would depend on
how you want to set up your project or which tools you want to use, let's say. For instance, going to a simple way of keeping
track of these kind of things or details, you can create cookies when a person is visiting
your website. In those cookies, you can store the information
related to them. You don't need a database for that. You don't need a platform to keep track of
all the visitors. On the other hand, you don't need the user
to create an account, for instance, to keep track of this information. You just create a cookie. I would say 100% of the websites do, but not
100. Let's say 95% of the websites do, like keeping
track of searching parameters. Based on that, you can show content or do
some thing and not the other. JASON: Yeah, cookies are pretty common for
all sorts of things, not just personalization. So the likelihood that somebody is going to
be okay with a cookie is pretty high. That's why we all have to check those accept
cookies banners on every single website we visit. And again, there's always a spectrum here. You can use any of this stuff for evil, but
the vast majority of use cases are pretty good here. We can make your experience better if we just
keep track of these little details that aren't personally identifying. I think that's a big, important point. We're not building a user graph or anything. We're just literally saying, oh, you clicked
on this. That's you showing interest. So let's focus on that a little bit. Then if you click on two other things, oh,
those are now part of your interests as well. So our ability to make suggestions just based
on behavior gets really good. And if you sign in and if you have a purchase
history, we can make better recommendations, but we don't have to do that. So let's talk a little bit about use cases
that aren't e-commerce. I feel like this has a broader scope than
just help me buy the products I want. How else have you seen personalization used
around the space? FACUNDO: Sure. Well, I mean, an example that's probably more
familiar if you're also -- let's put an example. Twitter. The tweets that you see when you open the
application or the website, you will see first probably the accounts that you are more familiar
with or that you interact more with, you know. Or speaking about news portals, for instance,
if you go -- I mean, if you always go to the same news portal and you read certain types
of news or related to a certain category or topic, let's say, if I show you -- I mean,
if I always enter the same news portal just to read about sports, I want to see the last
match results, let's say, and I don't read any news about politics, for instance. It's not that I'm not interested in politics,
but I'm more interested in reading things related to sports. So I would prefer that when I enter to the
website, instead of seeing the first articles related to politics, it will be more interesting
to me that I see the first articles related to sports or how was the NBA yesterday, right. Those are other examples that I think are
not e-commerce or actually e-commerce. JASON: Yeah, no, I think that's a good point. And I'm even thinking about, like, just general
usage around, you know, a dashboard or something. If I go into a dashboard and switch it to
dark mode, then remember that across other parts of your app. If you have an account dashboard over here
and another site that's docs, carry that over. I've chosen that. I've shown you as a company this is a thing
I like. Or a code company who -- like Netlify, for
example. We have code samples in JavaScript, TypeScript,
Go, a few other languages. So what if we just remembered that you always
choose TypeScript, and we'll default to TypeScript instead of making you choose that from the
dropdown every time. That happens across everything. There's just these little things you can do
that just make the experience so much better. FACUNDO: Yeah, sure. JASON: I think this is one of the reasons
people love the stripe docs. When you go to the stripe docs, their code
samples don't have that insert API key here. If you're logged in, they just put your API
key in there. FACUNDO: There you go. JASON: Like Airbase does this really well
too. Airbase doesn't give you generic docs, they
give you special docs for your table generated from the schema of your table. You go in, copy/paste it, and it literally
works. You don't have to copy/paste your code in
or switch out a key or adjust it for your particular data schema. It's just there. Oh, you want all the entries from this row? Copy/paste this thing, and it'll work in your
app. That's such a nice setup compared to some
of the ways that we just get used to manually personalizing things. We get a code sample or a copy/pastable, like,
ready-made message. We always have to go do little edits and change
out, oh, I got to replace the first name here with your first name and replace the your
name here with my name. All these different little things. They're not hard, but it's just these little
taxes that you pay as somebody who's not using a personalized experience. And we can always feel that polish when we
go into a website that does the extra work to solve that problem for you. FACUNDO: Yeah. JASON: So I feel like as people are watching
this, I want to make sure people don't get themselves into this mode of this is only
useful if I work on e-commerce. No, this is useful everywhere. FACUNDO: Yeah, sure, sure. JASON: This is the secret sauce, right? FACUNDO: And again, it's not that you can't
do that. It's not that you are not able to grab a piece
of code and add your personal details. But even better, right. And that's what you want to do when you are
creating a product. Not only selling products in an e-commerce
platform. You want the people using your product to
feel happy and to choose your product because they enjoy using it or doing it, right. The same example, it's not that if you go
to the same coffee shop over and over again, you can't open the menu and say, okay, I want
this flat white with this piece of cake, you know. If you enter and they say, hey, Jason, how
are you? Do you want a flat white with this piece of
cake, and you're like, okay. This is my place. I'm feeling happy because of this. So it's like, again, providing value or satisfying
the needs of the people. I mean, going to an extreme point of view,
but when you have a lot of offer in the market or in all the aspects, when you have different
options or different alternatives to a certain product or a certain way of doing the things,
those little details are the ones that are going to make a difference compared to other
platforms. I'm not saying that you will stop going to
that coffee shop if they don't call you by your name. But if in the same block you have five coffee
shops and enter into one that says, hey, Jason, how are you? Do you want the same flat white you took yesterday? It's a difference. JASON: Yeah, it's definitely a differentiator. In my own behavior, I know that I will definitely
select the shop that makes me feel like a regular. And sometimes that means going to the place
I actually don't even think is like the best particular -- like, I might like the coffee
better at one place, but they clearly don't remember who I am. They're pretty standoffish and think they're
pretty cool, so they don't want to acknowledge I'm in there all the time. But then the next coffee shop over is pretty
good, not great. And it's just one of those like -- yeah, I'll
take the slightly worse coffee if they remember my name, treat me well, they make me feel
welcome. I love that. FACUNDO: Exactly. JASON: This is such a maybe underrated thing
on the internet. People think of the internet as being like
a brochure. I have created a thing, and I'm going to set
this out in front of the world. Anybody who wants to can read it, but it's
one thing. We really sell ourselves short when we think
about websites or web experiences as brochures like that. Because what we really have the opportunity
to do is make our website into a caring guide that is actually seeing somebody coming and
saying, hey, I have something that might be of value of you. With a couple of pieces of information, I
can swap what I'm talking about and make it relevant to your interests, not like a megaphone
that's just blasting an ad that's really generic. And it's such a big difference from a billboard
to somebody who will kind of say, hey, you look like you're interested in -- like it's
a billboard for a piece of clothing as opposed to being in the store where that salesman
will talk to you about why that piece of clothing is special and how it will work for you specifically. It's subtle, and it makes such a huge difference. FACUNDO: Yes, yes. For sure. I agree. Completely agree. JASON: Okay. So this is probably a good opportunity to
switch over and do a little bit of actual coding. So let me switch us over into the pair programming
view here. And I'm going to bring over this window. All right. So today we are doing live captioning, like
we always do. Thank you to White Coat Captioning. We have Rachel with us today. Thank you, Rachel. That's made possible through the support of
our sponsors. Netlify, Nx, and New Relic, added on the show. So, thank you so much to all the sponsors. And if your company is sponsoring, I got one
more slot. Hit me up, y'all. We're talking to Facundo, who's on the tweeter. I'm going to have to actually search your
name because I always get it wrong. FACUNDO: Yeah, I have the -- that's me. Yes. JASON: (Laughter) all right. Let me drop this in the chat. And if you want to follow along with the live
captioning, that's on the home page, learnwithjason.dev, as always. And we're going to be doing personalization
with Storyblok today. So let me drop the link to Storyblok. And that is the extent of my knowledge. So what should I do first? FACUNDO: Nice. Cool. So as I mentioned before, Storyblok is a headless
content management system that you can use to, well, actually create content and manage
that content in the projects that you are going to create without using a particular
presentation layer or front-end layer. So you can -- the same content you create
once, you can use it in different channels like mobile application, web applications,
et cetera. Besides that, you can select the technology
that you want to use because you are going to connect to a particular API and bring and
consume the content from that API. So again, it's technology agnostic. You can use the technology that you want. The cool thing about Storyblok, or two cool
factors that Storyblok offers, two capabilities, let's say, is that Storyblok offers a real-time
visual editor. So if you're working on a web project, for
instance, you've seen the front end of the application you're creating. I mean, the actual code of the front end of
your application. You can offer that to the people working with
the platform a real-time visual editor where they can see how the content they are creating
is going to look. So if we are developers, this probably sounds
like a cool thing, but it's not a big feature as it is for content editors. Because the content editors, they don't want
to ask to the developers to generate a preview. It's always an added value to see the content
you are creating and how it's going to look like based on the logic of the front end that
you are using. Again, as we mentioned before about personalization
and the differentiations, it's like it's probably a friendly user interface for you, having
a visual editor where you can see the content they are creating and how it's shaped instead
of having a form where you are filling details or the different fields of different properties
of different field types. Then you have to somehow generate the preview
for that. So I would say that one of the cool features
of Storyblok is this real-time visual editor. The other cool feature that Storyblok offers
is that it organizes the content using a component approach. So you can create component structures inside
a headless content management system, and you can manage those components in the same
way you use a front-end framework or front-end technology that follows a component approach. For instance, React. So you can create component types or block
types, as we call them in Storyblok, that you can reuse in different parts of your project
and page. You don't need to re-define the same content
structure over and over again, right. So you can use that same component type you
created in different parts of your page. You can use them inside other components. So you can create a nested architecture of
components. Basically, the idea is that you can organize
the content with these reusable components. But on the other hand, you can link these
component structures that you are creating in the content management system with the
components you're using in the front end of your application. So you can create a component called "call
to action," for instance, and you can link that call to action component in the content
management system with a visual representation of the component, which is probably a React
component. So you will know that all the code that you
are going to use in the content that you create, you are defining the same logic or the same
presentation for them using React components, for instance. JASON: Okay. Great. And I see Ben just showed up and subed 23
months. Thank you, Ben. You're almost two years old on the Learn With
Jason channel. That's very exciting. I see coding cat gifting subs. Anthony, welcome to the boop crew. Spam the heck out of those emojis. Stefan, I see you in the chat. Lots of familiar faces out there. What up, everybody? It also looks like we're close to a hype train. If anybody is feeling gifty, today is the
day, y'all. So yeah, let's do it. Let's go ahead and actually start coding,
right. So is my first step here -- I think I already
have a Storyblok account because I did an episode with Samuel back in the day. So let me see if I still have this. Oh, no. Are you going to let me in? I do have a Storyblok account. No! FACUNDO: Oh, almost. JASON: Confirm your email address. Okay. So resend my confirmation email. Apparently did not ever confirm my email. But that's okay. So I'm going to open up my email in the other
window here, find my -- here's my confirmation instructions. Copy this link. Come over here. Do one of these. Okay. Now I got to log in and try that one more
time. Hey! FACUNDO: There we go. Awesome. Awesome. JASON: Okay. So we're going to do personalization. If I can spell it. There. So I've now created a new space. What do I do from here? FACUNDO: Okay. So we have only one story. That's how we call the items in Storyblok,
the content items. Then you have a list of -- let's do this. Do you want to be part of an experiment? Do you want to see something new, something
cool? JASON: I -- yes. FACUNDO: Okay. No, no, no. Don't be scared. I'm asking because the Storyblok product team
is working on version two of Storyblok, of the application. JASON: Okay. FACUNDO: And we are releasing it in August
-- the 2nd of August. And there's a public beta. So we can switch to version two and play with
it. I'm saying an experiment because if you find
any issue while using it, it will be very welcome feedback. But I hope it doesn't appear we have a bug
and everything works smoothly. But we are -- yeah, I mean, the idea is that
we lease version two of Storyblok. We're announcing it the first days of August. So it's pretty soon. We can use the new interface of the application,
right. The new user experience. So cool. Now we are in the same space with the new
options, let's say. In the content menu, we can see the different
stories or the different content items. These content items are organized in folders,
like the file system of your computer. This story, in this particular case, is the
home story, which is like the homepage of your website. When you open it, you can see that this pre-generated
page has a teaser on the right side. Those are the components. On the left-hand side, we have the real-time
visual editor I was mentioning before. You can see on the top of the page that there's
a URL there. That URL is pointing to where the front end
of our website is living. I mean, if we're hosting an instance of the
front end of our application, there's where you can point it. The visual editor is basically an I-frame. So you can browse any page there, even your
local host. So if we are going to work on your local host
creating the project, you can see that inside there. Configuring this preview URL, you can point
to the local host of your computer. If not, if you have deployed your project,
you can use it too. I mean, if you are deploying to Netlify, for
instance, and you have your production environment, it even is cool that you can set different
preview URLs in the case that you want to verify that the content is looking good in
the different environments that you are managing. You can add more than one preview URL. So you can test the different environments
of your application. JASON: Nice, nice, nice. FACUNDO: Basically, what we have here now,
I mean, if you don't pay attention to the visual editor because you didn't configure
any front end or you didn't connect to any application, what you see on the right-hand
side is very similar to what we have in other content management systems. It's basically the content that we want to
create, organized in components. You can see the teaser component, the grid
component. As you can see, the grid component has other
components inside of them, which are features. These are the default components, the default
blocks we have in our space. The idea is that we can extend the behavior
of these spaces or create new structures in the block library that we have in Storyblok
that you can access from the inside of this page if you go to the white bar that is at
the top. If you go to the fourth item, counting from
the left, if you click there, you will see all the available blocks. I think you can drag and drop that to see
that. Ah, there we go. Awesome. So what you can see there, we have four block
types. The feature, the grid, the page, and the teaser. The page itself is also a block type. They can be of different types. You have the content type, which is something
you use to define the template for the story or the page, let's say. Then we have the nest of components, which
are the ones you're going to use inside these pages. JASON: Gotcha. So if we want to set something up so we can
start doing personalization, what's the right way to go there? FACUNDO: So, I mean, probably we can have
a homepage where you display certain content based on certain criteria for a user. So a simple example that we could follow,
beginning with this space, the blank space, is having a teaser. We can show that teaser to a certain user. Let's say a message that says, for instance,
if you are in summer, it says, hello, summer. If you are in winter, grab some tea, or something
like that. I don't know. So there are different approaches that we
can implement in the headless content management system. As we said, you are consuming the content
from an API and displaying it in the front end of your application based on the logic
that you're using in your front end. So what we could do, for instance, is create
two teasers in the page, one for the winter and one for the summer. And then in the code of the front end of your
application, you can displace one or the other based on certain logic of the code of your
application, right, or based on the visitor of your website. JASON: Got it, got it. So I've got my two teasers. Currently winter, currently summer. So I've created two blocks. Then we have this grid. So if I save this, okay, now we're saved. I haven't published yet. How would we pull this locally so we can start
building it? FACUNDO: Cool. So we can start a project using -- what technology
do you prefer to use? JASON: I know React the best, so I'd probably
be fastest with that. FACUNDO: Cool, perfect. So we can create a new React project, and
I'll share with you a couple URLs we can follow. But in the developer relations team at Storyblok,
we are creating SDKs to make the work easier for the developers to work with Storyblok
and to integrate Storyblok into their projects. These SDKs, we are creating them for different
technologies, for different frameworks. One of them is the React SDK that you can
use. So following a list of simple steps, let's
say, you will be able to connect to your space, bring the content, display that content. And the cool thing about the visual editor
is we will be able to mark these components as editable, which means you are able to click
on the components in the visual editor and actually edit them inside Storyblok. Because it's not only a preview, but you are
modifying the values of the properties. You can also interact with the page itself,
like click in the different components and edit them. JASON: Gotcha. So can I use just like Vite? FACUNDO: Yes, yes. JASON: Okay. I'm going to create a new project. We'll put this in personalization Storyblok. I'm going to make it React. I'm not going to do TypeScript today because
nobody wants to watch that. Then we'll npm install. And I don't know if we're going to end up
using any serverless functions. It sees we're using Vite. I must have something else running somewhere
too. Something weird is going on. Rather than me trying to figure out what's
going on, I'm going to use npm run dev. I think I might have done something with another
app running. Okay. So here's our count. So this is the app. We're running. Everything is good. If I go in here, I can open this. And we can see here we've got our app. So I'll run it again. And then I can move this one to this side
and this one to this side. Make them both a little bit shorter so they
don't show off the bottom of the screen. Then I will close this out. And let's just make a little -- so we've got
a live reloading app up and running. FACUNDO: Awesome. JASON: Great news. I'm very excited about that. So you said there is something I can install
to just pull Storyblok in for me. FACUNDO: Yes. It's an npm package that is called @Storyblok/react. JASON: Like that? FACUNDO: Yes, yes. JASON: Okay. Here we go. FACUNDO: Oh. JASON: What have I done? Unable to resolve dependency tree. Am I missing things? Oh, does it not like React 18? FACUNDO: Oh, yeah. We can use -- JASON: Let me just do the legacy peer deps,
and it'll be fine. It likes to yell, but it'll be okay. Now we're okay. FACUNDO: Cool. Another thing that we may need to install,
this is temporary, but React is using an API client that the product team from Storyblok
created in the past. We are using Axios to do the API calls. So probably you'll need to install Axios. I know removing access to all SDKs is coming,
but just to be sure we have Axios. Cool. That's all we need to install from the Storyblok
point of view, let's say. So what we need to do now is to initialize
a connection between our project and the Storyblok space. Where your project is living. So in that case, what we'll need to do is
to go to -- I will share that in the chat. This is something we need to format. But if you go to your index file in the React
project, there's a function that is included in the npm package that is called Storyblok
init. So if you import Storyblok init -- JASON: At the full app level like this? FACUNDO: I mean, before creating the app level. It's something that you will execute once,
and it will be used during the project. So you can do that in line five, for instance. And that should make the magic. JASON: And it was import from Storyblok -- what
was the import? FACUNDO: Storyblok init. JASON: Just like that? Oh, here. FACUNDO: No, with Storyblok. Cool. And that function receives some parameters. Well, it receives a JSON object with a list
of parameters. Exactly. The first someone the access token. You need to go to your space. You go to the settings menu. Then you go to the top of the page because
there's an option that says visual editor. Oh, no, access token. Sorry. Then you have the access token. No, if you go below that, there it says token. That's the one we can use. Preview means you are working on a testing
environment. You can create a token for the production
environment, right. Cool. We have the access token there. There's another thing you need to import from
the Storyblok React package, which is called the API plug-in. When you are importing the Storyblok init
function from the Storyblok package, there's another component called the API plug-in. We're going to use that API plug-in to actually
code Storyblok API to bring the content. So if you want to use this plug-in, you have
to actually in the Storyblok init function, another property of this JSON object, it's
called use. You can put use, and then you send the API
plug-in. Between brackets because it's a module. JASON: Because it's an array. Got you. Okay. FACUNDO: And then the other property that
we need to send, which you are filling correctly, is the component list. What is the component list? What we are going to do with these components
is create the list of React components that are going to link with the blocks in Storyblok,
and we will tell -- I mean, this is kind of tricky. The idea is that we can give the possibility
to the code of our application to render the content, no matter which type of block we
are using in the body of the page. So if we have a dynamic body in our page in
Storyblok, we have to give the possibility to the front-end editor to dynamically render
the content, no matter which block type we are using. Because if you are using a homepage and I
want to link the -- what were the names of the blocks we are using? We have a teaser, we have a featurer. JASON: Yeah, yeah, yeah. So we need to get -- FACUNDO: Exactly. JASON: Teaser, grid, feature. Those are the ones we're using. FACUNDO: And page. And page. Because it's the template of the page we are
using. I mean, the thing is, if we don't use a certain
dynamic feature of rendering the content, you will be forced to manually define the
structure of your page with the components you want to use in your page. I have to create a homepage with a page component,
with a teaser component, with a grid component, and that doesn't give you the flexibility
of doing that or doesn't give you the flexibility of doing it from the inside of the visual
editor. So the idea is these components will be an
array of linking. The name of the component in the Storyblok
headless CMS and the actual instance of the React component, right. Sorry. It's like a list. Yes, exactly. So what you will have there is a list of -- exactly. You'll receive page from the Storyblok API. Then you'll say you will render a React page
component. So you'll need a component called page in
this case. And you'll need to include that here. Which components do we need to include in
this property? The ones we want automatically rendered based
on what's coming from the Storyblok and the ones we want to be able to edit them in inside
the visual editor. Exactly. JASON: So I'm just going to get these mocked
up so we kind of see what's happening here. FACUNDO: Yeah, sure. JASON: So I have page. Then we'll do another one for teaser. This one needs to be capitalized. Then we need another one for grid and another
one for feature. Okay. Now, this isn't actually going to work because
each of these is kind of not functional. It's not actually accepting anything, which
means it's going to stop at the page component because nothing ever gets down to these, if
I'm understanding correctly. But it should at least give us a page component,
right? FACUNDO: Yes, yes. Sure. I mean, you will need to -- you will see what
happens. But in the first test, we will see only the
page component because all the other components are inside of the page, and we'll need some
way of telling that inside the page we can have other components and that we can have
a list to our components. Cool. So this is all the configuration we actually
need to connect Storyblok with our application. What we need now is a way of bringing the
component -- sorry, bringing the content from Storyblok and rendering it based on this logic. So to do that, we can go to the application
file, the one that you're going to. JASON: How do I actually get this -- so I
did this init. Do I have to pass this into the app somehow? FACUNDO: No. What it's doing is running a certain list
of functions that will initialize the content between your project -- I mean, what you are
seeing there is basically initializing some parameters and bringing the API client that
will be used inside the code of your project. We need a couple of functions to be called
in the code of your page or your components to actually call the API to actually bring
the content, et cetera. So this is like an initialization of certain
parameters based on your application and the parameters that you will use to connect to
Storyblok. JASON: Gotcha. Okay. So if I come in here -- actually, let's start
the server. We can come out here and look at this. Now, if I go in here, what I'm going to want
to do is just get this out of here, and we'll do one of these. All right. FACUNDO: Amazing. JASON: And now I don't need this. And I don't need any of that. So now we're looking at a pretty bare-bones,
simple little app. And I want to bring in my Storyblok stuff. So we initialized it in main. Now I want to actually use it. FACUNDO: Exactly. So to do that, we need two features coming
from this same React SDK. The first one you're going to import is a
function that we call use Storyblok. JASON: Okay. FACUNDO: That one. And now that you are there, we are going to
import a component that's called Storyblok component. Yes, that one. Exactly. JASON: This is not helping. I'm going to move that over. Okay. FACUNDO: Basically, the use of Storyblok function
is going to call the API to bring a certain story or the content related to a certain
story and initialize the connection between that story and the content we are editing
inside the visual editor. So whenever you change something in the visual
editor, it will be reflected in the instance of your website or the website you are running. So what you are going to need to do -- I mean,
what you will need to do there when loading a page is actually bring in the story that
you want to display. In our case, it's the home story. So you send the use Storyblok, and that function
receives different parameters. The first one is the page you want to show,
which in our case is the home. Then you can send API options that are going
to be used in the case that you want to load certain information or another feature or
if you want to show the draft version or the published version of your story in a way to
differentiate the draft version and the published version to talk about the version of the content
that your end users are visiting and the version of the content that you are editing, which
is the draft version. If you send the parameter version and send
the string draft, what you are going to bring is always the draft version of your story. So that function will bring you a story object,
which is a JSON object, with all the properties that represent the different values and the
different properties of your story with all the components inside of them. So that will make it work. On the other hand, what we need to do is actually
render the content. So inside there, we are going to use the Storyblok
component, and you can send the parameter block to that. Yes. And what you are going to send to this block
property is the story but not only the story. It has a property called content. So it will be story.content. No, sorry. Instead of sending the story, it's story.content. You will see the structure of the JSON object
that represents the story. The content is what we want to use. We do this because you could use the story,
but this Storyblok component is not only for the page itself. It can also be used for the components that
you're going to have inside your page. So in the case that you want to renderer,
for instance, the grid that we have in our example, the grid can contain a Storyblok
component that will render all the components that it has inside of it, and you don't know
which type of components they are. So you don't need to specify that. JASON: Okay. FACUNDO: This will make them work. And if you save now, you should see the content
that you have in Storyblok. Well, I mean, render in the logic. JASON: Right. So we set our page up to be like this. Now, what comes in to a Storyblok component
page? FACUNDO: So you receive a block there. JASON: Okay. FACUNDO: And the block that you receive -- well,
you can use the different properties of that block. In this case, you can say, for instance, the
block has a body. This body is the least of components. No, no, it's correct. What you're doing is correct. Your page, the block that represents your
page, has a body. And this body is the list of blocks. So what you will need to do is map in this
list of blocks to the Storyblok components. JASON: Okay. And that'll be -- let's do a B. Each of those
is like that? FACUNDO: Exactly. Perfect. JASON: So issue that -- hey! Look at it go! FACUNDO: There you go. There you go. JASON: Okay. So now we're getting somewhere. So each of these is also going to get a block. And then with these, we expect the teaser
doesn't have a list of components. This one I could theoretically do block.body. Is that right? FACUNDO: Well, no. That's a good point. If you go to Storyblok now, you will see that
each one of these blocks has their own properties and their structure. If you go to the top right corner -- oh, no. That's one way. But if you go to the top right corner, like
at the right of the button publish, you have an arrow pointing down. Yes. You have the draft JSON and the published
JSON, which is what we were talking before. You have a draft version of the story and
a published JSON. If you click on the draft JSON, you will open
what is actually your story. That is actually your story with the different
properties. And the different values for those properties. What you can see there is that your story
has the content property that we used. This content has a body. If you open that content property you have
there, we have a body. This body has the list of blocks. Each one of these blocks has a component. The property component is the string you are
going to use in the list of components that we were using in the Storyblok init. So you see the property component tells you
which type of component you are rendering. Then you have the different properties based
on the type of the component. So you have the headline for the teaser. The columns is the property of the grid. So you'll have a list of columns. JASON: I'm just going to copy this. This one would be columns. FACUNDO: Exactly. JASON: And same thing. Then with this one, we want block.name is
what I saw. FACUNDO: Yeah, name. Exactly. JASON: Okay. So let's get back out here and take a look. These will be columns. So a little more setup there. Then if we take this and pull it over, we
should see -- so if I do something like this and save. FACUNDO: Exactly. The cool thing -- or not the cool thing, but
what we tried to do to the content editors is exactly what you just did. But without having to refresh the page whenever
you are changing the content and being able to do that from the inside of Storyblok. So we do have a way of doing that right now. There's another function that you can use
from the SDK in the code of your application that is called Storyblok editable. That can coming from the same npm package. So if you are in the place where we define
components -- no, because you have to define that at a component level. You need to mark which components you want
to edit. So you use Storyblok editable, and that's
actually a function that you have to add to the mark-up of each one of the elements that
you want to edit. In the case of the page, probably it doesn't
make a lot of sense unless you are not going to click on the page. JASON: So like that? FACUNDO: No, the Storyblok editable function
has to be in the HTML tag. So if you go to the H1 and add the code to
the Storyblok editable -- I mean, you can add something like this. Let me share with you in the chat. JASON: Like around the mark-up here? FACUNDO: Let me see. I don't know if you have access to the chat
of this application. JASON: Oh, I see what you're doing. So I want to do it
inside like this but then spread? FACUNDO: Yes, a spread. Well, you have to close -- well, it was not
super clear, my example. You need to do something like this. So this function will receive the block. What it's doing in the background is adding
some data attributes to the elements. There you have the H1. What you need to send is the block element
to the Storyblok editable function. And then you need to actually render the content
inside of it. This Storyblok editable logic we are adding
now is basically to be able to click on the elements and recognize the elements inside
the visual editor. JASON: Like that. FACUNDO: Exactly. Like that. JASON: Okay. Long walk for me to get there, but we got
there. FACUNDO: Yeah, sorry. JASON: We got one of those. We got one of these. And that should do it, right? FACUNDO: Yes, probably we can do the same
in the grid, but you'll need to add a wrapper HTML element in the case you want to click
on the grid. If it's a list, I don't remember how you defined
the grid HTML element. JASON: So the grid was just a map like this. FACUNDO: Yeah, sorry. The grid there. Probably if you add a wrapper div or something
like that, you are able to click on the grid too. So in the case you want to click on the grid
and edit it. But that's in the case that you want to do
that. There we go. JASON: There we go. FACUNDO: Yes. What we need to do now is actually set the
preview inside the visual editor. So instead of using the URL that says quick
start, what you need to set there is where the front end of your application is living. So what you need to do is change the URL and
set your local host. JASON: So one of these. Go in here. Editing. FACUNDO: Yes. JASON: Saving. FACUNDO: But there's one thing that we will
need to double check. Yeah, go to the visual editor. And let me see. Because what I wanted to show you is that
for security reasons, the Storyblok team decided it is more secure for you to point to an HTTPS
instance of your application instead of an HTTP instance. One way of working around this when working
locally is settling an HTTPS proxy. If you don't know how to do that, you have
the steps there. If not, you can install -- I mean, you can
see there that you can create a certificate. You can create a proxy using a different port
pointing to your application. That will be another method. Those are the suggestions we use from the
Storyblok team. This is for version two of Storyblok. If you want to use the HTTP version of your
code, we can go back to the version one, which is totally fine in the case that you don't
want to. JASON: We have about 15 minutes left, and
I want to make sure we have time for the personalization. So let me -- how do I -- FACUNDO: Yeah, back to version one. Sure. That's way easier. So if you go to the content home, yes. There you go. It should load your page. Now you can see the borders. If you click on them, you load them, and you
can actually edit them and see they change in realtime. What is cool about this is that if you now
add a new button -- sorry, not a new button -- a new block to the body of the page or
to the grid, you will actually see the change has been implemented in realtime. They are dynamic. JASON: Cool. Yeah, all right. I get it. I'm going to drop this one out because it's
semantically nonsense. But let's go ahead and save that. Then let me fix this one real quick. And I want to make this function. FACUNDO: Perfect. So, yeah, from Storyblok point of view, this
is ready. So now what we need to do is actually the
personalization logic. JASON: Right. FACUNDO: So that's a very good question. What we need to do is in a certain way define
if you are in summer or if you are in winter in the code of your application. Based on that, show one component or the other,
right. JASON: Yeah. Okay. So let's do this for the sake of
this demo. FACUNDO: Perfect. JASON: Right. Because we're not going to have time to get
any geo in here. So we can do this in the way that I would
-- did that work? What's going on? FACUNDO: It's not loading. JASON: Looks like it didn't load. That's fine. We'll just refresh the page. That's how I solve my problems. Did I kill this thing? What's going on? Whoops. Storyblok doesn't like whatever I've done. FACUNDO: Oh, what happened? JASON: I don't know. I'm getting a waiting for Storyblok time-out. Let's stop. Maybe stop the server. Try it one more time. FACUNDO: Ah, there we go. JASON: There we go. All right. So now what we want to do is we need to pull
out some logic. So what I'm going to do is now can be a new
date. And we want to check if -- let's see. I always forget how date works. We can do -- so if I get like date equals
new date, right, then we can do a date get current month. If I can spell it right. Come on now. Get current month. So it says what month we're in. This is always confusing. It is July, but it says month six because
it's zero indexed, which is so freaking confusing. So we will define -- I don't know what the
exact dates are, but we'll say May, June, July, August, right? That feels like summer. FACUNDO: Yes, yes. JASON: You're from Argentina. Why am I asking you? (Laughter)
We'll say summer months north, and that is May, June, July, August. We'll make that count. FACUNDO: Yeah. JASON: And we can say const is summer will
be summer months includes -- is that right? Includes? Yeah, we're going to try it. Now get month. And then I'm just going to log this and make
sure it actually is doing what I want. It is summer. Okay. So now that we know that it is summer, we
can make a call inside of here, which needs to check whether or not -- how are we going
to do this? So we'll have to say -- FACUNDO: You can add a property. JASON: Yeah, let's solve it for real. Let's go back into Storyblok, and I need to
edit this field. FACUNDO: No, in the teaser. That's the one that's going to be different. JASON: Oh, you're right. You're right. FACUNDO: Sorry, in the content. Well, it's the same. You can do that from the inside of the visual
editor or outside. If you go to components, now that we are there,
you go to the teaser, and you can add the property. No, that's the top. Sorry. You can add a field at the top where it says
enter a key value. You can put there, yeah, summer. And you can edit it. You can select the field type. JASON: I want this to be in boolean. FACUNDO: You can save the schema with the
button. Cool. So now we need to go to the actual page. JASON: This one is not summer. This one is summer. FACUNDO: Yes. JASON: We'll save that. Then if I want to get my draft JSON, and we'll
look at the preview again down here so I can see it more easily. Here's my preview. Story, content, and here's my block. It's just going to have a .summer. Okay. So I can then check in here if block.summer
equals -- FACUNDO: Yeah, you need to check in the block
has a summer property because, for instance, the feature or the grid components don't have
a summer property. JASON: Oh, yeah. Okay. Does that one work? FACUNDO: Yeah, I think it should. And does not equal summer. So that would be the opposite. That should fix it. Then it is currently summer in the Northern
hemisphere. Let's change our range of months. So that's going to be summer north, but we
can do summer south. What are the summer months? Would that be like -- FACUNDO: Well, it's December, which is -- yeah,
exactly. January, February, and March probably. JASON: Okay. So we're going to pretend that I've renamed
my values correctly. And now it is not summer in Argentina. Okay, great. So I'm just going to rename that. Then we'll uncomment this one. And there we go. Okay. So we have very -- this is like very rudimentary. This is great. We have personalization running, and it's
running in a way that's tied into a CMS. Again, look at this. There's nothing personally identifying here,
outside of the fact that we would need to know if you were in the northern or Southern
hemisphere, just based on the server you're connecting to. Not anything to do with you specifically. So I find this to be pretty exciting because
it shows the lack of deep detail that is required to do useful personalization. Again, what we've done here is just toggled
some text, but it would be pretty interesting if this is a company that has a summer function
and a winter function, like a clothing store. I can show the summer or winter collection
based on where somebody is coming in from the world. And that suddenly makes the site just a little
bit more relevant, right. And I feel like especially when you're working
in a global context, that little bit of stuff makes such a big difference. Like, imagine every website is trying to put
personality in. So we're all doing stuff like saying instead
of our app being like greetings, human. It's very much, hey, Jason, what's up? That's a very American way to do that. But if your site was greeting people like
when somebody shows up in Spain, it was like hola, instead of what's up. Or you want to keep it casual. Que pasa? Whatever. There's so many options for this to feel a
little more yours. I think that's definitely a good addition. I'm being told that greetings humans is a
Disney bit. So great. I await my copyright takedown. (Laughter) FACUNDO: Nice. JASON: Okay. So I think we might be out of time to do anymore
coding. So where should people go if they want to
learn more? FACUNDO: Sure. Well, in Storyblok, if they want to learn
more on how to code, there is a website they can go, which is Storyblok.com/developers,
if you are a developer, of course. We have Storyblok.com/docs, in the case you
want to read things more generic, let's say, and not only developer focused. But those are, I would say, the main starting
points because the developers page has links to the different technology hubs that we are
maintaining in Storyblok. So depending on the framework that you want
to use or depending on the programming language, we have different tutorials. We have guides. We have code samples. We have the SDKs that you can learn how to
use. So yeah, basically I would say the developers
page is a good starting point. I wrote an article on how to create a very
small personalization project using Next.js in the case you want to use it with Storyblok. You can look at that in the Next.js technology
hub that we have in Storyblok. So if you go there, you will see that. But yeah, if you want to -- yes. No, sorry. That's a new page that we created and that
we are working on. If you go to Storyblok.com/developers, and
you go a little bit below, you will see that we have the hubs. You will see tutorials with how to connect
with Storyblok in five minutes, how to create a multilanguage project, which is very interesting,
related to the same thing about personalization. Showing the content in different languages. That's the article. How to personalize your project using Next.js. It's a very small project that you can see
exactly the example that you mentioned before on showing sportswear or elegant clothing,
depending on where you are visiting. And one approach we take as an example to
show you how to implement that with Storyblok. Again t will depend on how you want to implement
that, how you want to create the project. I don't want to be repetitive, but there's
a recording of the talk that Jason presented at Render Atlanta, which is a very similar
use case but with a different approach on how to solve it, so you can take a look at
it too. You can watch the recording. JASON: Are those on YouTube? I actually haven't found these. FACUNDO: Yes, they are in YouTube. JASON: Okay. FACUNDO: Not related to personalization, but
I also presented a talk at the same event. So if you want to watch the recording, it
is in the Render Atlanta channel. So if you want to learn about headless CMS,
the concept of headless and how to connect Remix project to headless CMS, which is Storyblok,
you can watch the recording too. There you go. There's your recording. JASON: Where am I? Here's yours. FACUNDO: Yeah, that's mine. JASON: Here's me. Okay. All right. Real confused there. So here's Facundo. And here's mine. This one is about specifically kind of personalization
but personalization as a use case to show this idea that a front-end dev without, I
think, a whole lot of deep experience in middle and back-end stuff can really build a lot
of complicated stuff. This was a really fun one. So I hope that y'all go watch it and give
it a try. And yeah, headless stuff is always very powerful. So definitely worth checking out there. Let me do a quick shout out. Make sure you give Facundo a follow on Twitter. FACUNDO: Thank you. Thank you. JASON: And while you're looking at things
on the internet, make sure you head over and look at the schedule. We've had Rachel with us from White Coat Captioning
all day, taking down all the words we're saying. Thank you very much, Rachel. That's made possible by Netlify, Nx, and New
Relic, all of whom are kicking in to sponsor this show. Check out that schedule while you're on it. We have some fun stuff coming up on the show. We're going to do motion. We're going to do Rust. We're going to do visual page building. We're going to do accessibility testing. And a whole bunch more that I think is going
to be a whole lot of fun. So please make sure you mark your calendars
and subscribe, follow, do all the things that you do so that you can be part of it when
it comes out. Right? Right. Okay. With that, Facundo, I think we're at time. Is there any parting words for the chat? FACUNDO: Oh, well, thank you for watching. I hope you learned something new. At least a small piece. No, that you get into the idea of personalization,
which is pretty interesting. I think there are a lot of people, how to
say, learning about it, implementing it. We are at Storyblok see a lot of customers
asking about how to implement personalization in their projects. So it looks like a trend in the market, I
would say, or a buzzword that everybody is asking about. So yeah, I hope again that you learned something
new and you enjoyed this show. And Jason, of course, thank you very much
for inviting me to be part of the show. JASON: Of course. Happy to have you. Thanks for hanging out. All right, chat. I think we're going to go find somebody to
raid. Let's see who's live right now. And we will see you all next time.
