<?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: Naman Malhotra</title>
    <description>The latest articles on DEV Community by Naman Malhotra (@naman03malhotra).</description>
    <link>https://dev.to/naman03malhotra</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%2F503599%2F6f347e8a-1809-405e-ab0b-a5ce71a3e393.jpeg</url>
      <title>DEV Community: Naman Malhotra</title>
      <link>https://dev.to/naman03malhotra</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/naman03malhotra"/>
    <language>en</language>
    <item>
      <title>To overpowering adversity...</title>
      <dc:creator>Naman Malhotra</dc:creator>
      <pubDate>Tue, 06 Apr 2021 16:52:56 +0000</pubDate>
      <link>https://dev.to/naman03malhotra/to-overpowering-adversity-3n87</link>
      <guid>https://dev.to/naman03malhotra/to-overpowering-adversity-3n87</guid>
      <description>&lt;p&gt;Not sure if this is the right platform, but I will move this post to a self-hosted blog setup. I am not finding time to set it up due to my new job. But soon! I wanted to post this as this is a special day. A special day to be alive! This day is the most meaningful day of my life. It changed me as a person and my way of looking at things.&lt;/p&gt;

&lt;p&gt;Till then bear with me!&lt;/p&gt;

&lt;p&gt;Don't be alarmed, I am not in due to the COVID! Usually, we share all the happy moments here, and what a perfect life we have, right? If only that was true! I thought I'd share my story, as life is not always perfect as it seems on the surface and it might also help someone going through a difficult phase of life.&lt;/p&gt;

&lt;p&gt;When life hits you, it really hits you hard.&lt;/p&gt;

&lt;p&gt;This day two years ago (6th of April 2019, around 8 pm). I did the biggest blunder(calling it a blunder as I am someone who is very careful and sensitive) of my life. I met with a horrible accident, broke my pelvis (like who even breaks that), and back. I lost the sensation of touch and toe movement on my right leg due to nerve damage. I was in the hospital for a month and rehab for another two, where I was taught how to walk again. Doctors said I was lucky as could have been paralyzed or dead that day. But I wasn't feeling lucky, the pain was unbearable.&lt;/p&gt;

&lt;p&gt;On a scale of 1 - 5, the pain was 100, during the initial few weeks, even on slightest of movement I use to scream. There I was lying on the bed straight couldn't move or even turn. I am someone who likes to sleep on my stomach but couldn't do that anymore. The initial few days went sleepless. Doctors said they are not sure when I'll be able to walk again. It was hard for me to accept the reality, I was living in denial for the first few days. I wished it was all a bad dream.&lt;/p&gt;

&lt;p&gt;The fact I might be in a wheelchair haunted me like anything and I went through horrible anxiety which wasn't helping my recovery.&lt;/p&gt;

&lt;p&gt;But I never cried due to pain. I cried when I saw my mom crying and losing hope for me walking properly. &lt;/p&gt;

&lt;p&gt;Going into an MRI machine was the most horrible part, as I had to shift beds and due to that movement, I use to get electric shocks in my legs (nerves were being pressed). I use to scream!&lt;/p&gt;

&lt;p&gt;Slowly my friends and family started visiting me, almost everyone I knew from my office came with books and chocolates, I was being pampered 🥰. My friends use to visit me every day, but after everyone left at the end of the day, I was left with a thought of me lying on the bed without a discharge date.&lt;/p&gt;

&lt;p&gt;After a few weeks as I regained some movement, I was shifted to a rehab facility using a stretcher. There I was given physiotherapy to regain back the muscle mass I lost. The funny thing was everyone in that facility must be above 60 except me 😂.&lt;/p&gt;

&lt;p&gt;I was feeling so stupid, and the regret was eating me up. I was cursing myself to make those decisions that led to that. But I knew I had to make my peace with it and accept the reality. Anyhow, I couldn't change the past now.&lt;/p&gt;

&lt;p&gt;I was showing signs of recovery, thanks to all the nursing staff, they really worked hard on my recovery. After a few weeks, the doctor asked me to attempt to walk using a walker. I was afraid as I might break that bone again by putting pressure on it. The first time I tried to sit upright I almost fainted, as my body was not used to being in that position for a long time.&lt;/p&gt;

