<p>JavaScript is a scripting language, therefore you can write scripts to automate your workflow with JavaScript.</p>
<p><img src="images/bash.png" alt="Shell" /></p>
<h3>The background of the snippet</h3>
<p>I created a node script recently to automate one workflow that I do repeatedly. Everytime I create a new JavaScript project, I'd create a <code>.prettierrc</code> file and add 4 configurations.</p>
<p>The file looks something like this,</p>
<pre><code class="language-js">{
	&quot;semi&quot;: true,
	&quot;singleQuote&quot;: true,
	&quot;tabWidth&quot;: 2,
	&quot;useTabs&quot;: false,
}
</code></pre>
<p>For those who don't know what this is, it is a configuration file for prettier. You can install it in your code editor to format your source code in a certain way.</p>
<p>The configuration I created above will make sure that my JS source code will have a semicolon at the end, it will use single quote on strings, it will use 2 spaces for indentation and instead of tabs, the code will use space for indentation.</p>
<p>It is extremely repetitive. I would do this twice or thrice somedays when I am testing some simple snippets. I care about consistent formatting even in simple snippets that I create to test code because I guess I have OCD.</p>
<p>This is why I decided to create this script to save me from this trouble and it was a great learning experience.</p>
<h2>The major pieces</h2>
<p>Let's first understand the pieces that create this script and fit it all in together.</p>
<h3>The interpreter</h3>
<p>On the top of your scripts, we have to specify the path to the interpreter we plan to use. In our case, it is node. To do so, we have to use &lt;a href='https://en.wikipedia.org/wiki/Shebang_(Unix)' target='_blank'&gt;a shebang line&lt;/a&gt;.</p>
<p>For node</p>
<pre><code class="language-js">#!/usr/bin/env node
</code></pre>
<p>Some other examples</p>
<pre><code class="language-sh">- for python
#!/usr/bin/env python3

- for bash
#!/bin/bash
</code></pre>
<h3>The working directory</h3>
<p>For this script to work, it has to know where it is being run at. For example, if I run this script on Projects directory on my home directory (in linux), it should be able to identify that and create a <code>.prettierrc</code> file inside <code>~/Projects</code>.</p>
<p>For that, we can extract the current working directory from the node's global process object.</p>
<pre><code class="language-js">process.cwd();
</code></pre>
<p>This gives us the path to the current working directory.</p>
<h3>The file system module</h3>
<p>Node ships a file system module by default. We need to grab the writeFile function from the <code>fs</code> module and write our <code>.prettierrc</code> file to our file system.</p>
<p>Read the &lt;a href='https://nodejs.org/dist/latest-v14.x/docs/api/fs.html#fs_fs_writefile_file_data_options_callback' target='_blank'&gt;official docs&lt;/a&gt;.</p>
<p><strong>Example</strong></p>
<pre><code class="language-js">const fs = require('fs');

/**
 * writeFile(filename, content, callback);
 */

fs.writeFile('test.txt', 'This is the content for the file', (error, data) =&gt; {
  if (error) {
    console.log(error);
  }

  console.log('File written successfully');
});
</code></pre>
<h2>Fitting it all together</h2>
<p>Now as we have all the background information, we can create the script.</p>
<p>First create a file called <code>prettier-config</code> or <code>prettier-config.js</code> and paste the following content.</p>
<p>Note: the extension is not mandatory but remember what you name it because we have to access it later.</p>
<pre><code class="language-js">#!/usr/bin/env node

const fs = require('fs');

const configs = {
  semi: true,
  tabWidth: 2,
  useTabs: false,
  singleQuote: true,
};

fs.writeFile(
  `${process.cwd()}/.prettierrc`,
  JSON.stringify(configs),
  (error, data) =&gt; {
    if (error) {
      console.error('Error creating the configuration file.', error);
    }
    console.log('Configuration created');
  }
);
</code></pre>
<p>Here, I am just fitting together the information provided above and mixing it to create the .prettierrc file.</p>
<p>The script stores the configuration file in an object called <code>configs</code>. You can add as more configs as you like in this file.</p>
<p>JSON and JS objects might seem similar but they have some minor differences. For example, the keys in a JSON have to be wrapped inside double quotes. That is the reason why I have used <code>JSON.stringify(configs)</code> to convert the JS object into a JSON string while writing to the file.</p>
<h2>Executable permission and global access</h2>
<p>We generally want our scripts to be available everywhere in our system. Also, we have to give executable permission to our scripts.</p>
<p>Moving our script to <code>/usr/local/bin</code> on our file system will allow us to use the script anywhere on our system. To do so, move the script file,</p>
<pre><code class="language-bash">mv prettier-config /usr/local/bin/prettier-config

# if you get permission related errors

sudo mv prettier-config /usr/local/bin/prettier-config
</code></pre>
<p>We want our scripts to have executable (x) permission and we want it to provide this permision to the owner/user, group and others (a).</p>
<pre><code class="language-bash">sudo chmod a+x /usr/local/bin/prettier-config
</code></pre>
<p>Now if you try to run <code>prettier-config</code> command anywhere on your file system, you will get a .prettierrc file with necessary configuration created.</p>
<p><img src="images/bash-walkthrough.png" alt="Walkthrough" /></p>
<h2>Conclusion</h2>
<p>If you like my content and want to have a chat then please hit me up on &lt;a href='https://twitter.com/dev_prashaant' target='_blank'&gt;Twitter&lt;/a&gt;.</p>


Create a bash script with JS to create .prettierrc file with necessary configurations

A bash script with Node.JS

<p>Markdown is a markup language like HTML. It is quite popular among developers to write blogs, readme files, documentation and blogs. Some of the popular websites that support rich text like Reddit, GitHub, Notion etc allow you to write markdown. I use markdown to convert my blog from a markdown file to HTML web pages. Markdown is simple yet very powerful. In this blog, I will be writing about how to build a simple markdown parser to convert md to HTML with JavaScript using Regular Expressions.</p>
<p><img src="markdown.png" alt="Markdown parser" /></p>
<h2>How does a markdown text look like</h2>
<p>If you open a markdown file, you'll see the following syntax.</p>
<pre><code class="language-md"># The text after hash is converted to an h1 in HTML

## Get's converted to h2

