<?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: Vinoth Kumar</title>
    <description>The latest articles on DEV Community by Vinoth Kumar (@vnoitkumar).</description>
    <link>https://dev.to/vnoitkumar</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%2F150429%2F5bc4ca5d-d310-489e-9cd5-42db54c31868.png</url>
      <title>DEV Community: Vinoth Kumar</title>
      <link>https://dev.to/vnoitkumar</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/vnoitkumar"/>
    <language>en</language>
    <item>
      <title>AWS - EC2 Instance purchasing options</title>
      <dc:creator>Vinoth Kumar</dc:creator>
      <pubDate>Sun, 20 Sep 2020 10:52:09 +0000</pubDate>
      <link>https://dev.to/vnoitkumar/aws-ec2-instance-purchasing-options-307l</link>
      <guid>https://dev.to/vnoitkumar/aws-ec2-instance-purchasing-options-307l</guid>
      <description>&lt;p&gt;Amazon EC2 provides purchasing options to enable you to optimize your costs based on your needs.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--SJbSFD4E--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/5jlskvl3hrzr3geadrcy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SJbSFD4E--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/5jlskvl3hrzr3geadrcy.png" alt="EC2 Launch types"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  On-Demand Instances
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Pay, by the second, for the instances that you launch.&lt;/li&gt;
&lt;li&gt;No longer-term commitments or upfront payments are needed.&lt;/li&gt;
&lt;li&gt;You have full control over its lifecycle, you decide when to launch, start, stop, reboot, or terminate it.&lt;/li&gt;
&lt;li&gt;You pay only when your On-Demand Instances are in the &lt;code&gt;running&lt;/code&gt; state.&lt;/li&gt;
&lt;li&gt;Can increase or decrease your compute capacity.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Reserved Instances
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Up to 75% savings compared to On-Demand Instance pricing.&lt;/li&gt;
&lt;li&gt;You can purchase a Reserved Instance for a one-year or three-year commitment, with the three-year commitment offering a bigger discount.&lt;/li&gt;
&lt;li&gt;Commitment includes instance type and Region.&lt;/li&gt;
&lt;li&gt;Reserved Instances do not renew automatically; when they expire, you can continue using the EC2 instance without interruption, but you are charged On-Demand rates.&lt;/li&gt;
&lt;li&gt;After you purchase a Reserved Instance, you cannot cancel your purchase. However, you may be able to modify, exchange, or sell your Reserved Instance if your needs change.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Scheduled Reserved Instances
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Purchase instances that are always available on the specified recurring schedule.&lt;/li&gt;
&lt;li&gt;Recur on a daily, weekly, or monthly basis, with a specified start time and duration.&lt;/li&gt;
&lt;li&gt;You pay for the time that the instances are scheduled, even if you do not use them.&lt;/li&gt;
&lt;li&gt;After you purchase a Scheduled Instance, you can't cancel, modify, or resell your purchase.&lt;/li&gt;
&lt;li&gt;You must purchase a Scheduled Reserved Instance minimum for one year.&lt;/li&gt;
&lt;li&gt;The minimum required utilization is 1,200 hours per year.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Spot Instances
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;The most cost-efficient instance in AWS. Up to 90% savings compared to On-Demand Instance pricing.&lt;/li&gt;
&lt;li&gt;Request unused EC2 instances, which can reduce your Amazon EC2 costs significantly.&lt;/li&gt;
&lt;li&gt;Instances that can "lose" at any point of time if your max price is less than the current spot price.&lt;/li&gt;
&lt;li&gt;Well-suited for batch jobs, background processing, and optional tasks. Not good for critical jobs.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Dedicated Hosts
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Pay for a physical host.&lt;/li&gt;
&lt;li&gt;Physical server with EC2 instance capacity fully dedicated to your use.&lt;/li&gt;
&lt;li&gt;Full control of the Instance placement.&lt;/li&gt;
&lt;li&gt;Visibility into the underlying socket, the core of the hardware.&lt;/li&gt;
&lt;li&gt;You must purchase a Dedicated Hosts Instance minimum for one year.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Dedicated Instances
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Pay, by the hour, for instances that run on hardware that's dedicated to a single customer.&lt;/li&gt;
&lt;li&gt;May share hardware with other instances from the same AWS account.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Great combo
&lt;/h2&gt;

