Async Await is a syntactic sugar added to ECMAScript 2017 standard that helps us work with promises easier. As I mentioned in 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.

On the last blog, we created an imitation of the fetch API. It was a function that returned a promise. It looked like this

function fetch(requestPassed = true) {
    return new Promise((resolve, reject) => {
        if (requestPassed) {
            resolve('{"success": true,
            "data": {"movies": ["batman", "iron man"]}}')
        } else {
            reject('{"success": false,
            "message": "Database connection failed"}')
        }
    })
}

To consume the promise, we did the following

fetch()
    .then(data => JSON.parse(data))
    .then(res => console.log(res))
    .catch(err => JSON.parse(err))
    .then(errorMsg => console.log(errorMsg))

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:

async function fetchData() {}

Inside an async function, we can use the await keyword to wait for the promise to resolve.

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()

The above code will print the following onto the console

{ success: true, data: { movies: [ 'batman', 'iron man' ] } }

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 exception handling with try-catch can be really handy while using async-await.

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()

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 error argument we have passed to the catch block. The above code logs the following onto the console.

{ success: false, message: 'Database connection failed' }

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 favourite features on JavaScript and I use it all the time. It has made my life as a JavaScript developer easier.

Thanks for reading. If you like my content, consider subscribing.

Promises were released in ES2015 to minimize the callbacky code we used to write.

The Syntax

To use a promise, we have to create a promise object that takes in a callback function with 2 arguments: resolve and reject.

let myPromise = new Promise((resolve, reject) => {})

Resolve

If the promise is fulfilled, resolve gets called.

let myPromise = new Promise((resolve, reject) => {
    let condition = true

    if (condition) resolve('Promise is resolved.')
})

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.

Reject

If the promise is not fulfilled, reject gets called.

let myPromise = new Promise((resolve, reject) => {
    let condition = true

    if (condition) resolve('Promise is resolved.')
    else reject('Promise is rejected.')
})

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.

The next step is to use the promise.

Using the promise object

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.

We can use a series of .thens to use a promise, if it's resolved.

Let's see how we'd use the myPromise promise object we defined above.

myPromise.then(data => console.log(data))

This would output the following on the console

Promise is resolved.

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 false. In such a case, our promise gets rejected.

myPromise
    .then(data => {
        // This function only gets called if
        // the promise is resolved
        console.log(data)
    })
    .catch(err => {
        // This function gets called if
        // the promise is rejected
        console.log(err)
    })

After running the following program, we'll get the following output on the shell.

Promise is rejected.

If you've noticed, the data and err we've passed on then and catch equals to the data we've passed to the resolve and reject functions in the promise object we created above.

Implementation of existing fetch API on our own

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

fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => response.json())
    .then(json => console.log(json))

Here, the fetch 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 then call. The JSON response after we convert the string is passed as json variable on the second then, which is printed on the console after that.

If we run the code above, we get the following output on the console.

{
  completed: false,
  id: 1,
  title: "delectus aut autem",
  userId: 1
}

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.

function fetch(requestPassed = true) {
    return new Promise((resolve, reject) => {
        if (requestPassed) {
            resolve('{"success": true,
            "data": {"movies": ["batman", "iron man"]}}')
        } else {
            reject('{"success": false,
            "message": "Database connection failed"}')
        }
    })
}

To use this function that returns a promise, we can do the following

fetch()
    .then(data => JSON.parse(data))
    .then(res => console.log(res))
    .catch(err => JSON.parse(err))
    .then(errorMsg => console.log(errorMsg))

Here, we have a default argument requestPassed which is a boolean. If it is set to true or even false, 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 .then call, we parse the string to represent it in an object format.

Thank you for reading. The next blog will be about async-await which makes using promises even more fun.

This blog is inspired by Tom Scott's video about storing passwords on Computerphile channel on YouTube and also my knowledge of Cryptography.

How not to store passwords on a database?

Plain Text

