Front End Web Developer Interview Preparation Guide

Download PDF

apply lets you invoke the function with arguments as an array. call requires the parameters to be listed explicitly.

This and that are important to variable scope in JavaScript.

Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed.

Lazy loading is loading code only once user needs it. For Example, there is a button on the page, which shows different layout once user pressed it. So there is no need to load code for that layout on initial page load.

Cross-origin resource sharing (CORS) is a mechanism that allows many resources (e.g., fonts, JavaScript, etc.) on a web page to be requested from another domain outside the domain from which the resource originated. It's a mechanism supported in HTML5 that manages XMLHttpRequest access to a domain different.

CORS adds new HTTP headers that provide access to permitted origin domains. For HTTP methods other than GET (or POST with certain MIME types), the specification mandates that browsers first use an HTTP OPTIONS request header to solicit a list of supported (and available) methods from the server. The actual request can then be submitted. Servers can also notify clients whether "credentials" (including Cookies and HTTP Authentication data) should be sent with requests.

AJAX stands for asynchronous JavaScript and XML and allows applications to send and retrieve data to/from a server asynchronously (in the background) without refreshing the page. For example, your new Gmail messages appear and are marked as new even if you have not refreshed the page.

DOCTYPE is an instruction to the web browser about what version of the markup language the page is written. Its written before the HTML Tag. Doctype declaration refers to a Document Type Definition (DTD).

A GET request is typically used for things like AJAX calls to an API (insignificant changes), whereas a POST request is typically used to store data in a database or submit data via a form (significant changes). GET requests are less secure and can be seen by the user in the URL, whereas POST requests are processed in two steps and are not seen by the user. Therefore, POST requests are more secure.

A collection of data containing both properties and methods. Each element in a document is an object. Using the DOM you can get at each of these elements/objects and do some cool sh*t.

DOCTYPE is an instruction to the web browser about what version of the markup language the page is written. Its written before the HTML Tag. Doctype declaration refers to a Document Type Definition (DTD).

Three.js is an open source JavaScript 3D library that enables you to make and display animated, interactive 3D computer graphics on any compatible web browser without having a dependency on proprietary plug-ins.

Key features of Three.js include

☛ Renderers
☛ Scenes
☛ Cameras
☛ Lights
☛ Animations
☛ Materials
☛ Shaders
☛ Objects
☛ Geometry
☛ Loaders
☛ Export/Import
☛ Debugging
☛ Support

Every web project starts with everything neat, all CSS is organized in blocks or different CSS files and you know where everything is, right?
Right, until your project gets bigger, deadlines get tight, more developers come on board and someday you notice a strange behaviour in some elements of the page. When you inspect their styles you spot lots of css overrides coming from everywhere. This is the moment you realise how messy CSS can be.

Sass is the modern way of doing CSS and can save many lines of code in your stylesheets. This is possible because Sass works with variables, nested syntax and mathematical operations.
In my opinion one of the nicest features of sass is the possibility to write a selector just once and put all styles for that inside it. Do you need a more specific selector under an existing one? Just nest the specifics into the generic one.

You want a developer who really knows how to play to the strengths of your chosen platform. Some key advantages of JavaScript are listed below for your convenience.

☛ Lightweight: JavaScript can be executed within the user’s browser without having to communicate with the server, saving on bandwidth.
☛ Versatile: JavaScript supports multiple programming paradigms—object-oriented, imperative, and functional programming and can be used on both front-end and server-side technologies.
☛ Sleek Interactivity: Because tasks can be completed within the browser without communicating with the server, JavaScript can create a smooth “desktop-like” experience for the end user.
☛ Rich Interfaces: From drag-and-drop blocks to stylized sliders, there are numerous ways that JavaScript can be used to enhance a website’s UI/UX.
☛ Prototypal Inheritance: Objects can inherit from other objects, which makes JavaScript so simple, powerful, and great for dynamic applications.

null is an object with no value. undefined is a type.

typeof null; // "object"

typeof undefined; // "undefined"

function functionName(name) {
this.name = name;
}

// Creating an object

var functionName = new functionName("WTEN");
console.log(functionName.name); //WTEN

Floats are used to push elements to the left or right, so other elements wrap around it.

CSS preprocessors, such as SASS, have numerous benefits, such as variables and nesting.

☛ Visibility:Hidden; - It is not visible but takes up it's original space.
☛ Display:None; - It is hidden and takes up absolutely no space as if it was never there.

Get:
With GET the form data is encoded into a URL by the browser. The form data is visible in the URL allowing it to be bookmarked and stored in web history. The form data is restricted to ASCII codes. Because URL lengths are limited there can be limitations on how much form data can be sent.

Post:
With POST all the name value pairs are submitted in the message body of the HTTP request which has no restrictions on the length of the string. The name value pairs cannot be seen in the web browser bar.

POST and GET correspond to different HTTP requests and they differ in how they are submitted. Since the data is encoded in differently, different decoding may be needed.

☛ CoffeeScript allows you to express your program with a lot less code than JavaScript
☛ It has a lot of lightweight add-ons like Ruby string Interpolation and Python style list comprehension
☛ Makes everyday tasks easier to perform with CoffeScript rather than JavaScript

When you want an element on the left or right of the floating element not to wrap around it, you can use clear.

There are many jobs associated with putting together an application, and chances are high that your new JavaScript developer will at the very least have to interface with a designer. You’re looking for a developer who can communicate effectively when they need to, responds to emails, and knows how to coordinate with other branches of a project.

The great thing about JavaScript is the ability to do away with the rigid rules of classical inheritance and let objects inherit properties from other objects.

☛ Classical Inheritance: A constructor function instantiates an instance via the “new” keyword. This new instance inherits properties from a parent class.
☛ Prototypal Inheritance: An instance is created by cloning an existing object that serves as a prototype. This instance—often instantiated using a factory function or “Object.create()”—can benefit from selective inheritance from many different objects.

In a nutshell page performance is widely understood as the page load time from the users' perspective, so below are some steps that might improve a page's performance.

Use sprite images whenever possible, try to group small images commonly used in a single file to be requested just once. See how Google uses sprites in Google Maps to make one request instead of one for each small image. See a sprite from Google Maps

Javascripts should be at the bottom of the page, instead of in the head as we use to see out there;

Ensure parallel requests of your JS and CSS files. In order to force the browser to do that, you can optimize the order you include resources in your page. This item can generate its own blog post or even a book so I prefer to suggest you a really good reading about it.

Compress images whenever possible, it makes a difference;

Browser Caching is also very import to be set for static resources like JS and CSS files, images, PDFs and HTML. Caching is set in the HTTP header by informing browsers the expiry date or maximum age. Then browsers can load the last downloaded resource from the cache instead of request it again.

For variables in JavaScript, you have to add semi-colon at the end of it to execute while in CoffeeScript there is no need to add Semi-colon at the end of the statement. Unlike, JavaScript, CoffeeScript adds up semi-colon with ease.

Native - existing in JavaScript. Host - existing in the environment.