DEV Community: Kelsy Mnk

Vacation Coding Amnesia

Kelsy Mnk — Sun, 06 Aug 2023 23:01:06 +0000

As a programmer, taking a small vacation can prove useful for recharging your mind and body. However, stepping away from your keyboard for too long, can sometimes lead to experiencing a sense of disorientation and forgetfulness when you sit back at your desk and face lines of code that once felt familiar.

I made a mistake of taking a four-month vacation without planning a structured coding plan, and I returned to my desk feeling completely out of touch with the programming languages I had mastered. It was frustrating to see my skills had rusted, and it took me a while to regain my former programming prowess.

To prevent you from making the same mistake, I’d like to share some additional tips to help you avoid vacation coding amnesia.

Here is what I should've done 👇

1. Set Clear Objectives 🔍

Define your coding goals for the vacation period. Are you aiming to explore a new programming language, deepen your understanding of a specific framework, or work on a personal project? Clearly outline your objectives to give your coding plan a sense of direction.

2. Prioritize Learning Materials 📚

Identify learning resources that align with your objectives. This could include online tutorials, coding books, video courses, or coding challenge websites. Gather the necessary materials and save them offline if you'll have limited internet access during your vacation.

3. Allocate Time Slots ⏳

Dedicate specific time slots for coding practice each day. Whether it's a short morning session or an evening deep dive, having a set schedule ensures that coding remains a consistent part of your daily routine.

4. Choose Realistic Tasks ☑

Select coding tasks that match your skill level and the available time. Aim for a balance between challenging projects that push your boundaries and smaller tasks that allow for quick wins and a sense of accomplishment.
(Platforms like LeetCode, HackerRank, and CodeWars offer a variety of challenges). You can also engage in personal projects that intrigue you to make coding an enjoyable activity during your vacation.

5. Adjust Your Plan 🗓️

Be flexible and ready to adapt your plan based on the flow of your vacation. If you find that certain tasks or goals are unrealistic, don't hesitate to modify them to ensure a balanced and enjoyable experience.

6. Document Your Journey 📝

Keep a coding journal or digital notes to document your coding experiences during the vacation. This can serve as a valuable reference when you return and need to refresh your memory.

7. Celebrate Milestones 🎊

Acknowledge and celebrate your achievements, whether it's completing a challenging coding problem or successfully implementing a new feature in your personal project.

Conclusion

A structured coding plan is the key to staying connected with programming even while you're away on vacation. By setting clear objectives, allocating time, and choosing appropriate tasks, you can ensure that your coding skills remain sharp and ready for action when you return to your desk. Remember, a well-crafted coding plan not only safeguards against vacation coding amnesia but also transforms your leisure time into an opportunity for growth and skill enhancement.

Hope you enjoyed this article ❤️

Let me know if you enjoyed it by leaving a like or a comment :) or if there is a topic that you'd like me to write about.

Feel free to bookmark this if you'd like to come back at it in the future.

Thanks for your time

Getting started with JS loops

Kelsy Mnk — Mon, 26 Dec 2022 13:00:00 +0000

Loops are an essential tool in JavaScript that can greatly improve the efficiency and simplicity of your code, and are a key construct to master to become proficient in the language.

In this article, you are going to learn the three most important types of loops. You'll learn how they work and how you can apply them in your code.

Let's dive right into it, shall we? :)

Before we get started, I'd like to quickly talk about Control Flow Statement which is an important feature in the programming world. It will also help you understand loops more effectively.

What's a control flow statement ?🤔
As the name suggests, it allows you to control the flow of execution of your code. This will allow you to perform repetitive tasks such as loops or write complex programs that can adapt to different situations.

'For' loops 🔁

The for loop is a control flow statement in JavaScript that allows you to repeat a block of code a certain number of times. It is often used to iterate over the elements of an array or to perform a certain task repeatedly and is best suited for situations where you know exactly how many times you want to execute a block of code.

Here is the basic syntax for a for loop in JS

for (initialization; condition; increment) {
  // code to be executed
}

For example:

var timer = [4,3,2,1]

for(var i = 0; i < timer.length; i++) {
    console.log(`You have ${timer[i]} seconds left!`);
}

// Output: You have 4 seconds left!
//         You have 3 seconds left!
//         You have 2 seconds left!
//         You have 1 seconds left!

