<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Siwalik Mukherjee</title>
    <description>The latest articles on DEV Community by Siwalik Mukherjee (@siwalikm).</description>
    <link>https://dev.to/siwalikm</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F16591%2Fe3e6e43f-9afd-40a0-97a4-9b32e9424785.jpg</url>
      <title>DEV Community: Siwalik Mukherjee</title>
      <link>https://dev.to/siwalikm</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/siwalikm"/>
    <language>en</language>
    <item>
      <title>I moved to Europe for a tech job, mid pandemic</title>
      <dc:creator>Siwalik Mukherjee</dc:creator>
      <pubDate>Sun, 21 Aug 2022 19:29:34 +0000</pubDate>
      <link>https://dev.to/siwalikm/i-moved-to-europe-for-a-tech-job-mid-pandemic-4hi2</link>
      <guid>https://dev.to/siwalikm/i-moved-to-europe-for-a-tech-job-mid-pandemic-4hi2</guid>
      <description>&lt;p&gt;I moved from India to Europe around one year back for a new job. In this post, I will share my experiences with relocating to a new country and why it might be the best thing you can do for yourself and your career.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--jrhd2gbm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://images.unsplash.com/photo-1493377179964-b26a1ba38b1e%3Fixlib%3Drb-1.2.1%26ixid%3DMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8%26auto%3Dformat%26fit%3Dcrop%26w%3D1470%26q%3D80" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--jrhd2gbm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://images.unsplash.com/photo-1493377179964-b26a1ba38b1e%3Fixlib%3Drb-1.2.1%26ixid%3DMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8%26auto%3Dformat%26fit%3Dcrop%26w%3D1470%26q%3D80" alt="photo of blush pink cherry blossom tree" title="Photo by @_entreprenerd on Unsplash" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Some background before we dive into the deeps
&lt;/h2&gt;

&lt;p&gt;For some years now, every December, I would write in my Vision and Values journal about how I would want the next year to be and the best things that can happen for my career, well-being etc. For 2021, among others, I had a point about relocating outside India for a tech job and exploring new cultures. At least if not move, give my best shot at it.&lt;/p&gt;

&lt;p&gt;Around March last year, it was officially one year since I permanently moved back to my parent's house (thanks to Covid). Arguably it was the best bonding time I had with them in years, and my heart was whole.&lt;/p&gt;

&lt;p&gt;But also, I started looking for a job change as I felt overworked at my current work and wanted more challenges and exposure in my career. So I started applying to smaller Indian startups for practice as my interviewing skills were rusty. After attending many interviews for a month, it felt like the right time to apply for jobs abroad.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Germany or even Europe?
&lt;/h2&gt;

&lt;p&gt;After much research, I was sure I wanted to explore Europe. For me EU seemed more lucrative than my second preference, US as Europe seemed to score better in what I was looking for.&lt;/p&gt;

&lt;p&gt;To name a few,&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Europe is known for better work-life balance&lt;/li&gt;
&lt;li&gt;Health care was almost free in Europe compared to the States&lt;/li&gt;
&lt;li&gt;Getting residence options for expats were more flexible in EU&lt;/li&gt;
&lt;li&gt;Moving to an EU country would be a travel pass to the whole Europe&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I was mainly interested in western European countries (except the UK, yeah due to Brexit). So I started looking at tech companies mainly in Germany, Netherlands and France in that order.&lt;/p&gt;

&lt;p&gt;After few months of interviewing actively, I ended up with two offers in Germany. I decided to drop all other ongoing interviews in favour of one of the German offers as I vibed greatly with their company culture and energy.&lt;/p&gt;

&lt;p&gt;There were a few more reasons which helped me choose Germany despite knowing you need to learn a new language to survive.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The position I chose was in Berlin. Berlin, the most racially and culturally diverse city in Germany(if not EU), had a significant English-speaking population. Moreover, learning german wasn't a criterion as the primary work language in tech would still be English.&lt;/li&gt;
&lt;li&gt;The history, the art and the hipster vibe of Berlin seemed very, very palatable to my taste.&lt;/li&gt;
&lt;li&gt;Germany has one of the best health and taxpayer benefits in Europe, smoother PR options, an ever-growing tech industry with most FAANG companies, and so many world-class tech startups.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  After a year, was it worth it?
&lt;/h2&gt;

