What are Callback Functions?

Imagine you're passing a message to a busy friend. You wouldn't want to wait for them to finish everything before delivering it. Similarly, in JavaScript, callback functions are "messages" you send to functions that might take time to complete their tasks. These functions then "call back" to your code later when they're done.

Creating and Using Callbacks

Let's see how it works in practice:

function showResult(result) {
  console.log(result);
}

function add(x, y, callback) {
  const sum = x + y;
  callback(sum); // Send the result to the "callback" function
}

add(4, 5, showResult); // Pass "showResult" as the callback

Here, add takes three arguments: x, y, and callback. It calculates the sum and then "calls back" to showResult by passing the sum as an argument. This allows you to handle the result in a separate function, making your code more modular and organized.

Synchronous vs. Asynchronous Callbacks

So far, we've seen synchronous callbacks, where the "calling back" happens immediately after the task is done. But callbacks truly shine in asynchronous scenarios, where a function might need to wait for something (like fetching data from the internet) before completing.

Here's an example:

function showResult(result) {
    setTimeout(() => {
        console.log(result);// Output: 9 after 5 seconds
    }, 5000);// Simulate a 5 seconds delay
}

function add(x, y, callback) {
    const result = x + y;
    callback(result); // Send the result to the "callback" function
    console.log("Hi! There!") 
}

add(4, 5, showResult); // Pass "showResult" as the callback

In this case, showResult uses setTimeout to simulate an asynchronous operation, and then it calls back to the provided function with the data after a delay. This allows your code to continue execution without being blocked while waiting for the data.

Watch my video to learn more about callbacks and how you can use these in a real-life application! 🎥

Key Benefits of Callbacks

• Asynchronous Programming: Callbacks enable your code to handle tasks that take time without blocking the main thread. This makes your web applications more responsive and interactive.

• Modularization: You can break down complex logic into smaller, reusable functions, making your code easier to read, understand, and maintain.

• Flexibility: Callbacks can be passed around and used in various contexts, making your code more adaptable.

Beyond the Basics: Advanced Concepts

While callbacks are powerful, they can also lead to "callback hell" in complex scenarios. To overcome this, JavaScript offers alternative approaches like promises and async/await, which provide cleaner and more readable ways to handle asynchronous operations. We'll explore these in future posts!

Remember:

• Always pass callback functions without parentheses (add(5, 10, showResult)).

• Callbacks can be used for both synchronous and asynchronous operations.

• They offer significant benefits for writing modular, asynchronous code.

I hope this blog has clarified callback functions for you! Feel free to ask any questions in the comments, and I'll be happy to help.

Happy learning! 💻 😄

🌐 GitHub Link: https://github.com/SuriyaTasmimDisha/JavaScript-Callbacks.git

Follow me and support me on:

🔗 LinkedIn: https://www.linkedin.com/in/suriya-ta...

🐦 Twitter: https://twitter.com/SuriyaDisha

📝 Tech Blog: https://blog.suriyadisha.com

The word asynchronous means not occurring at the same time. But in JavaScript, the code gets executed line by line as it has a single thread. So, JavaScript is synchronous by nature.

So, how do we make JavaScript act asynchronously?

To make JavaScript work asynchronously, we first need to understand how the JavaScript code executes.

To run a javascript script we need a JavaScript Engine. The purpose of the javascript engine is to translate the code developers write into machine code. The computer reads this machine code and performs the specified tasks.

So, when the JavaScript engine starts executing the code it creates Execution Context. Each execution context has two phases:

• The first one is the Creation phase

• The second one is the Execution phase

In the creation phase, JavaScript creates a global execution context. Then it creates a 'this' object and binds it to the global object. After this, it creates a memory heap to store variables and function references. Next, it initializes the variable within the global execution context to undefined.

In the execution phase, the javascript engine assigns values to the variables and executes the function calls. For each function call, the javascript engine creates a new function execution context. It is very similar to the global execution context. But instead of creating a global object, it creates an arguments object. This argument object is a reference to all the parameters of the function.

To understand this workflow more clearly, let’s take a look at an example:

let a = 2;
function add(c){
return c+2;
}
let b = add(a);
console.log(b);

So, this is a simple javascript code where we have 3 variables and one function.

When we run this script, the JavaScript engine first goes into the creation phase and creates a global execution context. Then it creates a global object. As we use vanilla JavaScript, this global object is a window that we get from the web browser. Then it creates this object and binds it to the window object. Next, it creates a memory heap in the global execution context. There in the memory heap, it stores the variable a, b, and the declaration of the add() function. After that, it initializes the variables a and b to undefined.

After this, the engine goes into the execution phase.

In the execution phase, it first assigns values to the variables and executes function calls. For executing and keeping track of the function calls, the javascript engine maintains a call stack and there is only one call stack available in the web browser. The javascript engine places main() function from the global execution context to the call stack.

