{
    "type": "entry",
    "author": {
        "name": "@xenodium",
        "url": "https://indieweb.social/@xenodium",
        "photo": null
    },
    "url": "https://indieweb.social/@xenodium/111711233790088112",
    "content": {
        "html": "<p>It\u2019s 2024. What would be your ideal blogging service?</p><p>I\u2019d love your insights. Feel free to free to reply here if you prefer. </p><p>Boosts super welcome </p><p><a href=\"https://lobste.rs/s/rxntmu/it_s_2024_what_would_be_your_ideal_blogging\"><span>https://</span><span>lobste.rs/s/rxntmu/it_s_2024_w</span><span>hat_would_be_your_ideal_blogging</span></a></p><p><a href=\"https://indieweb.social/tags/blog\">#<span>blog</span></a> <a href=\"https://indieweb.social/tags/blogging\">#<span>blogging</span></a> <a href=\"https://indieweb.social/tags/indieweb\">#<span>indieweb</span></a> <a href=\"https://indieweb.social/tags/indiedev\">#<span>indiedev</span></a> <a href=\"https://indieweb.social/tags/web\">#<span>web</span></a> <a href=\"https://indieweb.social/tags/fediverse\">#<span>fediverse</span></a> <a href=\"https://indieweb.social/tags/decentralization\">#<span>decentralization</span></a></p>",
        "text": "It\u2019s 2024. What would be your ideal blogging service?I\u2019d love your insights. Feel free to free to reply here if you prefer. Boosts super welcome https://lobste.rs/s/rxntmu/it_s_2024_what_would_be_your_ideal_blogging#blog #blogging #indieweb #indiedev #web #fediverse #decentralization"
    },
    "published": "2024-01-06T21:55:52+00:00",
    "post-type": "note",
    "_id": "39914840",
    "_source": "7235",
    "_is_read": false
}

{
    "type": "entry",
    "author": {
        "name": "@xandra",
        "url": "https://tilde.zone/@xandra",
        "photo": null
    },
    "url": "https://tilde.zone/@xandra/111711256349056022",
    "content": {
        "html": "<p>\ud83c\udf84 \u2744\ufe0f  just a few days left for the 32-bit cafe's holiday event!</p><p>with a few different ways to participate, i have no doubt any last-minute (fellow) procrastinators can get something submitted by january 10th!</p><p>i'm finishing up my holiday page now on <a href=\"https://xandra.cc\"><span>https://</span><span>xandra.cc</span><span></span></a> to submit - can't wait to see what everyone has done!</p><p><a href=\"https://32bit.cafe/holidays2023/\"><span>https://</span><span>32bit.cafe/holidays2023/</span><span></span></a></p><p><a href=\"https://tilde.zone/tags/web\">#<span>web</span></a> <a href=\"https://tilde.zone/tags/webdev\">#<span>webdev</span></a> <a href=\"https://tilde.zone/tags/indieweb\">#<span>indieweb</span></a> <a href=\"https://tilde.zone/tags/neocities\">#<span>neocities</span></a> <a href=\"https://tilde.zone/tags/personalweb\">#<span>personalweb</span></a> <a href=\"https://tilde.zone/tags/smallweb\">#<span>smallweb</span></a></p>",
        "text": "\ud83c\udf84 \u2744\ufe0f  just a few days left for the 32-bit cafe's holiday event!with a few different ways to participate, i have no doubt any last-minute (fellow) procrastinators can get something submitted by january 10th!i'm finishing up my holiday page now on https://xandra.cc to submit - can't wait to see what everyone has done!https://32bit.cafe/holidays2023/#web #webdev #indieweb #neocities #personalweb #smallweb"
    },
    "published": "2024-01-06T22:01:36+00:00",
    "post-type": "note",
    "_id": "39914841",
    "_source": "7235",
    "_is_read": false
}

{
    "type": "entry",
    "author": {
        "name": "@stpaultim",
        "url": "https://fosstodon.org/@stpaultim",
        "photo": null
    },
    "url": "https://fosstodon.org/@stpaultim/111711099906035451",
    "content": {
        "html": "<p>I just made a video promoting a 6 hour online course I'm offering to help beginners get started with Backdrop CMS.</p><p><a href=\"https://youtu.be/7kzMgawd5Dk\"><span>https://</span><span>youtu.be/7kzMgawd5Dk</span><span></span></a></p><p><a href=\"https://fosstodon.org/tags/OpenSourceCMS\">#<span>OpenSourceCMS</span></a> <a href=\"https://fosstodon.org/tags/BackdropCMS\">#<span>BackdropCMS</span></a> <a href=\"https://fosstodon.org/tags/Indieweb\">#<span>Indieweb</span></a></p>",
        "text": "I just made a video promoting a 6 hour online course I'm offering to help beginners get started with Backdrop CMS.https://youtu.be/7kzMgawd5Dk#OpenSourceCMS #BackdropCMS #Indieweb"
    },
    "published": "2024-01-06T21:21:49+00:00",
    "post-type": "note",
    "_id": "39914665",
    "_source": "7235",
    "_is_read": false
}

