Grids are a very cool feature in CSS. Imagine building layouts like these without display: grid; π²
In grids, the grid template areas property is handy to visualize what the output grid will look like.
Here we have a 3x3 grid, with the first image alone occupying 2x2. The areas definition literally mimics the same!
It is very useful for such use cases.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
π33β€17
Did you know that you can instruct the browser to load images from the backend only when the user scrolls near to the actual location of the image? This is possible using the loading attribute in HTML.
The browser runs some heuristics to check when the image might be actually required to be rendered.
π For example, an image at a bottom section might be required only when user scrolls into it and not immediately during page load.
This significantly reduces the network bandwidth and initial page load times!
The browser runs some heuristics to check when the image might be actually required to be rendered.
π For example, an image at a bottom section might be required only when user scrolls into it and not immediately during page load.
This significantly reduces the network bandwidth and initial page load times!
π₯30β€22π15
Media is too big
VIEW IN TELEGRAM
I see people use vh a lot, and then complain that it doesnβt work the way they thought it would, so in this one, I explore a few other options that we have, which are dvh, svh, and lvh. Along with these, you could also use dvb, svb, and lvb, which are the logical property version of the height units, but for the block-size.
Please open Telegram to view this post
VIEW IN TELEGRAM
β€20π17
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
β€49π8
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
β€27π4
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
β€34π6