Learning Programming Fundamentals the FUN Way, In Any Language

What timeless advice welcomes fresh programmers? Yes, you guessed it. Fundamentals.

Learn how to code in pure JavaScript before learning a framework like Vue.js.

Whatever your stack may be, the advice remains rock solid. Learn fundamentals first before diving into the exciting, fancy world of web frameworks. There’s just one problem with this advice, especially for beginners. Learning fundamentals takes an ocean of patience. Beginners just want to code. But when they take this path, it bites them later.

Yes, you understand that learning pure JS unleashes the nuts and bolts of every framework. Even then, you still have trouble getting yourself to solve algorithmic scripting challenges.

The truth is, it isn’t easy nor sexy. But, you’ll thank yourself later.

Approaching it From a Different Angle

So, how should you approach learning fundamentals? Can you make it fun? Perhaps you can cut the learning curve a little.

Today, I’m sharing how I made learning fundamentals fun for me. The short answer: turn it into a game. Instead of reading through 500-page reference books, apply and expand your knowledge with immediate feedback.

Your job will always be the same: to solve problems. Think of problems as puzzles.

Introducing Codewars(and others)

So how can you make fundies fun, game-like, and based on feedback? I use Codewars. There are plenty of awesome problem-solving platforms such as Hacker Rank and Leetcode. In this post, I will be focusing on Codewars.

So why Codewars anyways?

How Codewars Works

Codewars is a level based platform where you score points by solving programming challenges called ‘katas’. Katas are community made and confirmed by automated unit tests.

When you solve a challenge, you gain a point and can level up. Sounds fun, right? There’s more!

Challenges train for every type of language feature, such as arrays, objects, this(or self) keyword, algorithms, and so on.

Think you don’t know enough to tackle a problem? Think again. Using my learning process, you can learn language fundamentals the right way using documentation and community solutions.

My Codewars Process

In short, my process involves doing everything you can to solve a problem, refactoring, and comparing your answer to the top solution. The process isn’t easy, but it’s fun, enlightening, and incredibly humbling. You come out with more to learn and explore.

Do Everything You Can To Solve: This is the most important step. You can look at solutions any time, but I urge you to give it your best shot.

Source problem: Rot13

function rot13(message) {
    return message.split(“”).map(e => {
    let char = e.charCodeAt(e);
    if(e.match(/[a-z]/)){
        return char > 109 ? String.fromCharCode(char-13) : String.fromCharCode(char+13);
    }
    else if(e.match(/[A-Z]/)){
        return char > 77 ? String.fromCharCode(char-13) :  String.fromCharCode(char+13);
    }
    else{return e}
      }).join(“”);
}

This solution took me longer than I’d like to admit, but I learned a lot. I wanted to view the efficient solution, but I didn’t. I stuck through it, shuffling through docs and learning just how fromCharCode worked.

Stick it out, and you’ll truly understand how the solution works.

Here’s the top solution

This user did it in 3 lines of code. How in the world did he do that? Now that I know the whole process of solving the problem, it’s clear how this user utilized Javascript to create an interesting solution.

You will get stuck. Don’t let it discourage you. Shuffle through documentation, maybe read a tutorial or two. Do what it takes. You’ll be surprised how many challenges you can solve this way.

You won’t always solve challenges, so don’t worry. Solve or no solve, you are set up to learn from the solution.

Refactor Your Code

So that warm, fuzzy feeling of accomplishment washes over you after completing a challenge. That’s a rewarding feeling. But, you’re not done yet.

This is an opportunity to grow your analytical abilities even further.

Hey look, a one liner! Source problem: Sort array by length

function sortByLength (array) {
    return array.sort(function(a,b){return a.length-b.length});
}

Here’s another user’s solution to the same problem:

function sortByLength (array) {
    // Return an array containing the same strings, ordered from shortest to longest
    let n = array.length;
    for(let i = 0; i < n-1; i++) {
        min = i;

        for( let j = i+1; j < n; j++) {
            if(array[min].length > array[j].length){ min = j;}
        }
        let t = array[min]; array[min] = array[i]; array[i] = t;
    }
    return array;
};

It works, but the code could be much simpler. You’d be surprised how many functions you can turn into one-liners. It’s a skill that comes with time.

Do your best to simplify your solution and reduce lines of code. After solving(or trying your best to), and refactoring, you’re ready to learn from more experienced developers.

Looking at Solutions

Here’s where you expand your knowledge on approaching problems.

I’ve shown the three-liner solution for the ROT13 challenge. When clicking ‘solutions’, you get a whole page of other developer’s solutions ranging from wow to why?

You may find yourself staring at a problem for 10 minutes figuring out why it works. This is perfectly normal. Some solutions look like a cryptic language. Just search for every component and see how it works in the solution.

You may see something like

(arg1, arg2) => { return arg1 ** arg2 }

And wonder what the hell is going on. A simple search will reveal that it’s an arrow function in JavaScript. Cool, huh? You can even try to implement it in your next solution.

Do this until you understand everything that’s happening. In the end, it only makes you better.

Katas are progressive. They get harder the more you solve them. When you progress, you’ll find previous challenges laughably easy. This is how you know you’re improving.

Conclusion: Take It From Here

So now you know the fun way to learn programming fundamentals. Does that make it easy? Not at all. In fact, I don’t blame fellow coders who wish to pound their keyboard with their forehead. Remember, it’s all part of the process.

Start small, but challenge yourself. Every problem you solve makes you stronger. And hey, you’ll pick up neat language features on the way! See you there.