10 Best Extensions for VS Code

While coding, Having a good code editor is very important it will make you a lot more productive.

Why VS Code?

VS Code (Visual studio code) is undoubtedly one of the best and most popular product of Microsoft. The reason why it is so popular is that is very customizable (via extensions). So each individual can customize it based on their need (it may be themes, fonts or extensions, etc)
Below I am going to mention 10 most popular extensions you can use to make your VS code more productive (especially as a frontend developer)

1. Setting Sync

 

if you work on multiple machines like I do, then this extension will be very useful. With the help of this extension, you can set up your VS Code in one system and save all your settings in GitHub, and then using just a simple command you can have the exact same setup on any other machine as well, no need to do all the setup again.

2. Project Manager

If you work on multiple projects then this extension will make your life a lot easier. With this extension, you get an extra menu in your side menu for your projects which will help in switching between projects very fast. And on the bonus side this extension auto-detect Git, Mercurial, or SVN repositories.

3. Bracket Pair Colorizer

Most of the time code gets so nested that it is hard to identify which closing bracket belongs with which opening bracket, in just case you will find this extension very helpful. Bracket Pair Colorizer colors matching brackets to make your code much more readable.

4. Auto Rename Tag

A simple yet effective extension, it automatically renames the matching HTML tag when you change the opening or closing tag.

5. Better Comments

Comments are used to make your code easily understandable, so isn't it better to have different colors to identify different types of comments (like todos, alerts, descriptions, etc) This extension will help you do just that. It provides different colors for different categories and if that's not enough you can define your own category, isn't that useful.

6. Polacode

Have you seen a fancy screenshot of a code snippet on any article? if yes, then it's mostly taken using this extension. This extension allows you to take a screenshot of your code or some part of it.

7. Git Lens

If you use git for version control then this is a must-have extension. There are lots of git related extensions available but this is the most powerful one. It allows you to go anything related to git like blame, see commit history, compare files, etc.

8. Live Server

This vscode extension will help you open a live web server of your current project without the overhead of having bundlers like webpack etc. It also gives you live-reloading so you don't have to even refresh the browser to see your changes, isn't that handy.

9. Live Sass Compiler

if you want to work with SCSS/SASS without setting the build process with a bundler like Webpack, this extension will be useful. It compiles your SASS/SCSS files into CSS files in real-time and automatically reloads the browser.

10. Better Align

If you prefer proper alignment in your code then this is the extension for you, it will allow you to align multiple variable declarations, trailing comments, sections of code, etc, so give it a try and you will love it.

Thank you all for reading!

Interview Questions for front-end jobs

Hey everyone,Recently i wanted to switch my company so i searched and found out that coupondunia has a opening so i applied for it .Below are the questions they asked:

Step 1:They emailed me an assignment which i have to complete and send it to them ,based on which they will decide to proceed further with interview or not.

The assignment was to create a jquery plugin for responsive tabs(on desktop it should be tabs but on mobile or tablets it should convert to drop-down)

Luckily i completed the assignment and i got interview call

Step 2 :They usually take 3/4 technical interview but unfortunately i was rejected in the second interview
Below are the questions they asked me.(Didn't remember which question is from 1st interview or 2nd interview)

1. Tell me about yourself. 
2. Tell me about your recent projects and your role in that. 
3. What are the challenges you have faced in your projects and what you did to solve them. 
4. How many print you will give on a scale of 1(min) to 5(max) in the following HTML4 ,HTML5 ,CSS , CSS3, JavaScript,Jquery,Ajax,BootStrap,Angular,React etc 
5. Explain Bootstrap grid system.
6. What is data attribute in html and why it is used. 
7. What is new in HTML5. 
8. Call and Apply in javaScript.
9. What is event bubbling in javascript. 
10. Difference between event.stopPropogation() and event.preventDefault() 
11. what is lazy loading. 
12. Browser optimization techniques.
13. What is content delivery system(CDN). 
14. Explain javaScript closure. 
15. Explain angular $http and $queue. 
16. What is canvas tag in html and where it is used. 
17. Explain transition and transform of css. 
18. Diffenence between get and post method. 
19. Why it is good practice to add style in head and javascript before closing body tag.
20. Are you famaliar with git version control system. 
21. What is css sprite .
22. What is SVG and its benifits. 
23. Explain dependency injection in angular. 
24. horizontly and vertically center a div. 
25. Take a number from user and show that many concentric squares. 
26. Tell About $.fn 
27. What is CDN and how you insure to always use latest file . 
28. Explain display property of css (specially display:table-row and display:table-column). 
29. Write code to make a ajax call using jquery and once the request is complete call a function passing response as a parameter. 
30. Explain css selector + and ~.
31. Are you famaliar with grunt. 
32. Have you worked with SASS and LESS. 
33. Show a red circle at the center of the screen. 
34. Jquery ajax call is syncronus or asyncronus by default? How to change its behavior. 
35. What is mobile first and desktop first development? How it effects while writing media queries. 
36. Why we use -webkit,-moz etc. 
37. Diffence between css display:none , opacity:0 ,visibility:hidden.

A simple modal popup using HTML , CSS and JQUERY

In this tutorial i will show you how to create a simple modal popup using HTML, CSS and jquery (jquery only use to show/hide the popup) and how to place it at the center of the screen.

Live Demo

STEP 1 :

Create a parent div which will act as modal black background.

and apply below css to it

    .overlay{
     position:fixed;
     top:0;
     left:0;
     bottom:0;
     right:0;
     background-color:rgba(0,0,0,.7);

     /* below code is not necessary*/
     background-size: 60px 60px;
     background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent);
     background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent);
    }

