RMiddleton

Nothing to see here.

Here I will sometimes implement formatting experiments that have to be seen in a published post to evaluate.

---

IG embedding?

No! Don't want it anyway!!

<iframe src="https://www.instagram.com/s/aGlnaGxpZ2h0OjE4MDM0NTExMDQxNTc5NTQ0?story_media_id=3223593204200498901&igsh=YzZhcDIzanNzeDA5"></iframe>

---

Toot embedding

It takes a little bit of trial and error to arrive at an iframe height that looks so-so on both web and phone. And of course I am only checking on my own setup! I am not certain that every part of the code shown below is necessary. I don't remember right now what z-index is, for example. And within <iframe> there's style="width:100%; as well as width=100%. Since the height within the style attribute (the one thing I am adjusting to suit each tweet) must be in px and not %, I suspect the style="width:100%; is doing nothing. I'll remove it from the 3rd toot below now... Then I'm moving on for tonight to non-code things.

The <div> & </div> tags are similar to adding a <p> so, considering the line breaks added by Markdown with every return, I put my intro & outro text right up against these <div>'s.

There's a less clumsy, more responsive way to do it, as seen in this Verge article, but their source code is too complex for me to understand and copy. Also see my own earlier post with several embedded toots that is an ok compromise similar to what is shown here.

Code:

...preceding text.
<div style="width:100%; overflow-y:auto; overflow-x:auto; position:relative; z-index:2">
<iframe style="width:100%; height:200px; border:none" src="https://dan.mastohon.com/@danhon/111858430218692397/embed" width="100%" allowfullscreen="allowfullscreen" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms"></iframe></div>
Follow-up text...

Result:

...preceding text.

Following text...

Code:

<div style="width:100%; overflow-y:auto; overflow-x:auto; position:relative; z-index:2">
      <iframe style="width:100%; height:360px; border:none" src="https://lazybear.social/@hyde/111858761285737730/embed" width="100%" allowfullscreen="allowfullscreen" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms"></iframe>
    </div>

Result:

Code:

<div style="width:100%; overflow-y:auto; overflow-x:auto; position:relative; z-index:2">
      <iframe style="height:200px; border:none" src="https://mastodon.social/@Miriamm/111834354567215101/embed" width="100%" allowfullscreen="allowfullscreen" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms"></iframe>
    </div>

Result:

---

pre & code

1: what does this look like? one tick with text after

2: what does this look like? two ticks with text after

3: and what does this look like? three ticks with text after

It all looks the same when written alongside, and different when set off. To show the code block as-is use: three ticks, return, raw code, return, three ticks, return. That's how I'll make the following that shows the how the list above is coded:

1:
`what does this look like?` one tick with text after

2:
``what does this look like?`` two ticks with text after

3:
```and what does this look like?``` three ticks with text after