Explore My Notes

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 🤦‍♂️

📆 14 May 2020  | 🔗

  • 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.

Mailbrew email digests (affiliate link) | Mailbrew

Disclaimer: The title link is an affiliate link, which means I get credit if you use it to sign up. Not really why I made this post, but figured why not 🤷‍♂️

Mailbrew is a service I've been meaning to check out for a while. Because it's a paid service (no free tier) I'm not sure it's something I would invest in right now, but I like the idea so I wanted to try it out. Initial thoughts are that it's simple to use and has some really neat design ideas, but dear lord I wish it allowed bulk editing. I just spent 30 minutes inputting about 20 Twitter feeds to one "brew" (their name for an email) because I had to manually edit each one to set it to be "two columns; two tweets". If I could have just saved that template it would have been perfect.

As it is, the system was still very easy to search for accounts on Twitter, find them, and add them to my own little feed. I also through in an RSS to see how that worked and it was just as simple. I've created a brew that contains all the frontend sources I like, but don't want to commit to subscribing too. That's a lot of people on Twitter, as well as huge feeds like CSS Tricks. I used to use Twitter's own suggested/curated feeds feature to keep up with most of these people, but since they destroyed that system and replaced it with one which is overloaded with spam and meaningless nonsense, I've been wanting something to fill the void. Right now I'll get the feed weekly, but it's the kind of thing which could be handy to check daily. If I like it I may even look into spinning up something similar, just for my own use, as email is a fine-enough delivery method but it's not really my preference. We'll see. For now, I've made the brew public: frontend twitterings.

Update 09/06/20: Having used Mailbrew for the allotted trial period, I've just let it lapse. As a result, I don't think the affiliate link is really worthwhile so I've removed the coded part and just left the homepage URL. I liked the service, but ultimately I found it didn't fit in my routine. I don't actually like newsletters; I prefer content feeds. So I never moved anything from RSS there, it was basically just Twitter accounts that I like but don't want to follow. Unfortunately, what I've discovered is that people's most popular tweets are rarely their best. They tend to be humorous or controversial. Neither is particularly useful. What's more, getting the brew daily was way too much; I don't even check my emails once a day, so it would just build up. Once a week was manageable, but made it feel like a chore (even if I invariably enjoyed reading it when I got around to it). I don't need to pay for a service that gives me chores. So yeah, a decent service but not for me.

📆 10 May 2020  | 🔗

The landscapes of South England | Ross Hoddinott

Whilst archiving an old copy of Digital Photographer I came across a profile of North Devon photographer Ross Hoddinott. His work stood out as just exceptional landscapes from areas I love and he's clearly still going strong. Here are some of my favourites (click to see the high-res originals on Ross' site):

Wooden groyne looking out to sea with a metal rod at the end, very symettrical and moody.
View out to sea along a groyne at Swanage Bay. I love the moodiness, contrast, and symmetry here.
Looking over the sea to an island with a castle on top, colourful skies, and calm waters.
St Michael's Mount is a personal favourite location but this adds a real sense of place and fantasy to it.
A small waterfall in a mountain stream with stone cross leaning to one side in the background at sunset.
The Windy Post in Dartmoor is a great location and whilst the image is a bit over-processed for me the framing is spot on.
A small clump of reeds is silhouetted against a misty lake and sunrise with beautiful but cold colours and the hint of a shoreline in the distance.
There's no denying how lovely this view of Lower Tamar Lake in Cornwall is, though it was actually a different but similar photo I was trying to find from the magazine. Still, this captures the colours and stillness so well!
Two adorable harvest mice sitting on an ear of corn bending under their weight, tails wrapping around the stalk, as one sniffs the air.
So. Damn. Adorable 😍🐭 Harvest mice are very photogenic, but there's something even more captivating than usual here, so perfectly focused.

📆 10 May 2020  | 🔗

  • People & Places
  • Natural World
  • harvest mouse
  • groyne
  • sea
  • ocean
  • long exposure
  • atmosphere
  • sunrise
  • sunset
  • symettry
  • contrast
  • St Michael's Mount
  • Cornwall
  • Devon
  • Dartmoor
  • waterfall
  • castle
  • lake
  • silhouette
  • inspiration
  • Swanage Bay
  • wildlife
  • Britain
  • Lower Tamar Lake 

Jamstack full course | freeCodeCamp