Next, for the main() function, the engine enters the creation phase. After completing the creation phase, it then moves to the execution phase.

Then javascript engine executes the call to the add() function and creates a function execution context with an argument object. This argument object keeps the references of all parameters passed into the function. Next, it sets this value to the global object and initializes parameter c to undefined. Then it pushes the add() function on top of the call stack.

After this, the engine executes the add() function on top of the call stack. During this execution phase, the engine assigns 2 to the parameter c and returns the result 4 to the global execution context. Next, it pops the add() function from the call stack.

In the final stage of the execution context, the return value from the add() function is assigned to variable b. Then the value of b is printed in the console. With this, the main() function popped off from the call stack completing all the execution contexts and the script stopped running.

So, as you can see with javascript we are doing one step at a time.

Now let’s look at another example:

console.log(1);
console.log(Math.sqrt(1024))
console.log(2);

With this code, we want to print 1, the square root of 1024, and 2 in the console. So, this is another simple example of the synchronous javascript execution. However, there is a catch. Here, we are calculating the square root of a number. Now the bigger the number the more time it will take to execute. So, other operations will be on hold till then. This situation is called Blocking and it is one of the major drawbacks of synchronous javascript.

To solve this situation we are going to implement an asynchronous mechanism. As you have read in the beginning asynchronous mechanism allows us to work on multiple things at a time.

So, to implement the asynchronous mechanism in JavaScript, we need to understand some new and interesting mechanisms of our web browsers. Our web browsers contain a JavaScript Runtime Environment. This runtime environment consists of a JavaScript Engine, Web APIs, an Event Loop, and a CallBack Queue. We are already familiar with the javascript engine. Now, let’s get to know the other three.

The Web APIs consist of various kinds of modern APIs like event listeners, timing functions, and AJAX requests. We use these APIs to manipulate the HTML, and CSS of the web pages, draw and modify graphics, and get data from the network servers.

The CallBack Queue stores the callback functions sent from the Web APIs. The queue stores these functions in first in first out order.

The Event Loop continuously monitors the state of the call stack and callback queue. When the call stack gets empty, it takes a callback function from the callback queue and puts it onto the call stack.

So, if you notice javascript is still executing synchronously. But because of using the JavaScript Engine, Web APIs, an Event Loop, and a CallBack Queue, it makes us think that javascript is executing asynchronously.

Now let’s take a look at an example to understand this whole flow. In this example, I have modified our previous code.

console.log(1);
setTimeout(() => console.log(Math.sqrt(1024), 3000))
console.log(2);

This time, in the code I have introduced a new method named setTimeout. This setTimeout() is a timing function provided by the Web APIs. This method sets a timer that executes a function or specified piece of code once the timer expires.

So, our code first prints 1 to the console.

Then it moves to the setTimeout() method. Here we have specified the square root code and a delay of 3000ms. That means this block of code will get executed after 3s.

Next, this method is moved from the call stack to the Callback Queue via Web APIs, and in the Callback Queue, the method processing keeps on running.

Then, the execution pointer moves to the third line and prints 2 to the console.

Now, as our call stack is empty, the event loop looks into the Callback Queue and takes the setTimeout method to the call stack. By this time, if 3 seconds is up it prints the square root of the given number in the console.

So, this is how asynchronous javascript works while not creating any blocking.

Wrapping Up

That's it. Thanks for stopping by. I hope by now you have a good understanding of what asynchronous javascript is and how it works.

My DMs are always open if you want to discuss further on any tech topic or if you've got any questions, suggestions, or feedback in general.

Happy learning! 💻 😄

Follow me and support me on:

🔗 LinkedIn: https://www.linkedin.com/in/suriya-ta...

🐦 Twitter: https://twitter.com/SuriyaDisha

📝 Tech Blog: https://blog.suriyadisha.com

JavaScript is a single-threaded programming language. That means it can do one thing at a time and has only one Call Stack at its disposal. The Call Stack uses the Last In First Out (LIFO) principle to store and manage function calls temporarily.

To understand LIFO, let’s say we bought the Harry Potter collection. Now, we are going to store them in order. We will first stack part 7 as we will read it at last. Then part 6, part 5, part 4, part 3, part 2, and at the top part 1. We store the sequence of each book in a chunk of memory. This chunk of memory is called a Stack Frame. We can have several Stack Frames exist at a time but only one Stack Frame can be active. That means you can read one book at a time.

When we will start reading, we will first take part 1 which is the active Stack Frame from the stack. So, this frees up one Stack Frame. After finishing part 1, we will take part 2 which clears up the 2nd Stack Frame. Similarly, we then take out part 3, part 4, part 5, part 6, and finally part 7. And now our Call Stack is empty. So, to process the elements or requests starting from the last to the first is the principle of the Last In First Out method.

In programming the last function that gets pushed into the stack is the first to be popped out when the function returns.

