Oatmeal streusel muffins

Makes a dozen muffins.

Preheat the oven to 200C (400F) and grease a 12 cup muffin tin.

Make the streusel topping. In a medium bowl, combine 45 g (½ c) rolled oats, 40 g (⅓ c) plain flour*, 40 g (⅓ c) chopped pecans or walnuts, 66 g (⅓ c packed) light brown sugar, 1 heaped t of ground spices (cinnamon, nutmeg, ginger, etc.), and a pinch of salt. Pour 4 T melted butter over the mixture and mix thoroughly to combine in to a crumb-like mixture.

Make the batter. In a large bowl, thoroughly combine 240 ml (1 c) milk*, 113 g (½ c) cooled melted butter, 1 large egg, 100 g (½ packed c) light or dark brown sugar, and 1 T white vinegar. In a separate bowl, combine 125 g (1 c) plain flour, 90 g (1 c) rolled oats, 1 t ground cinnamon, a pinch of salt, 1 t baking powder, and ½ t baking soda. Stir the dry in to the wet just until combined.

Immediately after making the batter, ladle it in to the prepared muffin tin. The batter should fill the cups about ¾ of the way. Next, add a generous tablespoon of topping to each muffin.

Bake in a 200C (400F) oven for 18–25 minutes. Allow to cool for at least 5 minutes in the tin, then remove the muffins to a rack to continue cooling.

* This seems like a substitution-friendly recipe. I made these with a combination of dark rye flour and gluten free flour when I didn’t have normal flour in for whatever reason and they came out really well. Wouldn’t hesitate to try all GF flour or similar substitutes. Oat milk works really well too.


This recipe is a tweaked combo of a Cooks Illustrated recipe (paywall) and another oatmeal muffin recipe.

drastic nostalgia

pink ice plant flowers, a bee, concrete breeze blocks painted white, bromeliads, air plants, glue sticks, wicker chair back, lemons, limes, my blanket, sea hare, cut strawberries, mud, asphalt, flaking kick ball backboard, eucalyptus, AYSO jersey patterns, Vons ice cream, sand, marine layer, gross beige rug, 70s beach blanket, sunscreen, Xacto knife, vorco board, bright blue sweatshirt, jelly pens, unopened peonies, rope, bird wallpaper, food dye in water, pancake batter drips, continuous form paper, chain link fence, shiny brass, plastic oscillating fan, dirty terrazzo flooring

wanting to do something drastic to yourself
tattoos, shaving your head, suicide
out of all the good, where does this feeling come from? what frustration are we trying to embody?

also, nostalgia
it’s masochistic, purposefully reliving unreal events that will always feel superior to the present day, real life

we forget so much
oblivious viciousness of childhood

glass-block walls, stucco of all sorts, white wrought iron, fake wood panelling, ivy, guppies, anenomies, four square, gloved hands, twisted hair wraps, clover, tadpoles, blue pools, mustard, Pleiades, *big* spider, unshaven legs, long hair, freckles, sheets in the sun, wisteria, terracotta tiles, reflective glossy black, ceramic bear, brick wall, water pump

***

Found in one of the old notebooks that I’m slowly de-cluttering.

Overheard on the 73, “it’s just one of those things”

I’m not going to lie, when I get a few drinks in me… I’m a little nasty to her. But it’s just one of those things.

Overheard on 10 April 2013 while sitting on the the upper deck of the 73 bus between Euston Station and King’s Cross, headed towards Stoke Newington. Said by a middle-aged businessman with a blue tie and London accent talking on a mobile.

Seems particularly awful since obviously there is self-awareness. He just doesn’t care enough to act differently.

***

Found in one of my old notebooks that I’m slowly de-cluttering.

Where are the non-English programming languages? Thoughts prompted by a small but mighty bug

A short two-parter

Part 1: A small-but-mighty bug

I’m doing a few coding-for-designers workshops with the students in the MA Graphic Media Design programme at the LCC, the first one was this past Thursday.

We’re focusing on web stuff since that’s what they expressed the most interest in and it’s in my wheelhouse. We started with a broad and brief overview of code, about how we use human-readable programming languages to communicate with computers. But 99% of the time, when we say “human-readable” we really mean “English-based”. More on this later.

After my short intro, we put together a simple webpage with HTML and CSS. A few of the students ran in to a small-but-mighty bug that I’ve never encountered before.

We were working on a basic CSS rule set, something like:

body {
  background-color: linear-gradient(blue, pink);
}

And for one of the students, it just wasn’t working. I checked it a bunch of times, it was all typed perfectly. No missing spaces or characters, spelling was fine. VSCode indicated that the background-color declaration wasn’t finished, which seemed weird. I looked really closely at it and noticed that the semicolon seemed a little thinner than the others in the file.

Turns out that the student had typed a full-width semicolon (U+FF1B) instead of a semicolon (U+003B). The full-width semicolon is used in Chinese to “demarcate parallel structures in a paragraph”. Another student ran in to the same problem a few minutes later, using a full-width left curly bracket (U+FF5B) instead of a left curly bracket (U+007B).

