June 11, 2020

A fresh lick of paint

Quarantine gave me back a bunch of commuting time; I put mine towards yoga and Eleventy… you are viewing the result!

‘Painting the Forth Bridge’.

Turns out that, that task isn’t as endless as we were lead to believe it was…

I’d like to lead a motion to replace it with ‘building a personal site’.

With commits like Hate it from October 2019, and a PR simply named 2018 getting merged at around the same time, it’s no surprise that these tasks take so long; but extra time at home gave me the opportunity to really strip it down and start afresh.

Where to start

The problem I've faced in the past is getting ahead of myself and trying to solve too many problems at once so I set a few rules:

1. No designing in the browser!

A screenshot of the work-in-progress design in Sketch
You can probably see which aspects were kept from this design.

Sometimes it works, but with something where I’m the designer, developer, product owner et al I find that I get too bogged down in the details so best to stick to Sketch to begin with.

2. Keep it simple

Photos make things complicated. Icons never quite match up. Scroll-based triggers are a pain to get right. To get a V1 of the new site live quickly, I pushed all of these to the back of my mind and just got the layout down.

The previous iteration had a /work, a /life, a /contact, custom /404 and /410 pages, among others. This one only needed one – the homepage. We can add more later when we have reusable components, styles etc, which brings me to tooling…

3. Forget about tooling

With a rough design down, and some potential typefaces chosen this would be the time to start agonising over creating a build pipeline, or which framework is the flavour of the month, or how to most efficiently serve the webfonts. Don’t get me wrong, they’re important… but not vital to getting a proof of concept up and running.

A screenshot of the work-in-progress build deployed on Netlify Drop
I cannot stress how straightforward it is to get a site live on Netlify, either with the drag and drop of files, or with an actual build pipeline.

I created ~/Sites/robsterlini-2020/index.html and just wrote classic HTML and timeless (inlined) CSS – shock, horror, it just worked! Within an hour or so I had a directory uploaded to Netlify Drop and a testable and iterable build. It wasn’t clean, or extensible, but that wasn’t important.

4. Get it live!

After a few rounds of testing to iron out any kinks, and a friends and family test to make sure none of the words were misspelt (a couple were caught here) it was time to push it live. A personal site doesn’t have to be precious like a client build.

Let’s iterate on production!

There is no way to change from build pipeline to the drag and drop on Netlify for existing repositories, but that wasn’t an issue as the plan was always to get CI/CD working in the end. So, instead I faked it!

A partial screenshot of my production settings in Netlify
Creating an automated deployment of static sites was a breeze!

Here’s how it works:

  1. Checked out a new branch 2020-vanilla
  2. Deleted absolutely everything – this is a really cathartic exercise
  3. Created a public directory and dumped the contents of robsterlini-2020 into it
  4. Set the Production branch on my Netlify build to 2020-vanilla
  5. Pushed it all up
  6. Profit!

Well… not profit, but a build from nothing live on robsterlini.co.uk in a few hours from nothing? I was pretty happy with that.

5. Tweet about it

To really test whether I was okay shipping something unfinished, I had to release it into the wild and there’s no accountability quite like Twitter:

Soft launching a new, slim-lined robsterlini.co.uk this evening! Still a bit to work on, and some more to build out, but it’s a start that I’m happy with. Holler if you notice anything out of the ordinary! ✨

Next steps…

In the days that followed I built a few extra features (you can see them pretty plainly as you are reading one right now):

  1. Port it to Eleventy and switch the CSS up for Sass
  2. Reinstate the journal (maybe with some of the old posts)
  3. Add better colour and contrast preferences
  4. Add load animations for a smoother first impression
  5. Add a sitemap
  6. Write a journal entry about starting afresh

All being well, there will be a follow-up entry to this to detail finishing off the list above, and most likely a few other ideas I had a long the way.

I’d absolutely love it if you took a moment to let me know what you think about the new site in a tweet or any of the other social channels listed on the homepage – good or bad, I can take it!

Thanks for taking the time to read this!

If you enjoyed it, and think others would benefit from the read then feel free to share it on Twitter (or elsewhere). I’m always up for a discussion about anything I’ve written too, so get in touch if you want to chat!

If you’ve spotted something out of place or something needs correcting, feel free to open a PR for this entry, raise an issue, or let me know.

A newer entry Light & dark mode, plus…

July 5, 2020 Colour preference media queries are a great start of respecting a user’s implied preference, but it’s possible to go a few steps further to create the perfect user experience!

An older entry Parkrun changed my life

August 3, 2016 The last two years have been a blur of running and self realisation, but simply put: my life has changed.