You’re coding this amazing new project and are busy implementing all the cool features.

But after a few days, you slowly start to lose track of the progress and which features you should add first.

This means that you get confused, frustrated, and angry because it seems that you’ll never be able to finish the project.

That’s why if you read this blog post till the end, you’re going to discover the exact framework called MoSCoW, that professional developers use to prioritize the requirements of their projects in a way so that they never lose track of it ever again.

First, let me tell you a quick story about how I learned this framework and what it has done for me.

“Oh my god, this is the best thing ever….” I said while almost falling off my chair from excitement.

As my teacher just explained a framework that would help me become a way better software developer.

You see, ever since I started my coding journey at the age of 14.

I worked on hundreds of projects that helped me gain so much knowledge and understand deeper concepts of software development.

But unfortunately, almost all of them never saw the end of the day.

The reason for this was that I never knew how to prioritize the features that would go into my project in a way so that I knew exactly what to do next.

Instead, I always jumped straight in (I still sometimes tend to make this mistake to this day) with pure excitement and write the code right away.

This has caused me to abandon 90% of all my projects because, after a few days, I was completely lost and had zero clue about what I had to do.

Then once my teacher showed us the framework that I’ll be sharing with you today.

I knew immediately that it’ll solve the problem that I constantly was facing.

The framework is called MoSCoW, and professional software development teams use it to prioritize the requirements (features) of their coding project.

The framework exists out of 4 steps:

1. What are the Must-Haves?
2. What are the Should Haves?
3. What are the Could Haves?
4. What are the Won’t-Haves? (This time)

Now, let’s dive into the tactics.

What are the must haves?

First of all, you need to write down which requirements your project must have for it’s first released version.

For example: login, register, profile page, and the database tables.

At the end, it all depends on your project.

Step #1: What are the must haves?

First of all, you need to write down which requirements your project must have for its first released version.

For example, login, register, profile page, and database tables.

In the end, it all depends on your project.

Step #2: What are the should haves?

The second section is where you will list all the should haves. 

These are usually the requirements that are still important for the initial release of the project, but it won’t matter so much if they are left out and implemented later.

Step #3: What are the could haves?

Third is the should haves. I usually list the features here that would be nice to have for the initial release, but would only be added if there’s still enough time. Otherwise, I’ll add them during a later version release.

Now last but not least, the won’t haves (This time)

The reason why I wrote “This time” is because these features will eventually be added. Just not during the upcoming version release.

TIP: As you release different versions of your project, should-haves from the previous release could turn into the must-haves and could-haves can become the should-haves.

So that’s it for this blog post. I genuinely hope that you learned from it and that it will simplify future project creations for you.

Oh and remember, your dream career is just one step away!

Btw, I recently opened a FREE giveaway where 5 lucky winners will receive two weeks of video materials for FREE, from my JavaScript Mastery Blueprint.

It’s a must-have for anyone who wants to become a professional JavaScript developer.

You can join here: https://michielarkema.com/jsmb-giveaway

The post How To Prioritize The Requirements Of Your Coding Project The Right Way! appeared first on Michiel Arkema's Blog.

One is the == operator, and the other is the === operator.

But what are the differences between the two and when you should choose which?

Well, if you read this blog post till the end, you’re going to discover exactly that.

The Equal-To Operator

The first and most common operator is the equal-to aka the == operator.
It allows you to compare two values with each other and receive a Boolean as a result.

Example:

const name = "Jack";
console.log(name == "Jack"); // This should print out 'true'.

The operator takes two values, one on the left and one on the right.

But there’s a caveat with this operator. And that it doesn’t matter if the values are not of the same Datatype.

Example:

const num = 1;
console.log(num == "1"); // It would still print out 'true'.

But why is that?

Well, the equals-to-operator checks both values loosely. Meaning that it won’t care if both data types are not the same. All that matters is that the value provided has the same character.

This is not the case with the next operator.

The strict-equality operator

Just like the equal-to operator, it checks if both values are the same and if that’s the case. It will either return true or false.

But here’s where this operator is different.

For starters, the operator uses three = characters. ===

Instead of ‘loosely’ comparing the two values, it will strictly compare them.

