Published

Current listening: “The Best of the Alessi Brothers”

Currently listening to The Best Of The Alessi Brothers (1998). Had no idea about them, came across them via two cool cats on Twitter.

These vibes are the perfect thing right now. Also, will be taking photos of the Alessi Bros to the hairdresser when that’s an option again.

Apple Music | Spotify

The album’s not on Bandcamp, but “Seabird” is included in Late Night Tales: Metronomy.

Published

Well, that was expected

Yesterday was a month long. As this guy said, maybe it’s just December 37, 2020. Of course everything would just get worse in 2021.

I’d call this a comedy of errors if it wasn’t so bone-achingly depressing. I’m recording some questions and thoughts here because I don’t want to forget what actually happened. There’s so much gaslighting already.

Here’s a timeline of what I feel are the more salient events from yesterday. This is pulled together mainly from news sources and tweets from journalists, times are linked to sources.

Read more (or don’t, it’s exhausting)

Published

First Christmas at home

Dried orange ornaments on a Christmas tree

This is the first Christmas we’ve ever spent at home, not at Sam’s parents’ or mine. Both are just too far away, it wasn’t right to travel and the stress would have been unreal.

Because of that, this is the first time we’ve had a tree. We’ve accumulated ornaments over the years but they’re all packed away, so we decorated with an origami star, popcorn garland, red ribbon, and dried orange slices. Cadbury chocolate ornaments were an added bonus when a box arrived from Sam’s folks. We missed family and friends, NYE could not have been more different from last year, but it was a lovely quiet time.

We did a pretty traditional British Christmas dinner with bread sauce and Sam’s mom’s sticky toffee pudding. Also made a big batch of Cumberland sausage meat for pigs in blankets and then sausage rolls in the new year. We used this recipe for the sausage meat, but just used 20% fat minced pork instead of mincing our own. If I do it again, I’ll just buy dry toasted breadcrumbs instead of making our own. It was crazy simple though since we weren’t planning on stuffing sausage skins or anything. Would definitely make it again, though we’re trying to reduce the amount of meat we’re eating in the new year.

Published

Use a VPN when you search for recipes

Highly recommend using a VPN when searching for recipes online. When I set the server to an appropriate country for what I’m looking for, I almost always get way better results. And even when the results aren’t objectively better, they usually widen my idea of what any one particular dish can or should be.

Of course I usually search in English. For better results, search for the dish by the name it’s actually called using the correct characters, not the English name or anglicized spelling. That was the only way to find a decent dökkt rúgbrauð recipe.

If you don’t have a VPN, you can try changing your search region. See Duck Duck Go’s instructions or Google’s instructions.

Published

Fix for overflow at top / bottom of screen when using CSS Scroll Snap

I’m currently working on a site that uses CSS Scroll Snap to frame some of the content nicely as you scroll through. In Chrome though, I was getting weird overflow issues at the top and bottom of the screen. If I scrolled to the bottom and then kept attempting to scroll down, it would gradually add more and more length to the page. Same with scrolling back up.

Adding overscroll-behavior-y: none; to the body element sorted it out. Read more about overscroll-behavior on MDN.

I originally tried to add this property to the html element since that’s the element with scroll-snap-type: y mandatory;. This didn’t work though, it seems that overscroll-behavior has to be on body.

Published

Anemones and rock slides

Photo of Agate Beach near Bolinas during the Golden Hour with clouds in the sky

A tide pool at Agate Beach with an anemone

Haven’t been feeling great recently so a lot of weekends have been pretty quiet, but we finally got out a bit this past Saturday. Went to Agate Beach near Bolinas, low tide was around 3:30pm so we had lovely light. It had rained hard earlier so we kept hearing mini rockslides from the cliffs. A little ominous.

It was hard to see much since most of the pools were a bit murky, but we did see chiton, anemones, snails, crabs, and one hefty brown starfish. There was pink coralline algae encrusting most of the rock pools. I didn’t know what it was when we were there, thought it was so prevalent that it might be invasive. But it seems native from what I’ve read since. There was also one tiny creature that squirted water a foot in to the air, still no idea what that was…

Related: One of the rental properties at Sea Ranch has some really good tips about being a good tide pool steward.

Also related: Didn’t collect anything since foraging isn’t permitted on most public land in California. I’d love to get to Salt Point at some point though since it’s allowed there. Would probably mainly look for purple laver and nori. Samphire (pickleweed) should be prevalent in April/May, so maybe that would be a good time to go. Also hopefully this pandemic will be on the wane by then with the vaccine…

Published

How to embed an Are.na channel using an `iframe` in HTML

A friend got in touch recently about using this WordPress theme, asking if it would be possible to integrate support for Are.na channels in the theme. I suggested that it’s probably out of scope for the theme but could be great as a plugin that integrates the Are.na API, definitely something I’d be interested in making. Started thinking about how it might work best, wanted to keep it relatively simple and such since ideally I’d want it to work with classic WP and Gutenberg.

Turns out, I was way overcomplicating it. I mentioned the plugin idea to Sam and he suggested just doing an iframe embed like they do on the lovely Are.na blog. Of course! 🤦🏻‍♀️

I’d still like to explore the plugin idea at some point since it would offer a few more opportunities (see things to consider about embeds below, particularly the fact that Are.na embed support is undocumented), but this seems like a nice way of doing it in the meantime.

