<?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: Victor Basumatary</title>
    <description>The latest articles on DEV Community by Victor Basumatary (@vlence).</description>
    <link>https://dev.to/vlence</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%2F231709%2F8ca4ea97-2bdd-4c9b-a37e-4a09e89409ea.png</url>
      <title>DEV Community: Victor Basumatary</title>
      <link>https://dev.to/vlence</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/vlence"/>
    <language>en</language>
    <item>
      <title>nil Inteface Values Gotcha</title>
      <dc:creator>Victor Basumatary</dc:creator>
      <pubDate>Sun, 13 Jul 2025 17:32:12 +0000</pubDate>
      <link>https://dev.to/vlence/nil-inteface-values-gotcha-5gle</link>
      <guid>https://dev.to/vlence/nil-inteface-values-gotcha-5gle</guid>
      <description>&lt;p&gt;Consider the following program. What do you think will be printed? &lt;code&gt;true&lt;/code&gt; or &lt;code&gt;false&lt;/code&gt;?&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight go"&gt;&lt;code&gt;&lt;span class="k"&gt;package&lt;/span&gt; &lt;span class="n"&gt;main&lt;/span&gt;

&lt;span class="k"&gt;type&lt;/span&gt; &lt;span class="n"&gt;MyInterface&lt;/span&gt; &lt;span class="k"&gt;interface&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;DoSomething&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;type&lt;/span&gt; &lt;span class="n"&gt;MyInterfaceImplementation&lt;/span&gt; &lt;span class="k"&gt;struct&lt;/span&gt;&lt;span class="p"&gt;{}&lt;/span&gt;

&lt;span class="k"&gt;func&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;impl&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;MyInterfaceImplementation&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;DoSomething&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;

&lt;span class="k"&gt;func&lt;/span&gt; &lt;span class="n"&gt;getMyInterfaceImplementation&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;MyInterfaceImplementation&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="no"&gt;nil&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;func&lt;/span&gt; &lt;span class="n"&gt;getMyInterface&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="n"&gt;MyInterface&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;getMyInterfaceImplementation&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;func&lt;/span&gt; &lt;span class="n"&gt;main&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;fmt&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Println&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;getMyInterface&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="no"&gt;nil&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;If you said &lt;code&gt;true&lt;/code&gt; you will be surprised to find out that it's actually &lt;code&gt;false&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Let's print out what's returned by &lt;code&gt;getMyInterface()&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight go"&gt;&lt;code&gt;&lt;span class="k"&gt;func&lt;/span&gt; &lt;span class="n"&gt;main&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;fmt&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Printf&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"%v %t&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;getMyInterface&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt; &lt;span class="n"&gt;getMyInterface&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="no"&gt;nil&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight console"&gt;&lt;code&gt;&lt;span class="gp"&gt;$&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&amp;lt;nil&amp;gt; &lt;span class="nb"&gt;false&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That doesn't make any sense! We are getting a &lt;code&gt;nil&lt;/code&gt; but the equality check with &lt;code&gt;nil&lt;/code&gt; returns &lt;code&gt;false&lt;/code&gt;. Why? Let's dig in a little deeper.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight go"&gt;&lt;code&gt;&lt;span class="k"&gt;func&lt;/span&gt; &lt;span class="n"&gt;main&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;fmt&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Printf&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"%#v %t&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;getMyInterface&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt; &lt;span class="n"&gt;getMyInterface&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="no"&gt;nil&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight console"&gt;&lt;code&gt;&lt;span class="gp"&gt;$&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="k"&gt;*&lt;/span&gt;main.MyInterfaceImplementation&lt;span class="o"&gt;)(&lt;/span&gt;nil&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="nb"&gt;false&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If you have a variable whose type is an interface that variable is actually storing an interface value, NOT the value that you set it to. The same applies when your function returns a value of an interface type.&lt;/p&gt;

&lt;p&gt;In the Go runtime interface values are implemented as tuples, meaning it is made up of two things. The first is the concrete type of the interface (here it is &lt;code&gt;*main.MyInterfaceImplementation&lt;/code&gt;) and the second is the concrete value (&lt;code&gt;nil&lt;/code&gt;). This is how the Go runtime tracks which interface implementation is being referenced and where the value is in memory, or if it nil.&lt;/p&gt;

&lt;p&gt;So &lt;code&gt;getMyInterface()&lt;/code&gt; is not returning a &lt;code&gt;nil&lt;/code&gt; but rather an interface value whose concrete value is &lt;code&gt;nil&lt;/code&gt;. If we want our function to return a &lt;code&gt;nil&lt;/code&gt; instead we need to make the following change.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight go"&gt;&lt;code&gt;&lt;span class="k"&gt;func&lt;/span&gt; &lt;span class="n"&gt;getMyInterface&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="n"&gt;MyInterface&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;impl&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="n"&gt;getMyInterfaceImplementation&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;

    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;impl&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="no"&gt;nil&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="no"&gt;nil&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;impl&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight console"&gt;&lt;code&gt;&lt;span class="gp"&gt;$&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&amp;lt;nil&amp;gt; &lt;span class="nb"&gt;true&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>go</category>
    </item>
    <item>
      <title>Controlled Components Make No Sense</title>
      <dc:creator>Victor Basumatary</dc:creator>
      <pubDate>Tue, 10 Oct 2023 14:11:11 +0000</pubDate>
      <link>https://dev.to/vlence/controlled-components-make-no-sense-jbm</link>
      <guid>https://dev.to/vlence/controlled-components-make-no-sense-jbm</guid>
      <description>&lt;p&gt;Before I learned what SPA meant and how to build SPAs I built websites using PHP, MySQL and Nginx. It was a simpler time for web development in general - just write some HTML and ship it to the user. Building frontends was simple - just slap together some HTML, CSS and JavaScript until the site looked like what the client asked for and behaved like it. All the hard parts were usually in the backend and even they weren't too hard because PHP comes with batteries included. If the end-user's browser didn't run the JavaScript you wrote it wasn't the end of the world; the website still worked most of the time. The most complex interactions were usually forms that looked really nice and these worked as long as you knew how to click the submit button and had an internet connection.&lt;/p&gt;

&lt;p&gt;The first SPA framework I learned was AngularJS and I only learned it because the company I worked for at that time was using it. It took me some time to wrap my head around all the different concepts - controllers, modules, services, two-way data binding, etc. - but once I did it felt great building frontends. AngularJS made it feel trivial to build highly interactive UIs and clients liked the bling factor. It seemed like common sense that this is the way forward for the web development industry - highly interactive UIs made possible with megabytes of JavaScript.&lt;/p&gt;

