Spring framework was initially released in 2002. How are we supposed to learn 21 years' worth of stuff?

Yeah, it can be a daunting task. But if we can understand the key concepts, everything will start to make sense. Let me take you on a journey to explain how Spring Boot originated and its main features.

The Spring Framework

• Period - Early 2000s

• Why - For building enterprise Java applications

• Key Features :

  • Inversion of Control (IoC)

  • Aspect-Oriented Programming (AOP)

  • Data Access and Transaction Management

• Challenges :

  • XML Config Hell - It heavily relied on XML configurations which led to complex setups

  • Boilerplate Code - Developers had to write a lot of boilerplate code to get simple things done

  • Complexity in integrating with other frameworks and technologies

  • Manual Bean(dependency) wiring

  • Managing Bean Lifecycle

The Spring team wanted to streamline the development process and overcome these challenges.

Spring Boot: Slim, Turbocharged sibling of Spring

• Period - 2004

• Why - Built on Spring framework foundations. Designed to simplify the process of building production-ready Spring applications

• Key Features :

  • Less boilerplate code. No XML configs required

  • Comes with sensible default configurations

  • Embedded web servers and built-in monitoring tools

Let me go through the key abstractions in Spring Boot.

Spring Boot Starters

• What - Pre-configured templates with common dependencies and configurations for specific tasks or technologies

• Why - Simplify dependency management. Reduce the need for manual configs

• Examples :

  • spring-boot-starter-web - For web apps (Has Spring MVC, Tomcat etc.)

  • spring-boot-starter-data-jpa - For JPA-based data access (Has Hibernate, Spring Data JPA and a database driver)

  • spring-boot-starter-security - For handling security concerns (Has Spring Security and related security libraries)

  • spring-boot-starter-test - For testing (Has JUnit, Spring Test and related testing-related libraries)

Auto Configuration

• What - Spring Boot automatically scans the classpath to identify libraries and automatically configures them

• Notes :

  • We can use application properties or write a custom config class to override default configurations

  • We can exclude Specific auto-configurations with the exclude attribute.

Embedded Web Server

• What - Spring Boot comes with embedded web servers (Tomcat, Jetty, Undertow)

• Why - To eliminate the need for external server setup and simplify deployment

• We can customize embedded server settings with application properties or a custom config class

Spring Boot Actuator

• What - Spring Boot comes with built-in tools for monitoring and managing applications

• Features :

  • Health Endpoint - Get insights regarding the application's health

  • Metrics Endpoint - Expose various metrics related to performance and usage

  • Info Endpoint - Expose application-specific details

• Notes :

  • We can write custom endpoints to expose application-specific details

  • If we are using Actuator endpoints, we have to secure the endpoints properly.

Conventions over Configurations

• Spring Boot has sensible default configurations that work out of the box.

• Spring Boot has a standard project structure and naming conventions

• Annotations like @Value can help to inject properties directly into components

Packaging and Deployment

• Packaging options are JAR (Java Archive) or WAR (Web Application Archive).

• WAR requires an external servlet container for deployment while JAR does not need anything like that.

That's all I have for you today. I'm hoping to do an article series on Spring Boot and explain the concepts and design patterns. If you are interested, you can join our small community by following me. See you soon 🙌

Yesterday, Australia won the ICC CWC 2023 for the 6th time, beating India in the Final. What I will talk about is not regarding the match, but what Mitchell Stark (One of the premium fast bowlers in the Australian team) said in the mid-inning interview.

He said, "It is not going to be an easy chase. At the end of the day, it depends on how much you want it". I loved how he phrased it. Australians have always been fighters. They come to compete. This statement shows their hunger to win.

India was an undefeated team coming into the final. All their bowlers and batsmen have been brilliant throughout the tournament. But did Australia care? No. They weren't timid in their approach. They were fearless. They went for the kill. None of them had doubts about whether they would win or not. They just knew. That is the level of belief we all need to build in life. Whatever you do, do it wholeheartedly.

During the final phase of the game, I heard an Indian commentator saying "I think it is fair to say that India was beaten by the conditions and nothing else". This is another common mindset that we see among people. Blaming and worrying about the things that we have no control over is never a good approach. The Indian captain said during the toss, that he was going to bat anyway if he had won the toss. So, they got what they wanted.

The only way we can improve at something is by admitting our flaws. Yes, the conditions helped. But you have to admit that you were outplayed. You have to take the responsibility. Then only you will see where you can improve.

Australia planned and executed almost a perfect game. The field settings they set, the strategies they had for each batsman, their ground fielding, and their executions were perfect. Bringing in Maxwell in the final over of the powerplay turned out to be a genius move.

But that was not an accident. They have planned every bit of that wicket of Rohit Sharma. They knew Rohit would go after Maxwell. He did hit a six and a four before the dismissal. Props to Maxwell for tossing the ball up. Rohit couldn't resist. He was on 47 and wanted to just keep going. Travis Head was placed right at the edge of the 30-yard circle. He was not there to stop singles. He was placed there specifically for this miss-hit. Rohit fell for it.

It was a good pitch to bat on. There were no seam movements. The pitch was on the slower side. Australia utilized it perfectly. Both of the teams realized that it was not a 400 pitch. They had to revise their plans. Australia just did it better.

There is no doubt that India has the strongest team out of all the teams. The bowling and batting effort throughout the tournament was brilliant. But did they do their homework? Did they win the small battles on the field?

After Smith got out and Marnus came in, I thought India missed a trick by not attacking him right away. Marnus almost played a test match role holding his end up while Travis played his natural game at the other end. If India had got Marnus out cheaply, it would've been a much different game. How much do you want it?

Coming back to my original point, we all can adopt this mindset into our lives. If you want something bad enough, you will get it. You have to be obsessed. You have to work for it. You have to build plans for it and execute them on the day. Be so good that no external factors can stop you from achieving your goals.

Congratulations to Pat Cummins and the Aussie team. Hard luck for India. Let's keep improving 🤘

I spent quite some time trying to wrap my head around the copyWithin method. Finally, I feel I've got the hang of it now.

Hey there, fellow human of the 'Not-Getting-It' realm! This article? Yep, not for the instant 'I-get-it' champs like you. This one's for us, the brave souls who embrace confusion like a warm hug. So, kick back, relax, and let's dive into the land of 'Huh? Wait, what?' together. Cheers to not getting it on the first try!

Usage

This method is used to copy a part of the given array and paste that copied content into another location in the same array

Syntax

copyWithin(target, start, end)

target (Required)- Where to paste the content to

start (Optional)- Where to start copying the content from (Default value - 0)

end (Optional)- Where to finish copying the content (Exclusive) (Default value - The length of the array)

Examples

// Example 1 - With only target parameter
let numbers = [90, 88, 33, 77, 5, 66]
numbers.copyWithin(2)
// The same as numbers.copyWithin(2, 0, 6)
console.log(numbers) // [ 90, 88, 90, 88, 33, 77 ]

This method,

1. Copies the elements from indexes 0 to 6 (Exclusive), in this case, it is the whole array

2. Then it pastes the copied content from index 2 onwards

// Example 2 - With start and end parameters
let numbers = [15, 18, 22, 40, 65, 35, 58]
numbers.copyWithin(2, 3, 6)
console.log(numbers) // [15, 18, 40, 65, 35, 35, 58]

// Example 3
let numbers = [15, 18, 22, 40, 65, 35, 58]
numbers.copyWithin(5, 3, 6)
console.log(numbers) // [15, 18, 22, 40, 65, 40, 65]

As you can see, this method never extends the array.

If there is not enough space to paste all the copied elements, it will just paste what it can and ignore the rest.

copyWithinis in the category of array modification methods. I will provide a comprehensive categorized guide for all the JS Array methods in an upcoming article.

