It depends on how you are fetching the data. If you are using static site generation, it doesn't really matter where the data is being fetched from, as the pages will be generated ahead of time. Based on my experience, Storyblok seems to be fast enough, even when fetching the data on a per-request basis.
Amazing tutorial, so clear on instructions not only with storyblok but with nextjs and going into each step with detail. Have subscribed, would love to see more storyblok and nextjs content.
can't we use same image for this? i mean the image coming from api....I don;t think we save different versions of image while creating blog post or anything
Usually most content management systems automatically create different versions of the image when you upload one or they provide an API that you can use to fetch different versions of the image with URL search params. For example example.com/image.png?width=400 would fetch an image and resize the width to 400 pixels on the fly. Imgix is one these services that provide this kind of functionality.
Great example. I had something similar when product had the bright idea to still show the fields but disabled. Apparently this really complicates things since now you have to disable the validation rules from triggering on disabled fields.
Hi Austin, sorry for another question! When I move to the next step it seems to populate the next inputs with the previous values. Have you ever come across that behaviour?
Only half way through but loving the video. Out of interest, do you need to use a ref to register the input? I've been using {...register('name', {required: true})} as an attribute and it seems to be working ok?
Thank you for watching. When I recorded this video the latest version of react-hook-form was 6. Now it's in version 7 where the syntax has changed a little bit. The way you are using it now is correct 👍.
This is great, but what if the form has over 20 fields, I would need to create a copy of it for every version, is there a more 'versatile' way of achieving this? Maybe when setting the definition of a type in the schema, can I co-require a field, instead of creating different possible versions of it? I'm new to zod as you can tell...
Nevermind, I found a more dynamic way to do it, just creating the z.object with the diff, and merging the base schema, so I don't have to create copies for every version.
This has been the clearest and most informative explanation I've found so far. And it also covered how to handle images in a responsive grid layout, and it all now seems to easy and obvious. Thank you, Austin.
I don't understand why <img not loading my images in srcset? <img srcset="<?=SITE_TEMPLATE_PATH?>/img/wildly-relax-767.jpg 767w, /upload/iblock/017/017a40279824ba556009d247f6b7ee76.jpg 1920w" src="<?=SITE_TEMPLATE_PATH?>/img/wildly-relax-767.jpg" alt="Description of the image" /> he is always loading 1920px image
I just watched this and your other React/Zod vid for the first time. You have some great tips, the vids are clear, concise, and well-edited. I need to rewatch for the detail. Please do keep it up.
Hey Austin, your tutorial worked for me. Thanks a ton! 🎉 Just one small question... what is the difference if I use 'srcset' or style="max-width: 100%; height: auto;" attribute to make the image responsive? Also, which is better to go with?
@@shrutisahu6660 Image responsiveness can mean two different things. style="max-width: 100%; height: auto;" makes sure that the image fills up its parent container and that its aspect ratio doesn't get skewed. The srcset and sizes attributes make sure that the browser loads the correctly sized image based on the viewport size so you don't actually load a too large image and waste precious bandwidth. They do two different things and are best used together.
Thank you very much Sir. I learned a lot. I applied this to checkout page where checkbox is biling address is same with shipping address or not. Thank you very much
thank a lot for thit tutorial, bro i have a question how will it be if you the sections in differents componet, i mean how will you acces to data in different form and submit them in a single, i'm really curious about knowing this
TypeScript is correct in this case. If the checkbox is not checked there won't be a property email in the formState.errors object. To fix this, you have to first check if the object has the email key like this: "email" in formState.errors && formState.errors.email
