How mara works (#218)
* detail how mara works * fixes, thanks #homelab * webp
This commit is contained in:
GitHub
parent
b540631792
commit
01255dafa8
|
|
@ -0,0 +1,193 @@
|
|||
---
|
||||
title: "How Mara Works"
|
||||
date: 2020-09-30
|
||||
tags:
|
||||
- avif
|
||||
- webp
|
||||
- markdown
|
||||
---
|
||||
|
||||
# How Mara Works
|
||||
|
||||
Recently I introduced Mara to this blog and I didn't explain much of the theory
|
||||
and implementation behind them in order to proceed with the rest of the post.
|
||||
There was actually a significant amount of engineering that went into
|
||||
implementing Mara and I'd like to go into detail about this as well as explain
|
||||
how I implemented them into this blog.
|
||||
|
||||
## Mara's Background
|
||||
|
||||
Mara is an anthropomorphic shark. They are nonbinary and go by they/she
|
||||
pronouns. Mara enjoys hacking, swimming and is a Chaotic Good Rogue in the
|
||||
tabletop games I've played her in. Mara was originally made to help test my
|
||||
upcoming tabletop game The Source, and I have used them in a few solitaire
|
||||
tabletop sessions (click
|
||||
[here](http://cetacean.club/journal/mara-castle-charon.gmi) to read the results
|
||||
of one of these).
|
||||
|
||||
[I use a hand-soldered <a href="https://www.ergodox.io/">Ergodox</a> with the <a
|
||||
href="https://www.artofchording.com/">stenographer</a> layout so I can dab on
|
||||
the haters at 200 words per minute!](conversation://Mara/hacker)
|
||||
|
||||
## The Theory
|
||||
|
||||
My blogposts have a habit of getting long, wordy and sometimes pretty damn dry.
|
||||
I notice that there are usually a few common threads in how this becomes the
|
||||
case, so I want to do these three things to help keep things engaging.
|
||||
|
||||
1. I go into detail. A lot of detail. This can make paragraphs long and wordy
|
||||
because there is legitimately a lot to cover. [fasterthanlime's Cool Bear's
|
||||
Hot Tip](https://fasterthanli.me/articles/image-decay-as-a-service) is a good
|
||||
way to help Amos focus on the core and let another character bring up the
|
||||
finer details that may go off the core of the message.
|
||||
2. I have been looking into how to integrate concepts from [The Socratic
|
||||
method](https://en.wikipedia.org/wiki/Socratic_method) into my posts. The
|
||||
Socratic method focuses on dialogue/questions and answers between
|
||||
interlocutors as a way to explore a topic that can be dry or vague.
|
||||
3. [Soatok's
|
||||
blog](https://soatok.blog/2020/09/12/edutech-spyware-is-still-spyware-proctorio-edition/)
|
||||
was an inspiration to this. Soatok dives into deep technical topics that can
|
||||
feel like a slog, and inserts some stickers between paragraphs to help keep
|
||||
things upbeat and lively.
|
||||
|
||||
I wanted to make a unique way to help break up walls of text using the concepts
|
||||
of Cool Bear's Hot Tip and the Socratic method with some furry art sprinkled in
|
||||
and I eventually arrived at Mara.
|
||||
|
||||
[Fun fact! My name was originally derived from a <a
|
||||
href="https://en.wikipedia.org/wiki/Mara_(demon)">Buddhist conceptual demon of
|
||||
forces antagonistic to enlightenment</a> which is deliciously ironic given that
|
||||
my role is to help people understand things now.](conversation://Mara/hacker)
|
||||
|
||||
## How Mara is Implemented
|
||||
|
||||
I write my blogposts in
|
||||
[Markdown](https://daringfireball.net/projects/markdown/), specifically a
|
||||
dialect that has some niceties from [GitHub flavored
|
||||
markdown](https://guides.github.com/features/mastering-markdown/#GitHub-flavored-markdown)
|
||||
as parsed by [comrak](https://docs.rs/comrak). Mara's interjections are actually
|
||||
specially formed links, such as this:
|
||||
|
||||
[Hi! I am saying something!](conversation://Mara/hacker)
|
||||
|
||||
```markdown
|
||||
[Hi! I am saying something!](conversation://Mara/hacker)
|
||||
```
|
||||
|
||||
Notice how the destination URL doesn't actually exist. It's actually intercepted
|
||||
in my [markdown parsing
|
||||
function](https://github.com/Xe/site/blob/b540631792493169bd41f489c18b7369159d12a9/src/app/markdown.rs#L8)
|
||||
and then a [HTML
|
||||
template](https://github.com/Xe/site/blob/b540631792493169bd41f489c18b7369159d12a9/templates/mara.rs.html#L1)
|
||||
is used to create the divs that make up the image and conversation bits. I have
|
||||
intentionally left this open so I can add more characters in the future. I may
|
||||
end up making some stickers for myself so I can reply to Mara a-la [this
|
||||
blogpost by
|
||||
fasterthanlime](https://fasterthanli.me/articles/so-you-want-to-live-reload-rust)
|
||||
(search for "What's with the @@GLIBC_2.2.5 suffixes?"). The syntax of the URL is
|
||||
as follows:
|
||||
|
||||
```
|
||||
conversation://<character>/<mood>[?reply]
|
||||
```
|
||||
|
||||
This will then fetch the images off of my CDN hosted by CloudFlare. However if
|
||||
you are using Tor to view my site, this may result in not being able to see the
|
||||
images. I am working on ways to solve this. Please bear with me, this stuff is
|
||||
hard.
|
||||
|
||||
You may have noticed that Mara sometimes has links inside her dialogue.
|
||||
Understandably, this is something that vanilla markdown does not support.
|
||||
However, I enabled putting raw HTML in my markdown which lets this work anyways!
|
||||
Consider this:
|
||||
|
||||
[My art was drawn by <a
|
||||
href="https://selic.re">Selicre</a>!](conversation://Mara/hacker)
|
||||
|
||||
In the markdown source, that actually looks like this:
|
||||
|
||||
```markdown
|
||||
[My art was drawn by <a href="https://selic.re">Selicre</a>!](conversation://Mara/hacker)
|
||||
```
|
||||
|
||||
This is honestly one of my favorite parts of how this is implemented, though
|
||||
others I have shown this to say it's kind of terrifying.
|
||||
|
||||
### The `<picture>` Element and Image Formats
|
||||
|
||||
Something you might notice about the HTML template is that I use the
|
||||
[`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)
|
||||
element like this:
|
||||
|
||||
```html
|
||||
<picture>
|
||||
<source srcset="https://cdn.christine.website/file/christine-static/stickers/@character.to_lowercase()/@(mood).avif" type="image/avif">
|
||||
<source srcset="https://cdn.christine.website/file/christine-static/stickers/@character.to_lowercase()/@(mood).webp" type="image/webp">
|
||||
<img src="https://cdn.christine.website/file/christine-static/stickers/@character.to_lowercase()/@(mood).png" alt="@character is @mood">
|
||||
</picture>
|
||||
```
|
||||
|
||||
The `<picture>` element allows me to specify multiple versions of the stickers
|
||||
and have your browser pick the image format that it supports. It is also fully
|
||||
backwards compatible with browsers that do not support `<picture>` and in those
|
||||
cases you will see the fallback image in .png format. I went into a lot of
|
||||
detail about this in [a twitter
|
||||
thread](https://twitter.com/theprincessxena/status/1310358201842401281?s=21),
|
||||
but in short here are how each of the formats looks next to its filesize
|
||||
information:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
The
|
||||
[avif](https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today/)
|
||||
version does have the ugliest quality when blown up, however consider how small
|
||||
these stickers will appear on the webpages:
|
||||
|
||||
[This is how big the stickers will appear, or is it?](conversation://Mara/hmm)
|
||||
|
||||
At these sizes most people will not notice any lingering artifacts unless they
|
||||
look closely. However at about 5-6 kilobytes per image I think the smaller
|
||||
filesize greatly wins out. This helps keep page loads fast, which is something I
|
||||
want to optimize for as it makes people think my website loads quickly.
|
||||
|
||||
I go into a lot more detail on the twitter thread, but the commands I use to get
|
||||
the webp and avif versions of the stickers are as follows:
|
||||
|
||||
```shell
|
||||
#!/bin/sh
|
||||
|
||||
cwebp \
|
||||
$1.png \
|
||||
-o $1.webp
|
||||
avifenc \
|
||||
$1.png \
|
||||
-o $1.avif \
|
||||
-s 0 \
|
||||
-d 8 \
|
||||
--min 48 \
|
||||
--max 48 \
|
||||
--minalpha 48 \
|
||||
--maxalpha 48
|
||||
```
|
||||
|
||||
I plan to automate this further in the future, but for the scale I am at this
|
||||
works fine. These stickers are then uploaded to my cloud storage bucket and
|
||||
CloudFlare provides a CDN for them so they can load very quickly.
|
||||
|
||||
---
|
||||
|
||||
Anyways, this is how Mara is implemented and some of the challenges that went
|
||||
into developing them as a feature (while leaving the door open for other
|
||||
characters in the future). Mara is here to stay and I have gotten a lot of
|
||||
positive feedback about her.
|
||||
|
||||
As a side note, for those of you that are not amused that I am choosing to have
|
||||
Mara (and consequentially furry art in general) as a site feature, I can only
|
||||
hope that you can learn to respect that as an independent blogger I am free to
|
||||
implement my blog (and the content that I am choosing to provide _FOR FREE_ even
|
||||
though I've gotten requests to make it paid content) as I see fit. Further
|
||||
complaints will only increase the amount of furry art in future posts.
|
||||
|
||||
Be well all.
|
||||
Loading…
Reference in New Issue