<?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: Maher Al Musallami</title>
    <description>The latest articles on DEV Community by Maher Al Musallami (@maher9596).</description>
    <link>https://dev.to/maher9596</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%2F603276%2F0e0468c4-85b9-494c-a24a-e1e30d37bd10.jpeg</url>
      <title>DEV Community: Maher Al Musallami</title>
      <link>https://dev.to/maher9596</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/maher9596"/>
    <language>en</language>
    <item>
      <title>Defining the Value Proposition</title>
      <dc:creator>Maher Al Musallami</dc:creator>
      <pubDate>Sat, 30 Oct 2021 15:48:39 +0000</pubDate>
      <link>https://dev.to/maher9596/defining-the-value-proposition-2ela</link>
      <guid>https://dev.to/maher9596/defining-the-value-proposition-2ela</guid>
      <description>&lt;p&gt;&lt;strong&gt;Intro&lt;/strong&gt;&lt;br&gt;
“Value proposition refers to the value a company promises to deliver&lt;br&gt;
to customers should they choose to buy their product” - Alexandra&lt;br&gt;
Twin.&lt;/p&gt;

&lt;p&gt;Recently I’ve been working as a product manager for a few&lt;br&gt;
early-stage startups that are building their first product and I noticed&lt;br&gt;
that most of them struggle with defining their value proposition.&lt;br&gt;
I am writing this article to give some guidelines that will assist&lt;br&gt;
early-stage startups, and their product teams to define their value&lt;br&gt;
proposition.&lt;br&gt;
Defining the value proposition is a crucial step in the "Lean Product&lt;br&gt;
Process" developed by - Dan Olsen. This is important because that is&lt;br&gt;
what convinces a customer to buy from you and not your&lt;br&gt;
competitors.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Invisible Wall&lt;/strong&gt;&lt;br&gt;
Defining the value that your product intends to deliver is the step&lt;br&gt;
that follows identifying your customer needs. In this step you must&lt;br&gt;
set your mind on which of the customer needs your product will&lt;br&gt;
satisfy. Here is where the issue I noticed arises, startups have a&lt;br&gt;
tendency to try and tackle a wide range of problems. This creates an&lt;br&gt;
“invisible wall” that blocks the success of their product. The reason I&lt;br&gt;
am calling it an “invisible wall” is because, you will not be able to see&lt;br&gt;
the problem until it is too late, which is after launching the product,&lt;br&gt;
by that time you have already consumed so much of your resources&lt;br&gt;
and time on it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How to overcome the invisible wall&lt;/strong&gt;&lt;br&gt;
Your product must be built with a focus on the set of needs that are&lt;br&gt;
&lt;em&gt;critical&lt;/em&gt; to your target audience. Products tackling a wide range of&lt;br&gt;
customer needs have a higher chance of facing issues, in both the&lt;br&gt;
problem space (determining your target customer) and the solution&lt;br&gt;
space (technical issues in your product).&lt;br&gt;
When working on your first product, it is important to understand&lt;br&gt;
that you still don’t have enough information on what your potential&lt;br&gt;
customer actually wants.&lt;/p&gt;

