Timelines of the web

Progressive enhancement. Marking up (and styling) an interactive timeline that looks good in a modern browser and still works in the first ever web browser.
<li class="h-event y1968">
<a href="https://en.wikipedia.org/wiki/NLS_%28computer_system%29" class="u-url">
<time class="dt-start" datetime="1968-12-09">1968</time>
<abbr class="p-name" title="oN-Line System">NLS</abbr>
</a>
</li>
.y1968 {
left: calc((1968 - 1959) * (100%/30) - 5em);
}
.y2014 {
right: calc((2019 - 2014) * (100%/30) - 5em);
}
Progressive enhancement. Marking up (and styling) an interactive timeline that looks good in a modern browser and still works in the first ever web browser.
Hello WorldWideWeb.

--

--

--

A web developer and author living and working in Brighton, England. Everything I post on Medium is a copy — the originals are on my own website, adactio.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Idempotence is definitely required in your API. Not so much in HTTP.

Elixir Wizards Podcast S8E1

WHAT SHOULD A PERSON/STUDENT KNOW BEFORE LEARNING CODING?

Two Hip Friends — JHipster and Neo4j

Strimzi on Oracle Kubernetes Engine (OKE)+ Kafka Connect on Oracle Streaming Service(OSS) — A…

XDAG new version of wallet (0.4.0) officially released

Troubleshooting Firebase + Google Tag Manager events not showing on Google Analytics

‘What’s in a name?’ returns

Surprised Pikachu

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jeremy Keith

Jeremy Keith

A web developer and author living and working in Brighton, England. Everything I post on Medium is a copy — the originals are on my own website, adactio.com

More from Medium

More UX London speaker updates

5 steps to creating a strong design-led startup

An illustration of the author wearing a yellow shirt holding up 5 fingers indicating the number of tips for founders in the article.

Designing the mind