DEV Community: JD Brewer-Hofmann

Aria Labels here we come

JD Brewer-Hofmann — Tue, 06 Apr 2021 16:41:01 +0000

I recently built an e-commerce site, and I attempted to build a strong accessible foundation along the way. The project is mostly complete, but I thought it was a great opportunity to comb through the project to add aria labels where they are needed.

I hope this can serve as an introduction to adding aria labels in a React/NextJS project.

Landing Page

On the landing page we have a few items to address. Using Firefox's Accessibility Inspector we can see multiple issues in the header alone.

Burger Menu

First and foremost I want to make sure the burger menu is accessible and makes sense to everyone. Adding an aria-label easily removes our warning.



<button 
  className={ menuOpen ? "burger-btn active" : "burger-btn"}
  onClick={handleMenuToggle}
  aria-label="open main menu"
>

But, you may notice that this button is a toggle button, so what happens when our menu is open?

Our label informs our user that this button will "open main menu". But the menu is already open, and visually we are showing a huge X, so this is rubbish.

Using the same ternary logic I used for my button className, I can update the aria-label to change based on the state.



<button 
  className={ menuOpen ? "burger-btn active" : "burger-btn"}
  onClick={handleMenuToggle}
  aria-label={ menuOpen ? "close main menu" : "open main menu"}
>

Now our aria label updates with our menu opening and closing. When I use voice-over I hear "open main menu, button" when I apply focus (tab to the button) and when I hit enter, I hear "close main menu" immediately. That worked better than I even though honestly.

Page Header

My site title is "C&G", which doubles as a link to the landing page, though I am not sure you'd never know that from the voice over. What I currently hear is "link, C & G". I'm going to add an aria label to this as well.



<Link href="/">
  <a aria-label="c & g home page">C<span>&</span>G</a>
</Link>

Now I hear "link, c & g home page" when I apply focus to the element. If this link element looks strange, just know I'm using NextJS along with React.

Cart Icon

Next up is our cart icon. The code currently reads as such



<button 
  className="header-cart"
  onClick={handleCartPreviewClick}
>
  <img className="cart-vector" src="/shopping-cart-vector.png"></img>

  {context.contextCart.length > 0 ? 
  <span className="cart-count"> {context.contextCart.length}</span>
  : null }
</button>

I immediately notice some issues. For one, my image tag has no alt attribute. While I'm fixing that, I can add a ternary aria label just like our burger menu button.



<button 
  className="header-cart"
  onClick={handleCartPreviewClick}
  aria-label={ cartPreview ? "close shopping cart preview" : "open shopping cart preview" }
>
  <img 
    className="cart-vector" 
    src="/shopping-cart-vector.png"
    alt="shopping cart" 
   />
{context.contextCart.length > 0 ? 
    <span className="cart-count">{context.contextCart.length}</span>
: null }
</button>

That solves the same issues I had with my burger menu toggle button. Although when I use the screen reader I only receive information about the image inside the button, or the span when I am first loading the page. I'm not thrilled about that, I'd like to have the number of cart items be relayed somehow. I am going to try to add that into the button's aria label.

I attempted to interpolate my cart items length into the aria label, but that doesn't work. So I will leave that issue open for now. At least the button instructions make sense now.

Conclusion

Well addressing only the header took a while, so I will have to write another article detailing the slider on the landing page and digging further into our cart items - which I fear aren't laid out too well.

If you'd like to see the page as it stands currently or checkout out the code the links are included below.

live page
github repo

User Prefers Dark Mode/Light Mode

JD Brewer-Hofmann — Tue, 30 Mar 2021 15:28:15 +0000

This blog covers super basic theming in CSS based on the user's preferences for light mode or dark mode.

CSS variables

If you are unfamiliar with CSS variables, this doubles as an introduction. CSS variables are declared at the top level of our document like so

:root {
  --black: #101010;
  --white: #ffffff;
  --brand: #ff9999;
}

Then we can call the variables for our H1 tag like so

h1 {
  background: var(--white);
  color: var(--black);
}

Using User Preference and Variables to update our page

Let's start with one element and toggle between dark mode and light mode. Utilizing user preference queries, we can check to see if our user prefers dark mode or light mode. Together with our CSS variables our CSS file will read as

:root {
  --black: #101010;
  --white: #ffffff;
  --brand: #ff9999;
}
h1 {
  background: var(--white);
  color: var(--black);
  padding: 5vh 0;
  text-align: center;
  transition: 1s;
}
@media (prefers-color-scheme: dark) {
  h1 {
    background: var(--black);
    color: var(--white);
  }
}

By adding in a few lines of CSS, our H1 will update when the user changes their preferences. That is super responsive.

Extending Into a Whole Theme

Taking the concepts another step, we can refactor our code to change the variables themselves to change if our user prefers dark mode. Then we can use the same CSS variables regardless of user preference.

:root {
  --background: #ffffff;
  --text: #101010;
  --brand: #ff9999;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #101010;
    --text: #ffffff;
  }
}
body {
  background: var(--background);
  color: var(--text);
}
h1 {
  border: 2px solid var(--brand);
  padding: 5vh 0;
  text-align: center;
  transition: 1s;
}

It's basic, but the concept works well, and with little code. If I dig into this further I would work to integrate the brand color in an accessible way beyond a border color.

Reduce Your Motion - aka maybe users don't like your "cool" animations

JD Brewer-Hofmann — Tue, 23 Mar 2021 16:56:41 +0000

Some recent additions to CSS media queries include new ways to personalize a users experience based on their preferences. Because you are using CSS, whenever a user changes a preference on their machine, your page can update instant - if you add a touch of code. Seems cool, and accommodating, but it is far more than that.

Much of the web is designed to grab your attention, but some of that attention grabbing is harmful, or at least irritating. Utilizing these new media queries, developers can now accommodate situations where users prefer dark mode, high contrast, or reduced motion.

If you'd like to understand some reasons behind these new preferences I recommend Your Interactive Makes Me Sick by Eileen Webb. She explains:

“The issue usually isn’t the motion itself, or the existence of animation. The problem is a mismatch between my expectations for what I’m going to encounter on a webpage and what actually displays on that page”

I will focus on one of these new media queries, prefers-reduced-motion. With the prefers-reduced-motion media query, users can request to minimize the amount of non-essential motion the page uses.

