Mandaris

Talking about WWDC 2024, Rick and Morty Season 7, The Boys, and the latest with Labarum.

00:00:00: Chapter 1 - Beginning
00:00:35: WWDC 2024 Reflection
00:06:23: Media Review: Rick And Morty Season 7
00:08:01: Upcoming Media: The Boys Season 4
00:08:45: Labarum Update

The last time didn’t post.

I started working on my theme for Micro.blog in the hopes that it was accessible and could be parsed using schema and microformats. It was spurred by the feeling that I wanted my posts to be shared to as many people as possible. I’m not saying that I’m a literary genius or have something deep or profound to say, but I do have some really cool pictures of my dog as well.

Now years have gone by and I’ve refined and enhanced what I made initially. Post can show previews in bluesky, mastodon, and discord without me constantly worrying about formats. This technical project has been completed (for the most part).

And now, I’m faced with another technical itch.

Corporations are now crawling the World Wide Web in order to get data that they could use to train LLMs. That’s not to say they value the writings of a 40+ year old man from California whose average post size is around 45 words per post more than the thousands of artists and writers available, but having perfectly structured data¹ would be nice. In the grand scheme of things, I’m not significant and not singular as far as data points go. I regularly see people who walk, talk, and dress like. I listen to at least two podcasts that not only have the same views that I have but talk in similar vocal range and cadence².

But what should I do?

I’ve seen articles about editing the robots.txt file that your website serves up to tell the various bots not to use the site for data. This feels like a whack-a-mole solution, and I came across a message that it only stops the companies that have standards. At this point in development, there feels to be a “better to ask for forgiveness, than permission” strategy in place for these corporations to pursue the collection of data. Unless you are rich and/or famous, the information is taken with a middle finger pointed at the EULA.

The summaries of my articles are already distributed/federated to services that I have no control over. This was understood when I set the different systems up and I’m still ok with that to a degree.

But, seriously, what am I going to do?

At the moment, I’m not including any changes to robots.txt, I feel that some of my writing might be important enough to include in the data set for our new robot overlords protectors.

I talk about mental health.

I talk about media.

I talk about inconsequential items and sometimes important things.

And, yes, I do post about my dog as well.

All in the hope that -maybe- someone out there gets it.

Talking about WWDC 2024, Rick and Morty Season 7, The Boys, and the latest with Labarum.

00:00:00: Chapter 1 - Beginning
00:00:35: WWDC 2024 Reflection
00:06:23: Media Review: Rick And Morty Season 7
00:08:01: Upcoming Media: The Boys Season 4
00:08:45: Labarum Update.

Next Monday, Apple will be holding it World Wide Developer Conference for the year. It usually marks the time that I destroy my cell phone’s battery and complain about all my dropped calls and message malfunctions.

But every year, I find myself enjoying the prospects of something new.

This year, I’m looking forward to it but my expectations are rather low.

If I had asked people what they wanted, they would have said faster horses

Maybe it’s because I am getting older or that I am fulfilled in other ways, but I don’t see much need in a lot of the promise that some of the newer technologies are offering.

I like having transcripts for my podcasts.

I like having more cohesive alt messages for my images.

These are good things that really help everyone.

No butts about it. And yes, I gave it two t’s.

I just don’t have any passion for the rest of it. Whether it’s AI, vision, or even an update to how to add contacts to my address book, I’ve been finding myself more and more apathetic to changes in my own technological stack.

I took fLaMEd’s idea of adding my XMPP handle to my about page. It’s part of the omg.log service that I signed up for a while ago.

I’ve got two people that I chat with using it. It reminds me of when I was in high school and instant messaging was the thing to do in my social group. It makes me feel a little nostalgic.

It’s a reboot of a show I would watch on Saturday mornings as a kid. Back then, the violence was hidden with lasers and characters that would die offscreen. The original did have some darker moments, but you had hope that things were going to work out. This version gives you that hope and then proceeds to crush it.

When I was younger, I would jokingly yell “Moooooooorph!” when a character I barely knew died. Call it immaturity. I was ignorant of what losing someone meant. Not to say I don’t still laugh at dark humor or that every dead character brings me to tears, but now I have more of an understanding that a characters death can and should¹ have impact on the plot and other characters.

