This would improve perceived page load speeds. Could use critical criticalCss

The SVG icons currently used are not uniform. I should move to using self-hosted https://simpleicons.org/ icons for consistency. I also suspect they will be a tad smaller and easier to include.

Could create a WebSub endpoint so services don't need to poll the feed. This is supported by google. It's also used by some IndieWeb readers.
https://documentation.superfeedr.com/publishers.html

Could also ping indexers/search engines either manually or via a ping service
https://roadtoblogging.com/ping-url-to-get-quick-search-engine-index/

http://blogs.yandex.ru/
http://ping.feedburner.com

Bing's documentation is a little confusing
https://blogs.bing.com/webmaster/january-2019/bingbot-Series-Get-your-content-indexed-fast-by-now-submitting-up-to-10,000-URLs-per-day-to-Bing
https://blogs.bing.com/webmaster/may-2019/Easy-set-up-guide-for-Bing%E2%80%99s-Adaptive-URL-submission-API

Consider supporting h-recipe and the older/more supported hRecipe. Google also recommends a schema.org approach though that may not be necessary (check Rich Results Test)

Desired solution

Use shortcodes to wrap simple markdown

{% recipe-summary %}
*  Prep Time: 5 minutes
* Cook Time: 25 minutes
* Servings: 2
{% endrecipe-instructions %}

{% recipe-ingredients %}
* 1 tablespoon of sugar
* 1 cup of water (approximate)
* tumeric for color
{% endrecipe-ingredients %}

{% recipe-instructions %}
* heat the water
* combine the ingredients
{% endrecipe-instructions %}

Gets rendered to something like the following by adding a header and doing some regex magic

<h2>Summary</h2>
<ul>
  <li class="duration">Prep Time: <span class="value-title" title="PT5M">5 minutes</span></li>
  <li class="duration">Cook Time: <span class="value-title" title="PT25M">25 minutes</span></li>
  <li>Servings: <span class="yield">2</span></li>
</ul>

<h2>Ingredients</h2>
<ul>
  <li class="ingredients"><span class="value">1</span><span class="type">tablespoon</span> of sugar</li>
  <li class="ingredients"><span class="value">1</span><span class="type">cup</span> of water</li>
  <li class="ingredients">tumeric for color</li>
</ul>

<h2>Instructions</h2>
<ol class="instructions">
  <li>heat the water</li>
  <li>combine the ingredients</li>
</ol>

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

When I pull in data from other sources I could regularly build the website to get the latest data.

Could be done with IFTTT or Github Actions.

Cool implementation of search supporting both no-js and integrated JS results. Probably not helpful until I have more content.

Adding search to a JAMstack site

I would love to translate pages to Spanish to lean both technically and linguistically. It would make maintenance more difficult and I'd have to figure out the structure.

Suggested URL structure: Subfolder

Someone wrote a guide for eleventy

The other photos didn't appear in this email campaign. It could be that they don't ever show other photos but I remember reading about RSS having a different format for photos.

Already have some templates using nunjucks because of some special features. I'm a little concerned it's not as portable as liquid but it should be close enough that it shouldn't be too problematic. 🤔

CloudFlare is offering free "privacy-first" analytics with no hit limit. Seems like a good alternative to google analytics and I'm not even sure if goatcounter is setup correctly right now.

https://blog.cloudflare.com/privacy-first-web-analytics/

Interesting page idea. Not sure how often I'd update it or if there's overlap with other types of pages (e.g. /about)

https://nownownow.com/about

The current include for images makes markdown editing harder. I would prefer to use the title option of markdown links as the caption. By using a plugin to re-write the image tag, we could red the title attibute and use that in the output. That still leaves the width formatting (full width, float), however some markdown processors allow a {:attrName="attrValue"} syntax which adds modifiers to the image. We could use this to pass the values. One complication is that we want to support markdown in the caption.

Current syntax

{% include image.html
    file="/assets/img/peru-andean-cock-of-the-rock.jpg"
    alt="bird with a bright orange body and head, black wings and a gray back"
    caption="Andean cock-of-the-rock -- [Photo by Jerry Thompson](https://commons.wikimedia.org/wiki/File:Rupicola_peruviana_%28male%29\_-San_Diego_Zoo-8a.jpg) [[CC BY 2.0](https://creativecommons.org/licenses/by/2.0)]"
    display="float"
%}

Desired syntax

![bird with a bright orange body and head, black wings and a gray back](/assets/img/peru-andean-cock-of-the-rock.jpg "Andean cock-of-the-rock -- [Photo by Jerry Thompson](https://commons.wikimedia.org/wiki/File:Rupicola_peruviana_%28male%29\_-San_Diego_Zoo-8a.jpg) [[CC BY 2.0](https://creativecommons.org/licenses/by/2.0)]"){:display="float"}