To better understand the Call Stack, let’s look at an example. Let's open Google Chrome and open the inspection tool. In the inspection tool, select the Sources tab. Here, let’s select the Snippets module. Now let’s create a new snippet. In this snippet, let’s write a simple code in JavaScript.

function sayHello(){
console.log('Hello!')
}

function greeting(){
sayHello()
console.log('Hello again!')
}

greeting()

We are going to execute this code and run the debugger so that we can see how the interpreter handles multiple function calls using the Call Stack.

So, let’s a put pointer on the greeting() function and hit the command + enter key to start the execution. As you can see there is a brand new function called anonymous in the call stack list. This is our main function.

So, when we start executing this code the main function gets called first. A stack frame is assigned to the main function. So that the main function gets added to the Call Stack and does its work.

Next, let’s click on the step (⬇) button. This action makes the main function call the greeting() function and the greeting() function gets added to the Call Stack with a Stack Frame. This is our current active Stack Frame while the previous one is on hold.

After that let’s hit the step (⬇) button once again. This time the greeting() function calls the sayHello() function and it gets added to the Call Stack with a new active Stack Frame.

After pressing the step (⬇) button one more time, the sayHello() function prints "Hello" in the console.

Again pressing the step (⬇) button, the sayHello() function returns, and the Stack Frame is popped off from the Call Stack. The execution order then moves below the stack and the immediate frame which is the greeting() function gets activated.

So, let’s press the step(⬇) button again. This time the content of the greeting() function executes and prints "Hello again!" in the console.

Let’s hit the step (⬇) button again. Now, the greeting() function returns, and once again the Stack Frame is popped off from the Call Stack.

Now, we just have the main function in our Call Stack. So, let's press the step button one last time and with this action Call Stack becomes empty.

Now why Call Stack is so important to understand?!

To understand this, let’s go back to the inspection tool and modify our code a little.

function sayHello(){
greeting()
}

function greeting(){
sayHello()
}

greeting()

Now let’s hit command + enter to run this updated code. And we get an error in the console saying "Maximum call stack size exceeded".

For JavaScript, our browser is responsible for executing the code and it has a limited amount of memory.

In the current code, we are calling the sayHello() function from the greeting() function. Then from the sayHello() function, we are calling the greeting() function. Next from the greeting() function we are once again calling the sayHello() function and so on. So, an infinite loop has been created. However, we don’t have infinite memory in the browser. So, when the maximum amount of stack frame is exceeded, the browser throws the "Maximum call stack size exceeded" error.

Wrapping Up

That's it. Thanks for stopping by. I hope you found this article interesting and informative!

My DMs are always open if you want to discuss further on any tech topic or if you've got any questions, suggestions, or feedback in general.

Happy learning! 💻 😄

Follow me and support me on:

🔗 LinkedIn: https://www.linkedin.com/in/suriya-ta...

🐦 Twitter: https://twitter.com/SuriyaDisha

📝 Tech Blog: https://blog.suriyadisha.com

First, let me give you a short tour of my github profile. I plan to split my github profile into 6 sections. These are:

• Intro

• Social Media

• YouTube Cards

• Blog Posts

• Favorite Tools

• GitHub Stats

Here is what the final version of my github profile will look like:

🗃️Prerequisite

1. A GitHub account

2. Basic knowledge of HTML and Markdown languages

Now to start customizing, I need to create a brand-new repository first. To do so, I am going to follow these steps:

1. Log in to my GitHub Account

2. Create a new repository by clicking on the + icon in the top right corner

   

3. In the Create a new repository page, I need to input my github username as the Repository name. After inputting the repository name, github will show me a message saying that this repository is ✨special✨. Using this repo I will be able to add a customized README.md file to my profile.

   

4. I am going to choose the visibility as Public.

   💡Note: Choosing the visibility of the repo as Private won’t show any changes on the github profile.

   

5. Next, I am going to select the checkbox to Add a README file.

   

6. Finally, I am going to hit the Create repository button.

   

After successfully creating the repository, my github profile now looks like this:

Now, I will start customizing my github profile. To do that I am going to click on the pencil icon showing on the top right side of the README.md section in my profile.

This will open the github editor and here I am going to write down my code.

Now, I am going to remove the unnecessary lines of code and start coding.

🙋‍♀️Intro

First, I am going to start with the intro section. For this, I am going to create a section name using an HTML comment tag. Then I am going to create a div tag and align it to the center. Next, I am going to go to Thomas Guibert's github profile. From there I am going to copy the emoji url that I want to use in my github profile. After this, I am going to go back to my github editor and paste the url in the src attribute of the img tag. If you want you can add a different emoji or gif. For that just change the src in the img tag. Here the image is clickable. So to avoid clicking on the image and ending up on a different page, I am going to wrap this img into an a tag and refer to my homepage using href=”#”. Now I am going to check the changes in the Preview section and if it looks good then I am going to commit these changes and head over to my github profile to see the new look.