{
    "type": "entry",
    "author": {
        "name": "@lazcorp",
        "url": "https://thegoblin.market/@lazcorp",
        "photo": null
    },
    "url": "https://thegoblin.market/@lazcorp/111710342405219743",
    "content": {
        "html": "<p>Some of Jo's new Webmentions / Microformats / IndieWeb 88x31 badges from indieweb.org/buttons added as ... well, badges (with a little CSS)</p><p><a href=\"https://www.lazaruscorporation.co.uk/info/version\"><span>https://www.</span><span>lazaruscorporation.co.uk/info/</span><span>version</span></a></p><p><a href=\"https://thegoblin.market/tags/IndieWeb\">#<span>IndieWeb</span></a></p>",
        "text": "Some of Jo's new Webmentions / Microformats / IndieWeb 88x31 badges from indieweb.org/buttons added as ... well, badges (with a little CSS)https://www.lazaruscorporation.co.uk/info/version#IndieWeb"
    },
    "published": "2024-01-06T18:09:10+00:00",
    "post-type": "note",
    "_id": "39913477",
    "_source": "7235",
    "_is_read": false
}

{
    "type": "entry",
    "author": {
        "name": "@KevinMarks",
        "url": "https://xoxo.zone/@KevinMarks",
        "photo": null
    },
    "url": "https://xoxo.zone/@KevinMarks/111710107403962398",
    "content": {
        "html": "<p>James is excited about the future of the web <a href=\"https://jamesg.blog/2024/01/06/the-web-is-yours/\"><span>https://</span><span>jamesg.blog/2024/01/06/the-web</span><span>-is-yours/</span></a> <a href=\"https://xoxo.zone/tags/indieweb\">#<span>indieweb</span></a></p>",
        "text": "James is excited about the future of the web https://jamesg.blog/2024/01/06/the-web-is-yours/ #indieweb"
    },
    "published": "2024-01-06T17:09:25+00:00",
    "post-type": "note",
    "_id": "39913095",
    "_source": "7235",
    "_is_read": false
}

{
    "type": "entry",
    "author": {
        "name": "@janboddez",
        "url": "https://indieweb.social/@janboddez",
        "photo": null
    },
    "url": "https://indieweb.social/@janboddez/111709295855647349",
    "content": {
        "html": "<p>Using my Webmention plugin, I can now send mentions from both posts and comments.</p><p>If I reply to a note of mine using a reply *post* (or note), it\u2019ll send a mention to that note, and create a comment.</p><p>If I then reply to that comment using a reply *comment*, it\u2019ll send a mention to the reply *post* (and create a comment *there*).</p><p><a href=\"https://indieweb.social/tags/Webmention\">#<span>Webmention</span></a> inception.</p><p>The idea is obviously not to make things more complicated, but to be able to have complete threads in one place.</p><p><a href=\"https://indieweb.social/tags/WordPress\">#<span>WordPress</span></a> <a href=\"https://indieweb.social/tags/IndieWeb\">#<span>IndieWeb</span></a></p>",
        "text": "Using my Webmention plugin, I can now send mentions from both posts and comments.If I reply to a note of mine using a reply *post* (or note), it\u2019ll send a mention to that note, and create a comment.If I then reply to that comment using a reply *comment*, it\u2019ll send a mention to the reply *post* (and create a comment *there*).#Webmention inception.The idea is obviously not to make things more complicated, but to be able to have complete threads in one place.#WordPress #IndieWeb"
    },
    "published": "2024-01-06T13:43:01+00:00",
    "post-type": "note",
    "_id": "39911941",
    "_source": "7235",
    "_is_read": false
}

Jeremy Keith adactio.com

