DEV Community: Nivesh Saharan

Powerful ways to Supercharge your NGINX server and improve its performance

Nivesh Saharan — Fri, 07 Aug 2020 12:50:08 +0000

You don’t need to be a DevOps expert to make the optimizations explained in this post. Anyone who is new to web applications and is using NGINX can use these steps. All you have to do is edit your NGINX config file.

Read full post here https://nive.sh/powerful-ways-to-supercharge-your-nginx-server-and-improve-its-performance

Javascript - A Practical guide to use LocalStorage and SessionStorage

Nivesh Saharan — Sun, 24 May 2020 13:15:59 +0000

SessionStorage

SessionStorage is a simple key/value pair storage and only the string type of data can be stored. It is a tab specific storage and the data stored in SessionStorage will be lost when that tab is closed. We can store upto 5MB of data in this storage. Data stored in SessionStorage cannot be accessed from another tab.

LocalStorage

LocalStorage is also a simple key/value pair storage and only the string type of data can be stored. The data stored in LocalStorage is shared between all tabs for same domain. There is no expirations for the data in LocalStorage so it is always there even if you close the tabs or restart your system.

Check if the browser supports it

if(typeof(Storage) !== void(0))
{
  // Your browser support localStorage and sessionStorage
}
else{
  // Sorry! No web storage support..
}

Storage API

SessionStorage and LocalStorage both has same API. Both storage objects provide same methods and properties. Following examples shows the API usage for localStorage and since they use same API, feel free to replace localStorage with sessionStorage

Store an Item

// Store a simple string
localStorage.setItem('my-key', 'my-value');

// Store an object (Must be converted to string)
localStorage.setItem('my-object-key', JSON.stringify({key: 'value'}));

Get an Item from Storage

localStorage.getItem('my-key'); // Returns string: 'my-value'

localStorage.getItem('my-object-key'); // Returns string: '{"key":"value"}'

JSON.parse(localStorage.getItem('my-object-key')); // Returns object: {key:"value"}

Remove an item

localStorage.removeItem('my-key');

The number of stored items

localStorage.length // Return count of items stored

Get the key on a given position

localStorage.key(0); // Returns key of the item at very first position

Get all keys

Object.keys(localStorage); // Returns array of all keys

Get all items

for(let i = 0; i < localStorage.length; i++){
  const key = localStorage.key(i);
  const value = localStorage.getItem(key);
  console.log(key, value)
}

Remove everything from storage

localStorage.clear(); // Removes everything from localStorage

Storage Event

When the data gets updated in LocalStorage or SessionStorage, the storage event is triggered with following properties:

key - The name of key that was changed. (It will be null if .clear was called)
oldValue - The old value of changed key. (It will be null if it is newly added)
newValue - The new value of changed key. (It will be null if the key was removed)
url - The URL where the change happened
storageArea - localStorage object or sessionStorage object depending on where it was updated.

Storage event is triggered on all window objects of same domain excepts the one that triggered it.

Listen for events

window.addEventListener('storage', function(e){
  console.log(e.key, e.oldValue, e.newValue, e.url, e.storageArea)
});

Storage event triggered when the value is actually changed. Setting same value won't trigger the event.

Listen for a specific key change

window.addEventListener('storage', function(e){
  if(e.key === 'my-key')
  {
    // Do your thing
  }
});

Things to remember

LocalStorage and SessionStorage allow to store key/value (String only).
Storage event triggers on setItem, removeItem, clear calls.
The event triggers on all window objects where the storage is accessible, except the one that caused it.
Refreshing the page doesn't remove data from SessionStorage
Closing the browser or rebooting your system doesn't remove data from LocalStorage
Do not store sensitive user information in LocalStorage or SessionStorage

This was originally posted on my blog, check it out here: https://nive.sh/practical-guide-to-use-localstorage-and-sessionstorage

Javascript - A Practical guide to use Fetch API

Nivesh Saharan — Sat, 23 May 2020 09:50:45 +0000

Fetch is a promise based Javascript API for making asynchronous HTTP requests. It is a clean, simple, powerful and a flexible API to get/send data from/to a server.

A simple GET request example using Fetch API

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(function(response) {
    //
  })
  .catch(function(error) {
    // 
  });

The Response returned by the fetch() method contains the information about the request and the response of the network request including headers, status code, and status message. The body of Response has a few methods:

clone() - As the method implies this method creates a clone of the response.
redirect() - This method creates a new response but with a different URL.
arrayBuffer() - In here we return a promise that resolves with an ArrayBuffer.
formData() - Also returns a promise but one that resolves with FormData object.
blob() - This is one resolves with a Blob.
text() - In this case it resolves with a string.
json() - Lastly we have the method to that resolves the promise with JSON.

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(function(response) {
    // get response headers
    console.log(response.headers.get('content-type'));

    console.log(response.headers.get('expires'));

    // HTTP response status code 
    console.log(response.status);

    // shorthand for `status` between 200 and 299 
    console.log(response.ok); 

    // status message of the response e.g. `OK`
    console.log(response.statusText);

    // check if there was a redirect
    console.log(response.redirected);

    // get the response type (e.g., `basic`, `cors`)
    console.log(response.type);

    // the full path of the resource
    console.log(response.url);
  })
  .catch(function(error) {
    // 
  });

Here is how you can use Fetch to request JSON data from server:

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(function(response){
    return response.json();
  })
  .then(function(data) {
    // data here is JSON object
    console.log(data);
  })
  .catch(function(error) {
    // 
  });

How to use Fetch API to send POST requests:

Fetch is not just for GET requests. It can be used for all other request types like POST, PUT, PATCH, DELETE etc. Here's an example of POST type request:

fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify({
      title: 'foo',
      body: 'bar',
      userId: 1
    })
  })
  .then(function(response){
    return response.json();
  })
  .then(function(data) {
    // data here is JSON object
  })
  .catch(function(error) {
    // 
  });

Make sure you Stringify your JSON data before sending to server.

Set Headers for Fetch request

Setting up headers for your request is pretty easy. One of the easiest way is to pass a headers objects along with the request.

fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify({
      title: 'foo',
      body: 'bar',
      userId: 1
    }),
    headers: {
      "Content-type": "application/json"    
    }
  })
  .then(function(response){
    return response.json();
  })
  .then(function(data) {
    // data here is JSON object
  })
  .catch(function(error) {
    // 
  });

Cookies

Fetch doesn't send cookies by default and if you need to send cookies along with the request, you will have to enable it explicitly. Here's how:

fetch('https://jsonplaceholder.typicode.com/posts', {
    credentials: 'include'
  })
  .then(function(response) {
    //
  })
  .catch(function(error) {
    // 
  });

Error Handling

We can use the catch() method of the promise to intercept any error that is thrown during the execution of the request. However, no error will be thrown if the request hits the server and comes back, regardless of what response was returned by the server. The promise returned by the fetch() doesn't reject HTTP errors even if the HTTP response code is 404 or 500.

fetch('https://jsonplaceholder.typicode.com/some-invalid-path', {
    credentials: 'include'
  })
  .then(function(response) {

    if(response.ok)
    {
      return response.json();
    }

    return Promise.reject(response.status);
  })
  .catch(function(error) {
    // 
    console.error(error)
  });

This was originally posted on my blog, check it out here: https://nive.sh/practical-guide-to-use-fetch-api