<!-- Intro Section  -->
<div id="intro-img" align="center">
    <a href="#"><img src="https://emojis.slackmojis.com/emojis/images/1531849430/4246/blob-sunglasses.gif?1531849430" width=100></a>
</div>

Next, I am going to add my name and a short description of myself. So, I am going to head over to readme-typing-svg and customize the font type and other styles as per I want. Then I am going to copy the HTML code snippet, go back to my editor, and paste the code. After this, I am going to check the changes in the Preview section and commit the changes.

<div id="about-me" align="center">
<a href="https://git.io/typing-svg"><img src="https://readme-typing-svg.demolab.com?font=Roboto+Condensed&weight=500&size=25&duration=4000&pause=500&color=EB5775&center=true&vCenter=true&width=550&lines=Hi%2C+I+am+Suriya+Tasmim+Disha;It's+nice+to+meet+you!;I+am+a+full+stack+web+and+app+developer" alt="Typing SVG" /></a>
</div>

The final look of the Intro section:

📱Social Media

Now I am going to add my social media section. For this, I am going to use the following URL from Shields.io.

https://img.shields.io/badge/{**Label-Color**}?logo={**social_media_icon_name**}&logoColor={**color**}&style=for-the-badge

I am going to replace the parameter names with three social networks: LinkedIn, YouTube, and Twitter. After replacing the parameters with values, the urls will look like the below:

• LinkedIn: https://img.shields.io/badge/LinkedIn-blue?style=for-the-badge&logo=linkedin&logoColor=white

• YouTube: https://img.shields.io/badge/YouTube-red?style=for-the-badge&logo=youtube&logoColor=white

• Twitter: https://img.shields.io/badge/Twitter-blue?style=for-the-badge&logo=twitter&logoColor=white

I am also going to add a github-profile-views-counter in my profile which will show how many times my profile has been visited. For this, I am going to use the following url: https://komarev.com/ghpvc/?username={your-github-username}

As all the necessary links are ready, now I am going to wrap them in an img tag. For each social network, I am going to use an a tag to point to the respective accounts. Finally, I am going to check the changes in the Preview section and commit the changes.

<!-- Social Media -->
<div id="badges" align="center">
  <a href="https://www.linkedin.com/in/suriya-tasmim-disha/">
    <img src="https://img.shields.io/badge/LinkedIn-blue?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn Badge">
  </a>
  <a href="https://www.youtube.com/channel/UC6n_v98g89xYfeyzpLj84JQ">
    <img src="https://img.shields.io/badge/YouTube-red?style=for-the-badge&logo=youtube&logoColor=white" alt="Youtube Badge">
  </a>
  <a href="https://twitter.com/SuriyaDisha">
    <img src="https://img.shields.io/badge/Twitter-blue?style=for-the-badge&logo=twitter&logoColor=white" alt="Twitter Badge">
  </a>
  <a href="#"><img src="https://komarev.com/ghpvc/?username=SuriyaTasmimDisha&style=for-the-badge&color=red" alt="Profile Views"></a>
</div>

The final look of the Social Media section:

📺Latest YouTube Videos:

Recently I have started making YouTube videos. So, I want to show the latest videos in my github profile. For this, I am going to use GitHub Actions. GitHub Actions gives developers the ability to automate their workflows. With this configuration, github will automatically keep checking for new videos. So, I manually don’t have to keep adding the YouTube cards each time I upload a new video to my channel. To do this, I am going to use github-readme-youtube-cards following the steps below:

1. I am going to add the following code to my editor and commit the changes.

    <!-- Latest Youtube Videos -->
     ## 📺 Latest YouTube Videos
    <!-- BEGIN YOUTUBE-CARDS -->
    <!-- END YOUTUBE-CARDS -->
   

2. In the repo, I am going to create a new file named .github/workflows/youtube-cards.yml. I am going to open the youtube-cards.yml file in my editor and add the given code:

    name: GitHub Readme YouTube Cards
    on:
      schedule:
        # Runs every hour, on the hour
        - cron: "0 * * * *"
      workflow_dispatch:
   
    jobs:
      deploy:
        runs-on: ubuntu-latest
        steps:
          - uses: DenverCoder1/github-readme-youtube-cards@main
            with:
              channel_id: UC6n_v98g89xYfeyzpLj84JQ
              comment_tag_name: YOUTUBE-CARDS
              youtube_api_key: ${{ secrets.YOUTUBE_API_KEY }} # Configured in Actions Secrets (see Wiki)
              show_duration: true # Requires YouTube API Key (see Wiki)
              output_type: html
   

