fluffy rambles: IndieWeb + Tumblr = 💜

{
    "type": "entry",
    "author": {
        "name": "fluffy",
        "url": "http://beesbuzz.biz/",
        "photo": null
    },
    "url": "http://beesbuzz.biz/blog/9477-IndieWeb-Tumblr",
    "published": "2022-05-25T00:25:23-07:00",
    "content": {
        "html": "<a href=\"http://beesbuzz.biz/blog/?id=9477&amp;tag=indieweb\">#IndieWeb</a><a href=\"http://beesbuzz.biz/blog/?id=9477&amp;tag=tumblr\">#Tumblr</a>",
        "text": "#IndieWeb#Tumblr"
    },
    "name": "fluffy rambles: IndieWeb + Tumblr = \ud83d\udc9c",
    "post-type": "article",
    "_id": "29311527",
    "_source": "3782",
    "_is_read": true
}

Tantek Çelik tantek.com

{
    "type": "entry",
    "published": "2022-05-24 11:25-0700",
    "url": "http://tantek.com/2022/144/t1/redirected-github-ownyourlinks",
    "category": [
        "OwnYourLinks:"
    ],
    "content": {
        "text": "Since ~2021* I\u2019ve redirected /github to my GitHub profile to own my links to GH repos like https://tantek.com/github/cassis\n\nApache htaccess code to #OwnYourLinks:\n\nRedirectTemp /github https://github.com/tantek\n\nchange /tantek to your GitHub /username\n\nMore on this technique: https://indieweb.org/ownyourlinks\n\n* https://tantek.com/2021/084/t1/ownyourlinks-indieweb-github-redirect",
        "html": "Since ~2021* I\u2019ve redirected /github to my GitHub profile to own my links to GH repos like <a href=\"https://tantek.com/github/cassis\">https://tantek.com/github/cassis</a><br /><br />Apache htaccess code to #<span class=\"p-category\">OwnYourLinks:</span><br /><br />RedirectTemp /github <a href=\"https://github.com/tantek\">https://github.com/tantek</a><br /><br />change /tantek to your GitHub /username<br /><br />More on this technique: <a href=\"https://indieweb.org/ownyourlinks\">https://indieweb.org/ownyourlinks</a><br /><br />* <a href=\"https://tantek.com/2021/084/t1/ownyourlinks-indieweb-github-redirect\">https://tantek.com/2021/084/t1/ownyourlinks-indieweb-github-redirect</a>"
    },
    "author": {
        "type": "card",
        "name": "Tantek \u00c7elik",
        "url": "http://tantek.com/",
        "photo": "http://tantek.com/photo.jpg"
    },
    "post-type": "note",
    "_id": "29299720",
    "_source": "1",
    "_is_read": true
}

Today I Learned today-i-learned.net

{
    "type": "entry",
    "author": {
        "name": "Today I Learned",
        "url": "https://today-i-learned.net",
        "photo": "https://avatars.micro.blog/avatars/2021/10400.jpg"
    },
    "url": "https://today-i-learned.net/2022/05/24/133000.html",
    "content": {
        "html": "\ud83d\udd16 <strong>Reminder:</strong> <a href=\"https://today-i-learned.net/links/open-web/\">Open Web Links</a>\n \n\n<p>Software that is made for the open web and works with Micro.blog, including apps, extensions, and integrations.</p>\n\n<p>See also: <a href=\"https://indieweb.org/Micro.blog\">IndieWeb wiki page for Micro.blog</a></p>",
        "text": "\ud83d\udd16 Reminder: Open Web Links\n \n\nSoftware that is made for the open web and works with Micro.blog, including apps, extensions, and integrations.\n\nSee also: IndieWeb wiki page for Micro.blog"
    },
    "published": "2022-05-24T12:30:00+00:00",
    "post-type": "note",
    "_id": "33379997",
    "_source": "7224",
    "_is_read": true
}

Chris Aldrich stream.boffosocko.com/profile/chrisaldrich

