Forem: Joel P. Mugalu

Developer Stories: How Justin became a game dev by accident

Joel P. Mugalu — Thu, 03 Aug 2023 07:32:24 +0000

I had a wonderful chat with Justin Scott Bieshaar, a game developer from the Netherlands.
We talked about how he accidentally got into the craft, the challenges he’s had in his journey, and how we can be more supportive of women in tech and other underrepresented groups.

Catch the full article here at peoplewhocode

TypeScript: Getting Started

Joel P. Mugalu — Wed, 07 Jul 2021 13:54:43 +0000

TypeScript has taken the development world by storm. No wonder it has over 15 million weekly downloads on npm. But what is TypeScript, and what do you need to know about it?

In this article, I am going answer those questions. By the end you'll have a grasp of the following:

What TypeScript is
Main pillars of TypeScript
Main features of TypeScript
Why you should use TypeScript
TypeScript basics to get you started

First, let's address the elephant in the room.

What is TypeScript?

TypeScript is a programming language built and maintained by Microsoft.

It is a superset of JavaScript that adds strong type checking and is compiled into plain JavaScript code.

Being a superset means that TypeScript has all the features of JavaScript as well as some additional features.

TypeScript comes with features such as better development-time tooling, static code analysis, compile-time type checking, and code-level documentation.

Don't worry if you have no idea what any of this means. I'll explain all of it in this article.

All these features that come with TypeScript make it the perfect programming language for building large-scale JavaScript applications.

Main pillars of TypeScript

TypeScript is built upon three main pillars – namely the language, the compiler, and the language service.

TypeScript Language

This consists of the syntax, keywords, and type annotations of TypeScript.

TypeScript syntax is similar to but not the same as JavaScript syntax.

TypeScript Compiler

The compiler is responsible for compiling Typescript code into JavaScript.

In reality, what happens is not actually compiling but transpiling.

Compiling means that source code is transformed from a human-readable format to a machine-readable format, whereas transpiling is transforming source code from one human-readable format to another human-readable format.

The TypeScript compiler is also responsible for erasing any information related to types at compile time.

Types are not valid features in JavaScript. And since TypeScript has to be compiled to plain JavaScript, anything related to types has to be erased before it can become valid JavaScript ready to be executed by the browser.

The TypeScript compiler also performs code analysis. It emits errors and warnings if there's reason to do so.

Language Service

The language service is responsible for collecting type information from the source code.

This information can then be used by development tools to provide IntelliSense, type hints, and refactoring alternatives.

Main Features of TypeScript

Type Annotations in TypeScript

Type annotation simply means assigning a type to a variable or function.

const birthdayGreeter = (name: string, age: number): string => {
  return `Happy birthday ${name}, you are now ${age} years old!`;
};

const birthdayHero = "Jane User";
const age = 22;
console.log(birthdayGreeter(birthdayHero, 22));

In the above example, we define a function that accepts two parameters name and age. We assign name to the type string age to the type number

We can also assign types to the return value of a function. In this case, our function returns a value of the type string

const birthdayGreeter = (name: string, age: number): string => { };
Typescript would yield an error if we passed in arguments of different types than ones we expect

Structural Typing in TypeScript

TypeScript is a structurally typed language meaning that if two elements have corresponding and identical features then they are considered to be of the same type.

Type Inference in TypeScript

The TypeScript compiler can attempt to infer the type information if there is no specific type assigned. This means that TypeScript can assign a type to a variable or function based on its initial values or usage.

Type inference usually happens when you initialize variables, set default values, and determe function return types

const platform = 'freeCodeCamp';
const add = (a: number, b: number) => a + b

The variable platform in the above example is assigned the type string even though we didn't explicitly do so and the return value of the function add is inferred the type number.

Type Erasure in TypeScript

TypeScript removes the type system constructs during compilation:

Input

let x: someType;

Output

let x;

Why use TypeScript?

Type checking and static code analysis

This reduces the overall errors in your code because TS will warn you when you wrongfully use a certain type.

It also reduces runtime errors and because of static code analysis, TypeScript will throw warnings about typos and such. So this means fewer errors which could potentially mean less testing.

Type annotations can act like code documentation

Type annotations help us to understand what type of arguments a function expects, for example, and what it returns.

This makes code more readable and makes it easier for others and for us to understand what the code is supposed to do.

Another advantage of TypeScript is that IDEs can provide more specific and smarter IntelliSense when they know exactly what types of data you are processing.

How to Get Started with TypeScript

Let's begin by installing the TypeScript package. Here we have two options: we can either install it globally so we can use it on any project in the system, or we can install it to use on the specific project we're working on.

You can install TypeScript globally by running this command:

npm install -g typescript

If you don't wish to install globally you can just run this:

npm install --save-dev typescript

In the local installation, TypeScript is installed as a Dev-dependency because we use it for development. It has to first compile to JavaScript before it can be used in production. The browser can't execute TypeScript.

After installing TypeScript, we need to initiate a new project. You can do that by running the following command:

tsc --init

This command initiates a new tsconfig.json file in the root directory of the project. This config file comes with all the configuration options we have for using TypeScript in a project.

All the compile options for a particular project can be specified in the tsconfig.json file under the compileOptions key.

The file comes with some config options by default but you can add more options to the project as needed. You can comment out or delete unused compiler options.

Built-In Types in TypeScript

Typescript comes built-in with all the primitive types in JavaScript like string, number, and boolean.

The types can then be assigned to variables to specify what data type should be assigned to the variable. This is called type annotation.

const myName: string = 'Joel';
const myAge: number = 99;

TypeScript annotations are not always necessary because TypeScript automatically infers the type of a variable based on its initial value or usage. Therefore the following would also be valid TypeScript code:

// myName is inferred type 'string'
 const myName = 'Jonathan';

Arrays in TypeScript

To specify the type of an array you can use the syntax string[] or number[]. This effectively means 'array of strings or array of numbers'.

You'll also see people use the syntax Array<number> or Array<string> which means the same thing.

Union Types in TypeScript

Union types allow us to define several types that may be assigned to a variable. For this, we use a pipe | to specify the various types.

