Skip to content

The Internet Development (and Web Development).md

Latest commit

 

History

History
259 lines (197 loc) · 32.8 KB

The Internet Development (and Web Development).md

File metadata and controls

259 lines (197 loc) · 32.8 KB

The Internet Development (and Web Development)

[TOC]

Res

Related Topics

↗ Internet & Entertainment Industry ↗ Mobile Application Development ↗ Mobile Network Technology & Cellular Network

↗ Network Application Communication Architectures ↗ Internet (Web) Application Systems & Architecture Design ↗ DS Web Services' Architectures ↗ Database Systems ↗ AI (Data) Infrastructure & Techniques Stack

↗ Computer Network and Communication Introduction & Overview

↗ Web Security

↗ Web Browser Implementations ↗ Web Browser Development

↗ Web Application Galleries

↗ Dev(Sec)Ops (Application Level Engineering) ↗ MLOps

Tools & Projects

Firefox Developer Docs

Chrome for Developers

Safari Web Inspector

  • Documentation for the set of web-developer tools built into Safari.

Edge DevTools

  • Documentation for the set of web-developer tools built into Edge.

Docs & Standards

https://developer.mozilla.org/en-US/

  • 📂 MDN Web Docs
    • Your comprehensive resource for web development documentation, covering everything from CSS, HTML, JavaScript, Web APIs, and other web technologies.
  • MDB Web Glossary
    • MDN Web Docs Glossary: Definitions of Web-related terms
  • MDN Learn
    • Ideal for beginners, MDN Learn offers guides and a structured curriculum to kickstart your web development journey. Enhance your learning with interactive courses from our partner, Scrimba.
  • MDB Blog
    • Stay updated with the latest in web development. Our blog features updates, tips, tutorials from web experts, MDN announcements, and curated sponsored content.
  • MDN Tools
    • Experiment and learn with tools like Playground for live coding and HTTP Observatory for analyzing website security, designed to enhance your development experience.

👨‍💻 https://openwebdocs.org/content/posts/ We are a group of technical writers, independent collaborators and organizations who work on web documentation projects according to our charter.

https://web.dev/ We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts who specialize in web development topics such as accessibility, performance, design, and more.

https://www.w3.org/ The World Wide Web Consortium (W3C) develops standards and guidelines to help everyone build a web based on the principles of accessibility, internationalization, privacy and security.

https://spec.whatwg.org/ The WHATWG works on a number of technologies that are fundamental parts of the web platform. They are organised somewhat arbitrarily based on the preferences of those editing the standard for those technologies.

  • Compatibility (@compatstandard)
    • The Compatibility Standard describes a collection of non-standard (and often vendor-prefixed) CSS properties and DOM APIs that web browsers need to support for compatibility with the de facto web.
  • Compression (@compressionapi)
    • The Compression Standard provides APIs for compressing and decompressing bytes using a set of the most common compression algorithms.
  • Console (@consolelog)
    • The Console Standard defines APIs for console debugging facilities.
  • DOM (@thedomstandard)
    • The DOM Standard defines the core infrastructure used to define the web.
  • Encoding (@encodings)
    • The Encoding Standard defines how character encodings work on the web.
  • Fetch (@fetchstandard)
    • The Fetch Standard defines the networking model for resource retrieval on the web.
  • File System (@whatfilesystem)
    • The File System Standard defines infrastructure and an API for file systems.
  • Fullscreen API (@fullscreenapi)
    • The Fullscreen API Standard defines how web pages can take over a user's entire screen (at the user's request), e.g., for gaming or to watch a video.
  • HTML (@htmlstandard)
    • The HTML Standard is a kitchen sink full of technologies for the web. It includes the core markup language for the web, HTML, as well as numerous APIs like Web Workers, localStorage, etc.
  • Infra (@infrastandard)
    • The Infra Standard aims to define the fundamental concepts upon which standards are built.
  • MIME Sniffing (@mimesniff)
    • The MIME Sniffing Standard defines algorithms used to determine the type of resources.
  • Notifications API (@notifyapi)
    • The Notifications API Standard provides an API to display notifications to alert users outside the context of a web page.
  • Quirks Mode (@quirksstandard)
    • The Quirks Mode Standard describes behaviours in CSS and Selectors that are not yet defined in the relevant specifications but that are nonetheless widely implemented.
  • Storage (@storagestandard)
    • The Storage Standard defines an API for persistent storage and quota estimates, as well as the platform storage architecture.
  • Streams (@streamsstandard)
    • The Streams Standard provides APIs for creating, composing, and consuming streams of data that map efficiently to low-level I/O primitives.
  • Test Utils (@testutils)
    • The Test Utils Standard defines internal APIs for automating testing of web platform features implemented in web browsers.
  • URL (@urlstandard)
    • The URL Standard defines the infrastructure around URLs on the web.
  • URL Pattern (@urlpatterns)
    • The URL Pattern Standard provides a web platform primitive for matching URLs based on a convenient pattern syntax.
  • Web IDL (@webidl)
    • The Web IDL Standard defines an interface definition language, Web IDL, that can be used to describe interfaces that are intended to be implemented in web browsers.
  • WebSockets (@whatsockets)
    • The WebSockets Standard provides APIs to enable web applications to maintain bidirectional communications with server-side processes.
  • XMLHttpRequest (@xhrstandard)
    • The XMLHttpRequest Standard defines the networking API exposed to scripts on the web. The WHATWG also works on a number of ideas that aspire to become standards one day.

Intro

🔗 https://en.wikipedia.org/wiki/Web_development#

Web development is the work involved in developing a website for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services. A more comprehensive list of tasks to which Web development commonly refers, may include Web engineering, Web design, Web content development, client liaison, client-side/server-side scripting, Web server and network security configuration, and e-commerce development.

