<?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>Forem: Sharafat Ahmed Sabir</title>
    <description>The latest articles on Forem by Sharafat Ahmed Sabir (@sabir001).</description>
    <link>https://forem.com/sabir001</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%2F285886%2F250f4c35-28dd-46a5-ac8f-2381d350e242.jpeg</url>
      <title>Forem: Sharafat Ahmed Sabir</title>
      <link>https://forem.com/sabir001</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/sabir001"/>
    <language>en</language>
    <item>
      <title>Working in a startup</title>
      <dc:creator>Sharafat Ahmed Sabir</dc:creator>
      <pubDate>Mon, 13 Jul 2020 20:16:21 +0000</pubDate>
      <link>https://forem.com/sabir001/working-in-a-startup-532n</link>
      <guid>https://forem.com/sabir001/working-in-a-startup-532n</guid>
      <description>&lt;p&gt;I am a software engineer. I am lucky to have worked in 3 different types of companies already in my career. I joined &lt;a href="https://www.orion-informatics.com/" title="Orion Informatics Ltd."&gt;Orion Informatics Ltd.&lt;/a&gt; in 2017. It is one of the oldest software companies in Bangladesh. Then I joined a startup named  &lt;a href="https://apploye.com/" title="Apploye"&gt;Apploye&lt;/a&gt; at very early stage of the company. And now I am working at &lt;a href="https://wpdeveloper.net/" title="WPDeveloper"&gt;WPDeveloper&lt;/a&gt; which is a bootstrapped company.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Journey
&lt;/h2&gt;

&lt;p&gt;After two years of work in &lt;a href="https://www.orion-informatics.com/" title="Orion Informatics Ltd."&gt;Orion Informatics Ltd.&lt;/a&gt;, I needed a change. I was working on a financial web application written in Java Spring Framework at Orion. Although I was contributing to the project, still I was working on a small part of a big project. I wanted to learn more. So, I made a decision to leave my low stress good paying job to join &lt;a href="https://apploye.com/" title="Apploye"&gt;Apploye&lt;/a&gt; to make a much bigger impact.&lt;/p&gt;

&lt;p&gt;I had to document and design APIs, choose technology stacks, and also manage the servers for my new company besides my regular development tasks. Was I ready for these new challenges? To be fair, No. I was not. I never did these tasks in my previous company. The closest thing I ever did was at University level projects. I did not even know how the cloud works. &lt;/p&gt;

&lt;p&gt;We always had tight deadlines in our startup. We wanted to release the product as soon as possible and gather feedback from customers. Also, if you raise investment, there will always be deadline related pressure. Investors will always want to see returns on their investments as soon as possible.&lt;/p&gt;

&lt;p&gt;This pressure of deadlines was stressful. But, I was learning at a much faster rate than ever. I even stayed at the office at night for about a month even though my house was 3-4 kilometers away from my office. Then I rented a house which was less than 50 meters away from my office.&lt;/p&gt;

&lt;p&gt;I had to do so many things that were not in my job description like reviewing the company privacy policy and terms of services, reviewing the presentation of salespeople, etc. This may not be common for every startup or every employee. But, you should be open to any type of work when you are in a startup.&lt;/p&gt;

&lt;p&gt;It is true that when you are engaged in so many things, it is hard to be expert in a specific framework or language. But, you also get to see the whole image of the product. Also, you will be responsible for more things. So, it will be a good opportunity if you want to form a company yourself in the future. From raising investment to earning a modest MRR (Monthly Recurring Revenue), a startup faces many highs and lows. Working in a startup will help you to understand business a bit more.&lt;/p&gt;




&lt;p&gt;Not all startups are the same. Some startups raised millions of dollars. Also, some startups are not well funded. Some offer good financial packages and some do not. So, my experience might not be similar to others. I will try to explain why you should join a startup and why you should not from my understandings. &lt;/p&gt;

&lt;h2&gt;
  
  
  Why you should join a startup
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;You will learn a lot. &lt;/li&gt;
&lt;li&gt;You will have a broader view of the software. You will learn different parts of the whole product.&lt;/li&gt;
&lt;li&gt;It is a great opportunity to observe a business closely if you want to start your own business in the future.&lt;/li&gt;
&lt;li&gt;You will have more opportunities and responsibilities. &lt;/li&gt;
&lt;li&gt;And probably, your work will be more appreciated.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Why you should not join a startup
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Salary will most likely be below par than market leaders.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://finance.yahoo.com/news/90-startups-fail-within-3-090000944.html" title="Most Startups fail" rel="noopener noreferrer"&gt;Most startups fail within 3 years.&lt;/a&gt;. Although we like to believe we will stand out, most of the time, it is not the case.&lt;/li&gt;
&lt;li&gt;You will have to work a lot.&lt;/li&gt;
&lt;li&gt;You do not like to switch tasks frequently. &lt;/li&gt;
&lt;li&gt;Everyone will be so busy that you are less likely to find good mentorship in your team.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is not a complete list. There are both pros and cons of joining startups. Also, the experience differs from person to person. Till now, I have not regretted my decision of joining &lt;a href="https://apploye.com/" title="Apploye"&gt;Apploye&lt;/a&gt;. But, try to gather some information before joining any startup. Those are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The financial state of the startup.&lt;/li&gt;
&lt;li&gt;Get to know the team if you can.&lt;/li&gt;
&lt;li&gt;Properly analyze your gains and losses. &lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>career</category>
      <category>startup</category>
    </item>
    <item>
      <title>JavaScript: Learn to filter array</title>
      <dc:creator>Sharafat Ahmed Sabir</dc:creator>
      <pubDate>Mon, 18 May 2020 11:59:38 +0000</pubDate>
      <link>https://forem.com/sabir001/javascript-learn-to-filter-array-iee</link>
      <guid>https://forem.com/sabir001/javascript-learn-to-filter-array-iee</guid>
      <description>&lt;p&gt;In my &lt;a href="https://blog.iamsabir.com/javascript-array-map-method/" title="forEach"&gt;previous blog&lt;/a&gt; I wrote about JavaScript array &lt;code&gt;map&lt;/code&gt; method. In this article, I will write about &lt;code&gt;filter&lt;/code&gt; method.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;filter&lt;/code&gt; is a non-mutating method. Filter does not affect (modify) the original array if we use this method correctly. This (does not affect) does not mean that after applying &lt;code&gt;filter&lt;/code&gt;, the resulting array and original array elements will be the same. The resulting array will be a completely new array with different reference to the original array. The new array elements can be different than the original array. But, original array elements and reference will be unchanged.&lt;/p&gt;

&lt;h2&gt;
  
  
  filter
&lt;/h2&gt;

