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.
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.
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
<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.
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?
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.
I hacked together some tweaks to add the following:
- Improved support in my theme for time related microformats including
- 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_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.
- 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
- 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?
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...
A collection of other webdevelopment and design blogs I like to read.
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.
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.