&lt;p&gt;After some time I heard about Angular. Much to everyone's confusion it seemed prudent to the Angular team that Angular 1.x should be called AngularJS and all future versions of Angular should be called Angular. To help simplify matters they made different domains for them - AngularJS is on &lt;a href="https://angularjs.org"&gt;angularjs.org&lt;/a&gt; and Angular is on &lt;a href="https://angular.io"&gt;angular.io&lt;/a&gt;. Angular was not backwards compatible with AngularJS which meant that if you wanted to use Angular in an existing project you had to rewrite it. Not nice. Much of the concepts were the same but you now had to use TypeScript. It did come with a nice CLI however.&lt;/p&gt;

&lt;p&gt;Now at this point you must be thinking, "I thought this article is about controlled components not making sense. This guy is just talking about Angular and AngularJS." Yes. We're getting there.&lt;/p&gt;

&lt;p&gt;One great feature/footgun that came with AngularJS was two-way data binding and very quickly people found out that this feature/footgun is generally a bad idea - you couldn't tell who was changing the data and why and where. What in fact was a good idea is one-way data binding. The classic demo for Angular(JS)'s data-binding was to have a text input and whenever you type something into it the text would appear elsewhere on the page, possibly transformed in some way. This is nothing spectacular in and of itself - anybody can do the same with an event listener or two. What was amazing however was how little code we had to write to achieve it. Everyone fell in love with this.&lt;/p&gt;

&lt;p&gt;Note that we've ALWAYS had one-way data binding - the browser keeps track of the state of form controls and we used them during &lt;code&gt;onchange&lt;/code&gt; and/or &lt;code&gt;onsubmit&lt;/code&gt;. We basically went back to where we came from.&lt;/p&gt;

&lt;p&gt;Besides the conversation around Angular and AngularJS's (unfortunate) naming conventions there was another conversation going on - writing applications using Angular(JS) felt like writing applications in Java. Just so much of boilerplate! You had to have a module and a controller and a template and a bunch of other things before you could even print a 'hello, world!' message. Nobody liked that. This was fertile ground for a much more approachable framework. I mean library. Perhaps that's why they named it React - it was a React-ion to Angular(JS)'s boilerplate.&lt;/p&gt;

&lt;p&gt;Well whatever the reason for calling it React, everyone did react. To JSX. It took some time for people to succumb to the Stockholm Syndrome but once they did everyone was talking about how great it was, since it brought the template and the behavior to the same place. And you could see all of it at the same time. Unless you're writing a dumb component and the smart component which actually has all the data(-fetching) logic is 5 levels up the component tree.&lt;/p&gt;

&lt;p&gt;Since I was going into React from AngularJS it wasn't too hard. Most of the concepts were the same. What was new was the fact that React wrapped ALL the events the browser produced, the JSX produces React Elements and not HTML elements, and there was now a special way to do forms and form controls. Enter controlled components. At first glance you wouldn't think too much about it but after writing a few (dozen) &lt;code&gt;onChange&lt;/code&gt; handlers you soon realize that the reason they exist is not because something is broken in HTML or browsers, it's because React has no other way to keep track of the form control's state. Yes you can use refs but that's a React anti-pattern afaik so people generally avoid it.&lt;/p&gt;

&lt;p&gt;Forms are hard. Forms in React are painful. A lot of websites are simple forms that collect some data and do something with it. Even Google is essentially just a (small) form. An app I was writing for my previous company was just a very large form. Forms are everywhere and in my, humble, opinion I think that something as common as forms shouldn't be painful. And in my other, humble, opinion a sure fire way to make forms painful is to manage the form's state manually when the browser is already capable of doing it. Just think about that for a moment. Why are we manually managing form state when the browser can already do it, and in fact has been doing it for decades?&lt;/p&gt;

&lt;p&gt;React/Modern web development has gone through many phases:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Class components are great.&lt;/li&gt;
&lt;li&gt;Class components are terrible.&lt;/li&gt;
&lt;li&gt;Shipping the entire React codebase for just that one interactive form in our website is fine.&lt;/li&gt;
&lt;li&gt;Actually we should lazy load components and other dependencies.&lt;/li&gt;
&lt;li&gt;Hooks are great.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;onEffect&lt;/code&gt; is the bane of our React applications.&lt;/li&gt;
&lt;li&gt;Let's render our React applications twice - once in the server and once in the browser - for that sweet, sweet first contentful paint.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Notice the last point. Doesn't that sound a lot like writing applications with PHP, MySQL and Nginx? Write some JSX, render it to HTML and ship the HTML to the user.&lt;/p&gt;

&lt;p&gt;I think it's safe to say that just like how we went back to one-way data binding and how we're going back to the server just returning HTML, we should probably just go back to letting the browser handle form state for us.&lt;/p&gt;

&lt;p&gt;You don't need React to build forms; you need HTML.&lt;/p&gt;

&lt;p&gt;If you really must have interactivity in your website just use &lt;a href="https://alpinejs.dev"&gt;Alpine&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;And if you hate page reloads just use &lt;a href="https://htmx.org"&gt;HTMX&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;You'll soon notice that your websites are still largely useable even if JavaScript is disabled.&lt;/p&gt;

&lt;p&gt;Fun fact: Google, who made Angular, don't use it as much.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>react</category>
      <category>javascript</category>
    </item>
    <item>
      <title>HTTP Server With Erlang &amp; Cowboy</title>
      <dc:creator>Victor Basumatary</dc:creator>
      <pubDate>Fri, 18 Aug 2023 02:27:03 +0000</pubDate>
      <link>https://dev.to/vlence/creating-an-http-server-with-erlang-cowboy-2345</link>
      <guid>https://dev.to/vlence/creating-an-http-server-with-erlang-cowboy-2345</guid>
      <description>&lt;p&gt;I am learning Erlang and wanted to build an HTTP server. I read about the in-built &lt;code&gt;inets&lt;/code&gt; application and the &lt;code&gt;httpd&lt;/code&gt; service and upon using them I quickly realized that they weren't what I wanted.&lt;/p&gt;

&lt;p&gt;I want to be able to handle requests myself. The &lt;code&gt;httpd&lt;/code&gt; service is great if you want to simply respond to requests with static files but I wanted to respond dynamically. That's when I read about cowboy.&lt;/p&gt;

&lt;p&gt;There are a lot of moving pieces and as a beginner I got stuck for a while but I finally was able to create an HTTP server using cowboy. Here's how I did it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Getting started
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://rebar3.org/docs/getting-started/"&gt;Install rebar3&lt;/a&gt; (if you haven't already done so) and create a new erlang application. Let's call it &lt;code&gt;cowboy_hello_world&lt;/code&gt;.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;rebar3 is a build tool and a package management tool for Erlang.&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight console"&gt;&lt;code&gt;&lt;span class="gp"&gt;$&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;rebar3 new app cowboy_hello_world
&lt;span class="gp"&gt;$&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nb"&gt;cd &lt;/span&gt;cowboy_hello_world
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You will see that there is a &lt;code&gt;rebar.config&lt;/code&gt; file and three files under the &lt;code&gt;src/&lt;/code&gt; directory. We will attend to these now.&lt;/p&gt;