My only complaint about the show is that it runs through a lot of the different plots and themes that happened with the X-Men in the 90s. Plot lines that would take years would be addressed in a couple episodes and we don’t get a chance to sit with some of the changes for very long. If you are watching during the weekly release, I feel that it would be better so that you can really sit with what happens. If you are binging, you might feel you are missing something; like a stage in the grieving process.

Overall, this is a wonderful show that highlights that animation can convey themes with deeper meaning… even when there are big lasers.

The X-Men, a band of mutants who use their uncanny gifts to protect a world that hates and fears them, are challenged like never before, forced to face a dangerous and unexpected new future.

Well, we’re at the end of the month and I did not meet my goal of having a post every day about mental health as I had set out to do. If anything, I probably posted less this month than at other times this year.

Apparently, I need to take the break from posting.

Still, there were a lot of great posts that came from this and would like to thank everyone who wrote or read a blog to think about joining communities like indieweb.org or adding themselves to Blog of the Day.

Blog of the Day is a small project created and maintained by James and Joe. I’ve been seeing them in various IndieWeb meet ups and they seem like pretty cool folks.

What did I get out of this?

My favorite part of this whole experience was seeing posts from other people. The small ones, the long posts. Things that were sitting in a drafts folder and even the posts with a simple “I’m only writing this to continue the streak”. I didn’t read everything but it was cool to see what options were available.

For my own writing, I come away with a feeling a little more confidence about posting links from other sites. People like HeyScottyJ and Leon, pushed me to get over the barrier of feeling like an imposter and that the value of me taking the time to find the links and adding my two cents is important as well. I’m not taking credit, I’m pointing the way.

Will I do it next year?

Yes.

Part of my posts were highlighting the importance of mental health and I do enjoy publishing things on my blog.

I feel that next year, I’ll include the entire blog instead of just a category and I might draft a couple posts in advance so that I can stagger the publication.

Monster. Of. The. Week.

But available all at once.

That being said, I did find the show entertaining as the characters struggle to make it through the series variable mix of horror and drama. Sometimes trying to make a statement and other times trying to stay alive(?).

I think the thing I liked best about the show was that it had a very strong push of what it means to be a friend. In a lot of the shows that I’ve seen, you see the friendship being the first step towards something more than friends. No spoilers, but this show has examples of when this can go goes right, wrong, and (the increasingly rare) otherwise.

And that is why I would be happy to see another season.

Two teen ghosts work alongside a clairvoyant to solve mysteries for their supernatural clientele -- until a powerful witch complicates their plans.

I was looking for something light and funny. I have been watching a combination of Fallout, Dead boy detective, X-Men 97, and a lot of reality tv.

This show is just what I needed. I’m not saying that it’s great and there is very little depth to it, but if you are looking for that I’m sure there are other shows for that.

I feel that this show knows what it is. It’s a platform to deliver some jokes that you probably have already heard some variation of and then go on. I feel that the cast knows this and endeavors to give you their best performances before the series ends after 6 30ish minute episodes.

I feel that I find a lot of good things on Apple TV+. I just don’t have time to watch it all.

Legendary highwayman Dick Turpin sets out on a series of wildly absurd escapades when he's made the reluctant leader of a band of outlaws—and tasked with outwitting utterly corrupt lawman Jonathan Wilde.

Here is the trailer on YouTube.

Short answer: no.

Too long answer: read the rest of the article.

Also, click here to get to the code portions of this article.

The popover api has been baselined and I really wanted to explore what this feature can do for me and my writing. I thought it would be a simple project of looking into what it is and how it could help me be a better communicator on the internet.

When it comes to using new methods, you are better served by having a target or project. It just so happened that I’ve been thinking about whether or not footnotes are a good solution to adding tangental information to my posts.

So far, I’ve spent 2-3 hours researching and talking about this before I even started writing this article. I lost track how much time it took to get images and tests.

What is the popover API?

To put it in my own words, the popover api allows you to define an element in HTML that will pop up and over the rest of the content. This element is initially hidden and then can be toggled to be visible and above the other elements.

