Front End Dev Interview Questions

Explain what are the difference between Get and Post?

A GET request is generally used for things like AJAX calls to an API, whereas a POST request is typically utilized to store data in a database or submit data through a form. GET requests are limited secure and can be viewed by the user in the URL, whereas POST requests are used in two steps and are not seen by the user. So, POST requests are more secure.

What is a callback function?

A callback function is utilized to limit this from happening because it is not called until the previous line of code has thoroughly executed.

Explain what is a clear?

A clear is utilized when you don't need an element to wrap around another element, such as a float.

Explain what is a Closure?

A closure is a sequence of a function bundled together with references to its enclosing state. It gives you access to an outer function's scope from an inner function. When a function renders a function, that is when the concept of closures becomes more consistent. The rendered function has access to variables that are not in the global scope, but they individually exist in its closure.

What is a Closure?

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time. To use a closure, define a function inside another function and expose it. To expose a function, return it or pass it to another function. The inner function will have access to the variables in the outer function scope, even after the outer function has returned.

How do you structure your source code to make it easy for leverage by your colleagues?

A front-end developer needs to discuss their use of code organization and commenting. They need to explain how they use notes in their programming process to explain the steps they have taken, ensuring an efficiency of understanding amongst collaborators.

Explain how you would ensure that your web design is user-friendly and what kinds of steps would you use?

A front-end developer needs to talk about working alongside UX(User Experience) designers to imagine and conceptualize a web page that cultivates a user-centric experience, testing the website with users to ensure optimal design and assuring the web page is optimized for mobile phone viewing.

What are the technical and additional skills that are needed to be a front-end developer?

A good front-end developer needs to have a working knowledge about: HTML CSS JQuery JavaScript Apart from the above mentioned technical skills, a front-end developer should have the below mentioned "good-to-have" skills. Experience in any of the Content Management Systems (CMS) like WordPress, Drupal, and Joomla. Knowledge of cross-browser testing. Knowledge about OOPS and PHP. Basic knowledge about SEO & tools like Dreamweaver and Flash which are utilized to present web-based information to end users.

What are the pros and cons of monolithic vs microservice architectures?

A monolithic architecture means that your app is written as one cohesive unit of code whose components are designed to work together, sharing the same memory space and resources. A microservice architecture means that your app is made up of lots of smaller, independent applications capable of running in their own memory space and scaling independently from each other across potentially many separate machines. Monolithic Pros: The major advantage of the monolithic architecture is that most apps typically have a large number of cross-cutting concerns, such as logging, rate limiting, and security features such audit trails and DOS protection. When everything is running through the same app, it's easy to hook up components to those cross-cutting concerns. There can also be performance advantages, since shared-memory access is faster than inter-process communication (IPC). Monolithic cons: Monolithic app services tend to get tightly coupled and entangled as the application evolves, making it difficult to isolate services for purposes such as independent scaling or code maintainability. Monolithic architectures are also much harder to understand, because there may be dependencies, side-effects, and magic which are not obvious when you're looking at a particular service or controller. Microservice pros: Microservice architectures are typically better organized, since each microservice has a very specific job, and is not concerned with the jobs of other components. Decoupled services are also easier to recompose and reconfigure to serve the purposes of different apps (for example, serving both the web clients and public API). They can also have performance advantages depending on how they're organized because it's possible to isolate hot services and scale them independent of the rest of the app. Microservice cons: As you're building a new microservice architecture, you're likely to discover lots of cross-cutting concerns that you did not anticipate at design time. A monolithic app could establish shared magic helpers or middleware to handle such cross-cutting concerns without much effort. In a microservice architecture, you'll either need to incur the overhead of separate modules for each cross-cutting concern, or encapsulate cross-cutting concerns in another service layer that all traffic gets routed through. Eventually, even monolthic architectures tend to route traffic through an outer service layer for cross-cutting concerns, but with a monolithic architecture, it's possible to delay the cost of that work until the project is much more mature. Microservices are frequently deployed on their own virtual machines or containers, causing a proliferation of VM wrangling work. These tasks are frequently automated with container fleet management tools. Good to hear: Positive attitudes toward microservices, despite the higher initial cost vs monolthic apps. Aware that microservices tend to perform and scale better in the long run. Practical about microservices vs monolithic apps. Structure the app so that services are independent from each other at the code level, but easy to bundle together as a monolithic app in the beginning. Microservice overhead costs can be delayed until it becomes more practical to pay the price. Red flags: Unaware of the differences between monolithic and microservice architectures. Unaware or impractical about the additional overhead of microservices. Unaware of the additional performance overhead caused by IPC and network communication for microservices. Too negative about the drawbacks of microservices. Unable to articulate ways in which to decouple monolithic apps such that they're easy to split into microservices when the time comes. Underestimates the advantage of independently scalable microservices.

