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

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. :)

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

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.

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

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

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

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

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

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

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!

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.

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.

"I am shit today, thank you."

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

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.

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. :-)

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.

Thanks for the insights guys, it was helpful

CSS pervs 😂

CSS hack is like "Excuse me... What the f&ck?"

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.

Thanks guys, I enjoyed this. 👍

12:00 .elem { height: 100vh; /* 100 viewport height, fill screen */ width: 100vw; /* fill screen */ object-fit: cover; /* Does the same thing but seems more reasonable to me than padding-bottom: 150%; }

If we don't write padding-bottom or height the image will itself take the values and will retain its aspect ratio as well because we have given width 100%

the conclusion @22:20 seems like two drunk guys arguing about the meaning of life. awesome.

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?

Wow, now you start to talk. Thank you very much guys.

You've created an Image, and then changed the url of the existing image (background-image). Is the image actually caching?

In that specific instance, why not simply use an image tag inside the div? That way the svg background image would still show, and the full-size image would progressively appear (depending on format) without need of any additional JS. Also, you can sidestep some of the needs of the padding-bottom hack if you set the size of the div you want and have background-size set to cover. This would cause some pixels to not be displayed if the image isn’t exactly 3x2, but on the plus side, it makes the layout consistent even if the hypothetical editor in this situation uploads every image with slightly different dimensions.

You could use the component's state to handle the image loaded status, on the render function you can select the src according to the state, ex: constructor(){ this.state = { showOriginal:false } } ... img.onLoad(() => this.setState({ showOriginal: true })) ... render(){ ... ... }

You should use refs instead of querySelector...

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

For such a talented man!!! you forgot about CSS { height: Auto ; Viewport vh; height: 100vh; /* 100 viewport height, fill screen */ width: 100vw; /* fill screen */ }

I was wondering. Is there a reason you guys didn't use "object-fit" and give the image a defined height and width? This was a fun episode.

@DevTips How about keeping onload method inside a promise. Initialise promise inside constructor of class or above class. Assign promise to class property, use promise resolve in ComponentDidMount to resolve the promise and update the image url. Though it won't make huge difference but it will be faster than current implementation. I guess :)

"A CPU is essentially a rock that we have fooled into thinking and then put light inside of it." MPJ

Oh man, already did thumbs up, we need a second thumbs up or dare I suggest claps? MPJ's disgust at CSS was fantastic.

Quite like the idea behind these videos: developers trying to figure things out. Quite often there is more to be learned by watching someone fail and learn things, than to just watch someone do it quickly in 1 minute. We can learn from our mistakes. After watching several of your latests videos however, I'm quite often disappointed by the end result. This video is full of bad-practices and anti-patterns, both on the CSS and React side of things. Plenty of commenters have pointed that out already. I get that you have to fight through a load those bad things before ending up with a decent result, and it's perfectly fine to show that in the video, but you're not ending up with a decent result. You're just teaching bad stuff here. Trying to show us a CSS-trick while using React to implement that trick, and then halfway the video admit that you don't really know how it works in React.... Why? Why not just use plain HTML with some small JS-script? Or any other library that you actually know how to use? This just shows a huge lack of preparation, and to be honest, feels a little disrespectful towards your viewers. I would suggest a slightly different approach: make sure one of you really knows the subject, or really prepares for the subject, so you know what the best practices are. Then have the other one figure things out. That way, at least you can make sure you end up with a decent result, and actually teach good stuff, while still getting the cool dynamic of "figuring out things".

I think it has to do with the CSS box model and would like to see to use the other parts of the model used as if it was the padding in the code shown. Should try using the margin, (possibly not border), padding (already tried), and content if they work the same. (if so, then it probably has to do with the box model not padding.)

"oh you mean humans!!!" :D I'm new to programming and I gotta wonder is this my future??? :D getting so caught up in programming terms that I forget the word for humans!!! :D xD

Why not object-fit property

Great stuff.

There's also vmin, vmax, vh and vw!

Hey guys, I'm really liking these pair programming videos, please don't listen to the loud minority saying they're not interesting. You'll never be able to please everyone so do your best and don't try to! If you guys feel like it maybe there's room for more rehearsed vids about harder topics but please keep these ones too, they're funny, interesting, and really mirror how real life coding is like.

You can use http2 headers to preload the image :-)

MPJ the reason you make so many typos is because your oversize Nordic hands have too much Viking power for your laptop's tiny chiclet keys. I look forward to hearing the satisfying clackity clak of a mechanical keyboard (green switches) once you have come to your senses

Instead of padding-bottom you can use height: 150vw; which is much more understandable - it will be 150% of viewport width. Also using Progressive JPEG might be much easier then writing a code... I personally use generic background image drawn with CSS gradients as a thumbnail and Progressive JPEG on top of it.

The universe thing broke me... 😂

Superb

Noob here: What Is this cool software/interface that you are working with? :) Coding the same document n stuff! :D

