Fixed a handful of bugs this morning, little things that no one notices and bigger things like push notifications and Webmentions broken for the last few days. Think I need to dedicate June to just working on stability.
{
"type": "entry",
"author": {
"name": "Manton Reece",
"url": "https://www.manton.org/",
"photo": "https://micro.blog/manton/avatar.jpg"
},
"url": "https://www.manton.org/2022/06/01/fixed-a-handful.html",
"content": {
"html": "<p>Fixed a handful of bugs this morning, little things that no one notices and bigger things like push notifications and Webmentions broken for the last few days. Think I need to dedicate June to just working on stability.</p>",
"text": "Fixed a handful of bugs this morning, little things that no one notices and bigger things like push notifications and Webmentions broken for the last few days. Think I need to dedicate June to just working on stability."
},
"published": "2022-06-01T11:40:40-05:00",
"post-type": "note",
"_id": "29451184",
"_source": "12",
"_is_read": true
}
{
"type": "entry",
"author": {
"name": "Manton Reece",
"url": "https://www.manton.org/",
"photo": "https://micro.blog/manton/avatar.jpg"
},
"url": "https://www.manton.org/2022/05/31/microblog-for-mac.html",
"name": "Micro.blog 2.5 for Mac with replies, bookshelves",
"content": {
"html": "<p>We shipped version 2.5 of Micro.blog for macOS today. I had originally intended to just add a new Replies section of the app for this version, but it looked kind of lonely by itself, so I added Bookshelves too, with a multi-window interface for managing books you want to read or blog about. This uses our existing JSON Feed-based API for books data.</p>\n<p>Here\u2019s a screenshot of my bookshelves:</p>\n<p><a href=\"https://www.manton.org/uploads/2022/37fb191253.png\"><img src=\"https://www.manton.org/uploads/2022/37fb191253.png\" width=\"600\" height=\"439\" alt=\"Screenshot of book windows in Micro.blog for Mac\" style=\"max-width:600px;\" /></a></p>\n<p>You can download the latest version <a href=\"https://help.micro.blog/t/micro-blog-for-mac/45\">from the help page</a> or choose \u201cCheck for Updates\u201d from within the app.</p>\n<p>If you\u2019re puzzled by why Micro.blog has all these book-related features\u2026 We have a lot of members of our community who love to read and write. If it\u2019s easier to blog about books you\u2019re reading, we can eventually build a distributed, web-scale alternative to Amazon-owned Goodreads. This won\u2019t happen overnight. It\u2019s a years-long goal and just one of many facets of the IndieWeb that we\u2019re interested in.</p>\n<p>Books are also great for mental health and thoughtful commentary, broadening our understanding of other perspectives, which maybe the world could use right now.</p>",
"text": "We shipped version 2.5 of Micro.blog for macOS today. I had originally intended to just add a new Replies section of the app for this version, but it looked kind of lonely by itself, so I added Bookshelves too, with a multi-window interface for managing books you want to read or blog about. This uses our existing JSON Feed-based API for books data.\nHere\u2019s a screenshot of my bookshelves:\n\nYou can download the latest version from the help page or choose \u201cCheck for Updates\u201d from within the app.\nIf you\u2019re puzzled by why Micro.blog has all these book-related features\u2026 We have a lot of members of our community who love to read and write. If it\u2019s easier to blog about books you\u2019re reading, we can eventually build a distributed, web-scale alternative to Amazon-owned Goodreads. This won\u2019t happen overnight. It\u2019s a years-long goal and just one of many facets of the IndieWeb that we\u2019re interested in.\nBooks are also great for mental health and thoughtful commentary, broadening our understanding of other perspectives, which maybe the world could use right now."
},
"published": "2022-05-31T09:41:07-05:00",
"category": [
"Photos",
"Essays"
],
"post-type": "article",
"_id": "29425374",
"_source": "12",
"_is_read": true
}
{
"type": "entry",
"author": {
"name": null,
"url": "https://herestomwiththeweather.com/",
"photo": null
},
"url": "https://herestomwiththeweather.com/2022/05/29/linking-to-openlibrary-for-read-posts/",
"published": "2022-05-29T22:59:02+00:00",
"content": {
"html": "<p>My blog is now linking to <a href=\"https://openlibrary.org/\">openlibrary.org</a> for <a href=\"https://indieweb.org/read\">read posts</a>. If you have the book\u2019s ISBN, then it is trivial to link to openlibrary\u2019s page for your book. It would be cool if those pages accepted webmention so that you could see who is reading the book.</p>",
"text": "My blog is now linking to openlibrary.org for read posts. If you have the book\u2019s ISBN, then it is trivial to link to openlibrary\u2019s page for your book. It would be cool if those pages accepted webmention so that you could see who is reading the book."
},
"name": "Linking to OpenLibrary for read posts",
"post-type": "article",
"_id": "29402705",
"_source": "246",
"_is_read": true
}
{
"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&tag=indieweb\">#IndieWeb</a><a href=\"http://beesbuzz.biz/blog/?id=9477&tag=tumblr\">#Tumblr</a>",
"text": "#IndieWeb#Tumblr"
},
"name": "fluffy rambles: IndieWeb + Tumblr = \ud83d\udc9c",
"post-type": "article",
"_id": "29311527",
"_source": "3782",
"_is_read": true
}
Since ~2021* I’ve redirected /github to my GitHub profile to own my links to GH repos like https://tantek.com/github/cassis
Apache htaccess code to #OwnYourLinks:
RedirectTemp /github https://github.com/tantek
change /tantek to your GitHub /username
More on this technique: https://indieweb.org/ownyourlinks
* https://tantek.com/2021/084/t1/ownyourlinks-indieweb-github-redirect
{
"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
}
đź”– Reminder: Open Web Links
Software that is made for the open web and works with Micro.blog, including apps, extensions, and integrations.
See also: IndieWeb wiki page for Micro.blog
{
"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
}
@lordmatt I'll have to watch this post to see where it goes.
This Twitter search for a common pattern will find lots of sites https://twitter.com/search?q=test%20webmention&src=typed_query&f=live
{
"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&src=typed_query&f=live\">https://twitter.com/search?q=test%20webmention&src=typed_query&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
}
I tried sending again with the form and got the general error "There has been a critical error on this website."
This 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/
{
"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
}
No worries! I had another Webmention issue sending to both your site and @openmentions. I tagged you in a GitHub issue.
If you’re interested, IndieWeb has a WordPress chat channel with a helpful group of people, including the plugin authors: indieweb.org/discuss
{
"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
}
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’s thoughts noted “this should reflect the information that the user sees on-page.”
Some other interesting sites like this are indieweb.xyz and indieforums.net.
{
"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
}
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’re doing! Have you joined any of their virtual meetups like Homebrew Website Club?
{
"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
}
{
"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
}
@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.
{
"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
}
Testing out your webmention set up from another site. If this works, then congratulations!
{
"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
}
A refback (remember those?!) today reminded me about this post: Non-technical IndieWeb: Fun, Creativity, Community, and “Content” https://boffosocko.com/2020/12/20/non-technical-indieweb-fun-creativity-community-and-content/
I should try to add more on #creativity and #fun to my IndieWeb Collection https://boffosocko.com/research/indieweb/
{
"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
}
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...
The bug in question, if you’re interested.
{
"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
}
{
"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&t=S66cNQQB45rjCRKAzto7SQ\">https://twitter.com/tylerangert/status/1525964795219951616?s=20&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
}
{
"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
}
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.
{
"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
}
In the bustle of life I missed it a week or so ago, so Happy 8th IndieWeb Birthday to BoffoSocko.com! I’ve been worrying about other things for the past year, so I’ve completely missed the 7 year itch effect, though perhaps improving my PASTA workflow to Obsidian might have been the dal... 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
}
