DEV Community: Aks

Things I learned from Code reviews

Aks — Tue, 13 Aug 2019 12:24:22 +0000

We all know the importance of code reviews and how it helps to maintain code quality and establishes coding standards in the team.

But I want to point out a different side of the coin and tell you how it helped me when I was starting in the Development field.

Code Quality

As a junior dev in my first job, I did not know a lot about design patterns or javascript concepts. My mentors provided me with great knowledge of how I should use design patterns while writing any piece of code, no matter the language. They provided constructive feedback as to what sources I should refer to when solving different problems.

Knowledge Transfer

Code reviews helped me get domain-specific knowledge, helped me learn how to structure code according to requirements. They helped me understand the product and how different parts of the system work together to give user experience.

Knowledge Dissemination

Code reviews helped me and my team to share the knowledge about every piece of code. So nobody was the sole point of contact in case of emergencies. Everybody was a code owner of all of the code. This helped me a lot in gaining confidence in my code and my management skills during emergencies.

Art of Discussion

Code reviews help to see the code from the view of business requirements. It helps beginners especially understand concepts of domain-driven design. It encourages them to research and to defend their design in front of code reviewers.

Forward Help

One of the biggest problems I see in new devs is they do not have confidence in their code and sometimes are not able to express why they are using an approach over another. So, I and my friend have come up with an idea to help young devs.

You can forward us your code and we would love to provide you with constructive feedback. We want forward the help we received when starting. Reach us out via email Akanksha Sharma and Alican Karalar or twitter @Akanksha_9560 and @alican_js

Docker For Frontend Developers

Aks — Thu, 02 May 2019 11:52:44 +0000

This is short and simple guide of docker, useful for frontend developers.

Why should you use docker?

Long long back when business needed other application DevOps team would go out and buy a server, without knowing performance requirements of the new apps. This would involve lot of guess work and wastage of capital and resources which could be used for other apps.

Enter Virtual machines or VM, it allowed us to run multiple apps on same servers. but there is a drawback. Every VM needed entire OS to run. Every OS needs CPU, RAM etc to run, it needs patching and licensing, which in turn increases cost and resiliency.

Google started using containers model long time ago to address shortcomings of VM model. Basically what container model means that multiple containers on same host uses same host, freeing up CPU, RAM which could be used elsewhere.

But how does it helps us developers?

It ensures that the working environment is same for all developers and all servers i.e, production, staging and testing

Anyone can setup the project in seconds, no need to mess with config, install libraries, setup dependencies etc.

In simple terms docker is a platform that enables us to develop, deploy, and run applications with containers.

Let’s take a step back, what does container system look like physically and how is it different from VM.

1.1 Difference between VM and docker.

As you can see host and it’s resources are shared in containers but not in Virtual Machine.

With that out of the way, let’s dive.

How to use docker?

For that we need to familiarise ourselves with certain terminology.

1.2 Visualisation of docker images and docker container

Docker image: It is an executable file which contains cutdown operating system and all the libraries and configuration needed to run the application. It has multiple layers stacked on top of each other and represented as single object. A docker image is created using docker file, we will get to that in a bit.

Docker Container: It is a running instance of docker image. there can be many containers running from same docker image.

Containerise simple Node.js App

We would try to containerise very node.js simple app, and create a image:

Your Node.js App

Let’s start by creating folder my-node-app ,

mkdir my-node-app  
cd my-node-app

let ‘s create a simple node server in index.js and add following code there:

//Load express module with `require` directive

var express = require('express')

var app = express()

//Define request response in root URL (/)  
app.get('/', function (req, res) {  
 res.send('Hello World!')  
})

//Launch listening server on port 8081  
app.listen(8081, function () {  
  console.log('app listening on port 8081!')  
})

and save this file inside your my-node-app folder.

Now we create a package.json file and add following code there:

 {

    "name": "helloworld",  
    "version": "1.0.0",  
    "description": "Dockerized node.js app",  
    "main": "index.js",  
    "author": "",  
    "license": "ISC",  
    "dependencies": {  
      "express": "^4.16.4"  
    }

 }

At this point you don’t need express or npm installed in your host, because remember dockerfile handles setting up all the dependencies, lib and configurations.

DockerFile