&lt;p&gt;Like the &lt;code&gt;map&lt;/code&gt; method, the &lt;code&gt;filter&lt;/code&gt; method creates a new array with the same length from the original array. But, instead of creating an array with the same length as &lt;code&gt;map&lt;/code&gt;, the &lt;code&gt;filter&lt;/code&gt; method can create a new array with the same length or a smaller size array based on a condition.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;filter&lt;/code&gt; structure:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;resultingArray&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;oldArray&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;currentValue&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="nx"&gt;oldArr&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// return true or false&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;&lt;code&gt;filter&lt;/code&gt; expects two parameters. &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;code&gt;callback&lt;/code&gt; function. This does the main job. We have to return &lt;code&gt;true&lt;/code&gt; to keep the element in &lt;code&gt;resultingArray&lt;/code&gt; and &lt;code&gt;false&lt;/code&gt; to exclude the element. We can use traditional function. Or &lt;code&gt;ES6&lt;/code&gt; &lt;code&gt;arrow&lt;/code&gt; function. In our case, &lt;code&gt;(currentValue, index, oldArr) =&amp;gt; { // return true or false }&lt;/code&gt; this is the &lt;code&gt;callback&lt;/code&gt; function.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;this&lt;/code&gt; argument. You can use it as &lt;code&gt;this&lt;/code&gt; value in the &lt;code&gt;callback&lt;/code&gt; function. It is optional and rarely used.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Now, &lt;code&gt;callback&lt;/code&gt; function accepts 3 arguments. These arguments are optional. But, the first two arguments are frequently used.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;currentValue&lt;/code&gt;. This is the element or value being processed in every loop iteration.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;index&lt;/code&gt;. This represents the index of &lt;code&gt;currentValue&lt;/code&gt; in the original array.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;array&lt;/code&gt;. This is a rarely used argument. This represents the original array on which the &lt;code&gt;filter&lt;/code&gt; method was applied.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;After processing, &lt;code&gt;filter&lt;/code&gt; returns a new array. In our case, that array is &lt;code&gt;resultingArray&lt;/code&gt;. &lt;code&gt;filter&lt;/code&gt; creates this new array without modifying &lt;code&gt;oldArray&lt;/code&gt;. The &lt;code&gt;resultingArray&lt;/code&gt; contains elements for which &lt;code&gt;callback&lt;/code&gt; function returned &lt;code&gt;true&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;persons&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="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Jane&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;19&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;21&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Rick&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;17&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;David&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;22&lt;/span&gt; &lt;span class="p"&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;names&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;persons&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;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;// ES5 function syntax:&lt;/span&gt;
&lt;span class="c1"&gt;// const names = persons.filter(function () {&lt;/span&gt;
&lt;span class="c1"&gt;//   return true;&lt;/span&gt;
&lt;span class="c1"&gt;// });&lt;/span&gt;


&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;names&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// output: &lt;/span&gt;
&lt;span class="c1"&gt;// [&lt;/span&gt;
&lt;span class="c1"&gt;//   { name: 'Jane', age: 19 },&lt;/span&gt;
&lt;span class="c1"&gt;//   { name: 'John', age: 21 },&lt;/span&gt;
&lt;span class="c1"&gt;//   { name: 'Rick', age: 17 },&lt;/span&gt;
&lt;span class="c1"&gt;//   { name: 'David', age: 22 }&lt;/span&gt;
&lt;span class="c1"&gt;// ]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;In this example, we have created an exact copy of the original array. In the &lt;code&gt;filter&lt;/code&gt; method, I am passing a function that returns &lt;code&gt;true&lt;/code&gt; in every iteration. As it returns &lt;code&gt;true&lt;/code&gt; for every element in the original array, every element is present in the new array. If we return &lt;code&gt;false&lt;/code&gt; for every element, then the new array would be empty.&lt;/p&gt;

&lt;p&gt;If we wanted an array which will only contain those elements where person is more than 20 years old, then we could do the following:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;persons&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="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Jane&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;19&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;21&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Rick&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;17&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;David&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;22&lt;/span&gt; &lt;span class="p"&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;newPersons&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;persons&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;person&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;person&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="c1"&gt;// ES5 function syntax:&lt;/span&gt;
&lt;span class="c1"&gt;// const newPersons = persons.filter(function (person) {&lt;/span&gt;
&lt;span class="c1"&gt;//   return person.age &amp;gt; 20;&lt;/span&gt;
&lt;span class="c1"&gt;// });&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;newPersons&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="cm"&gt;/* output: [ { name: 'John', age: 21 }, { name: 'David', age: 22 } ]
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;In this example, we have created a new array containing persons who are more than 20 years old. In the &lt;code&gt;filter&lt;/code&gt; method, I am passing a function which takes a person and returns &lt;code&gt;true&lt;/code&gt; if that person's age is more than 20 and otherwise returns &lt;code&gt;false&lt;/code&gt;. So, the &lt;code&gt;filter&lt;/code&gt; method will iterate the persons' array. When we return &lt;code&gt;true&lt;/code&gt;, the element in that iteration will be in the new array and when we return &lt;code&gt;false&lt;/code&gt;, the element in that iteration will not be in the new array.&lt;/p&gt;

&lt;p&gt;Now in the first example, I used shorthand syntax to return &lt;code&gt;true&lt;/code&gt; and in the second example, I returned &lt;code&gt;true&lt;/code&gt; and &lt;code&gt;false&lt;/code&gt; explicitly. &lt;/p&gt;

&lt;p&gt;We can use normal &lt;code&gt;callback&lt;/code&gt; function instead of &lt;code&gt;ES6&lt;/code&gt; &lt;code&gt;arrow&lt;/code&gt; function. But, arrow functions are more readable.&lt;/p&gt;

&lt;p&gt;I will now share another example with &lt;code&gt;index&lt;/code&gt; and &lt;code&gt;array&lt;/code&gt; in &lt;code&gt;callback&lt;/code&gt; function:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;persons&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="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Jane&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;19&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;21&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Rick&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;17&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;David&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;22&lt;/span&gt; &lt;span class="p"&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;newPersons&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;persons&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;person&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="nx"&gt;array&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;person&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;index&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// ES5 function syntax:&lt;/span&gt;
&lt;span class="c1"&gt;// const newPersons = persons.filter(function (person, index, array) {&lt;/span&gt;
&lt;span class="c1"&gt;//   return person.age &amp;gt; 20 &amp;amp;&amp;amp; index &amp;lt; array.length / 2;&lt;/span&gt;
&lt;span class="c1"&gt;// });&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;newPersons&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Output: [ { name: 'John', age: 21 } ]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;In this example, I am creating a new array with only persons who are more than 20 years old and are in the first half of the array. So, David is not in the resulting array despite being more than 20 years old as he is in the second half of the array.&lt;/p&gt;

&lt;p&gt;All modern browsers support &lt;code&gt;filter&lt;/code&gt;. You can find complere reference &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter#Browser_compatibility" title="filter browser compatibility" rel="noopener noreferrer"&gt;here&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  When not to use the filter method
&lt;/h2&gt;

&lt;p&gt;When you need to modify an array, &lt;code&gt;filter&lt;/code&gt; will not be able to do the job in that case. &lt;code&gt;filter&lt;/code&gt; returns the same element for which &lt;code&gt;callback&lt;/code&gt; function returns &lt;code&gt;true&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;So, when you need to modify the array elements, you can use &lt;a href="https://blog.iamsabir.com/javascript-array-map-method/" title="map"&gt;&lt;code&gt;map&lt;/code&gt;&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;You should learn about all array methods to use them appropriately in your codebase.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why filter is more readable
&lt;/h2&gt;

&lt;p&gt;Suppose, you are creating a new array of persons who are more than 20 years old like our second example with traditional &lt;code&gt;for&lt;/code&gt; loop. Then, the code should be like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;newPersons&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;
&lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&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;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;persons&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="nx"&gt;i&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="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;persons&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
    &lt;span class="nx"&gt;newPersons&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;persons&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&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;You need to go through the whole code to understand that  I am creating a new array with persons who are more than 20 years old. You will also have to check if I have written a &lt;code&gt;break&lt;/code&gt; or &lt;code&gt;continue&lt;/code&gt; statement to skip any particular value or not. You will also have to check if I am modifying the elements of the array or not.&lt;/p&gt;