&lt;p&gt;Before we can use cowboy we need to specify it as a dependency. Add it to your &lt;code&gt;rebar.config&lt;/code&gt; file. It should look like this.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight erlang"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;erl_opts&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;debug_info&lt;/span&gt;&lt;span class="p"&gt;]}.&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;deps&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="n"&gt;cowboy&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"2.10.0"&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="n"&gt;shell&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
  &lt;span class="c"&gt;% {config, "config/sys.config"},
&lt;/span&gt;    &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;apps&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;cowboy_hello_world&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;Dependencies aren't automatically installed so you will need to run the following:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight console"&gt;&lt;code&gt;&lt;span class="gp"&gt;$&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;rebar3 compile
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The command above also compiles and builds your code.&lt;/p&gt;

&lt;h2&gt;
  
  
  Defining the server
&lt;/h2&gt;

&lt;p&gt;Now at this point we can use cowboy and make our own HTTP server. Let's open the &lt;code&gt;src/cowboy_hello_world_app.erl&lt;/code&gt; file and start the HTTP server.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight erlang"&gt;&lt;code&gt;&lt;span class="p"&gt;-&lt;/span&gt;&lt;span class="ni"&gt;module&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;cowboy_hello_world_app&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;

&lt;span class="p"&gt;-&lt;/span&gt;&lt;span class="ni"&gt;behaviour&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;application&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;

&lt;span class="p"&gt;-&lt;/span&gt;&lt;span class="ni"&gt;export&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="n"&gt;start&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="n"&gt;stop&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="nf"&gt;start&lt;/span&gt;&lt;span class="p"&gt;(_&lt;/span&gt;&lt;span class="nv"&gt;StartType&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;_&lt;/span&gt;&lt;span class="nv"&gt;StartArgs&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;
    &lt;span class="nv"&gt;Routes&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
        &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="s"&gt;"/"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;hello_world_h&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="nv"&gt;ServerConfig&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
        &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;port&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;8080&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;],&lt;/span&gt;

    &lt;span class="nv"&gt;Dispatch&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nn"&gt;cowboy_router&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nf"&gt;compile&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;
        &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;'_'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;Routes&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="n"&gt;ok&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;_}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nn"&gt;cowboy&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nf"&gt;start_clear&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;httpd&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;ServerConfig&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="err"&gt;#&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="n"&gt;env&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="err"&gt;#&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;dispatch&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nv"&gt;Dispatch&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}),&lt;/span&gt;

    &lt;span class="nn"&gt;cowboy_hello_world_sup&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nf"&gt;start_link&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;

&lt;span class="nf"&gt;stop&lt;/span&gt;&lt;span class="p"&gt;(_&lt;/span&gt;&lt;span class="nv"&gt;State&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;
    &lt;span class="n"&gt;ok&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is what we are doing:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;Defining a list of routes in the &lt;code&gt;Routes&lt;/code&gt; variable&lt;/p&gt;

&lt;p&gt;a. We have created only one route here.&lt;/p&gt;

&lt;p&gt;b. Whenever the user sends a request to &lt;code&gt;"/"&lt;/code&gt; the &lt;code&gt;hello_world_h&lt;/code&gt; module will be used to handle that request.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Compiling the routes.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Starting a cowboy HTTP server with some server configuration and the routes that we compiled.&lt;/p&gt;

&lt;p&gt;a. We have configured our server to use port &lt;code&gt;8080&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;b. Therefore the server will be listening at &lt;code&gt;http://localhost:8080&lt;/code&gt;.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Since in the routes definition we have mentioned the &lt;code&gt;hello_world_h&lt;/code&gt; module we need to create it. Create a new file &lt;code&gt;src/hello_world_h&lt;/code&gt; and fill it up as such.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight erlang"&gt;&lt;code&gt;&lt;span class="p"&gt;-&lt;/span&gt;&lt;span class="ni"&gt;module&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;hello_world_h&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;

&lt;span class="p"&gt;-&lt;/span&gt;&lt;span class="ni"&gt;export&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="n"&gt;init&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="nf"&gt;init&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;Request&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;Opts&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;
  &lt;span class="nv"&gt;StatusCode&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;

  &lt;span class="nv"&gt;Headers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="err"&gt;#&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&amp;lt;&lt;/span&gt;&lt;span class="s"&gt;"content-type"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&amp;lt;&lt;/span&gt;&lt;span class="s"&gt;"text/html"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;

  &lt;span class="nv"&gt;Body&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&amp;lt;&lt;/span&gt;&lt;span class="s"&gt;"&amp;lt;h1&amp;gt;Hello from cowboy!&amp;lt;/h1&amp;gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;

  &lt;span class="nv"&gt;Response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nn"&gt;cowboy_req&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nf"&gt;reply&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;StatusCode&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;Headers&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;Body&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;Request&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;

  &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;ok&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;Response&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;Opts&lt;/span&gt;&lt;span class="p"&gt;}.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Cowboy will automatically call the &lt;code&gt;init/2&lt;/code&gt; function with the request and expect a response. Here's what we are doing.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;Defining the HTTP status code to be &lt;code&gt;200&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;a. A status code of &lt;code&gt;200&lt;/code&gt; means that the request was processed successfully.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Setting the &lt;code&gt;Content-Type&lt;/code&gt; HTTP header to &lt;code&gt;text/html&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;a. This is to tell the client that the body of the HTTP response will be an HTML document.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Creating the body of the HTTP response as a binary.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Creating a reply for the request.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Returning that reply.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Let's start our server!
&lt;/h2&gt;