Let’s create dockerfile and save it inside our my-node-app folder. This file has no extension and is named Dockerfile . Let go ahead and add following code to our dockerfile.

    # Dockerfile  
    FROM node:8  
    WORKDIR /app  
    COPY package.json /app  
    RUN npm install  
    COPY . /app  
    EXPOSE 8081  
    CMD node index.js

Now what we are doing here:

FROM node:8 — pulls node.js docker image from docker hub, which can be found here https://hub.docker.com/_/node/

WORKDIR /app -this sets working directory for our code in image, it is used by all the subsequent commands such as COPY , RUN and CMD

COPY package.json /app -this copies our package.json from host my-node-app folder to our image in /app folder.

RUN npm install — we are running this command inside our image to install dependencies (node_modules) for our app.

COPY . /app — we are telling docker to copy our files from my-node-app folder and paste it to /app in docker image.

EXPOSE 8081 — we are exposing a port on the container using this command. Why this port ? because in our server in index.js is listening on 8081. By default containers created from this image will ignore all the requests made to it.

Build Docker Image

Show time. Open terminal , go to your folder my-node-app and type following command:

     # Build a image docker build -t <image-name> <relative-path-to-your-dockerfile>

    docker build -t hello-world .

This command creates a hello-world image on our host.

-t is used to give a name to our image which is hello-world here.

. is the relative path to docker file, since we are in folder my-node-app we used dot to represent path to docker file.

You will see an output on your command line something like this:

    Sending build context to Docker daemon  4.096kB  
    Step 1/7 : FROM node:8  
     ---> 4f01e5319662  
    Step 2/7 : WORKDIR /app  
     ---> Using cache  
     ---> 5c173b2c7b76  
    Step 3/7 : COPY package.json /app  
     ---> Using cache  
     ---> ceb27a57f18e  
    Step 4/7 : RUN npm install  
     ---> Using cache  
     ---> c1baaf16812a  
    Step 5/7 : COPY . /app  
     ---> 4a770927e8e8  
    Step 6/7 : EXPOSE 8081  
     ---> Running in 2b3f11daff5e  
    Removing intermediate container 2b3f11daff5e  
     ---> 81a7ce14340a  
    Step 7/7 : CMD node index.js  
     ---> Running in 3791dd7f5149  
    Removing intermediate container 3791dd7f5149  
     ---> c80301fa07b2  
    Successfully built c80301fa07b2  
    Successfully tagged hello-world:latest

As you can see it ran the steps in our docker file and output a docker image. When you try it first time it will take a few minutes, but from next time it will start to use the cache and build much faster and output will be like the one shown above. Now, try following command in your terminal to see if your image is there or not :

    # Get a list of images on your host 
    docker images

it should have a list of images in your host. something like this

    REPOSITORY    TAG      IMAGE ID      CREATED         SIZE  
    hello-world   latest   c80301fa07b2  22 minutes ago  896MB

Run Docker Container

With our images created we can spin up a container from this image.

    # Default command for this is docker container run <image-name>  
    docker container run -p 4000:8081  hello-world

This command is used to create and run a docker container.

-p 4000:8081— this is publish flag, it maps host port 4000 to container port 8081 which we opened through expose command in dockerfile. Now all the requests to host port 4000 will be listened by container port 8081.

hello-world — this is the name we gave our image earlier when we ran docker-build command.

You will receive some output like this :

    app listening on port 8081!

If you want to enter your container and mount a bash terminal to it you can run

    # Enter the container
    docker exec -ti <container id> /bin/bash

In order to check if container is running or not, open another terminal and type

    docker ps

You should see your running container like this

     CONTAINER ID    IMAGE        COMMAND                  CREATED    
    `<container id>`  hello-world  "/bin/sh -c 'node in…"   11 seconds ago

    STATUS              PORTS                    NAMES  
    Up 11 seconds       0.0.0.0:4000->8081/tcp   some-random-name

It means our container with id <container id> created from hello-world image, is up and running and listening to port 8081.

Now our small Node.js app is completely containerised. You can run http://localhost:4000/ on your browser and you should see something like this:

1.3 Containerised Node.js App

Voilà, you have containerised your first app.

Need Opinions

Aks — Thu, 28 Mar 2019 12:32:48 +0000

Need opinions:
what is better in JS context composition or inheritance? What should be used when?

Beginner's guide to SASS

Aks — Sat, 21 Apr 2018 09:39:18 +0000

Beginner’s guide to SASS

Let’s face it, writing css is messy. More so when reviewing the code which other people have written. I find SASS is the answer to that. It helps you to write clean code which is readable.