{
    "type": "entry",
    "published": "2022-05-24T06:26:00+00:00",
    "url": "http://stream.boffosocko.com/2022/lordmatt-ill-have-to-watch-this-post-to-see-where",
    "syndication": [
        "https://twitter.com/ChrisAldrich/status/1528985782928789504"
    ],
    "in-reply-to": [
        "https://twitter.com/lordmatt/status/1528317117619130370",
        "https://lordmatt.co.uk/technology/the-internet/all-the-active-sites-using-webmention-that-i-find-so-far-may-2022/"
    ],
    "content": {
        "text": "@lordmatt I'll have to watch this post to see where it goes. \n\nThis Twitter search for a common pattern will find lots of sites https://twitter.com/search?q=test%20webmention&src=typed_query&f=live",
        "html": "@lordmatt I'll have to watch this post to see where it goes. <br />\nThis Twitter search for a common pattern will find lots of sites <a href=\"https://twitter.com/search?q=test%20webmention&amp;src=typed_query&amp;f=live\">https://twitter.com/search?q=test%20webmention&amp;src=typed_query&amp;f=live</a>"
    },
    "author": {
        "type": "card",
        "name": "Chris Aldrich",
        "url": "http://stream.boffosocko.com/profile/chrisaldrich",
        "photo": "http://stream.boffosocko.com/file/600427b81f7785e704eadfe511a9270f/thumb.jpg"
    },
    "post-type": "reply",
    "_id": "29285945",
    "_source": "192",
    "_is_read": true
}

gRegor Morrill gregorlove.com

{
    "type": "entry",
    "published": "2022-05-23 12:58-0700",
    "url": "https://gregorlove.com/2022/05/i-tried-sending-again/",
    "syndication": [
        "https://twitter.com/gRegorLove/status/1528828010090188800"
    ],
    "in-reply-to": [
        "https://twitter.com/gRegorLove/status/1528822901641723904"
    ],
    "content": {
        "text": "I tried sending again with the form and got the general error \"There has been a critical error on this website.\"\n\nThis is the post I'm trying to send in case you want to debug or try re-sending the webmention: https://gregorlove.com/2022/05/open-mentions-is-an-interesting/",
        "html": "<p>I tried sending again with the form and got the general error \"There has been a critical error on this website.\"</p>\n\n<p>This is the post I'm trying to send in case you want to debug or try re-sending the webmention: <a href=\"https://gregorlove.com/2022/05/open-mentions-is-an-interesting/\">https://gregorlove.com/2022/05/open-mentions-is-an-interesting/</a></p>"
    },
    "author": {
        "type": "card",
        "name": "gRegor Morrill",
        "url": "https://gregorlove.com/",
        "photo": "https://gregorlove.com/site/assets/files/3473/profile-2016-med.jpg"
    },
    "post-type": "reply",
    "_id": "29279850",
    "_source": "95",
    "_is_read": true
}

gRegor Morrill gregorlove.com

{
    "type": "entry",
    "published": "2022-05-23 12:38-0700",
    "url": "https://gregorlove.com/2022/05/no-worries-i-had-another/",
    "syndication": [
        "https://twitter.com/gRegorLove/status/1528822901641723904"
    ],
    "in-reply-to": [
        "https://twitter.com/lordmatt/status/1528648510433898496"
    ],
    "content": {
        "text": "No worries! I had another Webmention issue sending to both your site and @openmentions. I tagged you in a GitHub issue.\n\nIf you\u2019re interested, IndieWeb has a WordPress chat channel with a helpful group of people, including the plugin authors: indieweb.org/discuss",
        "html": "<p>No worries! I had another Webmention issue sending to both your site and @openmentions. I tagged you in a GitHub issue.</p>\n\n<p>If you\u2019re interested, IndieWeb has a WordPress chat channel with a helpful group of people, including the plugin authors: <a href=\"https://indieweb.org/discuss\">indieweb.org/discuss</a></p>"
    },
    "author": {
        "type": "card",
        "name": "gRegor Morrill",
        "url": "https://gregorlove.com/",
        "photo": "https://gregorlove.com/site/assets/files/3473/profile-2016-med.jpg"
    },
    "post-type": "reply",
    "_id": "29279851",
    "_source": "95",
    "_is_read": true
}

gRegor Morrill gregorlove.com

