https://titlecaseconverter.com/

https://leonardofaria.net/2020/08/03/adding-screenshot-testing-with-cypress-in-your-project/

Figure out how to pass down markdown-it (markdownLib) to require() so all shortcodes can be in external files.

#44
Spacing between h2 and abutting elements is not always ideal. Figure out more versatile spacing system.


It may be dead, but I still like it.

Cloudinary?
Or perhaps https://dev.to/ryanccn/responsive-images-with-11ty-sharp-4o5h

https://css-tricks.com/cloudinary-fetch-with-eleventy-respecting-local-development/

Time to create order out of chaos:

Taking inspiration from these sources:

https://heydonworks.com/article/design-tokens-in-eleventy/
https://github.com/paulrobertlloyd/paulrobertlloyd-v4
https://piccalil.li/blog/cube-css/
https://every-layout.dev/
https://inclusive-components.design/
https://www.smashingmagazine.com/printed-books/inclusive-front-end-design-patterns/
https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/
https://www.smashingmagazine.com/2018/05/css-custom-properties-strategy-guide/#comments-css-custom-properties-strategy-guide

LBRC vs LRBC

#26

Allow people to subscribe via e-mail and feed.
Started working with mailchimp but think I’d much prefer https://css-tricks.com/using-netlify-forms-and-netlify-functions-to-build-an-email-sign-up-widget/

Load Inter fonts via https://github.com/fontsource/fontsource.
Only load variable font and use sans-serif fallback for browsers that do not support it.

Add copy to clipboard.
Show language.

https://www.11ty.dev/docs/plugins/syntaxhighlight/#options

• end the post with links to next and previous posts
• maybe related posts category?
• posts with similar/same software use
• Table of Contents
  Related to #29

We talked a while ago about creating a page that would allow the user to browse the archive based on the software packages used.

@XerxesZorgon I remember you had created a document. Would you mind attaching it to this issue and elaborate on what you have in mind?

Codeblocks are not preformatted and are wrappin + unsure whether highlighting is happening.

https://axesslab.com/alt-texts/

https://indieweb.org/Getting_Started#Add_microformats_to_your_content

https://git-lfs.github.com/

Using a pull quote in Marylin and the Goats. I don't want to pollute the markdown with too much HTML, and a reusable solution would be nicer, so maybe... web components?

I've looked at web components in 2014/15/??, but things have changed. (bye HTML imports). So time to research a little bit.

Debate

Why I don't use web components
Why I use web components

Usage

Bought Getting Started with Web Components from Packt publishing (Apple Books)
CSS-Tricks: An introduction to web components
MDN using custom elements
https://www.webcomponents.org/introduction

Eleventy

• https://github.com/JanDW/11ty-web-component-generator
• https://dev.to/griffadev/using-web-components-with-11ty-5e48
• https://www.lafuente.me/posts/webcomponents-eleventy/
• https://www.npmjs.com/package/eleventy-plugin-add-web-component-definitions

Wildpeaches

• every-layout.dev

• Progressive enhancement

in f40d014 I added a blurry background to the hero image. It's a nice enough effect, but the blur filter (that for some reason doesn't kick in unless I apply it on both elements), has a performance cost. When I scroll the page, it's noticeably more janky, and the looking at the frame-rate when I profile in the devtools confirms the issue.

I could mitigate the performa could create a low-res blurred image during the build instead. I could probably use jimp to create this image.

I came across this library in this article

Likely not worth encoding blurry background image as base64 and inlining it, but maybe?

http://microformats.org/wiki/microformats2#Summary
https://media.dequeuniversity.com/courses/generic/testing-screen-readers/2.0/en/docs/voiceover-macos-guide.pdf

Add step to buildprocess to check all anchors resolve.

https://www.npmjs.com/package/broken-link-checker
https://www.npmjs.com/package/link-check

Add copy to clipboard.
Show language.

https://www.11ty.dev/docs/plugins/syntaxhighlight/#options

Make sure to specify canonical url

https://github.com/brob/eleventy-plugin-blog-tools

Started in Bear notes under #wildpeaches tag

• Document CSS pipeline

Includes webmentions, PWA, darkmode toggle...

https://github.com/hankchizljaw/hylia

The idea is to allow people to explore the site though the lens of software used.

@XerxesZorgon suggested a page listing of the software, from where you drill on a detail page showing the posts where this software is being used (keep track in frontmatter YAML) as well find a link to the website.

Maybe the buildprocess should check the URLs resolve?

I put together a software tools page that I was thinking we could post as a general page and then link to our posts, and include links to installation instructions, tutorials and similar software. I’m thinking that this could be the main page for software, and then each one would get its own page with a format something like:

[Link to software]
Installation
Tutorials
Associated packages
Similar tools
Links to our posts that reference the software.

Reduce to about .85em. However wait for Typographic scale in #3.

https://hugogiraudel.com/2020/12/01/a11y-advent-calendar/

I'm experimenting with adding hero images to the blogposts.

I figured unsplash.com would be the best source of images, so I started thinking about integrating with it. I want to specify the image ID in the blog post's front matter. When Eleventy builds the site it should look up the image on unsplash API GET /photos/:id

• it should retrieve the different available sizes, to be used with srcset in the rendered HTML
• it should retrieve the description to be used in the <img alt=""> attribute
• it should retrieve the authors name and link to their unsplash profile page to attribute the photo

Of course, the image will always be the same, so I don't want Eleventy to call the API for each and every build. To that end, I'm using @11ty/eleventy-cache-assets to cache the API calls.

Somewhat related to #60.

Experiment with showing excerpt(s) of article(s) on homepage.

https://maxkoehler.com/posts/continuous-typography/
https://awesomephant.github.io/continuous-typography/
https://utopia.fyi/

HTTP error code page

https://developers.google.com/web/tools/lighthouse#programmatic

#44

#44

• Remove unused CSS, set up npx tasks, figure out how to trigger in netlify build.

Parent: #44

Consider a design tokens approach? How to combine with eleventy, tailwindCSS...

https://www.npmjs.com/package/eleventy-critical-css
https://github.com/gregives/eleventy-critical-css
https://www.11ty.dev/docs/quicktips/inline-css/

https://vectronic.io/posts/self-hosted-comments-on-a-hugo-website/
https://jamstack-comments.netlify.app/posts/comments-on-your-content-in-your-content/

That way they are grouped and can be easily found again by the user.

• set overflow-x: scroll;
• make sure it is keyboard focusable tabindex=0, but only when it actually overflows: scrollWidth exceeds clientWidth for the container
• provide signifier to indicate overflow is present

Work is done is katex-overflow branch.

Created [email protected] and set up forwarding from [email protected] and *@wildpeaches.xyz using https://improvmx.com/

[email protected] redirects to my personal account

• add John as additional security account in gmail (using his non-Xerxes one)
• put email address on website

• Create a page with privacy statement (could be a heading on a colophon page)
• Commitment to not tracking users or selling their information
• Link form email subscription signup