I had asked them to type in a semicolon, to type in a curly bracket, and so they typed the characters the way they normally do in their native languages. Super understandable.

If you were just starting to learn what code is and how it works, I can’t imagine how hard it would be to debug this sort of language-based problem on your own.

Part 2: Where are the non-English programming languages?

Gretchen McCulloch wrote a very worthwhile Wired article titled “Coding Is for Everyone—as Long as You Speak English”. I feel like every programmer / dev should read it.

Programming doesn’t have to be English-centric. As McCulloch puts it:

The computer doesn’t care. The computer is already running an invisible program (a compiler) to translate your IF or <body> into the 1s and 0s that it functions in, and it would function just as effectively if we used a potato emoji 🥔 to stand for IF and the obscure 15th century Cyrillic symbol multiocular O ꙮ to stand for <body>.

How would we go about implementing non-English HTML tags? W3C has an FAQ on the topic where they state that “HTML or XHTML tags are all pre-defined (in English) and must remain that way if they are to be correctly recognized by user agents (eg. browsers).

Since browsers just implement the standards set by W3C (I’m pretty sure that’s right?), I’m guessing that W3C would have to approve it if we wanted native non-English HTML support. It seems like it would be a bit of a mountain to climb but if we take something like Wikipedia’s translation efforts as an example, surely there are tons of people out there that would help with translation?

Gonna keep an eye on this. Need to find a book or good article on the history of ALGOL.

Getting STRONG

I want to get STRONG

Yoga is relaxing but expensive, and I’m not sure about learning it at home. Gyms suck. Swimming is *lovely* but doesn’t do my angry skin any favours. Can’t run much b/c of lifelong knee issue. Excuses, excuses.

At-home bodyweight exercises FTW. This is what I’ve been trying recently, every other day for about 30 minutes. I can do all of them within the confines of a yoga mat in my postage-stamp flat.

They’re based on a few decent exercise vids on YouTube, but I prefer not to refer to the full videos all the time. Too high-energy / shiny. Instead, I’ve got the movements programmed in to a circuit training app and I listen to that alongside a mix.


Glute + quad workout

About 11 minutes. Need a yoga / exercise mat. Related video

0:30 – Pulse lunge, left side
0:30 – Pulse lunge, right side

0:30 – Lunge with leg raise

0:30 – Jump squats

0:30 – Side squat steps

0:30 – Sumo squats

0:30 – Abductor squats

Move to mat, tabletop position

0:30 – Donkey kicks, left side
0:30 – Donkey kicks, right side

0:30 – Fire hydrants to straight kick back, left side
0:30 – Fire hydrants to straight kick back, right side

Lie on stomach, head resting on forearms

0:30 – Frog kicks, alternating legs
0:30 – Frog kicks, both legs

Lie on back

0:30 – Glute bridge

0:30 – One-leg glute bridge, left side
0:30 – One-leg glute bridge, right side

0:30 – Glute bridge, narrow stance

0:30 – Glute bridge, alternating leg raise

0:30 – Glute bridge, hold it


Standing arm workout

About 4 minutes. Completed standing in one spot, arms extended the whole time. These are hard to describe, see related video.

0:30 – Arms extended, palms up and then down

0:30 – Butterfly stroke then curling under as if holding beach ball

0:20 – Pulsing with palms facing forward
0:20 – Pulsing with palms facing backward

0:20 – Small circles clockwise
0:20 – Small circles counter-clockwise

0:20 – Forward, bend elbows, up, down

0:20 – Up, bend elbows, forward, back (reverse of above)

0:20 – Straight arm clap

0:30 – Trace ball in front


I’ll add more as I come across things that I like.

I found Piskel while writing this post, what a cool little site / tool. Neat CSS tip via SB: use image-rendering: crisp-edges for extra crispy pixel art.

Using CSS, HTML, and maybe a little logic to display images with a consistent surface area

Every once in a while, I have to figure out how to display images on the web with a consistent surface area. It’s usually in relation to making a lot of logos with very different aspect ratios look evenly sized so that none of them stick out like a sore thumb.

I haven’t had to do this in a while but came across a tweet by Nick Sherman that prompted me to think about it again.

To achieve an evenly-sized group of images, you have to calculate a maximum width that is proportionate to the surface area you want. To do this, you need to be able to calculate a square root, you need the width and height of each original image, and all of your images need to be tightly cropped since extra negative space will throw things off visually.

In the past, I’ve achieved this with logic since vanilla CSS doesn’t currently support a sqrt() function (more on this later). I’ve usually used PHP since I tend to work with Kirby CMS pretty often.

The function in PHP:

function max_img_width($img_width, $img_height, $ideal_area) {
  $max_width = round($img_width * sqrt($ideal_area / ($img_width * $img_height)));
  echo $max_width;
}

And the function in use + corresponding HTML:

<img style="max-width: <?php max_img_width(1500, 3000, 40000); ?>px;" src="https://piperhaywood.com/my-image.jpg">

