<?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: Modgil</title>
    <description>The latest articles on Forem by Modgil (@modgil_23).</description>
    <link>https://forem.com/modgil_23</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%2F462464%2Fc164f6f3-2220-467d-9f42-153f7a309dbc.png</url>
      <title>Forem: Modgil</title>
      <link>https://forem.com/modgil_23</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/modgil_23"/>
    <language>en</language>
    <item>
      <title>Breaking Down Effect TS : Part 2</title>
      <dc:creator>Modgil</dc:creator>
      <pubDate>Sun, 09 Mar 2025 19:31:40 +0000</pubDate>
      <link>https://forem.com/modgil_23/breaking-down-effect-ts-part-2-16md</link>
      <guid>https://forem.com/modgil_23/breaking-down-effect-ts-part-2-16md</guid>
      <description>&lt;p&gt;In the previous article, we introduced Effect-TS, a library designed to tackle common challenges in application development, such as handling complex side effects, managing concurrency, and error handling. Effect-TS is ideal for developers who seek robust applications with a focus on consistency, type safety, and advanced concurrency, all within a functional programming paradigm. We briefly discussed the basics of effects, including their type and how to create and execute them.&lt;/p&gt;

&lt;p&gt;In this post, we will delve deeper into creating and executing effects, providing an example to build your confidence in using Effect-TS.&lt;/p&gt;

&lt;p&gt;Unlike standard TypeScript functions, effects in Effect-TS are neither inherently synchronous nor asynchronous; they simply describe computations that can either succeed or result in errors.&lt;/p&gt;

&lt;p&gt;Let's first start with &lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;&lt;code&gt;Effects with Synchronous computations&lt;/code&gt;&lt;/strong&gt;:
&lt;/h2&gt;

&lt;p&gt;Synchronous computations execute sequentially, blocking further execution until they complete, producing immediate and deterministic results. &lt;br&gt;
In Effect-TS, you can represent synchronous computations using &lt;code&gt;Effect.sync&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;generateRandomNumber&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sync&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;random&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;Effect.sync&lt;/code&gt; &lt;em&gt;always returns a success value&lt;/em&gt;. If it throws an error, that indicates a defect rather than a typical effect failure. Therefore, use &lt;em&gt;Effect.sync only when you are certain that your operation will not fail&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Executing generateRandomNumber directly will not yield the desired result, as effects are lazy and defer execution until required. To execute the effect and obtain the computation's result, use:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;runSync&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;generateRandomNumber&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will execute the sync effect immediately.&lt;/p&gt;

