Building a timeline of CSS history and standards
Tags: css, productivity, tooling, svelte
Published: 2022-12-05 06:16:24

This is a post about how I built a [timeline](https://css-timeline.vercel.app/) of CSS history and evolution using Svelte.

## The Idea
The idea to build such timeline came to me while I was preparing for a talk for an internal session for front-end developers at work. The talk was titled as "CSS through the ages". It is a walk through of the evolution of CSS from the beginning. It is an attempt to define the history of CSS through various ages of tooling.

My intention is not to provide an highly accurate estimation but instead a broad history of events and anecdotes. Because compressing 28 years of history in 30 minutes is impossible to accomplish.

> The historian always oversimplifies and hastily selects a manageable minority of facts. 
> -- Will Durant, The Lessons of History

## The Talk
The talk as about looking at the evolution of CSS through the lens of problems and solutions. In other words, we will be taking a brief look at various technologies surrounding CSS, the problems they are supposed to solve, the problems they are not supposed to create and how the subsequent tooling solved them and still evolving.

## The Slides
The slides are hosted in a [Github](https://github.com/rajasegar/css-through-the-ages) repository and the deployment is done via Vercel. You can view the slides in action [here](https://css-through-the-ages.vercel.app/).

I have used a special [Reveal.js](https://revealjs.com/) setup with Svelte and Vite for creating the slides. I have written about it here

{% embed https://dev.to/rajasegar/creating-awesome-presentations-using-revealjs-with-svelte-and-vite-211m %}

## The Timeline
I had so much fun preparing for this talk, browsing through the history of CSS, tooling and technologies from the start. So I decided to build a [timeline](https://css-timeline.vercel.app/) of events containing the birth of various tools, technologies, blog posts about them, various standards and much more.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hod4vf04ym89shllscuq.png)

The timeline is located [here](https://css-timeline.vercel.app/). You can reverse the timeline, toggle dark mode, filter by tags and years. 

The code for the timeline is hosted in [Github](https://github.com/the-web-history/css-timeline). It is built with [Svelte](https://svelte.dev/) using [Vite](https://vitejs.dev/). 

### Timeline component in Svelte

This is the markup of the timeline in a Svelte Component.
```html
<ul class="timeline">
    {#each timelineData as repo, index}
	<li>
	  <div class="{index % 2 == 0 ? 'direction-r' : 'direction-l'}">
	<div class="flag-wrapper">
	  <span class="flag"><a target="_blank" href="{repo.url}">{repo.name}</a></span>
	  <span class="time-wrapper"><span class="time">{ repo.created_at.getFullYear()}, {months[repo.created_at.getMonth()]}</span></span>
	</div>
	<div class="desc">
	  <p>{repo.description}</p>
	  {#if repo.links && repo.links.length > 0}
	    {#each repo.links as link}
	      <a href={link.url}>{link.name}</a>,&nbsp; 
	    {/each}
	  {/if}
	</div>
	</div>
	</li>
    {/each}
</ul>

```

And this is how the data is filtered and sorted inside the `Timeline` component.

```js
 export let data = [];
 let filter;
 let year;
 let reversed = false;
 let darkmode = false;

 $: sortedData = reversed 
	? data.sort((a,b) => b.created_at - a.created_at)
	: data.sort((a,b) => a.created_at - b.created_at);

 $: filteredData = sortedData.filter((item) => {
	if(filter === 'all') {
	  return true;
	} else {
	  return filter  ? item.tags.includes(filter) : true; 
	}
 })

 $: timelineData = filteredData.filter((item) => {
	if(year === 'all') {
	  return true;
	} else {
	  return year  ? item.created_at.getFullYear() === year : true; 
	}
 })
```

And this is how you can use the `Timeline` component inside another component, in our case it is the `App` component, the application component in a Svelte project, the main component which is mounted at the root.

```html
<script>
 import Timeline from './lib/Timeline.svelte'
 import timelineData from './data/index.js';
</script>

<main>
  <Timeline data={timelineData} />
</main>

```

You can contribute to the timeline by adding a lot more information about various events. Please take a look at the project `README` for more instructions.

Finally, please let me know in the comments about the timeline, whether it is really useful to look at the history and evolution of CSS, how it can be improved, what can be a great value addition to the timeline and so on.