A solid introduction to the Jamstack, including full build tutorials for an initial SSG setup with Eleventy and Netlify, integrations with the News API service and Open Weather, geolocation checks and content localisation, Netlify functions for API requests, and even some mention of SSL on localhost.

📆 04 May 2020  | 🔗

  • Frontend
  • JavaScript
  • Jamstack
  • Netlify
  • Netlify functions
  • serverless
  • lambda
  • tutorial
  • Open Weather API
  • Eleventy
  • SSG
  • progressive enhancement
  • localisation 

Storage for the web | Peter LePage

A detailed overview of the various methods available to locally store website or web app data. Overall, the recommendation is:

  • For critical resources (images, content, scripts etc.) use a service worker, specifically the Cache Storage API;
  • For all other data, use IndexedDB (though adding an additional service which allows you to use that API with promises can also be very beneficial).

These processes have wide browser support, are well maintained, and have a low user impact. They're also better at persisting. For example, SessionStorage is locked to that browser tab, LocalStorage is now quite outdated and actively blocks the main thread, and cookies are constantly refreshed so bloat your HTTP request size. Other APIs are either deprecated (WebSQL, Application Cache), lack widespread support (File System API), or require explicit user permission (bad UX – Native File System API) so should be avoided.

You can use the StorageManager API to check how much space you're using and set limits, but most modern browsers now allow such large limits it should never be an issue (the article has an explicit example of how to use that API as well as what to do if you run up against storage quotas).

It can be worth explicitly setting your data to be considered persistent storage so that browsers don't delete it when they need more device space (but obviously use this cautiously and don't abuse it).

I'd be interested to see whether IndexedDB could be used with search blobs from Algolia, even if only on a local instance based on user permission.

📆 04 May 2020  | 🔗

  • Frontend
  • PWA
  • service worker
  • IndexedDB
  • Cache Storage API
  • cookies
  • SessionStorage
  • LocalStorage
  • Native File System API
  • API
  • offline
  • data store
  • StorageManager API
  • browser
  • search 

@property | Chris Coyier