&lt;p&gt;When you know that your operation might fail, use &lt;code&gt;Effect.try&lt;/code&gt;. This structure allows you to handle exceptions functionally:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;parseJson&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;jsonString&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;unknown&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;unknown&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;
  &lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;try&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;try&lt;/span&gt;&lt;span class="p"&gt;:&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;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;parse&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;jsonString&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
    &lt;span class="na"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Failed to parse JSON: &lt;/span&gt;&lt;span class="p"&gt;${(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nb"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&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;To execute this effect, run it with &lt;code&gt;Effect.runSync&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;inputString&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;{"name": "Alice", "age": 30}&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;runSync&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;parseJson&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;inputString&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; 
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&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;This executes the effect synchronously, catching and logging any parsing errors.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;&lt;code&gt;Effects with Asynchronous computations&lt;/code&gt;&lt;/strong&gt;:
&lt;/h2&gt;

&lt;p&gt;Asynchronous computations involve tasks that execute independently of the main program flow, allowing other operations to proceed while waiting for a result. &lt;/p&gt;

&lt;p&gt;In Effect-TS, asynchronous computations are managed using the &lt;code&gt;Effect.tryPromise&lt;/code&gt; function. This function wraps an asynchronous operation, such as a Promise, into an Effect, allowing you to handle asynchronous processes in a functional, type-safe manner.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fetchData&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;unknown&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Response&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;
  &lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;tryPromise&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;try&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; 
    &lt;span class="na"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Failed to fetch data: &lt;/span&gt;&lt;span class="p"&gt;${(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nb"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&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;To execute an asynchronous effect, you use &lt;code&gt;Effect.runPromise&lt;/code&gt;, which handles the Promise-based nature of the operation:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;url&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;https://api.example.com/data&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;runPromise&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;fetchData&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;strong&gt;&lt;code&gt;Avoid Executing Effects Within Other Effects&lt;/code&gt;&lt;/strong&gt;:
&lt;/h3&gt;

&lt;p&gt;Always aim to execute effects at the boundaries of your program, such as in main functions. Running effects inside other effects negates the benefits of using an effect system, as it blurs the clear separation between effect description and execution. By maintaining this separation, you ensure that your program remains modular, predictable, and easier to test and maintain.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;&lt;code&gt;Combinators: Combining, Transforming, and Managing Effects&lt;/code&gt;&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Combinators provide a framework for creating expressive and modular effect descriptions without executing them. By avoiding the nesting of effects and using combinators instead, you leverage the full power of effect systems, aligning with functional programming principles.&lt;/p&gt;

&lt;p&gt;Instead of executing effects within other effects:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;initialEffect&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;succeed&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;4&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;transformedEffect&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sync&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="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;runSync&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;initialEffect&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;result&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="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can use combinators to maintain separation for e.g. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;code&gt;Effect.map&lt;/code&gt;&lt;/strong&gt;: This takes an effect and lets you change the result it produces using a simple function.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;initialEffect&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;succeed&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;4&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;transformedEffect&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;initialEffect&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;x&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This transformation does not execute the effect; it only modifies the outcome once the effect is run.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;code&gt;Effect.flatMap&lt;/code&gt;&lt;/strong&gt;: It takes the output of an effect, which produces another effect, and flattens the result. This is commonly used when need to perform sequential computations that result in an effect, allowing the next computation to depend on the value produced by the first effect.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;initialEffect&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;succeed&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="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;chainedEffect&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;flatMap&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;initialEffect&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;succeed&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;&lt;code&gt;pipe&lt;/code&gt;&lt;/strong&gt;: It allows chaining functions in a left-to-right manner, increasing readability&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;pipeline&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;pipe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;succeed&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="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
  &lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;x&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="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and there are many more available to help you handle different scenarios effectively.... &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Let's build an application called dataTransformer to download data from an S3 bucket, transform it, and then re-upload it back to S3. This example will provide a practical understanding of Effect-TS in action.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;First, we create an S3 client and define the functions needed for our tasks:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;S3Client&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;GetObjectCommand&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;PutObjectCommand&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;@aws-sdk/client-s3&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;pipe&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;effect&lt;/span&gt;&lt;span class="dl"&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;s3Client&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; 
  &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;S3Client&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;region&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;your-region&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;forcePathStyle&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;downloadData&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;bucket&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;key&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;Error&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;
  &lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;tryPromise&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;try&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;async &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="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;s3Client&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;GetObjectCommand&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;Bucket&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;bucket&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;Key&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;key&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;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Body&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nf"&gt;transformToString&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;??&lt;/span&gt; &lt;span class="dl"&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;catch&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Failed to download data: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&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;const&lt;/span&gt; &lt;span class="nx"&gt;transformData&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&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;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sync&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;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;toUpperCase&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;uploadData&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;bucket&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;key&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&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;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;tryPromise&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;try&lt;/span&gt;&lt;span class="p"&gt;:&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;s3Client&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;PutObjectCommand&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
          &lt;span class="na"&gt;Bucket&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;bucket&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;Key&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;key&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;Body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="p"&gt;})&lt;/span&gt;
      &lt;span class="p"&gt;),&lt;/span&gt;
    &lt;span class="na"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Failed to upload data: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&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;Next, we compose the transformer function using Effect-TS combinators:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;dataTransformer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;sourceBucket&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;sourceKey&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;targetBucket&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;targetKey&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;
  &lt;span class="nf"&gt;pipe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="nf"&gt;downloadData&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;sourceBucket&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;sourceKey&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
    &lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;flatMap&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;transformData&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
    &lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;andThen&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;transformedData&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;uploadData&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;targetBucket&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;targetKey&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;transformedData&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;Finally, we define the main function to execute the effectful computation:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="nx"&gt;Effect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;runPromise&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;dataTransformer&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;bucket-name&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;key&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;target-bucket-name&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;target-key&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&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;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Data processed successfully&lt;/span&gt;&lt;span class="dl"&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;catch&lt;/span&gt;&lt;span class="p"&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;error&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;I hope we are now clear on the creation and execution of effects. Let's continue in the next part, where we'll explore efficient error handling, concurrency management, effect data types, resource management, and much more. &lt;strong&gt;Stay tuned!&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>functional</category>
      <category>typescript</category>
      <category>programming</category>
    </item>
    <item>
      <title>Breaking Down Effect TS : Part 1</title>
      <dc:creator>Modgil</dc:creator>
      <pubDate>Thu, 06 Mar 2025 14:56:11 +0000</pubDate>
      <link>https://forem.com/modgil_23/breaking-down-effect-ts-part-1-2e0i</link>
      <guid>https://forem.com/modgil_23/breaking-down-effect-ts-part-1-2e0i</guid>
      <description>&lt;p&gt;If you're looking to develop applications that are type-safe, handle errors efficiently, manage concurrency effectively, and tackle complexity with improved code quality, all while applying functional programming principles, then Effect-TS is the ideal tool for you.&lt;/p&gt;

&lt;p&gt;Effect-TS is a powerful TypeScript library designed to bring the principles and advantages of functional programming to the forefront of TypeScript development. It focuses on enabling developers to manage effects—such as state, errors, and asynchronous operations—in a functional, declarative, and type-safe manner.&lt;br&gt;
Effect is inspired by ZIO (a Scala library)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Before diving into Effect-TS, let's explore what Functional Programming is and the problems it solves.&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Functional Programming is a programming paradigm where functions are treated as first-class citizens. In this context, functions always yield the same result given the same input, highlighting the concept of immutability. Functional Programming enhances predictability and simplifies debugging through pure functions and immutability, ensuring consistent behaviour. It promotes higher modularity and reusability by encouraging the development of small, composable functions, which can be easily reused across various application modules. This leads to more robust, maintainable, and scalable software solutions compared to other paradigms.&lt;/p&gt;
&lt;h2&gt;
  
  
  Key Characteristics of Functional Programming:
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;- Immutability of Data/State:&lt;/strong&gt; &lt;br&gt;
This refers to the principle that data or state should not be modified after its creation, promoting stability and predictability in your code.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;- Pure Functions:&lt;/strong&gt; &lt;br&gt;
These functions always produce the same output for the same input and have no side effects. They do not rely on any external state, ensuring deterministic behaviour.&lt;/p&gt;
&lt;h4&gt;
  
  
  Benefits of Pure Functions:
&lt;/h4&gt;

&lt;p&gt;Predictability and Composability: Pure functions are predictable and can be easily composed to build complex logic.&lt;br&gt;
Concurrency: Since pure functions do not modify external states, they are inherently thread-safe.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;- Functions as First-Class Citizens:&lt;/strong&gt; &lt;br&gt;
In functional programming, functions are treated like any other value, meaning they can be assigned to variables, passed as arguments, returned from other functions, and stored in data structures. This enables the use of higher-order functions, which accept functions as arguments and return functions as output. For example, array.map() is a common higher-order function.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;- Preference for Recursion Over Loops:&lt;/strong&gt;&lt;br&gt;
Functional programming prefers recursion to loops because recursion is more declarative and avoids mutable state by relying on the call stack to manage state. This approach avoids mutation by repeatedly calling the function with new arguments.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;- Referential Transparency:&lt;/strong&gt;&lt;br&gt;
An expression is referentially transparent if it can be replaced with its corresponding return value without altering the program's behaviour. This improves code readability and reasoning.&lt;/p&gt;

&lt;p&gt;How Effect-TS is aligned with Functional Programming Principles? &lt;br&gt;
Effect-TS aligns with functional programming principles by emphasizing purity and immutability, managing side effects explicitly and predictably. It leverages TypeScript's type system to ensure type safety, reducing errors. By supporting effect composition and maintaining referential transparency, Effect-TS enables the creation of modular, reusable, and robust applications.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Apart from this Effect main feature includes&lt;/em&gt;(as per Effect-TS documentation): &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmd2d5qkhj096ncsca6dn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmd2d5qkhj096ncsca6dn.png" alt="Image description" width="800" height="564"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Let's understand how to use Effect: &lt;/p&gt;

&lt;p&gt;In Effect-TS, we use effects to manage a function's side effects. Normally, a function may either succeed or throw an exception, and handling exceptions can become challenging when managing numerous functions. Effect-TS provides a structured way to handle these scenarios by defining the return type of a function as an Effect.&lt;/p&gt;

&lt;p&gt;An Effect is represented as &lt;code&gt;Effect&amp;lt;Success, Error, Requirements&amp;gt;&lt;/code&gt;, &lt;br&gt;
where:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Success&lt;/strong&gt; is the type of value returned when the function succeeds.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Error&lt;/strong&gt; is the type of error returned if the function fails.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Requirements&lt;/strong&gt; represents the dependencies required by the function.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;Effect&amp;lt;A, E, R&amp;gt;&lt;/code&gt; abstracts complex computations, allowing you to express operations that might fail, return a result, and need certain inputs. By handling both synchronous and asynchronous computations through this abstraction, Effect-TS streamlines functional programming in TypeScript, ensuring side effects are managed safely and predictably.&lt;/p&gt;

&lt;p&gt;Effect functions return values of the effect type, enabling lazy execution. To execute and resolve the values, you need to explicitly run the effect after invoking the function.&lt;br&gt;
This is different from Promises, which are initiated immediately as they are defined.&lt;/p&gt;
&lt;h3&gt;
  
  
  Let's start with the Basics:
&lt;/h3&gt;

&lt;p&gt;The key advantage of using effects in Effect-TS is that they define computations without executing them immediately. This means you can set up your workflow and only execute it when you are fully prepared and satisfied with its setup. Think of it as mapping out a plan and only putting it into action when you're ready.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Creating Effects:&lt;/strong&gt;&lt;br&gt;
When we say:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;export const succeed = Effect.succeed(5);

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

&lt;/div&gt;



&lt;p&gt;Here, succeed creates an Effect that encapsulates its argument 5 in the success channel (&lt;code&gt;A in Effect&amp;lt;A, E, R&amp;gt;&lt;/code&gt;).&lt;/p&gt;

&lt;p&gt;Type of succeed is &lt;code&gt;Effect.Effect&amp;lt;number, never, never&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;This indicates it will produce a success of type number and cannot fail or require any environment.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;export const fail = Effect.fail(3);

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

&lt;/div&gt;



&lt;p&gt;fail creates an Effect that encapsulates its argument 3 in the failure channel (&lt;code&gt;E in Effect&amp;lt;A, E, R&amp;gt;&lt;/code&gt;).&lt;/p&gt;

&lt;p&gt;Type of fail is &lt;code&gt;Effect.Effect&amp;lt;never, number, never&amp;gt;&lt;/code&gt;;&lt;/p&gt;

&lt;p&gt;This denotes that it results in a failure of type number and does not produce a success or require any environment.&lt;/p&gt;

&lt;p&gt;There are multiple ways to create effects in Effect-TS, whether for synchronous or asynchronous operations. To illustrate the creation of an asynchronous effect, let's consider the example of uploading a file to an S3 bucket.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;export const uploadFileToS3 = (
  s3Client: S3Client,
  bucketName: string,
  key: string,
  body: Buffer | Uint8Array | Blob | string | ReadableStream
) =&amp;gt;
  Effect.tryPromise({
    try: () =&amp;gt;
      s3Client.send(
        new PutObjectCommand({
          Bucket: bucketName,
          Key: key,
          Body: body,
        })
      ),
    catch: (error) =&amp;gt;
      new Error(`Error uploading file to S3 bucket - ${bucketName}: ${error.message}`),
  });
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The uploadFileToS3 function creates an effect that attempts to upload a file to an S3 bucket using the provided S3Client, handling success with the upload command execution and capturing errors with a descriptive error message. It uses &lt;code&gt;Effect.tryPromise&lt;/code&gt; to wrap the asynchronous operation, ensuring structured error handling and functional program flow.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Executing Effects:&lt;/strong&gt;&lt;br&gt;
As discussed earlier, up to this point, we have only constructed Effect values, and none of the computations we defined have been executed. Now, to execute the effects, just as there are various ways to create effects, there are also different ways to execute them. One such example of executing the above-created effect is:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Effect.runPromise(uploadFileToS3(s3Client, bucketName, key, fileContent));
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This executes the uploadFileToS3 effect using the provided inputs, initiating the file upload process to the specified S3 bucket.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;I hope this introduction to Effect-TS has sparked your interest! There’s so much more to explore.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.to/modgil_23/breaking-down-effect-ts-part-2-16md"&gt;Part 2 continued&lt;/a&gt;&lt;/p&gt;

