Tawny

Live design demo

Dev

A minimal mono developer blog with MDX essays and interactive CS demos — open the live showcase. Navigate inside the frame — you are still on Tawny.

Open in new tabBack to Designs
designs/dev

TCP

Transmission Control Protocol (TCP) is the reliable, connection-oriented transport layer of the internet. Before any data flows, client and server perform a three-way handshake to establish a connection. When done, they exchange a four-way teardown to close it cleanly.

The Three-Way Handshake

  1. SYN — Client sends a synchronize packet with a random sequence number.
  2. SYN-ACK — Server acknowledges and sends its own sequence number.
  3. ACK — Client acknowledges the server's sequence number. Connection established.

Only after this exchange can either side send application data with guaranteed delivery and ordering.

client
server
SYN→

Why Reliability Costs Latency

TCP guarantees delivery by requiring acknowledgments for every segment. If an ACK doesn't arrive within a timeout, the sender retransmits. This reliability is essential for HTTP, email, and file transfer — but it adds round-trip latency compared to UDP, which sends without confirmation.

Key Properties

PropertyDescription
Connection-orientedRequires handshake before data
ReliableRetransmits lost packets
OrderedDelivers bytes in send order
Flow controlAdjusts rate to receiver capacity

Understanding TCP helps explain why the first request to a server feels slower (connection setup) and why keep-alive connections improve web performance.

About

Dev is a minimal mono developer blog focused on readable essays and interactive demos. It uses MDX for content, Shiki for syntax highlighting, and a tight typographic system inspired by classic engineer personal sites.

Navigate the live demo above to read sample posts and try the demos. Scaffold your own copy with the create command below, then swap in your name, social links, and writing.

Get the template

Scaffold a local copy with your preferred package manager.

Terminal
pnpm create tawny@latest dev my-app

Template source

Browse every file in templates/dev.

templates/dev

README.md
# Dev Blog

A minimal mono developer blog template — MDX essays, projects, and interactive demos.

Design by [Hugo Lin](https://1chooo.com).

## Quick start

### Option A — create-next-app (recommended)

```bash
npx create-next-app@latest my-blog \
  --example "https://github.com/1chooo/tawny" \
  --example-path "templates/dev"
```

### Option B — create-tawny CLI (interactive prompts)

```bash
npx create-tawny@latest dev my-blog
```

Then:

```bash
cd my-blog
pnpm install   # or npm / yarn / bun
pnpm dev
```

Open [http://localhost:3000](http://localhost:3000).

## Customize these files

| File | What to change |
|------|----------------|
| `app/layout.tsx` | Site title and metadata |
| `app/page.tsx` | About / home copy |
| `components/site-header.tsx` | Brand name in the header |
| `components/site-footer.tsx` | Social links and location |
| `app/blog/_articles/` | Your essays (`.mdx` files) |
| `app/projects/page.mdx` | Projects page |

### Placeholders

Search for `{{AUTHOR_NAME}}`, `{{AUTHOR_EMAIL}}`, `{{GITHUB_USERNAME}}`, and `{{CITY_NAME}}` across the project and replace them.

## Stack

- Next.js 16 App Router & React Server Components
- MDX & Shiki for content
- Tailwind CSS v4
- Minimal mono typography

## License

MIT