1. Tell me when have you solved a problem that didn't involve you coding?
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.
2. Tell us what do you know about CORS?
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.
3. Tell us can you describe your workflow when you create a web page or web app?
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?
4. Explain me a project that disappointed you. What would you change?
Continuous self evaluation is a must for a developer. You do not want to employ someone who continues to make the same mistakes.
5. Tell me what tools do you use to find a performance bug?
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.
6. Tell us about your preferred development environment?
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.
7. Tell us how are you keeping up with the latest developments in web development?
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.
8. Explain me what a Thread-Local object in Python Flask is?
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.
9. Tell us what are some of your best soft skills?
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."
11. Explain me have you used Sass? What's good about 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.
12. Tell me 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"
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."
14. Suppose if you have 5 different stylesheets, how would you best integrate them into the site?
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?
15. Explain me a project you're particularly proud of. What did you do that worked out well?
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.
17. Tell us what can you do to improve page performance?
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.
18. Tell us what Is Variable Scope?
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.
21. Tell me what Three.js is and quote its key features?
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.
24. Tell us how would the developers/project managers you've worked with describe you?
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.
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
27. Tell me when would you use CSS clear?
When you want an element on the left or right of the floating element not to wrap around it, you can use clear.
28. Tell us what Is A Callback Function?
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.
29. Tell me what Is The Lazy Loading?
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.
30. Tell us can you describe your workflow when you create a web page?
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.
31. Tell us how do you organize your JavaScript 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?
32. Tell me what do you think of pair programming? And have you ever done it?
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.
33. Tell us what's hard about coding?
This is, for all intents and purposes, another way of asking the web developer what his/her weaknesses are from a technical perspective.
34. Tell us what are the fundamental rules to remember when using CoffeeScript?
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.
35. Tell me what makes up a good Front-End Developer? What are his responsibilities?
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.
