Very often, while using switch variables (a variable that’s either 0 or 1), I wish I could perform logical operations on them. We don’t have functions like not(var(–i)) or and(var(–i), var(–k)) in CSS, but we can emulate these and more with arithmetic operations in a calc() function. This article is going to show you what calc() formulas we need to use for each logical operation and explain how and why they are used with a couple of use cases that lead to the writing of this article.
Stop me if you’ve heard this one before: There once was an organization whose products lacked harmony. Its teams struggled to embrace a shared vision, continuously reinventing wheels of infinitely varied size and shape. Then one day they all joined hands and created the Design System, addressing everyone’s needs and forever banishing the dissonance they’d felt for so long. Unfortunately, the reality can be far more complicated.
It would surprise me if you’d never come across a ghost button 👻. You know the ones: they have a transparent background that fills with a solid color on hover. Smashing Magazine has a whole article going into the idea. In this article, we’re going to build a ghost button, but that will be the easy part. The fun and tricky part will be animating the fill of that ghost button such that the background fills up in the direction from which a cursor hovers over it.
We used to control our online identities, content, and experience. We now share Twitter names instead of domains; even web developers tweet and post on Medium instead of their own sites. We scroll social media and feel empty instead of reading news & blogs to feel informed and connected. Algorithmic feeds amplify rage & conspiracies, enabling tribal ad-targeting to polarise and spread misinformation, threatening democracy itself.
What happened? And what are we doing to fix it? That’s a big question that will require all of us, our communities, our employers, to shift. I don’t want to wait, and you probably don’t either.
What can you do for yourself, today? Own your domain. Own your content. Own your social connections. Own your reading experience. IndieWeb services, tools, and standards enable you to take back your web.