Normal layouts? Humbug! Let’s get diagonal instead.
Nils Binder shows us how to create diagonal layouts and he made this cool demo in Codepen to show how that’s possible:
There are a bunch of ways to do this sort of thing but Nils shows how to do it with CSS transforms, like this:
.diagonal-box {
transform: skewY(-11deg);
}And as Nils mentions, this will skew all the content within that element so you’ll need to reverse the transform for the content within it:
.diagonal-box-content {
transform: skewY(11deg);
}Then some fancy math is used to handle the padding inside to make sure the content lives in a “safe area”. This is a smart technique that I’m sure I’ll have to use at some point in the future!
Here’s how to recreate that nifty Netflix animation
In this post, Chris Geelhoed has a real smart way of doing this: first up, the focused image uses transform: scale() which makes a bunch of sense — but each of those items to the side? That’s done by shifting every item to the left and then every item after the hovered element to the right, like this:
.item:hover ~ .item {
transform: translateX(25%);
}Some tips for writing animation code efficiently
Zach Saucier recommends a bunch of techniques and best practices, such as using an animation library like the Greensock Animation Platform (GSAP). I particularly like the suggestion to use the MorphSVG plugin which does just what it sounds like, helping us morph SVG paths by animating them together.
Here’s an example of what that looks like:
When debugging, your attitude matters
In this great post on the subject, Julia Evans argues just that and how on a recent project she found that her process wasn’t helping at all:
While I was debugging my CSS, I noticed myself doing some bad things that I normally would not! I was:
- making random changes to my code in the hopes that it would work
- googling a lot of things and trying them without understanding what they did
- if something broke, reverting my changes and starting again
This strategy was exactly as effective as you might imagine (not very effective!), and it was because of my attitude about CSS! I had this unusual-for-me belief that CSS was Too Hard and impossible for me to understand. So let’s talk about that attitude a bit!
I think my advice here (that I would give to myself too because I constantly do this stuff as well), is to make tiny prototypes all the time. Whenever there’s a thing that I don’t understand with CSS I tend to quickly open up a new pen by going to codepen.io/pen and then experimenting with it in there. I don’t care if anyone sees that code or whether it’s beautiful, it’s just about understanding how this one thing works.
Chris wrote about this some time ago when he mentioned reduced test cases:
A reduced test case is a demo/example page you create which reproduces the problem you are having with the least amount of code possible. Only the HTML needed to show the problem content. Only CSS that is related to that reduced HTML. Only the JavaScript related to the problem functionality at hand.
Reduced test cases are the absolute, no doubt about it, number one way to troubleshoot bugs.
Learn Eleventy from Scratch
You might’ve heard about Eleventy, the ever-so-excellent static site generator—it’s great for making super fast, lightweight websites and Andy Bell will show us all how to do just that with this online course. He writes:
In this course, you’ll start with an empty directory. At the end of the course, you’ll have a sparkling new website that packs a mighty punch with a tiny footprint.
It’s a written course, so you can work at it in your own pace, take the code samples and importantly, work through it offline.
I have a bunch of side projects setup with Eleventy already but I’m sure Andy will have plenty to teach me anywho.
Do you know about remove.bg?
Somehow I always tend to forget it exists, but it’s an extremely handy service that removes the background of an image. The other day I realized they also have desktop apps so I can quickly throw an image into it and move on with things quickly without having to visit the site.
It’s so dang helpful that I cannot recommend downloading the app highly enough, I’ve used it half a dozen times this week alone.
Sponsor
Free Book: Modern Development on the JAMstack
Netlify already sets the standard for developing on the JAMstack but now they’ve literally written the book on it. Pick up a free digital copy of Modern Development on the JAMstack and you’ll most certainly level up your ability to craft super-fast websites with tips and tricks from no other than Mathias Biilmann and Phil Hawksworth.
Let’s end with this must-watch video from Tom Scott
I’d rather not say too much about the video, just watch it, it’s very well done and fundamental to all the work we do on the web.