&lt;p&gt;But, in my &lt;code&gt;filter&lt;/code&gt; example, as soon as you see a &lt;code&gt;filter&lt;/code&gt; method, you know that I am creating a new array with the same type of elements as the original array. You will be sure that in the resulting array, elements structure or type is not modified. Also, the main logic of elements which will be in the resulting array is very easy to find.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;newPersons&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;persons&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;person&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;person&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;20&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;When we use &lt;code&gt;filter&lt;/code&gt;, we can focus more on logic cause it's purpose is defined. &lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;The &lt;code&gt;filter&lt;/code&gt; method has a specific purpose. That purpose is: creating a new array with elements that pass a specific condition. Whenever we need this functionality in our code, we should be using &lt;code&gt;filter&lt;/code&gt; for better readability and maintainability.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Write more readable code in JavaScript using map array method</title>
      <dc:creator>Sharafat Ahmed Sabir</dc:creator>
      <pubDate>Sat, 09 May 2020 09:35:39 +0000</pubDate>
      <link>https://forem.com/sabir001/write-more-readable-code-using-map-array-method-5c45</link>
      <guid>https://forem.com/sabir001/write-more-readable-code-using-map-array-method-5c45</guid>
      <description>&lt;p&gt;The array is one of the most common data types in JavaScript. There are many useful methods associated with arrays like &lt;code&gt;map&lt;/code&gt;, &lt;code&gt;filter&lt;/code&gt;, &lt;code&gt;reduce&lt;/code&gt;, &lt;code&gt;find&lt;/code&gt;, &lt;code&gt;some&lt;/code&gt;, &lt;code&gt;forEach&lt;/code&gt;, &lt;code&gt;push&lt;/code&gt;, &lt;code&gt;pop&lt;/code&gt;, etc. In this article, I am gonna talk about &lt;code&gt;map&lt;/code&gt; method.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;map&lt;/code&gt; is a non-mutating method. So, if you do things right, the main array elements will not be affected (modified).&lt;/p&gt;

&lt;h2&gt;
  
  
  Map
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;map&lt;/code&gt; method creates a new array with the same length from the original array. It is very helpful when you need to create a new array from the original array and you also want to do some operations on each item in the array.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;map&lt;/code&gt; structure:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;resultingArray&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;oldArray&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;currentValue&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="nx"&gt;oldArr&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// return an element&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;&lt;code&gt;map&lt;/code&gt; expects two arguments. &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;code&gt;callback&lt;/code&gt; function. This does the main job. We can use traditional function. Or &lt;code&gt;ES6&lt;/code&gt; &lt;code&gt;arrow&lt;/code&gt; function. In our case, &lt;code&gt;(currentValue, index, oldArr) =&amp;gt; { // return an element }&lt;/code&gt; this is the &lt;code&gt;callback&lt;/code&gt; function.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;this&lt;/code&gt; argument. You can use it as &lt;code&gt;this&lt;/code&gt; value in the &lt;code&gt;callback&lt;/code&gt; function. It is optional and rarely used.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Now, &lt;code&gt;callback&lt;/code&gt; function has 3 arguments. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;currentValue&lt;/code&gt;. This is the element or value being processed in every loop iteration.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;index&lt;/code&gt;. This is optional. This represents the index of &lt;code&gt;currentValue&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;array&lt;/code&gt;. This is also an optional and rarely used argument. This represents the original array on which &lt;code&gt;map&lt;/code&gt; method was applied.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;After processing, &lt;code&gt;map&lt;/code&gt; returns the &lt;code&gt;resultingArray&lt;/code&gt; without modifying &lt;code&gt;oldArray&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;persons&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="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Jane&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;19&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;21&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Rick&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;17&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;David&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;22&lt;/span&gt; &lt;span class="p"&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;names&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;persons&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;person&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;person&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="cm"&gt;/*
* ES5 function syntax:
* const names = persons.map(function (person) {
*   return person.name;
* });
*/&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;names&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// output: ['Jane', 'John', 'Rick', 'David']&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;In this example, we have created a new array containing only names. In the &lt;code&gt;map&lt;/code&gt; function, I am passing a function which takes a person and returns that person's name. So, it loops through the array, for every element in that array, it returns only the &lt;code&gt;name&lt;/code&gt; property hence creates a new array with only names.&lt;/p&gt;

&lt;p&gt;If we wanted an array containing name and a flag to determine if the person is 20 plus aged, then we could do the following:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;persons&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="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Jane&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;19&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;21&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Rick&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;17&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;David&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;22&lt;/span&gt; &lt;span class="p"&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;newPersons&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;persons&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;person&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;person&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="na"&gt;twentyPlus&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;person&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="cm"&gt;/*
* ES5 function syntax: 
* const newPersons = persons.map(function (person) {
*   return { name: person.name, twentyPlus: person.age &amp;gt; 20 };
* });
*/&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;newPersons&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="cm"&gt;/* output:
* [
*   { name: 'Jane', twentyPlus: false },
*   { name: 'John', twentyPlus: true },
*   { name: 'Rick', twentyPlus: false },
*   { name: 'David', twentyPlus: true }
* ]
*/&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;In this example, we have created a new array containing names and a flag to determine if the person's age is more than twenty or not. In the &lt;code&gt;map&lt;/code&gt; function, I am passing a function which takes a person and returns a new object. That object contains the person's name and a flag to determine if the person's age is more than twenty or not. So, it loops through the array, for every element in that array, it returns the &lt;code&gt;name&lt;/code&gt; property and that boolean value wrapped in an object hence creates a new array with names and &lt;code&gt;twentyPlus&lt;/code&gt; flag.&lt;/p&gt;

&lt;p&gt;Now in the first example, I used shorthand syntax to return name and in the second example, I returned the new object explicitly. &lt;/p&gt;

&lt;p&gt;We can use normal &lt;code&gt;callback&lt;/code&gt; function instead of &lt;code&gt;ES6&lt;/code&gt; &lt;code&gt;arrow&lt;/code&gt; function. But, arrow functions are more readable.&lt;/p&gt;

&lt;p&gt;I will now share another example with &lt;code&gt;index&lt;/code&gt; and &lt;code&gt;array&lt;/code&gt; in &lt;code&gt;callback&lt;/code&gt; function:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;persons&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="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Jane&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;19&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;21&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Rick&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;17&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;David&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;22&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;];&lt;/span&gt;

&lt;span class="c1"&gt;// index will add 0, 1, 2, 3 respectively and array.length will&lt;/span&gt;
&lt;span class="c1"&gt;// add 4 for every new item's modifiedAge property&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;newPersons&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;persons&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;person&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="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;person&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="na"&gt;modifiedAge&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;person&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;index&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;array&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;span class="c1"&gt;// ES5 function syntax:&lt;/span&gt;
&lt;span class="c1"&gt;// const newPersons = persons.map(function (person, index, array) {&lt;/span&gt;
&lt;span class="c1"&gt;//   return { name: person.name, modifiedAge: person.age + index + array.length };&lt;/span&gt;
&lt;span class="c1"&gt;// });&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;newPersons&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// Output:&lt;/span&gt;
&lt;span class="c1"&gt;// [&lt;/span&gt;
&lt;span class="c1"&gt;//   { name: 'Jane', modifiedAge: 23 },&lt;/span&gt;
&lt;span class="c1"&gt;//   { name: 'John', modifiedAge: 26 },&lt;/span&gt;
&lt;span class="c1"&gt;//   { name: 'Rick', modifiedAge: 23 },&lt;/span&gt;
&lt;span class="c1"&gt;//   { name: 'David', modifiedAge: 29 }&lt;/span&gt;
&lt;span class="c1"&gt;// ]&lt;/span&gt;

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



