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>

5. 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 👍

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.

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.

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

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 CO₂ 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.

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.

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.

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):

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.

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.

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;
}

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