&lt;p&gt;Reserved Instance for baseline + On-Demand and Spot Instances for scaling.&lt;/p&gt;




&lt;p&gt;Resource&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://aws.amazon.com/ec2/pricing/"&gt;https://aws.amazon.com/ec2/pricing/&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/instance-purchasing-options.html"&gt;https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/instance-purchasing-options.html&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;Original post - &lt;a href="https://blog.vnoit.com/ec2-instance-purchasing-options"&gt;https://blog.vnoit.com/ec2-instance-purchasing-options&lt;/a&gt;&lt;/p&gt;

</description>
      <category>aws</category>
    </item>
    <item>
      <title>Redis</title>
      <dc:creator>Vinoth Kumar</dc:creator>
      <pubDate>Sat, 20 Jun 2020 10:48:49 +0000</pubDate>
      <link>https://dev.to/vnoitkumar/redis-ap2</link>
      <guid>https://dev.to/vnoitkumar/redis-ap2</guid>
      <description>&lt;h2&gt;
  
  
  What is Redis?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Redis is an open-source, in-memory data structure store used as database, cache and message broker&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Redis, which stands for &lt;strong&gt;Re&lt;/strong&gt;mote &lt;strong&gt;Di&lt;/strong&gt;ctionary &lt;strong&gt;S&lt;/strong&gt;erver.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;NoSQL Key/Value Store with some advance features.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The different between MongoDB and Redis is Mongo DB is a disk-based document store while Redis is a memory-based.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Redis does not support any built-in data encryption&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.youtube.com/watch?v=OG610oe_kxs"&gt;Why Redis?&lt;/a&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Redis is blazingly fast it's written in C, runs entirely in memory and is optimized to deliver millions of operations with sub-millisecond latency with a single standard server.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Pre-built data structures for popular use cases which are used by developer like LEGO building blocks when creating new apps.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;These built-in data structures include lists, sets, sorted sets, hashes, hyperloglogs, bitmaps, geospatial indexes, bitfields, streams and strings.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Redis commands allow data to be processed on the database level rather than the application level, reducing coding effort, code complexity and bandwidth requirements.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Redis can be extended infinitely.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;With Redis Modules that expand Redis infinitely, and it allows to add custom functionality and structures.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;And Modules that do everything from search to machine learning, security, JSON to graph data processing and more.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Has client libraries for every language.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The hottest Redis uses includes real-time analytics, High-speed transactions, High-speed data ingest, Message queues, Session storage, In-app social functionality, application job management, Search, Machine learning and caching.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Redis has been benchmarked as the world's fastest database.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://redis.io/topics/data-types"&gt;Data types in Redis&lt;/a&gt;
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Lists&lt;/li&gt;
&lt;li&gt;Sets&lt;/li&gt;
&lt;li&gt;Sorted sets&lt;/li&gt;
&lt;li&gt;Hashes&lt;/li&gt;
&lt;li&gt;Hyperlogs&lt;/li&gt;
&lt;li&gt;Bitmaps&lt;/li&gt;
&lt;li&gt;Geospatial indexes&lt;/li&gt;
&lt;li&gt;Bitfields&lt;/li&gt;
&lt;li&gt;Streams&lt;/li&gt;
&lt;li&gt;Strings&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://www.digitalocean.com/community/tutorials/how-to-install-and-secure-redis-on-ubuntu-18-04"&gt;Installing Redis&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Basic commands to install redis.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;sudo &lt;/span&gt;apt update

&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;sudo &lt;/span&gt;apt &lt;span class="nb"&gt;install &lt;/span&gt;redis-server

