REST API2026.03.08

DemoHTTPMessage

HTTP Request

HTTP request message

MethodThe action to perform on the resource.HTTP defines a fixed vocabulary of verbs. GET retrieves data without side effects; POST creates a new resource; PUT replaces a resource entirely; PATCH applies a partial update; DELETE removes a resource. Safe methods (GET, HEAD, OPTIONS) must not change server state.

example
GET

loading…

DemoRequestCycle

Client

idle

Server

listening

REST request–response cycle

Client readyThe client has a valid connection (TCP + TLS already established). The server is listening on port 443, ready to accept HTTP/1.1 or HTTP/2 requests.

loading…

DemoStatusCodes

HTTP status codes

200OKRequest succeeded.

detailThe most common success code. GET returns the resource; POST may return the created item; PUT/PATCH return the updated item. The response body contains the result.

when to use
GET, PUT, PATCH responses

loading…

AI Agent2026.03.07

GitContributorsStats

1chooo188 commits

90.8k ++·48.0k --

claude28 commits

25.1k ++·11.5k --

216total commits

+115.9kadditions

-59.5kdeletions

87%

13%

git contributors

1chooo

claude

loading…

SccReport

TypeScript89%

MDX8%

JSON1%

JavaScript0%

CSS2%

Markdown0%

Plain Text0%

SQL1%

Language
TypeScript	237	32,068	2,913	801	28,354	4,579
MDX	31	3,367	890	0	2,477	0
CSS	2	643	79	26	538	0
SQL	1	414	92	98	224	0
JSON	4	174	0	0	174	0
Markdown	2	149	32	0	117	0
JavaScript	3	132	16	11	105	10
Plain Text	1	1	0	0	1	0
Total	281	36,948	4,022	936	31,990	4,589

$1,027,685estimated cost (COCOMO)

13.90 monthsestimated schedule

6.57 peopleestimated team size

scc · sloc cloc and code1.38 MB

loading…

DOM2026.03.06

DemoDOMTree

▾#document

▾<html>lang="en"

▾<head>

<title>“My Page”

▾<body>

▾<header>

<h1>“Hello World”

▾<main>

<p>class="intro"“Introduction.”

▾<ul>

<li>“Item one”

<li>“Item two”

dom tree explorer

selected node<p>class="intro"

// node properties
nodeType: 1 // Element
nodeName: "P"
children.length: 0
childNodes.length: 1
textContent: "Introduction."

1=Element3=Text8=Comment9=Document

loading…

DemoEventBubbling

outer div

middle div

event propagation

event logclick any element above

bubblingEvents bubble up from target → ancestors

// bubbling listener
element.addEventListener(
'click', handler,
{ capture: false }
)

loading…

DemoDOMQuery

<header>.site-header

<h1>

<nav>

<a>[href]

<a>.active[href]

<main>

<article>.post

<h2>

<p>.intro

<p>

<article>.post.featured

<h2>

<p>.intro

<p>

4 matches

selector

// select all matches
document.querySelectorAll('p')

// select first match only
document.querySelector('p')

// → 4 elements matched

matched (4)

<p>.intro<p><p>.intro<p>

loading…

/llms.txt2026.03.06

DemoFileViewer

# Lin Hugo — 1chooo.com

> Personal notes on web engineering, design, and technology.

## Notes

- [CSS Layout](/notes/css-layout): A complete guide to CSS layout — flexbox, grid, positioning.

- [Server and Client Components](/notes/server-and-client-components): RSC in Next.js App Router.

- [TCP](/notes/tcp): How the Transmission Control Protocol works.

- [Motion](/notes/motion): Framer Motion animations and interactions.

## Optional

