A Uniform Canvas use case deep-dive

actually i just clicked the button we're in live now a getting started a screen that nobody saw but we did it this is what it is yes oh it's got this like them yeah stuff you see some weird stuff good to see it now just it's kind of mirrored i'm used to the other thing other way i think and zoom oh yeah yeah camera settings and all so we are actually live watching us which is very cool great welcome everyone we value every viewer um so we have a whole bunch of tools in this live streaming setup so if you have a question or comment you can put it in and then i can actually do this hey patrick what's up um oh look we have more people um hello alex hello pat what's up thank you for watching us um this is the first time seth and i are doing this so seth how was your week ready to rock week's been great yeah doing making a lot of progress on the on some work here on on my side and just saw a demo of uh of the demo a demo of the demo there we go yeah it's like meta you don't get much more meta than that but um exactly no yeah it's been really good though we got this new marketing engineering team that we're working with and it's it's a good we're all getting into a good groove so i'm pretty awesome i like that yeah so yesterday night i felt like i needed to do something with cloudanary because i really like images and video and stuff like that and so we had this live stream plan to kind of just talk about uniform and then i thought i built this thing last night how about i just show you what i did you either critique it or you're telling me dude what what did you do or anything goes right and so maybe while i show what i do we can also talk about what uniform is because this is the first live stream we've done in a good while and we're featuring big commerce today we're featuring cloud and airy a little bit of content full and of course also uniform and so um how about i share my screen and show you what i've built or well let's see i think man let's see well right now this is what i've built this is where we're at right there so this is basically just um let's see it is running locally for the moment and it just couldn't find our our canvas composition because i haven't made it yet because i removed everything so i can show you today and so basically i want to show you what i built and what i did was i had a meeting with cloudani because i've worked with them quite often for quite a lot so we just we have regular meetings just chatting about stuff and they said hey we have this shoppable video thing and lots of our customers like to have shoppable video because that city had a fashion show or they had like you know a model working in a full outfit and you wanted to kind of like highlight the things that they are wearing in the video and then you can just be inspired and click and buy and then i thought hey but we have integrations with cloudani we have integrations with a commerce engine like bigcommerce why don't i just kind of build like a system to do this shoppable video and i'll show you what the shoppable video looks like so basically they have like in a cloudinary video player that plays videos from their cloud right and now they also have some other stuff where it's more interactive and it can just live stream things you can also add products to it and so i thought why don't i just make this whole experience look there's the product here yeah right and so it highlights which one it's showing at that point in time you can even like hover you see it's highlighted here i think you can also just go here and then go back in the video and see a little sunglasses tooltip this is pretty cool right yeah and so what i felt like i had to do is i just make a composition in uniform and then basically from the composition go to this json render the video player and see what happens and it worked so there you go so let's go to canvas and seth feel free to ask me anything while i do this because it is kind of ghetto but it works so in my component library i made a little hero component just to fill the page out with some fun content from contentful and then i made a shoppable video component that can contain chapters and hotspots okay so basically shoppable video just there's not that much to it it has a cloudinary video that you select and it has like a little call to action link that says let's shop stuff like that and it holds chapters so a chapter is yeah let's let it load there we go has a whole bunch of things it has a title it has a big commerce product connected to it it has a cloudinary image and then you know where in the video does this thing pop up and what happens when i click on it and then also inside we can actually add these hotspots that have an x and a y value based on where you want to put it in the video and then there's also a url there so when you click on the hotspot you go somewhere so well how do you control that like the x y you would think that it would be constantly moving right yeah and so i think it's slightly limited in their system where you basically say show the hotspot at this point in time you cannot actually say how long it's shown and so you can get one hotspot at a certain second or minute per you know point yeah so we'll just add it in and we see because there's probably a couple of um variables that you can add in that changes that and when i show you the code here we'll go there in a sec and then we'll see how that was done but let's first just create a page and we call it landing because that's what i used in my code okay and so the page itself has nothing but the slug needs to be landing um okay so let's first add a hero why not because we like to do these things like a bit of extra content right and so we just go i just connected this to this contentful of my personal website so let's just you know just whatever this guy and here let's add a an image from cloudani and this is the integration we have with cloudenary as you can see it's a little bit more rich you you can actually have their whole media library in here let's just get some lego bricks you know why not yeah we do like legos let's save and publish this and let's have a look what this looks like okay saving takes a second wow this is the demo effect oh guys wait one sec we have our lovely colleague william who just joined us dude what's up hi sorry hey william yeah hi how about that i'm yeah i'm currently in poland in krakow oh and you still join the stream that's what we like to see awesome so much for joining in with your wallpaper back there with that shirt i like it yeah it fits man color coordinated only rules so um yeah how's it going introduce yourself oh yeah i'm william i am a technical pro manager by day and at night i just make magic do some write some code make magic that's the word we want to hear like we even got this comment how about that mine is blowing i love it yeah i just do stuff during but mostly around developer advocacy you know writing software and also creating technical content so writing technical blog posts and articles awesome yeah so thank you for joining our stream um you are a little bit newer to uniform and then seth is even though he's also still quite fresh so what do you see here feel free to comment and say hey isn't that strange or maybe hey that's awesome whatever you want and then with that we build up to what i've done and so i've just gone over um what kind of components i've done and what i want to be building which is a shoppable video with cloudanry okay let me just start by building that thing that we just let on led up to so we can add a shoppable video component and so this component has a cloudinary video item and a call to action and inside we can actually add a bunch of chapters and products to make that shoppable so let's add a cloudinary media item and i already uploaded this same video as they have on their demo so we're safe right i'm not going to do some copyright infringement here okay that would be kind of silly so we just had this little video here and just say and about that job with uniform and big commerce i have to spell it right and so ins so now we just have a simple video on the page sorry let's add some chapters so i have a chapter that fits in this slot and let's call it um sunglasses and so i haven't actually done this yet i wish i did but didn't have time so inside big commerce i don't actually have well maybe i have sunglasses oh we don't have sunglasses in our in our um in our system here but what we can do is just find one of the products i added like fake dim products like next 101 because i like next let's add this one in and so now what we've done we have selected a product in bigcommerce and we have a title for our chapter and let's add in like an image that cloudani will show when that chapter hits and then i actually have a shoppable thing here yeah there's the sunglasses and then we have a whole bunch of things we can do here so when do we want to show these sunglasses probably at like i think at four seconds and end them at like seven we'll fine-tune this as we go along yeah this to me seems like the hardest part is like how do you dial into the specific part of the video and how do you uh accommodate the movement yeah and i think the way to do this um is maybe just publish it or at least well maybe go to preview or something in my case now it's even localhost just run the thing and see if it works and then you just update these times until it's nice and you have that you know what what their documentation kind of says or does it just leave it out and you gotta figure it out there's nothing much there to be fair it works that's it yeah so they just say these are the models you can use to add hotspots and videos and products and things like that and then you figure it out yourself so gotcha maybe we can find um sunglasses oh maybe not with an f it's just like normally of course you would have a product page yourself that has a big commerce product on it right but we don't have to haven't that built that that's not built yet so how about we just go and you know grab some sun gas glasses that we just linked to normally this would be a little bit more integrated um and so let's also add a hotspot and so that's interesting right now to show when that hotspot shows when i'm just gonna do it at the same time as this chapter starts at four seconds but i have to do it now like this what is it other than just type four this is cloudineary's back i don't know it's really fun so william's asking what's a hot spot right so show them the shop video example show them the original sample you showed oh yes of course you can now see me struggling with my new fancy clicky keyboard where i just have fat fingers still yeah we're working with it i like it though um so basically here so when you hit play here you can see it's now currently on the video on the sunglasses now is the dress and now you see it's that back so it highlights it when i click this here you actually go and see this little hotspot yeah that's pretty cool and then you can click on that and go somewhere basically oh yeah i i've used like shopable video and cardinality before i just wanted to show it you meant the same thing sorry i didn't understand the last bit yeah i just wanted to be sure this is like called nice specific lingo this is very specific cloudinary lingo exactly oh okay yeah this is not words i made up the thing is i i made it um i made it call chapters but i think cloudanary calls it product so i might have i probably have to change that yeah anyways um let's add one and so let's do just in the center for now so these are just percentages and just beware i built this in four hours of which three hours was literally trying to get the video player to work so the rest all the stuff that you see with with uniform is about an hour so it's quite janky but that doesn't matter right just building stuff and talking about it that's right that's right that's exactly so let's put this in the bottom and let's go to that same thing okay let's save this guy and i'm getting a message let me quickly check okay all good so let's refresh and see if we now have that player yes we do i have zoomed in a bit so that's kind of oh that's still small there might be an issue here or maybe not let's say because before it was showing a bit bigger there we go i don't know what that means just i don't know what this cloudiness video player is giving me now but is it responsive by default it has to be yeah let me check i think you can get say fluid is true or something like that say and tim do you ever use the mobile view um in the little icons oh you mean this yeah not really i don't know why i just yeah i tend to like that because it allows me to kind of yeah you have a bit more control here right yeah right yeah okay so we added this shop with uniform and big colors that's cool and here we have our sunglasses so let's see if we play it when it gets highlighted four seconds there you go and then at six seconds it goes away again that works so when i click it now ah there's the hotspot it's a bit of an awkward position all right let's see where this hotspot should be we'll have to check actually it should be at five seconds or five and a half or something how about we just do this and make this also start at five by the way i'm also clicking publish now because in my code i didn't actually say only look at draft i just didn't code anything i just literally just went very fast um here we go internet is not super happy as you can see it's waiting for cloud in there to load now you can see in the like in the bar down you can see the four and a seven like you look like they showed the start and stop right let's see when i click on it okay so now if we change the position it will work right so that's pretty cool and so now when i click this oh oh i know why it doesn't unhover oh it shows you the next 101 now but it's because i'm doing this responsive thing that there's no proper hover like okay now it's desktop now there's proper hover yeah and that next 101 is actually um this big commerce product here yeah okay it's it's not showing up now something is oh there we go and so of course normally you would have a link for that and that's what you put in here right now we just put some other link because we're you know we have to be a bit flexible but that's kind of the gist of it and if you want you can just make another hotspot or other another chapter but let's call that dress let's do that about tips and tricks about something about buying dresses yeah exactly all good there's the dress but when do we want to start that dress uh seven seconds i guess and so how about now we don't do a c in video but just directly go to the product and um let's just copy that same url just for you know ease of use so what's there between uh go to product and seek in video show the yes this is what i've read here what they what they offer you and so basically um let's refresh and get what we have so now when i basically click on this one it will just seek in the video to five seconds wow nice yeah so you can just skip ahead to the product you want yeah and if it's just a click go to product what it should do but it's not showing up here it could be just my crappy code um then what it would do is actually just go to that url sure um i don't know why it's not showing um you published right i oh wait i probably didn't publish that's that's just my bad because i should change that in the code you see that's why we do this together i need you guys all right let's see this is just mind-blowing stuff i'm just thinking of the capabilities of this yeah if it actually worked but oh there it is it just took some time to to render the image and so okay let's see so when i click on the glasses it seeks in the video to the glasses then actually let's wait for when it's dress time yeah so it's highlighted now because it's looking at it and when i click directly goes nice to that product page um and i think even when we reach the end turned on that setting oh like in the cloudinary video it actually shows these three here at the end still and i think there are some properties that they're setting here i'm not even sure if i did these they're show post player overlay true like there's a couple of variables you can set that i didn't really integrate with but the fact that you can do this this is not really what you expect normally from like page composition like stuff but like why not do this right because let's say this is now our shoppable video we're very happy with it i could just say make this a pattern and call it and now everybody can use that shoppable video anywhere that fits right if i now made a new composition i just put this thing in and these are hotspots and all the other stuff that we're dealing with and so now if you have this on six pages you just go to the pattern where it's defined and there you added it and it works everywhere and so this is kind of like a way so we're going i was going to say in like a you know real world scenario you would keep those blank right you would keep the chapter and hot spots blank it depends what you want to do because these chapters and hotspots fit to this video very specifically right so i just make one that i put everywhere in the pattern or you don't you also you don't have to make this a pattern you can also just do it um from scratch every time if you want to do something else right so this is now like a little unit that we made and like we can now go on and configure some like see now you have a pattern here and you can just put that in and now it puts everything in and now you have it twice well of course you won't do that but this is kind of a nice way to content edit because i've not integrated with bigcommerce at all i've not really integrated with cloudenary at least not in my code this was just something i could click together however the magic of course happens when you code something so this actually becomes something that works so before i dive in how i coded that did you guys have some other remarks or questions or you maybe want me to try something else um i i wanted to find out if shoppable video is a specific component in mesh like in integration with cloudiness what other components are there so basically yeah i know i know this is a good question so let's go and look at our integrations so we have integrated big commerce for that product information yeah and we have cloudinari as a specific integration as well and contentful for the hero and so basically there's nothing specific in this cloud and area configuration here for this shoppable video thing this is literally just my global image options the cloud name and my api key so i can actually use the widgets this is kind of what this thing is and so this shopable video is something i just made in code and so we do have a component here shopable video which has a cloudani video prop right so it it has some specific settings just for this one so this is now added to the video but because it's a video i don't need responsive image widths and stuff like that but when you go to for example one of these chapters that have a little image this one has a product but also a cloudinary product and that one might have some responsiveness so i can you know add a source set and so this is not specific to to cloud an area it's something i like to do so with this information i can actually now render it in my front end and so let me show you what it looks like when you have something like this whole thing worked out right when we look at the source here is that big enough i think so we can see it so basically okay we don't have to look at the hero for now that's not what it's about so we actually oh this is the the image for the hero okay here we go so this is our shoppable video let me just zoom that in a little bit more so inside we have chapters and this chapter this chapter has a slot for hotspots and so these are just those x y url the timestamp stuff like that and you can see for bigcommerce we just got the product id and for cloud and air we've got a little bit more because i decided when i built that cloudinary integration that we wanted a little bit more here we wanted width and height and what format it is the public id because this i'll have to give to the to the cloudinary video player otherwise it doesn't know what to render yeah so there's a bunch of stuff that our um what do you say like our mesh integration for cloud and area always adds and you have some global options that i like personally and like this these widths this doesn't come from cloud and air itself i added that in myself so now when i go to the front and i get this object i can actually render a source set and a whole bunch of other stuff and let me see if there's some chat going on now we're good so basically i think now that we know how this is set up you see there's the seek in video or go to product kind of stuff there's a whole bunch of json that we now have to make into something that becomes a video the shoppable video that is because this is a specific thing in cloudinary right so when we look at my code here and now we go deep um i am actually a few ds dude this is my base but i need to learn react and i need to learn next so this is a next project and um as you can see here i had to use react 17 and not 18 because the cloudinary player said no and i also had to i had a lot of issues figuring out what version of the player to use and in the end i used some mclaren contacts and we figured it out which is really cool so it works pretty well now so i have some contentful stuff i have some big commerce stuff i have some like there's not that many packages going on here so when we look at my my app is just same out of the box stuff that next gives you so this is quite bare bones what i did is this is kind of close to how you would do our tutorial on next yes and and at uniform and i can put that here let me see i'll put a url to the docs actually here on the screen it has to make the banner oops this one so um all of what i'm doing here you can find that there it's really easy um let's hide that again okay so basically in my get static props i make a uniform canvas client with a bunch of environment variables how all that works you can find the docs and there's a bunch of tutorials on that and so what i do remember i made my composition called landing right that's the url so i query that composition and i get this data but if i just get this composition data it basically looks like this right this is a bit too zoomed in here so there's not that much to it right there's just the big commerce is just the id and for cloud in there it's a whole bunch of stuff but it's not actually an image stack or actually it's not even close to looking what we need for this video player here so the first step is to get all that data and enhance it with our enhancer middleware once that is in i can then push that to the components and do all the other stuff that we need and so basically we have these enhancers stuff that i um in import here and so the enhancers start here so we make enhancers this is an answer builder comes from uniform and so for the parameter type that is bigcommerce i'm just going to use the bigcommerce enhancer to query that data for me for me from bigcommerce and then i have another enhancer that cleans the data up so i like the data that i get to put to use as props and you do the same stuff for contentful and i also do it for cloudinary and so let's quickly have a look at that big commerce enhancer i literally put everything in one file here that just makes it easier for now so my big commerce enhancer has a client that is a big commerce client which i make here literally it's all one file right quick demo one hour of work so i connect to bigcommerce and then i make an enhancer so uniform sdk knows what to query when it finds the product id um so that's big commerce and then i also have this model cleaner so when we go there i get the parameter with all the information and from that value you have lots of stuff but i only need these things i didn't need the image for example and i even loaded there i don't even have to i don't want the image so from all the stuff that i get from bigcommerce i only return these things nothing else i might not even need these in this case because you don't see them the shoppable video so you take the the data from uniform you query to get it to enhance it then you then clean it up to get basic yes it's a fight field you need you know exactly and so that's what's so strong about our our enhancers because for every parameter type that is big commerce i'm just gonna compose the data i want so i'm gonna get the bigcommerce enhancer which gives me all the information about that product and then i clean it up and that's what's going to my composition to my components i do the same stuff for contentful contentful is a little bit simpler i make a content for client from their npm package i make the enhancer giving it my client and then when i clean that up i basically just say give me only the fields that come back rather than all the cis dot stuff that you also get in these api responses so this one is it's a very simple cleaner but it really helps us and then for cloudinary we didn't we don't have an official enhancer so i just made my own stuff right when you look at this enhancer here basically this one is a little bit more complicated so i get that whole json object right that we just looked at at this stuff and with that what i do i i extract the cloud name from the url because i don't have that actually in this json well i have it it's here at one point i might upgrade our mesh integration so you get more right yeah um and then i just really return a bunch of stuff that i can use right i'm i'm concatenating something like i have some base options q auto f auto i just replace the version that you have in this url here where is that this version i have that so i just replace it with some options so then i have a base url and if i have some transformations added i add the transformations to it and then if i have something like widths specified which is 300 500 here um i create a source set which is kind of just a bunch of smart concatenation to make an it's you know an image stack source set attribute and so my enhancer just gives me very easy stuff so if i now wanted to add an image i just have image stack source set i just got it from here alt and stuff and run and so that's really nice and if it's video i don't do that of course i see one typo actually oh no yeah go scroll down to uh 78 transformed f instead of a d no so that might have been maybe something that's not good and this is my ghetto quick stuff because transformation is spelled correct i hope this is not in the official mesh integration i'm gonna have to check that after the stream because that would be kind of yeah anyways um so this is i just wanted to show you how we enhance the data from like this relatively bare thing where we just point to sources to something we can actually use and so let's go back to that page right so we have the information here and we returned it as a prop to my index page and my index page function now has this composition and so what we actually do here this is comes from the the the api that uniform gives us right so we have a composition with data and the data is actually that composition that we got so this component has all the information it needs to start rendering stuff and we have something we call a resolve renderer which is the following in this case this is a very simple one basically you import all the components that you have and you make a little mapping and you can see this hero is a lower case here right that actually matches this hero here so when it sees in the composition hey there's this type hero or type shopable video you see how i did that so i have a mapping from hero to the hero component i just imported here and so basically there's a little renderer that says okay this is my component let me just have a look at the type in my mappings and return that imported component here or if i don't have one let me give you the default component that canvas gives you which is really nice just tells you hey there's something here but i don't have something to render it yeah and what that does is it tells this composition component and the slot component to then dynamically render stuff and we have the slot component here because you see components that's actually the slot that all this stuff lives in so what i want to do for that slot get all the components and render these components on the page and that's what our slot component does for us and there's lots of black magic behind that we don't have to go into now but in the end it just looks at whatever stuff matches from the composition to the components i have in my file system and it just dynamically renders them and of course adds all the props that come from uniform from my enhanced composition and what you get then is that it renders the hero which in this case is very simple right it's just this is the stuff that comes from contentful this is the cloud in their image that's literally just i get my my entry which is contentful and from there i have some fields that i just render in here so this is a very simple one but now let's let's go to the crux that is the shoppable video because this one took me quite long actually longer than i anticipated so what i do here is the video player itself does not work with ssr because it needs window to do stuff with the video attack right it's normal and so i had to kind of dynamically load the video player that is the shoppable video with ssr false and the video player itself is quite simple i just had to use a use effect so when the dom is ready or when it's mounted i just connect the cloudinary video player to its id and add the props that i give it from the other component and then it just works and there's a couple of other variables um that i added like this start state banner message that actually comes from here and where is that start state banner message this kind of stuff so i kind of hard cut it a little bit but then the products that's where the magic is so let's go to that shoppable video and so from our component that react puts there for us we get a lot of stuff right we get a parameter for the cta which is like that little little text below the play button and then i do a whole bunch of let let me just go over all the chapters let's see where do i do that and there should be a for loop somewhere yeah or a map so i map over all the chapters and i just you know get the stuff that i need from the product um if the click action is go to product i fill it with go to and a whole bunch of stuff specific to what um cloudinary needs right then if it's seek i do something else then you pause it and i have to convert time durations to make sure that it works that's like a really simple function to convert this is stack overflow 101 basically um and then yeah that's how you do it right if you have not so much time and then if there are any hot spots i push those in as well and then the result is kind of a whole thing here where i have the product id product name start and end time and the public id of the the cloudinary image and the click actions that we filled out here and then if there are any hotspots i push those in as well and that's what happens here so this makes a whole lovely basically array of json that is kind of mapped into what this video player needs so we can actually maybe have fun and see what that looks like when we go here now so i create from our composition this is what i created so the cloud name the cta and then the products and of course the video itself that has to go to the video player that's the id and so here you see there's the hot spots on click action with the arguments and of course this is not really defensive coding i just literally get out it in there but it works you know when you fill out the right things and this whole object looks exactly like whatever they have here and that's that was the goal right make it happen and there you go brilliant did this make sense yeah this doesn't make sense it would be nice to see these in some sort of like packaged us either help our library like help our functions or utility functions to implement this because it seems like oh yes stuff you had to do together if you look at this code you're like tim what have you been doing what is happening why i'm thinking like to render that video the show people video i have to do all this thinking about my life no no of course but that's the interesting thing right like we had a bunch of meetings um with cloud and airy and like how would we place uniform inside the cloudinary ecosystem and how could we work together and they were kind of looking at it like oh yeah but are you a cms or like how do we integrate with you and like what's happening here and then i was like yeah but why don't i just show you that you can as a developer do all this fun stuff that you might not want to do like i kind of know how this works so i felt like hey let's do some data mapping and run right but if you look at all this where you can say let's connect bigcommerce product let's add a cloudanry icon without actually connecting bigcommerce and cloudanary and uniform and next at all they are all loosely coupled and the clowning area plays a pretty big role in here because it also has the hero image so there's there's lots of things going on here where um grounding area fits in and i just wanted to show this to make sure that people get it and that we don't actually store any information but we just point to it and of course what we're thinking about for the future and i know when alex is in the in the chat here he'll know that these enhancers that i coded here that's quite a lot of work right like i know how these work i've done it many many times and when you get it it's very easy but this is a lot of code to get data in to query it to map it and then go somewhere and we're going to be building lots of these enhancers kind of like out of the box and it just works right in the end you would only need this little piece of code because my big commerce enhancer comes from an npm package i push in my client and run nothing else same for contentful same for cloud and airy probably because these don't change that much unless you want to do something yourself right because what you also see sometimes is okay i have 25 calls to contentful i want to actually then make those into one call so i want to batch them and we have properties in our enhancer to do that but then you'd have to code it yourself a little so over time as we do more and more integrations we'll just kind of out of the box these things and then suddenly you don't need all this stuff but the beauty of it is you can use all this stuff and you can literally do what the heck you want because here i have this big comma stuff and then later on i'm mapping this big commerce to another place right here this one i could do another ajax call here to go to cloudanary get some stuff and then push that in here as an image yeah suddenly i chose to do that so i am in charge of my own data model yeah that's nice really interesting right and lots of companies have a storybook full of information full of components they don't want to change the props right let's say you have a style guide so you can use these enhancers to completely change the props so they actually work to these components that already exist yeah good point and that then suddenly you basically what this means is uniform is extremely flexible but you kind of have to understand all that flexibility to use it like a master and so we will have to go into a way of saying this is how we want you to do it done don't touch it again right and so this you likely have to do once and then you never touch it again unless you get another parameter type right and the other interesting bit is that this whole thing this whole file could live in a serverless function somewhere and then your front end has no idea what this stuff is so you could hire an api developer who would actually build this stuff for you you'd just say i need these props thank you and then it becomes very interesting right because your front-end doesn't need to know anything about it the stupider your front-end the less bugs you have and to look at it this is great stuff man i just built this last night and i felt like you know let's talk about it well that just speaks into i mean i don't want to say simple the word simple in development isn't isn't really but the simplicity of uniform and how it can bring all these things in and how you can compose stuff that's not coupled like you said and you can do that fairly quickly it's then but then you think about the enhancers well if you already have your enhancers built that's a lot of your work that's taken away right oh yeah sure and we actually have agencies now that have a bunch of enhancers that they have pre-built that they like and they just use uniform for every project put in the enhancers and they win like a hundred hours per project it's brilliant because they no longer have to connect to all these things in their front end well then you have like you have your your developers like presenting with your marketers with like okay here are the components right we've already built your components out we've already got everything you need you just go in and compose the page exactly that's that's the way to go and in the future there are so many other possibilities with this with maybe prototyping things or having a design system in place that then connects to this stuff and right now what you saw is a little bit not so conventional like maybe um i can share my screen again and then show you another way of how this is used a little bit more in a conventional sense um for that i have to go to canary which is where my site lives because i'm living on the edge just like there is exactly okay let's see so this is a little bit more conventional so this is my own website as you can see there's a whole bunch of integrations here i think there's something wrong with sentry that's why the page doesn't load as fast yeah currently there is so i have lots of things i even have for cell integrated so i can see i can just open my site from from that for sale item it's very cool you can see um my build log and everything so that's that's very neat um i use contentful and prismic like my blog posts come from a different place and i have big commerce just because i want to show demos right but if this is a little bit more conventional right so when we go here we go to the home page um i'm not doing all this crazy stuff with building up hotspots and oh boy sentry are you blocking my page load now so what made you choose to do your blog post outside of contentful i don't like their rich text editing interesting so you just that's that goes to show you how powerful it is you said you know what i don't want to use contentful i want to use prismic for my blog post and it's like all right cool we'll bring that in and you know it's actually worse i have some i actually when you go to contentful my blog posts are there but it doesn't have the rich text it's only the metadata and then the rich text is actually in prismic because i used to have everything in prismic then i migrated everything to contentful for my new website and then i realized it's really kind of shitty like this is my opinion this is not uniforms opinion where if you get the rich text data from contentful you have to have a package to morph it from json to html and that works pretty well but their opinion on it i don't like the semantics of the html they put they put p tags around everything i have to rip it out they're really hard i just don't like it personally and then when you look at one that prismic comes with it works really well it's a very similar approach but much more standards driven and i just like web standards yeah so what i had great that sounds great you you made that decision on the fly and it didn't affect no problem at all or anything yeah you just integrated prismic that's great i do some crazy stuff right i load through contentful i load my blog post and then in my enhancer i go to prismic and i get the rich text and i push it that's why you have an answers if i now want to get that indeed in the end from contentful because the import is done i just remove that little enhancer and suddenly and prismic is gone right it's very interesting so this is a little bit more average right on my page itself i have an entry for og tags let's see if i'm logged in would be nice if i had prepared this but we're on the fly now and so basically on the edge man so on the fly on the edge but this is my page page metadata so i have a title description og image publication and like if it's a video i add some like micro data and stuff so i put that on the top of my page then i have a header with a whole bunch of navigation items so i can choose from here what these are and i literally just go to a url it's very simple then i have a hero this one is actually very similar to what you just saw on the other demo i took it from here basically and then i have something like video highlights it has not that much and inside there's a couple of videos so when you have a look at the preview here let's see if it's going to work and just put them side by side um here so we have the video highlights it's this component right and inside there's a featured video and two like normal videos so i have a slot for featured and two normal ones and what the beauty is of uniform here is that i choose in uniform the fact that my feat the video is featured like the variant is big yeah also that my background is light if i make this dark and i hit save i'm not sure if the preview is currently working based on how slow this is it should show up at one point but this i think sentry is giving us a bit of issues here well but the point is you're you're doing your presentation within uniform exactly yeah okay so um this is oh there you go so it refreshed now and this is not dark but my cms should have no knowledge of the fact that something is light or dark my cms should have domain data the video itself but the fact that my video here now is big that doesn't exist in my cms at all it's only in uniform yeah and so this shows this is a little bit more of a conventional way of how to use uniform where you are the data of how something is rendered is in uniform like i have small left right i just make small right here hit save yeah this is constantly waiting for that so what you'll see once this is loaded and i hit save you'll see that that changed here but my cms has no idea about that okay so there's no no longer are you putting a uh check box in your email as a feature exactly and just put this back before i destroy my website and so this is a little bit more of a normal approach to it and if i wanted to have something like products i could do that here and here i say again i have something light and the title for products is connected to my home page here so that shouldn't come from some cms because this copy will probably be personalized or different every time right yeah and this is where that's sort of where the confusion comes in we're like is are you a cma is uniform or cms or not you know and it's you know what in the wrong hands we can be but let's not do it yeah exactly we don't want to hold that data yeah um we only want to have compositional data right okay so um i have to drop off now i've got like let me say i need to jump right into it but this was fun i guess i'll do it thank you so much for joining me yes good to see you william next time and so here are our products and so this as an experience for me i didn't know what bigcommerce is i just select something and it just works that's a very nice thing to be doing right and then you could also personalize it and go full force ahead and this is how this was built and so i kind of almost misused this with my cloudinary thing just now but maybe it's not misused maybe this is just one of the many ways we can use this stuff right yeah i mean yeah maybe maybe a a marketer or or just just wants to do shoppable video component right and just wants to put it honestly if i go back to my career at agency working with all these luxury brands all of them wanted this oh yeah we built this from scratch also quite often for fashion shows where we had it at the fashion show that was kind of insane where our model would walk and there was a big screen behind her that we built from like 100 lcd screens back then and then we had like tooltips follow her while she walked wow life and then that would show what it was but that was kind of a one-off yeah three months of no sleep going to new york installing everything it was insane yeah but all of these brands want this kind of stuff like hot spots on products and things and now cloudineary did that yeah but if you don't have a nice way of integrating it nobody's going to use it and this is a really nice way of integrating it totally that's all i was going to say is like you could just use uniform you can use uniform just for that if you wanted to right you could just say you know we're gonna incrementally adopt this just for this uh cloudinary video example we're showing and we're gonna pop that into our little section of our page you know it's pretty powerful you know so like incremental adoption where like someone might say you know well we just want to do this type of component and and start there yep and yeah that's what makes it really solid because you can also do and this was kind of like that right what you can do is have a uniform composition like this one let me just show that again like this one and imagine here you want this shoppable video but you don't have any sort of you know information here about it or let's say here you want to have ratings and reviews or some third-party component you can actually make a composition that's relatively empty like i have one here i can actually show you like my video page this is a composition that has nothing in it okay that's load it just has some components without fields right video hero with nothing video page with nothing and this only tells my front end here i want to see this that's it and then the front end says oh let me just grab that third party component and plug that in here because that's what i want to see here so you don't even need to connect everything in uniform you can just say this is the composition that's it yeah that's a good point and what i actually built for this one when i now go to one of these video pages um you see how to buy gear in 2020 and then like i can go to another one that's this composition filled by my enhancers yeah yeah so break down real quick like while you're in this composition on the left break down what were how it translates to the right okay we're gonna go deep now we have four minutes left to the end of the sprint let's go into it i'm ready so basically what i've built is this i have a compositions app separately running gotcha yep and so if i go to the single video composition or url anyways endpoint it finds my video composition that is empty right it's these three things yeah or actually the header slot is not empty but the rest is empty so what i then do is for each of these components actually i should not close that i should close this and you see i have that video page hero which is basically this guy video like sorry i have to go here it's the title and the breadcrumb and the tags and let me just slide that a little bit bigger so i don't have that css issue there we go i like it more now yeah making my eyes tear up if that doesn't work that is in uniform like that yeah so basically no this is interesting right this information is incontentful but the fact that it's here is in uniform so the video page hero component is empty in uniform right you can see there's no parameters here at all but you see it on the page so what i do is i go to my enhancers i query this url here and give it the slug that i get that i got from here it's that's this slug so let me just get this actual thing here on the screen wow my internet is slow today there we go okay so basically um you see hero title how to buy gear for content creation that's this guy that's the tags and so what i do with my enhancer i actually find that component and rather than adding it into barometers i add a data enhancer so i query contentful i get the right data for that component that i want to see and add a data property here and then my front end rather than looking at properties for parameters it gets the parameters from the data prop and then just puts it in because the next one is actually the video itself no parameters where you normally would have parameters no i added data and so here i have the video data prop with the slug the title publication date poster video id right it's a youtube clip so um this component i don't want you to play okay thanks um and like then the next one is related videos that's what we saw in the composition as well again empty but i add data to it and here i just query i think i might have created algolia or something or some other system to match these tags to related videos because they're all like career driven i think something like that or personal that's these things and so you can have an empty composition and have smart enhancers and just fill it up and have a dynamic page here but this is quite deep like we need to find a standard way to do this in uniform and this is one of the ways great so yeah like if you have a platform like this that has no opinion you can do anything you want you can go completely crazy and that makes it a lot of fun yes for sure man i've been trying to i've been thinking about building my site in uniform like you do um right now it's just you know remixed and deployed to network file but i'm like i'd love to get into remix that's gonna be a fun one yeah that's what i can imagine you learn a lot you've learned a ton just by building your site in uniform you know you know what's the fun bit i found things that i needed told the product guys and we got it nice i actually defined half no not like a lot of features of contentful for example how to query contentful that we didn't have before and i said hey i want to just choose and pick three things or i want to search for something or i just only want to check one of them stuff like that and so i just i was like patient zero kind of trying this stuff out for sure there you go and this is the result and it made me learn react for example that's new to me right so there's lots of things that it makes you learn and you get to learn the product from the inside out because as a deveral or a demo engineer like you we kind of need to know the ins and outs you have to be able to talk about it like this and do these crazy ideas like a shoppable video but yeah there you go so we reached the hour quite quickly i like it good first stream yeah um is there anything you wanted to share about what you're doing or what people should watch next time or anything no no we just uh this is just a kind of starter you know get started stream getting to get get bring it back and we got some ideas on different things like you and william is going to come in and help us so it should be pretty fun and we got a lot of things that a lot of ideas we could pursue you know in terms of content and how to do this but i'm glad we got to jump on this first one exactly i'm excited so thank you very much uh seth yes thank you tim thank you for everybody for watching and we'll see you next time cheers you