</description>
      <category>programming</category>
      <category>functional</category>
      <category>typescript</category>
    </item>
    <item>
      <title>LocalStack - Your Local Cloud Partner ☁️🤝</title>
      <dc:creator>Modgil</dc:creator>
      <pubDate>Mon, 10 Jun 2024 08:41:27 +0000</pubDate>
      <link>https://forem.com/modgil_23/localstack-your-local-cloud-partner-2jc0</link>
      <guid>https://forem.com/modgil_23/localstack-your-local-cloud-partner-2jc0</guid>
      <description>&lt;p&gt;Do you want to test your AWS resources locally before deploying to AWS? Do you aim to produce high-quality code and write integration tests for AWS services? Do you need to test your resources in a CI/CD pipeline to avoid mistakes in applications? Well, the solution for you is LocalStack.&lt;/p&gt;

&lt;p&gt;LocalStack provides a platform to create AWS resources on your local machine. It's a cloud service emulator that runs in a single container and allows you to simulate AWS services locally and in CI environments.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Use LocalStack? 🤔
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Local Development:&lt;/strong&gt; Simulate AWS services on your local machine, enabling faster and safer development without the risk of incurring costs or affecting live environments.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Quality Code:&lt;/strong&gt; Test your code against AWS APIs locally, ensuring it meets high standards before deployment.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Integration Testing:&lt;/strong&gt; Write and run integration tests for AWS services, ensuring all components work seamlessly together.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;CI/CD Pipelines:&lt;/strong&gt; Test your infrastructure in CI/CD pipelines to catch errors early and avoid costly mistakes in production.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Features and Limitations 🚀
&lt;/h2&gt;

