Earlier this year, I’d been experimenting with paper effects. I created a handful of pens on CodePen that (with a containing div and some styling) could turn an image into a folded poster, leaning cards, a coffee table book, or a trapper keeper.
CDS in 2020 was a bit different, like everything else. It was online, and the talks were more bite-sized at roughly 10 minutes each. I really enjoyed this new style of the summit and, while I missed the in-person aspects of the conference, this was a great way to end the year. So, without further ado, here’s what I’m most excited about from the conference!
In this post, I’d like to share a few techniques which you can use for selectively downloading/executing resources such as JavaScript. As an example, if the users device does not have a lot a RAM, you could decide to skip the downloading (and in turn, the parse + execution costs) of a particular JavaScript resource.
Google Fonts resources will be redownloaded for every website, regardless it being cached on the CDN. Self-host your fonts for better performance. The old performance argument is not valid anymore.
If you’re using a browser that supports the CSS paint API, the element will have a ‘random’ pixel-art gradient in the background. But it turns out, doing random in CSS isn’t as easy as it seems…
The CSS property object-fit instructs an img to act as the container for its own contents. We can then use the value cover to have the image content behave similar to a background-image by scaling up or down to fit the provided dimensions. If the goal is for the image contents to remain fully visible within a container while maintaining its aspect ratio, we can use the value scale-down.
Thanks to Cloud Four for sponsoring this week’s newsletter! If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.
Tweet
Share