Hygraph Studio Launch - Workshop: Hygraph Asset Management

[Music] [Music] [Music] w [Music] [Music] w [Music] a [Music] [Applause] [Music] hello everyone um this is now the fourth live stream we've had for our studio launch event and I'm still vibing to All These intro music videos and countdowns and um we're going to have to do and we've built the hgraph studio the new one to support all that stuff so that was a super cool session then after that we had um kind of a a few presentations about the developer stuff like the developer experience and then after that we talked about the editor experience so now that we have that lovely complete circle it's now time to look at like a bit more of the side bits now so today we're doing the asset management system but then tomorrow um I'll talk about but a bit later at the end of this stream and we're going to be talking about all the performance gains that we made in the app with the developers that actually made the app so that will will be like super deep into it all right so that is all out of the way if you have any questions put them in the chat I will answer them as I go because I'll be coding some stuff so I'm hoping you are either guiding me or telling me hey what the heck are you doing that would be super fun and also I'm coming to you from a super range C France last time I said this it was like 25° or I don't know how many Freedom Units that is in the US but it was hot super nice not today though so put in the chat where you're coming from where are you watching from and what's the weather please all right so um today um I will have the most premium support person on call um for this system because if I don't know something or you have a question that I don't know how to answer we have Fabian on the line here I won't put him on the screen just yet but he knows everything about the asset system because he was in charge um as the product lead to figure everything out release it all the process so if there's a question I'll put him on the screen because he will know all right let's start with some slides right all righty then so um let's talk about our asset management and it's especially because um it is reamed so we have a lot more control more reliability lots more performance because we've seen our customers use so much of this asset management system and it's growing so much we need to be ready for the future and that's why we worked on this and so if you can see let's let's look at a few nerdy graphs here and so I'm just looking down at my screen so I can read them to you um so the asset Transformations because that's what happens a lot when you do images you don't show the original on the screen because it is a TENS to be a lot of time of loading but sometimes you might want to crop things like that we have improved almost 50% in performance on that and of course you should know we don't always do the Transformations it's once and then it's St in the cache but if you have a ton of images and they're not in the cach just yet on the CDN we'll have to do the transformation and show you and so that's like a lot faster now and so then the other one that's a little bit more geared toward us for our future of how we scale everything up we tend to have a lot of project clones starter kits that have a bunch of Assets in them already right and so I don't even know what the numbers are but it's all like um Fabian might be able to say in the chat but I feel like we're like 10 times faster now when we um clone bigger projects or if you want to have multiple variations of your project and you have want to copy over all the assets that's super fast now all right and so um there's also some things where we now have a more native way of uploading assets using actually a graphql mutation so that fits very nicely in our ecosystem and so there's also now because we I'm not sure how far I can go with this but we have signed URLs and so you can kind of upload that way and it's it it's working like a little just a lot nicer now basically all of those things are quality of life and performance and so as an end user it should all kind of just feel the same for now but now we have this base to do all the new things that we've always wanted to do with this system and so there's a few improvements of course because if you can you sneak them in right that's where Fabian is you know in charge of product um so before our URLs were basically just our base URL and then an ID and that worked fine but you sometimes see that when you're doing optimizations for SEO you might want to have that file name specifically of what you called that file on your computer um that that's like reads well because then when Google indexes it it knows what it's you know um indexing and showing and so you can now actually have that whole URL with all your Transformations on it and then also append actually the file name of your file so that was a pretty um often requested feature that we now have and so um let's have a look at the Transformations because I keep saying this word like what is a transformation right and so what we have built is that on multiple different ways I'll show you in a sec what these are you can actually transform an image to then render it in a certain context because the way you want to be serving images for your end users is in the context of their device and where in the design something is shown and so you're not going to if you upload let's say a super large PNG file you're going to show it on a tiny screen like this you're not going to allow that super large BNG file but what you might do is actually make it a Webb format because it's much smaller file format that's highly compressed but still looks good and then you want to maybe crop it to a square so it fits this screen a little bit better and that's in the context of the user because when then the next user looks at the same thing on a desktop you might want to crop it differently or make it a bit bigger or set a different size so it works on higher pixel density screens anyway all all of that stuff you can now do with hgraph and there's a few really nice things added like and we've had some of those before but other ones just they work a bit better now like we have the Auto Image property that looks at your browser and your browser tells the server this is the type of image format that I serve best webp aiv that you see here or things like that and we actually now look at your browser string and then just Serve You the Right image format if you want that and that is generally what you see when you do a performance optimization run on your website you'll see Google and Lighthouse tell you oh but these images should be in another format than they're much better with hgraph you get that out of the box it will just do that and that's that's like a killer feature especially for me I'm I'm an image nerd I want all these things all right um we can also do things like quality settings cropping compressing borders a whole bunch of things and in our demo in a sec will show you all these things so are you ready to build something and so in our chat I have a question for you so I've built a demo site and let me show you that now which is basically a little um stock image Library starter kit that's super simple but has a bunch of images from hgraph of course and so I've built this in nextjs and in nextjs talking to the same hgraph instance and so I could kind of just go over how I've built it go into all the details and show you some stuff or we can just go with a clean slate and I will actually code the thing on the screen while I'm presenting this thing so in the chat do you want to give me an insane challenge or a normal challenge I'm happy with both so um while you decide let me just quickly go back to my slides because let let's just talk a little bit about um yeah Sarah this is basically my favorite meme for demos is I will burn no matter what but it's on you know this is just the way it goes um so we're I I think if I'm looking at Andreas we might go with the insane let's have a look so what we would build if we built is it's a stock media library so you know these websites like pexels.com and 500px.com they have these amazing images you can use for free and so I grabbed a few of those images with the main High graph and now we're using the system and then showing you this you know them on the screen and so what I've done is I've grabbed the assets um how do you call this like the asset schema that we have in hgraph out of the box and I enriched it with a few Fields because now I actually have this whole website that you're seeing here without having to add any new schema in hgraph all these images just come out natively from high graph and when I go to the pitch you'll actually see that's the ID of that assd in high graph and then I'm showing all the extra things that came with that that I've added to the asset schema on its own so it's a super clean like there is no schema here I've only taken the asset one and I added a little out field so I can make a little title about what is in this image and so that just shows you um a super nice way to see how you can use a hatless system without even touching it too much right we only have the assets here right so let's go back to my slides for a sec and so we'll of course have a the goal for me to show you here is all the different ways you can show an image right so we showing a grid with squares we see the original ratio and then we have a download one that's like the original file um let's see so if you are insane like me you want to code along you can actually grab these links and I'm hoping oh yeah NG here is actually putting them in the chat for you so if you are a developer and you're keen on this what you can do is if you put the third link in there NG please yes this one so that link here if you click this you will actually clone the high graph project that you see on the screen here so you get all the information of the high graph project you get all the images already and it's all set up for you to go and it makes you an account so you have everything and then with that if you if you like next or next you can just grab one of those and then you can code along and um there's a demo URL of the N version that I just repoed so you can have a look at how it's supposed to look um then the only thing we have to do is kind of install the stuff and um this EnV file this is actually the variables that you could use like I'm not sure how technically technical we should go now but we'll just go for it environment variables and that's where we put in the the URL on how to connect to high graph and then you can go to Local Host so what I'm thinking is I'm going to just share my screen and um right now this one is the next GS app that's running I'm just going to kill that and we're going to start from scratch but I'll keep this on the screen because if I screw up then at least it works and so in the chat here um we chose insane or normal we're going insane nice but I am really good at njs and I can probably just with my eyes closed coded nextjs I'm slightly less good I can still do it I've done the two demos relatively fast because High graph you can do it fast which of the two should I do if it's up to me I'm going to go with knjs because for me it's easier so if nobody puts it in chat I'm just going to do next so what I'll do I will open this one oh I'm just going to put it on the other screen so it doesn't bother you guys but I have like a at least I have like if I wanted to cheat a little bit I could and so um this one we don't need let's make another one oh let's see how do we do this you know what we'll start like from actual from actual scratch oh add Block Plus updated itself sure why not now all right so we'll go to kn. new and literally start from like nothing and so we're not go going to call it my app but we call it let's call it high stream High graph live stream sure so now we're relying on my internet to install this fast let's say now we go npm I cannot believe I'm going from scratch here but this is fine so we have until 7 my time so that's like 40 minutes ah we can do this we can right we're installing the dependencies of our meta framework anyways this is the moment for elevator music I guess I think Angie has that yes it's incredible why would it be so slow now okay while we wait for this to install let's have a look at just this little demo so we can see what I'm supposed to make right um so there's a grit with all the images they're all cropped right and they show the resolution they say they alt Tack and who uploaded them then we go to an image that is the original ratio with the file name here and then it has also a bunch like it has the file size it has the M type stuff like that and I can hit download original and here's my original that's what we're building so let's see how far are we along okay we're good well we don't need a git Repository okay all right let's see what we're dealing with um let's have a look how this looks now Angie you can turn off the music if you want thanks okay so this is basically how you get started and we have nothing so what we need to do is in this project I've used Tailwind CSS which is a CSS framework so let's grab that so let's go to next till wi and just install it so you're seeing this like from actual scratch right so you're going to see how fast we can do this and actually build something that work works so we need tawin CSS but we also need the next graphql client uh yes this one oh and we're waiting again but we're good all right so once we have these there's a few things we need to do so these are in N they are called modules so we're going to have to add those so and then we also of course need to add the Tailwind one and then it should magically start working and so to be able to connect to the graphql client we need a dotv file and what we put in there is let's say oh that's the wrong one um and yeah this is what I need graphql host and now we need to go into high graph to actually grab the information to be able to talk to um High graph so we can go to our settings here and so what's very important is that here you have set up your content permissions I have already so I don't have to click this so what we go go for the endpoint and what we of course want is the high performance read only can endpoint that's what we want so we add this in so now this module will understand um that this host exists this is the cool thing about knjs they have modules that do things for you there's a black magic you don't have to know and that's if it works it's incredible if it doesn't work it's a bit harder but usually it works works and so what this thing allows you to do is actually make a new folder called queries and inside there I can actually go for um let me just get a query for all assets and we call it the graphql file and it will look at this file and then do the query for me it do does the introspection for me it gives me typescript it creates me helper functions is really really handy so for our homepage we need to get all the assets right so what we should do well let's just try um let's clean everything and so I want all the assets wait maybe I'm zoomed in oh no that that's actually how it looks okay Fabian we might want to have a look at this anyways so what do we need the L tag we need created by because I want to actually show me right created by Tim benic okay so you know what for Speed State let me just grab that query from my other project so you can see what we're dealing with so here I query all the assets ID handle file name and then there's some magic we're going to talk about in a second when it was published with height M type all the things and so per page is how many I want so let's do 30 and hit it zoom out just a tiny bit I'm not sure look I'm we're getting a private chat let me have a look okay we're good um so I can zoom this in a little so what this does it gives me an array of all my assets ID handle file name and all the other things and so there's a little bit of magic in graphql and high graph that I love in this thing and so you can just grab a URL off an image like this right and my URL would be this one that's this image but what I actually want is to also show this image on the grid as a square tiny image not just the big one so I just make give this another name called grit and then it goes in url but there's a little function here and so I'm starting to do a transformation on that image and you can see that here in our docs we have all the Transformations set up right all the different things here all the different outputs all the things you want so um we can actually put the docs here on the screen so if you go here to the studio-d hyra.com you can actually find all this stuff um let me just remove that again so what I now do is okay I want a transformation on this image and it's an image so I'm saying hey transform the image and then resize it to a width and height of 300 and crop it and this will by default crop it in the center so this image was tall right so it's just cropping things off now and so I also want to compress the metadata out of it because images have a lot of metadata in them makes them heavy to load but on the web we don't need that so we can remove that and also I want the quality to be just 90% um just because I can and I wanted to show this to you and the image gets less heavy so easier to download and then um of the document itself you can then also output to it the Auto Image output and you can this is so cool from this system here I just clicked Auto Image right and here you have all the different ones that can come out so I can also just make it a tiff but I won't do that for the web that's not great but that's actually super interesting that you can do that and I can also click on crop here and then you see clip crop skill Max so our docs are also embedded in graphql which make this is just magical if you have not used that before this is a game changer for me okay so we have the query I'm just going to copy it into my code now so we have a query for all the assets okay this is a good start and so what we need is actually a page and so to not show all this stuff we actually have to do next page so this is now um a page router based on a file and so this is now our page and so let's do a template oh and say hi stream um let's have a look at what this look like let's refresh oh no we have to run it of course all right so it's running now okay now it says high stream all the way in the back but some mag happened here and you haven't seen that yet because I ran npm run Dev it actually did a whole bunch of things like figuring things out about our um graphql so let's have a look if that worked so Nu has a nu folder where it puts all its like runtime things in it and it also made a graphql folder now and so when I open this it gave me a function called graphql assets and it created typescript and a helper function for me to query this query so I don't have to do that myself anymore it's just there so if I wanted to get all the Assets in I could set up a script and we're going to do typescript here and then in here I want assets let me see how how I write it gql as it's and I want per page to be 30 so somehow it doesn't like this but what I think I have to do is just reset my um code editor because it doesn't know about the typescript that was generated yet let me just refresh that there we go now it likes it all right so let's refresh oh there it is so all my assets are here and I haven't actually done anything super complicated here it just made me a graphel assets function based on the fact that this is called assets and it understood everything and it also gives me typescript so when I hover this it's actually an asset query and I know exactly what I can do with that and so we're getting quite close to our first bits that we're going to have to put on the homepage here so let me just go to my other project because what do we need you know what for time sake I'm going to copy this and then show you what I did so in the template we need well let's let's start with the basics right we have a header and we have a paragraph it's our stock Library starter however it does look different than the other one so what I need to do is let just copy this here so this is basically for now the thing that surrounds everything so we're just putting it in the center here all right here we go all right so now what we need to do we have all these assets so let's Loop over them and just make the list well um let's see how I did that in the other one oh yeah let's I'm going to put this in also so we can see where you can download everything and then here I actually for each of these assets I'm going to be making a component because they're all the same so we don't have to you know repeat ourselves too much so let's make a card component and so that card component get gets one of the assets so We're looping over all the assets so it's getting one of them so um let's see how did I do that here I'm just going to for Speed sake I'm just going to copy paste that because it's it's not that complicated what we see here so we Define the property asset which is the asset we're giving it so We're looping over the whole list and for each of the thing we Loop over we render another card giving it this is the thing you have to render and inside that asset you have the ID the file name all the things that you can see in our query the ID file name the grid URL height the width all that it's actually here so we're making a link to a page that we haven't built yet so SL asset slid and then we have an image that we lazy load because why not it's a list of images if it's very long you don't want to load all of them until you scroll down right and we're just going to grab that grit um URL thing which is this one here so this is the one from 300 by 300 cropped strip metadata all the things and then we're going to add the file name behind it and that's what we saw in the presentation earlier where this is like an SEO file name now and then um there's an ALT tag that I added here that looks like a 500 but we'll fix it so when we go to the asset schema I added this alt tag here so when we we actually look at the assets and I um go to this image send batch on beach that's probably AI generated from where I copied it but that's all good um and so that alt tack we can then also use as the title and we get the width and the height and we get the created by name and created by is me because if we look at that here this is published by Tim so when we have this list um you can also see updated by we can also add uh where is created by here we go and that's me and so this is part of the new studio that looks so freaking good like we can this by default I would always just set it to this oh and now we have it out of the box so that's super nice so Tristan let me see what did you put there um Tristan that's just what I used hgraph doesn't need anything there's even not even an SDK so any language you want you can query hgraph if you know graphql so you can add anything honestly if you work in PHP you can still query High graph if you work in go anything you want it's a hatless system right so we have zero opinion on what you use um that's the cool thing about all this I like fugs so I'm using fugs if you like angular use angular um all right where were we so this renders this whole image essentially and I'm using a figure HTML tag with a figure caption for the caption below it so we should have something on the homepage now but I did see a 500 error so let's have a look at why that is the case it really is giving me okay so reading name it cannot read name where are we using name aha created by interesting let's for now not grab this and see if it now works is not exactly happy line 36 in C TSX 36 there Emily you're uh you're showing the the next project yeah it's very similar in the next project to be fair I feel like the data is not coming through otherwise this everything would have been showing here okay so let's have a look at what's going on let's just comment this out and let's have a look at what assets actually looks like okay assets assets maybe that's a thing oh I know it's always the simplest things and now we fixed it well let me not speak too soon yes um that wasn't too hard it's always this thing that breaks and then you dive on that thing that breaks and it's never the thing that makes it break it's always up in the chain simplify things and so thank you for finding that quickly um it was just me um not setting the data correctly so we now see all these images right and if we have a look at how these are rendered let's see if I can zoom that in um you can see that there are a bunch of things that happened with width and height of the 300 right let's open this image specifically and when we look in the URL it's hard for me to zoom that in can I do this yeah so we see resize fit is crop we have a height of 300 a width of 300 and we're compressing and the quality is 90 and we have Auto Image so all these things are added through a graphql query now and this came out and so if I wanted to I could just remove this of course and then we get the original back this the original so if you are clever enough and you don't want to use graphql to just query all the things you can also just do this by hand and make this one 500 by 300 and there we go and if we want to make it wider than higher it will just crop it differently and so um props by the way to Fabian this is now super super fast since we released it it was a little challenging before and it's really good now so I can do quality 100 but I can also say well give me a quality of 10 you see it's super pixelated now and so um you can use the URL to do these things or you can actually just do it in our query like this all right so we have our list when we now click on one of these items well it goes nowhere for now but it actually goes to asset and then the ID of the asset and so the ID of the asset is this one you see this fancy thing here of course I could have taken the file name if you wanted to but for now I just took the ID and so what we now need to build is when I click this that there's a page that queries um also just the one asset which is a dynamic page right so let's start with that so oh wait inside the page we want to have something like [Music] this oh that's not correct asset this is what we want and so if you're familiar with next 13 and up um file routing with these brackets that's a variable that you get right next has a very similar thing where it's just ID and that ID is actually a variable that you're getting into your code so you can you know grab that from the URL parameter and do something and so let's see what do we need for this um well let's first do a script and then we do a template and of course if you're into nextjs this whole script template thing doesn't exist but when you look at all the other Frameworks like for examp well not all but if you look at like Astro or spel kit they have this setup as well where this it's basically just syntax sugar and in the end it comes out very similar to react um anyway so let's see what we need so there's a few things here that we want to do right so let's have a look at the example so we want to go back to the index this is a simple link we need the ltech and a whole bunch of stuff then who did it then the original download button and the asset so let's start with creating the query on its own so we don't need all the assets we just need one asset now so we do one assage where the ID is a thing and we have that in our URL right and then we need a bunch of other stuff I'm just for Fe sake I'm just going to copy that to show you what we have here I'm going to use the tips that Fabian gave me to make this a bit smaller and so let's just grab this ID and so you can see we want an asset where the ID is an ID oop that's a string so we want this ID and then what we need to get is the the handle actually I don't think I use it but it's no we can remove it so we need a file name the original and then so the original here this is a super nice feature of um graphql where normally you would just get the URL right but I want to have it give it different names and so you can just do it like that so the original URL is this one but the hero URL is different you see there is like the quality is auto we're using an automatic selection for what the image is we're com pressing it and we're making it Max maximum width of 1280 on the screen which is this width and so it it but it doesn't crop or um scale well it scales a little if it if it has to because it does one width the height is automated and so then we need all the rest right so let's just grab this put it in our code we're going to do asset. gql hit this and if I hit save now this should have automatically realized that this existed and it doesn't look like it did what I wanted it to do so let me just restart and see if that worked oh actually it did look graph client generation completed so I added a new query and actually here in my next folder now it actually added graphql asset with parameters and everything and so now that I have the asset we can actually then query that here so let's do that but there's a few extra things we need to do because we need from that URL get the ID to be able to query that asset right and so to do that you can just grab um a hook called use route and that gives you the route and from that we have the ID so we grab the ID because this file name is also ID right so the parameter ID is basically whatever is um we go to the demo this is that ID that we're getting okay so we have the route we have the ID and um what we then need to do is just you know the asset and we grab a graphql asset for that ID um this is complaining because it doesn't know about the new typescript so I'm just restarting now there must be another way to restart the typescript server in here but here we go um now I actually have everything so there's the asset so let's have a look what that looks like in Json look so we now have an asset page that grabs this ID uses the query we just made and it all comes back on the screen and now of course it needs to look like a real page so um let's have a look at what we could do because there's a few other fancy bits that we need like I want to actually display the size of this like the weight um in like megabytes and stuff so there's a package we have to install for that later but also I want to show the date in a nice way so first let me just grab all this oh that's a lot of HTML to show wait um let's first start with simple things like this back link and Nu link is same as the next link component it just understands internally how to to Route things so back to indexes here so then let's just start with our title so I'm getting this asset now in graphql and so the alt tag I'm just going to call the title so sunset on the beach Sun bats on the beach and so what I want to do is below that put a bunch of metadata um let's remove dates string and the size for now because we haven't actually created those in a nice way just yet so right now we're just grabbing the width and the height and what is the mime type so the type of image so this is a jpack in this case all right so what else we we now actually what I want to show is the person that created the image and um I'm just going to copy paste that because why it's is for for Speed sake because you don't want to see me fail typing so what I'm grabbing here is we have a diff that we justify between so we have two elements flexing to both sides the first one is actually the image of the picture of the user who created the thing which is um if we actually go to the assets oh I need to see this again assets um which is this little image here or this one so that's what we're grabbing by doing created by picture and so we're checking if there's an image then render it and lazy load it and then we can just write the name of the person who created it and then here is the link to the original image so this is like the full weight image because you tend to upload your most Raw full weight image to the CMS and then you use transformations to show it on your channels websites apps whatever and so if you make a website like this you want people to allow to be allowed to actually download the original and so as you can see there's a DOT original there's an original property so when we look at the asset we look at original it just grabs the URL no Transformations nothing this is how you uploaded it if you uploaded a tiff file or a PDF or anything that's what you would get here um yeah so those two let's have a look what this looks like yeah so right so we have the resolution what type of image It Is by me and when I hit download opens a new tab and then you see this is the huge image and then the URL has no transformations in it whatsoever all right so now it's time to actually show the image itself so just copy paste again so here if the asset actually exists just to be safe we need to all practice a bit of defensive coding once in a while in this case maybe makes no sense because I use it everywhere so honestly I could just remove this um but then it will complain because of typescript because how we set this up in our schema is that the asset can actually be undefined so then we would have to change it in the schema for typescripts to work so for now I'll keep it so it doesn't actually complain so for the source I I've called this version of the URL the hero which is here so this is how we transformed this one then we have the L tag which is the same as the title then we have the width and the height and if I don't have it as you can see I'm adding some default properties here and this one is loading eagerly which means when it loads the HTML and it sees an eager Tech it will load that image first this is a big image so you want to load this first and not wait too much because your um core web fital will not be super good in that case if you lazy load things they come in later which is for most of the time that's great but if for something that has to show immediately you better put that into your core web vital of um when something shows on the page is faster don't do it with too much because if it's too big then another thing get lower it's a balance um and then there's the caption which is just a file name and I made it absolute here so it's it's overlays a little bit um let's save this and have a look so there's our image mid rounded Corners it's all kind of fancy um now when we go back there you go and we can download them and of course this is like a super simple variation of whatever this stock Library would be right but we're almost there we are at 47 so I have 13 more minutes yeah we can do this let me see what yonas was saying protect you because you ah yeah exactly so defensive coding it's a thing all righty then so we have this so now the one thing I still want to do is actually say what the size is and also the upload date um so what we need for that is let me just grab that first so there is this really really nice package called pretty bites and I'm just going to install that now because we don't have it yet and npm is just pure magic because it g give you all the things you need okay so we now have pretty bites and so what we can do and this is a few thing um because this makes it reactive um we can make a size that is a computed value so it's using pretty to just get the normal size and so if we look at the size on its own without the fancy stuff without the pretty bytes it gives you just a big number right this is the amount of bytes in this image but we want to make something like hey if it's megabytes or kilobytes or things like that we want to put that in there it's much nicer so rather than size like that we will actually compute the original value into something new and that's what you do with few and this is now if this original value changes somehow due to some reactivity in the app somewhere this is recomputed and updated directly and for the Nerds amongst us actually fuggs uses kind of the same approach to signals under the hood so it's not the react reactivity approach but it's it's closer to signals like solid and stuff um that's all I say about it because that could lead to five hour discussions that's not for today so now we use pretty bytes to return whatever that computed property is and then it looks like 1.5 megabytes that's a lot nicer right and we say like this one all right so what else do I want I want the date to be format it nice as well so let's just do this and here I want a date I don't actually know um what the date would be but because we used this lovely graphql module it gave me typescript so I can actually literally just find what that dat is so that's also not exactly nicely readable right so let's make another computed one that is just also another copy paste it's just easier um which is a date string with computed that published at one but it makes it to a US local date string and just make it a full style so this is like internal JavaScript or nodejs so rather than published ad we'll go with dat string and now it looks like a real thing and I think I just spent a lot of time talking and not so much coding but we have like a proper project here of course what I haven't done is doing OG Tex meta descriptions things like that like but that's just busy work that's not complicated at all like we have all the information in hgraph um we can just add a few things like use SEO meta let's see what do we want do we want the title yes and that would be our asset. alt I'm not sure if it's understanding it here yet because it's querying it here I'm not sure this is going to work let's see oh there it is sunb on the beach so all of this after this is relatively trivial and of course this is a starter right and so if you really want to um play around with this yourself I suggest you go here and just grab the next or the next one the next one is actually slightly more coat but less opaque you see the queries themselves a little bit more KN is just super convenient um and so if you go to this third link here you can actually clone the high graph project for this and just try it yourself see how it feels try different um you know different Transformations things like that and so what we could do now because we still have like eight minutes maybe we can do a different transformation for this Hero Let's have a look at what we have right so how about we yeah this I think this is pretty cool so let add let's add a border that is a color of azure fancy okay so just let's let's grab this let's see what that could look like in our query for the asset so we have the hero already we have an image it resizes but how about we add a border right so we're the Border let's make it thicker five color gray 15 I honestly don't know what that is I'm just gonna let's have a look oh that's not the right one this one okay so that didn't work but it's possible that the graphql didn't update let's see there we go um I don't exactly know where the color gray 15 comes from maybe um Fabian if you are in the chat you might uh have a bit more information on that what I could also do is just have a look in our playground to see if we have more colors available to us here so I okay so no this doesn't actually give me all that fun stuff ah so there is CSS color names and we have a list in the docs oh that's just me being a developer not finding things in the docs I would be lying if I would find everything always in the docs okay so we can use Hax values okay we just go with red and we don't need this background okay let's see so we might have to yeah so oh it's not liking that I think uh it was my hex value let's see no it's not laging this nope Fabian help me out okay border hack values and I'm not able to click that okay okay so we're not go so now let's just go here so what is it ah here we go oh it's like this okay okay of course um so yonas if I don't include this it doesn't work look if I just like that it will just break if it's like this though I think now it will work oh this F looks different than the rest that's very interesting um let's go aqua let's see what this does it's not having fun let's say come on this is why you don't try unscripted things on a stream okay so it's really not happy with this oh maybe it needs a background rather than a color so it needs one ah I think that's it so it also needs this um let's just grab this one then no something else this one let's have a look with this does oh it needs to rebuild H it seems to be happy oh there we go oh it's hard to see on the stream but it really is there yeah it's really hard to see but there we go yeah so oh here we go let's let's see what jiannis has to say So currently all arguments are required we will look into adding yeah so this is always complicated right because when you do Transformations on images order has a big impact and so sometimes you just need all the things to always be there so so anyways and we went off the script for a little bit but we have three minutes to spare and I literally build a whole starter with only a little bit of coffee pasting and a lot of talking this is actually how fast this is right if you understand hatas a little bit you understand your meta framework querying hgraph is literally Child's Play and so Mario has something to's say yeah so I was literally struggling with colors the most and the rest are just build while talking it's it is how it is isn't it um so um thank you all for watching I really appreciate everybody that's still here after seeing me code for like an hour this is super awesome thank you everybody um so tomorrow there is actually another panel so this one on the screen here so this is about Peak Performance where we have Luca Risha Miro and yonas and I will be mcing so I'll be asking questions and this is a panel where we talk about all the choices that we made why did we choose remix for the studio build um what are all the considerations in caching what are all the new things that we put in for performance lazy loading streaming of data like what how far we pushed remix until it didn't want to work anymore and we actually fix things and so that's going to be like a super super interesting stream if you're a developer and you have very annoying questions on every detail our guys will show you and these guys know like we've had a few practice sessions where like holy moly this went deep but that's the real um point of the session we want you to ask us the things we're open about what we built and why we did it and how it works for the future so um my time is up um Dear Angie who is backstage what else do I need to say yes I I remembered myself here we have a community so if you join us on slack and I know a lot of you in the chat are already there ask me any question like if you're trying to do this with nextjs and you only saw me struggle in N ask me how you wanted you know how it works all those things if you have feedback you can actually go to a specific channel that we have for feedback about our studio but if you have any questions like around the asset management go in there ask around um so is there any other questions no and so well you can go to the documentation and um let's see so these are like so there's one important thing we have the studio documentation that talks about all these data features and then we also have the normal docs for classic and so feel free to browse both um do whatever you want to do there um yeah that's it um thank you everybody body for watching and we will see you tomorrow for the next panel cheers