WebDev Misc

Question 1

What are the parts of an URL?

Answer 1

http://message.com/index.html/?color=red#value
protocol domain path query string hash/fragment

Hash/fragment - is a part intended for browser usage, so that the browser can manage it’s own information.

Question 2

How can you use JS modules in the browser?

Answer 2

On the web, you can tell browsers to treat a element as a module by setting the type attribute to module.

We can also use module bundlers such as Webpack, that will do the bundling for us. It is a really handy tool, because it can be easily integrated for example with compilers like babeljs.

Question 3

What is the ES6 module syntax?

Answer 3

You can use import and export keywords to import functions, variables etc.
We want to import at the begining of the file and export at the end of the file

- export function shout(string) {
  return `${string.toUpperCase()}!`;
}
- You can then use the import keyword to import the module from another module.
import {repeat, shout} from './lib.mjs';
                                                 ^^^^^^
When importing modules, the string that specifies the location of the module is called the “module specifier” or the “import specifier”. With webpack, we do not need to add files extensions - webpack will do it for us.

Question 4

How do you export default values?

Answer 4

Each JS module can only have one default export value. When importing a default value, you can import and set the name of the default value.

export {getPremUsers, users as default}

import test, {getPremusers} from ‘./data.js’

Question 5

What does “/” , “./”, “../” represent while giving path?

Answer 5

/ is the root of the current drive;
./ is the current directory;
../ is the parent of the current directory.

Question 6

What happens, when we try to access a webpage?

Answer 6

The client (e.g. browser) makes a request,
the server gives a response.
This is called (Request-response model or Client-server architecture)

1. Browser makes a request to a DNS (which will convert it to a real IP address) like https://216.58.211.206:443
   Port number 443 for HTTPS 80 for HTTP.
2. Once we have a real web address, a TCP/IP socket connection is established between the browser and the server. (Open for the amount of the entire time, needed to transfer all files of the website.)
3. We make a HTTP Request.
4. HTTP Response.
   (If it’s a website that we are trying to access, there will be many more requests and responses
   index.html file
   -> scans for assets js, css, images
   -> process is repeated for each file)
5. When all the files arrive, the files are rendered in the browser.

Question 7

What is TCP/IP?

Answer 7

TCP - Transmission control protocol (is an important network protocal that allows two hosts to connect and exchange data streams. TCP guarantees the delivery of data and packets in the same order as they were sent)
IP - internet protocol

The job of TCP is to break up the requests and responses to thousands of packets before they are sent. Then, once they get into the destination, it will reassemble them.

The job of IP protocol is o send and route all the packets through the internet.

Together - they are communication protocols that define exactly how data travels across the web.

Communication protocols are system of rules, that allow two or more parties to communicate.

Question 8

What is HTTP?

Answer 8

HTTP - Hypertext transfer protocol
After TCP/IP it is another communication protocol, that allows the client and the server to connect, by sending request and responses to client and server and back.

• it is used for transmitting hypermedia documents
• follows a classical client-server model (client opens a connection to make a request -> and waits for the response)
• it is stateless.

GET /maps /HTTP/1.1

Host: www.google.com
User-Agent: Mozilla/5.0
Accept-Language: en-US

Question 9

What is the HTTP flow?

Answer 9

1. Open a TCP Connection
2. Send a HTTP Message.
   GET / HTTP/1.1 (HTTP method + request target + HTTP version)

Host: developer.mozilla.org (HTTP request headers)
Accept-Language: fr

(only when sending data to server, e.g. POST)
3. Read the response sent by the server
HTTP/1.1 200 OK (HTTP Version + status code + message)

Date: (HTTP response headers)
Server
Last-Modified:
ETag:
Accept-Ranges: bytes
Content-Length:
Content-Type: text/html

(Response body)
4. Close or reuse the connection for further requests

Question 10

What is the difference between STATIC, DYNAMIC Webpages and API.

Answer 10

STATIC: Static sites serve the HTML, CSS and JavaScript files whenever a client makes a request.

DYNAMIC: Dynamic websites, are usually built on the servers each time a request comes in.
- Usually contain a DB
- APP, like node fetches the data and
- with predefined TEMPLATE, each time builds the website that the user request.
This whole process is sometimes called SERVER SIDE RENDERING

API: API based sites, are very similar to DYNAMIC websites, but they move the weight of templating and building the site from SERVER-SIDE to CLIENT-SIDE.
Usually, they consist of two phases
1) Building an API
fetches the data similarly to SSR websites, but outputs them in JSON format
2) Consuming an API
Templates and builds the website on the CLIENT-SIDE based on the JSON data received from the API.

Question 11

What is the difference between HTTP POST, PUT and PATCH methods?

Answer 11

POST method is used to Create resources
PUT and PATCH methods is used to update resources, but,
with PUT, the client needs to send the entire updated object,
while with PATCH it is supposed to send only the part of the object that has been changed.