Frontend Flashcards

1
Q

Consider HTML5 as an open web platform. What are the building blocks of HTML5?

A
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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Describe the difference between a cookie, sessionStorage and localStorage.

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What is a DOM?

A

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!
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is HTML?

A
  • 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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is HTML5?

A
  • 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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is XML?

A
  • 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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is an API?

A
  • 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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What happens when you type in a URL browser

A
  • 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 well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

How does the internet work?

A
  • 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 well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

How would you design Twitter?

A
  • 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
    1. 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?
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Explain the basic web Architecture

A
  • 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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What are the 4 HTTP status codes?

A

Status Code: success 2XX, redirection 3XX, Client-Side Error 4XX, Server Side Error 5XX

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What is a cookie and what does it do?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is a CDN?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

what is DNS?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Explain the database driven website architecture

A
  1. Request for dynamic Web page(web Browser)
    - Network
  2. Request for dynamic web Page (Web server)
  3. Database query (web server to database server)
    - Network
  4. Database query (web server to database server)
  5. Retrieved Data (goes from database server to Web server)
    - Network
  6. Retrieved Data (goes from database server to Web server)
  7. Dynamic web HTML page (web server to web browser)
    - network
  8. 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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What is AJAX?

A

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 well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

How would you design a parking lot?

A
  1. Handle ambiguity
  2. ask questions? how many spots, accessibility, multiple levels, pricing models, premiums
  3. 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 )

  1. stacks - placeVehicle
    search O(1) + put in HashMap
    removeVehicle
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What does a doctype do?

A

It tells the browser what version the language the page is written in.
It tells your browser how to render your document.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What’s the difference between full standards mode, almost standards mode and quirks mode?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What’s the difference between HTML and XHTML?

A

XHTML is identical to HTML but more strict. Does not allow for mistakes. Stricter error handling.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

What are data- attributes good for?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What is the difference between classes and IDs in CSS?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

Describe Floats and how they work.

A

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)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

Describe z-index and how stacking context is formed.

A

Higher z-index will put item in the front.

Lower z-index will put the item further behind.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

What is a load balancer?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

What are the basic pieces of standard web architecture?

A
Browser
Load balancer
Application servers
Caching layer
CDN(s)
Database
28
Q

What is a closure?

A

A closure is an inner function that has access to the outer function’s variables.
It is great for making private variables!
Has access to variables in its own scope, to outer function’s variables and global variables.
They still have access to the outer function’s variables even if the outer function returns.
They store references to the outer function’s variables, not the actual value.

29
Q

What is prototype in JavaScript?

A

A prototype is an object and all JS object has a prototype.
Everything is an object in JS and everything inherits from the Object prototype.
Use hasOwnProperty so it doesn’t check all the way up the prototype chain.
All JS objects inherit properties and methods from their prototype.
The standard way of creating an object prototype is using a constructor function. (Class)
Changes to an object’s prototype can be seen by all objects through prototype chaining.

30
Q

What is jQuery?

A

It is a fast and concise JavaScript Library.
It simplifies HTML document traversing, event handling, animating and Ajax.
Lightweight. Write less to do the same thing in Vanilla JavaScript.
JavaScript is a programming language; jQuery is a javascript library of convenience functions that simplify interaction with the DOM.

31
Q

What is HTTP and what does it stand for

A

The HTTP client and HTTP server exchange information about resources identified by URLs.

32
Q

What are HTTP headers?

A

HTTP headers allow the client and the server to pass additional information with the request or the response.
HTTP request header

ex) GET /tutorials/other/top-20-mysql-best-practices/ HTTP/1.1
method, path, protocol
HTTP response header

ex) HTTP/1.x 200 OK

33
Q

What is HTTP Session?

A

A sequence of network request-response transactions.
HTTP client initiates a request -> establishes a TCP connection to a particular port on a host -> wait for a client’s request message -> the server receives the request and sends back a status line
HTTP -> TCP -> server -> status

34
Q