&lt;p&gt;LocalStack supports a wide range of AWS services but does come with some limitations. It does not provide the functionality to use and create all AWS resources. Additionally, not all features are available for free.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Community Version:&lt;/strong&gt; Provides access to core AWS services such as S3, SQS, DynamoDB, Lambda, etc., at no cost.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Pro Version:&lt;/strong&gt; Offers access to additional AWS services and enhanced features.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Here is a list of &lt;a href="https://docs.localstack.cloud/user-guide/aws/feature-coverage/"&gt;community and pro version resources&lt;/a&gt; supported by LocalStack, along with information on the level of support compared to actual AWS resources.&lt;/p&gt;

&lt;h2&gt;
  
  
  Getting Started with LocalStack 🛠️
&lt;/h2&gt;

&lt;p&gt;Before you start, ensure you have a functional Docker environment installed on your computer.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Installation&lt;/strong&gt;. 📥
&lt;/h3&gt;

&lt;p&gt;There are several ways to get started with LocalStack:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;LocalStack CLI:&lt;/strong&gt; The quickest way to start. You can create AWS resources through the terminal.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Install via &lt;a href="https://github.com/localstack/homebrew-tap"&gt;brew&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Download the &lt;a href="https://github.com/localstack/localstack-cli/releases/tag/v3.4.0"&gt;pre-built LocalStack CLI binary directly&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Install using pip &lt;code&gt;python3 -m pip install localstack&lt;/code&gt; &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Alternatives:&lt;/strong&gt;&lt;br&gt;
Other methods include LocalStack Desktop, LocalStack Docker Extension, Docker-Compose, and Docker. You can find more details on these &lt;a href="https://docs.localstack.cloud/getting-started/installation/#alternatives"&gt;alternatives&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;For this guide, we will use Docker-Compose to create DynamoDB and perform various actions on it.&lt;/p&gt;
&lt;h3&gt;
  
  
  Interacting with LocalStack:
&lt;/h3&gt;

&lt;p&gt;To interact with LocalStack, you can use the AWS CLI or the LocalStack AWS CLI in the command line interface. &lt;/p&gt;
&lt;h3&gt;
  
  
  Creating DynamoDB with Docker-Compose 🗄️
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Set Up Docker-Compose:&lt;/strong&gt;&lt;br&gt;
Create a docker-compose.yml file with the following content&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;version: "3.8"

services:
  localstack:
    container_name: "${LOCALSTACK_DOCKER_NAME:-localstack-main}"
    image: localstack/localstack
    ports:
      - "127.0.0.1:4566:4566"            # LocalStack Gateway
      - "127.0.0.1:4510-4559:4510-4559"  # external services port range
    environment:
      # LocalStack configuration: https://docs.localstack.cloud/references/configuration/
      - DEBUG=${DEBUG:-0}
    volumes:
      - "${LOCALSTACK_VOLUME_DIR:-./volume}:/var/lib/localstack"
      - "/var/run/docker.sock:/var/run/docker.sock"

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

&lt;/div&gt;



&lt;p&gt;The docker-compose.yml file specifies LocalStack to run as a service using the localstack/localstack image, exposing ports 4566 for AWS service simulations. The volumes configuration maps a local directory to LocalStack's temporary storage.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Start LocalStack:&lt;/strong&gt; &lt;br&gt;
Ensure LocalStack is running with the &lt;code&gt;docker-compose up&lt;/code&gt; command.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Create DynamoDB Table:&lt;/strong&gt;&lt;br&gt;
Open a terminal and use the AWS CLI to create a DynamoDB table:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;aws --endpoint-url=http://localhost:4566 dynamodb create-table --table-name my-table \
  --attribute-definitions AttributeName=ID,AttributeType=S \
  --key-schema AttributeName=ID,KeyType=HASH \
  --provisioned-throughput ReadCapacityUnits=5,WriteCapacityUnits=5
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Verify Table Creation:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;List the tables to verify that your table has been created:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;aws --endpoint-url=http://localhost:4566 dynamodb list-tables
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Automating Resource Creation with Scripts:
&lt;/h3&gt;

