Two Months Into The She Code Africa Mentoring Program — How It’s Been So Far.

So this article will basically run through a timeline of all I’ve been up to with the SCA Mentor Program starting from January up until now.

JANUARY

1st of January 2020, ushered in the beginning of the SCA program where I opted to participate in the Vue Learning Track. After skimming through the curriculum from my mentor I was super jittery because I had only just started learning the JavaScript module of my Udemy course 4 days before. But hey, I knew what I signed up for so I just braved up for the program to kick-off proper.

What’s the worst that could happen if things started to look sakamanje-ish to me? I’ll simply google my way through 🤷🏽‍♀️.

Anyway, the learning path for that month of January looked something like this:

1. The basics of Vue CLI
2. Conditionals and loops
3. Handling User Input
4. Vue life cycles
5. Two-way data binding
6. Vue directives
7. Handling Event

A little segue and SUPER-unrelated: I think of Vue and in my head, I think ice-cream. (I have no explanation for why this is so. Just wanted to put that out there).

Big-ups to Canva for letting me cook up just how I see Vue in my head

Okay, okay, so Month One went pretty smoothly, rendered my first “hello world” with the Vue CLI and then the tutor went “congratulations, you’ve just created your first Vue app” and I was just like “App? Just like that? Mad ting!”

I’d later find out that app is different from APP when at the end of the month, we had to create a quiz app. Here, I was able to really tie in all I’d learnt from the previous week into one piece. Everything from data binding to looping through an array of data to event handling to updating the UI of each element based on the data received at every point in time.

My favourite part of Vue at this time would be how you can just loop through a long list of items with a simple v-for directive as opposed to the clunky alternative with pure Javascript. Made me wish I had a real-life v-for wand to speed-run to the part where I’m just rich, accomplished, living large and po… err, so yeah Vue… Month Two…

FEBRUARY

At this point, I was already really in love with Vue (because… icecream duh) but jokes apart, learning Vue alongside Javascript really helped me conceptualize the more difficult parts of JS better. The learning path for the month of February looked like this:

1. Routing in Vue
2. Using components to make app modular
3. State management with Vuex

In my mind, I thought “Just three items? This should be a breeze” and it was kinda.

I especially loveddddd tinkering around the concept of routing in Vue and how it reduces the bulk of your code to rendering components with full lines of code via a simple <router-link>element. This smoothly transitioned into learning the rudiments of Dynamic Components and how you can reactively switch between components using… you guessed right, a <component>tag and computed properties. Used this to make a cute coffee site.

One element I came across at this point that endlessly amused me was the <keep-alive> element.

It literally functions how its name suggests –When wrapped around a component, it freezes that component in place when it’d have otherwise been destroyed by the rendering of another component. It’s kinda like having the best time of your life at a club on Friday night, all good things come to an end, right? Nope.

If you had a <keep-alive> magical wand, you could freeze your Friday club shenanigans and carry it into Monday with you 🤷🏽‍♀️. (Please, this is how I choose to understand it 🤧)

Sighs. We all need a <keep-alive> wand to wade through life, don’t you think?

Okay, so, remember how I thought this month would be a breeze? Well, State Management with Vuex came to turn my joy to ashes. Mahn! This thing gave (and still gives) me so much headache.

So basically, I’d like to think of Vuex as some sort of Order-seeking General for all the components in an application. This bad guy wants to ensure that the state (the app’s one true “source-of-truth”) can only be toyed with in a manner that it can track, it wants to ensure things are organized and that there’ll be no future chaos when things start to scale up pretty fast.

So if you wanted to manipulate the state, you’d have to commit mutations that tell the Vuex store “Hey, Component A wants to change so and so data”, the store then implements the desired changes via the mutations that were committed.

Think of it as leaving footprints of every state an app was ever in so in case there’s the need to debug, things don’t get chaotic.

Sounds like I really get it right?

Implementing my understanding of how I saw Vuex in real-time was way different from conceptualizing it in my head… but thankfully, my mentor took time out to break things down for me. Still trying to get more hands-on with the concept though.

You can find everything I’ve done for the month of February so far here and here.

I think that caps it, for now. It’s the third and final month already, we’ll see what the elements have in store for us (pun intended).

Pizz awt! 🤞