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.

👓 Why you should say HTML classes, CSS class selectors, or CSS pseudo-classes, but not CSS classes | Tantek

Read Why you should say HTML classes, CSS class selectors, or CSS pseudo-classes, but not CSS classes by Tantek ÇelikTantek Çelik (tantek.com)
Search the web for "CSS classes" and you'll find numerous well intentioned references which are imprecise at best, and misleading or incorrect at worst. There are no such things as "CSS classes". Here's why you should refer to HTML classes, CSS class selectors, or even CSS pseudo-classes, but not "C...
I’ve been looking at potentially switching themes again on my website,  but I’m still not sure I want to make the jump. If I do, I’m going to simplify things down a bit.

In the process, I’ve been looking at tweaking some of the CSS in the Post Kinds Plugin, particularly since I’m using it so heavily for a lot of my content. One of the small things I’ve wanted to do was to make what I can only call the pseudo-titles of the bookmarks, reads, etc. slightly larger to bring more attention to the titles and authors of those parts.

To do it, I’ve added the following couple of lines to my child theme’s style.css file:

/* Changes the font size on the titles of Kinds */
section.response > header {
  font-size: 20px;
}