&lt;p&gt;You can also write scripts to create different resources and mount the script folder to LocalStack volumes. This approach allows you to easily create all the resources in one go when starting LocalStack with Docker-Compose. This method is recommended for setting up a local development environment since you can't always write commands manually in the terminal.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Start using LocalStack today to streamline your AWS development and testing processes.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;🌟 Stay connected for more insights on using LocalStack with various cloud development tools. 🌟&lt;/p&gt;

</description>
      <category>aws</category>
      <category>docker</category>
      <category>cloud</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Let us Understand D3</title>
      <dc:creator>Modgil</dc:creator>
      <pubDate>Wed, 28 Sep 2022 20:24:16 +0000</pubDate>
      <link>https://forem.com/modgil_23/let-us-understand-d3-4dk1</link>
      <guid>https://forem.com/modgil_23/let-us-understand-d3-4dk1</guid>
      <description>&lt;p&gt;&lt;em&gt;&lt;strong&gt;Example 1: Create Rectangle using D3&lt;/strong&gt;&lt;/em&gt;&lt;br&gt;
First of all, define a container in html code&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;div id="chart"&amp;gt;&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now we have container with id as chart&lt;br&gt;
We will select this container and will try to manipulate this DOM element using d3.&lt;/p&gt;

&lt;p&gt;DOM selection&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;d3.select(selectorName)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It will select the first element with the provided name.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;d3.selectAll(selectorName)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It will select all elements with the provided name.&lt;br&gt;
So in the example , it will select the chart container.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;d3.select("#chart")
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;DOM Manipulation &lt;/p&gt;

&lt;p&gt;After selecting DOM, we need to modify it.&lt;br&gt;
In given example we are adding an element inside the selected element, using "append" method.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;append("svg")

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

&lt;/div&gt;



&lt;p&gt;To get and set the attribute value, we need to specify it in "attr" method&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.attr("width", 600).attr("height", 600)

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

&lt;/div&gt;



&lt;p&gt;It will set width and height of svg element as 600 and 600 respectively.&lt;/p&gt;

&lt;p&gt;We have several other DOM manipulation methods also.&lt;/p&gt;

&lt;p&gt;After selecting the chart container and appending the svg, we will append "rect" , in our svg. "rect" is predefined in d3, similar kind of shapes are also available, where we need to specify the attributes value to get the shape created.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.append('rect')

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

&lt;/div&gt;



&lt;p&gt;It will append the rectangle element&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.attr('x', 100)
.attr('y', 120)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It will get and set the coordinates of our shape for its positioning in our DOM element.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.attr('width', 100)
.attr('height', 60)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It will get and set the width and height of our rectangle created.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.attr('fill', 'pink')
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It will fill the color to our rectangle.&lt;/p&gt;

&lt;p&gt;The whole code to create rectangle in our chart container will look like this&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;d3.select("#chart").append("svg").attr("width", 600).attr("height", 600)
.append('rect')
  .attr('x', 100)
  .attr('y', 120)
  .attr('width', 100)
  .attr('height', 60)
  .attr('fill', 'pink');

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

&lt;/div&gt;



&lt;p&gt;Result:&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%2Fuploads%2Farticles%2Fxt7fepxx4d7vnge943tu.png" 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%2Fuploads%2Farticles%2Fxt7fepxx4d7vnge943tu.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now let's move to some actual graph example&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;strong&gt;Example 2: Create pie chart using given data&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;data = [&lt;br&gt;
  {name: "A", score: 18},&lt;br&gt;
  {name: "B", score: 16},&lt;br&gt;
  {name: "C", score: 14},&lt;br&gt;
  {name: "D", score: 22},&lt;br&gt;
  {name: "E", score: 5},&lt;br&gt;
  {name: "F", score: 14}&lt;br&gt;
];&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;First of all, define a container in html code&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;div id="chart"&amp;gt;&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now select the DOM and append svg&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;var svg = d3.select("#chart")
.append('svg')
.attr('class', 'pie')
.attr('width', width)
.attr('height', height);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now append "g" element to svg, g element is used to group svg shapes.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;var g = svg.append('g')
.attr('transform', 'translate(' + (width/2) + ',' + (height/2) + ')');
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;transform attribute will help us to transform our element, we are using translate function here so it will move our shape to given x and y value.&lt;br&gt;
There are many other transform functions available like rotate, scale etc.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;var arc = d3.arc()
.innerRadius(0)
.outerRadius(100);

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

&lt;/div&gt;



&lt;p&gt;d3.arc() will return arc generator. innerRadius and outerRadius will set inner and outer radius value of each arc.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;var pie = d3.pie()
.value(function(d) { return d.score; })
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;d3.pie() function will return pie generator.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;var path = g.selectAll('path')
  .data(pie(data))
  .enter()
  .append("g")  
  .append('path')
  .attr('d', arc)
  .attr('fill', (d) =&amp;gt; color(d.data.score))
  .style('opacity', opacity)
  .style('stroke', 'white')
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now we will append path to our g element, when we need to create complex figures other than simple ones like rectangle and lines we use path element. Path provides d attribute that defines its shape and position in addition to other attributes which are provided by other elements.&lt;/p&gt;

&lt;p&gt;The whole code to create pie chart :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;var data = [
  {name: "A", score: 18},
  {name: "B", score: 16},
  {name: "C", score: 14},
  {name: "D", score: 22},
  {name: "E", score: 5},
  {name: "F", score: 14}
];

var width = 400;
var height = 400;
var opacity = .8;

var radius = 95
var color = d3.scaleOrdinal(d3.schemeCategory10);