A CSS-only solution that works now

There seems to be a CSS-only way to go about this though. Apparently you can approximate square roots in CSS by using a series of CSS variables and calc(), see more info in this thread.

Here’s the CSS and the image markup:

img {
  --width: 0;
  --height: 0;
  --ideal-area: 40000;
  --area: calc(var(--logo-width) * var(--logo-height));
  --ratio: calc(var(--ideal-area) / var(--area));
  --guess01: calc(calc(var(--ratio) + calc( var(--ratio) / var(--ratio))) / 2);
  --guess02: calc(calc(var(--guess01) + calc( var(--ratio) / var(--guess01))) / 2);
  --guess03: calc(calc(var(--guess02) + calc( var(--ratio) / var(--guess02))) / 2);
  --guess04: calc(calc(var(--guess03) + calc( var(--ratio) / var(--guess03))) / 2);
  --guess05: calc(calc(var(--guess04) + calc( var(--ratio) / var(--guess04))) / 2);
  --guess06: calc(calc(var(--guess05) + calc( var(--ratio) / var(--guess05))) / 2);
  --guess07: calc(calc(var(--guess06) + calc( var(--ratio) / var(--guess06))) / 2);
  --guess08: calc(calc(var(--guess07) + calc( var(--ratio) / var(--guess07))) / 2);
  max-width: calc(var(--width) * var(--guess08) / 2 * 1px);
}
<img style="--width: 1500; --height: 3000;" src="https://piperhaywood.com/my-image.jpg">

I’d want to do some more browser testing since this results in a pretty gnarly calc() situation by --guess08, but at first glance this seems like it might be a worthwhile solution. It doesn’t give us exactly proportionate surface areas but it gets very close. It only starts to fall apart with super skyscraper-y and letterbox-y images.

A few quick notes regarding why this is written as it is and ways that it could be tweaked:

I capped the number of guesses at eight because any more seemed to just fail, Chrome and Safari wouldn’t interpret such a big calc() equation.

I set the default width and height to zero so that there is no max width restriction if the image tag is missing the width and height CSS variables. This could be changed, as could the ideal area variable (increase to get larger images, decrease to get smaller).

The 1px value in the max-width calculation is required so that the value is interpreted as a unit. That said, it doesn’t have to be pixels! Could change this to another unit like 1em or 1%.

If I wanted to display these evenly centred, I’d probably give the images some margin and then wrap them in a container with styles as below:

.container {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

Could also use CSS grid for a more consistent spacing result.

And a final reminder: this only visually scales the images. Try to avoid loading a 3000px wide image if you’re going to be displaying it around 200px wide, your users and the planet will thank you.

A CSS-only solution that might work in the future

So apparently more complex math functions including sqrt() might be coming to CSS in the future! See this issue raised by Lea Verou in the CSS specifications editor’s drafts repo and the exponential functions section from CSS Values and Units Module Level 4 in the W3C editor’s draft from 3 February 2020 (a couple days ago!).

I’m not sure when this would become part of the spec and no idea if / when the browsers might implement them, but here is a snippet that should work with that new function in theory:

img {
  --width: 0;
  --height: 0;
  --ideal-area: 40000;
  max-width: calc(var(--width) * sqrt(calc(var(--ideal-area) / calc(var(--width) * var(--height)))) / 2 * 1px);
}

I’m happy that Nick asked the question on Twitter, I actually need this on an upcoming project where I’ve only got Twig to work with which doesn’t support square roots, and I’d prefer to avoid JavaScript in this instance. Hopefully this is the solution, will update here if so.

A picture says a thousand words, so see Nick’s very nice demo of area-based image sizing with CSS to check out one possible outcome.


Edit 05.02.20

Edited a few words for clarity, added Nick’s demo, added future example incorporating a CSS-based sqrt() function.

Thanks Sam Baldwin for bringing future math function support in CSS to my attention!

Edit 06.02.20

Simplified the PHP + HTML example.

The original PHP + HTML example used a --max-width CSS variable instead of just applying a max-width directly. I used a CSS variable because I thought that they were compliant with a strict Content Security Policy that includes the style-src directive set to unsafe-inline. That assumption was incorrect, though there does seem to be some discussion about the topic.

Thanks Lizzie Malcolm for questioning the CSS var usage in the PHP example!

Edit 18.02.20

Changed parenthesis-enclosed arithmetic so that each is enclosed in calc(). Plain CSS seems to interpret arithmetic enclosed in parenthesis just fine, but SASS doesn’t seem to like it.

It’s just a jump to the left

Just learned about Y2038 from this thread by John Feminella. ELI5 (almost) from Twitter user @stderrdk (source):

UNIX timestamps used to be a signed 32-bit integer with January 1st 1970 at 00:00:00 UTC as the start of epoch.

The maximum value of a signed 32-bit integer is 2147483647 and 2147483647 seconds after the start of Epoch is:

$ date -u -d @2147483647
Tue Jan 19 03:14:07 UTC 2038

We’re living in a time warp after all.