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

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

[@ChiefInspectorSpankie]

Amazing suggestion.

[@mubarkmurtda4735]

😍😍

[@s.daniel2714]

This is actually quite nice. I will use this. thanks

[@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.

[@shriniwasrocks]

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

[@librev5881]

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

[@md.akib5124]

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

[@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?

[@mattjclay]

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

[@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.

[@IvanIvanov-ep8zo]

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.

[@slablife]

Иван Иванов this! This is exactly what I do and it works like a champ.

[@idontwantmynameinhere]

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%; }

[@81NARY]

Yeah but wouldn't that take the whole height of the screen and push other elements at the bottom (that button in this case) further down? Edit: I think there should be another way around this horrible hack. I still can't wrap my head around padding-bottom 😂..

[@idontwantmynameinhere]

@@81NARY Of course, 100vh is equal to 100% (but more reliable on smaller screens). But if you want to have a different value for height, that's totally fine. My point is that if your height and width are fixed, you could use box-sizing: border-box; and using 100vh makes the whole thing responsive, so that's why I chose to use 100vh

[@railb1rd]

object-fit is not well supported though

[@81NARY]

@@idontwantmynameinhere Totally agree on that 😊

[@Victor_Marius]

height: 150vw; I think they needed

[@nathantorquato9777]

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!

[@raipratik]

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

[@nenojay6832]

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

[@ankushjamdagani2879]

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.

[@whoami-so2hy]

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

[@wuiqed]

"I am shit today, thank you."

[@josephmallari8780]

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.

[@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.

[@23luski23]

You should use refs instead of querySelector...

[@23luski23]

But actually the whole idea could be implemented much easier without touching DOM api

[@OfficialDevTips]

I thought refs were only in “old” React. And yeah I’m sure we could use state on the src instead or something. What do you have in mind?

[@OfficialDevTips]

Noo I guess it was STRING refs I was thinking about

[@sweLogan]

CSS pervs 😂

[@juliovedovatto]

Thanks for the insights guys, it was helpful

[@emmanuel4699]

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.

[@brianhogg358]

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.

[@valshin]

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

[@alphanimal]

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

[@pureretro5979]

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

[@OfficialDevTips]

Whaaat didn’t even know about that. And yes. These heavy 6 kB files is really hurting me on the 1 Gbit fiber.

[@leonk6950]

Is that a thing in the current spec?? Sounds like something that should be used everywhere, as long as the implementation is good

[@jesinu]

Thanks guys, I enjoyed this. 👍

[@reg.x]

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(){ ... ... }

[@mikejames5918]

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

[@wojciechlipinski7258]

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

[@elvinnie1985]

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".

[@PaulMcCannWebBuilder]

As a CSS perv, I have to agree that would the right approach. It's fun to watch developers figure things out, but this video is only helpful because it forces me to try to think and make a list in my head of all the pure CSS solutions I would have used. And my main goal would have been avoiding delivery of an image bigger than it needed to be in the first place. I don't want you two to stop doing these kinds of 'top of your head' code videos though. Just throw in something useful, like show me how to implement SQIP so it creates placeholders for a folder full of images and then load them properly to the page.

[@danko95bgd]

Why not object-fit property

[@abdullahabd7677]

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

[@indoom]

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

[@DEVDerr]

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

[@watching4410]

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

[@jasperzanjani]

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

[@Victor_Marius]

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

[@shauntricks]

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

[@sahilchutani2200]

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%

[@ViniciusRocha-bl1lk]

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

[@laymanan]

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

[@pavelagarkov2634]

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.

[@thomashoffmann9349]

That's not going to achieve the correct aspect ratio as it's dependent on the height of the window, not the width of the image...

[@pavelagarkov2634]

@@thomashoffmann9349 sure, but image width in most cases depends on viewport width in one way or another. In my case I do actually use something like this: height: calc(100vw / 3 - 20px); where 20px - is a sum of paddings over the image. but it is hard to say it is well understandable :))

[@natqe4049]

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

[@RmNrIHRoZSBDQ1AK]

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.

[@OfficialDevTips]

Tje SQIP looked better than when I generated JPEG LQIPs

[@groovebird812]

How did you create the blurry svg file?

[@OfficialDevTips]

Using SQIP. If you write a simple node application and import that library, it is not too complicated to convert: github.com/technopagan/sqip

[@maddada]

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.

[@evans8245]

where do u work mattias

[@GuusHamann]

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

[@JoshuaHeagleDev]

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

[@Shubham_Gautam]

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

[@ksubota]

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.

[@jameszaccardo1520]

you could use the calc function to achieve this

[@ksubota]

@@jameszaccardo1520 no, you can`t, because with the calc function you can reference only its parents dimentions, not its own. That`s why they used a hack with padding.

[@jameszaccardo1520]

​@@ksubota your just doing it wrong

[@ksubota]

@@jameszaccardo1520 may you give an example, please?

[@ArthurvanAcker]

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

[@petarkolev6928]

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?!?

[@OfficialDevTips]

If you add an image within the wrapper, set the wrapper's style to have "overflow: hidden;" Or just replace the wrapper's style "background-image" with the new image, which actually never removes the padding.

[@petarkolev6928]

But if I never remove the padding wouldn't this resolve in pushing the button (in your video's case) away down from the image? Or am I just not familiar how padding really works :p