var svg = d3.select("#chart")
.append('svg')
.attr('class', 'pie')
.attr('width', width)
.attr('height', height);

var g = svg.append('g')
.attr('transform', 'translate(' + (width/2) + ',' + (height/2) + ')');

var arc = d3.arc()
.innerRadius(0)
.outerRadius(100);

var pie = d3.pie()
.value(function(d) { return d.score; })

var path = g.selectAll('path')
  .data(pie(data))
  .enter()
  .append("g")  
  .append('path')
  .attr('d', arc)
  .attr('fill', (d) =&amp;gt; color(d.data.score))
  .style('opacity', opacity)
  .style('stroke', 'white')

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

&lt;/div&gt;



&lt;p&gt;Result:&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%2Fuploads%2Farticles%2Fdd671pd0k0k5gaczlua3.png" 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%2Fuploads%2Farticles%2Fdd671pd0k0k5gaczlua3.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In next blog we will discuss some advanced charts.&lt;br&gt;
Stay tuned !!!!!&lt;/p&gt;

</description>
      <category>programming</category>
      <category>design</category>
      <category>javascript</category>
      <category>webdev</category>
    </item>
    <item>
      <title>D3, why D3?</title>
      <dc:creator>Modgil</dc:creator>
      <pubDate>Wed, 28 Sep 2022 12:52:51 +0000</pubDate>
      <link>https://forem.com/modgil_23/d3-why-only-d3-1lki</link>
      <guid>https://forem.com/modgil_23/d3-why-only-d3-1lki</guid>
      <description>&lt;p&gt;What if you want to create a chart that no one has ever used and only you know its functionality ,only you know it looks and you don't know its name, it is completely a new dish which you want to make. In this case what will you do? You can consider using d3.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is D3?&lt;/strong&gt;&lt;br&gt;
Data Driven Documents, if you want to make charts in your application that are using dynamic data then d3 is the right choice. D3 serves you a lots of chart options to visualise data, you can customise your charts, can remove or add any functionality from your chart. D3 provides more flexibility and control as it directly manipulates the DOM.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why D3? Benefits of using d3&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Currently D3 is famous and has large community of users as compared to other libraries.&lt;/p&gt;

&lt;p&gt;D3 is more than a normal visualisation library, it can help to create animations, diagrams and many more as it works with html, css and svg.&lt;/p&gt;

&lt;p&gt;-&amp;gt; D3 helps us to &lt;strong&gt;create customised charts&lt;/strong&gt;, unlike many other available charts libraries where we just use the given code template to create chart, these can be easy to use but comes with lots of restrictions as we'll not be able to modify the charts according to our need, we are just left with their chart design, as a result chart look and experience will be too common whereas, d3 does not provides us such templates, it provides us helper functions, these helper functions works at basic level like DOM selection, creating axis. Moreover d3 provides us the flexibility to create our own helper functions.&lt;br&gt;
In short, only we define each and every thing in our graph while using d3, which helps us to make more customised charts.&lt;/p&gt;

&lt;p&gt;-&amp;gt; In other chart libraries, while using a specific type of chart, the structure of the input data is already defined, so we are restricted to provide same structure of input data, whereas in d3 we can customise it as well.&lt;/p&gt;

&lt;p&gt;-&amp;gt;D3 is open source, large number of chart options are available, many examples are also available, large community and users as compared to others.&lt;/p&gt;

&lt;p&gt;-&amp;gt; D3 can be easily used with other JS based frameworks like react, angular.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Problems we can face while using d3:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;-&amp;gt; If you are new to d3 then you might find the syntax a bit confusing, but we have a solution for that too. &lt;br&gt;
Start by practicing the simplest chart or may be start by creating a simple square diagram using d3. Notice how d3 is manipulating DOM&amp;lt; how helper functions are working.&lt;br&gt;
In &lt;a href="https://dev.to/modgil_23/let-us-understand-d3-4dk1"&gt;next blog&lt;/a&gt; we'll try to understand working of d3 in simplest way.&lt;/p&gt;

&lt;p&gt;Other chart frameworks are easy to use but as you know they come with lot of restrictions.&lt;/p&gt;

&lt;p&gt;-&amp;gt; No doubt that d3 is compatible with JS based frameworks but sometimes you can face problems while using d3, just look if you are using the right version of d3 that is compatible with your JS framework.&lt;/p&gt;

&lt;p&gt;Let me know your thoughts about d3 in comments and what library do you use for making charts in your applications?&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>chart</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Designing REST APIs</title>
      <dc:creator>Modgil</dc:creator>
      <pubDate>Fri, 17 Jun 2022 06:45:18 +0000</pubDate>
      <link>https://forem.com/modgil_23/designing-rest-apis-18hb</link>
      <guid>https://forem.com/modgil_23/designing-rest-apis-18hb</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;What are API's and why do we need them?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;API (Application Programming Interface) comes into picture when you want to interact with a system to retrieve some information or perform a task. API's act as mediator between the client and server. It serves the information to the client from the server whenever called.&lt;br&gt;&lt;br&gt;
There are many advantages of API's like API's make data accessible, API's help in making product seamless from start to finish.&lt;/p&gt;

&lt;h2&gt;
  
  
  What are REST API's?
&lt;/h2&gt;

