{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/120","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"The acronym for Vim is Vi IMproved. Written by Bram Moolenaar, it is a free and open-source text editor. It was first released for UNIX…","fields":{"slug":"/engineering/vim-getting-started/"},"html":"<p>The acronym for Vim is Vi IMproved. Written by <a href=\"https://en.wikipedia.org/wiki/Bram_Moolenaar\">Bram Moolenaar</a>, it is a free and open-source text editor. It was first released for UNIX variants in 1991, and its primary purpose was to develop the Vi editor, which was released back in 1976.</p>\n<p>Vim is Vi's newest and most popular reincarnation that supports both text and graphical interfaces and is supported on any known platform.</p>\n<p>The issue with learning Vim is not that it's challenging to do. It's that you have to continue to do it. This guide aims to break the loop so that for the last time, you can learn it.</p>\n<p>The purpose of this tutorial is to take you through every step of progress from understanding the philosophy of Vim. In short, in a way that sticks with you for a lifetime, we're going to master Vim.</p>\n<p>Let's start off!</p>\n<h2 id=\"what-is-vim\" style=\"position:relative;\"><a href=\"#what-is-vim\" aria-label=\"what is vim permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What is Vim?</h2>\n<p>Vim is a text editor for Unix that comes with Linux, BSD, and macOS. It is known to be fast and powerful, partly because it is a small program that can run in a terminal (although it has a graphical interface). It is mainly because it can be managed entirely without menus or a mouse with a keyboard.</p>\n<p>For the following five reasons, I feel people should use Vim:</p>\n<ol>\n<li>It's omnipresent. You don't have to think about learning about several boxes with a new editor.</li>\n<li>It is highly scalable. You can use it only to edit configuration files or become your entire forum for writing.</li>\n<li>It has a shallow memory footprint.</li>\n<li>It's command-centered. With a few commands, you can perform complex text-related tasks.</li>\n<li>It is highly configurable and uses simple text files to store its settings.</li>\n</ol>\n<h2 id=\"why-use-vim\" style=\"position:relative;\"><a href=\"#why-use-vim\" aria-label=\"why use vim permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Why Use Vim?</h2>\n<p>In all POSIX systems, Vim is the default fallback editor. Vim is sure to be open, whether you have just installed the operating system, or you have booted into a minimal system repair environment, or you are unable to access any other editor. While you can switch out other tiny editors on your systems, such as GNU Nano or Jove, it's Vim that's all but guaranteed to be on every other system in the world.</p>\n<p>In short, I think competence with Vim should be considered the way you view competence with your native language, or simple maths, etc. In technology, so much begins with understanding your editor.</p>\n<p>Also, It is <strong>extremely customizable</strong> and you can adapt it to your way of coding and your way of doing things.\nTo give you a taste of vim , below are a few commands frequently used to code at lightning speed:</p>\n<ul>\n<li>hjkl : move the cursor around to left, down, up, and right respectively.</li>\n<li>7j : move 7 lines down.</li>\n<li>w : move a word forward</li>\n<li>ctrl + f : move down a page</li>\n<li>ctrl + b : move up a page</li>\n<li>gg : move to the top of the document</li>\n<li>G : move to the bottomost of the document</li>\n<li>dw : delete a word</li>\n<li>d6w : delete 6 words</li>\n<li>dt> : delete till  <code>></code></li>\n<li>di] : delete everything inside <code>[ ]</code></li>\n<li>dd : delete whole line</li>\n<li>4dd : delete 4 lines</li>\n<li>yy : yank a line ( yank is copy )</li>\n<li>cc : change a line ( change is delete and go in insert mode )</li>\n<li>cap : change a paragraph</li>\n<li><code>.</code> : repeat last command</li>\n<li>f' : find first occurance of <code>'</code></li>\n<li>f'ci'hello : _find the next  <code>'</code> then change everything inside <code>'</code> for <code>hello</code></li>\n</ul>\n<p>The list goes on and on... </p>\n<p>Basically we have standard keybindings like d for delete, c for change, f for find etc. and we can pair them with numbers to repeat that action n number of times. Moreover doubling a command like so <code>yy</code> makes the command operate on the entire line.</p>\n<p>So to sum up,</p>\n<blockquote>\n<p>Vim is for <strong>programmers who want to raise their game</strong>. In the hands of an expert, It shreds text at the speed of thought.</p>\n</blockquote>\n<h4 id=\"how-to-use-vim\" style=\"position:relative;\"><a href=\"#how-to-use-vim\" aria-label=\"how to use vim permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>How to use Vim</h4>\n<p> Well, there is a learning curve, but it's worth it. Although this steep curve is exaggerated in the online world and the <strong>quitting vim joke</strong> is getting very old (It's:q btw).</p>\n<p> Install Vim <code>sudo apt-get vim or pacman -S vim</code> for Linux user and type <code>vim &#x3C;filename></code> in your terminal. Press <code>i</code> to go to insert mode. Type some gibberish. Press <code>:wq</code> to save and quit . <code>:q!</code> to quit without saving.</p>\n<p> First of all, don't get disheartened when you see VIM for the first time, it's known to make a <strong>horrible first impression.</strong> We'll learn to customize it later in the blog.</p>\n<p> <img src=\"/30e4bc97b173caff9cce44962cb4a78b/BadVim.webp\" alt=\"BadVim\"></p>\n<p> To get started, get your hands dirty on <strong>vimtutor</strong> . It's a 20-30 minute vim tutorial which teaches you all the basics. Just type <code>vimtutor</code> in your terminal (in a machine where you have vim installed) to open it.</p>\n<p><strong>Try  <a href=\"https://vim-adventures.com/\">Vim Adventures</a></strong>. An interactive game that teaches you vim skills in a step by step manner and lets you unlock new abilities after you've proved your worth with the previous ones.</p>\n<p> Just get started with it . <strong>Learn as you go</strong> . You can always refer to the <a href=\"https://vim.rtorr.com/\">Vim CheatSheet</a> to get better. Practice makes a man perfect. Watch screencasts if that's helpful (was helpful to me).</p>\n<h2 id=\"how-do-i-configure-my-vim-\" style=\"position:relative;\"><a href=\"#how-do-i-configure-my-vim-\" aria-label=\"how do i configure my vim  permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>How do I configure my Vim ?</h2>\n<p>The best way to configure your Vim is through <code>.vimrc</code> file, which is hidden inside your home directory. Open a terminal and type <code>vim ~/.vimrc</code> to open your vimrc file using vim. Cool huh? Using vim to configure vim ..no? Nevermind!\nHere you can define your keybindings, set themes, install plugins etc.</p>\n<p>Here is an example of a custom keybinding\n<code>map &#x3C;C-n> :NERDTreeToggle&#x3C;CR></code>\nYou can check out this <a href=\"https://hea-www.harvard.edu/~fine/Tech/vi.html\">article</a> on keybindings and how to use them.</p>\n<p>The easiest way to download and manage plugins for vim is by using a plugin manager. There are quite a few <a href=\"https://github.com/tpope/vim-pathogen\">vim-pathogen</a> , <a href=\"https://github.com/VundleVim/Vundle.vim\">Vundle.vim</a> , <a href=\"https://github.com/junegunn/vim-plug\">Vim-plug</a> etc.\nVim-plug being my favourite. Installations and usage for each plugin manager can be found in their respective repositories.</p>\n<p>I personally like to call all my plugins in a separate file and link that file to my vimrc. Paste this line in your vimrc at the top if you want to do the same <code>source ~/.vim/plugin/plugins.vim</code>\nIn your plugins.vim file you can install different plugins like this:-</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">call plug#begin(&#39;~/.vim/plugged&#39;)</span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\">Plug &#39;scrooloose/nerdtree&#39;</span>\n<span class=\"grvsc-line\">Plug &#39;moll/vim-node&#39;</span>\n<span class=\"grvsc-line\">Plug &#39;yegappan/mru&#39;</span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\">call plug#end()</span></code></pre>\n<p>The first and last lines are for vim-plug to know what plugins are to be installed. The lines beginning with <code>Plug</code> is to install that particular plugin.</p>\n<p>Now just reload .vimrc (or quit vim and re-enter) and <code>:PlugInstall</code> to install plugins.</p>\n<h2 id=\"what-are-some-good-plugins-for-vim\" style=\"position:relative;\"><a href=\"#what-are-some-good-plugins-for-vim\" aria-label=\"what are some good plugins for vim permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What are some good plugins for Vim?</h2>\n<p>Glad you asked because Vim is no fun without plugins made by the awesome open source community.\nHere are some good plugins you should definitely install. Just search these on GitHub in case you wanna know more about them or their usage.</p>\n<ul>\n<li>scrooloose/nerdtree</li>\n<li>alvan/vim-closetag</li>\n<li>vim-scripts/vim-auto-save</li>\n<li>airblade/vim-gitgutter</li>\n<li>ervandew/supertab</li>\n<li>vim-airline/vim-airline</li>\n<li>SirVer/ultisnips</li>\n<li>honza/vim-snippets</li>\n<li>dense-analysis/ale</li>\n<li>tpope/vim-repeat</li>\n<li>ap/vim-css-color</li>\n<li>jiangmiao/auto-pairs</li>\n<li>tmhedberg/matchit</li>\n<li>kana/vim-textobj-user</li>\n<li>vim-scripts/tComment</li>\n<li>Valloric/YouCompleteMe', { 'do': './install.py --tern-completer' }</li>\n<li>prettier/vim-prettier', { 'do': 'yarn install' }</li>\n<li>jeffkreeftmeijer/vim-numbertoggle</li>\n<li>elzr/vim-json</li>\n<li>tpope/vim-markdown</li>\n<li>pangloss/vim-javascript</li>\n<li>mxw/vim-jsx</li>\n<li>jparise/vim-graphql</li>\n<li>leafgarland/typescript-vim</li>\n<li>vim-syntastic/syntastic</li>\n<li>ntpeters/vim-better-whitespace</li>\n</ul>\n<p>Pheww!!..\nSo you see there's a plugin for anything and everything. These plugins are more than enough to make vim a full-blown IDE.</p>\n<h3 id=\"summing-up\" style=\"position:relative;\"><a href=\"#summing-up\" aria-label=\"summing up permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Summing up!!</h3>\n<p>VIM makes you write code at the speed of thoughts. Just get started, and the rest will follow. Steal your friend's vimrc or find one on the internet (there are tons of them) if you don't want to make one of your own.</p>\n<p>If you want to slowly blend in into the world of vim then use some vim plugin for your text editor. All popular text editors have a vim plugin ( <a href=\"https://marketplace.visualstudio.com/items?itemName=vscodevim.vim\">Here's one for VsCode </a>)\nHere you go, best of both worlds! When you're comfortable enough, go for that complete switch.</p>\n<p><img src=\"/83a1cd4054ef50dc629a6846d30d87b3/vscodevim.webp\" alt=\"vscodevim\"></p>\n<p>Here's how my vim setup looks.</p>\n<p><img src=\"/aa9e337b13aca7c3043c49bba3b61a23/Vim.webp\" alt=\"Vim\"></p>\n<p>Now go give it a try. I wish you luck!!</p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n  .dark-default-dark {\n    background-color: #1E1E1E;\n    color: #D4D4D4;\n  }\n</style>","frontmatter":{"date":"October 08, 2020","updated_date":null,"description":"Vim is Vi's newest and most common reincarnation that is supported on every known platform, check out the article to learn about what is ViM, and why to use it.","title":"Vim: What is it and Why to use it?","tags":["Vim","Text Editor"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/aa9e337b13aca7c3043c49bba3b61a23/58556/Vim.webp","srcSet":"/static/aa9e337b13aca7c3043c49bba3b61a23/61e93/Vim.webp 200w,\n/static/aa9e337b13aca7c3043c49bba3b61a23/1f5c5/Vim.webp 400w,\n/static/aa9e337b13aca7c3043c49bba3b61a23/58556/Vim.webp 800w,\n/static/aa9e337b13aca7c3043c49bba3b61a23/99238/Vim.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Shubhankar Khare","github":"iamshubhankarkhare","avatar":null}}}},{"node":{"excerpt":"Generally, MIM attacks are breaking to believe the traditional encryption technologies and targeting the intermediate nodes between the…","fields":{"slug":"/engineering/learn-about-vdn-for-cybersecurity/"},"html":"<p>Generally, MIM attacks are breaking to believe the traditional encryption technologies and targeting the intermediate nodes between the sender and receiver.</p>\n<h2 id=\"what-is-a-mim-attack\" style=\"position:relative;\"><a href=\"#what-is-a-mim-attack\" aria-label=\"what is a mim attack permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What is a MIM attack?</h2>\n<p>MIM stands for man-in-the-middle. In the World of Cybersecurity, a man-in-the-middle attack (MIM) is an attack where the attacker breaks into the middle of the network pathway silently such that the sender and receiver are not able to intercept and they believe they are directly communicating with each other. One such example of a MIM attack is active eavesdropping. In this example, an attacker can be sitting with a piece of software somewhere in the network path and capturing all the relevant network traffic for later analysis. The attacker can intercept all relevant messages passing between the two victims and by smartly monitor and alter old ones or inject new ones. It can become complicated and arise problems for the organization.</p>\n<h2 id=\"does-the-question-arise-how-about-using-ssl-and-virtual-private-networks\" style=\"position:relative;\"><a href=\"#does-the-question-arise-how-about-using-ssl-and-virtual-private-networks\" aria-label=\"does the question arise how about using ssl and virtual private networks permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Does the question arise how about using SSL and Virtual Private Networks?</h2>\n<p>SSL and Virtual Private Networks do not always protect messages as they travel across intermediary pathways. So, that where virtual dispersive networking comes into the picture.</p>\n<p>VDN follows the approaches or methods of traditional military radio spread spectrum security. Radios rotate through the frequencies randomly, and communications are divided or split into multiple pieces (or streams). So now, only one receiving radios are programmed to reassemble these pieces into their original form.\nVDN divides the original message into some multiple parts, and it will encrypt each component separately and routes them over many servers, computers, and even mobile phones. The data also move out dynamically to optimum paths — both randomizing the paths the messages take while simultaneously taking into the server congestion or other network issues.\nWhen it comes to the role of Hackers, they are left scrambling to find out data parts as they go through like data centers, Cloud, Internet, and so on. </p>\n<h2 id=\"why-virtual-dispersive-networking\" style=\"position:relative;\"><a href=\"#why-virtual-dispersive-networking\" aria-label=\"why virtual dispersive networking permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Why Virtual Dispersive Networking?</h2>\n<ol>\n<li>Unparalleled Security: Dispersing the data over multiple different paths, eliminates the Man-in-the-Middle threat. Hackers can only obtain a small chunk of the original data on any given pathway, rendering any data obtained meaningless and nearly impossible to decrypt.</li>\n<li>Network Resilience: Suppose a connection is lost on any of the several pathways due to network failure,\ndata packets are then rerouted to an already existing path, or an additional path is established which leads us resulting in negligible network downtime.</li>\n<li>Speed / Performance: Since the data-flow is from multiple independent paths using unique methods, it increases available bandwidth and optimizes data flow on individual pathways. Therefore, speed and performance are improved.</li>\n</ol>\n<h2 id=\"conclusion\" style=\"position:relative;\"><a href=\"#conclusion\" aria-label=\"conclusion permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Conclusion</h2>\n<p>Today, Dispersive Technologies' business is largely government-centric, with initial forays into commercial industries with high-value targets like banks and utilities. There are many opportunities for Dispersive technology in the cloud computing world. The cloud can host the redirects at the center of their methodology without much of a stretch. However, cloud conditions can use Dispersive to set up secure communications between clouds or between on-premise information. These hybrid cloud situations regularly rely on VPNs, which will, in general, be flaky and moderate. Dispersive Technologies have become replacement of VPNs, thereby improving the security, performance, and manageability of hybrid clouds as well as virtual private clouds. </p>\n<p>As with any industry, change can be frightening (especially when sensitive data is part of the equation), but if the organization is aware of the new developments, they can begin implementing some of these security technologies into their existing IT infrastructure and enjoy some peace of mind without worrying about future threats.</p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"date":"October 07, 2020","updated_date":null,"description":"Learn About VDN for CyberSecurity","title":"Virtual Dispersive Networking","tags":["VDN","Cyber Security"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/d2e724f66a1588268845362a0ddec71b/58556/MIM.webp","srcSet":"/static/d2e724f66a1588268845362a0ddec71b/61e93/MIM.webp 200w,\n/static/d2e724f66a1588268845362a0ddec71b/1f5c5/MIM.webp 400w,\n/static/d2e724f66a1588268845362a0ddec71b/58556/MIM.webp 800w,\n/static/d2e724f66a1588268845362a0ddec71b/210c1/MIM.webp 900w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Binay Agarwal","github":"agarwalBinay18","avatar":null}}}},{"node":{"excerpt":"React context API, In this article you will explore what is Context API, what is react context API and how to use it in your React project…","fields":{"slug":"/engineering/react-context-api/"},"html":"<p>React context API, In this article you will explore what is Context API, what is react context API and how to use it in your React project. The Context API is a React structure that enables you to exchange unique details and assists in solving prop-drilling from all levels of your application.</p>\n<h2 id=\"what-is-context-api\" style=\"position:relative;\"><a href=\"#what-is-context-api\" aria-label=\"what is context api permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What is Context API?</h2>\n<p>The React Context API is a way for a React app to effectively produce global variables that can be passed around. This is the alternative to \"prop drilling\" or moving props from grandparent to child to parent, and so on. Context is also touted as an easier, lighter approach to state management using Redux.</p>\n<p>Talking about the Context APIs, they’re a (kind of) new feature added in version 16.3 of React that allows one to share state across the entire app (or part of it) lightly and with ease.</p>\n<h2 id=\"react-context-api-how-it-works\" style=\"position:relative;\"><a href=\"#react-context-api-how-it-works\" aria-label=\"react context api how it works permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>React context API: How it works?</h2>\n<p>React.createContext() is all you need. It returns a consumer and a provider. <strong>Provider</strong> is a component that as it's names suggests provides the state to its children. It will hold the \"store\" and be the parent of all the components that might need that store. Apart from the react context <strong>Provider</strong>, <strong>Consumer</strong> as it so happens is a component that consumes and uses the state. More information can be found on <a href=\"https://reactjs.org/docs/context.html\">React's documentation page</a></p>\n<h2 id=\"context-api-will-replace-redux\" style=\"position:relative;\"><a href=\"#context-api-will-replace-redux\" aria-label=\"context api will replace redux permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Context API will replace redux?</h2>\n<p>No. Well, not entirely.  </p>\n<p>Redux is great and came perfectly to answer the need for state management. Actually, it answered this need so well that it came to be known that you can't be a \"true\" React developer if you don't know your way around Redux.\nHowever, Redux has its disadvantages, and that's why it's important to know what Context API gives us that Redux doesn't:</p>\n<ul>\n<li>\n<p>Simplicity - When using redux people tend to manage almost all of their state in redux and it causes 2 problems:  </p>\n<ol>\n<li>Overhead - Why should I create/update 3 files just to add one tiny feature? </li>\n<li>One of the significant advantages of React's one-way data binding is that it's easy to understand - A component passes state to its children. Using Redux takes it away from us.</li>\n</ol>\n</li>\n<li>Using Context API we can define several unrelated contexts (stores) and use each in its proper place in the app.  </li>\n</ul>\n<h3 id=\"important-note\" style=\"position:relative;\"><a href=\"#important-note\" aria-label=\"important note permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Important Note</h3>\n<p>Redux is just a concept. If you are comfortable with using reducers and actions and don't find hindering than you may also create reducers and actions that wrap Context API as the store as Redux's author <strong>Dan Abramov</strong> explained in <a href=\"https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367\">his medium article about whether Redux is always required</a></p>\n<h2 id=\"how-to-use-context-api\" style=\"position:relative;\"><a href=\"#how-to-use-context-api\" aria-label=\"how to use context api permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>How to use Context API?</h2>\n<p>You might think to yourself: \"Well, I'm convinced. How do I implement Context API in react for my app?\" First, make sure you need it. Sometimes people use shared state across nested components instead of just passing it as props. And if you do need it you should follow these very few steps:</p>\n<ol>\n<li>Create a folder under your app root named contexts (not required. just a convention)</li>\n<li>Create a file named &#x3C;your context name>Context.js, e.g. userContext.js</li>\n<li>import and create a context like so:</li>\n</ol>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> </span><span class=\"mtk12\">React</span><span class=\"mtk1\">, { </span><span class=\"mtk12\">createContext</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;react&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">UserContext</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">createContext</span><span class=\"mtk1\">();</span></span></code></pre>\n<ol start=\"4\">\n<li>Create a component that will wrap the provider named <your context name>Provider e.g. UserProvider<br>\nExample using React Hooks:</li>\n</ol>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk11\">UserProvider</span><span class=\"mtk1\"> = ({ </span><span class=\"mtk12\">children</span><span class=\"mtk1\"> }) </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> [</span><span class=\"mtk12\">name</span><span class=\"mtk1\">, </span><span class=\"mtk12\">setName</span><span class=\"mtk1\">] = </span><span class=\"mtk11\">useState</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;John Doe&quot;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> [</span><span class=\"mtk12\">age</span><span class=\"mtk1\">, </span><span class=\"mtk12\">setAge</span><span class=\"mtk1\">] = </span><span class=\"mtk11\">useState</span><span class=\"mtk1\">(</span><span class=\"mtk7\">1</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk11\">happyBirthday</span><span class=\"mtk1\"> = () </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> </span><span class=\"mtk11\">setAge</span><span class=\"mtk1\">(</span><span class=\"mtk12\">age</span><span class=\"mtk1\"> + </span><span class=\"mtk7\">1</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk15\">return</span><span class=\"mtk1\"> (</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk10\">UserContext.Provider</span><span class=\"mtk1\"> </span><span class=\"mtk12\">value</span><span class=\"mtk1\">=</span><span class=\"mtk4\">{</span><span class=\"mtk1\">{ </span><span class=\"mtk12\">name</span><span class=\"mtk1\">, </span><span class=\"mtk12\">age</span><span class=\"mtk1\">, </span><span class=\"mtk12\">happyBirthday</span><span class=\"mtk1\"> }</span><span class=\"mtk4\">}</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk4\">{</span><span class=\"mtk12\">children</span><span class=\"mtk4\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk10\">UserContext.Provider</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  );</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">};</span></span></code></pre>\n<ol start=\"5\">\n<li>Create a higher order component to consume the context named: with<your context name> e.g. withUser<br>\nExample using React Hooks:</li>\n</ol>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk11\">withUser</span><span class=\"mtk1\"> = (</span><span class=\"mtk12\">Child</span><span class=\"mtk1\">) </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">props</span><span class=\"mtk1\">) </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> (</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;</span><span class=\"mtk10\">UserContext.Consumer</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">{</span><span class=\"mtk1\">(</span><span class=\"mtk12\">context</span><span class=\"mtk1\">) </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> </span><span class=\"mtk17\">&lt;</span><span class=\"mtk10\">Child</span><span class=\"mtk1\"> </span><span class=\"mtk4\">{</span><span class=\"mtk1\">...</span><span class=\"mtk12\">props</span><span class=\"mtk4\">}</span><span class=\"mtk1\"> </span><span class=\"mtk4\">{</span><span class=\"mtk1\">...</span><span class=\"mtk12\">context</span><span class=\"mtk4\">}</span><span class=\"mtk1\"> </span><span class=\"mtk17\">/&gt;</span><span class=\"mtk4\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">{</span><span class=\"mtk3\">/* Another option is:  {context =&gt; &lt;Child {...props} context={context}/&gt;}*/</span><span class=\"mtk4\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk10\">UserContext.Consumer</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">);</span></span></code></pre>\n<p>The difference between the two options above is if you want the context to be a single nested property by this name, to explode it to its properties (which in my opinion is more convenient).</p>\n<ol start=\"6\">\n<li>Finally export them</li>\n</ol>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">export</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">UserProvider</span><span class=\"mtk1\">, </span><span class=\"mtk12\">withUser</span><span class=\"mtk1\"> };</span></span></code></pre>\n<ol start=\"7\">\n<li>And use them however you like<br>\nFor example:</li>\n</ol>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"4\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk12\">ReactDOM</span><span class=\"mtk1\">.</span><span class=\"mtk11\">render</span><span class=\"mtk1\">(</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;</span><span class=\"mtk10\">UserProvider</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk10\">App</span><span class=\"mtk1\"> </span><span class=\"mtk17\">/&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk10\">UserProvider</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">document</span><span class=\"mtk1\">.</span><span class=\"mtk11\">getElementById</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;root&quot;</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">);</span></span></code></pre>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"5\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk15\">default</span><span class=\"mtk1\"> </span><span class=\"mtk11\">withUser</span><span class=\"mtk1\">(</span><span class=\"mtk12\">LoginForm</span><span class=\"mtk1\">);</span></span></code></pre>\n<p>You'll also be able to notice I used the new \"<a href=\"https://www.loginradius.com/blog/engineering/react-hooks-guide/\">Hooks</a>\" feature that is shipped with React since version 16.8 to make it even neater and easier to create contexts.</p>\n<h3 id=\"final-piece-of-advice\" style=\"position:relative;\"><a href=\"#final-piece-of-advice\" aria-label=\"final piece of advice permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Final piece of advice</h3>\n<p>I mentioned how people overuse Redux, and it also applies to Context API. Use it only when you need to share state between lot's of components with a lot of nesting.\nMost of the time, the data you have in one component will only be relevant to its children, so passing it in props is more indicative and nicer.</p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n  .dark-default-dark {\n    background-color: #1E1E1E;\n    color: #D4D4D4;\n  }\n  .dark-default-dark .mtk15 { color: #C586C0; }\n  .dark-default-dark .mtk1 { color: #D4D4D4; }\n  .dark-default-dark .mtk12 { color: #9CDCFE; }\n  .dark-default-dark .mtk8 { color: #CE9178; }\n  .dark-default-dark .mtk4 { color: #569CD6; }\n  .dark-default-dark .mtk11 { color: #DCDCAA; }\n  .dark-default-dark .mtk7 { color: #B5CEA8; }\n  .dark-default-dark .mtk17 { color: #808080; }\n  .dark-default-dark .mtk10 { color: #4EC9B0; }\n  .dark-default-dark .mtk3 { color: #6A9955; }\n</style>","frontmatter":{"date":"October 07, 2020","updated_date":null,"description":"Context API is a (kind of) new feature added in version 16.3 of React that allows one to share state across the entire app (or part of it) lightly and with ease. Let's see how to use it.","title":"React Context API: What is it and How it works?","tags":["React","Redux","Hooks"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5151515151515151,"src":"/static/6fc42d03576ecaa3bcc58404bdc7afc5/58556/react.webp","srcSet":"/static/6fc42d03576ecaa3bcc58404bdc7afc5/61e93/react.webp 200w,\n/static/6fc42d03576ecaa3bcc58404bdc7afc5/1f5c5/react.webp 400w,\n/static/6fc42d03576ecaa3bcc58404bdc7afc5/58556/react.webp 800w,\n/static/6fc42d03576ecaa3bcc58404bdc7afc5/99238/react.webp 1200w,\n/static/6fc42d03576ecaa3bcc58404bdc7afc5/ce765/react.webp 1499w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Eylon Ronen","github":"eylonronen","avatar":null}}}},{"node":{"excerpt":"What is 'this' in Javascript The this keyword is, without doubt one of the most difficult Javascript concepts to understand. However…","fields":{"slug":"/engineering/breaking-down-this-keyword-in-javascript/"},"html":"<h2 id=\"what-is-this-in-javascript\" style=\"position:relative;\"><a href=\"#what-is-this-in-javascript\" aria-label=\"what is this in javascript permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What is 'this' in Javascript</h2>\n<p>The <code>this</code> keyword is, without doubt one of the most difficult Javascript concepts to understand. However, understanding it is key to being a great developer because it is an extremely common part of Javascript code.\nIn simple terms, <a href=\"https://www.w3schools.com/js/js_this.asp\">this</a> refers to the object it belongs to. It can also be defined as a property of an execution context, which is always a reference to an object when not in strict mode. It is worthy to note that the 'this' keyword finds usage mostly in the context of <a href=\"https://www.geeksforgeeks.org/objects-in-javascript/#:~:text=Loosely%20speaking%2C%20objects%20in%20JavaScript,the%20context%20of%20an%20object\">object oriented programming</a>. With that in mind, the 'this' keyword will refer to the object to which it belongs; This is true most of the times. Let us use an example to explain this better.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">let</span><span class=\"mtk1\"> </span><span class=\"mtk12\">bellBoy</span><span class=\"mtk1\"> = {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">firstName:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;Andrew&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">lastName:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;Mike&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">gender:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;Male&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">age:</span><span class=\"mtk1\"> </span><span class=\"mtk7\">18</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk11\">greet</span><span class=\"mtk12\">:</span><span class=\"mtk1\"> </span><span class=\"mtk4\">function</span><span class=\"mtk1\"> () {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">return</span><span class=\"mtk1\"> (</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk8\">&quot;Hi! I am &quot;</span><span class=\"mtk1\"> +</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk4\">this</span><span class=\"mtk1\">.</span><span class=\"mtk12\">firstName</span><span class=\"mtk1\"> +</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk8\">&quot; &quot;</span><span class=\"mtk1\"> +</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk4\">this</span><span class=\"mtk1\">.</span><span class=\"mtk12\">lastName</span><span class=\"mtk1\"> +</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk8\">&quot;, a bell boy and I am at your service&quot;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    )</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  },</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk10\">console</span><span class=\"mtk1\">.</span><span class=\"mtk11\">log</span><span class=\"mtk1\">(</span><span class=\"mtk12\">bellBoy</span><span class=\"mtk1\">.</span><span class=\"mtk11\">greet</span><span class=\"mtk1\">())</span></span></code></pre>\n<p>In the example above, there exists a bellBoy Object which consists of four properties and a greet method. When the greet method of the bellBoy object is called, can you figure out what will be returned? The console.log will print the following string: Hi! I am Andrew Mike, a bell boy, and I am at your service.</p>\n<p>How did 'this.firstName' and 'this.lastName' translate to Andrew and Mike respectively? Well, to answer that, let us go back to the definition of the 'this' keyword. It was said earlier, that it refers to the object it belongs to. So, in the example above, the 'this' keyword refers to the bellBoy object, which is the owner of the greet() method. The dot(.) operator can be used to access members of the object as defined by the 'this' keyword. In the current console.log(), we are using the dot(.) operator to call or access the greet() method. In the same vein, we can use the dot(.) operator to access the properties method of the bellBoy object like the gender and the age.</p>\n<h2 id=\"contexts-in-which-the-this-keyword-can-be-used\" style=\"position:relative;\"><a href=\"#contexts-in-which-the-this-keyword-can-be-used\" aria-label=\"contexts in which the this keyword can be used permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Contexts in which the 'this' keyword can be used</h2>\n<p>The definition of <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this\">this</a> as the property of an execution context is much more accurate because depending on how it is called at runtime, 'this' can refer to many things. Let's dive deeper.</p>\n<ul>\n<li>\n<h3 id=\"this-in-the-method-of-an-object\" style=\"position:relative;\"><a href=\"#this-in-the-method-of-an-object\" aria-label=\"this in the method of an object permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><code>this</code> in the method of an object</h3>\n<p>First, a method is used to refer to a function that is a member of an object. All methods are functions, but not all functions are methods. Now, when the 'this' keyword is used inside a method, it refers to the owner of the method it is used in. Let's use the example defined above to take a deeper look at 'this' in this context.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">greet : </span><span class=\"mtk4\">function</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;Hi! I am &quot;</span><span class=\"mtk1\"> + </span><span class=\"mtk4\">this</span><span class=\"mtk1\">.</span><span class=\"mtk12\">firstName</span><span class=\"mtk1\"> + </span><span class=\"mtk8\">&quot; &quot;</span><span class=\"mtk1\"> + </span><span class=\"mtk4\">this</span><span class=\"mtk1\">.  </span><span class=\"mtk12\">lastName</span><span class=\"mtk1\"> + </span><span class=\"mtk8\">&quot;, a bell boy and I am at your service&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p>In this example, <code>this</code> which is used inside the <code>greet()</code> method refers to the bellBoy object, which is the owner of that <code>greet()</code> method.</p>\n</li>\n<li>\n<h3 id=\"this-in-the-global-context\" style=\"position:relative;\"><a href=\"#this-in-the-global-context\" aria-label=\"this in the global context permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><code>this</code> in the Global Context</h3>\n<p>When the 'this' keyword is used alone, not inside any function or better referred to as being used in the global context, the keyword refers to the global object. The global object refers to the owner of the 'this' keyword in this case. When it is in a browser window, this global object refers to the window object.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">let</span><span class=\"mtk1\"> </span><span class=\"mtk12\">y</span><span class=\"mtk1\"> = </span><span class=\"mtk4\">this</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk10\">console</span><span class=\"mtk1\">.</span><span class=\"mtk11\">log</span><span class=\"mtk1\">(</span><span class=\"mtk12\">y</span><span class=\"mtk1\">)</span></span></code></pre>\n<p><img src=\"/dd362bb8f31d8c29260c56a36e37d91c/global-context.webp\" alt=\"this in the global context\">. </p>\n<p>Since that is true, if you make a strict comparison between the value of this and the window object, we get the boolean value of true.</p>\n<p>If you run this javascript file inside your computer using a tool like <a href=\"https://www.w3schools.com/nodejs/\">node</a>, this keyword refers to an object of type of object, like so......</p>\n<p><img src=\"/c0ca517e87898709c37d97cd70da3d1e/system.webp\" alt=\"system\"></p>\n</li>\n<li>\n<h3 id=\"this-in-a-function\" style=\"position:relative;\"><a href=\"#this-in-a-function\" aria-label=\"this in a function permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><code>this</code> in a function</h3>\n<p>Note, we are talking about what the keyword 'this' refers to when it is used in an ordinary function, one not affiliated with any object. Just a function is standing on its own.\nIn such a javascript object, the default value of 'this' is the owner of the function. If the code is not in strict mode and it is not been set to a member of an object, then <code>this</code> defaults to the global object.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">function1</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk4\">this</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk11\">function1</span><span class=\"mtk1\">() === </span><span class=\"mtk12\">window</span></span></code></pre>\n<p>In the example above, the value of the <code>this</code> keyword as used inside this function refers to the window object. This is why the output of the string comparison between funtion1 and the window object will equal to <code>true</code> because they hold the exact same value.</p>\n</li>\n<li>\n<h3 id=\"this-in-a-funtion-strict-mode\" style=\"position:relative;\"><a href=\"#this-in-a-funtion-strict-mode\" aria-label=\"this in a funtion strict mode permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><code>this</code> in a funtion (Strict Mode)</h3>\n<p>When in <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode\">strict mode</a> however, Javascript does not permit default binding, and because of that, it is undefined. Put simply strict mode prevents sloppy code. Thinking it from a programmers' point of view, there is most likely no good reason to want to access the value of this in a function since it will return the window object. In most cases, we access the <code>this</code> keyword because we want to get some other properties from its owner. Strict mode enforces this. So when in this mode, 'this' is undefined.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"4\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk8\">&quot;use  strict&quot;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">function1</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk4\">this</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk11\">function1</span><span class=\"mtk1\">() === </span><span class=\"mtk12\">window</span></span></code></pre>\n<p>As can be seen in the above example, in the strict mode, the value of <code>this</code> inside a function is <code>undefined</code>.</p>\n</li>\n<li>\n<h3 id=\"this-when-used-inside-event-handlers\" style=\"position:relative;\"><a href=\"#this-when-used-inside-event-handlers\" aria-label=\"this when used inside event handlers permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><code>this</code> when used inside Event Handlers</h3>\n<p>An event handler is an action carried out when an event is perceived to have happened. For example, when a button is clicked, we as programmers might decide hide the button. To achieve that the click event must be listened for, and an event handler must be thrown to take the action when that event is triggered. In the case of event handlers, the <code>this</code> keyword refers to the element that received the event, like this:</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"5\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk12\">window</span><span class=\"mtk1\">.</span><span class=\"mtk11\">addEventListener</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;keydown&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk4\">function</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">event</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">// `this` will point to `element`, in this case the window object</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk10\">console</span><span class=\"mtk1\">.</span><span class=\"mtk11\">log</span><span class=\"mtk1\">(</span><span class=\"mtk4\">this</span><span class=\"mtk1\">.</span><span class=\"mtk12\">event</span><span class=\"mtk1\">.</span><span class=\"mtk12\">key</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">})</span></span></code></pre>\n<p>In the example above, an event listener of <code>keydown</code> is being listened for by the window object, and once that event is perceived, a function that takes in the event will be run. The job of that function is to console.log <code>this.event.key</code>. If you try to run this code on the browser, you will get back whichever key the user pressed. Hence, in this case, <code>this</code> refers to the window object which is the one receiving the object, and as with all other objects, its properties can be accessed using the dot(.) operator. The value of <code>this</code> when used in an event handler will refer to the receiver of the event, which can be the window object in this case or any other local HTML elements we might create.</p>\n</li>\n<li>\n<h3 id=\"this-in-an-inline-event-handler\" style=\"position:relative;\"><a href=\"#this-in-an-inline-event-handler\" aria-label=\"this in an inline event handler permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><code>this</code> in an inline Event Handler</h3>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"6\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">button</span><span class=\"mtk1\"> </span><span class=\"mtk12\">onclick</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;alert(this.tagName.toLowerCase());&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">I am a this</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">button</span><span class=\"mtk17\">&gt;</span></span></code></pre>\n<p>It is a little bit different when 'this' is used in an inline event handler. In this case, its value is set to the DOM element on which the listener is placed. In the example above, the button is returned because the onClick event is being accepted by the DOM element whose tag name is returned in the alert method.</p>\n</li>\n</ul>\n<h4 id=\"more-contexts-exist-in-which-the-value-of-the-this-keyword-differs\" style=\"position:relative;\"><a href=\"#more-contexts-exist-in-which-the-value-of-the-this-keyword-differs\" aria-label=\"more contexts exist in which the value of the this keyword differs permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>More contexts exist in which the value of the 'this' keyword differs.</h4>\n<ul>\n<li><b>this in classes</b></li>\n<li><b>this as a constructor</b></li>\n<li><b>this with a getter or setter method</b></li>\n<li><b>this on an object's prototype chain</b></li>\n<li><b>this in arrow functions</b></li>\n</ul>\n<p>And many more. For a full description of <code>this</code> keyword, check out these links:</p>\n<ul>\n<li><a href=\"https://www.w3schools.com/js/js_this.asp\">w3Schools</a></li>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this\">MDN</a></li>\n<li><a href=\"https://www.tutorialsteacher.com/javascript/this-keyword-in-javascript\">TutorialsTeacher</a></li>\n</ul>\n<p>It might be a good idea to run the snippets of code to be sure that you understand how they work. To do this, use the free <a href=\"https://webmaker.app/app/\">webmaker</a> or the <a href=\"https://www.codeply.com/\">codeplay</a> code playgrounds.</p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n  .dark-default-dark {\n    background-color: #1E1E1E;\n    color: #D4D4D4;\n  }\n  .dark-default-dark .mtk4 { color: #569CD6; }\n  .dark-default-dark .mtk1 { color: #D4D4D4; }\n  .dark-default-dark .mtk12 { color: #9CDCFE; }\n  .dark-default-dark .mtk8 { color: #CE9178; }\n  .dark-default-dark .mtk7 { color: #B5CEA8; }\n  .dark-default-dark .mtk11 { color: #DCDCAA; }\n  .dark-default-dark .mtk15 { color: #C586C0; }\n  .dark-default-dark .mtk10 { color: #4EC9B0; }\n  .dark-default-dark .mtk3 { color: #6A9955; }\n  .dark-default-dark .mtk17 { color: #808080; }\n</style>","frontmatter":{"date":"October 06, 2020","updated_date":null,"description":"As one of the most popular programming languages currently being used all around the world, understanding the core of Javascript is essential. The 'this' keyword is one of the most difficult concepts to grasp. This blog post aims to break down the 'this' keyword into small and understandable bits.","title":"Breaking down the 'this' keyword in Javascript","tags":["JavaScript","JSConcepts"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/05cffb8f923dacd05e1e932759a0028e/58556/this-image.webp","srcSet":"/static/05cffb8f923dacd05e1e932759a0028e/61e93/this-image.webp 200w,\n/static/05cffb8f923dacd05e1e932759a0028e/1f5c5/this-image.webp 400w,\n/static/05cffb8f923dacd05e1e932759a0028e/58556/this-image.webp 800w,\n/static/05cffb8f923dacd05e1e932759a0028e/99238/this-image.webp 1200w,\n/static/05cffb8f923dacd05e1e932759a0028e/7c22d/this-image.webp 1600w,\n/static/05cffb8f923dacd05e1e932759a0028e/25f09/this-image.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Efereyan Karen","github":"KarenEfereyan","avatar":null}}}},{"node":{"excerpt":"You can have data without information, but you cannot have information without data  ~Daniel Keys Moran Who runs the World? Simple Question…","fields":{"slug":"/engineering/handling-cheapest-fuel-data/"},"html":"<blockquote>\n<p><strong>You can have data without information, but you cannot have information without data</strong></p>\n</blockquote>\n<p> <em>~Daniel Keys Moran</em></p>\n<h2 id=\"who-runs-the-world\" style=\"position:relative;\"><a href=\"#who-runs-the-world\" aria-label=\"who runs the world permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Who runs the World?</h2>\n<p><strong>Simple Question! Isn't it?</strong></p>\n<p><strong>Answer- Of course, we humans, \"People\" run the world.</strong></p>\n<p>The correct answer would be data. Precisely, the information we gain from data. In this digital world, the one most common thing we all do is\n\"We all generate data\". Whenever we do something digitally, we generate data. Listening to a song, watching a movie, playing a game, chatting with friends, reading a comic blah blah blah everything generates data.</p>\n<h2 id=\"can-you-imagine\" style=\"position:relative;\"><a href=\"#can-you-imagine\" aria-label=\"can you imagine permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Can you imagine?</h2>\n<p><strong>7.8 Billion</strong> people currently live on Earth, and almost <strong>4.57 Billion</strong> people are active internet users, encompassing 59 percent of the global population.\nThis is the sixth edition of DOMO's report, and according to their research:\n** \"Over 2.5 quintillion bytes of data are created every single day, and it's only going to grow from there. By 2020, it's estimated that 1.7MB of data will be created every second for every person on earth.\"**\nAs 1 Exabyte = 1 quintillion bytes, so 2.5 Exabytes ( 2.5 * 10¹⁸ bytes) of data is generated per day.</p>\n<p><img src=\"/882c0d9d0f0cc8ab8d128e6754ea650e/b.webp\" alt=\"b\"></p>\n<p>Big companies like Google, Amazon, Netflix, Instagram, Facebook, Twitter, and many more are generating tons of data daily.\nInformation is taken from <a href=\"https://www.smartdatacollective.com/how-much-big-data-companies-make-on-internet/\">here</a>.</p>\n<h2 id=\"google-40000-google-web-searches-per-second\" style=\"position:relative;\"><a href=\"#google-40000-google-web-searches-per-second\" aria-label=\"google 40000 google web searches per second permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Google: 40,000 Google Web Searches Per Second</h2>\n<p>More than 3.7 billion humans now have regular access to and use the internet. That results in about 40,000 web searches per second — on Google alone.</p>\n<h2 id=\"facebook-500-terabytes-per-day\" style=\"position:relative;\"><a href=\"#facebook-500-terabytes-per-day\" aria-label=\"facebook 500 terabytes per day permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Facebook: 500 Terabytes Per Day</h2>\n<p>In 2012, Facebook's system was generating 2.5 billion pieces of content and more than 500 terabytes of data per day.</p>\n<h2 id=\"twitter-12-terabytes-per-day\" style=\"position:relative;\"><a href=\"#twitter-12-terabytes-per-day\" aria-label=\"twitter 12 terabytes per day permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Twitter: 12 Terabytes Per Day</h2>\n<p>One wouldn't think that 140-character messages comprise large stores of data, but it turns out that the Twitter community generates more than 12 terabytes of data per day.</p>\n<h2 id=\"general-stats-per-minute-ratings\" style=\"position:relative;\"><a href=\"#general-stats-per-minute-ratings\" aria-label=\"general stats per minute ratings permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>General Stats: Per Minute Ratings</h2>\n<p>Here are some of the per-minute ratings for various social networks:</p>\n<p><strong>Snapchat:</strong> Over 527,760 photos shared by users</p>\n<p><strong>LinkedIn:</strong> Over 120 professionals join the network</p>\n<p><strong>YouTube:</strong> 4,146,600 videos watched</p>\n<p><strong>Twitter:</strong> 456,000 tweets sent or created</p>\n<p><strong>Instagram:</strong> 46,740 photos uploaded</p>\n<p><strong>Netflix:</strong> 69,444 hours of video watched</p>\n<p><strong>Giphy:</strong> 694,444 GIFs served</p>\n<p><strong>Tumblr:</strong> 74,220 posts published</p>\n<p><strong>Skype:</strong> 154,200 calls made by users</p>\n<p>These companies use this data to uncover the hidden patterns, correlations, and also to give insights to make proper business decisions. They analyze data for Customer Acquisition and Retention and try to personalize their products for their customers to establish a solid customer base.</p>\n<p>As of August 2020, desktop hard disk drives typically had a capacity of 1 to 8 terabytes, with the largest-capacity drives reaching 20 terabytes (single-disk drives, \"dual\" drives are available up to 24 TB).</p>\n<h2 id=\"another-question--how-they-do-it\" style=\"position:relative;\"><a href=\"#another-question--how-they-do-it\" aria-label=\"another question  how they do it permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Another Question- How they do it?</h2>\n<p>If the capacity of storage devices is much lesser than the data generated per day by such companies, how they manage it. How they process such a large amount of data without storing it anywhere? How Google search gives results in just a few seconds after processing the data stored for years? Can we store data in a storage device whose volume exceeds the capacity of the hardware?</p>\n<h2 id=\"problem--big-data\" style=\"position:relative;\"><a href=\"#problem--big-data\" aria-label=\"problem  big data permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Problem:- Big Data</h2>\n<p>All these problems combined are called Big Data. Below are some subparts of the Big Data problem-</p>\n<ol>\n<li>Firstly, the <strong>volume of data</strong> is too large. Even if we build storage devices of huge capacity, we can't cope up with the increasing data per day.</li>\n<li>Secondly, the <strong>cost of manufacturing</strong>. Even if we manufacture large size storage, it is not possible to afford their manufacturing prices even for high-profit organizations. So, What are the solutions for low- budget companies? How can they manage data?</li>\n<li>Thirdly, <strong>Velocity of data transfer(I/O Operations)</strong>. If we ignore the above limitations, the next problem posed is the time taken by Processing units to process this data. Because of the huge volume of data stored in large-capacity storage devices, data transfer is time-consuming.</li>\n</ol>\n<p><img src=\"/ead4209e3a985195e582001df580f612/c.webp\" alt=\"c\"></p>\n<h2 id=\"solution-\" style=\"position:relative;\"><a href=\"#solution-\" aria-label=\"solution  permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Solution:-</h2>\n<p>Big Data can be taken as technology or field that treats ways to analyze, systematically extract information from, or otherwise deal with data sets that are too large or complex to be dealt with by traditional data processing.\nOne of the concepts that solve the above problem is Distributed Storage.</p>\n<p><strong>Distributed Storage Cluster-</strong></p>\n<p><img src=\"/9fcd70f725eca390fef99886c64aa4bc/d.webp\" alt=\"d\"></p>\n<p>Distributed storage is a method that provides huge storage(even exceeding from physical storage) shared by multiple systems. These systems or the servers are connected following horizontal scaling. This multiple commodity server hardware is comparatively cheap than optimized servers with large storage(Hard Disk). Each virtual machine contributes directory to a centralized system and thereby shares its storage. The team of master and slave nodes working together for one purpose called a cluster.</p>\n<p>One of the Topologies or the architecture used for implementing a Distributed storage system is <strong>Master-slave architecture</strong>.\nMaster-slave architecture- Master-slave is a model of asymmetric communication or control where one device(the \"master\") connected to one or more other devices(the \"slaves\") are connected using a protocol(Network), where the slave nodes/devices can contribute a part/whole of their storage devices to the master node, like this centralized master node can store data exceeding its local storage limit.</p>\n<p>The slave nodes can be commodity hardware/devices that need not be expensive and high functioning.\nAs the data is split and stored in(and loaded from) other devices/nodes, the I/O operations (data transfer) can be performed parallelly on all the devices. Thus, reducing the time consumption by a large factor.</p>\n<p><strong>Hence, distributed storage solves all the problems- Volume, Cost, and Velocity.</strong></p>\n<h2 id=\"apache-hadoop\" style=\"position:relative;\"><a href=\"#apache-hadoop\" aria-label=\"apache hadoop permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Apache Hadoop</h2>\n<p><img src=\"/cf782a4d0e5262ab5a1638e2a54c66e8/e.webp\" alt=\"e\"></p>\n<p>Distributed storage is just a concept, and some companies have launched different software or products that work on this concept which solve the problem of Big Data. One such company is <strong>APACHE and the software APACHE HADOOP</strong>.\nThe Apache Hadoop software is a collection of libraries that provides facility to create clusters/network of systems following the distributed system. It can be used in processing the huge data distributes in thousands of machines, each offering local computation and storage.</p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"date":"October 06, 2020","updated_date":null,"description":"You can have data without information, but you cannot have information without data. Huge data is generated per day. What are the issues in handling it? How big companies manage and analyze it?","title":"Handling the Cheapest Fuel- Data","tags":["Data","BigData","Hadoop"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/4b6b53f9b05bcb043c5b8593abc26197/58556/a.webp","srcSet":"/static/4b6b53f9b05bcb043c5b8593abc26197/61e93/a.webp 200w,\n/static/4b6b53f9b05bcb043c5b8593abc26197/1f5c5/a.webp 400w,\n/static/4b6b53f9b05bcb043c5b8593abc26197/58556/a.webp 800w,\n/static/4b6b53f9b05bcb043c5b8593abc26197/99238/a.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Samriddhi Mishra","github":"SamriddhiMishra","avatar":null}}}},{"node":{"excerpt":"Social engineering attacks have become a common occurrence against enterprises over the years. In fact, it has grown increasingly…","fields":{"slug":"/identity/social-engineering-attacks/"},"html":"<p>Social engineering attacks have become a common occurrence against enterprises over the years. In fact, it has grown increasingly sophisticated. </p>\n<p>Needless-to-say there is no ‘stop sign’ for cybercrimes any time soon. Instead, hackers have been coming up with more creative methods to deceive employees and people into sharing sensitive credentials.</p>\n<p>It is high time that companies conduct proper research and utilize the right tools to keep ahead of the fraudsters.</p>\n<p>This infographic will cover what social engineering is and the best practices to avoid becoming a victim of the most common social engineering attacks.</p>\n<h2 id=\"what-is-social-engineering\" style=\"position:relative;\"><a href=\"#what-is-social-engineering\" aria-label=\"what is social engineering permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What is Social Engineering </h2>\n<p>Social engineering is a cyberattack where criminals psychologically manipulate unsuspecting users into making security mistakes and giving up their confidential information. </p>\n<p>Social engineering involves the criminal using human emotions like fear, curiosity, greed, anger, etc. to trick victims into clicking malicious links or physical tailgating attacks. </p>\n<p>Social engineering attackers have one of two goals: </p>\n<ul>\n<li>They want to corrupt data to cause <a href=\"https://www.loginradius.com/blog/2020/05/cyber-threats-business-risk-covid-19/\">inconvenience to an organization</a>.</li>\n<li>They want to steal information, money. or obtain unsolicited access. </li>\n</ul>\n<h2 id=\"common-social-engineering-attack-techniques\" style=\"position:relative;\"><a href=\"#common-social-engineering-attack-techniques\" aria-label=\"common social engineering attack techniques permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Common Social Engineering Attack Techniques</h2>\n<p>Here is a quick overview of the most common social engineering scams used against modern enterprises and individuals.</p>\n<h3 id=\"phishing\" style=\"position:relative;\"><a href=\"#phishing\" aria-label=\"phishing permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Phishing</h3>\n<p><a href=\"https://www.loginradius.com/blog/phishing-for-identity/\">Phishing is the most common</a> and widely successful form of social engineering attack. The fraudster uses trickery and deceit via email, chat, web ad, or website to persuade a person or organization to expose their PII and other valuables. </p>\n<p>For example, the fraudster might pretend to represent a bank, a government organization, or a major corporation trusted by the naive victim. The source can be an email asking the email recipients to click on a link to log in to their accounts. They are then redirected to a fake website appearing to be legitimate, and that's where the attack takes place.</p>\n<p><a href=\"https://www.loginradius.com/resource/passwords-are-dead/\"><img src=\"/71f736567e16df3b354a57e3b45ca355/SET-1.webp\" alt=\"passwords are dead whitepaper\"></a></p>\n<h3 id=\"spear-phishing\" style=\"position:relative;\"><a href=\"#spear-phishing\" aria-label=\"spear phishing permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Spear Phishing</h3>\n<p>Spear Phishing is another form of social engineering where the fraudster does some background research on the victim's personal and professional life to establish the right pretext.</p>\n<p>For example, the fraudster might reveal to the victim that they are planning a surprise birthday for a friend and are seeking help to pull it off.</p>\n<h3 id=\"baiting\" style=\"position:relative;\"><a href=\"#baiting\" aria-label=\"baiting permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Baiting</h3>\n<p>Baiting is when the fraudster uses greed or curiosity to trap the victim with false promises and trick them into <a href=\"https://www.loginradius.com/blog/2019/09/prevent-credential-stuffing-attacks/\">handing their login credentials</a>.</p>\n<p>For example, the fraudster may leave a malware-infected, authentic-looking flash drive (or bait) in the least suspicious area like the bathroom or elevator of a company. The bait will also have enticing labels like a payroll list or appraisal list that will be tempting enough to insert on a computer. </p>\n<h3 id=\"tailgating\" style=\"position:relative;\"><a href=\"#tailgating\" aria-label=\"tailgating permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Tailgating</h3>\n<p>Tailgating happens when someone without <a href=\"https://www.loginradius.com/authentication/\">proper authentication enters</a> into a restricted area by physically bypassing the security measures in place.</p>\n<p>For example, the attacker can strike up conversations with an employee in the lobby or the parking lot and use the familiarity to enter the office premises and get past the front desk.</p>\n<h3 id=\"scareware\" style=\"position:relative;\"><a href=\"#scareware\" aria-label=\"scareware permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Scareware</h3>\n<p>Scareware is a malware tactic where the fraudster perceives a threat to deceive users into visiting malware-infected sites and buying malicious software.</p>\n<p>Examples include PC Health Check Programs and Antivirus Updaters that scare victims into buying diagnostic and repair services they do not need. </p>\n<h2 id=\"warning-signs-of-social-engineering-attacks\" style=\"position:relative;\"><a href=\"#warning-signs-of-social-engineering-attacks\" aria-label=\"warning signs of social engineering attacks permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Warning Signs of Social Engineering Attacks</h2>\n<p>One of the best ways to protect against social engineering is to understand the warning signs and steer clear of attacks. A few of the warning signs include:</p>\n<ul>\n<li>Asking for immediate assistance.</li>\n<li>Asking to verify your information.</li>\n<li>Acting overly friendly or eager.</li>\n<li>Acting nervous when counter questioned.</li>\n<li>Overemphasizing details.</li>\n<li>Luring with too good to be true offers.</li>\n<li>Threatening reprimands if their requests are ignored.</li>\n</ul>\n<h2 id=\"best-practices-to-prevent-social-engineering-attacks\" style=\"position:relative;\"><a href=\"#best-practices-to-prevent-social-engineering-attacks\" aria-label=\"best practices to prevent social engineering attacks permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Best Practices to Prevent Social Engineering Attacks </h2>\n<p>Be careful of what you share. And no, you don't need to be paranoid about these attacks. Preventing them is possible. The following are a few ways that help. </p>\n<ul>\n<li><strong>Set spam filters to high</strong>. Every email program has spam filters. To find out, look closely through your setting options and set them too high. It will help you keep away from spam messages to a large extent.</li>\n<li><strong>Never use the same password for different accounts</strong>. If the attacker gets hold of one account, they will be able to hack other accounts too.</li>\n<li><strong>Use two-factor or multi-factor authentication</strong>. Just the password is no longer enough to secure your account. Additional layers are just are crucial. It can be a <a href=\"https://www.loginradius.com/blog/identity/best-practices-choosing-good-security-questions/\">security question</a>, a captcha, fingerprinting, or SMS confirmation codes.</li>\n<li><strong>When in doubt, change passwords right away</strong>. If you think you gave away your password to a spammer, change all your passwords immediately.</li>\n<li><strong>Educate employees</strong>. Knowledge is key. Keep your employees aware of the latest social engineering threats and help them exercise the necessary caution, whenever needed. </li>\n</ul>\n<p>To learn more about Social Engineering Attacks – preventions and best practices, check out the infographic created by LoginRadius.</p>\n<p><img src=\"/a3b543199f91afea9032f0337888d6b8/Social-Engineering-Attacks-2.webp\" alt=\"Social-Engineering-Attacks-infographic\"></p>\n<p><a href=\"https://www.loginradius.com/contact-us?utm_source=blog&#x26;utm_medium=web&#x26;utm_campaign=social-engineering-attacks\"><img src=\"/1bebf239d110701b9b534d7eb481a5ac/BD-Plexicon1-1024x310-1.webp\" alt=\"book-a-demo-loginradius\"></a></p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"date":"October 06, 2020","updated_date":null,"description":"Over the years, social engineering attacks have been a regular phenomenon against companies. It has actually become more and more sophisticated. It is high time for businesses to perform careful research and use the right instruments to remain ahead of fraudsters.","title":"Social Engineering Attacks: Prevention and Best Practices [Infographic]","tags":["data security","authentication","mfa"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/d6c93bfbe4ec11ee28e6ec187d72b68b/7f8e9/social-engineering-attacks.webp","srcSet":"/static/d6c93bfbe4ec11ee28e6ec187d72b68b/61e93/social-engineering-attacks.webp 200w,\n/static/d6c93bfbe4ec11ee28e6ec187d72b68b/1f5c5/social-engineering-attacks.webp 400w,\n/static/d6c93bfbe4ec11ee28e6ec187d72b68b/7f8e9/social-engineering-attacks.webp 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.webp"}}}}]},"markdownRemark":{"excerpt":"Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards…","fields":{"slug":"/identity/developer-first-identity-provider-loginradius/"},"html":"<p>Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards and refining approaches to building secure, seamless experiences.</p>\n<p>We’re here to support developers on that journey. We know how important simplicity, efficiency, and well-structured documentation are when working with identity and access management solutions. That’s why we’ve redesigned the <a href=\"https://www.loginradius.com/\">LoginRadius website</a>—to be faster, more intuitive, and developer-first in every way.</p>\n<p>The goal? Having them spend less time searching and more time building.</p>\n<h2 id=\"whats-new-and-improved-on-the-loginradius-website\" style=\"position:relative;\"><a href=\"#whats-new-and-improved-on-the-loginradius-website\" aria-label=\"whats new and improved on the loginradius website permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What’s New and Improved on the LoginRadius Website?</h2>\n<p>LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve spent the last few months redesigning our interface— making navigation more intuitive and reassuring that essential resources are easily accessible.</p>\n<p>Here’s a closer look at what’s new and why it’s important:</p>\n<h3 id=\"a-developer-friendly-dark-theme\" style=\"position:relative;\"><a href=\"#a-developer-friendly-dark-theme\" aria-label=\"a developer friendly dark theme permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>A Developer-Friendly Dark Theme</h3>\n<p><img src=\"/f46881583c7518a93bb24e94c32320de/a-developer-friendly-dark-theme.webp\" alt=\"This image shows how LoginRadius offers several authentication methods like traditional login, social login, passwordless login, passkeys and more in a dark mode.\">    </p>\n<p>Developers spend long hours working in dark-themed IDEs and terminals, so we’ve designed the LoginRadius experience to be developer-friendly and align with that preference.</p>\n<p>The new dark mode reduces eye strain, enhances readability, and provides a seamless transition between a coding environment and our platform. Our new design features a clean, modern aesthetic with a consistent color scheme and Barlow typography, ensuring better readability. High-quality graphics and icons are thoughtfully placed to enhance the content without adding visual clutter.</p>\n<p>So, whether you’re navigating our API docs or configuring authentication into your system, our improved interface will make those extended development hours more comfortable and efficient.</p>\n<h3 id=\"clear-categorization-for-loginradius-capabilities\" style=\"position:relative;\"><a href=\"#clear-categorization-for-loginradius-capabilities\" aria-label=\"clear categorization for loginradius capabilities permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Clear Categorization for LoginRadius Capabilities</h3>\n<p><img src=\"/e5358b82be414940f3fb146013845933/capabilities.webp\" alt=\"This image shows a breakdown of all the LoginRadius CIAM capabilities, including authentication, security, UX, scalability and multi-brand management.\"></p>\n<p>We’ve restructured our website to provide a straightforward breakdown of our customer identity and access management platform capabilities, helping you quickly find what you need:</p>\n<ul>\n<li>Authentication: Easily understand <a href=\"https://www.loginradius.com/blog/identity/authentication-option-for-your-product/\">how to choose the right login method</a>, from traditional passwords and OTPs to social login, federated SSO, and passkeys with few lines of code.</li>\n<li>Security: Implement no-code security features like bot detection, IP throttling, breached password alerts, DDoS protection, and adaptive MFA to safeguard user accounts.</li>\n<li>User Experience: Leverage AI builder, hosted pages, and drag-and-drop workflows to create smooth, branded sign-up and login experiences.</li>\n<li>High Performance &#x26; Scalability: Confidently scale with sub-100ms API response times, 100% uptime, 240K+ RPS, and 28+ global data center regions.</li>\n<li>Multi-Brand Management: Efficiently manage multiple identity apps, choosing isolated or shared data stores based on your brand’s unique needs.</li>\n</ul>\n<p>This structured layout ensures you can quickly understand each capability and how it integrates into your identity ecosystem.</p>\n<h3 id=\"developer-first-navigation\" style=\"position:relative;\"><a href=\"#developer-first-navigation\" aria-label=\"developer first navigation permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Developer-First Navigation</h3>\n<p><img src=\"/a8c155c2b6faf3d5f4b4de4e2b14d763/developers-menu.webp\" alt=\"This image shows the LoginRadius menu bar, highlighting the developer dropdown.\">   </p>\n<p>We’ve been analyzing developer workflows to identify how you access key resources. That’s why we redesigned our navigation with one goal in mind: to reduce clicks and make essential resources readily available.</p>\n<p>The new LoginRadius structure puts APIs, SDKs, and integration guides right at the menu bar under the Developers dropdown so you can get started faster. Our Products, Solutions, and Customer Services are also clearly categorized, helping development teams quickly find the right tools and make informed decisions.</p>\n<h3 id=\"quick-understanding-of-integration-benefits\" style=\"position:relative;\"><a href=\"#quick-understanding-of-integration-benefits\" aria-label=\"quick understanding of integration benefits permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Quick Understanding of Integration Benefits</h3>\n<p><img src=\"/b2f9a964a2da0ea83e2f8596b833bba7/we-support-your-tech-stack.webp\" alt=\"This image shows a list of popular programming languages and frameworks offered by LoginRadius.\"></p>\n<p>Developers now have a clear view of the tech stack available with LoginRadius, designed to support diverse business needs.</p>\n<p>Our platform offers pre-built SDKs for Node.js, Python, Java, and more, making CIAM integration seamless across popular programming languages and frameworks.</p>\n<h2 id=\"over-to-you-now\" style=\"position:relative;\"><a href=\"#over-to-you-now\" aria-label=\"over to you now permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Over to You Now!</h2>\n<p>Check out our <a href=\"https://www.loginradius.com/\">revamped LoginRadius website</a> and see how the improved experience makes it easier to build, scale, and secure your applications.</p>\n<p>Do not forget to explore the improved navigation and API documentation, and get started with our free trial today. We’re excited to see what you’ll build with LoginRadius!</p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"date":"February 21, 2025","updated_date":null,"description":"LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve redesigned our website interface, making navigation more intuitive and reassuring that essential resources are easily accessible.","title":"Revamped & Ready: Introducing the New Developer-First LoginRadius Website","tags":["Developer tools","API","Identity Management","User Authentication"],"pinned":true,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7857142857142858,"src":"/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp","srcSet":"/static/80b4e4fbe176a10a327d273504607f32/61e93/hero-section.webp 200w,\n/static/80b4e4fbe176a10a327d273504607f32/1f5c5/hero-section.webp 400w,\n/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp 800w,\n/static/80b4e4fbe176a10a327d273504607f32/99238/hero-section.webp 1200w,\n/static/80b4e4fbe176a10a327d273504607f32/7c22d/hero-section.webp 1600w,\n/static/80b4e4fbe176a10a327d273504607f32/1258b/hero-section.webp 2732w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.webp"}}}},"pageContext":{"limit":6,"skip":714,"currentPage":120,"type":"///","numPages":164,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}