Let’s jump into it. Let’s create a simple HTML which has nested div’s , hover, focus, repeated CSS properties, you know standard HTML we face in daily life.

It is important to understand why are we using classses parent1__link1. It is a part of BEM (Block Element Modifier) methodology where **parent1 **is block and **link1 **is element. BEM follows **simple **rules to name and organise your CSS and gives everyone on a project a declarative syntax which they can use so that they’re on the same page.
You can read about it here

Example HTML Markup

Variables

Let’s start with writing css for header. Pretty simple stuff, background-color and color properties.

CSS for header class

Here with help of SASS we can change **color codes to variable *so that it can be reused . So, let’s create variables for our color codes (you can use this to come up with names for color variables) using *$ (this is important to create variables in SASS). **Our new css for header would look like this. We can also use variable for many things padding, margins, color basically anything you want to reuse.

Use variable for reusable properties

Imports

To make css even more modular, SASS provides import functionality. We can put all the color names, mixins, common styles in different files and import them. So, let’s create a _color.scss file.

Note the name of** _color.scss** file. This is called a partial file meaning this file contains little snippets of CSS that you can include in other Sass files. The **underscore **lets SASS know that the file is only a partial file and that it should not be generated into a CSS file

_color.scss file

And we can import this file in our main scss file. using command

@import ‘./_color.scss’

and continue using color variables same way as depicted above.

Nesting

Next we jump to **parent1 *(please refer HTML Markup above)*and it’s children.

Problem statement 1: Write CSS for **parent1 and parent1__link1

For the this problem, we will use **& *for concatenation of classes *parent1** and parent1__link1. Please refer to image below (pay attention to use of variables here as well)

Problem statement 2: Write **hover and after **classes for element

For this problem we will concatenate pseudo classes and elements to parent1__link1 **using &**.

Make a note: pseudo classes are concatenated using &: and pseudo elements are concatenated with &::

Comprehensive list of pseudo classes and pseudo link is available here

Use of Pseudo classes in SASS

Mixins

As described above we have written CSS for parent1. We will write same CSS for parent two as well.

complete css file with styles for parent1 and parent2

As we can see in above file, parent1 and parent2 share many common css properties. We could make this css cleaner, simpler and more readable using *MIXINS. *Here is how mixin works:

We create a custom common style using @mixin keyword like depicted in image below. It contains all the property that is common to both parent1 and parent2.

Mixin for common style of parent

Next, we include the mixin in our parent styles.

Usage of Mixins

Here, I have created mixin for both link style and parent style. It makes code much more cleaner and readable.

This is a basic guide to get started with SASS. Of course, SASS provides great variety of functionalities that can be used to make your life easier when writing CSS. You can refer to full guide for SASS here.

What kind of coding standards do you follow when writing HTML?

Aks — Fri, 30 Mar 2018 08:23:27 +0000

What kind of coding standards do you follow when writing HTML?

What is better for SSR in Vue.js Redux or Vuex?

Aks — Mon, 19 Mar 2018 04:52:58 +0000

What in your experience is better for server side rendering in Vue.js? Redux or Vue.js?

Nevertheless, Akanksha Sharma Coded

Aks — Thu, 08 Mar 2018 06:41:45 +0000

I began to code because...

I am not a computer science graduate, I am(was?) an electrical engineer, heck I did not even own a computer until I got in second year of college (small town in middle of nowhere in 90's). Frankly, I started to code to pay my bills.
My plan was to continue my computer gig until I get a job in my field.

But after I saw the beauty of coding field, I felt I found my calling. Everyday is a new challenge. You experience joy of building new things everyday.
I am very fortunate that I got a job as developer in start of my career so that I would know this is where I was meant to be.

I continue to code because

Despite receiving half pay than my male counterparts, despite being ridiculed by client because women cannot be good enough developers, I love coding . In the words of my mentor, just focus on skills, success will come eventually.

I'm an expert at...

Front end Technologies. My first job was as a junior developer to solve bugs for a web application. Wanting to learn more about software development I joined a startup where I worked on several applications from scratch as single person team.
Currently I am at a great company with great mentors who always encourage me to strive for excellence. In last 3+ years I have worked on all major front end technologies React.js, Angular, Vue.js, Cycle,js.
I am currently dabbing in node.js.

I recently overcame...

The fear of writing online. I published two technical blogs till now and received amazing response from online community.

My advice for allies to support women and non-binary folks who code is....

No matter what happens do not give up. Sounds a little bit cliche.
But seriously you got less pay, are being discriminated on basis of gender,
don't ever stop learning, honing your skills. In the words of Douglas Malloch:

`If you can't be a highway then just be a trail,`
`If you can't be the sun be a star`
`It isn't by size that you win or you fail,`
`Be the best of whatever you are!`

Why not to use setInterval

Aks — Mon, 19 Feb 2018 09:20:06 +0000

Recently, I came across a requirement where I had to call a function repeatedly after specific time interval, like sending ajax call at every 10 seconds. Sure, best option seems as setInterval, but it blew up my face like a cracker :)