&lt;p&gt;Representational State Transfer, a way of accessing web services in a simple way. In simple words it is an API which follows REST Design Principles. REST API's provide high flexibility and easiness to developers as REST API's can be developed using any programming language and supports a variety of data formats. Only requirement is that it should follow the REST Principle. &lt;br&gt;
A Restful system includes a client who requests for the information and a server who has the information.It is important to create REST API according to industry standards which results in ease of development and easy client adoption.&lt;br&gt;
Architectural Constraints of RESTful API:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Uniform Interface&lt;/li&gt;
&lt;li&gt;Stateless&lt;/li&gt;
&lt;li&gt;Cacheable&lt;/li&gt;
&lt;li&gt;Client-Server&lt;/li&gt;
&lt;li&gt;Layered System&lt;/li&gt;
&lt;li&gt;Code on Demand
We will discuss these REST API’s constraints in detail, we should consider these points before designing an API.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;-&amp;gt; &lt;strong&gt;Client-Server&lt;/strong&gt; : API should follow client server architecture. A server having many endpoints for different functionalities and client (Application) consuming them using HTTP requests. There should not be any dependency between client and server applications. The only information required for a client should be URI (Uniform Resource Identifier) of the requested resource. &lt;/p&gt;

&lt;p&gt;-&amp;gt; &lt;strong&gt;Uniform Interface&lt;/strong&gt; : Deciding resource URI’s, these URI’s are nothing but endpoints for API’s. URI should be the same for similar kinds of requests. For e.g. : &lt;br&gt;
Information for user profiles for different users should come from the same URI. URI for the same can look like -&amp;gt; /profile , /profile{id} .&lt;/p&gt;

&lt;p&gt;-&amp;gt; &lt;strong&gt;Stateless&lt;/strong&gt; : Communication between client and server should be stateless.Stateless means there will be no information from past transactions, each request is separate and independent of each other.&lt;/p&gt;

&lt;p&gt;-&amp;gt; &lt;strong&gt;Cacheable&lt;/strong&gt; : Whenever required, or we need to make an application more scalable we can cache the response on the client side. For e.g.: If we are making the same request again and again, we can simply cache the response . It will lead to a more scalable product as less requests will be made.&lt;/p&gt;

&lt;p&gt;-&amp;gt; &lt;strong&gt;Layered System&lt;/strong&gt; : REST API’s use a layered system. A layered system means a system with different units of functionality. These layers serve different purposes like providing security, authentication, load balancing or any other functionality according to our requirements. We can decide the layers of our API according to the business requirements while designing it.&lt;/p&gt;

&lt;p&gt;-&amp;gt; &lt;strong&gt;Code on Demand&lt;/strong&gt; : Servers can send some kind of executable scripts to clients to increase or change functionality on the client side. It's an optional constraint.&lt;br&gt;
&lt;strong&gt;&lt;em&gt;If a service violates any other constraint, it cannot strictly be referred to as RESTful.&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Working of REST API’s
&lt;/h2&gt;

&lt;p&gt;REST API’s communicate via HTTP requests to perform CRUD operations on DB.&lt;br&gt;
Request headers and parameters are also important in REST API calls as they include information such as authorisation, URI, caching and more. &lt;br&gt;
Request headers and parameters along with HTTP status codes are used for designing REST API’s.&lt;br&gt;
Request API implements many HTTP request methods and before designing the API we should consider them, we need to decide which kind of request we are going to make to perform the required task.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;HTTP Request&lt;/th&gt;
&lt;th&gt;Meaning&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;GET&lt;/td&gt;
&lt;td&gt;Retrieve  information&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;POST&lt;/td&gt;
&lt;td&gt;Send information&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;PUT/PATCH&lt;/td&gt;
&lt;td&gt;Update information&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;DELETE&lt;/td&gt;
&lt;td&gt;Delete information&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Status Codes :&lt;/strong&gt; &lt;br&gt;
Status codes are the codes which a website's server sends to the browser to indicate whether a request can be fulfilled or not . Different response codes indicate different messages. We know that response can be either successful or failed but in order to know the reason for failure or success we can use these status codes. Understanding of status codes and their meaning is very important while designing the REST APIs.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Success Codes&lt;/em&gt; : 200 - OK , 201 - Created , 204 - No Content&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Error Codes&lt;/em&gt; : &lt;/p&gt;

&lt;p&gt;Error from client Side: 400 - Bad Request, 401 - Unauthorised, 403 - Forbidden, 404 - Not Found&lt;/p&gt;

&lt;p&gt;Server Error : 500 - Internal Error , 501 - Not Implemented , 502 - Bad Gateway, 503 - Service Unavailable, 504 - Gateway Timeout&lt;/p&gt;

</description>
      <category>programming</category>
      <category>api</category>
      <category>rest</category>
      <category>design</category>
    </item>
    <item>
      <title>Basic step in image classification model - Loading Image Dataset (Part-1)</title>
      <dc:creator>Modgil</dc:creator>
      <pubDate>Wed, 30 Jun 2021 14:17:57 +0000</pubDate>
      <link>https://forem.com/modgil_23/basic-step-in-image-classification-model-loading-image-dataset-part-1-nh5</link>
      <guid>https://forem.com/modgil_23/basic-step-in-image-classification-model-loading-image-dataset-part-1-nh5</guid>
      <description>&lt;p&gt;It's expected that you know the problem and must have the dataset on which you want to work on.&lt;/p&gt;

&lt;p&gt;In image classification/detection tasks the basic step is to load the data in your notebook.&lt;/p&gt;

&lt;p&gt;It is very important to arrange the data in proper order before using it.&lt;br&gt;
The image dataset must follow a particular hierarchy depending upon your problem.&lt;br&gt;
&lt;code&gt;image-data/&lt;br&gt;
 image-data/class-1&lt;br&gt;
 image-data/class-2&lt;br&gt;
 .&lt;br&gt;
 .&lt;br&gt;
 .&lt;br&gt;
 image-data/class-n&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;The dataset folder contains file having sorted images of different classes.&lt;/p&gt;

&lt;p&gt;Now we will be loading the dataset &lt;br&gt;
Using Keras&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Using Keras
&lt;/h2&gt;