{
    "type": "entry",
    "published": "2024-01-06T11:21:42Z",
    "url": "https://adactio.com/links/20769",
    "category": [
        "thisismyjam",
        "music",
        "listening",
        "indieweb",
        "personal",
        "publishing",
        "webcomponents",
        "progressive",
        "enhancement",
        "frontend",
        "development",
        "customelements",
        "html",
        "javascript"
    ],
    "bookmark-of": [
        "https://paulrobertlloyd.com/2024/005/a1/jams/"
    ],
    "content": {
        "text": "These are my jams \u00b7 Paul Robert Lloyd\n\n\n\nI like how Paul has recreated his own version of This Is My Jam and I really like how he\u2019s done it with an HTML web component.",
        "html": "<h3>\n<a class=\"p-name u-bookmark-of\" href=\"https://paulrobertlloyd.com/2024/005/a1/jams/\">\nThese are my jams \u00b7 Paul Robert Lloyd\n</a>\n</h3>\n\n<p>I like how Paul has recreated <a href=\"https://paulrobertlloyd.com/jams/\">his own version of This Is My Jam</a> and I <em>really</em> like how he\u2019s done it with an <a href=\"https://adactio.com/journal/20618\">HTML web component</a>.</p>"
    },
    "author": {
        "type": "card",
        "name": "Jeremy Keith",
        "url": "https://adactio.com/",
        "photo": "https://adactio.com/images/photo-150.jpg"
    },
    "post-type": "bookmark",
    "_id": "39911126",
    "_source": "2",
    "_is_read": false
}

{
    "type": "entry",
    "author": {
        "name": "@hamatti",
        "url": "https://mastodon.world/@hamatti",
        "photo": null
    },
    "url": "https://mastodon.world/@hamatti/111708373028829211",
    "content": {
        "html": "<p>I use <a href=\"https://mastodon.world/tags/Notion\">#<span>Notion</span></a> as my headless CMS for my blog. One issue I ran into was that Notion only supports three levels of headings and sometimes I need more.</p><p>I documented a workaround that uses a custom renderer with notion-render and a trick of adding a -&gt; at the start of h3 to make it a h4 in the final render.</p><p><a href=\"https://hamatti.org/posts/workaround-for-notions-lack-of-heading-levels/\"><span>https://</span><span>hamatti.org/posts/workaround-f</span><span>or-notions-lack-of-heading-levels/</span></a></p><p><a href=\"https://mastodon.world/tags/Blogging\">#<span>Blogging</span></a> <a href=\"https://mastodon.world/tags/IndieWeb\">#<span>IndieWeb</span></a> <a href=\"https://mastodon.world/tags/StaticSiteGenerator\">#<span>StaticSiteGenerator</span></a> <a href=\"https://mastodon.world/tags/WebDev\">#<span>WebDev</span></a> <a href=\"https://mastodon.world/tags/Eleventy\">#<span>Eleventy</span></a></p>",
        "text": "I use #Notion as my headless CMS for my blog. One issue I ran into was that Notion only supports three levels of headings and sometimes I need more.I documented a workaround that uses a custom renderer with notion-render and a trick of adding a -> at the start of h3 to make it a h4 in the final render.https://hamatti.org/posts/workaround-for-notions-lack-of-heading-levels/#Blogging #IndieWeb #StaticSiteGenerator #WebDev #Eleventy"
    },
    "published": "2024-01-06T09:48:20+00:00",
    "post-type": "note",
    "_id": "39910661",
    "_source": "7235",
    "_is_read": false
}

{
    "type": "entry",
    "author": {
        "name": "@weirdwriter",
        "url": "https://tweesecake.social/@weirdwriter",
        "photo": null
    },
    "url": "https://tweesecake.social/@weirdwriter/111707810813167225",
    "content": {
        "html": "<p>For those in the <a href=\"https://tweesecake.social/tags/IndieWeb\">#<span>IndieWeb</span></a> space that want someone to host your static website for you, I've got 2 options.</p><p><a href=\"https://tiiny.host/host/host-eleventy/\"><span>https://</span><span>tiiny.host/host/host-eleventy/</span><span></span></a></p><p>and <a href=\"https://porkbun.com/products/webhosting/staticHosting\"><span>https://</span><span>porkbun.com/products/webhostin</span><span>g/staticHosting</span></a></p>",
        "text": "For those in the #IndieWeb space that want someone to host your static website for you, I've got 2 options.https://tiiny.host/host/host-eleventy/and https://porkbun.com/products/webhosting/staticHosting"
    },
    "published": "2024-01-06T07:25:21+00:00",
    "post-type": "note",
    "_id": "39910040",
    "_source": "7235",
    "_is_read": false
}

{
    "type": "entry",
    "author": {
        "name": "@xandra",
        "url": "https://tilde.zone/@xandra",
        "photo": null
    },
    "url": "https://tilde.zone/@xandra/111706552644799171",
    "content": {
        "html": "<p>second <a href=\"https://tilde.zone/tags/blog\">#<span>blog</span></a> entry is up about what i call \"tech saviors\" in hobbyist spaces and why we should leave our egos at the door: <a href=\"https://library.xandra.cc/no-tech-saviors/\"><span>https://</span><span>library.xandra.cc/no-tech-savi</span><span>ors/</span></a></p><p><a href=\"https://tilde.zone/tags/indieweb\">#<span>indieweb</span></a> <a href=\"https://tilde.zone/tags/personalweb\">#<span>personalweb</span></a> <a href=\"https://tilde.zone/tags/webdev\">#<span>webdev</span></a></p>",
        "text": "second #blog entry is up about what i call \"tech saviors\" in hobbyist spaces and why we should leave our egos at the door: https://library.xandra.cc/no-tech-saviors/#indieweb #personalweb #webdev"
    },
    "published": "2024-01-06T02:05:23+00:00",
    "post-type": "note",
    "_id": "39908669",
    "_source": "7235",
    "_is_read": false
}