As you can see in the example shown above, we are displaying how many seconds we have left.

The code is simply saying:
'As long as the i variable is less than the number of elements that are inside of the timer variable, keep displaying what's inside the timer'.
In short, the i var represents the number of times the code has to iterate through the timer array.

Okay but..what if I don't know how many times I want to execute a block of code? Well, this is where the while loop comes in clutch! :)

'While' loops 🔁

A while loop is also a control flow statement that will let you repeat a block of code but an unknown number of times.
It has an indeterminate number of iterations and is best suited for situations where you don't know how many times you want to execute a block of code.

Here is the syntax for a while loop 👇

while (condition) {
  // code to be executed
}

The condition is a boolean expression that is evaluated before each iteration of the loop.
If the condition is true, the loop will continue to execute.
Else, if the condition is false, the loop will terminate.

Let me give you an example :)

var input = "";

while (input !== "stop") {
  input = prompt("Enter a word (type 'stop' to exit):");
  console.log(input);
}

In this example, the while loop will continue to ask the user for input until they enter the word "stop". The input variable is initialized to an empty string before the loop starts, and the loop condition is checked before each iteration of the loop.
If the value of input is equal to "stop", the loop will terminate, else the loop will continue to execute.

Great! We've learned that the while loop checks for the condition first before running. But one more thing..What if I'd like my code to run at least once, before checking for the condition? That's where the do..while loop comes in.

But, why would I need to run the code before checking the condition; you may ask. Well, let me give you a real-world scenario.

Real-world scenario

Suppose, you want to get a free trial of a music app first, then pay a month later.
By using the do..while loop, it would simply go like that: "Run the music app first, then check for the payment."
But if we use the while loop, the code will need to first check for the condition (in this case for the payment) meaning you can't get a free trial since you need to pay first.

You got it? :) If not, feel free to check this simplified youtube video 👈
Alright, now let's transform this example into code for a better understanding.

'Do..While' loops 🔁

The do...while loop is similar to a while loop, except that the loop body is always executed at least once, even if the condition is false. It is useful for situations where you want to ensure that the loop body is executed at least once before the condition is checked.

Example 💻

var musicAppPayment;

do {
  console.log("Here is your free trial<3");
} while (musicAppPayment <= 0);

//Ouput: Here is your free trial<3

Here, the code will run the 'free trial' first and then only after it has been run, will it check for the condition.
If the payment is less than 0, then terminate the program.

Summary

Loops are an essential tool in JavaScript that allows you to repeat a block of code multiple times, which can be very useful in a variety of situations. They can be used to iterate over the elements of an array, perform a task a certain number of times, repeat a task until a certain condition is met, or simplify repetitive code.

Hope you enjoyed this article ❤️

That's it! This was an introduction to JavaScript loops. Feel free to bookmark this if you'd like to come back at it in the future.

A new article on other types of loops is coming soon. If you are interested, you can follow me to get a notification when it's out :)

Let me know if you enjoyed it by leaving a like or a comment :) or if there is a topic that you'd like me to write about.

Thanks for your time,

Happy coding and Merry Christmas✨🎄🎅

Understanding JavaScript Promises👩‍💻👨‍💻

Kelsy Mnk — Mon, 19 Dec 2022 13:00:00 +0000

Promises are one of the most important features of JavaScript, they allow us to write cleaner code by reducing callback functions and give us the ability to perform asynchronous operations in a more linear fashion. Today, you are going to learn how promises work and how you can apply them in your code.

Let’s start, shall we? :)

What exactly is a promise ?🧐

A promise is an object that represents an asynchronous operation that hasn’t been completed yet, but is expected to provide a value sometime in the future. The promise object supports two properties: State and Result.

State & Result

A promise object has three possible states: Pending, Fulfilled and Rejected. When an asynchronous operation starts, a promise is created and then goes in a pending (working) state. While in a pending state, the result has no value; therefore is “undefined”.
If the async operation is completed successfully, the promise switches to a fulfilled state with a value as result. If the operation fails, the state switches to rejected with a reason.

Good to know 📌

A fulfilled value is passed on what we call an onfulfilled callback and a rejected reason is passed on an onrejected callback.

Are promises that useful? 🤔

