CSS | Chris Aldrich

Let’s say you’re in love with Hypothes.is, but you’re also an old school pen and paper person. There’s definitely a way to add that old school index card/zettelkasten feel to your new digital notes.

The front page of Hypothes.is with their web interface opened, but instead of a blank annotation space it looks like one can write their notes on a digital looking index card.

Read Fun and Done by

David Bryant (disquisitioner.com)

Success! As the result of today's project day at IndieWebCamp West I now have a working color scheme selector. In the upper right corner of this page you'll see a slider that'll let you choose a light or dark color scheme for this and every other page on my site. Most of the implementation is nearly...

Color Theme Switcher by Max Böck

Bookmarked Color Theme Switcher by

Max Böck (mxb.dev)

Let users customize your website with their favorite color scheme! Your site has a dark mode? That's cute. Mine has ten different themes now, and they're all named after Mario Kart race tracks.

I love the idea of this sort of color theme switcher. Reminiscent of the sort of functionality built into TiddlyWiki. I suspect that some of the code built into WordPress’ Customizer could be repurposed to give people the ability to do this in the WordPress world.

An h-card for my TiddlyWiki

I’m still spending lots of time trying to figure out how TiddlyWiki works, so some of this may seem hack-y, but it seems to get the job done. I’d love it if others who are using their TiddlyWikis as their primary website (and who have more experience than I) weighed in with their expertise or experience.

One of the core IndieWeb building blocks is having an h-card on your website to establish one’s identity, either for others to read or for computers and parsers to know who you are.

A valiant first attempt

To start out, I created an About Tiddler with the appropriate h-card and other microformats mark up and then put it into a tab in my right sidebar to make it easy to find.

Naturally, I ran into a problem when trying to throw this into indiewebify.me. Since TiddlyWiki websites are generated primarily by JavaScript and thus suffer from the js;dr problem, figuring out where to put and display an h-card was going to be an issue. I even tried throwing it into the Site Title in the control panel and hoped for the best, but in the end, the site title is really the shadow Tiddler $:/SiteTitle and like all the rest of the page is generated by JavaScript.

I muddled around a bit and even tried to add an h-card using a <link> in the <head>, but nothing seemed to work.

A hackable solution?

Ultimately, in frustration, I simply threw a simple h-card into the <head> just to see what would happen. It wasn’t terrible—the parser found it and displayed it as a success. Unfortunately I discovered that TiddlyWiki displayed my photo and name at the bottom of my page in the browser. I didn’t expect this, but at least it was a start.

Since this method seemed to work, I thought I’d continue the cheat and just throw in some in-line CSS so that the muddled h-card wouldn’t actually show on my page. I’d use this coded h-card in my <head> for computers and keep the somewhat more elaborate one for people in my about page.

What I did

So, for those who’d like the entirety of the solution, here’s what I did:

I created a plugin tiddler entitled $:/plugins/indieweb/core/rawMarkup and gave it the tag $:/tags/RawMarkup
I added the following lines of code to it and saved the Tiddler
1. <a style="display:none" class="h-card u-url" href="http://tw.boffosocko.com/"> <img src="https://www.boffosocko.com/logo.jpg" alt="" style="display:none" />Chris Aldrich</a>
Profit!

Again, this works, but seems very hack-y to me. If you’ve managed to get a h-card into your TiddlyWiki in a different or more elegant way, I’d love to hear your thoughts.

Thoughts on delegated h-cards

Given the difficulty and trouble of all this, I’m sort of left wondering why–particularly since I’m using this site as a secondary one to my primary site–I couldn’t just throw in a link to the h-card for my primary site and call it a day? Unless I’m missing something, for some reason the way that representative h-cards are defined, they expect the h-card to point to the site they’re actually on.

Why couldn’t/shouldn’t I delegate my h-card on subdomains or other personal sites to point to the representative h-card on my primary site? What if parsers could follow other rel=”me” links on my site to find/intuit a representative h-card from one of those? While I could have lots of domains to better differentiate my online identity, why couldn’t I do that, but still have the same primary identity?

For Homebrew Website Club Wednesday, even though I didn’t make it to an in-person meetup I did manage to make some reasonable visible progress on my website.

I hacked together some tweaks to add the following:

Improved support in my theme for time related microformats including dt-published and dt-updated
Because I post so frequently, I added a visible timestamp next to the date so it’s easier to follow my timeline of posts.
I removed the data for my location, weather, and syndication links from the_body of my posts and appended it to my post meta data. This should prevent it from showing up in Webmentions to others’ websites or in syndicated copies, but still be available to parsers to attach that data to my posts in readers and other services.
I modified my CSS so that the text in the Simple Location and Syndication Links plugins matches that of the rest in its section.
I added a cute little bullhorn icon in front of my Syndication Links so that it has some parallelism with the rest of the meta data on my site.
I’d always liked the idea of adding in related posts data on my site, but didn’t like how it had worked in the past. Things were even worse with replying to other people’s posts as my markup (and far too many others I’ve seen in the WordPress world) was hacky and caused the related posts data to show up in their Webmentions sent to other sites. I looked through some of Jetpack’s documentation and figured out how to remove their Related Posts functionality from the_body, where it defaults, and append it instead to the post meta section of my posts. It’s not perfect yet, but it’s much closer to how I’d like it. Best of all, that data shouldn’t show up in my replies to other sites now either! I had disabled the functionality ages ago because it made me feel like a rude-IndieWebber.

With IndieWebCamp Online 2020 coming up this weekend, I hope to fix a few outstanding issues and roll these changes up into my open sourced IndieWeb Twenty Fifteen WordPress theme as my hackday project. If you’re using it on your own site, do let me know. Not that I can promise to fix it if it’s broken in places, but I’d at least like to know how it’s working out for you or where it could be improved.

Things left over to fix:

Simple Location data still needs some CSS help to display the way I want it to.
I need to target the Simple Location icon so I can have its color match that of the other icons.
Because so many of my posts don’t have titles, I’ll need to tweak something there so that the Jetpack related posts will pick up better meta data as a pseudo-title instead of displaying the relatively context-less commentary that appears in the_body.
It may take a day or two for the related posts to populate properly, but I should make sure that it’s putting out relevant/interesting results.
Is it worth adding a default featured photo for the related posts that don’t have one? Could I pull one from other meta fields for some classes of posts?

Read My personal roundup of 2019. by Rachel Andrew (www.rachelandrew.co.uk)

Twenty years ago I saw in the Millennium, at home recovering from flu. My daughter was a toddler, I had no money, and was just beginning my career in web design. I had no idea what building websites would lead to, or what the web would look like 20 years on.

Some great lists of CSS related resources linked here.