Explore My Notes

The conversation | Seth Godin

Seth has put together what he calls a:

short manifesto about the future of online interaction

It's a call to look at the processes and concepts which have made the shift from in-person to online as a result of the pandemic, taking square aim at meetings and lectures in particular. He raises some valid points:

  • Most meetings boil down to an opportunity for someone to show off or demonstrate their status;
  • Good meetings may include an element of discussion or a venue for raising questions, but it's an imperfect system still;
  • Lectures/education are just sequences of long meetings where discussion is almost dissuaded and attendance/engagement is maintained via withholding grades, diplomas etc.

His hope is that we can use a change in circumstance to evaluate and address these issues by redefining meetings, both for education and for work. If a meeting is about transferring information, replace it with a memo or a recorded tutorial. Meetings are only truly useful when they're for transforming information (his words, which I like). And the best method of transforming information is through conversation.

Seth has had success with using Zoom's breakout session features to manage that process, effectively using the main call to present an idea or problem, then sending students into breakout rooms to discuss.

A federated Instagram | PixelFed

The fediverse is an interesting concept that's long had competitors for a number of mainstream social sites, the most infamous of which is probably Mastodon. I hadn't realised that there was an Instagram-clone running on the ecosystem, but it looks pretty neat. Better still, the latest release refactors the core concept away from "image sharing" to "collections", meaning that you can create photo albums as well as make posts, in an attempt to provide a free alternative to the likes of Google Photos.

Considering you can create closed-networks (the whole point of having federated users), PixelFed presents an excellent option for friend- or family-specific image collections, without having to hand that information over to big corporations. Cool.

📆  |  🔗

  • Technology, 
  • Instagram, 
  • PixelFed, 
  • open web, 
  • indie web, 
  • photo sharing, 
  • album, 
  • portfolio 

Writing my accessibility statement. | Ethan Marcotte

I have to admit: I didn't know what an accessibility statement was until I read Ethan's post 🙋‍♂️ That's not great. Now I do, so hopefully, in the near future, I'll get around to adding one here. That will need a little bit more thoughtfulness than I can currently give, though, so for now I just want to record the key points:

First and foremost, an accessibility statement’s meant to help the reader. Put another way, it’s a document that helps them better understand the accessibility features of the website they’re using.

Ethan specifically mentions elements like the focus styles he's designed and how he's tested his colour palette.

For someone visiting my site—whether it’s the first time or the fiftieth—my accessibility statement hopefully provides them with the information they need to better navigate my site.

He also makes a point of having a "not great" section of known accessibility issues or areas which are planned for improvement. That makes the statement a living document, which feels right. Inclusion requirements will shift with technological change; accessibility is never "finished". I'm a fan of using GitHub issues, a la Eric Bailey, as a way to allow users to flag these as well.

The Known Issues section is an attempt tried to acknowledge that my site has plenty of flaws—not unlike myself—and that I’m working to fix them.

Ethan's post also contains numerous links to other worthy examples (like Eric's) that are all well worth visiting and considering. I'll definitely be coming back to this in the – hopefully near – future.

📆  |  🔗

  • Inclusion, 
  • accessibility, 
  • a11y, 
  • accessibility statement, 
  • tutorial, 
  • example, 
  • GitHub 

Klim's fonts | Klim

Domaine TextFeijoa. Heldane Text. (serif)

Geograph. National. (sans)

Klim have produced some very beautiful fonts over the years. They're (rightfully) a bit expensive though, so I can't quite play around with them right now. Maybe in times yet to come...

📆  |  🔗

  • Typography, 
  • fonts, 
  • typography, 
  • foundry, 
  • Heldane, 
  • Feijoa, 
  • Domaine, 
  • Geograph, 
  • National 

Let a website be a worry stone | Ethan Marcotte

While things were changing, I kept working. After a few weeks tinkering with this redesign, I realized I wasn’t working on a website, not really: it was a worry stone.

There's a lot to love in Ethan's thoughts. I saw his tweet weeks ago but found myself returning to it time and time again in my mind, what with, well, everything right now. It's great to see that expanded into a full piece (I actually don't know which came first). Plus, obviously, I can relate. So excuse me; I think there's something about "reviews" that needs working on 😉 After all:

That’s not to say any of these things are done, mind you. But they’re done until I come back to them: until I find something else to revisit, to sand down, to turn over and over and over.

Oh, embed! | adactio

YouTube embeds can be expensive on page load metrics, but what alternative is there? How about loading a thumbnail that hot-swaps itself for an <iframe> when clicked? Sounds great, but wouldn't that mean you have to create custom thumbnails for each video? Nope, YouTube has a bunch of weird and wonderful hidden features in its API that will give you everything you need:

  1. Get the URL of the video you want to upload;
  2. Ping the oEmbed endpoint like so: https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=-eiqhVmSPcs
  3. Pull out the thumbnail URL from the returned JSON (quick tip: you can actually skip the first two steps and just use the ID for this instead)
  4. Add it to some markup:
<a class="videoimglink" href="'.$url.'">
    <img width="100%" loading="lazy"
        src="https://i.ytimg.com/vi/'.$id.'/default.jpg"
        alt="'.$response['title'].'"
        srcset="
            https://i.ytimg.com/vi/'.$id.'/mqdefault.jpg 320w,
            https://i.ytimg.com/vi/'.$id.'/hqdefault.jpg 480w,
            https://i.ytimg.com/vi/'.$id.'/maxresdefault.jpg 1280w
    ">
</a>
  1. Add an onClick event to swap it out with an iframe (tip: use the youtube-nocookie URL for increased user privacy)

Done. Responsive, progressively enhanced, and much more performant. Great tip 👍

A guide to getting onto the IndieWeb | IndieWebify.Me

IndieWebify.Me is the main service I've been using to get my site set up with IndieWeb technologies. It's a great, step-by-step tutorial on how to get involved and helps you easily test your implementation. I've still got a bit I need to do but it would have taken a lot longer without this resource.

📆  |  🔗

  • Frontend, 
  • IndieWebify.Me, 
  • indie web, 
  • authentication, 
  • IndieAuth, 
  • tutorial 

The random link in the age of static sites | Heydon Works

Heydon has been working on Ga11ery, a neat image portfolio site generator that's ideal for webcomics. But it's built on the Jamstack using 11ty and Netlify, which means it isn't so simple to implement a "random image" button. However, because static site generators start with a collection/array of elements to make into pages during build time, you can use the array's index to effectively mock previous/next pages (something I'd like to do here, actually).

Introduce a little bit of Math.random and you have a decent random link, but it's still generated at build time, so every user gets the same random pathway (and you can get loops). Heydon uses some client-side JS to install a second level of randomisation to get around that. It's a clever little trick and, as he says, is likely more performant than the traditional PHP/API query method:

Build-rendered beats server-rendered beats client-rendered.

📆  |  🔗

  • JavaScript, 
  • Ga11ery, 
  • portfolio, 
  • 11ty, 
  • Netlify, 
  • SSG, 
  • random, 
  • JavaScript 

Accessible emoji tweaked | Adrian Roselli

A neat little extrapolation of the normal a11y approach to emojis which adds tooltip behaviours using the aria-label attribute. Particularly useful for those emoji which aren't fully compatible with all devices, an issue which is then neatly highlighted with some screenshots of Tim Cook trying to use the Apple-only emoji on Twitter 🤦‍♂️

📆  |  🔗

  • Inclusion, 
  • emoji, 
  • accessibility, 
  • a11y, 
  • tooltip, 
  • ARIA, 
  • label, 
  • compatibility 

Till the cows come home | Getaway

When I rewilding farming schemes I don't think of the Karoo. The Landmark Foundation are trying to get that to change. The idea is simple enough: the Karoo grassland has evolved to persist around giant migrations of springbok and other ruminants, as well as droughts and fires. So if you replicate that kind of shock grazing with long recovery periods, you play into the evolutionary tactics of the plants themselves. By combining farms, removing fences, and using more traditional shepherding, semi-nomadic techniques, they've been able to go four years without having to buy feed. Even though those four years include the worst drought in history for the region; that's huge!

Not only does the use of herding mimic the pattern of wild grazing, the overnight kraals used as the herd is moved around actually help break up the soil and spread seeds. You can actually see green patches where kraals were located in the past, and these act as reseeding islands that slowly spread out, counteracting overgrazing that is normal in fenced farms.

There's also a huge amount of really interesting facts in this article:

  • Despite the widespread use of gin traps, 10% of sheep in the Karoo are lost annually to predators. With shepherds, the farms have eliminated predation loss;
  • South Africa is the second-most fenced area of land on the planet after Texas, as a result of historic grants that aimed to reduce farm labour (why?);
  • It's cost-neutral to remove fences as the materials can be resold for more than the cost of labour to remove them;
  • A claim is made that the use of planned grazing (which is what they're doing here, that allows grassland to recover between grazing sessions) improves CO2 and water capture in the soil enough that, if it were used on half the world's arable grassland, we could sequester sufficient carbon to reach pre-industrial levels, even if you tripled the animal stock. Not sure I believe that but it's a fascinating idea.

How to add Netlify redirects to Gatsby | Konstantin Münster

On the surface, Netlify has very simply redirect functionality. In principle, I tripped up twice trying to set it up 😅 Konstantin helped set me right: I needed to move the _redirects file to the static folder and also implement the gatsby-plugin-netlify dependency. Plus, he points out that you can also use Gatsby's inbuilt createRedirect function, which could be useful in the future.