Senior Frontend Developer Interview Questions & Answers

Download PDF

This could be anything from the time they fixed the coffee machine, or helped a colleague fix their bike. It doesn’t really matter what they did — it just gives you an indication of how they solve problems and interact in the wider corporate environment.

CORS (Cross-Origin Resource Sharing) is a HTML5 staple that should be familiar to most front-end web developers. It allows you to request many different resources (jQuery, fonts, and so on) from a domain outside of the domain from which the resource came from.

This is a good way to assess how your candidate approaches a basic chunk of work. Do they use snippets to quickly layout a basic HTML page, add a little jQuery and start coding? Or do they use a more in-depth approach such as Bower or Yeoman?

Continuous self evaluation is a must for a developer. You do not want to employ someone who continues to make the same mistakes.

This will depend on your candidate’s development environment as different programming languages use different profilers and some frameworks have built-in debug tools to find performance issues. This doesn’t matter too much, but their approach does.

It doesn’t matter whether your candidate is working with your exact development environment or not — but you do need to find someone who is adaptable to different environments and will voice their opinions. It will also give you an indication of whether they have experience with frameworks, version control systems, unit testing, and others.

In other words, this will determine if your candidate continues to learn programming and makes the effort to stay on top of his skills. You can ask your candidate about their favorite programming-related Twitter accounts and why they like it, for example. If your candidate doesn’t use Twitter, ask which tech publications they read and authors or personalities in the dev world they admire and why.

Web development is always changing, so being curious about the latest trends and forming opinions about them is typicially a good sign.

Through Python Flask, front-end developers use thread local objects internally. This is a function of user-friendliness which does not require the user to pass objects around from one function to another. This paves the way to process a request alongside permitting to operate in a “threadsafe” condition. Although this approach is worthwhile, it is essential to obtain a valid request context for dependency injection or when you are trying to reuse the code which employs a value tagged to the request.

You may be looking for a problem solver, brilliant communicator, or someone with a willingness to learn. Ask them to give examples of how they can demonstrate this skill, and use this to determine whether or not this fits what you are looking for. Depending on the nature of the job, you may prioritize certain soft skills over others.

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."

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.

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

typeof null; // "object"

typeof undefined; // "undefined"

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."

This questions will test your candidate’s CSS understanding. Would they combine them into a single CSS file? Or just combine application-specific stylesheets? And what is their approach if they are using a library, such as Bootstrap?

It’s best to ease your developer candidate into the interview gently. Their response will also give you an early indication of their ambitions and perceived view of success and way of working. For example, did they mention other team members during their answer, or just focus on their own efforts?

This is a biggie. The ability to balance and understand these very different factors is a core competency for any web developer. Their response will also indicate which factors they will prioritize when coding. For example, if you are a large financial institution, you may favor security over SEO. If you are an online publication, performance and SEO will be more important for your type of work.

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. Check this out, it's the google's best practices on page speed load.

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.

JavaScript variables have functional scope.

There is no definitive answer to the question, but it will give a front end developer the chance to evaluate their own experience and also reveal their expectations. To a certain extent the difference between UI/UX and front end development is the difference between design and implementation. UI/UX tends to look more at the human-side of the design process, including undertaking research by asking the questions about how users interact with a website, which would then form the basis for design concepts. A UI/UX designer would also do testing and evaluation post-implementation. Understanding the front end needs of your own company before asking this question gives an insight into the candidate’s potential fit.

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.

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

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.

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 is a great way to gauge your candidate’s self awareness, skills, and their place within their current team or in previous positions.

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.