&lt;span class="nv"&gt;$ &lt;/span&gt;redis-server &lt;span class="c"&gt;# start redis server&lt;/span&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;redis-cli &lt;span class="c"&gt;# opens a redis prompt&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h2&gt;
  
  
  Basic Redis CLI
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;SET&lt;/li&gt;
&lt;li&gt;
SETNX - &lt;strong&gt;SET&lt;/strong&gt; if &lt;strong&gt;N&lt;/strong&gt;ot e*&lt;em&gt;X&lt;/em&gt;*ists&lt;/li&gt;
&lt;li&gt;GET&lt;/li&gt;
&lt;li&gt;DEL&lt;/li&gt;
&lt;li&gt;EXISTS&lt;/li&gt;
&lt;li&gt;
MSET - &lt;strong&gt;M&lt;/strong&gt;ulti &lt;strong&gt;SET&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;
MSETNX - &lt;strong&gt;M&lt;/strong&gt;ulti &lt;strong&gt;SET&lt;/strong&gt; if &lt;strong&gt;N&lt;/strong&gt;ot e*&lt;em&gt;X&lt;/em&gt;*ists&lt;/li&gt;
&lt;li&gt;
MGET - &lt;strong&gt;M&lt;/strong&gt;ulti &lt;strong&gt;GET&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Note&lt;/strong&gt; : &lt;em&gt;Other keywords are self-explanatory&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://redis.io/commands/set"&gt;SET&lt;/a&gt;
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Set key to hold the string value.&lt;/li&gt;
&lt;li&gt;If the key already holds a value, it is overwritten, regardless of its type.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Time complexity: O(1)&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;SET key value &lt;span class="c"&gt;# Syntax&lt;/span&gt;


SET mykey &lt;span class="s2"&gt;"Hello"&lt;/span&gt; &lt;span class="c"&gt;# Examples&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;a href="https://redis.io/commands/setnx"&gt;SETNX&lt;/a&gt;
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Set key to hold string value if the key does not exist.&lt;/li&gt;
&lt;li&gt;In that case, it is equal to SET.&lt;/li&gt;
&lt;li&gt;When key already holds a value, no operation is performed.&lt;/li&gt;
&lt;li&gt;SETNX is short for "&lt;strong&gt;SET&lt;/strong&gt; if &lt;strong&gt;N&lt;/strong&gt;ot e*&lt;em&gt;X&lt;/em&gt;*ists".&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Time complexity: O(1)&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;SETNX key value &lt;span class="c"&gt;# Syntax&lt;/span&gt;


SETNX mykey &lt;span class="s2"&gt;"Hello"&lt;/span&gt; &lt;span class="c"&gt;# Examples&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;a href="https://redis.io/commands/get"&gt;GET&lt;/a&gt;
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Get the value of the key.&lt;/li&gt;
&lt;li&gt;If the key does not exist the special value nil is returned.&lt;/li&gt;
&lt;li&gt;An error is returned if the value stored at key is not a string, because GET only handles string values.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Time complexity: O(1)&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;GET key &lt;span class="c"&gt;# Syntax&lt;/span&gt;


GET mykey &lt;span class="c"&gt;# Example&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;a href="https://redis.io/commands/del"&gt;DEL&lt;/a&gt;
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Removes the specified keys.&lt;/li&gt;
&lt;li&gt;A key is ignored if it does not exist.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Time complexity: O(N)&lt;/strong&gt; where N is the number of keys that will be removed.&lt;/li&gt;
&lt;li&gt;Removing a single key that holds a string value is &lt;strong&gt;O(1)&lt;/strong&gt;.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;DEL key &lt;span class="o"&gt;[&lt;/span&gt;key ...] &lt;span class="c"&gt;# Syntax&lt;/span&gt;


DEL key1 key2 key3 &lt;span class="c"&gt;# Example&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;a href="https://redis.io/commands/exists"&gt;EXISTS&lt;/a&gt;
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Returns 1 if key exists, 0 if the key does not exist.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Time complexity: O(1)&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;EXISTS key &lt;span class="o"&gt;[&lt;/span&gt;key ...] &lt;span class="c"&gt;# Syntax&lt;/span&gt;