This means that the datatypes of both values must be the same as well as the values.

Example:

const num = 1;
console.log(num === "1"); // Now, it would print out 'false'

This feature allows you to write safer code and more accurate code that’s also easier to read.

But how can I choose which?

Personally, it depends on your preference as a developer. I’ve seen many people use the == operator and others use the === operator.

It also depends on how strict you want your code to be.

Although I do have to mention that the === operator allows for more concise and safer code because it will prevent errors like trying to manipulate a number value while it’s a string. (Like in the example shown above.)

So that was the post. You should now have a clear understanding of what the differences are and when to choose which.

Let me know in the comments down below if you found this post helpful.

Oh and remember, your dream career is just one step away!

Michiel Out!

Btw, I recently opened a FREE giveaway where 5 lucky winners will receive two weeks of video materials for FREE, from my JavaScript Mastery Blueprint.

It’s a must-have for anyone who wants to become a professional JavaScript developer.

You can join here: https://michielarkema.com/jsmb-giveaway

The post What’s The Difference Between The equal-to & The strict-equality Operator In JavaScript? appeared first on Michiel Arkema's Blog.

So that’s why when you read this blog post till the end, you’re going to discover exactly how to use this amazing feature in CSS.

First of, let’s use the following HTML & CSS to showcase this pseudo class in full action

<ul class="numbers-list">
  <li class="number">1</li>
  <li class="number">2</li>
  <li class="number">3</li>
  <li class="number">4</li>
  <li class="number">5</li>
</ul>

.numbers-list {
  width: 5rem;
  margin: auto;
  padding: 1rem;
  background-color: coral;
  list-style: none;
  text-align: center;
}

.number {
  background-color: yellow;
  margin-top: 0.5rem;
  padding: 0.5rem;
  font-size: 2rem;
}

Above, we have a simple unordered list of numbers with some basic CSS styling which looks like this:

Now as you can see, each number is styled perfectly which is all dandy but imagine we want to exclude the first number from being styled.

We could of course create a new CSS class and style it individually but that’s pretty much overkill. Instead, let’s use the :not pseudo-class to tell CSS not to style the first element in the numbers list.

To achieve that, do the following:

.number:not(:first-child) {
  background-color: yellow;
  margin-top: 0.5rem;
  padding: 0.5rem;
  font-size: 2rem;
}

Now, the page should look like this.

So what did we do up there?

First, we added the :not pseudo-class, and inside of that we told CSS to exclude the first child in the list. Hence the first number is no longer styled.

But what if we wanted to exclude the second number instead?

You can do that this way:

.number:not(:nth-child(2)) {
  background-color: yellow;
  margin-top: 0.5rem;
  padding: 0.5rem;
  font-size: 2rem;
}

Instead of using the :first-child pseudo-class, we now used the :nth-child which allows us to pass in an index number of one of the child elements.

The web page now looks like this…

Pretty neat ha?

Well, that’s the end, if you learned something from this short post, let me know in the comments down below.

And remember, your dream career is just one step away!

Michiel Out!

PS – I’m currently hosting a FREE Giveaway where I will give 5 lucky winners 2 weeks’ worth of video materials from my JavaScript Mastery Blueprint. So don’t miss out on it and sign-up here

https://michielarkema.com/jsmb-giveaway

The post How To Use The :not Pseudo Class In CSS appeared first on Michiel Arkema's Blog.

Well if you read this blog post till the end, you’re going to discover exactly that!

Before we can compare the two with each other, we first need to understand the meaning of each of them.

What is a framework?

A framework often provides ready-made components and interfaces along with their implementations. Frameworks often can work independently and have a particular start-up entry method that gets executed when the framework is being initialized.

Here are a few examples of popular frameworks in the programming space:

• Angular
• .NET Framework
• PHP Laravel
• Python Django

But what is a library then?

Just like a framework, a library usually contains ready-made classes and interfaces but they aren’t being initialized by default. It requires the developer to add the library to his/her project and call the provided classes individually.

Here are a few examples of popular libraries in the programming space:

• React.JS
• JQuery
• Newtonsoft.JSON
• Bootstrap CSS

What is the key difference?

