DEV Community: Mohammad S

How do DNS work?

Mohammad S — Sat, 10 Jul 2021 02:55:01 +0000

Having been using the internet for a pretty lumpsum part of my life, the how's of how the internet works has always been intriguing to me. Skimming through YouTube videos on the same, yielded in a new word called DNS. So what exactly is DNS? And how does it play a role in the how's of the internet?

DNS? Well, it stands for Domain Name System. Let's dwell more into it.

We know that computers process through numbers. We visit a website by typing in words in the address bar. This gets converted into series of numbers called IP addresses by the DNS.

Browser Cache

DNS first looks up the browser's cache to see if it can find the website, and then proceeds to check up on the system cache of the OS.

Resolver

Now, if we DNS can still not find the website, it proceeds to send a request to the ISP (Internet Service Provider). Here, there is a resolver server which tends to search through it's cache. It then processes a request to the root server. The root server knows to locate the TLD (Top Level Domain) such as .COM.

But what if it it doesn't have the answer?

Root Server

The browser cache saves the information request, so that it does not need to ask the root server again. There are about 13 servers stationed all over the globe and the root servers sit on the top of the DNS hierarchy. These are operated by 12 different organizations and their name ranges from [letter].root-servers.net where the [letter] ranges from A to M.

There are plenty other organizations as well who provide physical servers distributed across. So fret not, the internet isn't solely dependent on the 13 servers alone.

Oh and the root server forwards the request to the other servers.

TLD (Top Level Domains)

TLD's belong the Internet Corporation for Assigned Names and Numbers (ICANN). Of which .COM is the earliest, dates back to 1985. These are available in country codes and 2 native languages as well!

Ok, but what did the other server respond to the request? Well, it seems to not have the website, but it gives the 'name servers'. So, now we have the authoritative name servers for our request.

Domain Registrar

The website domain can be purchased through the various domain registrars available (eg: goDaddy, etc.,). These registrar's communicate to the TLD's of the authoritative domain servers.

This information is stored with multiple domain registrars, for fast accessibility and safety during a crash or failure. You can run a WHOIS query and find the authoritative name server for your website.

Oh, and finally the domain registrar gives the IP address for the requested website. That's it.

Summary

Browser cache - OS cache - Request to ISP - Resolver server cache - Root server locates the TLD - Requests other servers - Receives authoritative name server - Domain registrar - IP address - back to the browser in a whoosh!

Hope this was simple!

Thank you for reading! :) Also, I document my journey and experiences on Twitter and LinkedIn.

Build a Stock Market App with React

Mohammad S — Sat, 06 Mar 2021 11:11:17 +0000

Stock Market API and ReactJS together? <3

This is a very basic application to the world of REST APIs. I strongly feel you will get the basic hang of using REST APIs after going through this blog.

I'm using codesandbox.io for building this app.

Here's a peek into the final output of this application:

Aight! Let's get into cooooddiiinngg.

Visualization

Let us first visualize what we are going to build exactly?

Setting up the JSX

        <header>
          <h2>Stock Calculator</h2>
        </header>

Hurray! Our header is set. Ok, let me bring down my excitement and let's get our hand's dirty now.

Let us make the rest of the JSX elements now.

       <input
         placeholder="Stock Name"
         onInput={(event) => setStock(event.target.value)}
        />

        <input
          placeholder="Purchased Price"
          onInput={(event) => setPurchasedPrice(event.target.value)}
        />

        <input
          placeholder="Quantity Purchased"
          onInput={(event) => setQuantityPurchased(event.target.value)}
        />

        <button onClick={clickHandler}
          Submit
        </button>

        <p id="output"> 
         {output}
        </p>

Now you'll probably land up with tons of error messages, as we didn't import { useState } and we didn't initialize the useState for the respected variables.

So let us do that? :D

  const [stock, setStock] = useState("");
  const [purchasedPrice, setPurchasedPrice] = useState("");
  const [quantityPurchased, setQuantityPurchased] = useState("");
  const [output, setOutput] = useState("");

Integrating with the API

The API that we use for the purpose of this blog is from finnhub.io. There is no specific reason for choosing this particular API, this was the one that I found first and it was easy enough for me to integrate it! :D

Getting the API key/Token from finnhub
Finnhub.io --> Get Free API key --> Copy the API key

Once that is done, you can proceed to Finnhub.io --> Documentation --> Stock Price --> Quote

You can refer to the documentation, if you have any doubts.
Anyways enough talk, let's get to coding! :)

  const url = "https://finnhub.io/api/v1/quote?";

  function stockURL(stock) {
    let name = stock.toUpperCase();
    return url + "symbol=" + name + "&token=c07um4f48v6uu9ck9l4g";
  }

We defined the URL of the API, then created a function that returns to a URL with the name of the stock that we want, along with the token key.

Now let's get into the Fetch Call.

// clickHandler() is the function that gets called when we press the Submit button