Yes! Promises are handy in complex logic applications, they can easily handle multiple async operations and provide better error handling than callbacks. In short, they are the perfect choice for handling multiple callbacks at once.

Good to know 📌

If you ever find yourself having an unwieldy number of nested functions, so nested that it's mentally draining you, then you are probably in what we call the Pyramid of Doom also known as callback hell. At this point, you should probably think of using promises instead ;)

Here is what the pyramid of doom looks like 👇

Alriight enough with technical terms, let's take a real-world example to understand promises more precisely and then jump to the coding part right after :)

Real-world example 🐤
Suppose, you place an online order for a rubber duck. The order will be created and will start processing. (In this case, a promise is created and is on pending)

If the product is available, your order will get confirmed. (That's when the promise is resolved, in other words; fulfilled)

If the product is out of stock, your order gets cancelled. (In this case, as you might've guessed, the promise is unfulfilled and as a result, it's rejected)

Are you still following? Great, now let's code this for a better perception ;)

Coding session 💻

Before we dive in, let's just take a look at how you can create a promise. There are a few ways in creating one but the most common way is using the promise constructor. Also known as the executor function, the promise will take a function as an argument.

Example:

const promise = new Promise((resolve, reject) => {
   // Here is where the asynchronous operation starts.
      resolve('value');
});

What we did here was, create a promise that resolves with a value. In short, it is fulfilled.

Can you guess on how we can create a promise that rejects with a reason? Common give it a shot ;)

Here it is 👇

const promise = new Promise((resolve, reject) => {
    // Start of the async operation 
    reject('reason');
});

Good to know 📌

You can also create a promise that is already resolved or rejected using the Promise.resolve() and Promise.reject() methods.

For example:

const promise = Promise.resolve('value'); 

const promise = Promise.reject('reason');

Alright, now that you have an idea of how to create a promise, let's jump back to our real-world example :)

Back to our real-world example but with codes 🐤

//We are going to place an online order for our Rubber duck

function placeOrder(product) {
  return new Promise(function(resolve, reject) {
    if(product === 'Rubber Duck') {
      resolve('Confirmed order');
       }else { reject('Sorry your order has been cancelled');
    }
   })
  };

If your order is accepted, it will display the status of the order. If it's rejected, then that's probably the end of your code.

/* Let's assume your order has been accepted and display the status :) */ 

function orderStatus(order) {
    return new Promise(function(resolve) {
      console.log("Order is being processed");
        resolve(`Your ${order} has been delivered :)`);
     })
   };

Promise Chaining ⛓

One of the advantages of promises is that they can be tied together. This will let you create a chain of async operations where the output of one operation is passed as the input to the next operation.
You can chain promises using the Promise.then() method.

For example:

// Scenario with Chain promises

placeOrder('Rubber Duck').then(function(orderFromCustomer){
    console.log("Request received");
    let orderProcessed=orderStatus(orderFromCustomer);
    return orderProcessed;
}).then(function(orderProcessed){
    console.log(orderProcessed);
}).catch(function(error){
    console.log(error);
})

Here is the whole code 👇

//We are going to place an online order for our Rubber duck

function placeOrder(product) {
  return new Promise(function(resolve, reject) {
    if(product === 'Rubber Duck') {
      resolve('Confirmed order');
       }else { reject('Sorry your order has been cancelled');
    }
   })
  };

/* Let's assume your order has been accepted and display the status :) */ 

function orderStatus(order) {
    return new Promise(function(resolve) {
      console.log("Order is being processed");
        resolve(`Your ${order} has been delivered :)`);
     })
   };

// Scenario with Chain promises

placeOrder('Rubber Duck').then(function(orderFromCustomer){
    console.log("Request received");
    let orderProcessed=orderStatus(orderFromCustomer);
    return orderProcessed;
}).then(function(orderProcessed){
    console.log(orderProcessed);
}).catch(function(error){
    console.log(error);
})

// Output: Request received
//         Order is being processed
//         Your Confirmed order has been delivered :)

Error Handling

Error handling helps in managing errors and helps the program to resume without being interrupted. In JavaScript, we use Promise.catch() to catch errors. It only handles errors that may happen between .then() methods.

Perhaps an example might help :)

const promise = new Promise((resolve, reject) => {
    if(true) {
      resolve("It's workiiing!"); 
    } else { 
       reject("There is an error");
   } 
});

