Fullstack interview questions

Question 1

Explain equality in JavaScript

Answer 1

Strict comparison (e.g., ===) checks for exact value equality including type

Abstract comparison (e.g. ==) checks for value equality ignoring the type

e.g.
1===’1’ //returns false
1==’1’ //returns true

Question 2

Explain meta tags in HTML

Answer 2

• Contain information about character encoding, description, title of the document etc.
• Not displayed on the page but intended for the browser
• Always passed as name/value pairs
• Always go inside head tag of the HTML page

Question 3

Explain the three main ways to apply CSS styles to a web page

Answer 3

• inline style
• style HTML tag
• external stylesheet

Question 4

What is CSS?

Answer 4

CSS stands for Cascading Style Sheets. CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

CSS was intended to allow web professionals to separate the content and structure of a website’s code from the visual design.

Question 5

What is Git?

Answer 5

A version control system that tracks project progess

Question 6

What is Node.js?

Answer 6

Node.js = Runtime Environment + JavaScript Library

Question 7

What is SQL injection?

Answer 7

An attacker provides malicious SQL statements through the application. Injection attacks stem from a lack of strict separation between program instructions (i.e., code) and user-provided (or external) input.

Question 8

What is Scope in JavaScript?

Answer 8

A collection of variables as well as the rules for how those variables are accessed by name. Only code inside that function can access that function’s scoped variables.

Question 9

What is meant by Continuous Integration?

Answer 9

Continuous Integration (CI) is a development practice that requires developers to integrate code into a shared repository several times a day. Each check-in is then verified by an automated build, allowing teams to detect problems early.

Question 10

What is npm?

Answer 10

Node Package Manager - online repositories for node.js packages/modules and Command line utility to install packages, do version management and dependency management

Question 11

Describe floats and how they work

Answer 11

Float is a CSS positioning property. Floated elements remain a part of the flow of the web page. This is distinctly different than page elements that use absolute positioning, which are removed from the flow of the webpage.

Question 12

Describe what User Interface (UI) Design does mean for you?

Answer 12

User Interface (UI) design is the design of software or websites with the focus on the user’s experience and interaction. Good design puts emphasis on goals and completing tasks, and good UI design never draws more attention to itself than enforcing user goals.

Question 13

Explain Null and Undefined in JavaScript

Answer 13

undefined - something hasn’t been initialized
null - something is currently unavailable
[think difference between blank and n/a on a form]

Question 14

Explain event bubbling and how one may prevent it

Answer 14

Event bubbling is when clicking on a child element one may exhibit the handler of the parent activating.

One way to prevent event bubbling is using event.stopPropagation() or event.cancelBubble on IE < 9.

Question 15

Explain the CSS “box model” and the layout components that it consists of

Answer 15

Content - The content of the box, where text and images appear

Padding - A transparent area surrounding the content (i.e., the amount of space between the border and the content)

Border - A border surrounding the padding (if any) and content

Margin - A transparent area surrounding the border (i.e., the amount of space between the border and any neighboring elements)

Question 16

Given a string, reverse each word in the sentence

Answer 16

function reverseBySeparator(string, separator) {
  return string.split(separator).reverse().join(separator);
}

• string.split(separator)
• .reverse( )
• .join(separator)

Question 17

Have you played around with the new CSS Flexbox or Grid specs?

Answer 17

Yes. Flexbox is mainly meant for 1-dimensional layouts while Grid is meant for 2-dimensional layouts.

Flexbox solves many common problems in CSS, such as vertical centering of elements within a container, sticky footer, etc. Bootstrap and Bulma are based on Flexbox, and it is probably the recommended way to create layouts these days. Have tried Flexbox before but ran into some browser incompatibility issues (Safari) in using flex-grow, and I had to rewrite my code using inline-blocks and math to calculate the widths in percentages, it wasn’t a nice experience.

Grid is by far the most intuitive approach for creating grid-based layouts (it better be!) but browser support is not wide at the moment.

Question 18

How Can I Get Indexed Better by Search Engines?

Answer 18

place the following two statements in the part of your documents:

