Notebook: Designing This Website

Inspirations

• Maggie Appleton
• Tom Critchlow
• Max Böck
• Starbreaker.org
• Kev Quirk
• Ryan Mulligan

Foundations

Fonts

• Modern Font Stacks
• Literata, a variable font commissioned by Google Books and used by Richard Rutter

Colours

• Evil Martians suggests using OKLCH in CSS: why we moved from RGB and HSL
• Evil Martians designed a colour palette called Harmony with mirrored contrast pairs for APCA accessible levels of contrast and uses OKLCH with RGB fallback
• Eleventy Notes uses Radix UI colours with a 12 step scale. This uses P3 colours with RBG fallback

Potential features

Favicons

• Evil Martians on How to Favicon in 2024: Six files that fit most needs

Accessible heading anchors

• Eleventy-base-blog v9 has Zach Leatherman's implementation of heading anchors, working with his implementation of IDs for heading anchors using IdAttributePlugin
• Markdown-it-anchor

Tables of contents

• markdown-it-toc-done-right as recommended by Markdown-it-anchor

Icon to denote external links (including special icons for certain websites like Wikipedia, similar to Gwern)

• Michelle Barker on Styling External Links with Attribute Selectors via Jared White

Component (WebC or Nunjucks includes?) for blockquotes with citations

• Adrian Roselli on Blockquotes in Screen Readers via Jared White

Line breaks for long URLs

• CSS Tricks article on Better Line Breaks for Long URLs

Potential issues to address

Michelle Barker on How I Solved My Font Rendering Problem for variable fonts, via Jared White

Naming things

Atom > RSS: Why We Should Just Call Them “Feeds” Instead of “RSS” Feeds via starbreaker.org and Bryce Wray

Things I'm unsure about

I need to understand more about the following before I consider adding to this site

Automated Webmentions as bloggers have mentioned privacy issues and even experienced developers have struggled to implement Webmentions.

• R Scott Jones suggests Webnotes as a manually added set of links and comments below a blog post, instead of automated comments, pingbacks and Webmentions. He referenced a similar idea by Jedda called Community Echos.

Social share imagery and Twitter card markup

• One perspective is from starbreaker.org who writes about their contempt for proprietary social media tags and avoiding doing unpaid work for platforms
• Jim Nieslen wrote in 2021 about his quibbles with social share imagery and came up with a "minimum" Twitter card markup through his testing of using the Twitter card validator