Explore My Notes

What does 100% mean in CSS | Amelia Wattenberger

A super useful recap of the main ways that CSS calculates percentage for element layout, each with a brilliant slider-based demo. The tl;dr:

  • The width and height elements are based on the parent's dimensions;
  • So are positioning attributes such as top and right;
  • Both margin and padding attributes inherit from the parent, but only use the width value (even for things like margin-top);
  • The transform property uses the element's dimensions.

📆 17 Sep 2020  | 🔗

  • HTML & CSS
  • CSS
  • width
  • percentage
  • height
  • positioning
  • layout 

Fantasy kindreds of Saynim | Into the Wonder

Darrell is one of those authors who really considers the world-building side of their work, so I've long found their blog fascinating. Recently, they've released a series of posts on the background of individual "kindreds" from their world of Saynim (kindred here replacing the problematic use of "race" across a lot of fantasy works), each of which is worth reading, but combined form a series of ideas, mythological tidbits, and even anthropological theories that I wanted to capture. I'll create a list of relevant links at the end. I've skipped taking notes on humans, though I do really like Darrell's take on them as a minority underclass renowned for "outside the box" thinking.

  • I had always believed that "human-like" elves were very much a Tolkien invention, but apparently the earliest references in Germanic folklore have them as human-sized, fair creatures that were more often allies than enemies of humans. Also, in Old English, the word for "elf" was a generic used for classical myths of nymphs, fauns, satyrs etc. so intelligent, humanoid nature spirits.
  • Cherokee folklore contains the Nunnehi, elf-like beings that live high in the mountains of human features and enhanced beauty, with a love of dancing. Considered "defenders of the people" and actually tied to accounts of "vanishing" peoples/towns during European invasion, being saved from the invaders and taken to a realm of magic (there are parallels here with the first folk of Irish myth).
  • Interesting to see that "elves" in Western folklore have slipped from beautiful allies to monstrous enemies by the time of Beowulf, and then further still to the pixie-like fairies of mischief and comedy in the 1600s. Why the change in status? Christianity is certainly partially to blame (though I find it interesting that elves of more traditional folklore seem almost more akin to angels, and wonder what might have been had their appropriation and explanation gone in that direction instead).
  • Not sure I like the link to Neanderthals for dwarves, particularly as Neanderthals were typically pretty tall, but it's certainly a neat idea and I'm also fond of the (totally nuts) theory that fae folklore is vestigial memories of Neanderthal culture and interactions. The inclusion of late erectus for more animalistic species like giants and ogres is a fun concept too.
  • I hadn't realised that there is no evidence for Neanderthal-born hybrids (i.e. the mother was Neanderthal), only human-born hybrids. As Darrell points out, that either infers that hybridisation in that format was problematic (infertility or possibly other complications) or (more interestingly) that those hybrids were more commonly raised within Neanderthal society, therefore the lineage was lost with their species' extinction.
  • Trolls are apparently very hard to define, being a catch-all term in European folklore for humanoid creatures with supernatural powers and at least some visually distinct difference to humans. I like the idea of them therefore being a highly variable kindred, with variation in horns, fangs, eyes, pigmentation etc., as well as being cunning tricksters.
  • I'm aware of the Tuatha Dé Danaan of Irish folklore, but not of the Fomori, who are apparently at least a little trollish (and occasionally intermarry).
  • The term "pygmy" originally derives from the Greek for "cubit", or 18 inches; hence Darrell's use of "Ell" to collectively describe the little fae folk (brownies, leprechauns etc.), coming from the Old English ell, a measurement roughly the length of a man's forearm.
  • I'm also a big fan of the use of "goblin" to describe the hybridisation of the various "Neanderthal" subspecies (Ells, Dwarves, Trolls). What a neat world building fix!


  1. Elves
  2. Humans
  3. Dwarves
  4. Trolls
  5. Ell Folk
  6. Goblins
  7. Giants & Ogres

📆 16 Sep 2020  | 🔗

  • World Building
  • fantasy
  • race
  • elves
  • dwarves
  • ogres
  • giants
  • world building
  • Tolkein
  • neanderthals
  • homo erectus
  • folklore
  • Tuatha de Danaan
  • myth
  • trolls
  • goblins
  • Cherokee
  • Fomori
  • fairy
  • fae 