Among Web professionals, "Web development" usually refers to the main non-design aspects of building Web sites: writing markup and coding. Web development may use content management systems (CMS) to make content changes easier and available with basic technical skills.

For larger organizations and businesses, Web development teams can consist of hundreds of people (Web developers) and follow standard methods like Agile methodologies while developing Web sites. Smaller organizations may only require a single permanent or contracting developer, or secondary assignment to related job positions such as a graphic designer or information systems technician. Web development may be a collaborative effort between departments rather than the domain of a designated department. There are three kinds of Web developer specialization: front-end developer, back-end developer, and full-stack developer. Front-end developers are responsible for behavior and visuals that run in the user browser, while back-end developers deal with the servers. Since the commercialization of the Web, the industry has boomed and has become one of the most used technologies ever.

Modern Web Application Architecture

↗ DS Web Services' Architectures ↗ Internet and Internet Protocol Suites (TCP&IP Protocol Suites)

web_application_arch.excalidraw | 800 Web & Internet: The Architecture

A simplified diagram of the web workflow. Note the tree major agents here: client, web server, and database.

📜 History of Internet & Web (From Web 1.0 to Web 3.0)

↗ Internet and Internet Protocol Suites (TCP&IP Protocol Suites) ↗ History of Computer Networking and Communication Evolution

🔗 深入浅出计算机网络 - 1.2 因特网概述

🔗 https://en.wikipedia.org/wiki/Web_development#Evolution_of_the_World_Wide_Web_and_web_development

Origin/ Web 1.0 (Web you can see)

  • Tim Berners-Lee created the World Wide Web in 1989 at CERN.
  • The primary goal in the development of the Web was to fulfill the automated information-sharing needs of academics affiliated with institutions and various global organizations. Consequently, HTML was developed in 1993.
  • Web 1.0 is described as the first paradigm wherein users could only view material and provide a small amount of information. Core protocols of web 1.0 were HTTP, HTML and URI.

Web 2.0 (Web you can talk)

  • Web 2.0, a term popularised by Dale Dougherty, then vice president of O'Reilly, during a 2004 conference with Media Live, marks a shift in internet usage, emphasizing interactivity.
  • Web 2.0 introduced increased user engagement and communication. It evolved from the static, read-only nature of Web 1.0 and became an integrated network for engagement and communication. It is often referred to as a user-focused, read-write online network.
  • In the realm of Web 2.0 environments, users now have access to a platform that encourages sharing activities such as creating music, files, images, and movies. The architecture of Web 2.0 is often considered the "backbone of the internet," using standardized XML (Extensible Markup Language) tags to authorize information flow from independent platforms and online databases.

Web 3.0 (Web you can interact & own)

  • ↗ Web 3.0 & Decentralized Finance

  • Web 3.0, considered the third and current version of the web, was introduced in 2014. The concept envisions a complete redesign of the web. Key features include the integration of metadata, precise information delivery, and improved user experiences based on preferences, history, and interests.

  • Web 3.0 aims to turn the web into a sizable, organized database, providing more functionality than traditional search engines. Users can customize navigation based on their preferences, and the core ideas involve identifying data sources, connecting them for efficiency, and creating user profiles.

  • This version is sometimes also known as Semantic Web.

📜 Technical Evolution of Web Development

🔗 https://en.wikipedia.org/wiki/Web_development#Evolution_of_web_development_technologies

The journey of web development technologies began with simple HTML pages in the early days of the internet. Over time, advancements led to the incorporation of CSS for styling and JavaScript for interactivity. This evolution transformed static websites into dynamic and responsive platforms, setting the stage for the complex and feature-rich web applications we have today.

Web development in future will be driven by advances in browser technology, Web internet infrastructure, protocol standards, software engineering methods, and application trends.

The Working Mechanism of Internet ⭐

🤔 Overview: What Happens When Sending An Internet Request

Client Side

↗ Web Browser Development ↗ Web FrontEnd Dev

ISP Services

↗ Web (WWW) Protocols ↗ CDN (Contend Delivery Network) ↗ DNS (Domain Name Systems) ↗ DHCP (Dynamic Host Configuration Protocol)

Server Side

↗ Web BackEnd Dev & Middleware

↗ Web Application System Architecture Design Pattern ↗ Documentation & Static Site Generator (SSG) ↗ Web Scripting Languages & Server-Side Scripting

↗ Database Systems ↗ IDC & Data Center Networking

🔗 https://en.wikipedia.org/wiki/Server-side_scripting

With the advent of single-page applications, an updated approach to server-side scripting was introduced, known as server-side rendering. With server-side rendering, static HTML can be sent from the server to the client, and client-side JavaScript then makes the web page dynamic by attaching event handlers to the HTML elements in a process called hydration. Examples of frameworks that support server-side rendering are Next.js, Nuxt.js, Angular.

An alternative to server-side rendering is static site generation. With server-side rendering, the page is generally assembled on the server once per each request. By contrast, with static site generation, the application generates all the static HTML pages at build time. These pre-built pages are then sent to the client at each request, without having to build them again. This leads to faster rendering times, since a new page doesn't have to be generated on every request; the server simply hands over a file it already generated in the past. The downside is that when some data on the page changes, it needs to be rebuilt. Examples of static site generation tools are Jekyll and Gatsby. Sites generated by static site generation tools are often hosted on Netlify, Vercel or GitHub pages.

Ref

  1. The User Initiates a Request
  2. DNS Resolution: Translating Domain to IP Address
  3. Establishing a Connection: TCP/IP and TLS Handshake
  4. Sending the HTTP Request
  5. Server Processing: Handling the Request
  6. Content Delivery Networks (CDNs): Enhancing Performance
  7. Receiving the HTTP Response
  8. Rendering the Page in the Browser