Transitions

<body>
   <h1>Prefers Reduced Motion</h1>
</body>

h1{
   background: #202020;
   color: #ffffff;
   padding: 5vh 0;
   text-align: center;
   transition: 1s;
}
h1:hover {
   background: #008888;
}
@media (prefers-reduced-motion) {
   h1 {
       transition: none;
   }
}

In our first example, we have an example of disabling a simple hover transition based on user preference. That is simple enough.

Smooth Scrolling

We are all familiar with smooth scrolling, and it’s super common on single page sites where all the content is stacked for easy scrolling through content. Personally, I like the smooth scroll for orienting me on the page, but lots of people don’t, so let’s adjust our code for them too.

<h1 id="home">Prefers Reduced Motion</h1>
   <ul>
       <li><a href="#one">One</a></li>
       <li><a href="#two">Two</a></li>
       <li><a href="#three">Three</a></li>
   </ul>
   <div id="one">
       <a href="#home">Home</a>
       <a href="#two">Two</a>
       <a href="#three">Three</a>
   </div>
   <div id="two">
       <a href="#home">Home</a>
       <a href="#one">One</a>
       <a href="#three">Three</a>
   </div>
   <div id="three">
       <a href="#home">Home</a>
       <a href="#one">One</a>
       <a href="#two">Two</a>
   </div>

* {
 scroll-behavior: smooth;
}

a {
 color: #008888;
}

@media (prefers-reduced-motion) {
 * {
   scroll-behavior: auto;
 }
}

Here I prepared a demo page of different menu sections that we can jump between to examine the smooth scroll behavior vs auto behavior. We can see a larger difference for our user here.

Full Animation

In the last example, we will look at a full animation example where the colors of our background change infinitely. The colors and rate are intentionally annoying to drive the point home.

