DEV Community: Akarsh Barar

5 Things I wish I knew earlier as a Software Developer

Akarsh Barar — Tue, 14 Mar 2023 09:51:55 +0000

I was an average student from starting of my schooling. In most of the exams, my rank was between 10 to 25 in a class of 50–60 students. But from starting I always had an interest in maths so math was my favorite subject. My interest in Software Development started growing the day I was introduced to Java(My first Programming Language) at that time I was in class 8th(Yes I am from the ICSE board). I was lucky to have a Computer at my home in those days (2007–2008). I installed BlueJ into my system and started coding the program that the teacher taught us in school. the first program was as usual "Hello World!", but that program dived me to learn more and explore more it took 2 years for me to fully fall in love with Programming an effect of which I gained 90+ marks in High School. After High School, I started teaching a Java tutor in a local Coaching Center in 2012 which gave me 2000 rupees per month at that time it was enough for me to fulfill my own needs. In 2013 I joined another Coaching where I got 5K per student for teaching Java for 2 months and there were approx 10 students who were interested in learning Java for their school or Self-learning. In that coaching, I got my first freelancing work for creating the Coaching website in which I was teaching at stating I hesitated because I have never created a website that takes data from user and stores it and shows it on the dashboard but still I took the project and convinced them to create the project in 3 months. At night I was reading on the internet about how to create a website and then I came across the programming language PHP I went through its syntax and it was similar to HTML with some syntactic sugar on it. Then I created the landing page for the client in Php and uploaded it to a free hosting platform in that landing page I just added a contact us form and saved that data in MySql this was the first time I used any database and interacted it with any programming language and I loved it. and the Client was impressed with the work I just copy pasted code from the internet but as a new developer, it was something I am proud of to date.

Time passed by I learned Java Applet, JSP, Servlet, and many other technologies out of curiosity and today I am Senior Full Stack Developer here is the list I wish I knew earlier. I am writing it down out of my own experience after one year of team handling.

Try to Understand the Problem before diving into the solution: If you start finding the solution without understanding the problem well you will end up wasting your time. I have personally faced this in my team where junior developer do they directly dive into solutions without thinking if this issue is from the code end, Server End, or Client End. Sometimes there is an issue at the client's end but we try to fix our code and that just wastes the time.
Try to solve|Debug the problem on paper before writing your first code: Let's say that you have a create a module that does some work and according to you it will take 2 hours. Try to create a blueprint of the module on paper let's say it took 1 hr now you have 1 hour just to convert that blueprint to code rather than using 2 hours to code and getting stuck in between the code.
Don't be shy to ask for help: I have seen this in new developers that if they are stuck in some issue they don't ask for help from their manager and Senior thinking it might have a bad impact on them but the case is just the opposite. Senior will definitely help you because once he/she was at your place.
Start writing Unit Test Cases for your code: Testing is not only a job for testers you should also be able to test your code before handling the code to the tester as there might be a simple scenario that you might have missed and it will be coved in a unit test if you write one. Learn more about TDD and BDD.
Avoid Toxic Work Culture: It's not a case of Software Development it applies to everything leave the place where you don't feel respected. You are not given credit for your work. You don't have a Work-Life balance. You can talk to your manager or HR in the company and if the situation still doesn't get better LEAVE.

These are the 5 things that I wish I knew earlier.
Do you agree with the points? Please Let me know.
You can connect with me on LinkedIn:
https://www.linkedin.com/in/akarshbarar/

Two Factor Authentication using NodeJs

Akarsh Barar — Thu, 12 Nov 2020 21:14:18 +0000

If you have ever dealt with authentication in your application then you must have seen two factor authentication where you have to give a token or code that might be send to you by SMS or email. So lets build something like that and learn two factor authentication.
Before learning two factor authentication lets understand pros and cons of 2FA(2 Factor Authentication)

Pros of 2FA

Provides Security to application.
Easy to setup

Cons of 2FA

Involves sharing of Email or Phone number
Prone to MIM attack

Let's Get Started

=> Create a node project

  __ npm init -y __

=> Lets install some dependencies

  __ npm install express node-json-db uuid speakeasy __

=> Create a simple Express app

=> Firstly create database here I am Node JSON database you can use any database that you want.

=> Now register the user and create a temporary secret for him.

=> When you will register the user you will get a secret key and token
that will look like this in base32

But you can also go with simple key and it will look like this

=> Now lets verify the user for that you need things one is the userId the user who is trying to login and one is the token this is token is generated in many ways you can use chrome extension that taken secret key from the register process and gives you a token or you can also use mobile apps I am using extension to generate token.

if it return verified true then you are good to go otherwise no.

you can also go one step further to validate the token.

if it return validate true then you are good to go otherwise no.

Github repo of above is:

