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!

🔖 Bringing interactive examples to MDN | Mozilla Hacks – the Web developer blog

Bookmarked Bringing interactive examples to MDN by Will Bamberg (Mozilla Hacks – the Web developer blog)
Over the last year and a bit, the MDN Web Docs team has been designing, building, and implementing interactive examples for our reference pages. The motivation for this was the idea that MDN should do more to help “action-oriented” users: people who like to learn by seeing and playing around with example code, rather than by reading about it.

We’ve just finished adding interactive examples for the JavaScript and CSS reference pages. This post looks back at the project to see how we got here and what we learned on the way.

h/t to @rachelandrew

👓 Is there any value in people who cannot write JavaScript? | Medium

Read Is there any value in people who cannot write JavaScript? by Mandy Michael (Medium)
I recently had the opportunity to speak at Web Directions Code 2017 over in Melbourne. While there, I was part of a panel with Mark Dalgleish and Glen Maddern (who gave spectacular talks I might add). We’d just finished a set of talks about CSS, and during the panel we got a question along the lines of (paraphrasing): “Is there a place in the industry for people who just write css and html” To me, this could easily be interpreted as, “Is there any value in people who cannot write JavaScript?”, based on some comments from the audience after, this seemed to be how many understood question. So, we asked the audience if they hire people who just write CSS and HTML. No-one put their hand up. And I, for one, was disappointed.

Chris Aldrich is reading “The Simplest (and Most Performant) Way to Offer Sharing Links for Social Media”

Read The Simplest (and Most Performant) Way to Offer Sharing Links for Social Media | CSS-Tricks (CSS-Tricks)
This past summer, I wrote The Essential Meta Tags for Social Media about how developers can prepare web pages to optimize their appearance when shared on s

Notes, Highlights, and Marginalia: From E-books to Online

Notes on an outlined workflow for sharing notes, highlights, and annotations from ebooks online.

For several years now, I’ve been meaning to do something more interesting with the notes, highlights, and marginalia from the various books I read. In particular, I’ve specifically been meaning to do it for the non-fiction I read for research, and even more so for e-books, which tend to have slightly more extract-able notes given their electronic nature. This fits in to the way in which I use this site as a commonplace book as well as the IndieWeb philosophy to own all of one’s own data.[1]

Over the past month or so, I’ve been experimenting with some fiction to see what works and what doesn’t in terms of a workflow for status updates around reading books, writing book reviews, and then extracting and depositing notes, highlights, and marginalia online. I’ve now got a relatively quick and painless workflow for exporting the book related data from my Amazon Kindle and importing it into the site with some modest markup and CSS for display. I’m sure the workflow will continue to evolve (and further automate) somewhat over the coming months, but I’m reasonably happy with where things stand.

The fact that the Amazon Kindle allows for relatively easy highlighting and annotation in e-books is excellent, but having the ability to sync to a laptop and do a one click export of all of that data, is incredibly helpful. Adding some simple CSS to the pre-formatted output gives me a reasonable base upon which to build for future writing/thinking about the material. In experimenting, I’m also coming to realize that simply owning the data isn’t enough, but now I’m driven to help make that data more directly useful to me and potentially to others.

As part of my experimenting, I’ve just uploaded some notes, highlights, and annotations for David Christian’s excellent text Maps of Time: An Introduction to Big History[2] which I read back in 2011/12. While I’ve read several of the references which I marked up in that text, I’ll have to continue evolving a workflow for doing all the related follow up (and further thinking and writing) on the reading I’ve done in the past.

I’m still reminded me of Rick Kurtzman’s sage advice to me when I was a young pisher at CAA in 1999: “If you read a script and don’t tell anyone about it, you shouldn’t have wasted the time having read it in the first place.” His point was that if you don’t try to pass along the knowledge you found by reading, you may as well give up. Even if the thing was terrible, at least say that as a minimum. In a digitally connected era, we no longer need to rely on nearly illegible scrawl in the margins to pollinate the world at a snail’s pace.[4] Take those notes, marginalia, highlights, and meta data and release it into the world. The fact that this dovetails perfectly with Cesar Hidalgo’s thesis in Why Information Grows: The Evolution of Order, from Atoms to Economies,[3] furthers my belief in having a better process for what I’m attempting here.

Hopefully in the coming months, I’ll be able to add similar data to several other books I’ve read and reviewed here on the site.

If anyone has any thoughts, tips, tricks for creating/automating this type of workflow/presentation, I’d love to hear them in the comments!

Footnotes

[1]
“Own your data,” IndieWeb. [Online]. Available: http://indieweb.org/own_your_data. [Accessed: 24-Oct-2016]
[2]
D. Christian and W. McNeill H., Maps of Time: An Introduction to Big History, 2nd ed. University of California Press, 2011.
[3]
C. Hidalgo, Why Information Grows: The Evolution of Order, from Atoms to Economies, 1st ed. Basic Books, 2015.
[4]
O. Gingerich, The Book Nobody Read: Chasing the Revolutions of Nicolaus Copernicus. Bloomsbury Publishing USA, 2004.