Building Content Models for Devs and Editors w/ Lo & Bryan

[Music] hey everyone welcome welcome uh I say every week in various ways uh but like that intro is is probably the calmest and most calm inducing countdown timer in the history of countdown timers and it just puts me in a good mood me too it I'm good I know I love that intro the last time I was on I was like this is so great just kind of like you get to kind of chill to it and I like I like the idea of our streams being very chill streams uh and so I dig it um for our returning uh viewers if if there any of you in the audience uh you might notice we are without our lovely Tim benck today uh Tim is actually in Amsterdam right now uh tomorrow morning Amsterdam Amsterdam time he's going on stage to rock the the vuejs Amsterdam stage which is uh very exciting uh and I'm looking forward to seeing the video of it I will not be awake for it and well I assume you won't be awake for it either but uh no but I think it's going to be awesome it's 9 right Central Europe time yep 9: am uh VJs Amsterdam and it is the the stage for vue.js Amsterdam is this giant like curved screen that's like literally takes up the entirety of the stage and Tim has three browsers worth of content to put across the stage and it's it's the most they've ever used it and it's I got to see a demo of it it's super cool I like it a lot and we're actually going to do in the coming weeks I don't know exactly when but we're GNA we're going to break it down all of Tim's setup for it because there's a lot of really interesting Tech that he's not going to have an opportunity on stage to like really go into so we're gonna we're gonna break it down he's using hgraph for a little bit of it all the content's powered by hgraph and then there's super base and obviously Nu I think and some other stuff going on there so it's it's really cool so look uh look for that uh on our channel here in the coming weeks like I said I'm not sure if it's next week or the week after we'll see how he feels after the after the conference uh for when he wants to do that um but yeah today we're going to talk about I think something not as cool but like super important uh and that's content modeling uh Lo it seems like we we bring you on for the not so cool but super important topics you came on for multi-tenancy which is not cool at all but like when you need it it's real important yeah I mean that's kind of my brand if I have one right like the not so cool thing but I try to make it fun along the way cuz I think that like a lot of times these things that we think about that are really kind of hidden in infrastructure things they get glossed over but they're super important in terms of they help you be able to do all the cool things right absolutely like the my my favorite thing is you know you you you glossed over the secondary thing that I said right like the not super cool but super important uh um I think content modeling which is what we're going to talk about today the nice thing is as opposed to like multi- tendency which you talked about last time you were on is that everything needs this right like you don't always need multi tendency but content modeling is everything so what what is content modeling let's let's start with the definition there so we think about content modeling right we can really just sort of boil it down to it is like a map or blueprint of what your content is right and your team and how that all works together right so it defines the types and the structures and really sort of gives the sort of structure if you will of your content um it describes like what kind of content you want to store and more importantly how that content um relat to each other um and how it's going to be and can be edited in your system um so it is really sort of when we think about a full content model not just a single model so meaning all of your content right um it is really the map of how everything pieces together and not just how the actual content itself pieces together but how all of your teams and maybe your business goal and organization is pieced together through this model and it can be they can be very simple or they can be very complex and I think that there's there's an interesting thing that that you're talking about there where we're developers right like the two of us are developers many of the people who might be tuning in developers it's a hgraph is a very Dev Centric product in a lot of ways but the content model defines our API uh like in any system that has content modeling built in it will your API um but also in most of these systems in most headless cms's that inext inextricably ties it to the editor experience as well and so when we're thinking about figuring out what works for the API figuring out what works for the editor they have to work together uh because if you build a great API but a crappy editor experience your editors will start working outside the system and if you put together a great editor experience but it's really bad API then same thing happens on the developer side as well right and you know something said like a so a poor content model or content model that isn't thoughtful in the way that it considers all of these things will end up being a bad experience for everyone involved yep so one of the things we're going to do today uh which I which In fairness we came up with the idea yesterday um is we're going to explore the the web.dev site uh which is if you're if you're a web developer you're probably familiar with may maybe you're not it is almost like a direct competitor if there is a competitor in this space to like an mdn right it's not like the full reference stuff that Mozilla developer Network created uh but it is around learning web technology and it's actually a very deep and uh differentiated content experience so so we thought about like oh we could do e-commerce but like you know everyone's got that and and like we see kind of the same things over and over again so let's do a Content site and so I feel like we're gonna break this down we'll build some of the model inside of high graph but really we need to talk philosophically about a lot of it we need to talk like how this all works together because if I were to have received this design these are the types of things that we would need to think about when breaking a design into content models as well um so yeah as as intros go I think uh we're there but like let's take a look a little bit at um at the web.dev homepage and let's let's start thinking about that so I guess let's scroll down and and low let's talk about what we kind of see in terms of content I'm gonna skip over this entire header area if that's all right with you it has its own uh own interesting bits we'd have to worry about in terms of content model but I think the meat of what we might want to talk about right is starting down here uh so as we come down we're like immediately presented with content right most websites are content and we have a headline and some text and so when we're thinking about this where does this come from what do we need to to to worry ourselves about right so this is um what we're looking at is basically something like a he like when we think of like Heroes right so it's like a hero component um so I would imagine that all of these different um these types come together as a unit in like a hero component so you have an image you have a title you have what is like a body or a little bit of text and then you have a button right so I imagine there you would need some sort of framework to be able to reproduce this right because I bet that this changes often so you're think you're looking at a piece of content that is somewhat volatile in that probably um when there's something big that they want to promote they switched this out right now we're talking about building a better web together but I imagine they will change this so you want to be thinking about something that is sort of nimble right and that you can change easily in terms of this particular piece of content you know it's interesting there are two adjectives there right there there was uh um volatile and Nimble and I suppose when something's volatile you need to be nimble to avoid the explosion that comes when the volatility happens yes but yeah so so yeah we've got we've got two two bits of text we've got a link with link text and we've got an image um so we could dive in and start building a hero component but honestly if we scroll down again we see two new components side by side here that seem different pretty similar well but like see yeah I was gonna lead us there right but uh okay sorry but yeah that like at at a design glance right we've got a like a rectangular image as opposed to this kind of floaty image we've got you know button we got a card style so like in my code I'd be looking at a different component style right like this would be a card component as opposed to a hero component but since you spoil it why don't you go into why maybe that's not but from a Content standpoint you have the exact same sort of field types or elements right we still have an image we have a title we have a bit of text that's more like a paragraph style text and we have a button so what has changed is sort of the design and the configuration of this these are essentially smaller Heroes but they're cards in a different format because they're meant to be placed next to each other right maybe sometimes we see this often these are quite big um but it's the homepage right but sometimes you see these sort of card like um elements and there are like several of them in a row um so on it sort of at the granular level and on the base level right um it's the same elements that we see at the top in the hero and I suppose before before we scroll down again um I think that's an interesting philosophical Point too where we start talking about what what makes a headless CMS important and what makes it different from a monolithic CMS and that is this idea that our content doesn't have to be fully tied to our design right so we have these two things that if I were just breaking this down from a from a design perspective they are two different things but from a Content perspective they are the same and that means that we we can craft an editor experience that allows somebody to think different think the same about them and get a different outcome or even if they want to right we could have them move this component up to here and it would just work in theory uh which it's great for a page builder even though a page builder feels like it's very tied to to the design really it should have these pieces that can be interchanged and moved around however needs to happen right and that's sort of the beauty with headless and content modeling right is that from a Content perspective you can create these repeatable content patterns that are independent of the design so just as you said um you know these cards down at the bottom under the hero you could easily switch out learn how modern web technology can help you succeed and that if that was meant to be the main focal that could be switched as the hero and then what is currently in the hero can come down into a card format because this you know is a repeatable Content pattern and it's separate from the design so once you get to a presentation layer you can then take these content patterns and sort of transform them into whatever they need to be design wise but the content itself Remains the Same and here here's a a message from Rina who I love working with for this very reason Ed don't need to think in headless uh exactly right on that I mean editors will almost always think in a design mindset because usually they're writing or editing for specific areas however consistency in let's just say form building like since really what we're doing in making our model is also building our content editing form allowing an Editor to feel the same on that and understand how each of the fields works even if it's in a different spot I think is is also really really interesting as well uh yes and actually I'm going to Romina is on fire today in in in chat uh also if new channels are used created content can simply be delivered there without needing to be adapted first absolutely yes we'll get into a little bit of that later yep in fact I'm gonna inspect something real fast I'm kind of curious about this image because I'm wondering I think it might be a transparent PNG and I think this circle would actually just work out the box without a white background up here I think they've they've just crafted it in a way that that would work in that specific way as well ah I see I think it's interesting at least um all right let's let's scroll down and kind of keep looking and I'm seeing more familiar ideas down here though yes um so we have a slightly different appearance right but again what do we have we have an image we have a title we have some text that's like a paragraph and we have a button um slightly different configuration right but still kind of in this like card format but when I look at this what I see is perhaps more of a collection of things but this is me thinking in terms of content modeling so when I look at this particular section that's the content elements are the same but maybe this looks more like um actual like articles and I'm getting like a brief summary of that article but again still the same elements and you know basically the same repeatable content pattern yep and actually when we're looking at the URLs that are provided here we do have we have a blog post here in the middle we have I don't know what Baseline is uh but it is oh it's a conference looks like uh um and then we have the CSS podcast and this one is actually a link offsite which is interesting as well these two link onsite this one links off site but it's definitely like this idea this collection of promotions as Wells yeah so you could think of this as yeah that's exactly what it is right we just don't because this is the type of site it is I don't I didn't I immediately jump to products when I think about promotion but this is a product right they are talking about a product this is product of learning information and you know their various content collections that they offer and speaking of which even more content collections down below uh where we have this other thing and this one nowo this one looks completely different it is it's 100% different so you got to tell me that this is a different content model [Music] right well I want to tell you the truth so honesty is important I'm gonna say that it's not that different right we have again we have some what we have is a heading um and then we have that text that's a descriptor the the thing that is missing here is an image right but the great thing about sort of content modeling and these sort of repeated patterns that we're talking about is for a new content section right you can choose to leave off elements when it doesn't work for that particular area and here we have a collection of what appears to be things related to CSS and UI design right so we have some maybe perhaps blog posts or articles um as a collection under this sort of subject matter right and because you maybe want to put in more of these or to deemphasize them less um images are not appearing they chose not to put images here but again still the sort of same repeatable content pattern a title and a text sort of description or brief sort of excert or summary yep then we scroll down and it's it's all that until we get down to the form at the bottom which I think we're gonna avoid talking about for the moment um and then we get to the footer which we'll also avoid talking about um so this is this is the homepage a landing page that while we haven't talked about like how we would build these these uh like components out does seem to function similarly all the way down in terms of content model but I also kind of want to go a little bit further before we content model this page and think about where we're sending people from this page and a lot of it if we avoid the more like advertorial pieces right a lot of the content that lives on this site appears to be article focused right so we got yes very much so we got adding typography to user preferences in CSS um and then we can see here it is a fairly basic blog post style um but it exists here which is in the Articles we even have breadcrumbs but I would wager if I were building this we have all these navigational items up here that what is the difference between a Blog and article and from a philosophy perspective and from a Content modeling perspective Lo what do you think there what's kind of your your idea around what these differences would be so in my mind they're not very different but perhaps a Blog is more Tim related um is usually how I think about this right that a Blog is maybe um time oriented and um it's something that is happening now or usually geared towards perhaps announcing a new thing but maybe an article is something that is meant to be more foundational substantial something that is going to exist as far as your content goes um for a long time so let's say it's like a tutorial perhaps or maybe an article that is providing some Foundation of knowledge right or learning that isn't going to change much but that doesn't always have to be the case that's just how I tend to think about it Y and I think I think it's important to to also say I mean we we looked at this together yesterday that at the very bottom of the article uh we do have the fact that this this does have an up updated time on it it does have the updated date on it I wish they had done some formatting work around it but that's another story um but the idea on this would be even an article that's Evergreen like the web changes like these standards change So eventually this might need to be updated to Showcase a new aspect of web typography um right so you at least want to like potentially know that it takes that into account but I think it's probably you're right less important than perhaps a blog post style which is I mean we let's go to the blog real fast yeah let's take a look so let's see I mean they're announcing web.dev for China which means they're doing uh you know translation work that's an announcement right uh immutable array updates with array.prototype dowith that's a new method in JavaScript so yeah again an announcement interrupt 20124 that's an announcement of a of a conference uh uh interaction to next paint becomes a web core vital uh that's an announ this is very announcement focused uh and you can see even on this page itself they display the date um but let's look at articles real fast the Articles landing page does not not so again your assumption there is absolutely correct in that one the date is more important than the other um because yeah you wouldn't want to see interrupt 2024 after it's already happened and be like Oh I thought I was gonna be able to go to it um so yeah I think that that makes a lot of sense but again when we're talking about differences and similarities there's a date on both and when we click into it other than being short and having no uh table of contents on the right because it's short the model itself is pretty much the same it's pretty much the same right we got a title we have an author um which I assume is is Paul there and um their social media um links and then we have sort of the body or the actual you know copy of this particular blog post um and then we have some oh we have like a was it helpful um sort of to give feedback and then we have that sort of last updated at the top at the um at the bottom and very similar to what's happening inside of an actual article um we have that those same sort of elements but you can see we have I I chose an even an even bigger one accidentally where there's this this other sidebar as well because this is actually deeper in the site in other places as well yes which we perhaps won't talk about the informational information architectural uh uh elements there but another interesting case on the fact that this is the same content model as the other articles and the same content model potentially as the blog post but used in a different way exactly and you can see sort of how from these sort of articles they started to sort of scale out into other areas just like so this article is sort of connected to this Explorer section that they have which gives you I assume um once you go you land here right you get some Base information and then you can use these sort of side menus to delve deeper into that particular subject see now I'm kind of curious okay it's not here but uh but yeah there's probably something in one of these that corresponds to measure performance in the field right like this area which I can't select I've been highlighting text across the board and I can't highlight it here um but yeah so like this this area here this article was embedded in that section therefore it gets this sidebar um in one of probably a couple different ways but the article itself is the same exactly and then if we go back really quickly to either the article sort of index line here we go we see again we have this repeatable pattern of this card and hero right what do we have here we have an image we have the title and then we have a brief sort of summary or description of what this particular article again so we're seeing this pattern show up quite often in terms of the content that's being delivered on this site um let's take a short break and let's let's think about this for a second too because we have we have this right it has a an image a title and a description that is the article's image title and description let's even see if the if the title comes through the title is here but when we go back to the homepage we do have things that are technically not articles that follow this too so this is where we have to start thinking about vol versus uh like domain content right content right this is a very volatile section um but the this is actually not volatile right like it's just flowing into this page from the Articles and we wouldn't want to force an Editor to go to a separate place to build out the article list right we'd want to probably build this into our article itself yes because again we're talking about you know content that is sort of going to remain and is stable like maybe you have to make some minor updates to it or if the piece of tech you're writing about for instance changes in some way you might need to correct something in this but it is stable it's not sort of transient it's going to remain here yeah y I think that's that that makes looking at the homepage even more in where was the homepage uh instead of clicking the the logo I just decided to go through my history uh and looking at this and when we're thinking about it you know this this top section feels very volatile it feels like it's something that that you'll want to add in the content to this area these sections because they are let's see this is offsite and this is onsite so that means that we want this to be volatile as well can't just pull everything from onsite same for this one but I feel like when we get down here these article article oh y'all can't see that I'm sorry I'm hovering and I'm getting the URL you know down in the in the browser but apparently that's not popping up on stream these all four of these are articles so that means that this description probably needs to pull from the article yep so why don't we do go ahead I was going to say so probably inside of if you had a model for this right what you would see there is some kind of field for like an excerpt or a summary right so that that would always be sort of attached to the article y you know what's ridiculous low I I set things up before the stream and I just happened to hit the timeout and I was logged out um that's how that's that's how streaming luck works yeah that's how it goes I feel like that's a good segue to actually doing the content modeling right the content modeling in high graph for this this is actually a blank hgraph project there's nothing built already and so if we were given this project before looking at the homepage like when when I think about content modeling I'm usually thinking a little bit more atomically like what is the main items that everyone's going to be entering and in this case that's probably articles right articles yes so let's add an article model um and let's figure out the pieces that we need for the article and I'm now kind of wishing I'd shared my entire screen and not the Chrome browser uh because I put things side by side but I think we can just go back and forth um all right so let's let's look real fast actually I was hoping to like do this kind of like slightly backwards and be like oh no we don't have an excerpt but in looking at this do you think that's the excerpt from the homepage I think so right let's let's see hold on let me copy this and see if when I oh but it's not okay which one did I click you click new CSS colorss it's right above the sub grid okay so this yeah is that here it is is that the same yes but yeah I accidentally clicked on CSS subgrid and it doesn't have an excerpt have that so now I'm a little bit confused but anyway if we're doing this uh from our perspective on what is good content modeling and not thinking about about other other things that have happened um yeah we have a title and we have an excerpt obviously that was going to the homepage as well so let's go ahead and add those in yeah and I have a theory perhaps why that other article does not have um an excert or summary but I'll get back to that when we actually build the model nice so let me ask you because this is kind of a an opinion question I started making a title field because that's the way that my brain works but then I put on my editor cap for a second and do you think an editor thinks in titles or do you think that they think in headlines let's see I think that it depends right and this is a good sort of way to talk about who should be involved when you're building your models right so in this particular case right I would consult um as a developer I would consult some of the authors right and specifically ask them what do you call do you call it a title do you call it a headline do you call it something else and the great thing about being able to sort of build your own con um content models and sort of in the Headless space is that you can fully customize the experience to developers right or to developers and editors so as a developer you can fully ask your editor and you should ask them how do they refer to the you know sections of their content when they're writing an article what do they call different pieces so that you can build that directly into the model so that when the editors come to create their content they are in a space and working with you know a form that is familiar to them because it's using their vocabul and in fact we can customize it for both audiences at the same time because I as a developer I think that this is probably a title right and so by default as I type in headline here my API ID changes but that that doesn't have to be the case what if everywhere in my in my uh model and everywhere like maybe in other sections that we don't have right now I want everything title because it's it's the pages title it's a whole bunch of other things around that so I want my API to have titles but I want my editors perhaps after I've talked to them to have headlines yeah you can totally do that and then we'll select that this is a title field and we're not going to localize because that's its own that's its own stream at some point yes we'll get into that another time and we said we need an excerpt uh and so in this case we have to think about what kind of excerpt we want is it plain text or is it rich text do you want to know my personal opinion my personal opinion is plain text right because this is really meant to be um maybe one to two sentences at the most right and you don't really need any other things that come with sort of Rich Text for this you just need the those one or two sentences they're not going to be um headings in this you're you know any of that so I would use plain text for this I think this is where we can talk a little bit about protecting your editors and protecting your users at the same time right yes if I were to give my editors a rich text here honestly they could put headlines in here because that's what our Rich Text allows for they could also put links in here and I don't know that I want links to be in here I think from from a user experience perspective or maybe from a business perspective I want somebody to read not and remain on the exactly remain where they are right and so don't immediately give them incentive or motivation to leave yep and so I think for safety as well as for I mean the use case is just a couple sentences right I think multi-line plain teex string is absolutely what we want here uh that being said at some point right somebody might request I want to be able to do multi multiple paragraphs in here and multi-line string is not is not going to do that it's it's not going to do paragraphs for you but that's something that's then you had the conversation and figure it out and also that's why you talk to your editors in the first place anyway like we've kind of been saying yes because it could be them wanting that um is to solve a specific problem that may need to be solved in a different way rather than uh sort of changing what this excerpt field looks like right yep and I put a little description in here to help our editors out excellent yes simple content that goes before the article and is listed on list pages and again we can Workshop that later on to to make it good inapp documentation for our editors yeah and I feel like people real quickly sleep on the description but it's super important because it's what your editor see so if you want to sort of quickly input some general guidance or instruction about what that field is supposed to do or how you're supposed to use it that is the place to do that real fast I'm gonna open up a new tab and we'll actually see the con we'll be able to see the content feel on this excerpt and here's that description that we wrote exactly right there ready to go um and available to us uh now let's for the moment skip over uh author but let's keep a mental mental note that we need to come back to it and um oh real quickly about this excerpt right so when we looked at that other um article we saw that it didn't have one right so I suspect what happened was is um this field is perhaps available in this particular model or this particular construction of how um this content is but it's not required and it's sort of optional you can add one if you want and you can not add one but perhaps it might be better to um make something like this required if you want consistency across your your content so if you're building your model for instance and you say all articles should have an excert you would want to plan that into your model and you can do that by making the excerpt field required so this means that if you're putting in an article as a content creator you have to complete this field and that's one of the ways you can sort of build in even more guidance into your model and why content modeling is so cool uh because you can generally control the consistency of your content and data right both in terms of what like not only the content consistency of your front end presentation but the sort of content and data consistency of your API so L I just got a a fictitious request from our fictitious stakeholders on our fictitious project um okay and that is they want the excerpt to show here which I think is actually what's happening here but they want want to not have it show here ah so okay what's going to make the most sense for that I've got some some thoughts but I'm kind of curious your your take on that because they they really like you said data consistency we need the excerpt right as developers we need the excerpt to be able to to make our list pages but how do we make it so they can turn that off so I think in terms of thinking about this from an over viiew perspective right is the excerpt needed more times than not and is this a oneoff in terms of presentation because if it's a one-off in terms of presentation we don't want the uh xer to appear in this place this is something that you would deal with on your front end so you would just hide it for this particular case or I would always include I would include the excert in the um model but perhaps you might also use like a bullan or something on or off so that's how I would solve this because it seems to me looking at this more times than not we do want the excerpt and if that's the case include it in the model and then buil build in ways to control whether or not it actually um that that content actually appears on a front-end presentation so maybe like I said yeah you could have like a bulling like excert on or off or something to that effect but if it appears more times than not include it in the model and it seems like it does so I would no matter what include the excerpt in the content and I would still make it required because what happens when it this again we're talking about content that is sort of stable and Evergreen right so what happens when it moves off the landing page and it goes to the index you're still going to want to have that excert right so that's why you put it in the model does that make sense makes perfect sense um and honestly like I am not having any experience with web.dev right other than being a reader of it I'm very curious about the about the design constraint that actually one article out of the six that I clicked on did not have the excerpt on it I'm kind of curious as to what the conversation was for that but that's that's not uh yeah not in scope for what we're talking about right now um so yeah we've got there's a lot of things like on the homepage even not to distract us there is one content section um that shows a list of articles that doesn't have a button so I also wondered about that too like why do all the rest of them have a button and that one doesn't but you know we don't know we're not it's something I'm passionate about let's let's have a CSS button web. let's have a CSS button um neither here nor there but yeah very curious about like that sort of like content methodology there um so yeah I think the the the couple other things that we want to think about are um let's get back to this one we've got a rich text field I think I clicked you um and yep for the moment because I think it would get into the weeds a lot although I kind of want to build this at some point uh yes we have probably Rich Text embeddable things here right we got browser support we've got code blocks and we have images which images aren't on this one but I saw it on one of the other ones um so for now let's we're going to pretend we're in an Ideal World and we're going to make um the content area now now I've seen this in in two main words low I've seen content and I've seen body yes what what kind of thought do you have on on the naming of this one for me I want the API to say content but I don't know what the so that makes sense if you want the API ID to say content you should defer to the developers who are going to be maintaining and using this right but for the display name I'm going to say again what I said about the other field which is talk to the people who are actually going to use use this do they refer to this as content or do they refer to it as the body from an editorial standpoint noting that this is the meat of actually what I'm trying to communicate in this particular section so again you really want to talk to as you're building out your content models you really want to have the people who are actually going to use it the editors the content creators involved in the model making process or you know the could be you also want to have even you know subject matter experts right depending on what your model is for but this is the best time to talk about this is while you're building it and not after the fact when people come to you and say well actually this isn't really working or the name of this is confusing um some of the editors or some of the subject matter experts don't really recognize this immediately um as a thing that they're supposed to complete or how to really navigate it because it's not in their vocabulary and my favorite thing here right is that this is probably not hugely important for a very simple article model however like if you do anything slightly more complex than this you can confuse the heck out of your editors like absolutely it'll be relatively obvious what's going on to the editor after the first couple training sessions on this one but like on other ones on other things that are more comp comp Lex names are important I'm actually going to call this article body I think that's going to be as explicit as as my fictitious uh editor might uh might want here IAL I talked to them they said article body is what they'd like to see there or the great thing on this right this specific use case is even though web.dev is an open source thing and they're probably powering all this be a markdown somewhere uh imagine a system where you have contractors that come in and write like a couple dozen articles and then leave eventually and then you get new contractors in writing more articles you have to train them on a regular basis on a site like this you have multiple people working in it so exactly I'm gonna say my my editor-in chief right like my my big editor who knows all the contractors is the one that that told me they'd like to see article body for this um right and maybe like you said if they have a lot of contract editors or cont uh con tracked content creators W that was a lot of C's um like this may also fit into whatever their training manual or their onboarding looks like right so if they're for instance in those onboarding uh instructions referring to this as the article body then they would want to also have this inside of their content model that the contractors are going to use right and to sort of further illustrate this point really quickly like so for instance how this can be very complex my partner is a scientist and they do an extensive amount of research with lots of different people right so they work on Plants so they work with plant breeders they work with PA plant pathologist so considering if you are building a Content model for other scientists to enter in data um and they have to work sort of together you would really want to con you know contact them and get them involved in this process as subject matter experts to make sure that the field types are in a vocabulary that everybody understands yep here we're we're low on time but I think all these conversations this much time has passed know it's ridiculous but now that I'm like thinking about right like I kind of want to see like I think we could we could make another piece of content out out of this kind of idea like let's let's break up web.dev and let's talk through with fictitious you know stakeholders and talk through the things that come in anyway um article body I've enabled embedding because I I know at least I need images uh eventually you know I'd want to see other embed types here um including like the browser support and the and the code blocks and all that but for now let's just do assets so we can keep things moving now here's an interesting question for you Lo okay and this goes into uh Power and complexity um we know because we have our specification right our design Dock and whatever it was we know that we need a date and we need it to be potentially less updated um but we could do that in a lot of different ways inside of high graph and in fact probably other systems as well because we had this idea of system Fields so we have this idea of a published at we have an update by we have an updated at uh we have a created app so we have all these dates that automatically happen within the system do we want to use those for our content model or do we need to explicitly put some sort of date field to let our editors worry about that and again I I'm I'm I'm a pause for a second say we're gonna talk to our editors but I'm I'm calling you you my editor and chief right now so what what would you like to see here now okay so then I have a couple questions right yeah um are you just literally displaying or want the content of when something is updated or is it a case of potentially that created date needs to change so it may not be uh maybe you put an article in and you wanted to say it was created two months ago or two months from now um so that those are Rel I think considerations because if it's just going to be sort of a literal we're putting the date stamp of when this was the last time it was updated I would use a a system field or the last you know date you know of time it was updated at system field if it is a situation where these dates need to be controlled by the editing team then you want to put a date field in there so I'm going to look at my design I'm going to say this very much especially since it's like in UTC and it's like numeric and all that that feels that feels to me like it's a system field uh yes in fact if I had to guess this is probably a markdown document in GitHub somewhere that the last time this file was updated is actually what imports in there that's my guess as to how it's actually set up right I'm GNA say that sounds like a system field to me but I think that that is a an important consideration do your editors need to control that and with the control of it comes the complexity of the editing experience exactly all right so we will we will say that we will use system fields for that and that saves us Ed editor overhead right right and what's interesting about having those fields right is that you can still control sort of when you connect this to a front end you can control what that looks like like right so you could have for instance with that system feel because it has a published buy um you could have this article was last updated by at this time and actually sort of use those system fields to actually have it a little bit more readable than what's on um down at the the article of the web.dev thing and like it's also like I'm like okay well the author was Rachel right who's an amazing CSS person um was it last updated by Rachel or was it last updated by you know somebody who made an an editorial change like that's when we start getting into like if we start thinking from like a doc's perspective like I would love to see like the history and why these changes were made like could we have a field that is like exactly that's scope creep that's not what's what's built into the site but like that's an interesting interesting concept right but it does set you up to ask those questions and think about that later right which is what you want in a Content model now we also have this uh which is not on everything I did I do think I saw it on one of these so that post doesn't have it subgrid maybe yes so this also appears to be an embed uh so I'm I'm not going to do that today but this looks like a call that we could potentially have and maybe maybe all these colored boxes are of a component type of call out like that's a possibility um and um I'm not seeing it really anywhere else I'm seeing it at the top of the page o we have one down here oh wait I saw a purple one I think yeah I saw something yeah there we go so again like if we were to model this out we'd have this this is Rich text because we've got code in here we have an icon and then we probably have a a style type for it right not blue like starred or something Stars yeah and they're or by information type right because it seems like like is this like I would want to know like what is the intent behind these because are they like when they're doing icon and green and then that mini title is that consistent across always used for this type of call out because maybe you would want to build that into the model yep like because it but it seems to be varying depending on what's there there doesn't seem to be any you know at least uniformity that I can readily pick out that's but you could build that consistency into your model like green is always going to be like a pro tip or blue is going to be the pro tip and it's always going to have the title Pro tip with um I don't know a light bulb which I think is what we have on our side that's why I'm thinking of it and that call out is always going to be um additional pieces of information that help you along through like a tutorial for instance but you could build that into your model where you have the content um person maybe select from a dropdown even right because call outs are going to be these consistent types and they choose Pro tip and then they put in their information but that's getting into maybe some components yes and I just wanted to point out I actually have an article on this specific use case I love this use case I love subgrid but it's from like three four years ago now um anyway uh let's go back to our original article and I think technically if we if we avoid those components for the moment the only thing that we need for the article view I'm I'm gonna speak very very quickly now because I want to talk about one more big thing before we let everyone go we need an author um and so low I as a completely uninformed content modeling person right first of all I'm G to put I'm gonna put my author as as information on this page I'm gonna put an author name I'm gonna put an author social I'm gonna put an author bio on my articles is that is that right is that good um it could be but then I'm going to ask you what happens when those same people are needed to be attached to a different model or different type of content right so that's again the thing you need to ask yourself about content modeling are these particular things going to remain here in this model and only in this model if the answer to that is yes always or most of the time maybe you put it in that model if this is potentially something that could be attributed somewhere else it probably probably either needs to be its own model or component I fully support this I'm going make us a new model um that is our author model uh so we can talk about that a little bit and we can get nearly into the things I thought we were going to get into no because we didn't have the person we haven't even talked about the person uh model type versus an actual author type right because what if you just have the people attached to the website what if they're not always authors what if there's something else maybe you want to be able to assign them as an author you can get really into this well then and then we have to talk about like guest authorship and then like there's all sorts of stuff exactly I'm going to pretend that I feel like this should be clickable because I'd love to have like an author landing page um right let's put let's put a slug so we've got that and again uh let's have the this be Slug and let's have this be uh I don't know I don't know I don't know what an editor really wants this to be um we'll just have be slug let's not have that conversation because I feel like there's also room to have things like this there's room to also bake in education about this too right like is developers like sometimes we uh build things and then we just kind of hand it over but a little instruction and onboarding goes a long way so if you sort of write up a quick manual and do some a little bit of training you can just say the slug is Anonymous with a URL this is where the address of where this content is going to live essentially so and in fact in doing that and having that quick conversation because this is all we needed to have the content of the page we got a slug on this we need a slug for each of these as well oh yeah which if we were doing like uh Progressive disclosure on all this like there's other things that we need on it as well like an image for when it's in a list View and stuff like that uh which we were totally going to get to um about 5 to 10 minutes from now when we're not going to be streaming anymore um so one of the things that we do need in here is a social media uh idea um and for the author right so we'd have like this idea of Socials or socials and I'm gonna say social sis because I think that's fun and so this is a component because it's going to be the same potential structure for everyone and we want to be a repeatable pattern on each one but we want to be um potentially unique well actually we could set up an I'm just doing this real fast because I think it's an interesting thing to talk about I do too we could have an enumeration which is our types of social that we allow for and then we that controls the front end for those icons so that uh users not picking an icon so we'd have social types and this is one where we actually don't have to worry too much about the uh the editor because the editor is not going to be here the editor is going to be editing on on another field so we'll say Twitter we'll say uh LinkedIn Facebook Mastadon and something right I don't know what something else is but whatever that is maybe yeah we we would come back and add in anytime we allowed for a new one we'd add it in here and then on the socials we would have a couple of links uh or a couple of pieces right we have the uh profile Link Link yes url url or link what do you like better I think maybe link but you could use URL for the API ID if you wanted true because this also sets us up not every author for instant is going to have all the links right so you would want them to be able to choose the actual link Social Links that they need to fill in because those are the accounts that they have yep and so this time we're going to have a social platform it's going to pull from the social types of numeration we're going to allow multiple uh values uh and that's going to allow us to add in multiple of these per author which just has currently a link in the social platform we could extend that if we needed to in some way later on uh but then when we go back to our author and we're speedr running now we're going to add in that component as a basic component social platforms and and here we'll actually no we didn't need to allow multiple values on the other one we allow multiple values here values on the component yeah yeah so we'll actually go back to our component and fix that because that actually would be a problem that would oh no we can't we' have to redo it oops we'll pretend like I did that correctly um so now we have name Slug and social platforms which is all that we saw we might eventually want you know a rich text for a bio if they have a page right so then let's look can we look at that from the content side really quickly just to see what an editor would we need the Avatar too uh but yes uh yes so are you wanting to see the author or the article I guess the author uh the author yeah just so we can see really quickly like what that sort of drop down and what that looks like when an author goes to add some their Social Links right oh hit the wrong button and again I shouldn't have been able to say to save that right that shouldn't have been uh savable at that point um yeah so now I've got my author page that has my name the slug and this and in fact if I I guess we wouldn't want to hide this from the editor but I could potentially hide that from the editor if it worked yeah behind the scenes um and then we need to be able to have our author on the Articles as well right so we need to go back and add that to the model yep and so we need to allow only one model be reference multiple no we only want one because we want this to be the author and then this is a two way because I want to be able to query from my author page uh the the editors don't need to worry about that and then we do want multiple authors per article as well because I saw that on one of the other articles yes because and you can always have co-authors exactly um and then we can configure both so on the uh let's see we want the authors to be here but then on the author model I don't actually want to list these so what I'm going to do is I'm going to make this one API only um yes which is another great thing about this right you can choose what to show and what to hide in terms of um content modeling and particularly in high graph right because you want to remove clutter that's not needed and give your your authors or your editors an experience that is really tailored to what exactly they need to come in and do and only that so they don't need to think about these other pieces they can just come in and be creative and work on their pieces of content so now Brian Robinson has an article in the system but the art the article list doesn't show here because we don't want to clutter up this View this view doesn't need to see it exact the API needs it and that means I can query in the API for this author and get all of their their socials yeah and one thing I will just say quickly because I know we have to go um in looking at that um when we decided whether or not in terms of references to allow many authors to an article um even if I hadn't seen that if I were building this model I would use that option anyway because again the great thing about content modeling is it sets you up to be able to scale so theoretically right it is more than reasonable to assume that I would have co-authors for an article eventually so you would want to and can plan for that in your content modeling and the fun thing is right this is one of those moments where there's a tiny extra bit of edit of developer work that you have to do but it future proofs it like you'll have to instead of just being a single author you will have a you will have an array of authors coming in and that means that like you have to do a loop Oh no you're gonna add like you know three lines of code but it's an important three lines of code so that you can make it if you needed to change this later on because of the way all this works behind the scenes for performance reasons and all sorts of other things you would have to remove this field and add a new one and that means a Content migration and ain't nobody got time for a Content migration for adding off nobody yeah that is that's not the way put it in from the beginning uh and you'll be much happier long term yeah so we're we're four minutes over but here's the thing like I think that this sort of conversation around modeling is an important one and at some point I would actually I I've got this idea that I really want to do like content model improv I think it'd be a really fun kind of event yes um where like we take stuff from from the audience and like okay yeah sure like we'll talk about this random like topic really get nerdy about it um so yeah if you're interested in that do let us know and I'll I'll do our our uh various calls to action here if you are interested in that as an idea or learning more deeply about it come hang out with us in our community ask questions about content modeling we're in there slack. hyra.com as as where you can go for that if you liked what you saw in terms of how we're doing the content modeling in the system obviously High graph is what we're doing it within so app hyra.com signup or just come to hyra.com that's fine as well and we actually have a whole bunch of documentation around modeling written by the amazing Romina who was in chat earlier um and there's specific stuff around all the fields we're using and all the additional fields that you can use to do the content modeling as well as some like how-tos and philosophical things linked to our documentation there around some of the things that we talked about as well that's not the technical aspect but more of the working with uh with your editors and your developers together yes the methodology if you will any any parting shots before we go low no uh happy content modeling happy content modeling y'all see you next time bye everyone