Front End Interview questions

How could you make sure to run some javaScript when DOM is ready like $(document).ready?

1) but script in last tag of body. DOM would be ready by time browser hits script tag. 2) place inside DOMContentLoaded handler. fired when DOM completely loaded. 3) place inside ready state == "complete" 4) Search jquery.

How can u highlight text in html?

<mark></mark>

Example of DOM access/set

<script> document.getElementById("demo").innerHTML = "Hello World!"; </script> document.getElementByID -> method "".innerHTML -> property

When should you use section, div or article?

<section>, group of content inside is related to a single theme, <article>, represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, <div>, on the other hand, does not convey any meaning, aside from any found in its class, lang and title attributes.

How can you load css resources conditionally?

@import allows you to load/ import stylesheet by using a path (uri) representing the location of the file. You can define one or more media by comma separation for which you want to load the stylesheet. If browser dont support the media stylesheet will not be loaded.

How could you apply css rules specific to a media?

@media (max-width: 700px){...} means you want to apply rules to those media whose max-width is 700 px. this means every smaller device will have this rule.

What is the use of "data-*" attribute?

Allows you to store extra info within the DOM. Able to write valid html with embedded private data and access via javascript. <div id="myDiv" data-user="jsDude" data-list-size="5" data-maxage="180"></div>

Promises, and why to use it?

Asynch method promised to return a value. used to shortens up nested Callback (hell) via separate promise functions on success or failure. Will be expected to give a value. 3 states pending, fulfilled, rejected.

How can u change direction of html text?

BDO ( bidirectional override of html element) <p><bdo dir="rtl">This text will go right to left.</bdo></p>

Does the screen keyword apply to the device's physical screen or the browser's viewport?

Browsers viewport

How to serve a page content in multiple languages?

CMS (content management system) could be used to deliver content in different language with same structure and style.

What is event bubble? How does event flows?

Capture: When you clicked, browser knows a click event occurred. (from lowest level) Target: When browser reach the lowest level of element. Bubbling: After firing click hander attached to "td", browser walks toward root. One level upward and check whether there is any click handler attached with table row ("tr" element). If there is any it will execute that. Then it goes to tbody, table, body, html, document, window. In this stage its moving upward and this is called event bubbling or bubbling phase

Describe the box model

Content - The content of the box, where text and images appear Padding - Clears an area around the content. The padding is transparent Border - A border that goes around the padding and content Margin - Clears an area outside the border. The margin is transparent

How would you optimize a website's assets/resources?

Decrease download sizes & fewer http requests. 1) name the assets 2) use a CDN 3) Host assets on different domains but reduce DNS lookups 4) place assets on cookie-free domain & split assets 5) use CSS sprites 6) disable etags 7) asynch scripts

Describe the difference between <script async> and <script defer>.

Defer will be downloaded in order. async may not.

The pseudo class :checked will select inputs with type radio or checkbox, but not <option> elements. (True/false)

False

If you need to implement getElementByAttribute, how would you implement it?

First, get all the elements in the DOM. You can either get it by Tag Name '*' and then check whether they have the particular attribute. In this case, even if attribute is null that will be captured. If you need to check the value, you should be able to do it by passing one extra parameter and comparing it in the if block.

Whats a closure?

Functions with preserved data. A closure is the combination of a function and the lexical environment within which that function was declared.

Can you describe the difference between progressive enhancement and graceful degradation?

GD's purpose is for those users that are in historical browsers, eg IE by making sure that even the oldest non-supported browsers have a resemblance of functionality. PE's purpose is for better features for newer browsers that could handle those features. PE is nice, but GD is necessary.

How can u generate public key in html?

HTML has Keygen element that facilitates generation of key and submission via a form. <keygen name="name" challenge="challenge string" keytype="type" keyparams="pqg-params">

How many resources will a browser download from a given domain at a time?

IE8/chrome = 6 concurrent connections Firefox 8

