Introduction
This site demonstrates server-side web technologies — from the foundational protocols that power the web to the programming models and frameworks used to build dynamic applications.
Foundational Concepts
Before HTTP, URLs, or server-side programming, you need the mental models that frame everything: the Internet vs the Web, client-server architecture, where rendering happens, and why the client can never be trusted.
Foundational Concepts Overview — Internet vs Web, network stack (TCP/IP, DNS), client-server architecture, what happens when you type a URL, the three pillars, UX vs DX, HTML fundamentals, forms, client-side security illusion, and development models (SSR/CSR).
Live Demos
- HTML5 Hello World — Basic HTML5 document structure
- XHTML (as HTML) — XHTML served with HTML content type
- XHTML (as XML) — XHTML served as XML (strict parsing)
- Malformed HTML — Browser error tolerance demo
- Form GET — Data in query string
- Form POST — Data in request body
- Form Security — Hidden fields, passwords, maxlength bypass
- Client Storage 1 — localStorage vs sessionStorage
- Client Storage 2 — Cross-page persistence + third-party script risk
URLs
URLs (Uniform Resource Locators) are the addressing system of the Web. Understanding URL structure, encoding, and design is essential for building web applications, APIs, and user-friendly navigation.
URL Fundamentals Overview — URL anatomy (scheme, authority, path, query, fragment), absolute vs relative URLs, percent-encoding, data URIs, state management, security, URL design principles, and the JavaScript URL API.
HTTP
HTTP (Hypertext Transfer Protocol) is the foundation of all data communication on the Web. Understanding request/response structure, methods, status codes, headers, and caching is essential for everything that follows.
HTTP Fundamentals Overview — Request-response cycle, methods, status codes, headers, content negotiation, caching, cookies, CORS, authentication, security headers, HTTPS/TLS, and observing HTTP in practice.
Web Servers
Web servers are the gatekeepers between clients and your application. They handle HTTP, serve files, route requests, terminate TLS, and forward traffic to application servers. Understanding web servers is essential for deploying, debugging, and securing any web application.
Web Servers Overview — Server architecture (process-per-request, event-driven), virtual hosts, routing, static file serving, reverse proxying, TLS/HTTPS, logging, security hardening, performance tuning, debugging, the Node.js server model, serverless, and choosing your architecture.
Server-Side Programming Models
There are several distinct models for executing server-side code to generate dynamic web content. Each approach has different trade-offs in performance, complexity, and portability.
Server-Side Execution Models — Visual guide explaining the architectural differences between Fork/Exec, Server-Side Scripting, Embedded Native, and Code as Server approaches.
Fork/Exec (CGI)
Traditional Common Gateway Interface programs that run as separate processes spawned by the web server. For each request, the server forks and executes the script.
Perl
Python
Ruby
Node.js
Apache spawns a new Node.js process for each request. Sessions use file-based storage (/tmp). Simple but has process spawn overhead.
Server-Side Scripting
Server-side scripting embeds code directly in HTML pages, processed by the web server before sending to the client. The interpreter runs inside the server process (no fork-exec overhead).
SSI (Server Side Includes)
The oldest server-side technology (mid-1990s). Simple directives embedded in HTML for includes, variables, and basic conditionals. Limited but lightweight.
- SSI Demo - Includes, variables, conditionals
PHP
The most widely-used server-side scripting language. Runs as an Apache module (mod_php) for better performance than CGI. Powers WordPress, Wikipedia, and much of the web.
Other Technologies (Reference Only)
These historical server-side scripting technologies shaped web development but require specific server environments not available here. Static reference pages with code examples are provided.
- Classic ASP - Microsoft's original server-side scripting (1996), uses VBScript/JScript with IIS
- ColdFusion - Allaire/Macromedia/Adobe tag-based language (1995), pioneered rapid web development
- JSP - JavaServer Pages (1999), enterprise Java web development with servlet compilation
- ASP.NET - Microsoft's .NET web framework (2002), evolved from Web Forms to modern Core
Embedded Native (Apache Modules)
Custom code compiled directly into the web server as native modules. The code runs as part of the server process with full access to server internals. Maximum performance but requires recompilation for changes.
- Hello, World! - Simple response demo
- Environment Variables - Request/environment info display
- Form Handler - GET and POST form processing
Code as Server
The application runs its own HTTP server as a persistent process. Apache acts as a reverse proxy, forwarding requests to the application server. This is the dominant model for modern web applications.
Node.js (Express)
A persistent Express.js server runs continuously on port 3000. Sessions use in-memory storage (faster, but lost on restart). This is how Node.js is typically deployed in production.
Python (Flask)
A persistent Flask server runs continuously on port 5000. Sessions use in-memory storage. Flask is a popular micro-framework; larger projects might use Django or FastAPI.
Perl (Mojolicious)
A persistent Mojolicious server runs continuously on port 8080. Sessions use signed cookies. Mojolicious is a modern Perl web framework; alternatives include Dancer and Catalyst.
State Management
HTTP is stateless - each request is independent. Web applications need mechanisms to maintain state across requests for user sessions, shopping carts, and personalization.
State Management Overview - Comprehensive guide to maintaining state in stateless HTTP.
Core Mechanisms
- URL Parameters - Pass state in query strings and path segments
- Cookies - Browser-stored key-value pairs sent with each request
- Server Sessions - Server-side storage with session ID cookie
- Client Storage - localStorage and sessionStorage APIs
Advanced Topics
- Hidden Form Fields - Embed state in forms (ViewState pattern)
- JWT Tokens - Stateless authentication with signed tokens
- Security Patterns - CSRF protection, secure cookies, and best practices
PHP Overview
PHP is the most widely-used server-side scripting language, powering over 75% of websites with known server-side technology. It runs as an Apache module for optimal performance.
PHP Overview - Introduction to PHP: history, execution model, and why it matters.
Tutorial
- Tutorial Overview - Getting started with PHP
- Hello World - Basic syntax and output
- Form Handling - Processing GET and POST data
- Headers and Metadata - HTTP headers and request info
- Sessions - Server-side session management
- REST API - Building CRUD APIs with PHP
- Database Setup - PostgreSQL CRUD with PDO
- Server-Side MVC - Full CRUD app with forms and views
- Client-Side MVC - SPA with fetch() and DOM rendering
- Adaptable MVC - Progressive enhancement with content negotiation
Node.js Overview
Node.js runs JavaScript outside the browser using the V8 engine. Unlike PHP's per-request model, Node.js creates persistent HTTP servers using a single-threaded event loop for non-blocking I/O.
Node.js Overview - Introduction to Node.js: event loop, execution model, and comparison with PHP/Apache.
Tutorial
- Tutorial Overview - Getting started with Node.js
- Hello World - Basics, REPL, event loop
- HTTP Server - Building servers with raw http module
- Express Basics - Routing, middleware, static files
- Form Handling - GET, POST, and JSON body parsing
- REST API - Building CRUD APIs with Express
- Database Setup - PostgreSQL CRUD with node-postgres
- Server-Side MVC - Full CRUD app with EJS views
- Client-Side MVC - SPA with fetch() and DOM rendering
- Adaptable MVC - Progressive enhancement with content negotiation
REST Overview
REST (Representational State Transfer) is an architectural style for building web APIs. Resources are identified by URLs, manipulated via HTTP methods (GET, POST, PUT, DELETE), and transferred as representations (typically JSON).
REST API Design Overview - CRUD mapping, status codes, PUT vs PATCH, content negotiation, Richardson Maturity Model, HATEOAS, OpenAPI/Swagger, and more.
Tutorials
- Node.js REST API - Build a CRUD API with Express
- PHP REST API - Build a CRUD API with PHP and Apache
Database Overview
Your REST API needs somewhere to store data. Understanding your storage options — from flat files to relational databases to document stores — is fundamental to building real web applications.
Database Overview - Flat files, SQL/PostgreSQL, NoSQL/MongoDB, ORMs, SQL injection prevention, and choosing the right storage.
Key Topics
- Storage Landscape - Flat files, SQL, NoSQL trade-offs
- SQL Injection & Parameterized Queries - The #1 vulnerability and how to prevent it
- Connecting from Code - Node.js pg and PHP PDO
- Choosing Your Storage - Decision framework for picking the right tool
Tutorials
- Node.js Database Tutorial - PostgreSQL CRUD with node-postgres
- PHP Database Tutorial - PostgreSQL CRUD with PDO
MVC Overview
MVC (Model-View-Controller) is the most common pattern for organizing web applications. It separates data, presentation, and logic — making applications easier to understand, test, and modify.
MVC Overview - Server-side MVC, client-side MVC (SPA), adaptable/hybrid MVC, framework comparison, and building CRUD apps.
Key Topics
- Server-Side MVC - Traditional request/response with server-rendered HTML
- Client-Side MVC / SPA Pattern - JavaScript-driven UI with JSON APIs
- Adaptable / Hybrid MVC - Progressive enhancement, best of both worlds
- REST is the API, Not the Backend - How REST and MVC work together
Tutorials
- Node.js Server-Side MVC - Express + EJS full CRUD app
- PHP Server-Side MVC - Front controller + PDO full CRUD app
- Node.js Client-Side MVC - SPA with Express JSON API
- PHP Client-Side MVC - SPA with PHP JSON API
- Node.js Adaptable MVC - Progressive enhancement with content negotiation
- PHP Adaptable MVC - Progressive enhancement with content negotiation
Analytics Overview
Web analytics is the collection, measurement, and analysis of website data — understanding what users do, finding errors they never report, and measuring what actually works.
Analytics Overview — Data collection methods (server logs, network capture, client-side scripts), first-party vs third-party analytics, error tracking, user behavior monitoring, session replay, observability and OpenTelemetry, and data quality challenges.
Data Visualization
Content coming soon. This section will cover data visualization techniques for analytics dashboards.