&lt;p&gt;Slowly I started walking using the walker. I went to pee after so long on my own, I was very happy, can't describe the feeling here. I realized the value of things I took for granted, as simple as walking and going to the washroom on my own. But it was a long way to go, as I had to get rid of the walker and I still couldn't feel much on my right foot.&lt;/p&gt;

&lt;p&gt;My friends visited me every evening and they use to help me walk again. Though they use to make fun of me as I was walking like people in their 90s. They use to make sure I laugh all the time we spend together. I needed all the positivity so I started having music therapy (we use to sing Enrique a lot), reading books, and working from the hospital. Thanks to my super chill office people and culture!&lt;/p&gt;

&lt;p&gt;Fast forward: Now I had hope that I could recover, though doctors were not certain that I could recover 100% and in how much time, some said 6 months or a year maybe.&lt;/p&gt;

&lt;p&gt;I said no, fuck it! I'll be better than I was before (this was me speaking while using a walker). I started doing my research as to how to reverse nerve and muscle damage. Started reading a lot of research papers and contacting doctors abroad who were working on cutting-edge research.&lt;/p&gt;

&lt;p&gt;I came to know, B12, CoQ10, certain Lipids, Zn, Mg, etc...were essential in the nerve recovery, ordered all of them. Fixed my diet, started reading a lot about living on a healthy diet. For muscle, it was straightforward, protein, and workout. Forget workout! even walking without walker support was painful.&lt;/p&gt;

&lt;p&gt;I started slowly with 1 squat/day, to 5 then 10, 50, 100, then I never looked back. It used to hurt like anything, but I'd still do it. After 2.5 months I started going to the office with help of a stick, finally, I left the walker, another achievement unlocked.&lt;/p&gt;

&lt;p&gt;I started going to the office regularly, slowly I can see my old life returning back, my friends and family took me for clubbing while I was still recovering. That day was super fun.&lt;/p&gt;

&lt;p&gt;I remember I started running after 3 months...&lt;/p&gt;

&lt;p&gt;A lot more happened in between, story for another day...&lt;/p&gt;

&lt;p&gt;Thanks would be such a small word to use here, but my recovery wouldn't be possible without my friends and family. My dad left his business for a month just to be with me, and mom stayed with me for another two months. I don't think I can ever repay them, and I can do anything for my best friends and remember no matter what, your family will always be there for you.&lt;/p&gt;

&lt;p&gt;I was sort of a person who was always chasing the best in their career and was willing to put that over friends and family any day. But that changed completely. I was either always busy running startups or hustling to build something new. Now I value relationships more than anything.&lt;/p&gt;

&lt;p&gt;Now I am confident that I can handle most of the challenges life will throw at me, there is still a big room to grow, I still make mistakes, but I acknowledge them and work on them.&lt;/p&gt;

&lt;p&gt;There are many things in life that I want to achieve and do, but I will do it with balance.&lt;/p&gt;

&lt;p&gt;Folks, if you are going through a challenge in life that seems impossible to overcome, no matter if is it your injury, career, or relationship related. If you want something to happen.&lt;/p&gt;

&lt;p&gt;Work towards it! Just don't give up! Work like there is no tomorrow!&lt;/p&gt;

&lt;p&gt;I am on a journey to conquer my fears and anxieties.&lt;/p&gt;

&lt;p&gt;I'll see you again. Soon!&lt;/p&gt;

&lt;p&gt;PS: The best part of the whole thing was, I lost 8kgs 🤣&lt;/p&gt;

</description>
      <category>motivation</category>
      <category>hardwork</category>
      <category>struggle</category>
    </item>
    <item>
      <title>Declaring your business 👔 logic like React ⚛️</title>
      <dc:creator>Naman Malhotra</dc:creator>
      <pubDate>Tue, 10 Nov 2020 22:07:24 +0000</pubDate>
      <link>https://dev.to/naman03malhotra/declaring-your-business-logic-like-react-9d9</link>
      <guid>https://dev.to/naman03malhotra/declaring-your-business-logic-like-react-9d9</guid>
      <description>&lt;p&gt;I published a npm library that allows you to write your conditional business logic in a declarative way like React does. It is currently being used at &lt;a href="https://www.hackerrank.com/" rel="noopener noreferrer"&gt;HackerRank&lt;/a&gt; in production and has made our code more &lt;strong&gt;maintainable and readable&lt;/strong&gt; especially when it comes to complex rendering logic.&lt;/p&gt;