What are request methods?

A

HEAD

similar to GET but w/o the response body.
GET

requests a representation of the specified resource.
POST

submits data to be processed to the identified resource.
PATCH

apply partial modification.
DELETE

deletes the specified resource.
PUT

uploads a representation of the specified resource.
TRACE

echoes back the received request.
OPTIONS

returns the HTTP methods that the server supports for specified URL.
CONNECT

converts the request connection to a transparent TCP/IP tunnel.

35
Q

Whats are safe methods?

A

methods that are intended only for information retrieval without changing the state of the server.

36
Q

What is persistent connections?

A

In HTTP/1.1, a keep-alive-mechanism was introduced, where a connection could be reused for more than one request/response pair.

37
Q

What is HTTP session state?

A

a stateless protocol that does not require the server to retain information or status about each user for the duration of multiple requests. Often solved using HTTP cookies.

38
Q

JS- What are the differences between null and undefined?

A

null: No value. Null can be assigned to any variable but is not an object. typeof null returns object
undefined: Undefined means the variable has not been declared yet, or the property doesn’t exist on the object

39
Q

JS- What is a closure? and Why would you use one?

A

normally you lose access to variable once the function has returned.

function notAClosure() {
    const shortLivedVariable = "I'm only here for a little while";
    return shortLivedVariable;
}
notAClosure(); // returns "I'm only here for a little while"

notice nothing has access to shortLivedVariable once its been run.

function aClosure() {
    const longLivedVariable = "I'm here for a long time";
    const innerFunction = function inner() {
        return longLivedVariable;
    }
    return innerFunction;
}
var closure = aClosure(); // returns a reference to innerFunction
closure(); // returns "I'm here for a long time"
var closure1 = stillAClosure("String 1");
closure1(); // returns "String 1"
closure1(); // returns "String 1"
var closure2 = stillAClosure("String 2");
closure2(); // returns "String 2"
closure2(); // returns "String 2"
// And here's the kicker
closure1(); // returns "String 1"

string1 keeps reference to string 1 even after being called with another parameter.

Closure can be used to save “state”

function cat(name) {
    return {
        sayName: function() {
            return name;
        }
    }
}

var fluffy = cat(‘Mr. Fluffy’);

fluffy. name // returns undefined
fluffy. sayName() // returns ‘Mr. Fluffy’

var whiskers = cat('Whiskers');
whiskers.sayName() // returns 'Whiskers'

So this way you can create a whole bunch of cat objects that have a private name variable, which you can access via the sayName method.

40
Q

Explain how ‘this’ works in JavaScript

A

This refers to an object and it is usually used inside a function or a method.
example: instead of saying Person.firstName, you can say this.firstName.
Use bind, apply or call to fix ‘this’ when it is out of context.

This always refers to a single object and inside the function when it executes.

It contains the value of the object that invokes the function.

how the function is called determines this.value.

41
Q

ExpLain how a callback works in javaScript

A

A “callback” is any function that is called by another function which takes the first function as a parameter. A lot of the time, a “callback” is a function that is called when something happens. That something can be called an “event” in programmer-speak.

Imagine this scenario: you are expecting a package in a couple of days. The package is a gift for your neighbor. Therefore, once you get the package, you want it brought over to the neighbors. You are out of town, and so you leave instructions for your spouse.

You could tell them to get the package and bring it to the neighbors. If your spouse was as stupid as a computer, they would sit at the door and wait for the package until it came (NOT DOING ANYTHING ELSE) and then once it came they would bring it over to the neighbors. But there’s a better way. Tell your spouse that ONCE they receive the package, they should bring it over the neighbors. Then, they can go about life normally UNTIL they receive the package.

In our example, the receiving of the package is the “event” and the bringing it to the neighbors is the “callback”. Your spouse “runs” your instructions to bring the package over only when the package arrives. Much better!

This kind of thinking is obvious in daily life, but computers don’t have the same kind of common sense. Consider how programmers normally write to a file:

fileObject = open(file)
# now that we have WAITED for the file to open, we can write to it
fileObject.write("We are writing to the file.")
# now we can continue doing the other, totally unrelated things our program does
Here, we WAIT for the file to open, before we write to it. This "blocks" the flow of execution, and our program cannot do any of the other things it might need to do! What if we could do this instead:
# we pass writeToFile (A CALLBACK FUNCTION!) to the open function
fileObject = open(file, writeToFile)
# execution continues flowing -- we don't wait for the file to be opened
# ONCE the file is opened we write to it, but while we wait WE CAN DO OTHER THINGS!
42
Q

Explain Event Delegation In JavaScript.

A

Event Delegation is the process of using event propagation or bubbling to handle events at the higher level.

Say we have a parent UL element and several child elements.

We CAN add event listeners to each child element in the list but that would be a hassle if u were to remove the child elements in the future. What YOU can do is to delegate the event listener the parent.

By adding a condition to the parent element, the event element will check if its the right type of element to react to . If its not its ignored!

43
Q

Explain Prototype Inheritance in JS

A

Strictly-speaking, JavaScript is a class-less language, JavaScript is built with objects less classes.

What is really an object in JavaScript?

it is really just an unordered collection of key-value pairs. Anything that is not a primitive - undefined, null, boolean, number, or string - is an Object in JavaScript.

A prototype is an internal object from which other objects inherit properties. Its main purpose is to allow multiple instances of an object to share a common property.

almost every object in javaScript has a link to another object

example:
we set the dogs prototype to be the animals object
the dog will now inherit from the animal object and have simple methods like walk, eat, etc

the act of sharing methods from the prototype is called prototypal inheritance.

44
Q

Explain Ajax in as much detail as possible.

A

Simply put, the use of AJAX is to use javaScript to send HTTP Requests to the server without reloading the page.

Its an API to create asynchronous web applications.

JavaScript and the XMLHttpRequest object provide the method for exchanging data asynchronously between the browser and the server.
A user interaction in the browser triggers the event, such as a button click
The AJAX call fires. This creates and AJAX request, browsers use the XMLHttpRequest object. When the server responds to the browser’s request, the same XMLHttpRequest object will process the result.
3. The server-side script receives the input from JavaScript, and processes the data.
4. After the data is processed, the script sends the data back to the original client-side page that made the request via XML
5. Once the data is received, a second JavaScript callback function, is called this function captures the data, and updates the web page accordingly.

Note: Newer technologies have slowly been replacing the XML in AJAX with JSON. The reason being, XML is a lot stricter than HTML, thus having larger file sizes, and harder to extract the data that is returned. JSON is less verbose, has proven to be more efficient, and working with data is much easier.

45
Q

What is event loop?

A

In web browsers, messages are added anytime an event occurs and there is an event listener attached to it. If there is no listener, the event is lost. So a click on an element with a click event handler will add a message–likewise with any other event.

The function setTimeout is called with 2 arguments: a message to add to the queue, and a time value (optional; defaults to 0). The time value represents the (minimum) delay after which the message will actually be executed. If there is no other message in the queue, the message is processed right after the delay; however, if there are messages, the setTimeout message will have to wait for other messages to be processed. For that reason, the second argument indicates a minimum time and not a guaranteed time.

46
Q

Explain the difference between synchronous and asynchronous functions.

A

In synchronous programing, your program is executed line by line, one line at a time. Each time a function is called, program execution waits until that function returns before continuing to the next line of code.

This method of execution can have undesirable ramifications. Suppose a function is called to start a time consuming process. What if you want to stop the lengthy process? With synchronous execution, your program is “stuck,” waiting for the process to end, with no way out.

Using asynchronous execution, the TakePicture() function returns immediately and shows the message. Although the two-minute process is not complete, your program can continue to execute. In this manner, your program could set the notCancelledByUser variable to FALSE to cancel the picture. It can also poll or ask the TakePicture() function when the exposure is completed, or if an error occurred during the process.