In CSS you can`t write something like 'height: 1.5 * width' because of the way a browser interprets layout. For example, imagine you state that hight = 1.5 * width, and width = 1.5 * height, it just can`t resolve it to some finite size. CSS isn`t a procedural programming language, of course you go crazy when trying to pretend it is.

The image should also be saved as 'interlaced' en.m.wikipedia.org/wiki/Interlacing_(bitmaps)

You could definitely turn CSS Pervs into a sticker 😆

.src assign should be after .onload assign, or cached images won't fire onload

Gotta some feedbacks for you: do more small projects, moar pair programming and shorter videos!

Here, an article about the aspect ratio trick: css-tricks.com/aspect-ratio-boxes/

Hey guys... the padding-top / bottom as a percentage is part of the spec, not a hack... Have a look: www.w3.org/TR/2011/REC-CSS2-20110607/box.html#padding-properties: "Percentages: refer to width of containing block". The designers of the CSS language actually put a lot of thought into this, and understanding CSS in the same way you know native JavaScript or HTML is critical to being an effective frontend developer; CSS is one of the most carefully planned out and future proofed languages for layout ever created - truly a work of art. There isn't anything magical or black box about it, it's just that everyone seems to think they can get away with not learning it, and the result, imho, is probably more costly than IE6 ever was...

Percentage padding is not a hack. The worst you can call it is a trick. Since you're locking yourself into a fixed container aspect ratio you really should use background size cover or contain with desired position and no repetition. Backgrounds are also better than image nodes from a performance standpoint (I remember an old Flickr research on that). And if accessibility is of any concern, there's WAI ARIA and microdata. Also, why is the micro image an SVG? Just use a tiny JPEG and base64 inline it.

How did you create the blurry svg file?

If you want to know more about why padding-bottom in % works, css-tricks.com/aspect-ratio-boxes/ tells you all need to know

where do u work mattias

Could have placed the two images on top of each other with position relative/absolute, then there is no need to replace with JS and would fetch as soon as possible. Think that would work? This solution seems a bit over engineered. 😅

Just add height: auto; Is much more simple

Wasn't this the whole point of progressive jpg's?

Okay, setting padding-bottom to 150% is a hack and works for the wrapper to be the needed height in the first place but how the hell when the image is loaded the padding-bottom disappears?!?

I use height: 150vw; instead of hacking the padding

Accessibility will fail if it's a background image and not an actual image itself.

Use ref instead of directly accessing the DOM

Inline style maybe ? reactjs.org/docs/dom-elements.html#style Pretty sure it's the right way to do it instead of selecting the dom, you should avoid manipulating the dom yourself

CSS is weird.

cpu is just a rock that is fooled into thinking :D

❤️

Unmm Suspense...

MPJ looks a lot like RDJ.

that css hack tho

I'm a css perv

Wow... Helo polisss... Sum1 is hacking css... Hahaha

is mpj dead?

From the official doc, the padding-bottom percentage trick is not a hack. «The size of the padding as a percentage, relative to the width of the containing block. Must be nonnegative.» developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom#Values

Noooooooo! you are loading the image and once it's done loading you reload it by changing the background source (url, not the actual image data) . Onload you should have just appended the image and the wait time would have been cut in half ! You are loading it two times !!

I love you guys, and I've been following you for years now... but these type of videos are too long, I feel like they're a waste of time! You could've showed us the 5 lines you wrote in 5 minutes with better explanation or you could've just edited the video and throw cuts here and there with a "an hour later" sign. Btw: I gave it a thumbs up, just like every other video from you guys but I'm losing interest slowly as many others. * This is meant as constructive criticism.

Guys, I'm a big fan of David, mpj and devtips. From last couple of months video content quality is degrading. This is negative feedback but truth is truth. I don't want to demotivate you guys. I really love your previous all videos and series. Please don't mind

Eh nothing hacky about this at all, completely consistent with how the box model works.

HOOMANS

guys...css is awesome lol

First: This is what img src set is for. Your app or CMS just needs to store thumbnails at different sizes. And based on the viewport width of the device, it will load only the appropriate sized image. WordPress does this very well. Second: Glad JP’s learning CSS. But, I was cringing the whole time. 😂

background-size: cover; will always keep the images aspect ratio but won't allow for solid bars on top/bottom (as 100% will) if the aspect ratio is higher than you expected. I must admit this video was no fun to watch. You weren't well prepared and it was not at all obvious what you actually wanted to do. An the result was really frustrating. Also, your usecase was an editor who uploads images. You weren't including foreign images. Why did you just assume (and never mentioned it) that you don't know the dimensions of the image? Using the dimensions would be the obvious choice if they are available on the server. By using an optimized version of the image, you actually kind of require it to be on your server anyway for processing... If you want some ideas on lazy load images, I'd recommend ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-tHJwRWrexqg.html or ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ncYQkOrKTaI.html

Dissapointed in the CSS spec. We have calc(), var(), vw and all the nifty things yet there is no better way then the padding hack to force an aspect ratio.

Hacks == Bad. They produce hard-to-maintain and hard-to-read code. Comments should identify a code block's intentions, not how it works as the code should be self describing. I would lean towards CSS3's calc function to set the height, or use a pre-fetch if possible.

Everything in css is a hack

I've got to say I'm pretty disappointed in this video. Sure it was entertaining, sure I learnt something. But I mainly come here to admire MPJ's hair and was let down. More seriously, for me, I'd always want the image size stored in the db. Then no hack needed. Not sure about SVG creation, so might look at a small thumbnail, which may already be in cache and a blur filter on it. Also, thumbor rules for image resizing!

First

Wouldn't 150vw work?

He's right though. CSS sucks.

This is the worst solution :)) omg! Just use data attr on one img tag and use state.

I have to say I could not finish watching the last couple of videos. When two of you try to do something, it looks very raw, unrehearsed, and to be frankly UNPREPARED. Your back and forward is distracting, confusing and infuriating.

The web is crap.

Good idea, poor execution, unplanned, unrehearsed, difficult to watch. I'll never unsubscribe because I know you'll turn it around eventually.