&lt;p&gt;We'll use image_dataset_from_directory function to load dataset.&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; image_size = (n, n)  #depending 
 #upon the model requirement
 batch_size = 32  

 train_ds = 
 tf.keras.preprocessing.
 image_dataset_from_directory(  
 Directory,
 validation_split=0.2,
 labels="inferred",
 subset="training",
 class_names=["Class1","Class2"],
 seed=123,
 image_size=image_size,
 batch_size=batch_size)   
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;The function will automatically split the dataset into 2 parts, train and validation set depending upon the value provided in &lt;code&gt;validation_split&lt;/code&gt; parameter.&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;val_ds = 
tf.keras.preprocessing.
image_dataset_from_directory(
Directory,
validation_split=0.2,
labels="inferred",
subset="validation",
class_names=['Class1','Class2'],
seed=123,
image_size=image_size,
batch_size=batch_size)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Hence, this way we can load our image data and can use for further training process.&lt;br&gt;
For more info about parameters used in this function refer to &lt;a href="https://keras.io/api/preprocessing/image/#imagedatasetfromdirectory-function"&gt;keras documentation&lt;/a&gt; .&lt;/p&gt;

&lt;p&gt;In next article we will learn how to load image data using other techniques.&lt;/p&gt;

</description>
      <category>deeplearning</category>
      <category>machinelearning</category>
      <category>loadingdataset</category>
    </item>
    <item>
      <title>Evolution of Object Detection Techniques - RCNN</title>
      <dc:creator>Modgil</dc:creator>
      <pubDate>Fri, 05 Feb 2021 22:32:01 +0000</pubDate>
      <link>https://forem.com/modgil_23/evolution-of-cnn-s-rcnn-3da0</link>
      <guid>https://forem.com/modgil_23/evolution-of-cnn-s-rcnn-3da0</guid>
      <description>&lt;p&gt;RCNN ( &lt;strong&gt;Region Based Convolution Neural Network&lt;/strong&gt; ) is used for object detection and Localization (Identification of Objects in image with Boundaries). In this, &lt;u&gt;Selective Search&lt;/u&gt; method (Edge Boxes and Other Region Proposal Methods) are used to determine the region proposal. This technique overcomes the problems faced using Sliding Window technique. &lt;/p&gt;

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

&lt;p&gt;Around 2000 Region Proposals per Image are extracted using this technique and all these regions are Cropped and warped into fixed size (depending on the dimension which the used algorithm in the network for Classification expects) and then these regions are fed to the CNN network one by one and on the last layer of the network SVM is used for Classification.&lt;/p&gt;

&lt;p&gt;But,&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;RCNN is very slow as every single region requires forward pass of CNN and as a result we end up with too many inputs to localization network.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>machinelearning</category>
      <category>womenintech</category>
      <category>100daysofcode</category>
    </item>
    <item>
      <title>Simple Linear Regression </title>
      <dc:creator>Modgil</dc:creator>
      <pubDate>Fri, 09 Oct 2020 16:57:38 +0000</pubDate>
      <link>https://forem.com/modgil_23/simple-linear-regression-1323</link>
      <guid>https://forem.com/modgil_23/simple-linear-regression-1323</guid>
      <description>&lt;p&gt;&lt;strong&gt;Linear Regression&lt;/strong&gt; helps us to predict value of dependent variable(y) based on given independent variables(x1,x2,........).&lt;/p&gt;

&lt;p&gt;We prefer Linear Regression Algorithm when there is a Linear Relationship between independent and dependent variable.&lt;/p&gt;

&lt;p&gt;If there is a linear relation between dependent variable(y) and independent variables then, equation for linear regression will be,&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;y=m1.x1 + m2.x2 + m3.x3 + -------- 
                       ---+mn.xn+c
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;If only one independent variable is given then equation will be,&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;              y=mx+c 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;So, when dependent variable is dependent linearly only on one independent variable then we will use Simple Linear Regression.&lt;/p&gt;

&lt;p&gt;Given 2 features YearsExperience and Salary and we have to predict the Salary using YearsExperience Feature.&lt;/p&gt;

&lt;p&gt;Lets first visualize our data,&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--RYuiZT7w--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/664rsefjhg9t72bw4dkc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--RYuiZT7w--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/664rsefjhg9t72bw4dkc.png" alt="Visualization of given dataset"&gt;&lt;/a&gt;&lt;br&gt;
As we can see that there is a linear Relation between both the features.&lt;/p&gt;

&lt;p&gt;Now we have to find the best fit line that is, the Regression Line.&lt;br&gt;
So, to get the best fit line, we have to find best suitable 'm' and 'c' values.&lt;br&gt;
‘m’ is the values of slope and ‘c’  is the intercept.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--XaMK2_T4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/s8041ek69fdxj4ndwi02.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--XaMK2_T4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/s8041ek69fdxj4ndwi02.png" alt="Regression Line"&gt;&lt;/a&gt;&lt;br&gt;
The line will be best fit if it has minimum error difference between predicted and actual value.&lt;br&gt;
For e.g.&lt;br&gt;
   &lt;strong&gt;Mean Squared Error&lt;/strong&gt; (M.S.E)= &lt;br&gt;
     1/n(Σ(predicted_y - actual_y)**2)&lt;br&gt;
So our main aim is to minimize the value of Error in order to get best possible fit that is, our regression line.&lt;/p&gt;

&lt;p&gt;Implementation of Simple Linear Regression using different techniques like Least Square Method , Sklearn Library and Gradient Descent is given &lt;a href="http://localhost:8888/notebooks/Simple%20Linear%20Regression.ipynb"&gt;here&lt;/a&gt;&lt;/p&gt;

</description>
      <category>machinelearning</category>
      <category>womenintech</category>
    </item>
  </channel>
</rss>
