Tagged “personal-sites”

Recently I updated this website’s git repository README to include a summary of my approach to supporting post excerpts.

I define an initial part of a post as the excerpt by adding a separator string between it and the remaining content. Then in my posts list I grab 11ty’s post.page.excerpt and pass that through a custom markdown-parsing filter.

This works pretty well but sometimes it’s a bit inflexible that the excerpt has to be part of the post. Sometimes you might want to say something different, or shorter and snappier in the excerpt.

I’ve recently been updating my website over a series of nights and weekends. The changes aren’t very noticeable to the eye but involved some careful modernisation and streamlining of back-end features and technology, plus improvements to accessibility and performance. I’m really happy to have made them.

Recently my work colleague Francesco told me about a new Edinburgh branch of Homebrew Website Club. Exciting! I unfortunately couldn’t make their first event but just attended their second event. Here’s how it was billed:

Join us in Edinburgh for demos of personal sites, recent breakthroughs, discussions about the independent web, and to meet IndieWeb community members!

It was good fun! Great to chat about and personal websites and writing with fellow tinkerers. I’m sure I’ll be back.

I like the metaphor for personal websites of tending to a digital garden.

Like all gardens, they can become a bit unruly and need some weeding. Right now, as I consider updating some software and freshening things up, I realise that I’ve let it overgrow a tad.

So, here’s a post in which I’ll log my website’s current features. This should be useful in and of itself as a stepping stone to writing a proper readme. However it’ll also help me reflect on my website’s health and maintainability so I can decide which features to nourish and which to prune.

Note: this post will take a bit of time and a few sessions, so please regard it as a work in progress.

What I want

Before getting lost in stuff I have, I thought it’d be good to set out my higher-level goals and what I feel I have the time to sustain. I think I’d like:

• to retain URLs and SEO through updates
• excellent accessibility and performance (four hundos on lighthouse is a good start)
• it to use the best of modern web standards
• simplicity: minimal dependencies, easy to make technical updates
• to maintain some documentation to support ease of updating
• minimal noise: I don’t want a bunch of emails from third parties, nor ongoing dependency update alerts
• sensibly organised content
• a search function
• a way for folks to contact me
• some personality in the design and content
• be able to add and edit content easily (a mobile-friendly CMS rather than via code only)
• be able to insert photos into content easily

And here are a few secondary and lower-level wants:

• code snippets should look good
• images complexities handled behind the scenes
• some indieweb features supporting interactivity with other bloggers and friends

What I actually have

This is gonna be a much lower-level set of features than the above goals, but that’s OK. I can ask myself whether each supports my wider goals and are worth the effort.

Main tech stack

It’s a statically generated site powered by Eleventy.

The code is hosted on GitHub.

I use Netlify for production builds, deployments and hosting.

I’m happy with this stack. The parts play well together, it’s free, and it brings a lot of flexibility and performance benefits.

CMS

I use Decap CMS. It’s free and is working OK, however the UI is rubbish on a small screen.

I previously tried both Netlify CMS and Forestry for a while then gave up on them. I also sometimes use github.com as my CMS. That works but isn’t ideal.

SEO

I provide an XML sitemap which is intended for search engines and a human-readable sitemap.

Key pages

Home

An intro, and a list of latest posts.

About

Some information about me that’s currently split between my interests in the web and music.

Contact

It’s a form, and for its backend I use Netlify Forms. That gives me the server-side handling, database storage and admin management aspects of a form for my otherwise-static site.

Journal Archive

Access to all published posts.

Search

A JS-based form for searching all posts, with an autosuggest function. I use pagefind to power the search.

I don’t like how it’s JavaScript dependant and in future I should look at trying Zach Leatherman’s web component.

404 page

I have a 404.md file which sets a permalink of (i.e. is built as) 404.html. Having made that file available, Netlify does the rest… which is nice!

Detailed features

Avatar

I serve an avatar from a conventional location per Jim Neilsen’s idea – see my avatar.

Environment variables

I set NODE_ENV to production as an environment variable in my Netlify dashboard. This should mean that packages under devDependencies are not built in production which is good because that’d be a waste of time. With the dotenv module installed, if the NODE_ENV variable is present its value is loaded into Node.js’s process.env property. That allows me to check in JavaScript whether or not the current environment is production. With that, I might avoid outputting draft posts to physical files in production, or avoid hitting API resources in local development.