I don't think I have to mention this but plain text is a format we should never consider while storing passwords. The plain text is the password the user entered while signing up for the service.

For Example: If a user enters 123456 as a password, we simply store 123456 in the database.

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 people use the same email and password combination while signing up for multiple services. So the breacher can have access to all the services.

Encryption

Encryption means converting plain text (normal text) into cypher text (encrypted text) with the help of some key.

For Example, We might have an algorithm that maps letters of the alphabet with the letters that are shifted to 3 positions. So, if plain text is abc then the cypher text would be def.

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 the 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.

Cryptographic Hash Function

A cryptographic hash function is similar to an 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.

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.

Simply, the breacher might perform a brute-force attack or a dictionary attack on the system to guess the password. He might take the list of 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.

How to do it right?

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.

The approach that we have to take while doing so is hashing and salting. In this mechanism, salt is simply a string of random characters that get 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.

The salt is generated randomly 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 brute-force attack.

Hashing Only

hash(password)

Hashing and Salting

hash(salt + password)

The salt is included in the password, therefore we don't have to separately store the salt.

Example of using salting and hashing on Node.JS

To do this, we need a package called bcrypt which we can download from the NPM registry.

npm i bcrypt

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.

const hashPasswordAsync = async password => {
    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')

I ran the application multiple times and every single time, I was able to get a different hash for the same password 123456.

Here are some of the outcomes.

$2b$10$ZSiqlDuvOrjg8AII94LsROYH.rq.sD0dHaI1P/WxdJkMo7d3Q1FbS
$2b$10$YQYR5GjknzFv0majqhjuQ.e6/P4esEZUmEWBR3P8HwD/AHyNp7Q5y
$2b$10$f9AjCHiiGkgamZ81Tzgu6OZcq6h2sNwTrGZW2DrgpO//BvDBvgMn.

Some tips on creating passwords for normal user

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 using a password manager in this case.

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.

Conclusion

Thank you for reading the blog. If you liked it, please subscribe to my newsletter to not miss my uploads.

Version Control 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.

What is Git?

Git is a distributed version control system created by Linus Torvalds. With the help of git, we can control the version of the code. It is the most popular version control tool that exists. Read more about git on the official website.

What is GitHub?

GitHub 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.

Some common Git Terminologies

Repository is the most commonly referred term in Git. It simply means a project directory.

Commit is another term that is used while using Git. When we hit ctrl + s or cmd + s(on Mac), the file gets saved to the file system. But if we commit the code, it gets saved to the git history.

Push simply refers to uploading the current local changes to the server (i.e. GitHub in our case).

Pull refers to downloading the changes that exist, from the cloud to our local machine.

Clone means duplicating a repository that exists on the server to our local machine.

Some git commands

Initialize an empty git repository

To initliaze a git repository, navigate to your project directory and run the following command on your terminal or shell.

git init

Stage files to commit

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.

git add <filename>
# OR to add all files at once
git add .

Commit the changes

Commit allows us to register the changes into git history.

git commit -m 'commit message'

Connecting to a repository that exists on the cloud

To connect our local repository with the repository that exists on the cloud, we have to use the following command.

git remote add origin <link to the repository>

Pushing changes to the GitHub repository

If we want to push/upload the local changes into the cloud, we have to use the following command.

git push origin <branch name>

Pulling the latest changes that exist on the cloud to a local machine

If we want to pull or download the changes that exist on the cloud, we have to pull it into our local machine.

git pull origin <branch name>

Branching

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.

To switch branch that already exists in the repository,

git checkout <branch name>

If the branch doesn't exist yet,

git checkout -b <branch name>

view the list of the branches

git branch -a

merge some branch with the current branch

git merge <branch name>

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,

git merge dev

view the commits history

To see the commit history, use the following command

git log

To exit the log, press Q.

Navigating to a specific commit

Sometimes we might have to refer to a commit if things break. To do so, we need a commit identifier. When we do git log, we get to see all the commits that we've made including an id like e2123ndsadsadzoqm23. To switch into a specific commit, we simply use the following command

git checkout <commit id>

# example
git checkout e2123ndsadsadzoqm23

Reverting changes to a specific commit

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

git reset --hard <commit id>

# example
git reset --hard e2123ndsadsadzoqm23

Conclusion

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.

There can be 3 kinds of situation where we might receive errors.

Request could not be sent

This kind of error might occur if there's no internet connection or the server is not running.

Response is recieved that has error message on it

This kind of error might occur in the following scenarios.

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.

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.

Axios automatically throws errors that lie out of the range 2xx and the kinds of error I have mentioned above returns a status code that falls out this range.

Some other internal error has occured

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.

Below, I define a function that makes an AJAX request to a dummy API and handle the errors I've mentioned above.

const makeRequest = async () => {
    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)
        }
    }
}

