Code → Language → Experiences
web.tapplab.dev
A higher standard
Old vs New
Web Standards
See the difference modern web standards make. Faster, lighter, more immersive experiences that actually convert.
Four comparisons between an old-style website and a modern one: design, loading speed, mobile layout and accessibility. Use the slider to move the divider.
Standards
From the old web to the new – line by line.
Ten standards that separate a homepage from a website. Every page in the lab is built against the right-hand column.
| Standard | Old web | New web |
|---|---|---|
| 01Layout | −Tables, frames and invisible spacer GIFs | +CSS Grid, Flexbox and container queries |
| 02Screens | −One size: 800 × 600 on a CRT monitor | +Every size, phone to 4K – fluid and mobile-first |
| 03Type | −Times, Arial, Comic Sans – whatever was installed | +Self-hosted variable fonts, fluid type sizes |
| 04Images | −GIF and JPEG, “loading, please wait…” | +AVIF and WebP, the right size per screen, lazy loading |
| 05Motion | −<blink>, <marquee> and the Flash plug-in | +CSS and scroll-driven animations, View Transitions – and a calm version for “reduce motion” |
| 06Security | −http:// – everything in plain text | +HTTPS everywhere, TLS 1.3, security headers |
| 07Access | −WCAG 1.0 had only just appeared (1999) – and was rarely applied | +Semantic HTML, WCAG 2.2, usable by keyboard and screen reader |
| 08Speed | −56k modem: about 20 seconds for 100 KB | +Global edge network; LCP under 2.5 s is “good” – the lab aims for under 1 s |
| 09Privacy | −Visitor counters, guestbooks, third-party scripts | +Privacy by design: no cookies, no tracking – like on this page |
| 10Workflow | −Text editor, FTP upload, “under construction” | +Git, worldwide deployment in seconds, AI as pair programmer (Claude, ChatGPT) |
Measured, not promised
This page, measured live in your browser.
No lab screenshots: these numbers come from your browser’s Performance API right now. Reload and they change.
- Transferred
- –KB
- Requests
- –
- Fully loaded
- –s
- Largest paint (LCP)
- –s
- Cookies
- –
- Third-party requests
- –
HTML, CSS, JS, two fonts, one icon
Until the load event, on your connection
Nothing stored, nothing to consent to
No CDNs, no fonts from elsewhere, no trackers
Process
Design. Develop. Optimize. Launch.
How a website is made in the lab – with AI as pair programmer and every step checked.
- 01
Design
Idea, references and exactly one signature effect per site. Colours, type and layout are decided before the first line of code.
- 02
Develop
Hand-built HTML, CSS and plain JavaScript, written together with Claude and ChatGPT. No frameworks, no trackers.
- 03
Optimize
Budgets instead of hope: under 300 KB on first load, a calm version for “reduce motion”, checked on phone and PC.
- 04
Launch
Live worldwide on Cloudflare in seconds, HTTPS included – every release with a visible version number.
Work
Websites from the lab.
Each one its own world: its own colours, its own type and one signature effect.
Alternative Thomas
Pro websites for an alternative me: chef, jeweller, designer, carpenter and more.
Visit websiteThe next website is in the works
New sites land here first – web.tapplab.dev grows with every release.
status: dev
Contact
Let’s build what’s next.
An idea, a sketch or an old homepage that deserves better – write to me.