{
    "type": "entry",
    "author": {
        "name": "@miclgael",
        "url": "https://mastodon.au/@miclgael",
        "photo": null
    },
    "url": "https://mastodon.au/@miclgael/111706008401795559",
    "content": {
        "html": "<p>Reading \"De-mystifying Web Mentions\" and getting even more mystified. </p><p><a href=\"https://mastodon.au/tags/indieweb\">#<span>indieweb</span></a> <a href=\"https://mastodon.au/tags/webmentions\">#<span>webmentions</span></a></p>",
        "text": "Reading \"De-mystifying Web Mentions\" and getting even more mystified. #indieweb #webmentions"
    },
    "published": "2024-01-05T23:46:59+00:00",
    "post-type": "note",
    "_id": "39907830",
    "_source": "7235",
    "_is_read": false
}

{
    "type": "entry",
    "author": {
        "name": "@kiko",
        "url": "https://indieweb.social/@kiko",
        "photo": null
    },
    "url": "https://indieweb.social/@kiko/111705709305830580",
    "content": {
        "html": "<p><span class=\"h-card\"><a class=\"u-url\" href=\"https://hachyderm.io/@facundoolano\">@<span>facundoolano</span></a></span> Reconnect with the good side of the Web 2024</p><p>This post grabbed me this morning, because it speaks to me from the soul about the danger of burnout in the IT industry and the joy you get when you can develop something for yourself and no one else. For me in particular, it gets exciting when it has something to do with the <a href=\"https://indieweb.social/tags/IndieWeb\">#<span>IndieWeb</span></a> and taking back control of your own data.</p><p>I\u2019m not familiar with <a href=\"https://indieweb.social/tags/Python\">#<span>Python</span></a> at the moment, but I know most of the concepts of ...</p><p><a href=\"https://kiko.io/notes/2024/reconnect-with-the-good-side-of-the-web\"><span>https://</span><span>kiko.io/notes/2024/reconnect-w</span><span>ith-the-good-side-of-the-web</span></a></p>",
        "text": "@facundoolano Reconnect with the good side of the Web 2024This post grabbed me this morning, because it speaks to me from the soul about the danger of burnout in the IT industry and the joy you get when you can develop something for yourself and no one else. For me in particular, it gets exciting when it has something to do with the #IndieWeb and taking back control of your own data.I\u2019m not familiar with #Python at the moment, but I know most of the concepts of ...https://kiko.io/notes/2024/reconnect-with-the-good-side-of-the-web"
    },
    "published": "2024-01-05T22:30:55+00:00",
    "post-type": "note",
    "_id": "39907311",
    "_source": "7235",
    "_is_read": false
}

{
    "type": "entry",
    "author": {
        "name": "@joachim",
        "url": "https://boitam.eu/@joachim",
        "photo": null
    },
    "url": "https://boitam.eu/@joachim/111705339860215932",
    "content": {
        "html": "<p>Lovingly fixing and improving your personal blog\u2019s theme is selfcare, right?</p><p><a href=\"https://boitam.eu/tags/blog\">#<span>blog</span></a> <a href=\"https://boitam.eu/tags/web\">#<span>web</span></a> <a href=\"https://boitam.eu/tags/indieWeb\">#<span>indieWeb</span></a></p>",
        "text": "Lovingly fixing and improving your personal blog\u2019s theme is selfcare, right?#blog #web #indieWeb"
    },
    "published": "2024-01-05T20:56:58+00:00",
    "post-type": "note",
    "_id": "39906535",
    "_source": "7235",
    "_is_read": false
}

Jeremy Cherfas jeremycherfas.net

I Wrote This

