rhys.wtffeeds

← Back to Coffee now

Building an IndieWeb house (III): a smorgasbord of other tips

Coffee nowOpen original ↗

I don’t really like blog post titles that just promise tips, but this post is truly a mishmash of other stuff I’ve learnt, so I couldn’t think of anything better. I at least refrained from calling it ‘Clare’s top tips’, which was the title I put on the slides for this section when I was giving the talk these posts are based on to my work colleagues!

A two level slate pyramid with tempting looking cheeses on the top level and tempting looking cold meats on the lower level. It is on a table with a white tablecloth and the background shows wine glasses and other goodies. The are shadows indicting some sun and there are garnishes of rosemary scattered around

©Fotomaki. Not a stock image of a smorgasbord this time – this is a smorgasbord I actually ate!

So to avoid any suggestion of clickbait, and as I said at the end of my previous IndieWeb post, I’ll say it again at the start of this one, the most important tip I have is simply have some fun with your hobbies, and that includes IndieWeb-style blogging.

I also find all my blog posts always end up longer than I expect, so as a bit of navigation to the random things I think it’s helpful to know about, we have:

The legal stuff

Obligatory disclaimer of not being I’m not a lawyer aside (so do your own research as necessary), there are a few things you need to comply with when running a website.

Online Safety Act

Well, the UK Online Safety Act (OSA) is for sure a bit of a mess, but so as long as your site content doesn’t fall into one of the OSA’s regulated areas (violence, porn etc.), and we don’t, you’re only likely to come into scope if you allow user content, such as comments.

But if lawyers (and can I publicly thank Neil Brown for his work here) can’t unpick the OSA’s exemptions around comments, what hope for the rest of us? If I were to instigate comments, at the moment, I would choose to pre-approve everything and not allow comments-on-comments to be on the safe side.

Data collection consent

When we think GDPR (although it’s actually partially PECR) regarding websites, we probably think consent pop-ups, and you’ll notice this blog doesn’t have any.

The reason is simple, we don’t track visitors in any way at all.

No analytics (especially not Google analytics), no JavaScript pings to record your movements, I don’t even look at numbers of unique IP addresses. As it stands there’s no cookies either, but if I were ever to get around to putting dark mode back on, then those (or some sort of local storage) would be necessary, but as I wouldn’t use that to track you, I understand no pop-up is needed.

A silly infographic titled “GDPR Wrapped 2024 — Data about your Data”, listing: 899 cookies placed; Data shared with 17,203 partners; Top purposes: #1: Store and/or access information on a device, #2: Measure content performance, #3: Develop and improve products; You clicked “Accept all” once. In a real hurry, huh?; 37% of sites say they value your privacy.; You read 391 articles through the gap above the banner. That puts you in the top 7% of users worldwide. What a commitment!; Most ads seen: 460 from Temu, 195 from Amazon, 63 from Unilever.

©@Ninji@wuffs.org. A spoof, but very illustrative of how perversely most websites surveil you!

So complying with GDPR is easy enough and something that aligns with how I feel a website should be anyway.

One more aspect you have to be careful with here is any embedded content, including fonts, scripts and social media feeds, because if you embed stuff, visitors are treated as if they’d visited the host site, and you might need to get consent for what those sites do. (I hesitate to embed stuff anyway, even from the privacy good guys like Mastodon instances, just in case API access changes or stuff disappears, breaking your site.)

The only difficulty could be if you want more than the odd bit of video content because video is bandwidth heavy (as there’s only one smallish video on this site, it is hosted on this site rather than on YouTube).

Licences and credits

I’m careful to make sure I have an appropriate licence to use any stock images and icons on this blog, and to ask for permission in other cases.

The other thing to mention when sourcing images is to be careful of licence scams under early Creative Commons (CC)-BY versions, a deliberate ploy to trick people into using images, as usually allowed under this licence, but catch them out and charge fees when minutia aren’t followed. This loophole has been closed in CC-BY 4.0 licences.

The UK also does have fair-use exemptions, and images or memes (e.g. for review or journalism purposes) are occasionally used here under such terms.

I also credit everything – it’s not always a requirement – but I just feel it’s important to thank those who provide stuff to make my blog posts a little more happy, or even make this blog possible. Hence, each post has it’s own credit section, and there’s a site credits page too.

Don’t forget your print media tricks

We’re told most visitors to a blog are on a mobile device these days; whether that’s true here I don’t know because, yep, I really mean I don’t track you.

But assuming some mobile visitors, the trouble is, even if you keep your paragraphs shorter than you usually would, a blog post can very quickly become a wall of text, which just feels a bit dull.

So learn from print media, and if you don’t have enough pretty pictures, break things up with a pull quote. [On the great pull quote debate of whether they go before or after the text they’re quoting, I tend to prefer before, as a teaser, but am more swayed by positioning them where helps most on mobile!]

