#dev 2024-03-19

2024-03-19 UTC
#
capjamesg
to2ds I tried to send you a Webmention but it looks like you don't have an endpoint set up?
fury999io, trwnh, jacky, angelo, geoffo, jamey, jjuran and Renfield joined the channel
#
[qubyte]
I’m reading through Chris’ post on replacing the default markdown rendering of img tags with figures and captions. It’s a nice post and it has me thinking that I’ll replace image rendering in my own generator with something similar (mostly for rendering correct srcset collections and sizes, I’ve not yet had cause to use captions, though I do like the idea). I’m stuck with marked for now, which is a blessing and a curse. It only d
#
[qubyte]
strings, but that means I can pretty easily update the renderer to change image handling. https://chrisnewtn.com/posts/2024-03-10-image-captions.html
#
[qubyte]
I do sort of wish I could use an AST like Chris does. Right now marked spits out a string, which I immediately throw at jsdom so I can add footnotes at the end and eliminate some spans. If it spat out an AST I could probably get it to render directly to a DOM.
#
[Murray]
RE: #indieweb quote posts
#
[Murray]
My structure is an `h-entry` with a linked source near the top of the post that uses `u-bookmark-of`, a quick summary, and then a stack of quotes with brief notes on each.
#
[Murray]
Looking at the examples on the wiki, implementation is not particularly clear. Would it be best to add an `h-cite` to the bookmark link, or does each `<blockquote>` need to be its own thing? What are the benefits of a quote post vs a bookmark?
[Ana_R], geoffo, jjuran_, barnaby, AramZS, [jeremycherfas], Vale, [Tilley] and to2ds joined the channel
#
to2ds
capjamesg - Hmm. Not sure what happened. The webmention endpoint is a global include in my base template, so should be safe no matter what I break while tinkering :D
jjuran joined the channel
#
[tantek]
hey CSS people, look at the weird thing happening here, and LMK if you see a way to fix it: https://indieweb.org/Category:hashtags
#
[tantek]
in particular note that the "L" heading is hanging all by itself at the bottom of the first column, disconnected from the actual "L" pages which are at the top of the second column
#
[tantek]
is there a way to "no column break inside" the a set of items including its heading?
#
aaronpk
Looks fine on mobile, I guess because no two column layout on mobile?
#
gRegor
I don't see it hanging on various desktop sizes either
#
gRegor
Oh, unless you mean splitting the links at all? I see "latergram" in left column, then "LetsFixThis" at the top of the right column
#
gRegor
TIL: https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside The <ul> has `break-inside: avoid-column`, which seems like it should avoid splitting those two links, not sure
#
gRegor
Oops, that CSS is on the <li>, not <ul>
#
gRegor
It does seem to work when I try it on the <ul>, not sure about other side effects in MW
#
gRegor
[Murray] If I'm including a title of the bookmark (usually), then I will use `u-bookmark-of h-cite`
#
gRegor
h-cite on each blockquote in your example post could be nice, just making it explicit to consumers that they're citations, though I'm not sure any consumers are doing anything with bookmark h-cites
[Murray] joined the channel
#
[Murray]
I guess I'd also question why an `h-cite` is necessary on an element like a `<blockquote>`? Surely any consumer can infer the semantics more cleanly from that?
#
[Murray]
[tantek] if you set `break-inside: avoid` on the parent `<div>` for each of those sections it should prevent orphaning the heading element like that. Not 100% sure on browser compatibility though
#
gRegor
Consumers would then need to further parse the HTML (or e-content more specifically) to find the blockquote elements, vs. having the citations directly parsed by mf2
#
[Murray]
I had thought that was broadly assumed with stuff like images? Or not? Maybe I'm misremembering something 😄
#
gRegor
Not sure I follow
#
[Murray]
I'd thought that kind of inference was happening elsewhere (direct from the HTML) so if an `h-entry` contains an `<img>` or `<picture>` that it should assume certain things, but I can't now find anything so perhaps I'm just confused
#
gRegor
To be clear, I'm not aware of any special consumers of h-cites that are within h-entry, like just child elements. Not a bookmark, but here's an example of mine with blockquote.h-cite https://gregorlove.com/2016/02/the-label-didnt-understand-why/ and I'm not aware of consumers doing anything special with it.
#
[Murray]
Ah, I see, thanks!
#
gRegor
[Murray], Ahh, not in microformats land afaik. The u-photo property helps determine photo post
#
gRegor
what is ptd
#
Loqi
Post Type Discovery specifies an algorithm for consuming code to determine the type of a post by its content properties and their values rather than an explicit “post type” property, thus better matched to modern post creation UIs that allow combining text, media, etc in a variety of ways without burdening users with any notion of what kind of post they are creating https://indieweb.org/PTD
#
[Murray]
Ah yeah, perhaps that's what I'm thinking of
[aciccarello] and lazcorp joined the channel
#
[tantek]
[Murray] gRegor thanks for the tip about "break-inside: avoid". [Paul_Robert_Ll] WDYT of customizing our CSS for Category: pages so that Category subheadings (like the "L" on /Category:hashtags) aren't separated from their items in the category?
#
[tantek]
across columns that is, on a desktop display (not a problem on mobile because it's all in one column there)
[Paul_Robert_Ll] joined the channel
#
[Paul_Robert_Ll]
Worth a shot! (I thought `break-inside` only applied to print media, but I may be wrong)
#
[Paul_Robert_Ll]
Trying in dev tools, `.mw-category-group { break-inside: avoid }` seems to do the trick!
[Joe_Crawford] joined the channel
#
[Joe_Crawford]
Another variation for the pile `.mw-category.mw-category-columns ul { break-inside: avoid-column }`
jamey, angelo_, geoffo, [KevinMarks] and adele joined the channel
#
Loqi
[preview] [lenazun :: evil maid] we make little websites with as little bells and whistles as possible because they have to survive the bandwidth apocalypse, or the browser apocalypse, or whatever other apocalypse is coming
#
[KevinMarks]
Wasn't the orphans property meant for that? Or does that not apply to more than one element?
ttybitnik joined the channel
#
[tantek]
[Paul_Robert_Ll]++ that worked! reload /Category:hashtags. Thanks also to [Joe_Crawford]++
#
Loqi
[Joe_Crawford] has 4 karma in this channel over the last year (26 in all channels)
#
Loqi
[Paul_Robert_Ll] has 2 karma in this channel over the last year (50 in all channels)
#
[tantek]
what is a poll
#
Loqi
A poll is a post type that facilitates responses to be aggregated into a final set of votes, usually offering between two and four options from which users can choose https://indieweb.org/poll
#
[tantek]
looks like poll posting, responding, aggregating/tallying/displaying responses (especially by count, rank, bar chart) is still an area of development
#
[tantek]
capjamesg, did you ever post a follow-up tallies summary to your cups of coffee poll? https://jamesg.blog/2022/05/17/coffee-frequency/
#
[Paul_Robert_Ll]
[tantek] Thank [Murray]!
#
[tantek]
[Murray]++
#
Loqi
[Murray] has 5 karma in this channel over the last year (11 in all channels)
#
[tantek]
I am interested in figuring out how to post a plain text design of a poll, how would someone view the poll and recognize it as a poll, both visually and having their reader/browser/client recognize it semantically as a poll, how would/should someone respond/answer the poll, both visually and in a way that the original poll post could recognize it as a specific answer for tallying, and then how to display the current or final tally of a poll,
#
[tantek]
perhaps also with markup so those who responded can be notified of the final tallied results
#
[tantek]
I'd like to think through that whole series of user-scenarios with plain text (/note and /reply) via Webmention, then using those as a basis, figure out what minimal markup would allow readers/clients to reduce the friction to viewing, answering, seeing results of polls
#
[tantek]
then of course, interop with Mastodon via Bridgy Fed etc.
#
[tantek]
anyone else here (besides capjamesg) interested in this?
#
[tantek]
Happy to capture questions / explorations in /poll#Brainstorming for now async if no one else is presently interested
#
[tantek]
Example poll I'm considering: Are you celebrating spring equinox: [ ] 2024-03-19, [ ] 2024-03-20, [ ] 2024-03-21, [ ] in September for the Southern Hemisphere?
#
[tantek]
Thinking of posting then manually POSSEing it to a few platforms as an experiment
#
aaronpk
The brackets are a little confusing when in a single line list, but would be clear with newlines
#
[Joe_Crawford]
In terms of prior art: the shorthand for creating a poll in Slack is the command `/poll` followed by strings enclosed in double quotes. The first string is the sentence, question, and the following strings are the options. So yours would be `/poll "Are you celebrating spring equinox for the Southern Hemisphere" "2024-03-19" "2024-03-20" "2024-03-21" "in September"`
#
[tantek]
aaronpk, I got the brackets from the plain text equivalent that Mastodon generates as documented on the /poll page
#
[tantek]
I also want to include "and optionally, why?"
#
[tantek]
for folks to free-form comment in addition to their poll answer.
#
jamey
revealing how little I know about IndieWeb dev implementations here... could the "why" be formatted as a reply to the poll? Maybe there's a way to pre-populate what that person's response was?
geoffo and angelo joined the channel
#
gRegor
A pattern I see on Discord is using emoji reactions to vote in polls. Author defines the emoji for each poll option.
#
gRegor
[tantek], I forgot to mention that I'm trying a simplified rating scale for movies/tv based on some things you were saying in chat a couple weeks ago: https://gregorlove.com/lists/movies/#watched
[tantek] joined the channel
#
[tantek]
gRegor yes! Reacji for polling, also often used in Slack
#
[tantek]
👀 simplified rating scale!
#
[tantek]
you know who else uses "emoji" for a simplified rating scale?
#
gRegor
No markup beyond h-cite currently, but mentally I think of them as -1/0/+1/+2
#
[tantek]
rating << Four emoji rating example 😄🙁 https://www.telegraph.co.uk/travel/news/happyornot-smiley-buttons-at-airports/ in airports after security checks and when exiting bathrooms, apparently by https://www.happy-or-not.com/en/
#
Loqi
ok, I added "Four emoji rating example 😄🙁 https://www.telegraph.co.uk/travel/news/happyornot-smiley-buttons-at-airports/ in airports after security checks and when exiting bathrooms, apparently by https://www.happy-or-not.com/en/" to the "See Also" section of /rating https://indieweb.org/wiki/index.php?diff=94257&oldid=92885
#
[tantek]
rating << Hybrid four emoji and text rating example 😄😒 and text equivalents excellent, good, mediocre, terrible! https://www.surveystance.com/airport-feedback-smiley-survey/
#
Loqi
ok, I added "Hybrid four emoji and text rating example 😄😒 and text equivalents excellent, good, mediocre, terrible! https://www.surveystance.com/airport-feedback-smiley-survey/" to the "See Also" section of /rating https://indieweb.org/wiki/index.php?diff=94258&oldid=94257