Examples from the internet

I got a lot of this from different resources on the internet. Here are some links to tutorials and examples if you are interested.

Popover API lands in Baseline

Written by Una Kravets and she makes it very easy to understand the concept with a nice break down of what separates this from using a modal dialog.

Dialog dilemmas and modal mischief

Hidde De Vries has a slide deck with links to articles that he wrote about popover. I was planning on using some of his accessibility suggestions during the writing of this article.

MDN - Popover

Very nice documentation page. Don’t forget to check out the examples that they link to.

Does it work on my device?

Yes.

I’m currently using an iPhone SE running iOS 17.4. You should also double check the CanIUse website to see if it’s on your target device.

What’s wrong with footnotes?

I came across footnotes during my introduction to Markdown. I found it to be a great way to place add additional thoughts and information to something that I was writing without diverting too much from what I intended to say.

I still think about how a piece of writing might be improved with footnotes. I use it mostly for jokes and sarcasm at this point and attempt to write more comprehensive paragraphs with single ideas or wrap additional ideas in the current or following paragraph.

I’ve also thought about saving the ideas for footnotes to be a separate post altogether when I’m doing a daily writing challenge and start looking for ideas.

Footnotes still serve a purpose in how they display information and the various tools that have been developed to utilize them have made them easier to read and write.

But there are still a couple things that don’t really sit well with me.

Not quite a spec

Unfortunately, this isn’t something that was originally built into HTML. Most of the Markdown implementations denote footnotes as an extra feature. Although, all the implementations that I’ve used seem to have this on by default.

For example, Goldmark is the implementation that is used as part of Hugo and Micro.blog. It will go through a document and replace the reference to a footnote with a link like the following.

This is a cool idea<sup id="fnref:1">
<a href="#fn:1" 
  class="footnote-ref" 
  role="doc-noteref">1</a>
</sup>.

This works for single posts but navigation can be confused if there are several posts with different sets of footnotes or is the base attribute is defined in the head of your html causes the anchor to find the link on the URLs main page.

Accessibility is questionable

Years ago, I read this really cool article on accessible footnotes with CSS by Kitty Giraudel. I didn’t implement it at the time because I didn’t want to breach the imaginary threshold of having HTML mixed in with my markdown.

Still, I was curious on how these things get implemented. How does someone who is using a screen reader know that a link goes to a footnote?

When I started looking into it, I noticed that links were also getting assigned different roles. I thought that it was just a workaround.

Apparently, as I was writing this huge rant article, I found out that the role=doc-noteref has been added to the aria spec. It’s because of this that browsers and RSS readers can better parse an article to show a footnote without having to scroll to the content.

I didn’t do further research or testing with screen readers to get more information for this article after discovering this.

Do they work for me as a writer?

I use footnotes mostly for jokes and sarcasm at this point. But I want to be able to tell a story without them. In that effort, I’m attempting to write more comprehensive paragraphs with single ideas. When I process my pieces through a grammar checker, most of them state that my writing is at a high school level. Which I feel is probably the best target to get ideas across to others and not cry too much when I read this post a year from now.

I’ve also thought about saving the ideas for footnotes to be a separate post altogether when I’m doing a daily writing challenge and start looking for ideas. I don’t have too many of those as I do not allot dedicated time to writing and these idea fragments are then forgotten as the initial passion was spent during the writing and editing of the main piece.

To implement the popover for this theme, I felt I would need to break it down into several steps to get it working and see if it would be something that I would continue to use after putting the time into it.

Step 1: Review my writing process

With the first step, I thought it would be broken down into two smaller steps.

1. How am I currently writing on my blog?
2. Do I write in a way that including tangential content would make a piece better?

I currently use Micro.blog in order to host and distribute my blog. The service has an emphasis on making short posts that you can add images and more to. I like to think of it as one of the first successful twitter alternatives before there were so many that we see. This is generally where 90% of my writing goes and I feel free to post there without worrying a lot about editing.

Looking back, the longest posts are about Micro.blog. Some would joke that my Micro.blog posts are MacroPosts.

If I’m not using drafts or Marsedit, I’m using the application or shortcut to write for my site. I upload pictures of my dog or sending little messages about what is on my mind.