I also liberally use content boxes for stuff that is tangential to the main text.

Both pull quotes and content boxes are given as <aside> HTML elements, and have a bit of background colour, and I like to think they help to make posts a bit more appealing, especially if anyone were only skimming them.

Have someone proofread your posts

I’m not so fortunate as to have professional (human) proofreaders for my blog; therefore I have to do as best I can.

However, it’s really a good idea to have someone other than you read your content if you can, as finding errors in stuff you write yourself is notoriously difficult. You just read what you intended to say, not what’s there.

This goes hand-in-hand with the next tip.

Don’t strive for perfection

If I worried too much about everything being perfect, then I’d never get any content up. It’s not like I’m writing science here; if I spot an error later, I can easily go back and change it (Northern Island stayed up quite a while before I spotted and adjusted that one).

Keep things simple, then iteratively add features

I’ve actually hidden some things in my Hugo theme because it’s best to try and keep things simple, especially as you first learn your way around static site generators (SSGs) and blogging.

I personally feel that having navigation breadcrumbs or a table of contents is too much for most posts (ironically, that might not be true of this particular post, which does jump around a bit).

But I’ve iteratively added features as I’ve wanted them.

As an example, one of the first things I adjusted was having different size images within the post and adjusting for mobile. And I have no issue telling anyone I’m doing that the old-school way – yes, that’s with float. I feel legitimate in saying it’s still the best tool for my use of having text wrap around images, as it was designed for in the early web days.

Far simpler than setting up a full CSS grid layout!

That said, some stuff I have taken off is stuff that I would like, but time and priorities… For example, there’s no ‘official’ dark mode here because I prefer light mode. I do keep meaning to come back to that one but 4 years later and I still haven’t quite managed it.

Don’t worry about out-of-date browsers

My approach to this site not working for anyone using an out-of-date browser is just not to worry about it. If anyone’s using a browser that will affect this site, then they’ve likely got bigger problems than my blog going all screwy.

That said, I do try and check the site on a Crom(ium) browser, FireFox and Safari, as just occasionally you run into trouble with something that isn’t supported or has a bug.

I’m fine with CSS like text-wrap: pretty not being widely supported as the fall back is no worse than you’d do without it, but Safari not supporting content for the ::marker pseudoelement (see ‘Can I use’) is something I have to work around.

Accessibility

Whereas I don’t worry about browsers, as someone can always update their browser, I do try and do my best on accessibility. Someone can’t simply update their eyes (as I know being very short sighted myself).

Sometimes there’s a few compromises to be had here, and there are things I do know I want to improve on this site, but I’m also of the view that, assuming your theme is halfway sensible in what it’s doing, 80% of the issues really will be solved by 20% of the work.

Three things to do that aren’t covered by the theme are:

  • use alt and screen reader only text
  • use sensible link text
  • write semantic HTML

Alt text

Hugo’s figure shortcode, which I use for inserting images, has a place for adding alt text and I always do that. I also make sure purely decorative images or icons are hidden from screen readers by adding alt="" or using aria-hidden=true. (Rather annoyingly the shortcode doesn’t work for the empty alt, but we’ve overridden that in our site.)

Deciding when an image is decorative isn’t always easy, but I go with would I describe it if I were reading the article out loud to someone on the phone or do I think it’s verbal clutter.

I also have some CSS to visually hide text while allowing it to be read out to screen readers. It’s probably always a bit of a fudge where you need this (and it will show up in browser search windows) but, for example, there’s no easy way of conveying that my four filled star icons in a row followed by an empty star is four out of five stars else.

Links

Using sensible link text is important because screen reader and keyboard users use linked text to navigate through posts. Since I learnt this (so it’s not true of older posts), I’ve made sure to try and write linked prose in such a way as you would know where a link was taking you if you were to see that text out of context.

If that isn’t possible, I make sure the linked text is unique on the page, and never use ‘click here’, ‘read more’ etc.

To keep URLs short and show where they take you as clearly as possible, I usually strip utm tracker codes and never link to anything through a link shortener.

My style for the extra shot sections does give the full URLs out in the text; I do realise they might not be read out perfectly by a screen reader, but there I want readers (or listeners) to be aware of the actual source without the effort of a hover, so I think that’s reasonable.

Finally, I do also have an underline on links within posts themselves.

Semantic HTML

Semantic HTML isn’t so hard if you’re writing posts in markdown.

Almost by default, if you can follow things in the plain text format, you’re going to follow them when fancied up, and the simplicity of what’s available to you means you’re using elements, like lists and blockquotes, correctly.

The only thing there to remember is make sure you use headings in a logical order, rather than skipping any heading levels.

Accessibility improvements