&lt;p&gt;Ok our application is ready! Let's run it.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight console"&gt;&lt;code&gt;&lt;span class="gp"&gt;$&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;rebar3 compile
&lt;span class="gp"&gt;$&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;rebar3 shell
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;At this point you should be greeted with a long error message. Quite disappointing.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight erlang"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;bad_return&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;{{&lt;/span&gt;&lt;span class="n"&gt;cowboy_hello_world_app&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;start&lt;/span&gt;&lt;span class="p"&gt;,[&lt;/span&gt;&lt;span class="n"&gt;normal&lt;/span&gt;&lt;span class="p"&gt;,[]]},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;'EXIT'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;noproc&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;gen_server&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;call&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;ranch_sup&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;start_child&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="p"&gt;{{&lt;/span&gt;&lt;span class="n"&gt;ranch_listener_sup&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;httpd&lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;
        &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;ranch_listener_sup&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;start_link&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;      
          &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;httpd&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;ranch_tcp&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="err"&gt;#&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;socket_opts&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;[{&lt;/span&gt;&lt;span class="n"&gt;port&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;8080&lt;/span&gt;&lt;span class="p"&gt;}],&lt;/span&gt;
            &lt;span class="n"&gt;connection_type&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;supervisor&lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;
          &lt;span class="n"&gt;cowboy_clear&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="err"&gt;#&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;env&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;
              &lt;span class="err"&gt;#&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;dispatch&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;
                &lt;span class="p"&gt;[{&lt;/span&gt;&lt;span class="n"&gt;'_'&lt;/span&gt;&lt;span class="p"&gt;,[],[{[],[],&lt;/span&gt;&lt;span class="n"&gt;hello_world_h&lt;/span&gt;&lt;span class="p"&gt;,[]}]}]},&lt;/span&gt;
            &lt;span class="n"&gt;connection_type&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;supervisor&lt;/span&gt;&lt;span class="p"&gt;}]},&lt;/span&gt;
        &lt;span class="n"&gt;permanent&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;infinity&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;supervisor&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;ranch_listener_sup&lt;/span&gt;&lt;span class="p"&gt;]}},&lt;/span&gt;
      &lt;span class="n"&gt;infinity&lt;/span&gt;&lt;span class="p"&gt;]}}}}}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;What does this error message mean? Notice that towards the end of the error message it mentions a &lt;code&gt;ranch_listener_sup&lt;/code&gt;. Cowboy depends on the ranch application and ranch must be started before cowboy. To do this we need to make a small change to our &lt;code&gt;src/cowboy_hello_world.app.src&lt;/code&gt; file.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight erlang"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;application&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cowboy_hello_world&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
 &lt;span class="p"&gt;[{&lt;/span&gt;&lt;span class="n"&gt;description&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"An OTP application"&lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;vsn&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"0.1.0"&lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;registered&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="n"&gt;mod&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;cowboy_hello_world_app&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="n"&gt;applications&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
   &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;kernel&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;stdlib&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;ranch&lt;/span&gt;
   &lt;span class="p"&gt;]},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;env&lt;/span&gt;&lt;span class="p"&gt;,[]},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;modules&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="n"&gt;licenses&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s"&gt;"Apache-2.0"&lt;/span&gt;&lt;span class="p"&gt;]},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;links&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[]}&lt;/span&gt;
 &lt;span class="p"&gt;]}.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Notice that we have added &lt;code&gt;ranch&lt;/code&gt; as an application after &lt;code&gt;kernel&lt;/code&gt; and &lt;code&gt;stdlib&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Let's compile and run our application again.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight console"&gt;&lt;code&gt;&lt;span class="gp"&gt;$&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;rebar3 compile
&lt;span class="gp"&gt;$&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;rebar3 shell
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You shouldn't see any error messages anymore. Head over to &lt;code&gt;http://localhost:8080&lt;/code&gt; in your browser.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--fuvFjBbo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f0cjoylzyt6wu2azx0qe.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fuvFjBbo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f0cjoylzyt6wu2azx0qe.png" alt='A screenshot of a webpage that says "Hello from cowboy!" under the URL http://localhost:8080. This is the expected output when we visit our cowboy HTTP server.' width="494" height="211"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Congratulations! You have created your first HTTP server in Erlang using cowboy!&lt;/p&gt;