47
Q

What is Bandwidth and What is Latency?

A

When you hear someone say “My Internet speed is 30 Mbps”what they are actually referring to is the bandwidth capacity of their Internet service, not the speed. The speed of a network is actually the result of bandwidth and latency.

Bandwidth refers to how wide the pipe is or the Maximum throughput of a logical or physical communication path. The transfer rate is measured in latency. And latency means “delay.” So speed and bandwidth work together.

The wider the pipe is, the less delay you’ll experience when loading webpages and transferring files.

Latency is the amount of time it takes a data packet to travel from point A to point B

Measured In ping commands;
Latency is caused by the distance and the quality of the medium that the Internet packets travel through. For example, the latency through a fiber optic connection is shorter than through a copper wire cable, but latency through a copper wire cable is shorter than through a satellite connection, etc.

48
Q

What is broadband?

A

broadband is wide bandwidth data transmission which transports multiple signals and traffic types. The medium can be coaxial cable, optical fiber, radio or twisted pair.

in context of the internet, broadband is used to mean any high-speed Internet access that is always on and faster than dial-up access

49
Q

What is the internet?

A

A tangible physical system made to transfer information from one area to another

the internet sends binary information(bits)

Binary bits can be sent as light, radio waves or electricity

electricity: ethernet cable -pros - cheap, but signal loss over a couple hundred feet
light- fiber optics - pros- fast, no signal loss, light bounces up and down the length of the cable until it is received on the other side. We can actually send multiple bits simultaneously, cons- expensive and hard to work with
radio-wifi- pros- wireless use radio to send bits- cons- signal loss

50
Q

Talk about IP Address’s and DNS

A

ip6 is the most recent Ip Address, uses 128 bits at address
DNS lookup - DNS servers asks other DNS servers about the ip address.

DNS servers are in a distributed hierarchy and split up into zones.

DNS spoofing- hack- hackers impersonates DNS server and redirects to wrong Ip address

51
Q

what are packets, and the TCP?

A

Information on the internet transfer from one another as a packet of information, its indirect. For example, you have a very large image, image is made of tens of millions of bits, the computer can break into thousands of parts called packets. Router manage the packets, arriving at the destination, at different times.

TCP- transmission control protocol- (kinda like a mail service) when packet arrives, TCP does inventory check, if not all there, It will not sign, the sender will resend until all the packets are received.

It is scalable and fault tolerance

52
Q

Could you explain React’s Virtual DOM?

A

The Virtual DOM is an abstraction of the HTML DOM. It is lightweight and detached from the browser-specific implementation details. Since the DOM itself was already an abstraction, the virtual DOM is, in fact, an abstraction of an abstraction.

Perhaps it’s better to think of the virtual DOM as React’s local and simplified copy of the HTML DOM. It allows React to do its computations within this abstract world and skip the “real” DOM operations, often slow and browser-specific.

53
Q

what are Virtual Machines?

A

A virtual machine app creates a virtualized environment—called, simply enough, a virtual machine—that behaves like a separate computer system, complete with virtual hardware devices. The VM runs as a process in a window on your current operating system. You can boot an operating system installer disc (or live CD) inside the virtual machine, and the operating system will be “tricked” into thinking it’s running on a real computer. It will install and run just as it would on a real, physical machine. Whenever you want to use the operating system, you can open the virtual machine program and use it in a window on your current desktop.

HyperVisors: Type 1 and Type 2

VMs like Docker that run Containers inside OS

54
Q

WHAT’S THE DIFFERENCE BETWEEN SAAS, PAAS, IAAS?

CLOUD COMPUTING

A

BUILD IAAS AWS
BUY SAAS YAHOO, GMAIL
DEPLOY PAAS HEROKU

55
Q

What is Agile Development?

A

Agile Development is known as an increment Model
Software is developed in incremental, rapid cycles . Each release is thoroughly tested to ensure software quality is maintained.

