Skip to content

Commit

Permalink
Add external link indicator & related css. Add wa-2024-week-29 post.
Browse files Browse the repository at this point in the history
  • Loading branch information
ryan-p-randall committed Jul 22, 2024
1 parent 35345d9 commit cdb4677
Show file tree
Hide file tree
Showing 5 changed files with 149 additions and 1 deletion.
2 changes: 1 addition & 1 deletion _includes/notes_graph.json

Large diffs are not rendered by default.

68 changes: 68 additions & 0 deletions _posts/2024-07-21-wa-2024-week-29.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
---
title: Weekly Assemblage for 2024 Week WW
last_modified_at:
categories: [weekly-assemblage]
excerpt: 'Extraordinary Birder, Hyperlocal Psychogeography, and External Link Indicators.'
tags:
- meta
- notetaking
- psychogeography
# header:
# image: /assets/images/weekly-assemblage.png
# caption: 'Photo credit: [**Unsplash**](https://unsplash.com)'
published: true
toc: true
comments:
date: 2024-07-21T17:46:25-6:00
---

[Weekly Whaaa…?]({% post_url 2016-01-09-weekly-whaaa %})
{: .notice}

I use the ISO weeks from Monday to Monday, so [ISO Week 29](https://en.wikipedia.org/wiki/ISO_week_date) is the week of 2024-07-15/2024-07-21.

## Viewing and Reading

### Extraordinary Birder

We've been watching [Extraordinary Birder with Christian Cooper](https://www.justwatch.com/us/tv-show/extraordinary-birder-with-christian-cooper) a bit this week, and it's really enjoyable. My spouse has been watching it more attentively than I have (I've often been reading as she watches), but I watched all of the Palm Springs episode and like it enough that I'm planning to re-watch the whole series with her.

### Hyperlocal Psychogeography

Hyperlocal [psychogeography](https://en.wikipedia.org/wiki/Psychogeography) isn't a show or anything; I've just been taking walks around the neighborhood far earlier in the morning due to the current heat wave, and the shift in time has led me to pay newfound attention to the built environment while I do so.

Psychogeography has long been a fave practice of mine, ever since I first read about the Situationists. It's an always-there method for adopting beginner's mind even amid what could otherwise feel like profoundly familiar surroundings.

If I take a particularly long walk, there's a corner where you can see Bogus Basin Road winding up into the Boise Foothills on its way to [Bogus Basin](https://en.wikipedia.org/wiki/Bogus_Basin) and further beyhond. The switch from tree-lined streets nestled in the Treasure Valley and the greater Snake River Plain to seeing a gateway to the mountains north of town can be quite jarring—and often inspires a welcome and unexpected sense of possibility early in the day!

## Lightly-Annotated Linkapalooza

- University of Minnesota Press has a [Forerunners: Ideas First book series](https://www.upress.umn.edu/search-grid/?series=forerunners-ideas-first), which they describe as "short books of thought-in-process scholarship, where intense analysis, questioning, and speculation take the lead." It seems like all of these are published with an open access version that can be read online, using their Manifold platform. It's up to 75 titles already! A few that might be of interest are:
- [_Theory for the World to Come: Speculative Fiction and Apocalyptic Anthropology_](https://www.upress.umn.edu/9781517907808/theory-for-the-world-to-come/)
- [_Shareveillance: The Dangers of Openly Sharing and Covertly Collecting Data_](https://www.upress.umn.edu/9781517904258/shareveillance/)
- [_Spoiler Alert: A Critical Guide_](https://www.upress.umn.edu/9781517908034/spoiler-alert/)
- [_Deep Mapping the Media City_](https://www.upress.umn.edu/9780816698516/deep-mapping-the-media-city/)
- [_Learning versus the Common Core_](https://www.upress.umn.edu/9781517907792/learning-versus-the-common-core/)
- [How I Use Obsidian](https://jasonheppler.org/2024/07/15/how-i-use-obsidian/) by the historian [Jason A. Heppler](https://jasonheppler.org/about/) provides a great overview of why the [Obsidian notetaking app](https://obsidian.md/) can be so useful. I don't personally use the Johnny Decimal organizing scheme, but I've read a lot of people sing its praises. Heppler's use of the [Dataview plugin](https://blacksmithgu.github.io/obsidian-dataview/) sounds compelling enough that I think I'm going to start testing it out with my own research notes. Heppler also links to an extensive guide to [Doing History with Zotero and Obsidian](https://publish.obsidian.md/history-notes/01+Notetaking+for+Historians) by [Elena Razlogova](http://elenarazlogova.org/), which I'll probably read over the next week.

## Site Refinements of the Week

Reading [Microfeatures I love in Blogs and Personal Websites](https://danilafe.com/blog/blog_microfeatures/) last week inspired me to search for ways to add external link indicators to my site.

There are a number of plugins that let one do this with Jekyll, but many of them require intentionally annotating either internal or external links with extra tags. I'm wary of adding features that will require me to go back and change almost a decade of posts, so instead I searched for simpler approaches. I was discouraged at first that all the plugins or approaches I found were focused on the ability to force external links to open in a new tab, a behavior which often poses [accessibility challenges](https://webaim.org/techniques/hypertext/hypertext_links#new_window), so that's not an approach I want to add.

When I found MichaelDot's [Adding Ability to Open External Links in New Tab Minimal Mistakes Jekyll](https://michaeldot.com/Adding-Ability-to-Open-External-Links-in-New-Tab-Minimal-Mistakes-Jekyll/) blog post, I realized that I could adapt his JavaScript code to annotate the links without also forcing the "new tab" behavior. Thankfully, my spouse had time to help me go through and make sure that I understood all of what this small script does, so I feel comfortable adding it to my site.

I've chosen an upward-right facing arrow that doesn't include the usual "box" element, to hopefully indicate that it's an internal link but not one that will hijack your browser and create a new tab.

I will probably go back and add an ARIA label to indicate these external links—but I'm currently hesitant because I've often heard accessibility experts say that [no ARIA is better than bad ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)… and I'll want to carefully consider whether whatever I end up adding is worth the risk of doing it poorly.

But for now, you're very welcome to adopt or adapt my site's [`external-link-indicator.js` file](https://github.com/ryan-p-randall/ryan-p-randall.github.io/tree/develop/assets/js/plugins/external-link-indicator.js) (which determines which links are external and adds an appropriate class to the html) and the following css rule (which adds the visual decoration).

```css
.page__content a.external-link:not(nav a.external-link, div.backlink-box a.external-link)::after {
content: ""
}
```

If you do end up using this—and especially if you add your own refinements or improvements—I'd love to hear about it!
10 changes: 10 additions & 0 deletions _sass/minimal-mistakes.scss
Original file line number Diff line number Diff line change
Expand Up @@ -85,4 +85,14 @@ h6 {

.toc .active a {
box-shadow: inset 0 0 0 0.15rem mix($background-color, $link-color-hover, 5%);
}

/*
.page__content a.internal-link:not(nav a.internal-link) {
background-color: aqua;
}
*/

.page__content a.external-link:not(nav a.external-link, div.backlink-box a.external-link)::after {
content: ""
}
35 changes: 35 additions & 0 deletions assets/js/plugins/external-link-indicator.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
class ExternalLinksHandler {
constructor() {
this.addAttributesToExternalLinks();
}

addAttributesToExternalLinks() {
// Select all anchor tags
const links = document.querySelectorAll('a[href]');

// Iterate over each link
links.forEach(link => {
// Check if the link is external
if (this.isExternalLink(link)) {
// Add external link class
link.classList.add("external-link");
}
});
}

isExternalLink(link) {
// Get the location of the current document
const currentLocation = window.location.hostname;

// Extract the domain from the link's href attribute
const linkDomain = new URL(link.href).hostname;

// Check if the link's domain is different from the current location's domain
return currentLocation !== linkDomain;
}
}

// Initialize the ExternalLinksHandler when the DOM is fully loaded
document.addEventListener("DOMContentLoaded", function() {
new ExternalLinksHandler();
});
35 changes: 35 additions & 0 deletions assets/js/plugins/internal-link-indicator.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
class InternalLinksHandler {
constructor() {
this.addAttributesToInternalLinks();
}

addAttributesToInternalLinks() {
// Select all anchor tags
const links = document.querySelectorAll('a[href]');

// Iterate over each link
links.forEach(link => {
// Check if the link is internal
if (this.isInternalLink(link)) {
// Add internal link class
link.classList.add("internal-link");
}
});
}

isInternalLink(link) {
// Get the location of the current document
const currentLocation = window.location.hostname;

// Extract the domain from the link's href attribute
const linkDomain = new URL(link.href).hostname;

// Check if the link's domain is different from the current location's domain
return currentLocation === linkDomain;
}
}

// Initialize the InternalLinksHandler when the DOM is fully loaded
document.addEventListener("DOMContentLoaded", function() {
new InternalLinksHandler();
});

0 comments on commit cdb4677

Please sign in to comment.