- [GitHub](https://github.com/1chooo): Open source projects and contributions.

- [Contact](/contact): Reach me by email.

/llms.txt

index — links & descriptionsOne line per page. Lets the LLM decide which pages to fetch next. Fits in any context window.~1–5 KB typical

# title
> description
## section
- [page](url): desc
## Optional

loading…

DemoNextRoutes

app/

(llms)/

llms.txt/

route.ts

llms-full.txt/

llm/[[...slug]]/

app/(llms)/llms.txt/route.tsReads MDX frontmatter from every article. Skips drafts, sorts by date, and builds a one-line-per-post index.parseMetadata uses a Function constructor to evaluate the JS object literal directly from the MDX file — no JSON serialisation needed.

route handlers

export const revalidate = false

function parseMetadata(content: string) {

const match = content.match(

/export\s+const\s+metadata\s*=\s*\{([\s\S]*?)\}/

)

return new Function(`return ({${match[1]}})`)()

}

export async function GET() {

const [thoughts, notes, episodes] =

await Promise.all([

getArticles('thoughts'),

getArticles('notes'),

getArticles('episodes'),

])

const lines = [

'# Lin Hugo',

'## Thoughts', '',

...thoughts.map(({ metadata, slug }) =>

`- [${metadata.title}](...): ${metadata.description}`

]

return new NextResponse(lines.join('\n'), {

headers: {

'Content-Type': 'text/plain; charset=utf-8',

'Cache-Control': 's-maxage=3600, stale-while-revalidate=86400',

}

})

}

loading…

TCP2026.03.06

DemoHandshake

Client

CLOSED

Server

LISTEN

three-way handshake

Both sides readyno segment sentClient and server are both in LISTEN / CLOSED state, waiting to initiate or accept a connection.

loading…

DemoSegment

TCP segment headerclick a field to inspect

Sequence NumberByte offset of the first data byte in this segment.TCP is a byte-stream protocol. The sequence number tracks which byte of the stream this segment starts at. On a SYN segment it is the Initial Sequence Number (ISN), chosen randomly to avoid clashes with old connections.

field {
name: Sequence Number;
size: 32 bits;
example: 3_141_592_653;
}

loading…

DemoStateMachine

transitions from CLOSED

active open / send SYN→

TCP state machineclick a state to explore

CLOSEDNo connection exists.The initial and final state. No socket resources are in use. A passive open (server) transitions to LISTEN; an active open (client) sends SYN and moves to SYN_SENT.

state {
current: CLOSED;
role: client;
next: [SYN_SENT];
}

loading…

StackLayers

↕ each layer hands off to the one below

TCP/IP stackclick a layer to inspect

L4 — Transport LayerEnd-to-end delivery between processes.TCP provides reliable, ordered, flow-controlled byte streams. UDP offers low-overhead datagrams. QUIC (HTTP/3) combines TLS + transport into a single layer over UDP.

layer {
name: Transport;
protocols: [TCP, UDP, QUIC];
}

loading…

CSS Layout2026.03.05

DemoBoxModel

margin

border

padding

content

content120 × 60px

+ padding × 2 (16px)152 × 92px

+ border × 2 (2px)156 × 96px

+ margin × 2 (16px)188 × 128px

margin

border

padding

content

loading…

DemoFlexbox

flexbox playground

flex-direction

justify-content

align-items

flex-wrap

.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: nowrap;
}

loading…

DemoCSSGrid

css grid playground

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, minmax(40px, auto));
gap: 8px;
}

loading…

DemoPosition

sibling before

← original space

sibling after

position: static

positioning schemes

position: staticDefault flow — top/left/right/bottom have no effect.Every element starts as static. It participates in normal document flow and ignores offset properties.

.element {
position: static;
}

loading…

Landing Page2026.03.02

DemoAnatomy

sectionHero

purpose

The most important section — everything above the fold. Your headline must communicate the value proposition in under five seconds. Sub-headline adds context; CTA captures intent.

conversion note

Hero copy is responsible for 80% of whether a visitor keeps reading.

page anatomy

loading…

DemoFold

Navbar

Hero

Social Proof

Features

Testimonials

Footer CTA

fold

viewport

fold position55%

small screentall screen

above fold

Navbar
Hero
Social Proof
Features

below fold

Features
Testimonials
Footer CTA

On a typical laptop, one or two sections breathe below the fold. Social proof is often just out of view.

above the fold4 of 6 sections visible immediately