Looks like CSS is getting extensibility built-in with a new @property element (works like @media – also looks like we're getting CSS.registerProperty() in JavaScript 🤔).

It'll work as below, and let you extend existing CSS functions with a similar syntax to CSS variables. Not 100% sure about how useful it will be, but it's always nice to see added flexibility and certainly the gradient animation use case provided in the example would have its purposes.

@property --my-property {
    syntax: '<color>';
    initial-value: green;
    inherits: false;

📆 04 May 2020  | 🔗

  • HTML & CSS
  • @property
  • CSS
  • customisation
  • spec
  • new
  • extend 

Input attribute for one-time code | Geoff Graham

Just a neat tip: the autocomplete="one-time-code" attribute/value allows an HTML form to fetch a code used for two-factor authentication directly from the messaging app. Seems to only work for numeric or password input elements, but that should cater to most 2FA use cases. Neat

📆 04 May 2020  | 🔗

  • HTML & CSS
  • input
  • form
  • 2FA
  • one-time code
  • attribute
  • autocomplete 

Progressive summarisation or how to create discoverable notes | Tiago Forte

Progressive summarisation may not be ideally suited for me right now, but it's an idea which stuck with me whilst I was undergoing my own taxonomy building process. It's worth stepping through the setup for the idea logically:

  • You want to create a "second brain" that stores all the information you find useful but don't have an immediate need for, so you can reference it later; a "storage and retrieval system" for knowledge;
  • That storage system needs a structure, which is where P.A.R.A (Projects, Areas, Resources, Archives) comes in. This system uses these four folders to quickly categorise any piece of information. Projects is for things being actively worked on; areas is for core subjects that you use routinely (hobbies or work-related); resources is broader topic information that you may want in the future (more like a library categorisation system); and archives are for notes that you find interesting but may never need to look at again;
  • Sorting information into these buckets of relevance places it on a timeline: projects are for now; archives are potentially for never. The other two fit in the medium- and long-term.

But P.A.R.A doesn't explain how to take notes. There are two approaches: tagging and notebooks (aka categorisation). Tagging sounds cool, because you build an esoteric web of interlinked data over time, but it doesn't fit how most people's brains work so it's bad for memory recall. Notebooks work like our brains, forming "discrete containers", but they kill serendipity (to paraphrase).

Tiago argues for a note-first approach where you focus on simply recording knowledge as notes. It's a universally applicable system, so it works regardless of existing content structures and makes migration simpler, and it prioritises the act of notation which is the most useful in the long run. It mimics atomic design: notes are atoms and can be assembled into elements, molecules etc. in the future.

But that means our notes need to be well designed so they're useful in the future, but they also need to be quick to create (efficient). There's an obvious paradox here; as Tiago puts it:

You cannot compress something without losing some of its context.

He gives some great outlines of this, where notes are too condensed and therefore lose meaning with time, or two contextualised and therefore too long to be an efficient note-taking (or reading) process. The balance point is progressive summarisation, where you take an iterative approach. It's similar to how I used to condense course notes into flashcards into memory. Critically, you do this over time. So step one is done the moment you create the note; step two the first time you return to it, and so on.

  1. Makes notes. These will be long.
  2. Go through and bold key takeaways or phrases, the bits that really matter.
  3. Highlight any passages which you come back to more than once, so that the real gems slowly rise to the surface.
  4. Create a tl;dr style summary; use your own words so that it becomes learned knowledge.
  5. (this is rare) Remix it. Find the links, the novel new take, whatever spark of creativity you've had on the subject and write that up as a top-level paragraph.

At no point during summarisation do you delete anything; this is pretty much only ever an additive process, it's just that you slowly prioritise the information until what's left is the stuff which is most useful. That means if your use changes in the future, you still have the full context.

It's an interesting take on cataloguing information and I can't help but consider it an ideal methodology for Wiki-style information stores. Unfortunately, I don't want wiki-style stores; I want an information web. I don't see it working quite as well for that in the long term.

📆 03 May 2020  | 🔗

  • Content Design
  • notes
  • categorisation
  • information store
  • archiving
  • collection
  • hierarchy
  • information architecture 

What the heck is inclusive design? | Heydon Pickering

I love Heydon's breakdown of why "accessible" =/= "good". To paraphrase: accessibility is about removing barriers that would prevent people from using your site, but if the content is crap or the functionality is confusing then all you're doing is letting more people suffer a bad experience. Inclusive design seeks to remedy that:

Access is important, but inclusion is bigger than access. Inclusive design means making something valuable, not just accessible, to as many people as we can.

He also makes a good point on why inclusion is not the same as "a11y" + "UX":

In short, inclusive design means designing things for people who aren’t you, in your situation. In my experience, mainstream UX isn’t very good at that.
Inclusive design aims to make sure things work for people, not forgetting those with clinically recognized disabilities. A subtle, but not so subtle, difference.

As accessibility experts have been arguing for years, we're not talking about edge cases; inclusive design makes the argument that creating a better experience benefits everybody whilst having the neat side effect of also improving accessibility. It's a reframing of the age-old argument and that is better than simply keeping the old argument because it doesn't appear to be getting anywhere.

For instance, no matter what your cognitive or visual abilities are, small text presented with a stylised font on a low contrast background will be hard to read. Instead, using high contrast ratios with simple typefaces and supporting functionality like pinch-to-zoom makes your site more inclusive and accessible all at once.

Then, finally, there's this neat summary of why we should use semantic HTML:

HTML is a toolkit for inclusion.

📆 03 May 2020  | 🔗

  • Inclusion
  • inclusive design
  • universal design
  • HTML
  • semantics
  • inclusion
  • accessibility
  • a11y
  • UX 

Why this British crossroads is so dangerous | Tom Scott

Of course I fell down a rabbit hole with Tom Scott videos after the last note, but I had to save this one as well. Not just because it's a perfect example (with incredible simulations to visualise the math) of how a number of design decisions have stacked on top of one another to create a system which actively kills people, but also because I know these crossroads. They're not far from where my Gran lives and I've driven through them plenty of times myself.

Oh, and also because during a five-minute video explaining why so many cyclists are killed at this intersection every year... at least three cars are filmed engaging in precisely the behaviour that causes those deaths 🤦‍♂️

📆 03 May 2020  | 🔗

  • Anthropocenic View
  • New Forest
  • Hampshire
  • crossroad
  • highway code
  • universal design
  • infrastructure
  • death
  • cycling
  • YouTube
  • explained
  • design 

Made By Me, But Made Possible By:


Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.