&lt;p&gt;Before I dive into what this library does, let's understand the difference between the two approaches.  &lt;/p&gt;

&lt;h2&gt;
  
  
  What is the difference between declarative and imperative programming?
&lt;/h2&gt;

&lt;p&gt;According to &lt;a href="https://en.wikipedia.org/wiki/Imperative_programming" rel="noopener noreferrer"&gt;wiki&lt;/a&gt;:&lt;/p&gt;

&lt;p&gt;In &lt;em&gt;&lt;strong&gt;Imperative Programming&lt;/strong&gt;&lt;/em&gt; paradigm you manipulate the state of the program directly using statements to achieve the desired behavior.&lt;/p&gt;

&lt;p&gt;In &lt;em&gt;&lt;strong&gt;Declaraive Programming&lt;/strong&gt;&lt;/em&gt; paradigm you focus on what the program should achieve rather than how to achieve it.&lt;/p&gt;

&lt;p&gt;I don't get your gibber jabber, tell me in code.&lt;/p&gt;

&lt;p&gt;Imagine a simple UI component, such as a "Submit" button which submits form data. While we wait for the request to return from the server we would want to disable the button.&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="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;isLoading&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;disabled&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&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;To achieve the disabled state, manipulate the UI like this ^.&lt;/p&gt;

&lt;p&gt;In contrast, the declarative approach would be:&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="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Button&lt;/span&gt; &lt;span class="nx"&gt;disabled&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;isLoading&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Because the declarative approach separates concerns, this part of it only needs to handle how the UI should look in a specific state, and is therefore much simpler to understand.&lt;/p&gt;

&lt;p&gt;so coming back to the point:&lt;/p&gt;

&lt;h2&gt;
  
  
  So, how can you declare your conditional business logic like React?
&lt;/h2&gt;

&lt;p&gt;A couple of months ago, I published a &lt;a href="https://github.com/naman03malhotra/match-rules" rel="noopener noreferrer"&gt;&lt;strong&gt;library&lt;/strong&gt;&lt;/a&gt; on &lt;a href="https://www.npmjs.com/package/match-rules" rel="noopener noreferrer"&gt;&lt;strong&gt;npm&lt;/strong&gt;&lt;/a&gt; called &lt;code&gt;match-rules&lt;/code&gt; that can turn your code from:&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;function&lt;/span&gt; &lt;span class="nf"&gt;isUserLocked&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;User&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// some messed up legacy locking logic data from backend&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;flagged&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt;
    &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;blocked&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt;
    &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;is_locked&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;is_locked&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;LOCKED&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; 
    &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;profile&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;account_deleted&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;
  &lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;showWarning&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;User&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;isUserLocked&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;show_warning&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;showAccountDisabled&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;User&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;isUserLocked&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;profile&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;show_account_disabled&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;isUserLocked&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// render account locked UI&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;showWarning&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// render warning UI or something else&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;showAccountDisabled&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// render account disabled UI&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;to&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="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;matchRules&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;match-rules&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;IS_USER_LOCKED_RULE&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;SHOW_WARNING_RULE&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;SHOW_ACCOUNT_DISABLED_RULE&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./rules&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// user object can be served from the app state &lt;/span&gt;
&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;matchRules&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;IS_USER_LOCKED_RULE&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// render user locked UI&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;matchRules&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;SHOW_WARNING&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// show warning UI&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;matchRules&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;IS_USER_LOCKED_RULE&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;SHOW_ACCOUNT_DISABLED_RULE&lt;/span&gt;&lt;span class="p"&gt;]))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// render account disabled UI&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;where your rules can reside in &lt;code&gt;rules.js&lt;/code&gt; with an object like structure:&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="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;IS_USER_LOCKED_RULE&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;flagged&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;blocked&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;is_locked&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;sourceObject&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;LOCKED&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;profile&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
   &lt;span class="na"&gt;account_deleted&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&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;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;SHOW_WARNING_RULE&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="nx"&gt;IS_USER_LOCKED_RULE&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;show_warning&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;SHOW_ACCOUNT_DISABLED_RULE&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;profile&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;show_account_disabled&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&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's have a look at a couple of advantages of declaring the conditional logic in a declarative way:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;It &lt;strong&gt;reduces cognitive complexity considerably&lt;/strong&gt;: if you observe &lt;code&gt;IS_USER_LOCKED_RULE&lt;/code&gt; it vividly describes what all conditions need to be met as compared to &lt;code&gt;isUserLocked&lt;/code&gt; function. The object structure is more readable.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;You can &lt;strong&gt;compose and pass multiple&lt;/strong&gt; rules: compose/extend multiple rules to form new rules, which avoids repetition. Also, you can pass multiple rules object as an &lt;code&gt;Array&lt;/code&gt; of rules. &lt;br&gt;