&lt;p&gt;All modern browsers support &lt;code&gt;map&lt;/code&gt;. You can find complere reference &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Browser_compatibility" title="map browser compatibility" rel="noopener noreferrer"&gt;here&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  When not to use map
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;map&lt;/code&gt; is not for every situations. When you do not want or need to return value or create new array with the same length, map should not be used. &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" title="forEach" rel="noopener noreferrer"&gt;forEach&lt;/a&gt; or other array methods should be more suitable on those situations.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why map is more readable
&lt;/h2&gt;

&lt;p&gt;Suppose, you are creating a new array of persons with name and twentyPlus boolean flag like our second example with traditional &lt;code&gt;for&lt;/code&gt; loop. Then, the code should be like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;newPersons&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;
&lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&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;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;persons&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="nx"&gt;i&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="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;person&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;persons&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&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="na"&gt;twentyPlus&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;persons&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;
  &lt;span class="nx"&gt;newPersons&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;person&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;You have to go through the whole code to understand that I am creating a new array. And the main logic of creating that array resides inside &lt;code&gt;person&lt;/code&gt; object creation part inside the &lt;code&gt;for&lt;/code&gt; loop. You will also have to check if I have written a &lt;code&gt;break&lt;/code&gt; or &lt;code&gt;continue&lt;/code&gt; statement to skip any particular value or not. &lt;/p&gt;

&lt;p&gt;On the other hand, as soon as you see a &lt;code&gt;map&lt;/code&gt; method, you know that I am creating a new array of the same length. As new array must be of the same length, I cannot use &lt;code&gt;break&lt;/code&gt; or &lt;code&gt;continue&lt;/code&gt; to skip values.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;newPersons&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;persons&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;person&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;person&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="na"&gt;twentyPlus&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;person&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;20&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;When we use &lt;code&gt;map&lt;/code&gt;, we can focus more on logic cause it's purpose is defined. &lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;map&lt;/code&gt; is a very handy array method. It has a specific purpose. That purpose is: creating a new (modified) array with the same length. Whenever we need this functionality in our code, we should be using &lt;code&gt;map&lt;/code&gt; for better readability and maintainability.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>map</category>
      <category>array</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Authentication Best Practices in REST and GraphQL APIs</title>
      <dc:creator>Sharafat Ahmed Sabir</dc:creator>
      <pubDate>Thu, 16 Apr 2020 13:06:56 +0000</pubDate>
      <link>https://forem.com/sabir001/authentication-best-practices-in-rest-and-graphql-apis-5964</link>
      <guid>https://forem.com/sabir001/authentication-best-practices-in-rest-and-graphql-apis-5964</guid>
      <description>&lt;p&gt;This was originally posted in &lt;a href="https://blog.iamsabir.com/authentication-best-practices-in-rest-and-graphql/" rel="noopener noreferrer"&gt;here&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You want to let only selected users to use certain features of your product? You need proper authentication and authorization process. These two are different. Authentication is the process of identifying if the user is valid. And authorization is the process which checks and grants access to different features or resources.&lt;/p&gt;

&lt;p&gt;Both REST and GraphQL are not opinionated. So, you can put in place authentication anyway you like. But, as it is a very sensitive feature, you should always keep security in mind.&lt;/p&gt;

&lt;p&gt;In this article, I will be talking about the authentication and authorization process of web applications which are built on top of REST or GraphQL APIs. I will be pointing out some best practices you should follow.&lt;/p&gt;

&lt;h3&gt;
  
  
  Table of Contents:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Always use HTTPS&lt;/li&gt;
&lt;li&gt;Saving Hashed Password&lt;/li&gt;
&lt;li&gt;Never Pass the Hash with the Request&lt;/li&gt;
&lt;li&gt;Session or Token&lt;/li&gt;
&lt;li&gt;JWT for Token&lt;/li&gt;
&lt;li&gt;Cookies or Session or Local Storages?&lt;/li&gt;
&lt;li&gt;CSRF Handling&lt;/li&gt;
&lt;li&gt;Short Description&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Always use HTTPS
&lt;/h2&gt;

&lt;p&gt;HTTP and HTTPS are both protocols for networks. HTTP means Hypertext Transfer Protocol and HTTPS means Hypertext Transfer Secure.&lt;/p&gt;

&lt;p&gt;We can even tell by the name that HTTPS is more secure. So, any website working with user data, credentials, etc. must use HTTPS protocol for transferring data.&lt;/p&gt;

&lt;p&gt;How is HTTPS secure? Well, in this protocol, data is first encrypted and then sent to the server. Wondering how this encryption is going to help you?&lt;/p&gt;

&lt;p&gt;Assume you want to use a web service where you have to sign in using your username and password. If that website is using HTTP protocol, then any outsider can sniff packets which are being sent to your server including your password in plain text. Payload (username, password, etc.) is encrypted in websites using HTTPS. So, if the attacker wants to know the password, he will have to know the private key of your SSL certificate.&lt;/p&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%2Ft8w6sg717f1kjygf8hnm.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%2Ft8w6sg717f1kjygf8hnm.jpg" alt="HTTP Flaw"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So, HTTPS is a must if you are building any website which will be working with user data. Also, redirect to HTTPS if anyone types HTTP to enter your website.&lt;/p&gt;

&lt;h2&gt;
  
  
  Saving Hashed Password
&lt;/h2&gt;

&lt;p&gt;Imagine you have the best talents around the world at your disposal. But, if you are saving user passwords in plain text, you are putting your users at risk. Hackers attacked and stole passwords, credit cards, etc. data of millions of users by attacking popular sites like &lt;a href="https://outpost24.com/blog/top-10-of-the-world-biggest-cyberattacks" title="top 10 of the world biggest cyberattacks" rel="noopener noreferrer"&gt;Sony, Adobe, Yahoo, etc.&lt;/a&gt; So, even if you have the best engineers in the world, you need to have the basics right. Please do not save the passwords in plain text.&lt;/p&gt;

&lt;p&gt;Now you might wonder, if I do not save password, how can I know if one who is trying to sign in, is the correct user?&lt;/p&gt;

&lt;p&gt;The answer is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Use Hash&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Anyway, do not get confused with "Hashtag". ;)&lt;/p&gt;

&lt;p&gt;Hash is a function which transforms one data into another in a very fast manner. Hashed data is not reversible. So, hash the password and save it in the database. Next time someone tries to sign in, hash password provided by him/her and check against the database.&lt;/p&gt;

&lt;p&gt;Now we have secured everything. Right?&lt;/p&gt;

&lt;p&gt;No. Attackers can use &lt;a href="https://www.lifewire.com/rainbow-tables-your-passwords-worst-nightmare-2487288" title="rainbow tables your passwords worst nightmare" rel="noopener noreferrer"&gt;rainbow tables&lt;/a&gt; to reverse the hashed data to plain text.&lt;/p&gt;

&lt;p&gt;Now what?&lt;/p&gt;

&lt;p&gt;Well, you should add &lt;a href="https://auth0.com/blog/adding-salt-to-hashing-a-better-way-to-store-passwords/" title="adding salt to hashing a better way to store passwords" rel="noopener noreferrer"&gt;salt&lt;/a&gt; to your hashing process. Beware, salt is not the silver bullet. Imagine your servers have been attacked and attackers have got access to your database. They will probably find your salt and hashing algorithm in no time. Then they will use brute force to generate a rainbow table with your salt and hashing algorithm to find out user passwords.&lt;/p&gt;

