Senior Frontend Developer Interview Questions And Answers

Float is used when you want to make an element of your page (usually an image) be pushed to the right or left and make other elements wrap around it.

In JavaScript, variables need to end with a semi-colon for them to be executed. However, with CoffeeScript, there is no necessity to add a semi-colon at the end of every statement. Hence, CoffeeScript simplifies the process of adding a semi-colon to variables.

Good code means a less buggy web applications and fewer coding crises. A good web developer should value testing and respect the QA process, because it will cut down on the number of late nights where they try to find an issue which has been uncovered in the code.

Do you ask a colleague, Stack Overflow, or other platforms? There’s no right or wrong answer here. In fact, a combination of both may be the best route. What is interesting is to see whether your candidate prefers to keep their head down or ask around if faced with a problem.

Does your candidate know the difference between a GET and a POST request? Do they remember to mention PATCH and CONNECT requests? We hope so. This is a solid question to assess their basic understanding of HTML.

MVC stands for Model View Controller. MVCs typically organise web applications into a well-structured pattern, making code easier to maintain. The term is well-known by developers and some famous examples of MVCs include Backbone.js and AngularJS. What makes this question interesting is not whether the interviewee has used a MVC, but what his or her preferences and experience reveal. Candidates who are able to articulate why they use one MVC over another, show that they are engaged in what they do, care about the technology they use, and have considered different options. You want to be able to trust your front end developer to keep up to date with new relevant technologies and have a clear idea of when and what should be used.

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

IIFE stands for immediately-invoked function expression; it executes immediately after created by adding a () after the function.

As the UI gets more and more complex we need some good ways to keep it more and more maintainable and reusable, and Some MVC frameworks for javascript have been widely adopted lately and it's a good plus if you have already used before and knows what's the benefits of them. The most famous MVC frameworks are backbone.js and angular.js, it's hard to not hear about them.

There are many advantages in using these frameworks, I can point out some of them:

☛ Organization: Forces your webapp to follow a well structured pattern;
☛ Maintainable: With organization comes an easy to maintain code;
☛ UI Binding: Some frameworks allow you to do that. So everytime your model changes, the view reflects it and vice-versa;
☛ Decoupled client: MVC frameworks like backbone.js incentivise you to use REST API's though their urlRoot attribute in their Models;
☛ Reusable components: Create reusable visual components;
☛ Single-page apps: Build single-page apps with Ajax requests;
☛ Friendly URL's: Native support for client-side url mapping;

Before speaking about who a Front-End Developer is, it is important to know what front-end is all about. Front-End, for a website, concerns all the components that the user accesses as part of his interactions with the website. So, it is all about the inclusion of buttons, color schemes, images, forms, animations and typography.

So, the job of a front-end developer basically involves the creation of user-friendly components of a website. He is a software programmer who writes codes for all the features of a website that will improve its functionality, in a number of creative ways. Making the best use of his innovative and creative web development skills, it is the prime responsibility of a front-end developer to ensure that the look and feel of a particular website is uniform across different web browsers.

The two basic rules for CoffeeScript are:

☛ Importance is given to whitespaces, which is why it doesn’t require curly braces.
☛ The absence of parentheses is another rule of CoffeeScript. Through this, you can write functions to take arguments without the need of parentheses.

This is, for all intents and purposes, another way of asking the web developer what his/her weaknesses are from a technical perspective.

This agile development technique isn’t always suitable for day-to-day development, but it’s interesting to assess whether your candidate is happy to sit down with a colleague and sort through your code.

This questions will give you an insight into how your candidate organizes their code. Do they separate JavaScript and HTML? Is the JS broken into logical units and kept in separate files? Do they use a script to concatenate these files into a single bundle? Do they use JS namespaces to avoid cluttering up the global namespace?

The workflow of a modern front-end developer has changed vastly in the past four or five years. A huge array of tools are available to build organized, scalable web applications by abstracting out many of the complexities and automating repetitive tasks. Each developer will share a different workflow which will give some insight into their organizational capacity and general technical preferences.

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.