[@IkBenMarcelAkkerman]

I think there is no content. The 2x3 rectangle is constructed only with bottom padding. remember the image is the background of the element not the content.

[@petarkolev6928]

Marcel Akkerman ooooooh, background! Yes, my mistake! Now it does make sense:)) thx ^_^

[@szlain]

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

[@taneliharkonen2463]

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

[@gioac96]

It's Visual Studio Code, and he's using the VS Live Share extension. 100% awesome stuff.

[@Aly_Fahmy]

"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

[@ksubota]

yes, it is :)

[@Ecker00]

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. 😅

[@beeenthere]

You could definitely turn CSS Pervs into a sticker 😆

[@ChristoPy_]

Just add height: auto; Is much more simple

[@StevenKW]

Great stuff.

[@ZliNindza]

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

[@leonk6950]

Noooooo longer videos are better

[@albertkoppelmaa7178]

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 !!

[@thomashoffmann9349]

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

[@JacopoPatrocloMartinelli]

The universe thing broke me... 😂

[@Felipecuevas]

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

[@bhupinderpalsinghkaur6898]

I used it in one of the projects I worked on and it worked quite well for me. I still can not properly use this bottom padding technique. Its good to know that there are other persones using the technique way as I do.

[@joaoluiz8973]

MPJ looks a lot like RDJ.

[@ablanchi]

is mpj dead?

[@floverdevel]

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

[@victorjozwicki8179]

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

[@ericzorn3735]

Use ref instead of directly accessing the DOM

[@MichaelRichins]

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

[@OfficialDevTips]

Good point! Yeah actually we had that option planned but made the video lose tempo so decided to stop having done the background-image.

[@shriniwasrocks]

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

[@fanji424]

that css hack tho

[@mohammedsalman3397]

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.

[@CrashDSInc]

Seems to me that showing the process is the whole point of the videos. If you just want a quick tutorial on lazy loading images, those can already be found.

[@RoterFruchtZwerg]

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 kzbin.info/www/bejne/qnmtqIWNp8qrp8k or kzbin.info/www/bejne/pJS8gp6Fp7CHl6s

[@engineering-with-sagar]

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

[@TheOlian04]

Sagar Gavhane no, please do mind. I totally agree. The quality has been tanking for the past maybe 5 months.

[@OfficialDevTips]

Could you specify what you think qualifies as the good content?

[@noidarradion7087]

Video is too long

[@HazimFauziSsMf]

But the reality this is how programmer work... Haha yeah you know

[@engineering-with-sagar]

Topics are not interesting and we want to learn new things. I'm following FunFunFunction from last 1.5 yrs. You can clearly monitor video views, likes and user engagement with videos. MPJ is great teacher I ever saw in my career. FunFunFunction has very good cotent of Functional programming and unit testing. I know you haven't get enough time for working on videos. Two or three videos with good quality is enough for the community.

[@fullmuppet]

CSS is weird.

[@macaronivirus5913]

It is, but it's getting much better. Comparing possibilities and cleanliness of the code to what it had been 15 years ago, now it is the gift from heavens. Wait a bit more and it will support what scss is capable now, and that height percentage thingy too.

[@davidnagli]

Unmm Suspense...

[@mdshoaibAlamgcetts]

Superb

[@wbaloo1]

I'm a css perv

[@HazimFauziSsMf]

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

[@jiggasnap]

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

[@hironakae]

HOOMANS

[@nancymikyska2832]

guys...css is awesome lol

[@rezamahmoudi]

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

[@natqe4049]

Everything in css is a hack

[@GameOver7853]

Very true

[@eugeniomonforte6366]

Please, learn CSS zendev.com/ultimate-guide-to-learning-css.html

[@0-Will-0]

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!

[@craigfreeman8225]

Here's the thing though, going to the dB and bringing that back is an async action. If you wait for that not only is it more server load but also either have to decide to not route to the page in a spa, or add extra latency for no real reason in a ssr app.

[@jobybejoy8219]

❤️

[@OfficialDevTips]

❤️

[@WilliamBay]

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. 😂

[@jasone9185]

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.

[@hamadyalghanim]

Wouldn't 150vw work?

[@ArthurvanAcker]

That wouldn't work, because you don't want 150% of the viewport width, you want 150% of the parent container

[@HSMAdvisor]

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.

[@GifCoDigital]

The back and forth is the POINT of these videos. You dont like it go else where.

[@HSMAdvisor]

@@GifCoDigital I fail to see the POINT. Just like the point of an argument is NOT to win, but to find a solution, the point of an educational video is to drive the POINT. Not to show a complex dynamic of two people finding a solution to something. And you are having unproductive stance on it. If everybody doesn't like the new format and just leaves, the creator will not know what he did wrong. Cheers.

[@GifCoDigital]

HSMAdvisor - well no one is leaving except you! Sooooo good bye and good riddance.

[@HSMAdvisor]

@@GifCoDigital Good sport.

[@GifCoDigital]

@HSMAdvisor - its ok the anger usually fades after puberty. Good luck till then.

[@librev5881]

First

[@Dylanm94]

He's right though. CSS sucks.

[@tenminutetokyo2643]

The web is crap.

[@JonPreece]

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