Frontend Flashcards
Consider HTML5 as an open web platform. What are the building blocks of HTML5?
more semantic text markup new form elements video and audio new javascript API canvas and SVG new communication API geolocation API web worker API new data storage
Describe the difference between a cookie, sessionStorage and localStorage.
localStorage - stores data clientside. data persists until user clears browser cache/local stored data. (window)
sessionStorage - data is also stored clientside but is destroyed when browser closes.
cookie - stored data that is usually accessed server-side. It can expire.
What is a DOM?
the Dom stands for Document Object model. Its the browsers Internal programmable representation of the web page. The Dom can be manipulated by languages like JavaScript, changing the page without changing the HTML
The DOM is a type of API
- The HTML we write is not the DOM, the HTML we right is parsed into becoming the DOM.
- In most simple cases, the visual representation of the DOM will be just like your simple HTML.
- The Code inside say Dev Tools will be the visual representation of the DOM.
- You can manipulate the DOM using javaScript,
- The DOM represents the page as nodes and objects that way programming languages can connect to the DOM
- Tree you see in Dev Tools is generally what you built from an HTML document
- element for example:
- the browser makes this when the page loads
- it is an API for valid HTML and XML
- we can use it to access, change and delete comments
- it can be represented as a tree in Dev tools!
What is HTML?
- stands for Hyper Text Markup Language
- uses specific bits of programming language called ‘tags’ to let the browser know how the website should look
- opening/closing tag - tells the browser when to start doing something, when to stop
What is HTML5?
- HTML5 came out in 2008. the first official standard of HTML came out in 1995 which was HTML2
- Fundamental change was the development of APIs, which runs in HTML5
What is XML?
- XML stands for extensive Markup language vs JSON
- XML sends data thru restful APIs, carrys data
- XML is simply just information wrapped in tags
- HTML displays data
- XML has no predefined tags
What is an API?
- stands for application programming interface(API)
- its a list of commands as a format of commands to send from one program to another
- allows interactions with other programs, people who write programs but wishes to use the functionality of other programs can simply use the API documentation to utilize the functionality and find the list of commands available to them.
What happens when you type in a URL browser
- You can type google in address bar
- the browser checks the cache for a DNS record to find corresponding IP address
- browser initiates a TCP connection with the server
- browser sends a HTTP request to web server
- server handles request and sends back response
- server sends out HTTP response
- browser displays HTML content
How does the internet work?
- server is a box with an ip address
- ISP(Internet Service Provider ) does an DNS(Domain Name System) look up
- basically translates mysite.com into ip address(translates domain friendly names into Ip addresses computers can use to communicate with each other)
- if found in local memory, website renders in a split second.
- if not found in local memory, takes it out to the internet, where it asks for a series of queries, a series of DNS servers
- the first DNS server takes the domain name, if not found, it goes to the next DNS server
- once found, it returns the IP address back to the computer
- gets response back thats file/content type
- gives back html file
- begins parsing HTML document
- CSS, HTML, Jquery(javaScript) in that order
- Example: I request for google.com - get request
How would you design Twitter?
- interviewers want high level ideas, how you design, and define the problem
- first we have to compress Twitter to its MVPs
- implement only the core features
- Data modeling. 2. How to serve feeds.
- Data modeling – If we want to use a relational database like MySQL, we can define user object and feed object. Two relations are also necessary. One is user can follow each other, the other is each feed has a user owner.
- Serve feeds – The most straightforward way is to fetch feeds from all the people you follow and render them by time.
1. When users followed a lot of people, fetching and rendering all their feeds can be costly. How to improve this? - infinite scroll, pagination or a cache
2. How to detect fake users? - machine learning , detect
3. Can we order feed by other algorithms?
Explain the basic web Architecture
- the web is a two tiered architecture, the browser displays information and web server that transfers information
- a web server can mean one of two things:
- a computer program that accepts HTTP requests and return HTTP responses with optional data content
- a computer that runs above
What are the 4 HTTP status codes?
Status Code: success 2XX, redirection 3XX, Client-Side Error 4XX, Server Side Error 5XX
What is a cookie and what does it do?
Cookie - is a small piece of of text stored on user’s computer
- sent as a HTTP header, then sent back unchanged by the browser each time it accesses the server
- cookie is used for authentication, session-tracking, remembering specific information.
cookies are messages in web servers that get sent to your browser. your browser stores these messages in a small file .txt, when you request another page from the server, the browser sends the cookie back to the server.
What is a CDN?
CDN stands for content delivery network. CDN is the transparent backbone of the internet. All of us interact with CDN on a daily basis
CDN stores cached version of its content in geographical locations. Cache server will take less time to reach the user
CDN building blocks
Points of interest, Caching servers, SSD/RAM
Pop are located data centers responsible for communicating closer w people in its vicinity, each Pop contains numerous caching servers
Servers nearest to the website visitor respond to the request. The content delivery network copies the pages of a website to a network of servers that are dispersed at geographically different locations, caching the contents of the page. When a user requests a webpage that is part of a content delivery network, the CDN will redirect the request from the originating site’s server to a server in the CDN that is closest to the user and deliver the cached content. CDNs will also communicate with the originating server to deliver any content that has not been previously cached.
The process of bouncing through CDNs is nearly transparent to the user. The only way a user would know if a CDN has been accessed is if the delivered URL is different than the URL that has been requested.
what is DNS?
when you visit a domain, first it looks in the DNS cache, if not, it will do a DNS query .
computer contacts ISP recursive DNS servers, recursive servers have their own cache, process generally ends here
if not found, query root nameservers
Domain Name Servers (DNS) are the Internet’s equivalent of a phone book. They maintain a directory of domain names and translate them to Internet Protocol (IP) addresses.
This is necessary because, although domain names are easy for people to remember, computers or machines, access websites based on IP addresses.
Information from all the domain name servers across the Internet are gathered together and housed at the Central Registry. Host companies and Internet Service Providers interact with the Central Registry on a regular schedule to get updated DNS information.
When you type in a web address, e.g., www.jimsbikes.com, your Internet Service Provider views the DNS associated with the domain name, translates it into a machine friendly IP address (for example 216.168.224.70 is the IP for jimsbikes.com) and directs your Internet connection to the correct website.
After you register a new domain name or when you update the DNS servers on your domain name, it usually takes about 12-36 hours for the domain name servers world-wide to be updated and able to access the information. This 36-hour period is referred to as propagation.
Explain the database driven website architecture
- Request for dynamic Web page(web Browser)
- Network - Request for dynamic web Page (Web server)
- Database query (web server to database server)
- Network - Database query (web server to database server)
- Retrieved Data (goes from database server to Web server)
- Network - Retrieved Data (goes from database server to Web server)
- Dynamic web HTML page (web server to web browser)
- network - Dynamic web HTML page (web server to web browser)
- examples of server side processing - PHP, PERL, Django, Ruby on rails
- examples of client side processing - CSS, HTML, javaScript
What is AJAX?
AJAX = Asynchronous JavaScript And XML.
AJAX just uses a combination of:
A browser built-in XMLHttpRequest object (to request data from a web server)
JavaScript and HTML DOM (to display or use the data)
- Ajax isnt a technology, its several. coming together, in powerful ways
Update a web page without reloading the page
Request data from a server - after the page has loaded
Receive data from a server - after the page has loaded
Send data to a server - in the background
- AJAX incorporates XHTML and CSS
- the DOM
- JavaScript
- XMLhttpRequest
- XML and XSLT
How would you design a parking lot?
- Handle ambiguity
- ask questions? how many spots, accessibility, multiple levels, pricing models, premiums
- Sizes S, M, L, XL
- abstract vehicle
- string license plate
- enum color
- create 4 classes that inherit from the vehicle, car(M), motorcycle(S), bus(XL), truck(L)
class parkingLot (zip code: int) - placeVehicle(vehicle: vehicle)
class parkingSpot(Id: long, enum Size )
- stacks - placeVehicle
search O(1) + put in HashMap
removeVehicle
What does a doctype do?
It tells the browser what version the language the page is written in.
It tells your browser how to render your document.
What’s the difference between full standards mode, almost standards mode and quirks mode?
Quirks mode - for older browsers.
Full standards - the behavior of the website is exactly as described by HTML/CSS specifications.
Almost standards is in between.
What’s the difference between HTML and XHTML?
XHTML is identical to HTML but more strict. Does not allow for mistakes. Stricter error handling.
What are data- attributes good for?
The data-* attributes is used to store custom data private to the page or application.
The data-* attributes gives us the ability to embed custom data attributes on all HTML elements.
What is the difference between classes and IDs in CSS?
ID and Classes can both be used to select an element to modify using CSS.
ID is more specific.
Ideally you would want 1 ID and multiple classes.
Describe Floats and how they work.
It pushes the element to the side you’ve chosen.
All other elements will take up the space (if float left, other elements will take up the right side)
Describe z-index and how stacking context is formed.
Higher z-index will put item in the front.
Lower z-index will put the item further behind.
What is a load balancer?
Reduces load
What if this goes down?
More load balancers / fallover
Round Robin DNS
Put one into the database layer as well so cache can talk to load balancer rather than directly to the database.
Any big website, when you get IP address, it’s not actually application server. It’s load balancer that will send you to the server