Describe what is a Thread-Local object in Python Flask?

A thread-local object is an object that is stored in a dedicated structure, attached to the current thread id. Flask utilizes thread local objects internally so that user don't have to pass objects around from function to function within a request to stay threadsafe. Besides, Thread local storage performs your logger's context global but only within the current thread. This approach is helpful, but it needs a valid request context for dependency injection or when attempting to reuse code which utilizes a value pegged to the request.

What is Ajax?

AJAX (Asynchronous JavaScript and XML) allows applications to transport data to/from a server asynchronously without refreshing the page. This means that it is likely to update parts of a web page, without reloading the entire page. For instance, your new Gmail messages arrive and are marked as new even if you have not refreshed the web page.

What is the difference between classical inheritance and prototypal inheritance?

Class Inheritance: instances inherit from classes (like a blueprint — a description of the class), and create sub-class relationships: hierarchical class taxonomies. Instances are typically instantiated via constructor functions with the `new` keyword. Class inheritance may or may not use the `class` keyword from ES6. Prototypal Inheritance: instances inherit directly from other objects. Instances are typically instantiated via factory functions or `Object.create()`. Instances may be composed from many different objects, allowing for easy selective inheritance. Good to hear: Classes: create tight coupling or hierarchies/taxonomies. Prototypes: mentions of concatenative inheritance, prototype delegation, functional inheritance, object composition. Red Flags: No preference for prototypal inheritance & composition over class inheritance.

Explain the difference between classes and IDs?

Classes and ID selectors, both are utilized as hooks for CSS styles. The ID's are commonly used to style elements that only look once on a page, such as one instance of a navigational menu. The Classes are utilized to style different elements in the same fashion, such as the presence of links.

Can you tell us what are the benefits of Coffee Script over JavaScript?

CoffeeScript has a lot of lightweight add-ons like Ruby string Interpolation and Python style list comprehension. It also enables you to express your program with a lot shorter code than JavaScript It makes even good JavaScript code more readable. It makes everyday tasks easier to perform with CoffeeScript rather than JavaScript.

Explain the benefits of Coffee Script over JavaScript?

CoffeeScript has a lot of lightweight add-ons like Ruby string Interpolation and Python style list comprehension. It also enables you to express your program with a lot shorter code than JavaScript It makes even good JavaScript code more readable. It makes everyday tasks easier to perform with CoffeeScript rather than JavaScript.

Describe Coffee Script?

CoffeeScript is a little programming language that compiles into JavaScript. It is an attempt to exhibit the good parts of JavaScript in a simple way. It also assists to write JavaScript code better by presenting you with a more constant syntax and skirting the unusual nature of JavaScript language.

Explain the difference between cookies, session storage, and local storage?

Cookies allow applications to store data in a client's browser.Session storage property allows applications to store data until the window is closed.Local storage property lets applications to store data without an end.

Explain the importance of the HTML DOCTYPE?

DOCTYPE is an instruction to the web browser regarding what version of the markup language the page is written. The DOCTYPE declaration need to be the pretty first thing in your HTML document, before the <html> tag. Doctype declaration points to a Document Type Definition (DTD). It provides markup language rules, so a browser can interpret the content correctly.

What is Event Bubbling?

Event bubbling is a type of event propagation where the event first triggers on the deepest target element. It causes all events in the child nodes to be automatically passed to its parent nodes. The advantage of this method is speed because the code only requires to traverse the DOM tree once.

Explain what is Event Delegation?

Event delegation points to the process of using event propagation to handle events at a higher level in the DOM than the element on which the event originated. It enables you to avoid adding event listeners to particular nodes; instead, you can add a single event listener to a parent element.

Can you tell me when would you utilize CSS float?

Float is utilized when you need to make an element of your web page be pushed to the right or left and make other elements cover around it.

What's your process for addressing browser-specific rendering problems? Do you find that a certain browser is more challenging to work with than others?

Front end developers have to introduce browser-specific hacks into web applications and pages due to the way each application handles rendering. This common process should be a familiar one for the people you interview. What to look for in an answer: Examples of browser-specific workarounds Understanding of how browsers render apps and pages Knowledge of troubleshooting browser-specific problems Example: "I often have to change the DIV positions on web pages for Microsoft Edge. This browser is the most problematic one for me, as I don't run into issues on Chrome or Firefox nearly as often."

