diff --git a/docs/intro.md b/docs/intro.md index a0acd7b4..a8d4f6f2 100644 --- a/docs/intro.md +++ b/docs/intro.md @@ -4,6 +4,10 @@ sidebar_position: 1 # Introduction + + +import StableStatus from "./../src/components/StableStatus"; + This repository contains my personal collection of notes, primarily focused on Computer Science, Software Engineering, and Backend Development. As I explore various topics in these areas, I document my learnings and publish them on this website. If you come across any issues or errors in the notes, feel free to open an issue in the GitHub repository. @@ -170,11 +174,45 @@ If you come across any issues or errors in the notes, feel free to open an issue ### System Design and Databases 1. [Networking](/docs/networking/introduction.md) - 1. [Introduction](/docs/networking/introduction.md) - 2. [Protocols](/docs/networking/protocols/client-server-architecture.md) - 1. [Client Server Architecture](/docs/networking/protocols/client-server-architecture.md) - 2. [OSI Model](/docs/networking/protocols/osi-model.md) - 3. [Communication Design Patterns](/docs/networking/communication-design-patterns/request-response.md) + 1. [Protocols](/docs/networking/protocols/client-server-architecture.md) + 1. [Client-Server Architecture](/docs/networking/protocols/client-server-architecture.md) + 2. [OSI Model](/docs/networking/protocols/osi-model.md) + 3. [Layer 7: Application](/docs/networking/protocols/layer-7/http.md) + 1. [HTTP](/docs//networking/protocols/layer-7/http.md) + 2. [DNS](/docs//networking/protocols/layer-7/dns.md) + 3. [SMTP](/docs//networking/protocols/layer-7/smtp.md) + 4. [SSH](/docs//networking/protocols/layer-7/ssh.md) + 5. [RPC & gRPC](/docs//networking/protocols/layer-7/rpc.md) + 6. [FTP](/docs//networking/protocols/layer-7/ftp.md) + 7. [MQTT](/docs//networking/protocols/layer-7/mqtt-amqp.md) + 8. [WebRTC](/docs//networking/protocols/layer-7/webrtc.md) + 9. [WebSocket](/docs//networking/protocols/layer-7/websocket.md) + 4. [Layer 6: Presentation](/docs//networking/protocols/layer-6/tls.md) + 1. [TLS](/docs//networking/protocols/layer-6/tls.md) + 5. Layer 5: Session + 6. [Layer 4: Transport](/docs//networking/protocols/layer-4/tcp.md) + 1. [TCP](/docs//networking/protocols/layer-4/tcp.md) + 2. [UDP](/docs//networking/protocols/layer-4/udp.md) + 3. [QUIC](/docs//networking/protocols/layer-4/quic.md) + 7. [Layer 3: Network](/docs//networking/protocols/layer-3/internet-protocol.md) + 1. [Internet Protocol](/docs//networking/protocols/layer-3/internet-protocol.md) + 2. [ICMP](/docs//networking/protocols/layer-3/icmp.md) + 3. [BGP](/docs//networking/protocols/layer-3/bgp.md) + 4. [NAT](/docs//networking/protocols/layer-3/nat.md) + 8. [Layer 2: Data Link](/docs//networking/protocols/layer-2/arp.md) + 1. [ARP](/docs//networking/protocols/layer-2/arp.md) + 9. [Extra](/docs/networking/protocols/extra/cdn.md) + 1. [CDN](/docs/networking/protocols/extra/cdn.md) + 2. [DHCP](/docs/networking/protocols/extra/dhcp.md) + 3. [NTP](/docs/networking/protocols/extra/ntp.md) + 4. [REST](/docs/networking/protocols/extra/rest.md) + 2. [Communication Design Patterns](/docs/networking/communication-design-patterns/request-response.md) + 1. [Request Response](/docs/networking/communication-design-patterns/request-response.md) + 2. [Pub Sub](/docs/networking/communication-design-patterns/pub-sub.md) + 3. [Event Streaming](/docs/networking/communication-design-patterns/event-streaming.md) + 4. [Short Pooling](/docs/networking/communication-design-patterns/short-pooling.md) + 5. [Long Pooling](/docs/networking/communication-design-patterns/long-pooling.md) + 6. [SSE](/docs/networking/communication-design-patterns/sse.md) 2. [Database](/docs/databases/introduction.md) 1. [SQL](/docs/databases/sql/introduction.md) diff --git a/docs/networking/introduction.md b/docs/networking/introduction.md index f43437cf..c461260c 100644 --- a/docs/networking/introduction.md +++ b/docs/networking/introduction.md @@ -17,9 +17,8 @@ sidebar_position: 1 5. [RPC & gRPC](/docs//networking/protocols/layer-7/rpc.md) 6. [FTP](/docs//networking/protocols/layer-7/ftp.md) 7. [MQTT](/docs//networking/protocols/layer-7/mqtt-amqp.md) - 8. [REST](/docs//networking/protocols/layer-7/rest.md) - 9. [WebRTC](/docs//networking/protocols/layer-7/webrtc.md) - 10. [WebSocket](/docs//networking/protocols/layer-7/websocket.md) + 8. [WebRTC](/docs//networking/protocols/layer-7/webrtc.md) + 9. [WebSocket](/docs//networking/protocols/layer-7/websocket.md) 4. [Layer 6: Presentation](/docs//networking/protocols/layer-6/tls.md) 1. [TLS](/docs//networking/protocols/layer-6/tls.md) 5. Layer 5: Session @@ -38,6 +37,7 @@ sidebar_position: 1 1. [CDN](/docs/networking/protocols/extra/cdn.md) 2. [DHCP](/docs/networking/protocols/extra/dhcp.md) 3. [NTP](/docs/networking/protocols/extra/ntp.md) + 4. [REST](/docs/networking/protocols/extra/rest.md) 2. [Communication Design Patterns](/docs/networking/communication-design-patterns/request-response.md) 1. [Request Response](/docs/networking/communication-design-patterns/request-response.md) 2. [Pub Sub](/docs/networking/communication-design-patterns/pub-sub.md) diff --git a/docs/networking/protocols/layer-7/rest.md b/docs/networking/protocols/extra/rest.md similarity index 72% rename from docs/networking/protocols/layer-7/rest.md rename to docs/networking/protocols/extra/rest.md index 9922ce68..49e06b2c 100644 --- a/docs/networking/protocols/layer-7/rest.md +++ b/docs/networking/protocols/extra/rest.md @@ -1,9 +1,15 @@ --- -sidebar_position: 8 +sidebar_position: 4 --- # RESTful +:::tip[Status] + +This note is complete, reviewed, and considered stable. + +::: + **REST (Representational State Transfer)** is an architectural style for designing networked applications. It is based on a set of constraints and principles that make it suitable for creating scalable, reliable, and stateless web services. RESTful APIs (Application Programming Interfaces) are those that conform to the REST principles. The RESTful approach to building web services is commonly used in web applications because it leverages the stateless nature of HTTP and is simple to implement and use. RESTful APIs are typically used for creating web services that interact with databases or other services in a client-server model. @@ -97,3 +103,77 @@ Here’s a simple example of a RESTful API for managing users: - **GET /users/123**: Retrieves a specific user with ID 123. - **PUT /users/123**: Updates the information of the user with ID 123. - **DELETE /users/123**: Deletes the user with ID 123. + +## Stateless vs Cookies + +REST requires that each request contains all the information needed for the server to process it. The server should not maintain conversational state between requests. + +Using cookies does **not** automatically violate REST principles. A cookie is simply another HTTP header used to transmit data. + +### Stateful Session (Not RESTful) + +If a cookie contains a session ID, the server must look up session data stored in memory or a database. + +```text +Client + | + | Cookie: session_id=abc123 + | +Server + | + | Lookup session + | Restore user state +``` + +Since the server relies on stored session state, this does not satisfy REST's stateless constraint. + +### Stateless Authentication (RESTful) + +Cookies can also be used to carry self-contained credentials, such as a signed JWT or refresh token. The server validates the token from the request without restoring any conversational session. + +```text +Client + | + | Cookie: refresh_token=... + | +Server + | + | Validate token + | Issue new access token +``` + +In this case, the cookie is merely a transport mechanism, and the request remains self-contained. + +> A cookie itself does not make an API stateful. What matters is whether the server must maintain per-client session state between requests. + +## Sessions and REST + +Traditional web applications often use server-side sessions for authentication and user state management. The client receives a session ID (typically stored in a cookie) and sends it with every request. The server then uses the session ID to retrieve user context from a session store such as memory, Redis, or a database. + +```text +Client + | + | Cookie: session_id=abc123 + | +Server + | + | Lookup session + | Restore user context +``` + +This approach violates REST's stateless constraint because the server must maintain and restore per-client session state between requests. + +In contrast, a stateless REST API includes all information required to process a request within the request itself, often using self-contained tokens such as JWTs. + +```text +Client + | + | Authorization: Bearer + | +Server + | + | Validate token + | Process request +``` + +> Storing application data in a database is compatible with REST. What REST discourages is maintaining per-client conversational state on the server between requests. diff --git a/docs/networking/protocols/layer-7/webrtc.md b/docs/networking/protocols/layer-7/webrtc.md index 17085e6d..4551d031 100644 --- a/docs/networking/protocols/layer-7/webrtc.md +++ b/docs/networking/protocols/layer-7/webrtc.md @@ -1,9 +1,15 @@ --- -sidebar_position: 9 +sidebar_position: 8 --- # WebRTC +:::tip[Status] + +This note is complete, reviewed, and considered stable. + +::: + WebRTC (Web Real-Time Communication) is an open-source project that provides web browsers and mobile applications with real-time communication (RTC) capabilities via simple APIs. It supports peer-to-peer audio, video, and data sharing without requiring any additional plugins. ## Key Features of WebRTC diff --git a/docs/networking/protocols/layer-7/websocket.md b/docs/networking/protocols/layer-7/websocket.md index b93698b3..6a10fd68 100644 --- a/docs/networking/protocols/layer-7/websocket.md +++ b/docs/networking/protocols/layer-7/websocket.md @@ -1,9 +1,15 @@ --- -sidebar_position: 10 +sidebar_position: 9 --- # WebSocket +:::tip[Status] + +This note is complete, reviewed, and considered stable. + +::: + WebSocket is a communication protocol that provides full-duplex (two-way) communication channels over a single, long-lived TCP connection. Unlike traditional HTTP requests, which are stateless and require a new connection for each exchange, WebSocket enables continuous communication between a client (such as a browser) and a server. WebSocket is particularly useful in scenarios requiring real-time communication, such as chat applications, live notifications, and online gaming. ## Key Features of WebSocket diff --git a/src/components/StableStatus/index.tsx b/src/components/StableStatus/index.tsx new file mode 100644 index 00000000..5da84d87 --- /dev/null +++ b/src/components/StableStatus/index.tsx @@ -0,0 +1,8 @@ +// src/components/Status.jsx +export default function Status() { + return ( + + Stable + + ); +} \ No newline at end of file diff --git a/src/css/custom.css b/src/css/custom.css index 95ad39e0..d927ceb8 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -32,7 +32,8 @@ } .mermaid-container { - margin: 20px 0; /* Optional: Adjust spacing around the diagram */ + margin: 20px 0; + /* Optional: Adjust spacing around the diagram */ text-align: center; } @@ -45,3 +46,20 @@ width: 100%; } } + +.status-badge { + display: inline-block; + margin-left: 0.4rem; + padding: 0.1rem 0.4rem; + border-radius: 999px; + font-size: 0.65rem; + font-weight: 600; + line-height: 1.2; + vertical-align: middle; +} + +.status-badge--stable { + color: #2e8555; + border: 1px solid #2e8555; + background: transparent; +} \ No newline at end of file