Debbie Codes Live with Nuxt.js and Cloudinary with Maya Shavin

round of applause for maya hi it's nice to meet you everyone yeah so as i said this is the first time i've ever done streaming so i have absolutely no idea if we're live on twitch if we're live on youtube if we're live anywhere so yeah keep your comments coming in so i can check and then it's all working and now let us know where you're from i can see in the youtube channel there we go australia yes oh it's i hate tomatoes he's joined us thank you very much um so we have all the way from north dakota to australia with spain in the middle and uh london as well um and a couple of other places ohio that's excellent cool so that's really really cool okay and it should be working on on twitch as well if it's not and you're on twitch and you don't see anything then i have absolutely no idea how it works and apologies to twitch people if that doesn't work oh i think it does i i can see we're live on twitch as well great so if you're on twitch as well uh that's cool so we've got live everywhere we're working so that means we can actually just get on with the show um okay perfect uh oh i've got comments coming in this is so cool they're probably gonna make noise through the whole stream does that even yeah i don't know right so maya what are we gonna do well fair we're going to check out the awesomeness of next yes and of course claudinary yep yeah myself naked but okay you got the idea so first of all can you just tell us a little bit about what is cloud and area because cloudy is a cloud right we're all living in the cloud these days so what what what are we going to get from this cloud well cloudinary good question i also wonder myself why is cloudy nowadays sometimes and i work for cloudiness so it's fine oops and anyway so as you know cloudinary is something to do with the cloud and that cloud plus image and video that's extraordinary what we do we take your image we serve it on the cloud we return to you the image are already optimized smallest in size better in resolution and serve very well on the web so everywhere your application is itself the user will receive whatever person personalized to their device and browser specifically and it's all done by cloudinary magic i hope it's clear so that basically means i don't need photoshop anymore right oh well no well i dabby that's a very dangerous thing to say no no actually hey well wasn't it wouldn't you and me i kind of think that uh yes it is kind of but according to what i understand in my what my manager always tell me never ever say that we replace photoshop you know for sure that's a big change you can do like you can um make your image into a circle for example without using css or without using photoshop or you can add like text to it without using anything so right yeah this is like it's like the basic whatever photoshop is for a lot of people like artists to any a very high scale very very high level of designing when developers like us a normal human being don't really need to use a lot of things for photoshop so we have clarity to do all the magic for us and we already have image optimization and we don't even need to learn how to do photoshop that's and cloudinary helps with our performance as well right yep exactly how why how what does it do oh wow let's start with uh i'm not sure what hours will be enough for this tutorial but okay let's start with a simple thing so performance-wise the first time when you when user go inside your application you basically don't have any cash or anything so the first low of your application will be very important the first uh content hand is always about the first steps or image how long it takes to do painting and layout layouting layering layout sorry and now painting and showing the webpage to on the user side so if your image is a very big image and a high resolution which normally will have to do it because your your same image can be used in different places in the application then the time for the network to download it will be very big and then it's affect the time for to load onto the first content phone paint on the website and that's why it's affect performance because then user will see a blank space or don't see the picture at all and the picture will have the icon that indicate that it's not it's not a another valid source all of this is performance and if you use cloudinerry it will go automatically fresh and the version that already optimized to your to to your machine and if you use some extra um like configuration like fetch format out of format or auto quality then it will check um whether the browser what kind of browser it is and what kind of format you are going to use and that will return to you the right format for this target browser say webp for chrome a or jpeg for safari or firefox or so on and not only that if you only serve the image about 200 over 200 pixels you don't have to go fresh a 1000 pixel size image just for this small container you can actually tell cloudenrad i want 200 over 200 and it re returned to exactly size and also the resolution is according to what your device is like if you have a phone the screen the screen of the phone is smaller than the screen of the desktop it will just fetch the smaller resolution but looks good on the mobile instead of the bigger version on the desktop so this way the site will load faster on on mobile device okay that was a lot to take in yeah that's hard that's what i say well well i think we can do it by going by going different okay much more uh overall the general concept is that you leave everything that related to image optimization to cloudinary and that's how it goes okay thank you milo it was a fantastic uh introduction to it and uh those who missed it uh sorry so i somehow messed things up and the youtube url in the tweet is not syncing with the right one so don't even ask me how that happens because like that's just tech issues so anyhow um yeah we i've put the in the chat those who are who are in that so everyone should have come over by now so thank you i hate tomatoes for pointing that out what yeah we're not even on live on youtube i am live oh my god different url and i actually have no idea why it's a different url so i'm just yeah i'm restreaming using restream so it's all kind of um i don't know it's a learn as you go along so for some reason uh youtube decided to allow me to put a kind of placeholder as in this is live in so many minutes but then it gave me a different url oh my gosh okay hello but anyway i put it in the chat so there's 12 waiting in that one and i've posted that link so i really hope they come over if not well you know um oh i just saw someone the nickname is i hate tomatoes yeah tomatoes and that's cute yeah okay david's joined us from the other channel so i think people are starting to come over now so that's great okay cool cool so yeah that's uh oh well what can you do it can only go wrong every now and again right wrong in the first one you cannot go wrong with this so we're all here this is myself debbie and this is maya and what we're talking about is cloud and area how to use cloud and airy in nooks um what we're gonna do as well i hope you're all watching this because maya is going to uh give you a test and she's going to ask you two questions and whoever is fastest to answer that question is gonna win a six-month license to front-end masters so you can watch whatever workshop you want um there's a lot of fantastic ones out there the new one from sarah drosner is amazing and also includes some nooks stuff as well as as you three so i highly recommend that so well the choice you should because i don't have any subscription so and i'm not eligible for that you work for that you should you should ask them for a subscription cloud excuse me no one gave me that's the thing well i have i have a six month subscription and actually i've had it for a couple of years i've had a couple years subscription i think it's one of the best platforms for learning there are so many others of course but it's one of my favorites because it has such great um people on it i'm gonna be on it one day yes who knows okay so going back to uh what we were doing uh let's start using the module how can you use the module um in the next application so what do we do well first of all need to we go to terminal and yeah and then we go to do if you do yarn or you use if you you do yarn let's say yarn okay let's make a little sound okay yarn at um js yes how do you say that okay claudinary and boom boom now we have cloudinary now uh we can just add images right and not yet you need to do a little bit of configuration it's there but it's well you know you need to have an account with culinary not in order to use it right so you sh you have to go and configure it let's say let's go to nubsconfig.js actually you know what let's open open a um chrome open uh tab go to our documentation we already have some snippet code that you don't i don't know how to find your documentation uh do you want to you want me to find the module documentation sure sure okay so let's go in here and let's have a look at cloud and airy oh we have a cloudinary module in our modules.nuxgs.org website and okay yeah documentation let's go to basic usage in example bam look at that yep and let's copy the first one for next config okay and let's go to nuts config and copy uh anywhere right let's put it down here anywhere that you like it okay put on the yeah and go back to the page you need to open you need to create an end file environment file so this way all your credentials will be saved and will not accidentally push to to the master level by um you know when you do push a commit okay and copy this yeah and copy that okay now i cannot help you with that then you need to go to cloudinary get your cloud name and api key and eventually the two field api and api secret is not needed if you don't use uh upload the server side but cloud name is magneto mandatory so you need to put the cloud name uh let's try the demo one okay you have any other one or we can try the demo one no let's use the demo one okay so just go back yeah yeah and replace it with the icon demo and then delete the other two just demo yeah so if you want to practice and use uh and use this you can just put cloud name equals demo and then people can play around with it without having to set up an account right right that's cool exactly that's cool and if i set up an account am i going to be charged any money no everything is free yes and yeah okay yeah and we are working on if you want to pay us which is absolutely awesome and we are we are playing we are having uh also planning price planning a new one for developers oriented uh for monitoring on that i'm not the one who do it but i can tell you that it's much more flexible than it used to be and so coming soon hopefully and anyway but before that the free account is enough for using all the basic thing or building website anything that is normal if you have um let's say a chanel or elf uh lv helping yeah on the complete commercial website and we i don't know l'oreal okay l'oreal so so any website that big and have a lot of huge traffic like that then you may need to upgrade but overall you don't have to upgrade because the free plan is enough for you so it's kind of like net life right i've got an lfi t-shirt because i'm still waiting on my next t-shirt to arrive um so netflix is free until you like need extra stuff and cloudiness free until like until you're making enough money so yeah it is free yeah and and we hope that you make enough money because then yeah and you make money right and then you get paid for your job and then you can live happily ever after okay so yeah make money right everyone happy okay so we've got the demo that's great uh as you're seeing it i basically i'm using the m.cloud name and in my m file it's basically going to the demo one okay cool what else do i need to do okay so now let's do the first content ah sorry but let's try to to generate a viewer first image url okay so let's go down scroll down a bit okay so and this is already if you already have an account you can go inside here and check it take the publish id of your cloudinary image so you want to serve anyway uh other than that let's go now we have another one and more okay let's copy the more down down now all of this is how you're going to get the public id of the asset well it's it to be short you just need to copy and then delete all the part that is not relevant like a html restricting array declining in this format the path to image is actually the patch to in your image in cloudinary uh management board and then you just copy this is also your public id that we will use to generate for culinary to know which assets to return to you and when you've asked for url okay and let's copy this um yeah so let's do the first one let's do the basic one with making an avatar of 200 over 200 uh which auto focus how to focus that sounds cool right so we have here this this this this example yeah let's just take that example the whole thing okay so copying that whole thing will we create a new page um why you can create new page and do all the code um let me get some demo let me call it what we call it dot cloudinary.via and uh anyone who's new to next literally um when you create a new page it's already automatically going to create a router for me so on the index i can just i'm going to get rid of those links to github well actually what i'll do is i'll get rid of one that one there and i'll reuse this one and we'll call it cloudinary and instead of using a href we're going to use a next link so that's not going to refresh the page for us and also using the nux link the crawler is going to crawl if you're generating um your pages for static sites so we can get rid of the target in the row we can keep the class and we just want to go to our href is cloud and airy only it knocks we don't call it a href we call it a two so nuxlink too okay okay um i'm just saying that i saw in the comments someone commented that clown name dot god demo uh well if you write it inside the knox conflict chaos yes that should be the center on but the clown name should be uh camo case but if you write in the environment file then have to be equal equal i'm an equal now equal demo data okay who cannot read properties of the image oh what do we do maya what happened okay open the pad the terminal maybe maybe the paste path to image here isn't the good example uh no it's same image of undefined which means there's no image of cloudineary oh wait go back to nuts conflict chest you forgot to add the moisture in the mushroom what do you mean i forget you didn't i'm sorry i forgot well you know you you we both forgot if we shame on us so basically when you go to set up right you should read all these options so here we go and you also have the modules that you need to copy and put into your modules so you can do that otherwise it's not going to work and then you're going to have problems and you're going to cry and be all sad no i need to add that in my documentation i mean i i based on the understanding that everyone went through the whole documentation but apparently people read documentation and people you expect them to read but they don't they find one thing and go yes copy paste put it in oh no it doesn't work why not but that's how i that's how it worked but that is all how it works okay that's why i put a lot of documentation i've got an example an image example with cloudnary with no image so that's not too bad because it's got you know the page is working um and this is the url of my image it's not uh yeah but there's no image that's uh so you need to change that one to the pen name let's try fat underscore cat fat underscore cat yeah is that not a bit rude to call your cat fat well all the cat are fat okay but underscore cut yeah yeah this is what is the demo this is where we're getting this because it's this image is inside the demo cloudiness right so if you had an image um and you wanted to use fat cat you'd have to call your image fat cat right right exactly so we got a fat card yay it is fun [Music] and now if you want to see how your image look like before one of the if you hover on the image itself you can see the image returned to you already have around have a round circle background and everything like if you do inspect an element and you look at the source then the pictures already come like this right yeah it's already but yeah but if you take go back to the go the code page and let's delete on the option so say from the options from gravity and graduates and everything this is actually the transformation you want to pass to the to to the image to culinary to return um the delivery url according to this configuration okay so let's just turn up and then see what will return to you oh it's a big card a big fat card yeah so this is the big fast fat cat yep and if you go to the network itself you can see even though it's big you open the network tab and problem down go refresh with oh image yeah so you see you can see the type of the of the picture is webp okay how am i getting a web pay is it an actual webpage or is it a jpeg or or no it's actually a webp and this you you don't if you look at the url itself you don't even see any any um what you call format or any extension right so it's actually open in weapon if you open the same one in let's say safari it will return to you um jp2 or something cheap support supports uh safari supports web uh webp now on the new version yeah but it's always over uh auto return to the one that is like the most it's like okay chrome support webp and jpeg png on everything but webp is the most favorite ciao of chrome so yeah we choose the one that they most favorite okay so what did we do to get that feature nothing nothing look nothing you don't even need to do anything you just put the public id and it returned to you automatically and also the quality will be automatic okay that's all you need to do nothing else let's say what else you can do with here okay can we can we make him uh a square ah sure okay how do we do that okay go back swing all this and no well you just need to live there so let's say we can get through 100 no no you can add a picture i always say if you would like it i will add a feature for that but no let's say weight 200 hey 200 you will uncomment the two there now we already have written so with as in with the debbie i already have yeah yeah okay so yeah so you can just use it again so we're going to uncomment that we're going to have a height of 200 and a width can we make it 400 sure so whatever you like i have a question here why have i got one as a string and one is a number uh well that's because when i type i wanna entire stream and then the second one i like okay i forgot about writing the stream and i just writing the number uh that's my back yeah it doesn't really matter unless you're writing like pixel with the pf but if it's not you can so you can just return it and i don't think that will work though yeah so cat you need to transform to be 400 by 400 and go didn't didn't did it didn't fat cat does not want to be 400 by 400. oh i forgot come back go back go back go back you need to do one more thing okay crop you want to craft a let's say to scale it right so let's do crop scale as a string yeah i don't think javascript will like it if you do another string i don't know with the numbers i could do it so you know maybe scale is a number okay so we're crop we're sk scaling using crop crop means to scale or scale means to scale right okay like like cropping more scales to fit inside made my cut thinner but you also make all the surrounding over dinner but even if you want it to be not that thin so let's try again with let's say um crop i think should be few try few oh tom i love that one tom let's see this will actually smear it again i like taking sand you made them fat again [Laughter] what it does in the background it actually it takes the original image and auto scroll up it in the center or somewhere that you saw the main subject is and then crop it 400 over 400 make into a thumbnail bigger okay that's pretty cool so maybe we could just uh just to show like a difference let's go back and do 200 just to kind of show if we make it smaller he's gonna remain that proportion size look at that let's give him 600. now here's my question right i want him 600. what if i was to do responsive is is that like gonna like you know like be a problem in my iphone 600 a lot of pixels uh well if you do 600 over 600 then on the iphone yeah if you if you ask for 600 it will return to you exactly 600 over 600 but resolution may be different for that we're using for responsive mode you need to use another thing called not uh not from the cloud cloud linear instance but component twice so let's delete all of this on all of the source thing here just leave the fat cat as the string of the url i think okay just delete the this dot cloud narrator image so you have deleted all of that deleting all our hard work yes it's fine you can only copy pages from this okay okay okay cool uh delete the brackets as well and just like saying source like that yep just leave it so like that okay okay okay now go to um go back to knox config right and right in there use component true inside cloudinary add another field okay so telling class we want to use a component instead of putting our 600 pixels by 600 pixels right right so go back to the cloudinary.view and um change the image component to cod component cd image actually you can go to the um the website and sorry the documentation and copy the code there yes copying is easier using components right using components use components so all the way on the side you can see you have one thing yeah make on the right side you have make the image responsive if you want to do to go faster yeah okay and just copy that to copy the whole thing copy i love copying this button here and even to make it our lives easier so we don't even have to like scroll and then just remove this image here and we have cloudiness uh just just remove if you want to specify a different cloud other than your cloud then you can use the cloud name for you if not then just remove it and the public id should be the store and the public id should be the source yeah and that's good now actually what do you think everyone is going to work is it's going to work is it going to work i really hope oh my god we have a massive cat we've got a massive cat a nice snack okay now go move it a bit move it and you can you can go to the elements oh yeah okay you can see here that we have other the url that's saying okay we want some different scale different scale and different size so this is scaling as i'm scaling you can see it's kind of like literally just changing those sizes it's got width 400 so uh we've got c scale that's crop scale we've got dpr what's dpr maya tpr is wow i don't remember let me show you where you can go to cloudinary and then i think it's dpi the the greater resolution but yeah oh match device pixel ratio max and which means that it will match the the device the rate the ratio of the resolution will match your device i mean the device of the user okay matching matching the okay that's cool with this 400 i've got a q auto in there what's a q auto q auto mean quality auto which th depends on your device it will return to you the version that is most optimized like the like the most lightweight and still keep the size of the pictures as what you want it to be so let's go to an iphone x because we don't have an iphone 12 in here uh clear that and now i have an iphone 12 i refresh that it's going to give me an image let's see the size with 400 pixels right and i didn't do anything that's cool and if i go to the tablet because i have i like apple so let's go to the ipad pro now on an ipad pro um and let me refresh that and you have it already you have it already it's already auto yeah so fast and it's 1100 and what do i do in the code let's have a look in the code where is we oh we just do responsive that's it right yeah yeah that's cool and now let's say if we add width and height i'm not sure it will but we can try if i fail then uh don't play cloudiness but anyway let's say let's add weight and high for 400 like you you wanted 600 before right go in here yeah 400 i know e core ah equal yeah sorry i'm in the wrong one and need to make it a string because if not then we need to do that okay 400 and height 400 equal oh no don't mess it up again it's automatic oh i know delete on the comma okay cool yeah delete that camera and and let's say crop crop thumbnail drop thumb i'm not sure we work but because most most of the time the responses mean that it will cancel your initially size so okay so we are trying something out live that even maya who is like head of cloudinary image uh optimization doesn't even know if it's gonna work right away our first life okay let's have a look so we've got our fat cat and if we look at what it gave back to us it gave it back 400 by 400 on an ipad pro um it's actually one yeah for well width is 1100 and 1100 but you scale automatically to 400 based on the 400 over 400 so is the image actually one thousand one hundred or is it fourth at four hundred no it's actually four hundred four four hundred over basically it it at the first layer is the return the first one is add the first layer say that i want this picture at the initial size because the container 1000 and then it applied the width of 400 to it so it's make the return a url is actually 400. let's see so to see with 400 hype 400 and if i scroll over there it's giving me the intrinsic 800 by 800 because it's got the what's that dpr again uh device pixel ratio device pixel ratio by 2 400 by 2 is 800 and that's what that's giving me yep and yeah and then now you're ready for making that thing maybe you want to add do all the stuff also you can actually add another layer on top of the picture another layer oh let's add a layer let's get will we get rid of the height and width and leave it as responsive um uh or you can also let's say um add another field um another component called cld transformation okay it would be it would be it will add another layer of transformation on top of whatever you want it to have on the heated image so okay so put this in here and inside here share the image say again you know what you know what go back to the documentation file we're going to copy some code okay cool i like copying oh my god can you see that yeah wow what are you doing to me you're killing me oh yeah oh my god this is not going to happen during the live streaming course it is this is this happened to me the other day in the middle of a workshop which is really really hard to work when your screen is like that um let me just close off a couple of things a couple of tabs i have um too many things open and sometimes what that does is then it kind of like interferes with the um with the streaming so i'm going to turn off youtube and twitch so i don't see it and in the meantime maya you still there yeah i'm still here okay so talk talk us through it while i'm just closing a couple of windows here just to get more bandwidth um this is what happens when you live stream i need more internet i cannot send you a message here that sucks no you can't and i can hear myself you can't send yeah that's one feature that's missing from this is uh that you can't send an actual uh message to me um you can just let me refresh chrome see if that comes brings it back yeah chrome is chrome is just gone i don't know why it does this to me one i know maybe i need to close chrome and restart chrome again yes i am definitely going to do that i mean the other option is to use safari and uh well you can also use safari yeah it's it's not my favorite but let's let's have a look because chrome is causing me this problem uh it's been doing it a couple of times i don't know why you know team team will cry if you're here if not tim bennett's team of apple will cry and he hear you saying that i love apple i absolutely love apple but safari for developing is just not there it's just just not there simple as that so safari it's gonna yeah i thought i'd get you it could even be my computer as to um being chrome i have absolutely no idea um okay let's wait restart local host it's really slow how come myself i hear myself echo another one really i have absolutely no idea um you shouldn't because i have nothing open to hear it and you're using earphones so you can do your sound should be okay um system audio i mean that's just weird okay i've muted system audio muted sound effects mute the movie mute system audio i don't know what that does um does that help does that sound better yeah that's okay much better though cool i hope everyone else can still hear well i see this consistently so about 23 people so yeah thank you for your patience okay so we have our website up and running and we don't have blue lines all over chrome anymore that's brilliant and now we need to go to um yeah this is going really slow we need to go to cloudena oh my god i haven't used apples meanwhile let's have some damn you know what now i hear myself again i'm going to put us on here for like while i get this um up and running i'm just dancing with the unicorn so well while i'm getting this up and running maya shall we start the actual giveaway oh yeah i've been waiting for that okay so very simply um we have two licenses to front-end masters to give away uh six-month licenses um if you already have an account and you haven't paid for it still you just use another another email and you can use this because like a demo it's like a six month one um it gives you six months to all the workshops on front end masters that's pretty amazing and yeah what do you have to do to win you've got to be the first in the chat to answer question so if you all are ready on your keyboard with your fingers let the fingers do the typing and i'm just hoping that my internet lasts because i can see it lagging a little bit which is uh quite annoying so let's hope yeah i can i can also show that i have a latency here that my me and my voice doesn't match right well you know what i'm gonna do because my husband came home a minute ago and i think he closed the door and when you close the door you don't get the internet out i know that's very classic i'm gonna leave you on your own for like a minute to um ask a question so someone can put it in the chat while i run and fix and open the door and get more internet so uh the problem is what question is that well we're gonna ask a question on something we covered um already something that you can use in the code um i don't know for example how do you do this in cloud and area in in you know something like you with me okay so yeah so i should think oh i think i know what to ask something very simple yes something simple we want to get the fastest person are you already in the chat i'm hoping the chat is still working it's been very quiet in the last couple of minutes so i'm hoping they're all just ready ready to type um and then i'm hoping they're ready with the answers because this is an amazing prize this is for one so the first one this is question number one let me run and open that door okay okay you ready so my the fourth question is if i what if we want to have an english that is um have let's say um size 200 over 200 pixel but you have to focus on the um the face itself let's say the picture on the target object of the people of the photo what other what are the what are the crops you need to use the crop attribute you need to use what is the crops actually you need to use yeah basically i give everything already i even give the crops attribute okay so is it clear yeah i think so what is the attribute let's see if we have anyone in the chat hello maybe i just lost internet and i'm only connected to you and the whole world is gone could you imagine if the whole time it was just me and you that will be fun but then we're not together so it's like who will fly the airplane for both of us to go to go to michigan that's true right that's true so i actually hope that we we're still on the internet because it seemed to me like it stopped we don't have any comments okay let's repeat the questions so how do i crop an image at an avatar and with the size 200 width 200 and high 200 which attributes do you and value their need to use for for the clock in order to make it work yeah it says we have 20 people watching so i'm hoping that it's still working but i see nothing in the chat so either the question is still very difficult or or something isn't working and we're having tech issues so that's an issue um you see then we'll lose our call and i think we lose the whole stream um so we might have to do that and then it will like kick it back in again if we've lost the people let's see if i go to youtube oh did you check the youtube channel no i think that youtube is doing is the youtube still alive is that does it count also the youtube uh people inside here or they all need the twitch uh it should come to youtube but on the the url i pasted at the bottom of it okay someone already answered huh yes i got it cool yeah someone has on on twit on youtube okay so who is this [Music] let me go for the first one gravity phase gravity phase is all it's a good answer but you mix it out because gravity face will only work if you had crops feel inside um so sorry you very close very close and maxwell crop equal thumb yes this is the correct answer so congratulations very well how do we do it i'm sorry i need to get some i need to get something to to to have the sound well congratulations or something oh i can do that sound well you have the i've got to unuse the sound effects and are you ready so and well done [Applause] that's kind of cool isn't it okay so um the chat the messages are not coming up for me in the chat i think i'm just having um wi-fi issues so my email is there uh on my email my twitter handler is there and you've just got to send me a dm uh the name we have what's the name maya the winner is the winner is max maxwell parker okay i'm sorry i i am we're not very good in pronouncing english long english word or latin word so i would just call you maxwell that's okay that's okay i don't want to embarrass my smear on life maxwell send me a dm and congratulations you won six months to learn view nooks and anything else you want to learn um in front of masters so that's amazing oh i'm very jealous of you shall we yeah definitely let's do another one okay have you thought about another question oh ye let's say hey do you have any questions should i go continue with cloudinary no let's let's let's continue it cloudinary yeah let's continue a clownary question okay uh i normally i tend to ask some very difficult questions so no one can answer and i will have the price for myself but that will be evil so next question so if you want to have um let's say a placeholder for your image this will not wasn't covered in our in our talk in our livestream so far but if you read my documentation play the module you probably already know so nice if you want to use the placeholder what add the placeholder most that cloudinary martial support that's nice read your documentation documentation they got to read it [Laughter] i don't even know the answer to that one that is that's hard okay so if you don't know where the documentation is cloudenary.nextjs.org and well i'm looking at the documents you know what and you know i can't even find it so god love you everybody okay okay the first thing is it's a component so let's say it's a component so you might find it and yeah and you just need to pass the correct value to an attribute of that component to make into a placeholder so asking what are the valid uh values for that attribute we have well someone already answered and saying it's delayed okay i will repeat the question again so you know that we have well you probably know by now we have a placeholder component called cld placeholder and cd placeholder receive a an attribute for the type so i'm asking what are the possible values to pass to this component to this component s type so pixelate does not count right pixelate is one of them okay david park already got it he got vectorized pixelate plug color yes congratulations effect so effect please oh it's not effect sound effect one more one more bit slower i was reading the documentation okay so yay well done uh what is his name who is it david parks david parks well done david uh i can't even and sorry me championship michelle miguel miguel sorry miguel you just discovered this oh no way yeah almost okay so david parks maxwell both uh send me a dm on twitter and we'll get that to you um okay my video is lagging quite a lot yeah yeah so i'm i'm not sure we can continue like this though no i'm i think i think we've pretty much covered a lot and um for those that are watching um you've seen how quickly and how easily we were able to uh use cloud and air in a project play around with it just by using the cloud name of demo uh change our images and you can find more examples in the uh cloudinary.nuxjs.org website and also in the cloud website itself right you can go there and find even more like amazing stuff right yeah and you can actually use enough content with cloudiness remote in order to actually pre-upload all your image to clarity and then serve it on your site so yeah that's this awesome thing that i will i really i really recommend you to try it out excellent no it's really really cool as you've seen everyone it's really really really really fast uh to do that uh we did it in very little time because we were talking so much as well um you probably can't see my video because i don't think i can see it so i think i'm frozen um i'm frozen in time maybe that's a good thing maybe i'll wake up and it'll all be over what are you thinking frozen at the at the corner the right corner like we can see your beautiful face and your hair and the twitter handler i know if i turn on the other camera i think it's a camera thing because the other camera is working but um you'll see my messy room and that's like not good um so i think uh what we're going to do is we're going to leave it there i'm going to say thank you everyone for joining um thank you very much to maya for showing us a little bit about cloudinary how cloudinary module works and in nooks.js really really easy to get it up and running and start playing with things you don't need to pay any money that's great it's free so start using cloudanry today right yup exactly and if you have any questions or any pictures you want you think would be cool for the culinary module to have feel free to hit me up on the nubs community or email on twitter anywhere well let me do that oh my god oh my god oh my god so i'm like dancing here only you just can't see me because i'm frozen in time um but it's been absolute pleasure having you here thank you everyone for watching in this is the first live stream i've done it might be the last because i've ended up frozen who knows um i hope you all enjoyed it i've definitely enjoyed it anyway and uh yeah that's uh it's a wrap thank you very much and see you everyone i'm waving by the way oh yeah i'll see you well we still have the beer but sim devi is frozen so i guess i will show the beer for myself and we're putting out

Channel: Debbie O'Brien

Views: 1,144

Rating: 5 out of 5

Keywords: nuxt, nuxt.js, cloudinary, images

Id: 91_LliXs3CQ

Length: 54min 12sec (3252 seconds)

Published: Thu Oct 22 2020