Thank you for diving into the article! If you found it as captivating as a page-turner, consider dropping a virtual high-five with a like, leaving your thoughts in the comments, and embarking on a journey with me for more mind-enriching content. Until we cross paths again, take care and keep your curiosity alive! 🚀✨

Usage

map is a higher-order function in JavaScript since it takes a function as its argument.

Array.prototype.map(callbackFn)

The map function does 3 things.

1. It creates a new array

2. Then, it applies a given function to each element of an existing array

3. Then, that updated element is pushed into the new array and returned

Scenarios to be aware of

Here are the reasons why you should refrain from using the map function if you are not going to utilize all its benefits.

Performance Overhead

The map function creates a new array and applies the callback function to all the elements. This can lead to unnecessary memory usage and performance overhead, especially if the array is larger.

If you just want to iterate through the array and you are not going to use the returned array, stick with for loops or forEach loops.

Early Termination

If you have a particular condition where you need to break out from the loop, you can't do that if you are using the map function

Here is how you would do it in a simple for loop.

const numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (const num of numbers) {
  if (sum > 10) {
    break; // Early termination
  }
  sum += num;
}

As soon as the value sum exceeds 10, the loop will be stopped.

There is no way to do this when we are using the map function. The closest thing that is possible is to skip over that particular element.

const numbers = [1, 2, 3, 4, 5];
let sum = 0;
const modifiedNumbers = numbers.map(num => {
  if (sum > 10) {
    return num; // Early return, effectively skipping processing of the remaining elements
  }
  sum += num;
  return num; // Continue processing for other elements
});

No Side Effects 🥺

The map function should not be used to perform side effects like updating external variables. This is against functional programming paradigms that the map function is a part of. The primary purpose of the map function is to transform data in the current array and create a new array.

const numbers = [1, 2, 3, 4, 5];
let sum = 0;

const doubledNumbers = numbers.map(num => {
  const doubled = num * 2;
  sum += doubled; // Modifying external variable
  return doubled;
});

console.log(doubledNumbers); // [2, 4, 6, 8, 10]
console.log(sum); // 30 (Sum of doubled numbers)

Even though this gets the job done, this can make the lives of other programmers harder. This will make the codebase harder to maintain over time and reduce the readability of the code.

Instead of using the map function, stick with a simple forEach loop.

const numbers = [1, 2, 3, 4, 5];
let sum = 0;

numbers.forEach(num => {
  const doubled = num * 2;
  sum += doubled; // Modifying external variable
});

console.log(sum); // 30 (Sum of doubled numbers)

Thank you for diving into the article! If you found it as captivating as a page-turner, consider dropping a virtual high-five with a like, leaving your thoughts in the comments, and embarking on a journey with me for more mind-enriching content. Until we cross paths again, take care and keep your curiosity alive! 🚀✨

Disclaimer: Please be advised that this article may contain explicit language and reader discretion is advised.

There may be a lot of things in life that we are afraid of. We always procrastinate facing our fears. Everyone knows that we should get out and expand our comfort zone. Less people follow along with it. Yes, It is not easy. It is not supposed to be easy.

What's the worst thing that could happen?

Usually, most of the fears you have are not bad as you think they are. Let's take public speaking as an example.

"What's the worst thing that could happen to you?"

"People will laugh at me"

Well, why do you care so much about what anyone else thinks? You have limited fucks to give in life. You can't give a fuck about what everyone thinks. Prioritize who is important to you. Prioritize the people who want to see you succeed.

You might be missing out on something great

We always visualize ourselves screwing up. Why don't we switch it around and think about the other side of the spectrum? Learning public speaking right now will boost your confidence. People will respect you more. You'll get your dream job. There are infinite possibilities.

Do you want to miss out on all that because of the potential of some fucker in the audience laughing at you? Think about it. Visualize what you will be missing out on.

One Baby Step at a Time

If you are a fan of the TV series F.R.I.E.N.D.S., you should remember how Chandler freaked out on his wedding day.

And do you remember how Ross helped him out? That's right. One step at a time. Going home and getting a shower doesn't sound that hard.

If you tend to freak out when you see the big picture. Break it down into smaller manageable steps.

If you find yourself being lazy about going to the Gym,

• Put on your gym clothes and that's it.

• Just step outside the house and that is all.

• Take the bus or start walking towards the Gym and that's all.

• Just go inside the gym and that's it

• Since you're already in the gym, might as well just do the treadmill for a few minutes

When we keep telling ourselves that all we have to do is this small thing and that is it, our stupid brain falls for it. I don't know how it happens, but it works all the time.

You can apply this to most of the things in life. If you have writer's block and can't get yourself to write anything, just open the editor and write one sentence. That doesn't sound that hard, does it? More often than not you will find yourself writing multiple paragraphs after that.

Getting started is the hardest part of doing something. Break it down. Make it sound less intimidating. Works like a charm.

5..4..3..2..1..and Go

You may have already heard about the 5-second rule from Mel Robbins.

Whenever you find yourself overthinking something, you can use this rule to take action. According to Mel, all we have is a 5-second window to go from idea to action. Otherwise, our brain will step in and talk us out of it.

Just count to yourself, 5..4..3..2..1 and do the thing.

Can't get yourself out of bed in the morning? 5..4..3..2..1 and go.

Want to talk to a girl at a party? 5..4..3..2..1 and go up to her and just say hi.

You can use this for most of the things in life. If you are interested in learning about the science behind it, check out this video on YouTube.

Be Afraid and Do It Anyway

One of the best life advice I've ever heard came from Missy Cooper from the TV series, Young Sheldon. Sheldon was a kid and he was about to graduate from high school and go to college. He was afraid of how things would change.

He could not sleep the day before graduation. His sister, Missy was laying on the other bed in the room.

Sheldon: "So you were scared ?"

Missy: "Yeah"

Sheldon: "So what do we do ?"

Missy: "I guess be scared and do it anyways"

This conversation helped Sheldon overcome his fear. He graduated the next day and he thanked Missy in his graduation speech.

Change is coming whether we like it or not. Don't try to resist it. Live in the moment and embrace change when it comes.

If you enjoyed reading the article, I would appreciate it if you could show your support by liking and sharing it. If you believe your friends would also find it interesting, please consider sharing it with them. 🙌

What is the Same-Origin Policy?

The Same-Origin Policy is like a rule that web browsers follow to keep you safe on the internet.

It says that if a web page from one website tries to do something on a different website, like read information or send data, the web browser won’t let it happen. It’s like a security guard that stops people from going where they’re not supposed to.

This is important because it helps protect your personal information and keeps you safe from bad things on the internet. Imagine if anyone could read your emails or see your bank account information just by going to a website! The Same-Origin Policy helps prevent that from happening.

What is CORS?

Cross-Origin Resource Sharing or CORS is a way for web pages to ask permission from a different website to use its information.

Let’s say you want to view some pictures on a website called “A”. But the pictures are stored on a different website called “B”. Normally, your web browser won’t show you the pictures because of the Same-Origin Policy.

But with CORS, website “A” can send a special message called a “CORS request” to website “B”. This message asks website “B” if it’s okay for website “A” to see the pictures. If website “B” says it’s okay, then your web browser will show you the pictures from website “B” on website “A”.

CORS helps web pages work together and share information safely, like when you share your toys with your friends. It’s important because it allows websites to work together and show you the information you want to see.

What are preflight requests?

Preflight requests are like asking for permission before doing something.

Let’s say a website wants to share information with another website using CORS, but the information is sensitive and needs extra protection. The website will send a special message called a “preflight request” before sending the actual message.

The preflight request asks the other website if it’s okay to send sensitive information. It’s like asking your parents if it’s okay to go to a friend’s house for a sleepover.