{
    "type": "entry",
    "published": "2022-05-21 16:23-0700",
    "url": "https://gregorlove.com/2022/05/open-mentions-is-an-interesting/",
    "category": [
        "indieweb"
    ],
    "in-reply-to": [
        "https://openmentions.com/special/about/"
    ],
    "content": {
        "text": "Open Mentions is an interesting addition in the category of IndieWeb aggregators that use Webmention. I wonder if microformats2 could be used to include the machine-readable metadata, especially since Matt\u2019s thoughts noted \u201cthis should reflect the information that the user sees on-page.\u201d\n\nSome other interesting sites like this are indieweb.xyz and indieforums.net.",
        "html": "<p><a href=\"https://openmentions.com/\">Open Mentions</a> is an interesting addition in the category of IndieWeb aggregators that use Webmention. I wonder if <a href=\"https://microformats.org/wiki/microformats2\">microformats2</a> could be used to include the machine-readable metadata, especially since Matt\u2019s <a href=\"https://lordmatt.co.uk/matts-stuff/projects-and-ideas/thoughts-on-opentopics-metadata/\">thoughts</a> noted \u201cthis should reflect the information that the user sees on-page.\u201d</p>\n\n<p>Some other interesting sites like this are <a href=\"https://indieweb.xyz/\">indieweb.xyz</a> and <a href=\"https://www.indieforums.net/\">indieforums.net</a>.</p>"
    },
    "author": {
        "type": "card",
        "name": "gRegor Morrill",
        "url": "https://gregorlove.com/",
        "photo": "https://gregorlove.com/site/assets/files/3473/profile-2016-med.jpg"
    },
    "post-type": "reply",
    "_id": "29244018",
    "_source": "95",
    "_is_read": true
}

gRegor Morrill gregorlove.com

{
    "type": "entry",
    "published": "2022-05-21 15:18-0700",
    "url": "https://gregorlove.com/2022/05/hi-matt/",
    "category": [
        "indieweb"
    ],
    "in-reply-to": [
        "https://lordmatt.co.uk/technology/the-internet/social-media/joining-the-indieweb/"
    ],
    "content": {
        "text": "Hi, Matt! It has been several years but I remember you from back in the Nucleus CMS days. Lovely to see you getting into indieweb. I have really enjoyed that community and the cool things they\u2019re doing! Have you joined any of their virtual meetups like Homebrew Website Club?",
        "html": "<p>Hi, Matt! It has been several years but I remember you from back in the Nucleus CMS days. Lovely to see you getting into indieweb. I have really enjoyed that community and the cool things they\u2019re doing! Have you joined any of their virtual meetups like <a href=\"https://events.indieweb.org/tag/hwc\">Homebrew Website Club</a>?</p>"
    },
    "author": {
        "type": "card",
        "name": "gRegor Morrill",
        "url": "https://gregorlove.com/",
        "photo": "https://gregorlove.com/site/assets/files/3473/profile-2016-med.jpg"
    },
    "post-type": "reply",
    "_id": "29244019",
    "_source": "95",
    "_is_read": true
}

[Note] Just updating my … hmm, well, not sure exactly to be ho…

{
    "type": "entry",
    "author": {
        "name": "<span class='p-author h-card'>allaboutgeorge_pb7dn4</span>",
        "url": "https://www.allaboutgeorge.com/",
        "photo": null
    },
    "url": "https://www.allaboutgeorge.com/2022/05/21/46/",
    "published": "2022-05-21T15:36:44-07:00",
    "content": {
        "html": "Just updating my \u2026 hmm, well, not sure exactly to be honest. WordPress? Indieweb? Micro.blog POSSE feeder? Federated domicile? Let\u2019s see.",
        "text": "Just updating my \u2026 hmm, well, not sure exactly to be honest. WordPress? Indieweb? Micro.blog POSSE feeder? Federated domicile? Let\u2019s see."
    },
    "name": "[Note] Just updating my \u2026 hmm, well, not sure exactly to be ho\u2026",
    "post-type": "article",
    "_id": "29242928",
    "_source": "4592",
    "_is_read": true
}

Chris Aldrich stream.boffosocko.com/profile/chrisaldrich

{
    "type": "entry",
    "published": "2022-05-21T19:56:42+00:00",
    "url": "http://stream.boffosocko.com/2022/lordmatt-im-not-aware-of-a-centralized-collection-yet-some",
    "syndication": [
        "https://twitter.com/ChrisAldrich/status/1528102624909836288"
    ],
    "in-reply-to": [
        "https://twitter.com/lordmatt/status/1527652651088871425"
    ],
    "content": {
        "text": "@lordmatt I'm not aware of a centralized collection (yet). Some, but not all, of the projects and sites you'll find at https://indieweb.org/discovery have some resources for finding people who can send/receive webmentions. Everyone on @microdotblog certainly can.",
        "html": "<a href=\"https://twitter.com/lordmatt\">@lordmatt</a> I'm not aware of a centralized collection (yet). Some, but not all, of the projects and sites you'll find at <a href=\"https://indieweb.org/discovery\">https://indieweb.org/discovery</a> have some resources for finding people who can send/receive webmentions. Everyone on <a href=\"https://twitter.com/microdotblog\">@microdotblog</a> certainly can."
    },
    "author": {
        "type": "card",
        "name": "Chris Aldrich",
        "url": "http://stream.boffosocko.com/profile/chrisaldrich",
        "photo": "http://stream.boffosocko.com/file/600427b81f7785e704eadfe511a9270f/thumb.jpg"
    },
    "post-type": "reply",
    "_id": "29241947",
    "_source": "192",
    "_is_read": true
}