&lt;p&gt;Before moving, I was clear about the best and worst-case scenarios. As people say, the grass is always greener on the other side; Germany looked like a vast green flag for this new chapter. But what if it was not?&lt;/p&gt;

&lt;p&gt;Sometimes I wondered if I find it difficult to adjust in Germany or if the company wasn't a right fit.&lt;br&gt;
I knew I was just one flight and at-max a few months of job search away from moving back and finding some work in India to be able to pay my bills. Reframing my thoughts and establishing a safety net or plan B helped me feel calm with anxieties and enjoy the migration process more.&lt;/p&gt;

&lt;p&gt;Looking back a year later, I feel I could have missed out on so much life experience and learning if I had given in to the demons in my head. The ones who tell you maybe you're not prepared or not good enough to take such a giant leap.&lt;/p&gt;

&lt;p&gt;If I could go back in time, 10/10, I'll retake the same chances.&lt;/p&gt;

&lt;h2&gt;
  
  
  Sailing solo and life outside work
&lt;/h2&gt;

&lt;p&gt;It has been a roller coaster ride so far, but luckily, there are more ups than downs.&lt;/p&gt;

&lt;h3&gt;
  
  
  Work-life balance
&lt;/h3&gt;

&lt;p&gt;Most European countries are very particular about work-life balance, which means you're done with your 8 hours of work by 5 pm and have the rest of the evening to yourself. That leaves you with ample time for yourself to be with friends, indulge in hobbies or maybe sit in the park and look at the river.&lt;/p&gt;

&lt;h3&gt;
  
  
  Quality me-time
&lt;/h3&gt;

&lt;p&gt;I'll be honest, this experience has been like fresh air to me. Having enough time for myself let me be in better mental space and health. In the past months, I took a long break from social media and spent more times outdoors. Germany has beautiful parks, lakes and hiking trails where I'll often spend my lazy weekends. In other days, I would explore the city, or try out some cafes.&lt;/p&gt;

&lt;p&gt;Inside my tiny studio, I started learning how to grow plants and not kill them for once. I also started a Twitch channel where I stream live coding sessions from time to time for fun. Also in this short span I travelled to two new countries, Hungary and Lithuania, with my budget savings.&lt;/p&gt;

&lt;p&gt;Just in the last 12 months I realised I had read more books, walked more steps and played more hours of guitar than maybe the last decade, back home.&lt;/p&gt;