The other website will then send a message back saying if it’s okay to send the information or not. If it’s okay, the original website will send the sensitive information, but if it’s not okay, the information won’t be sent.

Preflight requests help keep your information safe on the internet by making sure that websites only send and receive information when it’s safe to do so. It’s like checking with your parents before doing something that might be dangerous.

What are CORS headers?

CORS headers are messages that websites use to talk to each other and decide if it’s safe to share information. Different kinds of CORS headers have different jobs, just like how different tools have different jobs in a toolbox.

Here are a few examples of different CORS headers and what they do:

1. Access-Control-Allow-Origin: This CORS header tells your web browser which websites are allowed to see the information. It’s like telling your friends which toys they can play with.

2. Access-Control-Allow-Methods: This CORS header tells your web browser which kinds of actions it can take with the information, like reading or editing. It’s like telling your friends which games they can play with the toys.

3. Access-Control-Allow-Credentials: This CORS header tells your web browser if it’s okay to send personal information, like passwords. It’s like telling your friends if it’s okay to come into your room or not.

4. Access-Control-Allow-Headers: This CORS header tells your web browser which kinds of information it can share, like text or pictures. It’s like telling your friends what kind of snacks they can have.

By using these different CORS headers, websites can make sure that they’re only sharing information that’s safe to share, and keeping your personal information secure. It’s like making sure that only your trusted friends can come over to play, and that they know the rules for playing with your toys.

How do I handle CORS errors?

Picture this — you’re on a website and you spot some juicy information on another website that you’d love to get your hands on. But before you can access it, your browser needs to ask for permission. It sends a preflight request to check if the other website will let you use its resources. If the answer is no, you’ll encounter the dreaded CORS error, blocking your request.

There are a few different types of CORS errors, but they all mean the same thing: you can’t access the information or resources you want. Here are the most common CORS errors that you will encounter.

• Access-Control-Allow-Origin: This error means that the website you’re trying to access doesn’t allow other websites to use its resources.

• Access-Control-Allow-Headers: This error means that the website you’re trying to access doesn’t allow you to use certain headers in your request.

• Access-Control-Allow-Methods: This error means that the website you’re trying to access doesn’t allow you to use certain methods, like GET or POST, to access its resources.

If you run into a CORS error, don’t worry! There are ways to handle it. One way is to contact the owner of the website you’re trying to access and ask them to allow other websites to use its resources. Another way is to use a proxy server, which acts as a middleman between you and the website you’re trying to access.

If you’d like to read more about all the different CORS errors, you can refer to the MDN Docs article from here.

What are the CORS Best Practices?

To ensure your website is secure and functional, it’s important to follow some best practices when working with CORS.

1. Include the necessary CORS headers in your server’s response: When a browser makes a cross-origin request, the server being accessed must include specific response headers to permit the request. Make sure your server includes the appropriate CORS headers such as Access-Control-Allow-Origin, Access-Control-Allow-Methods, and Access-Control-Allow-Headers.

2. Only allow access to necessary resources: To minimize the risk of unauthorized access, only allow cross-origin access to necessary resources. Avoid allowing access to sensitive information or resources unless it’s required.

3. Use SSL/TLS encryption: Use SSL/TLS encryption to ensure that any data being transmitted is secure. This can help prevent unauthorized interception of data.

4. Set appropriate CORS configuration: Set up CORS configuration based on your website’s requirements. For example, if your website has a public API that should be accessible to third-party websites, set up CORS to allow cross-origin requests from those specific domains.

5. Monitor CORS requests: Monitor cross-origin requests to your website to identify any unusual or potentially malicious activity. Implement logging and monitoring tools to detect any unauthorized access attempts.

By following these best practices, you can help ensure that your website is secure and functional while allowing cross-origin requests as needed.

Conclusion

Understanding and being able to handle the Cross-Origin Resource Sharing (CORS) policy is crucial for every web developer. During my early days in web development, I had to face the dreadful CORS error which led me to waste so much time trying out numerous solutions from Stack Overflow without truly comprehending the concept. But, now that I have gained ample knowledge about CORS, I can confidently say that you don’t have to suffer the same fate as I did. So, take the time to understand CORS and save yourself from the hassle of going through a maze of solutions.

Thank you so much for taking the time to read my article! My utmost priority was to simplify complex concepts, and I hope I’ve achieved that. If you found my article informative and useful, please drop a comment below and don’t forget to follow me for more articles like this. Oh, and spread the word by sharing it with your friends and colleagues, they might thank you for it!

What is DNS and why is it important?

DNS is like a big phone book for the internet. You know how you have a phone book at home with all your friends’ phone numbers and addresses? Well, DNS is like that, but for websites.

When you want to go to a website, you type in the website’s name, like “google.com". DNS takes that name and looks it up in the phone book to find the website’s “phone number”, which is called an IP address. Then, DNS tells your computer the IP address, and your computer uses that to find the website and show it to you.

DNS is essential because it helps us find websites easily and quickly, without having to remember a bunch of numbers. It’s like having an astute helper who knows where all the websites are and how to get to them!

What is the hierarchy of DNS?

Remember how I explained that DNS is like a big phone book for the internet? Well, it’s not just one big phone book. It’s actually lots of phone books, all working together in a big chain.

At the very top of the chain is something called the “root” server. This server lists all the top-level domains (TLDs), like .com, .org, .net, and so on.

When you type in a website name, like “google.com", your computer goes to the next level of the chain, which is the server for the “.com” top-level domain. That server has a list of all the websites that end in “.com”, and it can tell your computer where to find “google.com".

Then, your computer goes to the next level of the chain, which is the server for “google.com". That server has a list of all the pages on the Google website, and it can tell your computer where to find the page you’re looking for.

This chain of servers is called the “DNS hierarchy”, and it helps your computer find the right website quickly and easily. It’s like a big team of helpers, each one passing along the information to the next one until you get to where you want to go.

Here is a simple diagram of the DNS hierarchy for you to get an idea.

So, that’s how DNS hierarchy works! It’s a big chain of servers, each one responsible for a different part of the internet phone book, all working together to help us find websites.

What are the DNS server types?

DNS servers are like special computers that help to make the internet work. There are two main types of DNS servers.

1. authoritative DNS servers

2. recursive DNS servers

An authoritative DNS server is like a phone book for the internet. It stores information about domain names and their corresponding IP addresses. When someone wants to visit a website, their computer asks the authoritative DNS server for the IP address that corresponds to the domain name they’re trying to visit.

A recursive DNS server is like a helper for your computer. When your computer wants to visit a website, it asks the recursive DNS server for the IP address that corresponds to the domain name. The recursive DNS server then goes and asks the authoritative DNS server for the information. Once it gets the information, it sends it back to your computer, which can then connect to the website.

Recursive DNS servers are important because they can help to speed up your internet experience. They store information about domain names and their corresponding IP addresses in a special cache so that they can quickly give you the information you need without having to go all the way to the authoritative DNS server every time.

What are DNS records?

DNS records are like little notes that tell your computer where to find a website. They are a part of the DNS system, which helps your computer find the right website when you type in a name like “google.com".

There are different types of DNS records, each one with a different job. Here are some of the most common ones:

• A (Address) record: This is the most important DNS record because it tells your computer the IP address of the web server hosting a website. When you type in a website name like “google.com", your computer looks up the A record for that domain name to find the IP address of the web server.

• CNAME (Canonical Name) record: This record is like a shortcut. It tells your computer to look up the IP address for one domain name, but use the website content from another domain name. For example, the CNAME record for “test.google.com” might tell your computer to use the website content from “google.com". This record is usually used in place of an A record. All CNAME records always point to a domain, not an IP address.

• MX (Mail Exchange) record: This record tells your computer where to send an email for a domain name. It’s used by email servers to find the correct destination for incoming email messages.