&lt;p&gt;The uncertainty in the hypotheses is often overlooked by the&lt;br&gt;
startups when building their product, this is a huge mistake. A good&lt;br&gt;
startup with a strong product team should always keep in mind that&lt;br&gt;
the hypotheses formed initially on the customer needs might not be&lt;br&gt;
entirely correct, and after testing the product with users you might&lt;br&gt;
have to come back and make some changes to your hypothesis&lt;br&gt;
which means you will have to make changes in your solution as well.&lt;br&gt;
I have noticed that startups tend to get too confident with their&lt;br&gt;
hypotheses. That is why they end up tackling a wide range of what&lt;br&gt;
could potentially be customer needs. At this point when you realize&lt;br&gt;
some of your assumptions were wrong, it will be extremely&lt;br&gt;
expensive to make changes, chances are high that this might kill your&lt;br&gt;
product. Good startups must only allow their confidence in the&lt;br&gt;
hypotheses to increase proportionally with the information that they&lt;br&gt;
gather from the users or the market. Being able to determine which&lt;br&gt;
of the needs to tackle is an important skill. However, determining&lt;br&gt;
which needs not to tackle requires even more skill and talent.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;&lt;br&gt;
When building a product it is easy to get carried away with the&lt;br&gt;
temptation of solving more problems. However, startups must spend&lt;br&gt;
enough time, and effort making sure that if their solution requires&lt;br&gt;
some changes after testing it in the market, they can make the&lt;br&gt;
needed adjustments. In addition to that, startups must be aware of&lt;br&gt;
the fact that they most probably will have to revisit their hypotheses,&lt;br&gt;
and make changes in the product they built.&lt;br&gt;
Concentrating on defining a clear value proposition will help you&lt;br&gt;
avoid wasting your resources which you cannot afford especially&lt;br&gt;
when building an MVP. It will also keep you from launching a product&lt;br&gt;
that is not valuable or usable.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Follow me on twitter &lt;a href="https://twitter.com/Almsalmi_"&gt;@Almsalmi_&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>startup</category>
    </item>
    <item>
      <title>LinearSearch-VS-BinarySearch</title>
      <dc:creator>Maher Al Musallami</dc:creator>
      <pubDate>Sat, 21 Aug 2021 14:41:10 +0000</pubDate>
      <link>https://dev.to/maher9596/linearsearch-vs-binarysearch-2i5l</link>
      <guid>https://dev.to/maher9596/linearsearch-vs-binarysearch-2i5l</guid>
      <description>&lt;p&gt;In this article I will show the difference in time complexity / Big O notation between the two searching algorithms.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Problem
&lt;/h2&gt;

&lt;p&gt;In this example we need to create a function that accepts an array and a value of any type, we should be able to know if the value is in the array or not.&lt;/p&gt;

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

&lt;p&gt;We will solve this problem with 2 different approaches : -&lt;/p&gt;

&lt;p&gt;Linear Search: Iterate through the array and compare the value to the items at each index O(n)&lt;/p&gt;

&lt;p&gt;Binary Search: Split the array and compare the mid point to the value O(log n)&lt;/p&gt;

&lt;h2&gt;
  
  
  First Approach Linear Search
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;linearSearch&lt;/span&gt;&lt;span class="p"&gt;(&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;num&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// ITERATE THORUGH THE ARRAY&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;arr&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="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&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;i&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;num&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
            &lt;span class="c1"&gt;// IF FOUND RETURN THE INDEX&lt;/span&gt;
            &lt;span class="k"&gt;return&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="k"&gt;return&lt;/span&gt; &lt;span class="s2"&gt;`not found`&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;linearSearch&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;40&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;50&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;60&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;70&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;80&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;90&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="mi"&gt;40&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Create a function that accepts an array and a value&lt;/li&gt;
&lt;li&gt;Loop through the array&lt;/li&gt;
&lt;li&gt;Compare the value at each index / arr[i] to the value passed&lt;/li&gt;
&lt;li&gt;If you find that arr[i] is equal to the value, return the index&lt;/li&gt;
&lt;li&gt;If the loop ends and the value is not found, return "Not Found"&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In terms of implementation this approach is relatively simple compared to the second approach. However, the time complexity of this approach would O(n), as you will have to loop through the whole array in the worst case when the value is found at the end of the array. So in an array of 8 numbers we will do 8 checks.&lt;/p&gt;

&lt;h2&gt;
  
  
  Second Approach Binary Searcch
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;binarySearch&lt;/span&gt;&lt;span class="p"&gt;(&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;num&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;start&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;end&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="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;mid&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;floor&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;start&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;end&lt;/span&gt;&lt;span class="p"&gt;)&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="k"&gt;while&lt;/span&gt;&lt;span class="p"&gt;(&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;mid&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="nx"&gt;num&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;start&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;end&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;num&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&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;mid&lt;/span&gt;&lt;span class="p"&gt;]){&lt;/span&gt;
            &lt;span class="c1"&gt;// UPDATE END POINT&lt;/span&gt;
            &lt;span class="nx"&gt;end&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;mid&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&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;num&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&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;mid&lt;/span&gt;&lt;span class="p"&gt;]){&lt;/span&gt;
            &lt;span class="c1"&gt;// UPDATE START POINT&lt;/span&gt;
            &lt;span class="nx"&gt;start&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;mid&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="c1"&gt;// UPDATE MID POINT&lt;/span&gt;
        &lt;span class="nx"&gt;mid&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;floor&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;start&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;end&lt;/span&gt;&lt;span class="p"&gt;)&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;// IF FOUND RETURN THE INDEX &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;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;mid&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;num&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;i&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;binarySearch&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;40&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;50&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;60&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;70&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;80&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;90&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="mi"&gt;40&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Create a function that accepts an array and a value&lt;/li&gt;