The key difference between the two is that with frameworks, the developer usually installs the framework first, and then builds his/her application on top of that.

But with libraries, the developer already has an existing application where he/she will install the libraries using a package manager.

Frameworks are in full control of your application while libraries are not, they just add extra functionality that the developer can access.

So that’s it for today’s blog post, I hope you found it useful and that you learned from it.

If you did learn from it, let me know your opinion in the comments and perhaps even share your insights about the topic.

Remember, Your dream career is just one step away!

Your friend: Michiel Arkema

Oh, and btw, we also have a free coding secrets newsletter where I will be sharing behind-the-scenes secrets about coding. You can join it here: https://michielarkema.com

The post Frameworks VS Libraries, What Is The Difference? appeared first on Michiel Arkema's Blog.

That’s why if you read this blog post till the end, you are going to discover exactly how to use the Local Storage API to it’s fullest potential.

A while ago, I was working on a personal web application project that used normal HTML, CSS, and JavaScript on the front end. And PHP on the back end. I don’t remember exactly what I was creating anymore, but it required heavy use of saving user input data.

At the time I thought it was the best idea to use a MySQL database to store all the data, so I created the corresponding tables, wrote the queries, and started testing the application. Everything worked fine but I quickly discovered the data I was saving, was pretty useless for my database because all I used it for was to show it on the screen of the client.

So I started to search for an alternative and I came across a web page called javascript.info and which listed a special page referencing the Local Storage API.

The Local Storage API, as the name suggests, allows developers to store individual data on the client’s browser. So that only that specific client, can access that piece of data. Even if the user closes the browser or restarts his/her entire computer, the data will still persist.

Once I read the page, my ADHD brain got super hyped and I immediately started to code it into my web application, tested it, and saw that it worked amazingly.

So now, let’s take a quick look at the strategy of what you can do with the Local Storage API

• Adding data to the storage
• Retrieving data from the storage
• Removing data from the storage

Adding data to the storage

The first part of course is adding data to the storage so let’s do that now.

Adding data is done by a method called ‘setItem’. It takes both a key and value.

localStorage.setItem("country", "The Netherlands");

Once added, the data will now stay persistent even if we would close our browser or restart our entire computer.

Retrieving data from the storage

In the example above, I mentioned that we add data by using a key and a value. The reason for this is that once we want to retrieve a specific value, we use its designated key to retrieve it.

const country = localStorage.getItem("country");
console.log(country); // This should print out "The Netherlands"

Now we aren’t entirely dependent on using the ‘getItem’ method. We can also access the key by accessing it as an object.

const country = localStorage.country;
console.log(country); // This should print out "The Netherlands"

Pretty neat ha?

Removing data from the storage

Obviously, a data storage is is not complete without being able to remove data.

localStorage.removeItem("country");

Just like with retrieving the data, we can also remove it by using object like access.

delete localStorage.country;

Note

Both the key and value can only be of the string data type. This means that if you add a number, it will automatically be converted to a string.

And in the case that you want to store a list, object, or table. It would be best if you converted it to JSON before adding it to the storage. You do that as follows…

const numbers = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
localStorage.setItem("numbers", JSON.stringify(numbers));

So that’s it for this post, I hope you learned something from it and that it was clear enough for you to understand.

Feel free to leave a comment behind telling how useful it was for you, or maybe you even have some extra information that you would like to share.

Don’t forget, your dream career is just one step away!

Michiel Out!

Oh and btw, I’m currently opening 5 FREE spots in my brand new coaching program where I take complete beginners and turn them into coding beasts. So if you want to claim that exclusive spot, click the link down below.

https://michielarkema.com/software-developer-accelerator

The post How To Use The Local Storage API In JavaScript appeared first on Michiel Arkema's Blog.

That’s why if you read this blog post till the end, you will discover exactly how to pick the color pallet for your design so that you never get frustrated with colors ever again.

Introducing to you my 60-30-10 color pallet framework that will make designing a hundred times easier.

It’s been a few years since I started creating websites for myself and I’ve always enjoyed every part of it but the design. Like oh man, the design part always got on my nerves because I don’t have a super good eye for it.

