25 Common Frontend Developer Interview Q&A

Photo by Pexels

Questions:

1. What is Semantic Element in HTML5?
2. Viewport height & width in CSS3?
3. What is CSS breakpoints?
4. CSS Best Practice about ID and Class?
5. What is SASS/SCSS?
6. What is mixin in Sass/SCSS?
7. What's new in ES6?
8. What is Event Bubbling?
9. What is prototype inheritance in JavaScript?
10. Abstract function in JavaScript?
11. What is this keyword in Arrow function?
12. What is this keyword in normal function?
13. What is the difference between localStorage and sessionStorage?
14. What is CORS?
15. What is HTTP request?
16. How many HTTP methods we have?
17. What is API and REST API?
18. Make an AJAX request?
19. How does the browser work?
20. What is Pure Function in JavaScript?
21. Event Handling in JavaScript?
22. JavaScript execution context?
23. How to manage your state in React?
24. How Redux works?
25. What is Presentational Component and Functional Component?

Let's describes little more:

1. What is the Semantic Element in HTML5?

A semantic element clearly describes its meaning to both the browser and the developer.

• Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
• Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

More Details: W3Schools

2. View port height & width in CSS3?

The viewport units are a new set of units designed for the challenges we face today. One-pagers, full-width grids, typography, and many other things rely on the size of the viewport. Previously, we hacked these challenges using percentages, or JavaScript.

This new set of units consists of four different units. Two for each axis, and a minimum and maximum value of the two.

• vw: 1/100th viewport width
• vh: 1/100th viewport height
• vmin: 1/100th of the smallest side
• vmax: 1/100th of the largest side

Note: IE9 uses vm instead of vmin. It does not support vmax.
Just to clarify: 1vmax equals 1vh in portrait mode, whilst in landscape mode, 1vmax will equal 1vw.

More Details: Source

3. What is CSS breakpoints?

CSS breakpoints are points where the website content responds according to the device width, allowing you to show the best possible layout to the user. CSS breakpoints are also called media query breakpoints, as they are used with a media query.

/* For mobile phones: */
.col {
  width: 100%;
}

/* For tablets: */
@media only screen and (min-width: 600px) {
  .col-s {width: 50%;}
}

/* For desktop: */
@media only screen and (min-width: 768px) {
  .col-lg {width: 33.33%;}
}

More Details: RWD

4. CSS Best Practice about ID and Class?

We need ways to describe content in an HTML/XHTML document. The basic elements like <h1>, <p>, and <ul> will often do the job, but our basic set of tags doesn't cover every possible type of page element or layout choice. For this, we need ID's and Classes. For example <ul id="nav">, this will give us the chance to target this unordered list specifically, so that we may manipulate it uniquely to other unordered lists on our page. Or we might have a section on our page that has no relevant tag to signify it, for example, a footer, where we might do something like this: <div id="footer">. Or perhaps we have boxes in our sidebar for keeping content over there separated in some way: <div class="sidebar-box">.

More Details: CSS TRICKS

5. What is SASS/SCSS?

