Nice video but I believe 15 minutes are way too much for just suggesting 2 libraries . Would be nice to show a video of how can you code that blur effect without the libraries.
@anosikegideon4142
Жыл бұрын
bro!! He just spent a lot of time explaining UI/UX
@dekafmusic
5 ай бұрын
@@anosikegideon4142 sure helped me in some way ngl
@AhmadMughal1
2 ай бұрын
Finally someone that thought the same as i did. The amount of unnecessary information this guy has loaded in this to reach the 10 min mark is astounding.
@andreiolar6104
Жыл бұрын
Well, the second option would have probably worked similar. The issue on why the initial blurred download is very slow is because you have specified the same image for both the src and the placeholder src. That should have been a very light image for fast download :)
@Rhidayah
Жыл бұрын
Ye, my method just generate 2 versions, one 60x60 pixel and other is the orginal one. You don’t blur it. Because if the 1st version expand to w300 h300 make it blurry because small image.
@brawlgammer4424
Жыл бұрын
He just wanted to push this BlurHash library full-force.
@bleakCode
11 ай бұрын
good point. It ruins the point of lazy loading to have to load the same image as placeholder. Instead you can maybe use a default background image
@mmozedev
2 жыл бұрын
The main thing here that is not emphasized enough is the fact that width and height (or atleast height) need to be set. Without that information, lazy load won't work. This means your server needs to return the dimensions with the photo URL.
@thedigitalceo
Жыл бұрын
Exactly right. And it’s the same issue with the NextJS image component which is amazing but you still need to specify width and height which is something that goes against most good responsive design related to imagery. So it’s a catch 22
@Rhidayah
Жыл бұрын
Well, the reason why that width and height need to be set. It’s because, if your image not fully rendered. It became shifted, and after complete it will be jump into bottom. You will be notice, if the image combine with paragraphs. That’s why you should be set that dimensions, to give a space.
@shoutmeback2587
Жыл бұрын
@@Rhidayah What would be the approach for optimizing the images in react applications? Is there some other techniques too?
@Rust_Rust_Rust
Жыл бұрын
can the heights and widths be a percentage of the users viewport? Or does it have to be a fixed value (px, rem, em, etc.)
@CantIllaoiThat
7 күн бұрын
@@Rust_Rust_Rust You can use percentages. For example in tailwind you can use w-[50%] and it will automatically be responsive
@dimafurs6248
2 жыл бұрын
In my opinion, CoderOne is one of the best channels related to Web Development tips and projects on KZitem rn. Thank you very much, Islem, for all your efforts and work done in helping us to understand these topics better!
@raiikagaming
Жыл бұрын
Those who wants to use blurhash as a dynamic image, might also consider the server performance to use blurhash, since I've worked with creating thumbnails via PHP, and it actually cost a massive server performance and it could make a server down if used in a looping state.
@dreamecho100
Жыл бұрын
Is there a solution for this, except for caching the result?
@xyz-ey7ul
2 жыл бұрын
I was about to watch a number videos just to understand the purpose of react lazy feature but this video answered everything and more
@vincentcottalorda2105
Жыл бұрын
Or using NextJS Image component 😊
@ernestdesbordes
2 жыл бұрын
Blurhash is the best and cool way. I use that in all my projects.
@rambhajansaw5933
2 жыл бұрын
who has been blind their whole life and can finally see. I can't express my gratitude in words but tNice tutorials is the best I can do. THANK YOU SO
@brakpseudonimu236
Жыл бұрын
I'll be honest, small fast loading thumbnails were the best experience, and the only big one loading is the one I clicked, but that's just a boomer preference.
@codeworthy
Жыл бұрын
this is awesome man!...i like the last one
@alessandromarin3803
2 жыл бұрын
Thank you so much! TNice tutorials video helped produce fire soft thanks bro❤️
@projottasantos4778
Жыл бұрын
Thank you, it works perfect!
@videolucu5900
Жыл бұрын
thanks a lot!!! so nice reverb
@rifatskdev
Жыл бұрын
Tysm, did everything as described
@petronini
2 жыл бұрын
Great video, man! Could we have a look at the code to play with it and get on better? Thanks!
@3hustle
4 ай бұрын
bro is there any way to preload video at the startign only and then able to seek to any point without buffering, i dont know if youtube allow this or not but is it possible somehow through programming?
@noredine
Жыл бұрын
Is there any way to load them Sequentially? For example loading the 2nd, 5th, 3st, then 1st and so on doesn't look very good
@nro337
2 жыл бұрын
Thank you!
@ziat1988
2 жыл бұрын
thanks for the great share
@hamadoungom8281
Жыл бұрын
now i am in a good mood
@jesusjuvinao8210
Жыл бұрын
Hay diferencia en usar el componente Image de next e implementar este paquete?
@mubarakalalawi305
2 жыл бұрын
In The setup tNice tutorials was a really helpful video but I'm using soft soft 12, is there a reason why I can't hear my own soft play? I click to play
@1337-coder
Жыл бұрын
what if you have authentication? this doesnt work. you need to fetch the images as blobs first.
@SXsoft99
Жыл бұрын
what if you use the "loading="lazy"" attribute on the image tag? native out of the box in html
@kumarankur
Жыл бұрын
you can use it, but as mentioned in the video it is not widely supported in the lesser known/used browsers, better to use intersection observer.
@spoconykubus3480
5 ай бұрын
but this blurbash works good only for box images
@anasouardini
Жыл бұрын
is there an implementation for astro? I looked it up but I found nothing.
@govindagarwal2389
Жыл бұрын
It is easy to do this without libraries, 15 minutes video for suggesting 2 libraries is pathetic. I thought in 15 minutes he will have some information on how to actually do it without library.
@arihantjain8347
Жыл бұрын
just wanted to know, after going through the code are we using react-lazy-loading-component and blurhash together?
@princeparaste5659
Жыл бұрын
No, both are different
@eyout7973
2 жыл бұрын
Thanks a lot
@MonirulIslam-sg7oh
7 ай бұрын
Thank you for the video. How do I store the hash value when I add the image from backend say with laravel and nodejs?
@CoderOne
7 ай бұрын
The hash has to be stored inside the database. For example, if you upload the image, you have to generate the hash out of the image and store it alongside the image data in the database. So later on, the hash would be returned with the image data.
@MonirulIslam-sg7oh
7 ай бұрын
@@CoderOne yes that what I have asked, its just hash like password hash or something different?
@jorgeassaf
Жыл бұрын
Hello bro, how could you do it with nextjs Image component and blurDataUrl?
@HaNaxHeart
Жыл бұрын
hi, does anyone know what beforeLoad do in 14:20? cuz I think just use the onLoad prop to control the logic is enough?
@razorjhon2622
Жыл бұрын
too much talking for 2 libraries also you didn't even show us how you did implemented the code :(
@anaqo7175
2 жыл бұрын
Sa. TNice tutorials quarantine is making question my whole existence.
@MrSatyavinay
Жыл бұрын
Cool!
@code-island
Жыл бұрын
pretty cool
@shinobi_coder88
Жыл бұрын
How to use blurhash with dynamic images? From TMDB API for example. I use lazy loading image in NextJs and it still quite slow
@shinobi_coder88
Жыл бұрын
@Ta Chi Bao interesting, can you share me the repo? thanks
@muhammadukkasha5048
Жыл бұрын
Good video but man pls be specific, your talk was much of telling your experience in many words instead of just showing what's the problem and how to solve it, that's it
@piflom8400
2 жыл бұрын
Imagine how much money he would have made if he had ads. There’s 6.6 million views.... he’d be rich
@mohamedyoussef8835
Жыл бұрын
Awesome video +++++++++++++++ 🙂
@usamakayani6537
6 ай бұрын
Wordpress please
@karthikp4484
Жыл бұрын
this guy voice is similar to webdev simplified
@dunguyen2924
2 жыл бұрын
How’s it going?
@izzetah2358
Жыл бұрын
Thanks for helping the community i will be so glad if you cancel continue your good work
@cristianbilu
Жыл бұрын
I am triggered by the fact you use create reacy app.. Why??
@paologonzales4361
2 жыл бұрын
where is the github repo?
@1879heikkisorsa
Жыл бұрын
This video could have been 2 minutes long. Get to the point!
@edhahaz
Жыл бұрын
Lazy loading is the worst way to load images
@archmad
Жыл бұрын
why lazy load a 4mb image file? load 150k at most for each image. that;s enough
@Haz1Art
Жыл бұрын
You talks so much of irrelevant info. This doesnt have to be 15 minutes. Sorry, but such a waste of time.
@muhammadhasnat9835
11 ай бұрын
Video is full of fluff and unnecessary time wasting talk
@dexion_gaming
2 жыл бұрын
laughs in unlimited free trial
@gmc5946
Жыл бұрын
you do sure talk a lot
@yadmr3557
2 жыл бұрын
♂️
@omranarchitects7816
2 жыл бұрын
its blatantly obvious that you're trying to scam people
Пікірлер: 73