Thirty years of front end

From tables to tokens

Every era fixed the last one's problem and left its own furniture behind. Most products still carry all of it.

One line through thirty years: how pages were laid out, how they were scripted, and the idea of programming under both. Move it from moment to moment; each shows a few lines of what was written then. The timeline is TokenKit's own Timeline component, telling the story of how it led to building things like it.

1996 Tables

Layout was a table, spacing was a GIF, and every page was drawn for one window.

HTML

<table width="800"><tr>
  <td><img src="spacer.gif" width="20"></td>
  <td><font face="Arial">Welcome!</font></td>
</tr></table>

2000 Flash
ActionScript 1: handlers on buttons, prototypes underneath. Scripting, not yet objects.
ActionScript 1
```
on (release) {
  gotoAndPlay("intro");
}
```
2003 The Zen Garden
One HTML file, restyled by CSS alone. Content and presentation, separated.
CSS
```
#pageHeader h1 {
  background: url(h1.gif) no-repeat;
  text-indent: -9999px;
}
```

2006 jQuery

One road: the open web scripts the DOM, at scale.

jQuery

$("#menu li").hover(function () {
  $(this).addClass("over");
});

2006 ActionScript 3
The other road: Flash goes all in on classes. Truly object-oriented.
ActionScript 3
```
public class Hero extends MovieClip {
  public function Hero() { stop(); }
}
```
2010 Responsive web design
Ethan Marcotte names it: fluid grids, flexible images, media queries. Breakpoints should follow the design.
2011 Device sizes
The industry turns it into phone, tablet, desktop, and selectors built to win.
SCSS
```
@media (max-width: 768px) {
  .nav > li > a:hover { color: $brand !important; }
}
```
2013 React
The interface becomes a function of state. Declarative, at last.
React
```
render() {
  return <Button onClick={this.save}>Save</Button>;
}
```
2023 Container queries
A component answers the box it is given. What responsive design always wanted.
CSS
```
@container (inline-size > 30rem) {
  :where([data-tk="card-body"]) { columns: 2; }
}
```

2026 Values and states

Values free of any one tool. States declared, not toggled.

A state machine

const save = {
  idle: { SUBMIT: "busy" },
  busy: { DONE: "saved", FAIL: "error" },
};

Scripting1995 to 2006
Object-oriented2006 to 2013
Declarative2013 to 2023
State machines2023 to 2027

Tables, 1996

The film

The same Timeline, recorded frame by frame: the line travels, each moment unfolds from its dot, and the camera follows. 80 seconds, with music. Everything it shows is in the timeline above.

Credits and sources

Dave Shea, CSS Zen Garden, 2003.
Ethan Marcotte, Responsive Web Design, A List Apart, May 2010. In 2012 Marcotte argued that breakpoints should follow the design, not devices (.net magazine, quoted in Jeremy Keith, Fanfare for the common breakpoint); in 2017 he asked why a component cannot be styled by the space it has rather than the viewport (“On container queries”, linked from adactio.com). Container queries shipped in every engine in 2023.
The code is illustrative: a few lines in the style of each era, not taken from any one site.