&lt;p&gt;So, here we cannot do much. Popular hashing algorithms are very fast. We need to slow attackers down. So we should use &lt;a href="https://codahale.com/how-to-safely-store-a-password/" title="how to safely store a password" rel="noopener noreferrer"&gt;bycrypt&lt;/a&gt; as our hashing algorithm. It is very slow. But, in this case, we want to slow down the process. A user won't care much if the hashing algorithm needed .2-.3 seconds extra while signing in. But, it will make attackers life hell.&lt;/p&gt;

&lt;h2&gt;
  
  
  Never Pass the Hash with the Request
&lt;/h2&gt;

&lt;p&gt;Now you might be thinking, how would I know if the user is correct in every REST or GraphQL request?&lt;/p&gt;

&lt;p&gt;First of all, never send the hash of password back from the server. It's the number one rule.&lt;/p&gt;

&lt;p&gt;If you are passing around the hash, it will eventually end up in wrong hands.&lt;/p&gt;

&lt;p&gt;So, what should we do? What are the best practices for letting the server know if the user is valid or not?&lt;/p&gt;

&lt;p&gt;Instead of passing hash of password to front end to use that in subsequent queries, generate session-id or token and pass that. In the below section, I will discuss about session-id and tokens.&lt;/p&gt;

&lt;h2&gt;
  
  
  Session or Token?
&lt;/h2&gt;

&lt;p&gt;You can use either session-id or token for REST or GraphQL APIs. What is the best approach?&lt;/p&gt;

&lt;p&gt;First, you have to understand HTTP/HTTPS, REST and GraphQL. HTTP/HTTPS is stateless. It does not store data from previous requests. Apart from Websockets and Subscriptions, REST and GraphQL are also stateless. A server does not normally remembers requests. It just serves the API calls it received.&lt;/p&gt;

&lt;p&gt;We need to to check state sometimes. Sometimes the server needs to know if the user is authenticated. Session-id and tokens solve the problem differently.&lt;/p&gt;

&lt;p&gt;In session-id, the server generates a session-id when user sign in. It stores the session-id. If you have multiple servers to serve high traffic, you need to store that id in a shared or distributed database. In the case of a shared database, it can create a bottleneck.&lt;/p&gt;

&lt;p&gt;Now in token-based systems, the server creates a token which contains some necessary information. Generally, this contains user_id, role, expiration date, etc. info. This token is not stored in servers. The server sents token to the front end. When the front end needs data from authenticated APIs, it sends the token to the server along with other data. Server checks the information written in it. And then process the request.&lt;/p&gt;

&lt;p&gt;Tokens are stateless. Server does not have to remember token. We need to know if token has been tempered. Otherwise, attackers can generate tokens to attack services.&lt;/p&gt;

&lt;p&gt;For making scalable service, tokens are always better. It is becoming de-facto day by day.&lt;/p&gt;

&lt;h2&gt;
  
  
  JWT
&lt;/h2&gt;

&lt;p&gt;In the previous section, I have stated tokens are better for scalable services. But, we also need to make sure tokens are not tempered.&lt;/p&gt;

&lt;p&gt;JWT is the answer. In a JWT token, there are 3 parts. &lt;code&gt;Header, Payload and Signature&lt;/code&gt;. First two parts are &lt;code&gt;base64Url&lt;/code&gt; encoded JSON data separated by a dot.&lt;/p&gt;

&lt;h3&gt;
  
  
  Header
&lt;/h3&gt;

&lt;p&gt;Typically header consists of two parts. &lt;code&gt;alg and type&lt;/code&gt;. &lt;code&gt;alg&lt;/code&gt; defines the name of the algorithm used. &lt;code&gt;type&lt;/code&gt; is the type of token i.e JWT.&lt;/p&gt;

&lt;h3&gt;
  
  
  Payload
&lt;/h3&gt;

&lt;p&gt;It contains the important information. User id, expiration time of token, issuer, subject, etc. are stored here. Server checks different data from here.&lt;/p&gt;

&lt;h3&gt;
  
  
  Signature
&lt;/h3&gt;

&lt;p&gt;It is the most important part. Encoded header, payload, and a secret is used to create a signature. Server has the secret. So, it can verify payload using this secret. So, the server can be sure, nobody tempered the payload.&lt;/p&gt;

&lt;p&gt;JWT is a very popular implementation of token-based authentication system. It is widely used. OpenID connect, Auth0, etc. also uses JWT as their token.&lt;/p&gt;

&lt;h2&gt;
  
  
  Cookies or Session or Local Storages?
&lt;/h2&gt;

&lt;p&gt;We must store the JWT token returned by the server. We need to store it in a way that can persist a long time. Users should not be signed out after closing browser. We also have to store it securely.&lt;/p&gt;

&lt;p&gt;Session storage is short-lived. Closing tab/browser wipes out session storage.&lt;/p&gt;

&lt;p&gt;Local storage persists even after we close browser. So, it is a very popular choice to store token. But, it is not the most secure place to store JWT tokens. Articles like &lt;a href="https://medium.com/redteam/stealing-jwts-in-localstorage-via-xss-6048d91378a0" title="stealing jwts in localstorage via xss" rel="noopener noreferrer"&gt;this&lt;/a&gt;, &lt;a href="https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage" title="where to store your jwts cookies vs html5 web storage" rel="noopener noreferrer"&gt;this&lt;/a&gt; and &lt;a href="https://auth0.com/docs/security/store-tokens#don-t-store-tokens-in-local-storage" title="don-t-store-tokens-in-local storage" rel="noopener noreferrer"&gt;this&lt;/a&gt; explains problem with local storage. It is succeptible to XSS (Cross Site Scripting) attacks.&lt;/p&gt;

&lt;p&gt;Cookies are relatively smaller storage. It has some attributes like expiration date. Cookies are also vulnerable to various attacks. But, we can set the &lt;code&gt;HttpOnly&lt;/code&gt; flag to &lt;code&gt;true&lt;/code&gt; to disable reading cookies by javascript. This will help us to mitigate XSS problems in cookies.&lt;/p&gt;

&lt;h2&gt;
  
  
  What about CSRF?
&lt;/h2&gt;

&lt;p&gt;CSRF or Cross-Site Request Forgery is the final piece of the puzzle. Attackers can use cookies to carry out CSRF. Cookies are sent with every request to the server.&lt;/p&gt;

&lt;p&gt;Imagine you are signed in to your bank's online portal and you are browsing as usual.&lt;/p&gt;

&lt;p&gt;Now, you clicked on a link that contained an invisible form that will be sent to that bank API without even any button click.&lt;/p&gt;

&lt;p&gt;If this happens, cookies related to bank service will be sent to that server. So, the bank will think you called the API. And it will transfer money according to the form data. &lt;/p&gt;

&lt;p&gt;There are two remedies for this problem. One is, setting &lt;code&gt;SameSite&lt;/code&gt; attribute in cookies. Another is to use CSRF tokens. &lt;/p&gt;

&lt;h3&gt;
  
  
  SameSite Attribute
&lt;/h3&gt;

&lt;p&gt;It is a relatively new concept. Not every browser supports this attribute. &lt;/p&gt;

&lt;p&gt;You can set one of three values in this attribute. &lt;code&gt;Strict, Lax and None&lt;/code&gt;.&lt;br&gt;
&lt;code&gt;Strict&lt;/code&gt; means, no cookie will be sent to the server if the front end and server domain are different. &lt;code&gt;Lax&lt;/code&gt; will let you send cookies from different sites when the HTTP method is GET. And, &lt;code&gt;None&lt;/code&gt; is the default behavior (Attack prone).&lt;/p&gt;