Sass (Syntactically awesome style sheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum. ... Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself.

More Details on Sass/SCSS official sit and My Own blog post in bangla

6. What is mixin in Sass/SCSS?

One of the most powerful features of the CSS preprocessor Sass is the mixin, an abstraction of a common pattern into a semantic and reusable chunk. Think of taking the styles for a button and, instead of needing to remember what all of the properties are, having a selector include the styles for the button instead.

@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

.box { @include transform(rotate(30deg)); }

when this code we compile to CSS looks like below type:

.box {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}

7. What's new in ES6?

JavaScript ES6 brings new syntax and new awesome features to make your code more modern and more readable. It allows you to write less code and do more. ES6 introduces us to many great features like arrow functions, template strings, class destruction, Modules… and more.

• arrows
• classes
• enhanced object literals
• template strings
• destructuring
• default + rest + spread
• let + const
• iterators + for..of
• generators
• unicode
• modules
• module loaders
• map + set + weakmap + weakset
• proxies
• symbols
• subclassable built-ins
• promises
• math + number + string + array + object APIs
• binary and octal literals
• reflect api
• tail calls

More Details: ES6 Features

8. What is Event Bubbling?

The bubbling principle is simple.

When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.

Let’s say we have 3 nested elements FORM > DIV > P with a handler on each of them:

 <style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

A click on the inner <p> first runs onclick:

• On that <p>.
• Then on the outer <div>.
• Then on the outer <form>.
• And so on upwards till the document object.

More Details: JavaScript.info

9. What is prototype inheritance in JavaScript?

Inheritance refers to an object's ability to access methods and other properties from another object. Objects can inherit things from other objects. Inheritance in JavaScript works through something called prototypes and this form of inheritance is often called prototypal inheritance.

More Details on DigitalOcean

10. Abstract function in JavaScript?

In object-oriented programming, abstraction is one of the four central principles (along with encapsulation, inheritance, and polymorphism). Abstraction is valuable for two key reasons:

• Abstraction hides certain details and only show the essential features of the object. It tries to reduce and factor out details so that the developer can focus on a few concepts at a time. This approach improves understandability as well as maintainability of the code.
• Abstraction helps us to reduce code duplication. Abstraction provides ways of dealing with crosscutting concerns and enables us to avoid tightly coupled code.

The lack of abstraction inevitably leads to problems with maintainability.

More Details on CSS TRICKS

11. What is this keyword in Arrow function?

In classic function expressions, the this keyword is bound to different values based on the context in which it is called. With arrow functions, however, this is lexically bound. It means that it uses this from the code that contains the arrow function.

For example, look at the setTimeout function below:

// ES5
var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(function() {
      console.log(this.id);
    }.bind(this), 1000);
  }
};

In the ES5 example, .bind(this) is required to help pass the this context into the function. Otherwise, by default this would be undefined.

// ES6
var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(() => {
      console.log(this.id);
    }, 1000);
  }
};

ES6 arrow functions can’t be bound to a this keyword, so it will lexically go up a scope, and use the value of this in the scope in which it was defined.

More Details on freeCodeCamp Blog

12. What is this keyword in normal function?

A function's this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode.

In most cases, the value of this is determined by how a function is called. It can't be set by assignment during execution, and it may be different each time the function is called. ES5 introduced the bind() method to set the value of a function's this regardless of how it's called, and ES2015 introduced arrow functions which don't provide their own this binding (it retains the this value of the enclosing lexical context).

More Details on MDN

13. What is the difference between localStorage, sessionStorage and cookies?

OK, localStorage as it's called its local storage for your browsers, it can save up to 10MB, sessionStorage does the same, but as its name saying, it's session based and will be deleted after closing your browser, also can save less than localStorage, like up to 5MB, but cookies are very tiny data storing in your browser, that can save up 4KB and can be accessed through server or browser both...

More Details on MDN

14. What is CORS?

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin. A web application makes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, and port) than its own origin.

More Details: MDN

15. What is HTTP request?

HTTP Request is a packet of Information that one computer sends to another computer to communicate something. To its core, HTTP Request is a packet of binary data sent by the Client to the server. An HTTP Request contains following parts. Request Line. Headers, 0 or more Headers in the request.

More Details on Codecademy

16. How many HTTP methods we have?

HTTP defines a set of request methods to indicate the desired action to be performed for a given resource. Although they can also be nouns, these request methods are sometimes referred to as HTTP verbs. Each of them implements a different semantic, but some common features are shared by a group of them: e.g. a request method can be safe, idempotent, or cacheable.

GET

The GET method requests a representation of the specified resource. Requests using GET should only retrieve data.

HEAD

The HEAD method asks for a response identical to that of a GET request, but without the response body.

POST

The POST method is used to submit an entity to the specified resource, often causing a change in state or side effects on the server.

PUT

The PUT method replaces all current representations of the target resource with the request payload.

DELETE

The DELETE method deletes the specified resource.

CONNECT