These are the most common types of error I try to handle while building JavaScript Apps with React and I think you should too. 😄

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.

const App = () => {
  const [items, setItem] = useState("")

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

  return (
    <div>
      <ul>
        {items.map(item => (
          <li>{item.name}</li>
        ))}
      </ul>
    </div>
  )
}

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.

const dummyData = [
  {
    id: 1,
    name: "Smith",
  },
  {
    id: 2,
    name: "Dan",
  },
  {
    id: 3,
    name: "Prashant",
  },
]

useEffect(() => {
  setTimeout(() => setItems(dummyData), 3000)
}, [])

On the surface, this code looks normal but it's not. The problem lies here

const [items, setItem] = useState("")

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.

return (
  <div>
    <ul>
      {items.map(item => (
        <li>{item.name}</li>
      ))}
    </ul>
  </div>
)

Initially when items = '', items.map fails to execute because map method doesn't exist on a string.

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.

So you could do something like this

const [items, setItem] = useState([])

Just a minor change from '' to [] would save me hours of random google searches and scratching my head.

I hope you like the blog. If it was worth your time then please consider subscribing to not miss future updates.

What is create-react-app?

create-react-app is a tool created by facebook to create applications with React.JS. It creates all the necessary build setup with no manual configuration required. To initialize a react app using create-react-app go to your terminal and type the following:

$ npx create-react-app hiding-env

This gives you the bare minimum setup required to start building React applications.

If you want to learn about environment variables then check out this video by Jacob Sorber who is a computer scientist and a professor.

Coming back to our react app, the folder structure now must look like this

- hiding-env
    - .git
    - node_modules
    - public
    - src
    package.json
    .gitignore

So now, create an .env file on the root of your project. create-react-app comes with all the necessary configurations to use environment variables in our applications so there's no setup required.

Open the .env file and create an environment variable. The environment variable must be prefixed with REACT_APP so any variable you name must be like REACT_APP_MY_KEY. It is something enforced by create-react-app. You can read the docs here.

Open .env variable and add the following key. It means nothing and just for the test purpose.

REACT_APP_API_KEY=123jkawqo-123@3

Go to the app.js file inside src and add the following code inside the App component.

const key = process.env.REACT_APP_API_KEY
console.log(key)

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.

Changing the variable depending on environment

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. process.env.NODE_ENV 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.

First add the URL to the development and production server in env file

REACT_APP_DEV_SERVER=localhost:3000/api/some_api
REACT_APP_PROD_SERVER=https://bigomega.dev/api/some_api

Then, check the environment you're on with the following code.

if(process.env.NODE_ENV == 'development') {
    // do something
} else {
    // do some other things
}

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

if(process.env.NODE_ENV == 'development') {
    const url = process.env.REACT_APP_DEV_SERVER
} else {
    const url = process.env.REACT_APP_PROD_SERVER
}

You can refactor the code inside the App component or any other component as follows:

function App() {
    const { NODE_ENV, 
             REACT_APP_DEV_SERVER, 
             REACT_APP_PROD_SERVER, 
             REACT_APP_API_KEY } = process.env

    const url = 
          NODE_ENV == "development" ? 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(<div className="App">Hi</div>)
}