&lt;li&gt;Create start point, end point, and a mid point&lt;/li&gt;
&lt;li&gt;Check if the mid point is greater or smaller than the value&lt;/li&gt;
&lt;li&gt;If it is smaller, update the value of start point to be mid + 1. 
This means our array now is smaller, we got rid of the first 
half of the array&lt;/li&gt;
&lt;li&gt;If it us greater, update the value of end point to be mid - 1. 
We got rid of the second half of the array&lt;/li&gt;
&lt;li&gt;Update the value of mid point to be the center of the new array&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;Repeat this process as long as the value is not found and start point is smaller than end point&lt;/em&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Finally if the value is found return the index&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In this implementation we are making use of the "Divide and Conquer" pattern to find the value, unlike the previous approach we won't be comparing each index to the value, We will check if the mid point is equal to the value. So in an array of 8 numbers we will only do 3 checks This would give us a better time complexity of O(log n). The rate of operation growth would be O(log n) which is much better than O(n). Refere to BigO chart.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>algorithms</category>
      <category>datastructure</category>
      <category>react</category>
    </item>
    <item>
      <title>Ternary Operator ? True : False</title>
      <dc:creator>Maher Al Musallami</dc:creator>
      <pubDate>Mon, 24 May 2021 06:49:53 +0000</pubDate>
      <link>https://dev.to/maher9596/ternary-operator-true-false-2034</link>
      <guid>https://dev.to/maher9596/ternary-operator-true-false-2034</guid>
      <description>&lt;h3&gt;
  
  
  What is a ternary operator
&lt;/h3&gt;

&lt;p&gt;In simple words, It is a shortcut for an If statement.&lt;br&gt;
You set a condition followed by a question mark, after the question mark you put some code to be executed if the the condition is truthy, And then you put a colon which will be followed by the code to be executed if the condition is falsy. &lt;br&gt;
&lt;code&gt;const age = 5&lt;br&gt;
 let grade = (age &amp;lt;= 5) ? "Kindergarten" : "Grade 1";&lt;/code&gt;&lt;br&gt;
 // The output should be &lt;code&gt;"Kindergarten"&lt;/code&gt; &lt;/p&gt;

&lt;h3&gt;
  
  
  Convert If statement to a ternary
&lt;/h3&gt;

&lt;p&gt;&lt;code&gt;const number = 10&lt;br&gt;
 let result &lt;br&gt;
 if(number &amp;gt;= 50) {&lt;br&gt;
  let result = "It is true"&lt;br&gt;
 } else {&lt;br&gt;
  let result = "It is false"&lt;br&gt;
 }&lt;/code&gt;&lt;br&gt;
 // The output should be &lt;code&gt;"It is false"&lt;/code&gt; because 10 is not greater &lt;br&gt;
    or equal to 50 &lt;/p&gt;

&lt;p&gt;&lt;em&gt;Now let's do the same example using a ternary&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;const number = 10&lt;br&gt;
 let result = (number &amp;gt;= 50) ? "It is true" : "It is false"&lt;/code&gt;&lt;br&gt;
 // We should get the same output as the previous example.&lt;/p&gt;

&lt;h3&gt;
  
  
  Syntax
&lt;/h3&gt;

&lt;p&gt;&lt;code&gt;condition ? true : false&lt;/code&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Conclusion
&lt;/h3&gt;

&lt;p&gt;Ternary is powerful operator to reduce the lines of code we have to write, As you see in the example given, We were able to reduce the code lines from 7 lines to 2 lines.&lt;/p&gt;

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