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?
Is there any difference between window and document?
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.
Tag (div, p)
Sibling (div+p, div~p)
Descendant (div p)
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
HTML, PDF, JSON
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?
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
If you have 5 different stylesheets, how would you best integrate them into a site?
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.