How do you ensure that your website design or web application is accessible and user-friendly?

Front end developers need a strong grasp of usability and accessibility when they're designing experiences for end-users. This question gives you insight into their knowledge of these standards and best practices. What to look for in an answer: First-hand experience implementing usability and accessibility standards A drive to create a web experience that's accessible to all end users Ways that the applicant has implemented usability and accessibility in their previous projects Example: "I test my web applications on various browsers and devices to check whether the experience is usable on all devices. I also use popular screen reading software and other assistive solutions to see whether it's accessible for all potential users."

How do you structure your CSS and JavaScript to make it easier for other developers to work with?

Front end developers often work on code created by previous employees or operate as part of a team. This question gives you an idea of whether they can create websites or web applications that will be understandable by other employees. What to look for in an answer: Experience with code organization and code commenting First-hand knowledge of what happens when code isn't commented appropriately A willingness to make things easier on the other development teams Example: "I organize my stylesheets with sections for each site component. Each section has comments throughout the code so other developers can change it."

What are your favorite features of HTML5, and how have you implemented them in your front end development projects?

Front end developers spend a lot of time using HTML5 when they're putting together web designs and have access to a wide range of features that can save development time and improve the end product. What to look for in an answer: In-depth knowledge of HTML5 features Clear explanation of how the applicant used HTML5 in past projects Creative usage of HTML5 features Example: "I enjoy the way HTML5 handles multimedia support compared to previous versions. I use this feature to develop a front end design that incorporates videos and audio as an essential part of the experience without worrying about it not loading properly or breaking the page."

What is functional programming?

Functional programming produces programs by composing mathematical functions and avoids shared state & mutable data. Lisp (specified in 1958) was among the first languages to support functional programming, and was heavily inspired by lambda calculus. Lisp and many Lisp family languages are still in common use today. Functional programming is an essential concept in JavaScript (one of the two pillars of JavaScript). Several common functional utilities were added to JavaScript in ES5. Good to hear: Pure functions / function purity. Avoid side-effects. Simple function composition. Examples of functional languages: Lisp, ML, Haskell, Erlang, Clojure, Elm, F Sharp, OCaml, etc... Mention of features that support FP: first-class functions, higher order functions, functions as arguments/values. Red flags: No mention of pure functions / avoiding side-effects. Unable to provide examples of functional programming languages. Unable to identify the features of JavaScript that enable FP.

What is the difference between XHTML and HTML?

HTML and XHTML are both markup languages in which web pages are written. The main difference between the two is that HTML syntax is SGML based while XHTML syntax is XML based.

Explain what is the difference between a host object and a native object?

Host Objects - are objects supplied by a particular environment. Native Objects - are standard built-in objects given by Javascript.

How can you increase page performance?

I can increase the page performance by the following methods. Clean up the HTML document. Reduce external HTTP requests. Sprites, compressed images, smaller images. Incorporate JavaScript at the bottom of the page. Minify CSS, JavaScript, HTML. CDN and Caching.

Explain how variables differ in CoffeeScript than JavaScript?

In JavaScript, you have to add a semi-colon for variables at the end of it to execute. In CoffeeScript, there is no necessity to add Semi-colon at the end of the statement. Unlike, CoffeeScript, JavaScript adds up semi-colon with ease.

Explain what is the difference between Class and Prototypal inheritance?

Inheritance in JavaScript is different from most other programming languages. The object system in JavaScript is prototype based, not class based. Objects in JavaScript are just a collection of a name (key) and value pairs. When it comes to inheritance, JavaScript only has one construct: objects. Every object has a private property which contains a link to another object called its prototype.

What is the difference between Block, Inline, Inline-block, and Box-sizing?

Inline is the default. For example: An inline element is <span>. Block shows as a block element, such as <div> or <p>. Inline-block shows an element as an inline-level block container. Box-sizing displays the browser sizing properties.

Can you name two programming paradigms important for JavaScript app developers?

JavaScript is a multi-paradigm language, supporting imperative/procedural programming along with OOP (Object-Oriented Programming) and functional programming. JavaScript supports OOP with prototypal inheritance. Good to hear: Prototypal inheritance (also: prototypes, OLOO). Functional programming (also: closures, first class functions, lambdas). Red flags: No clue what a paradigm is, no mention of prototypal oo or functional programming.

Explain what is lazy loading?