JavaScript is read line by line. Sometimes, this can result in what seems like a subsequent line of code being executed prior to an earlier line of code. A callback function is used to prevent this from happening, because it is not called until the previous line of code has fully executed.

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

A good front-end developer should have working knowledge about:

☛ CSS
☛ HTML
☛ JavaScript
☛ JQuery

Apart from the above mentioned technical skills, a front-end developer will become an asset to an organization provided he possess the below mentioned “good-to-have” skills.

☛ Basic knowledge about SEO and tools like Dreamweaver and Flash which are used to present web-based information to end users
☛ Information about cross browser testing
☛ Knowledge of any of the Content Management Systems (CMS) like Drupal, WordPress and Joomla
☛ Knowledge about Object Oriented Programming languages like OOPS and PHP

CoffeeScript is a small programming language that helps you fine tune JavaScript code. This language which compiles into JavaScript is a perfect alternative to the irregular syntax of JavaScript. Consistency in syntax is what makes CoffeeScript superior to JavaScript. Here are the basic rules for CoffeeScript:

Absence of curly braces
Functions that take arguments do not need parentheses
CoffeeScript is a better option compared to JavaScript on account of the following inherent advantages.

CoffeeScript simplifies your daily programming chores in contrast to JavaScript.
CoffeeScript cuts down on coding requirements and permits you to express your program with small codes, when compared to JavaScript.
Through CoffeeScript, you can make the most of the lightweight add-ons like Python style list comprehension and Ruby string interpolation.

This is a great way to gauge your candidate’s self awareness, skills, and their place within their current team or in previous positions.

A stylesheet is a template file consisting of font and layout settings to give a standardised look to a website or web application. To keep a consistent look and feel to a project, there should only be one stylesheet. I like to ask this question to judge problem-solving, communication, and team skills.

This question is also different from a personal evaluation of one’s own work, as it requires a certain amount of analysis about styling and techniques used by others. The ability to clearly articulate your creative preferences is an important characteristic of a front end developer. This question puts people on the spot: generally developers would need 20–30 minutes to look at the page and underlying implementation, so before the interview we tend to tell the person we will be asking this. It can also work very well as a case study for a front end developer.

Three.js is an open-source JavaScript 3D library that allows you to create and display animated 3D computer graphics in a web browser. This is an API which uses WebGL to create impressive web demonstrations. And the best part of Three.js is that you can display all these graphics without depending on exclusive plug-ins.

Important features of Three.js along with their various functions are:

☛ Renderers: – canvas, svg, WebGL, CSS3D, DOM, Software; effects: stereo, cross-eyed.
☛ Shaders: – You can completely access GLSL capabilities which include: lens flare, depth pass and the all-in-one post-processing library.
☛ Scenes: – You can add or delete objects at run-time.
☛ Cameras: – Allows you to make the most of Orthographic and Perspective controllers like Trackball, FPS and Path.
☛ Lights: – This feature allows you to flip between various lighting options like spot and point lights, additionally permitting you to cast and receive shadows.
☛ Animations: – You can morph and perform Keyframe operations.
☛ Materials: – Your website can sport a smooth-shading, with various options coming in the form of textures and sheen. Phong, depth, lambert and face are some of the capabilities that you can employ.
☛ Objects: – Through this feature, you can create meshes, lines, sprites, ribbons and particles
☛ Geometry: – Modifiers like tube, lathe and extrude are available along with facilities to draw geometrical figures like cubes, spheres and cylinders
☛ Export/Import: – With this feature, you can work with CTM, Blender, FBX and OBJ
☛ Debugging: – WebGL Inspector, Stats.js and Three.js inspector are the features under this head
☛ Loaders: – This feature facilitates JSON, binary, scene, XHR and Image
☛ Support: – You can check out the world of information that is available in the form of public forum, API documentation and Wiki

In other words, how would your candidate deal with feedback from other people? If you are looking for someone help build your app or product, or maybe even to progress within your organization, then they will have to face tough feedback at some point, whether it’s from users or from within the company.