Check the above example and explore the code yourself at this link.

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.

Thanks for reading.

Subscription feature 📧

If you like my content then you have the option to subscribe to my newsletter by scrolling down to the bottom of the page and entering your email. You'll have to check your email and confirm subscription. After that, whenever I add new content, I will notify you through email. That way you'll never have to miss on the contents I share on the website.

Data Structures Repository

With my friend and a colleague who is an android developer, I have started a repository to upload programs of various data structures. To upload the content I would be referring to various online resources. I have also got a book named Data Structures using C and C++ from my college library by the authors Yedidyah Langsam, Moshe J. Augenstein, Aaron M. Tenenbaum. So I will also refer to the book a lot for the explanation of the contents.

Though the book is in C and C++, I will be writing the codes in JavaScript and Python and my friend will be writing the codes in Kotlin. I have other works too so I am not sure how frequently I will be contributing to the repository but I will try my best to write proper documentation and proper codes every weekend and update the repository.

Link to the repository. Go ahead, check the repository, show some love. Star the repo, fork the repo and please contribute on this open source project. 😉

Data Structures Course 📚

Warning! No promises. I am thinking about making videos on youtube and other social media platforms for BigOmega. I want to create a video series on Data Structures.

Now this is a promise, even if I don't do the videos, I will definitely write about Data Structures on the blog. If you don't wanna miss out, go ahead and subscribe.

Some personal stuffs 👦

In a personal blog, I guess I am allowed to talk about or share about myself. 😁

Internship ⚛

I have been doing internship for a few months now and I am working on the front end of a project. I am working with React and exploring a lot more about the react ecosystem so maybe in the future, a lot of content on react will be uploaded on the blog.

Expanding BigOmega

My intention has always been expanding BigOmega to not just a blog and to much more. I want to upload pictures and videos on the pages/accounts on various social media that I want to create for BigOmega. I will create accounts on Instagram and YouTube. I have already created a facebook page and a twitter account. I will share the twitter handle and other plans later because there's nothing really for you guys to follow me there because there are no contents.

Hosting a MLH workshop on Student Developer Day

On October 19th, I will be hosting a workshop on Building and Deploying Node JS apps with Microsoft Azure. Interested people can come to Asian College Of Higher Studies at 9:00 AM in the morning to attend the session. There will be 3 other awesome instructors teaching other stuffs. You can attend all 4 workshops if you want to and guess what? The event is totally free and we're also going to provide you a great lunch. 😉

Conclusion

So that is all for this blog. If you want to stay tuned for the contents that I plan to share in the future as mentioned above then please subscribe to the newsletter by dropping your email below. I am super excited for what's coming next.

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.

We are going to create a function that takes in a number as an argument and makes a count down from it. For example: countDownFrom(3) will print 3 2 1 on the screen.

Open your web developer console on your browser by opening a browser and pressing ctrl + shift + j and write a bare minimum function to get started with.

function countDownFrom(n) {}

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

function countDownFrom(n) {
  console.log(n) // highlight-line
}

The two cases in a recursive function

So as I said, recursive function calls itself until some condition is met. They are base case and recursive case.

Base Case

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.

function countDownFrom(n) {
  console.log(n)

  // highlight-start
  if (n == 1) return
  // highlight-end
}

Recursive case

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.

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)

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.

The image below explains what's going on.

Refactoring

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

function countDownFrom(n) {
  console.log(n)

  if (n == 1) return

  countDownFrom(--n)
}

countDownFrom(5)

Conclusion

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.

Note: Tools and technologies in this blog refer to languages, libraries or frameworks in this blog.

Watching tutorials

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 funfunfunction. He doesn't create a tutorial but talks about concepts on JS mostly.

Official Documentation

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.


Interactive Tutorials/Resources

This includes site like FreeCodeCamp or Codecademy 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.


Building Projects

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.

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.

I will cover more on this topic on my next blog. It will be dedicated blog for this approach.