Lazy loading is a design pattern generally utilized in computer programming to delay initialization of an object until the period at which it is required. It can contribute to performance in the program's operation if correctly and properly utilized. Besides, it is a loading code only once the user needs it. For instance, there is a button on the page, which reveals a different layout once the user pressed it. Hence, there is no necessary to load code for that layout on initial page load.

Describe what is the difference between Null and Undefined?

Null is an object with no value. Undefined is a type. typeof null; // "object" typeof undefined; // "undefined"

What are the pros and cons of functional programming vs object-oriented programming?

OOP Pros: It's easy to understand the basic concept of objects and easy to interpret the meaning of method calls. OOP tends to use an imperative style rather than a declarative style, which reads like a straight-forward set of instructions for the computer to follow. OOP Cons: OOP Typically depends on shared state. Objects and behaviors are typically tacked together on the same entity, which may be accessed at random by any number of functions with non-deterministic order, which may lead to undesirable behavior such as race conditions. FP Pros: Using the functional paradigm, programmers avoid any shared state or side-effects, which eliminates bugs caused by multiple functions competing for the same resources. With features such as the availability of point-free style (aka tacit programming), functions tend to be radically simplified and easily recomposed for more generally reusable code compared to OOP. FP also tends to favor declarative and denotational styles, which do not spell out step-by-step instructions for operations, but instead concentrate on what to do, letting the underlying functions take care of the how. This leaves tremendous latitude for refactoring and performance optimization, even allowing you to replace entire algorithms with more efficient ones with very little code change. (e.g., memoize, or use lazy evaluation in place of eager evaluation.) Computation that makes use of pure functions is also easy to scale across multiple processors, or across distributed computing clusters without fear of threading resource conflicts, race conditions, etc... FP Cons: Over exploitation of FP features such as point-free style and large compositions can potentially reduce readability because the resulting code is often more abstractly specified, more terse, and less concrete. More people are familiar with OO and imperative programming than functional programming, so even common idioms in functional programming can be confusing to new team members. FP has a much steeper learning curve than OOP because the broad popularity of OOP has allowed the language and learning materials of OOP to become more conversational, whereas the language of FP tends to be much more academic and formal. FP concepts are frequently written about using idioms and notations from lambda calculus, algebras, and category theory, all of which requires a prior knowledge foundation in those domains to be understood. Good to hear: Mentions of trouble with shared state, different things competing for the same resources, etc... Awareness of FP's capability to radically simplify many applications. Awareness of the differences in learning curves. Articulation of side-effects and how they impact program maintainability. Awareness that a highly functional codebase can have a steep learning curve. Awareness that a highly OOP codebase can be extremely resistant to change and very brittle compared to an equivalent FP codebase. Awareness that immutability gives rise to an extremely accessible and malleable program state history, allowing for the easy addition of features like infinite undo/redo, rewind/replay, time-travel debugging, and so on. Immutability can be achieved in either paradigm, but a proliferation of shared stateful objects complicates the implementation in OOP. Red flags: Unable to list disadvantages of one style or another — Anybody experienced with either style should have bumped up against some of the limitations.

What is asynchronous programming, and why is it important in JavaScript?

Synchronous programming means that, barring conditionals and function calls, code is executed sequentially from top-to-bottom, blocking on long-running tasks such as network requests and disk I/O. Asynchronous programming means that the engine runs in an event loop. When a blocking operation is needed, the request is started, and the code keeps running without blocking for the result. When the response is ready, an interrupt is fired, which causes an event handler to be run, where the control flow continues. In this way, a single program thread can handle many concurrent operations. User interfaces are asynchronous by nature, and spend most of their time waiting for user input to interrupt the event loop and trigger event handlers. Node is asynchronous by default, meaning that the server works in much the same way, waiting in a loop for a network request, and accepting more incoming requests while the first one is being handled. This is important in JavaScript, because it is a very natural fit for user interface code, and very beneficial to performance on the server. Good to hear: An understanding of what blocking means, and the performance implications. An understanding of event handling, and why its important for UI code. Red flags: Unfamiliar with the terms asynchronous or synchronous. Unable to articulate performance implications or the relationship between asynchronous code and UI code.

What resources do you use to learn about the latest in front end development and design?

Technology and standards change constantly in front end development. Applicants who have an "always-be-learning" approach can learn new ways to improve the development process and improve the experience for end users. What to look for in an answer: Examples of publications the applicant reads Participation in open source or personal front end development projects Enrollment in continuing education workshops or online courses Example: "I have several subscriptions to front end development magazines and participate on the Stack Overflow forums. These resources help me learn about the latest innovations in front end development."

