A modern CSS showcase styled by community contributions. Maintained by Stephanie Eckles (@5t3ph) of ModernCSS.dev.
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...
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.
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.
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.
I muddled around a bit and even tried to add an h-card using a
<link> in the
<head>, but nothing seemed to work.
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.
So, for those who’d like the entirety of the solution, here’s what I did:
<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>
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.
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?
Browser support tables for modern web technologies
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.
wow nice tool! https://t.co/7msJM6q5Ye
— Ced (@ced404) February 20, 2020
I hacked together some tweaks to add the following:
the_bodyof 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.
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:
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.
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.
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...