{
    "type": "entry",
    "published": "2024-01-06T15:20:00+01:00",
    "url": "https://www.jeremycherfas.net/blog/i-wrote-this",
    "name": "I Wrote This",
    "content": {
        "text": "There's an interesting discussion going on in the IndieWeb chat forums about signalling that your website does not use AI. JamesG, for example, displays a badge on each post (though not on his home page, that reads \"written by human not by AI\" and that links through to a site that explains why such a badge is a good thing: \"make sure humanity continues to advance\".\n\n\t\t\t There\u2019s more  \u27a2",
        "html": "<p><img alt=\"Small badge that reads &quot;written by human not by AI&quot;\" src=\"https://www.jeremycherfas.net/user/pages/03.blog/i-wrote-this/ai.png\" /></p>\n<p>There's an interesting discussion going on in the IndieWeb chat forums about signalling that your website does not use AI. JamesG, for example, displays a badge on each post (though not on his home page, that reads \"written by human <strong>not by AI</strong>\" and that links through to a site that explains why such a badge is a good thing: \"make sure humanity continues to advance\".</p>\n\n\t\t\t <span style=\"float:right;font-size:smaller;\"><a href=\"https://www.jeremycherfas.net/blog/i-wrote-this\">There\u2019s more  \u27a2</a></span>"
    },
    "author": {
        "type": "card",
        "name": "Jeremy Cherfas",
        "url": "https://jeremycherfas.net",
        "photo": "https://www.jeremycherfas.net/user/themes/tailwind/images/zoot.jpg"
    },
    "post-type": "article",
    "_id": "39906097",
    "_source": "202",
    "_is_read": false
}

These are my jams

