Glassdoor Flashcards Preview

Frontend Developer Questions > Glassdoor > Flashcards

Flashcards in Glassdoor Deck (29):

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?

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.


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 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.


window.onload vs document.onload

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.


attribute vs 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 are the different ways to get an element from DOM

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


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

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


Are CSS property names case-sensitive?



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



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



If you have a

element with font-size: 10rem, will the text be responsive when the user resizes / drags the browser window?

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



What is the order of presedence in css?

most to least specificity

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


Are unused style resources still downloaded by the browser?



What is a protocal?

A way for two applications to speak to each other


What is a web resource?

Document hosted by a web server

can be static or dynamic

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


Does every web source have a unique URL?



How does HTTP work?

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.


explain the parts in this url

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


What is REST

An architecture for managing state information.

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


What is polymorphism?

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


Are HTTP verbs polymorphic?



What is scaling up?

increasing the capacity of services, consumers, and network devices


What is scaling out?

distributing load across services and programs


What is smoothing out?

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


What is Event Bubbling?

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.


What happens when you click on an element?

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


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



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

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


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

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.


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


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