When is classical inheritance an appropriate choice?

The answer is never, or almost never. Certainly never more than one level. Multi-level class hierarchies are an anti-pattern. I've been issuing this challenge for years, and the only answers I've ever heard fall into one of several common misconceptions. More frequently, the challenge is met with silence. "If a feature is sometimes usefuland sometimes dangerousand if there is a better optionthen always use the better option."~ Douglas Crockford Good to hear: Rarely, almost never, or never. A single level is sometimes OK, from a framework base-class such as React.Component. "Favor object composition over class inheritance."

Explain how do you deal with browser-specific style incompatibility?

There are multiple ways to operate about this. According, the simple way to proceed would be to utilize a conditional statement in the head tag of your HTML. In this way, you can recognize the browser and load an external stylesheet.

When is prototypal inheritance an appropriate choice?

There is more than one type of prototypal inheritance: Delegation (i.e., the prototype chain). Concatenative (i.e. mixins, `Object.assign()`). Functional (Not to be confused with functional programming. A function used to create a closure for private state/encapsulation). Each type of prototypal inheritance has its own set of use-cases, but all of them are equally useful in their ability to enable composition, which creates has-a or uses-a or can-do relationships as opposed to the is-a relationship created with class inheritance. Good to hear: In situations where modules or functional programming don't provide an obvious solution. When you need to compose objects from multiple sources. Any time you need inheritance. Red flags: No knowledge of when to use prototypes. No awareness of mixins or `Object.assign()`.

What does "favor object composition over class inheritance" mean?

This is a quote from "Design Patterns: Elements of Reusable Object-Oriented Software". It means that code reuse should be achieved by assembling smaller units of functionality into new objects instead of inheriting from classes and creating object taxonomies. In other words, use can-do, has-a, or uses-a relationships instead of is-a relationships. Good to hear: Avoid class hierarchies. Avoid brittle base class problem. Avoid tight coupling. Avoid rigid taxonomy (forced is-a relationships that are eventually wrong for new use cases). Avoid the gorilla banana problem ("what you wanted was a banana, what you got was a gorilla holding the banana, and the entire jungle"). Make code more flexible. Red Flags: Fail to mention any of the problems above. Fail to articulate the difference between composition and class inheritance, or the advantages of composition.

What are your favorite types of front end development projects to work on? What do you like about them?

This question gives you insight into the personal preferences of the front end developer. Some applicants may prefer to only work on website projects, while others enjoy being involved in web application teams more. What to look for in an answer: A strong opinion on their favorite types of development Enthusiasm for the project types they describe Examples of their favorite front end development projects Example: "I recently worked on a web application for a local hospital. It streamlined the patient intake process and I loved knowing that my work helped patients get the help they needed faster."

Can you explain the concept of a CSS float and provide an example of its usage?

This technical question quizzes the applicant on their understanding of a common CSS element. This basic question is a good way to screen the interviewee and ensure that they're more than acquainted with CSS. What to look for in an answer: A concrete definition of CSS floats Examples of how the applicant uses this element in their code Confidence in explaining this technical concept to any audience Example: "A CSS float tells the browser to put a particular element to the right side or the left side of the container. I use floats when I'm developing a page that dynamically resizes based on the user resolution."

What are two-way data binding and one-way data flow, and how are they different?

Two way data binding means that UI fields are bound to model data dynamically such that when a UI field changes, the model data changes with it and vice-versa. One way data flow means that the model is the single source of truth. Changes in the UI trigger messages that signal user intent to the model (or "store" in React). Only the model has the access to change the app's state. The effect is that data always flows in a single direction, which makes it easier to understand. One way data flows are deterministic, whereas two-way binding can cause side-effects which are harder to follow and understand. Good to hear: React is the new canonical example of one-way data flow, so mentions of React are a good signal. Cycle.js is another popular implementation of uni-directional data flow. Angular is a popular framework which uses two-way binding. Red flags: No understanding of what either one means. Unable to articulate the difference.

Can you explain the difference between visibility:hidden; and display:none?

Visibility:Hidden; - It is not visible but gets up it's original space. Display:None; - It is hidden and takes no space.

Can you tell us when would you utilize CSS clear?

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

Explain the syntax and how to use a Function as A Class?

function functionName(name) { this.name = name; } // Creating an object var variable_name= new functionName("Zuan"); console.log(variable_name.name); //Zuan