davidbgk
/
larlet-fr-david-cache

title: Timeline
url: https://colly.com/journal/timeline
hash_url: 9e00f323536ca62675b40000f757c06b

<p class="as-subtitle">Redesigning in the open is daunting but encourages progress. Although I'm far from finished, <a href="https://colly.com/">the new timeline</a> is attracting attention, so I've written a little about it.</p>

  <figure class="as-cover-default ">
    <span class="imageset"><img alt="" src="https://colly.com/media/pages/journal/timeline/2373861119-1563545535/cover2-20x14-blur10-q90.jpg" srcset="https://colly.com/media/pages/journal/timeline/2373861119-1563545535/cover2-600x413-q90.jpg 600w, https://colly.com/media/pages/journal/timeline/2373861119-1563545535/cover2-900x619-q90.jpg 900w, https://colly.com/media/pages/journal/timeline/2373861119-1563545535/cover2-1200x825-q90.jpg 1200w"/></span>      </figure>

<p>I've always liked to document experiences, and I have a thing for collections and completeness. I decided early that this redesign needed some kind of friendly 'museum of me' as a way of introducing myself; less about my work and more about my life. The culture we surround ourselves with, the art that speaks to us, and the songs that soundtrack our lives — these things shape our identities. They speak volumes about who we are, and why the things we put into this world look or feel a certain way. There's so much more to each of us than our professional achievements.</p>
<h2>Deeper connections</h2>
<p>I rarely take things at face value and enjoy learning more about bands and visual artists through the experiences they talk about and the culture that influences them. That openness invites me to understand what makes them tick as people, draw personal conclusions about their work, and connect on a much deeper level. There is so much to appreciate in the backstory behind the exhibitions, in the space between the songs. Childhood, teenage, locations, successes and failures, realisations — we each have a story to share, and it's interesting to consider designing the delivery of that story.</p>
<p>I started sketching initial ideas back in February, and straight away, the logic of a timeline began to make sense. That month, I attended an arena lecture by <a href="https://en.wikipedia.org/wiki/Brian_Cox_(physicist)">Prof. Brian Cox</a>, and he was using the idea of <a href="https://en.wikipedia.org/wiki/World_line">world lines</a> to trace the curved path of an object. In his example, <em>he</em> was the object moving through time and space, having all sorts of unique experiences. I got very excited about this approach but ultimately decided to compress four-dimensional spacetime into a much less interstellar one-dimensional linearity. At least, I'll <em>say</em> that's what I did because it sounds fancy.</p>
<p>I've woven art and books and poetry into the narrative, but primarily I lean on music. The selected songs and albums work well for two reasons: (1) they are recognisable representations of specific periods, and (2) they offer meaningful lyrics that carry the emotion of my story better than I can. Take, for example, <a href="https://en.wikipedia.org/wiki/She_Bangs_the_Drums">She Bangs The Drums</a>: when that song hit my consciousness at the age of sixteen, I felt its lyrics so intensely. The song was about <em>me</em>, the future was <em>mine</em>; the band were leaders of the revolution to which  <em>I</em> belonged. My timeline gives music equal billing because music often is a life event, as relevant as the book I wrote, or how I met my wife.</p>
<figure><span class="imageset"><img alt="Another section of the timeline." src="https://colly.com/media/pages/journal/timeline/2954762063-1563545535/cover3-20x9-blur10-q90.jpg" srcset="https://colly.com/media/pages/journal/timeline/2954762063-1563545535/cover3-600x272-q90.jpg 600w, https://colly.com/media/pages/journal/timeline/2954762063-1563545535/cover3-900x408-q90.jpg 900w, https://colly.com/media/pages/journal/timeline/2954762063-1563545535/cover3-1200x544-q90.jpg 1200w"/></span></figure>
<h2>The editing process</h2>
<p>We've learned to edit our online narratives, and my timeline is yet another highlights package; the TV version with the boring bits taken out. Still, choosing highlights is hard. The more excited I got, the more I wanted to bare it all, but there's no need to mark the loss of my virginity or be explicit about family trauma. You're invited to read between the lines, guess, assume.</p>
<p>There's a desire to list every influence and increase the likelihood that you and I will connect over a book we <em>both</em> love, but space is limited, so I choose items that imply a lot. When I reference New Order, you imagine I also like Joy Division, Depeche Mode, maybe stretch to The Cure. When I suggest a particular period of abstract painting, names might spring to mind, and yes, I probably like most of those. I suppose it's about signalling my taste and offering a bit more texture than your standard bio.</p>
<p>I've shaped this timeline over five months. It might look simple, but it most definitely was not. I liken it to chipping away at a block of marble, or the slow process of evolving a painting, or constructing a poem; endless edits, questions, doubling back, doubts. It was so good to have something meaty to get stuck into, but sometimes it was awful, and many times I considered throwing it away. Overall it was challenging, fun, and worth the effort.</p>
<p>I aim to please only myself with my personal website and always follow the best idea that represents me. I've seen very few <em>personal</em> timelines and none quite like mine, although Kirk Israel just reached out about his super-interesting and very detailed <a href="https://kirk.is/timelines/">timeline</a> (with <a href="https://kirkdev.blogspot.com/2019/01/timelines-trying-to-capture-four-and.html">accompanying notes</a>). If I've missed any, or you create your own, do let me know.</p>
<figure><span class="imageset"><img alt="Another section of the timeline." src="https://colly.com/media/pages/journal/timeline/37669727-1563545535/cover4-20x8-blur10-q90.jpg" srcset="https://colly.com/media/pages/journal/timeline/37669727-1563545535/cover4-600x245-q90.jpg 600w, https://colly.com/media/pages/journal/timeline/37669727-1563545535/cover4-900x368-q90.jpg 900w, https://colly.com/media/pages/journal/timeline/37669727-1563545535/cover4-1200x490-q90.jpg 1200w"/></span></figure>
<h2>Some build notes</h2>
<p>The likes of <a href="https://twitter.com/kottke/status/1150779876892401665">Kottke</a>, <a href="https://twitter.com/zeldman/status/1147122927772602369">Zeldman</a> and others have already linked to the timeline, and so many have encountered it before I finish optimising. Reducing weight has not been easy as it requires over thirty inline images, but it's now around 600KB — still too much, but I consider that acceptable for a modern personal site. If you inspect an image, you'll find it tiny in size and weight; useless outside of the timeline. I've chosen not to include links or image popups (only a few links in the footnotes), but I might add more depth later.</p>
<p>I can't share much wisdom about the underlying code. These days, I'm a master of modern CSS layout only if we define 'mastery' as searching, copying, hacking, and swearing a lot. The layout is all flexbox, with a bunch of suitable alignments, some background fudging and absolutely-positioned details — pretty much the only way I could build it. I blindly cycled through every combination of properties and values until things eventually did what I wanted. I also created a mini system of classes for appropriate text and image widths. I hacked a scaffold together, then spent most of my time editing the content.</p>
<p>I like that flexbox offers a sense of elasticity as you resize the window and that the layout does its own thing based on available space. None of this is new, but it's interesting when you're dealing with a visual poem. Relationships twang around, shift and realign; spaces form and contract, and so on. It's maybe not so logical when stacked on narrow screens, and perhaps a bit weird, but it's that slight weirdness that I love. My timeline is just like me, and just like my life: unfinished, and far from perfect.</p>
<p>— —</p>
<p><em>You can <a href="https://colly.com/">view my timeline on my homepage</a>.</em></p>
<p><em>I've made a short <a href="https://open.spotify.com/playlist/0GTXJhsKtjDeeeOfKS0vqY?si=2UZoM-8KRHqvtwX8G2_vsg">Spotify playlist</a> featuring albums and songs from my timeline.</em></p>
<p><em>Note: I'd intended to use 'time line' (note the space) rather than 'timeline' as the former suggests a line of time, rather than some sort of scheduling tool or project proposal, and Google seems to agree. But it started to look weird, so 'timeline' it is.</em></p>