const someValue: number | string = value;

By default null | undefined can be assigned to any variable but TypeScript comes with the strictNullChecks compiler option which does not allow assigning both to a variable.

Functions in TypeScript

Functions can also receive type annotations. However, with TypeScript functions, they can only receive the specified parameters. Nothing more nothing less.

function introduction(name: string, age: number): string {
    return `Hello, my name is ${name} and I'm {age} years old`
}

Function parameters receive normal type annotation.

TypeScript functions must also specify the return data type. In the case where a function returns nothing, we can use void type as the return data type.

We can also use the ? operator to specify parameters that are optional. In this case, Typescript won't complain if the parameter is not passed on the function call.

We can also assign default values to parameters just like we would in normal JavaScript.

const introduction = (name: string, age: number, job?: string = 'developer'): string => `Hello, my name is ${name} and I'm ${age} years old. I work as a ${job}`

Notice that in this example I used the JavaScript arrow function syntax and specified that the job parameter is optional and assigned a default value 'developer' to it.

The `any` type in TypeScript

In TypeScript, every variable whose type cannot be inferred becomes implicitly the type any.

Any is typically a wild card type that literally means 'whatever type'. We can also explicitly assign the type any to a variable.

However, any typings are usually considered to be problematic.

Typescript comes with the noImplicitAny compiler option which raises an error when we assign the type any to a variable or expression.

How to Create Your Own Types in TypeScript

TypeScript offers a way for us to define and use our own types for inputs. Here we can describe the exact type that is acceptable for a particular input.

We can use the type keyword to define our own types.

type Operator = 'multiply' | 'add' | 'divide';

Now the Operator type can accept either of the values. Notice how we use the OR operator | to create a union type. In this case, any variable assigned the type Operator can accept any of the three values.

TypeScript Example Project

Let's now use this knowledge to create a simple calculator program. A user can only enter one of three operations - add, multiply, or divide. If you want to, take a moment and try to attempt this then you come back and follow along.

Hopefully, you tried it on your own. The program may then look something like this:

type Operation = 'multiply' | 'add' | 'divide';

const calculator = (a: number, b:number, op: Operation): number => {
    switch(op) {
        case 'multiply':
            return a * b;
        case 'add':
            return a + b;
        case 'divide': 
            if (b === 0) return 'Can't divide by 0;
            return a / b;
        default:
        return 'Operation unknow';          
    }
}

Try to read the above code and see if you can figure out what is going on.

We can also create custom types using the interface keyword. Interfaces allow us to define the property and type of an object. An interface can have the ability to extend another interface.

interface Employee {
    name: string,
    title: string
}

interface Manager extends Employee {
    meeting: (topic: string) => void
}

Here we define an interface Employee which has two properties - name and title, both of which are of the type string.

We then use this interface to create another interface Manager which has the same properties as the Employee interface but with a meeting method.

At the outset, I mentioned that Typescript is a structurally typed language. This means that if an element has the same properties as another, they're both of the same types.

The same is true with interfaces. If an object has the properties of an interface then it has the type of the interface. Such an object can have additional properties as long as some properties match those of the interface.

We can now use our defined interface such as:

const newEmployee: Employee = {
    name: 'Joel',
    title: 'FrontEnd Developer'
}

So far we've seen that we can create our own types using the type and interface keywords. But, what is the difference between the two?

The most notable difference is that defining multiple interfaces with the same name will result in a merged interface. On the other hand, defining multiple types with the same name will result in an error indicating that the name is already declared.

Wrapping Up

Typescript has a lot of features that can't simply be exhausted in this article. I just highlighted a few of the features that may be helpful to understand in order to get started working with it.

You can learn more about Typescript by reading the documentation.

If you liked this article, consider following me on Twitter or connecting with me on LinkedIn. I share content about programming and what am learning. Feel free to get in touch or share your thoughts regarding TypeScript in the comment section below.

How to add a video to your GitHub README

Joel P. Mugalu — Tue, 01 Dec 2020 11:05:48 +0000

As you might already know the version of Markdown that GitHub uses does not support adding videos. Although you might find work arounds if you search hard enough, the closest you'll get to is embedding a YouTube video in your markdown file. But what if you have a custom video? A video on your device?

Well, there's a workaround, it won't enable you to upload the video but you'll get the same results. The thing is GitHub READMEs work perfectly with GIFs. GIF is a bitmap graphical image format. So what you get isn't necessarily a video but the result is relatively similar.

Now all you have to do is obtain the desired video and use a tool such as CloudConvert to convert the video to a gif.

However, it's worth noting that the longer the video the bigger the size and you might experience some lagging depending on the type of video and the converting software used. Besides this you should generally get good results.

After converting the video to a GIF. All you have to do is create a GitHub repository with the same name as your GitHub username. For example my GitHub username is codingknite so the new repository would also be called codingknite.

Then simply add the GIF in your README.md file the same way you would add an image

![caption](link to image / GIF)

And that's all. Push your files to your GitHub account and you should have an impressive README.

Update

Recently, GitHub added support for different media formats. Therefore you do not need to use a third party converter to convert your video to GIF format.

With the latest update all you have to do is open your markdown editor in GitHub and just drag your media into the editor and it should be added to your README.

You can checkout mine to see what I chose. Feel free to also connect with me on Twitter or LinkedIn.

How to use tutorials effectively to learn how to code

Joel P. Mugalu — Mon, 30 Nov 2020 09:01:59 +0000

Tutorials are no doubt an incredible way to learn how to code. With the growth of popular websites such as YouTube, tutorials have become almost accessible to anyone.

This also means that most tutorials are free. They're also usually taught by industry professionals. On top of this, Tutorials tend to be shorter than courses and in most cases they get straight to the point.

But tutorials can be a double edged sword. So these advantages can very quickly become disadvantages. In fact if you've ever heard of the term "tutorial hell" then you know that tutorial is part of the name.

Without a proper strategy tutorials can lead one to a never ending path of watching tutorials.

The Essence of strategy is choosing what not to do

So in this article am going to discuss some practical ways that can help you learn how to code using tutorials.

Learn The Fundamentals

