Glassdoor

Question 1

If we wanted to implement a method of tracking every click that the user made on the site, how would we want to do this?

Answer 1

Place a JavaScript event listener for all clicks at the document level. Perform actions based on the details of the click. This problem had multiple branches and sub-questions, but the gist is that you would want to capture the events as they bubbled back up to the document level. There are other acceptable answers to this question.

Question 2

Is there any difference between window and document?

Answer 2

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 and DOM is the object oriented representation of the html markup you have written. All the nodes are part of document. Hence you can use getElementById or addEventListener on document. These methods are not present in the window object.

Question 3

window.onload vs document.onload

Answer 3

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.

Think about the differences between window and document, this would be easier for you.

Question 4

attribute vs property

Answer 4

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.

Question 5

What are the different ways to get an element from DOM

Answer 5

You can use the following methods in document

getElementById to get a element that has the provided Id.
getElementsByClassName to get a nodelist (nodelist is not an array, rather it is array-like object) by providing a class name.
getElementsByTagName to get a nodelist by the provided tag name.
querySelector you will pass css style selector (jquery style) and this will retrurn first matched element in the DOM.
querySelectorAll will return a non-live nodelist by using depth-first pre order traversal of all the matched elements. Non-live means, any changes after selecting the elements will not be reflected.
There are two more options but I dont use them frequently-

getElementsByName returns the list of elements by the provided name of the html tag
getElementsByTagNameNS returns elements with particular tag name within the provided namespace

Question 6

What is the fastest way to select elements by using css selectors

Answer 6

It depends on what you are selecting. If you have an ID of an element getElmentById is the fastest way to select an element. However, you should not have so many ID in you document to avoid style repetition. css class getElementsByClassName is the second quickest way to select an element

Here is the list. As we go downwards through the list, it takes more time to select elements.

ID (#myID)
Class (.myClass)
Tag (div, p)
Sibling (div+p, div~p)
child (div>p)
Descendant (div p)
Universal (*)
Attribute (input[type="checkbox"])
Pseudo (p:first-child)
If you have crazy long selectors to select element, think about your selectors and check whether you can use a class instead

Question 7

Are CSS property names case-sensitive?

Answer 7

No

Question 8

Does setting margin-top and margin-bottom have an affect on an inline element?

Answer 8

No

Question 9

Does setting padding-top and padding-bottom on an inline element add to its dimensions?

Answer 9

No

Question 10

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

Answer 10

Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.
This means that 1rem equals the font size of the html element (which for most browsers has a default value of 16p

rem is also known as root em. While em is relative to the font-size of its nearest parent, rem is only relative to the root’s ( i.e. HTML’s ) font-size.

As per the question, the rem unit does not make the text responsive. The font-size always remains the same even if you resize or drag the browser

no

Question 11

What is the order of presedence in css?

Answer 11

most to least specificity

style attribute (inline styling)
id
class, psuedo-class, attribute
elements

Question 12

Are unused style resources still downloaded by the browser?

Answer 12

no

Question 13

What is a protocal?

Answer 13

A way for two applications to speak to each other

Question 14

What is a web resource?

Answer 14

Document hosted by a web server
HTML, PDF, JSON

can be static or dynamic

dynamic is one that generated on the fly
ex: a web application that tells the time

Question 15

Does every web source have a unique URL?

Answer 15

Yes

Question 16

How does HTTP work?

Answer 16

Basically a request and response protocol. When the web client (user usually) wants to do work on a web resource (reading it, updating it, deleting, etc.) it first has to get a connection with the web server of the resource and the web client sends a request to it which contains the details of what the client wants and the server sends back a response and the communication is closed. the server does not remember anything else about past connections. Another request from the client to the server will be seen as a new request from a new webclient. which is why http is called a stateless protocol. The request and response action is called a HTTP Transaction.

Question 17

explain the parts in this url
http://
www.example.com
\:80
games/hero-game
?couponCode=discount
#info

Answer 17

scheme - indicates how to access the resource

host - where the resource is located

port number - a sever can run multiple applications. port number tells which application to receive the data. You don’t normally see port numbers in url. why? because http is reserved for port 80 and https is reserved for 443. it is omitted because it will be the same port each time

URL path - the web server uses this to identify the resource

Query String - way to pass information to the web server. name=value&name=value&…

Fragment - shows you a particular id in a section on the resource

Question 18

What is REST

Answer 18

An architecture for managing state information.

Applies verbs (GET, PUT, POST, DELETE) to resources

Question 19

What is polymorphism?

Answer 19

saying that different nouns can have the same verb applied to them

Question 20

Are HTTP verbs polymorphic?

Answer 20

No

Question 21

What is scaling up?

Answer 21

increasing the capacity of services, consumers, and network devices

Question 22

What is scaling out?

Answer 22

distributing load across services and programs

Question 23

What is smoothing out?

Answer 23

evening out the number of interactions over peak and non-peak periods to optimize the infrastructure

Question 24

What is Event Bubbling?

Answer 24

Once you click on an element in the dom, it goes up the dom tree to the highest parent which in many cases is the document. It then goes to each parent element above it and searches for a listener with the same event. If the parent element has the event it will execute and this continues until it reaches to the top element of the document.

Question 25

What happens when you click on an element?

Answer 25

2 phases

1. event capturing
   captures the element from top parent element of the page tracing down to the bottom element that was clicked
2. event bubbling
   bubble from the bottom clicked element to the top element

Question 26

How do you stop bubbling up in JQuery and vanilla javascript?

Answer 26

event.stopPropagation();

Question 27

If you have 5 different stylesheets, how would you best integrate them into a site?

Answer 27

possible solutions:

Use a task runner like gulp or webpack to concat all the stylesheets into one

load the specific style sheets only on the pages that they need to be loaded on

Question 28

what’s the difference between Front End Developers and UI/UX designers and where do these positions overlap?

Answer 28

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.

Question 29

As [] is true, [] == true should also be true. right?

Answer 29

NO

when the array is compared with true, what is getting compared is the values of the array with true. Since there are not values it defaults to false causing the comparison to be untrue