Then one afternoon while I was scrolling YouTube for design-related videos, I came across a guy called Jesse Showalter who was running a channel specifically aimed toward web design. And the video he posted was about the color pallet rule named “60-30-10”. At first I was pretty skeptical by its name but I decided to see what was going on, I’m glad I did because that one video changed the way I design my web pages forever.

Ever since, I’ve bee using that same framework for every single design and I’ve never had problems with designing a web page ever again. Now, I must admit that to this day, I’m not the best at coming up with great designs on my own,

But I do consider myself “good” enough to the point where the designs don’t look like some 2001 website with 70 different colors which causes you to get color-blind.

So here are steps I follow when choosing the colors:

1. Where to pick the colors?
2. Choosing the main design color (60)
3. Choosing the color for sections & blocks (30)
4. Choosing the color for buttons (10)

Where to pick the colors?

I know there are dozens of different places where you can pick colors, but my favorite website got to be https://mycolor.space Once you’ve picked a specific color, it will generate dozens of different templates that you can choose from.

Choosing the main design color (60%)

We first start by picking the main color for our design which we will take up 60% of our design (Hence its called 60). This is mainly used for the background, which is usually a whiteish or grayish color, but you can choose any you’d like.

I personally always go for white because it matches almost any other color you throw into the design plus it always looks good.

Choosing the color for sections & blocks (30%)

The second color we pick will be used for 30% of our design. This means that it will be mainly used for sections and specific blocks.

PS- If your main color is greyish, then the color for sections & blocks could be a full white color.

Choosing the color for buttons (10%)

Now last but not least, we will pick the color for our buttons, aka call to action. This color should always stand out from the rest of the page.

The post The BEST Way To Pick The Colors For Your Design! appeared first on Michiel Arkema's Blog.

So that’s why if you read this blog post till the end, you will discover exactly how to create a simple login form using only HTML and JavaScript.

If you’ve been following me on Facebook for awhile, you are probably aware that I love telling stories about how I learned everything. So let me tell you a quick story about the first time I created a form for my website.

A few years back while I was in college, the teachers gave us the job to create our own portfolio website. Me of course with my ADHD getting all exited about it, I quickly created the website within an hour, once it was finished, I was so proud of myself that I had managed to create my very first website from scratch ever.

Now looking back at this memory, the website was the ugliest thing that I’ve ever seen but hey, it was pretty good for the time being. But the coolest feature that I had added was a little contact form where people could fill in their email address, their full name, and a short message that they wanted to send me.

Again, of course, me being super happy and hyper about it, I immediately shared my website with my classmates. Which turned out to be a horrible idea because that resulted in me getting thousands of spam messages sent to my email inbox through the little contact form.

Creating The Login Form

The creation of the login form is going to be split up into two parts. First, we will create the JavaScript code, and then as second, we will add the html.

Writing the JavaScript code

First, we will write the JavaScript code. So let’s assume that our login form has two input fields and a submit button. So let’s create the code based on that idea.

// To get started, let's retrieve the form element from our document.
const loginForm = document.querySelector("#loginForm")

// Now, let's grab the onsubmit event (That will run when we press the submit button).
// And add our own callBack handler to it. 
loginForm.onsubmit = (ev) => {
  // preventDefault will prevent the page from changing.
  ev.preventDefault();
  // All code in here will be executed when we press the submit button.
  
  const emailAddress = loginForm.elements.namedItem("emailAddress").value
  const password = loginForm.elements.namedItem("password").value
  
  console.log("Email Address: " + emailAddress)
  console.log("Password: " + password)
}

So in a nutshell, the code above will above will print out the values that we put in our form into the console, once we click the submit button.

PS – Put the JavaScript into a separate file with the name ‘script.js’.

Now, let’s add the HTML to the web page.

Adding the HTML

The second step is to add the html to our web page. Now this is very straight forward so you can literally just copy & paste the code below…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Awesome login form</title>
</head>
<body>
    <form id="loginForm">
        <label for="email">Email:</label>
        <input type="email" id="email" name="emailAddress" placeholder="email@website.com" required>
        <br>
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <br>
        <button type="submit">Click Here To Login</button>
    </form>

    <script src="script.js"></script>
</body>
</html>