“As to methods there may be a million and then some, but principles are few. The man who grasps principles can successfully select his own methods. The man who tries methods, ignoring principles, is sure to have trouble” — Harrington Emerson

One of the most common things that can lead one to the path of tutorial hell is having knowledge gaps. Most tutorials do not cover fundamental concepts. They simply cover certain specific aspects such as "How to build an x project with an x framework".

So embarking on a tutorial like that can introduce you to fundamental concepts that you were not aware of. Naturally you'd watch other tutorials to understand these concepts. And the cycle goes on and on.

Before watching a tutorial be sure that you know the fundamental concepts of the subject at hand.

Besides tutorials, fundamentals are important to any developer. Frameworks come and go but the fundamentals remain. I'd recommend taking a course that teaches the fundamentals of programming in general.

One such course is the famous CS50 offered by Harvard University. This course is amazing and I can't recommend it enough. I'm sure of this because I took the course myself. It's free and coming from Harvard you know the quality is top notch.

Take Notes

Another very effective yet underrated way to learn from tutorials is to take notes. Being in the digital age, it's not uncommon for people to take digital notes using iPads and laptops.

Where as I myself do this from time to time I still vouch for the good old hand written notes. I strongly believe that you're most likely to remember what you wrote in a hand taken note written in a physical notebook than in an digital one.

Don't afraid to pause the tutorial and write something that you feel is worth remembering. The beauty of writing notes is that it allows you to express yourself in the way you understood what you've learnt. So what you're writing is what you understood not what the instructor said.

Taking notes is especially important because of our forgetful nature. The moment your brain takes in information. That information is discarded as soon as possible unless you practically apply it.

Which brings me to the next point.

Build. Build. Build.

You'll agree with me that the only thing that makes a tutorial worth your time is how practical it is.

The idea of building a project during the tutorial is what drives you to watch it.

Looking at it from another perspective, that is the general goal of a tutorial. It's meant to show you how to apply a certain skill. So unless you build. You will never benefit from tutorials.

If you struggle with getting ideas for what to build then look up some articles on project ideas.

You can also decide to add more features to the already existing application built in the tutorial.

The key to learning with this method though is to make sure you implement these features by yourself. That's the only way to apply what you've learnt.

Be sure to use google to the fullest when you get stuck. Lots of questions have already been answered including the one you might have. The chances of you having a completely new question are probably 1 of 100.

However, it's worth noting that these days many tutorials urge you to code a long. It's believed that this is supposed to help you with retention.

I personally have mixed feelings about this.
In my opinion I don't see how doing the same exact thing that another person is doing step by step word for word is supposed to help you learn a new skill. But that's just me. Choose to do what works for you.

If you learn better by coding along then code along. If not I'd suggest watching the entire lecture and trying to re-implement what the instructor did on your own. This is most likely to test the degree to which you understood what was being taught.

Spaced Repetition

Spaced repetition is a learning method where the learner continues to revise what they learnt over a spaced amount of time.

So if you learn something new today then you would come back to revise it say after 3 days and then repeat that over and over again.

This learning method is very effective especially when you're learning theoretical over practical things.

Like I mentioned earlier, your brain discards unused information. So revising that information after a certain period is a good trick to get the knowledge to sink in.

Since you're most unlikely to apply everything learnt from a tutorial at once, this method can help and I've found it to be effective myself.

Speaking of learning methods, another great one is the Pomodoro technique. Now this more of a time management technique. The technique uses a timer to break down work into intervals, traditionally 25 minutes in length, separated by short breaks.

One of the reasons you're most likely to forget or even get bored during a tutorial is if you keep taking in information for very long periods of time.

I have also found this method to be very effective and I tend to cover more material when using this technique. Try it out and see if it would work for you.

Share What You Learn

This is standard and you've probably heard that the best way to learn is to teach. This is absolutely true and I can't recommend it enough.

The moment you learn something, it's true that there is a ton of people out there who don't know what you just learnt or those that know of it but don't fully understand it.

But this step involves more than just sharing what you feel you understood. A certain amount of effort is required. There's a saddening amount of mediocre articles out there that tend to lead to more confusion than clarity.

Blogging requires research in order for you to make sure that what you understand harmonizes with what should actually be understood.

Other than that blogging is a tremendous way to learn. And you don't need to build your own blogging site from scratch. There are lots options out there. You can use platforms like Medium, Dev, and recently an interesting one came up called Hashnode. Now I'm also new to Hashnode myself but I've heard only good things about it. So shoot your shot. There's no harm.

Beware of Tutorial Hell

Now this is the biggest challenge that one could face from trying to learn from a tutorial. That of finding oneself in a never ending loop of watching tutorials endlessly.

I already covered part of why one might end up in tutorial hell. That of poor knowledge of the fundamentals.

However, the thing is that even those with a good grasp of the fundamentals can end up in tutorial hell. So what is the problem?

The thing is that most people who end up watching tutorial after tutorial simply doubt that they have enough knowledge to build a project on their own.

And so tutorial hell is simply like a quest for adequate knowledge.

Couple this with the fear of failure of starting an own project and you'll see people find comfort in tutorial hell.

The simple way out of tutorial hell is simply building a project on your own. That's all really.
There's no magic pill and no you're not under a curse. All you got to do is build one project on your own, then another and soon enough you'll find that you can't even sit through a tutorial. And that's a good problem.

Leaving tutorial hell can be as easy as child deciding to get up and walk instead of being carried around all day. But it can also be as hard as a child deciding to leave the comfort of being carried around all day and starting walking alone.

So ultimately how you view tutorial hell and the amount of effort required for you to leave it is ultimately upon you.

A practical step could be starting small. Whether you fear to fail or think you don't know enough - start small. Build small projects and then project from there.

Another thing is to try to figure out how you learn best. You see tutorials aren't the only way to learn. If all attempts fail then trying switching up your learning methods.

You could try reading articles instead or taking a course or even reading books. The possibilities are endless.

Whichever way works for you, find that and stick to it.

I hope you found this article helpful. If you did feel free to share it with a friend. If you would like to say hi to me then feel free to do so via my Twitter or LinkedIn accounts. I also have a GitHub😉