Chris Aldrich stream.boffosocko.com/profile/chrisaldrich

{
    "type": "entry",
    "published": "2022-05-18T17:05:21+00:00",
    "url": "http://stream.boffosocko.com/2022/testing-out-your-webmention-set-up-from-another-site-if",
    "in-reply-to": [
        "https://palashbauri.in/11122021/"
    ],
    "content": {
        "text": "Testing out your webmention set up from another site. If this works, then congratulations!"
    },
    "author": {
        "type": "card",
        "name": "Chris Aldrich",
        "url": "http://stream.boffosocko.com/profile/chrisaldrich",
        "photo": "http://stream.boffosocko.com/file/600427b81f7785e704eadfe511a9270f/thumb.jpg"
    },
    "post-type": "reply",
    "_id": "29173662",
    "_source": "192",
    "_is_read": true
}

Chris Aldrich stream.boffosocko.com/profile/chrisaldrich

{
    "type": "entry",
    "published": "2022-05-17T19:42:36+00:00",
    "url": "http://stream.boffosocko.com/2022/a-refback-remember-those-today-reminded-me-about-this-post",
    "category": [
        "creativity",
        "fun"
    ],
    "syndication": [
        "https://twitter.com/ChrisAldrich/status/1526649815857258497",
        "https://mastodon.social/@chrisaldrich/108318993816999011"
    ],
    "content": {
        "text": "A refback (remember those?!) today reminded me about this post: Non-technical IndieWeb: Fun, Creativity, Community, and \u201cContent\u201d https://boffosocko.com/2020/12/20/non-technical-indieweb-fun-creativity-community-and-content/\n\nI should try to add more on #creativity and #fun to my IndieWeb Collection https://boffosocko.com/research/indieweb/",
        "html": "A refback (remember those?!) today reminded me about this post: Non-technical IndieWeb: Fun, Creativity, Community, and \u201cContent\u201d <a href=\"https://boffosocko.com/2020/12/20/non-technical-indieweb-fun-creativity-community-and-content/\">https://boffosocko.com/2020/12/20/non-technical-indieweb-fun-creativity-community-and-content/</a><br />\nI should try to add more on <a href=\"http://stream.boffosocko.com/tag/creativity\" class=\"p-category\">#creativity</a> and <a href=\"http://stream.boffosocko.com/tag/fun\" class=\"p-category\">#fun</a> to my IndieWeb Collection <a href=\"https://boffosocko.com/research/indieweb/\">https://boffosocko.com/research/indieweb/</a>"
    },
    "author": {
        "type": "card",
        "name": "Chris Aldrich",
        "url": "http://stream.boffosocko.com/profile/chrisaldrich",
        "photo": "http://stream.boffosocko.com/file/600427b81f7785e704eadfe511a9270f/thumb.jpg"
    },
    "post-type": "note",
    "_id": "29153054",
    "_source": "192",
    "_is_read": true
}

{
    "type": "entry",
    "published": "2022-05-16T21:11:26.375033075+03:00",
    "url": "https://fireburn.ru/posts/aRR3Aea",
    "category": [
        "programming",
        "microformats"
    ],
    "content": {
        "text": "That feeling when you write a unit test using a library and then accidentally discover a bug in that exact library instead of your own code...\n\nThe bug in question, if you\u2019re interested.",
        "html": "<p>That feeling when you write a unit test using a library and then accidentally discover a bug in that exact library instead of your own code...</p>\n\n<p><a href=\"https://gitlab.com/maxburon/microformats-parser/-/issues/7\">The bug in question</a>, if you\u2019re interested.</p>"
    },
    "post-type": "note",
    "_id": "29132116",
    "_source": "1371",
    "_is_read": true
}