• TXT (Text) record: This record is like a note that can contain any kind of text information. It’s often used to provide additional information about a domain name, such as ownership or security details.

These are just a few examples of the types of DNS records that exist. Each one has a specific job to help your computer find the right website or send an email to the right place. DNS records are like little helpers that work together to make sure everything on the internet runs smoothly!

What is DNS propagation and caching?

When you type in a website name like “google.com", your computer uses the DNS system to find the IP address of the web server hosting that website. But did you know that the DNS system can take some time to update with new information?

This is because of something called DNS propagation. When a change is made to the DNS records for a domain name, it can take some time for that change to be propagated, or spread out, to all of the DNS servers around the world. This means that some people might still see the old information for a little while, even after a change has been made.

Another thing to know about DNS is that your computer doesn’t always look up the DNS information from scratch every time you visit a website. Instead, it stores the information in a cache or a temporary storage area, so it can access it more quickly the next time you visit that website.

DNS caching is helpful because it makes your internet experience faster and smoother. Your computer doesn’t have to spend time looking up the DNS information every time you visit a website. Instead, it can use the information it already has stored in the cache.

However, DNS caching can also cause problems when changes are made to DNS records. Because your computer is using the cached information, it might not see the updated information right away. This is another reason why DNS propagation can take some time. You can flush the DNS cache to get rid of this issue.

So, DNS propagation and caching are two things that affect how quickly and accurately your computer can find the websites you’re looking for. Sometimes it might take a little bit of time for everything to update, but don’t worry — your computer and the DNS system are always working hard to make sure you can access the internet quickly and easily!

What are DNS security and DNSSEC?

DNS security is important because it helps to make sure that the DNS system is working correctly and that you’re truly connecting to the website you think you are. Someone could try to trick the DNS system, either by changing the DNS records for a website or by creating a fake website that looks like the real one.

One way that DNS security is improved is through something called DNSSEC. This is a system that adds extra security information to the DNS records for a website. When your computer looks up the DNS information for a website that has DNSSEC, it can check the security information to make sure that the information it’s getting is really from the website it thinks it is.

DNSSEC works by adding a digital signature to the DNS records for a website. This signature is like a special code that proves that the information is real and hasn’t been tampered with. Your computer can check the signature to make sure that it’s connecting to the real website and not a fake one.

DNSSEC is a very important part of DNS security because it helps to protect against attacks that try to trick the DNS system. With DNSSEC, you can be more confident that the websites you’re visiting are the ones you intend to visit, and that your internet experience is secure and trustworthy.

How does DNS load balancing work?

Sometimes, when lots of people want to visit a website, the server that hosts that website can get overwhelmed and stop working properly. This can make the website slow or even cause it to crash! To prevent this from happening, website owners can use something called DNS load balancing.

DNS load balancing is when a website owner sets up multiple servers to host their website. When someone tries to visit the website, the DNS system can choose which server to send them to. This helps spread out the traffic and prevent any server from getting too overwhelmed.

One way that the DNS system can choose which server to send someone to is by using something called round-robin DNS. Round-robin DNS is when the DNS system rotates through a list of IP addresses for the different servers. So, if three servers are hosting a website, the DNS system might send the first person who tries to visit the website to the first server, then send the second person to the second server, and so on.

Round-robin DNS is a simple and effective way to do DNS load balancing. By spreading out the traffic among multiple servers, website owners can ensure that their website stays fast and responsive, even when lots of people are trying to visit it simultaneously.

How do I troubleshoot DNS?

Sometimes, things can go wrong with DNS servers. When this happens, you can use the following checklist of troubleshooting techniques to use to figure out what’s going on.

1. Check your internet connection: Before you do anything else, make sure that your internet connection is working properly. If your internet connection is down, you won’t be able to access any websites, no matter what you do!

2. Try a different device: If you’re having trouble accessing a website on one device, try accessing it on a different device. This can help you figure out whether the problem is with the website or with your device.

3. Check your DNS settings: Make sure that your device is set up to use the correct DNS servers. If you’re not sure what the correct DNS servers are, you can try using Google’s DNS servers (8.8.8.8 and 8.8.4.4).

4. Clear your DNS cache: Sometimes, your device’s DNS cache can get corrupted. When this happens, you might not be able to access certain websites. To fix this, you can try clearing your device’s DNS cache.

5. Check the website’s DNS records: If you’re having trouble accessing a particular website, it could be because there’s something wrong with the website’s DNS records. You can use a special tool called a DNS lookup tool to check the website’s DNS records and see if there are any problems.

Conclusion

In conclusion, DNS is a critical component of the internet infrastructure that enables us to access websites and services by their domain names. Understanding the hierarchy of DNS, different types of DNS servers, DNS records, and DNS security can help us manage and troubleshoot DNS effectively. Additionally, learning about DNS propagation, caching, and load balancing can improve website performance and availability.

Finally, thank you for taking the time to read my article. I tried my best to break the concepts down into simple terms. If you found my article helpful, please make to share it with your friends and colleagues.

I am Thisura Thenuka. I'm a 23-year-old from Sri Lanka and I work as a Full Stack Engineer in a Software Company. I've been working in the industry for almost 3 years now.

I'm going to share with you today how I came to be a software engineer and what inspired me to do it.

School Life

I started learning Information Technology as a subject in school when I was 11. At the time, I was learning about flow charts, logic gates, networks and so on. The first programming language I learned was Visual Basic.

During a tuition lesson I took to study IT, programming became my absolute obsession. I found the process of attempting to solve challenging programming problems to be quite fascinating. I think a big part of how I became a software engineer was due to the young geeky man inside of me.

Uni Life

After 14 years of education, I learned about a scholarship program that enables me to get a degree in software engineering while working full-time for a tech company. After an exam and an interview, I got selected for the scholarship program.

I'm in my third year of university right now. I was fortunate to have a group of friends who were really encouraging. We enjoyed working on new projects while attending events, parties, and hackathons.

Work Life

I had the honour of working with great developers and it was quite inspiring to see how they went about doing their things. I didn't really understand how to function in a professional setting when I first joined. My senior colleagues were incredibly helpful and considerate, teaching me a lot about managing daily interactions, documentation, coding standards, bug fixes, effort estimations, and many more.

Even though most of them are working in different companies now, I'm really grateful for the things they thought me.

Future

I still have two years to go in both my internship and my degree program. I intend to fully develop my portfolio over this time and network with new professionals in the field. Not many of my projects have been finished to the point of public display. I plan to concentrate more on creating projects and contributing to open-source projects.

Thank you for reading my article. This article was written as the Week 1 article in 4 Articles in 4 Weeks - Hashnode Writeathon. If you have any suggestions for me to try out in order to build a great portfolio, please make sure to drop a comment 🥳👋

Do I need to use Redux in my React app?

It depends.

If your app is simple and works with a minimal number of states, there is no need to add redux to your app.

If your app is complex and has a lot of stuff going on, you should consider adding redux to your app. It will provide a clean and simple structure to handle states and improve the longevity of the code.

Redux vs useContext and useReducer

By utilizing React's useContext and useReducer hooks, we can provide the same functionality as Redux. The boilerplate code is significantly less, and it is much simpler.

But it's crucial that you understand how Redux functions because most software companies already use it in their projects, and it will undoubtedly help you in your next interview.

Redux Basic Concepts

There are a few simple concepts you should understand before adding redux to your react app.

Store

The Redux Store holds the state of your app. Your app is always subscribed to the store. But your app can't directly change the state in the store.

This is where actions and action creators come in.

Action Types, Actions and Action Creators

Action types are constants that are used to define the values used for the type property of Actions.

export const ADD_TASK = "ADD_TASK";