EXISTS key1 key2 &lt;span class="c"&gt;# Example&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;a href="https://redis.io/commands/mset"&gt;MSET&lt;/a&gt;
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Sets the given keys to their respective values.&lt;/li&gt;
&lt;li&gt;Replaces existing values with new values, just as regular SET.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Time complexity: O(N)&lt;/strong&gt; where N is the number of keys to set.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;MSET key value &lt;span class="o"&gt;[&lt;/span&gt;key value ...] &lt;span class="c"&gt;# Syntax&lt;/span&gt;


MSET key1 &lt;span class="s2"&gt;"Hello"&lt;/span&gt; key2 &lt;span class="s2"&gt;"World"&lt;/span&gt; &lt;span class="c"&gt;# Example&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;a href="https://redis.io/commands/msetnx"&gt;MSETNX&lt;/a&gt;
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Sets the given keys to their respective values.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Will not perform any operation at all even if just a single key already exists.&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Time complexity: O(N)&lt;/strong&gt; where N is the number of keys to set.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;MSETNX key value &lt;span class="o"&gt;[&lt;/span&gt;key value ...] &lt;span class="c"&gt;# Syntax&lt;/span&gt;


MSETNX key1 &lt;span class="s2"&gt;"Hello"&lt;/span&gt; key2 &lt;span class="s2"&gt;"there"&lt;/span&gt; &lt;span class="c"&gt;# Example&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;






&lt;h3&gt;
  
  
  &lt;a href="https://redis.io/commands/mget"&gt;MGET&lt;/a&gt;
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Returns the values of all specified keys.&lt;/li&gt;
&lt;li&gt;For every key that does not hold a string value or does not exist, the special value nil is returned.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Time complexity: O(N)&lt;/strong&gt; where N is the number of keys to retrieve.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;MGET key &lt;span class="o"&gt;[&lt;/span&gt;key ...] &lt;span class="c"&gt;# Syntax&lt;/span&gt;


MGET key1 key2 &lt;span class="c"&gt;# Example&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h2&gt;
  
  
  Resource
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/watch?v=OG610oe_kxs"&gt;Why Redis?&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.eduonix.com/new_dashboard/learn-redis-from-scratch"&gt;Learn Redis from Scratch&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/LeCoupa/awesome-cheatsheets/blob/master/databases/redis.sh"&gt;Awesome cheat sheet redis&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
    </item>
    <item>
      <title>Optional Chaining</title>
      <dc:creator>Vinoth Kumar</dc:creator>
      <pubDate>Tue, 25 Feb 2020 18:41:52 +0000</pubDate>
      <link>https://dev.to/vnoitkumar/optional-chaining-8b0</link>
      <guid>https://dev.to/vnoitkumar/optional-chaining-8b0</guid>
      <description>&lt;p&gt;An optional chain is a chain of one or more property accesses and function calls, the first of which begins with the token &lt;code&gt;?.&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Long chains of property accesses in JavaScript can be error-prone, as any of them might evaluate to &lt;code&gt;null&lt;/code&gt; or &lt;code&gt;undefined&lt;/code&gt; (also known as “nullish” values).&lt;/p&gt;