{
    "type": "entry",
    "author": {
        "name": "Paul Robert Lloyd",
        "url": "https://paulrobertlloyd.com",
        "photo": null
    },
    "url": "https://paulrobertlloyd.com/2024/005/a1/jams/",
    "published": "2024-01-05T15:30:00+00:00",
    "content": {
        "html": "<p>Sat in my local coffee shop on Wednesday morning, with Feist\u2019s 1234 playing on the radio, I had a sudden melancholy thought: I miss This is My Jam.</p><p><a href=\"https://indieweb.org/This_Is_My_Jam\">This is My Jam</a> was a short-lived social network where users could share a song they were listening to on a given week. I tended to use it to share whatever embarrassing tune was stuck in my head, typically one heard in a television advertisement. But sometimes it was a useful means of expressing myself, subtweeting my feelings without being explicit about them.</p><p>The service was shutdown in 2015, but <a href=\"https://thisismyjam.tumblr.com/post/126260430022/jam-preserves\">great care was taken to ensure that all the data was archived</a>. The site can be <a href=\"https://web.archive.org/web/20210926084455/https://www.thisismyjam.com/\">browsed on the Wayback Machine</a>, while <a href=\"https://archive.org/details/thisismyjam-datadump\">a dump of anonymised user data</a> was saved to the Internet Archive.</p><p>I then had a second thought; I could recreate This is My Jam on my own website. And <a href=\"https://paulrobertlloyd.com/jams/\">that\u2019s what I\u2019ve done</a>.</p><h2>Adding jams</h2><p>The first step I take when adding a new content type is to seek out prior art. The IndieWeb wiki describes a <a href=\"https://indieweb.org/jam\">jam post type</a> inspired by This Is My Jam, whose content starts with the \u266b character followed by a white space character, and then a link to or embed of a music video or audio track.</p><p>I\u2019d hoped that having posts with links to YouTube videos would mean my jams would benefit from <a href=\"https://paulrobertlloyd.com/2023/098/a1/embedding/\">the small enhancement I make to YouTube links</a>. Turns out <a href=\"https://github.com/paulrobertlloyd/markdown-it-rules#linked-embeds\">my custom rule for markdown-it</a> only works if a paragraph starts with and only includes a link; the \u266b prefix breaks this convention.</p><p>Then I remembered that <a href=\"http://music.apple.com/\">Apple Music</a> allows users to share links to songs on its platform. Instead of linking to music videos on Youtube, maybe I could link to songs on Apple Music instead? Investigating further, I discovered that Apple Music has a good library of music videos, and provides an embed code that supports both songs and videos.</p><p>So, I want to save this Markdown:</p><pre><code>\u266b [&lt;cite&gt;1234&lt;/cite&gt; by Feist](https://music.apple.com/gb/album/1234/1440743123?i=1440743244)</code></pre><p>and generate this HTML:</p><pre><code>&lt;iframe src=\"https://embed.music.apple.com/gb/album/1234/1440743123?i=1440743244\" height=\"175\"&gt;&lt;/iframe&gt;</code></pre><p>My first thought was to create a <a href=\"http://liquidjs.com/\">LiquidJS</a> template filter to perform the transformation. Or maybe I could support another custom rule for markdown-it; a complex and fragile option I was keen to avoid.</p><p>Besides increasing the complexity of my templates and potentially increasing build time, both of these options would mean showing an Apple Music embed that, annoyingly and for no good reason, doesn\u2019t work without JavaScript.</p><p>Fortunately, there\u2019s a shiny new tool in my toolbox: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Web_components\">web components</a>!</p><h2>Displaying jams</h2><p>I\u2019ve created a new custom element \u2014 with the fun name <code>apple-jam</code> \u2013 that, when used to wrap content containing a link to Apple Music, replaces the link with an Apple Music embed:</p><pre><code>&lt;apple-jam&gt;  &lt;p&gt;\u266b &lt;a href=\"https://music.apple.com/gb/album/1234/1440743123?i=1440743244\"&gt;    &lt;cite&gt;1234&lt;/cite&gt; by Feist  &lt;/a&gt;&lt;/p&gt;&lt;/apple-jam&gt;</code></pre><p>This is the script used to define this custom element:</p><pre><code>class AppleJamElement extends HTMLElement {  constructor() {    super();    this.appleMusicLink = this.querySelector(`a[href*=\"music.apple.com\"]`);    this.jam = this.appleMusicLink.parentNode;  }  embedCode(href) {    const embed = document.createElement(\"iframe\");    embed.src = href.replace(\"music.apple.com\", \"embed.music.apple.com\");    embed.height = embed.src.includes(\"music-video\") ? 450 : 175;    return embed;  }  connectedCallback() {    if (this.appleMusicLink) {      this.jam.after(this.embedCode(this.appleMusicLink.href));      this.jam.remove();    }  }}customElements.define(\"apple-jam\", AppleJamElement);</code></pre><p>This custom element does a few things:</p><ul><li>Finds a link whose <code>href</code> attribute includes <code>music.apple.com</code></li><li>If such a link exists, creates an <code>iframe</code> element, with the <code>src</code>  value derived from the <code>href</code></li><li>Increases the height of the <code>iframe</code> if the link is to a music video instead of a song</li><li>Replaces the original link with this <code>iframe</code> embed</li></ul><p>And if this doesn\u2019t work for whatever reason, the original link remains.</p><p>If you don\u2019t have an Apple Music account, you can only play an excerpt of the song or music video. While not great, it works for me and well, this website is for me, not you.</p><p>I\u2019m pretty happy with <a href=\"https://paulrobertlloyd.com/jams/\">the result</a>. Once again I can share my atrocious taste in music and/or obliquely express my feelings at a given point in time. It also means I can republish all the posts I\u2019d previously made to This Is My Jam.</p><p>This was <a href=\"https://paulrobertlloyd.com/2023/272/a1/classnames/\">another one-day build</a>, cobbled together the evening of the day I had a melancholy thought about a dead social network and decided to recreate part of it on my website.</p><p>The <a href=\"https://matthiasott.com/notes/2024-the-year-of-the-personal-website\">year of the personal website</a> continues into 2024.</p><p>This post is for <a href=\"https://ma.tt/2024/01/birthday-gift/\">Matt\u2019s birthday</a>.</p><p>Reply via email</p>",
        "text": "Sat in my local coffee shop on Wednesday morning, with Feist\u2019s 1234 playing on the radio, I had a sudden melancholy thought: I miss This is My Jam.This is My Jam was a short-lived social network where users could share a song they were listening to on a given week. I tended to use it to share whatever embarrassing tune was stuck in my head, typically one heard in a television advertisement. But sometimes it was a useful means of expressing myself, subtweeting my feelings without being explicit about them.The service was shutdown in 2015, but great care was taken to ensure that all the data was archived. The site can be browsed on the Wayback Machine, while a dump of anonymised user data was saved to the Internet Archive.I then had a second thought; I could recreate This is My Jam on my own website. And that\u2019s what I\u2019ve done.Adding jamsThe first step I take when adding a new content type is to seek out prior art. The IndieWeb wiki describes a jam post type inspired by This Is My Jam, whose content starts with the \u266b character followed by a white space character, and then a link to or embed of a music video or audio track.I\u2019d hoped that having posts with links to YouTube videos would mean my jams would benefit from the small enhancement I make to YouTube links. Turns out my custom rule for markdown-it only works if a paragraph starts with and only includes a link; the \u266b prefix breaks this convention.Then I remembered that Apple Music allows users to share links to songs on its platform. Instead of linking to music videos on Youtube, maybe I could link to songs on Apple Music instead? Investigating further, I discovered that Apple Music has a good library of music videos, and provides an embed code that supports both songs and videos.So, I want to save this Markdown:\u266b [<cite>1234</cite> by Feist](https://music.apple.com/gb/album/1234/1440743123?i=1440743244)and generate this HTML:<iframe src=\"https://embed.music.apple.com/gb/album/1234/1440743123?i=1440743244\" height=\"175\"></iframe>My first thought was to create a LiquidJS template filter to perform the transformation. Or maybe I could support another custom rule for markdown-it; a complex and fragile option I was keen to avoid.Besides increasing the complexity of my templates and potentially increasing build time, both of these options would mean showing an Apple Music embed that, annoyingly and for no good reason, doesn\u2019t work without JavaScript.Fortunately, there\u2019s a shiny new tool in my toolbox: web components!Displaying jamsI\u2019ve created a new custom element \u2014 with the fun name apple-jam \u2013 that, when used to wrap content containing a link to Apple Music, replaces the link with an Apple Music embed:<apple-jam>  <p>\u266b <a href=\"https://music.apple.com/gb/album/1234/1440743123?i=1440743244\">    <cite>1234</cite> by Feist  </a></p></apple-jam>This is the script used to define this custom element:class AppleJamElement extends HTMLElement {  constructor() {    super();    this.appleMusicLink = this.querySelector(`a[href*=\"music.apple.com\"]`);    this.jam = this.appleMusicLink.parentNode;  }  embedCode(href) {    const embed = document.createElement(\"iframe\");    embed.src = href.replace(\"music.apple.com\", \"embed.music.apple.com\");    embed.height = embed.src.includes(\"music-video\") ? 450 : 175;    return embed;  }  connectedCallback() {    if (this.appleMusicLink) {      this.jam.after(this.embedCode(this.appleMusicLink.href));      this.jam.remove();    }  }}customElements.define(\"apple-jam\", AppleJamElement);This custom element does a few things:Finds a link whose href attribute includes music.apple.comIf such a link exists, creates an iframe element, with the src  value derived from the hrefIncreases the height of the iframe if the link is to a music video instead of a songReplaces the original link with this iframe embedAnd if this doesn\u2019t work for whatever reason, the original link remains.If you don\u2019t have an Apple Music account, you can only play an excerpt of the song or music video. While not great, it works for me and well, this website is for me, not you.I\u2019m pretty happy with the result. Once again I can share my atrocious taste in music and/or obliquely express my feelings at a given point in time. It also means I can republish all the posts I\u2019d previously made to This Is My Jam.This was another one-day build, cobbled together the evening of the day I had a melancholy thought about a dead social network and decided to recreate part of it on my website.The year of the personal website continues into 2024.This post is for Matt\u2019s birthday.Reply via email"
    },
    "name": "These are my jams",
    "post-type": "article",
    "_id": "39905444",
    "_source": "3686",
    "_is_read": false
}

