DEV Community: Daniela Valero

Understanding how to make shapes in CSS by doing CSS Self Portrait

Daniela Valero — Sat, 15 Feb 2020 17:55:29 +0000

One of the things I enjoy about being a developer, is the learning mindset that identifies us as community.

Recently I learned about the concept Learn in Public. The concept of learn in public, is basically: Pick a skill you want to learn, practice it, post about it. Simple but refreshing.

So, I have decided to learn in public about making art with code. Yet the path feels long, the first easy step for me was to draw something with CSS. In this case, myself.

So. Here we go!

The Result

Here is the codepen of my little exercise.

Learning Goal

Draw something easy with CSS.
Practice the basics of making shapes and placing them around the drawing
Practice the mindset of: what shape do I need to create and concatenate to make what?

The Markup

<div class="nani">
    <div class="face skinColor">
        <div class="hair">
            <div class="curl"></div>
            <div class="curl"></div>
            <div class="curl"></div>
            <div class="curl"></div>
            <div class="curl"></div>
            <div class="curl"></div>
            <div class="curl"></div>
            <div class="curl"></div>
            <div class="curl"></div>
            <div class="curl"></div>
        </div>
        <div class="smile"></div>
        <div class="glasses"></div>
    </div>
 <div class="neck skinColor"></div>
<div class="bodyDaniela"></div>

You see there we have:

One container that has all the elements.
The face contains: Hair and the curls, the smile and the glasses.
Then comes the neck and the body

Positioning the body parts with Flexbox

Flexbox is a modern CSS layout feature that allows us to handle positioning elements in only one dimension, and has very powerful alignment properties.

You see in the code snippet below, that I am using flexbox to place all the body parts:

In the center of the X axis of the viewport
All the main body parts vertically on top of each other (face, neck, body)