3. I am going to replace your-channel-id with my YouTube channel id.

   💡Note: To show the video duration on the YouTube card, you have to set up a YOUTUBE_API_KEY. If you are wondering where you can get a YOUTUBE_API_KEY then you can follow this document. Now if you are wondering how you are going to set up this API_KEY in github secrets then follow this document.

4. Finally, I am going to Actions → GitHub Readme YouTube Cards and hit the Run workflow button.

If the workflow runs successfully, then I am going to go to my github profile to see the changes.

The final look of the YouTube Cards section:

📝Latest Blog Posts:

Similar to YouTube Cards section, I am going to set up GitHub Actions for getting the latest blogs to my github profile automatically. For this part, I am going to use blog-post-workflow following these steps:

1. I am going to add the following code to my editor and commit the changes.

    <!-- Latest Blog Posts -->
     ## 📝 Latest Blog Posts
    <!-- BLOG-POST-LIST:START -->
    <!-- BLOG-POST-LIST:END -->
   

2. In the repo, I am going to create a new file named .github/workflows/blog-post-workflow.yml. Then, I am going to open the blog-post-workflow.yml file in my editor and add the given code:

    name: Latest blog post workflow
    on:
      schedule:
        # Runs every hour
        - cron: '0 * * * *'
      workflow_dispatch:
   
    jobs:
      update-readme-with-blog:
        name: Update this repos README with latest blog posts
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v2
          - uses: gautamkrishnar/blog-post-workflow@master
            with:
              max_post_count: "4"
              feed_list: "https://blog.suriyadisha.com/rss.xml"
   

3. I am going to replace your-feed-url with my blog url. You can find the list of available sources here.

4. Finally, I am going to go to Actions → Latest blog post workflow and hit the Run workflow button.

If the workflow runs successfully, then I am going to go to my github profile to see the changes.

The final look of the Blog Posts section:

⚒️My Favorite Tools

In this part, I am going to add a list of my favorite tools that I use for development. For this, I am going to use badges from Shields.io. But I am not going to directly generate these badges from Shields.io. There is a big collection of shield badges in this blog named Awesome Badges. So, I am going to use the badges from here. I am going to take the badge sources of the tools that I use and paste them in the src of the img tag like this:

<img alt="C" src="https://img.shields.io/badge/-C-283593?style=flat-square&logo=c&logoColor=white">

And this will generate a badge for my tool. The badge is a clickable item. So, if I click on the badge it will open up a new page showing the badge. To avoid this scenario, I am going to wrap the img tag with an a tag like below:

<a href="#">
    <img alt="C" src="https://img.shields.io/badge/-C-283593?style=flat-square&logo=c&logoColor=white">
</a>

Now, if I click on the badge, I will still be on the same page. The rest of the code for this section is given below:

