If you are not familiar with Dungeons & Dragons, there are two general flavors for how to play:
- Using miniatures and a map, or
- Theater of the mind.
This reminded me of all the times that I would play with my daughter when she was little.
If you are not familiar with Dungeons & Dragons, there are two general flavors for how to play:
- Using miniatures and a map, or
- Theater of the mind.
This reminded me of all the times that I would play with my daughter when she was little.
I’m on mastodon too much a lot a fair amount of time and come across items that I want to share with others on my blog. stoot
is a Hugo shortcode that allows you to have a static version of a mastodon post on your site. This can match your template or be restyled as you choose.
As of this writing, I don’t use anything specifically to store links. I attempted to save things to Apple Notes and Drafts and this gives me the URL.
The example that I’ll be using for this post will be to https://social.lol/@mandaris/112944060166510117.
This works for storing the information for general notes and references, but still leaves the sharing of the content unfinished. In a lot of my previous posts, I would just have a link to a post. This is acceptable, but I’d like to make it convenient for my readers (a.k.a me) to get all the content in one place instead of going back and forth.
I remembered that Hugo offers shortcodes that allow you to embed a tweet, youtube video, etc. into a post and did a search for that. Unfortunately, I couldn’t find one for mastodon. When looking at the one for twitter, I see that it is essentially adding the code that is provided when you embed the iframe1 that twitter supplies. I suspect that it’s because mastodon also has an iframe that it’s not necessary.
The embed pretty small easy to read compared to the code that is loaded for a twitter embed.
Using the URL above, we can see what is created by mastodon. I added spacing for legibility.
<iframe
src="https://social.lol/@mandaris/112944060166510117/embed"
class="mastodon-embed"
style="max-width: 100%; border: 0" width="400"
allowfullscreen="allowfullscreen">
</iframe>
<script
src="https://social.lol/embed.js"
async="async">
</script>
This produces the following output.
It look alright, but I found that it would cut off the bottom of longer posts and the scroll bars wouldn’t consistently show up. It looks like the embed.js
is adding overflow: hidden
to the styling during rendering and it can effect embeds with text. I’ve included a picture below in case this is fixed by browsers or changes in the code in the future
I could add the following css to force the embed to expand as needed, but that’s one of those solutions that you find out after working on something else.
.mastodon-embed {
overflow-y: auto !important;
}
Full stop, this is where I should have stopped but I’ve already invested the time to make this shortcode.
This is a Hugo shortcode that will allow you to embed a mastodon post into your blog. It places the post or toot
in the document as a <blockquote>
and is still pretty legible my RSS reader. It’s 100% based off of this post by Bryce Wray. I think that you can find updates from the original author by looking at the git repository for his site.
I’m not a Go expert like Leon, who could give you a wonderful breakdown of the code. :) Suffice to say, if you’ve got a background in code you can figure it out.
My goal is to pull the specific code out so that I can use it on Micro.blog as a plugin for myself and others. So, I pulled out the shortcode and an associated css file and placed it in a different repository.
Again, I didn’t change any of the code found in the css file and you may look at it and wonder where --text-base
and --social-sans-serif
are defined. Those are in Bryce’s hugo-site repository under assets/css/partial/__050-global.css
. I thought about just adding them to this repository, but I wanted to get some feedback from users and I saw that it seems to work without it.
I tested the plugin with a couple other Micro.blog themes such as Sumo, tiny, cards, and Tufte and it seemed to work well. Although, Tufte did have the images show up larger than I would have liked. You can use custom css to make changes as desired.
The shortcode format looks like the following.
{{< stoot instance="$InstanceTLD" id="$Id" >}}
PLEASE NOTE: I had to remove the brace on either side because of it wasn’t attempting to process the shortcode in the code block above. I tried using %lbrace;
but it doesn’t replace it properly. FIXED: Changed the block to be markdown and putting a comments /* */
around the contents worked.
Below, you’ll find the mastodon embeds and then stoot renderings. As of this moment, stoot
does not do anything with the text of posts that are marked as sensitive. I’ve removed the call the the javascript after every embed to reduce repeated calls2.
Working on another technical project. It’s looking like it’s going to get more complicated than I expected. Part of me is excited and part of me dreads having to hunt down unexpected issues.
I think I might give this a try.
Another post with multiple images.
Notice the difference in what is displayed by both.
I'm trying something with a content warning.
Multiple images with sensitive content
Sensitive content
(flagged at origin)Sensitive content
(flagged at origin)Sensitive content
(flagged at origin)Sensitive content
(flagged at origin)
Test poll. Toppings on pizza.
85.7% Yes14.3% No14 people
After working on this, there are somethings I’d like to think about in the future.
This plugin uses different style choices. It fits perfectly into Bryce’s site because it was made by and for him. I’m essentially taking what he’s done and shoved it into my page.
This is on me to change using the custom css option offered by Micro.blog.
During testing, I realized that I’ve added a fair amount of shortcodes in my writing. Hugo doesn’t handle this well and makes transitioning between different themes troublesome.
I’m playing with the idea of creating a Micro.blog plugin that contains all the shortcodes that I’ve seen. I’ve thought about this everytime that I look at the Tufte theme, but I’d have to see how much bandwidth I have in September
As always, I love getting feedback on any of this.
The <iframe>
HTML element represents a nested browsing context, embedding another HTML page into the current one. -Mozilla documentation ↩︎
I’m not an expert in javascript and don’t know if browsers are smart enough only call the script once. ↩︎
**Unfortunately**, A Book Apart is [no longer selling books](https://abookapart.com/pages/about/) and I never managed to get a complete collection.Fortunately, the authors of each book seem to be in control of what happens to their books, meaning their books are potentially still available in some way.
I always played with the idea of picking up a couple books to learn more about making my website better.
This one without a title Just a small test to see what details and summary look like in my RSS feed.
Also, I’ll see if mastodon hides it as well.
Just a small test to see what details and summary look like in my RSS feed.
Also, I’ll see if mastodon hides it as well.
I thought about changing the table of contents from an <aside>
to a <section>
. My reasoning that it’s a block element that is part of an <article>
and I supply it with a header. Afterwards, I thought about using the <nav>
.
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.
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.
I got a lot of this from different resources on the internet. Here are some links to tutorials and examples if you are interested.
Yes.
Today is Global Accessibility Awareness Day and you see companies like Apple, Microsoft, and Google post about how they are making things more accessible for their users1.
It’s good to see major companies doing this as it helps everyone. I just wanted to take this time to remind you that you can do your part by making your website a little more accessible.
A good place to go is WebAim and looking at the page on accessibility for designers. After reviewing the guidelines, you can checkout this page of accessible website examples.
What I really enjoy about this article is that it has VIDEOS showcasing how the different browsers work with alternative text.
I think that it’s a really good read as I’ve seen a couple apps and services advertise that they can generate the alt
text for images. I never really worried about the upper limit for descriptions. I know that I’m a little terse when it comes to describing things - for example, my about page. After reading this, I feel a little more confident in this aspect.
The article goes into some details in some dangers of having a very long description.
Sometimes you can have too much alternative text, particularly for an %lt;img>. I don’t mean there is a limit to what is allowed, I mean there is a limit to what is usable by humans. This long cat photo demonstrates that.
This is a really good article and I’ve added the blog to my RSS reader. I spent a good 30 minutes researching <aside>
and role=note
and what that could mean for writing and reading on the web.
The more that I work with accessibility, the more I’m enjoying solving the smaller issues. Unfortunately, I also see a lot of areas where things could be improved.
Discovered via Auston.
I’m planning on going to
on April 24, 2024 Noon PST.The description of the meet up is as follows:
If you're a maven of markup or stylesheet superstar, or a newbie novice with nth-of-type, all are welcome to learn together at Front End Study HallThe foundation of a flexible, good IndieWeb website is markup (the “M” in HTML!") that doesn’t drive you batty to debug and CSS that works with it to have it look, sound, and interact how you want, whatever device or format the website is displayed on.
Discovered via 1.
Yes, that’s how he styles his name. ↩︎