{
    "type": "entry",
    "author": {
        "name": "@JanMiksovsky",
        "url": "https://fosstodon.org/@JanMiksovsky",
        "photo": null
    },
    "url": "https://fosstodon.org/@JanMiksovsky/111704376114441895",
    "content": {
        "html": "<p>Even the simplest possible static site requires site structure (organizing the files into a folder hierarchy) and a server that can respond to web requests with those files. A non-trivial site generally also requires some way to reuse HTML across pages. Where is all that represented in the first diagram?</p><p><a href=\"https://fosstodon.org/tags/frontend\">#<span>frontend</span></a> <a href=\"https://fosstodon.org/tags/indieweb\">#<span>indieweb</span></a></p>",
        "text": "Even the simplest possible static site requires site structure (organizing the files into a folder hierarchy) and a server that can respond to web requests with those files. A non-trivial site generally also requires some way to reuse HTML across pages. Where is all that represented in the first diagram?#frontend #indieweb"
    },
    "published": "2024-01-05T16:51:52+00:00",
    "post-type": "note",
    "_id": "39904296",
    "_source": "7235",
    "_is_read": false
}

{
    "type": "entry",
    "author": {
        "name": "@techlifeweb",
        "url": "https://indieweb.social/@techlifeweb",
        "photo": null
    },
    "url": "https://indieweb.social/@techlifeweb/111704152257448023",
    "content": {
        "html": "<p>My site has morphed over time. Used to self-host Wordpress and now 11ty. I'm updating again to add a side section for a digital garden. I haven't exactly figured out how I'm going to use but it will be good to have a spot where I can put things that aren't \"blog-y\" and it  has been a fun little New Year project. Plus, all the kids are building Digital Gardens these days \ud83d\ude0e <a href=\"https://indieweb.social/tags/indieweb\">#<span>indieweb</span></a> <a href=\"https://indieweb.social/tags/digitalgarden\">#<span>digitalgarden</span></a></p>",
        "text": "My site has morphed over time. Used to self-host Wordpress and now 11ty. I'm updating again to add a side section for a digital garden. I haven't exactly figured out how I'm going to use but it will be good to have a spot where I can put things that aren't \"blog-y\" and it  has been a fun little New Year project. Plus, all the kids are building Digital Gardens these days \ud83d\ude0e #indieweb #digitalgarden"
    },
    "published": "2024-01-05T15:54:56+00:00",
    "post-type": "note",
    "_id": "39903733",
    "_source": "7235",
    "_is_read": false
}

