Front-end-Developer-Interview-Questions
How do you organize your code? (module pattern, classical inheritance?)
module
List as many values for the display property that you can remember.
none | inline | block | list-item | inline-list-item | inline-block | inline-table | table | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | flex | inline-flex | grid | inline-grid | run-in | ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container | contents
CSS property hacks, conditionally included .css files, or... something else?
property hacks include both of : 1- Conditional comments to set classes on the html element <!--[if lt IE 7 ]> <html> <![endif]--> <!--[if IE 7 ]> <html> <![endif]--> <!--[if IE 8 ]> <html> <![endif]--> <!--[if IE 9 ]> <html> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]--> 2- Browser specific CSS hacks .someclass { *color: blue; /* IE 7 and below */ _color: blue; /* IE 6 */ } /* IE6, IE7 - star hack */ .someclass { *color: blue; }
What is the arity of a function?
the number of formal parameters defined for a function A function can determine its own arity (length) like this: // For IE, and ES5 strict mode (named function) function foo(x, y, z) { return foo.length; // Will return 3 } // Otherwise function bar(x, y) { return arguments.callee.length; // Will return 2 }
Explain how this works in JavaScript
this refers to the object scope that was called on. (left of dot) The this object is bound at runtime based on the context in which a function is executed: when used inside global functions,this is equal to window in nostrict mode and undefined in strict mode. whereas this is equal to the object when called as an object method. as a constructor call and apply bound functions as dom event handler Within JavaScript your code will always have some form on context. The way context works is through the this variable. The this variable will always refer to the object that the code is currently inside of. Remember that global objects are actually properties of the window object. This means that even in a global context, the this variable will still refer to an object (BOM Browser Object Model || window object).
What are the different ways to visually hide content (and make it available only for screen readers)?
#1: visibility: hidden #2: width: 0; height: 0; #3: text-indent: -1000px #4: absolute position off the screen
Difference between document load event and document ready event?
-ready means DOM is ready. -load means the page fully loaded. Includes inner frames, images etc.
What are the various clearing techniques and which is appropriate for what context?
1- Floating the container If you float an element containing floats, it will encompass its content. The side-effect of this is that we add another floated element to the page, while we most of the times want it to behave as a regular block element. That is solved by applying a width of 100% to the container as well, so it forces a line-break before the content after it. Downsides Setting a width to 100% might collide with desired padding. IE 6 seems to add an extra bottom margin in some cases. 2- Adding Overflow: Hidden To The Container If you add overflow: hidden to the containing element, it will automatically adjust its height and take the floated children into account. 3- Generating Content Through CSS (recommended) Another alternative is to use the CSS pseudo-class :after to generate content after the containing element, using it to clear floats and then hiding itself. Personally, I don't like this approach since it generates content to the page that has nothing to do there in the first place. .container-with-generated-content:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; } Downsides Not IE 6 nor IE 7 supports the :after pseudo-class, so you need to apply a hasLayout fix for both of them. Note that IE 7 also supports a hasLayout fix. ========== ========== - Empty Div Method: <div style="clear:both;"></div> - Overflow Method: setting auto or hidden overflow property on parent will expand it to contain the floats. - The Psuedo Method: uses the parent's :after to add the clear: both property .clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; }
Explain how you would get a query string parameter from the browser window's URL.
1. var queryString = location.search 2. parse queryString * queryString.split("=") * regExp 3. return specific parameter.
Explain AJAX in as much detail as possible
AJAX is short for Asynchronous Javascript + XML. The technique consists of making server requests for additional data without unloading the page, resulting in a better user experience.
What are the advantages/disadvantages of using CSS preprocessors? (SASS, Compass, Stylus, LESS)
Advantages - better oranization from nesting them - ability to define variables and mixins - have mathematical functions - joining multiple files - in some cases, cleaner syntaxes Disadvantages - mainly for designers not comfortable on the command line or programming concepts
What's a doctype do?
Basically, the DOCTYPE describes the HTML that will be used in your page. Browsers also use the DOCTYPE to determine how to render a page. Not including a DOCTYPE or including an incorrect DOCTYPE can trigger quirks mode. The kicker here is that quirks mode in Internet Explorer is quite different from quirks mode in Firefox (and other browsers), meaning that you'll have a much harder job trying to ensure your page works consistently in all browsers if pages are rendered in quirks mode than you will if they are rendered in standards mode. Wikipedia has a more indepth summary of the differences in rendering when using various DOCTYPEs. XHTML is enabled by certain doctypes, and there is quite a bit of debate about the use of XHTML which is covered well in XHTML — myths and reality. There are subtle differences between different "standards complaint" rendering doctypes, such as the HTML5 doctype (<!DOCTYPE html>, prior to HTML5 only known as the "skinny doctype" which not trigger standardised rendering in older browsers) and other DOCTYPEs such as this one for HTML 4.01 transitional:
Have you ever used a grid system, and if so, what do you prefer?
Bootstrap
Explain how a browser determines what elements match a CSS selector?
Browsers match from the right; it gives an obvious starting point and lets you get rid of most of the candidate selectors very quickly
Describe the difference between cookies, sessionStorage and localStorage.
Browsers that implement the "Web Storage" draft specification define two properties on the Window object:localStorage and sessionStorage. Both properties refer to a Storage object—a persistent associative array that maps string keys to string values. Storage objects work much like regular JavaScript objects: simply set a property of the object to a string, and the browser will store that string for you. The difference between localStorage and sessionStorage has to do with lifetime and scope: how long the data is saved for and who the data is accessible to. Session Storage = non persistent and scoped only to the current window localStorage = persistant and scoped to the domain. Cookies = the old school way of doing all of the above. Stores name/value pairs per domain.
What are the limitations when serving XHTML pages? Are there any problems with serving pages as application/xhtml+xml?
Browsers will display xml parse errors if your page contains invalid code. However that serving your pages as application/xhtml+xml will cause Internet Explorer 8 to show a download dialog box for an unknown format instead of displaying your page, as the first version of Internet Explorer with support for XHTML is Internet Explorer 9.
Explain CSS sprites, and how you would implement them on a page or site.
CSS Sprites is a method of combining multiple images used throughout your website into one big image. You can then use the proper background-position CSS attribute to load the particular image you want from your CSS Sprite using the X and Y coordinates. More info: http://css-tricks.com/css-sprites/
What are your favourite image replacement techniques and which do you use when?
CSS image replacement is a technique of replacing a text element (usually a header tag) with an image. An example of this would be including a logo on a page. You may want to use a <h1> tag and text for this for the accessibility and SEO benefits, but ideally you'd like to show your logo, not text More info: http://css-tricks.com/css-image-replacement/ #1: Display none span in header <h1 id="logo"> <span>CSS-Tricks</span> </h1> h1#logo { width: 250px; height: 25px; background-image: url(logo.gif); } h1#logo span { display: none; } #2: Text-indent out of sight <h1 id="logo"> CSS-Tricks </h1> h1#logo { width: 300px; height: 75px; background: url(test.png); text-indent: -9999px; } #3: Invisible Text <h3 class="leon"> <span>CSS-Tricks</span> </h3> h3.leon { width: 300px; height: 75px; background: url(test.png); } h3.leon span { display: block; width: 0; height: 0; overflow: hidden; } #4: Overflow text out of sight <h3 class="leahy"> CSS-Tricks </h3> / Height 0 to hide text...uses padding for image height/ h3.leahy { width: 300px; padding: 75px 0 0 0; height: 0; background: url(test.png); overflow: hidden; }
What's the difference between inline and inline-block?
Elements with display:inline-block are like display:inline elements, but they can have a width and a height. That means that you can use an inline-block element as a block while flowing it within text or other elements.
What's a typical use case for anonymous functions?
Callback functions
How do you serve a page with content in multiple languages? What kind of things must you be wary of when design or developing for multilingual sites?
Character encoding Language direction Using the right language code Font sizes
What is a closure, and how/why would you use one?
Closures are inner functions inside of an outer function. They have their own local scope and has access to outer function's scope, parameters (but NOT arguments object), and they also have access to global variables. From what I understand, Closures is a neat way to deal with scope issues. Reasons we use Closures is because Javascript is a function-level scope rather than as with other languages, block-level scope and Javascript is an asynchronous/event driven language. Example that Closure is frequently used is jQuery (ex. click()). This is how Closures work. 1. After its outer function has been executed and has returned a value, closures can still run. 2. Closures store references to the outer function's variable, hence, we will always have access to the updated values of outer function's variables. 3. Since we have access to the updated values of outer function's variables. We will have issue/bugs when a variable changes via for loop, but this can be fixed by using IIFE, Immediately Invoked Function Expression.
AMD vs. CommonJS?
CommonJS is a project to define a common API and ecosystem for JavaScript. One part of CommonJS is the Module specification. Node.js and RingoJS are server-side JavaScript runtimes, and yes, both of them implement modules based on the CommonJS Module spec. AMD (Asynchronous Module Definition) is another specification for modules. RequireJS is probably the most popular implementation of AMD. One major difference from CommonJS is that AMD specifies that modules are loaded asynchronously - that means that modules are only loaded as they are needed, as opposed to loading all modules up front. AMD is generally more used in client-side (in-browser) JavaScript development due to this, and CommonJS Modules are generally used server-side. However, you can use either module spec in either environment - for example, RequireJS offers directions for running in Node.js and browserify is a CommonJS Module implementation that can run in the browser
explain Function.prototype.bind?
ECMAScript 5 defines an addition method called 'bind()'.the 'bind()' method create a new function instance whose this value is bound to the value to that was passed into 'bind()'.
Describe event bubbling.
Event Flow describles the order in which events are received on the page.An event has three phases to its life cycle: capture, target, and bubbling. Event Bubbling mean that an event start at the most specific element(the deepest possible point to the document tree) and then flow upward toward the least specific node(the document);
What's the difference between feature detection, feature inference, and using the UA string
Feature Detection is to identify the browser's capabilities. Feature Inference is guess whether browser has certain feature through others feature or UA string. One inappropriate use of feature detection is called feature inference. Feature inference attempts to use multiple features after validating the presence of only one. The presence of one feature is inferred by the presence of another. The problem is, of course, that inference is an assumption rather than a fact, and that can lead to maintenance issues. UA String is User-Agent Detection.
Describe Floats and how they work.
Float is a CSS positioning property. Elements are floated horizontally, this means that an element can only be floated left or right, not up or down. A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. The elements after the floating element will flow around it. The elements before the floating element will not be affected. Note: Elements after the floating element will flow around it. To avoid this, use the clear property. The clear property specifies which sides of an element other floating elements are not allowed.
Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
For display purpose, every element in the page is considered a box. The box model refers to the specification of the box attributes such as the width, padding, border and margin. You can change the box model by setting the box-sizing property. Some values are: content-box (default), padding-box, and border-box) Content-box: width & height includes content but not padding/border/margin Padding-box: include up to padding Border-box: include up to border, but not margin
When do you optimize your code?
For release, we will compress and combine code. Whenever I have a time I will review my code and refactor it.
Have you ever used JavaScript templating? If so, what libraries have you used? (Mustache.js, Handlebars etc.)
Handlebars
How do you optimize your webpages for print?
In the case of a print stylesheet when the page is printed this functionality was enabled in CSS2 by media types. Media Types let you specify a type of media to target, so you could target print. You can follow my way: 1- Create A Stylesheet For Print. 2- Avoid Unnecessary HTML Tables. 3- Know Which Portions Of The Page Don't Have Any Print Value. (.no-print { display:none; }) 4- Use Page Breaks 5- Size Your Page For Print. 6- Test!
Can you explain the difference between GET and POST?
In brief Use GET for safe and idempotent requests Use POST for neither safe nor idempotent requests In details There is a proper place for each. Even if you don't follow RESTful principles, a lot can be gained from learning about REST and how a resource oriented approach works. A RESTful application will use GETs for operations which are both safe and idempotent. A safe operation is an operation which does not change the data requested. An idempotent operation is one in which the result will be the same no matter how many times you request it. It stands to reason that, as GETs are used for safe operations they are automatically also idempotent. Typically a GET is used for retrieving a resource (a question and its associated answers on stack overflow for example) or collection of resources. A RESTful app will use PUTs for operations which are not safe but idempotent. I know the question was about GET and POST, but I'll return to POST in a second. Typically a PUT is used for editing a resource (editing a question or an answer on stack overflow for example). A POST would be used for any operation which is neither safe or idempotent. Typically a POST would be used to create a new resource for example creating a NEW SO question (though in some designs a PUT would be used for this also). If you run the POST twice you would end up creating TWO new questions. There's also a DELETE operation, but I'm guessing I can leave that there :) Discussion In practical terms modern web browsers typically only support GET and POST reliably (you can perform all of these operations via javascript calls, but in terms of entering data in forms and pressing submit you've generally got the two options). In a RESTful application the POST will often be overriden to provide the PUT and DELETE calls also. But, even if you are not following RESTful principles, it can be useful to think in terms of using GET for retrieving / viewing information and POST for creating / editing information. You should never use GET for an operation which alters data. If a search engine crawls a link to your evil op, or the client bookmarks it could spell big trouble.
Can you explain how inheritance works in JavaScript?
In simple terms, inheritance is the concept of one thing gaining the properties or behaviours of something else. To say A inherits from B, is saying that A is a type of B. A Bird inherits from Animal because a Bird is a type of Animal - it can do the same things, but a little more (or differently)! In JavaScript, this relationship is a little complicated to specify, but bear with the syntax. You must use a special object called prototype which assigns properties to a type such as Animal. Only functions have a prototype, which is why you must create a function first
CSS Specificity Rules
Inline-Style +1000 ID + 100 class/pseudo class/state attribute + 10 element + 1
What's a hashtable?
It is also known as hash map is a data structure used to implement an associative array.It is a structure that can map keys to values. Advantages: In a well-dimensioned hash table, the average cost for each lookup is independent of the number of elements stored in the table. Many hash table designs also allow arbitrary insertions and deletions of key-value pairs. In many situations, hash tables turn out to be more efficient than search trees or any other table lookup structure. Disadvantages: The hash tables are not effective when the number of entries is very small. (However, in some cases the high cost of computing the hash function can be mitigated by saving the hash value together with the key.) Uses: They are widely used in many kinds of computer software, particularly for associative arrays, database indexing, caches and sets.
Explain how JSONP works (and how it's not really AJAX)
JSONP (as in "JSON with Padding") is a method commonly used to bypass the cross-domain policies in web browsers (you are not allowed to make AJAX requests to a webpage perceived to be on a different server by the browser). JSON and JSONP behave differently on both the client and the server. JSONP requests are not dispatched using the XMLHTTPRequest (and the associated browser methods), instead a <script> tag is created, whose source is set to the target URL. This script tag is then added to the DOM (normally the <head>). JSON Request: var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { // success }; }; xhr.open("GET", "somewhere.php", true); xhr.send(); JSONP Request: var tag = document.createElement("script"); tag.src = 'somewhere_else.php?callback=foo'; document.getElementsByTagName("head")[0].appendChild(tag); The difference between a JSON response and a JSONP response, is that the JSONP response is formulated such that the response object is passed as an argument to a callback function. JSON: { "bar": "baz" } JSONP: foo({ "bar": "baz" }); Another difference to be aware of between the handling of a JSON response and a JSONP response, is that any parse errors in a JSON response can potentially be caught (by wrapping the attempt to evaluate the responseText in a try/catch statement). Because of the nature of a JSONP response however, parse errors in the response will yield an uncatchable JS Parse error. Both formats however, can implement timeout errors (by setting a timeout before initiating the request, and clearing the timeout in the response handler.
Explain event delegation
JavaScript event delegation is a simple technique by which you add a single event handler to a parent element in order to avoid having to add event handlers to multiple child elements. More info: http://www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/
What's the difference between host objects and native objects?
Native objects are those objects supplied by JavaScript. Examples of these are String, Number, Array, Image, Date, Math, etc. Host objects are objects that are supplied to JavaScript by the browser environment. Examples of these are window, document, forms, etc.
What's the difference between an "attribute" and a "property"?
Often an attribute is used to describe the mechanism or real-world thing. - GIVEN A property is used to describe the model. - OWNED In HTML / Javascript the terms get confused because DOM Elements have attributes (per the HTML source) which are backed by properties when those elements are represented as Javascript objects. To further confuse things, changes to the properties can sometimes update the attributes. For example, changing the element.href property will update the href attribute on the element, and that'll be reflected in a call to element.getAttribute('href'). However if you subsequently read that property, it will have been normalised to an absolute URL, even though the attribute might be a relative URL! +++ Attributes carry additional information about an HTML element and come in name="value" pairs Property is a representation of an attribute in the HTML DOM tree. So the attribute in the example above would have a property named className with a value of my-class So Attributes are in your HTML text document/file, whereas properties are in HTML DOM tree
What are data- attributes good for?
Simply, the specification for custom data attributes states that any attribute that starts with "data-" will be treated as a storage area for private data (private in the sense that the end user can't see it - it doesn't affect layout or presentation). This allows you to write valid HTML markup (passing an HTML 5 validator) while, simultaneously, embedding data within your page
What's the difference between a relative, fixed, absolute and statically positioned element?
Static positioning is the default positioning model for elements. They are displayed in the page where they rendered as part of normal HTML flow. Statically positioned elements don't obey left, top, right and bottom rules Relative positioning allows you to specify a specific offset (left, top etc) which is relative to the element's normal position in HTML flow. So if I have a textbox inside a div I could apply relative positioning on the textbox to have it display at specific place relative to where it would normally be placed within the div There is also absolute positioning - whereby you specify the exact location of the element relative to the entire document, or the next relatively positioned element further up the element tree: And when a position: relative is applied to a parent element in the hierarchy our absolutely-positioned element is bound by the relatively-positioned element. And lastly there is fixed. Fixed positioning restricts an element to a specific position in the viewport, which stays in place during scroll: You may also observe the behaviour that fixed-positioned elements do not cause scroll because they are not considered to be bound by the viewport: Whereas absolutely-positioned elements are still bound by the viewport and will cause scrolling ..unless of course your parent element uses overflow: ? to determine the behaviour of the scroll (if any). With absolute positioning and fixed positioning, the elements are taken out of HTML flow.
Why is it called a Ternary expression, what does the word "Ternary" indicate?
Ternary means 3 parts.
What is the difference between == and ===?
The == operator will compare for equality after doing any necessary type conversions. The === operator will not do the conversion, so if two values are not the same type === will simply return false. It's this case where === will be faster, and may return a different result than ==. In all other cases performance will be the same.
Explain why the following doesn't work as an IIFE: function foo(){ }();. What needs to be changed to properly make it an IIFE?
The Immediately-Invoked Function Expression (IIFE) has it's syntax to work like: (function(){})(); so to make this function work it should be (foo(){})() The most widely accepted way to tell the parser to expect a function expression is just to wrap in in parens, because in JavaScript, parens can't contain statements. At this point, when the parser encounters the function keyword, it knows to parse it as a function expression and not a function declaration.
Describe what a "reset" CSS file does and how it's useful.
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. There isn't any default color or background set for the body element, for example. In other words, this is a starting point, not a self-contained black box of no-touchiness.
Explain the "JavaScript module pattern" and when you'd use it. Bonus points for mentioning clean namespacing. What if your modules are namespace-less?
The module pattern use a anonymous function that returns a object. Inside of the anonymous function, the private variables and functions are defined first. After that, an object literal is returned as the function value. That object literal contains only properties and methods that should be public. Since the object is defined inside the anonymous function, all of the public methods have access to the private variables and functions.
How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?
There are 3 ways we can follow: Do nothing except follow web standards. Create a completely separate layout Create one layout, but add code to optimize it depending on the device and browser looking at it.(That what I use) How?Use CSS Media Queries to create a specific version of my website (like mobile website/layout)
Explain "hoisting".
There is a preproccess or precompile in javascript runtime. and 'Hoisting' occur in the preproccess. Function declarations and variable declarations are always moved ("hoisted") invisibly to the top of their containing scope by the JavaScript interpreter. This means that code like this:
What's the difference between .call and .apply?
These methods both call the function with a specific this value. * the apply() method accepts two arguments: the value of this and an array of arguments. * the call() method exhibits the same behavior as apply(),but arguments are passed to it differently.Using call() arguments must be enumerated specifically.
What's the difference between a variable that is: null, undefined or undeclared? How would you go about checking for any of these states?
Undeclared variables are those that are not declared in the program (do not exist at all),trying to read their values gives runtime error.But if undeclared variables are assigned then implicit declaration is done . Undefined variables are those that are not assigned any value but are declared in the program.Trying to read such variables gives special value called undefined value. while null is value of nothing that means the variable declared and have a null value. To check we can use typeof operator like that: if (typeof(a) == "undefined") { // this will be executed alert("a is undeclared or undefined"); } else { alert("a is declared and defined"); }
What are some of the "gotchas" for writing efficient CSS?
Use a CSS reset Clear things up Box Model IE is bad but have to deal with it with tricks Get Firebug or Chrome inspector
How would you implement a web design comp that uses non-standard fonts?
Using @font-face and Webfonts (font services like: Google Webfonts, Typekit etc.) #1: use @font-face to render a font (uses src for hard resources) #2: can just link to a webfont as a stylesheet, use @import, or javascript
Explain how prototypal inheritance works
Whenever a function is created, its prototype property is also created according to a specific set of rules. When it comes to inheritance, JavaScript only has one construct: objects. Each object has an internal link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. null, by definition, has no prototype, and acts as the final link in this prototype chain. Everything in Javascript is an object. Even when creating a Class is an Object via an Object Literal or Constructor Function. This is how Javascript does class-based programming as to other traditional Object-Oriented Programming languages where they use the keyword 'class' and 'inheritance'. Javascript's version of class-based programming and other traditional class-based programming languages work with the same concept but does not work exactly similar. There are differences in its keyword, syntax, and how it works. There are also debates regarding pros and cons of Javascript's version of class-based programming, but for simplicity's sake and learning purposes, I do not want to go over those issues. See details here: Myth: JavaScript needs classes So, the core idea of Prototypal Inheritance is that an object can point to another object and inherit all its properties. The main purpose is to allow multiple instances of an object to share common properties, hence, the Singleton Pattern.
Any familiarity with styling SVG?
eh
Difference between: function Person(){}, var person = Person(), and var person = new Person()?
function Foo() { return this; // imporant to understand how this works } var a = Foo(); //returns window object //a.this returns undefined var b = new Foo(); //returns empty object of foo //b.this returns foo a instanceof Window // true a instanceof Foo // false b instanceof Window // false b instanceof Foo // true function expression. This involves using the "function" operator to create a function - the result of that operator can be stored in any variable or object property. The function expression is powerful that way. The function expression is often called an "anonymous function", because it does not have to have a name, Your second example is a function declaration. This uses the "function" statement to create a function. The function is made available at parse time and can be called anywhere in that scope. You can still store it in a variable or object property later.
Have you used or implemented media queries or mobile specific layouts/CSS?
yes. @media screen and (min-width: 300px) @media screen and (max-width: 300px) More info: http://mobile..smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/