loading…

DemoMagicUI

Design Engineers

animated gradient text

Animated gradient flowing through text. Achieved with background-clip: text and a shifting background-position keyframe. No SVG, no canvas.

magic ui effects

loading…

Image Compression2026.03.01

DemoPixelBlocks

Hover a pixel to inspect it. Click to highlight its block.

pixel boundary

8×8 block boundary

8×8 block grid16×16 px · 4 blocks total

loading…

DemoQuality

original (png)0 B

jpeg · q = 75

0 B

quality75

heavy artefactsnear-lossless

Drag the slider low — notice the blocky artefacts on sharp edges and the checkerboard. The smooth gradient survives much better. This asymmetry is the heart of JPEG.

live jpeg qualityadjust quality

loading…

DemoColorChannels

original rgb

RGB

Original — each pixel stores red, green, and blue independently.

YCbCr channels

loading…

OpenGraph Image2026.03.01

OGSizeDemo

og anatomy — 1200 × 630

hover over a zone to learn about it

loading…

OGEditor

og image builder1200 × 630

Theme

Avatar

Site Name

Title15 / 60

Description65 / 100

og image builder · downloads as 1200 × 630 png

loading…

Photography2026.02.28

PhotoCropper

Drop an image here or click to upload

loading…

PhotoFilter

Drop an image here or click to upload

loading…

CompositionOverlay

Click to upload an image

Rule of Thirds

loading…

CSCI 5762026.02.27

RGBSliders

Red99

Green102

Blue241

RGB (99, 102, 241)

loading…

VisibleSpectrumStrip

loading…

VisibleSpectrumSensitivity

loading…

ConeSensitivityChart

loading…

Traceroute2026.01.24

TraceroutePanel

quick:

enter a domain above to trace the network path and inspect DNS records

Traceroute

Every hop to the destination

DNS Lookup

A, MX, TXT, NS, CNAME records

Route Diagram

Latency-coloured path

Stats

Hops, latency, DNS timing

loading…

LatencyColorGuide

color	latency
Green	< 30 ms
Yellow	30 - 70 ms
Orange	70 - 120 ms
Red	> 120 ms

loading…

The Seen2026.01.02

PaintingGallery

Vincent van Gogh

1853-1890

The Starry Night

1889

Oil on canvas

The Museum of Modern Art, New York

Acquired through the Lillie P. Bliss Bequest, 1941

loading…

GalleryPlacard

523

Portraits in Wartime

In the late 1930s and '40s, Europe was torn apart by war. Though some artists secured passage to leave the continent, others lived through the upheaval and destruction. This gallery brings together examples of portraits by those who stayed behind, including Joan Miró and Pablo Picasso. The works evidence how these artists transformed the traditional genre of portraiture as they reflected on the anxieties of wartime.

Paintings by Miró and the other artists in this gallery offered a vision of the future during a time of turmoil. In 1941 art historian James Johnson Sweeney wrote that Miró's work “belongs to the youth of a period that is opening, rather than the old age of a closing one.”

Organized by Ann Temkin with Rachel Remick

loading…

Motion2025.09.21

DynamicIsland

loading…

Notification

Notifications

✌️

MyUSC1 ·

just now

USC

✌️

MyUSC2 ·

4m ago

USC

✌️

MyUSC3 ·

6m ago

USC

loading…

Paginations

Girl with a Pearl Earring

Johannes Vermeer, 1665

The Starry Night

Vincent van Gogh, 1889

The Great Wave

Katsushika Hokusai, 1831

The Persistence of Memory

Salvador Dalí, 1931

Girl with a Pearl Earring

loading…

Payment

loading…

DemoMotionComponent

<div>

div

Snaps instantly

<motion.div>

motion

Smooth transition

motion.* components

loading…

DemoAnimateInitial

initial={{ opacity: 0, y: 32 }}
animate={{ opacity: 1, y: 0 }}

Hello, I animated in!

animate & initial

loading…

DemoTransition

tween

spring

stiff spring

transition types

loading…

DemoLayout