Chris Aldrich stream.boffosocko.com/profile/chrisaldrich

{
    "type": "entry",
    "published": "2022-05-15T23:08:39+00:00",
    "url": "http://stream.boffosocko.com/2022/writing-ftwindiewebtylerangertstatus1525964795219951616s20ts66cnqqb45rjcrkazto7sq",
    "category": [
        "FTW",
        "IndieWeb"
    ],
    "syndication": [
        "https://twitter.com/ChrisAldrich/status/1525977236586758144",
        "https://mastodon.social/@chrisaldrich/108308485823472446"
    ],
    "in-reply-to": [
        "https://twitter.com/tylerangert/status/1525964795219951616?s=20&t=S66cNQQB45rjCRKAzto7SQ"
    ],
    "content": {
        "text": "Writing #FTW\n#IndieWeb\n\nhttps://twitter.com/tylerangert/status/1525964795219951616?s=20&t=S66cNQQB45rjCRKAzto7SQ",
        "html": "Writing <a href=\"http://stream.boffosocko.com/tag/FTW\" class=\"p-category\">#FTW</a><br /><a href=\"http://stream.boffosocko.com/tag/IndieWeb\" class=\"p-category\">#IndieWeb</a><br /><br /><a href=\"https://twitter.com/tylerangert/status/1525964795219951616?s=20&amp;t=S66cNQQB45rjCRKAzto7SQ\">https://twitter.com/tylerangert/status/1525964795219951616?s=20&amp;t=S66cNQQB45rjCRKAzto7SQ</a>"
    },
    "author": {
        "type": "card",
        "name": "Chris Aldrich",
        "url": "http://stream.boffosocko.com/profile/chrisaldrich",
        "photo": "http://stream.boffosocko.com/file/600427b81f7785e704eadfe511a9270f/thumb.jpg"
    },
    "post-type": "reply",
    "_id": "29111285",
    "_source": "192",
    "_is_read": true
}

Jeremy Keith adactio.com

Image previews with the FileReader API