Now when looking at the code above, you might be wondering… Michiel why did you add the script tag at the bottom of your body element?

Well, I did that because, in our JavaScript, we grab the form element from the HTML so we can access its input elements. If I would add the script tag before our form element, the JavaScript code would be executed before the form would be loaded onto the screen, which would result in an error.

So that’s it, you now know how you can quickly & easy create your very own login form using only HTML and JavaScript.

If you did found this blog post helpful, leave a comment down below saying how it helped you and your over al opinion about the post itself :).

And Remember, your dream career is closer than you think it is!

Michiel Out!

The post How To Quickly & Easy Create A Login Form With Html and JavaScript appeared first on Michiel Arkema's Blog.

But just because you set goals, doesn’t mean that you will achieve them either. So that’s why when you read this post till the end, you will know exactly what to do in order to achieve every single goal that you’re setting.

Aligning your mind with your goals

Once you have a clear image of what your goals are and what your life will be like in the future, the next step that you have to take is visualizing it.

Now as soon as I used the term “visualizing”, you are probably thinking about “Oh the law of attraction”.

Well the law of attraction does include visualizations but it makes you believe that you can achieve anything by just “imagining” it. This cannot be further from the truth, nothing will happen unless you take action upon it.

So the way that visualizing will work is to start taking action upon what you visualize so that you can achieve it.

Let me give you an example of how to visualize.

How to visualize?

The first step is to make sure that you’re alone in a room and nobody is going to disturb you for the next 5-10 minutes.

Step #2 – Take a comfortable position (preferably sitting) on either your bed or a chair. Close your eyes and take 4 deep breaths where you wait 3 seconds before exhalation and 2 seconds before the next inhalation. Upon each exhalation, loosen your muscles in your body.

This short but effective breathing exercise will put your body in a more calming and relaxing state of mind, which is super important for the next steps.

Step #3 – Now picture yourself living your dream life, or perhaps, having your dream career.

For example, if you want to work as a software developer for a big company, visualize yourself sitting behind the desk working on the computer. Make sure that your image is crystal clear so that it looks real.

Do this for the next 2-3 minutes before moving over to step four.

Step #4 – Now imagine yourself standing in front of a mirror and looking at your reflection. realize the achievements you made and the goals you conquered, smile at yourself, and be happy with the way you are living and your career.

If done correctly, you will feel a rush of happiness flow throughout your body. Use that happiness to move over to step five.

Step #5 – Now go back to the same visualization as you had during the third step but now, take that happiness from the previous step and put it into your current visualization. Feel the happiness that you’re having when you sit behind that desk, or when you’re standing on the balcony of your dream house.

You need to truly feel and live the experience like it’s actually true.

After doing this for around 3-5 minutes, you can open your eyes.

Why is visualization so crucial for your success?

Have you ever relived an happy or sad memory of something that you’ve experience in the past?

Well if so, you either probably got really sad or super happy about it. But you see, that’s where the magic lays. Your mind is the most powerful tool that every human being on planet earth posses, if you want, you can literally change your mood within a split second by just visualizing a happy or sad memory.

Now here’s the kicker, you can do the same thing but for visualizing how your dream life would look like if you achieve all your goals. By putting an image in your brain that looks so real, your subconscious mind thinks that it’s the actual life that you are living in the current moment.

That way, your body will start to take the action that it needs to life that live.

How do I know that this works?

That’s a funny story since I used to do it without knowing that it was called “visualization”. I always used to visualize myself becoming a professional software developer and getting multiple internships at specific government facilities in my country.

And guess what? everything that I visualized, I achieved every single one of.

That’s the power of visualization.

How not to visualize…

One of the biggest mistakes that people make while visualizing is that they visualize their journey.

But you must not do that, instead, you must visualize the moment when you’ve achieved your goals and are living your dream life or having your dream career.

I hope you find this post useful and if you did, leave a comment behind explaining how.

And remember, your dream career is closer than you think it is.

Michiel Out!

Oh and btw, if you want to join the confident coders community, join the Facebook group here https://www.facebook.com/groups/confidentcoderscommunity

The post The #1 Secret To Achieve Every Goal You’re setting appeared first on Michiel Arkema's Blog.