&lt;p&gt;We should remember, GraphQL uses POST requests for every API call. So, using &lt;code&gt;Lax&lt;/code&gt; in GraphQL will make no sense. &lt;/p&gt;

&lt;h3&gt;
  
  
  CSRF Tokens
&lt;/h3&gt;

&lt;p&gt;These are random unique ID generated by the server. You should save the CSRF token in local storage and JWT token in a cookie. We should set &lt;code&gt;HttpOnly&lt;/code&gt; flag to &lt;code&gt;true&lt;/code&gt;. &lt;code&gt;SameSite&lt;/code&gt; flag to &lt;code&gt;Strict&lt;/code&gt; and Secure flag to &lt;code&gt;true&lt;/code&gt;. &lt;/p&gt;

&lt;p&gt;We need to send CSRF token in the API request body. Now even if an old browser does not support &lt;code&gt;SameSite&lt;/code&gt; attribute, CSRF tokens will help us against attacks. &lt;/p&gt;

&lt;p&gt;One has to do CSRF attack on an old browser and also an XSS attack to find out the CSRF token at the same time for a successful attack. So, by this method, we have reduced attack probability.&lt;/p&gt;

&lt;h2&gt;
  
  
  tl;dr
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Use HTTPS&lt;/li&gt;
&lt;li&gt;Use bycrypt and salt to generate hash &lt;/li&gt;
&lt;li&gt;Use JWT tokens for authentication and authorization&lt;/li&gt;
&lt;li&gt;Set JWT token in Cookies. Set &lt;code&gt;HttpOnly&lt;/code&gt; and secure flag to &lt;code&gt;true&lt;/code&gt; and &lt;code&gt;SameSite&lt;/code&gt; flag to &lt;code&gt;Strict&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Use CSRF tokens and save that CSRF token in local storage.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>security</category>
      <category>webdev</category>
      <category>auth</category>
    </item>
    <item>
      <title>Case Study: A Covid19 comparison website in less than 50 working hours</title>
      <dc:creator>Sharafat Ahmed Sabir</dc:creator>
      <pubDate>Fri, 10 Apr 2020 12:10:21 +0000</pubDate>
      <link>https://forem.com/sabir001/case-study-a-covid19-comparison-website-in-less-than-50-working-hours-3pmo</link>
      <guid>https://forem.com/sabir001/case-study-a-covid19-comparison-website-in-less-than-50-working-hours-3pmo</guid>
      <description>&lt;p&gt;The world has been hit by novel coronavirus pretty badly. Cities around the world have been locked down to prevent the spreading of novel coronavirus. Covid19 is the disease created by this novel coronavirus. &lt;/p&gt;

&lt;p&gt;I have created &lt;a href="https://covid19comparison.iamsabir.com/" title="Covid19 comparison website"&gt;a website&lt;/a&gt; where people can compare historical data of covid19 situations among different countries.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--kl-KlNrD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--GWyUpsW0--/c_imagga_scale%2Cf_auto%2Cfl_progressive%2Ch_420%2Cq_auto%2Cw_1000/https://dev-to-uploads.s3.amazonaws.com/i/3364xp59tdjba2tfpc62.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--kl-KlNrD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--GWyUpsW0--/c_imagga_scale%2Cf_auto%2Cfl_progressive%2Ch_420%2Cq_auto%2Cw_1000/https://dev-to-uploads.s3.amazonaws.com/i/3364xp59tdjba2tfpc62.PNG" alt="Covid19 Comparison" title="Covid19 comparison website"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;Website link: &lt;a href="https://covid19comparison.iamsabir.com/" title="Covid19 comparison website"&gt;&lt;/a&gt;&lt;a href="https://covid19comparison.iamsabir.com"&gt;https://covid19comparison.iamsabir.com&lt;/a&gt; &lt;br&gt;&lt;br&gt;
Source Code: &lt;a href="https://github.com/Sabir001/Covid19CountryComparison" title="Source Code" rel="noopener noreferrer"&gt;Covid19CountryComparison Github Repo&lt;/a&gt; &lt;br&gt; &lt;br&gt;
Framework used: &lt;a href="https://www.gatsbyjs.org/" title="GatsbyJs" rel="noopener noreferrer"&gt;GatsbyJs&lt;/a&gt; &lt;br&gt;&lt;br&gt;
Hosting Solution: &lt;a href="https://zeit.co/" title="Zeit" rel="noopener noreferrer"&gt;Zeit&lt;/a&gt; &lt;br&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Expectation about Covid19 Comparison Website
&lt;/h2&gt;

&lt;p&gt;I wanted to show  covid19 related data of countries visually. Also, an important target was to let people compare data of different countries in the same timeline.&lt;/p&gt;

&lt;h2&gt;
  
  
  Challenges
&lt;/h2&gt;

&lt;p&gt;I faced some challenges in my journey. Here I am explaining those.&lt;/p&gt;

&lt;h3&gt;
  
  
  Data
&lt;/h3&gt;

&lt;p&gt;The first problem was data. Data is the most important thing. There are lots of different APIs where you can get various types of data. Some APIs are open for all. Some are not. &lt;/p&gt;

&lt;p&gt;I searched for open and free APIs which will serve my purpose. &lt;a href="https://github.com/pomber/covid19" title="Pomber JSON time-series data" rel="noopener noreferrer"&gt;Pomber JSON time-series data&lt;/a&gt;, &lt;a href="https://corona.lmao.ninja/docs/" title="corona.lmao.ninja" rel="noopener noreferrer"&gt;corona.lmao.ninja&lt;/a&gt; and &lt;a href="https://covid19api.com/" title="Covid19 API" rel="noopener noreferrer"&gt;Covid19 API&lt;/a&gt; helped me a lot to build the website.&lt;/p&gt;

&lt;h3&gt;
  
  
  Choosing the Right Technology
&lt;/h3&gt;

&lt;p&gt;We now have a very sweet problem in the software industry. There are too many programming languages, frameworks and libraries out there. We now have to choose technology very carefully considering our skills and desired work.&lt;/p&gt;

&lt;p&gt;I wanted this website to be either server-side rendered website or a static one. These types of websites perform better in the case of SEO. &lt;/p&gt;

&lt;p&gt;I will be explaining my choice more in the next section.&lt;/p&gt;

&lt;h2&gt;
  
  
  Technological Options
&lt;/h2&gt;

&lt;p&gt;I am comfortable working with Java ecosystem and ReactJs ecosystem. So, &lt;a href="https://nextjs.org/" title="NextJS" rel="noopener noreferrer"&gt;NextJs&lt;/a&gt; and &lt;a href="https://www.gatsbyjs.org/" title="GatsbyJs" rel="noopener noreferrer"&gt;GatsbyJs&lt;/a&gt; are two very good and convenient options for me. I have worked extensively with both frameworks. &lt;/p&gt;

&lt;p&gt;NextJs supports both static site generation per page and also server-side rendering. With its 9.3 version release, NextJs has gone to a different level. New methods like &lt;code&gt;getStaticProps&lt;/code&gt;, &lt;code&gt;getServerSideProps&lt;/code&gt; etc. are helping NextJs to become a true hybrid framework.&lt;/p&gt;

&lt;p&gt;GatsbyJs, on the other hand, is a Static Site Generator. GatsbyJs also allows us to make API calls on the fly. It is a great framework packed with various out of the box plugins. It utilizes modern technologies like GraphQl, React, etc. &lt;/p&gt;

