DEV Community: La Rainne Pasion

Make a beating heart using CSS: beginner-friendly tutorial

La Rainne Pasion — Sun, 13 Feb 2022 05:11:13 +0000

Did Valentine’s Day slip your mind this year? You’re probably not the only one. You could go the ol’ procrastinator’s route and buy your significant other some last-minute chocolate or flowers. Or, you could build them something quick and simple but still makes them think, “Dang, I’m in love with a thoughtful genius.” Enter: a beating heart animation made with CSS.

CSS art can be complex and daunting, but the foundation of this easy tutorial is just a couple of shapes: a square and two circles.

We start by creating a div in our HTML. I gave mine a class of heart just to really solidify that’s what we’re making (and what we risk breaking if we don’t give our loved ones anything for Valentine’s).



<div class="heart"></div>

Let’s make sure this heart is centered on the page. In your CSS, set the body (the container of the heart) to display: flex and center the content inside it using the justify-content and align-items properties.



body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Next, let’s give the div some color and dimensions. I chose a classic red and set the height and width to 100 pixels each. Regardless of how big you make your heart, the height and width should be equal so you end up with a square. Rotate this square -45 degrees to get the pointed end on the bottom of the heart.



.heart {
    height: 100px;
    width: 100px;
    background-color: red;
    transform: rotate(-45deg);
    position: relative;
}

To create the circles that form the top of the heart, we use the ::before and ::after pseudo-elements to generate two new shapes. Set them to the same height, width, and color as the original element and give them a border-radius of 50% to turn them into circles. Set their position to absolute.



.heart::before, 
.heart::after {
    content: "";
    height: 100px;
    width: 100px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
}

Now that we have these circles, we need to move them into place to create a heart. Bring the .heart::before pseudo-element halfway up from its starting position by offsetting it -50 pixels (or half of however tall your .heart::before is) from the top. Notice that it moves diagonally toward the top left of the screen because of how the original .heart element was rotated -45 degrees. To complete the heart, bring the .heart::after pseudo-element halfway to the right of its starting position by offsetting it 50px from the left.



.heart::before {
    top: -50px;
    left: 0px;
}

.heart::after {
    left: 50px;
    top: 0px;
}

Time for the fun part: let's make this baby beat! We'll use @keyframes and name the animation heartbeat. Let's transform the heart to grow 1.25x its original size when the animation is 25% through its duration, and then grow even bigger when the animation is 45% of the way through. This change in size should give us that beating effect. Make sure you keep the -45 degrees rotation in your transform property so your heart doesn't tilt during the animation.



@keyframes heartbeat {
    0% {
        transform: scale(1)
            rotate(-45deg);
    }

    25% {
        transform: scale(1.25)
            rotate(-45deg);
    }

    45% {
        transform: scale(1.5)
            rotate(-45deg);
    }
}

The last thing we need to do now is define the duration and iteration count for our animation. Let's go back to our .heart element and set the animation property to specify our heartbeat animation. Then, let's set the duration to 1 second and give it an infinite loop.



.heart {
    height: 100px;
    width: 100px;
    background-color: red;
    transform: rotate(-45deg);
    position: relative;
    animation: heartbeat 1s infinite;
}

And there you have it: a CSS heart animation that will beat as infinitely as your love will (hopefully) last. Happy Valentine's Day!

Learning by unlearning

La Rainne Pasion — Tue, 25 Jan 2022 21:51:05 +0000

For many of us who came of age in the mid-to-late 2000s, our first exposure to web development came from playing around with code on sites like Neopets and MySpace. You might've even started on Tumblr, Friendster, or another space that allowed for self-expression through code. In my case, it was Xanga—a LiveJournal-like blogging platform—that first pulled me into the world of HTML and CSS. I remember being 12 and humming along to the sweet sounds of dial-up, waiting to be connected to the Internet so I could tinker with my layout for the 100th time that month.

As you might imagine, pre-teen me was less preoccupied with coding standards and best practices and more preoccupied with making my page look cool, which to me at the time meant animated and sparkly. I just wanted to fulfill my ideas, and getting any of them to work after studying a mere crumb of coding made me feel like a god. Unfortunately, this focus on output over process meant I was building bad habits, some of which I didn't even realize I had until I first started studying software engineering in a more formal context. After the second week of #100Devs (and after many years since I last touched code…), I discovered that in order to really learn the fundamentals of coding, I needed to unlearn a few tendencies I picked up as a kid, like:

Not separating concerns

From the very first class, Leon stressed to us the importance of separating code that deals with the content (HTML) from that which handles style (CSS) and interactivity (JavaScript). This seems pretty straightforward; after all, many consider it the golden rule of web development. I’d be lying, however, if I said young me never styled things inline in HTML when I wanted certain text on my blog to be blue or headings to be extra large and bolded. I now know that this is a no-no (say that five times real fast). Separation of concerns exists because it helps keep your projects organized: It makes code easier to read, modify, and update, it allows for better code reusability, and it helps prevent you from being a headache to work with when you’re collaborating on a team.

Blindly copy/pasting code

One of the things I recall applying to my Xanga page was a vanilla JavaScript plug-in for falling cherry blossom petals. Being able to achieve this effect with just a simple Ctrl+C and Ctrl+V of someone else’s code was like magic to me. Before long, though, some edits I made to my page caused the plug-in to break, and I spent more time than necessary to figure out what went wrong because I had no real idea of where to start debugging. This is why it’s important to understand code before you reuse it. Yes, copy/pasting code might solve a problem you have, but in the long run, it can also create more of them if you don’t take the time to read and interpret the code in detail.

Neglecting to ask for help