&lt;p&gt;Checking for property existence on each step easily turns into a deeply-nested structure of if-statements.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Error prone-version, could throw.&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;nameLength&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;db&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;name&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// Less error-prone, but harder to read.&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;nameLength&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="nx"&gt;db&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;db&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;db&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;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;nameLength&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;db&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;name&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&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;Using the new optional chaining operator, we can rewrite the above example as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Still checks for errors and is much more readable.&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;nameLength&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;db&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;name&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;?.&lt;/code&gt; operator functions similarly to the &lt;code&gt;.&lt;/code&gt; chaining operator, except that instead of causing an error if a reference is nullish (&lt;code&gt;null&lt;/code&gt; or &lt;code&gt;undefined&lt;/code&gt;), the expression short-circuits with a return value of &lt;code&gt;undefined&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;When used with function calls, it returns &lt;code&gt;undefined&lt;/code&gt; if the given function does not exist.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;someInterface&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;customMethod&lt;/span&gt;&lt;span class="p"&gt;?.();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Note: If there is a property with such a name and which is not a function, using &lt;code&gt;?.&lt;/code&gt; will still raise a &lt;code&gt;TypeError&lt;/code&gt; exception (&lt;code&gt;x.y&lt;/code&gt; is not a function).&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Optional callbacks or event handlers
&lt;/h2&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Written as of ES2019&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;doSomething&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;onContent&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;onError&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// ... do something with the data&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&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="nx"&gt;onError&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="c1"&gt;// Testing if onError really exists&lt;/span&gt;
      &lt;span class="nx"&gt;onError&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;message&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="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;