{
    "type": "entry",
    "published": "2022-05-15T13:46:37Z",
    "url": "https://adactio.com/journal/19080",
    "category": [
        "images",
        "alt",
        "accessibility",
        "previews",
        "filereader",
        "api",
        "javascript",
        "notes",
        "syndication",
        "twitter",
        "indieweb",
        "posse",
        "frontend",
        "development"
    ],
    "syndication": [
        "https://adactio.medium.com/e9e59ed2a7bb"
    ],
    "name": "Image previews with the FileReader API",
    "content": {
        "text": "I added a \u201cnotes\u201d section to this website eight years ago. I set it up so that notes could be syndicated to Twitter. Ever since then, that\u2019s the only way I post to Twitter.\n\nA few months later I added photos to my notes. Again, this would get syndicated to Twitter.\n\nSomething\u2019s bothered me for a long time though. I initially thought that if I posted a photo, then the accompanying text would serve as a decription of the image. It could effectively act as the alt text for the image, I thought. But in practice it didn\u2019t work out that way. The text was often a commentary on the image, which isn\u2019t the same as a description of the contents.\n\nI needed a way to store alt text for images. To make it more complicated, it was possible for one note to have multiple images. So even though a note was one line in my database, I somehow needed a separate string of text with the description of each image in a single note.\n\nI eventually settled on using the file system instead of the database. The images themselves are stored in separate folders, so I figured I could have an accompanying alt.txt file in each folder.\n\nTake this note from yesterday as an example. Different sizes of the image are stored in the folder /images/uploaded/19077. Here\u2019s a small version of the image and here\u2019s the original. In that same folder is the alt text.\n\nThis means I\u2019m reading a file every time I need the alt text instead of reading from a database, which probably isn\u2019t the most performant way of doing it, but it seems to be working okay.\n\nHere\u2019s another example:\n\n\nthe original image,\n\nthe alt.txt file, and \n\nthe note itself.\nIn order to add the alt text to the image, I needed to update my posting interface. By default it\u2019s a little textarea, followed by a file upload input, followed by a toggle (a checkbox under the hood) to choose whether or not to syndicate the note to Twitter.\n\nThe interface now updates automatically as soon as I use that input type=\"file\" to choose any images for the note. Using the FileReader API, I show a preview of the selected images right after the file input.\n\nHere\u2019s the code if you ever need to do something similar. I\u2019ve abstracted it somewhat in that gist\u2014you should be able to drop it into any page that includes input type=\"file\" accept=\"image/*\" and it will automatically generate the previews.\n\nI was pleasantly surprised at how easy this was. The FileReader API worked just as expected without any gotchas. I think I always assumed that this would be quite complex to do because once upon a time, it was quite complex (or impossible) to do. But now it\u2019s wonderfully straightforward. Story of the web.\n\nMy own version of the script does a little bit more; it also generates another little textarea right after each image preview, which is where I write the accompanying alt text.\n\nI\u2019ve also updated my server-side script that handles the syndication to Twitter. I\u2019m using the /media/metadata/create method to provide the alt text. But for some reason it\u2019s not working. I can\u2019t figure out why. I\u2019ll keep working on it.\n\nIn the meantime, if you\u2019re looking at an image I\u2019ve posted on Twitter and you\u2019re judging me for its lack of alt text, my apologies. But each tweet of mine includes a link back to the original note on this site and you will most definitely find the alt text for the image there.",
        "html": "<p>I added a \u201cnotes\u201d section to this website <a href=\"https://adactio.com/notes/6803\">eight years ago</a>. I set it up so that notes could be syndicated to Twitter. Ever since then, that\u2019s the only way I post to Twitter.</p>\n\n<p>A few months later <a href=\"https://adactio.com/notes/6978\">I added photos to my notes</a>. Again, this would get syndicated to Twitter.</p>\n\n<p>Something\u2019s bothered me for a long time though. I initially thought that if I posted a photo, then the accompanying text would serve as a decription of the image. It could effectively act as the <code>alt</code> text for the image, I thought. But in practice it didn\u2019t work out that way. The text was often a <em>commentary</em> on the image, which isn\u2019t the same as a description of the contents.</p>\n\n<p>I needed a way to store <code>alt</code> text for images. To make it more complicated, it was possible for one note to have multiple images. So even though a note was one line in my database, I somehow needed a separate string of text with the description of each image in a single note.</p>\n\n<p>I eventually settled on using the file system instead of the database. The images themselves are stored in separate folders, so I figured I could have an accompanying <code>alt.txt</code> file in each folder.</p>\n\n<p>Take <a href=\"https://adactio.com/notes/19077\">this note</a> from yesterday as an example. Different sizes of the image are stored in the folder <code>/images/uploaded/19077</code>. Here\u2019s <a href=\"https://adactio.com/images/uploaded/19077/small.jpg\">a small version of the image</a> and here\u2019s <a href=\"https://adactio.com/images/uploaded/19077/original.jpg\">the original</a>. In that same folder is <a href=\"https://adactio.com/images/uploaded/19077/alt.txt\">the <code>alt</code> text</a>.</p>\n\n<p>This means I\u2019m reading a file every time I need the <code>alt</code> text instead of reading from a database, which probably isn\u2019t the most performant way of doing it, but it seems to be working okay.</p>\n\n<p>Here\u2019s another example:</p>\n\n<ul><li>\n<a href=\"https://adactio.com/images/uploaded/19074/original.jpg\">the original image</a>,</li>\n<li>\n<a href=\"https://adactio.com/images/uploaded/19074/alt.txt\">the <code>alt.txt</code> file</a>, and </li>\n<li>\n<a href=\"https://adactio.com/notes/19074\">the note itself</a>.</li>\n</ul><p>In order to add the <code>alt</code> text to the image, I needed to update <a href=\"https://dribbble.com/shots/2744316-Notes-posting-interface\">my posting interface</a>. By default it\u2019s a little <code>textarea</code>, followed by a file upload <code>input</code>, followed by a toggle (a checkbox under the hood) to choose whether or not to syndicate the note to Twitter.</p>\n\n<p>The interface now updates automatically as soon as I use that <code>input type=\"file\"</code> to choose any images for the note. Using <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/FileReader\">the <code>FileReader</code> API</a>, I show a preview of the selected images right after the file input.</p>\n\n<p><a href=\"https://gist.github.com/adactio/0e406cbc2ff0d3eed7a0ffcd0d932aab\">Here\u2019s the code</a> if you ever need to do something similar. I\u2019ve abstracted it somewhat in that gist\u2014you should be able to drop it into any page that includes <code>input type=\"file\" accept=\"image/*\"</code> and it will automatically generate the previews.</p>\n\n<p>I was pleasantly surprised at how easy this was. The <code>FileReader</code> API worked just as expected without any gotchas. I think I always assumed that this would be quite complex to do because once upon a time, it <em>was</em> quite complex (or impossible) to do. But now it\u2019s wonderfully straightforward. Story of the web.</p>\n\n<p>My own version of the script does a little bit more; it also generates another little <code>textarea</code> right after each image preview, which is where I write the accompanying <code>alt</code> text.</p>\n\n<p>I\u2019ve also updated my server-side script that handles the syndication to Twitter. I\u2019m using <a href=\"https://developer.twitter.com/en/docs/twitter-api/v1/media/upload-media/api-reference/post-media-metadata-create\">the <code>/media/metadata/create</code> method</a> to provide the <code>alt</code> text. But for some reason <a href=\"https://github.com/abraham/twitteroauth/issues/954#issuecomment-974870119\">it\u2019s not working</a>. I can\u2019t figure out why. I\u2019ll keep working on it.</p>\n\n<p>In the meantime, if you\u2019re looking at an image I\u2019ve posted on Twitter and you\u2019re judging me for its lack of <code>alt</code> text, my apologies. But each tweet of mine includes a link back to the original note on this site and you will most definitely find the <code>alt</code> text for the image there.</p>"
    },
    "author": {
        "type": "card",
        "name": "Jeremy Keith",
        "url": "https://adactio.com/",
        "photo": "https://adactio.com/images/photo-150.jpg"
    },
    "post-type": "article",
    "_id": "29103286",
    "_source": "2",
    "_is_read": true
}