There’s often work you can do to improve accessibility, so things from the theme I know I want to look into are:

  • improve aria notations for drop down in the archive
  • sort alt text as well as captions in image galleries
  • investigate if focus on code blocks can be improved (related to the copy button, but…)
  • modify the jump link icons that currently appear on hover to work with keyboard focus

I’ll hopefully come back and mark them as done in the future.

Likes and engagement

Inspirational Skeletor says this best:

go to social media post with three grinning skeletors with a with body and deep purple hood. Meme-style text says 'Stop trying to be liked by everybody. You don't even like everybody.'

Although I’m absolutely writing these posts thinking of the reader, and I like to write as if I were talking to you, I’m doing this as a hobby for me and never for likes and engagement. I’m under no illusion that there will be many readers.

So why bother? And just as I was wondering how to answer that, another blog did just that.

You write because you think, because you observe, because you need to put it somewhere.
If someone reads it? Bonus.

That resonated even if I wouldn’t quite put it like that; indeed, in another post he talked about cutting all fluff – you’ve probably noticed that’s not what I’m about! (Note although this is quite a recent article, the original is already no longer on the web, illustrating why you need to check your blog for link rot.)

Mind, I’m not pretending that it isn’t an honour if someone does read my writing, and even more an honour if they choose to link to me on their own IndieWeb website. As did the fab little newsletter Shellshark Scrolls (volumes seven and five if you want to check!).

Comments and webmentions

I umm and ahhh about comments every now and again, but I’ve never actually added them (not to mention the OSA issue discussed above).

Obviously with a static site, you have no database to allow interaction, so would need to involve a third party (I’d probably try Komments or utterances).

Also, one of the IndieWeb principles is indeed to try and collate everything that appears elsewhere back to your ‘house’, and it is fairly easy to pull stuff back with JavaScript from both the fediverse (Mastodon) and the ATmosphere (BlueSky).

But if you use JavaScript, you couldn’t moderate immediately and there’s also the issue of if people would expect their comments in these platforms to appear here (especially on BlueSky, where you simply don’t get enough characters in posts to explain).

I think the answer is no they wouldn’t.

Webmentions are an another IndieWeb concept whereby replies are actually made on your IndieWeb site rather than in a platform you don’t control. The thing is, if people never really comment on blogs like they used to anyway, what’s the chance the person who wants to comment has their own site? Pretty small.

But if you want to chat, then I do absolutely welcome you getting in touch. I’ll probably add an email to this website (despite spam) soon, but, for now, best to try our fediverse account.

Have fun, no I really mean it!

So, nothing more to say but what I’ve said before. (Oh, I could mention how you probably can’t stop LLM scraper bots but at least you can put up an AI-preventative robots.txt for if they ever started being ethical about not ignoring it and hiding their user-agents).

But back to the most important point…

Have fun! In fact one of the questions, I was asked after the talk is what part(s) of this process I find fun.

Well, I think (unless you’re more techy than me to start with) you probably wouldn’t blog this way if you’re all about the actual writing; using an SSG is something you’re probably doing because tinkering with exactly how your site looks is also part of the fun.

It might be silly, but I do find some of the little things fun… I might baulk at going full out like some sites I see on Neocites (check out pomelo.lol as an example), but, I do go, “ooo, how about a little drop shadow on hover for my tags list, oh yes… fun…” [In this vein, even professional front-end devs do have fun with the little things too; they just go even fancier (see Josh Comeau’s wonderful rainbow).]

Vintage black and white photo of a white cat looking a bit perturbed with an open mouth. A hand-written speech bubble from the cat says 'why don't you write'. Copyright is labelled as 1911, J. G. STEELE.

From a 1911 postcard.

I’m also not going to pretend blogging is always a quick process – there’s a reason each of these IndieWeb posts is 2 weeks apart, even with the structure coming from a talk I’d already given (I also do read every ‘extra shot’ I link to; they are genuinely curated by me).

But ultimately, I want to blog because I want to write and then get the writing out to the world (without the walls of the social media). [Editing the posts can a bit ‘day job’ though!]

And so finally here we are, the end! If you’ve read all of this series on ‘building an IndieWeb house’, I hope you’ve liked something about them!

The best time to start building your own house 🏠 is now.

Extra shots

Related to the legal stuff

HTML and accessibility

Comments

Bots

Double extra shots

Credits

Picture of the smorgasbord copyright of Fotomaki (now Joy Story); used with permission.

GDPR spoof ‘wrapped’ infographic is copyright of @Ninji@wuffs.org, and we’d like to thank them very much for permission to use it here.

Meme on likes is from Inspirational Skeletor.

Cat saying “why don’t you write” is public domain and sourced from Cats of Yore.

Comments (0)

Comments (0)

No comments yet.