Because of this, I found that my average post length is about 45 words on average.

Very rarely do I find myself tackling multiple ideas in a post.

Step 2: Adding a popover to something that I’m writing

Adding a popover is pure html. I was tempted to create a Hugo shortcode into the theme, but I had a small discussion with Mathew and he pointed out that adding shortcodes could prevent users from changing theme. I could have made the shortcodes into a separate repository that people could use as a plugin, but I didn’t want to make something that would cause work for other theme creators to support.

Anything that I want to add by using this would need to be in the post that I write.

This means that I’m writing this as HTML in my document. For example, I’d write something like the following. Note that I added extra break points for legibility.

<p>A simple paragraph with a button
<button popovertarget="test-pop">+</button> 
in the middle of it. This is some more text just 
to pad this out a little bit more.</p>

I would have to add the popover content somewhere else in the post like the following.

<aside id="forth-popup" popover>
<p>Potential Footnote: 
  Some random text that I can place 
  in the middle of the sentence</p>
</aside>

One benefit of this approach is that I can add footnotes that are multiple paragraphs or images without worrying about having to indent the extra content the correct amount to make sure that it is included.

Step 2.5: Styling the popover

Although this is base line, I would like it to look like it fits into the rest of the theme.

I thought of the implementation as if it were a margin note or aside from the Tufte style of information visualization. This way, I can use the styling with my regular writing if I don’t want it to popout. I also used the nested css syntax to keep it all together.

After hacking away on this, I realized that it’s better to group everything together to be consistent.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

[popover],
.aside-info,
figure {
  background-color: var(--background);
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 2px 7px var(--box-shadow-color-1),
    0px 7px 13px -3px var(--accent),
    inset 0px -3px 0px var(--box-shadow-color-3);
}

Line 1

This will effect all elements that have the popover attribute. It was nice to see that I could use this on <aside> and not just the <div> that I see with a lot of examples.

Line 2

I felt that I didn’t want to apply this to all <aside> tags that are in the theme. I don’t know how many users are adding that tag to their blogs and I didn’t want to make this something they needed to restyle.

The rest is the definition of the <figure> styling rules which have been implemented earlier in the project.

Do they work for me as a reader?

Sometimes, I actually test what I’m implementing. In this case, it is reading things on my blog.

Looking at it in the browser

At this point, I’m not used to having buttons in the middle of a paragraph. The combination of line height and where the button sits makes me feel that sentences are disjointed. There is no styling for the buttons and everything is inherited from the colors of the theme.

In an effort to get done, I felt that it would be better to ship this and write a check for Future Me to improve.

Oh, here’s a note from Future Me…

You're a lazy and handsome person! I both love and hate you! Future Me

Thank you?

Looking at it on my phone

I can see the popover show up and cover the contents. It can really highlight a point that I’m trying to make, but if I’m trying to make a point it should be within the writing itself.

Accessibility?

One of the good things about this is that this is keyboard accessible. You can dismiss the popover by clicking escape or tabbing and enabling another interactive element if the popover attribute is set to auto which is the default setting.

I am concerned about how I can make the buttons more accessible. I was thinking that I could add an aria-label to them if I continue to use this technique.

Final Test: NetNewsWire

I read my RSS feeds in NetNewsWire. You can’t see in the screenshot, but the buttons don’t work to show the content.

This gives me an impression that either the article or application is broken and should be skipped so that I can read some other feed.

I don’t have the time and resources to go about creating an enhancement in NetNewsWire for this and I do not feel that my usage justifies that someone implement this.

Conclusion

Popovers are not going to work for me at this point for use as footnotes.

In addition to some of the issues that I highlighted in this article, I’m not comfortable with having elements that I wrote that are not visible. Unlike xkcd, I don’t have hidden text as a bonus for the content.

One other issue that I ran into while testing is how posts show up in Micro.blog listing interface. I attribute this to the popover api being newly available and an edge case for this writing.

This was a fun exercise, but I think I’ll continue with using footnotes as they are currently implemented. Hopefully, the popup api is used for cool things before it becomes the thing we all disable it for forcing us to look at ads.