Jeremy Keith adactio.com

{
    "type": "entry",
    "published": "2022-05-12T13:48:57Z",
    "url": "https://adactio.com/links/19073",
    "category": [
        "html",
        "markup",
        "markdown",
        "structured",
        "content",
        "tools",
        "process",
        "blogging",
        "blogs",
        "indieweb",
        "personal",
        "publishing",
        "frontend",
        "development"
    ],
    "bookmark-of": [
        "https://chrisburnell.com/article/changing-with-the-times/"
    ],
    "content": {
        "text": "Changing with the times \u00b7 Chris Burnell\n\n\n\n\n  I think, with the sheer volume of functionality available to us nowadays on the front-end, it can be easy to forget how powerful and strong the functionality is that we get right off shelf with HTML. Yes, you read that right, functionality.",
        "html": "<h3>\n<a class=\"p-name u-bookmark-of\" href=\"https://chrisburnell.com/article/changing-with-the-times/\">\nChanging with the times \u00b7 Chris Burnell\n</a>\n</h3>\n\n<blockquote>\n  <p>I think, with the sheer volume of functionality available to us nowadays on the front-end, it can be easy to forget how powerful and strong the functionality is that we get right off shelf with HTML. Yes, you read that right, <em>functionality</em>.</p>\n</blockquote>"
    },
    "author": {
        "type": "card",
        "name": "Jeremy Keith",
        "url": "https://adactio.com/",
        "photo": "https://adactio.com/images/photo-150.jpg"
    },
    "post-type": "bookmark",
    "_id": "29044918",
    "_source": "2",
    "_is_read": true
}

Chris Aldrich www.boffosocko.com

{
    "type": "entry",
    "author": {
        "name": "Chris Aldrich",
        "url": "https://www.boffosocko.com/",
        "photo": "https://www.gravatar.com/avatar/d5fb4e498fe609cc29b04e5b7ad688c4?s=96&d=https%3A%2F%2Fmicro.blog%2Fimages%2Fblank_avatar.png"
    },
    "url": "https://boffosocko.com/2022/05/11/55804769/",
    "content": {
        "html": "In the bustle of life I missed it a week or so ago, so Happy 8th IndieWeb Birthday to BoffoSocko.com! I\u2019ve been worrying about other things for the past year, so I\u2019ve completely missed the 7 year itch effect, though perhaps improving my PASTA workflow to Obsidian might have been the dal... <a href=\"https://boffosocko.com/2022/05/11/55804769/\">boffosocko.com</a>",
        "text": "In the bustle of life I missed it a week or so ago, so Happy 8th IndieWeb Birthday to BoffoSocko.com! I\u2019ve been worrying about other things for the past year, so I\u2019ve completely missed the 7 year itch effect, though perhaps improving my PASTA workflow to Obsidian might have been the dal... boffosocko.com"
    },
    "published": "2022-05-11T23:37:34+00:00",
    "post-type": "note",
    "_id": "33379999",
    "_source": "7224",
    "_is_read": true
}