Up to this point you got a nice black gradient background.

STEP 2 :

Now that you have your background setup,Let create the popup.

 

  
  X
  
Subscribe
  

   Do you want to subscribe??
  
  

   
No
   
Yes
  
 

And apply below css to style the popup and position it at the center both horizontally and vertically.

.popup{
    background-color:#fff;
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    width:60%;
    top:50%;
    transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
}
.popup .close{
    position:absolute;
    top:-10px;
    right:-10px;
    background-color: #000;
    border-radius: 30px;
    padding: 5px 6px;
    color: #fff;
    font-size: 10px;
    cursor:pointer;
}
.popup .title{
 padding: 10px;
    background-color: #4679bd;
    color: #fff;
    margin-top: 0px;
}
.popup .content{
 padding: 0px 10px 10px;
    border-bottom: 1px solid #d7d7d7;
}
.popup .button_container{
 padding:10px;
}
.popup .button_container .button{ 
    display: inline-block;
    color: #fff;
    padding: 7px 10px;
    cursor:pointer;
}
.popup .button_container .button.action{
   float:right;
   background-color: #4679bd;
}
.popup .button_container .button.cancel{
   background-color:#ff0000;
}

STEP 3 :

At this point the popup is complete but it is of no use without the logic to open and close the popup.So add a button on click of which popup will open.

 
 
......

And add below css to initially hide the popup

 .popup{
  ...../* previous css code */
  display:none;
 }

And finally some javascript code to show/hide the popup.

$('#openPopup').click(function(){
 $('.overlay').css("display",'block');
});

$('.popup .close').click(function(){
 $('.overlay').css("display",'none');
});
$('.overlay').click(function(){
 $('.overlay').css("display",'none');
});

$('.popup').click(function(event){
 event.stopPropagation();
});

UVA Problem ID 10924 (Prime Words)

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;


public class Main{
	public static void main(String[] args) throws IOException {
		BufferedReader br=new BufferedReader(new InputStreamReader(System.in));
		String input;
		StringBuilder sb=new StringBuilder(1000);
		while((input=br.readLine())!=null) 
		{
			int sum=0;
			for (int i = 0; i < input.length(); i++) {
				if(input.charAt(i)>=97 && input.charAt(i)<=122)
					sum+=input.charAt(i)-96;
				else if(input.charAt(i)>=65 && input.charAt(i)<=90)
					sum+=input.charAt(i)-38;
			}
			if(isPrime(sum))
				sb.append("It is a prime word.\n");
			else
				sb.append("It is not a prime word.\n");
		}
		System.out.print(sb);
	}
	public static boolean isPrime(int number)
	{
		if(number!=2  && number%2==0)
			return false;
		for (int i =3; i <= Math.ceil(Math.sqrt(number)); i=i+2) {
			if(number%i==0)
				return false;
		}
		return true;
	}
}

UVA Problem ID 10946 (You want what filled?)

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.Arrays;

public class Main {
	static char grid[][];
	static boolean wasVisited[][];
	public static void main(String[] args) throws IOException {
		BufferedReader br=new BufferedReader(new InputStreamReader(System.in));
		String input;
		StringBuilder sb=new StringBuilder(1000);
		int testcase=0;
		while((input=br.readLine())!=null) 
		{
			String s[]=input.split(" +");
			int row=Integer.parseInt(s[0]);
			int column=Integer.parseInt(s[1]);
			if(row==0 && column==0)
				break;
			testcase++;
			grid=new char[row][column];
			wasVisited=new boolean[row][column];
			for (int i = 0; i < row; i++) {
				input=br.readLine().trim();
				for (int j = 0; j rowlimit || column>columnlimit || row<0 || column<0 || wasVisited[row][column]==true)
			return 0;
		if(grid[row][column]==c)
		{
			count++;
			grid[row][column]='.';
			wasVisited[row][column]=true;
			count+=floodfill(row-1,column,c,rowlimit,columnlimit);
			count+=floodfill(row,column-1,c,rowlimit,columnlimit);
			count+=floodfill(row,column+1,c,rowlimit,columnlimit);
			count+=floodfill(row+1,column,c,rowlimit,columnlimit);
			return count;
		}
		return 0;
	}
}
class Hole implements Comparable
{
	char name;
	int count;
	public Hole(char n,int c)
	{
		name=n;
		count=c;
	}
	
	@Override
	public int compareTo(Hole h1) {
		if(this.count>h1.count)
			return -1;
		else if(this.count