Teaching CSS to a Coder 🙀 (How to Lazy Load Images)

David teaches MPJ about lazy loading images for better mobile performance and the CSS aspect-ratio box padding trick. MPJ is NOT convinced.

Can you solve it in a different way - write that in the comments plz!

Aspect-ratio boxes on CSS Tricks has covered this hack in great extent.

To properly access the DOM in React, we should have used refs (thanks to @23luski and @Rela takera in the comments)

The editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.

DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!

DevTips has a sister channel called Fun Fun Function, check it out!

#css #hack #reactjs

[TheNeonRaven]

You could also have just put an actual image element inside the wrapper div without resorting to JS dom insertions. If you don’t want the image to show up at all until it’s fully loaded, then just give it 0 opacity, and use the images onload event to set the opacity to 1. This also lets you put a transition on it if you’d like, and if you have width and height attributes on the images, then this will force the size of the wrapper for you so you don’t need to hard code it in the CSS. Slightly more performant, more accessible, image can now be picked up by search engines, and arguably easier to reason about. :)

[mattjclay]

“A cpu is just a rock that we fooled into thinking, then we put lightning inside of it.” Love it. So elegantly put.

[shriniwasrocks]

this is an awesome video format. Please do more of these challenges.

[CodeGoblin]

This was very enjoyable to watch, love the fact that you guys don't do this before hand so that we get to see how you approach the problem realistically.

[librev]

Thanks for the DevTips, these videos are really helpful for those looking to use CSS when designing their websites.

[md.akib]

DevTips Pair programming is so cool. It's helping me to learn how to work with other programmers in a team. I really like the style how you go through the project just as we go through in practical life

[nenojay]

This is awesome, I love learning how others approach problems like these.

[ankushjamdagani]

We all have so many sources for serious learnings and stuffs, including you guys, But I keeps on sticking here... to the FFF and DevTips only because it gets boring sometimes and I watch you guys for the fun in learning. That way it sticks in your head for long. Instead of G.O.T., I am watching you guys, coz it's more fun and involving. Thanks for the efforts and innovation guys are bringing in.

[raipratik]

Loved it guys. Keep dropping SEO boosting hacks. Now its time for FIKA!!

[chrsbll]

Padding percentages being relative to element width actually makes a lot of sense. You don't want it relative to height because then setting the padding top or bottom would affect its rendered height and you'd have to recalculate the padding, and so on.

[nathantorquato]

A couple of mates complaining about the channel's content quality. IMO it's great for new devs to see what real life coding is like. Every seasoned dev knows this is actually what our life is like. It's just a matter of target audience. That's definitely not a channel for senior devs.
I'm a huge fan and have been subscribed since Travis. It's still a great channel with awesome content... a different approach though.
keep up the good work, mates!

[IvanIvanov-epzo]

12:00 Little known fact - in CSS when setting the padding of element in percents, the value is calculated based on the width of the parent element, and not the width of the Element the padding is set on. Having this in mind I would recomend creating pseudo-element (:before or :after) and set the padding there, this way the height will be propotional to the element itself. This technique is used when making responsive videos - first we create div and apply padding-ratio of 16:9 (the video's ratio) or 56.25%, then we make it with relative position, and then we position absolutelly the video element inside. That makes the video element keep the ratio of it's parent element, and we avoid having black bars on the sides or on top/bottom of the video.

[Haydencarnegie]

I'd action this a different way as background images aren't great for accessibility (since you can't give them an alt or title).

I'd make the image wrapper have its padding but make its position relative.
The image inside i'd then make position absolute, top 0, left 0, width 100%; height 100%; this shouldn't distort the image as we already know its aspect ratio, if there is an a problem with the image aspect ratio you could end up changing the wrapper have a property of object-fit: cover; That may be new CSS and experimental but that will do the job too..

Devtips, could you do a video on grabbing different images depending on the size of your window/device? Whether speed would be better using a src set or just directly changing the image in the DOM?

[pureretro]

As the old man in the room who has been doing this since the days of dialup I say bring back the lowsrc attribute. It loaded the low res image and then got to work on the huge 6Kb image once it was done. :-)

[juliovedovatto]

Thanks for the insights guys, it was helpful

[abdullahabd]

I don't know why but I laughed out loud when mattias was attempting to comment out the html inside the js file.

[GifCoDigital]

Was literally just working on this yesterday! You could also have had a handleImgLoad() method on your class, then use an img tag inside your image container with display none. Then on the img tags onload() event you can display block to reveal the img. You img container handles the svg img like you are already doing it.

[whoami-sohy]

i always watching u in every episode cz i enjoyed:)

[josephmallari]

You could also use the new Suspense and Lazy feature on the latest React release. Set the low quality image, then append the high res image once it's loaded.

[wojciechlipinski]

So I'm at work, writing ReactJS, watching your video, listening to music. It's not easy to be a JS programmer 😁😁😁