Multiple rules are by default are compared with &lt;code&gt;and&lt;/code&gt; operator, you can also compare them using &lt;code&gt;or&lt;/code&gt; operator by passing &lt;code&gt;{ operator: 'or' }&lt;/code&gt; prop in options. You can read more about this on &lt;a href="https://github.com/naman03malhotra/match-rules" rel="noopener noreferrer"&gt;docs&lt;/a&gt;. &lt;br&gt;
We composed a new rule by extending &lt;code&gt;IS_USER_LOCKED_RULE&lt;/code&gt;&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="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;SHOW_WARNING_RULE&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="nx"&gt;IS_USER_LOCKED_RULE&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;show_warning&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&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;In an Object-based structure, you can easily extend rules without introducing complexity.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Save time with unit tests&lt;/strong&gt;: you don't have to write specific unit tests for RULES object, at max you can do snapshot testing if you wish to. &lt;code&gt;match-rules&lt;/code&gt; handle rule matching logic for you, so you don't have to write specs.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Write your logic in its true form&lt;/strong&gt;: since the data structure in a JavaScript of the source is mostly an Object. It makes sense to define your conditions in an Object as well, this way &lt;strong&gt;you don't have to destructure the Object&lt;/strong&gt;. It especially helps if your object is deeply nested.&lt;br&gt;
In our example, the &lt;code&gt;status&lt;/code&gt; key was nested inside the profile object. The RULE we wrote had the same structure and with the expected value.&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="nx"&gt;profile&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;account_deleted&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&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;ul&gt;
&lt;li&gt;Handle &lt;strong&gt;complex conditions using functions&lt;/strong&gt;: so far it is capable to handle any condition since you can write your own functions in the rule. 
when it encounters a function it passes the value (as the first parameter) and original source object (as the second parameter) from the source to that function matching the corresponding key of that level. The same happened in the above example when it encountered the &lt;code&gt;is_locked&lt;/code&gt; key.
&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="nx"&gt;is_locked&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;sourceObject&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;LOCKED&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Using a combination of key's value and original source object you can handle complex conditions. You have to write spec just for this function.&lt;/p&gt;

&lt;h4&gt;
  
  
  So, I consolidated my thoughts into a library and called it &lt;code&gt;match-rules&lt;/code&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F0dxpzmw11b68vq6jnodw.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F0dxpzmw11b68vq6jnodw.jpg" alt="Add match-rules"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Think of it more of a practice as it works on the principles we just discussed.&lt;/p&gt;

&lt;p&gt;If I have to give a precise definition, it would be:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;&lt;code&gt;match-rules&lt;/code&gt; is a tiny (1kB GZipped) zero dependency JavaScript utility that lets you write your conditional business logic in a declarative way.&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;It can be used with feature flags, complex conditions, conditional rendering, and the rest is your imagination.&lt;/p&gt;

&lt;h2&gt;
  
  
  How it works?
&lt;/h2&gt;

&lt;p&gt;The way &lt;code&gt;match-rules&lt;/code&gt; work is, it checks for each key in the &lt;code&gt;RULES&lt;/code&gt; object for the corresponding key in the source object. It does so by treating the RULES object like a tree and recursively going through each key until there are no nodes left. Rules generally contain a small subset of keys from the source object, it can be an exact replica of the complete object as well, with expected values.&lt;/p&gt;

&lt;h4&gt;
  
  
  How to use it and detailed documentation:
&lt;/h4&gt;