In order to understand why setInterval is evil we need to keep in mind a fact that javascript is essentially single threaded, meaning it will not perform more than one operation at a time.

In cases when functions takes longer than delay mentioned in setInterval (like ajax call, which might it prevent from completing on time), we will find that either functions have no breathing room or setInterval breaks it's rhythm.

    var fakeCallToServer = function() {
        setTimeout(function() {
            console.log('returning from server', new Date().toLocaleTimeString());
        }, 4000);
    }



    setInterval(function(){ 

        let insideSetInterval = new Date().toLocaleTimeString();

        console.log('insideSetInterval', insideSetInterval);

        fakeCallToServer();
    }, 2000);

//insideSetInterval 14:13:47
//insideSetInterval 14:13:49
//insideSetInterval 14:13:51
//returning from server 14:13:51
//insideSetInterval 14:13:53
//returning from server 14:13:53 
//insideSetInterval 14:13:55
//returning from server 14:13:55

Try above code snippets in your console

As you can see from printed console.log statement that setInterval keeps on sending ajax calls relentlessly without caring previous call has returned or not.
This can queue up a lot of requests at once on the server.

Now, let's try a synchronous operation in setInterval:

var counter = 0;

var fakeTimeIntensiveOperation = function() {

    for(var i =0; i< 50000000; i++) {
        document.getElementById('random');
    }

    let insideTimeTakingFunction  = new Date().toLocaleTimeString();

    console.log('insideTimeTakingFunction', insideTimeTakingFunction);
}



var timer = setInterval(function(){ 

    let insideSetInterval = new Date().toLocaleTimeString();

    console.log('insideSetInterval', insideSetInterval);

    counter++;
    if(counter == 1){
        fakeTimeIntensiveOperation();
    }

    if (counter >= 5) {
       clearInterval(timer);
    }
}, 1000);

//insideSetInterval 13:50:53
//insideTimeTakingFunction 13:50:55
//insideSetInterval 13:50:55 <---- not called after 1s
//insideSetInterval 13:50:56
//insideSetInterval 13:50:57
//insideSetInterval 13:50:58

We see here when setInterval encounters time intensive operation, it does either of two things, a) try to get on track or b) create new rhythm. Here on chrome it creates a new rhythm.

Conclusion

In case of asynchronous operations, setTimeInterval will create long queue of requests which will be very counterproductive.
In case of time intensive synchronous operations, setTimeInterval may break the rhythm.
Also, if any error occurs in setInterval code block, it will not stop execution but keeps on running faulty code. Not to mention they need a clearInterval function to stop it.
Alternatively, you can use setTimeout recursively in case of time sensitive operations.

DEV Community: Aks

Things I learned from Code reviews

Code Quality

Knowledge Transfer

Knowledge Dissemination

Art of Discussion

Forward Help

Docker For Frontend Developers

Why should you use docker?

How to use docker?

Containerise simple Node.js App

Your Node.js App

DockerFile

Build Docker Image

Run Docker Container

Need Opinions

Beginner's guide to SASS

Beginner’s guide to SASS

Variables

Imports

Nesting

Problem statement 1: Write CSS for **parent1 *and *parent1__link1**

Problem statement 2: Write **hover *and *after **classes for element

Mixins

What kind of coding standards do you follow when writing HTML?

What is better for SSR in Vue.js Redux or Vuex?

Nevertheless, Akanksha Sharma Coded

I began to code because...

I continue to code because

I'm an expert at...

I recently overcame...

My advice for allies to support women and non-binary folks who code is....

Why not to use setInterval

Conclusion

Problem statement 1: Write CSS for **parent1 and parent1__link1

Problem statement 2: Write **hover and after **classes for element