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.

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 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.

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.

In this blog post, you’re going to discover exactly how to create a single timer in JavaScript.

So without further ado, let’s get started…

Single Timer

As the name says, a single timer is a timer that only executes once. In JavaScript, we don’t really use the term ‘single timer’ but instead it’s called a ‘timeout’.

So how do you create a timeout?

To create a timeout, you call the function with the name ‘setTimeout’. Now, this is not the end, because this function also takes at least 2 kinds of arguments, these are…

1. handler – This is the function handler that gets called once the timeout gets executed. (This is often called a ‘callBack’)
2. timeout – This is the number of milliseconds that it will take before the timeout elapses and the previous ‘callback’ handler gets executed.

Now I know that this sounds pretty cool through text, but let’s actually take a look at a piece of code that showcases the example explained above.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Amazing Timer</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>

function sayHello() {
    console.log("Hello There My friend :)")
}
const seconds = 3 * 1000 // This converts the milliseconds into seconds.
setTimeout(sayHello, seconds)

Now once you run this code in your browser and watch the console screen. You should see the following message appear after 3 seconds.

Now, this example is of course, pretty basic and generic. So let’s add some spice by making the timeout run whenever we click a button on the screen, and let’s make it so that we can adjust the timeout seconds with an input field.

To achieve this, let’s add the following html and JavaScript

<input type="number" id="seconds" value="3">
<button id="timerButton">Click Me For Fun :)</button>

function sayHello() {
    console.log("Hello There My friend :)")
}

const timeInput = document.querySelector('#seconds')
const timerBtn = document.querySelector('#timerButton')

timerBtn.onclick = () => {
    const seconds = parseInt(timeInput.value) * 1000
    setTimeout(sayHello, seconds)
}

Assignment Take the code above and make your project out of it.

So as you can see, it’s pretty easy to create a quick timeout timer and even make a little project around it, I hope this post was useful to you and that you learned from it as well.

Your friend,

Michiel Arkema

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

The post How To Create A Timer In JavaScript? appeared first on Michiel Arkema's Blog.

That’s why in this blog post, you are going to discover exactly what they linear search algorithm is, how it works and how you can use it.

For the following example, we’ll use JavaScript, but you can use it for any programming language you desire.

What is the Linear Search Algorithm?

Well let’s imagine you have a list of numbers ranging from 10 to 100.

const numbers = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]

Now, let’s say you want to search for the number 60 and retrieve its index number. Well, there are two easy ways to achieve this, we can either grab the number directly by its index (assuming we know the index number already) or, we can perform a linear search that goes over each number in the list, compares it with our target number and return it’s index if it matches.

How to execute the Linear Search Algorithm?

So to execute a linear search, we have to create an iterator that iterates based on the length of the list. To do this, add the following code…

// Let's get the length of the list first.
const length = numbers.length

// The iterator
for(let i = 0; i < length; i++) {
  // Now, let's check if the value matches the number 60 or not.
  if(numbers[i] == 60) {
    return i;
  }
}

How does it work?

Now, you might still be asking yourself, how does it work and why is it linear?

The reason why it’s a linear search is because it walks over the list from beginning to end without skipping over any.

So in this example, it will start at the number 10, then it will go over each element and ends with the number 60 (since that’s our target number).

Are there any drawbacks to using this?

Yes definitely!

The drawback that you need to be aware of when using this algorithm and that it is not suited for large collections due to its time complexity.

It’s perfect for smaller collections.

The post Linear Search, The Simplest Search Algorithm appeared first on Michiel Arkema's Blog.

And that is web development, especially front-end web development.

Why is Web Development so important?

The main reason why knowing how to develop websites is so important is that there’s a 99% chance that during your career, you will have to work with either websites or web applications that use the same technology.

Next to that, it is highly recommended that you design & develop your portfolio website to build credibility and showcase your skillset on the internet (especially for Job recruiters).

How do I start learning Web Development?

The foundation of web development exists out of three different language that you need to master.

1. HTML
2. CSS
3. JavaScript

No, you do not have to learn those simultaneously, that’s a huge mistake that most beginning developers make when starting to learn web development or any programming language.

You start with one and one only (in this case HTML), and you master it to the point that you are having dreams of it. Then after you’re good with HTML, you switch over to CSS and then JavaScript.

The post Web Development, and why Every Programmer Should Learn it? appeared first on Michiel Arkema's Blog.

Re: The #1 secret about ‘If’ statements in coding that everyone should know… NOW!

Hey There Fellow Coders,

So as a software developer, you most likely are quite familiar with the all-famous ‘If’ statement.

But are you exactly aware of how it works in the background? Well, no matter the answer that you just gave, let’s keep reading.

So just to make everything as obvious as possible, let’s take a look at what a simple if statement looks like. And for the following examples, let’s use the Python programming language.

Now let’s digest what is happening in the code above.

1. We created a simple Boolean variable
2. We check if the value is True, and if so, it will print out a very happy message

But would would happen if the value would be False instead?

Well it’s simple, nothing would happen. Why? Well because our if statement is only executed when the value is True.

Now, let’s do something fun, let’s negate the if statement but putting the ‘not’ keyword in front of it. (Don’t make fun of my drawing skills oke?)

Now, Let’s see what would happen if we were to execute the code.

The Result will look like this:

So now you are probably thinking, why do we get a result when our value is set to False?

Well the answer is simple, by using the ‘not’ keyword in front of condition. We checked if the value is False, and because it is indeed False, the check returns True.

Get it? If not, let’s take a look if we would execute the same condition and print out its value.

As you can see up here, the condition returned true. Why? well its simple, we checked if the variable was not True, and we did so by putting the ‘not’ keyword in front of it.

So What Is The Big Magic Secret Then?

Well, the secret is simple but still many don’t know it. An ‘If’ Statement only executes if the condition is True. If it’s False, the statement will be skipped.

So hopefully you discovered something new from this post and if you did, I recently started a public FaceBook group where I will be sharing 8 years of experience in programming with you. Sounds cool? Then join NOW!
Click on this link: https://www.facebook.com/groups/confidentcoderscommunity

Your Friend And Coaching Buddy: Michiel (Coding Dude) Arkema

The post Discover This #1 Secret About The ‘If’ Statement In Coding… And Improve YOUR Coding Skills Immediately! appeared first on Michiel Arkema's Blog.