Only JS files can access process.env. So, in order to be able to check “is this production?” in other files such as Nunjucks templates I have an eleventy data file named app.js which makes the environment value available via `production.

Incidentally I used to set another custom environemt variable called ELEVENTY_ENV to production in the source-controlled package.json, within the build NPM script. I think this is now redundant given that I can use NODE_ENV for the same purpose. I previously used it within a Netlify lambda function that posted to the Github API to create new bookmark posts. I don’t do that any more so I can delete this environment variable.

Excerpts

I use gray-matter’s default approach for including, delimiting and parsing excerpts from posts. The excerpt is both part of the post content but also accessible separately, which is useful for showing only the excerpt in post lists.

It’s not perfect. It’d be useful to have a class on the excerpt. It’d be useful to be able to apply different styling to it on-demand and not on every post.

Favicons

To do: write a description.

Image plugin

I use Eleventy Image to perform build-time image transformations. It takes images I’ve added in posts and pages and converts and saves them into multiple formats and sizes, and swaps the original markup for modern, responsive, multi-format image markup using picture and source and pointing to the converted image files.

Linting and code formatting tools

I use a .editorconfig file to set how my editor should handle things like nested line indentation, inserting an end of file newline and so on. I just go pretty much with what the 11ty base blog repo uses, although I haven’t yet switched from spaces to tabs.

I have a .prettierrc config file which sets things like a preference for single rather than double quotes. The idea is that you also have a prettier editor extension enabled (I have one for VS Code enabled) and in your editor settings you set your editor’s default formatter to that prettier extension. It’ll then format files on save.

Netlify config

I have a .netlify.toml file in which I specify the build command (npm run build) and the directory to publish to. I also use it to set far-future expires on custom font .woff2 files. As far as I’m aware, this is still required. Lastly I have some redirects in there too.

Node.js

Eleventy is written in JavaScript and running it requires Node.js, both locally and in production. The minimum Node.js version is set in a .nvmrc configuration file. I do it this way because that’s how it’s done in the Eleventy Base Blog. I’m happy to follow that to avoid confusion when doing future 11ty upgrades, and it also seems sensible to set this value in the project code rather than only in Netlify as the latter could lock me into Netlify and cause confusion in future. Things to remember (from experience) are that this setting in .nvrmc overrides any node version set in Netlify’s Build and deploy settings and also that I should avoid setting a node version in netlify.toml too otherwise they fight with each other.

Readable time

I created this Eleventy filter to show “time of post” on posts of type note. That’s a situation where the readableDate filter included with the Eleventy starter blog wasn’t precise enough.

Tags

When I create a post I apply relevant tags to it. The tag post is applied automatically to all posts. And when I create a note using my custom Decap note template it also applies tag note. (I should do the same for entry and bookmark). But aside from those special tags, I apply tag names arbitrarily.

Each post page shows its associated tags (as links) at the bottom. Each post shows beside its title the “most notable” tag. (Currently it just grabs the third tag since the first tag should automatically be post and in second place should be note, entry or bookmark).

And I have the following tag-related pages and templates:

• an all tags page
• a template for each tag that generates a page listing all posts tagged with that tag

Actions I’ve realised I can take

• rename eleventy.js to eleventy.config.js like in the Eleventy base blog
• …

To be continued!

Update 15-08-24

I added Decap CMS.

Update 30-06-24

I’ve addressed the “a means of contacting me” item on my wants list by adding a contact form using Netlify forms.

Update 39-12-24

I recently removed a bunch of features and pages that had gone stale and only served to make my website harder to maintain.

• Photos section, including an 11ty JavaScript data file where I fetched photos from Cloudinary using an 11ty
• Bookshelf
• Inspiration page
• Records for sale page and data file
• Forestry CMS stuff
• Bookmarker script and lambda folder
• DIY search feature
• JavaScript patch for CSS’s min() for grids, since that now has wide browser support

Martin introduces the “Now” page concept and how he adapted it for showing on his homepage.

I quite like the Now concept in general and have already starting tinkering with it. I also really like Martin’s neat, front matter-free solution in Eleventy (single config file plus date-oriented filenames) and could see that being more widely reusable for me for other “light-touch, non-page collections”.

I really like Jim’s idea of putting an avatar file somewhere that’s memorable and easy to access by me wherever I am and that also (in the future) might be automatically grabbable by any platform that needs my avatar.

So I’ve put my avatar at fuzzylogic.me/.well-known/avatar.

Great idea, Jim!

Definite “personal website goals” here in Robb’s beautiful online portfolio and blog.

From interaction design to scaleable design systems, single-page apps to something more experimental with WebGL. I help awesome people to build ambitious yet accessible web projects - the wilder, the better.

Robb combines beautiful typography and colours with fun and smooth animation… and the words ain’t half bad, either.

Inspirational work!

A fantastic so-called “Scroll Story” from Robin Rendle. In his own words it’s “an elaborate blog post where I rant about a thing” however given the beautiful typography, layout and illustrations on show I think he’s selling it a little short!

The content of this “story” is pretty interesting – Robin laments the fact that web authors often need newsletters, or to “spam social media” in order to publicise articles on their websites, because most people don’t use RSS (awareness is too low and barriers to entry too great).

However it’s the story’s design and technical implementation which really caught my eye.

Robin does some really cool stuff with the CSS scroll-snap-type property and also explains some steps he had to take to tame differing implementations of height:100vh across browsers.

I’m currently interested in how to spend less time on social media platforms so as to be less exposed to ads, algorithms and general ill-effects. One approach I’m trialling is going back to the old school and using RSS to receive and aggregate updates from the people I follow, allowing me to read them in a central, noise-free place and not have to use social platform websites and apps.

I use the free, open source Mac and iOS app NetNewsWire on my MacBook. This is where I tend to add and organise my RSS feeds as it has a good UI, for example for arranging feeds into suitable folders.

If I want to read new items away from my Mac (on my phone, or on another computer), I use Feedbin – either the website or the iOS app. NewsNetWire and Feedbin sync pretty seemlessly so any organisation I’ve done in NetNewsWire is visible in Feedbin.

Feedbin is paid (I currently pay 5 USD per month). It has a slick UI and, since it’s a website accessible from anywhere, could be treated as your “central hub” for reading.

Feedbin also offers a few very interesting features.

• You can use it to subscribe to email newsletters, because it provides you with an email address for that purpose. This means you can have your newsletters arrive into the same central place as your RSS feeds;
• You can subscribe to Twitter accounts, and choose to filter tweets by only those with links or media attached (in theory the “more interesting” tweets);
• there’s a “Send to Feedbin” bookmarklet that essentially provides a one-click “Read later” function for use when browsing the web. This is a really handy feature because sometimes when I’m browsing I want to mark an article as “read later” rather than bookmarking it on my website, because until I’ve read it I won’t know if it’s bookmark-worthy. Having this feature destresses online life a little by stopping me leaving lots of browser tabs open at articles I “need to read”! I previously used Instapaper (and their bookmarklet) for this function, but again, it makes sense for me to bring everything into one place (Feedbin);
• You can “star” (i.e. save) items you’ve read but want to revisit, which is handy when browsing your “Unread” list on the move; and
• You can “share” items to well-known services (Twitter, Facebook etc) but interestingly also to a “custom service” by providing a URL. I could see me using this in future to bookmark an article on my own website.

I’m also currently trialling RSS.app for its ability to let me type in an Instagram user profile URL then give me back an RSS feed URL which I can add into Feedbin, and that’s working well so far, too.

Note: many thanks to Chris Coyier whose post NetNewsWire and Feedbin pointed me toward these excellent RSS clients.

“I’ll just make a few small tweaks to my website…” said I. Cut to three sleep-deprived days later and I’ve rebuilt it, SSG/JAMstack-stylee with Eleventy and Netlify and entirely re-coded the front-end. Silly, but so far so good, and it’s greasy fast!

So yes, I’ve just updated my website from being a dynamic, LAMP-stack affair which used Perch CMS and was hosted on Linode to being statically-generated using Eleventy and hosted on Netlify.

It mostly went smoothly. And the environmental and continuous deployment boilerplate that Netlify provide are fantastic, and will be a real time-saver over my current “set up and maintain a Linode server” approach.

In terms of challenges and troubleshooting, I did have to find a solution to the issue of FOUT on repeat visits. It seems this was happening as a result of Netlify’s interesting approach to asset caching which works well for most requirements but wasn’t so great for self-hosted webfonts. My solution was to add specific headers for .woff and .woff2 files in my application’s Netlify config file.

Just saw this – https://daverupert.com/bookshelf/ – and now I really need to up my book-logging game!

(via @davatron5000)

Bram Stein, a software architect at Adobe, wrote the book on Webfonts, so it’s no surprise that his own website showcases some pretty beautiful typography.

Type is set in Expo Serif Pro, Expo Sans Pro and Source Code Pro.

No CMS, no installation, no server, no coding required.

Another quick and clever way of creating a website; this time by collecting a bunch of files (HTML, video, images, bookmarks) into a folder, connecting Dropbox and Small Victories to that, choosing a theme and Hey Presto, you have a website.

I could see this as maybe being useful for some sort of transient campaign idea that doesn’t need a CMS and that you want others to be able to collaborate on.

Note: to get a custom domain and host CSS and JS files, you need to sign up to a paid plan, but at $4/month or $36/year it’s pretty cheap.

These days when friends tell me they want a personal website, it’s often just a single-page profile that they’re really after rather than something pricier and more complicated.

In the past there were services like http://flavors.me/ but it seems to have fallen by the wayside. This looks like a decent option to point friends toward if they’re not looking for a blog or want to take baby steps toward that. Incidentally, I came across Carrd through Chris Ferdinandi’s Vanilla JS List which features organisations which favour Vanilla JavaScript over JS frameworks.