Now you might be wondering, bruh what is the difference between the two and when should I use which?

Well, no worries because when you read this blog post till the end, you will discover exactly the difference between the two and when to use which.

Enjoy the read

What is a variable?

I like to refer to a variable as a name that refers to a specific value. Let me give you an example.

Take my first name, which is Michiel. Now, how did we identify that this is my first name?
Simple, we call it the “first name” so that when someone asks me, “hey what is your first name?” I respond with, “oh my name is Michiel”.

In code this would look like…

let firstName = "Michiel"

Understand?

Let’s use another example but with that country that I’m from. I’m from the Netherlands so if someone asks me “Hello Michiel, where are you from?” then I would respond with “Oh, I’m from the Netherlands”.

So instead of the name being “first name” it now would be “home country”.

In code this would look like…

let homeCountry = "The Netherlands"

The cool thing about variables is that once we declared & assigned a value to it, we can still change it to whatever we want it to be. So let’s say that I would move to Germany, now, let’s change the value of my homeCountry variable after it’s initial assignment.

let homeCountry = "The Netherlands"

homeCountry = "Germany" // Now, the value will be 'Germany' instead of "The Netherlands".

I hope it makes sense.

Now let’s take a look at…

What is a constant then?

Constants are almost the same as variables, BUT, you cannot change their value after its initial assignment, and, you MUST assign the value immediately after its declaration.

In code, this would look like…

const homeCountry = "The Netherlands"

As you can see, instead of using the ‘let’ keyword (which represents a variable), we now use the ‘const’ keyword in our declaration. So now, if I wanted to still change the value after it’s initial assignment, we would get an error message saying…

// Error: Assignment to constant variable.

Of course, your error message could be different depending on the programming language that you’re using.

But when should I use which?

The answer to that is very simple, do you want to change the value later on in your project, or should be it always the same?

If you answered the first question, you should use a variable, but if you choose the second, then a constant will do the job for you.

Of course, in the end, you can still use variables for both situations but in terms of ‘best practice’, it is recommended that you utilize both.

I hope you learned something from this post and if you did, leave a comment down below and let me know what you though of it :).

Michiel Out!

Oh and btw, and I recently opened my first-ever coaching program to the public and I’m super excited about it. That’s why I’ve decided to allow the first 5 people who join to get FREE coaching, no strings attached.

You check out the program here: https://michielarkema.com/software-developer-accelerator

And in case you got any questions about it, email me at support@michielarkema.com or contact me on social media.

The post What Is The Difference Between Constants & Variables? appeared first on Michiel Arkema's Blog.

Well, if you read this blog till the end, you’ll exactly know why and how it does.

Increased skills in problem solving

Being a software developer means that it’s your job to solve problems (shocking ha). And to do so, you’ll have to start to develop a third eye for it.

You see, most people just suck at finding and solving problems, that’s why we have specific individuals like plumbers for example. Now I know that plumbing has nothing to do with developing software, but I hope you understand my point of view here.

But as you start coding and developing software, whether for yourself or a company, you’ll start to see that finding problems in real-world situations becomes way easier, and also finding a solution will be very easy for you to come up with as well.

Oh, and btw, being able to find problems and solve them can make you very successful, especially if it’s a common problem that many people struggle with.

Seeing physical objects in a different way

This one is honestly the strangest of all, let me explain.

Have you ever seen a lamp? Well what do you think when you see that lamp?

Normally, your answer would most likely be “Oh well it’s just a lamp, nothing special”. But when you’ve been coding for a pretty long time, you’ll start to see the lamp in building blocks.

Let me give you an example, you start to individually detect the foot, head, and body of the lamp along with its electrical wire. Not only that, you will start to imagine what it will look on the inside and if it runs on some sort of software or not.

But not only with lamps, you’ll start to have this with microwaves, coffee machines, and even your crusty toaster that hasn’t been cleaned for the last 2 years (ew)..

So yeah, I hope you learned something from this post and if you are already seeing these changes in your life, let me know down below in the comments :).

Michiel Out!

The post Why Being A Software Developer Will Change Your Life! appeared first on Michiel Arkema's Blog.