![there are options to split onto multiple lines](
  /assets/img/peru-andean-cock-of-the-rock.jpg
  "Andean cock-of-the-rock -- [Photo by Jerry Thompson](https://commons.wikimedia.org/wiki/File:Rupicola_peruviana_%28male%29\_-San_Diego_Zoo-8a.jpg) [[CC BY 2.0](https://creativecommons.org/licenses/by/2.0)]"
){:display="float"}

Expected Output

<figure class="post-img--float">
	<img src="/assets/img/peru-andean-cock-of-the-rock.jpg" alt="bird with a bright orange body and head, black wings and a gray back">
	<figcaption class="mdc-typography--caption">
		Andean cock-of-the-rock – <a href="https://commons.wikimedia.org/wiki/File:Rupicola_peruviana_%28male%29\_-San_Diego_Zoo-8a.jpg">Photo by Jerry Thompson</a> [<a href="https://creativecommons.org/licenses/by/2.0">CC BY 2.0</a>]

	</figcaption>
</figure>

Blocked by aciccarello/aciccarello.github.io#30

References

• https://dev.to/stephencweiss/markdown-image-titles-and-alt-text-5fi1
• https://www.xaprb.com/blog/how-to-style-images-with-markdown/

It would be good to automate accessibility checks by running a tool on each page of the site as part of a CI process.

Related to aciccarello/aciccarello.github.io#4 and aciccarello/aciccarello.github.io#30

https://getindiekit.com/ looks very impressive

Others include

• https://github.com/grantcodes/postr
• https://github.com/voxpelli/webpage-micropub-to-github
• https://github.com/muan/micropub-endpoint

Relates to #34

Thinking more about subscribing as I consider adding more types of content. URL structure, feeds, & markup are WIP.

When implementing the note post kind for #34, many notes might be temporary in nature and not worthwhile retaining in the feed.

Requirements