&lt;p&gt;Now, for hosting option, I wanted to use a serverless hosting solution. This would help me to worry less about managing servers. There are a lot of serverless hosting solutions like  &lt;a href="https://zeit.co/" title="Zeit" rel="noopener noreferrer"&gt;Zeit&lt;/a&gt;, &lt;a href="https://www.netlify.com/" title="Netlify" rel="noopener noreferrer"&gt;Netlify&lt;/a&gt;, &lt;a href="https://firebase.google.com/" title="Firebase" rel="noopener noreferrer"&gt;Firebase&lt;/a&gt; etc.&lt;/p&gt;

&lt;h2&gt;
  
  
  Solution
&lt;/h2&gt;

&lt;p&gt;I have a full-time job. And after office hours, I spend a lot of time with family. So, I needed a way to build this website fast without affecting my normal routine.&lt;/p&gt;

&lt;p&gt;I choose GatsbyJs for creating the website. Although NextJs has some pretty good static site generation options, GatsbyJs is built for Static sites. You can deploy GatsbyJs in almost any kind of servers and hosting services. NextJs can be deployed in &lt;a href="https://zeit.co/" title="Zeit" rel="noopener noreferrer"&gt;Zeit&lt;/a&gt;'s serverless hosting solution. But, GatsbyJs has far more alternatives. &lt;/p&gt;

&lt;p&gt;Also, GatsbyJs has a vast array of plugins and starters. This plugins and starters help you to build website fast. &lt;/p&gt;

&lt;p&gt;For hosting solution, &lt;a href="https://zeit.co/" title="Zeit" rel="noopener noreferrer"&gt;Zeit&lt;/a&gt; was an obvious solution for me. For personal projects, Zeit maybe has the most generous free tier. They literally offer unlimited bandwidth, build time, custom domains and projects for personal websites. With the help of webhooks and their CLI, deployment is something, you do not need to even worry about with Zeit. So, I did not much time to setup domain, CI/CD and other deployment-related works.&lt;/p&gt;

&lt;p&gt;In the Challenges section, I listed 3 sources from where I fetched data. I needed to modify JSON output from those APIs. I chose &lt;a href="https://cloud.google.com/" title="Google Cloud Platform" rel="noopener noreferrer"&gt;Google Cloud Platform&lt;/a&gt;'s Cloud Functions for this task. For small jobs like this, GCP functions, AWS lambda, etc. could be a very fast and convenient option.&lt;/p&gt;

&lt;p&gt;And for the visual representations, I chose &lt;a href="https://www.chartjs.org/" title="ChartJs" rel="noopener noreferrer"&gt;ChartJs&lt;/a&gt;. ChartJs is very easy and straight forward. So, to complete the website in a minimum time possible, I used ChartJs. &lt;/p&gt;

</description>
      <category>webdev</category>
      <category>gatsby</category>
      <category>covid19</category>
      <category>casestudy</category>
    </item>
    <item>
      <title>Choose between wget.blog or [myName].[TLD] for personal blog</title>
      <dc:creator>Sharafat Ahmed Sabir</dc:creator>
      <pubDate>Sun, 02 Feb 2020 02:07:59 +0000</pubDate>
      <link>https://forem.com/sabir001/choose-between-wget-blog-or-myname-tld-for-personal-blog-533b</link>
      <guid>https://forem.com/sabir001/choose-between-wget-blog-or-myname-tld-for-personal-blog-533b</guid>
      <description>&lt;p&gt;I am currently using &lt;a href="https://www.wget.blog"&gt;https://www.wget.blog&lt;/a&gt; as the domain name. I am planning to write more regularly. I want to focus on react, redux, gatsby, Java and SQL related contents. What do you think? Should I stick to wget.blog or should I buy [myName].[TLD] type of domain?&lt;/p&gt;

</description>
      <category>help</category>
      <category>discuss</category>
    </item>
    <item>
      <title>Technical skills software engineers must have</title>
      <dc:creator>Sharafat Ahmed Sabir</dc:creator>
      <pubDate>Wed, 25 Dec 2019 05:29:47 +0000</pubDate>
      <link>https://forem.com/sabir001/technical-skills-every-software-engineer-must-have-4kd6</link>
      <guid>https://forem.com/sabir001/technical-skills-every-software-engineer-must-have-4kd6</guid>
      <description>&lt;p&gt;Software engineering is one of the hottest types of jobs in the market right now. One of the beauties of software engineering is, you can be a successful software engineer without a formal degree. Skill is all that matters in software engineering.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--jKFPDUNy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/db4eykadutr6hd4s93ry.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--jKFPDUNy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/db4eykadutr6hd4s93ry.jpg" alt="Software Engineering Team" title="Software Engineering Team"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A good software engineer needs various types of skills. But, technical skills are by far the most important ones. These are the skills that help you to get your tasks done in the workplace. &lt;/p&gt;

&lt;p&gt;In this blog, I am gonna talk about tech skills which are must-have for software engineers. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Disclaimer: If you are fresher who is trying to land a job, this article is not for you. You do not need to learn everything mentioned here to land a job. You need to read the book: 'Cracking the coding interview'. Practice on &lt;a href="https://www.hackerrank.com/" title="Hackerrank" rel="noopener noreferrer"&gt;Hackerrank&lt;/a&gt;, &lt;a href="https://leetcode.com/" title="Leetcode" rel="noopener noreferrer"&gt;Leetcode&lt;/a&gt;, &lt;a href="https://www.geeksforgeeks.org/" title="Geeks for Geeks" rel="noopener noreferrer"&gt;Geeks for Geeks&lt;/a&gt;, etc.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Data Structure (For every software engineer)
&lt;/h2&gt;

&lt;p&gt;Data Structure is one of the most important subjects for software engineers. Data structures are some specific formats for storing data. Each data structure is efficient in some cases and inefficient in other cases. So, as a software engineer, you must have the skill to pick the right data structure. &lt;/p&gt;

&lt;p&gt;The following data structures are a must for every software engineer:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Array&lt;/li&gt;
&lt;li&gt;Linked List&lt;/li&gt;
&lt;li&gt;Trees&lt;/li&gt;
&lt;li&gt;Trie&lt;/li&gt;
&lt;li&gt;Stack &lt;/li&gt;
&lt;li&gt;Queue&lt;/li&gt;
&lt;li&gt;Map&lt;/li&gt;
&lt;li&gt;Graph&lt;/li&gt;
&lt;li&gt;Hash Tables&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you want to learn more about data structures, you can visit &lt;a href="https://www.geeksforgeeks.org/data-structures/" title="Geeks for geeks" rel="noopener noreferrer"&gt;Geeks for Geeks&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Algorithm (For every software engineer)
&lt;/h2&gt;

&lt;p&gt;A software engineer's main job is to solve problems. Algorithms are step-to-step instructions to solve a problem. So, algorithm is a must-have skill for every software engineer. Good knowledge of algorithms helps him/her to solve problems.&lt;/p&gt;

&lt;p&gt;Here are some important and basic algorithms:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;BigO Notation&lt;/li&gt;
&lt;li&gt;Depth-first Search&lt;/li&gt;
&lt;li&gt;Breadth-first Search&lt;/li&gt;
&lt;li&gt;Dijkstra's Algorithm&lt;/li&gt;
&lt;li&gt;Searching&lt;/li&gt;
&lt;li&gt;Sorting&lt;/li&gt;
&lt;li&gt;Divide and Conquer&lt;/li&gt;
&lt;li&gt;String Matching&lt;/li&gt;
&lt;li&gt;Pattern&lt;/li&gt;
&lt;li&gt;Greedy&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You can learn algorithms in &lt;a href="https://www.khanacademy.org/computing/computer-science/algorithms" title="Khan academy algorithms" rel="noopener noreferrer"&gt;Khan Academy&lt;/a&gt;, &lt;a href="https://www.geeksforgeeks.org/fundamentals-of-algorithms/" title="Geeks for Geeks Algorithm" rel="noopener noreferrer"&gt;Geeks for Geeks&lt;/a&gt; and many other places. &lt;/p&gt;

