Read Fun and Done by David BryantDavid 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öckMax 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:

  1. I created a plugin tiddler entitled $:/plugins/indieweb/core/rawMarkup and gave it the tag $:/tags/RawMarkup
  2. 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>
  3. 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?

Bookmarked CSS Stats (cssstats.com)

Writing CSS is hard, especially at scale.

CSS Stats provides analytics and visualizations for your stylesheets. This information can be used to improve consistency in your design, track performance of your app, and diagnose complex areas before it snowballs out of control.

Hat tip:

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?
Replied to a tweet by Andy BellAndy Bell (Twitter)
I only used portions of it, but a few weeks back I bookmarked https://github.com/simevidas/web-dev-feeds

It’s got useful sections for specs, browsers, and tools. It also had @rachelandrew, @jensimmons, @adactio, and you, so it can’t be all bad.

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.
Read How To Add a Class to a Single Post in WordPress by Tom McFarlin (Tom McFarlin)
As I’ve continued to work on the theme that I’m planning to use after Standard (and that I’ hoping to begin dogfooding within the next month or so), there have been a couple of features that I’ve wanted to implement for the sake of styling. For example, there are times where I want to be abl...
I slept my way through most of IndieWebCamp Berlin2 this weekend (mostly due to the time zone differential), but in the spirit of the event, I did want to work on a few small hack projects.

I started some research and work into creating a plugin to effectuate making “vias” and “hat-tips” easier to create on my site since I often use them to credit some of my sources. I was a bit surprised not to see any prior art in the WordPress repository. Sadly, there’s nothing concrete to show off just yet. I think I’ve got a clear concept of how I want it to look and what will go into the first simple iteration. It will be my first “real” WordPress plugin, so there’s some interesting learning curve along the way. 

On a more concrete front, I made a handful of CSS tweaks and fixes to the site, and particularly to some of my annotation/highlighting related posts, that I’ve been meaning to take care of for a while.  Now on read posts where I’ve aggregated some annotations/highlights, the highlighted portions should appear in yellow to better differentiate them in portions of text and represent them as highlights. This prevents me from creating a read post for the content and one or dozens of related, but completely separate, follow-up annotation posts. Now they’re combined, and I think they provide a bit more contextualization for the original, but still include the timestamps for the annotations. I’m sure there’s some more I can do to tweak these, but I like the result a bit better than before. Today’s post about a research paper I read on food is a good example of to highlight (pun intended) some of the changes. Ideas for further improvements are most welcome.

I also slightly tweaked and then further experimented with some of the CSS for my reply contexts. I’ve been considering reformatting them a tad to try to highlight the fact that the content within them is context for my responses. In some sense I’m looking at making the context look more card-like or perhaps oEmbed-esque. I still haven’t gotten it the way I’d ultimately like it, but perhaps one day soon? I played around with changing the size of the context with respect to my content as well as adding some outlines and shadows to make the context look more like cards, but I haven’t gotten things just right. Perhaps some more research looking at others’ sites will help? Which sites do you think do reply contexts incredibly well?

I’m glad there’s a holiday coming up so I can spend a bit of time catching up on some of the sessionsand  notes and hopefully see some of the demos from the camp.

Replied to Adding a Self Contained Site with File Manager by Alan Levine (Extend Activity Bank)
Screenshot of sample basic calling card web page featuring a background with a 6 year old with his mouth agape.

Many of the sites we create in our cpanel are installed via a cpanel tool because they have complex file structures and often require database set ups. But there are quite a few web site themes that are all self contained HTML/CSS/Javsscript files that we can upload directly to our domain with the File Manager.

This activity walks you through the steps to put a self-contained web site within a directory of your site.

I created a sub-folder on my sub-domain and uploaded a simple templated HTML5/CSS website to create a simple calling card page at http://sp.chrisaldrich.net/me/. I couldn’t bring myself to replace the picture of the little kid with the gaping mouth because it was just too cute.

While I occasionally do some small uploading tweaks like this, it seems like ages since I created webpages like this outside of more elaborate content management systems. Hooray for raw HTML and CSS! It’s also a bit refreshing to do it all manually in an interface instead of via FTP or other means.

Watched Fraidycat (Prototype Vid) by Kicks CondorKicks Condor from Kicks Condor

Futilely attempting to build an RSS reader that’s not at all an RSS reader.

The year of the reader continues. This is wicked awesome. I want this reader!

There are some interesting UI pieces hiding in here. I love the way things are sortable by importance. I like the sparklines for posting frequency. The color differentiation to give an idea about recency of posts is cool.

And one of the best things is that it’s not really a reader. In true Kicks fashion, it’s all just links, which means that one goes to the original site to read the content. I mentioned just yesterday the fact that some of my “identity” is lost with the CSS and details of my site being stripped within sterile readers. This sort of reader decimates that.

Of course, the verso of that is a reader that could be CSS configurable so that every site looks as busy or crazy as mango zone does in the video. Naturally, many browsers support local CSS, so I suppose I could make the New York Times look like Kicks Condor’s site, but who has the time to do all that configuration?? (Maybe one day…) Maybe some readers will have their simple chrome, but pull in not only the content, but the CSS and visual goodness along with them? The best of both worlds?

👓 A design pattern solved by subgrid | Rachel Andrew

Read A design pattern solved by subgrid by Rachel Andrew (The site of Rachel Andrew, writer, speaker and web developer)
Playing around with subgrid and finding some interesting use cases.
A nice short article and example here.

I do have to wonder about the design choice of so heavily highlighting the “Let’s keep in touch” block at the top of the page between the title and the content.