&lt;h2&gt;
  
  
  Take it easy - everything isn't rosy
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;bendmorris on Nov 9, 2016 @ HN | A man was walking along a river bank when he saw another man on the opposite side. "Hello!" he called out, "how do you get to the other side of the river?" The man called out in response, "you are on the other side of the river!"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Back in India, I had already stayed away from my hometown for university and job for nearly eight years. And being a decent cook and organised person(well, messy desks don't count), living solo as an expat was one of my most minor concerns. But I discounted the fact that you're in a country now and it can get pretty lonely sometimes.&lt;/p&gt;

&lt;p&gt;Making friends as an adult is already hard. More so in Germany, as people are very private and respect their and others' personal spaces, making it a bit overwhelming for random talks and reaching out to someone new.&lt;/p&gt;

&lt;p&gt;Sometimes when I go out for a walk or to the supermarket to grab some groceries, I would look around and get this alienated feeling, and all the good stuff would fade away in a moment. But then again, I learnt this was pretty normal as we are social animals, and we long for nothing more than our herd. Which I didn't have at that moment.&lt;/p&gt;

&lt;p&gt;After the first few months, this started getting better. I joined some community of expats and got to meet some great people from Reddit groups like r/berlinsocialclub and on telegram. Absorbing a new culture, history and tradition can take years, so taking it easy is the only way.&lt;/p&gt;

&lt;h2&gt;
  
  
  Gratitude
&lt;/h2&gt;

&lt;p&gt;I know for someone who has already done something, it's always easy to say, "well, that was very easy". But a lot of things played a crucial part in this journey.&lt;/p&gt;

&lt;p&gt;For example, my university degree allowed me to apply to many jobs, which was a primary criterion for getting an EU BlueCard.&lt;/p&gt;

&lt;p&gt;I'm looking at you, people of Twitter with hot takes like "don't go to college for a tech job". Well, if you are from a third-world country like me, going to college or not might be the thin line between getting a US/UE Visa or not.&lt;/p&gt;

&lt;p&gt;Moreover, all the exposures I had from the previous high-pressure jobs I've complained about above gave me a lot of learning (and maybe reasons) which helped me prepare for this move.&lt;/p&gt;

&lt;p&gt;Last but not the least, I feel very fortunate and grateful to be able to connect all the dots in my life so far, to travel half way around the world and live the kind of life I could only dream of a year back.&lt;/p&gt;




&lt;p&gt;Would you like to read something more tech-focused on my preparations and move to Europe? &lt;a href="https://www.twitter.com/siwalikm" rel="noopener noreferrer"&gt;&lt;strong&gt;Let me know on Twitter&lt;/strong&gt;&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>expat</category>
      <category>motivation</category>
      <category>travel</category>
      <category>berlin</category>
    </item>
    <item>
      <title>Async programming basics every JS developer should know</title>
      <dc:creator>Siwalik Mukherjee</dc:creator>
      <pubDate>Thu, 14 Jun 2018 17:10:56 +0000</pubDate>
      <link>https://dev.to/siwalikm/async-programming-basics-every-js-developer-should-know-in-2018-a9c</link>
      <guid>https://dev.to/siwalikm/async-programming-basics-every-js-developer-should-know-in-2018-a9c</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;This article is aimed at people starting out with asynchronous coding in javascript so we would keep things simple by avoiding big words, arrow functions, template literals etc.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Callbacks are one of the most used concepts of modern functional javascript and if you've ever used jQuery, chances are you've already used callbacks without even knowing (we will get back to it in a minute).&lt;/p&gt;

&lt;h2&gt;
  
  
  What the Heck are &lt;strong&gt;Callback Functions&lt;/strong&gt;?
&lt;/h2&gt;

&lt;p&gt;A callback function in its simplest terms is a function that is passed to another function, as a parameter. The callback function then gets executed inside the function where it is passed and the final result is returned to the caller.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// I'm sure you've seen a JQuery code snippet like this at some point in your life!&lt;/span&gt;
&lt;span class="c1"&gt;// The parameter we're passing to the `click` method here is a callback function.&lt;/span&gt;

&lt;span class="nf"&gt;$&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;button&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;click&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;alert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;clicked on button`);
});
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Simple right? Now let us implement a callback function to get scores on levelling up in an imaginary game.&lt;/p&gt;


&lt;div class="runkit-element"&gt;
  &lt;code&gt;
    
  &lt;/code&gt;
  &lt;code&gt;
    
// levelOne() is called a high-order function because
// it accepts another function as its parameter.
function levelOne(value, callback) {
    var newScore = value + 5;
    callback(newScore);
}

// Please note that it is not mandatory to reference the callback function (line #3) as callback, it is named so just for better understanding.

function startGame() {
    var currentScore = 5;
    console.log('Game Started! Current score is ' + currentScore);
        // Here the second parameter we're passing to levelOne is the
        // callback function, i.e., a function that gets passed as a parameter.
        levelOne(currentScore, function (levelOneReturnedValue) {
            console.log('Level One reached! New score is ' + levelOneReturnedValue);
        });
}

startGame();

  &lt;/code&gt;
&lt;/div&gt;



&lt;p&gt;Once inside &lt;code&gt;startGame()&lt;/code&gt; function, we call the &lt;code&gt;levelOne()&lt;/code&gt; function with parameters as currentScore and our callback function().&lt;/p&gt;

&lt;p&gt;When we call &lt;code&gt;levelOne()&lt;/code&gt; inside &lt;code&gt;startGame()&lt;/code&gt; function's scope, in an asynchronous way, javascript executes the function &lt;code&gt;levelOne()&lt;/code&gt; and the main thread keeps on going ahead with the remaining part of our code.&lt;/p&gt;

&lt;p&gt;This means we can do all kind of operations like fetching data from an API, doing some math etc., everything which can be time-consuming and hence we won't be blocking our main thread for it. Once the function(&lt;code&gt;levelOne()&lt;/code&gt;) has done with its operations, it can execute the callback function we passed earlier.&lt;/p&gt;

&lt;p&gt;This is an immensely useful feature of functional programming as callbacks lets us handle code asynchronously without us have to wait for a response. For example, you can make an ajax call to a slow server with a callback func. and completely forget about it and continue with your remaining code. Once that ajax call gets resolved, the callback function gets executed automatically.&lt;/p&gt;

&lt;p&gt;But Callbacks can get nasty if there are multiple levels of callbacks to be executed in a chain. Let's take the above example and add a few more levels to our game.&lt;/p&gt;


&lt;div class="runkit-element"&gt;
  &lt;code&gt;
    
  &lt;/code&gt;
  &lt;code&gt;
    
function levelOne(value, callback) {
    var newScore = value + 5;
    callback(newScore);
}

function levelTwo(value, callback) {
    var newScore = value + 10;
    callback(newScore);
}

function levelThree(value, callback) {
    var newScore = value + 30;
    callback(newScore);
}

// Note that it is not needed to reference the callback function as callback when we call levelOne(), levelTwo() or levelThree(), it can be named anything.

function startGame() {
    var currentScore = 5;
    console.log('Game Started! Current score is ' + currentScore);
    levelOne(currentScore, function (levelOneReturnedValue) {
        console.log('Level One reached! New score is ' + levelOneReturnedValue);
        levelTwo(levelOneReturnedValue, function (levelTwoReturnedValue) {
            console.log('Level Two reached! New score is ' + levelTwoReturnedValue);
            levelThree(levelTwoReturnedValue, function (levelThreeReturnedValue) {
                console.log('Level Three reached! New score is ' + levelThreeReturnedValue);
            });
        });
    });

}

startGame();

  &lt;/code&gt;
&lt;/div&gt;
 

&lt;p&gt;Wait, what just happened? We added two new functions for level logic, &lt;code&gt;levelTwo()&lt;/code&gt; and &lt;code&gt;levelThree()&lt;/code&gt;. Inside levelOne's callback(line #22), called levelTwo() function with a callback func. and levelOne's callback's result. And repeat the same thing for levelThree() function again.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe4datwnyu6ag078vvfs9.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe4datwnyu6ag078vvfs9.jpg" alt="callback meme" width="744" height="481"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now just imagine what this code will become if we had to implement the same logic for another 10 levels. Are you already panicking? Well, I am! As the number of nested callback functions increases, it becomes tougher to read your code and even harder to debug.&lt;/p&gt;

&lt;p&gt;This is often affectionately known as a &lt;strong&gt;callback hell&lt;/strong&gt;. Is there a way out of this callback hell?&lt;/p&gt;
&lt;h2&gt;
  
  
  I &lt;strong&gt;Promise&lt;/strong&gt; there's a better way
&lt;/h2&gt;

&lt;p&gt;Javascript started supporting Promises from ES6. Promises are basically objects representing the eventual completion (or failure) of an asynchronous operation, and its resulting value.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// This is how a sample promise declaration looks like. The promise constructor&lt;/span&gt;
&lt;span class="c1"&gt;// takes one argument which is a callback with two parameters, `resolve` and&lt;/span&gt;
&lt;span class="c1"&gt;// `reject`. Do something within the callback, then call resolve if everything&lt;/span&gt;
&lt;span class="c1"&gt;// worked, otherwise call reject.&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;promise&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;reject&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// do a thing or twenty&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="cm"&gt;/* everything turned out fine */&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Stuff worked!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;reject&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nc"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;It broke&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Let us try to rewrite our callback hell example with promises now.&lt;br&gt;
&lt;/p&gt;
&lt;div class="runkit-element"&gt;
  &lt;code&gt;
    
  &lt;/code&gt;
  &lt;code&gt;
    
function levelOne(value) {
    var promise, newScore = value + 5;
    return promise = new Promise(function(resolve) {
        resolve(newScore);
    });
}

function levelTwo(value) {
    var promise, newScore = value + 10;
    return promise = new Promise(function(resolve) {
        resolve(newScore);
    });
}

function levelThree(value) {
    var promise, newScore = value + 30;
    return promise = new Promise(function(resolve) {
        resolve(newScore);
    });
}

var startGame = new Promise(function (resolve, reject) {
    var currentScore = 5;
    console.log('Game Started! Current score is ' + currentScore);
    resolve(currentScore);
});

// The response from startGame is automatically passed on to the function inside the subsequent then
startGame.then(levelOne)
.then(function (result) {
    // the value of result is the returned promise from levelOne function
    console.log('You have reached Level One! New score is ' + result);
    return result;
})
.then(levelTwo).then(function (result) {
    console.log('You have reached Level Two! New score is ' + result);
    return result;
})
.then(levelThree).then(function (result) {
    console.log('You have reached Level Three! New score is ' + result);
});

  &lt;/code&gt;
&lt;/div&gt;



&lt;p&gt;We have re-wrote our level(One/Two/Three) functions to remove callbacks from the function param and instead of calling the callback function inside them, replaced with promises.&lt;/p&gt;

&lt;p&gt;Once startGame is resolved, we can simply call a &lt;code&gt;.then()&lt;/code&gt; method on it and handle the result. We can chain multiple promises one after another with &lt;code&gt;.then() chaining&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;This makes the whole code much more readable and easier to understand in terms of what is happening, and &lt;code&gt;then&lt;/code&gt; what happens next and so on.&lt;/p&gt;

&lt;p&gt;The deep reason why promises are often better is that they're more composable, which roughly means that combining multiple promises "just works" while combining multiple callbacks often doesn't. &lt;/p&gt;

&lt;p&gt;Also when we have a single callback versus a single promise, it's true there's no significant difference. It's when you have a zillion callbacks versus a zillion promises that the promise-based code tends to look much nicer.&lt;/p&gt;

&lt;p&gt;Okay, we've escaped successfully from the callback hell and made our code much readable with promises. But what if I told you there's a way to make it cleaner and more readable?&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;(a)Wait&lt;/strong&gt; for it
&lt;/h2&gt;

&lt;p&gt;Async- await is being supported in javascript since ECMA2017. They allow you to write promise-based code as if it were synchronous code, but without blocking the main thread. They make your asynchronous code less "clever" and more readable.&lt;/p&gt;

&lt;p&gt;To be honest, async-awaits are nothing but syntactic sugar on top of promises but it makes asynchronous code look and behaves a little more like synchronous code, that's precisely where it's power lies.&lt;/p&gt;

&lt;p&gt;If you use the &lt;code&gt;async&lt;/code&gt; keyword before a function definition, you can then use &lt;code&gt;await&lt;/code&gt; within the function. When you &lt;code&gt;await&lt;/code&gt; a promise, the function is paused in a non-blocking way until the promise settles. If the promise fulfils, you get the value back. If the promise rejects, the rejected value is thrown.&lt;/p&gt;

&lt;p&gt;Let us see now how our game logic looks once we rewrite it with async-awaits!&lt;/p&gt;


&lt;div class="runkit-element"&gt;
  &lt;code&gt;
    
  &lt;/code&gt;
  &lt;code&gt;
    
function levelOne(value) {
    var promise, newScore = value + 5;
    return promise = new Promise(function(resolve) {
        resolve(newScore);
    });
}

function levelTwo(value) {
    var promise, newScore = value + 10;
    return promise = new Promise(function(resolve) {
        resolve(newScore);
    });
}

function levelThree(value) {
    var promise, newScore = value + 30;
    return promise = new Promise(function(resolve) {
        resolve(newScore);
    });
}

// the async keyword tells the javascript engine that any function inside this function having the keyword await, should be treated as asynchronous code and should continue executing only once that function resolves or fails.
async function startGame() {
    var currentScore = 5;
    console.log('Game Started! Current score is ' + currentScore);
    currentScore = await levelOne(currentScore);
    console.log('You have reached Level One! New score is ' + currentScore);
    currentScore = await levelTwo(currentScore);
    console.log('You have reached Level Two! New score is ' + currentScore);
    currentScore = await levelThree(currentScore);
    console.log('You have reached Level Three! New score is ' + currentScore);
}

startGame();

  &lt;/code&gt;
&lt;/div&gt;
 

&lt;p&gt;Immediately our code becomes much more readable but there's more to Async-await.&lt;/p&gt;

&lt;p&gt;Error handling is one of the top features of Async-await which stands out. Finally we can handle both synchronous and asynchronous errors with the same construct with try and catches which was a pain with promises without duplicating try-catch blocks.&lt;/p&gt;

&lt;p&gt;The next best improvement from good old promise world is code debugging. When we write arrow function based promises, we can't set breakpoints inside our arrow functions so debugging is tough at times. But with async-awaits, debugging is just like how you would do a synchronous piece of code.&lt;/p&gt;

&lt;p&gt;I'm sure that by now you have a better understanding of asynchronous programming in javascript. If you have a question, let me know below. If you found this helpful, &lt;a href="https://twitter.com/intent/tweet?text=Checkout%20%22Async%20programming%20basics%20every%20JS%20developer%20should%20know%20in%202018%22%0Aby%20@siwalikm%20%F0%9F%98%8D%20https://dev.to/siwalikm/,sync-programming-basics-every-js-developer-should-know-in-2018-a9c"&gt;give me a shoutout on Twitter&lt;/a&gt;!&lt;/p&gt;

&lt;p&gt;Happy Coding! ✌️&lt;/p&gt;

</description>
      <category>async</category>
      <category>beginners</category>
      <category>webdev</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Mastering Full-stack with Javascript's Superpowers</title>
      <dc:creator>Siwalik Mukherjee</dc:creator>
      <pubDate>Sun, 18 Mar 2018 16:30:53 +0000</pubDate>
      <link>https://dev.to/siwalikm/mastering-full-stack-with-javascripts-superpowers-oin</link>
      <guid>https://dev.to/siwalikm/mastering-full-stack-with-javascripts-superpowers-oin</guid>
      <description>&lt;p&gt;When I used to freelance as a full stack developer during my college, often I would find myself stuck between context switching in terms of practices and different syntaxes in javascript and php. Although I was making some good side cash and had a bunch of happy clients, the code I was writing was not great as it seemed tough to expertise on every aspect of web development at the same time. &lt;/p&gt;

&lt;p&gt;Being a hardcore JS fan  and ardent lover of interfaces, I decided to focus solely on frontend and after freelancing for a few more months, I join a startup as a frontend developer. I was content with my learnings and adventures in the frontend land... until I came across this yesterday ~&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The roles required to design and develop a web solution require a deep&lt;br&gt;
skill set and vast experience in the area of visual design, UI/interaction design,  &lt;a href="https://github.com/kamranahmedse/developer-roadmap#-front-end-roadmap" rel="noopener noreferrer"&gt;front-end development&lt;/a&gt; and  &lt;a href="https://github.com/kamranahmedse/developer-roadmap#-back-end-roadmap" rel="noopener noreferrer"&gt;back-end development&lt;/a&gt;.&lt;br&gt;
Any person who can fill one or more of these 4 roles at a professional&lt;br&gt;
level is an extremely rare commodity.&lt;/p&gt;

&lt;p&gt;However, given that JavaScript has infiltrated all layers of a&lt;br&gt;
technology stack (e.g. React, node.js, express, couchDB, gulp.js&lt;br&gt;
etc...) finding a full-stack JS developer who can code the front-end&lt;br&gt;
and back-end is becoming less mythical. -&lt;a href="https://frontendmasters.com/books/front-end-handbook/2018/practice/myth.html" rel="noopener noreferrer"&gt;Frontend Handbook&lt;br&gt;
'18&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;So I started wondering, why not? I already know frontend, I also manage to write some (crappy but) working backend code in php for my side projects, why not harness my javascript knowledge and become a full stack javascript developer, just by connecting the dots and a bit of learning?&lt;/p&gt;

&lt;p&gt;When it comes to learning, the reason majority of our plans fail is because &lt;code&gt;we don't have an action plan&lt;/code&gt;. And any resolution or goal without a proper plan is bound to fail! So I started there, with the planning.&lt;br&gt;
[fun fact: that's the same reason why our new year resolution's fail!]&lt;/p&gt;

&lt;p&gt;I spent the next day researching on topics and resources one needs to learn in course of this journey to be a full stack developer just by harnessing the superpowers of Javascript. So I created a to-do list which starts at the very basics of javascript and build its way up to the more advance concepts, covering all the tech stacks.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq8xq951s4wxax5knar6t.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq8xq951s4wxax5knar6t.png" alt="Screenshot from notes app" width="800" height="363"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you're a front-end developer looking forward to &lt;em&gt;up your game&lt;/em&gt; or maybe you're already a full-stack developer and want to brush up your skills for an interview or for your next side project, I'm certain, this will be helpful to you.&lt;/p&gt;

&lt;p&gt;I posted the list on Github which you can &lt;a href="https://github.com/siwalikm/Prep-for-Full-Stack-JS" rel="noopener noreferrer"&gt;check it out here&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;In order to stay motivated and track your progress, fork my todo list from Github and commit to your repo with crossed out items, as you progress.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone https://github.com/siwalikm/Prep-for-Full-Stack-JS.git
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;P.S. Remember: The key is to stay motivated.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If possible, start learning along with a friend and maybe build something together along the process. If you're learning alone, reach out to people if you get stuck and try to document your learnings. &lt;/p&gt;

&lt;p&gt;You can tweet me (at &lt;a href="https://twitter.com/siwalikm" rel="noopener noreferrer"&gt;@siwalik&lt;/a&gt;) about your learnings and adventures on this journey or just to say 'Hi'!&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Best of luck to you!&lt;/em&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>node</category>
      <category>fullstack</category>
      <category>webdev</category>
    </item>
    <item>
      <title>What the heck is JWT anyway?</title>
      <dc:creator>Siwalik Mukherjee</dc:creator>
      <pubDate>Sun, 04 Mar 2018 17:28:37 +0000</pubDate>
      <link>https://dev.to/siwalikm/what-the-heck-is-jwt-anyway--47hg</link>
      <guid>https://dev.to/siwalikm/what-the-heck-is-jwt-anyway--47hg</guid>
      <description>&lt;p&gt;In this article we will learn the fundamentals of a JWT token is and how we can benefit from it for authenticating communications between two parties, all of this using vanilla NodeJS and javascript.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;JWT is an abbreviation for JSON Web Token, which is a compact URL-safe means of representing claims to be transferred between two parties. The claims in a JWT are encoded as a JSON object that is digitally signed using JSON Web Signature (JWS). ~ IETF&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Urggh! What?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Simply put, JWT token is a string we pass in the header or url while making a network request to pass data safely and make sure it hasn't been tampered with.&lt;/p&gt;

&lt;p&gt;Example: &lt;a href="http://www.example.com/private/?token=xxxxx.yyyyy.zzzzz" rel="noopener noreferrer"&gt;www.example.com/private/?token=xxxxx.yyyyy.zzzzz&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You might be wondering what's with the token format! JWT tokens consists of three parts separated by dots&lt;br&gt;
&lt;br&gt;
 &lt;code&gt;( . )&lt;/code&gt;&lt;br&gt;
&lt;br&gt;
 which are:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;header.payload.signature
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Let's see the differents parts of a JWT token in details.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Header&lt;/strong&gt;&lt;br&gt;
The header typically consists of two parts: the type of the token, which is JWT, and the hashing algorithm being used, such as HMAC SHA256 or RSA.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;
   &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;alg&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;HS256&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
   &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;typ&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;JWT&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then, this JSON is Base64Url encoded to form the first part of the JWT.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;use strict&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;header&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;alg&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;HS256&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;typ&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;JWT&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;enc_header&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Buffer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;from&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stringify&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;header&lt;/span&gt;&lt;span class="p"&gt;)).&lt;/span&gt;&lt;span class="nf"&gt;toString&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;base64&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// ► "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;2. Payload&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The second part of the token is the payload, which contains the &lt;strong&gt;claims&lt;/strong&gt;. Claims are predefined keys and their values. There are three types of claims: registered, public, and private claims.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Registered claims:&lt;/strong&gt; These are a set of predefined keys which are not mandatory but recommended. Some of them are &lt;strong&gt;iss&lt;/strong&gt; (issuer), &lt;strong&gt;exp&lt;/strong&gt; (expiration time) etc.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Public claims:&lt;/strong&gt; These can be defined at will by those using JWTs. But to avoid collisions they should be defined in the IANA JSON Web Token Registry or be defined as a URI that contains a collision resistant namespace.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Private claims:&lt;/strong&gt; These are the custom key value pairs created to share information between parties that agree on using them and are neither registered or public claims.&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;
   &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;exp&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2019-02-14&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
   &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;message&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;roses are red&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The payload is then Base64Url encoded to form the second part of the JSON Web Token.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;use strict&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;payload&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;exp&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2019-02-14&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;message&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;roses are red&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;enc_payload&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Buffer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;from&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stringify&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;payload&lt;/span&gt;&lt;span class="p"&gt;)).&lt;/span&gt;&lt;span class="nf"&gt;toString&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;base64&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// ► eyJleHAiOiIyMDE5LTAyLTE0IiwibmFtZSI6IkpvaG4gRG9lIn0&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;3. Signature&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;To create the signature part you have to take the encoded header, the encoded payload, a secret, the algorithm specified in the header, and sign that. Too good for us that NodeJS comes with the immensely powerful &lt;a href="https://nodejs.org/api/crypto.html" rel="noopener noreferrer"&gt;Crypto library&lt;/a&gt; out of the box which we will use in our example.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;use strict&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;crypto&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;crypto&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;jwt_secret&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;secret&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="c1"&gt;// enc_header and enc_payload are computed earlier&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;signature&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;crypto&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createHmac&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;sha256&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;jwt_secret&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;update&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;enc_header&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;enc_payload&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;digest&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;base64&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// ► 6C46KAaZGp6RjbSqGllfdQF7g8vXCp02NTSrz-PzeoI&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The signature is used to verify that the sender of the JWT is who it says it is and to ensure that the message wasn't changed along the way.&lt;/p&gt;

&lt;p&gt;The final JWT token looks like this&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;token&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;enc_header&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;.&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;enc_payload&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;.&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;signature&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="c1"&gt;// ► eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOiIyMDE5LTAyLTE0IiwibWVzc2FnZSI6InJvc2VzIGFyZSByZWQifQ.0u-mkgLo5479CPjJJ4mXCwn2RW4dFT12fiYiopRWsZw&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Something important to remember here is that JWT tokens are used for authentication and not encryption, so even without knowing the secret key, someone can read your header and payload data. &lt;/p&gt;

&lt;p&gt;But upon receiving the token you can sign the header and payload again with your secret key and compare it with the received signature to detect tampering of token or the message.&lt;/p&gt;

&lt;p&gt;A good place to start will be by going to this &lt;a href="https://jwt.io/#debugger" rel="noopener noreferrer"&gt;online JWT debugger at jwt.io&lt;/a&gt; and play around with the the token we just generated above. &lt;/p&gt;

&lt;p&gt;Hi! I'm &lt;a href="https://twitter.com/intent/follow?user_id=4708084272" rel="noopener noreferrer"&gt;@Siwalik&lt;/a&gt;! If you liked this article, follow me on twitter to know about my latest tech expeditions and side projects! 🙌&lt;/p&gt;

</description>
      <category>jwt</category>
      <category>authentication</category>
      <category>javascript</category>
      <category>node</category>
    </item>
  </channel>
</rss>
