A Mad Magazine Fold-In Effect with just CSS
Thomas Park made this lovely fold-in effect that relies on no JavaScript whatsoever and only a single image:
I love posts like this that reveal something that looks super complicated but is actually remarkably simple in the end. Also, Thomas has quite a lot of great examples of this sort of work, with one being that old iTunes expanding album effect that was always kinda neat.
Also! On a similar note, Lynn Fisher just made a neat Codepen example where she creates this ruffled poster effect: the original image is on the left and her example is on the right.
Then Lynn got on a roll a bit and kept going with the effects!
The :not pseudo-class can make handy accessibility checks
The other day, Tanisha Sabherwal mentioned that you can use the following CSS to check the accessibility of our form elements, namely which labels don’t have a for attribute and which inputs don’t have an id:
input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([aria-labelledby]):not([id]), label:not([for]) {
outline: 2px dashed red;
}This is a super smart idea and it’s a good reminder of just how useful the :nth pseudo can be.
In Defense of a Fussy Website
In this post, Sarah writes about all the tiny little details she notices in her favorite websites, all the craft that folks tend to pour into animations, the UI, the copywriting. Sarah writes:
When a site is done with care and excitement you can tell. You feel it as you visit, the hum of intention. The craft, the cohesiveness, the attention to detail is obvious. And in turn, you meet them halfway. These are the sites with the low bounce rates, the best engagement metrics, the ones where they get questions like “can I contribute?” No gimmicks needed.
One example she mentions is Josh Comeau’s website:
Make sure to click the buttons in the top right — I think this is the first time I’ve heard UI audio in a very long time. And it’s certainly a charming detail.
But Sarah also mentions Cassie Evans’s website which is just as charming and highly polished:
One small detail I love here: when you turn on dark mode, the lamplight will flicker on and off briefly. Cute!
Introducing the emoji-picker-element
Nolan Lawson wrote this great post where he walks us through how he made emoji-picker-element, a rather nifty web component that helps users select an emoji in a performant and accessible way. Nolan writes:
Building emoji-picker-element was not easy. Properly rendering native emoji required arcane knowledge of emoji support on various platforms and browsers, as well as how to detect it. Add in skin tone variants (which may or may not be supported, even if the base emoji is supported), and it can get very complicated very fast.
I like that at the end of the post Nolan breaks down the success of this project; how fast the component is, why he decided to use the Svelte framework, etc. That reminds me though! I need a side project so that I have an excuse to build something with Svelte, considering I love the design principles behind it.
Sponsor
Start Testim Free
Fast authoring of AI-stabilized cross-browser UI tests. Get started today for free! Reduce maintenance with automated tests that adjust with code changes.
The Return of the 90s Web
Max Böck writes about how modern best practices on the web are starting to resemble a lot of the best practices of the 90s: serverside rendering, no-code tools, and…gasp!…blogs:
It might just be my IndieWeb filter bubble talking, but I think there is a renewed interest in personal websites. A lot of big social media giants are falling out of favor, and it becomes cool again to own a space on the web rather then being one of a billion usernames.
[Robin]: Here’s my hot take: building a personal site—and blogging—is probably one of the best thing you can do for your career and for yourself. Learning in public is a great way to get started with the community, meet smart folks, and think more critically about your work, too.
On this note, when I joined Sentry several months ago one of the hardest things I had to learn wasn’t about front-end development or design but this, instead: it’s okay to be dumb in public. Vulnerability is difficult when joining a new company or starting a project with strangers. There are oh-so-many things that you have to admit that you just don’t know. And perhaps you never will! But to ask questions openly—whether that’s about design or front-end development earnestly—is the fastest way to learn things.
I think this is why I blogging is so useful. It makes us vulnerable in public, and gives us a chance to reevaluate our own development as web designers and engineers. It’s the sort of vulnerability to say “I have no idea what I’m doing, but here’s what I have so far…” And that’s always super exciting to me.
Sponsor
Frontend Masters
How do you stay ahead when the front-end landscape is constantly changing? Frontend Masters has hundreds of in-depth, modern front-end courses led by experts who are shaping the web. There’s plenty for beginners and seasoned pros alike — join now and level up your front-end skillset.
[Chris]: For me, Twitter is an emotionally complex place. My stream is a whole lot of people being sad and mad at each other, and while I don’t want to turn my back on that (especially as someone who lives in a small town who doesn’t read a lot of news otherwise), it gets overwhelming to me quickly. I was reminded what a bad medium it can be for real expression last week when a close friend was explaining to me an opinion they had about something fairly political. As they were sharing those thoughts, I kept thinking this is really interesting and nuanced and I can see where they are coming from and, simultaneously, this would not go well on Twitter. It wouldn’t have gone well because, while you could reduce the core points to Tweet-length chunks, those chunks aren’t enough to deliver the backstory and nuance needed to make them a complete message with the intention intact. Not to mention the message would be delivered to somewhat random people (whomever chooses to follow), not people who already know each other more intimately where there is even more trust and understanding built up where the message has the right meaning.
I’m to the point where I like to pop in and look around for a little bit then get out before the doomscrolling sets in, and only tweet and retweet stuff generally based on interesting news and positivity.
Anyway, this relates to CSS tricks, I promise.
What I get out of Twitter is sometimes asking questions to help inform me, using it to promote my things and other people’s things, and my favorite: overhearing mini conversations where I get good tricks to share!
For example, Chris on Code tweeted a little tip about using animation-delay to stagger out some animations making them a bit more visually interesting. Then Jon replied that if you use negative animation-delay instead, you can make it so there is “no waiting” for the interesting staggering to begin. That’s a solid CSS trick right there. I’m not sure it’s in the running for the greatest, but I love it.