<!-- Favorite Tools -->
## 🛠️ My Favorite Tools
 <h3>👨‍💻 Programming Languages</h3>
 <p>
  <a href="#"><img alt="C" src="https://img.shields.io/badge/-C-283593?style=flat-square&logo=c&logoColor=white"></a>
  <a href="#"><img alt="C++" src="https://img.shields.io/badge/-C++-00549D?style=flat-square&logo=cplusplus&logoColor=white"></a>
  <a href="#"><img alt="HTML" src="https://img.shields.io/badge/-HTML-E34F26.svg?style=flat-square&logo=html5&logoColor=white"></a>
  <a href="#"><img alt="CSS" src="https://img.shields.io/badge/-CSS-264de4.svg?style=flat-square&logo=css3&logoColor=white"></a>
  <a href="#"><img alt="JavaScript" src="https://img.shields.io/badge/-JavaScript-F7DF1E.svg?style=flat-square&logo=javascript&logoColor=black"></a>
  <a href="#"><img alt="TypeScript" src="https://img.shields.io/badge/TypeScript-007ACC.svg?logo=typescript&logoColor=white"></a>
  <a href="#"><img alt="Markdown" src="https://img.shields.io/badge/-Markdown-000000.svg?style=flat-square&logo=markdown&logoColor=white"></a>
  <a href="#"><img alt="Node.js" src="https://img.shields.io/badge/Node.js-43853D.svg?style=flat-square&logo=node.js&logoColor=white"></a>
  <a href="#"><img alt="Python" src="https://img.shields.io/badge/Python-14354C.svg?style=flat-square&logo=python&logoColor=yellow"></a>
  <a href="#"><img alt="SQL" src="https://custom-icon-badges.demolab.com/badge/SQL-025E8C.svg?style=flat-square&logo=database&logoColor=white"></a>
 </p>
 <h3>🧰 Frameworks and Libraries</h3>
 <p>
  <a href="#"><img alt="Bootstrap" src="https://img.shields.io/badge/Bootstrap-7952B3.svg?style=flat-square&logo=bootstrap&logoColor=white"></a>
  <a href="#"><img alt="Material Design" src="https://img.shields.io/badge/Material%20Design-0081CB.svg?style=flat-square&logo=material-design&logoColor=white"></a>
  <a href="#"><img alt="Material UI" src="https://img.shields.io/badge/Material--UI-0081CB?style=flat-square&logo=material-ui&logoColor=white"></a>
  <a href="#"><img alt="Styled Component" src="https://img.shields.io/badge/styled--components-DB7093?style=flat-square&logo=styled-components&logoColor=white"></a>
  <a href="#"><img alt="Express.js" src="https://img.shields.io/badge/Express.js-404d59.svg?style=flat-square&logo=express&logoColor=white"></a>
  <a href="#"><img alt="React" src="https://img.shields.io/badge/React-20232a.svg?style=flat-square&logo=react&logoColor=%2361DAFB"></a>
  <a href="#"><img alt="React Native" src="https://img.shields.io/badge/React%20Native-20232a.svg?style=flat-square&logo=react&logoColor=%2361DAFB"></a>
  <a href="#"><img alt="Gatsby" src="https://img.shields.io/badge/Gatsby-663399?style=flat-square&logo=gatsby&logoColor=white"></a>
  <a href="#"><img alt="redux" src="https://img.shields.io/badge/-Redux-764ABC?style=flat-square&logo=redux&logoColor=white"></a>
  <a href="#"><img alt="Angular" src="https://img.shields.io/badge/Angular-dd1b16.svg?style=flat-square&logo=angular&logoColor=white"></a>
  <a href="#"><img alt="Terraform" src="https://img.shields.io/badge/Terraform-000000.svg?style=flat-square&logo=terraform&logoColor=%23844FBA"></a>
 </p>
 <h3>🗄️ Databases and Cloud Hosting</h3>
  <a href="#"><img alt="GitHub Pages" src="https://img.shields.io/badge/GitHub%20Pages-327FC7.svg?style=flat-square&logo=github&logoColor=white"></a>
  <a href="#"><img alt="Heroku" src="https://img.shields.io/badge/Heroku-430098.svg?style=flat-square&logo=heroku&logoColor=white"></a>
  <a href="#"><img alt="MongoDB" src ="https://img.shields.io/badge/MongoDB-4ea94b.svg?style=flat-square&logo=mongodb&logoColor=white"></a>
  <a href="#"><img alt="MySQL" src="https://img.shields.io/badge/MySQL-00f.svg?style=flat-square&logo=mysql&logoColor=white"></a>
  <a href="#"><img alt="Notion" src="https://img.shields.io/badge/Notion-010101.svg?style=flat-square&logo=notion&logoColor=white"></a>
  <a href="#"><img alt="AWS" src="https://img.shields.io/badge/AWS-010101.svg?style=flat-square&logo=amazon&logoColor=%23FF9900"></a>
 <h3>💻 Software and Tools</h3>
 <p>
  <a href="#"><img alt="Visual Studio Code" src="https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=flat-square&logo=visual-studio-code&logoColor=white"></a>
  <a href="#"><img alt="Postman" src="https://img.shields.io/badge/Postman-FF6C37?style=flat-square&logo=postman&logoColor=white"></a>
  <a href="#"><img alt="Git" src="https://img.shields.io/badge/Git-F05033.svg?style=flat-square&logo=git&logoColor=white"></a>
  <a href="#"><img alt="GitHub" src="https://img.shields.io/badge/GitHub-000000.svg?style=flat-square&logo=github&logoColor=white"></a>
  <a href="#"><img alt="GitHub Desktop" src="https://img.shields.io/badge/GitHub%20Desktop-8034A9.svg?style=flat-square&logo=github&logoColor=white"></a>
  <a href="#"><img alt="GitLab" src="https://img.shields.io/badge/GitLab-000000.svg?style=flat-square&logo=gitlab&logoColor=FC6D27"></a>
  <a href="#"><img alt="Google Sheets" src="https://img.shields.io/badge/Sheets-34A853.svg?style=flat-square&logo=google%20sheets&logoColor=white"></a>
  <a href="#"><img alt="Stack Overflow" src="https://img.shields.io/badge/-Stack%20Overflow-FE7A16?style=flat-square&logo=stack-overflow&logoColor=white"></a>
  <a href="#"><img alt="Figma" src="https://img.shields.io/badge/-Figma-000000?style=flat-square&logo=figma&logoColor=white"></a>
  <a href="#"><img alt="OBS Studio" src="https://img.shields.io/badge/-OBS-302E31?style=flat-square&logo=obs-studio&logoColor=white"></a>
  <a href="#"><img alt="Jira" src="https://img.shields.io/badge/Jira-0052CC?style=flat-square&logo=Jira&logoColor=white"></a>
  <a href="#"><img alt="Canva" src="https://img.shields.io/badge/Canva-%2300C4CC.svg?&style=flat-square&logo=Canva&logoColor=white"></a>
  <a href="#"><img alt="Clodflare" src="https://img.shields.io/badge/Cloudflare-F38020?style=flat-square&logo=Cloudflare&logoColor=white"></a>
 </p>