promise 
    .then(result => console.log(result))
    .then(result2 => {
         throw Error   // line 12
         console.log(result2);
}) 
    .catch(() => console.log('erroooor')); //last line

// Output: It's workiiing! 
//         erroooor

As you can see here, we've thrown an error on line 12 and normally, the program should've been interrupted. But the .catch() method on the last line was able to capture the error and log it to the console to make sure the program keeps running smoothly. (You can try to remove the last line and check if the program works)

Async / Await

Async/await is a syntactic feature that allows us to write asynchronous code in a more similar way to a synchronous function.

The Async keyword is what lets the JavaScript engine know that we are declaring an async function.

The await keyword makes the function pause the execution and wait for a resolved promise before moving on to the next line of code.

For example:

async function test() { 
    const value = await promise; 
// The code on this line will only be executed after the promise is resolved. 
}

Great, now one more thing☝️.

Async functions use try/catch statements for error handling.

How does it work?

Well, the code which we want to execute goes inside a try block and when performing that execution, if there is an error, it will go through the catch() block.

Let's take a look :)

async function test() { 
    try { 
        const value = await promise; 
       } catch (error) { 
// The code on this line is executed if the promise is rejected. 
}}

Conclusion

Promises are amazing! They are a core feature of JS that allows us to write async code more synchronously. Before promises, our code was full of confusing callback tricks and async.

They are ideal for managing multiple callbacks at once, error handling, executing async functions and many more.

Hope you enjoyed this article ❤️

Greaat, that was quite a lot of codes, congrats to you if you made it so far! Feel free to bookmark this if you'd like to come back at it in the future.

Let me know if you enjoyed it by leaving a like or a comment :) or if there is a topic that you'd like me to write about in the future.

Thanks for your time,

Happy coding and Merry Christmas✨🎄🎅

Thank you all✨

Kelsy Mnk — Sat, 17 Dec 2022 20:11:51 +0000

Wow a 100 followers already :o

I was hesitant to start writing blogs for about two months but after giving it a lot of thought, I realized that it was a win-win situation. Not only I’m gaining more knowledge by writing and documenting but I’m also sharing it with the community.

I started 10 days ago and it seems to be going pretty well so far:)
(I publish every Monday)

For those who don’t know me, I’m Kelsy, just your average 21y/o guy who’s also a self-taught front-end dev.

Anyway, I just wanted to give a huge thanks to all of my new followers:) You are all awesome!

Thanks for your time and Merry Christmas ✨🎄🎅

Understanding Map, Filter & Reduce functions.

Kelsy Mnk — Mon, 12 Dec 2022 13:00:00 +0000

If you still don't feel comfortable with these functions or simply need a refresher, well you are at the right place :)

Before we jump in, I'd like to talk about what these functions have in common. Can you take a guess? They are both referred to as Higher-Order Functions.

What's a higher-order function?

A higher-order function (HOF) is a function that can take another function as an argument or that can return a function as its result. All other functions are simply First-Order Functions.

Why use a HOF? 🤔

It allows us to keep our code DRY and more flexible. (Let me know if you are interested to know HOF more in-depth :-)

Alright, now that we have some background let's start, shall we?

.Map()

The map() method performs a callback function on each element in an array. It will return a new array from the returned values so that the initial array can stay unmodified.

Let's take a look :)

const test = [1,3,-4,5,9,2]
const newTest = test.map(function (x) {
      return x*x;
});
console.log(newTest);

// output: [1,9,16,25,81,4]

So what we did here was, multiply each number by itself inside the test array then return the value inside a new array.

Alright, now I'm sure we can write this function on a single line to make it a little bit cleaner :)

Cleaner code 👇

const test = [1,3,-4,5,9,2]
const newTest = test.map((x) => x*x);
console.log(newTest);

// Output: [1,9,16,25,81,4]

.Filter()

As the name suggests 'filter', it will allow you to filter a range of data based on the given conditions.

Similarly to the map function, the .filter() will also perform a callback function on each element in an array. Then, using a true or false condition, it will return a new array filled with elements that are true to that condition.

For example:

const score = [1,2,9,6,3,-8]
const newScore = score.filter(function (x) {
        return x%2 === 0; 
});
console.log(newScore);

// Output: [2,6,-8]