Example below of Gemma’s Internet Explorers channel as an embed:

How it works

This is the embed code for that particular iframe:

<iframe style="border:none;" width="100%" height="590" src="https://www.are.na/gemma-copeland/internet-explorers/embed" title="Gemma Copeland’s Are.na channel “Internet Explorers”"></iframe>

If you’re less familiar with HTML, here’s what’s going on.

The opening and closing HTML tags <iframe></iframe> stand for an Inline Frame element. This type of element nests a separate resource like a webpage on to the page you’re currently looking at. It contains the attributes style, width, height, src, and title to modify the way it behaves.

Since many browsers render an iframe with a border by default, we’re using the style attribute to get rid of the border on this iframe. You can also style HTML elements with classes and CSS, but we’re using this technique, known as inline styles, for simplicity’s sake.

The width and height attributes specify—you guessed it—the width and height of the iframe. If you were missing either of these attributes, the iframe would collapse. According to the standards, these values should both be set as integers which the browser interprets as pixels. That said, browsers seem to be able to interpret a 100% width correctly, meaning that it fills 100% of the width of its container. If you want to stick to standards, you could add a high width value and then add max-width:100%; to your inline styles.

The src or “source” attribute tells the browser what content you want to embed. Without it, you’d just have an empty iframe. The URL we’re using here is exactly the same as the URL for Gemma’s actual Internet Explorers channel (https://www.are.na/gemma-copeland/internet-explorers), with the addition of /embed on the end. If you try visiting this URL, https://www.are.na/gemma-copeland/internet-explorers/embed, you’ll see that it is essentially a stripped-down version of the original Channel page that is more suitable for embedding.

The title attribute indicates the contents of the iframe. It can be important for accessibility since some screen readers will use it.

Things to consider before embedding content on your site

There are a few things worth keeping in mind if you decide to try this. These notes apply to any embedded content, regardless of where it’s coming from.

1. An iframe embeds the tracking and cookie behavior of its source, not just its contents

When you embed another webpage on your site with an iframe, it will behave the exact same way as if you had visited the source website. In other words, that website may collect data about your visitors, use cookies, embed additional third-party tracking, or monitor your visitors’ interaction with the embedded content.

You should be sure that you’re ok with this before including an embed on your site. Personally, this is one reason why I don’t use embeds very often.

I feel comfortable embedding an Are.na channel in this case because it’s for demonstration purposes, they adhere to the GDPR, and I’m satisfied by the way they handle data according to their privacy policy.

2. The accessibility of an iframe embed depends mostly on the source page

It’s recommended to add a title attribute to your embeds for better accessibility, but that’s pretty much where your accessibility control stops. If the source page hasn’t been built with accessibility in mind, it may be difficult to browse for people that use alternative ways to navigate the web.

Unfortunately, Are.na channel embed pages are missing accessibility features such as unique title elements, descriptive alt texts for the block images, and semantic elements such as <figure> or <figcaption>. This is kind of understandable though since these embed pages are an undocumented feature, something that they probably made more for their own use, and they’re no doubt focusing their main efforts on the public-facing product. Would love to see it tweaked though, particularly since they use these embeds on their own blog.

3. It’s nearly impossible to change the way an embed looks

There’s very little you can do to change the look of an embed. You can change the way the frame itself appears, like removing the default border as we’ve done in the example above, but you usually can’t change the contents of the embed.

Sometimes a platform will accept additional attributes or URL parameters that change an embed’s functionality. YouTube is an example, see their Player Parameters documentation. But this just changes the general functionality, it doesn’t allow you to actually change the placement of the play button or change the controls from red to blue. You can use some fiddly JavaScript to get things looking like you want, but it’s pretty hacky.

Instead, if you want to heavily customize the way that the embed contents look, you should probably integrate the content using the platform’s API if they offer it. This is what we did on Gemma’s site, using the Are.na API and Eleventy to add channels directly to her homepage. This content inherits her site’s styles, so it’s more in keeping with the look and feel of her site.

4. Embeds can break

Broken links are an ever-present problem on the web, people are always changing URLs and taking down content. A broken link is only noticeable if you click it, whereas a broken iframe can look pretty crap. If this would bother you, then you might want to be careful about how much embedded content you include on your site.

Besides this, the source website can restrict which domains are allowed to embed their content at any time. This is unlikely to happen with a platform like Vimeo or YouTube which offer embeds as a part of their advertised functionality. But with this Are.na channel embed for example, Are.na might decide that they only want to allow their embed pages to be embedded on their own site and change their Content-Security-Policy or X-Frame-Options HTTP response headers accordingly. And it’s their right to do so if they wish!

If you want to increase the likelihood that third-party content will be available on your site in the future, it’s best to use documented methods, ideally an API. If you integrate content via an API, you can craft a graceful error message in the event that the content doesn’t load. This can look a lot more forgiving than a broken embed.

5. Embeds probably won’t be crawled by search engine bots

This is… not a huge concern IMO. But I mention it since it may be a concern for others. Search engine bots don’t tend to crawl iframe contents, meaning that they won’t take that content in to account when determining what your page is all about. If this is super important to you, then use the platform’s API (if available) to integrate third-party content directly in to your site.

Edit at 2pm: Changed width description since 100% isn’t technically in line with standards, though it works.