Internet

Hyper Text Markup Language (HTML)

A markup language is a language that is used to annotate text. The reason why it is called markup language is that you are marking up the text. Why we need to annotate text? Lets sey that we want to write a book. We need to add some formatting to the text. For instance, we may need to make some words bold, italic or underline. Also we may need to add some images, tables, lists etc. to the text. However, at the and of the day, we need to store the text in a text file. So, we need a way to annotate the text. This is where markup languages come into play. There are a lot of markup languages. For instance:

  • Markdown
  • Latex
  • HTML
  • XML

HTML is different from other markup languages. Because you can view the result in a web browser. It is used to create web pages. A web page is a text file that contains HTML tags. A tag is a special text that starts with < and ends with >. There are two types of tags. The first one is a self closing tag. It does not have a closing tag. For instance, <br> is a self closing tag. The second one is a normal tag. It has a closing tag. For instance, <p> is a normal tag and </p> is its closing tag.

Historically, HTML was used to create static, not styled web pages. If you want to style your web page, you need to use CSS. CSS is a language that is used to style HTML elements. However, in order to create dynamic web pages, you need to use a programming language. This is where javascript comes into play. Javascript is a programming language that is used to create dynamic web pages.

However, also you can serve dynamic web pages with a trick called server side rendering. This means that you can create a web page with a programming language and send it to the client. This is what you will do in this challange.

Cascading Style Sheets (CSS)

Hyper Text Transfer Protocol (HTTP)

In order to serve your webpage, you need a some kind of protocol. This protocol is called HTTP. HTTP is a protocol that is used to transfer hypertext. Hypertext is a text that contains links to other texts. For instance, a web page is a hypertext. It contains links to other web pages.

HTTP is a request-response protocol. This means that a client sends a request to the server and the server sends a response to the client. A request contains a method, a path and list of headers. A response contains a status code, some headers and a body. A method is a verb that tells the server what to do. For instance, GET method is used to get a resource from the server. A path is a string that tells the server which resource to get. For instance, / path is used to get the root resource. A header is a key-value pair that contains some information about the request. For instance, Content-Type: text/html header tells the server that the body of the request is a HTML document. A status code is a number that tells the client what happened. For instance, 200 status code means that everything is OK. A body is a string that contains the response. For instance, if the response is a HTML document, the body will contain the HTML document.

Sample HTTP request:

GET / HTTP/1.1
Host: localhost:3000
User-Agent: curl/7.64.1
Accept: */*

As you can see the first line contains the method (GET), the path (/) and the HTTP version (HTTP/1.1) separated by spaces. The first line is called request line and the other lines are called headers. These lines are separated by \r\n. After sending all headers, in order to tell the server that the headers are finished, you need to send an empty line. After that, you can send the body of the request. In this case, the body is empty.

Sample HTTP response:

HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: text/html; charset=utf-8
Content-Length: 25

<h1>Hello World</h1>

As you can see the first line contains the HTTP version (HTTP/1.1), the status code (200) and the status message (OK) separated by spaces. The first line is called status line and the other lines are called headers. These lines are separated by \r\n. After sending all headers, in order to tell the client that the headers are finished, you need to send an empty line. After that, you can send the body of the response. In this case, the body is <h1>Hello World</h1> which is an HTML document.

TLS/SSL

API

REST API

REST (Representational State Transfer) is an architectural style for developing web services. REST is popular due to its simplicity and the fact that it builds upon existing systems and features of the internet's HTTP in order to achieve its objectives, as opposed to creating new standards, frameworks and technologies. REST is a stateless client-server architecture where web services

Javascript

Browsers use JavaScript to make web pages dynamic and interactive. JavaScript allows to manipulate the content, structure, and style of a web page in real-time, respond to user inputs, make asynchronous requests to the server, and much more. We are going to cover manipulating the web-content in this challenge. The JavaScript engine in the browser parses the JavaScript code. (V8 Engine for Chrome, SpiderMonkey for Firefox) The parsed JavaScript code is converted into machine code and executed. The JavaScript code can manipulate the DOM, making real-time changes to the web page content, structure, or style. JavaScript is single-threaded, but it can handle asynchronous operations using the event loop and callback queue. When an asynchronous operation is encountered, it’s offloaded, and its callback is placed in the callback queue. The event loop continuously checks if the main thread (where the synchronous code runs) is free. If it is, the event loop takes the next callback from the callback queue and executes it.

DOM

The DOM is a programming interface for HTML and XML documents. It represents the structure of a document as a tree of objects. Each node in this tree corresponds to a part of the document, for example, an element, an attribute, or text content. Mechanism that browsers use to convert HTML into DOM is below:

  • The browser parses the HTML content line by line.
  • It converts HTML elements, attributes, and text into objects.
  • These objects are structured in a tree-like form, mirroring the nested structure of the HTML tags.
  • Each object represents a part of the page and contains properties and methods that you can manipulate using JavaScript.

Resource about DOM

Modules

Writing client side rendered single page applications is not an easy task and it is not practical to write everything in one file. For this reason, you should split your code into multiple pieces. For this reason, we are using modules. A module is a piece of code that hides or exposes some functionality, and most importantly, it is reusable. Therefore, it is a collection of functions, variables, and classes that are bundled together. These functions, variables, and classes are not accessible from outside the module unless they are explicitly exported. In this way, you can hide the internal implementation details of a module and expose only the necessary parts. This is called encapsulation. Historically, there are several ways to define modules in JavaScript: CommonJS, AMD, UMD, and ES Modules. Lets examine them one by one.

In CommonJs modules, your script work in a context which has a predifined set of variables. You can use require function to import a module and module.exports object to export a module. For instance, if you want to use a library called lodash, you can import it like this:

const _ = require('lodash');

require function is a synchronous function that loads the module if it is not loaded before and returns the module object. If you want to export a function from a module, you can use module.exports object like this:

module.exports = function () {
  console.log('Hello World');
};

Here is an example of a CommonJS module:

// math.js
function add(a, b) {
  return a + b;
}

module.exports = {
  add,
};

// index.js
const math = require('./math');

console.log(math.add(1, 2));

CommonJS modules are synchronous. When you import a module, it is loaded immediately. This is not a problem in server side applications. However, in client side applications, it is a problem because you have to load all the modules before the application starts. For this reason, CommonJS modules are used by Node.js, not in the browser.

Fetch and XMLHttpRequest API

There are multiple ways to send HTTP requests from browser. The first one is to use fetch API. This is a native API and it is supported by all browsers. The second one is to use XMLHttpRequest API. This is an old API and it is supported by all browsers. The third one is using a third party library like axios. This is a library that you can use to send HTTP requests from browser. These libraries actually wrap XMLHttpRequest or fetch API. Third party libraries generally provide easier to use APIs. However, they are not native APIs. This means that you need to include them in your project. Also, they increase the size of your project. It is recommended to use axios API. However, if you try to use fetch and XMLHttpRequest API, it will help you to understand how HTTP requests work under the hood.

Bundlers

In a typical web application, you can use javascript sources with <script src=".."> tags. However, if you want to use libraries in your app, then you should import every library with <script src=".."> tags. Lets say you want use

CSR, SSR, SSG

Client side rendering is a technique that you render your HTML in browser. This means that you don't need to render your HTML in your server. This means that you don't need to use templating engines like EJS or handlebars.

Summary

Extra Resources

Exercises