Both may contain up to 1022 characters. If a keyword is used more than 7 times, the keywords tag will be ignored altogether. Also, you cannot put markup (other than entities) in the description or keywords list.

Question 19

How does the Centralized Workflow work?

Answer 19

The Centralized Workflow uses a central repository to serve as the single point-of-entry for all changes to the project. The default development branch is called master and all changes are committed into this branch.

Developers start by cloning the central repository. In their own local copies of the project, they edit files and commit changes. These new commits are stored locally.

To publish changes to the official project, developers push their local master branch to the central repository. Before the developer can publish their feature, they need to fetch the updated central commits and rebase their changes on top of them.

Compared to other workflows, the Centralized Workflow has no defined pull request or forking patterns.

Question 20

What does use strict do?

Answer 20

The use strict literal is entered at the top of a JavaScript program or at the top of a function and it helps you write safer JavaScript code by throwing an error if a global variable is created by mistake.

Question 21

What existing CSS frameworks have you used locally, or in production? How would you change/improve them?

Answer 21

Bootstrap - Slow release cycle. Bootstrap 4 has been in alpha for almost 2 years. Add a spinner button component, as it is widely used.

Question 22

What is Cross Site Scripting (XSS)?

Answer 22

By using Cross Site Scripting (XSS) technique, users executed malicious scripts (also called payloads) unintentionally by clicking on untrusted links and hence, these scripts pass cookies information to attackers.

Question 23

What is DOM (Document Object Model) and how is it linked to CSS?

Answer 23

The Document Object Model (DOM) is a cross-platform and language-independent application programming interface that treats an HTML, XHTML, or XML document as a tree structure wherein each node is an object representing a part of the document.

With the Document Object Model, programmers can create and build documents, navigate their structure, and add, modify, or delete elements and content. The DOM specifies interfaces which may be used to manage XML or HTML documents.

When a browser displays a document, it must combine the document’s content with its style information. The browser converts HTML and CSS into the DOM (Document Object Model). The DOM represents the document in the computer’s memory. It combines the document’s content with its style.

Question 24

What is Sass?

Answer 24

Sass or Syntactically Awesome StyleSheets is a CSS preprocessor that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly.

A CSS preprocessor is a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS.

Question 25

What is a Polyfill?

Answer 25

A polyfill is essentially the specific code (or plugin) that would allow you to have some specific functionality that you expect in current or “modern” browsers to also work in other browsers that do not have the support for that functionality built in.

Polyfills are not part of the HTML5 standard
Polyfilling is not limited to Javascript

Question 26

What is global installation of dependencies?

Answer 26

Globally installed packages/dependencies are stored in /npm directory. Then they can be used in CLI (Command Line Interface) function of any node.js but can not be imported using require() in Node application directly. To install a Node project globally use -g flag.

Question 27

What is impersonation?

Answer 27

Impersonation means that some specific users (usually Admins) could get an access to other user’s data.

Question 28

What is the difference between <span> and <div>?</div></span>

Answer 28

<div> is a block element
<span> is inline element

- it’s illegal to place a block element inside an inline element
- while div can have a p tag, and a p tag can have a span, it is not possible for span to have a div or p tag inside.</span></div>

Question 29

You need to update your local repos. What git commands will you use?

Answer 29

1) git fetch origin

2) git pull origin master

Question 30

Could you explain the Gitflow workflow?

Answer 30

Main - production ready branch

Hotfix - maintenance or “hotfix” branches are used to quickly patch production releases

Develop - the branch to which all feature branches are merged and where all tests are performed

Feature - each new feature should reside in its own branch, which can be pushed to the develop branch

Question 31

Describe Closure concept in JavaScript as best as you could

Answer 31

If you declare a function within another function, then the local variables can remain accessible after returning from the function you called.

Question 32

Explain the difference between undefined and not defined in JavaScript

Answer 32

undefined - returns when a variable that is declared but not defined

not defined - the variable was never declared in the first place

Question 33

What is a cookie?

Answer 33