.nani {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

Face, neck and body shapes

My neck is easy, just a rectangle with a negative margin, to hide behind the face.

The face is not a perfect circle. My face is more like an inverted triangle shape, or like an inverted egg.

The body is a simple inverted triangle.

.face {
    width: $headSize;
    height: $headSize + 10;
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    margin-bottom: 15px;
....

.neck {
    width: 30px;
    height: 20px;
    margin-top: -25px;
    z-index: 1000000;
    position: relative;
}

.bodyDaniela {
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-top: 90px solid $skinColor;
}

You see there, that in order to achieve the inverted egg shape for the face, I set the height bigger than the with, to create kind of a perfect oval.

Then, to give it the shape of egg, I used the syntax border-radius that has the / operator.

This syntax allow us to create ellipsis shapes by controlling more specifics of the radius of the corners. This means, that the values of the corners will end up being:

    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    border-top-left-radius: 50% 40%;
    border-top-right-radius: 50% 40%;
    border-bottom-right-radius: 50% 60%;
    border-bottom-left-radius: 50% 60%;

Meaning:

border-radius: top-left-1 top-right-1 bottom-left-1 bottom-right-1 / 
               top-left-2 top-right-2 bottom-left-2 bottom-right-2;

There you see that the second radius value of both top corners is bigger: 40%. That creates a bigger circle shape, while in the bottom they are 60%, which creates a more narrow circle. The bigger the value, the more straight looking the line will be, the smaller the value, the more "swollen" the line will be. For example, if I set the values to be: border-radius: 50% 50% 50% 50% / 40% 40% 30% 60%;

It will look as if I had a grinder (tooth) problem and my face was swollen:

To understand the triangle shape, let's look again to the CSS:

  border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-top: 90px solid $skinColor;

The border-top, gives the length to the triangle, and the border-left and border-right, give the width to the edges closer to the neck.

You might be wondering, yes but why this creates a triangle? I actually also wondered that too. To understand why this works I just added different colors to all the borders, and this is what happened:

As the div does not have a width and height the borders expand doing a natural triangle shape, until they reach the center of the rectangle. So that when we add a triangle doing:

  border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-top: 90px solid $skinColor;

We are:

Giving the left and right borders the same size and a transparent background
Giving the top border a higher size and a colored background
Letting the bottom border unset

Which will basically draw the top part of the image I placed above, with the difference of not having color in the red parts.

Curious note: If you add width and height, there will be a shape in the middle. So when we are creating layouts, say a box with 1px border, as the content of the box is bigger than the border, it will seem as if "eats" that whole "triangle" shape of the borders. But in reality, that triangle shape remains there.

Why? Because when the borders of each of the edges of a square shape meet each other, the browser will draw a diagonal line. As we always use the same color for all the borders, we never see it.

Curious? Open the dev tools and try changing the colors of one border of a shape you have :) I did.

The curls

To make the curls, I made a an oval that was wider than taller. At the beginning I made a perfect circle, but was not really looking like my hair, my curls are less tight, so the oval seemed a better choice.

The placing of the curls around my face was the challenge.

I thought about using trigonometry (sin, cos) to find the points at the edge of the circle that makes my face. Which would have worked if I knew the exact point that is in the center of the circle. In my case I did not know it because it will change depending on the viewport. So that was not an option.

The calculation of the points around my face's circle had to depend on the size of it. And in order to actually make it work, I placed the div that makes my hair and the curls inside the div of my face. So this way, as the face is the container element, it could be easier to actually find the points.

This is the HTML

<div class="face skinColor">
        <div class="hair">
            <div class="curl"></div>
            <div class="curl"></div>
            <div class="curl"></div>
            <div class="curl"></div>
            <div class="curl"></div>
            <div class="curl"></div>
            <div class="curl"></div>
            <div class="curl"></div>
            <div class="curl"></div>
            <div class="curl"></div>
        </div>
        <div class="smile"></div>
        <div class="glasses"></div>
    </div>

How did I solve it? In the codepen I am using SASS, which allows me to use mixins. I googled a bit, and found this mixin (which I adapted a bit to my needs). I will comment in within the code the interesting parts.

// mixin from: https://css-tricks.com/snippets/sass/placing-items-circle/ 
// circle size will be the size of my head, and the item size will be the size of the curl.
@mixin on-circle($item-count, $circle-size, $item-size) {
    position: relative;
        // My hair grows to the sides, so I made it wider than taller.
    width: $circle-size + 10;
    height: $circle-size;
    padding: 0;
    border-radius: 50%;

    > * {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;

    // These values are kind of arbitrary, I was just playing around with them
    // and kept the ones that felt closer to my hair
        width: $item-size + 10;
        height: $item-size - 3;

    // My hair is not a perfect circled curl, so I did not make it 50%
        border-radius: 45%;

    // This "centers" the curl vertically and horizontally. 
        margin: -(($item-size / 2) +3);

    // This part is what makes the magic. I'll explain it below.
        $itemsRotate: $item-count - 1;
        $angle: -(200 / $itemsRotate);
        $rot: 0;

        @for $i from 1 through $itemsRotate {
            &:nth-of-type(#{$i}) {
                transform: rotate($rot * 1deg)
                    translate($circle-size / 1.7)
                    rotate($rot * -1deg);
            }

            $rot: $rot + $angle;
        }

        &:nth-of-type(#{$item-count}) {
            transform: rotate($rot * 1deg) translate($circle-size / 1.7)
                rotate($rot * -1deg);
        }

        &:last-of-type {
            transform: rotate($rot * 1deg) translate($circle-size / 1.65)
                rotate($rot * -1deg);
        }
    }
}

So, the location of the curls is using trasnform. The idea is:

Give me the number of items to place around the circle
We will given that we have the circle size, we will decide where to place the curls based on angles. A circle makes an angle of 360 degrees, as the hair grows only on top and the sides, I picked an angle of: 200 degrees.
For each of the curls, we will calculate the angle where we will place the curl. We do that by dividing the total degree number: 200 by the amount of items we want to place. (I'll explain the -1 below)

    $itemsRotate: $item-count - 1;
        $angle: -(200 / $itemsRotate);
        $rot: 0;

Then you see, that taking advantage of transform we can easily say: rotate this item to $angle and then we will translated it right to the edge of my face. This is done by dividing the total circle size / 2 (radius). I deliberately picked a number sightly smaller than 2, because I really don't wear my hair on my face, I find it actually annoying, I always move it a bit to the sides. By picking a smaller number the point where the curl was translated, ended up being wider.

        @for $i from 1 through $itemsRotate {
            &:nth-of-type(#{$i}) {
                transform: rotate($rot * 1deg)
                    translate($circle-size / 1.7)
                    rotate($rot * -1deg);
            }

            $rot: $rot + $angle;
        }

Then we have these two elements. I placed them outside the function, because I have longer hair, and wanted to have some that were a bit "hanging"

        &:nth-of-type(#{$item-count}) {
            transform: rotate($rot * 1deg) translate($circle-size / 1.7)
                rotate($rot * -1deg);
        }

        &:last-of-type {
            transform: rotate($rot * 1deg) translate($circle-size / 1.65)
                rotate($rot * -1deg);
        }

How the rotate and translate work?

The concepts come from math. Around a circle, an element can rotate and translate. To understand them better, think of the rotation and translation movements of the earth.

Translate (as of translation): It's the movement of an object around some space. The earth for example translates over an ellipsis around the sun, because of that we have seasons.
Rotate (as of rotation): This is the movement of the object around one of its own axis. The earth rotates over one of it axis, and because of that we have day and night.

How this exactly works, is something I want to learn next. However, what the specific order of the rotate, translate, rotate does is:

First rotate: moves the curl around the my face's shape
Translate: Moves the curl from the center of my face, to the edge
Second rotate: rotates the curl so that its horizontal-ish ellipsis shape stays horizontal all the time, regardless of where around my face is.

You might be wondering, what is that black semicircle in that image?
That is what gives the frame to the forehead and sides of the face. It's done with inset box-shadow. Why box shadow? Well, box shadow is there to add a shadow at the frame of an element. I wanted to frame my face :)

box-shadow: inset 2px 7px black, inset -1px 5px black

In there you see two definitions. The first one sets the box shadow to the left side of my face, and the second one to the right.

The smile and the glasses

The smile is easy, two semi circles, one sightly rotated (because I don't smile mathematically perfect) and the other one longer.

.smile {
    display: inline-block;
    margin: 0 1em 1em 0;
    background-color: white;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    width: 36px;
    height: 14px;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, 50%);
    z-index: 10;

    &:before {
        content: "";
        width: 55px;
        height: 6px;
        top: 0;
        left: 0;
        position: absolute;
        background-color: $skinColor;
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
    }
}

By defining border radius to the bottom, we make the semi circle. And as a smile is more like a longer and flat semi circle, I made it a semi ellipsis.

    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    width: 36px;
    height: 14px;

The second semicircle gives some round shape to the top of my smile. This one is a bit longer, and has my skin color as background color, so that it covers the flat top part of the smile, and gives a more "natural" smile effect.

        width: 55px;
        height: 6px;
        background-color: $skinColor;
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;

The glasses

They are also straight forward. Just one div, with some size, and as a before and after has defined both glasses. They are a simple squared div, with rounded corners and absolute positioned to the sides.

.glasses {
    width: 36px;
    height: 25px;
    position: absolute;
    top: 16px;
    left: 53%;
    transform: translate(-50%, 50%);
    z-index: 10;

    &:before,
    &:after {
        content: "";
        width: 30px;
        height: 30px;
        border: 2px solid #121252;
        background-color: #c6d8da;
        border-radius: 4px;
        top: 0;
        position: absolute;
    }

    &:before {
        left: -17px;
    }
    &:after {
        right: -18px;
    }
}

That's it :)

Again here the link to the codepen

What I learned

How to start thinking on what to do with divs and CSS to create shapes
When to use new layout techniques like flexbox and when is useful to absolute position.
Now that we mentioned absolute position. Just because it's old does not mean is evil. Using this to position my smile and the glasses made total sense because there is no real mathematical function or automatic content-based layout property I could use to place eyes and smile in a way that looks natural. This had to be arbitrary.
Finally understood what the syntax of border-radius: x x x x / x x x x does. And `box-shadow: x , x;
Finally understood how the mechanics of creating a triangle works.
How to make an egg shape.
Face shapes, smiles, and locating eyes and smiles around the face needs to be imperfect, drawing humans is not about making geometrically perfect figures.

Useful links

Things I want to understand better

Practice to understand deeply how the and why the order of rotate transform rotate had to be exactly that way. How the order affects the coordinate system.

How to keep growing a team's technical knowledge in 2020? (or any year)

Daniela Valero — Sun, 05 Jan 2020 16:34:18 +0000

When leading technical teams, one of the most important things we need to take care is to grow the team skills by introducing knowledge, patterns, techniques, that are relevant for the team, the product and that the people are ready to understand.

On finding the right balance

When one person in the team introduces a pattern, or a paradigm, that not everyone is ready to handle, regardless of how strong the solution is, this pattern would introduce a constrain for the other team members on maintaining that part of the code.

Simplicity is on the eyes of the beholder. A pattern can seem very simple for a developer who is very experienced with it. But for the developer who is not familiar with it, the same pattern can be really complex or impossible to understand.

As a technical lead, the decision making in this regard is not an easy one. How to find the balance between two opposite points? What is simple for the most experienced dev, is complex for the less experienced dev (at that particular thing).

Keeping everything simple for the less experienced devs, might involve creating solutions that are not the best for a specific problem. On the other hand, giving room for the most experienced dev to introduce a pattern that are unknown by the rest, would potentially create a stronger technical solution, but would limit the less experienced devs to maintain that piece of code.

The balance

At this point, I tend to get to the idea of: Introducing new patterns slowly, growing the skills of the whole team as a unison while creating a space where the knowledge is openly shared, so that we all learn and grow at unison.

If I were to split it in bullet points I'd say:

Build and Communicate the ultimate tech goal: As a tech lead is important that you have a technical goal and that you communicate it open and transparently to the team, if you can build it together even better. If you don't have a goal yet, then answering the following questions might help: Where should the team be? What should we be able to do?
Deconstruct the goal it in steps and prioritize them with the team: Sit together when is necessary, and see what small steps the team needs to take in order to get to that goal. It can be for example: "We want to do TDD", the steps might be: "Write a unit test for every code written", then "Write strong tests upon which we can rely".
The technical lead is not the holder of the holy grail: As a technical lead you don't need to know everything, master every little piece of knowledge that exists in Software. Your role is to give room for people to be able to apply their knowledge, while sharing it and growing the rest of the team members. Just be humble about what you know, and don't pretend, be honest, this is the best way to keep learning yourself!
Define a metric to know when the team is ready to move on: To keep things interesting, moving and evolving, is important for you and the team to know: "How do we know that we can move on to the next thing?". Having a metric is what will help you to keep moving forward.
Temporal inconsistency is fine: During the time of learning and practicing a new pattern, there will be inconsistency in the code base, some parts will be written in the old way, others in the new way. Once the team masters the new pattern, the old way written code will be refactored with the time.

Tip: If you have a technical goal, and don't know where to start, unit testing is the answer. Having a strong unit test base, is what will allow you to refactor and move things around without fear of regressions and breaking working things.

If you will remember something of this blogpost, let it be this one:

The solution is always in the middle.

The 6 roles of building accessible experiences, explained

Daniela Valero — Fri, 11 Oct 2019 16:03:26 +0000

Illustration from Lucas Wakamatsu
Also published on my personal blog

There are different roles that are involved when building accessible websites.

1. The Developer

They select the right semantic elements for what they need to build, they read and understand the difference components and usages of WAI-Aria to select just the right amount of attributes only when is necessary.

2. The Visual Designer

They take care that the text is readable in different screen sizes and zoom levels, they choose colors that can be seen and understood regardless of the color blindness disability and they ensure that all the information the user needs is available even if they don’t see colors.

3. The Copy Writer

They write and organize content in the page so that everyone can understand it. They avoid complicated words or highly technical terms, so that people who are not specialist or with dyslexia for example can also understand the message. They also select images and write descriptions to the images that are there to convey meaning.

4. The UX

They put themselves in the shoes of the user with disabilities, when designing the UX of a site, or when making a judgement call of how a pattern should work, they primarily consider: how does it feel for the user? Is it clear enough? Is it too overwhelming? Do we need to add explanations? Maybe we need less?. They don’t stay close to the book when making judgement calls, they don’t close their eyes and say: let us leave it like this because that is what the standard says. The go one step further, because they understand that sometimes the standard alone is not enough, the standard is just a small part, a beginning. They add more or less details to the UX judging what feels right to the user.

5. The QA

They take that whole experience created, and test it with different browsers and screen readers tools. They try to break it, they use it as if they were a user who has no idea of what the “right flow, right order, right input” is.

6. The PO

They have the vision of the product, they decide and communicate how important accessibility is. To what level do they need or want to comply, and communicate to stakeholders why this is in there, as a definition of done thing.

The mix

In the real world, in a common project, most of these roles are present, but they are not included in their role DoD the accessibility part, they build the experiences thinking on users like themselves. Even if they have a temporary disability, there is the tendency where they don’t think even on the rainbow of users that will come to access that site they are building.

What this means is that when a project considers accessibility as a built in thing, it starts by one person, usually the developer, who puts on the hat of all the roles mentioned above, all at once. They explain and communicate with kindness and clarity why this is important, and how can it be achieved as part of the usual day to day work. They become a leader who inspires everyone in the team to care for these users, they make things simpler, find the best solution, finds the time and overall, keeps asking the question, loud and openly: how does this feel for the user with disabilities?

Eventually, the others will start asking the question. Eventually they will get more curious, learn more, advocate more.
The most important thing is, if it is important for your business, and your product (in most of the cases it is), start caring.

Moral of the story

If you do care, but don’t know how to start, here is your start: learn to use 1 screen reader.