It involves close daily interaction between developers and the people

Planning- req analysis -designing -building -testing(each iteraction cycle)

56
Q

What is SOA? (Service-oriented architecture)

A

The “building blocks” of a SOA are generally accepted to be: WSDL (Web Services Definition Language), SOAP (Simple Object Access Protocol), and XML (eXtensible Markup Language).

57
Q

What is a restful API?

A

An API is a contract between one software and another piece of software, its a structured request and response.

API is like an waiter between two running software.

Well, Rest is representational state transfer, architectural style for designing network applications.

It is based off a stateless, client-server protocol, almost always HTTP

restful and rest API are essentially the same thing

HTTP Methods: get, post, delete, put

endpoints is an URL/URI that the HTTP requests are sent to

58
Q

what is SASS?

A

stands for “Syntactically Awesome StyleSheets“. It is a very powerful CSS extension language, meaning it adds more features to CSS that it originally does not have. The syntax is very similar as well, In fact all valid CSS is valid SASS.

59
Q

What is a User Interface?

A

its a visual part of a computer application or OS through which a user interacts with a computer or a software

three types of UI:

  1. Command Language
  2. Menus
  3. Graphical User interface
60
Q

What is the difference between padding and margin?

A

Margin is applied to the outside of the element, effecting how the element is away from other elements.

Padding is applied on the inside, how far content is away from border

Margin does not affect dimension, while padding will increase the dimension of your element.

61
Q

what is OOP?

A

Object Oriented Programming is a methodology of programming involving classes and objects.

It is an umbrella term to cover certain concepts including objects, classes, inheritance, polymorphism, abstraction, encapsulation.

Object - state and behavior known as a object, smallest unit in OOP

Class- Collection of objects

Inheritance - when one object acquires all the properties and behaviors of parent object, offers code reusability

Polymorphism - in JS, we override the behavior of the super class to achieve polymorphisms. Animal class() - cat class inherits from the animal class, so we can modify the prototype of Cat.

Abstraction - hides internal details and showing functionality

Encapsulation- wraps code and data together into a single unit. It allows for selective hiding of property in an object by building a wall to protect the code from accidental corruption

62
Q

How does Bcrypt work?

A

Bcrypt is an internal hashing encryption function used on passwords. It executes the hash function many times in a loop and the salt value is added to the password string to be hashed. What gets returned is the password digest.

63
Q

How does HTTP Authentication work?

A

First the HTTP client makes a request to the web server. If the server sees that the requested resource need authentication to access then it send back 401 Unauthorized status along w the WWW.authenticate header, the client then displays the username and password as input. it sends an HTTP request with the HTTP header, if the credentials are correct, the server responds with 200 status code and the authentication-info header.

64
Q

Briefly describe how graphs work

A

A graph G is an ordered pair of a set V of vertices and a set E of edges.

Edge is represented by its end points

G= (V,E)
V = {v1, v2, v3, v4, v5, v6, v7, v8}
E = {{v1, v2}, {v1, v3}, {v1, v4}}, Etc

(u,v) directed pair
{u, V} undirected pair

data structure to present graphs example social media like facebook.

65
Q

What is web crawling?

A

search engines use a program called web crawler that systematically browses the web to collect and store data about wed pages. search engines can then provide quick, and accurate results against search queries

Web crawling is also known as graph traversal

66
Q

Define Restful

A

REST is a set of design principle meant to make web services flexible and more scalable.

limitations to be restful(HTML, HTTP, URI)

Has to operate as a client-server model

it is stateless, and there are also multiple constrants to keep it in place

67
Q

What is a media Query?

A

Media Query is a CSS technique

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

If the browser window is 600px or smaller, the background color will be lightblue:

@media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Earlier in this tutorial we made a web page with rows and columns, and it was responsive, but it did not look good on a small screen.

Media queries can help with that. We can add a breakpoint where certain parts of the design will behave differently on each side of the breakpoint.

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...} 
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...} 
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...} 
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...} 
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}