The Stack Data Structure Explained In JavaScript

Joel P. Mugalu — Fri, 13 Nov 2020 08:35:08 +0000

Algorithms and Data Structures are the heart and soul of computer science and programming. They are part of the fundamentals of computer programming. In this series, I'm going to make an effort to explain the most commonly used data structures in JavaScript.

To begin with a data structure is simply a format of organizing and storing data.

In this article we're going to cover the stack. By the end of this article you'll have understood what a stack is, the methods used on a stack and how to implement a stack by yourself in JavaScript.

What Is A Stack?

A stack is a last in first out type of data structure. This means that the last element to go in a stack is the first to come out.

You can think of it as a stack of books. In order to obtain the last book in the stack, you must first remove all the books on top. And when you wish to add a book, you simply put it on top.

There are four main operations that we can perform on stacks.

Adding to the stack. For this operation we use the push method which adds an item on top of the stack
Removing from the stack. For this operation we use the pop method which simply removes the item on top of the stack and returns it.
Checking the item on top the stack. For this method we use the peek method to simply return the item on top of the stack.
Lastly, we can check for the size of the array.

In JavaScript, arrays give us the properties of a stack. With arrays we can push, pop and check the length of the array.

A classic example that we can use to see how we would use a stack in JavaScript is the palindrome checker. A palindrome checker is a program that checks whether a word is spelt the same way both backwards and frontwards. For example ana is a palindrome and so is racecar and bob. Here is the implementation in JavaScript.

const checkPalindrome(word) {
    const stack = [];
    let reverseWord = '';

    for (let x = 0; x < word.length; x++) {
    stack.push(word[x]);
    };

    for (let y = 0; y < word.length; y++) {
    reverseWord += stack.pop();
    }

    return reverseWord === word ? `"${word}" is a palindrome` : 
    `${word} is not a palindrome`;
}

console.log(checkPalindrome('racecar')) // "racecar" is a palindrome

In the example above we used an array as a stack and to it we added every letter in the word. We then removed every last element in the array or stack in this case in order to create the reverse word. And lastly we checked whether the reversed word was the same as the word we received in the function.

When it comes to the time complexity of a stack, the worst case scenario of searching a stack is O(n) because the bigger the stack the more time we'll take searching it. The best case scenario of searching a stack is Ω(1) assuming the item we're searching for is the first item in the stack and the average case is O(n)

When it comes to deletion and insertion both the best, worst and average cases are O(1) simply because we can only add or remove one item on the stack

If you would like to further understand Big O notation, space and time complexity then consider reading this article.

In most cases we would never need to create an own stack, arrays suffice well enough. But in order to further understand stacks, we will implement a stack from scratch in JavaScript.

In this example we will use JavaScript classes to create the stack. I will implement the stack then explain what's going on. You can also try to figure out what's going on.

class Stack {
    constructor() {
        this.length = 0;
        this.stack = {}
    }

    push(value) {
        this.stack[this.count] = value;
        this.length++;
    }

    pop() {
        const result = this.stack[this.length];
        length--;
        delete this.stack[this.length];
        return result;
    }

    size() {
        return this.length;
    }

    peek() {
        return this.stack[this.length - 1];
    }
 }

Our stack will be an object and we will use the length variable to keep track of the size of the stack.

The push method accepts the value we want to add on the top of the stack. Instead of indices, each value will be paired to a property in which case the property will be the position of the value in the stack. This will allow us to still use the concept of indices to access items. Finally we increment the length.

The pop method does not accept an argument because it simply returns the item on top of the stack. Since the length keeps track of the stack's size, the length will represent the last item in the stack. We store the last item in the result variable before deleting it from the stack.

The size method is probably the simplest because all we do is simply return the length of the stack. That will be it's size.

And lastly the peek method simply returns the item on top of the stack. We subtract one from the length because the first item in the stack is stored at position 0 not 1. So whereas the length might be for example five, the first value is at position 0 and the last at 4.

Now let's see if indeed our stack works.

const myStack = new Stack();
myStack.push(12);
myStack.push(75);
myStack.push(28);
myStack.push(91);
myStack.push(19);
myStack.push(36);
console.log(myStack.size()) // 6
console.log(myStack.pop()) // 36
console.log(myStack.size()) // 5
console.log(myStack.peek()) // 19

Conclusion

This was a simple implementation of the Stack Data Structure in JavaScript. I hope you learnt something. I put this code in a repository on github in case you would like to refer to it later.
If you have any feedback or would just like to say hi feel free to do so via my Twitter account @joelpmugalu

All the resources you need for Frontend development

Joel P. Mugalu — Sun, 01 Nov 2020 16:21:16 +0000

I've read many articles about resources for Frontend development. But every time I needed a resource that I'd read about, I had to go through the hustle of looking for the article again.

To solve this problem I decided to put all these resources in one place. Somewhere I could just look if I needed a resource.

I also decided to include some resources for those that are learning new technologies.

In the list I included resources for HTML, CSS, JavaScript, React, Icons, Illustrations, fonts and many more.

I combined all these resources and put them in this Repository.

I also made the repo open source so that others can include resources that I didn't.

Feel free to check it out and contribute to it if you can. I hope it helps you out.

Data Types and Operators in JavaScript: Everything You Need To Know

Joel P. Mugalu — Mon, 24 Aug 2020 14:07:41 +0000

According to Wikipedia:

A data type or simply type is an attribute of data which tells the compiler or interpreter how the programmer intends to use the data. This data type defines the operations that can be done on the data, the meaning of the data, and the way values of that type can be stored.

In simple terms a data type is a type of value. A data type tells the programming language how the value is meant to be used and the operations that can be carried out on it.

In this article we are going to explore all the details of different data types in JavaScript and the operations that can be carried out on them. This is an in depth article so you might want to grab a pen and paper.

JavaScript has two main types of data types: primitive data types and objects. Let's explore both of them.

Primitive Data Types

A primitive data type can be understood as a basic data type in JavaScript. Some primitive data types only accept a set value(s) and others accept certain type of values.Primitive data types are immutable. That means their values cannot be changed or mutated. I'll further explain this in the article.
Let's look at the primitive data types in JavaScript.