• Posts should support a property indicating when they expire
• When expired, posts should not appear in any feed pages or feed.xml files
• Expired pages should not have an "edit on github" link that would assist in reaching the original content
• After expiring, the content should return a 410 HTTP status or equivalent header (#66)
• [Optional] After expiration, send webmentions to delete
• [Optional] When expired, the page for the content should show a message indicating it was temporary
• Page head should include unavailable_after: meta tag

https://developer.linkedin.com/docs/getting-started-js-sdk

Could be a separate page, or be part of the skills page (aciccarello/aciccarello.github.io#11)

Right now "view source" just points to the repo root. I'd like to be able to point to the actual data file to make it easier to make edits. Should be a simple change.

https://www.11ty.dev/docs/quicktips/edit-on-github-links/

Feed rss into an email newsletter. In addition to blog posts, I could see instagram/image posts also being something to include.

https://mailchimp.com/help/share-your-blog-posts-with-mailchimp/

This was only needed to help with the jekyll migration. But it's simpler to link to the posts directly. This would only require changing about 10 instances of the filter.

Run feed validator against the main feed as part of a test suite.

Split from #57

Have pages that list posts for a particular tag. This would allow someone to look at all travel or technology related posts, filtering out content they don't care about.

Currently it's hard to show previews of includes like the liquid image include in the admin panel because the template needs to be recreated in JavaScript. If template used by eleventy was using javascript, then that template could potentially be loaded into the admin panel more easily.

Plan

• Reimplement a template in javascript
• Change the existing include to point to the new template (via universal short code?)
• Load the new template into the admin panel with a helper function
• Replace old includes with shortcode

Drawbacks

• Would loose access to liquid filters

Alternatives

• Use something more like a custom element but with static rendering

I'd love to post updates about my plants. I'd like to keep track of all the plants I have and their progress over time. I'll probably post some pictures to social media but I don't want to clutter things with a bunch of low quality pictures. I have used garden tags but it isn't really usable from the web.

I'm imagining I'd continue the material theme but change up the primary color to a dark green. Something like #1b5e20 and #1976d2 (the accent color from the main page). There'd be a main page with the latest posts. Maybe a page for the post itself and/or a page for the plant. I'm not sure how to support both gardens, plants, and general gardening posts.

Plant metadata

• Common Name
• Scientific Name
• Origin (store, cutting)
• Preferred Light
• Preferred Watering
• Paragraph description
• If archived (sold, died, given away)

Should make it easier for people to subcribe to the rss feed. Maybe using something like this:

https://www.subtome.com/#/

Lots of good tips. I especially like the blurred background image. AVIF seems intreaging too.

https://www.industrialempathy.com/posts/image-optimizations/

Best of all there's an example eleventy repo.

Followup to aciccarello/aciccarello.github.io#30

Automate running Lighthouse CLI against a few key urls.

Split from #57

Remove CSS to promote standards! One 48 hour day only!
https://css-naked-day.github.io/

Could be done by manually changing the styles. Or I could upload some JavaScript a few days before so the timing is automatic.

Probably should be coupled with a blog post but that will probably need to wait till next year.

Instead of a comments section, there could be a link to my Twitter post sharing the article where people could respond.

This would be simple and avoid adding a rarely used comments system but would tie responses to Twitter.

Mention analytics and explain any affiliate links would be noted.

Discuss traditional web monetization approaches and some new ones.

Traditional

• Ads
• Paywall/Individual Subscriptions (Newspapers, Medium)
• Affiliate links/promoted content
• Donate

New

• Flattr
• Scroll
• Coil & Web Monetization API

Concerns

• Privacy
• Viewing User Experience
• Ease of payment
• Market adoption
• Payout value

Possible tests

• HTML validator
• Feed validator
• Broken link checking
• Metadata parsing
• Accessibility checks

Need to figure out which tests would run on all pages vs on specific pages.

Embed some XHTML in the atom feed so a user who doesn't know RSS wouldn't be handed an ugly XML file.

https://lepture.com/en/2019/rss-style-with-xsl

You can bridge indieweb sites to Federated sites using https://fed.brid.gy/

Found thanks to this post: https://blog.shadura.me/2020/12/30/blog-on-the-fediverse/

I have a post showing why I originally picked medium. I should write an updated post showing why I'm not using it for my main content anymore.

Could post to dev.to too.

Could write about federated/distributed web and/or experience with mastodon. Why I think it is great technology but why it still is not widely used

Current SMS/MMS messaging is clunky

• file size limits
• managing group members

Third party apps are a pain

• new app for every service
• voice/video messages aren't that complex

A new standard is available: RCS

• Supports a bunch of new features
• Designed to replace SMS

A few companies are holding this back

• until recently, mobile carriers were
• Apple is the big holdout
• iMessage, competition

A look at what group messages should look like

Some concerns

• availability internationally
• Google's control
• Standardization process & pace of adding features
• Business messages and spam

Setup expectations for microformats metadata on key pages and compare using microformats-parser as part of a test suite

Split from #57

Over time, the ATOM feed might get long. Should consider truncating the list or at least not including a long description.

Write up blog post about last year's birding

• Exciting year birding in 2019
  • Returned to childhood hobby
  • Started getting into bird photography
  • Birding around the world
  • Going on birding tours
  • Saw > 365 bird species
• Why I bird
  • Relaxing
  • Gets me outdoors
  • Fun challenge
  • Encourages me to check out new places
  • A way to make memories
• How to get started birding
  • Binoculars (anything will do)
  • Use apps like Merlin Bird ID and ebird (or iNaturalist if interested in more)
  • Get outside
  • Plug an event like Global Big Day

Google prefers JSON-LD. Indieweb prefers microformats2 though microformats1 has more support.

I'd like to define structured data in one format (like microformats2) and have an 11ty transform extract/convert the HTML to other formats (i.e. microformats1 and JSON-LD).

I'd like to animate loading a blog post by causing the preview card to expand to the space where the blog post will eventually be before the page loads.

Create a page detailing my developer setup. No real need but kinda interesting idea. Might be better as a blog post since it'll probably change frequently.

Examples

As a nice shout out to projects that the website is using, a /powered-by or /credits page would be a kind way to thank projects and services.

Software

• Site generator (jekyll/eleventy)
• CSS libraries
• Font/Icon library

Services

• Whatever the current host is (github pages/netlify)
• GitHub (git repo)

Dev tools

• VS Code

Right now redirects are being handled via static files. Netlify has a redirect definition file format. This would add more flexibility but would also make the site more dependent on a particular host.

See jvt.me for an example

Could cleanup some of the helpers and possibly remove security vulnerability warnings.

In the post view it can be hard to tell a blog post from a photo from a recipe. A clear icon or text indication would help. I was thinking it could be the first item in the list of tags.

Might want to hide this when posts are already filtered based on kind.

Related to #34

The 410 http status indicates that a page used to exist but was removed. It is also used by webmentions to know when to delete a post. It also would be useful for expiring posts #67.

If #65 is implemented, Jaime Tanna's approach of redirecting to a 410 page could work, though it wouldn't support any page specific reason (like "This page was deleted because it's contents no longer match my views"). If not, could use a meta http equiv status header.