artainmo / web-development

Notes from studying and small projects surrounding web-development.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

web-development

Table of contents

Basics

World Wide Web (www), grouping of all documents on the web accessible through URLs(uniform resource locator)

A server is a computer connected to the www, it contains an IP(Internet Protocol) address to identify itself, this IP address can be associated with an URL, which is a non-random name for easier identification.

Web browser, is a software application that allows access to the world wide web via URLs. The web browser transforms the URL into an IP address using the DNS (domain name system), it creates a connection and sends http requests towards that ip address to receive the requested content.

Webservers serve an application/platform/website on the web. They let clients(browsers) connect to allow HTTP communication, receive web browser requests and send back responses.
They often run on an external server, which is a computer with no visual display that runs 24/7, waiting for client-servers to make requests.

A web platform consists of a back-end and front-end.
Back-end acts as web-server(answer HTTP request) and data-base-manager.
Front-end refers to the pages send by web-server to client-server, that the client's web browser will visually display, creating an user interface (UI).
Different programming languages can be used for the back-end and front-end development.

HTTP
The language used between servers to communicate.
http requests are made by a web browser and follow a specific syntax, they can request content from the webserver or even post content on the webserver, allowing the client to interact with the webserver.
http responses are made by the web server and follow a specific syntax, they can send HTML pages for the browser to display.
http stands for hypertext transfer protocol, hypertext are documents that include links to other documents.

Structure of a request:
First line: method + request targer (URL) + HTTP version (HTTP/1.1)
Header fields: Optional extra information about request
Separation empty space
Body: Content of the request

Structure of a response:
Status line: HTTP version (HTTP/1.1) + status code + status short description
Header fields: Optional extra information about response
Separation empty space
Body: Content of the response

The different HTTP methods for requests are:
GET: requests representation of specified resource, specified resource is indicated by URL.
HEAD: The HEAD method asks for a response identical to that of a GET request, but without the response body, is used to verify if any errors.
POST: used to submit an entity to the specified resource, often causing a change in state on the server.
PUT: replaces all current representations of the specified resource with the submitted request entity.
DELETE: deletes the specified resource.

The different status codes for responses are:
200: OK, successful request
201: Created, for put and post methods
400: Bad request, invalid syntax
404: Not found, the URL is not recognized
405: Not allowed, the resource does not accept the method
500: Internal server error, situation the server does not know how to handle

TCP, UDP & TLS
Those are protocols that enable the transmission of HTTP responses/requests.

Transmission control protocol (TCP) enables the transmission of resources, it is used to manage many types of internet connections and allows HTTP communication.
User diagram protocol (UDP) is a communication protocol used across the internet, especially for the transmission of time-sensitive information.
Both are internet communication protocols, the main difference between them is that TCP is more reliable but slower, while UDP is less reliable but faster and enables broadcasting.

TLS, also known as Transport Layer Security, is a widely adopted security protocol designed to facilitate secure data transmission via encryption. Using TLS with HTTP will allow you to use HTTPS (Hypertext Transfer Protocol Secure), which helps denote the presence of the extra security.

OTHER CONCEPTS
APIs
An application programming interface is a connection between computers or between computer programs. It for example enables communication between the front-end and back-end, whereby the back-end gathers data from a data-base to produce dynamic front-end pages.

Cloud computing is the on-demand availability of computer-system-resources, especially data-storage and computing-power. Large clouds consist of multiple servers connected/working together.

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages.

Programming languages and frameworks and libraries

Programming languages allow to write human-readable-code that give instructions to a computer machine, different kinds exist. Both frameworks and libraries allow the addition of reusable-pre-written-code, frameworks do this at a higher magnitude, they can enable the creation of a whole application while libraries only serve for a more specific functionality.

Frontend & backend

Javascript
Is a high-level-language used both for front-end and back-end.
The most often used frameowrks in front-end are react and angular and in back-end is nodejs.
Front-end javascript allows for dynamic webpages, plus is more easy to write than HTML/CSS code.
Through API, front-end javascript can contact the back-end for data-base-infomation leading to dynamic pages.
The web browser has to first transform javascript to HTML/CSS before display, it gets called from an HTML document with the script tag, javascript can be viewed as a high-level-language for dynamic HTML/CSS code generation.

Typescript
It is a strict syntactical superset of JavaScript and adds optional static typing to the language. TypeScript is designed for the development of large applications and transcompiles to JavaScript.
By making use of static typing it makes the code more readable and allows compile-time-errors.

Ruby on Rails
This is a framework for webdevelopment written in the general-purpose programming language Ruby. Although both backend and frontend development is possible, it is mostly used for backend development.
It uses a default MVC structure and uses multiple web/programming conventions, it enables rapid deployment and is widely used.

Flask
Flask is a popular Python framework for developing web applications. Classified as a microframework, it comes with minimal built-in components and requirements, making it easy to get started and flexible to use. At the same time, Flask is by no means limited in its ability to produce a fully featured app. Rather, it is designed to be easily extensible.
Contrarily to the python web framework Django, flask is usually used for simple applications.

Frontend

HTML & CSS
The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser.
CSS describes how HTML elements should be displayed and is thus a styling language.
Those are the only languages a web browser can display.

React
React is a free and open-source front-end JavaScript library for building user interfaces or UI components allowing dynamic single-page client applications.
Material-UI is a react framework that contains pre-made UI components.

Angular
Angular is a platform and framework for building dynamic single-page client applications using HTML and TypeScript.

Backend

PHP
PHP was created in 1994 and is one of the foundational technologies of web-development. For new websites newer technologies are usually used, but PHP maintains ground by still being present in foundational widely-used content management systems such as Wordpress.

nodeJS
Node.js is a back-end JavaScript runtime environment that executes JavaScript code outside a web browser.

Express
Express.js, or simply Express, is a back-end web application framework for Node.js. It is designed for building web applications and APIs way faster.

Nest.js
Nest.js is a Node.js framework built on top of express.js and TypeScript that comes with a strong opinion on how API's should be built. Since it is very opinionated it provides a structure, a CLI, and lots of tools that let you create professional APIs fast.

PostgreSQL
PostgreSQL is a commonly used and advanced database-management-system, used to store and retrieve data.

Sinatra
Sinatra is a Ruby framework used to quickly create APIs or the backend of a web-application. Large applications usually use 'Ruby on Rails instead'.

Other

DevOps
DevOps, is a way of organizing or a culture, that aims at ending the division between development and operations for a faster work-flow. It is an abbreviation of and refers to development and operations.
The Development team writes an application’s code/features. The Operation team creates and maintains the infrastructure that the application runs on.
It encompasses technologies such as docker, kubernetes, git, gitlab... Web-apps run on such infrastructures.
See here its own repo.

Cybersecurity
Cybersecurity is the practice of protecting systems, networks, and programs from digital attacks. The web is one medium that permits such threats.
See here its own repo.

About

Notes from studying and small projects surrounding web-development.


Languages

Language:JavaScript 40.8%Language:HTML 22.9%Language:TypeScript 19.3%Language:CSS 11.1%Language:Python 5.3%Language:Ruby 0.6%