An action is any object with a type property. Actions help us describe what needs to happen.

{
    type: ADD_TASK
}

An action creator is simply a JS function that returns an action.

export const addTask = (task) => {
    return {
        type: ADD_TASK,
        payload: task,
    };
};

The only thing your app can do is to "dispatch" actions. Dispatch is a method provided by the react-redux library's useDispatch hook. I'll get into this later when we implement the code.

Your app can change the state in the Redux store by dispatching actions.

dispatch(addTask(task))

An action only describes what needs to happen. It doesn't describe how we want the states to change. We need to use a reducer for this.

Reducer

A reducer is a JS function that takes in initialState and action as input and returns an updated state object.

const initialState = {
  tasks: [],
  taskTitle: "",
  taskDescription: ""
};

const taskReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TASK:
      return {
        ...state,
        tasks: [...state.tasks, action.payload],
        taskTitle: "",
        taskDescription: ""
      };
    default:
      return state;
  }
};

When an action is dispatched, the relevant reducer will update the state according to the action.

When we create the Redux store, we feed all the reducers to the store. So, the reducers can update the state in the store which is what we want.

Feeling Overwhelmed?

I completely understand if you feel swamped, especially if you are only now becoming familiar with these ideas. Have no fear; I've been there. When we begin writing the code, you will have a better understanding of it.

Adding Redux to your React App

Redux will be used to manage states in my simple to-do app, which will allow users to add tasks. I'm simply doing this as a demonstration; a basic app like this doesn't need redux.

Step 1 - Installing required libraries

npm i redux react-redux @reduxjs/toolkit

Step 2 - Create Actions, Action Types and Action Creators

taskActionTypes.js

export const ADD_TASK = "ADD_TASK";
export const UPDATE_TASK_TITLE = "UPDATE_TASK_TITLE";
export const UPDATE_TASK_DESCRIPTION = "UPDATE_TASK_DESCRIPTION";

taskActions.js

import {ADD_TASK, UPDATE_TASK_DESCRIPTION, UPDATE_TASK_TITLE} from "./taskActionTypes";

export const addTask = (task) => {
    return {
        type: ADD_TASK,
        payload: task,
    };
};

export const updateTaskTitle = (value) => {
    return {
        type: UPDATE_TASK_TITLE,
        payload: value,
    };
};

export const updateTaskDescription = (value) => {
    return {
        type: UPDATE_TASK_DESCRIPTION,
        payload: value,
    };
};

When we are passing values to action creators, the convention is to call that attribute "payload".

Step 3 - Create Reducer(s)

taskReducer.js

import {ADD_TASK, UPDATE_TASK_DESCRIPTION, UPDATE_TASK_TITLE} from "./taskActionTypes";

const initialState = {
    tasks: [],
    taskTitle: "",
    taskDescription: ""
};

const taskReducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD_TASK:
            return {
                ...state,
                tasks: [...state.tasks, action.payload],
                taskTitle: "",
                taskDescription: ""
            };
        case UPDATE_TASK_TITLE:
            return {
                ...state,
                taskTitle: action.payload,
            }
        case UPDATE_TASK_DESCRIPTION:
            return {
                ...state,
                taskDescription: action.payload,
            }
        default:
            return state;
    }
};

export default taskReducer;

In this case, we only need the taskReducer. But in a complex app, there will be multiple reducers to handle different states. In that case, the convention is to create a reducer called "rootReducer" by combining all the other reducers and feeding that reducer to the store.

rootReducer.js

import {combineReducers} from "redux";
import taskReducer from "./tasks/taskReducer";

const rootReducer = combineReducers({task: taskReducer});

export default rootReducer

Step 4 - Create the Store

import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "./rootReducer";

const store = configureStore({ reducer: rootReducer });

export default store;

Step 5 - Wrap the Root Component with Provider

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import {Provider} from "react-redux";
import store from "./redux/store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <React.StrictMode>
        <Provider store={store}>
            <App />
        </Provider>
    </React.StrictMode>
);

Step 6 - useDispatch() and useSelector()

You can use useSelector() to access the states in the Redux store.

You can use useDispatch() to access the dispatch method which helps you to dispatch actions

import React from "react";
import {useDispatch, useSelector} from "react-redux";
import {addTask, updateTaskDescription, updateTaskTitle} from "../redux/tasks/taskActions";

const styles = {
    taskContainer: {
        display: "flex",
        flexDirection: "column",
        width: "350px"
    },
    mainContainer: {
        textAlign: '-webkit-center'
    }
}

function AddTasks() {
    const dispatch = useDispatch();
    const taskTitle = useSelector(state => state.task.taskTitle)
    const taskDescription = useSelector(state => state.task.taskDescription)

    const onAddTask = () => {
        const task = {
            title: taskTitle,
            description: taskDescription,
        }
        dispatch(addTask(task))
    };
    const onTaskTitleChange = (e) => dispatch(updateTaskTitle(e.target.value))
    const onTaskDescriptionChange = (e) => dispatch(updateTaskDescription(e.target.value))

    return (
        <div style={styles.mainContainer}>
            <div style={styles.taskContainer}>
                <input type="text" placeholder="Task Title" onChange={onTaskTitleChange} value={taskTitle} />
                <input type="text" placeholder="Task Description" onChange={onTaskDescriptionChange}
                       value={taskDescription} />
                <button onClick={onAddTask}>Add Task</button>
            </div>
        </div>
    );
}

export default AddTasks;

That's about it. We successfully added Redux to a React app.

If you want to look into the code and try in out for yourself, here is the Code Sandbox version.

Conclusion

At first glance, adding Redux to your React app could appear difficult. But it gets a lot simpler when we take each concept in turn and develop the logic on our own.

I am still trying to learn these concepts on my own. Please feel free to bring up any gaps in my reasoning and the problems you encounter.

Thank you for reading my article. If you learned something new, please make sure to drop a like and share the article among your fellow developers 🥳

React Error Boundaries are used to show a user-friendly UI to users when unexpected JavaScript errors occur.

A JavaScript error in a part of the UI usually renders a white screen and crashes the entire app. React Version 16 introduced a solution to this issue with the new “Error Boundary” concept.

How can I implement Error Boundaries ?

You can implement React Error Boundaries in your React app in 2 simple steps

1. Create an error boundary component
2. Wrap error-prone component with error boundary component

Creating Error Boundary Component

A class component becomes an error boundary if it defines either (or both) of the lifecycle methods static getDerivedStateFromError() or componentDidCatch(). Use static getDerivedStateFromError() to render a fallback UI after an error has been thrown. Use componentDidCatch() to log error information. (https://reactjs.org/docs/error-boundaries.html)

Here is the example error boundary component provided in the React documentation.

import React from "react";

class ErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = { error: null, errorInfo: null };
    }

    componentDidCatch(error, errorInfo) {
      // Catch errors in any components below and re-render with error message
      this.setState({
        error: error,
        errorInfo: errorInfo
      })
      // You can also log error messages to an error reporting service here
    }

    render() {
      if (this.state.errorInfo) {
        // Error path
        return (
          <div>
            <h2>Something went wrong.</h2>
            <details style={{ whiteSpace: 'pre-wrap' }}>
              {this.state.error && this.state.error.toString()}
              <br />
              {this.state.errorInfo.componentStack}
            </details>
          </div>
        );
      }
      // Normally, just render children
      return this.props.children;
    }  
  }

export default ErrorBoundary;

You can create your own error boundary with a fancier UI according to your use case.

Wrapping with Error Boundary

There are two ways you could wrap components with the error boundary

1. You can wrap the top-level component
2. You can wrap individual components

Wrapping Top-Level Component

<ErrorBoundary>
    <App/>
</ErrorBoundary>

Wrapping Individual Components

This approach would be ideal if your app has multiple different isolated sections.