How could you prevent multiple event handler to be fired for an event?

If event listeners are attached for the same type event(click/keydown) of an element for the same event type, you can call event.stopImmediatePropagation() in the first event handler. No other event handler will be executed.

What is doctype? Why do u need it?

Instruction to browser informing the HTML version & how to render it. <!DOCTYPE html> <meta charset="UTF-8">

Prototype inheritance

Interface like function attachment

How would you destroy multiple list items with one click handler?

Leverage event bubbling. Have only one event handler attached to the parent element of one hundred list items. could attach to ul tag. after ul tag triggered, event will bubble and handler will be fired

Create a button that is destroyed by clicking on it but two new buttons are created in it's place.

Leverage event delegate. (to study)

Favorite CSS3 features

Media queries, different response to different screen devices, animations, box model.

MVC

Model(business data/logic) View (UI) Controller( manage logic & user input )

node vs node element differences

Node, generic object of DOM hierarchy. element is a specific type of node.

What is NaN? Its type? Test it?

Not a number. Number type. value !==value or Number.isNan()

What are the differences between null and undefined?

Null - empty/non-existant null is not an object, it is a primitive value Undefined - A declared variable without assigning any value to it. Implicit returns of functions due to missing return statements. return statements that do not explicitly return anything. Lookups of non-existent properties in an object. Function parameters that have not passed. Anything that has been set to the value of undefined. Any expression in the form of void(expression) The value of the global variable undefined

Can you name two programming paradigms important for JavaScript app developers?

Procedural OOP Functional(prototypes) Programing(closures, first class functions, lambdas)

Can you describe your workflow when you create a web page?

Requirements Gathering - (Need finding, participant observations, interviewing) - User stories/Features creation Prototyping - Storyboards, Paper prototypes, mockups Heuristic Evaluation: -Action, feedback MVP bare w/o design only functionality Design & touch up A/B Testing

Favorite HTML5 features

SVG/Canvas Audio/video

What are the difference between svg and canvas?

Scalable vector graphics - high fidelity docs for view/print Canvas- for pixelated high volume data-> weather maps

Why you would like to use semantic tag

Search Engine Optimization, accessibility, repurposing, light code. Many visually impaired person rely on browser speech and semantic tag helps to interpret page content clearly. Search engine needs to understand page content to rank and semantic tag helps.

How can you get all the texts in a web page?