&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Using optional chaining with function calls&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;doSomething&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;onContent&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;onError&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// ... do something with the data&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// no exception if onError is undefined&lt;/span&gt;
    &lt;span class="nx"&gt;onError&lt;/span&gt;&lt;span class="p"&gt;?.(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;message&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;h2&gt;
  
  
  Optional chaining with expressions
&lt;/h2&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;nestedProp&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;?.[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;prop&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Name&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;h2&gt;
  
  
  Optional chaining with an array
&lt;/h2&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;arrayItem&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;?.[&lt;/span&gt;&lt;span class="mi"&gt;42&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Optional chaining is forbidden in write contexts such as &lt;code&gt;a?.b = c&lt;/code&gt;.&lt;br&gt;
Optional deletion as in: &lt;code&gt;delete a ?.b&lt;/code&gt; is supported.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Let's see what babel transpiler does with this Optional chaining syntax&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;nameLength&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;db&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;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;It transpile into&lt;br&gt;
&lt;/p&gt;

&lt;div class="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;_db&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;nameLength&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;_db&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;db&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="nx"&gt;_db&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;_db&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;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;If you don't know what &lt;code&gt;void 0&lt;/code&gt; does, it evaluates the given expression and then returns &lt;code&gt;undefined&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Syntax
&lt;/h2&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;prop&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Object&lt;/span&gt;
&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;?.[&lt;/span&gt;&lt;span class="nx"&gt;expr&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt; &lt;span class="c1"&gt;// Expressions&lt;/span&gt;
&lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;?.[&lt;/span&gt;&lt;span class="nx"&gt;index&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt; &lt;span class="c1"&gt;// Array&lt;/span&gt;
&lt;span class="nx"&gt;func&lt;/span&gt;&lt;span class="p"&gt;?.(&lt;/span&gt;&lt;span class="nx"&gt;args&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Function calls&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h3&gt;
  
  
  Resources
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;&lt;a href="https://v8.dev/features/optional-chaining"&gt;V8&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://tc39.es/proposal-optional-chaining/"&gt;tc39&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining"&gt;MDN&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Thanks for reading!&lt;/p&gt;

</description>
      <category>javascript</category>
    </item>
    <item>
      <title>Setting Up Your React Project</title>
      <dc:creator>Vinoth Kumar</dc:creator>
      <pubDate>Sun, 19 Jan 2020 17:57:18 +0000</pubDate>
      <link>https://dev.to/vnoitkumar/setting-up-your-react-project-4ckj</link>
      <guid>https://dev.to/vnoitkumar/setting-up-your-react-project-4ckj</guid>
      <description>&lt;p&gt;In the section, we are going to see the necessary things to make sure before you start a react project. We are not going to do any changes in react, instead, we will focus on stuff that needs to be done before that.&lt;/p&gt;

&lt;p&gt;You can consider this section as a to-do list for setting up a react project.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;We are going to use &lt;a href="https://code.visualstudio.com/"&gt;VS Code&lt;/a&gt; in our case&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  What is React?
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://reactjs.org/"&gt;React&lt;/a&gt; is an open-source JavaScript library for building user interfaces which were created by Jordan Walk and maintained by Facebook and a community of individual developers and companies.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Create React App?
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://create-react-app.dev/"&gt;Create React App&lt;/a&gt; (CRA) is an officially and easiest way to get started building React applications.&lt;/p&gt;

&lt;h3&gt;
  
  
  Quick Start
&lt;/h3&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;npx create-react-app demo
code demo
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h3&gt;
  
  
  ESLint
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://eslint.org/"&gt;ESLint&lt;/a&gt; is a static code analysis tool for identifying problematic patterns found in JavaScript code.&lt;/p&gt;

&lt;p&gt;Install &lt;a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint"&gt;ESLint&lt;/a&gt; in your code editor.&lt;/p&gt;

&lt;p&gt;Create a &lt;code&gt;.eslintrc&lt;/code&gt; file in the root directory of the project.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"extends"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"react-app"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"plugin:jsx-a11y/strict"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h3&gt;
  
  
  EditorConfig
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Why EditorConfig?
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://editorconfig.org/"&gt;EditorConfig&lt;/a&gt; helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.&lt;/p&gt;

&lt;p&gt;Install &lt;a href="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig"&gt;EditorConfig&lt;/a&gt; in your code editor.&lt;/p&gt;

&lt;p&gt;Create a &lt;code&gt;.editorconfig&lt;/code&gt; file in the root directory of the project.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;root&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="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="nx"&gt;charset&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;utf&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;8&lt;/span&gt;
&lt;span class="nx"&gt;end_of_line&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;lf&lt;/span&gt;
&lt;span class="nx"&gt;indent_size&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;
&lt;span class="nx"&gt;indent_style&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;space&lt;/span&gt;
&lt;span class="nx"&gt;insert_final_newline&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;
&lt;span class="nx"&gt;max_line_length&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;80&lt;/span&gt;
&lt;span class="nx"&gt;trim_trailing_whitespace&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="o"&gt;*&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;md&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="nx"&gt;max_line_length&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;
&lt;span class="nx"&gt;trim_trailing_whitespace&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;

&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;COMMIT_EDITMSG&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="nx"&gt;max_line_length&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h3&gt;
  
  
  Prettier
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://prettier.io/"&gt;Prettier&lt;/a&gt; is a code formatter.&lt;/p&gt;

&lt;p&gt;Add &lt;a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode"&gt;Prettier&lt;/a&gt; to your editor.&lt;/p&gt;

&lt;p&gt;Create a &lt;code&gt;.prettierrc&lt;/code&gt; file in the root directory of the project.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"tabWidth"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"semi"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"singleQuote"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"jsxSingleQuote"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Add or remove rules according to your convenience&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Go to &lt;a href="https://code.visualstudio.com/docs/getstarted/settings"&gt;VS Code Setting&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Search for &lt;code&gt;"Editor: Formate On Save"&lt;/code&gt; and make sure you check the box to formate the code when you save the file.&lt;/p&gt;

&lt;p&gt;If you are in the middle of the project and the codes are not formatted well you can do then as well.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;npx prettier &lt;span class="nt"&gt;--write&lt;/span&gt; &lt;span class="s2"&gt;"src/**/*.{js,jsx,json,css,scss,md}"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h3&gt;
  
  
  Checklist
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;ESLint&lt;/li&gt;
&lt;li&gt;EditorConfig&lt;/li&gt;
&lt;li&gt;Prettier&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Resources
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;&lt;a href="https://web.dev/accessibility-auditing-react/#use-eslint-plugin-jsx-a11y"&gt;web.dev&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://create-react-app.dev/docs/setting-up-your-editor/"&gt;create-react-app.dev&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/facebook/react/blob/master/.editorconfig"&gt;react github repo&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Thanks for reading!&lt;/p&gt;

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