<ErrorBoundary>
    <BankingController/>
</ErrorBoundary>
<ErrorBoundary>
    <ProfileController/>
</ErrorBoundary>
<ErrorBoundary>
    <PolicyController/>
</ErrorBoundary>

An error occurred in BankingController would not stop user from using the PolicyController or ProfileController.

So, Is my React app “white screen”-free now?

Well, React error boundaries can catch all errors except for the following :

1. Event Handlers
2. Asynchronous code
3. Server Side Rendering
4. Errors thrown in the error boundary itself

But you can always make use of regular JavaScript try/catch blocks whenever needed.

As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree

Conclusion

React error boundaries provide a way for developers to make our apps more user-friendly. In my opinion, every React app should make use of React error boundaries and it makes a drastic difference in the user experience.

Thank you for taking the time to read my article. Hope you enjoyed it. If you learned something new, make sure to drop a like and share the article with your fellow developers.

Today, I will explain how we can create and use React custom hooks.

What are Custom Hooks in React?

React custom hooks are a way to extract component logic into reusable functions. There is one convention you should know about before writing our own React hooks

"use" in front of the custom hook

React advises us to only use React hooks inside React functional components or custom hooks. React advises us not to use React hooks inside regular JS functions. The thought process behind this is that if we use React hooks inside normal JS functions, there is a chance for them to get "hidden" inside the call stack. Especially in a large codebase, it would be impossible to go through each and every function to see where React hooks have been used.

The thought process is the same in this case as well. It would be simpler for us to determine where React hooks have been used if we prefixed our custom hook names with "use".

So, the name of your custom hook should look like this

useMyCustomHook()
useOnlineStatus()
useCommentFilter()

How to write React Custom Hooks?

I've created a simple React hook to check if a given player is retired or not.

useRetiredStatus.js

import {useEffect, useState} from "react";

const useRetiredStatus = (player) => {

    const [isRetired, setIsRetired] = useState(null);

    useEffect(() => {
        //Assumption: The age of retirement for cricket is 40 yrs
        player?.age > 40 ? setIsRetired(true) : setIsRetired(false)
    })

    return isRetired;
}

export default useRetiredStatus;

App.js

import React, {useEffect, useState} from 'react';
import useRetiredStatus from "./useRetiredStatus";

const players = [
    {name: "Kumar Sangakkara", age: 44},
    {name: "Angelo Mathews", age: 35},
    {name: "Rohit Sharma", age: 35},
    {name: "Mahela Jayawardene", age: 45},
    {name: "David Miller ", age: 33},
]

function App() {

    const [player, setPlayer] = useState(players[2]);
    const retiredStatus = useRetiredStatus(player);

    return (
        <>
            {`Dear Cricket Fans, ${player.name} is ${retiredStatus ? 'retired' : 'still playing the game'}`}
        </>
    );
}

export default App;

Output

With React Custom Hooks, there are no limitations. We can change input and output variables into anything we want just like in a regular function. With this knowledge, you will be able to create custom hooks for all the unique requirements in your projects.

Can't I just use a JS function, instead of creating a custom hook?

You can use a JS function if your code does not make use of React hooks.

If the code contains React hooks, you should create a custom hook so that your code aligns with React's rules of hooks

Conclusion

Learning how to make use of React custom hooks will make your code look more cleaner and more readable. I hope you will be able to implement React custom hooks in your next project.

Thank you for reading the article. Hope you learned something valuable today. Until next time, take care guys.

By definition, a promise is a declaration that one will do something or that a particular thing will happen. In the programming world, a promise is an object that represents the eventual completion (or failure) of an asynchronous operation.

States

A promise can have the following states.

