1. Tell me how variables differ in CoffeeScript than JavaScript?
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.
2. Explain the difference between a host object and a native object?
Native – existing in JavaScript. Host – existing in the environment.
3. Tell me what are the basic rules to remember for Coffee Script?
The basic rule for Coffee Script
☛ Whitespace matters: There are no curly braces in CoffeeScript
☛ No parentheses: Functions that take arguments do not require parentheses
4. Explain does Angular use the jQuery library?
Yes, Angular can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.
Due to a change to use on()/off() rather than bind()/unbind(), Angular 1.2 only operates with jQuery 1.7.1 or above.
5. How would you call a function directly on a string?
See section on using prototypes to call functions on common data types in JavaScript Objects & Prototypes.
A stylesheet is template file consisting of font and layout settings to give a standardized 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.
7. Tell me what is the difference between responsive and adaptive development?
In a nutshell, responsive is fluid and flexible, whereas adaptive adapts to the detected device/screen size.
8. Tell me what is the difference between == and ===?
== compares the value; === compares the value and the type:
"5" == 5; // true
"5" === 5; // false
9. Explain how will you show/hide buttons and enable/disable buttons conditionally?
Using the ng-show and ng-disabled directives.
<div class="dataControlPanel"
ng-show="accounts.releasePortfolios">
<div class="dataControlButtons">
<button class="btn btn-primary btn-small"
ng-click="saveComments()" ng-disabled="disableSaveButton">Save</button>
<button class="btn btn-primary btn-small"
ng-click="releaseRun()" ng-disabled="disableReleaseButton">Release</button>
</div>
</div>
10. Explain me 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 organised, scalable web applications, which reduce complex and automate repetitive tasks. Each developer will share a different unique workflow which will give you valuable insight into their organisational patterns and general technical preferences.
11. Tell me what is the difference between a prototype and a class?
Prototype-based inheritance allows you to create new objects with a single operator; class-based inheritance allows you to create new objects through instantiation. Prototypes are more concrete than classes, as they are examples of objects rather than descriptions of format and instantiation.
Prototypes are important in JavaScript because JavaScript does not have classical inheritance based on classes; all inheritances happen through prototypes. If the JavaScript runtime can't find an object's property, it looks to the object's prototype, and continues up the prototype chain until the property is found.
12. Explain 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.
13. Explain me the concept of scope hierarchy? How many scopes can an application have?
Each Angular application has exactly one root scope, but may have several child scopes. The application can have multiple scopes, because child controllers and some directives create new child scopes. When new scopes are created, they are added as children of their parent scope. This creates a hierarchical structure similar to the DOM where they're attached.
When Angular evaluates a bound variable like say {{firstName}}, it first looks at the scope associated with the given element for the firstName property. If no such property is found, it searches the parent scope and so on until the root scope is reached. In JavaScript this behaviour is known as prototypical inheritance, and child scopes prototypically inherit from their parents. The reverse is not true. i.e. the parent can't see it's children's bound properties.
14. Tell me is AngularJS a templating system?
At the highest level, Angular does look like a just another templating system. But there is one important reason why the Angular templating system is different, that makes it very good fit for application development: bidirectional data binding. The template is compiled in the browser and the compilation step produces a live view. This means you, the developers, don't need to write code to constantly sync the view with the model and the model with the view as in other templating systems.
15. Tell me when would you use CSS float?
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.
16. Explain the difference between GET and POST?
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.
IIFE stands for immediately-invoked function expression; it executes immediately after created by adding a () after the function.
18. Tell me how will you initialize a select box with options on page load?
Use the ng-init directive.
<div ng-controller="apps/dashboard/account" ng-switch
on="!!accounts" ng-init="loadData()">
19. Explain difference between null and undefined?
This can be tricky and the best way to keep in your head is to memorise because if you try to relate javascript null to other languages, it will get more confusing.
In javascript, null is an object with no value and undefined is a type.
typeof null; // "object"
typeof undefined; // "undefined"
var a;
var b = null;
a == b; // "true" because their values are the same
a === b; // "false". they have different types
A style sheet is a template file consisting of font and layout settings to give a standardized look to a website or web application. To keep a consistent look and feel to a project, there should only be one style sheet. I like to ask this question to judge problem-solving, communication, and team skills.
The MVC typically helps you to organize web application into a well-structured pattern. This makes it a lot easier to maintain code and is well-known by developers.
Popular MVCs are as follows:
☛ AngularJS
☛ Backbone.js
For this question, what you're really trying to find out has nothing to do with whether they have used an MVC, but rather their preference and level of experience with it. If the candidate is able to articulate why they prefer one over the other, you'll know that they're engaged in what they do and care about the tools that they use.
Why is this important?
It's important as you have to be able to trust your front-end developer to keep up to date with new and relevant technologies. They should also have a clear idea about what should be used and when it should be used.
Event delegation allows you to avoid adding event listeners for specific nodes. Instead, you can add a single event listener to a parent element.
23. Tell me what is Three.js & its important features?
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
24. Tell me what is a Thread-Local object in Python Flask?
Flask uses thread local objects internally so that user don't have to pass objects around from function to function within a request in order to stay threadsafe. This approach is useful, but it requires a valid request context for dependency injection or when attempting to reuse code which uses a value pegged to the request.
25. Explain me how MVC is represented in AngularJS?
Mode-View-Controller (MVC) is a design pattern. It can be represented in AngularJS framework as follow:
Model: Model in AngularJS is just a JavaScript object which contains properties either primitive such as string, integer, Boolean, array or complex type object. Its main responsibility to hold data that come from controller or service. Some time it also contains business logic which related to view.
View: It's just a plain HTML page with embedded AngularJS directives and expression. In AngularJS we mainly represent model data through view.
Controller: It's a JavaScript function which main responsibility to bind model data to view and vise-versa. It can also contains business logic through which it determine which model goes to which view. Controller also responsible for bind model data that come http request or other services.
26. Tell me in CoffeeScript how clone-function is useful?
Clone function is useful in creating a complete new object in Coffee Script by
☛ Copying all attributes from the source object to the new object
☛ Repeating the steps of copying attributes from the source object for all sub-objects by calling the clone-function
☛ Creating a new object as the source object
27. Explain me what's the difference between HTML and XHTML?
XHTML is an HTML that follows the XML rules, which means a XHTML document must have well-formed markups in order to be rendered properly in all web browsers. Differently from XHTML, the HTML document can be rendered in most of the browsers even with markup errors such as no closing tags or wrong nested tags.
And how do I create a XHTML document?
XHTML is basically a HTML document with some rules that need to be applied. Have a look at these examples below and spot the differences.
<head>
<title>This is head</title>
</head>
<BODY>
This is the body of the document with body tag in capital letters
Notice that there's no close body tag and no tag as well.
This HTML document above can be opened with no problems in Chrome, even containing many markup errors because most browsers can fix them for you automatically.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
</body>
</html>
The code above is a well-formed XHTML document and that's the minimum you must have in order to render it. Notice the declaration of the doctype at the top of the document and the namespace (xmlns) attribute in html open tag. These elements are mandatory as well as all the tags in lowercase.
28. Tell me have you ever used an MVC? Which one and what do you like and dislike about it?
MVC stands for model view controller. MVCs typically organize webapps 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 angular.js. What makes this question interesting is not whether the frontend interviewee has used an 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 and have considered different options. You want to be able to trust your frontend developer to keep up to date with which technologies are relevant and have a clear idea of when and what should be used.
29. Explain me what is AJAX? Write an AJAX call?
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.
This question takes it beyond the personal evaluation of one's own work to the critical analysis of the techniques and styles that are used by others. It's important to be able to clearly articulate preferences when it comes to front-end development, so this question will put them on the spot.
One thing to note here is that the developer would need at least half an hour to review the page and its underlying implementation, so it's usually better to tell them up front that you will be asking this question.
31. Tell me how can you increase page performance?
(1) Sprites, compressed images, smaller images;
(2) include JavaScript at the bottom of the page;
(3) minify or concatenate your CSS and JavaScript; and
(4) caching.
32. Explain the difference between call and apply?
apply lets you invoke the function with arguments as an array. call requires the parameters to be listed explicitly.
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.
34. Explain me how would you organize your Javascript code?
The following pattern is the one that I personally prefer and is called 'module pattern', where we separate our javascript into logical modules, or namespaces. What you'll see below is an example of how I would separate my user module.
// Declaring my main namespace
var myapplication = myapplication || {};
// Declaring modules usermodule
myapplication.usermodule = (function() {
// createMessage: only accessible inside this module
var createMessage = function(message) {
return "Hello! " + message;
}
return {
// sayHello is a public method
sayHello: function(message) {
return createMessage(message);
}
}
})();
// Declaring another module
myapplication.adminmodule = (function(){
// your code here
})()
// This is how we call sayHello
myapplication.usermodule.sayHello("This is my module");
Some explanation on the code above
Take a look at the previous code and notice how I create my module using the notation below. It makes the function to be executed immediately because of the parenthesis at the end of the command. The result of the execution will be an object which will be set to my variable myapplication.usermodule.
...
myapplication.usermodule = (function() {
// code to be executed immediately
})();
So applying this pattern to your code you may have multiple modules and you have the control over what you want to make public and what to keep private. Besides your code will be more organized therefore easy to maintain.
35. Explain me what is the difference between WebGL and three.js?
WebGL:
· WebGL allows you to control the GPU in more direct way
· It is more an “immediate mode”
· It does not have additional support for text, for shaders built, for picking, etc.
Three.js:
· Three.js is built on top of WebGL and allows you to take care of lot of things like what objects to draw each frame
· It is more a “retained mode”
· It does have an additional support for text, for picking, for object hierarchy, etc.