Numbers

Values of the number type are numeric values written as usual numbers like 12, 67 and 85.

JavaScript uses 64 bits to store a number. Given 64 bits JavaScript can represent up to 18 quintillion numbers. You don't have to remember that number. The point is we can write very huge numbers with JavaScript.

All operations carried out on whole numbers are guaranteed to be precise and accurate.

console.log(12 + 67) //79
console.log(1234597654 + 987654132476 ) //988888730130

Sadly that is not the case with floating point numbers. In JavaScript floating point numbers are numbers that have decimal points.
Take a look at this example:

console.log(0.1 + 0.2 === 0.3) //false
console.log(0.1 + 0.2) //0.30000000000000004

Looking at the example you would expect that adding 0.1 + 0.2 would result in 0.3. Instead we get 0.30000000000000004. Why is that?

In real math we have an infinite set of numbers to work with. In JavaScript we only have 64 bits (18 quintillion numbers). Therefore we cannot precisely represent floating point numbers with only 64 bits. When you add 0.1 + 0.2 JavaScript returns the closest available number. This doesn't need to get you worried unless you want to calculate the precise age of the universe.

Let's look at the operations we can carry out on numbers.

Arithmetic Operations

You've probably guessed already that we can carry out arithmetic operations on numbers in JavaScript.

Just like usual math we can add, subtract, multiply and divide numbers. The symbols used to carry out these operations are called operators. The + operator is used for addition, - for subtraction, * for multiplication and / for division.

console.log(1 + 2) //3
console.log( 10 - 5) //5 
console.log( 2 * 100) //200
console.log(120 / 2) //60

However, when working with operators we must look out for something called operator precedence.

According to Mozilla Developer Network (MDN):

Operator precedence determines how operators are parsed concerning each other. Operators with higher precedence become the operands of operators with lower precedence.

Let's look at this code

console.log(2 + 2 * 10 === 40) //false
console.log(2 + 2 * 10 === 22) //true

Operations in JavaScript do not occur from left to right. Rather some operators take precedence over others. So 2 + 2 * 10 is not 4 * 10 = 40 but 2 + 20 = 22 because * has a higher precedence than + so that operation happens first.

If you would like to carry out arithmetic operations left to right, you can do so with parenthesis.

console.log((2 + 2) * 10 == 40); //true

You can read more about operator precedence here.

Special Numbers

As it turns out, not all numbers have a numeric value in JavaScript. JavaScript has three special numbers. Infinity for positive infinities, -Infinity for negative infinities and NaN which means "Not a Number".
These special numbers are used to represent foul operations.

console.log(1 / 0) //Infinity
console.log(-1 / 0) //-Infinity
console.log(0 / 0) //NaN

NaN is of special interest because it's quite the trouble causer. It's a number that means "Not A Number". This can be very confusing at times.

According to MDN:

There are five different types of operations that return NaN:

Number cannot be parsed (e.g. parseInt("blabla") or Number(undefined))

Math operation where the result is not a real number (e.g. Math.sqrt(-1))

Operand of an argument is NaN (e.g. 7 ** NaN)

Indeterminate form (e.g. 0 * Infinity)

Any operation that involves a string and is not an addition operation (e.g. "foo"/3)

You can test for NaN using the method Number.isNaN(number)

So, simply put NaN is a numeric value that represents an invalid result.

Let's look at another data type.

Strings

A string is another data type in JavaScript. Strings represent text. This text can be enclosed in either single quotes '', double quotes "" or back ticks ().

console.log("This is text");
console.log('This is also text');

Interestingly though, strings are not just text in JavaScript. Behind the scenes each letter in a string is a number. If you've ever heard of the ASCII standard then this is it. Each character in a computer has a number assigned to it. For example lower case a is 65 and uppercase A is 97. Same with all the other letters and characters.

However, the ASCII standard was limited in the number of characters it could represent. This led to the birth of the Unicode standard. With the Unicode standard, just about any character can be represented with a number. Even Emojis. That was just an interesting fact.

We can't carry out subtraction, multiplication and division on strings. Doing so would yield to NaN which we just talked about.

console.log("No" * "Arithmetic") //NaN

But, we can use the addition operator on strings. This is called string concatenation. This way we can join two strings into one.

console.log("Yes" + " Concatenation") //Yes Concatenation

We can also use bracket notation to access individual characters in a string. But we cannot change these characters. As I mentioned earlier this is because primitive data types are immutable. If we try to mutate strings, JavaScript will throw an error if in strict mode

'use strict'
let myUsername = "codingknite";
console.log("myUsername[0]") //c
myUsername[0] = 'k'; // Throws error

Boolean

Boolean is another data type in JavaScript with only two values written as true and false. Logical operations can be carried out with Boolean. Think of boolean as answers to yes or no questions that we ask JavaScript.

console.log(5 > 2) //true
console.log(10 > 120) //false

There's quite a number of operators we can use to carry out operations on boolean.

Equality Operators

Equality operators are used to compare whether or not two values are equal to each other. The result is a boolean value.

The (==) operator denotes "equal to"
The (!=) operator denotes "not equal to"
The (===) operator denotes "strictly equal to"
The (!==) operator denotes "strictly not equal to"

console.log(2 == 2) //True 
console.log("apple" == "pineapple") //false
console.log("JavaScript" === "JavaScript") //true
console.log("JavaScript" !== "Java") //true

There is one value in JavaScript which in not equal to itself. And it's none other than NaN

console.log(NaN === NaN) //false

According to MDN:

Unlike all other possible values in JavaScript, it is not possible to rely on the equality operators (== and ===) to determine whether a value is NaN or not, because both NaN == NaN and NaN === NaN evaluate to false. Hence, the necessity of an isNaN function.

The issue with NaN not being equal to NaN is historical. Just Accept it as a fact of life. If you're interested in reading more about NaN and why it's not equal to itself, consider reading this article

There is a one difference between the equality operator and the strict equality operator which i'll get to in a second.

Comparison Operators

Comparison operators are used to compare two or more values. The result is either of the boolean values.

