If you've looked at the dashboard on my homepage, you'll see that I was talking myself through the process of getting it from a resizeable textarea to an inline frame. It was actually easier than I thought it would be, so I'm going to write it out here because I haven't done a blog entry this month yet and we're already a week into it.
In the very first stage of the process, I used the textarea tag. I want to say I came up with that idea by myself, but it was actually inspired by Jadestrogen's changelog. She contained a small textarea on her left sidebar to corral her site updates, which got me to thinking that maybe I could use this idea for my Cohost surrogate that I've been trying to do for a while. Obviously, cohost has gone read-only and will be totally gone by the last night of Hanukkah, and I'd been looking for something less private than my hidden journal page (you won't find a single link to that page anywhere on the site) where I could just have a microblog that I could use to replace cohost and tumblr. The first iteration of this microblog was carried out entirely within a read-only state textarea and the code for it looked something like this...
This had a couple pretty obvious flaws which made it less than ideal for my microblog. First and foremost is that I can't do any formatting. I couldn't put pictures or links in, either. Also, with the code formatted as it is, it allows readers to resize the area. That was the first thing I needed to fix. Rooting around on MDN Web Docs, I found that you can kerb that ability with a CSS snippet. Carrying on reading, I thought maybe I could change the colours a bit, too. I've always liked the aesthetics of old 8-bit home micros from the '80s and their more academic counterparts, ASCII terminals. So, apart from the "resize: none" snippet, I also decided to mess around with other bits of the CSS, just to see what stuck and what fell off. I figured the website was not going to explode, so who cares? The 2nd iteration looked like this
Finally getting to the point where I'm happy with how it looks and how it can't be resized anymore, I could turn my attention to the fact of the textarea element's unmoddable nature. Even though I've been trying not to whack this site with frames, I decided I needed to make an exception in this case. An iframe would let me enclose a whole entire webpage within a space the same size as the text area that I could put my traditional embellishments onto. Plus, if I wanted to change the style—like, B"H I never tire of the 1980s, but if I ever did, I could change the source page as easily as I decorate my homepage for halloween. Also, using an iframe, I don't have to code the posts directly into the homepage, which will certainly cut down on filesize. So, now, in the 3rd and final iteration, we arrive at the dashboard's current look...
If you've been looking at the page source to see all these various code changes, you'll notice that I decided to put my iframe into a table cell. This was done to overcome a skill issue on my part; I couldn't figure out how to align the frame to the centre of the page. Like I said, with a little more reading I'm sure I could fix this, but the table seemed the easiest and quickest way to get the iframe to do what I needed it to. I don't know how it interacts with screenreaders, if it works there at all, but from a purely visual standpoint, it works. It does what I wanted it to do.
If you want to add a similar dashboard to your own website, feel free to use my code as a starting point. Press CTRL+U on your keyboard to open the page source and have a look; everything is clearly labelled for convenience and you should be able to get a status dash or microblog working on your own site in less than 30 minutes. If you're new to frames, the dashboard's source page, "0uroboros.html", is its own independent page. Whatever you put into src= will show up in the frame when the containing page is loaded. The only thing to be aware of is that, if you put a link in an iframe, the page when clicked will load inside the iframe. To prevent that, have any links open in new tabs by adding target="_blank" inside the [a] tag. So like, <a href="https://example.org/" target="_blank">. Easy!
The only thing I have to figure out now is how to prevent people loading the source page independently of the iframe. Like, I worked HARD on this frame, I want you to view my status dash in its natural habitat: my homepage!