</description>
      <category>erlang</category>
      <category>cowboy</category>
      <category>rebar3</category>
    </item>
    <item>
      <title>Why Do You Write Tests?</title>
      <dc:creator>Victor Basumatary</dc:creator>
      <pubDate>Mon, 21 Dec 2020 12:24:59 +0000</pubDate>
      <link>https://dev.to/vlence/why-do-you-write-tests-2lp2</link>
      <guid>https://dev.to/vlence/why-do-you-write-tests-2lp2</guid>
      <description>&lt;p&gt;Testing has pros and cons (what doesn't?) and it only makes sense to do things when their benefits outweigh the costs. Usually at least. I hope I am speaking for most people here.&lt;/p&gt;

&lt;p&gt;Anyway why do I write tests? I write it because it makes a nice todolist. Yeah it gives you that confidence that your program works correctly (does it though?) and refactoring becomes a cinch (I totally remember what ThisClassIMade20DaysAgo does) but I do it for the todolist because I'm forgetful.&lt;/p&gt;

&lt;p&gt;Usually before I'm writing the code I imagine writing the code and a lot of times while imagining all of this I come across these edge cases. I obviously don't want to forget them so I write the tests for them. Or at least make empty tests with a descriptive enough name and comments.&lt;/p&gt;

&lt;p&gt;So why do you write tests?&lt;/p&gt;

</description>
      <category>programming</category>
    </item>
    <item>
      <title>Why Do Frameworks Suck?</title>
      <dc:creator>Victor Basumatary</dc:creator>
      <pubDate>Wed, 16 Dec 2020 14:04:04 +0000</pubDate>
      <link>https://dev.to/vlence/why-do-frameworks-suck-4bd3</link>
      <guid>https://dev.to/vlence/why-do-frameworks-suck-4bd3</guid>
      <description>&lt;p&gt;I believe the answer is bias.&lt;/p&gt;

&lt;p&gt;Another way to frame the question would be: &lt;em&gt;Why doesn't the framework feel half as elegant and easy-to-use in the real world compared to the quickstart tutorial and example projects?&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;We gotta take into account the framework developer(s)'s original intention when developing the framework. What problem were they trying to solve? All frameworks are built to solve a problem. A framework to solve a general class of problems? Now that's difficult. Very difficult. As difficult as making a class that's "general". Which is why people just make interfaces. I think.&lt;/p&gt;

&lt;p&gt;I remember when I first tried PHP. I was a kid. It was magic. I didn't understand jack except that &lt;code&gt;echo "Hello world";&lt;/code&gt; gives me some output in the browser. And that's all that really mattered. Then I understood it a little better, and had also begun to think about abstract ideas like modularity. That muddied the water. It's been a long time since I felt that magic when I was a kid.&lt;/p&gt;

&lt;p&gt;Yes modularity is good, I mean who here likes to go through hundreds of lines of copy-pasted code amirite? But it's bad if the modular code was never designed to solve your problem. Modularity in high level languages usually come in the form of files, classes, namespaces, etc. and they work great. You take it a step further and you get frameworks. The difference is the modularity is no longer general. Facebook was built with PHP. There are many PHP frameworks for building websites, like Laravel. It's not impossible but you'll feel lesser pain building Facebook without a framework than with one. Probably. Please leave comments. Thanks.&lt;/p&gt;

&lt;p&gt;Frameworks have a place. They're amazing if every dev using one knows exactly what it was built for and why. Otherwise it's a lot of reading the docs, logs, stackoverflow, and cursing the screen. The beauty about the design of computer languages and their strictness is that they guide you in how to build a program. &lt;strong&gt;"NO YOU CAN'T PUT A STRING THERE please use a string type thanks."&lt;/strong&gt; Frameworks try to emulate that, at a higher level, but imo usually fails spectacularly.&lt;/p&gt;

&lt;p&gt;These are just my thoughts. I didn't think everything through. Woke up maybe 2h ago.&lt;/p&gt;

</description>
      <category>programming</category>
      <category>webdev</category>
      <category>php</category>
    </item>
    <item>
      <title>Today I Fixed...</title>
      <dc:creator>Victor Basumatary</dc:creator>
      <pubDate>Sat, 12 Dec 2020 15:44:44 +0000</pubDate>
      <link>https://dev.to/vlence/today-i-fixed-3h10</link>
      <guid>https://dev.to/vlence/today-i-fixed-3h10</guid>
      <description>&lt;p&gt;I have been working on a website using Laravel 7 for a while. This is the first time I'm building something with Laravel. We use Passport for authentication and of course, API calls are authenticated with it as well.&lt;/p&gt;

&lt;p&gt;So the bug I encountered was I wasn't able to call my API. I am using the "auth:api" middleware on my controller to authenticate my API requests. Ideally my request gets through, required I was authenticated and authorized, but instead I was always redirected to the login page.&lt;/p&gt;

&lt;p&gt;Initially I thought something was wrong with the middleware but quickly ruled it out. In another part of the website API requests made through just fine. Clearly the middleware was working. Besides it's the middleware's correct behavior to redirect you to the login page if you aren't authenticated.&lt;/p&gt;

&lt;p&gt;The only real difference between these two pieces of code was that in one I used &lt;code&gt;axios&lt;/code&gt; to make the API request and in the other I used &lt;code&gt;fetch()&lt;/code&gt;. The &lt;code&gt;fetch()&lt;/code&gt; call was failing.&lt;/p&gt;

&lt;p&gt;After a little digging and attentive reading of the docs (this was the hardest part of the whole process for me) I finally figured it out.&lt;/p&gt;

&lt;p&gt;Recall that I am using Passport for authentication. It handles API authentication too out of the box. The way it does it is:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;When you login an api token is made for you. This is sent back as a cookie (laravel-token by default).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Another cookie called xsrf-token is also sent back.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;When making an API request the xsrf-token must be decoded using &lt;code&gt;decodeURIComponent()&lt;/code&gt; and sent back as the x-xsrf-token header&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;code&gt;axios&lt;/code&gt; would do step 3 automatically, I don't know how or why. When you use &lt;code&gt;fetch()&lt;/code&gt; you need to do step 3 manually.&lt;/p&gt;

</description>
      <category>laravel</category>
      <category>php</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Cache Everything</title>
      <dc:creator>Victor Basumatary</dc:creator>
      <pubDate>Wed, 09 Sep 2020 17:13:45 +0000</pubDate>
      <link>https://dev.to/vlence/most-dynamic-websites-are-actually-static-and-so-you-should-cache-everything-mg5</link>
      <guid>https://dev.to/vlence/most-dynamic-websites-are-actually-static-and-so-you-should-cache-everything-mg5</guid>
      <description>&lt;p&gt;Static websites are great. Here are some of the great things about them:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;They're fast&lt;/li&gt;
&lt;li&gt;Can be updated and maybe maintained by a web dev beginner&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Can be cached&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;Won't cost you an arm and leg to refactor or redesign&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Ok maybe the last point is the result of how well you write and design your codebase and not so much it being a static website.&lt;/p&gt;

&lt;p&gt;A lot of people don't seem to like the idea of building static websites. I was once that person because building static websites meant writing the entire website by hand (and I did that a few times). The reason(s) could be different for different people however.&lt;/p&gt;

&lt;p&gt;What do we mean by a dynamic website anyway? A lot of times it means having a database and the website/web page being generated using the data in the database. We'll go with that definition.&lt;/p&gt;

&lt;p&gt;Let's take a news website for example. What's dynamic in the website? The landing page? Yep. The advertisements section on each page? Yep. The news article itself? Most of the time, no. Anything else? Most probably not. No.&lt;/p&gt;

&lt;p&gt;How about an e-commerce website. Landing page? Definitely dynamic. Ads section(s)? Yep. The product details in the product page? Usually no. The reviews section in the product page? Yep.&lt;/p&gt;

&lt;p&gt;And I could go on and on. If you still don't get my point, it's this - most content on most websites is static.&lt;/p&gt;

&lt;p&gt;How often does the data in the database change? It depends. A news website is probably churning out anywhere between 10s and 100s of articles every day. A really successful news website may be churning out thousands.&lt;/p&gt;

&lt;p&gt;A general e-commerce website will probably be adding thousands of new products and reviews to the store by the hour.&lt;/p&gt;

&lt;p&gt;A blog may be updated with a new post maybe only once a week.&lt;/p&gt;

&lt;p&gt;It depends.&lt;/p&gt;

&lt;p&gt;At a glance it does seem like data is changing pretty often but that observation is incorrect. Once a news article is published, it can be updated but how often does that happen? Once a product is added to an e-commerce site, the product details can be updated but how often does that happen? Once a post is written in a blog, it can be updated but how often does it happen?&lt;/p&gt;

&lt;p&gt;Do you see it now? Most content is static. At least until it is updated. Which means we can cache most content indefinitely. At least until it is updated.&lt;/p&gt;

&lt;p&gt;Why is this observation important? Because money. And performance.&lt;/p&gt;

&lt;p&gt;It takes far less resources - mainly CPU cycles and memory - to serve static content than to generate that content. Lesser resource usage spent responding to requests means more resources spent doing actually useful things like generating content that wasn't previously cached. Better resource utilization means your money is being spent efficiently. It may also have the side effect of your web servers being able to serve more requests more quickly.&lt;/p&gt;

&lt;p&gt;How can we take advantage of this? I propose this workflow:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Serve cached response for request&lt;/li&gt;
&lt;li&gt;If cached response doesn't exist make it, serve it and cache it&lt;/li&gt;
&lt;li&gt;Purge cache every time you deploy&lt;/li&gt;
&lt;li&gt;Automatically purge cached content when content is updated&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Let's use the news website as an example again.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;"I want to read XYZ news article". I have a copy of it lying over here. Take it.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;"I want to read XYZ news article". I have a co... Actually no I don't. Let me get that news article for you real quick and keep a copy in case you or someone else might want it again.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Oh it seems like the news website is updated. Let's get rid of all our copies of news articles because we don't know if we changed styling or something.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;"Oops I've made a typo in this article. Edited." Ok got it thanks. Oh it seems there was a copy of this article lying around. Let's get rid of that.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So essentially what we really want to do most of the time is build a dynamically updated static website rather than a dynamic website.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Victor this is all fine but content lives within HTML documents and all these examples you used have dynamic sections within those  documents! News article pages will have ads and maybe comments. Product pages on an e-commerce website will have personalized recommendations and reviews and again, ads. Blogs will display related articles. We can't cache those.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Static content lives within HTML documents that may house dynamic content. Correct.&lt;/p&gt;

&lt;p&gt;We cannot cache the HTML document because there are dynamic content sections. Incorrect.&lt;/p&gt;

&lt;p&gt;HTML by nature isn't dynamic. But we want dynamism and so we have JavaScript. Any time you see the need for dynamism in your web page, JavaScript is probably the right answer. Probably.&lt;/p&gt;

&lt;p&gt;Will the JavaScript that fetches and displays dynamic content on your web page change often? Probably not. So you can cache it, along with the HTML.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Well Ok. But my website is served worldwide and the content differs depending on locale and other variables.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Use HTTP headers like &lt;code&gt;Vary&lt;/code&gt; and &lt;code&gt;Accept-Encoding&lt;/code&gt; to cache and serve cached content. CDNs are really smart you know.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Victor this requires a lot of effort. All we want to do is make a website and get it done with.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Who doesn't? But I suppose you would like to charge your customers lesser to give yourself that competitive edge and also have a lower running cost, no?&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>html</category>
      <category>css</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Laravel Relationship Gotcha</title>
      <dc:creator>Victor Basumatary</dc:creator>
      <pubDate>Wed, 02 Sep 2020 17:33:43 +0000</pubDate>
      <link>https://dev.to/vlence/laravel-relationship-gotcha-3g5c</link>
      <guid>https://dev.to/vlence/laravel-relationship-gotcha-3g5c</guid>
      <description>&lt;p&gt;Laravel is nice. It lets you define relationships painlessly.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="c1"&gt;// app/MultipleChoiceQuestion.php&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;MultipleChoiceQuestion&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;Model&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;answers&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="nv"&gt;$this&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;hasMany&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="err"&gt;\&lt;/span&gt;&lt;span class="nc"&gt;App\Answer&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="n"&gt;class&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We can even make relationships in the other direction.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="c1"&gt;// app/Answer.php&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Answer&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;Model&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;question&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="nv"&gt;$this&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;belongsTo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="err"&gt;\&lt;/span&gt;&lt;span class="nc"&gt;App\MultipleChoiceQuestion&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="n"&gt;class&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If we know we're often going to query for the answers to our questions when we query for the questions, it makes sense to eager load them by default.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="c1"&gt;// app/MultipleChoiceQuestion.php&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;MultipleChoiceQuestion&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;Model&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;protected&lt;/span&gt; &lt;span class="nv"&gt;$with&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'answers'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;answers&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="nv"&gt;$this&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;hasMany&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="err"&gt;\&lt;/span&gt;&lt;span class="nc"&gt;App\Answer&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="n"&gt;class&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But what happens when we eager load the question on the answer as well?&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="c1"&gt;// app/Answer.php&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Answer&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;Model&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;protected&lt;/span&gt; &lt;span class="nv"&gt;$with&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'question'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;question&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="nv"&gt;$this&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;belongsTo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="err"&gt;\&lt;/span&gt;&lt;span class="nc"&gt;App\MultipleChoiceQuestion&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="n"&gt;class&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Chaos. When you query the question you query for its answers as well which in turn queries for the question they belongs to and...&lt;/p&gt;

&lt;p&gt;Your relationships must terminate somewhere.&lt;/p&gt;

</description>
      <category>laravel</category>
      <category>php</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Laravel Route Parameters &amp; Controller Actions</title>
      <dc:creator>Victor Basumatary</dc:creator>
      <pubDate>Wed, 02 Sep 2020 07:13:23 +0000</pubDate>
      <link>https://dev.to/vlence/laravel-route-parameters-controller-actions-3pil</link>
      <guid>https://dev.to/vlence/laravel-route-parameters-controller-actions-3pil</guid>
      <description>&lt;p&gt;Laravel is nice. It'll automatically inject the models you need into your controller actions.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="c1"&gt;// app/Http/Controllers/FilmReviewController.php&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;FilmReviewController&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;Controller&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;edit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;Request&lt;/span&gt; &lt;span class="nv"&gt;$request&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kt"&gt;FilmReview&lt;/span&gt; &lt;span class="nv"&gt;$filmReview&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="c1"&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;What isn't nice though is that your controller action's parameter names must match the route parameter names. This might catch some of you by surprise. It sure did me.&lt;/p&gt;

&lt;p&gt;Let's suppose I defined the following resource route:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="c1"&gt;// routes/web.php&lt;/span&gt;
&lt;span class="nc"&gt;Route&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;resource&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'reviews'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'FilmReviewController'&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 create the following route for the &lt;code&gt;edit&lt;/code&gt; action:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight http"&gt;&lt;code&gt;&lt;span class="err"&gt;PUT /reviews/{review}
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I must now update my controller like so:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Notice I changed $filmReview to $review&lt;/span&gt;
&lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;edit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;Request&lt;/span&gt; &lt;span class="nv"&gt;$request&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kt"&gt;FilmReview&lt;/span&gt; &lt;span class="nv"&gt;$review&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;//&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If the route parameter name and the parameter name of your controller action don't match, the model won't be fetched from your db. So calls like &lt;code&gt;$review-&amp;gt;id&lt;/code&gt; will always return null.&lt;/p&gt;

</description>
      <category>php</category>
      <category>laravel</category>
      <category>webdev</category>
    </item>
    <item>
      <title>A Web Developer's Calling.</title>
      <dc:creator>Victor Basumatary</dc:creator>
      <pubDate>Fri, 19 Jun 2020 04:33:48 +0000</pubDate>
      <link>https://dev.to/vlence/a-web-developer-s-calling-15ol</link>
      <guid>https://dev.to/vlence/a-web-developer-s-calling-15ol</guid>
      <description>&lt;p&gt;The WWW came into existence in the early '90s and in less than five years there were 1000s if not 100s of 1000s of web servers already. People were connecting with each other and exchanging information, and learning how to develop with and use this new emerging technology. Everybody knew what a web server was, what HTML and HTTP are. Everybody knew how to build web applications end-to-end. How did we go from that to the modern day roles of frontend, backend, and fullstack devs? I don't know and that's not the point of this article.&lt;/p&gt;

&lt;p&gt;I believe that if I call myself a web developer I should be able to build web applications end-to-end. I like to draw a line between web applications and websites. We all know what a website is - HTML, CSS, and JS running in a browser - but what do I mean by web application? Here's how I define it - a web application is a computer program that you may or may not be able to access (directly) over the internet. I suppose many people will find this definition very restrictive as the term is often used to refer to applications built with JavaScript designed to run within a browser as well. I don't like that idea very much so I'll stick with my definition.&lt;/p&gt;

&lt;p&gt;So why do I believe that someone who calls themselves a web developer should be able to manage everything? And I do mean everything - making the website, making the web application, managing servers, managing security, managing the database, managing the scaling, etc. If you really think about it your computer programs are only useful if people can use it. People write commands, or click buttons, or fill a form, and your computer program does something useful with that. Input in, output out.&lt;/p&gt;

&lt;p&gt;Your web application could be anything - a search engine, a social network, a URL shortener, a blog, anything - but what's the point if people can't use it? That's where websites come in. But you gotta know how to make one, and preferably how to make one well. So what's the point of knowing how to build web applications if you can't build an interface for it?&lt;/p&gt;

&lt;p&gt;Following that same train of thought, what's the point of knowing how to build web applications if you don't know how to deploy them and manage them and secure them? You built it so somebody could use it right?&lt;/p&gt;

&lt;p&gt;I will not deny that it is quite the task to be familiar, let alone proficient, with any one of these but that should be the goal. I am a web developer, right?&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>frontend</category>
      <category>backend</category>
      <category>fullstack</category>
    </item>
    <item>
      <title>Do You Really Need To Build A Web Server?</title>
      <dc:creator>Victor Basumatary</dc:creator>
      <pubDate>Wed, 29 Apr 2020 16:03:37 +0000</pubDate>
      <link>https://dev.to/vlence/do-you-really-need-to-build-a-web-server-19i4</link>
      <guid>https://dev.to/vlence/do-you-really-need-to-build-a-web-server-19i4</guid>
      <description>&lt;p&gt;Let's begin with a simple definition of a web server:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;A web server is a computer program that listens for HTTP requests and responds with corresponding HTTP responses.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;When I first started to learn about web development I learned about HTML, CSS, and our good friend JavaScript. Once I was comfortable with those I began reading about PHP and what I could do with it. It seemed interesting. I installed &lt;a href="https://www.apachefriends.org/index.html"&gt;XAMPP&lt;/a&gt; on my Windows machine and started learning. All I really knew was I had Apache HTTP Server and somehow this ran my PHP which produced my HTML.&lt;/p&gt;

&lt;p&gt;Fast forward a few years and I am often building web applications using Node.js.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight console"&gt;&lt;code&gt;&lt;span class="gp"&gt;$&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;npm init &lt;span class="nt"&gt;-y&lt;/span&gt;
&lt;span class="gp"&gt;$&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;npm &lt;span class="nb"&gt;install &lt;/span&gt;express &lt;span class="nt"&gt;--save&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A lot of people like to use &lt;a href="https://expressjs.com"&gt;Express.js&lt;/a&gt; because it's easy to understand and get started with. I was building web servers day in and day out. I don't intend to bash Express.js or Node.js but when I look back I think I've wasted quite a bit of time.&lt;/p&gt;

&lt;h1&gt;
  
  
  History
&lt;/h1&gt;

&lt;p&gt;It's the early 1990s and Sir Tim Berners-Lee debuted the World Wide Web. Genius contraption. You have a web browser on the client, a web server somewhere in the network, and these two speak with each other using HTTP over TCP/IP. Back then websites were really simple in that they were all static - hand written HTML and CSS.&lt;/p&gt;

&lt;p&gt;In maybe two years after the WWW was debuted hundreds, if not thousands, of web servers were out in the wild - mostly universities. With increased usage came some new requirements. One such requirement was the ability to display data in existing systems as HTML documents. Many people wrote their own web servers to solve this - a request would come in and the web server would compile the information from their systems to produce an HTML document and return it. These solutions worked but they weren't portable.&lt;/p&gt;

&lt;p&gt;Soon enough we had a lot of web servers that did their own thing to produce dynamic output. It became apparent that you needed a standard for this and so CGI was born. CGI is short for Common Gateway Interface. Here's how it works:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Web server receives HTTP request.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;If response needs to be generated dynamically then run CGI script as a new process. Forward HTTP request and other information to script as environment variables.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;CGI script generates the HTTP response, headers and body, and writes it to standard output.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Web server picks up the response from standard output of the CGI script and forwards it.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;CGI is simply a protocol. The CGI script can be anything really - a shell script, a C program, a PHP script, anything. The CGI specification used C as an example. This was a game changer because we now had a way to generate dynamic content and how we did it did not depend on the web server. Soon enough web servers like the Apache HTTP Server were born. This was around the mid '90s.&lt;/p&gt;




&lt;p&gt;CGI was and is a great idea. It very cleanly decouples the handling of an HTTP request from generating a dynamic HTTP response, and it is also very simple to use. There is one drawback though - it isn't scalable. Whenever you make a request that runs a CGI script, the web server will spawn a new process to run the CGI script. So if you make a 100 requests you are spawning a 100 processes for those requests. More often than not, the overhead of creating processes outweighs the cost of generating the response. Because the lifetime of a process is the lifetime of the request itself, applications built as CGI scripts can't reuse resources like database connections when new requests come in. This makes applications slow as well.&lt;/p&gt;

&lt;p&gt;The solution to this problem is rather obvious: instead of making a new process to handle every request, make one process that handles all requests. But how do you do it in this post-CGI world? FastCGI. Here's how FastCGI works:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Web server receives HTTP request.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;If response needs to be generated dynamically then forward HTTP request to FastCGI server via Unix domain sockets/named pipes/TCP connection.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;FastCGI server generates the HTTP response, headers and body, and sends it back via Unix domain sockets/named pipes/TCP connection.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Web server forwards the HTTP response.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The FastCGI server is your application. Just like in the case of CGI, the web server forwards the HTTP request and other information to your application but it does this over a Unix domain socket, or a named pipe, or a TCP connection instead. This allows your application to stay running even after a request has been served. And again just like in the case of CGI, it doesn't matter how you implement a FastCGI server because FastCGI is just a protocol. FastCGI allowed people to write more efficient applications and have more efficient web servers in general.&lt;/p&gt;

&lt;p&gt;CGI and FastCGI are milestones in the development of web technologies. There are other protocols and solutions besides these two but they hold a special status being one of the first solutions for these problems.&lt;/p&gt;

&lt;h1&gt;
  
  
  Today
&lt;/h1&gt;

&lt;p&gt;The history of the WWW is just around 30 years as of April 2020. Most of the things I talked about in the previous section is recent memory and the ideas discussed are still very relevant. In fact a lot of applications and businesses are still running just fine with them.&lt;/p&gt;

&lt;p&gt;Web servers are a little more than the simple definition I use in the beginning of this article. They parse different media types, compress responses, handle auth, do redirects, etc. Web servers like Apache HTTP Server and Nginx are general purpose. They will almost always meet all your requirements, including your performance requirements. They'll serve your static content and if you need to send back dynamic content, you can hook up these web servers to your application using protocols like CGI and FastCGI. So then, do you really need to build your own web server? Do I?&lt;/p&gt;

&lt;p&gt;I cannot answer that question because all this while I've been building my own web server using Node.js for every single web application I've made. But I think the answer is no - no, I do not need to build my own web server for the vast majority of applications that I will build in my lifetime.&lt;/p&gt;

&lt;p&gt;What do you think? Leave your thoughts as a comment.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>www</category>
      <category>apache</category>
      <category>nginx</category>
    </item>
    <item>
      <title>Do You Really Need JavaScript?</title>
      <dc:creator>Victor Basumatary</dc:creator>
      <pubDate>Tue, 21 Apr 2020 13:46:54 +0000</pubDate>
      <link>https://dev.to/vlence/do-you-really-need-javascript-3d7a</link>
      <guid>https://dev.to/vlence/do-you-really-need-javascript-3d7a</guid>
      <description>&lt;p&gt;There's a new JavaScript library/framework released everyday and your &lt;code&gt;node_modules/&lt;/code&gt; directory is only becoming more denser than a black hole, but do you really need that JavaScript running in your website? Do you need JavaScript at all?&lt;/p&gt;

&lt;p&gt;The examples that I am going to show you in this article were valid as of 21 April 2020 (Indian Standard Time).&lt;/p&gt;

&lt;h1&gt;
  
  
  1. swiggy.com and google.com
&lt;/h1&gt;

&lt;p&gt;Swiggy is a food delivery company and application here in India. Here's how the application works with JavaScript enabled.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--hvUORZ7c--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/is55cmulurxai7t0y69j.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--hvUORZ7c--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/is55cmulurxai7t0y69j.png" alt="Selecting a delivery location in swiggy.com." width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--yRMc4tSM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/vng0c9c4k39g5vc3i1k3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--yRMc4tSM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/vng0c9c4k39g5vc3i1k3.png" alt="Selecting a nearby restaurant in swiggy.com." width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There's a giant textbox where you enter your location. You are then presented with a list of locations that Swiggy delivers to near you. After selecting an appropriate location you are redirected to a page with a list of restaurants that service the selected location.&lt;/p&gt;

&lt;p&gt;Here's what happens when JavaScript is disabled.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--YSOIEDVy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/4132fgpk0163lbd3eg3i.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--YSOIEDVy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/4132fgpk0163lbd3eg3i.png" alt="swiggy.com cannot suggest delivery locations with JavaScript disabled." width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You still get the same page as we did with JavaScript enabled but this time Swiggy cannot provide you with a list of suggested delivery locations. Furthermore, you cannot progress further in the app. I'm left hungry if I have JavaScript disabled.&lt;/p&gt;

&lt;p&gt;Let's now take a look at how we use Google with JavaScript enabled.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--1TBZ093L--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/r06zopd8v6imgd39mwdq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--1TBZ093L--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/r06zopd8v6imgd39mwdq.png" alt='Searching for the term "software engineering" on google.com' width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--2Lc5yaE7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/k5729ywb4m3m1zlz3bka.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2Lc5yaE7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/k5729ywb4m3m1zlz3bka.png" alt='Search results of the term "software engineering" on google.com' width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We've all used Google right? Now let's see how Google behaves with JavaScript disabled.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--vYnYJr5P--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/md8c7fxiwki2kbj31e9r.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vYnYJr5P--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/md8c7fxiwki2kbj31e9r.png" alt='Searching for the term "software engineering" on google.com' width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--TJYJqBuR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/lb9p3v72uz1nntxtxy24.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--TJYJqBuR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/lb9p3v72uz1nntxtxy24.png" alt='Search results of the term "software engineering" on google.com' width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We can still get search results with JavaScript disabled. You may have noticed that Google could not provide you with autocomplete suggestions.&lt;/p&gt;

&lt;h3&gt;
  
  
  Observations
&lt;/h3&gt;

&lt;p&gt;Google used JavaScript to &lt;em&gt;enhance&lt;/em&gt; the experience of searching, with autocomplete suggestions and a better UI, among other things. The core feature of Google - searching - does not depend on whether we have JavaScript enabled or not.&lt;/p&gt;

&lt;p&gt;Swiggy relies on JavaScript for its core feature - searching for restaurants around you - and so fails to work when JavaScript is disabled. Does Swiggy really need JavaScript to provide that feature to you? In my opinion, no. On the home page you need to enter a delivery location. This delivery location can be sent to the backend application which can use this along with other information like the IP address to find a list of areas that the customer might be in. The application selects the best choice and presents restaurants around that area along with the other possible locations in case the customer is elsewhere and the application made a mistake.&lt;/p&gt;

&lt;h1&gt;
  
  
  2. angular.io and reactjs.org
&lt;/h1&gt;

&lt;p&gt;Both Angular and React are used to build Single Page Applications and if you're like me, you keep their documentation open at all times when using them. Here's Angular's and React's websites with JavaScript enabled.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--HkVbrW4x--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/38vuhhzqc9kh34k0q2kh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--HkVbrW4x--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/38vuhhzqc9kh34k0q2kh.png" alt="angular.io with JavaScript enabled." width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--3a7XSaLH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/8e8jsbgpet90zqk425hd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--3a7XSaLH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/8e8jsbgpet90zqk425hd.png" alt="reactjs.org with JavaScript enabled." width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And here they are with JavaScript disabled.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--gKK3sXM1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/900lgqfie10wusbx7yrn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--gKK3sXM1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/900lgqfie10wusbx7yrn.png" alt="angular.io with JavaScript disabled." width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--fElI9mKQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/1yd68td8ar22ujomdk80.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fElI9mKQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/1yd68td8ar22ujomdk80.png" alt="reactjs.org with JavaScript disabled." width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Angular's website only says "This website requires JavaScript" when JavaScript is disabled.&lt;/p&gt;

&lt;h3&gt;
  
  
  Observations.
&lt;/h3&gt;

&lt;p&gt;Do you really need JavaScript to read some documentation? No. angular.io is completely unusable when JavaScript is disabled.&lt;/p&gt;

&lt;p&gt;reactjs.org will do a full page reload when you have JavaScript disabled, otherwise it won't. I'm pretty sure there are other features missing in the website with JavaScript disabled but this is the most glaring one to me. Again, JavaScript was used to only &lt;em&gt;enhance&lt;/em&gt; the experience of the user.&lt;/p&gt;

&lt;h1&gt;
  
  
  Final Words
&lt;/h1&gt;

&lt;p&gt;You don't need JavaScript, for a majority of the applications out there, to deliver the core feature(s) of your application/website. Websites should be built with the assumption that JavaScript is unavailable. If JavaScript is used, it should be used to enhance the user's experience. The experience should not depend on JavaScript being available.&lt;/p&gt;

&lt;h3&gt;
  
  
  Why Should I Care
&lt;/h3&gt;

&lt;p&gt;Your user may not be able to run JavaScript for a variety of reasons:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The user agent may fail to download the JavaScript after downloading the HTML&lt;/li&gt;
&lt;li&gt;The user may have disabled JavaScript&lt;/li&gt;
&lt;li&gt;The user agent may not support JavaScript&lt;/li&gt;
&lt;li&gt;The user agent may not support the version of JavaScript you used&lt;/li&gt;
&lt;li&gt;And a host of other things&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>html</category>
      <category>css</category>
    </item>
  </channel>
</rss>
