This is a post about how I built a timeline 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 repository and the deployment is done via Vercel. You can view the slides in action here.

I have used a special Reveal.js setup with Svelte and Vite for creating the slides. I have written about it here

Creating awesome presentations using Reveal.js with Svelte and Vite

Rajasegar Chandran ・ Aug 22 ・ 3 min read

#revealjs #svelte #vite #productivity

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 of events containing the birth of various tools, technologies, blog posts about them, various standards and much more.

The timeline is located here. You can reverse the timeline, toggle dark mode, filter by tags and years.

The code for the timeline is hosted in Github. It is built with Svelte using Vite.

Timeline component in Svelte

This is the markup of the timeline in a Svelte Component.

<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.

 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.

<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.