DEV Community: Matt Kreiling

CSS Only COVID-19 Dashboard Dial

Matt Kreiling — Thu, 21 May 2020 03:16:05 +0000

In Washington State where I live, the governor's office is making decisions about reopening on a number of metrics. These metrics are grouped together in a dial dashboard where each dial represents the risk level for a particular set of metrics.

I decided to make one with CSS only.

The original image.

I was kind of surprised how quickly I made this. Apparently 10 years of loving CSS has paid off. Here are some observations about the process.

Semantic HTML and accessibility first

I am proud that without thinking, I immediately sought out an appropriate semantic element for the dial - the meter element.

Because of the many problems with styling it, I opted to hide it using a tool that should be in every web dev's toolbox, the CSS clip, screen-reader only hack. This code will hide an element from sighted users, but keep it available for assistive technology.

.sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

In this case, I used it to hide the meter and to hide a more sensical label.

I also used aria-hidden to hide the less helpful "Low Risk High Risk" text.

Even though this was just a fun CSS exercise, it feels good to care!

Knowing when to add HTML to help with styling

This is a particular virtue that I have came upon lately. In the past, I tried to use as few HTML elements as possible, keeping the DOM tree flat. I was a hypochondriac and avoid "divitis" like the plague. The separation of content and presentation was a holy command.

Over the years, I have spent countless hours and used pseudo-elements to do all sorts of obscene things rather than add an empty div to the page.

Now, I still reach for those pseudo-elements, but when things become fragile, I will add a div or two.

Don't get me wrong, meaningless divs aren't great, but neither is inscrutable CSS.

The CSS triangle hack

The pointer on the dial is made of two transparent pseudo-elements with fat borders that are also transparent on two sides. As with most of these kinds of hacks, I used a tool to generate some CSS and tweaked the values until they were correct.

Gradient tools

I have use old school Colorzilla's gradient generator for years, but I discovered a slightly slicker generator at css-gradient.io.

Attribute, sibling selectors, and `calc`, and CSS variables¹ to sync presentation with content

This is probably the fanciest thing I did. In order to rotate the dial in sync with the value of the meter element, I used this combination of awesome CSS features.

In the dial css, I added a rotateZ transform with a calc function that uses a the value of a CSS variable to compute the rotation. Turn is a great unit to use with with rotate transforms.

transform: rotateZ(calc(var(--turn) * .05turn - .25turn));

The CSS variables are set in rules that target the value attribute of the meter. Cool thing about

meter[value="1"] ~ .dashboard-meter__container { --turn: 1 }
meter[value="2"] ~ .dashboard-meter__container { --turn: 2 }
meter[value="3"] ~ .dashboard-meter__container { --turn: 3 }
meter[value="4"] ~ .dashboard-meter__container { --turn: 4 }
meter[value="5"] ~ .dashboard-meter__container { --turn: 5 }
meter[value="6"] ~ .dashboard-meter__container { --turn: 6 }
meter[value="7"] ~ .dashboard-meter__container { --turn: 7 }
meter[value="8"] ~ .dashboard-meter__container { --turn: 8 }
meter[value="9"] ~ .dashboard-meter__container { --turn: 9 }

Google-Fu

My google-fu is so strong I just used google to spell google-fu. Really, it is usually duck-duck-go-fu, which sounds delicious.

Bad jokes aside, going to the docs or the countless web development blogs and getting the answers is a cybernetic enhancement that may be more valuable than any other skill. I look up things I know that I don't want to have to remember

The code

1. I know they are called custom properties, but I'm not going to do that anymore; just because they are declared the same way that other properties are set, it isn't worth the cognitive load and confusion it causes learners.

CSS drop-shadow() Function

Matt Kreiling — Thu, 07 May 2020 03:34:54 +0000

I was working on a little animation of my logo - the can and cloud. On hover, a parade of clouds slide in front of a can - really just the same cloud in a marquee style animation that uses a translateX().

Since it was floating in front of the can, it would be nice to have a little shadow to complete the illusion.

But you can't put a box-shadow on a SVG path.

I was sad, because I thought I was going to have to use some crazy verbose thing inside SVG. I always prefer to control things with CSS and to keep markup semantic and sparse as possible. CSS is for presentation! I didn't wanna have to add this obscenity to the nice and tiny SVG code.

For the love of God, don't make me code this!


<filter id="dropshadow" height="130%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
  <feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
  <feComponentTransfer>
    <feFuncA type="linear" slope="0.5"/> <!-- slope is the opacity of the shadow -->
  </feComponentTransfer>
  <feMerge> 
    <feMergeNode/> <!-- this contains the offset blurred image -->
    <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
  </feMerge>
</filter>
<circle r="10" style="filter:url(#dropshadow)"/>

Always read the second answer on Stack Overflow

Thank goodness I know how to scroll, and hence discover the dear, dear CSS drop-shadow function. It is actually a value of the CSS filter property, which has been widely supported for five years.

Here is how you use it. Works just like box-shadow, except it does not support the spread value - only blur.

filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));

Getting back on the web

Matt Kreiling — Sat, 02 May 2020 20:43:51 +0000

At 44 years old, after 11 years of web development, 9 as a paid professional, I found myself without so much as a blog post, much less a portfolio site to my name. Despite my mastery over many aspects of this craft, I just could not self-promote. Worse, the combination of impostor syndrome, perfectionism, rebelliousness, and plain old fear had me obsessing about what I should be doing, was preventing me from writing at all.

My todo list, as it migrated from Omnifocus to Todoist to a dot-grid notebook, could never free itself "Build portfolio site" task. It sucked all the air out of me. Often, I would want to do some coding for fun, but I ended up opening the most recent portfolio directory. I would refactor something. I would start again with a new technology in a new directory.

I had added analysis paralysis to the situation. I had no idea how to describe myself, what colors to use, static or dynamic, what kind of backend or CMS, what case studies or work experiences to write about, or where to start. I felt like I didn't even have anything to show. I jumped between new side projects or dusted off abandoned ones, trying to make them good enough to put out there.

I wasn't writing and I wasn't shipping. I wasn't really having fun. I kept feeling paralyzed about the portfolio I should be building. As a friend often says, I was shoulding all over myself.

Don't should on me

To be fair to myself, I hadn't stopped learning. I did excellent work at my day job and the constant fiddling with projects had accumulated a strong start to a personal design system. I had become if not expert, highly proficient at accessible development, CSS, content strategy, design systems, Vue, leading meetings and guiding group efforts, and writing elegant and readable code.

But I had lost something. Something was missing that drew me to the web in the first place. It wasn't about my portfolio. It wasn't about putting myself out there. I was missing the joy I had at putting my stuff out there. Look what I made! The product of my play as much as my work. As someone who studied and taught the craft of writing, the web was first a place to present words. So add to the list a sense of unfulfilled potential and a fear that fun things are just not going to be fun anymore.

It was time to stop. I'd dealt with procrastination and fear. I'd changed bad habits. I could do it again. It might be fun.

Start

At 44 years and 3 weeks old, I pushed some code up to matt-kreiling.website. Along with a tool for generating accessible color combinations from a set of colors, I added a home page with a few paragraphs about me and the site.

It feels good to be back.