Accordion rows in CSS Grid | Eric Meyer

It feels good to me, having two sets of rows where the individual rows accordion open to accept content when needed, and collapse to zero height when not, with a “blank” row in between the sets that pushes them apart.

When Eric first tweeted about the new design on his site, I thought something a bit unusual was going on with the CSS layout. I actually dove straight into the source that day and learnt a little about using negative row/column indices that I'd not really considered before. Still, I missed this clever trick he's using. By having a set of rows at the top and bottom of the page that may or may not contain content, he creates an "accordion" like layout. If content exists, the row expands to give it space; if it doesn't, the row collapses to nothing. The trick is having one row in-between those groups with a height of 1fr, thereby expanding to fill/fit all the necessary content.

Eric does point out that, in theory, it seems like leaving out that flexible middle row should still work, but he has a niggling suspicion it'll cause issues. Which is funny, because I have the same (unfounded) suspicion 😁 As I was reading down the article, my reaction was initially "you can't do that with rows" and then "aha, that flexi-height row will make it work". I'm just not sure why...

The problem with time and timezones | Tom Scott

And at that point, generally the programmer will start to hold their head in their hands and realise what they've got themselves into...

A wonderful recap of why you should just never try to support timezones in any program ever. And that's before you even get into calendar fallacies 😭

(Also, I love that my birthday used to be the British New Year in the middle ages 👍)

Your calendrical fallacy is... | Dave DeLong

A fun list of the all the irritating edge cases that can crop up once you start dealing with dates and timezones. I'm a particular fan of the more obscure information on the Hebrew Calendar, with leap months, months that change length depending on how cloudy it is (moon visibility), and one month that can be shorter than a standard week. Talk about a headache 😂

Submitting a form with datalist | adactio

The <datalist> element is super useful for autocomplete-like functionality, but there's no native way to automatically submit a form when an option is selected. Jeremy has come up with a neat logic flow that can enhance the element to do just that:

  1. Store the input element's character count and keep it updated;
  2. Each time an update occurs, compare the new count to the previous value;
  3. If the new count is greater than the previous one by > 1 it means the user has either pasted in additional characters or has selected something from the datalist, so compare the string to the datalist options;
  4. If there is a match, submit the form.

There are some issues. Jeremy points out that a selection that is only one character different won't trigger the autosubmit, which seems fair. I can also see potential issues with substring matching that could occur in certain situations. But as he says, it's a great enhancement to native functionality that provides plenty of fallbacks if needed.

He also provides a rough outline of his code, plus there's a Gist if useful:

document.querySelectorAll('input[list]').forEach( function (formfield) {
  var datalist = document.getElementById(formfield.getAttribute('list'));
  var lastlength = formfield.value.length;
  var checkInputValue = function (inputValue) {
    if (inputValue.length - lastlength > 1) {
      datalist.querySelectorAll('option').forEach( function (item) {
        if (item.value === inputValue) {
    lastlength = inputValue.length;
  formfield.addEventListener('input', function () {
  }, false);

Famous colleges | Seth Godin

Parents can do their children a favor if, from an early age, kids hear them say “famous college” instead of “good college.”

Because there’s very little data that shows that colleges with big football programs or lots of Nobel prize winners are actually good at doing what a college should do for an undergraduate.

Genius web annotator versus a woman with a blog | Observer

I had no idea that the music lyrics website, Genius, also operated a tool that allows you to comment/annotate on any website, but apparently it does and apparently it's not even that new. It also turns out that some people have used that tool to harass and target others. The lack of a report feature is certainly problematic. Beyond that, I'm not sure what side of the fence I fall on here. Do I like the idea that people may be having secret conversations "on" my website or blog posts? Not particularly, but I also don't see the difference between what an annotation tool like Genius is doing versus reposts to sites like Twitter or Reddit. I also agree that the web could benefit from a "fact-checking" layer, something much like how Genius lyrics work with expanded context, historical information, explanations etc. That element I think is great and only wish it wasn't tied behind a login/restricted service. Though on that last note, apparently a web annotation standard is in the works.

Don’t color in the dark with a yellow crayon and call it criticism.
The law is what people who don’t know how to behave themselves turn to in disputes. Grown-ups find ways to get along.

Srcset and sizes | Eric Portis

A wonderfully illustrated and deeply informative article on responsive images on the web. 👏 Also, Eric's worries about "none of this being implemented in any browser yet" are no longer relevant – hooray for living in the future!

The gist is that media queries are terrible for picking images to display. Part of the reason is that image width on the page is only determined after CSS, so you have to do a fair bit of calculating to pseudo-predict what you need in time for a media query to work. And even if you work out all those lengthy calculations, the resultant <picture> element won't be flexible or easily extensible. Any minor change = total recalculation. Headache!

The solution is to combine srcset with sizes. The root of the problem above is that the developer and the browser implicitly know exactly the opposite bits of the equation to one another. The browser knows the viewport width; the developer doesn't. The developer knows the available image widths, the browser doesn't. Media queries seek to solve this by feeding the browser rules to apply to viewport widths, which is messy. Instead, srcset supplies the browser with the stuff the developer knows and lets it to do the rest. Eric sums this up really neatly with this table (lifted verbatim):

Variable Known by author when she’s writing the code? Known by browser when it’s loading the page?
viewport dimensions no yes
image size relative to the viewport yes no yes! via sizes!
screen density no yes
source files’ dimensions yes no yes! via srcset!

Here's the final example code (which I believe is still pretty accurate):

<img src="small.jpg"
     srcset="large.jpg 1024w,
             medium.jpg 640w,
             small.jpg 320w"
     sizes="(min-width: 36em) 33.3vw,
     alt="A rad wolf" 


And again let me emphasize that while you can attach 1x/2x resolution descriptors to sources in srcset instead of w descriptors, 1x/2x & w do not mix. Don’t use both in the same srcset. Really.

To explain that sizes syntax:

sizes="[media query] [length], [media query] [length] <em>... etc</em>"

So yes, still technically using media queries, however now to tell the browser about the breakpoints it should expect rather than trying to work around them once they've happened. And yes, you can use calc and any unit combinations in there too.

📆 05 Sep 2020  | 🔗

  • HTML & CSS
  • HTML
  • srcset
  • sizes
  • images
  • responsive design
  • media query 

Modern CSS techniques to improve legibility | Smashing Magazine

A great overview of techniques to help improve text legibility, working with the browser rather than against it to be as inclusive as possible:

  • Use rem and em units for margins and white-space around text so that it "preserves the vertical rhythm" if a user changes text size;
  • The new (and not yet fully supported) font-size-adjust property is excellent for both preserving optical design and preventing webfont loading "flashes" by ensuring fallback fonts use the same optical height (this calculator can be used to quickly determine the ideal ratio for a system font):
@supports (font-size-adjust: 1;) {
    article {
        font-size-adjust: 0.5;
  • Set an optimal line-height by using x-height (height of the x character); the browser default standard is 1.2 but that's optimised for Times New Roman (TIL 🤯). Instead a combination of calc and the ex unit can be beneficial:
p {
    line-height: calc(1ex / 0.32);
In the right reading contexts, this rule sets an optimal line height for both serif and sans-serif fonts, even when typographical tools are not available or when a user has set a font that overwrites the one chosen by the designer.
  • The calc value can then be combined with a scale to determine type hierarchy e.g. h1 could be calc(1ex / 0.42) and so on;
  • Allowing users to dynamically control properties like letter-spacing, word-spacing, font-size etc. with sliders or other input options can be beneficial, particularly for people with difficulties reading text (dyslexia, vision impairment etc.);
  • Optimal reading flow is achieved by ensuring travel for the eye between the end and start of lines isn't too extreme. Roughly 60-70 characters tends to be the sweet spot, so setting a width using the ch unit is ideal:
p {
    width: 60ch;
    max-width: 100%;

📆 05 Sep 2020  | 🔗

  • HTML & CSS
  • CSS
  • readability
  • accessibility
  • a11y
  • font size adjust
  • font size
  • line height
  • fonts
  • web font 

GitHub settings to change master to main | GitHub

I think it's cool to see GitHub embracing calls to move away from "master branch" terminology and doing so in a way which provides further flexibility and power to its users. That's a win-win no matter how you feel about the surrounding debate. As of October 1st, all new depositories will default to use main unless otherwise specified, but you can define your own default however you please. For me, that means I've switched to use trunk moving forward by changing the settings in my repo settings page. There are options for enterprise and organisation owners too 👍

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.