@keyframes example {
 0%   {background-color:#ff80ff}
 25%  {background-color:#ffff80}
 50%  {background-color:#ff8080}
 75%  {background-color:#80ffff}
 100% {background-color:#ff80ff}
}

div {
 height: 90vh;
 background-color:#ff00ff;
 border: 1px solid;
 margin: 5vh 5vw;
 animation-name: example;
 animation-duration: 4s;
 animation-iteration-count: infinite;
}

@media (prefers-reduced-motion) {
 div {
   animation: none;
 }
}

Once again, only a few lines and this potentially harmful animation can be ignored by users.

It’s that easy to account for those who wish for a reduced motion experience, a few lines and we can allow more users to enjoy our content. Prefers Reduced Motion has good browser support - every major browser except, you guessed it IE11.

If you'd like to know more about preference media queries, I suggest
The CSS Podcast's episode on "Preference Media"

If you would like to understand more about motion sensitivities, Val Head wrote a great article Designing With Reduced Motion For Motion Sensitivities for Smashing Magazine.

CSS Grids Project - A Responsive Solar System - part 2

JD Brewer-Hofmann — Wed, 10 Mar 2021 14:22:27 +0000

Picking up from part one, we left off with two planets with orbits.

Saturn and beyond

Preparing to add another planet in (actually two), my next move is to double our grid size again.

grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);

And using our grid numbers supplied in this case by Mozilla’s inspector, I can adjust the row and column assignments for Neptune and Uranus before adding the next two planets.

.neptune {
   grid-row: 1/2;
   grid-column: 1/9;
}
.neptune-orbit {
   grid-row: 1/9;
   grid-column: 1/9;
}
.uranus {
   grid-row: 2/3;
   grid-column: 1/9;
}
.uranus-orbit {
   grid-row: 2/8;
   grid-column: 2/8;
}

And that brings us back to basically the same design as before. But, now I can add two more planets and their respective orbits. Continuing to use the line numbers provided in the inspector, I can place the next two planets right away.

<div class="saturn-orbit orbit"></div>
<div class="saturn planet"></div>
<div class="jupiter-orbit orbit"></div>
<div class="jupiter planet"></div>

.saturn {
   grid-row: 3/4;
   grid-column: 1/9;
}
.saturn-orbit {
   grid-row: 3/7;
   grid-column: 3/7;
}
.jupiter {
   grid-row: 4/5;
   grid-column: 1/9;
}
.jupiter-orbit {
   grid-row: 4/6;
   grid-column: 4/6;
}

Double it

Now we have a system developing here ( pun intended ), though it’s a bid tedious we can simply double our grid again, then adjust all the previous row and column assignments to account for the change.

Just to update, this is what our code looks like at this point

<main>
       <div class="neptune-orbit orbit"></div>
       <div class="neptune planet"></div>
       <div class="uranus-orbit orbit"></div>
       <div class="uranus planet"></div>
       <div class="saturn-orbit orbit"></div>
       <div class="saturn planet"></div>
       <div class="jupiter-orbit orbit"></div>
       <div class="jupiter planet"></div>
       <div class="mars-orbit orbit"></div>
       <div class="mars planet"></div>
       <div class="earth-orbit orbit"></div>
       <div class="earth planet"></div>
       <div class="venus-orbit orbit"></div>
       <div class="venus planet"></div>
       <div class="mercury-orbit orbit"></div>
       <div class="mercury planet"></div>
   </main>

body {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   display: grid;
   place-items: center;
   height: 100vh;
} 
main {
   width: 90vw;
   height: 90vw;
   margin: 5vh 5vw;
   border: 1px solid #cccccc;
   display: grid;
   grid-template-columns: repeat(16, 1fr);
   grid-template-rows: repeat(16, 1fr);
}
.planet {
   height: 5vmin;
   width: 5vmin;
   border-radius: 50%;
   border: 2px solid #000000;
   background: #ffffff;
   justify-self: center;
   margin-top: -2.5vmin;
}
.orbit {
   border-radius: 50%;
   border: 2px solid #000000;
}
.neptune {
   grid-row: 1/2;
   grid-column: 1/17;
}
.neptune-orbit {
   grid-row: 1/17;
   grid-column: 1/17;
}
.uranus {
   grid-row: 2/3;
   grid-column: 1/17;
}
.uranus-orbit {
   grid-row: 2/16;
   grid-column: 2/16;
}
.saturn {
   grid-row: 3/4;
   grid-column: 1/17;
}
.saturn-orbit {
   grid-row: 3/15;
   grid-column: 3/15;
}
.jupiter {
   grid-row: 4/5;
   grid-column: 1/17;
}
.jupiter-orbit {
   grid-row: 4/14;
   grid-column: 4/14;
}
.mars {
   grid-row: 5/6;
   grid-column: 1/17;
}
.mars-orbit {
   grid-row: 5/13;
   grid-column: 5/13;
}
.earth {
   grid-row: 6/7;
   grid-column: 1/17;
}
.earth-orbit {
   grid-row: 6/12;
   grid-column: 6/12;
}
.venus {
   grid-row: 7/8;
   grid-column: 1/17;
}
.venus-orbit {
   grid-row: 7/11;
   grid-column: 7/11;
}
.mercury {
   grid-row: 8/9;
   grid-column: 1/17;
}
.mercury-orbit {
   grid-row: 8/10;
   grid-column: 8/10;
}

With all of our planets, RIP pluto, here is what our system looks like.

Now, we have a good foundation. We are missing a sun for all these planets to revolve around, unless that’s not your thing, which I don’t even know where to begin. So adding a div for our sun, and the following CSS

.sun {
   grid-row: 8/10;
   grid-column: 8/10;
   height: 5vmin;
   width: 5vmin;
   border-radius: 50%;
   background: #000000;
   justify-self: center;
   align-self: center;
}

We can drop it into the same grid position as mercury, but place it in the middle both vertically and horizontally.

And there it is, a basic responsive solar system with CSS grids. Now, the sizes, spacing, ratios and anything else you can imagine are totally off, but it works!

Finishing touches

Before we continue, I’m going to invert the colors. Anything that was white, I will make #101010 and black will flip to #ffffff. I will also change the orbit border to 2px dotted #ffffff.

Now that everything is aligned correctly, and our grid is worked out, I want to make the size and spacing ratios slightly more true to life.

At this point I spent 15 minutes learning some valuable insights by making some aggressive mistakes

Thinking how the spacing of my grid will change, I notice that the columns and rows must mirror each other, so I know that. Also, the columns and rows will be written out as a palindrome within each property. This means if I use a row spacing of 5px, 8px, and 10px, my next three rows would be 10px, 8px, and 5px. The entire row property would read 5px 8px 10px 10px 8px 5px. Therefore, I have decided to plan out my spacing and simply write out my row property declaration long form.

grid-template-columns: 3fr 2.5fr 2.5fr 2fr 1fr 1fr .75fr 3fr 3fr .75fr 1fr 1fr 2fr 2.5fr 2.5fr 3fr;
   grid-template-rows: 3fr 2.5fr 2.5fr 2fr 1fr 1fr .75fr 3fr 3fr .75fr 1fr 1fr 2fr 2.5fr 2.5fr 3fr;

.planet {
   height: 2vmin;
   width: 2vmin;
   margin-top: -1vmin;
   }

I settled on this spacing. It’s not that pretty written out, but hey. I also cut the default planet size down now that the distance between each planet became a little clogged.

For each planet, I adjust the height, and width to the same number and change the margin-top to subtract half of that number.

With all those changes we have this

So far this is really responsive, but when the screen is over 1000px it starts to look ridiculous. So I am going to cap the main section at 600px by adding

max-width: 600px;
max-height: 600px;

But now my planets continue to expand when the grid doesn’t, so I am going to stop each of them from expanding too. This is a bit more cumbersome, but if open my inspector and adjust my screen to 666px by 666px I can hover over each planet and see a pixel amount to cap them at. Using the min() and max() functions for each planet like so

.neptune {
   grid-row: 1/2;
   grid-column: 1/17;
   height: min(3vmin, 20px);
   width: min(3vmin, 20px);
   margin-top: max(-1.5vmin, -10px);
}

I can ensure they will not expand beyond the cap, and the margin will not push them into outer space even as the grid ceases to expand.

There it is! Hopefully you can learn something about CSS grids, or some other tricks along the way.

If you’re interested to look at the code
https://github.com/JDHofmann/css-grids-solar-system

CSS Grids Project - A Responsive Solar System - part 1

JD Brewer-Hofmann — Tue, 09 Mar 2021 16:09:59 +0000

I'm going to be build this with pure HTML and CSS, using CSS grids.

Intro

I wanted to write about getting started using CSS grids, but damn if MDN docs just nailed it already. So, if you're interested to get started with CSS grids ( and you should ) please check out MDN Web Docs guide to CSS grids.

After I realized the basics are well cover, I was seeking a project to build in CSS grids and the original Space Jam web page was brought up to me ( Credit Jessie Wu ). Recreated here using CSS grids, It's a great example of how CSS grids is responsive and awesome. From that idea I decided to create a responsive solar system. Using this image for reference

My goal is to make a 2D responsive “image” containing 8 planets, plus a sun. I want to retain the lines that represent the orbit path for each body. I will not include the names of each planet. Now, let's get started.

Step 1

Opening a blank HTML and CSS document, I will make an empty main element to contain the solar system.

body {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   display: grid;
   place-items: center;
   height: 100vh;
}
main {
   width: 90vw;
   height: 90vw;
   margin: 5vh 5vw;
   border: 1px solid #cccccc;
}

I added a light border so we can see where we are working, and position it in the middle of the screen.

Neptune & Orbit

I decided to work from the outer planets inward, I'm sure this could be done working from the center out as well, this is the way I chose to build this design. Adding a div that will represent the first planet, Neptune.

.neptune {
   height: 5vmin;
   width: 5vmin;
   border-radius: 50%;
   border: 2px solid #000000;
}

We have a planet, sort of, without an orbit it’s just a circle right now, so let’s add a second div that will be Neptune’s orbit

   <main>
       <div class="neptune"></div>
       <div class="neptune-orbit"></div>
   </main>

.neptune-orbit {
   border-radius: 50%;
   border: 2px solid #000000;
}

I added a border, and border radius 50% to ensure it is a circle, at least eventually. We really need to employ the power of CSS-grids.

Neptune’s Grid

The goal is to have a perfect circle, so if we instruct our “neptune-orbit” element to fill the entire grid, while keeping the border-radius at 50%, it should make a perfect circle.

main {
   width: 90vw;
   height: 90vw;
   margin: 5vh 5vw;
   border: 1px solid #cccccc;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
}

.neptune {
   height: 5vmin;
   width: 5vmin;
   border-radius: 50%;
   border: 2px solid #000000;
   grid-row: 1/2;
   grid-column: 1/3;
}

.neptune-orbit {
   border-radius: 50%;
   border: 2px solid #000000;
   grid-row: 1/3;
   grid-column: 1/3;
}

The “neptune” element is positioned inside the first row, and both columns. If we instruct it to “justify-self” to the center, it should be closer to the orbit we it to match up with.

Now we are very close. If we push the item up towards the top by half of it’s height, it should be visually aligned with the orbit. Normally I choose to position an item using the relative position property, but that doesn’t apply within CSS-grids, so I will use the uglier but equally effective negative margin. using a margin-bottom in this case causes some real issues within the grid system

.neptune {
   height: 5vmin;
   width: 5vmin;
   border-radius: 50%;
   border: 2px solid #000000;
   grid-row: 1/2;
   grid-column: 1/3;
   justify-self: center;
   margin-top: -2.5vmin;
}

Almost perfect, I would rather not see the orbit line run right through our planet. So, I will switch the HTML to create the orbit first, then add a background color of #fffff to the neptune. Perfect!

Uranus

First things first, I want to abstract out any CSS that I will use for each planet or obit into it’s own class, so I keep my code DRY.

<div class="neptune-orbit"></div>
<div class="neptune planet"></div>

.planet {
   height: 5vmin;
   width: 5vmin;
   border-radius: 50%;
   border: 2px solid #000000;
   background: #ffffff;
}
.orbit {
   border-radius: 50%;
   border: 2px solid #000000;
}
.neptune {
   grid-row: 1/2;
   grid-column: 1/3;
   justify-self: center;
   margin-top: -2.5vmin;
}
.neptune-orbit {
   grid-row: 1/3;
   grid-column: 1/3;
}

Now we can add a planet, or orbit class when we need.

Thinking ahead with our grid, we need a grid of two columns and two rows to make a circle for the orbit, so if we want to add another orbit inside our current orbit, we will need to add two more columns and two more rows to do so.

grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;

But this is already getting ugly, so let’s refactor to account for adding more rows in the future.

grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);

Now let’s adjust Neptune’s grid assignments accordingly

.neptune {
   grid-row: 1/2;
   grid-column: 1/5;
}
.neptune-orbit {
   grid-row: 1/5;
   grid-column: 1/5;
}

Almost there, now let’s add CSS to “uranus” so it positions itself in the proper space.

.uranus {
   grid-row: 2/3;
   grid-column: 1/5;
}
.uranus-orbit {
   grid-row: 2/4;
   grid-column: 2/4;
}

We now have two planets, and a system to go forward.

I'm going to send this to part 2 now, because this is already getting long.

CSS Funtime!

JD Brewer-Hofmann — Mon, 01 Mar 2021 16:08:34 +0000

In my recent cyber travels I learned a few CSS tools I wanted to share. They are in no way related, except for being cool.

Place-items

I was no aware of the "place-items" property before this week, and I’m very happy about this. I’ve been copying this code from project to project for years

.parent {
  position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

I realize that I could have been using flex-box or a grid to accomplish this, but just let me feel dumb on my own please. Anyway, here's a really slim way to write this

<div class="parent">
       <div class="child">
           <p>I'm the child</p>
       </div>
   </div>

.parent {
   width: 80vw;
   height: 80vh;
   background: #00a0a0;
   margin: 10vh auto;
   color: #ffffff;
   display: grid;
   place-items: center;
}
.child {
   background: #ed0076;
   padding: 5%;
}

Basically, place-items is a shorthand for align-items and justify-items.

Let’s add a second child and see what happens.

Flex Shorthand Property

Admittedly, I am not a big user of flex, so I’m forcing myself to learn more about it. ( Forthcoming blog... )
The flex shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.

<div class="child first">
           <p>I'm a child</p>
       </div>
       <div class="child">
           <p>I'm the second child</p>
       </div>
       <div class="child">
           <p>I'm the third child</p>
       </div>

.parent {
   width: 90vw;
   height: 90vh;
   background: #00a0a0;
   margin: 5vh auto;
   color: #ffffff;
   display: flex;
   justify-content: center;
   align-content: center;
   overflow: hidden;
}
.child {
   background: #ed0076;
   padding: 5px;
   margin: 10px;
   flex: 1 1 25px;
}
.first {
   flex: 2 1 25px;
}

This is easy to visualize with the elements on one line, so let’s add flex-wrap to our parent and complicate everything

.parent {
    width: 90vw;
    height: 90vh;
    background: #00a0a0;
    margin: 5vh auto;
    color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}
.child {
    background: #ed0076;
    padding: 5%;
    flex-basis: 100px; */
    margin: 10px;
}
.first {
    flex: 2 1 100px;
}

Clamp Function

The CSS clamp function keeps an elements size between upper and lower limits. Clamp() enables selecting a middle value within a range of values between a defined minimum and maximum.

<div class="box">

.box {
   margin: 10vh auto;
   height: 80vh;
   width: clamp(200px, 50vw, 400px);
   background: #00a0a0;
}

Browser support

Clamp doesn’t have universal browser support yet ( which means internet explorer doesn’t support it sigh ). If you’re worried about supporting things for IE you can use:

.box {
   margin: 10vh auto;
   height: 80vh;
   min-width: 200px;
   width: 50vw;
   max-width: 400px;
   background: #00a0a0;
}

Because it’s exactly the same!!!

Let’s try this with text!

Here there are two p tags, one clamped and the other is set at 14px

.clamp {
   font-size: clamp(14px, calc(4vmin), 20px )
}

Everything works just like the our previous clamp example, which is awesome. Notice the calc function set for the middle value. I want to set a responsive value for the example, but if I use the calc function to the viewport minimum I receive back an actual value - that way users can zoom in on the text per WCAG.

More on clamp from MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()

Hopefully this helps

Accessible Forms

JD Brewer-Hofmann — Wed, 24 Feb 2021 01:44:49 +0000

Login Form

<form>
  <h2>Login</h2>
  <label for="username">Username</label>
  <input id="username" type="text" placeholder="spacemanspiff8"    title="enter your username here">
  <label for="password">Password</label>
  <input id="password" type="password" placeholder="******">
  <button type="submit">Login</button>
</form>

This may be review for some of you, but it’s a good opportunity to go over the basics on something we all use about 30 times a day — a login form. First of all, we have an h2 tag at the top to give our users a solid idea of the purpose of the form. Next we have labels for each input, attaching their “for” attributes to the corresponding “id” for each input. For JSX users in React, use “htmlFor” instead of “for”. Standard HTML elements and their attributes have a lot of accessibility built in. Once you link the label to the input, years of others’ hard work will do the rest.

Many developers wish to omit labels for fear of sacrificing minimalist design principles, however I strongly encourage you to use them in your forms. If you truly detest the look of labels, you can check out this article to learn how to visually hide them without losing functionality.

Lastly — our submit button. To be fully compliant and reliable, these buttons should take the “type” value of “submit”. That’s easy enough.

Survey Time

<form>
  <h2>Tell us about you</h2>
  <fieldset>
    <legend>Preferred Drink</legend>
    <p>
      <input type="radio" name="drink" id="drink_1" value="coffee">
      <label for="drink_1">Coffee</label>
    </p>
    <p>
      <input type="radio" name="drink" id="drink_2" value="tea">
      <label for="drink_2">Tea</label>
    </p>
  </fieldset>
  <fieldset>
    <legend>Preferred Animal</legend>
    <p>
      <input type="radio" name="animal" id="animal_1" value="cats">
      <label for="animal_1">Cats</label>
    </p>
    <p>
      <input type="radio" name="animal" id="animal_2" value="dogs">
      <label for="animal_2">Dogs</label>
    </p>
    <p>
      <input type="radio" name="animal" id="animal_3" value="both">
      <label for="animal_3">I like both cats and dogs</label>
    </p>
  </fieldset>
</form>

Here is where the real fun starts. I love the the look of fieldset tags, but they’re so much more than simply how they look. In the code above, you’ll notice we have two sets of fieldset tags. Each one has nested radio buttons inside, as fieldset elements are an ideal way to create groups of widgets that share the same purpose. The legend tag gives a title to each group of inputs and some assistive technologies will even include the legend when speaking each input option. For example, when reading the first fieldset above, a screen reader will say: “Preferred drink: coffee” for the first input and “Preferred drink: tea” for the second.

You might also notice each widget, or option, is wrapped in a p tag. Adding HTML elements that aren’t specific to forms will not disrupt assistive technologies, provided you use them correctly. In the example above, the p tags keep our widgets orderly. Then, default CSS will place each p tag on its own line. Pretty nice.

Labels can also be used to activate their corresponding widget, so that users can click on the text as well as the input, giving them way more surface area to make the correct selection. This is especially helpful for users on mobile devices, those who are visually impaired, or who people who have ginormous thumbs.

Taking a step back, let us remember, accessibility is only a part of inclusive design. We want our final product to make sense to users, and make sense to all users. It is best practice not to assume that a user has the same skills, abilities, or knowledge that you do.

Checklist

Input elements have a corresponding label element
Submit buttons have a “type” of “submit”
Input elements used as radio buttons are nested inside of fieldset tag
Fieldset elements have a corresponding label element

This tutorial should get you started with building accessible forms, and I encourage you to check out the more comprehensive resources below.

If you would like access to this code, feel free to grab it from my github

https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form

http://wtfforms.com/

https://www.w3.org/TR/html401/interact/forms.html

How to Create an Accessible Search Bar Without a Label

JD Brewer-Hofmann — Tue, 16 Feb 2021 22:49:27 +0000

If you’re looking to build a search bar with no label, this is the move

<form role='search'>
  <label for="searchBar" class="sr-only">Search Term</label>
  <input id="searchBar" type="text" placeholder="Search Term">
  <button>Search</button>
</form>

With some added css

.sr-only {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}

Our CSS sets the label way off the screen, which doesn’t bother screen readers, but leaves you with a visually simple search input. Notice how the height and width are set to 1px each, if you were to set each to 0px the screen reader would skip over them entirely, so keep them at 1px. Overflow is hidden so if you wrote a long label title, which you definitely shouldn’t, it wouldn’t end up on the screen. Using a placeholder we can convey our input’s functionality to sighted users, while maintaining all the accessibility that comes standard with semantic html.

Here is the same option but written in JSX for all the React users

<form role='search'>
  <label htmlFor="s" className="sr-only">Search Term</label>
  <input id="s" type="text" name="search" placeholder="Search Term"/>
  <button>Search</button>
</form>

The code is functionally the same in React, but take note of the use of htmlFor=”s”, for is a reserved name in JSX just like class, so remember to use htmlFor.

Second option:

<form role='search'>
  <input id="searchBar" type="text" placeholder="Search Term"   title="Search Term">
  <button>Search</button>
</form>

The title attribute functions as a label when no label is present, you might not want it, but it comes stock with a tool-tip when you hover over the input for a second.

Last option:

<form role='search'>
  <input id="searchBar" type="text" placeholder="Search Term" aria-label="Search Term">
  <button>Search</button>
</form>

Using an aria-label gets the job done

Still the best way is to label your inputs, and link the label to the input id with “for”. It’s simple, and maybe boring, but it works, for everyone.

<form role='search'>
  <label for="searchBar" >Search Term</label>
  <input id="searchBar" type="text">
  <button>Search</button>
</form>

It’s important to note, labels help to set keyboard focus to form control inputs, allowing sighted users the ability to click on the label as well as the input itself. Plus they have universal browser and screen reader support.

Of course there are many ways to do this, and much better documentation, listed below, but these core concepts will give your search bars and search forms the basics needed for accessibility.

This blog is the first in a series on accessibility, striving to provide a starting point for building common components with accessibility in mind.

Resources

https://webaim.org/techniques/forms/advanced

http://web-accessibility.carnegiemuseums.org/code/search/

https://designsystem.digital.gov/components/form-controls/

We've made the decision to not move forward at this time

JD Brewer-Hofmann — Mon, 15 Feb 2021 16:24:10 +0000

Last week I completed a third interview for a company, a pair programming session with the company's lead developer. I completed the tasks in a reasonable time, and pushed myself to use the syntax the company prefers. All in all, I felt I had an decent interview and I stuck around to chat with the lead developer for ten minutes after the challenge was over. Within one hour I received an email notifying me I would not move on to the next round.

After trapping myself with my thoughts for a 12 mile run I came to some realizations, along with more questions.

I completed my coding bootcamp just over two months ago, and I've been aggressively job hunting since the first week of January. I've had trouble knowing how to spend my time, and what exactly I should be focusing on each day.

In no way did I feel I deserved a job so early in my job hunt, and I was clearly not the best technical candidate for this position, so why did this rejection crush all my hope of finding a job so easily?

Is this a job I wanted?

By all standards this was an awesome job opening. The opening was a full-stack position at an up and coming company, the tech stack is mostly familiar to me, and there was lots of room to grow quickly. I would have been challenged in many ways in this position, and very happy to secure employment for my family's sack.

Is a full-stack position what I want?

I would have been thrilled with this position, and happy to apply my knowledge.

But... Do I enjoy working on backend code for hours on end? No, not really. I enjoy keeping things organized, and solving problems but I rarely open up backend code to play around. Working on backend code is a means to an end for me, and my primary goal is to complete it so I can move on to the frontend.

When I have free time, I obsess over hex colors, about responsive designs, and font choices. I read about accessibility, and perform assessments on "cool" sites ( news flash - they don't pass many accessibility requirements ) then I rework my portfolio for the twentieth time. Maybe I never entirely kicked design school out of my system? Maybe that's ok.

So what do I want?

I want to make sites that are really beautiful, and work really well - for everyone. I want to keep learning about CSS at a super granular level. I want to make sure websites are accessible, and easily understood. I want a job where they want me to become certified in accessibility and value passion for that. I want to take designs and make them into responsive layouts that look good on any screen size. Working on those issues every day sounds like a dream come true.

I suppose it's time I hang up the idea that I will be a full-stack developer. I clearly love working on the frontend, and I have been too afraid to admit that before. I was really mad that I was good enough for this position, but maybe I was never going to love it. I will continue to search for a job that I can sink my teeth into what I love to do.

Getting Started in Next.js, part 2 - styling

JD Brewer-Hofmann — Tue, 09 Feb 2021 19:08:45 +0000

Review

In part 1 we built a basic Next.js site with some pages, and a navigation bar, but it doesn't look like much yet. In part 2 we will explore the different styling options and how to implement them.

Layout Component

Before we apply any styles directly to the existing elements, we can do some refactoring that will save us time in the long run. By using the Next Layout Component, we can share styles, or a general layout, across many pages.

Add a layout.js file to your components folder

And this code

export default function Layout({ children }) {
   return (
       <div>
           <p>layout</p>
           {children}
       </div>
   )
}

Then import Layout into the Posts page, and change the wrapper of the component from a fragment, to a component.

import Navbar from '../components/navbar.js'
import Layout from '../components/layout'

export default function Posts(){
   return(
       <Layout>
           <Navbar />
           <div>
               <h1>Posts</h1>
           </div>
       </Layout>
   )
}

You should see the word layout at the top of your posts page now. We can utilize the layout component to drop our Navbar component into each page in a cleaner way.

If we alter layout.js looks like this

import Navbar from '../components/navbar.js'

export default function Layout({ children }) {
   return (
       <div>
           <Navbar />
           {children}
       </div>
   )
}

And Post.js

import Layout from '../components/layout'

export default function Posts(){
   return(
       <Layout>
           <div>
               <h1>Posts</h1>
           </div>
       </Layout>
   )
}

The post page remains the same, but we are passing our Navbar through our layout wrapper now. Let’s change the other two pages as well.

Let’s add a footer component as well. Creating a /components/footer.js file and some simple code

export default function Footer(){
   return (
       <footer>
           <p>Footer action</p>
       </footer>
   )
}

By adding the footer to the layout component which wraps our other pages, we will now have a footer on every page as well.

import Navbar from '../components/navbar.js'
import Footer from './footer.js'

export default function Layout({ children }) {
   return (

       <div>
           <Navbar />
           {children}
           <Footer />
       </div>
   )
}

We’re ready to scale up now, through our layout component we have added the navbar and footer to each page.

Global CSS

The first place to start styling would be one main CSS file. In Next.js the styles folder contains the a globals.css file for anytime you want to apply styling to every page. Let's add a hover feature to apply to any links on the page.

a:hover {
 text-decoration: underline;
}

Add this block and you’ll have hover functionality on all links now.

The global css file imports to the rest of our project through the pages/_app.js file.

CSS Modules

The first option for adding component level CSS is through CSS modules. There are lots of advantages to using modules, and some frustrations as well, it's best to build some files to see for yourself.

Create a components/layout.module.css file adding this code to it

.container {
   width: 90vw;
   padding: 0 1vmin;
   margin: 5vh auto;
}

Then we will import the new module into our Layout component as 'style' and apply the 'container' class to the div.

import Navbar from '../components/navbar.js'
import styles from './layout.module.css'

export default function Layout({ children }) {
   return (
       <div className={styles.container}>
           <Navbar />
           {children}
       </div>
   )
}

Now, if you take a look at the HTML in your browser’s devtools, you’ll notice that the div rendered by the Layout component has a class name that looks like layout_container__...:

CSS modules automatically generate unique class names. You can avoid any class name collisions by keeping class names scoped locally. An added feature is Next.js's code splitting. Next will only load the needed CSS for each page, which keeps everything running quickly.

Now let’s create a style module for the navbar

Creating a components/navbar.module.css file with the following code

.header {
   display: flex;
   justify-content: space-around;
}
.navlink {
   color: #006000;
}

Importing the navbar.module.css to our navbar component and styling the component with it. We can style our links with a separate class name from the header coming from the same file now.

import Link from 'next/link'
import style from './navbar.module.css'

export default function Navbar(){
   return(
       <header className={style.header}>
           <Link href="/"><a className={style.navlink}>Home</a></Link>
           <Link href="/posts"><a className={style.navlink}>Posts</a></Link>
           <Link href="/about"><a className={style.navlink}>About</a></Link>
       </header>
   )
}

That's the basics of CSS modules. Personally I find modules clunky, and adding multiple class names using interpolation

className={`${styles.description} ${styles.yellow}`}

Just rubs me the wrong way. So let’s investigate more options.

Styled-jsx

Trying a different route with CSS, we have the Styled JSX framework. The style defined for a component only affects that component and nothing else — not even its children!

Next.js includes Styled JSX by default, so getting started is as simple as adding a
'style jsx' tag into an existing React element and writing CSS inside of it.

Let's experiement with the post.js file

import Head from 'next/head'
import Layout from '../components/layout'

export default function Posts(){
   return(
       <Layout>
           <Head>
               <title>Posts</title>
           </Head>
           <div>
               <h1>Posts</h1>
           </div>
           <style jsx>{`
               div {
                   background: #00a000;
               }
               h1 {
                   color: #ffffff;
                   text-align: center;
               }
           }
           `}</style>
       </Layout>
   )
}

Notice we are using generic selectors, the styles don't affect the same elements or class names in other components. Styled JSX are scoped to this component only (by applying additional unique class names to styled elements).

Check out the unique class name applied to div we styled:

The downside of Styled JSX is by using a template string to write CSS rules, you lose IDE and code editor assistance to write them, and commenting code out becomes difficult.

If Styled JSX intrigues you, there's lots more you can do with it, including adding global styles inside any component file.

Checkout out Next's documentation for more information.

Adding SASS

I'm a SASS fan, and luckily Next.js integrates with SASS very easily. Let's switch all this over to SCSS files now, because that's sort of the point of this article. Quick side note - I'm using Live Sass Compiler which makes all things SASS a breeze and I highly, highly recommend it. Seriously.

First install SASS

yarn add sass

If we switch our components/navbar.module.css file to components.navbar.scss and compile, we have SASS working for us, but now the files are piling up inside our components folder

Switching the other CSS files to SASS will triple my files, so let’s refactor this.

First, we will create a styles/main.scss - this will import all the other SCSS files so we only compile this one file, and keep everything organized. I will copy all the data from styles/global.css and paste it inside. Then in pages/_app.js we will switch our import from

import '../styles/globals.css'

import '../styles/main.css'

Once we compile ( using the live sass compilier ) , that will watch our main.scss file from now on and we don’t have to worry.

Now let’s move our navbar.module.css and layout.module.css files into our styles folder

Rename navbar.module.css to _navbar.scss and rename layout.module.css to _layout.scss
Next, import both into main.scss

@import 'navbar';
@import 'layout';

Change classNames inside our navbar.js file

import Link from 'next/link'

export default function Navbar(){
   return(
       <header className='header'>
           <Link href="/"><a className='navlink'>Home</a></Link>
           <Link href="/posts"><a className='navlink'>Posts</a></Link>
           <Link href="/about"><a className='navlink'>About</a></Link>
       </header>
   )
}

By creating a corresponding SCSS file for each component, we've developed a very scalable file structure going forward. And by importing each component SCSS file into the main.scss file, we only have to compile once, and we can sit back and enjoy all the beauty of styling with SASS.

Conclusion

That's a lot of reorganizing files, but for me I have a firm understanding of when I why I would use each of these styling options. I think Styled JSX is a great place to start when building an app, but as things scale up, migrating to SASS and moving everything to the style folder appears to be the best option for myself.

As always, don't take my word for any of this. There's some amazing tutorials out there, and Next.js's own documentation is stellar.

Next.js documentation

Getting Started in Next.js, part 1 - file setup and basics

JD Brewer-Hofmann — Tue, 02 Feb 2021 13:35:57 +0000

I had been hearing a lot of buzz about Next.js from the dev community lately, so I walked through the basics myself. So far, I have found it to be super powerful, and an excellent, if not necessary addition to React web applications.

The Basics

Next.js is an open-source React front-end development web framework that enables functionality such as server-side rendering and generating static websites for React based web applications.

It loads really fast because you have the option to generate static pages which don't rely on javascript to exist! Next code splits which allows even faster page loads for the user. Additionally there's a lot of other helpful functionality, but you should already be sold if you've read this far.

Let's build something

It's very easy to start

npx create-next-app my-next-app

Just like that, you have a Next app.

Inside the app you'll see a different file structure than a 'create-react-app'.

The files are generally laid out like this to begin.

Pages:
Index.js - the home page
_app.js - layout page
Public:
Assets
Images, etc..
Styles:
CSS files
Other styling files

We will add some additional folders, later as well.

To start up the app locally run

Yarn Dev

Navigate your browser to http://localhost:3000 and you will find Next's welcome page with a bunch of wonderful and helpful information. I encourage you to check out their documentation, it's very thorough, but for now let's start fresh.

Inside the pages/index.js file, edit your file to look like this

export default function Home() {
 return (
   <div>
    <h1>Home</h1>
   </div>
 )
}

You’ll see Next’s fast refresh kick in and quickly re-render the page. Next, we will build some pages and see how easy Next makes that.

Pages

Next uses integrated file system routing, which means routing is much easier to comprehend than React Router. Sorry React Router, I appreciate all that you've done for me...

Add a new file pages/about.js

Then add this code inside

export default function About(){
   return (
       <div>
        <h1>About</h1>
       </div>
   )
}

Navigating to http://localhost:3000/about, you’re now on the about page. You made a new route, just like that.

In Next.js, a page is a React Component exported from a file in the pages directory. Pages are associated with a route based on their file name, so the component can have any name, but you must export it as a default export.

By the same logic, nested files in the pages folder, equal nested routes.

Make another file in pages called “about/contact.js” and add the following code

export default function Contact(){
   return (
       <div>Contact</div>
   )
}

Now visit http://localhost:3000/about/contact, it's a nested route, just as easy.

Links

The next thing to do is to start building a navigation bar, so we can use these routes we've created. Next comes with a Link Component to wrap the <a> tags. <Link> allows you to do client-side navigation to a different page in the application. First we will import the Link Component into the pages/index.js file, then add a link to the About page.

Importing the Link Component at the top of the file

import Link from 'next/link'

Then creating the Link inside our Home component.

<Link href="/about"><a>About</a></Link>

Notice the Link component receives the href attribute and the tag remains inside with no necessary attributes.

At this point your file should look like this

import Link from 'next/link'

export default function Home() {
 return (
   <div>
     <Link href="/about"><a>About</a></Link>
     <h1>Home</h1>
   </div>
 )
}

And now you have a link to your about page. We can do the same thing with our about page and have a link back to our home page, like this

import Link from 'next/link'

export default function About(){
   return (
       <div>
           <Link href="/">
           <a>Home</a>
           </Link>
           <h1>About</h1>
       </div>
   )
}

This is awesome because no routing libraries are required. React Router is cool, but this is much cooler.
And when you need a link to an external site, a regular <a>tag will still do the trick.

Navigation Component

Now we want to create a reusable navigation component, with our Home, About, and a new link inside to display on each page without rewriting it.

First let’s create one new page called posts
Remember, just create a posts.js file in the pages folder and add this code to that file

export default function posts(){
   return(
       <div>
           <h1>Posts</h1>
       </div>
   )
}

We want a reusable component to add to each page we already have, so let’s build a ‘components’ folder in our root directory, and then we will have it for any other components we might need.

Inside the components folder, we can create a new file for our navbar, navbar.js.

Paste this code into the new navbar file

import Link from 'next/link'

export default function Navbar(){
   return(
       <header>
           <Link href="/"><a>Home</a></Link>
           <Link href="/posts"><a>Posts</a></Link>
           <Link href="/about"><a>About</a></Link>
       </header>
   )
}

Then we import that file into each file where we need it

import Navbar from '../components/navbar.js'

Then add the Navbar component to each page where we need it.

import Navbar from '../components/navbar.js'

export default function Posts(){
   return(
       <>
       <Navbar />
       <div>
           <h1>Posts</h1>
       </div>
       </>
   )
}

Once the Navbar component is imported into each file and returning a Navbar component, your pages should look like this in the browser.

I’m glad we have some navigation now, but the links are right next to each other. In part 2, we will add some styling options.

Additional Resources

https://nextjs.org/docs

Responsive Font-Sizing, part 2

JD Brewer-Hofmann — Wed, 20 Jan 2021 19:46:02 +0000

In part one, the primary method we used to achieve responsive sizing was media queries. In part two we will look to viewport units instead.

Viewport units

Viewport units are relative to the size of the browsers viewport, therefore they are incredibly responsive.

VH

The viewport height unit ( vh ) is equal to 1% of the viewport's height. So what does it look like when we use vh for our font-size?

h1 {
  font-size: 5vh;
}
h2 {
  font-size: 4vh;
}
p {
  font-size: 2.5vh;
}
button {
  font-size: 3vh;
}

That is quite responsive, and no media query is necessary.

VW

It makes sense then that the viewport width unit ( vw ) is equal to 1% of the viewport's width.

h1 {
  font-size: 8vw;
}
h2 {
  font-size: 6vw;
}
p {
  font-size: 4vw;
}
button {
  font-size: 5vw;
}

Once again, a very responsive unit, let's try flipping between portrait and landscape modes.

That works pretty well, and there's two other viewport units to examine still.

Viewport Minimum

This unit is based on the smaller dimension of the viewport. If the viewport height is smaller than the width, the value of 1vmin will be equal to 1% of the viewport height. Similarly, if the viewport width is smaller than the height, the value of 1vmin will be equal to 1% of the viewport width.

h1 {
    font-size: 8vmin;
}
h2 {
    font-size: 6vmin;
}
p {
    font-size: 4vmin;
}
button {
    font-size: 5vmin;
}

That might be even better than vh or vw, because if a user flips their phone from portrait to landscape the font-sizes will remain the same.

Viewport Maximum

You would probably guess that viewport maximum (vmax) is based on the larger dimension of the viewport.

h1 {
    font-size: 4vmax;
  }
  h2 {
    font-size: 3vmax;
  }
  p {
    font-size: 2.25vmax;
  }
  button {
    font-size: 2.5vmax;
  }

Vmax functions very similarly to vmin. Between the two, I find it much more sensible to base my responsive sizing off of the smaller dimension of the screen using vmin.

Fluid Text with calc()

Here's where things get really interesting. I stumbled upon a formula that expands upon viewport units and adds in minimum and maximum values for font-sizes. The formula looks like this

min = minimum font-size integer
minPx = minimum font-size 
max = maximum font-size integer
screenMin = minimum screen size integer
screenMinPx = minimum screen size 
screenMax = maximum screen size integer

font-size: calc(minPx + (max - min) * ((100vw - screenMinPx) / (screenMax - screenMin)));

font-size: calc(24px + (32 - 24) * ((100vw - 320px) / (1200 - 320)));

There's a lot to unpack here, if you want to understand it better checkout this awesome smashing magazine article. Let's take a look at this in action.

h1 {
    font-size: calc(24px + (32 - 24) * ((100vw - 320px) / (1200 - 320)));
}
h2 {
    font-size: calc(20px + (26 - 20) * ((100vw - 320px) / (1200 - 320)));
}
p {
    font-size: calc(12px + (16 - 12) * ((100vw - 320px) / (1200 - 320)));
}
button {
    font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1200 - 320)));
}

That sure is a handful to write, but it gives us an incredibly responsive sizing with guardrails to ensure our text never gets too large or too small. Coupled this technique with viewport sizing for your containers, and you can make some incredible responsive apps with no media queries.

Adding SASS or CSS precompilers

Abstracting away having to write this ridiculous calc function for every font-size in your app is the only thing left to do. Using SASS to write a reusable function can end up saving a lot of time. The only tricky part is remembering to add your minimum font size argument with a unit value to it, as well as without.

@mixin fluidText($minPx, $max, $min){
    font-size: calc(#{$minPx} + (#{$max} - #{$min}) * ((100vw - 320px) / (1200 - 320)));
}

h1 {
    @include fluidText(24px, 32, 24);

}

I attempted to simplify this, with no success, I had to include two different variables for the same number. While that little bit was annoying, the end result is a life saver for me, and I'll be copying that mixin into many projects from now on.

I hope this helps anyone who is curious about making a more responsive app, and of course there's a lot more information out there.

Additional Resources

https://www.madebymike.com.au/writing/fluid-type-calc-examples/

https://www.smashingmagazine.com/2016/05/fluid-typography/

https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

https://webdesign.tutsplus.com/articles/7-css-units-you-might-not-know-about--cms-22573