These are the most common comparison operators.

The ( > ) operator is used to denote "greater than"
The ( < ) operator is used to denote "less than" console.log(5 > 3) //true console.log(10 < 15) //false
The ( >= ) operator denotes "greater than or equal to"
The ( <= ) operator denotes "less than or equal to"
The ( == ) operator denotes "equal to"
The ( === ) operator denotes "strictly equal to"

Logical Operators

Logical Operators are used to compare two conditions. JavaScript has three main logical operators.

AND Operator

The AND operator written as && compares two values and returns true if both values on the left and right equate to true. Otherwise is returns false.

console.log(5 > 2 && 10 >8) //true
console.log( 5 > 2 && 8 > 10) //false

OR Operator

The OR operator written as || compares two values and returns true if either value on the left or right equates to true. Otherwise it returns false.

console.log(5 > 3 &&  10 === 10) //true
console.log(10 === 12 && 120 < 100) //false

NOT Operator

The NOT operator written as ! flips any value given to it. In other words !true becomes false and !false becomes true.

console.log(true !== true) //false
console.log("apple" !== "pineapple") //true

Automatic Type Coercion

When JavaScript receives the wrong values, it changes the data type of the resulting value.

Let's Look at some code

console.log(12 * '3'); //36
console.log("50" - 12); //38
console.log(true + 12); //13
console.log("Thirteen" * 2); //NaN
console.log(false + 1); //1

As we see in the code above JavaScript secretly changes the types when it receives unusual values. The string '3' on the first line becomes the number 3. Same as the string "50". On the third line true becomes 1 and false becomes 0.

Type coercion is what creates the difference between the equality operator and the strict equality operator.

console.log(1 == '1') //true 
console.log(1 === '1') //false

The equality operator carries out type coercion on the values it receives where as the strict operator does not carry out type coercion. This is why most JavaScript developers consider it a good practice to use the strict equality operator. To avoid unnecessary type coercion.

Let's now look at the last two primitive data types

Null

Null is a primitive data type in JavaScript used to represent an intentionally missing value. Null has only one value and that is null. Null is a falsy value because it returns false in all boolean operations

console.log(!null) //true
console.log(null === null) //true

Undefined

Undefined is also a primitive data type in JavaScript and just like Null it has only one value undefined. It represents an unintentionally missing value. Undefined is also considered a falsy value because it returns false in boolean operations. When comparing null and undefined it's very important to look out for the equality and strict equality operators.

console.log(null == undefined) //true
console.log(null === undefined) //false
console.log(!undefined) //true

There you have it. These are the primitive data types in JavaScript. But that's not all.

Truthy and Falsy Values

Falsy values are values that are return false in a condition.
JavaScript has 5 basic falsy value: undefined, null, 0, '', NaN

Truthy values are all the other values that are !falsy values (>_-)

let age = 23;
if (age || age === 0) {
    console.log('Age is defined'); 
} else {
    console.log('Age is not defined');
}
// returns 'Age is defined';

Try to figure out why the above code logs 'Age is defined'

Unary Operator

A Unary operator is an operator that accepts only one value.

The best example of a unary operator is the typeof operator which returns the type of value specified. In fact we can use this operator to check out all the data types we've talked about.

console.log( typeof 'text') //string
console.log( typeof 25) //number
console.log( typeof true) //boolean
console.log( typeof false) //boolean
console.log( typeof null) //object
console.log(typeof undefined) //undefined

If you noticed, the typeof null returned object. I will explain why that is so in the next article.

Binary Operators

Binary Operators are operators that carry out operations on two values

console.log(1 + 1) //2
console.log(12 - 5) //7

Ternary Operator

The ternary operator is used to check a condition and return a value based on whether or not the condition is true. It's like a quick if statement.

The basic frame of a ternary operator is:

condition ? return value if true : return value if false

Let's look at this code

15 > 12 ? console.log("15 is greater than 12") : console.log("15 is less than 12"); // 15 is greater than 12

Well, that's everything you need to know about primitive data types.
What is the second type of data types in JavaScript?

Objects and Functions

Now i don't know about you but that's enough data types for one day. In my next article am going to talk about objects and everything you need to know about them. So stay tuned.

However, if you're interested I've written a blog post on functions. You can check it out here if you wish.

SUMMARY

So, what have we seen.

A data type is basically the way a programming language understands the data it receives telling it how the data is to be used.
Operations are basically the way we use the data received *There are two types of data types

Primitive Data Types
There are five main primitive data types

Numbers
- Numeric Values
- Arithmetic operations like Addition, Subtraction, Multiplication and division can be carried out on them.
Strings
- How text is represented
- + can be used on them for concatenation.
Boolean
- Used for logical operations -Two values written as true and false
Null
- Intentionally missing values
- Only one value null
- Falsy value
Undefined
- Unintentionally missing values
- Only one value undefined
- Also a falsy value

Conclusion

I hope you enjoyed this article. If you would like to follow my coding journey and be the first to know when I release a new article, be sure to follow me on Twitter

If you could start learning to code from zero....what would you do differently?

Joel P. Mugalu — Tue, 07 Jul 2020 20:04:45 +0000

A Comprehensive Introduction To Computer Algorithms

Joel P. Mugalu — Tue, 07 Jul 2020 11:33:50 +0000

Problem solving makes up a huge part of computer science. In fact computer programming is basically the process of solving a problem with code. These problems are solved by means of algorithms. An algorithm is a step by step instruction to solve a problem.

We implement algorithms in many aspects of our lives even without knowing it. For example if I wanted to make a cup of tea, I would take the following steps.

Walk to the kitchen
Find the electric kettle
Grab the electric kettle
Walk to the sink
Fill the kettle with water to capacity
Boil the water to 100 degrees
Put tea into teapot and add hot water
Pour tea from teapot into teacup
Add 3 teaspoons of sugar
Stir the sugar
Drink Tea

Perhaps I missed something or I took weird steps but that's not important. What I've written above is what is commonly known as pseudo code. Its good to write pseudo code before solving an algorithm just to give you an idea of the steps you would take to solve the algorithm.