• Limited storage space 4096 bytes / ~4 kb
• Only allow to store data as strings
• Stored data is sent back to server on every HTTP request such as HTML, CSS, Images etc.
• Can store only 20 cookies per domain
• In total 300 cookies are allowed on a site
• Setting HTTP only flag will prevent accessing cookies via javascript
• Can set expiration duration for auto deletion (can be set either from server or client)

Question 34

What is Session Storage

Answer 34

• Storage space is 5 mb / ~5120 kb
• Storage space may vary a little based on the browser
• Only allow to store data as strings
• Data is available per window or tab
• Once window or tab is closed stored data is deleted
• Data will be only available on same origin

Question 35

What is local storage?

Answer 35

• Storage space is 5 mb / ~5120 kb
• Storage space may vary a little based on the browser
• Only allow to store data as strings
• Data will be only available on same origin
• Data is persistant (until explicitly deleted)
• API is similar to session storage

Question 36

Given two strings, return true if they are anagrams of one another

Answer 36

function isAnagram(first, second) {
  var a = first.toLowerCase();
  var b = second.toLowerCase();

a = a.split(“”).sort().join(“”);
b = b.split(“”).sort().join(“”);

return a === b;
}

Question 37

How to compare two objects in JavaScript?

Answer 37

Two non-primitive values, like objects (including function and array) held by reference, so both == and === comparisons will simply check whether the references match, not anything about the underlying values.

For example, arrays are by default coerced to strings by simply joining all the values with commas (,) in between. So two arrays with the same contents would not be == equal:

var a = [1,2,3];
var b = [1,2,3];
var c = "1,2,3";

a == c; // true
b == c; // true
a == b; // false

Question 38

How to create a zebra striped table with CSS?

Answer 38

tr:nth-child(even) {
background-color: #f2f2f2
}

Question 39

What do you know about serverless model?

Answer 39

Serverless refers to a model where the existence of servers is hidden from developers. It means you no longer have to deal with capacity, deployments, scaling and fault tolerance and OS. It will essentially reducing maintenance efforts and allow developers to quickly focus on developing codes.

Question 40

What is CSS preprocessor and why to user one?

Answer 40

A CSS preprocessor is a program that lets you generate CSS from the preprocessor’s own unique syntax. There are many CSS preprocessors to choose from, however most CSS preprocessors will add some features that don’t exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain.

Here are a few of the most popular CSS preprocessors:

• SASS (SCSS)
• LESS
• Stylus
• PostCSS

Question 41

What is ClickJacking?

Answer 41

ClickJacking is an attack that fools users into thinking they are clicking on one thing when they are actually clicking on another. The attack is possible thanks to HTML frames (iframes).

Its other name, user interface (UI) redressing, better describes what is going on. Users think they are using a web page’s normal UI, but in fact there is a hidden UI in control; in other words, the UI has been redressed. When users click something they think is safe, the hidden UI performs a different action.

Question 42

What is a Grid System in CSS?

Answer 42

A grid system is a structure that allows for content to be stacked both vertically and horizontally in a consistent and easily manageable fashion. Grid systems include two key components: rows and columns.

Some Grid Systems:

Simple Grid
Pure
Flexbox Grid
Bootstrap
Foundation

Question 43

What is the purpose of cache busting and how can you achieve it?

Answer 43

Browsers have a cache to temporarily store files on websites so they don’t need to be re-downloaded again when switching between pages or reloading the same page. The server is set up to send headers that tell the browser to store the file for a given amount of time. This greatly increases website speed and preserves bandwidth.

However, it can cause problems when the website has been changed by developers because the user’s cache still references old files. This can either leave them with old functionality or break a website if the cached CSS and JavaScript files are referencing elements that no longer exist, have moved or have been renamed.

Cache busting is the process of forcing the browser to download the new files. This is done by naming the file something different to the old file.

A common technique to force the browser to re-download the file is to append a query string to the end of the file.

src=”js/script.js” => src=”js/script.js?v=2”

The browser considers it a different file but prevents the need to change the file name.

Question 44

What will be the output of the following code?

var y = 1;
if (function f() {}) {
  y += typeof f;
}
console.log(y);

Answer 44

1undefined