[https://github.com/akarshbarar/TwoFactorAuthentication)

Follow me on Github
Follow me on Instagram
Follow me on Twitter

--------------------THANK YOU------------------------

World without NodeJS.

Akarsh Barar — Mon, 02 Nov 2020 18:33:30 +0000

A Perfect World Without NodeJs Does Not exist

If you are a web developer then you must have come across many technology that help us to create web-servers some of them are Jersey for Java, Spring Boot, Express, NodeJs etc.

Node.js is actually not a framework or a library, but a runtime environment, based on Chrome’s V8 JavaScript engine.
Using Node.js for backend, you automatically get all the pros of full stack JavaScript development, such as:

better efficiency and overall developer productivity
code sharing and reuse
speed and performance
easy knowledge sharing within a team
a huge number of free tools

So lets talk about why world is incomplete without Nodejs

No JavaScript alternate : Dino is coming in race as it is using Typescript but if you are a Javascript developer then you have to learn typescript first to work in it.
Its simple Javascript: As we all know that current web works fully on Javascript and in order to integrate our front end with backend the compiler has to work hard that makes development and developer experience hard but if you are using Nodejs the frontend is also written in Javascript css and html and backend is also in javascript so the performance will be fast.
Almost most of the framework from angular to react every framework and library supports node.
Node has its own package manager NPM. NPM is so important building javascript based projects, and even with several alternatives (like webpack, yarn, etc) it is still by far the most used. A simple fact is that if npm does not work, most applications won’t build.
NodeJs is managed by Linux Foundation so its free to use.

I am not saying NodeJs is best or other technology are bad but for me NodeJs has changed the way to development for me.

Comment Down your views on this.

Follow me on Github
Follow me on Instagram
Follow me on Twitter

--------------------THANK YOU------------------------

Why React Is So Popular?

Akarsh Barar — Sun, 25 Oct 2020 13:20:35 +0000

If you have started with the Web Development or if you are doing web development from a long time then you must have heard of Angular, React and VueJs. They all are JavaScript framework for web development. But among then React is more popular than other.

What is React?

React is a JavaScript library developed by Facebook for easy and fast web development. It is used to create Single Page Applications and now days you can create native Mobile applications using React Native. Its first release was in year 2013.

So the Question arises is Why React is So Popular?

Declarative Style: A declarative style, like what react has, allows you to control flow and state in your application by saying "It should look like this". An imperative style turns that around and allows you to control your application by saying "This is what you should do".
Virtual DOM : The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.
Easy to Learn : Being its only HTML and Javascript React is very easy to learn.
Community Support : React has a large base of developers and supporters. Since it is a old library you can find most of the answer in the Community.
JSX : JSX stands for JavaScript Xml, It means you can use javascript inside html or xml just by typeing your code inside '{' and'}'.
SEO: React on its own is not SEO friendly and everything works on Virtual DOM it is difficult of web crawler to find the content but if you are using Nextjs or Gatsby you can optimize you site for SEO.
SPA : One of the main Advantage of React is that We can create Single page Applications ie our site will not reload when change the page. UI is changed without Refresh.

Github repo of React is:

https://github.com/facebook/react

Follow me on Github
Follow me on Instagram
Follow me on Twitter

--------------------THANK YOU------------------------

How to start with NuxtJs?

Akarsh Barar — Tue, 06 Oct 2020 18:11:39 +0000

How to Start with NuxtJs

Content

Routing
Data Binding
Use of VueX

What is NuxtJs?

Nuxt is a progressive framework based on Vue.js to create modern web applications. It is based on Vue.js official libraries and powerful development tools .

Prerequisite of NuxtJs

Basics of HTML
Basics of JavaScript
Basics of Vue(optional)

Create Nuxt App

You can create app in many ways but the three most used ways are:-

yarn create nuxt-app
npx create-nuxt-app
npm init nuxt-app

Running Your App

cd
yarn dev or npm run dev

Folder Structure of Nuxt App

|-assets
|-component
|---|-logo.vue
|-layouts
|---|-default.vue
|-middleware
|-pages
|---|-index.vue
|-plugins
|-static
|---|-favicon.ico
|---|-icon.png
|---|-sw.js
|-store
|-jsconfig.js
|-nuxt.config.js
|-package.json

The assets directory contains your un-compiled assets such as Stylus or Sass files, images, or fonts.
The components directory contains your Vue.js Components.
The __layouts __directory includes your application layouts. Layouts are used to change the look and feel of your page (for example by including a sidebar).
The middleware directory contains your Application Middleware.
The pages directory contains your Application Views and Routes. The framework reads all the .vue files inside this directory and creates the application router.
The plugins directory contains your Javascript plugins that you want to run before instantiating the root Vue.js Application.
The static directory is directly mapped to the server root (/static/robots.txt is accessible under http://localhost:3000/robots.txt).
The store directory contains your Vuex Store files. The Vuex Store comes with Nuxt.js out of the box but is disabled by default. Creating an index.js file in this directory enables the store.
The nuxt.config.js file contains your Nuxt.js custom configuration.

Data Binding

In export default part just make a data() and then initialize the variable like:
data() {
return {
message:'',
}
}

now in HTML message can be accessed using { { message } }

Button Click

Add attribute v-on:click="increment" in button tag or you can also use @click="increment" where increment is the function that will be called on button click. So how we can make that function. In export default something like this:
methods: {
increment:function(e) {
// DO ANYTHING THAT YOU WANT
}
}

Routing

For routing just create a page inside pages folder for example about.vue and your routing will automatically be done and in order to go to that link in HTML we have
About
but in NuxtJs we have
About.
in order to route on button click inside the method create a function and inside that just use
this.$router.push({ path: '/about' })

VueX

Install Vuex using

npm install vuex --save

yarn add vuex

Inside store folder create index.js file in order to create State.
Import the vuex

import Vue from 'vue'
import Vuex from 'vuex'

create State like
export const state = () => ( {
counter: 1000,
list:[],
} );

In order to use this state in any file just follow the steps:

import { mapState } from 'vuex' in script tag
Inside export default computed: { ...mapState( { counter:state=>state.counter } ) }, Now we can directly use the counter variable.

In order to change the state add following line in store/index.js
export const mutations = {
inc(state) {
state.counter++
},
dec(state) {

state.counter--
},

}

and in order to change the state data in any file just add following lines:
this.$store.commit('dec')
in order to call the dec() function in store/index.js file.

Conclusion

In this tutorial we have have learned about NuxtJs and some basic concepts of NuxtJs like routing and state management.

Github repo of above is:

NuxtJS_Vue-X

Follow me on Github
Follow me on Instagram
Follow me on Twitter

--------------------THANK YOU------------------------