function clickHandler() {
    // Point 1
    fetch(stockURL(stock))
      //Point 2
      .then((response) => response.json())
      //Point 3
      .then((event) => {
        let currentPrice = event.c;
        //Point 4
        let totalPastPrice = parseInt(purchasedPrice) * parseInt(quantityPurchased);
        let totalCurrentPrice = parseInt(currentPrice) * parseInt(quantityPurchased);

        let balance = totalCurrentPrice - totalPastPrice;

        // Point 5
        if (balance > 0) {
        let percentage = (
            (parseInt(quantityPurchased) / parseInt(purchasedPrice)) *
            100
          ).toFixed(2);
          setOutput(
            `You made a profit of ${percentage} which amounts to $ ${balance} `
          );} 


       else if (balance < 0) {
          var percentage = (
            (parseInt(purchasedPrice) / parseInt(quantityPurchased)) *
            100
          ).toFixed(2);
          setOutput(
            `You made a loss of ${percentage}% which amounts to $${-balance} `
          );} 


     else setOutput("You made neither a profit nor a loss.");
      })

      //Point 6
      .catch((event) => alert("There is something wrong with the server"));}

The fetch calls a function stockURL, with an argument of "stock". The value of "stock" is received from the user through the input box. The stockURL function then returns a URL consisting of the name of the stock and the token key.
Now, we tell the fetch call to transform all the data from the returned URL into json format.
From the given json format, we take the data of "c" alone as it indicated to the "current price" of the stock. You can return other values as well. (Refer documentation for other values)
We calculate the totalPastPrice, totalCurrentPrice based on the input received from the user (setPurchasedPrice & setQuantityPurchased has already been done when the user types in the input box). Then the balance is calculated.
If the balance is positive ie. the user has made a profit. We find the percentage. The parseInt is used for converting the string to a number, and toFixed(2) is used for rounding & limiting the number of decimal digits to 2.
Now the setOutput ie. Display to the output box. Similar process occurs for balance negative and zero.
If there's any issue with the server or the server is over-loaded, an alert box shows up to the user indicating the same.

Hurrayyy! That's it.

Now, you can add in the CSS and style it as you like. Maybe even add so that the user can select the stock from the list.

Click here for the link to the live demo.

Disclaimer: I am a complete newbie into the web dev world, so if I haven't practiced the best-practices - do let me know & I'll be more than glad to correct myself. :D

I document my journey and experiences on Twitter and LinkedIn.

Create Drop-Down Menus with Plain CSS

Mohammad S — Tue, 02 Mar 2021 05:00:33 +0000

Dropdown menus are a great way of including a long list of links without cluttering up your page. The issue though is that they can be hard to style, but look quite ugly if you don’t.

I have tried my level-best to keep the code as short & simple as possible. This is built with plain CSS and HTML only. I have not used any library.

Before we begin, let me show you a glimpse of what we are going to create.

Creating the HTML Part

Breaking down the components:

Now we can move along to create the HTML elements.

      <nav id="nav-element"> 
        <button id="button-dropdown">Dropdown </button>
        <div id="div-products">
          <a href="">Product 1 </a>
          <a href="">Product 2 </a>
          <a href="">Product 3 </a>
          <a href="">Product 4 </a>
          <a href="">Product 5 </a>
        </div>
      </nav>

Adding the CSS:

Let us first add CSS to the "nav" tag.

      /* <nav> element */
      #nav-element {
        position: relative;
        display: inline-block; 
      }

Note: In display, Use inline-block as only when we hover in-line, the drop-down appears. Do not use block element, as then the drop-down will appear when we hover around the block.

Adding CSS to the "button" tag.

      /* <button> element */
      #button-dropdown {
        width: 10rem;
        margin: auto;
        padding: 0.5rem 0rem;
        background-color: #3b70ff;
        color: white;
        border: 1px solid #3b70ff;
      }

Adding CSS to "div" tag.

      /* <div> element */
      #div-products {
        display: none;
        width: 10rem;
        margin: auto;
        color: #3b70ff;
        border: 1px solid #3b70ff;
      }

Note: When creating these components initially, set "display: block", else you will not be able to see the output.

Adding CSS to "a" tag.

      /* <a> element */
      #div-products a {
        display: block;
        text-decoration: none;
        padding: 0.5rem 0rem;
      }

Note: We use "block" as "a" tag is an in-line element ie. the output of all the "a" tags are in the same line.

Hurray! Now you are 95% done with the work. All that is remaining is the hover features. Let us get right into it!

Adding the hover feature:

When we hover over the "nav" element, the display of "div" tag should appear ie. drop-down menu should appear.

      #nav-element:hover #div-products {
        display: block;
      }

Another feature:

When we hover over the "a" elements ie. Product 1, Product 2, etc., we want a change in background color & color of the text.

      #div-products a:hover {
        background-color: #3b70ff;
        color: white;
      }

Aaaanddd, we are done. Do try the code and let me know if you found it useful.

Here's a link to the live demo: https://71cqf.csb.app/

Disclaimer: This is my first blog into the tech space. I am a complete newbie into the web dev world, so if I haven't practiced the best-practices - do let me know & I'll be more than glad to correct myself. :D

I document my journey and experiences on Twitter and LinkedIn.