I don’t know about you, but I was a stubborn kid. I also liked being independent. As a learner, this can be a good thing: you might be a self-starter who is persistent when it comes to nailing down a concept. However, it can also mean that you don’t want to get help when you’re stuck. I used to think that asking for help meant I was failing at what I was doing, but that’s not really the case for most things, especially something as difficult as coding. Now I can appreciate that the right people will recognize my frustration and admission of ignorance as a sign that I am putting in the effort to improve. Lately, I’ve been operating by the #100Devs rule of thumb: If you’ve struggled with a problem for 30 minutes and still haven’t solved it, then it's time to reach out for help.

Inattention to accessibility

As a sighted and hearing person, I grew up with the privilege of being able to see and hear everything around me, including all the sounds, photos, and text on any website I visited. I think about my old Xanga page with its uncaptioned videos and lack of alt text for images and I realize it wasn’t built to be inclusive. After reading about The A11y Project and building digital accessibility through semantic HTML, I am unlearning the tendency to code as if everyone experiences the world as I do. My code is now focused on promoting usability and providing equal access. I've made a note to be deliberate about creating clear layouts, using colors with good contrast, and avoiding “divitis.”

So you see, sometimes the most important step in learning is unlearning. When our intention is to let go of what we already know (or think we know), we open ourselves up to new and often better ways of doing things. Thinking flexibly and critically is a great way to become a strong problem solver—and what is life and coding if not a series of problems to solve?

How coding is like crocheting

La Rainne Pasion — Mon, 17 Jan 2022 19:07:22 +0000

At first glance, coding and crocheting appear to have little in common outside of both being words that start with the letter “C.” One is a process that allows us to build cutting-edge computer software, websites, games, and apps. The other is an allegedly old-fashioned craft, more often associated with grandmas in rocking chairs than anything high-tech.

But what if I told you that the two are more similar than you might think? Barbara Oakley, in her famed Learning How to Learn Coursera program, teaches us that the “chunks” of information we know from one concept can sometimes have surprising links to another idea we’re learning. In my case, I realized after finishing the first week of a software engineering course that crocheting and coding aren’t all that different when it comes to things like the language, the community, and the journey to a finished product.

Don’t believe me? Read on to see what I mean.

Coding and crocheting have mystifying lingo

When you look at code in a language you’re unfamiliar with, a lot of it seems like gibberish. You may not know right away what </div> or rgb() or JSON means, but once you become more acquainted with the syntax and terminology, the letters and symbols laid out in front of you start to make sense. With some study and practice, you can recognize which part of the document results in what output on a page.

Crocheting, like coding, has its own lexicon as well. Read any pattern on how to make a hat and you’ll see it’ll go something like “Ch 87. Ss in 1st ch to join. Ch 2. *[FPdc in next st, dc in next 2 sts]”—not so easy to decipher when you don’t know crochet lingo, but the function of each term becomes much clearer after learning some of the language.

Their communities are generous and supportive

Spend a bit of time on (the good side of) #techtwitter and you’ll see that there are tons of people in tech offering support to those who are new to coding or are trying to break into the field as engineers and developers. Many of these seasoned professionals volunteer their precious time to troubleshoot code, mentor juniors, and review portfolios. There are also endless free resources online for learning programming languages or building projects, shared openly by enthusiasts entirely out of generosity. I myself have enrolled in a full-stack web development training program for a total of $0.00 thanks to one very altruistic instructor, Leon Noel. This is all to say that plenty of folks who have a passion for coding also have a passion for giving, and often all they ask for in return is for you to pay it forward.

The same generosity can be seen in crocheting circles and the abundance of knowledge that crafters make available for anyone to access. Google “crochet basics” and you’ll find thousands of tutorials from experienced crocheters explaining everything there is to know about the art. There are also crafters who spend hours upon hours building, testing, and writing patterns that they then release for free, much like developers do with some of their code. In a way, crocheters have their own open-source databases of projects that they can enhance and customize to their needs.

You use similar methods for fixing mistakes

One of a crocheter’s worst nightmares is pausing to look at your work in progress only to realize that it’s a little wonky. Fixing a project that’s gone awry involves closely examining your stitches and pinpointing the row(s) in which you may have skipped a stitch, forgotten to change colors, or used the incorrect number of turning chains. Once you figure out where things went wrong, then you can get back on track to finishing your scarf, sweater, or what have you.

You don’t always get it right the first time when coding, either (in fact, I’d be really impressed—maybe even slightly suspicious—if you did). Just like with crochet, debugging your code calls for carefully inspecting what you’ve worked on and repairing existing errors. Gradually, you learn how to become patient and attentive to detail whether you’re working in VS Code or wielding a crochet hook.

You can create beautiful and functional things with just your hands and minimal tools

Give a crafter some yarn, a crochet hook, and time, and you’ll be amazed at what they can make: blankets, reusable market bags, board shorts, and even amigurumi. In the same vein, programmers can build a limitless array of products with only a computer, a text editor, and probably some caffeine. These two disciplines use minimal tools to construct something beautiful, useful, or often both. At the end of the day, coding and crocheting are different but analogous ways to be creative using your hands—just remember to be careful, because you can get carpal tunnel syndrome doing either activity!

You learn something new every day

Whether you’re a beginner at crochet or a crafter with 10 years of fiber art under your belt, there’s always a new technique to practice or a fresh project to undertake. Being a good crafter means you never stop working to improve your skill or expand your knowledge. The same can be said for coding: to become a great coder is to sign up to be a lifelong student. Engineers, developers, and programmers are constantly picking up new languages, frameworks, and technologies to keep themselves current in their fields. While this may seem daunting, it's a big part of what keeps the work unique and exciting.

Have I convinced you that code and crochet are not as different as you may have thought? Did this make you think about unexpected links between your interests? I'd love to hear them!