Conclusion

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.

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.

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.

Computer Science

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.

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 here. I am going to briefly write it here instead of copying everything.

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 so much more....

Computer Science in Nepal

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.

Tribhuvan University 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.

B.Sc CSIT is a 4 year (8 Semester) course. There are more than 50 colleges affiliated to the Tribhuvan university that teaches CSIT in Nepal. 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. 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.

The problems with Computer Science in Nepal

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.

CSIT, A Safe Landing

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.

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.

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.

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?

Colleges

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. 😉

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.

University and the entire Country

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?

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.

The Companies

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.

Situation outside the Kathmandu Valley

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.

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 training, not internship in their final semester.

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.

The Positives About CS in Nepal

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.

Positives in CSIT

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.

Digital Revolution

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.

Unlimited scope outside the country

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 & the algorithms too.

My Suggestion

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.

Try to get outside of the syllabus

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.

Understand the value of a particular subject and how things work internally

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.

Attend events and try to organize some

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.

Respect teachers & try to interact with them

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.

Conclusion

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.

I tried react hooks and it's pretty awesome. With hooks, you can create functional components that can store state. It would not have been possible earlier. Hooks are a newer addition to the react library. They are included in the react 16.8 stable release.

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 & open the project in the code editor of your choice.

$ npx create-react-app hooks-counter
$ cd hooks-counter
$ npm start

Open app.js in the /src folder, delete everything inside the <div className='App'></div> & the logo import.

The code should look like this at this point:

import React from 'react'
import './App.css'

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App

Let's also add bootstrap so that we don't have to bother about styling. Go to public/index.html and add the following link at the end of the head tag.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

Now let's create a Counter component. Inside the src directory, create a file named Counter.js and copy the following code inside it.

import React from 'react'

const Counter = () => {
  const count = 0
  return (
    <div>
      <h2>A simple counter application using Hooks.</h2>
      <div className='btn-group'>
        <button className='btn btn-lg btn-outline-danger'>-</button>
        <button className='btn btn-lg btn-outline-danger'>{count}</button>
        <button className='btn btn-lg btn-outline-danger'>+ </button>
      </div>
    </div>
  )
}

export default Counter

We are setting the count as 0 by hard coding the value. Now we will explore how to make it a state and act according.

Now let's import the Counter component in the app.js file and use it in the app component.

import React from 'react'
import './App.css'
import Counter from './Counter' // highlight-line

function App() {
  return (
    <div className="App">
     // highlight-next-line
      <Counter />
    </div>
  );
}

export default App

In order to use the useState hook, we have to import it from react. To do that we can simply add the import in the first line of the Counter.js file.

import React, { useState } from 'react' // highlight-line

const Counter = () => {
  const count = 0
  return (
    <div>
      <h2>A simple counter application using Hooks.</h2>
      <div className='btn-group'>
        <button className='btn btn-lg btn-outline-danger'>-</button>
        <button className='btn btn-lg btn-outline-danger'>{count}</button>
        <button className='btn btn-lg btn-outline-danger'>+ </button>
      </div>
    </div>
  )
}

export default Counter

Now, let's use the useState to set the count value to 0.

import React, { useState } from 'react'

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

export default Counter

Let's observe what's happening

Have a look at the following line.

const [count, setCount] = useState(0)

This is where we are using the first hook, useState. In the code, the count is the application state and you can think of the setCount as a function that can change the count state, just like this.setState() could change the values of the state object. The argument to useState() initializes the count with whatever it is passed with. In this case, it's 0.

Adding the event handlers

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.

import React, { useState } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)

  // highlight-start
  const increment = () => {
    setCount(count + 1)
  }

  const decrement = () => {
    setCount(count - 1)
  }
  // highlight-end

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

export default Counter

And with that, our counter application is completed. Your output should look like this now

Conclusion

Thank you for reading the blog. The source code for the example can be found at this link and if you want to learn more about react hooks, you could try exploring the official documentation here. Text