Core Tech

Built using Eleventy, heavily inspired by Andy Bell's Learn Eleventy from Scratch Course.

I love Andy's tutorials and web dev ethos. His repo from the course was a fully-featured foundation for me to build the source/target site.

Eleventy is a solid pick for a static site generator. It's fast, easy to configure and ultimately Just JavaScript™. I use Nunjucks as my main templating engine and it's convenient to massage the collections and site data into place.

Hosted for free on Netlify sync'd with a repo on GitLab. This is an overall frictionless process. Netlify also powers the forms on the site.

There's a lot of Eleventy NodeJS code used to build the site but only eight lines of JavaScript on the front end (I can't not use lazy loaded image animations!)

I try to avoid using custom shortcodes when writing newsletter editions in Markdown. Instead, I have a custom content transform to generate complete image markup (alt-text, figcaptions as titles, the potential for responsive images in the future) and automagically add heading anchor links.

Newsletter

In a bid to save time and energy I also auto-generate my newsletter emails from the same repository. The layout and format of these emails is heavily inspired by Stephanie Eckles's 11ty-email-generator repo.

It's unfortunately not easy to have two different Eleventy configurations in the same repository so I do a bit of custom file templating to run the build process twice with two separate config files.

Buttondown handles the actual sending of newsletter editions. I'm a big fan of Buttondown but suspect I'll be growing out if it in the next year or so. My Eleventy process will make this seamless.

Media

The main source/target logo and other artwork is by the fantastic Lis Xu. Lis' work is so inspiring and I really appreciate the lightness it brings to my site.

Thumbnails for the newsletter editions are auto-generated from an OpenProcessing example from Roni Kaufman.

The iPhone on the about page is completely HTML + CSS courtesy of Daniel Szekely's codepen. It's a little overkill but I love it!

The preview on the iPhone screen is generated using Puppeteer and Gulp. This runs every time a new newsletter is published.

I use a free tier on Cloudinary to automatically compress and serve all images on the site. There's an ace trick to use Netlify proxies with the Cloudinary fetch endpoint – it's very seamless.

Fonts

I'm currently using Lato, Proza Libre and Charter.

Analytics

I'm not using any tracking cookies, analytics or similar. I used to use a privacy-conscious analytics service but I've come to the conclusion it's not worth it for a personal site and small project like source/target. I'd prefer to spend more time learning and sharing than tracking metrics.