<?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: Asad Mahmood</title>
    <description>The latest articles on DEV Community by Asad Mahmood (@azazeloss).</description>
    <link>https://dev.to/azazeloss</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%2F665209%2F3c4ec51e-2e51-4c6b-ba78-9fbbd886fbbb.jpeg</url>
      <title>DEV Community: Asad Mahmood</title>
      <link>https://dev.to/azazeloss</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/azazeloss"/>
    <language>en</language>
    <item>
      <title>Middleware in ExpressJS</title>
      <dc:creator>Asad Mahmood</dc:creator>
      <pubDate>Tue, 12 Apr 2022 16:01:00 +0000</pubDate>
      <link>https://dev.to/azazeloss/middleware-in-expressjs-2p8l</link>
      <guid>https://dev.to/azazeloss/middleware-in-expressjs-2p8l</guid>
      <description>&lt;h1&gt;
  
  
  What are middlewares(hoping that this is the plural of middleware)?
&lt;/h1&gt;

&lt;p&gt;In the simplest of words, a middleware function is that function that gets executed between a request coming in and a response going out. We use middlewares to modularize our code, make it readable, increase reusability and much more.&lt;/p&gt;

&lt;h1&gt;
  
  
  Types of middleware in express
&lt;/h1&gt;

&lt;p&gt;There are 5 types of middleware:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Application-level middleware&lt;/strong&gt;: These middlewares are bound to the app object and called inside the main application file which means that they are executed after every new request.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--aeVdbRM1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1649765999629/fD1_FX2c7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--aeVdbRM1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1649765999629/fD1_FX2c7.png" alt="carbon (2).png" width="880" height="425"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Router-level middleware&lt;/strong&gt;: These middlewares are bound to a certain router (instance of express.Router) and are then merged with the main application&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--3hI_XFme--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1649766251357/4vpmv1g1E.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--3hI_XFme--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1649766251357/4vpmv1g1E.png" alt="carbon (3).png" width="880" height="424"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Error-handling middleware&lt;/strong&gt;: These middlewares accept 4 arguments, of which the first argument refers to the error that is coming in, also to call these middlewares you have to call the next parameter with a parameter like next which actually is the error that has to be handled in the error handling middleware&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--lbNApbJf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1649766651663/uU6B2Cu1X.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--lbNApbJf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1649766651663/uU6B2Cu1X.png" alt="carbon (4).png" width="880" height="335"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Built-in middleware.&lt;/strong&gt;: These are middlewares that are provided with expressjs and don't need any third-party packages to be downloaded&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--j_XeXEMI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1649767358726/3AKln160U.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--j_XeXEMI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1649767358726/3AKln160U.png" alt="carbon (5).png" width="880" height="332"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5. Third-party middleware.&lt;/strong&gt;: These middlewares require some third-party packages to be installed first. For example, express session:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--PIUD94HC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1649767637010/vg7yWbw5z.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--PIUD94HC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1649767637010/vg7yWbw5z.png" alt="carbon (6).png" width="880" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;&lt;p&gt;If the current middleware function does not end the request-response cycle(redirecting to another request or sending a response), it must call next() to pass control to the next middleware function. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;For more in-depth reading visit &lt;a href="https://expressjs.com/en/guide/using-middleware.html"&gt;express middlewares&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

</description>
    </item>
    <item>
      <title>Why do we bind event handlers in React???</title>
      <dc:creator>Asad Mahmood</dc:creator>
      <pubDate>Sat, 19 Feb 2022 10:30:26 +0000</pubDate>
      <link>https://dev.to/azazeloss/why-do-we-bind-event-handlers-in-react-3g65</link>
      <guid>https://dev.to/azazeloss/why-do-we-bind-event-handlers-in-react-3g65</guid>
      <description>&lt;h2&gt;
  
  
  What is "bind" in Javascript?
&lt;/h2&gt;

&lt;p&gt;Bind is a method inside &lt;em&gt;Function.Prototype&lt;/em&gt; which returns a new function whose &lt;code&gt;this&lt;/code&gt; keyword's value is set to the value which was passed to the bind method via the parameters.&lt;br&gt;
Example:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--SIVbJ7J4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/npjya0xlect3jowxbcng.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SIVbJ7J4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/npjya0xlect3jowxbcng.png" alt="Example code for bind method" width="880" height="260"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In this example, the &lt;code&gt;this&lt;/code&gt; keyword of the handleEvent function was changed to the &lt;code&gt;this&lt;/code&gt; keyword value of the current context.&lt;/p&gt;

&lt;h2&gt;
  
  
  But why do we need it in react?
&lt;/h2&gt;

&lt;p&gt;In Class Components in React, we usually pass the event handlers as the callbacks which in turn perform certain actions after the event has taken place. But as we all know, callbacks tend to lose the context which called them(also known as implicitly bound context). To preserve the context we bind the context and then are able to use it inside the event handler.&lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;We don't need to worry about the context when we are using arrow functions (after they were introduced in ES6), because they automatically bind to the scope which called them and hence we don't need to explicitly bind them with the current scope.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind"&gt;bind() method Docs&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://www.freecodecamp.org/news/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb"&gt;Detailed explanation for React&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>react</category>
      <category>javascript</category>
      <category>oop</category>
      <category>computerscience</category>
    </item>
    <item>
      <title>Promises in Javascript!!!</title>
      <dc:creator>Asad Mahmood</dc:creator>
      <pubDate>Sat, 04 Dec 2021 07:13:33 +0000</pubDate>
      <link>https://dev.to/azazeloss/promises-in-javascript-dci</link>
      <guid>https://dev.to/azazeloss/promises-in-javascript-dci</guid>
      <description>&lt;p&gt;P..p..p..promise? Like a bond? Is this a developer blog or an English article? Well, apparently Javascript developers have to deal with promises in their coding life too, and this blog might just be the perfect spot for making you understand what this fuss is all about!&lt;/p&gt;

&lt;h3&gt;
  
  
  What exactly is a 'Promise'?
&lt;/h3&gt;

&lt;p&gt;A promise, in the simplest language, is a container that is going to store some data in the future time. Going deeper, it is an object, that has multiple states and will return some values depending on if it was successfully resolved, or rejected.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;A promise has 3 states, either pending, resolved(fulfilled) or rejected.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Initialising a Promise in Javascript
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--erdSOchs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9k3tcum29biztfzsz0g.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--erdSOchs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9k3tcum29biztfzsz0g.png" alt="Code for initializing a promise" width="880" height="353"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  ".then", ".catch" and ".finally" in Promises
&lt;/h3&gt;

&lt;p&gt;Long story short, we can chain methods with promises. The '.then' method is chained with a promise which is then used to handle the promise when it is resolved i.e. the callback function inside the '.then' method is executed and it CAN return another promise(it's not compulsory though). The '.catch' method is chained with the promise and is executed when the promise gets rejected(this block is usually the exception handling block). The callback function which is inside the '.finally' method always gets executed, doesn't matter if the promise was rejected or resolved. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--UsKWrqbi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yer4t3bo4v3rhdza1vbk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--UsKWrqbi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yer4t3bo4v3rhdza1vbk.png" alt="Promises chaining method syntax" width="880" height="654"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Things I'd love you to know&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Promises are asynchronous.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Promises have a different queue(from callbacks) in the background and the Event Loop prioritizes the promise queue over the callback queue, hence it won't execute any callbacks until all the promises inside the promises queue get exhausted.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Promises are generally preferred over callbacks because there is no possibility of falling into the callback hell when working with promises. &lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