&lt;h2&gt;
  
  
  OS (For DevOps Engineers)
&lt;/h2&gt;

&lt;p&gt;Every program runs on an operating system (OS). So, knowing the underlying OS will help software engineers to write more efficient and better code.&lt;/p&gt;

&lt;p&gt;Here are some fundamental concepts a software engineer should know:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Process&lt;/li&gt;
&lt;li&gt;Memory Management&lt;/li&gt;
&lt;li&gt;Thread and Concurrency&lt;/li&gt;
&lt;li&gt;Scheduling&lt;/li&gt;
&lt;li&gt;I/O Management&lt;/li&gt;
&lt;li&gt;Inter-Process Communication&lt;/li&gt;
&lt;li&gt;Virtualization&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;After learning these fundamentals, learn about distributed systems and cloud.&lt;/p&gt;

&lt;h2&gt;
  
  
  Networking and Communication (For DevOps Engineers)
&lt;/h2&gt;

&lt;p&gt;Most of the software engineers work on web technologies. And you should have a good understanding of networking and communication to excel at web technologies. Especially if you are interested in DevOps, networking and data communication is very important. &lt;/p&gt;

&lt;p&gt;The followings topics are must for software engineers:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;IP&lt;/li&gt;
&lt;li&gt;Private/Public Network&lt;/li&gt;
&lt;li&gt;Router&lt;/li&gt;
&lt;li&gt;Switches&lt;/li&gt;
&lt;li&gt;LAN/WAN&lt;/li&gt;
&lt;li&gt;&lt;p&gt;OSI Model&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Protocols&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;P2P communications&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Mesh, Ring, Star, etc.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you want to be a DevOps engineer, this can be a starting ground for you. &lt;/p&gt;

&lt;h2&gt;
  
  
  Programming Language (For every software engineer)
&lt;/h2&gt;

&lt;p&gt;As a good software engineer, you need to learn at least one programming language very deeply. Also, I recommend software engineers to try new programming languages frequently. This helps us to learn about good things about that language. This also helps us to learn new technologies and languages quickly. &lt;/p&gt;

&lt;p&gt;Learn at least one of the following languages deeply:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;C&lt;/li&gt;
&lt;li&gt;C++&lt;/li&gt;
&lt;li&gt;Java&lt;/li&gt;
&lt;li&gt;Python&lt;/li&gt;
&lt;li&gt;JavaScript&lt;/li&gt;
&lt;li&gt;C#&lt;/li&gt;
&lt;li&gt;PHP&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Also try to learn at least one scripting language like JavaScript, PHP, Python, etc.&lt;/p&gt;

&lt;h2&gt;
  
  
  OOP (For every software engineer)
&lt;/h2&gt;

&lt;p&gt;Object-oriented programming is one of the most used paradigms in the software industry. a software engineer should know the following concepts:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Encapsulation&lt;/li&gt;
&lt;li&gt;Polymorphism&lt;/li&gt;
&lt;li&gt;Inheritance&lt;/li&gt;
&lt;li&gt;Abstraction&lt;/li&gt;
&lt;li&gt;Association&lt;/li&gt;
&lt;li&gt;Aggregation&lt;/li&gt;
&lt;li&gt;Composition&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Database (For back-end engineers)
&lt;/h2&gt;

&lt;p&gt;Software engineers have to deal with data every day. Structured data are stored in Databases. So, you should have a good understanding of databases.&lt;/p&gt;

&lt;p&gt;You should learn at least basic CRUD operations, joining, grouping, etc. &lt;/p&gt;

&lt;p&gt;Learn at least one of the following databases:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;PostgreSQL&lt;/li&gt;
&lt;li&gt;MySQL&lt;/li&gt;
&lt;li&gt;Maria DB&lt;/li&gt;
&lt;li&gt;Oracle DB&lt;/li&gt;
&lt;li&gt;MS SQL Server&lt;/li&gt;
&lt;li&gt;MongoDB&lt;/li&gt;
&lt;li&gt;Cassandra&lt;/li&gt;
&lt;li&gt;Neo4j&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Git (For every software engineer)
&lt;/h2&gt;

&lt;p&gt;Version controlling is very important in software engineering. This helps us to collaborate with others. It also enables us to roll back to any previous version easily.&lt;/p&gt;

&lt;p&gt;Git is the most popular version controlling system now. You should learn at least the basics of git. &lt;/p&gt;

&lt;p&gt;Learn how git works. Also, learn basic commands like add, commit, push, pull, fetch, merge, etc.&lt;/p&gt;

&lt;h2&gt;
  
  
  IDEs and Editors (For every software engineer)
&lt;/h2&gt;

&lt;p&gt;IDE stands for Integrated Developer Environment. IDEs give suggestions while coding, check for errors before even compiling code and do a lot of other things. IDEs like Intellij Idea, Eclipse, Visual Studio, PyCharm, etc. are capable of doing a lot and saves a lot of time and energy of developers. Editors are simpler. But, editors like VS Code, Sublime Text, Atom have changed the game. They are capable of doing much more than editing nowadays. You have to know your IDEs and editors to unlock these potentials which can help you to be more productive.&lt;/p&gt;

&lt;h2&gt;
  
  
  Mentality (For every software engineer)
&lt;/h2&gt;

&lt;p&gt;This part is not purely technical. But, I want to add it anyway. To acquire these technical skills, you have to be prepared. If you find things complex, do not lose hope and keep on trying. You do not have to be a genius to acquire these skills. You just need to work hard. I have seen several students who thought they could not be good at programming contests. But, after going through a rigorous training program at university, those who did not drop out of the training program, excelled at competitive programming. Some of my colleagues thought they would not be able to keep up with all these new technologies. But, those who worked hard, excelled in this industry where a new technology is being introduced every fortnight.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;In this article, I have talked about the basic skills that software engineers must-have. These are starting ground. For your specific task, you will need to learn topics beyond this article. &lt;/p&gt;

&lt;p&gt;N.B: If you think I missed something or if you have any opinion about this article, leave a comment below.&lt;/p&gt;

&lt;p&gt;This article was originally written in &lt;a href="https://www.wget.blog/must-have-tech-skills-for-software-engineer/"&gt;Wget Blog&lt;/a&gt;&lt;/p&gt;

</description>
      <category>career</category>
      <category>engineering</category>
      <category>advice</category>
    </item>
    <item>
      <title>How to reach more people via tech blogs</title>
      <dc:creator>Sharafat Ahmed Sabir</dc:creator>
      <pubDate>Mon, 16 Dec 2019 04:13:43 +0000</pubDate>
      <link>https://forem.com/sabir001/how-to-reach-more-people-via-tech-blogs-54k0</link>
      <guid>https://forem.com/sabir001/how-to-reach-more-people-via-tech-blogs-54k0</guid>
      <description>&lt;p&gt;I am building a tech blog. But, I am not sure how to reach more and more people with my blogs.&lt;/p&gt;

&lt;p&gt;My first blog reached a lot of people. But, I do not have a constant flow of visitors. &lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