{
    "type": "entry",
    "author": {
        "name": "@developerjustin",
        "url": "https://mastodon.social/@developerjustin",
        "photo": null
    },
    "url": "https://mastodon.social/@developerjustin/111703617311338697",
    "content": {
        "html": "<p>New blog up on ferrell.rocks! </p><p>Why did I redo my website after neglecting it for so long? How did I do it? What does it mean for my website going forward? </p><p>It's all in there! </p><p><a href=\"https://mastodon.social/tags/IndieWeb\">#<span>IndieWeb</span></a> <a href=\"https://mastodon.social/tags/blogging\">#<span>blogging</span></a> <a href=\"https://mastodon.social/tags/webdev\">#<span>webdev</span></a> </p><p><a href=\"https://ferrell.rocks/new-website-a-contractors-home/\"><span>https://</span><span>ferrell.rocks/new-website-a-co</span><span>ntractors-home/</span></a></p>",
        "text": "New blog up on ferrell.rocks! Why did I redo my website after neglecting it for so long? How did I do it? What does it mean for my website going forward? It's all in there! #IndieWeb #blogging #webdev https://ferrell.rocks/new-website-a-contractors-home/"
    },
    "published": "2024-01-05T13:38:54+00:00",
    "post-type": "note",
    "_id": "39902596",
    "_source": "7235",
    "_is_read": false
}

{
    "type": "entry",
    "author": {
        "name": "@cassey",
        "url": "https://urbanists.social/@cassey",
        "photo": null
    },
    "url": "https://urbanists.social/@cassey/111700323762518001",
    "content": {
        "html": "<p><a href=\"https://library.xandra.cc/everyone-should-blog/\"><span>https://</span><span>library.xandra.cc/everyone-sho</span><span>uld-blog/</span></a> <br />This was great. </p><p>&gt; \"i want and wish for more people feel like they themselves can be what they show the world\u2014not just their work or their projects. i want to read your thoughts, your feelings, your perceptions of the world as it's happening around you. romanticize your life; tell me the minute details of your commute\u2014your perception is yours, after all, and i've never experienced it before.\"</p><p><a href=\"https://urbanists.social/tags/OwnYourWeb\">#<span>OwnYourWeb</span></a> <a href=\"https://urbanists.social/tags/IndieWeb\">#<span>IndieWeb</span></a></p>",
        "text": "https://library.xandra.cc/everyone-should-blog/ \nThis was great. > \"i want and wish for more people feel like they themselves can be what they show the world\u2014not just their work or their projects. i want to read your thoughts, your feelings, your perceptions of the world as it's happening around you. romanticize your life; tell me the minute details of your commute\u2014your perception is yours, after all, and i've never experienced it before.\"#OwnYourWeb #IndieWeb"
    },
    "published": "2024-01-04T23:41:18+00:00",
    "post-type": "note",
    "_id": "39897740",
    "_source": "7235",
    "_is_read": false
}

{
    "type": "entry",
    "author": {
        "name": "@accordionpolar",
        "url": "https://indieweb.social/@accordionpolar",
        "photo": null
    },
    "url": "https://indieweb.social/@accordionpolar/111700075826495180",
    "content": {
        "html": "<p>IndieWeb Carnival January 2024 has received its second submission! \ud83d\udd7a </p><p><a href=\"https://sarajaksa.eu/2024/01/indieweb-carnival-january-2024-the-feeling-of-being-myself/\"><span>https://</span><span>sarajaksa.eu/2024/01/indieweb-</span><span>carnival-january-2024-the-feeling-of-being-myself/</span></a></p><p>Join Sara in embracing your weird this year!</p><p><a href=\"https://indieweb.social/tags/indieweb\">#<span>indieweb</span></a> <a href=\"https://indieweb.social/tags/smallweb\">#<span>smallweb</span></a> <a href=\"https://indieweb.social/tags/blog\">#<span>blog</span></a> <a href=\"https://indieweb.social/tags/writing\">#<span>writing</span></a> <a href=\"https://indieweb.social/tags/web\">#<span>web</span></a> <a href=\"https://indieweb.social/tags/internet\">#<span>internet</span></a> <a href=\"https://indieweb.social/tags/weird\">#<span>weird</span></a> <a href=\"https://indieweb.social/tags/fun\">#<span>fun</span></a></p>",
        "text": "IndieWeb Carnival January 2024 has received its second submission! \ud83d\udd7a https://sarajaksa.eu/2024/01/indieweb-carnival-january-2024-the-feeling-of-being-myself/Join Sara in embracing your weird this year!#indieweb #smallweb #blog #writing #web #internet #weird #fun"
    },
    "published": "2024-01-04T22:38:15+00:00",
    "post-type": "note",
    "_id": "39897331",
    "_source": "7235",
    "_is_read": false
}