In this example, we wanted to filter out all the odd numbers and then return only even numbers.
Is 1 true to the condition? No, so don't return it.
Is 2 true to the condition? Yes, then return it.
And so on...

This function can also be written on a single line. Can you give it a shot? :)

.Reduce()

The .reduce() method iterates through an array and returns a single value.

It takes a callback function with two parameters (accumulator, currentValue) as arguments. The accumulator is the value returned from the previous iteration and the currentValue is the current element being processed in the array.

Let's take an example.

const numbers = [1,3,7,4,5]
const totalNumbers = numbers.reduce(function (acc, currVal) {
        return acc + currVal;
}, 0); //initializing the accumulator to 0
console.log(totalNumbers);

// Output: [20]

So here, we summed all elements of the array and then returned a single value (where the output is 20). In other words, reducing the array to a single value.

Great! Now that we've learned these functions, let's take a quick look at the summary :-)

Summary

.Map()

Performs a callback function on each element in an array.
Creates a new array from the callback function.
Does not change the original array.
Does not execute the function for empty elements.

.Filter()

Performs a callback function on each element in an array.
Creates a new array filled with elements that passed the true/false condition based on the given instructions.
Does not change the original array.

.Reduce()

Returns a single value (using the accumulator).
Executes a reducer function for an array element.
Does not change the original array.

Before we wrap this up, feel free to check in the comment for some additional information written by some awesome users from this community :) You can add some details too if you think I might've missed something ;)

Hope you enjoyed this article ❤️

That's it! This was a quick refresher for the map, filter & reduce functions. Feel free to bookmark this if you'd like to come back at it in the future.

Let me know if you enjoyed it by leaving a like or a comment :) or if there is a topic that you'd like me to write about.

Thanks for your time,

Happy coding :)

How does JavaScript work?🧐

Kelsy Mnk — Mon, 05 Dec 2022 18:18:39 +0000

There is nothing more exciting than learning to code for the first time. We get so passionate that we want to start building projects right away. However, we tend to miss the one thing that can bring more meaning in the way we write codes which is... the fundamentals.

Let's get started, shall we? Don't forget to write notes to enhance your understanding:)

First of all, what is JavaScript?

JS is a single-threaded language that can be non-blocking. 'Hmm okay..what does that mean?' Well, being single-threaded means that it can only run one set of instructions at a time. Think of it as reading a food recipe, you have to follow instructions one by one from top to bottom right? It's not doing multiple things, and that's because it has only one Call Stack.

Call Stack & Memory Heap

A Call Stack is what let JavaScript Engine keep track of function calls but, most importantly it is what allows us to run code one at a time. In short, when you call a function, the interpreter will add it to the call stack first then start carrying out the function and once it has been run, it will be removed from the call stack.
To call functions, they have to be stored somewhere..and that somewhere is in the Memory Heap. It's a form of resource management applied to computer memory. It is used to provide ways to dynamically allocate portions of memory to programs at their request, and free it for reuse when no longer needed.

Memory Leak

That's what happens when a computer program incorrectly manages memory allocations and this is when the memory is not released when it's no longer needed.

The good news, this issue was fixed when JS Engine introduced the Garbage Collector.

Garbage Collector (GC)

Garbage Collection is a form of automatic memory management. It will attempt to reclaim memory which was issued by the program but is no longer needed.

Stack Overflow

You might have ever heard of it? Well, since we know that there is one call stack that means we are also quite limited. A stack overflow happens when the call stack space is exceeded.

But how?

The most common cause is infinite recursion, where a function calls itself so many times that the space needed to store the variables and information connected with each call is way more than we can fit on the stack.

Perhaps an example might help :)

function hello() {
    console.log("Helloo, you are awesome!!!");
    hello();
}
hello();

And here, we just created an infinite loop that will run indefinitely. If we try to run it inside the browser, the function will run until the stack space is exceeded as you can see in the picture shown below 👇.

Are you still following? Great, let's continue!

Now that we know what JavaScript is, we need to know how it works.

The JavaScript Engine

As you might know, computers only understand binary codes which are 0s and 1s, meaning that they can't simply execute our JavaScript files since they can't understand what's written inside. That's where the JS Engine plays its most important role.