{
    "type": "entry",
    "published": "2022-05-11T05:03:15.142870698+03:00",
    "url": "https://fireburn.ru/posts/aQnEECN",
    "category": [
        "personal"
    ],
    "content": {
        "text": "i really want to add webmention support and display into Kittybox right now so I wouldn\u2019t be bored of not being able to see if someone interacts with me but i cant code for too much or i will blow a fuse in my brain become a dumb kitty for a week\n\nso i will rest and play minecraft like a responsible person\n\nsee? im caring for myself!",
        "html": "<p>i really want to add webmention support and display into Kittybox right now so I wouldn\u2019t be bored of not being able to see if someone interacts with me but i cant code for too much or i will blow a fuse in my brain become a dumb kitty for a week</p>\n\n<p>so i will rest and play minecraft like a responsible person</p>\n\n<p>see? im caring for myself!</p>"
    },
    "post-type": "note",
    "_id": "29010967",
    "_source": "1371",
    "_is_read": true
}

{
    "type": "entry",
    "published": "2022-05-10T21:02:08.759838269+03:00",
    "url": "https://fireburn.ru/posts/aQk0akz",
    "category": [
        "Kittybox"
    ],
    "content": {
        "text": "Next thing I should do since I fixed the bug: webmentions. I really need to handle webmentions, and I think I actually will be able to do so rather easily now that I know my database doesn\u2019t lock up anymore. I just need to attach an MF2 parser.\n\nIn general, what I would want to have in a perfect world is:\n\nMy own IndieAuth implementation\n\nMy own webmention acceptor (I already have plans but I need some extra software for it to work)\n\nMy own media endpoint (that autoconverts pictures to webp)\n\nMy own Microsub server\n\nEditing posts in-band when logged in via IndieAuth\n\nMake that second widget at the homepage do something interesting",
        "html": "<p>Next thing I should do since I fixed the bug: webmentions. I really need to handle webmentions, and I think I actually will be able to do so rather easily now that I know my database doesn\u2019t lock up anymore. I just need to attach an MF2 parser.</p>\n\n<p>In general, what I would want to have in a perfect world is:</p>\n\n<ul><li>My own IndieAuth implementation</li>\n\n<li>My own webmention acceptor (I already have plans but I need some extra software for it to work)</li>\n\n<li>My own media endpoint (that autoconverts pictures to webp)</li>\n\n<li>My own Microsub server</li>\n\n<li>Editing posts in-band when logged in via IndieAuth</li>\n\n<li>Make that second widget at the homepage do something interesting</li>\n</ul>"
    },
    "post-type": "note",
    "_id": "29004227",
    "_source": "1371",
    "_is_read": true
}

Chris Aldrich stream.boffosocko.com/profile/chrisaldrich

{
    "type": "entry",
    "published": "2022-05-09T20:44:18+00:00",
    "url": "http://stream.boffosocko.com/2022/muireallprase-maybe-this-helps-with-context-20220509the-logos-ethos-and-pathos-of-indiewebi-like-your-site",
    "syndication": [
        "https://twitter.com/ChrisAldrich/status/1523766225159041024"
    ],
    "in-reply-to": [
        "https://twitter.com/MuireallPrase/status/1522959677465759744"
    ],
    "content": {
        "text": "@MuireallPrase Maybe this helps with context? https://boffosocko.com/2022/05/09/the-logos-ethos-and-pathos-of-indieweb/\n\nI like your site; glad to virtually meet another who's interested in physics, math, and typesetting!",
        "html": "<a href=\"https://twitter.com/MuireallPrase\">@MuireallPrase</a> Maybe this helps with context? <a href=\"https://boffosocko.com/2022/05/09/the-logos-ethos-and-pathos-of-indieweb/\">https://boffosocko.com/2022/05/09/the-logos-ethos-and-pathos-of-indieweb/</a><br />\nI like your site; glad to virtually meet another who's interested in physics, math, and typesetting!"
    },
    "author": {
        "type": "card",
        "name": "Chris Aldrich",
        "url": "http://stream.boffosocko.com/profile/chrisaldrich",
        "photo": "http://stream.boffosocko.com/file/600427b81f7785e704eadfe511a9270f/thumb.jpg"
    },
    "post-type": "reply",
    "_id": "28984044",
    "_source": "192",
    "_is_read": true
}