The easiest way to get all the text is to get the innerText of body tag. document.body.innerText; (or recursively do it

In a HTML document, the pseudo class :root always refers to the <html> element. (true/false)

True

What is repaint and when does this happen?

When change look without changing size/shape. (text color/background color, visibility hidden)

What is DOM?

When webpage loaded, browser creates DOM of the page, like any other object, has properties and methods.

Why would you use sprites?

When you have multiple images/ icons, browser makes separate call to the server for each one of them. sprite is a technique to combine all/ some of them (usually similar one in terms of type of image. For example, you will put jpg in one sprite) in one image. To display the icon you set height, width and background position.

Can you remove an event handler from an element?

Yes target.removeEventListener('click', handler)

Is there any difference between window and document?

Yes. JavaScript has a global object and everything runs under it. window is that global object that holds global variables, global functions, location, history everything is under it. Besides, setTimeout, ajax call (XMLHttpRequest), console or localStorage are part of window. document is also under window. document is a property of the window object. document represents the DOM

Does overflow: hidden create a new block formatting context?

Yes. overflow property deals with the content if content size exceeds the allocated size for the content. You can make extra content visible, hidden, scroll or auto (viewport default behavior).

pseudo elements

allow extra markup without disturbing environment. p::after{ content: "injected to ptag" } p::before{ content: "injected before p tag" } the double colon "::"

Is attribute similar to property?

attributes are just like attribute in your html tag (XML style attribute) inside the starting tag. html attributes are exposed to the DOM via property. Hence, a property is created when DOM is parsed for each attribute in the html tag. If you change an attribute only the value of the property will change. However, the value of attribute will remain same.

What is functional programming?

avoids shared state/mutable data. Lambda calculus, Haskell, Ocaml

Why css selectors mixed up with cases don't apply the styles?

because, html ID and classes are case sensitive.

What are the differences between == and ===?

both check values == will not check types, === will check if both are same types

How could you stop further propagation of an event?

call event.stopPropagation(0;

How can you fix, "floated points don't add up to the height of a parent"?

clear both

let vs const

const- after first assignment, cant edit/modify existing values(unless it is an object like an array and appending it) let - just var, able to change as much as possible

What are the different css filter you can use?

css filter allows u to render DOM element, image, or video. u can choose from: grayscale, blur, opacity, brightness, contrast.

Function declaration vs expression

declaration has no variable, only function name. Could use functions evenbefore they were made like regular java. function funcD(){ }; expression has a variable created. cannot use function before created like C funcE = function(){};

Which one would you prefer among px, em % or pt and why?

depends on purpose px: fine grained control & maintains aligment(1px look sharp) not cascade-> parent:20px child 16px, child stays 16px em: relative to preset size, responsive fonts, cascade %: sets relative to body, cascade, parent:20px -> child: 50% == 10px pt: for print 1pt = 1/72 inch and fixed unit size

What are the differences between visibility hidden and display none?

display: none removes element from the normal layout flow and allows other elements to fill in. doesn't exist in DOM visibility hidden: takes space in the normal flow but doesn't show it

What is the difference between span and div?

div is a block element and span is inline element.

What are different node types?

element,text,comment,document,doctype,docfragment

What is shadow DOM?

encapsulate part of a DOM. hide subtree. you can have same ID in different shadow DOM. Polymers uses it. This way your DOM becomes reusable. Could use javascript to inject different colors.

Nodejs first argument optional

error (unsuccessful request) uncaught exceptions, hard to catch in main process.

The translate() function can move the position of an element on the z-axis.

false

What does float do?

float pushes an element to the sides of the page with text wrapped around it. You can create an entire page or a smaller area by using float.(left,right,none,inherit

Discuss possible ways to write a function isInteger(x) that determines if x is an integer.

function isInteger(x) { return (x ^ 0) === x; }

implement isPalindrome(str)

function isPalindrome(str){ return (str == str.split('').reverse().join('')); }

How can you clear sides of a floating element?

if clear set to left, no floating elements could be accepted on that side.

Inline elements vs inline block elements

inline elements only accepts margin left/right & padding. inline block elements allows everything and affects surroundings. block -> same as inline, but will take more space than inline block model

What are the differences between inline, block and inline-block?

inline: elements don't break flow, margin/padding pushes over horizontally, not vertically block: breaks flow and doesn't sit inline. like container inline-block: similar to inline, but take height and width

What is specificity? How do u calculate specificity?

is a process of determining which css rule will be applied to an element. it actually determines which rules will take precedence unless calls !important on it. inline style usually wins then ID then class value (or pseudo-class or attribute selector), universal selector (*) has no specificity.

var vs let

let - recently ES6 "block scope" dies at end of block var - function scope dies at end of function -> hoisted to top

Describe the difference between a cookie, sessionStorage and localStorage

local storage: storage w.o expiration date, cleared via JS, browser cache/locally stored data session storage: expires when browser is closed, not tab [local/session storage could only be read client side] cookie: stores data sending to server w/ subsequent requests. Expiration could be set from (usually)server or client. For server side reading.

Significance of 'use strict'

make debugging easier, no accidental global var's, eliminates this coercion, no duplicate parameter names, eval() safer, throw invalid usage of delete

Does css properties are case sensitive?

no

Does margin-top or margin-bottom has effect on inline element?

no

Does padding-top or padding-bottom has effect on inline element?

no

If you have a <p> element with font-size: 10rem, will the text be responsive when the user resizes / drags the browser window?

no

How do you optimize css selectors?

order selectors in terms of render speed it would be like id, class, tag, siblings, child, descendant, universal, attribute, pseudo.

How could you prevent a click on an anchor from going to the link?

preventDefault() inside event handler

What are the some pseudo classed you have used?

pseudo class tells you specific state of an element. allow to style element dynamically. The most popular one is :hover. Besides i have used :visited, :focus, :nth-child, nth-of-type, :link, etc.

Difference between standard/ strict mode and quirks mode?

quirks mode in browser allows u to render page for as old browsers. This is for backward compatibility.

What is reflow? What causes reflow? How could you reduce reflow?

reflow: change size/position of element. All elements after have to react. Expensive, performance hit. Avoidance: dont set multiple inline style, avoice dables, apply animation that are positioned fixed/absolute

How relative, absolute, fixed and static position differ?

relative: position to itself, if set 10px from top, i will move 10px down from where it would be originally absolute: exactly positioned element, set relative to element's parent, if no parent, then relative to itself fixed: position to viewport/browser window itself, doesn't change unless scroll. (Advertisement placement) static: element position based on normal flow of document.

CSS resetting vs normalizing

resetting- browser automatically adds paddings/margins-> but removes them markups normalizing- make sure html renders the same between all browsers, same

What is semantic HTML?

semantically-correct HTML. b/i tags -> strong/em tags

Build triangle use pure css

set Height:0px; width:100px; background-color:red; Use border of different colors, top/left/bottom/right; -> turns into 4 triangles .tri{ height:0; width: 0; border-top:100px solid transparent; border-bottom:100px solid transparent; border-right: 100px solid yellow; }

pseudo class

single colon p:hover::after{ content: "i am injected to p tag" }

center inner div within outer div

study this {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .in{width:100px; height:100px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .out{width: 300px; height:300px; background-color:yellow; position relative; }

What is the use of only?

to hide style sheets from older user agents.

What do you know about transition?

transition allows to add an effect while changing from one style to another. You can set the which property you want to transition, duration, how you want to transit (linear, ease, ease-in, ease-out, cubic-bezier) and delay when transition will start. you can transition more than one property by comma separation

How culd i check whether an event is cancelable or not?

use event.cancelable to get true/false. you have to preventDefault to prevent the event

Finding different DOM elements: Finding HTML elements by id Finding HTML elements by tag name Finding HTML elements by class name Finding HTML elements by CSS selectors Finding HTML elements by HTML object collections

var myElement = document.getElementById("intro"); var x = document.getElementsByTagName("p"); var x = document.getElementsByClassName("intro"); var x = document.querySelectorAll("p.intro");

anything to becareful when node.cloneNode()?

while cloning, makesure didn't duplicate ID

Does document.onload and window.onload fire at the same time?

window.onload is fired when DOM is ready and all the contents including images, css, scripts, sub-frames, etc. finished loaded. This means everything is loaded. document.onload is fired when DOM (DOM tree built from markup code within the document)is ready which can be prior to images and other external content is loaded.

Does padding-left or padding-right or margin-left or margin-right has effect on inline element?

yes

Can u apply css rule to a part of html document?

yes, use scoped <style type="text/css> </style> tag

How come, I can't use forEach or similar array methods on a NodeList?

you can simply loop through a nodeList and do whatever you wanted to inside forEach or you can call method on array to convert nodelist to an array. After that you will have access to all array.prototype methods

How could you run event handler in the capturing phase not in bubble phase?

you could pass true/false into useCapture phase of third optional parameter in addEventlistern/removeEventListener

What are the reasons to use preprocessor?

you write css in high level with some special syntax (declaring variable, nested syntax, mathematical operations, etc.) and that is compiled to css. Preprocessor helps you to speed up develop, maintain, ensure best practices and also confirms concatenation, compression, etc.

Advantages of having an external JS file

Separation of HTML Easier to Read Cached JS files can have speed up page loads