The final look of the Favorite Tools section:

📈GitHub Stats

This is the last section where I am going to add various github activity cards.

1. For starters, I am going to use the github-readme-streak-stats repo to show the contributions, current streak, and longest streak of my github profile. There are multiple themes available for this card and if you want you can customize your own by heading to this link.

    <!-- Github Activities -->
    ## 📈 Github Stats
    <h3>🔥 Streak Stats</h3>
    <a href="https://github.com/DenverCoder1/github-readme-streak-stats">
        <p>
            <img src="https://streak-stats.demolab.com?user=SuriyaTasmimDisha&theme=monokai-metallian&mode=weekly&fire=DD2727">
        </p>
    </a>
   

2. After this, I am going to use the github-readme-stats repo to show dynamically generated github stats for my github repo. This card also has customization options.

    <h3>💻 GitHub Profile Stats</h3>
    <a href="https://github.com/anuraghazra/github-readme-stats">
        <img alt="SuriyaDisha's Github Stats" src="https://denvercoder1-github-readme-stats.vercel.app/api/?username=SuriyaTasmimDisha&show_icons=true&include_all_commits=true&count_private=true&theme=react&hide_border=true&bg_color=1F222E&title_color=F85D7F&icon_color=F8D866" height="192px">
    </a>
   

3. Also, I am going to use the same repo to add the top language card to my profile.

    <a href="https://github.com/anuraghazra/github-readme-stats">
        <img alt="SuriyaDisha's Top Languages" src="https://github-readme-stats.vercel.app/api/top-langs/?username=SuriyaTasmimDisha&langs_count=8&layout=compact&theme=react&hide_border=true&bg_color=1F222E&title_color=F85D7F&icon_color=F8D866&hide=Jupyter%20Notebook" height="192px">
    </a>
   

4. Finally, I am going to add a github activity graph using this github-readme-activity-graph repo. This graph will show all of my activities for the last 31 days.

    <a href="https://github.com/ashutosh00710/github-readme-activity-graph">
        <img alt="SuriyaDisha's Activity Graph" src="https://github-readme-activity-graph.cyclic.app/graph/?username=SuriyaTasmimDisha&bg_color=1F222E&color=F8D866&line=F85D7F&point=FFFFFF&hide_border=true">
    </a>
   

The final look of the GitHub Stats section:

I hope you have found this blog helpful and if you follow along you will be to create an amazing github profile for yourself. So thank you for checking out this blog. If you have any further questions, please let me know. I would be happy to help!

Let’s assume, you have a budget to spend USD 100 per month. You are checking your usage bills daily and it’s way below the threshold. Everything is fine so far. One day, mistakenly and unknowingly, you or your developers start running an AWS service and the usage bill crossed your threshold limit. By the time you get to know about this, the bill is already way over USD 100. This type of situation is very common and it can lead you or your company to a huge financial crisis. But, you can avoid this kind of crisis, by simply creating an AWS billing alarm.

AWS billing alarm will send you notifications whenever it crosses your threshold limit. And, in this article, I am going to show you how you can set up your AWS billing alarm step by step.

Prerequisites:

1. AWS account

   Note: If you don’t have an AWS account yet, you can follow this AWS - Create Your Free Account In 7 Easy Steps guide and create one.

2. Signed in as an AWS root user or have proper IAM permission.

Important: After signing into the AWS account you need to select US East (N. Virginia) region. All the billing metric data including estimated charges for every AWS service that you use and the estimated overall total of your AWS charges are stored in this region. So, whenever you are performing any creation, modification, or deletion of billing, you need to be in this region.

Enable Billing Alarm Monitoring

1. Sign in to AWS Management Console.

2. Click on the account name at the top right corner and select Billing Dashboard from the options.

1. Choose Billing Preferences from the navigation pane.

1. In the billing preferences page, select Receive Billing Alerts and choose Save Preferences.

Important:

• After enabling the billing alert, it is not possible to stop data collection. But you can delete the billing alarms at any time.

• After enabling the billing alert for the first time, it can take about 15 minutes to get a view of the billing data and create any billing alarms.

Creating a Billing Alarm

1. Go to AWS Cloudwatch.

2. Expand Alarm and select All alarms from the navigation pane.

1. Choose Create Alarm.

1. Click on Select metric.

1. From the Browse tab choose the Billing option.

1. After choosing the Billing option, choose Total Estimate Charge.

1. Select the row for estimated charges and then choose Select matrix.

1. In the Specify metric and conditions:

   • For the Threshold type, select Static.

   • For the Whenever EstimatedCharges is…, choose Greater> threshold.

   • For the than…, input a threshold value that will trigger the billing alarm.

   • Choose Next.

