Getting started with Uniform DXCP - The why and the how

this is Tim from uniform and this is a getting started guide for uniform and a project that you can run with it but before we actually go into like all the steps and how it's coded I need to talk to you a few minutes about what uniform actually is what type of product it is why it exists especially and once you get that the getting started is going to be a lot easier because uniform is a new type of progress a new category out there and that's why I'm explaining it to you like this so let's go let's talk about the modern tech stack and what it looks like and why I actually think or where uniform thinks it's not gonna scale because generally you are the composer of your technical stack when you're starting to build a new project right and so what you do is you grab a collection of tools or Tech from different vendors and Technologies like headless CMS headless e-commerce hatless digital Asset Management you combine it together put them on a CDN and there's your website but actually just combining headless tools and apis together somehow doesn't mean it's high quality or actually composable to use a fancy word it's actually very hard to build stuff so let's say how we normally start a project so you choose a CMS I like storyblock so I use that next to a CMS you need a front end so I like next there you go so now we have story blocking next we connect them up through some SDK that storyblock offers and there is your data in your front end but let's say we're scaling up right we're going to be in e-commerce that's used um across the world we're scaling up and up and up so you're going to need more tools so to get started as a brand you probably want a Dam system digital asset management and cloud and air is a very cool one because you can actually store your image sources there and it can also actually serve these images so you need to connect them to both your CMS and your front end um as you're growing you're going to need good search so let's add algolia to be able to search through all your pages and make lists of stuff like products and things and that needs to be connected to everything right because when you have a story block page or something you build it needs to be indexed by the search so it can show it on the front end well we were making a Commerce so here you go Shopify we need to connect Shopify to the front end to the CMS because you have to somehow select products um you need to have it in the dam because Shopify headless might have some images that need to come from them or be pushed to it something like that of course it needs to be indexed by the search index you can see there's a bunch of connections going on and they're kind of all hard coded into each other through either their app stores or through your front-end code right so you need some analytics then you need a CDN to put it on this can be anything but I just chose natalie5 because I like them and with web hooks they all need to be connected because when something changes somewhere in either git or in your web hooks a new website has to be deployed or an update something like that and then when you actually grow you get something like HubSpot to track your customers to send them you know personalized emails things like that so let's connect everything up there so it exactly knows what it can do with that you see how many connections there are now imagine we're really scaling we're going to go from Europe to the US but in the US they chose a different CMS because why not these things happen all the time let's add it and you can see the nastiness you have to connect everything up just like we did with storyblock and then hope for the best and so this is what has happening all the time right now when you're building projects I've done this before because there's no other way to really do this nicely right and so let's try switching out one of these items in your stack I dare you going to be very very hard so you wanted this lovely cable managed because we went heartless we could choose as developers how to connect everything up but after six months you built this or after a year or whatever and then nobody's happy and at one point you throw it away and you start from scratch maybe with a different tag agency right that kind of sucks it's very expensive and so now what how do you solve this problem well you can solve it by using something called a digital experience composition and so it's a dxc it's a type of platform that helps you to compose all those things together in a nicely organized way and that's what uniform does so there you go it took me a while to say this is uniform uniform is a dxa and so you are now on the left and there's an amazing architect that sits on the pile of cables that knows where they go or at least they can find out what if this person is on holiday and something breaks or if this person is fired due to economic downturn or any of those scenarios where you suddenly are like oh crap I have a ton of cables I don't know what to do well when you have DXE you don't have that problem anymore or maybe a tiny bit because of course your developer you're coding some stuff right but lots of the glue code that you use to connect everything together is kind of taken away by this DXE and that's what uniform does for you so let's talk about how you would build a page nowadays and so I'm assuming here that you know that you're using components generally to build a page so one page is no longer a Photoshop file that's static and you just build it in HTML now you generally have a design like system with components with small things together that become a bigger component and you can combine all the components into something beautiful people well that's what this is so let's say we have a hero component the copy likely comes from a CMS but then the image comes from your Dam then you might have another component that comes from your search engine and then yet another component where it's image actually comes from the dam but it's actually a product and so you see on one page that's relatively simple you might have a lot of different sources actually building that page up so what if you want to do a change to that as a Content editor or a marketer well that's really hard what if you want to change the CMS when they're connected to these components that's really hard um what if as a developer you need to kind of work with the content Editor to make a new campaign you actually have to code things to kind of get it to work or make a super complicated integration into one CMS that has all the things and then hopefully this comes out but you never you can never really preview it so where DXE and uniform come in is here we make an API layer in between or I'm not sure if you can call it an API layer it's just a layer that sits there that takes care of all the connections and then so the front end doesn't know about these connections they're relatively stupid as it were right it doesn't know which means um you can choose any front-end tool that you want because it's not proprietary at all it's agnostic to any Tech you can do this from PHP to Java to any front-end Tech I would say use something like next or nox because it just works extremely well on the web nowadays um it's free right and the DXE this little line in between because it has access to all these tools you can configure your components in there and then content editors get a no code editor where they drag and drop these components and connect to whatever they want the front end only needs to map some props here and there and that's it if you change the CMS or whatever and so this does give us a new separation of concerns of where data lives and how we deal with it because we point to data from a design page right it's no longer all one big you know bag a mix of stuff it's actually separated out so what we have is domain data versus design data so domain data for example is data that doesn't really change it gets enriched but not by much and you can use that data anywhere so it defines your brand so let's say you're selling sunglasses right so you have these sunglasses here um this is a product that lives in a product Inventory management system epim or in your Commerce engine if you don't have a Bim and so all its attributes affected is brown or tortoise and it has a certain size and it's a certain Model A Certain SKU unit all of that is in your Bim system right that's your domain data this sunglasses can be used on a website an iPhone app a bus station poster on a train station whatever that data is only enriched by the people that know everything about that product so when you put something like that on a website it goes into the context of the medium you're showing it in so it could be a phone or printed on this bottle right that's a different medium with a different context to how that looks that's where design data comes in so design data actually shows how these sunglasses are shown on the page because maybe this week they are featured so you need some checkbox that says feature because if it's featured it shows bigger right maybe a big image or a model wearing the sunglasses rather than just a product shot that's a different approach to how we build nowadays because now you just go to your CMS you add a checkbox to your data model for the sunglasses that says featured but that actually sucks because what if the sunglasses are shown in a search result they're no longer featured the code doesn't care about that or when you're changing systems from one website to the next because you're redesigning all these check boxes that you've added to your domain data are suddenly useless it gets messy it piles up you get the bad cables remember you get all the crap you have to deal with that nobody knows about imagine you remove a checkbox and then some iPhone apps somewhere in the US just destroy it doesn't work anymore so separate your design from your domain and uniform sits on the end of the design data uniform has a product called canvas where you make compositions of domain data by designing them in uniform so the fact that it's a featured component or a certain variation or it has a blue background or whatever happens in uniform or in the dxa and the fact that it's this product the product information lives in your domain data and is not touch it's only pointed to right uniform is a place where you have data that points to other places right so this is your page then you have your DXE and in your DXE you can Define the components so this is let's say that here our component well you add a resource that is the CMS and you add a resource that is your damn system then you might have another component that is an algolia component which is a resource so the component itself has a research attached you select which Fields you need from that resource and there you go so generally what you do is you have components in your front end with a couple of props they are connected or they're the same name as the components you set to in uniform skin uniforms they're just Json it's literally just a form you fill name of the component the little icon it uses in uniform and these are the parameters so different fields and so these fields kind of match up to the props you have in your front-end component in reactor View right so you connect up your front-end design system with how did the system in uniform look so people can drag and drop these components on a page you have preview with your actual code and then in uniform you connect them right so these these all just go to some CDN or some server or whatever and then the page is rendered and so yeah that went quickly from the one slide to the next but what you had is you had this mess you go to this mess well that's not a mess at all as you can see it's very organized and if you see on the bottom there's all these surfaces and tools you can actually swap these out and it still works fine the front end is much more stupid than it was before there's a lot less code connecting things up makes it super solid right and so um this is what I wanted to show you about the Y uniform what we actually do now let's get rolling and actually make a project in uniform and code it all right let's start a uniform project and then grab some example code from our GitHub and then get it connected so we're in the browser now this is my uniform account I just logged in and you can see I have a ton of projects but you won't have any there will be zero however let's start clean so back to basic so I'm starting a new project and I call it Back to Basics and then I have a few different project types here you'll have a community project because I have a fancier account because I have to do this all the time you will just choose whatever you have there and it works all right so we're getting started here and you can see it's completely empty and so um let's talk about the different things that uniform use in its wording that you need to kind of understand like um we have all these Integrations here you can see there's a ton of them from cms's to hosters to whatever we're not going to touch these for a second it will come a bit later so let's look into what canvas actually so uniform canvas is your empty canvas to paint on to make pages and these Pages we like to call compositions and on compositions you have components and basically a composition is also a component but just with a checkbox that says hey I'm a composition you can put other things onto me and so compositions are kind of buildup of something we call slots so in each slot you can actually push in a bunch of components and these components themselves can also have slots in which other components can go so you're building a tree structure basically of what components can go where so let's make a composition so we can go to our component library and say you know what let's make an initial composition and let's call this just page right and um here each component can either be a composition component or a normal one that goes into whatever composition you have so this one is a composition you see the moment I click composition you see a few things here because a composition as a page can have a slug um and so basically what I want is the result to be required and globally unique otherwise you can have two slugs and that's that are the same it's a bit complicated um you can set it up like this because compositions don't have to be pages but that's for another time so parameters are kind of the props that you would add to any component from in your front end as well like when you render let's say a hero component a prop can be titled and description and image right that's what this is also um for a page though I want my my one prop to be like a meta title and in uniform you can add these parameters to the components and they can always all have different types so out of the box without any Integrations the types or checkbox drop down list number and text so for now my meta title I'm going to be typing that in uniform because it's kind of the design data but it's not the domain data because where does this live in a CMS just a title field makes no sense right so we put that in uniform and we need to be able to put components on this composition so what we do with that is actually we make a slot and the slot we're going to call content and so because we're just going to do one big slot and normally what you get if you have a bunch of components already defined you can actually select them here and say hey these components are allowed to be in my slot to be able to show you right now we don't have any components built yet so it just gives us the default to do a beat testing localization but for now let's not get there let's let's not go there so we kind of just have built our page component now which is acts as a composition based on the checkbox here and you can do a title parameter here so in any lists where this composition is shown it grabs the meta title parameter now to show in that list what the name of the type of the of the component is or the composition in this case so we can just close it down so now we have in our library a page configured there are no instances of it yet we haven't made Pages we just made the configuration but we kind of want to have a component to put on that page to show something so let's make a hero component I always like to do the hero and like we can choose an icon so maybe we choose I don't know this one doesn't really matter you can choose whatever you want and so this is not a composition because this one goes on to a composition so what parameters does a hero usually have well how about we add a title so right now there's no CMS connected to this right so we're just going to hard code and type them I'm not saying this is what you should always do but this is what you can do which makes it pretty interesting because if you don't have a CMS yet you can actually just start doing a title and description and just typing them in by hand as a developer build your whole front end later on attach to CMS in uniform and you add a little bit of code in your code as a mapping of the data and suddenly there's the CMS but you can already work ahead so let's do title and description and perhaps what we can also do is add a variant um and so what should we do with that variant um let's call it color um and oh no that's not the right one let's do something else uh small so you can actually have a default variant or a small variant and then you can do stuff based on that and so again this is just the configuration of these components of how you can use them and so the idea is that if you make a hero component in uniform you also have a hero component in your react code during your fuel code that match up right so uniform output some sort of data and in your code you say hey this is type hero let me just attach that to the hero component I have fill the props profit right okay so we made this system now so how about we just create a page and so there's no coding fold yet we're going to show that in a sec so let's do a page and let's call it home and then you can immediately see that here it's warning hey I need a slug because you made it required so let's the home page slug is usually just slash right and so the meta title is Back to Basics um so in here you can see now something's not working because I actually haven't allowed um this hero component to be in the slot of our content so what I do I go back I go to my component library and in the page I say all right where's my slots let's open it and say hey there's my hero component that I just configured I am now allowed to be in that slot okay let's save that again we go back to the page and suddenly now I can select my hero and so we can add a variation so let's just do the default and the title is Back to Basics and so this might look like some sort of a micro CMS kind of page builder tool now um it actually isn't really because what this does is right now normally this is the design data for your page that selects the domain data from other pages and for that sometimes you you might need a title Back to Basics but obviously this should come from a CMS somehow where you have a bunch of your Heroes we'll show that in a sec however this variant the small or the normal one that should be in uniform so now that we save this what we can do is actually have a look at what comes out of this when you query the apis you can you do few Source here and so you can see okay this is a composition of type page with a slug slash and then that thing itself has a few parameters well in this case just meta title and then in the content slot we have a hero component which has the parameters title and description later on these will come from CMS so how do we now get this on the page well you go to the uniform Dev GitHub repository for examples and then in examples you actually have a next starter let's go with that it's updated a few weeks ago with all the latest stuff so you can just clone examples go in here and do npm install and I have done that actually so I'm actually now you see I've been working with it so I'm in the next GS starter here and now I can do just npn run Dev um it's not working because we need some stuff here to be able to actually query uniform and it needs very variables to know like an API key and project ID and such so when this is basically just that next starter so when we open the a environment variables file you can see hey there's a uniform API key and a uniform project ID we need both of those to actually be able to connect the code to that project I just made so now we can go back here go to uniform and say okay this is saved go out again what we need is an API key and a project ID so generally when you go to your teams page there's actually a security tab in which you can add some users and you can add some roles and API keys so you can see I have a bunch of API Keys already so I'm just going to add a new API key for Back to Basics and there it is so right now I have a role that says read only you might not have this role when you have a new project and so what you can also do if you don't have that role you can actually just say use custom permissions and then edit these custom permissions and just do whatever you need here for me I'm going to stick with my role um let's see remove and I just go to read only and so when I create this API key I get the key itself so copy paste is all you want it's only read only right and I have my project ID for back to basic so let me just copy my project ID and then put that in here and then I copy my API key I put that in here so now my environment variables should have all the information that it needs for this project to run so let's go back and say run Dev there it goes so now um when you do run Dev the uniform CLI actually connects to uniform app and downloads a bunch of stuff that has to put in the code that's generally for our personalization tool that's not this video however you do need the API key and product ID to actually be able to query stuff and to build stuff so let's go to localhost three thousand and now it should work and it does and so of course there's there are some code here in that starter to make it work and remember in the in the hero we typed Back to Basics and this is pretty sweet well that's here so we're going to remove the go away from this go to back through Basics go to Canvas our page and then here you say Back to Basics this is pretty sweet that's what this is showing now so our starter code basically just has connected for you of course we're going to go into the code and I'll show you how that is actually done and then when we add the CMS how that is done as well so I think first things first is let's have a look at this Source here and how that goes onto the page and how we actually then put that into a hero component here well when we go to the code you can go this is just a normal next I think it's still 12. it's not 13 yet so it's the next 12 project and um in the app.tsx if you were starting completely clean you'd have to add this stuff so around the component that it renders for every page we have a uniform context that gives a whole bunch of information that uniform needs that's our SDK and so in the page itself which is this one here we've kept it very very clean so there's not that much going on and so basically it creates a whole bunch of props including like a composition and it queries the composition by slug of Slash here and then it will actually give that back to the canvas page function that is using like this page composition function because in Slug we kind of do the same thing but we just parse out which slug to do and then it also goes to page composition so um let's go into that get composition by slug because that's a function that actually comes from the uniform canvas client that is a bit of code that lives in the lip uniform folder here so let's go to lib uniform and then here canvas client here we go so basically what this does here it grabs the API key API host or a default because we haven't set it and the project ID from the config which is basically just inside this environment variables thing if you have the code you can look it's easy to find and so we make a new canvas client and canvas comes from the uniform canvas package in npm and so basically what it does there's a function that says get composition by slug you give it the slug and you give it a few other things like you can get the draft State or the published State and then what that does it returns you to composition data and there's one function here that we'll look at in a second that is very important but we're not going to do that now um it literally just Returns the composition as we just did few Source in uniform so when we actually go to the page and then we go to this page composition function which is again a few things that it Imports but in the end what it does it uses the uniform composition component that you get from npm and the slot component because remember we had this slot that we called content that we put components in you can actually say I want at divs or whatever styling you want and then put a slot in there like I could do this and put that around my slot and do whatever I want and then in the slot this component basically just grabs that hero component with all its information that it needs from the composition puts it in place let's remove this because that's ugly code and so what we can do is actually do something like this let's do a pre and then we do Json stringify of that composition right and so when we look at this oh that's not the nicest way you can do this oh there we go I'm so basically this is the data that gets that's the same as few Source in here right that's the information that it's sending and so in that content slot it knows there is a hero component which is basically rendered here right and so what we need to figure out how that is all connected up because we have something called a resolve renderer which uses the component resolver function that we built right here so it just went up in that function here and so basically what we do we import that hero function just like this is my hero component it's very simple I import it here and then in my component resolver it's like if my component type which is component type if this is actually a hero return that hero that I imported and then basically this magical lovely composition component combined with the slot component actually says hey I have this hero that's imported this is a piece of react code I have all the props right these props it knows the parameters and it gives these props to that component and then the component just renders itself and so um therefore it gets this title and description and there we go title and description you get them from the hero props that are component props from uniform and it just renders them and you can do anything you want with this right and so um basically in its simplest form you add a component on the page it has the type hero the code actually understands the fact that this is a component type of hero matches that to the hero that it has imported here and adds the props to it and just renders it on the page if I wanted to add another hero let's do that let's add another hero and say test and make it the different variant for example we save this bad boy and let's publish it as well because why not when we now look at the source it actually added the first hero and the second hero but now it just added the variation of variant small oh we go back to the page and reload it will actually render two of those Heroes because it found two in the Json mapped that data to the hero component and rendered it and so when we actually um look at that variant we can actually get this is now one of the props and if you have a prop of variant small you can do some CSS or whatever you want okay so this is really the basics and I haven't really coded this because why would I there's a starter you can just grab and these things work there's some extra things in here so we can work in stack Blitz and stuff but you can remove that yourself or ignore it and the thing will just work there's some lovely extras in here like there's a preview panel and there's like some um Dev tools for when you use your personalization it's all embedded here if you don't use that you just remove it and it becomes a cleaner project even so basically now what we've done is we've added the hero on the page in a composition that we queried by Slug and it was render it and it was rendering actually the two of those Heroes so now comes the magic we need to add a CMS to this somehow or maybe something else and then render that on the page as well well let's do that so we have this it's all saved we're happy let's actually go to Integrations and find us a CMS and I'm going to be looking for contentful because it's really easy to use here's contentful and I'm just going to add my own contentful instance to this because I have one and it has a bunch of hero content so I can just log into contentful here I'm just going to grow and log in with GitHub it's always yeah it works so basically now it's connected to contentful and contentful has multiple spaces potentially I might have a bunch of different contentable space you can add those here so um I'm just I just have one space but I could have many more with different environments and locales and you can choose those here um I can now actually add another space if I had one and then these components can link to different spaces so this approach to coding or building a website has solved the multi-space issue in contentful for example okay so you can see the space ID my environment stuff like that because I'm logged in it also knows my API key okay so now we have this integration and what this thing did is it actually added a new parameter for components so when we go back to our component library now we go back to that hero we can actually add a new parameter which let's just call this entry because it's a contentful entry right and the type is actually look there's a condenser entry multi-entry and query so entry is literally selecting One content type multi-entry is actually selecting three of them and a query searching in the latest Heroes and getting something back for example so let's just select a query and then here you can say you know I want to get this from my default space and then it knows about all the content types in that CMS that I have you can see I have a bunch of them and I also have hero so let me just grab the hero and say all right so now what we've done we actually have these native fields that I just put in that you can type stuff in but there's also a dynamic one now so let's save this bad boy and go back to our page and so here is now a entry selector called entry because that's the parameter that we added for contentful and let's just grab one of my heroes and now you basically don't see that much info here but you say see hey this is actually something I created a year ago it has 77 versions and it's on Monster and I can just hit edit and go to contentful and just deal with it here because I'm already logged in this is connected to uniform so here it is hey I'm Tim Mannix I'm a content creator there's a bit of this is that's actually kind of a lot of stuff in here right and so the the work the way of working is you add it in uniform you want to edit it or add another one you can just hit unlink and find press kit except and now I can hit edit here and then go into contentful edit stuff close it up I can make a new one like this as well as it can directly connect it to uniform so um let's stick to my default one okay and so this one we added this header we don't add one so let's save this bad boy and actually have a look at what the source now outputs for us so first content type is hero parameters title description in entry and the value of that entry now became the ID of the contentful entry in contentful for that hero so we have pointed to a thing in another CMS here you see it's not added because we didn't add one so it's not in this it's not in the Json also so you can do easily like if I don't have this entry property I just not going to do anything so interestingly we have now added this entry ID from the default source which is and the source is my spacing contentful and with this you can actually now in the code do a little query to get that stuff and we did that on purpose because we want you to know how you want to query content for your way uniform is not querying it there will be product releases coming soon that will give you the option to have uniform query it for you and map the data right now though it's just like this so you get to choose how to connect it all right so let's go to our code or at least our website here and this is now kind of still the same thing um however we need to get from that one ID that we get from contentful we need to get some sort of data from that right we need to query contentful to be able to not do a title here but entry.titled something that comes from contentful so remember that I highlighted that one function this one let's set this for later that's for now so what we're doing is we're calling this thing an enhancer it's like a little in-between API layer that you can do in your code or elsewhere on a Micro Surface or on a serverless function that basically grabs the composition finds hey there's an entry type or something that's contentful let me query contentful for you based on that ID and give you all the information back let's go to that function and I already put a bunch in here because it's a lot of typing otherwise so what I've done is I've installed canvas contentful and contentful you can do npm install of these things and it just works right you can you can get that so what this means is I'm getting the contentful client itself because beer uniform gives you the opportunity to query the way you want so let's just um um uncomment this and so basically what we're doing is we have an enhanced function from uniform that makes an enhancer Builder and that Builder is literally just looking at do I have a component that has a parameter type contentful if yes fire dysfunction and this is a function that comes out of the box from uniform that will query for you there's a bunch of options you can give it to query five things at the same time or bundle things or cash or uncash there's a bunch of things for now we keep it simple so the one thing that this contentful enhancer needs is the client so I literally just create a client from contentful itself from their npm package with my stuff obviously put this stuff in environment variables and also this is all read-only so you can steal what you want we can just read and so basically these things I choose to have in my environment variables or in this case just hard-coded and that goes into that client that is given to the contentful enhancer code that under the hood will query content for Force only if it finds a contentful parameter type and you can see that parameter type here so when we actually do source um let's see if that is actually shown yes so the entry is the parameter type content for entry and because we have the contentful enhancer installed uniform knows oh that's the contentful entry let me do something with that entry ID that I just received and so it queries it and it Returns the composition with the enhanced stuff so we are actually modifying the existing existing composition that was put in here so you can see there's not actually a return here it just grabs the composition and enhances that composition and so wherever we say enhance it that's is now updated and returned so this is the moment where we would what we should probably do is actually in this page here where we had the Json put back that Json and actually see if it was enhanced or not all right so here you go so we're back to this thing here let's zoom in a bit more so you can see here we have our contentful entry now and the fill the value has changed from entry ID to all the fields that actually come from contentful that I can now use for this hero so in the fields we have Chapel title subtitle description um and this was actually coming from contentful and uniform as actually query that for me with this little function I added so rather than just using my title value I can actually go into my entry value fields and use my title from there well let's see how that works if we going to hero and in the hero props also gets entry we just have to put that here for now let's put it to any because we don't actually know what comes from contentful so we're gonna there are fixes for this approach with typescript but that it's a later product release next year um so what we can now do is why don't we just do the same thing again just to see what we got foreign let's remove it from here because that's lots of Json otherwise and so there is fields and titles so we should be able to change that so let's first just have a look at fields and oh this actually breaks because the other component doesn't have an entry prop at all so we can just go like this um normally you would do more defensive coding right but there you go and now we can just say okay we well let's do this as well when we have a title there it is all right let's put that instead of the normal title and there it is and so do we also have a description did I do that yes all right so entry Dot Fields dot description oh that's the wrong way around and let's remove this bad boy here and now suddenly this is connected to the CMS and the only thing we had to do is add that little enhancer bit that queries the CMS and there's a lot more to enhancers if you want to because what you can also do is if you don't like the structure that comes back from that CMS you can actually use the compose function in our SDK to map these fields to the fields that you want for your components um so this is all I wanted to show for um right now because this is a lot this took a while but this is kind of how to go from make a project add some code use the starter and then connect the CMS and with this you can make huge projects like if I can quickly show you another project I have that has lots more going for it um let's see for example this one there's actually a lot of components and a lot of pages and you can actually just see how much you can do like two column components with things inside other Heroes images selected from cloud and area for example Rich text with stuff coming from yet another CMS you can do a lot of fun things um so this is what I wanted to show you I hope this works if not feel free to reach out or join us on Discord you can go to uniform.2 Discord and we can discuss all of this anyways and thank you for watching and see you next time cheers