{"id":21340704,"url":"https://github.com/artainmo/web-development","last_synced_at":"2026-04-11T10:08:38.424Z","repository":{"id":62038478,"uuid":"403742276","full_name":"artainmo/web-development","owner":"artainmo","description":"Notes from studying and small projects surrounding web-development.","archived":false,"fork":false,"pushed_at":"2024-10-31T18:25:17.000Z","size":13484,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-03T12:23:24.934Z","etag":null,"topics":["angular","css","expressjs","flask","html","javascript","nestjs","nodejs","personal-project","php","postgresql","react","ruby","study","typescript","web"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/artainmo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-06T19:50:12.000Z","updated_at":"2025-05-05T08:40:45.000Z","dependencies_parsed_at":"2024-10-28T12:46:04.586Z","dependency_job_id":"76ae85b2-f327-454c-8767-8a19c763bb74","html_url":"https://github.com/artainmo/web-development","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/artainmo/web-development","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artainmo%2Fweb-development","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artainmo%2Fweb-development/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artainmo%2Fweb-development/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artainmo%2Fweb-development/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/artainmo","download_url":"https://codeload.github.com/artainmo/web-development/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artainmo%2Fweb-development/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31676352,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T08:18:19.405Z","status":"ssl_error","status_checked_at":"2026-04-11T08:17:08.892Z","response_time":54,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","css","expressjs","flask","html","javascript","nestjs","nodejs","personal-project","php","postgresql","react","ruby","study","typescript","web"],"created_at":"2024-11-22T00:52:36.435Z","updated_at":"2026-04-11T10:08:38.403Z","avatar_url":"https://github.com/artainmo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# web-development\n\n## Table of contents\n- [Basics](#Basics)\n- [Programming languages and frameworks and libraries](#Programming-languages-and-frameworks-and-libraries)\n\n## Basics\n**World Wide Web** (www), grouping of all documents on the web accessible through URLs(uniform resource locator)\n\nA **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.\n\n**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.\n\n**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.\u003cbr\u003e\nThey 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.\n\nA **web platform** consists of a back-end and front-end.\u003cbr\u003e\nBack-end acts as web-server(answer HTTP request) and data-base-manager.\u003cbr\u003e\nFront-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).\u003cbr\u003e\nDifferent programming languages can be used for the back-end and front-end development.\n\n**HTTP**\u003cbr\u003e\nThe language used between servers to communicate.\u003cbr\u003e\nhttp 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.\u003cbr\u003e\nhttp responses are made by the web server and follow a specific syntax, they can send HTML pages for the browser to display.\u003cbr\u003e\nhttp stands for hypertext transfer protocol, hypertext are documents that include links to other documents.\n\nStructure of a request:\u003cbr\u003e\nFirst line: method + request targer (URL) + HTTP version (HTTP/1.1)\u003cbr\u003e\nHeader fields: Optional extra information about request\u003cbr\u003e\nSeparation empty space\u003cbr\u003e\nBody: Content of the request\u003cbr\u003e\n\nStructure of a response:\u003cbr\u003e\nStatus line: HTTP version (HTTP/1.1) + status code + status short description\u003cbr\u003e\nHeader fields: Optional extra information about response\u003cbr\u003e\nSeparation empty space\u003cbr\u003e\nBody: Content of the response\u003cbr\u003e\n\nThe different HTTP methods for requests are:\u003cbr\u003e\nGET: requests representation of specified resource, specified resource is indicated by URL.\u003cbr\u003e\nHEAD: 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.\u003cbr\u003e\nPOST: used to submit an entity to the specified resource, often causing a change in state on the server.\u003cbr\u003e\nPUT: replaces all current representations of the specified resource with the submitted request entity.\u003cbr\u003e\nDELETE: deletes the specified resource.\n\nThe different status codes for responses are:\u003cbr\u003e\n200: OK, successful request\u003cbr\u003e\n201: Created, for put and post methods\u003cbr\u003e\n400: Bad request, invalid syntax\u003cbr\u003e\n404: Not found, the URL is not recognized\u003cbr\u003e\n405: Not allowed, the resource does not accept the method\u003cbr\u003e\n500: Internal server error, situation the server does not know how to handle\u003cbr\u003e\n\n**TCP, UDP \u0026 TLS**\u003cbr\u003e\nThose are protocols that enable the transmission of HTTP responses/requests.\n\nTransmission control protocol (TCP) enables the transmission of resources, it is used to manage many types of internet connections and allows HTTP communication.\n\u003cbr\u003e\nUser diagram protocol (UDP) is a communication protocol used across the internet, especially for the transmission of time-sensitive information.\u003cbr\u003e\nBoth 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.\n\nTLS, 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.\n\n**OTHER CONCEPTS**\u003cbr\u003e\nAPIs\u003cbr\u003e\nAn 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.\n\nCloud 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.\n\nA 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.\n\n## Programming languages and frameworks and libraries\nProgramming languages allow to write human-readable-code that give instructions to a computer machine, different kinds exist.\nBoth 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.  \n\n### Frontend \u0026 backend\n**Javascript**\u003cbr\u003e\nIs a high-level-language used both for front-end and back-end.\u003cbr\u003e\nThe most often used frameowrks in front-end are react and angular and in back-end is nodejs.\u003cbr\u003e\nFront-end javascript allows for dynamic webpages, plus is more easy to write than HTML/CSS code.\u003cbr\u003e\nThrough API, front-end javascript can contact the back-end for data-base-infomation leading to dynamic pages.\u003cbr\u003e\nThe 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.\n\n**Typescript**\u003cbr\u003e\nIt 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.\u003cbr\u003e\nBy making use of static typing it makes the code more readable and allows compile-time-errors.\n\n**Ruby on Rails**\u003cbr\u003e\nThis 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.\u003cbr\u003e\nIt uses a default MVC structure and uses multiple web/programming conventions, it enables rapid deployment and is widely used.\n\n**Flask**\u003cbr\u003e\nFlask 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.\u003cbr\u003e\nContrarily to the python web framework Django, flask is usually used for simple applications.\n\n### Frontend\n**HTML \u0026 CSS**\u003cbr\u003e\nThe HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser.\u003cbr\u003e\nCSS describes how HTML elements should be displayed and is thus a styling language.\u003cbr\u003e\nThose are the only languages a web browser can display.\n\n**React**\u003cbr\u003e\nReact is a free and open-source front-end JavaScript library for building user interfaces or UI components allowing dynamic single-page client applications.\u003cbr\u003e\nMaterial-UI is a react framework that contains pre-made UI components.\n\n**Angular**\u003cbr\u003e\nAngular is a platform and framework for building dynamic single-page client applications using HTML and TypeScript.\n\n### Backend\n**PHP**\u003cbr\u003e\nPHP 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.\n\n**nodeJS**\u003cbr\u003e\nNode.js is a back-end JavaScript runtime environment that executes JavaScript code outside a web browser.\n\n**Express**\u003cbr\u003e\nExpress.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.\n\n**Nest.js**\u003cbr\u003e\nNest.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.\n\n**PostgreSQL**\u003cbr\u003e\nPostgreSQL is a commonly used and advanced database-management-system, used to store and retrieve data.\n\n**Sinatra**\u003cbr\u003e\nSinatra is a Ruby framework used to quickly create APIs or the backend of a web-application. Large applications usually use 'Ruby on Rails instead'.\n\n### Other\n\n**DevOps**\u003cbr\u003e\nDevOps, 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.\u003cbr\u003e\nThe Development team writes an application’s code/features. The Operation team creates and maintains the infrastructure that the application runs on.\u003cbr\u003e\nIt encompasses technologies such as docker, kubernetes, git, gitlab... Web-apps run on such infrastructures.\u003cbr\u003e\nSee [here](https://github.com/artainmo/DevOps) its own repo.\n\n**Cybersecurity**\u003cbr\u003e\nCybersecurity is the practice of protecting systems, networks, and programs from digital attacks. The web is one medium that permits such threats.\u003cbr\u003e\nSee [here](https://github.com/artainmo/cybersecurity) its own repo.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartainmo%2Fweb-development","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartainmo%2Fweb-development","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartainmo%2Fweb-development/lists"}