👓 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;
}
Bookmarked Relative Font Weights Considered Harmful by Den McHenryDen McHenry (denmchenry.com)

Not exactly, but who can resist writing a "considered harmful" article when you can get away with it?

The real harm is that you can very easily conceal the semantics conveyed by font-weight depending on the font that's rendered, which is not always in your control. This all depends on how you define the base weight to which your relative values refer, and (1) whether that base weight is actually available in the rendered font and (2) which value is substituted if it isn't.

You get a webmention, and you get a webmention, and…

👓 HTML, CSS and our vanishing industry entry points | Rachel Andrew

Read HTML, CSS and our vanishing industry entry points by Rachel AndrewRachel Andrew (The site of Rachel Andrew, writer, speaker and web developer)
Some thoughts on entry points to web development today, and my fears about the loss of something that has enabled so many people without a traditional computer science background to be here.

Improving user experience with links, notifications, and Webmentions

Back in December, I was thinking about html links and the functionality of sending notifications using webmentions. Within the IndieWeb, this is known as mentioning or potentially person-tagging someone (inline). By adding a link to a person’s website onto any mentions of their name in my posts, my website will automatically send them a notification that they were mentioned. They can then determine what they want to do or not do with that information.

While I want people that I mention in some of my posts to be aware that they’ve been mentioned by me, I don’t necessarily need to add to the visual cruft and clutter of the pages by intentionally calling out that link with the traditional color change and underline that <a> links in HTML often have. After all, I’m linking to them to send a notification to them, not necessarily to highlight them to everyone else. In some sense, I’m doing this because I’ve never quite liked that Twitter uses @names highlighted within posts. All the additional cruft in Twitter like the “@” and “#” prefixes, while adding useful functionality, have always dramatically decreased the readability and enjoyment of their interface for me. So why not just get rid of them?! I’m glad to have this power and ability to do so on my own website and hope others appreciate it.

In the past I’ve tried “blind notifying” (or bcc’ing via Webmention) people by adding invisible or hidden links in the page, but this has been confusing to some. This is why one of the general principles of the IndieWeb is to

Use & publish visible data for humans first, machines second.

Thus, I’ve added a tiny bit of CSS to those notification links so that they appear just like the rest of the text on the site. The notifications via Webmention will still work, and those who are mentioned will be able to see their names appear within the post.

For those interested, I’ve left in some hover UI so if you hover your mouse over these “hidden” links, they will still indicate there’s a link there and it will work as expected.

As an example of the functionality here within this particular post, I’ve hidden the link on the words “mentioning” and “person-tagging” in the first paragraph. Loqi, the IndieWeb chat bot, should pick up the mention of those wiki pages via WebSub and syndicate my post into the IndieWeb meta chat room, and those interested in the ideas can still hover over the word and click on it for more details. In practice, I’ll typically be doing this for less relevant links as well as for tagging other people solely to send them notifications.

I’m curious if there are any edge cases or ideas I’m missing in this sort of user interface? Sadly it won’t work in most feed readers, but perhaps there’s a standardizable way of indicating this? If you have ideas about improved presentation for this sort of functionality, I’d be thrilled to hear them in the comments below.

Twitter:

👓 CSS Basics: Styling Links Like a Boss | CSS-Tricks

Read CSS Basics: Styling Links Like a Boss (CSS-Tricks)
You are probably well acquainted with how links looks without any styling at all. That blue. That underline. That's a link in it's purest form. But what if we want to change things up a bit? Perhaps blue doesn't work with your website's design. Maybe you have an aversion to underlines. Whatever the reason, CSS lets us style links just like any other element.

👓 Basic Things You Need to Know to Become a WordPress Developer | Caldera Forms

Read Basic Things You Need to Know to Become a WordPress Developer by Josh Pollock (WordPress Form Builder | Caldera Forms)
There are a lot of reasons to love WordPress, but one of the reasons I keep WordPressing is the supportive community. While I have no formal training as a web developer, I don’t like describing myself as “self-taught.” I didn’t figure this out on my own, I was taught by a supportive communit...

👓 Programming CSS | Jeremy Keith

Read Programming CSS by Jeremy KeithJeremy Keith (adactio.com)
There’s a worrying tendency for “real” programmers look down their noses at CSS. It’s just a declarative language, they point out, not a fully-featured programming language. Heck, it isn’t even a scripting language.
That may be true, but that doesn’t mean that CSS isn’t powerful. It’s just powerful in different ways to traditional languages.

Spent a few minutes late this afternoon to update the CSS on my website to hide the automatic titles given to annotation and highlight posts. Also modified these slightly to give the highlighted/quoted portion of other sites a highlighter-yellow color.

An example of the yellow highlight color of highlighted/annotated posts on my website. Previously the quoted portions had been a muted grey like other posts.

👓 Introducing Trashy.css | CSS Tricks

Read Introducing Trashy.css by Nathan Smith (CSS-Tricks)
It began, as many things do, with a silly conversation. In this case, I was talking with our Front End Technology Competency Director (aka "boss man")

I can’t wait to try this out on some sites. I love that it’s got a browser bookmarklet that will let one test out other sites too.

👓 Posting Source Code | Support — WordPress.com

Read Posting Source Code (WordPress Support)
While WordPress.com doesn’t allow you to use potentially dangerous code on your blog, you can post source code for viewing by using the directions found in this support doc.

I’d wondered before how to better display code on my website. This article has a link to an excellent plugin on WordPress.org for doing it and even better, it also syndicates across to my mirrored site on WordPress.com well.

Replied to Finds at Powell’s Books by Joseph Dickson (LinuxBookPro)
Old, new, odd, and hard to find books all in one expansive store. I think we spent three hours roaming the stacks and only cracked the cover of what they offer.

My favorite, by far, has to be the Eric Meyer (t) hangtag!