1. In the Configure actions Notification block, for the Alarm state trigger, select In alarm state, which will trigger the AWS SNS to send you the notification.

2. For the Send a notification to the following SNS topic, select an existing SNS topic or create a new one. If you choose to create a new SNS topic, then:

*   For the **Create a new topic…**, input a topic name.

*   For the **Email endpoints that will receive the notification…,** you can add one or multiple email addresses.

*   Choose **Create topic**.

*   Choose **Next.**

Note: If you want to send multiple notifications for the same alarm state or multiple alarm states, select Add notification. After that repeat the steps from 12-14.

Important: After creating the topic, you need to accept the SNS subscription from your email.

1. Add the Alarm name, and select Next.

1. Finally, check all the information in the Preview and create step, then choose Create alarm.

Now if you go to the alarm dashboard, you will see your billing alarm in the table.

Also, you will be able to view the alarm details and metrics, if you click on the alarm name.

Important: In the AWS Free Tier, you can use up to 10 alarms and 1,000 e-mail notifications each month for free.

So, I hope you were able to successfully create a billing alarm. Now, have more fun with AWS. Thank you for reading!!!

Let’s have a look at the benefits of using AWS at a glance:

• Cost-effective as you will be paying only for the computing power, storage, and other services on a usage base.
• Flexible with selecting the operating system, programming language, database, web application platform, and other services that are needed.
• Reliable as it has a secure and global computing infrastructure.
• Scalable and super Available.
• Secure as AWS provides end to end approach with their physical, software, and operational measures.
• Easy to use.

Now, if you are convinced to use AWS for your business, yourself, or simply for playing around, you must first create an account with AWS in order to get started. In this article, I'll walk you through the process of setting up your account in accordance with AWS Best Practices. So, keep reading this article to the very end!

Note: Creating an AWS account is free and gives you immediate access to the AWS Free Tier.

Step 1 - Sign up for AWS:

1. Go to AWS Sign Up page.

2. Fill up the Root user email address. This email will have all the administrative access in AWS.

   Best Practice: According to AWS, for business purposes, use a business email address (e.g. it.admins@example.com).

3. Fill up the AWS account name. You'll be able to change it later.

   Best Practice: According to AWS naming conventions, for organization, use organization-purpose-environment (e.g. abc-device_management-dev), and for personal, use first_name-last_name-purpose (e.g. john-doe-testaccount).

4. Click on the Verify email address button.

Step 2 - Verify email address:

1. Check your inbox. If you can’t find the email, then check your spam folder. It can take up to 5 minutes for the email to arrive.

   

2. Upon getting the email, copy the code. Then go back to the confirmation page and paste the code. Finally, hit the Verify button.

   

Step 3 - Set up root user password:

1. Enter Root user password and Confirm root user password.
2. Press Continue.

Step 4 - Set up contact information:

1. Choose the plan. If you are creating the account for business purposes, then select the Business option or else select the Personal option. As I am creating for my personal usage so I am going to choose the personal option.
2. Enter your Full Name.

3. Enter your Phone Number.

   Best Practice: For business, make sure to enter your company phone number.

4. Enter your Country or Region, Address, City, State, Province, or Region, and Postal Code one by one.

5. Read and accept the AWS Customer Agreement.
6. Recheck the information and press Continue.

Step 5 - Set up billing information:

1. Enter your Credit or Debit card number.
2. Enter the Expiration date of your Credit or Debit card.
3. Enter the Cardholder’s name.
4. Select your contact address as your billing address. If you want to input a different address for billing, then select Use a new address and fill in the necessary information.
5. Recheck the information and press Verify.

Important: You need to add valid billing information, or else you won’t be able to proceed with the account creation. Also, AWS will mortgage $1 USD or an equivalent amount in local currency until the completion of billing information verification. The billing information verification process can take 3-5 days to complete. When it is completed, AWS will return your money.

Step 6 - Verify contact number:

1. Select your Country or Region Code.
2. Enter your Mobile phone number.
3. Enter the correct CAPTCHA.

4. Press Send SMS button.

   

5. Wait for a few minutes to get the verification code for your given number.

6. After receiving the code, enter it and press the Verify button.

   

Step 7 - Select a support plan:

1. Select your desired Support Plan.
2. Press the Complete sign up button.

Congratulations! You have completed the final step!!!

Account activation email

Although you are presented with a Congratulations! message, still a button saying Complete Sign Up is showing at the top right corner of the page.

Well, Don’t get worried. AWS is simply activating your account and within 24 hours you will get an email from them. After you get the activation email, you will have access to all AWS services.

So, when your AWS account is ready start exploring and start building some awesome projects!!!

Important: If you don’t get the email within the time period:

• Check all the steps for the signup process.
• Check the information associated with the payment method.
• Contact your bank to see if you have proper permission.
• Check your email for additional information.
• Contact AWS Support for help.