without layout

Card A

Card B

Card C

with layout

Card A

Card B

Card C

Click a card to expand it

layout prop

loading…

DemoAnimatePresence

mount & unmount with exit animation

I animate in and out

tab swap with mode="wait"

Home content

AnimatePresence & exit

loading…

DemoGesture

hover me

whileHover

tap me

whileTap

both

whileHover & whileTap

loading…

Power Law2025.08.25

CompoundInterestCalculator

Initial investment

Monthly contribution

Years to grow

Annual return rate

Enter your numbers to see how they grow.

compound interest calculator

loading…

DailyGrowthViz

daily growth rate: 1%

+1% compounded

37.78×

(1 + 1%)^365

Simple (linear)

4.65×

1 + 1% × 365

compounding vs linear growth over 365 days

loading…

Software Compound Interest2025.08.01

GitHubMap

loading…

GitHubStarHistory

server component — rendered in article

Server and Client Components2025.05.09

DemoRenderingEnv

Node.js environment

rendering environment

async / awaitserver

Server Components can be async functions.You can await database queries, fetch calls, or any promise directly in the component body — no useEffect or SWR needed.

legend

✓server only

✓client only

✓both environments

✗not available

loading…

DemoComponentTree

layout.tsx

app/layout.tsx

└─

Header

components/Header.tsx

└─

Logo

components/Logo.tsx

└─

NavMenu"use client"

components/NavMenu.tsx

└─

page.tsx

app/page.tsx

└─

ProductList

components/ProductList.tsx

└─

ProductCard

components/ProductCard.tsx

└─

AddToCart"use client"

components/AddToCart.tsx

└─

Footer

components/Footer.tsx

component tree

leaf-level clientPush 'use client' as far down as possible.Default in Next.js App Router. Server Components form the skeleton and only the leaves that need interactivity become Client Components.

server components7

client components2

legend

Server Component

Client Component

loading…

DemoComposition

ParentPage

Server Component

↓

ArticleList

Server Component

↓

ArticleCard

Server Component

composition patterns

SC → SC✓ valid

A Server Component imports and renders another Server Component.Both run on the server. Data, secrets, and async logic flow freely. This is the default and preferred pattern for server-heavy UI.

// ParentPage.tsx

import ArticleList // SC → imports SC ✓

// both run on the server

async function Page()

data await db.getArticles()

return <ArticleList data={data} />

loading…

DemoBlogArchitecture

└─

blog architecture

server

client

posts/page.tsxserver

Posts listing page — Server Component.Fetches all posts directly from the database at request time. No loading state, no client-side fetch. The rendered HTML arrives pre-filled.

// app/posts/page.tsx export default async function PostsPage() { const posts = await db.posts.findMany({ orderBy: { date: "desc" }, }) return <PostList posts={posts} /> }

loading…

SE6029—OOAD2024.07.04

DemoOOPillars

Pet

−id: int

#name: string

#weight: float

+eat(): void

+virtualspeak(): void

◁

Dog

Cat

Pet* p→ Dog | Cat

class diagramPet hierarchy

Classes & ObjectsA class is a type; an object is an instance of that type.A class defines the structure (fields) and behavior (methods) shared by all instances. Each object is its own block of memory, but all objects of the same class share the same code.

loading…

DemoPolymorphism

Pet* p

→

Dog object

Dog

vtable:

[0] → Dog::speak

[1] → Dog::eat

Cat

vtable:

[0] → Cat::speak

[1] → Cat::eat

Rat

vtable:

[0] → Rat::speak

[1] → Rat::eat

// call site
p->speak()
// compiled to
(p->vptr[0])()
// resolves to
Dog::speak → "Woof!"

virtual dispatch

Pet* p points to…

runtime dispatchThe call site p->speak() never changes.At runtime the CPU follows vptr → vtable → Dog::speak and calls the right implementation.

object slicing warningPassing a subclass by value into a base-class parameter slices off the derived part — polymorphism only works through pointers or references.

loading…

DemoUMLRelationships

X (derived)

Y (base)

is a · ——▷

