Continuing CSS course

Trying to wrap my mind around "half completed things" and decided to go ahead with the tiny CSS image course I purchased a while back. A bit of fun coding is sometimes needed to get back into the groove!

It gave the basics quite quickly, so I managed to do my own penguin after following the koala tutorial:

See the Pen Penguin by Anzelika (@anzuj) on CodePen.

What was really interesting though: Pug preprocessor. Essentially it means being able to write code much faster, so that instead of this HTML:

  <div class="box">
    <div class="head">
      <div class="eyes">
      </div>
    </div>
  </div>

we can have this:

.box
  .head
    .eyes

Quite neat, right. It does mean however that you have to be very precise, since nesting depends on two spaces or a tab. For smaller projects such as these CSS images I guess it's okay, but I think I won't be using this in actual website development. Firstly, due to not being able to detect nesting issues that easily and secondly, it may cause proper headache in collab projects. Still, interesting to find out everyday what people have come up with to reduce coding time :)

What we'll cover now:

• CSS animations (make them ears dance!)
• Vue.js (spiderwebs across my divs, making them ears dance!)

As soon as we reached the bit where we animated the ears with vue, my overthinking quality went overdrive to Google how can I toggle the class back and forth instead of just making the ears animate once. Problem (in my eyes) was that vue function applied an active class which was not removed anymore, so unless the page was reloaded, the animation no longer took place upon click. I tried to remove the class within vue function with vanilla JS:

let element = getElementsByClassName("ear-right-active");
element.classList.remove("ear-right-active"); 

But apparently it was the n00best attempt ever and vue has its own methods to deal with class toggling/removing.

So after 30 mins of Stackoverflowing I concluded I'm sidetracking myself with Vue quirks and continued with the course. There comes a time I'll dive into Vue, but today is not that day.