The CONNECT method establishes a tunnel to the server identified by the target resource.

OPTIONS

The OPTIONS method is used to describe the communication options for the target resource.

TRACE

The TRACE method performs a message loop-back test along the path to the target resource.

PATCH

The PATCH method is used to apply partial modifications to a resource.

17. What is API and REST API?

API:

a set of functions and procedures that allow the creation of applications which access the features or data of an operating system, application, or other services.

More Details on freeCodeCamp blog

REST API:

REST or RESTful API design (Representational State Transfer) is designed to take advantage of existing protocols. While REST can be used over nearly any protocol, it usually takes advantage of HTTP when used for Web APIs. This means that developers do not need to install libraries or additional software in order to take advantage of a REST API design. REST API Design was defined by Dr. Roy Fielding in his 2000 doctorate dissertation. It is notable for its incredible layer of flexibility. Since data is not tied to methods and resources, REST has the ability to handle multiple types of calls, return different data formats and even change structurally with the correct implementation of hypermedia.

More Details on SitePoint

18. Make an AJAX request?

Here is a generic jQuery AJAX request:

$(function() {
    function LoadPersons(data) {
        // do something with data
    }

    $.ajax({
        type: 'POST',
        url: url,
        data: JSON.stringify(parameters),
        contentType: 'application/json;',
        dataType: 'json',
        success: function(result) {
            // do something with persons (data)
            // e.g. LoadPersons(data);
        }
    });
});

More Details on jQuery official docs

19. How does the browser work?

The web server locates and then sends the information to the web browser, which displays the results. When web browsers contact servers, they're asking to be sent pages built with Hypertext Markup Language (HTML). Browsers interpret those pages and display them on your computer.

More Details on html5rocks

20. What is Pure Function in JavaScript?

Pure functions are functions that accept input and returns a value without modifying any data outside its scope(Side Effects). Its output or return value must depend on the input/arguments and pure functions must return a value. ... Here is a pure function.

More Details on freeCodeCamp blog

21. Event Handling in JavaScript?

JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page.

When the page loads, it is called an event. When the user clicks a button, that click to is an event. Other examples include events like pressing any key, closing a window, resizing a window, etc.

More Details on Eloquent Javascript

22. JavaScript execution context?

Execution context (EC) is defined as the environment in which JavaScript code is executed. By environment I mean the value of this, variables, objects, and functions JavaScript code has access to, constitutes its environment.

More Details on medium

23. How to manage your state in React?

There's always been a myriad of ways to manage state in React. Redux has always been a popular choice, but with React 16, and recently released libraries, there are now even more options. you can manage your state using React Context API, Redux or Mobx etc.

More Details on Medium

24. How Redux works?

Actions, reducers, action creators, middleware, pure functions, immutability…
Most of these terms seem totally foreign.

Redux is astonishingly simple. It uses a function called a reducer (a name derived from the JavaScript reduce method) that takes two parameters: An action, and a next state. The reducer has access to the current (soon to be previous) state, applies the given action to that state, and returns the desired next state.

More Details on Dave Ceddia's blog

25. What is Presentational Component and Functional Component?

Presentational Component:

Rarely have their own state (when they do, it’s UI state rather than data).

More Details on Dan Abramov blog

Functional Component:

A React component can be considered pure if it renders the same output for the same state and props.

More Details on Log Rocket

Want to know about "Full Stack Developer Interview Questions" below toptal.com article is a good read.
10 Essential Full-stack Interview Questions

Feel free to comment and share this article with your favorite places and yes encourage me to spread your love by clicking the heart button. Thanks

Who Am I?

This is Md. Jamal Uddin working as a Software Developer based in Dhaka, Bangladesh. I love to learn new things and share them with others. Playing with cutting technologies is my hobby and working with legacy is my day job :). Connect me on Twitter and LinkedIn

Note: this post all data is collected from various sources. I have referenced some of them.

Comments

[Ahmad Umar Abdulhameed]

It's really helpful.

[Md. Jamal Uddin]

thanks