UML relationshipinheritance

// is a
class X : public Y {};

——▷X is a specialisation of YUse only when the Is-A relationship is truly meaningful. The subclass inherits all public/protected members and can override virtual methods.

loading…

DemoStrategyPattern

Duck

flyBehavior:

FlyWithWings

quackBehavior:

Quack

duck.performFly() → I'm flying!
duck.performQuack() → Quack!

strategy pattern — duck simulator

FlyBehavior

Uses wings — default for most ducks.

QuackBehavior

Real duck quack.

Design PrincipleFavor composition over inheritance.Duck HAS-A FlyBehavior — the algorithm can be swapped at runtime without touching the Duck class.

loading…

DemoCodeSmells

Spaghetti Codeavoid

No structure. Everything depends on everything else.Tangled control flow and object references. Global state everywhere. Adding a feature means chasing connections across the entire codebase.

Logic

Service

Data

Lasagna Codetolerable

Layered and readable, but monolithic layers.Clean conceptual separation (UI / Logic / Data), but each layer is a monolith. Understanding is easy; changing a layer in isolation is hard.

Ravioli Codeideal

Small, self-contained, loosely coupled components.Each component knows only what it needs to. Replacing or modifying one raviolo does not ripple through the system — the OO ideal.

loading…

Sorting Algorithms2024.05.26

DemoSortVisualizer

Compare a[0]=7 and a[1]=3

step 1 / 44

// time complexity
best → O(n)
avg → O(n²)
worst→ O(n²)
space→ O(1)

Bubble Sortstable sortCompare adjacent pairs and swap if out of order. The largest element bubbles to the end each pass.

default

comparing

swapping

sorted

loading…

DemoMergeSort

divide & conquer — bottom-up

// log₂(8) = 3 levels
level → 0
groups → 8
size → 1
work → O(n) this level

8 singletons — trivially sortedA single element is always sorted. This is the base case; recursion stops here at depth ⌈log₂ 8⌉ = 3.

loading…

DSA2024.03.06

DemoBigO

1.0

n=1

2.0

n=2

4.0

n=4

8.0

n=8

n=16

operations as n grows

O(n) — LinearArray traversal, linear searchGrows proportionally with input size

loading…

DemoArray

length: 4

array explorer

push() — O(1)*Append to end. No existing elements shift. Amortized O(1) — occasional backing-array resize is amortized across all inserts.

loading…

DemoStackQueue

top →

LIFO — last in, first out

push(x) → O(1)
pop() → O(1)
peek() → O(1)

stackLIFO — last item added is first outUses: undo history, call stack, DFS

loading…

DemoLinkedList

head↓

→

∅

head: Atail: C → null

singly linked list

insertHead() — O(1)Create a node and point it to the current head. Set head = new node. No traversal.

loading…

DemoBST

binary search tree

// avg case
insert(n) → O(log n)
// worst (sorted input)
insert(n) → O(n)

BST invariantleft < node.val < right at every node7 nodes — height 2

loading…

Snake Game2022.08.23

DemoGrid

head (5, 3)bodyfood (9, 4)

hover over any cell to see its (x, y) coordinate · origin (0, 0) is top-left

loading…

DemoMovement

●

🍎

press a direction button to step …

current dir: → RIGHT x+1 · score: 0

loading…

SnakeGame

snakescore: 0

Snake

use arrow keys or WASD

↑↓←→ or WASD · eat red food to grow

loading…

shiki-warmup

DemoShikiTimeline

0ms100ms200ms300ms400ms

Server Start

idle

—

Request 1

/notes/dom

340ms

30ms

385ms

Request 2

/notes/css-layout

130ms

142ms

Request 3

/thoughts/ai-agent

7ms

measured from runtime logs — dev mode, single processWASM InitGrammar LoadHighlight

Without instrumentationFirst request latency: 385msWASM & grammars load on first HTTP request

What happenscodeToHtml() lazily initialises Shiki — WASM compile + grammar parse blocks every first-visit request.New languages add ~130ms on subsequent pages.

loading…