Instead of sending our JS file straight to the CPU, we first of all, need a translator to make the computer understand what we want it to do. As in the picture shown above, the engine takes our file, executes the compilation to binary instructions then sends it to the CPU to finally run it.

Did you know?

The first JavaScript Engine was created in 1995 by Brendan Eich. Before that, browsers were barely interactive since they were only run in HTML & CSS.

Inside the JavaScript Engine

When we run a JS file, first it goes through the Parser which will perform a lexical analysis, which means it will break the code into tokens to identify their meaning or to know what the code is trying to do.

Secondly, the tokens will get formed into an Abstract Syntax Tree (AST). An AST is a tree representation of the source code of a computer program.

Now, before continuing I'd like to talk about two important things in a JS Engine that quite often confuse people, and that is..an interpreter vs a compiler.

Interpreter Vs Compiler

In programming, there are generally two ways of translating to machine language, let's start with the first one.

An interpreter, what it does is read and translates the files line by line. This can be a slow process however, the program runs right away and you will be able to catch any error on the spot.
With a compiler, unlike an interpreter, it doesn't start to translate immediately. What it does is, it works ahead of time to create a translation. In short, instead of having to wait for the program to run instructions one at a time, a compiler will simply read the whole file at once and then execute. Yes, it does take some preparation time since the compiler needs to first read all the instructions but then after that, it will run very quickly.

Did you know?

JavaScript originally came as an interpreted language but now we can use a compiler to optimize the code.

Now you might be wondering which one to use between a compiler and an interpreter but guess what, there is the best of both worlds! Google came up with the V8 Engine using both interpreter and compiler also known as JIT (Just In Time) compiler to make the engine runs faster.

Perfect! Now that we know what JavaScript is and how it works, there is still one small issue. If JavaScript has one call stack and runs one instruction at a time, wouldn't it take an eternity to run a large program? Well, yes but this is where the JavaScript Runtime comes in!

What's a JavaScript Runtime?

Runtime is an environment in which a programming language executes. This will make the browser keep working in the background while the synchronous javascript code is running, this uses the Web API to communicate.

Keep in mind 💭

It's good to be mindful that the runtime environment can have different forms based on the context. For example, a browser runtime environment can be very different from a Node.JS. However, these differences are mostly on the implementation level, meaning that the following concepts are still relevant.

Web API

First of all, what's an API?

An API is an Application Programming Interface. In short, it's a kind of interface that has a set of functions that allow programmers to build software/applications or get access to some specific features or data of an application.

Now, a Web API which is not part of the JS engine but is instead provided by the browser, will simply extend the browser functionality by doing multiple tasks such as sending HTTP requests, listening to DOM events, delaying executions using a callback, etc...

These Web APIs are called Asynchronous. Why? Because they can run instructions in a different order compared to JS which can only run from top to bottom.

How does it work?

Using setTimeout, you can delay the first instruction to be able to run the second instruction first.

Let's take a look :

console.log("First");

setTimeout(() => {
    console.log("Second");
}, 1000 );

console.log("Third");
/*
OutPut: First,
        Third,
        Second
*/

As you can see in the example shown above, console.log("Second") was written second but came as last in the output.

But how?

Alright, so what happened here is, we ran the console.log("First") and then set a delay on the console.log("Second") for 1-second.
Since setTimeout is a function from the Web API, the call stack cannot understand it so it will send the function to the web API to handle it. (By the time it sent the setTimeout function, it will proceed with the **console.log("Third"))
Finally, the Web API will read the setTimeout function then wait for the 1-second delay that was defined by us, goes through the Callback Queue then finally back to the call stack.

Callback Queue

The Callback queue is a data structure that uses the FIFO (first-in-first-out) principle. That's where all the asynchronous callback functions need to go first before being sent to the call stack, it will simply try to maintain the order in which the message or method was added to the queue.

Event Loop

The event loop will keep checking consistently if the call stack is empty and if there is any message left in the event queue. Its purpose is to move the message from the callback queue to the call stack but only when the call stack is empty.

Hope you enjoyed this article ❤️

Alriight, that was quite a lot of new information, congrats to you if you made it so far! Feel free to bookmark this if you'd like to come back at it in the future.

Let me know if you enjoyed it by leaving a like or a comment :) or if there is a topic that you'd like me to write about.

Thanks for your time,

Happy coding :)