The above steps are used an an example in this article. A human would take the above steps to make tea without a problem. But that is not the case with a computer. In order to write an algorithm similar to the above we would need to use building blocks for writing algorithms.

Functions

Functions are like verbs or actions that tell a computer what to do. Functions are usually written for actions that would need to be repeated several times. For example in our steps we have several actions like walk boil grab fill etc. For such it would be ideal to write a function other than define them everywhere they need to be used.
After writing the function we would simply call the function where it needs to be used.

When writing functions, it's always good to keep the following in mind

A Function should do only one thing. Like walk boil or fill. A function should never carry out multiple actions
Its a good practice to try to keep functions as short as possible. A good rule of thumbs is the 10-10. 10 functions in a program and 10 lines in a function. Of course this is not a commandment but it's something good to keep in mind.

I wrote an article about functions in JavaScript. Feel free to check it out here

Conditions

Conditions are like branches that tell a computer what to do under certain conditions or at certain situations. Going back to our tea making algorithm, how would we know that the water has boiled to 100 degrees? In such a situation we could use a condition to check whether the water is 100 degrees and then stop boiling. Conditions start with the if keyword and they can be nested with the else if keyword to check for multiple conditions. Its also possible to set a default outcome if none of the conditions are met using the else keyword.

In pseudo code code, this would be written as:

if (water degree < 100 degrees) {
  //continue boiling 
} else if (water degree == 100 degrees || water degree > 100 degrees) {
 //stop boiling 
 //water is ready
}

Notice that I used symbols such as < and ==. These are called operators.

Loops

A loop is a cycle that repeats something again and again. There are 3 basic types of loops.

While Loop

while (condition) {
// Execute this code
}

The while loop is a loop that repeats a cycle until a certain condition is met. At every iteration the loop checks whether the condition is true or false. If the condition evaluates to true the loop runs again. Else if the condition evaluates to false the loop stops iterating.

In our tea making algorithm we could use a while loop to implement step 5 to fill the kettle to capacity. Note that this is a repetitive activity because we are continuously filling the kettle with water. But that only stops when the kettle is a at it's maximum water holding capacity.
Using a while loop the pseudo code for that step could be written:

while (water level <= maximum kettle capacity) {
    // Continue filling kettle with water
}

Do.....While Loop

do {
 //Carry out once
} while (condition)

The do...while loop is quite similar to the while loop. The only difference is that it must run at least once. Unlike the while loop which checks the condition before running, the do...while loop runs then checks the condition. Like the while loop, it stops running once the condition evaluates to false.

We can also use the do...while loop to implement step 5 of our tea making algorithm. This is because we by all means need some water in order to carry out step 6 which is boiling the water.
Using a do...while loop the pseudo code would be written:

do {
  // add some water
} while (water level <= maximum kettle capacity)

For Loop

for (variable i; i < numberOfTimes; i++) {
//Code for each iteration
}

A for loop is another type of loop. A for loop works best when we want to repeat an action a certain number of times. Its body has three parts each separated by a semicolon.

In the first part a counter variable is initialized. This variable keeps track of the loop.
The condition goes in the second part of the loop. This part of the loop tells the loop when to stop. The loop checks this condition before iterating again.
The third part of the loop updates the counter variable.

In our tea making algorithm, we can use the for loop to implement step 9. This is because in this step we are adding sugar to the tea a total of 3 times
Using a for loop the pseudo code would be such as follows:

for (variable i = 0; i < 3; i++) {
   // Add sugar  to the tea
};

Boolean

Boolean are like questions that we ask a computer and we get a yes/no answer or more accurately true/false. We use boolean to check for certain things.
In our tea making algorithm we could use boolean to check whether we added enough sugar to the tea.
Using boolean this would be implemented In pseudo code such as:

if (tea has enough sugar) {
return true;
}
return false;

Conclusion

The goal of this article was to give a gentle introduction to algorithms and provide a sort of mental model for how to solve algorithms and how to use the building blocks. As you might have noted the code in the examples is not language specific. I would advise you to do some research on how each of these building block is implemented in your programming language. The syntax changes but the general idea remains. Feel free to reach out to me or connect on Twitter @codingknite

JavaScript Functions Broken Down

Joel P. Mugalu — Mon, 18 May 2020 16:27:03 +0000

A comprehensive introduction to JavaScript functions

Functions are a very important concept in JavaScript. Functions can be compared to building blocks. So Understanding them is one step toward true JavaScript mastery. In this article i am going to go over the basics of functions.

What is a Function?

Think of functions as vocabulary in human language. Different vocabularies help us to avoid repeating the same words. For example, Instead of saying “human being between the age of 13 and 19”. You can use one vocabulary, teenager. That gives you the freedom to use the word teenager to form different sentences without having to confuse yourself.

Functions follow a similar pattern, they allow us to wrap a whole program into one single expression. We can then call this expression our new vocabulary. We can then use it anywhere in our program to do different things.

Why Use Functions?

The ability to wrap a whole program into one single expression is very powerful.

It can make our code readable and maintainable.
In case we have to make changes we can do that in only one place. The place where we defined what the function should do and not where we used it.
Functions help us to avoid repetition. We define once and use in different places. This can save us from lots of bugs.

Function Declarations

JavaScript allows us to declare functions using the function keyword. This is then followed by the name of the function.

function functionName(parameter) {
    // Your Code Here
};

Functions accept parameters and arguments. Think of parameters as the ingredients of the function. These ingredients are what we tell the function to receive. Then inside the curly braces ({}) we define what the function does with these ingredients. Parameters are only assigned a value during the function call. The values that a function receives when being called are then the arguments.

When the return keyword is used inside a function, the function stops execution at that point. The result of the function execution is then assigned to the function caller. Functions without the return keyword are assigned the value undefined. The function is then called or invoked by typing the function name with parentheses.

function testFunction() {
    return "Hello World";
};
testFunction(); // returns hello world

function addTen(number) {
   return number + 10;
};
addTen(20) // returns 30

In the above examples the testFunction does not accept any arguments. It simply returns the string Hello World. It is called by typing the function name and using parenthesis after that.