**This is a bold text** _italics_
[Link Text](url)
</code></pre>
<p>Learn more from this <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">markdown cheatsheet</a>.</p>
<h2>Regular Expressions</h2>
<p>A regular expression is a character sequence that helps us to capture patterns in a text. We can use it to validate user input, find and replace texts and yup, you guessed it, build our markdown parser. 😉</p>
<p>Different languages have different ways to represent RegEx. Here is how it is done in JavaScript.</p>
<pre><code class="language-js">// Validates all the text that includes the text Hello (case sensitive)
const pattern = /Hello/;
const text = 'Hello, beautiful people';
pattern.test(text); // Returns true
</code></pre>
<p>I will explain the patterns we use in our parser as we reach that section. However, if you want to read more about regular expressions, visit <a href="https://javascript.info/regular-expressions">https://javascript.info</a>.</p>
<h2>Markdown parser</h2>
<p>The markdown parser I intend to build is a function that takes markdown text as input and returns HTML.</p>
<pre><code class="language-js">function parseMarkdown(markdownText) {
  const htmlText = markdownText; // do something to this markdown text

  return htmlText;
}
</code></pre>
<p>Here, we want to find a certain pattern in <code>markdownText</code> and perform replace operations.</p>
<h3>String replace function</h3>
<p>Our markdown parser is simple. It captures a pattern from markdown string passed to the function as <code>markdownText</code> argument and replaces it with certain HTML pattern.</p>
<p>Here is how the string replace function works.</p>
<pre><code class="language-js">text = 'hello world and hello everyone';
regEx = /Hello/gi;
console.log(text.replace(regEx, 'hi'));
// prints: 'hi world and hi everyone'
</code></pre>
<blockquote>
<p>Note: Here the <strong>i flag represents case insensitive</strong> and <strong>g flag represents global</strong>, which means it matches patterns everywhere on the string, not just the first match.</p>
</blockquote>
<h3>Capturing groups in Regular Expression</h3>
<p>Regular Expressions allows us to capture patterns of text and reference them with something like an index. We can use the index in the replace operation. To represent a group, we can simply wrap it in a parenthesis <code>()</code>.</p>
<pre><code class="language-js">text = 'hello world and hello everyone';
// RegEx to match a string starting with hello followed by anything
regEx = /(Hello).*/i;
console.log(text.replace(regEx, 'Matched Group: $1'));
// prints: 'Matched Group: hello'
</code></pre>
<p>Here, we have stored the starting hello in a group. The group can then be referenced with <strong>$1</strong> on our replace operation.</p>
<h3>Back to the parser</h3>
<p>Now, we want to parse the markdown text and replace it with HTML.</p>
<p>Here are the RegExes we will use in our parser and their explanation.</p>
<ol>
<li>
<p><strong>Heading</strong> &lt;br/&gt;
For heading, we want a string that starts with a hash(es) and captures everything after those characters.</p>
<pre><code class="language-js">const h3 = /^### (.*$)/gim;
</code></pre>
<blockquote>
<p>Here the first carat <code>^</code> represents line starting with and m flag represents multiple lines and by doing .* we are capturing everything (letters, numbers, special characters) that exists there.</p>
</blockquote>
</li>
<li>
<p><strong>Blockquote</strong> &lt;br /&gt;
For blockquote, we want a line that starts with <code>&gt;</code> and captures everything after that character.</p>
<pre><code class="language-js">const bq = /^\&gt; (.*$)/gim;
</code></pre>
<blockquote>
<p>Note: \&gt; represents escaping &gt; character. That means, don't treat &gt; as a part of special regEx character but as a part of that text itself.</p>
</blockquote>
</li>
<li>
<p><strong>Bold Text</strong> &lt;br /&gt;
For bold text, we want to capture a text between 2 asterisks.</p>
<pre><code class="language-js">const bold = /\*\*(.*)\*\*/gim;
</code></pre>
</li>
<li>
<p><strong>Italics Text</strong> &lt;br /&gt;
For italic text, we want to capture a text between one asterisk.</p>
<pre><code class="language-js">const italics = /\*(.*)\*/gim;
</code></pre>
</li>
<li>
<p><strong>For image, link and line break</strong> &lt;br /&gt;</p>
<pre><code class="language-js">// ![Alt text](url)
const image = /!\[(.*?)\]$(.*?)$/gim;
// [text](url)
const link = /\[(.*?)\]$(.*?)$/gim;
const lineBreak = /\n$/gim;
</code></pre>
</li>
</ol>
<h3>Fitting it all together</h3>
<p>By this point, you probably have all the background necessary to understand the concepts. Let's fit all the things that we have learnt up to now and build the parser.</p>
<pre><code class="language-js">function parseMarkdown(markdownText) {
  const htmlText = markdownText
    .replace(/^### (.*$)/gim, '&lt;h3&gt;$1&lt;/h3&gt;')
    .replace(/^## (.*$)/gim, '&lt;h2&gt;$1&lt;/h2&gt;')
    .replace(/^# (.*$)/gim, '&lt;h1&gt;$1&lt;/h1&gt;')
    .replace(/^\&gt; (.*$)/gim, '&lt;blockquote&gt;$1&lt;/blockquote&gt;')
    .replace(/\*\*(.*)\*\*/gim, '&lt;b&gt;$1&lt;/b&gt;')
    .replace(/\*(.*)\*/gim, '&lt;i&gt;$1&lt;/i&gt;')
    .replace(/!\[(.*?)\]$(.*?)$/gim, &quot;&lt;img alt='$1' src='$2' /&gt;&quot;)
    .replace(/\[(.*?)\]$(.*?)$/gim, &quot;&lt;a href='$2'&gt;$1&lt;/a&gt;&quot;)
    .replace(/\n$/gim, '&lt;br /&gt;');

  return htmlText.trim();
}
</code></pre>
<p>Time to test the parser.</p>
<pre><code class="language-js">const text = `
# Hello World
**This is a bold text**
`;

console.log(parseMarkdown(text));
</code></pre>
<p>Should print:</p>
<pre><code class="language-sh">&lt;h1&gt;Hello World&lt;/h1&gt;
&lt;b&gt;This is a bold text&lt;/b&gt;&lt;br /&gt;
</code></pre>
<p>Our markdown parser is now completed. It doesn't cover everything that markdown supports. Try implementing them and share the solution with me via twitter.</p>


By the completion of this blog, you will have a function that takes in a markdown text and return a HTML text.

Simple Markdown Parser with JavaScript and Regular Expressions

<p>This blog is a follow up from my last blog in which I talked about promises. If you are unfamiliar with promises in JavaScript, please read &lt;a href='https://bigomega.dev/promises' target='_blank'&gt;that article&lt;/a&gt; before reading this one. Also, some familiarity with exception handling would be useful.</p>
<p>Async Await is a syntactic sugar added in ECMAScript 2017 standard that helps us working with promises easier. As I mentioned on the last blog, promises were introduced to work with asynchronous code and avoid callback hell. Though promises aimed to do so, the code still looks kind of callbacky. Async and await help us to write asynchronous code but it looks like synchronous code.</p>
<p>On the last blog, we created an imitation of the fetch API. It was a function that returned a promise. It looked like this</p>
<pre><code class="language-js">function fetch(requestPassed = true) {
	return new Promise((resolve, reject) =&gt; {
		if (requestPassed) {
			resolve('{&quot;success&quot;: true,
			&quot;data&quot;: {&quot;movies&quot;: [&quot;batman&quot;, &quot;iron man&quot;]}}')
		} else {
			reject('{&quot;success&quot;: false,
			&quot;message&quot;: &quot;Database connection failed&quot;}')
		}
	})
}
</code></pre>
<p>To consume the promise, we did the following</p>
<pre><code class="language-js">fetch()
  .then((data) =&gt; JSON.parse(data))
  .then((res) =&gt; console.log(res))
  .catch((err) =&gt; JSON.parse(err))
  .then((errorMsg) =&gt; console.log(errorMsg));
</code></pre>
<p>This is the part where we can use async-await to make our code look better. To consume the promise, we have to use an async function which we can describe as follows:</p>
<pre><code class="language-js">async function fetchData() {}
</code></pre>
<p>Inside an <code>async</code> function, we can use the <code>await</code> keyword to wait for the promise to resolve.</p>
<pre><code class="language-js">async function fetchData() {
  /*
   * here the fetch function returns a promise
   * we have to await the promise to get resolved here
   */
  const data = await fetch();
  // once the data is fetched, we can do anything we want
  // lets parse the JSON string to a JS object and
  // log it onto the console
  const res = JSON.parse(data);
  console.log(res);
}

fetchData();
</code></pre>
<p>The above code will print the following onto the console</p>
<pre><code class="language-js">{ success: true, data: { movies: [ 'batman', 'iron man' ] } } 
</code></pre>
<p>If we revisit the promise, we know that the promise might get resolved or might get rejected. Rejection of a promise might be because of some error (it all depends on the use case too but that's the only thing I can think of right now). Hence, the use of <strong>exception handling</strong> with <strong>try-catch</strong> can be really handy while using <code>async-await</code>.</p>
<pre><code class="language-js">async function fetchData() {
  try {
    const data = await fetch(false);
    const res = JSON.parse(data);
    console.log(res);
  } catch (error) {
    const errorObject = JSON.parse(error);
    console.log(errorObject);
  }
}

fetchData();
</code></pre>
<p>I have intentionally passed false value as an argument to the fetch function to make the promise reject. Anything passed to the reject function will be received by the catch block as an exception. We can reference the rejected error on the <code>error</code> argument we have passed to the catch block. The above code logs the following onto the console.</p>
<pre><code class="language-js">{ success: false, message: 'Database connection failed' } 
</code></pre>
<p>This is how async and await can be used with promises to make our code more readable. If you revisit and make a comparison with the code we wrote earlier, you'll find a vast difference. Async-await is one of my favorite features on JavaScript and I use it all the time. It has made my life as a JavaScript developer easier.</p>
<p>Thanks for reading. If you like my content, consider subscribing.</p>


Async Await makes working with promises easier and fun.

Async Await in JavaScript

<p>Promises in JavaScript behave similarly to promises we make normally to people. It's something like <strong>you'll get great score if submit your assignments on time.</strong> In this example, if the student submits his assignments on time, the promise made to him gets fulfilled else, it will not. In JavaScript, promises let us handle tasks that might happen in the future. This concept is really important while doing tasks like making <strong>network requests</strong>, as we're not certain if the request gets resolved or not.</p>
<p>Promises were released in ES2015 to minimize the callbacky code we used to write.</p>
<h2>The Syntax</h2>
<p>To use a promise, we have to create a promise object that takes in a callback function with 2 arguments: <strong>resolve</strong> and <strong>reject</strong>.</p>
<pre><code class="language-js">let myPromise = new Promise((resolve, reject) =&gt; {});
</code></pre>
<h3>Resolve</h3>
<p>If the <strong>promise is fulfilled</strong>, <strong>resolve gets called</strong>.</p>
<pre><code class="language-js">let myPromise = new Promise((resolve, reject) =&gt; {
  let condition = true;

  if (condition) resolve('Promise is resolved.');
});
</code></pre>
<p>Here, if the value of the condition is true, we resolve the promise. The promise returns the thing inside the resolve function if it gets resolved.</p>
<h3>Reject</h3>
<p>If the <strong>promise is not fulfilled</strong>, <strong>reject gets called</strong>.</p>
<pre><code class="language-js">let myPromise = new Promise((resolve, reject) =&gt; {
  let condition = true;

  if (condition) resolve('Promise is resolved.');
  else reject('Promise is rejected.');
});
</code></pre>
<p>We have successfully created a promise object that resolves if the condition is true and rejects if the condition is false. You can modify the use case as you want but this is the basic concept with which you can create promises.</p>
<p>The next step is to use the promise.</p>
<h2>Using the promise object</h2>
<p>Before promises, we had a concept of callbacks. With callbacks, we'd create a function to do something and after the function completes its execution, we'd call a function that does something to complement the task done by the first function. This step would be repeated again and again until we reach a callback hell. Promises solve this problem.</p>
<p>We can use a series of <code>.then</code>s to use a promise, <strong>if it's resolved</strong>.</p>
<p>Let's see how we'd use the <code>myPromise</code> promise object we defined above.</p>
<pre><code class="language-js">myPromise.then((data) =&gt; console.log(data));
</code></pre>
<p>This would output the following on the console</p>
<pre><code class="language-shell">Promise is resolved.
</code></pre>
<p>If the promise is rejected, we have to use a catch to handle promise. To make the promise reject, we can change the value of the condition variable to equal <code>false</code>. In such a case, our promise gets rejected.</p>
<pre><code class="language-js">myPromise
  .then((data) =&gt; {
    // This function only gets called if
    // the promise is resolved
    console.log(data);
  })
  .catch((err) =&gt; {
    // This function gets called if
    // the promise is rejected
    console.log(err);
  });
</code></pre>
<p>After running the following program, we'll get the following output on the shell.</p>
<pre><code class="language-shell">Promise is rejected.
</code></pre>
<p>If you've noticed, the <code>data</code> and <code>err</code> we've passed on then and catch equals to the data we've passed to the <code>resolve</code> and <code>reject</code> functions in the promise object we created above.</p>
<h2>Implementation of existing fetch API on our own</h2>
<p>The fetch API in JavaScript is a recent addition to JavaScript that allows us to make AJAX requests. Here's how it looks on code</p>
<pre><code class="language-js">fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then((response) =&gt; response.json())
  .then((json) =&gt; console.log(json));
</code></pre>
<p>Here, the <code>fetch</code> requests for data on the URL. The data we receive might not be in a JSON format, therefore we change it to be a JSON on the first <em>then</em> call. The JSON response after we convert the string is passed as <code>json</code> variable on the second <em>then</em>, which is printed on the console after that.</p>
<p>If we run the code above, we get the following output on the console.</p>
<pre><code class="language-js">{
  completed: false,
  id: 1,
  title: &quot;delectus aut autem&quot;,
  userId: 1
}
</code></pre>
<p>Let's try to create a simulation of the fetch API. For simplicity, we'll not handle the network request part. We will just see how the promise is used in the fetch API.</p>
<pre><code class="language-js">function fetch(requestPassed = true) {
	return new Promise((resolve, reject) =&gt; {
		if (requestPassed) {
			resolve('{&quot;success&quot;: true,
			&quot;data&quot;: {&quot;movies&quot;: [&quot;batman&quot;, &quot;iron man&quot;]}}')
		} else {
			reject('{&quot;success&quot;: false,
			&quot;message&quot;: &quot;Database connection failed&quot;}')
		}
	})
}
</code></pre>
<p>To use this function that returns a promise, we can do the following</p>
<pre><code class="language-js">fetch()
  .then((data) =&gt; JSON.parse(data))
  .then((res) =&gt; console.log(res))
  .catch((err) =&gt; JSON.parse(err))
  .then((errorMsg) =&gt; console.log(errorMsg));
</code></pre>
<p>Here, we have a default argument <code>requestPassed</code> which is a boolean. If it is set to <code>true</code> or even <code>false</code>, we return a JSON string. We have to parse the string to JavaScript objects so that we can use that properly on our application. Therefore, on the first <code>.then</code> call, we parse the string to represent it in an object format.</p>
<p>Thank you for reading. The next blog will be about <code>async-await</code> which makes using promises even more fun.</p>


Promise is an awesome feature that exists on JavaScript. This blog covers how promises can be implemented on our applications

Promises in JavaScript

<p>Storing a password is a challenge while designing applications. We have to do it well if we don't want to compromise the security of our applications and users. I would like to briefly explain the approaches we might consider while designing an authentication system that stores users' passwords but first, it's also really important to talk about the approaches we should never take.</p>
<p>This blog is inspired from &lt;a href='https://www.youtube.com/watch?v=8ZtInClXe1Q' target='_blank'&gt;Tom Scott's video about storing passwords on Computerphile channel on YouTube&lt;/a&gt; and also my knowledge of Cryptography.</p>
<h2>How not to store passwords on a database?</h2>
<h3>Plain Text</h3>
<p>I don't think I have to mention this but <strong>plain text</strong> is a format we should never consider while storing passwords. The plain text simply is the password that the user has entered while signing up for the service.</p>
<p>For Example: If a user enters <code>123456</code> as a password, we simply store <code>123456</code> on the database.</p>
<p>So simply if the system gets compromised/hacked, we'll be showing the actual password of the user to the hacker. The main problem with this is, most of the people use the same email and password combination while signing up for multiple services. So the breacher can have access to all the services.</p>
<h3>Encryption</h3>
<p>Encryption means converting a plain text (normal text) into a cipher text (encrypted text) with the help of some key.</p>
<p>For Example: We might have an algorithm that maps letters of the alphabet with the letters that are shifted 3 positions. So, if plain text is <strong>abc</strong> then the cipher text would be <strong>def</strong>.</p>
<p>Technically, we're adding a layer of security by simply not exposing the password but there's a problem with this approach. If the breacher gets the key then he can decrypt (obtain original message) from the encrypted password easily. It's easy to do so because the encryption algorithm is known to us and the only thing we don't know is the key. So hypothetically, if the hacker has acquired the key then all the encrypted passwords in the database get compromised.</p>
<p><img src="./images/encryption-decryption.png" alt="Encryption Decryption" /></p>
<h3>Cryptographic Hash Function</h3>
<p>A cryptographic hash function is similar to encryption algorithm. The only difference is, if the message is processed with the cryptographic hash function then it is irreversible (i.e. we'll not get back the original password/message from the hash). A cryptographic hash function always generates an output of fixed length and even a slight variation of plain text will result in a totally different hash.</p>
<p>This is slightly an improvisation over encryption but still, it possesses threats. The main problem with this approach is, two passwords get converted to the same hash.</p>
<p>Simply, the breacher might perform a bruteforce attack or a dictionary attack on the system to guess the password. He might take the list guessed passwords, hash it with the hash function and if any of the hash matches the hash on the database then he has successfully decrypted the password from the hash.</p>
<p><img src="./images/hashing.png" alt="Hashing" /></p>
<h2>How to do it right?</h2>
<p>As we have discarded the possibilities of how not to store passwords on the database, let's talk about how we could store passwords well.</p>
<p>The approach that we have to take while doing so is <strong>hashing and salting</strong>. In this mechanism, a salt is simply a string of random characters that gets added to the password every time we store a new one on the database. If we do this, two different users with the same password will have a different hash.</p>
<p>The salt is <strong>generated randomly</strong> every time a new password is stored on the database. The salt is a long and random string which increases the cost of doing a bruteforce attack.</p>
<p><strong>Hashing Only</strong></p>
<pre><code>hash(password)
</code></pre>
<p><strong>Hashing and Salting</strong></p>
<pre><code>hash(salt + password)
</code></pre>
<p>The salt is included in the password, therefore we don't have to separately store the salt.</p>
<h2>Example of using salting and hashing on Node.JS</h2>
<p>To do this, we need a package called <code>bcrypt</code> which we can download from the NPM registry.</p>
<pre><code class="language-shell">npm i bcrypt
</code></pre>
<p>To hash the password, we need to generate a salt. After the generation of salt, we hash the password along with the randomly generated salt. All this is handled by the bcrypt package so we don't have to think much about it.</p>
<pre><code class="language-js">const hashPasswordAsync = async password =&gt; {
	const salt = await bcrypt.genSalt()
	const hash = await bcrypt.hash(password, salt)
	/*
	 * Instead of logging on the console
	 * you can store the password on the DB
	 */
	console.log(hash)
}

hashPasswordAsync('123456')
</code></pre>
<p>I ran the application multiple times and every single time, I was able to get a different hash for the same password <code>123456</code>.</p>
<p>Here are some of the outcomes.</p>
<pre><code class="language-shell">$2b$10$ZSiqlDuvOrjg8AII94LsROYH.rq.sD0dHaI1P/WxdJkMo7d3Q1FbS
$2b$10$YQYR5GjknzFv0majqhjuQ.e6/P4esEZUmEWBR3P8HwD/AHyNp7Q5y
$2b$10$f9AjCHiiGkgamZ81Tzgu6OZcq6h2sNwTrGZW2DrgpO//BvDBvgMn.
</code></pre>
<h2>Some tips on creating passwords for normal user</h2>
<p>As a user, your instinct will be to store a password that is common for every platform because you're likely to forget your password if you use a different password for every different platform. This is not what you should be doing and I highly recommend you to use a password manager in this case.</p>
<p>Also, do not create a password yourself. Let the password manager generate a random password and store it for you. If you do so, you only have to remember a strong master password that unlocks the password manager which in return gives you access to every password you have stored on the password manager.</p>
<h2>Conclusion</h2>
<p>Thank you for reading the blog. If you liked it, please subscribe to my newsletter to not miss my uploads.</p>


Storing passwords and encrypting well is a challenge. So how to do it and do it well?

Storing passwords the right way on a database with an example on Node.JS backend

<p>Git and GitHub are important for software engineers/developers. To understand Git and GitHub, we have to understand version control first.</p>
<p><strong>Version Control</strong> simply means how we can switch between the versions of code. With version control, we can break the code at some instance and if necessary switch back to the instance when the code was running fine. This can also be useful if you have a client who complains a lot and asks you to make a lot of changes all the time.</p>
<h3>What is Git?</h3>
<p><strong>Git</strong> is a distributed version control system created by <strong>Linus Torvalds</strong>. With the help of git, we can control the version of the code. It is the most popular version control tool that exists. &lt;a href='https://git-scm.com/' target='_blank'&gt;Read more&lt;/a&gt; about git on the official website.</p>
<h3>What is GitHub?</h3>
<p><strong>GitHub</strong> is a tool that works well with git. With GitHub, we can collaborate in teams in a project. Simply, GitHub is a website or a cloud platform that helps us to host Git repositories.</p>
<hr />
<h2>Some common Git Terminologies</h2>
<p><strong>Repository</strong> is the most commonly referred term in Git. It simply means a project directory.</p>
<p><strong>Commit</strong> is another term that is used while using Git. When we hit <code>ctrl + s</code> or <code>cmd + s</code>(on Mac), the file gets saved to the file system. But if we commit the code, it gets saved to the git history.</p>
<p><strong>Push</strong> simply refers to uploading the current local changes to the server (i.e. GitHub in our case).</p>
<p><strong>Pull</strong> refers to downloading the changes that exist, from the cloud to our local machine.</p>
<p><strong>Clone</strong> means duplicating a repository that exists on the server to our local machine.</p>
<hr />
<h2>Some git commands</h2>
<h3>Initialize an empty git repository</h3>
<p>To initliaze a git repository, navigate to your project directory and run the following command on your terminal or shell.</p>
<pre><code class="language-shell">git init
</code></pre>
<h3>Stage files to commit</h3>
<p>After making a change to project files, if we wish to commit the changes, we have to move the unstaged/untracked files to the staging area. To do so, we add the necessary files to commit.</p>
<pre><code class="language-shell">git add &lt;filename&gt;
# OR to add all files at once
git add .
</code></pre>
<h3>Commit the changes</h3>
<p>Commit allows us to register the changes into git history.</p>
<pre><code class="language-shell">git commit -m 'commit message'
</code></pre>
<h3>Connecting to a repository that exists on the cloud</h3>
<p>To connect our local repository with the repository that exists on the cloud, we have to use the following command.</p>
<pre><code class="language-shell">git remote add origin &lt;link to the repository&gt;
</code></pre>
<h3>Pushing changes to the GitHub repository</h3>
<p>If we want to push/upload the local changes into the cloud, we have to use the following command.</p>
<pre><code class="language-shell">git push origin &lt;branch name&gt;
</code></pre>
<h3>Pulling the latest changes that exist on the cloud to a local machine</h3>
<p>If we want to pull or download the changes that exist on the cloud, we have to pull it into our local machine.</p>
<pre><code class="language-shell">git pull origin &lt;branch name&gt;
</code></pre>
<hr />
<h2>Branching</h2>
<p>Branching is one of the most important concepts in git. We generally create branches to isolate a feature from the rest of the code. For example, we might have a code running fine on a production environment. We might want to add a new feature. In this case, we cannot risk the code running in the production environment to stop working. This is when we create branches. We can then work on a new feature, complete the feature, test it and then merge with the code in production.</p>
<p>To switch branch that already exists in the repository,</p>
<pre><code class="language-shell">git checkout &lt;branch name&gt;
</code></pre>
<p>If the branch doesn't exist yet,</p>
<pre><code class="language-shell">git checkout -b &lt;branch name&gt;
</code></pre>
<h3>view the list of the branches</h3>
<pre><code class="language-shell">git branch -a
</code></pre>
<h3>merge some branch with the current branch</h3>
<pre><code class="language-shell">git merge &lt;branch name&gt;
</code></pre>
<p>for example, you're on master branch, you want to merge it with a branch called dev, you'd navigate to master branch and then do the following,</p>
<pre><code class="language-shell">git merge dev
</code></pre>
<h3>view the commits history</h3>
<p>To see the commit history, use the following command</p>
<pre><code class="language-shell">git log
</code></pre>
<p>To exit the log, press Q.</p>
<h3>Navigating to a specific commit</h3>
<p>Sometimes we might have to refer to a commit if things break. To do so, we need a commit identifier. When we do <code>git log</code>, we get to see all the commits that we've made including an id like <code>e2123ndsadsadzoqm23</code>. To switch into a specific commit, we simply use the following command</p>
<pre><code class="language-shell">git checkout &lt;commit id&gt;

# example
git checkout e2123ndsadsadzoqm23
</code></pre>
<h3>Reverting changes to a specific commit</h3>
<p>Sometimes we might have to revert our changes to a specific commit. To do so, we need a commit ID (explained above). To revert to specific commit, use the following command</p>
<pre><code class="language-shell">git reset --hard &lt;commit id&gt;

# example
git reset --hard e2123ndsadsadzoqm23
</code></pre>
<h2>Conclusion</h2>
<p>Thanks for reading this guide. I want to make it a series and in the next one, I'll be talking about collaboration with GitHub among teams. I additionally will also be covering about deploying our static websites using GitHub and netlify. If you don't want to miss those contents, subscribe to my newsletter by entering your email below.</p>


Git and GitHub remains vital in software engineering. This blog aims to provide the basics of it.

A beginners guide to Git and Github

<p>Error handling is vital while making AJAX requests in any tool. The solution I propose can be applicable for all kinds of frameworks or libraries. I am used to working with React.JS and in this blog, I talk about the approach I use handling errors that occur during AJAX requests.</p>
<p>There can be 3 kinds of situation where we might receive errors.</p>
<h3>Request could not be sent</h3>
<p>This kind of error might occur if there's no internet connection or the server is not running.</p>
<h3>Response is recieved that has error message on it</h3>
<p>This kind of error might occur in the following scenarios.</p>
<p>We have a server that authenticates the users. We send username and password to the server and the password is incorrect. In this case, we have sent the data, the server has recieved the data but the information we're sending with the request is invalid.</p>
<p>This is the easiest way to handle error because we on the front end (or the side to send request), don't have to think what might have gone wrong. If the API is built considering the errors, it will respond with proper error message.</p>
<p>Axios automatically throws errors that lie out of the range <em>2xx</em> and the kinds of error I have mentioned above returns a status code that falls out this range.</p>
<h3>Some other internal error has occured</h3>
<p>I have never faced error of this kind while building application but there might be something that might go wrong. We don't know what it is but there might be something. In this case, we could consider handling these kinds of errors.</p>
<p>Below, I define a function that makes an AJAX request to a dummy API and handle the errors I've mentioned above.</p>
<pre><code class="language-js">const makeRequest = async () =&gt; {
  try {
    const response = await axios.get('https://somedummyapi.com');
    return response;
  } catch (error) {
    if (error.request) {
      // Maybe we don't have internet connection
      // or our server has stopped
      console.log('Could not connect to the server');
    } else if (error.response) {
      // Server received a request
      // and responded with a status code
      // that falls out of the range 2xx.
      console.log(error.response.data);
    } else {
      // something happened while making the request
      // that we're not really aware of
      console.log(error);
    }
  }
};
</code></pre>
<p>These are the most common types of error I try to handle while building JavaScript Apps with React and I think you should too. 😄</p>


Handling major errors that might occur while making AJAX requests via axios or similar technology

Error handling while making AJAX requests in JavaScript

<p>A state in react doesn't have a type. A counter can hold a value of a number at an instance and it can be changed into something else like a string in another instance. Doing this causes no errors and there isn't one either.</p>
<p>Though this doesn't raise an error, an error might arise later unintentionally. Once I was building an app that made an API request to a server and the API returned an array of items. I looped over the array of objects using the map method that exists in the Array prototype. I had initially assigned the state for items object to be a string.</p>
<pre><code class="language-jsx">const App = () =&gt; {
  const [items, setItem] = useState('');

  useEffect(() =&gt; {
    /*
     * Make an API call
     * Set the new state to be the response from API call
     */
  }, []);

  return (
    &lt;div&gt;
      &lt;ul&gt;
        {items.map((item) =&gt; (
          &lt;li&gt;{item.name}&lt;/li&gt;
        ))}
      &lt;/ul&gt;
    &lt;/div&gt;
  );
};
</code></pre>
<p>For simplicity, I have created a dummy data that I might get as a response from an API. In order to simulate the feel of a real API responding to an AJAX request, I have created a setTimeout that resolves after 3 seconds.</p>
<pre><code class="language-jsx">const dummyData = [
  {
    id: 1,
    name: 'Smith',
  },
  {
    id: 2,
    name: 'Dan',
  },
  {
    id: 3,
    name: 'Prashant',
  },
];

useEffect(() =&gt; {
  setTimeout(() =&gt; setItems(dummyData), 3000);
}, []);
</code></pre>
<p>On the surface, this code looks normal but it's not. The problem lies here</p>
<pre><code class="language-js">const [items, setItem] = useState('');
</code></pre>
<p>I have initially assigned items to be an empty string. Now if we see the return statement, I have mapped over items (which I expect to be an array). The value of items is an array only after the network request is resolved and the items is set to the new value we get from the API.</p>
<pre><code class="language-js">return (
  &lt;div&gt;
    &lt;ul&gt;
      {items.map((item) =&gt; (
        &lt;li&gt;{item.name}&lt;/li&gt;
      ))}
    &lt;/ul&gt;
  &lt;/div&gt;
);
</code></pre>
<p>Initially when <code>items = ''</code>, <code>items.map</code> fails to execute because map method doesn't exist on a string.</p>
<blockquote>
<p>You should always declare/initialize your state carefully. If you know the response you're going to get from an API request then assign it to be the type you're going to get.</p>
</blockquote>
<p>So you could do something like this</p>
<pre><code class="language-js">const [items, setItem] = useState([]);
</code></pre>
<p>Just a minor change from <code>''</code> to <code>[]</code> would save me hours of random google searches and scratching my head.</p>
<p>I hope you like the blog. If it was worth your time then please consider subscribing to not miss future updates.</p>


This blog explains about a silly error people make while doing a project in React

A minor error we make while creating a React's state

<p>On October 19th 2019, I was supposed to give a presentation or a conference talk on <strong>Building and Deploying Node.JS apps with Azure</strong> but things took a turn and I had to slightly modify the scope of my session and do something little different or less than what I was supposed to do. The reason why I had to do was lack of internet connectivity, the time frame of the session and whether students/participants would grasp all the information we provide or not because it was already too much till that point.</p>
<p><img src="images/presentation.JPG" alt="Presentation" /></p>
<h2>About the Conference</h2>
<p>The event we organized was called <strong>STUDENT DEVELOPER DAY</strong> and 4 of us were organizers. <a href="https://twitter.com/diwastha">Diwash Shrestha</a>, <a href="https://twitter.com/bjungbogati">Binod Jung Bogati</a> and <a href="https://twitter.com/Ddr_Shrez">Yunip Shrestha</a> were the other 3 members of the organizing team. The content for the event was provided by Major League Hacking.</p>
<h2>What does it feel like to organize and speak at a conference?</h2>
<p>I would not like to give myself much credit in the organizing part of the event as I did not do much on it, except designing some banners and the posts for social media. All credit goes to my brothers Diwash and Binod for working so hard in the organizing part of the event.</p>
<p>Whenever I try to do something, I always think about the impact it might have. In terms of impact, this event was a huge success because I was able to teach what I know to about 30-40 people and also, due to the feedback I got on the days that followed the event, I am overwhelmed by the appreciation by the people.</p>
<p>We were really able to give something to the tech community of Nepal from the session and we are going to organize more events in the future. That's a promise.</p>
<p><img src="images/teaching.JPG" alt="Teaching" /></p>
<h2>The Networking Part</h2>
<p>Whenever you organize or attend events, you're likely to meet new people. This event was not an exception. I got to meet with someone who has been programming since 1983, which is long before I was even born and also someone who wants to improve the quality of software engineers in Nepal. Events also let you market yourself and your skills in the community. I guess it will also get me some more reach in the blogs I write. 😉😉</p>
<p><img src="images/award.JPG" alt="Token Of Love" /></p>
<h2>Learning from the failures</h2>
<p>Whenever you organize events, you want it to go smoothly and be right in all the aspects but the possibility of the event going right as you expect is thin. You might ask why? Here are the reasons why.</p>
<ul>
<li><strong>Nepali Time</strong> is the synonym for <strong>unpunctuality</strong> in Nepal.</li>
<li>People might not care about events. I invited more than 15 people I know in the events but only 3 of them were present.</li>
<li>Getting the target audience is also tough most of the times because the content might be too basic for a group of audience and too tough for the other.</li>
<li>The internet in Nepali colleges are so bad. I don't understand the purpose of internet service in colleges because it's so difficult to get connectivity.</li>
</ul>
<p>These are the things that you have to be prepared to tackle during events. You can solve some of them.</p>
<p>To solve the unpunctuality problem, you can host an event at 11 AM and tell students that the event is going to start at 9, might solve the issue. 😉</p>
<p>Don't expect your friends to attend the events because they will not. The people close to you will have least amount of appreciation for things that you're trying to do.</p>
<p>To solve the issue with target audience, try to be in the middle ground. Also, you can study the target audience prior to the event and deliver content accordingly.</p>
<h2>Next events</h2>
<p>I don't have a proper announcement for this but some time during November, the team that organized Student Developer Day is planning to do another event. Stay tuned to this blog and my social media in order to get notified for the announcement.</p>


I am sharing my experience of speaking in a tech conference through this blog.

Organizing and Speaking at a tech conference

<p>When you have a project that uses API keys or any other private keys, and want to push it on GitHub, you might probably want to hide those details from any other people who see the code. That's when you have store the API key as environment variable on a <code>.env</code> file and add it on a <code>.gitignore</code> file on the root of the project. Lucky for you all, <code>create-react-app</code> is already configured with git and adds all the list of files and folders that should not be pushed onto GitHub or anything similar like gitlab or bitbucket.</p>
<h2>What is create-react-app?</h2>
<p><code>create-react-app</code> is a tool created by facebook to create applications with <strong>React.JS</strong>. It creates all the necessary build setup with no manual configuration required. To initialize a react app using <code>create-react-app</code> go to your terminal and type the following:</p>
<pre><code class="language-shell">$ npx create-react-app hiding-env
</code></pre>
<p>This gives you the bare minimum setup required to start building React applications.</p>
<p>If you want to learn about environment variables then check out &lt;a href=&quot;https://www.youtube.com/watch?v=ADh_OFBfdEE&quot; target='_blank'&gt;this&lt;/a&gt; video by Jacob Sorber who is a computer scientist and a professor.</p>
<p>Coming back to our react app, the folder structure now must look like this</p>
<pre><code>- hiding-env
	- .git
	- node_modules
	- public
	- src
	package.json
	.gitignore
</code></pre>
<p>So now, create an <code>.env</code> file on the root of your project.
<code>create-react-app</code> comes with all the necessary configurations to use environment variables in our applications so there's no setup required.</p>
<p>Open the <code>.env</code> file and create an environment variable. The environment variable must be prefixed with <code>REACT_APP</code> so any variable you name must be like <code>REACT_APP_MY_KEY</code>. It is something enforced by create-react-app. You can read the docs &lt;a href='https://create-react-app.dev/docs/adding-custom-environment-variables/' target='blank'&gt; here&lt;/a&gt;.</p>
<p>Open <code>.env</code> variable and add the following key. It means nothing and just for the test purpose.</p>
<pre><code class="language-bash">REACT_APP_API_KEY=123jkawqo-123@3
</code></pre>
<p>Go to the <code>app.js</code> file inside <code>src</code> and add the following code inside the <strong>App component</strong>.</p>
<pre><code class="language-js">const key = process.env.REACT_APP_API_KEY
console.log(key)
</code></pre>
<p>If you run the development server for the app and check the console you will then see the key being printed on the console of your browser.</p>
<h3>Changing the variable depending on environment</h3>
<p>There might be a case when you have to hit to a particular endpoint while you are in a development environment and a different endpoint while you are in a production environment. <code>process.env.NODE_ENV</code> gives us the information about the environment the app is currently running on. So in order to do that we can do something like the following.</p>
<p>First add the URL to the development and production server in env file</p>
<pre><code class="language-bash">REACT_APP_DEV_SERVER=localhost:3000/api/some_api
REACT_APP_PROD_SERVER=https://bigomega.dev/api/some_api
</code></pre>
<p>Then, check the environment you're on with the following code.</p>
<pre><code class="language-js">if(process.env.NODE_ENV == 'development') {
	// do something
} else {
	// do some other things
}
</code></pre>
<p>What we want to do is create a url variable that points to either development server or the production server so for that, we can do</p>
<pre><code class="language-js">if(process.env.NODE_ENV == 'development') {
	const url = process.env.REACT_APP_DEV_SERVER
} else {
	const url = process.env.REACT_APP_PROD_SERVER
}
</code></pre>
<p>You can refactor the code inside the App component or any other component as follows:</p>
<pre><code class="language-js">function App() {
	const { NODE_ENV, 
			 REACT_APP_DEV_SERVER, 
			 REACT_APP_PROD_SERVER, 
			 REACT_APP_API_KEY } = process.env

	const url = 
	  	NODE_ENV == &quot;development&quot; ? REACT_APP_DEV_SERVER : REACT_APP_PROD_SERVER
  
  	const key = REACT_APP_API_KEY
  	console.log(key, url);

  	console.log(process.env.NODE_ENV)

  	return(&lt;div className=&quot;App&quot;&gt;Hi&lt;/div&gt;)
}
</code></pre>
<p>Check the above example and explore the code yourself at &lt;a href='https://codesandbox.io/s/hiding-env-g8r44' target='blank'&gt;this link&lt;/a&gt;.</p>
<p>You can optionally create a context or use redux to store these keys on a global state so that you do not have to check for environment and set URL on every file you encounter.</p>
<p>Thanks for reading.</p>


How to use environment variables from .env file using create-react-app

Hiding API keys in .env files with create-react-app

<p>Most of the people find recursion difficult but it's not. Students find difficulty in learning it because of the examples that teachers and online tutorials aim to provide. So in this blog, we are going to talk about recursion with a very basic example of recursion using JavaScript. Recursion is a concept so it is language independent. If you know how to define and call a function in a language that you are using then you can pretty much go along and understand everything that I want to cover in the blog.</p>
<blockquote>
<p>Simply, recursion is a concept in which a function calls itself again and again until some condition is met. A function that uses this practice and calls itself is called a recursive function. In recursion, the function calls itself with the smaller instance of itself.</p>
</blockquote>
<p>We are going to create a function that takes in a number as an argument and makes a count down from it. For example: <strong>countDownFrom(3) will print 3 2 1 on the screen.</strong></p>
<p>Open your web developer console on your browser by opening a browser and pressing <code>ctrl + shift + j</code> and write a bare minimum function to get started with.</p>
<pre><code class="language-js">function countDownFrom(n) {}
</code></pre>
<p>The first thing that we want to do when the function start executing is to print whatever there is in n. In code, that would look something like this</p>
<pre><code class="language-js">function countDownFrom(n) {
  console.log(n); // highlight-line
}
</code></pre>
<h2>The two cases in a recursive function</h2>
<p>So as I said, recursive function calls itself until some condition is met. They are <strong>base case</strong> and <strong>recursive case</strong>.</p>
<h3>Base Case</h3>
<p>The base case is the case when the function stops calling itself and returns some value which stops its recurring operation. For example, in the case of a countdown, when the value of the counter is set to 1, it must exit the function. To do that we can simply return without returning anything i.e. null/undefined.</p>
<pre><code class="language-js">function countDownFrom(n) {
  console.log(n);

  // highlight-start
  if (n == 1) return;
  // highlight-end
}
</code></pre>
<h3>Recursive case</h3>
<p>The recursive case is the case in which the function keeps calling itself until the base case is arrived. So in the case of a countdown, if the countdown starts from 5, the function calls itself when the value of counter variable(denoted by n in our case) is 5, 4, 3 and 2 but as soon as the value is 1, it returns. Easy? Let's write that in code.</p>
<pre><code class="language-js">function countDownFrom(n) {
  console.log(n);

  if (n == 1) return;
  // highlight-start
  // reduce the value of n by 1
  // and call the function again
  // with the new value of n
  else countDownFrom(--n);
  // highlight-end
}

// calling the function here.
countDownFrom(3);
</code></pre>
<p>The function call at the else statement simply decreases the value of n and calls the function itself as explained in the comments in the code block.</p>
<p>The image below explains what's going on.</p>
<p><img src="images/Recursion.png" alt="Recursion" /></p>
<h2>Refactoring</h2>
<p>If you look at the code the else statement is absolutely unnecessary because if the value of n is 1 it returns and if it's not the code below executes. So, if it's not one it will execute the codes below. So, we can refactor it as</p>
<pre><code class="language-js">function countDownFrom(n) {
  console.log(n);

  if (n == 1) return;

  countDownFrom(--n);
}

countDownFrom(5);
</code></pre>
<h2>Conclusion</h2>
<p>Thank you for reading the blog. Feature to subscribe on the mailing list will be coming soon so till then you can follow me on social media to get updates on the new blogs.</p>


This blog explains what recursion is with an example on javascript

Recursion

<p>In the field of technology, there is always so much to learn and explore. Most of us get overwhelmed by the number of technologies that we want to or need to learn. We all have been in a situation where we have learnt a technology or a tool but only that tool might not be enough to create a project that we want to complete. There might not be the necessity to learn but still, we push ourselves to learn new technology or more technologies that we have not used before due to the fear that something else might be the next big thing and you might have to switch in a rush. We also learn new technology or tool to become problem solvers, not just a trained professional who specializes in using a particular tool. So, what approach to take while learning a new tool or technology? I am going to say a few techniques that I have tried. I am also going to say if it is appropriate or not. I hope it helps you.</p>
<p><img src="images/js-technologies.jpeg" alt="Technologies" /></p>
<blockquote>
<p>Note: Tools and technologies in this blog refer to languages, libraries or frameworks in this blog.</p>
</blockquote>
<h2>Watching tutorials</h2>
<p>If you have been in a situation where you watch a tutorial then the next and then the next till you realize that you have reached tutorial hell then raise your hands. This is the problem with watching tutorial videos. You get addicted to them and when you have to try something on your own, you don't be able to because you're not trained to that mindset. I have been in similar situations and I know how frustrating that gets overtime. Nowadays, I am trying to move away from the tutorials and I don't mean I avoid them completely. I take a slightly different approach than what I have done up to the moment. So the way I make use of tutorials is to watch crash courses on youtube and jumping on a personal pet project instead of a full 20+ hours of project-based tutorial learning. I also watch videos on advanced topics on some tool. I like videos from the youtube channel named &lt;a href='https://www.youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q' target='_blank'&gt;funfunfunction&lt;/a&gt;. He doesn't create a tutorial but talks about concepts on JS mostly.</p>
<h2>Official Documentation</h2>
<p>People and organization that create a tool want more people to use that tool. In order to do that, they have to create great documentation which everyone can understand so that more people try to adopt the technology. I want to admit it shamelessly that this approach has mostly failed me.
However, there is a slightly different approach that has worked quite well. In almost every documentation, there is a section with tutorials that walks you through all the necessary concepts of that technology. This approach is quite nice as you will have a project to build along with learning that particular technology.</p>
<p><img src="images/react-js.png" alt="ReactJS" title="React JS" /></p>
<h2>Interactive Tutorials/Resources</h2>
<p>This includes site like &lt;a href='https://freecodecamp.org' target='_blank'&gt;FreeCodeCamp&lt;/a&gt; or &lt;a href='https://www.codecademy.com/' target='_blank'&gt;Codecademy&lt;/a&gt; etc. These sites give you resources to read on the side of the screen followed by a challenge to solve as you go through the resources to learn the technology. This is quite an awesome way to learn and in fact, I seriously started learning programming with JavaScript through FreeCodeCamp. This approach not just gives you the content but a challenge to solve as soon as you complete the content to study. This improves you to think differently and your mindset will not be fixed to tutorials only. A lot of times I have seen people who go through the tutorial and complete it but when asked to solve a problem out of the tutorial, they struggle. So it is really important to not just follow the tutorial but also to develop a problem-solving mindset and I think Interactive tutorials do just that.</p>
<p><img src="images/freecodecamp.png" alt="FreeCodeCamp" title="FreeCodeCamp" /></p>
<h2>Building Projects</h2>
<p>I have enrolled in an internship and there I was able to learn quite a lot with this approach to learn new technology. So this approach starts with a project in mind. You think of a project or a problem and then understand the application's requirement then you approach the application, feature by feature. You learn a lot with this approach but I would not really recommend it to you unless you have a mentor who could help you while you do so.</p>
<p>If you learn with this approach then you'll learn what feature of a language/library/framework you must specialize on. You will have a project to complete and show it to people. It also helps you build your portfolio. So, if you have a mentor, this is the best approach one can take to learn new technology.</p>
<p>I will cover more on this topic on my next blog. It will be dedicated blog for this approach.</p>
<h2>Conclusion</h2>
<p>In a world where everything is changing and new things coming every single time, it is really difficult to keep up with our knowledge and expertise. We must adapt to be familiar with new technologies all the time. There is no other way around it so we must get used to doing this all the time. It is also important to figure out what technique of learning helps you the best so that when the time comes, you can easily make the switch. In this blog, I tried to mention a few that have helped me to learn new technologies. I hope it helps you too.</p>
<p>Glad you stuck around for this long and I am really sorry for not being able to upload contents on this blog regularly. I am planning something with the site and some other things too and I hope to be more regular with the content I post on this blog.</p>


In this blog, I talk about different learning techniques that works best to learn a new tool or technology

Techniques For Learning a New Technology Or a New Tool

<p>Computer Science is one of the most popular career path for students in this generation. Factors like the scope of it and the pay rate in the field excites many. The case is not different in Nepal and this has few problems. In this blog, I will try to provide my opinion, the problems and not the statistics about Computer Science in the context of Nepal.</p>
<p>I study Computer Science and Information Technology at Sagarmatha College of Science and Technology which is affiliated to Tribhuvan University. At the time of writing, I am in the 4th semester.</p>
<h2>Computer Science</h2>
<p>According to Wikipedia, Computer Science is the study of processes that interact with data and that can be represented as data in the form of programs. It enables the use of algorithms to manipulate, store, and communicate digital information.</p>
<p>Now as we have at least known what Computer Science is, it's really important to solve the misconception about what Computer Science is not. I found a great article by the Boston Univeristy which talks about what is computer science what is it not and many more. You can read the article &lt;a href='https://www.cs.bu.edu/AboutCS/WhatIsCS.pdf' target='_blank'&gt;here&lt;/a&gt;. I am going to briefly write it here instead of copying everything.</p>
<blockquote>
<p>So according to the Boston University, Computer Science is not just about building computers or writing computer programs like astronomy about building telescopes, biology about building microscopes or music about building musical instruments. Computer Science is not about the tools we use to solve a Computer Science problem. It is about when to use the tool to solve a particular problem. Computer Science problems don't even require Computers considering the fact that these problems were solved even before computers were built. So, Computer Science is about building computers, writing computer programs and <em>so much more</em>....</p>
</blockquote>
<p><img src="./images/cs.png" alt="Computer Science" /></p>
<h2>Computer Science in Nepal</h2>
<p>Nepal is a small country with 10 Universities in the entire country which I didn't even knew before the time of writing. I knew 4 of them and they are Tribhuvan University, Kathmandu University, Pokhara University and Purwanchal University. My unawareness might be because of the quality of them and could also mean that I am not interested in the course they provide like Nepal Sanskrit University which probably teaches the sanskrit language which I am not sure of and it's not the concern right now. Let's move on to discuss about the most popular computer science course in Nepal. I am covering it specifically because this is the course that has the potential to fulfill the demand of IT in the context of Nepal.</p>
<p><strong>Tribhuvan University</strong> is the largest university of Nepal. It has affiliated colleges all over the country and hence the number of students enrolled in the univeristy is massive. In terms of no of student enrollment, TU is regarded as one of the top univerisities. I am aware of 4 courses TU provides in the field related to computers. They are Bachelor's of Science in Computer Science and Information Technology (B.Sc CSIT), Bachelor of Engineering in Computer (B.E. Computer), Bachelor of Arts in Computer Application (BCA), and Bachelor in Information Management (BIM). All these subjects deal with similar core subjects related to computers and differ in the additionals they provide like BIM, which deals with Computer and also the use of it in business. The focus of my blog would be about CSIT as it is their core Computer Science subject.</p>
<p><strong>B.Sc CSIT</strong> is a 4 year (8 Semester) course. There are more than 50 colleges affiliated to the Tribhuvan university that teaches CSIT in Nepal. <strong>CSIT is a research oriented course that focuses more on thoretical computations, design and analysis of algorithms, the internal workings of a computer etc and it keeps development/engineering of softwares and hardwares secondary.</strong> The subjects covered in this course are the Fundamentals of Computer Programming with C, Object Oriented Programming with C++, Physics, Calculus, Linear algebra, Statistics, Discrete Mathematics, Data Structures and Algorithms, Design and Analysis of Algorithms, Theory of Computations, Compilers, Operating Systems, Databases, Artificial Intelligence, Computer Networking and more. There are a lot of prospects and challenges in this particular course. The syllabus of the course is really good and upto the international standards but there are negative factors that outweighs the benifits.</p>
<h2>The problems with Computer Science in Nepal</h2>
<p>The benefits of Computer Science in Nepal is not the same as it is in other countries. No one is sane here. Students, teachers, university, college and companies contribute in this equally and that frustrates me which can actually be considered as the point of this article to be honest.</p>
<h3>CSIT, A Safe Landing</h3>
<p>Go ahead and try to make an estimation about how many students who enroll in CSIT have enrolled in CSIT because they are really passionate about Computers and the Science revolves around it. Do the numbers frighten you? It does to me. Let me explain with context and the result.</p>
<p>Currently, there's a large population of students who choose to study CSIT if they don't get enough scores to qualify for the scolarship in MBBS, Nursing (and similar faculties) or Engineering entrance. I don't want to blame those students because the faculties like MBBS, Agriculture, Nursing etc have unaffordable fee strcuture for a middle class family from Nepal to even think it as a possibility. CSIT has been a place for the safest landing for this group of people because of job security and pay rate. I think Computer Science will never be a great field in Nepal until people stop treating it as a faculty to join when there's no other option left. However, I have also heard stories from people who had never even seen a computer but join computer science for their undergraduate degree and have reached in a successful position. Those people, in their position are not in that situation because of their past. There was a factor that determined their success and it is passion. They were able to bridge the void that existed between the knowledge they had and the knowledge they wanted to acquire. There is a possibility to have a fruitful career in Computer Science even as an alternative if you make it your passion after you join it.</p>
<blockquote>
<p>Like Computers, Success in computer science is determined by a binary and some exceptions. You're either passionate about it or you're not and the exception is you might simply get lucky and not everyone is lucky.</p>
</blockquote>
<p>Due to this reason, CSIT has been filled with students who are not passionate. How can someone excel in a field in which he doesn't feel passionate about?</p>
<h3>Colleges</h3>
<p>The other problem CSIT faces is the colleges that teach CSIT teach you the syllabus not the essense of the course. Not all but most of the teachers are too lazy to even get them updated with latest available technologies. Don't you believe me? Ask your C++ teacher the current stable version of C++. You'll get the answer. 😉</p>
<p><img src="https://media.giphy.com/media/bPTXcJiIzzWz6/giphy.gif" alt="No Idea" /></p>
<p>I don't mean to disrespect any teachers. I am trying to express the reality. I would also like to thank those teachers who are working really hard to teach computer science as more than syllabus and there are a lot of them too.</p>
<h3>University and the entire Country</h3>
<p>There is simply not enough resource available for computer science in Nepal. Suppose there's a student who wants to do research in the field of IoT in Nepal. Where does he get the support from and is there even a lab where he can continue his work?</p>
<p>This is too much to expect from the university. There is too much carelessness going on in the case of exams. Sometimes the question are out of syllabus. The checking of exam papers is so poor. There has been a case in which someone I know has got more scores than he attempted.</p>
<h3>The Companies</h3>
<p>The number of companies in Nepal who are willing to take a batch of interns and be willing to provide them industry level skills can be counted in fingers. There are companies in Nepal who make interns do client projects with no assistance and pay nothing when they are making money out of it. To be able to fit in this kind of market the only thing a student can try to do is teach himself the required skills to fit in the market.</p>
<h3>Situation outside the Kathmandu Valley</h3>
<p>In Nepal, everything is centralized inside the Kathmandu valley. The students outside of Kathmandu don't even have proper internet connection and enough lab facilites to complete their experiments specified in the syllabus.</p>
<p>I interacted with a teacher of mine who worked as the coordinator of a CSIT college outside of the Kathmandu valley and he says the students have to limit themselves with a lot of knowledge and exposure outside the valley. They don't even have teachers in the region to teach them skills outside of the syllabus so for internship they have to come to the capital for <strong>training, not internship</strong> in their final semester.</p>
<p>Students inside Kathmandu valley get to attend a lot of free workshops and technical seminars or meetups which is not possible outside the valley. Exposure in the community is really necessary in the case of the tech industry. In the regions outside the valley, students just have one option. It is to limit themselves to the course content which is not enough.</p>
<h2>The Positives About CS in Nepal</h2>
<p>I don't want to discourage anyone by saying all the negatives about the course. There are positive aspects too. I would like to talk about them briefly because there are just few aspects I see as the possibilities. There are still great companies, colleges that teach students with the contents outside of the syllabus but the number of them are few and in the case of college, expensive too.</p>
<h3>Positives in CSIT</h3>
<p>CSIT course is an affordable course with a lot of prospects. In the past, CSIT was really unmanaged but now it has better management. The course now has been updated to meet the world demands.</p>
<h3>Digital Revolution</h3>
<p>Nepal is going through a digital revolution. In the near future, there are going to be a lot of governmental and private jobs in the field of Computer Science in Nepal. There are a lot of possibilites and it's going to grow in the future.</p>
<h3>Unlimited scope outside the country</h3>
<p>The best thing about computer science is it is not centralized so you can really fit in anywhere in the world if you have skills. Programming language is same everywhere, data structures are not going to change &amp; the algorithms too.</p>
<h2>My Suggestion</h2>
<p>I might have said a lot of cons about the situation of CS in Nepal but there are things that I would like to suggest which would eventually help you in your career.</p>
<h3>Try to get outside of the syllabus</h3>
<p>Tech industry is always changing and you need to update yourself with the latest and greatest available technology. It is mandatory which is why from your earlier semesters, you need to learn about latest and greatest available technology as you will be working on them later.</p>
<h3>Understand the value of a particular subject and how things work internally</h3>
<p>Almost every student studying CS curses the course by arguing about the existance of some subject with no use in real life. This is where people are wrong. Every subject has some application which we are too lazy to search for. You need to know the unobvious application of something. Knowing the internal working of technologies will help you figure out your interest on a particular subject.</p>
<h3>Attend events and try to organize some</h3>
<p>You will get to learn a lot from events and people you meet in the events. It will increase your exposure in the industry and will help you later in your career. Organizing events will teach you management skills which will make your profile stronger.</p>
<h3>Respect teachers &amp; try to interact with them</h3>
<p>Sometimes, teachers have more to offer than what they seem in reality. So it's really important to raise questions to them and interact with them to get your confusion cleared.</p>
<h2>Conclusion</h2>
<p>A lot of what I said above might be discouraging to people but that is how the reality looks like. I cannot avoid it even if I try to because the nation is moving towards a digital revolution and there is a huge requirement of qualified manpower in the nation and also outside of the nation. Financial stability is a must so choosing computer science for it is not wrong as well. But your passion determines success. Financial security is highly dependent on your willingness to take risk to dedicate time to learn and flourish your skills.</p>


The prospect, challenges and my opinion about CS in Nepal.

The State Of Computer Science In Nepal

<p>I tried react hooks and it's pretty awesome. With hooks, you can create functional components that can <strong>store state</strong>. It would not have been possible earlier. Hooks are a newer addition in the react library. They are included in the react 16.8 stable release.</p>
<p>In this blog, we will explore hooks briefly by creating a simple counter app. To get started open your terminal and type the following commands &amp; open the project in the code editor of your choice.</p>
<pre><code class="language-bash">$ npx create-react-app hooks-counter
$ cd hooks-counter
$ npm start
</code></pre>
<p>Open <code>app.js</code> in the <code>/src</code> folder, delete everything inside the <code>&lt;div className='App'&gt;&lt;/div&gt;</code> &amp; the logo import.</p>
<p>The code should look like this at this point:</p>
<pre><code class="language-jsx">import React from 'react';
import './App.css';

function App() {
  return &lt;div className=&quot;App&quot;&gt;&lt;/div&gt;;
}

export default App;
</code></pre>
<p>Let's also add bootstrap so that we don't have to bother about styling. Go to <code>public/index.html</code> and add the following link at the end of the head tag.</p>
<pre><code class="language-html">&lt;link
  rel=&quot;stylesheet&quot;
  href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot;
/&gt;
</code></pre>
<p>Now let's create a <strong>Counter</strong> component. Inside the <code>src</code> directory, create a file named <code>Counter.js</code> and copy the following code inside it.</p>
<pre><code class="language-jsx">import React from 'react';

const Counter = () =&gt; {
  const count = 0;
  return (
    &lt;div&gt;
      &lt;h2&gt;A simple counter application using Hooks.&lt;/h2&gt;
      &lt;div className=&quot;btn-group&quot;&gt;
        &lt;button className=&quot;btn btn-lg btn-outline-danger&quot;&gt;-&lt;/button&gt;
        &lt;button className=&quot;btn btn-lg btn-outline-danger&quot;&gt;{count}&lt;/button&gt;
        &lt;button className=&quot;btn btn-lg btn-outline-danger&quot;&gt;+ &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
};

export default Counter;
</code></pre>
<p>We are setting count as 0 by hard coding the value. Now we will explore about how to make it a state and act according.</p>
<p>Now let's import the <code>Counter</code> component in the <code>app.js</code> file and use it in the app component.</p>
<pre><code class="language-jsx">import React from 'react';
import './App.css';
import Counter from './Counter'; // highlight-line

function App() {
  return (
    &lt;div className=&quot;App&quot;&gt;
      // highlight-next-line
      &lt;Counter /&gt;
    &lt;/div&gt;
  );
}

export default App;
</code></pre>
<p>In order to use the <code>useState</code> hook, we have to import it from react. To do that we can simply add the import in the first line of the <code>Counter.js</code> file.</p>
<pre><code class="language-jsx">import React, { useState } from 'react'; // highlight-line

const Counter = () =&gt; {
  const count = 0;
  return (
    &lt;div&gt;
      &lt;h2&gt;A simple counter application using Hooks.&lt;/h2&gt;
      &lt;div className=&quot;btn-group&quot;&gt;
        &lt;button className=&quot;btn btn-lg btn-outline-danger&quot;&gt;-&lt;/button&gt;
        &lt;button className=&quot;btn btn-lg btn-outline-danger&quot;&gt;{count}&lt;/button&gt;
        &lt;button className=&quot;btn btn-lg btn-outline-danger&quot;&gt;+ &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
};

export default Counter;
</code></pre>
<p>Now, lets use the <code>useState</code> to set the count value to 0.</p>
<pre><code class="language-jsx">import React, { useState } from 'react';

const Counter = () =&gt; {
  // highlight-next-line
  const [count, setCount] = useState(0);
  return (
    &lt;div&gt;
      &lt;h2&gt;A simple counter application using Hooks.&lt;/h2&gt;
      &lt;div className=&quot;btn-group&quot;&gt;
        &lt;button className=&quot;btn btn-lg btn-outline-danger&quot;&gt;-&lt;/button&gt;
        &lt;button className=&quot;btn btn-lg btn-outline-danger&quot;&gt;{count}&lt;/button&gt;
        &lt;button className=&quot;btn btn-lg btn-outline-danger&quot;&gt;+ &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
};

export default Counter;
</code></pre>
<h3>Let's observe what's happening</h3>
<p>Have a look at the following line.</p>
<pre><code class="language-jsx">const [count, setCount] = useState(0);
</code></pre>
<p>This is where we are using the first hook, useState. In the code, the <strong>count</strong> is the application state and you can think of the <strong>setCount</strong> as a function that can change the count state, just like <code>this.setState()</code> could change the values of the state object. The argument to <code>useState()</code> <strong>initializes the count with whatever it is passed with</strong>. In this case, it's 0.</p>
<h3>Adding the event handlers</h3>
<p>In order to change the value of the count object, we now have to add event handlers to the + and - buttons. Let's attach increment and decrement functions to with the ability to change the count object.</p>
<pre><code class="language-jsx">import React, { useState } from 'react';

const Counter = () =&gt; {
  const [count, setCount] = useState(0);

  // highlight-start
  const increment = () =&gt; {
    setCount(count + 1);
  };

  const decrement = () =&gt; {
    setCount(count - 1);
  };
  // highlight-end

  return (
    &lt;div&gt;
      &lt;h2&gt;A simple counter application using Hooks.&lt;/h2&gt;
      &lt;div className=&quot;btn-group&quot;&gt;
        // highlight-next-line
        &lt;button className=&quot;btn btn-lg btn-outline-danger&quot; onClick={decrement}&gt;
          -
        &lt;/button&gt;
        &lt;button className=&quot;btn btn-lg btn-outline-danger&quot;&gt;{count}&lt;/button&gt;
        // highlight-next-line
        &lt;button className=&quot;btn btn-lg btn-outline-danger&quot; onClick={increment}&gt;
          +
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
};

export default Counter;
</code></pre>
<p>And with that, our counter application is completed. Your output should look like this now</p>
<p><img src="./images/hooks.png" alt="Hooks" />
&lt;br&gt;</p>
<h3>Conclusion</h3>
<p>Thank you for reading the blog. The source code for the example can be found at this <a href="https://github.com/Prashant-Acharya/hooks-counter">link</a> and if you want to learn more about react hooks, you could try exploring the official documentation <a href="https://reactjs.org/docs/hooks-intro.html">here</a>.</p>


Prashant
Acharya

My Life's Timeline

Blogs

A bash script with Node.JS

Simple Markdown Parser with JavaScript and Regular Expressions

Async Await in JavaScript

Technologies

Connect with me

Prashant Acharya

My Life's Timeline

Blogs

A bash script with Node.JS

Simple Markdown Parser with JavaScript and Regular Expressions

Async Await in JavaScript

Technologies

Connect with me

Prashant
Acharya