1. Pending (Initial State, neither fulfilled nor ``` rejected

2. Fulfilled (The operation was a success)
3. Rejected (The operation was a failure)

A pending promise can either be fulfilled or rejected. We can attach handler methods to handle the events of promises getting ```
fulfilled
``` and ```
rejected
```. We can use the ```
then
``` method in promises to attach these handlers.

promise.then(handleSuccess, handleRejection)

We have attached two handler methods to the above promise. Now, if the promise gets fulfilled, ```
handleSuccess
``` will be called and if it gets rejected, the ```
handleRejection
``` method will be called.

When a promise is not in the ```
pending
``` state, we say the promise is ```
settled
```. Please keep in mind that being settled is merely a linguistic convenience, not a state.

# Methods

In addition, promise objects have multiple methods that can be really useful when handling promises.

## 1. Promise.all()

Input - An iterable of promises

Output - A single promise that resolves into an array of the results of the input promises

This method is useful when you have more than one promise and you want to do something only when all the operations are completed successfully. ```
Promise.all()
``` will reject immediately upon any of the input promises being rejected. For example, if you want to make multiple API calls and the code relies on all of them to be successful, you can use Promise.all()

const firstPromise = new Promise((resolve, reject) => { setTimeout(resolve, 300, "First Promise"); });

const secondPromise = new Promise((resolve, reject) => { setTimeout(resolve, 100, "Second Promise"); });

const thirdPromise = new Promise((resolve, reject) => { setTimeout(resolve, 1000, "Third Promise"); });

const rejectedPromise = Promise.reject("EVERYBODY STAY CALM. STAY F***ING CALM. I WAS REJECTED");

//Promise.all() method Promise.all([firstPromise, secondPromise, thirdPromise]) .then((results) => { console.log("All the promises were fulfilled here - ", results); }) .catch((error) => { console.error("Error: ", error); });

//Promise.all() method with a rejected promise Promise.all([firstPromise, rejectedPromise, thirdPromise]) .then((results) => { console.log("All the promises were fulfilled"); console.log("Response from all method - ", results); }) .catch((error) => { console.error("Error: ", error); });

Output

Error: EVERYBODY STAY CALM. STAY F***ING CALM. I WAS REJECTED All the promises were fulfilled here - [ 'First Promise', 'Second Promise', 'Third Promise' ]

## 2. Promise.allSettled()

Input - An iterable of promises

Output - A single promise that resolves into an array of the results of the input promises

We can use this method when the tasks are dependent on each other and you want to know all the results of all the promises regardless of the result of each promise.

//Promise.allSettled() method with a rejected promise Promise.allSettled([firstPromise, rejectedPromise, thirdPromise]) .then((results) => { console.log("I don't care if all the results are fulfilled or not"); console.log("Response from allSettled method - ", results); }) .catch((error) => { console.error("Error: ", error); });

You can clearly see the difference between the ```
all
``` and ```
allSettled
``` methods. The ```
all
``` method wants all the promises to be fulfilled while ```
allSettled
``` method only wants the promises to be ```
settled
``` (regardless of ```
fulfilled
``` or not
)

Output

I don't care if all the results are fulfilled or not Response from allSettled method - [ { status: 'fulfilled', value: 'First Promise' }, { status: 'rejected', reason: 'EVERYBODY STAY CALM. STAY F***ING CALM. I WAS REJECTED' }, { status: 'fulfilled', value: 'Third Promise' } ]

## 3. Promise.any()

Input - An iterable of promises

Output - A single promise that resolves as soon as any of the promises in the iterable fulfils, with the value of the fulfilled promise

If none of the promises gets fulfilled, a ```
AggregateError 
```will reject the promise

const firstPromise = new Promise((resolve, reject) => { setTimeout(resolve, 300, "First Promise"); });

const secondPromise = new Promise((resolve, reject) => { setTimeout(resolve, 100, "Second Promise"); });

const thirdPromise = new Promise((resolve, reject) => { setTimeout(resolve, 1000, "Third Promise"); });

const rejectedPromise = Promise.reject( "EVERYBODY STAY CALM. STAY F***ING CALM. I WAS REJECTED" );

//Promise.any() Method Promise.any([firstPromise, secondPromise]) .then((fasterPromise) => { console.log("Response from any method with no rejections - ", fasterPromise); }) .catch((error) => { console.error("Error: ", error); });

//Promise.any() Method with rejections Promise.any([rejectedPromise, rejectedPromise]) .then((fasterPromise) => { console.log("Response from any method with rejections - ", fasterPromise); }) .catch((error) => { console.error("Error: ", error); });

//Promise.any() Method Promise.any([firstPromise, secondPromise]).then((fasterPromise) => { console.log("Response from any method - ", fasterPromise); });

Output

Error: [AggregateError: All promises were rejected] Response from any method with no rejections - Second Promise

## 4. Promise.race()

Input - An iterable of promises

Output - A promise that fulfils or rejects as soon as one of the promises in an iterable fulfils or rejects, with the value or reason from that promise

const firstPromise = new Promise((resolve, reject) => { setTimeout(resolve, 300, "First Promise"); });

const secondPromise = new Promise((resolve, reject) => { setTimeout(resolve, 100, "Second Promise"); });

const thirdPromise = new Promise((resolve, reject) => { setTimeout(resolve, 1000, "Third Promise"); });

const rejectedPromise = Promise.reject( "EVERYBODY STAY CALM. STAY F***ING CALM. I WAS REJECTED" );

//Promise.race() Method Promise.race([firstPromise, secondPromise]) .then((fasterPromise) => { console.log( "Response from race method with no rejections - ", fasterPromise ); }) .catch((error) => { console.error("Error: ", error); });

//Promise.race() Method with rejections Promise.race([secondPromise, rejectedPromise]) .then((fasterPromise) => { console.log("Response from race method with rejections - ", fasterPromise); }) .catch((error) => { console.error("Error: ", error); });

As the name of the method suggests, we have a race here. It does not matter whether the promises are fulfilled or rejected. The ```
race
``` method returns the fastest settled promise.

Output

Error: EVERYBODY STAY CALM. STAY F***ING CALM. I WAS REJECTED Response from race method with no rejections - Second Promise

## 5. Promise.reject() and Promise.resolve()

You are already familiar with the ```
reject
``` method since I’ve used it in earlier examples. Basically, we use the ```
reject
``` method to reject a promise.

In addition, we have the ```
resolve
``` method which returns a promise that is resolved with the given value or the promise passed as value, if the value was a promise object. Resolved is not to be confused with ```
fulfilled
```. Please read [this StackOverflow answer](https://stackoverflow.com/questions/35398365/js-promises-fulfill-vs-resolve) to learn more about it.

# Fates

Promises also have two mutually exclusive fates, resolved and unresolved.

1. If we try to resolve or reject a promise and it has no effect, we say the promise is resolved.
2. If we try to resolve or reject a promise and it has an effect, we say the promise is unresolved.

# Conclusion

To sum things up, we use promises to handle asynchronous operations in JavaScript. Especially, when there are multiple asynchronous operations running, it would be a nightmare to handle them if you don't know about promises.

I hope you learned something valuable from Today's article. If you liked it, drop a like and follow me so that you don't miss the upcoming articles. And as always, stay safe guys 😷

This is not necessarily specific to JavaScript per se. But it is an essential concept you must learn when going forward with JavaScript. If you read my article regarding closures, you do already have some experience with higher-order functions even if you do not have an idea.

The term, Higher-Order Functions aka HOFs, is said to be coined way back in 1891.

Useful Terminology

Before learning Higher-Order functions, let's quickly check out few other concepts that would aid you in understanding higher-order functions better.

Functional Programming

Functional programming (often abbreviated FP) is the process of building software by composing pure functions, avoiding shared state, mutable data, and side-effects. Functional programming is declarative rather than imperative, and the application state flows through pure functions. Contrast with object-oriented programming, where application state is usually shared and colocated with methods in objects.

Source - Medium

First-Class Functions

In a programming language where functions are treated as variables, it is said to have First-Class functions. In such a language like JS, a function can be passed as an argument to other functions, can be assigned as a value to a variable and can be returned by another function

What is a Higher-Order Function?

A Higher-Order Function is a function that does at least one of the following things.

1. Takes one or more functions as arguments

2. Returns a function as a result

All the functions that are not higher-order functions are called first-order functions.

Usage

JavaScript has a list of inbuilt HOFs as well as we can write our own HOFs.

Inbuilt Higher-Order Functions

Array filter method

const numbers = [1, 2, 3, 4, 5, 6, 7]
const smallerThanFive = x => x < 5
console.log(numbers.filter(smallerThanFive)) // [1, 2, 3, 4]

As you can see, we are passing a function called smallerThanFive to the filter method as the callback function. Read more on the filter method here.

Array find method

const innings = [
    {player: "Sanga", score: 59},
    {player: "Mahela", score: 70},
    {player: "Angie", score: 85}
];
const higherThanSeventyFive = inning => inning.score > 75
console.log(innings.find(higherThanSeventyFive)) //{ player: 'Angie', score: 85 }

As you can see, we are passing a function called higherThanSeventyFive to the find method as the callback function. Read more on the find method here.

Array map method

const numbers = [1, 2, 3, 4]
const multiplyByTwo = x => x * 2
console.log(numbers.map(multiplyByTwo)) // [2, 4, 6, 8]

As you can see, we are passing a function called multiplyByTwo to the map method as the callback function. Read more on the map method here.

The list goes on and on. I'd like to recommend you to check out the MDN Docs articles on Array methods to learn more.

Custom Higher-Order Functions

Since all the above examples were about passing functions as parameters, let's make our own higher-order function return a function.

const multiply = (firstValue) => (secondValue) => firstValue * secondValue

Let me write this without the arrow function syntax to make things a bit clearer for you.

function multiply (firstValue) {
  return function (secondValue){
    return firstValue * secondValue;
  }
}

The multiply function gets the firstValue as an argument and returns a function that asks for the secondValue as an argument. Here is how you call this function.

multiply(10)(20) //Returns 200

Some of you might be thinking, "We can just write this in a single function and pass both values into that. Why did you use a higher-order function for this?". Yes, you are right. There is no need for writing a higher-order function to multiply two values.

But, if you want to make the inner functions not accessible to the outside, you can write a higher-order function. And learning to write higher-order functions would save you a lot of time.

I know this could be hard to grasp, especially if you are new to functional programming. I believe you understand what is happening in the above function. But some of you might not still understand the thinking process behind writing a higher-order function like this.

Let me take you through the thinking process so that you can attempt writing your own higher-order function.

Explaining The Thought Process

function multiply (firstValue) {
  //Do some stuff with firstValue
}

multiply(10)

Here you have a normal function that takes in an argument called firstValue. And then you realize that you have to write another function, but you don't want to make it accessible from the outside. So, what are your options?

function multiply (firstValue) {
  //Do some stuff with firstValue
  return function (secondValue) {
    //Do some stuff with firstValue and secondValue
  }
}

multiply(10)(20)

You can write it as a nested function. But then, there is no way for you to pass arguments from outside (You can pass the value to the outer function and then pass it to the inner function. But that is not a good coding practice). What you can do is to return the inner function and take in an argument from the inner function. Likewise, you can just keep writing functions inside functions as much as you need.

Conclusion

To sum things up, higher-order functions are just like regular functions in JavaScript. The only difference is that while the regular functions take in variables and return variables, Higher-Order functions take in functions and return functions.

I hope you learned something valuable from Today's article. If you liked it, drop a like and follow me so that you don't miss the upcoming articles. And as always, stay safe guys 😷

Background Terms

IIFEs aka Immediately Invoked Function Expressions are JavaScript functions that run as soon as they are defined. I am already writing a detailed article regarding IIFEs. So until then, if you do not know about IIFEs, just think of it as an anonymous function that runs automatically and here is the default syntax for it.

(function () {
  //Write your code here
})()

Lexical scope is the concept of a variable defined outside a function being accessible inside another function defined after the variable declaration

What is a Closure?

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time

Source - MDN Docs

Let me simplify. Think you have an IIFE that has a variable called total.

(function () {
  let total = 0
})();

Usually, since the total variable is defined inside the IIFE as a local variable, we can only use the total variable inside the IIFE.

But there is one way around it. If you define another function inside the IIFE, then that function also can access the variables of the parent function (IIFE) and hence can access the total. Here is how that would look like.

(function () {
  let total = 0
  function print() {
    console.log("Here is the total : ", total)
  }
  print();
})();

This prints total's current value (0) on the console.

So, now you would say, "Right, but still the total variable is only accessible from inside the IIFE". Yes, you are absolutely right. So, let's just return the function.

You can think of functions in JavaScript as another variable type. We can just return the function and assign it into a variable. And since we are assigning the function reference to a variable, we don't even have to have a name for the inner function. Cool, right?

const addition = (function () {
  let total = 0
  return function (){
    total += 1
    console.log("The total is : ", total)
  }
})();

addition()
addition()

Here is the console output

The total is :  1
The total is :  2

Please note that the outer function doesn't have to be an IIFE. You can use the same concept with normal functions as well like in the following code snippet. I'm just using IIFEs to make the code cleaner.

//Using Normal Functions
function addition() {
  let total = 0;
  return function () {
    total += 1;
    console.log("The total is : ", total);
  };
}

//This returns the same console output as before
let returningFunction = addition()
returningFunction()
returningFunction()

You can just call this function as much as you want now. You are updating the value of a local variable from outside the function. This is the concept of closure in JavaScript.

If you want, we can take this a step further by returning a set of functions like this.

const manipulate = (function () {
  let total = 0
  return {
    increment : function () {
      total += 1
      console.log("The total is : ", total)
    },
    decrement: function () {
      total -= 1
      console.log("The total is : ", total)
    }
  }
})();

manipulate.increment()
manipulate.increment()
manipulate.decrement()

Here is the console output

The total is :  1
The total is :  2
The total is :  1

Multiple Nested Functions

Take a look at this example from the MDN Docs

// global scope
var e = 10;
function sum(a){
  return function(b){
    return function(c){
      // outer functions scope
      return function(d){
        // local scope
        return a + b + c + d + e;
      }
    }
  }
}

console.log(sum(1)(2)(3)(4)); // log 20

As you can see we can just keep writing anonymous functions inside functions and use all the passed values. This also can be done using named functions as well. But you have to write few more lines when calling the functions.

// global scope
var e = 10;
function sum(a){
  return function sum2(b){
    return function sum3(c){
      // outer functions scope
      return function sum4(d){
        // local scope
        return a + b + c + d + e;
      }
    }
  }
}

var sum2 = sum(1);
var sum3 = sum2(2);
var sum4 = sum3(3);
var result = sum4(4);
console.log(result) //log 20

Conclusion

Well, that is pretty much all you need to know to get started with JavaScript closures. Try to think of where you can add closure in your codebases. We will only get better if we start practising these concepts on a daily basis.

If you want to learn more in-depth stuff regarding closures like performance considerations, you should check out the MDN Docs article.

Thank you for reading my article. I hope you learned something valuable today. If you did, don't forget to follow my blog and share the article with your friends. And more importantly, stay safe 😷

I'm just going to go through some of the basic things you need to know before going into the main event.

Background Knowledge

An event is an action or an occurrence that happens in your system. The simplest example would be the user clicking on a button.

For each event that is fired, we can write an event handler (A JavaScript function to handle the event) to do what we want to do. For example, we can write an event handler function to print something on the screen once the user clicks on the button.

We also have event listeners in JavaScript. Event listeners listen to the events happening. So, if we want to print something on the screen once the user clicks on the button, we need to first create an event listener to listen for the click event of the button.

When we are loading HTML pages in browsers, the browser creates a tree-like structure for each page called the DOM. For example, if you have a button inside your body tag, the path to the button element would be html -> body -> button.

Three Phases of Event Handling

When it comes to handling events, modern browsers have three phases.

1. Capturing Phase
2. Target Phase
3. Bubbling Phase

The Capturing Phase

The browser checks to see if the element's outer-most ancestor has an onclick event handler registered on it for the capturing phase, and runs it if so.

Source - MDN Docs

The Target Phase

The browser checks to see if the target property has an event handler for the click event registered on it, and runs it if so.

Then, if bubbles is true, it propagates the event to the direct parent of the selected element, then the next one, and so on. Otherwise, if bubbles is false, it doesn’t propagate the event to any ancestors of the target.

Source - MDN Docs

The Bubbling Phase

The browser checks to see if the direct parent of the element selected has an onclick event handler registered on it for the bubbling phase, and runs it if so.

Source - MDN Docs

Wait, What?

It is hard to grasp the issue by reading the above lines. Let me simplify. Here is the issue we are facing.

Think you have created a UI with two div blocks (Block A and Block B). Block B is placed inside Block A. And you have created event handlers for the click event of both div tags.

Now when you click on Block B, before calling B's event handler, the browser calls A's event handler function. Obviously, this is not what we expected. When we click on B, only the event handler of B should be called.

How do we fix this?

Luckily, we do have a solution for this. In the event object, we have a function called stopPropogation. You can call this function at the start of the event handler function of B. You will see that only the event handler function of B is getting executed this time.

When is Event Bubbling Useful?

There could be some use cases where this can be useful. For example, when you have a list of items and you want to do something for all of the items, you will usually have to add event listeners for all the items.

But since you now know the concept of event bubbling, you can just write and assign the event handler for the parent node and see the magic happen.

This concept is called event delegation. You can read more on that in this article.

Thank you for reading the article. Hope you learned something valuable today. And most importantly, stay safe guys 😷

What is Hoisting

Hoisting is the process of moving the declarations of functions, variables and classes to the top of their scope before the code is executed. Let's discuss each one of these scenarios with examples.

Function Hoisting

//Before hoisting 
thisIsHuge()    //Logs "That's what she said" to the console 
function thisIsHuge(){ 
    console.log('That\'s what she said') 
}

Since the function is declared in the global scope, the interpreter moves the declaration of the function to the top of the code by hoisting

function thisIsHuge(){ 
    console.log('That\'s what she said') 
} 
thisIsHuge()

Variable Hoisting

There are 3 keywords that we can use to declare a variable in JS: var, let and const. Let's see how hoisting works for each one of them.

//Using var keyword
console.log(x) //Logs undefined to the console (Default initialization of var) 
var x = 10
console.log(x) //Logs 10 to the console

//Using let keyword
console.log(y)  //Throws ReferenceError: Cannot access 'y' before initialization
let y = 20

//Using const keyword
console.log(z)  //Throws ReferenceError: Cannot access 'z' before initialization
const z = 30

Variables declared using let and const keywords do not have a default initialization value.

class Hoisting

Even though, we can call a function before it is defined, we cannot construct an object before the class is defined.

console.log(new Car()); //ReferenceError: Cannot access 'Car' before initialization

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

Summary

It is always a good coding practice to declare the variables at the top of the scope

It's true that hoisting can be useful sometimes. But in the long run, it will end up creating more bugs. We should always declare the variables, classes and functions before using them.

Further Reading

• MDN Docs on Hoisting

• FreeCodeCamp article on Hoisting

• Digital Ocean article on Hoisting

Ciao

Thank you for reading my article. I hope you learned something valuable today. If you liked it, drop a like and subscribe to my blog. I’ll see you soon with my next article. Stay Safe 😷