&lt;p&gt;&lt;code&gt;yarn add match-rules&lt;/code&gt; or &lt;code&gt;npm install --save match-rules&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;API&lt;/strong&gt; of matchRules 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="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;matchRules&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;match-rules&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// returns a boolean value.&lt;/span&gt;
&lt;span class="nf"&gt;matchRules&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="nx"&gt;sourceObject&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="c1"&gt;// can be any object with data.&lt;/span&gt;
  &lt;span class="nx"&gt;RULES_OBJECT&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="c1"&gt;// you can also pass multiple rules in an array [RULE_ONE, RULE_TWO],&lt;/span&gt;
  &lt;span class="nx"&gt;options&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="c1"&gt;// (optional)&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;options&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;operator&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;and&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="c1"&gt;// (optional, default: 'and') in case of multiple rules you can pass 'and' or 'or'. In the case of 'or,' your rules will be compared with 'or' operator. Default is 'and'&lt;/span&gt;
  &lt;span class="na"&gt;debug&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="c1"&gt;// (optional, default: false) when debug is true, it logs a trace object which will tell you which rule failed and with what values of source and rules object.&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="c1"&gt;// NOTE: all the rules inside a single rule are concatenated by 'and' operator by default.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For examples and detailed documentation please visit the &lt;strong&gt;&lt;a href="https://github.com/naman03malhotra/match-rules" rel="noopener noreferrer"&gt;Github repo&lt;/a&gt;.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  People &lt;strong&gt;Involved&lt;/strong&gt;
&lt;/h2&gt;

&lt;h4&gt;
  
  
  A big thanks to
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://twitter.com/_syadav" rel="noopener noreferrer"&gt;Sudhanshu Yadav&lt;/a&gt; for code review, design discussion, feedback, and coming up with the name &lt;code&gt;match-rules&lt;/code&gt; :p&lt;br&gt;
&lt;a href="https://twitter.com/dev__adi" rel="noopener noreferrer"&gt;Aditya&lt;/a&gt; for reviewing this article thoroughly, constructive feedback, and recommending this blog site.&lt;br&gt;
&lt;a href="https://twitter.com/vicode_in" rel="noopener noreferrer"&gt;Vikas&lt;/a&gt; for reporting a critical bug and feedback for this article.&lt;/p&gt;

&lt;h2&gt;
  
  
  Current &lt;strong&gt;Status&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;It is stable with 100% code coverage and is currently being used at &lt;a href="https://www.hackerrank.com/" rel="noopener noreferrer"&gt;HackerRank&lt;/a&gt; in Production.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;match-rules&lt;/code&gt; does not have any dependency and it is only 1kB (GZipped) in size.&lt;/p&gt;

&lt;p&gt;Feel free to send across a Pull Request if it doesn't fit your use-case.&lt;/p&gt;

&lt;p&gt;So next time when you are about to write conditional rendering logic. Try this library. You'll thank me later xD.&lt;/p&gt;

&lt;p&gt;Show some support, leave a star if you find it useful.&lt;br&gt;
&lt;strong&gt;GitHub:&lt;/strong&gt; &lt;a href="https://github.com/naman03malhotra/match-rules" rel="noopener noreferrer"&gt;https://github.com/naman03malhotra/match-rules&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;npm:&lt;/strong&gt; &lt;a href="https://www.npmjs.com/package/match-rules" rel="noopener noreferrer"&gt;https://www.npmjs.com/package/match-rules&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;Live Example:&lt;/strong&gt; &lt;a href="https://stackblitz.com/edit/match-rules" rel="noopener noreferrer"&gt;https://stackblitz.com/edit/match-rules&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Also checkout my other &lt;a href="https://github.com/naman03malhotra/auto-skip-for-netflix-and-prime" rel="noopener noreferrer"&gt;open-source project&lt;/a&gt;, a simple binge-watching chrome extension, for auto skipping intro for &lt;a href="http://bit.ly/aspn_pro" rel="noopener noreferrer"&gt;Netflix and Prime&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;If you want to discuss &lt;code&gt;match-rules&lt;/code&gt;, comment below or reach out at &lt;a href="https://twitter.com/naman03malhotra" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; or &lt;a href="https://www.linkedin.com/in/naman03malhotra" rel="noopener noreferrer"&gt;LinkedIn&lt;/a&gt;. &lt;/p&gt;

</description>
      <category>javascript</category>
      <category>react</category>
      <category>npm</category>
      <category>opensource</category>
    </item>
  </channel>
</rss>