The second function addTen accepts one argument and adds 10 to it. Functions can accept an unlimited number of parameters.

When a function receives more arguments than preset parameters, it uses the received arguments and ignores the rest. When it receives less, it assigns undefined to the parameters that did not receive arguments.

We can do different things with functions. For example we can assign them to variables and we can also use variables as parameters.

function isLegal (name, age) {
    if (age >= 18) {
        return `Hey ${name}, You're Legal`
    } 
  return `Hey ${name}, You're still a kid`;
};

let johnLegal, janeLegal;
johnLegal = isLegal("John", 25);
janeLegal = isLegal("Jane", 14);

johnLegal; // returns "Hey John, You're Legal"
janeLegal; // returns "Hey Jane, You're still a kid"

The example demonstrates a function isLegal which accepts two arguments. Pay particular attention to how the functions were assigned to the variables. Also look out for ow the variables were passed as function parameters. I suggest you try this out on your own.

Function Expressions

Function expressions is another way of creating functions in JavaScript.
Consider the following example.

const greeting = function (name) {
return `Howdy ${name}`;
};
let greetJohn = greeting("John");
greetJohn; // returns Howdy John

The example above demonstrates a function expression.The variable greeting is assigned the value of a function. This time we did not use the function keyword. Rather we declared a variable and assigned it the value of a function.

Arrow Functions

ES6 or ES2015+ introduced a new way of creating functions. This form is function expression is quite different. Instead of using the function keyword. We use an equal sign (=) after the function name then declare the function parameters. We then use a equal sign (=) and a greater than sign (>) together such as (=>). The following block is where we define what the function will do.

const functionName = parameters => {
    // Execute this code
}

Its can be thought of as “This function takes these parameters and executes this code”
Consider the following example

const isLegal = (name, age) => {
    if (age >= 18) {
        return `Hey ${name}. You're Legal`
    } 
return `Hey ${name}. You're not Legal`
};

let denisLegal = isLegal("Denis", 21);
denisLegal; // returns Hey Denis. You're Legal

One plus with arrow functions is that they provide a shorter way of writing functions. They can allow us to omit the parentheses after the equal sign if the function takes only one argument. The return keyword can also be omitted if the function returns something immediately.

const weatherCondition = weather => `It is currently ${weather}`;

There is one main difference between function declarations and function expressions. Function declarations begin with the function keyword. But, function expressions are functions assigned to a variable.

Hoisting

Hoisting means that variable and function declarations are taken on top of their scope before execution. This makes them available to be used before the execution phase.

In JavaScript, all function declarations and arguments are stored in one object. The Variable object. This object is created before code execution, during the creation phase. During the creation phase all function declarations and arguments are stored into memory.

The creation phase happens in three steps

Code is ran line by line for function declarations and function arguments.
The variable object is then created. All the function declarations and arguments in the program are stored inside this object.
The function declarations then stored in the variable object point to the function.

Hoisting is step 2 and 3. Hoisting makes it possible for us to use function declarations and define the function later. Once the function is defined anywhere in the program it is stored in memory. So it’s available even before the program starts executing. It’s important to remember that hoisting only works for function declarations. With function expressions, we must define the function first then use it.

The following example demonstrates hoisting of functions.

let fullName = "Thanos";
let age = 33;
introduction(fullName, age); // returns Hey everyone. I'm Thanos and I'm 33
function introduction(name, age) {
    return `Hey everyone. I'm ${name} and I'm ${age}`
};

Notice how we were able to use the introduction function before declaration. That is because the function was hoisted.

Good Practices

By now you must be very excited to start using functions right away. But there are some safe practices when using functions.

A good rule of thumbs is to try and keep your functions as short as 10–15 lines. Try to write functions that complete only one task.

Remember functions are like vocabulary, their to avoid repetition. So if you find yourself repeating one thing twice then consider writing a function for it.

Conclusion

Functions are a very powerful programming paradigm in JavaScript. Practice is key in understanding them and how they work. Try solving algorithmic challenges with functions. That’ll help for sure. If you’d like to connect with me i am very active on Instagram and Twitter. Do reach out.

Forem: Joel P. Mugalu

Developer Stories: How Justin became a game dev by accident

TypeScript: Getting Started

TypeScript has taken the development world by storm. No wonder it has over 15 million weekly downloads on npm. But what is TypeScript, and what do you need to know about it?

What is TypeScript?

Main pillars of TypeScript

TypeScript Language

TypeScript Compiler

Language Service

Main Features of TypeScript

Type Annotations in TypeScript

Structural Typing in TypeScript

Type Inference in TypeScript

Type Erasure in TypeScript

Why use TypeScript?

Type checking and static code analysis

Type annotations can act like code documentation

How to Get Started with TypeScript

Built-In Types in TypeScript

Arrays in TypeScript

Union Types in TypeScript

Functions in TypeScript

The any type in TypeScript

How to Create Your Own Types in TypeScript

TypeScript Example Project

Wrapping Up

How to add a video to your GitHub README

Update

How to use tutorials effectively to learn how to code

Learn The Fundamentals

Take Notes

Build. Build. Build.

Spaced Repetition

Share What You Learn

Beware of Tutorial Hell

The Stack Data Structure Explained In JavaScript

What Is A Stack?

Conclusion

All the resources you need for Frontend development

Data Types and Operators in JavaScript: Everything You Need To Know

Primitive Data Types

Numbers

Arithmetic Operations

Special Numbers

Strings

Boolean

Equality Operators

Comparison Operators

Logical Operators

AND Operator

OR Operator

NOT Operator

Automatic Type Coercion

Null

Undefined

Truthy and Falsy Values

Unary Operator

Binary Operators

Ternary Operator

Objects and Functions

SUMMARY

Conclusion

If you could start learning to code from zero....what would you do differently?

A Comprehensive Introduction To Computer Algorithms

Functions

Conditions

Loops

While Loop

Do.....While Loop

For Loop

Boolean

Conclusion

JavaScript Functions Broken Down

A comprehensive introduction to JavaScript functions

What is a Function?

Why Use Functions?

Function Declarations

Function Expressions

Arrow Functions

Hoisting

The `any` type in TypeScript