Explore My Notes

Beep boop! Announcing "use-sound" | Josh W Comeau

Sound has definitely been abused on the web, but I agree with Josh that it shouldn't be ignored completely. There is still a time and place for using sound to great effect.

However, I believe that this is the bathwater around a baby very much worth saving. Sounds can accentuate user actions, emphasize feedback, and add a bit of delight to an otherwise humdrum action. When done tastefully, sound can make a product feel more tangible and real.

Josh has put together a simple React Hook that lets you trigger sounds using basic browser events. He also discusses some use cases and potential issues. For example, deaf users clearly won't hear it, so sounds should always be mirrored by visual cues as well. Similarly, sounds can be annoying for screen readers, so a mute option must be present.

Finally, Furahan plants! | Planet Furaha

It's a shame to see the "classical" sail-trees of Furaha are no longer making the reality-check cut, but the reasoning is (as always) fascinating:

  • Leaf size is as much a result of humidity and temperature as it is photosynthesis (hence why we don't see giant, solar-panel like leaf "sheets";
  • Leaves are good at reflecting infrared light so don't warm up too much, but they still have to cope with the fact the Terran photosynthesis begins to degrade above 26°C;
  • In theory, that means warm climate plants should have smaller leaves, but that isn't true (it's inverted, actually). That's because plants have heat-regulating patterns, like lobed (wavy) edges that help and by effectively sweating. Hence, humid-region plants with wavy leaves are the best at growing big and flat;
  • However, if leaves get too cold, they can freeze (particularly if they contain lots of water for "sweating") so in cold regions leaves have strategies to stay warm too, such as (you guessed it) being small and having lots of leaves instead of investing energy into less big ones;
  • Leaves also have strategies for dealing with wind, including being able to curl into aerodynamic shapes, both individually and as branch-clusters;

Unfortunately, that means sail leaves would be easily broken in high winds, and could only exist in areas of high humidity with low-temperature variability. That's not impossible, but it's so unlikely (and a bit boring) to not work on Furaha.

The semiotics of face masks | Seth Godin

Whether or not you choose to wear a mask, drive a Prius or even a pickup truck, it’s worth remembering that because we’re human, we start with two things: What’s the story I’m telling myself, and what’s the story I’m telling everyone else.

Constrained CSS grids without max-width | Ethan Marcotte

Rather than set a max-width on his main content grid, Ethan has used what he calls a constraint column. Basically, the right-most column on his grid scales with the viewport and restricts the rest of his grid columns from ever exceeding 72rem. Neat.

Rather than simply defaulting to max-width as a constraint, I can use the empty space around my design, and treat it as a layout tool.

Here's how that can look (Ethan also has examples for centre-aligned content and some other small details):

.layout {
  display: grid;
  grid-template-columns:
    repeat( 8, 1fr )
    calc( 100vw - 72rem );
}

📆 30 May 2020  | 🔗

  • HTML & CSS
  • CSS Grid
  • max-width
  • constraint column
  • responsive design
  • viewport
  • example 

Monarch | Trent Walton

I really love the colour palette that Trent has created for his recent album release. It's a lovely blend of warm tones and underlying texture that just feels inviting. Also, the album itself is great. You can listen online too.

Monarch album art mocked up as a vinyl sleeve; design and music by Trent Walton. A large "m" made out of geometric shapes with a warm colour palette.
A love the geometric "M" and simple textures that pull the album art together.
Colour palette ranging from dark yellow down to black, via purple.
Such a lovely warm palette.

Are there too many damn dinosaurs? | Darren Naish

A series of articles addressing the argument that there are simply too many damned dinosaurs in some assemblages. Darren has put together 8 separate pieces dissecting each of the most common concepts discussed, specifically as they relate to the sauropod assemblages of the Jurassic Morrison Formation. I'm just going to add notes from all of them here. Full list of sources below:

  • TMMD is often lumped together with the ontogenetic morphing hypothesis, the idea that some species are simply different stages in one phase of growth. There are some merits to these ideas, but overall applying it broadly seems to be a stretch.
  • Part 2
  • Fossil genera of mammalian megafauna have routinely been oversplit and later synonymised. That has happened to rhinos, brontotheres, and others. However, many of those supposed species were never truly considered. Take brontotheres: most species proposed in the early 20th century were almost immediately questioned by specialists and most had been sunk into synonymy by the 1980s. Ditto American rhinos, which were being questioned from the '70s, it just took a while for a researcher to actually publish a review. Both groups also benefit from having easy markers within their morphology to test against, and both have highly unusual features (their horns) which led to gross oversplitting in the first place. Arguments on indricothere oversplitting fail to account for the fact that, even when regrouped, there are still half a dozen recognised species (though genera has been reduced significantly).
  • Applying the logic of megamammals to Morrison sauropods fails. Unlike these groups, sauropod specialists have reviewed the Morrison fossils multiple times and not concluded that they are oversplit. That includes fairly detailed morphometric tests – like those undertaken on American rhinos – which failed to highlight synonymy. What's more, whilst several species in mammalian history were oversplit, even with these recombined those assemblages still contain dozens of contemporaneous megafauna.
  • Part 3
  • Arguments that giraffe diversity is a good analogue fail in several ways. First of all, that there is only one extant species of giraffe is now under debate, with potentially eight recognised from genetic studies. Further, those species are almost impossible to distinguish from skeletal remains, whereas sauropod species are clearly delineated based on morphometric analysis and skeletal features showing high degrees of variation. If anything, then, giraffes are an argument that we have too few damn dinosaurs. Oh, and of course modern giraffe ranges are a bad proxy for anything, as they have been greatly reduced by human activity. Plus, fossil evidence shows that before the Holocene multiple giraffe species did live alongside one another.
But however many giraffe species there are, the fact is that the variation reported for them thus far is substantially and dramatically less than that reported for Morrison Formation sauropod species and genera.
  • Part 4
  • The Morrison Formation spans a time period of around 7 million years. That's a lot of time! When you break down sauropod taxa by time brackets, there are rarely more than 2 species found in a given strata (though the most is 5 at Howe Quarry).
  • The Morrison also spans a wide range of biomes, with evidence for wetlands, saline lake systems, deserts, floodplains, highlands, and more.
  • Part 5
  • What about sheer biomass limits? Was there enough physical space and food for multiple viable, large populations of megaherbivores the size of sauropods? It looks likely. The Morrison is roughly 1.2 million square kms; again, most species were not directly in competition but divided by habitat and time; and when modelling into metabolic requirements – assumed for both mammal-like metabolisms and varanid-like ones – there is enough vegetation and space for populations in the high thousands to low millions, which is more than enough for genetic diversity.
  • On top of which, new palaeoclimate data indicates that we have historically underestimated the productivity of this region; it was not simply a perpetual savannah but contained dense forests for large periods of time as well.
  • Sauropods also appear to have an unusual breeding strategy for megafauna, with egg clutches routinely being found with 20-40 eggs and often in close proximity to other nests, implying timed breeding events on a large scale. That implies that actual populations could have been predominantly juvenile and subadult, rather than the giants we imagine, and means that populations would have been fairly quick to recover from major die-off events like droughts. Evidence for this also comes from trackways and the prevalence of juvenile fossils in almost all sauropod-yielding locations.
  • Part 6
  • Sauropods also appear to have reduced ranges than would be expected when comparing them to mammalian megafauna. There are various reasons for this, but it actually appears to be a common trend across a lot of herbivorous dinosaur groups. As such, the justification that megafauna alive today tend to have continent-wide distributions may not apply to dinosaurs at all (also, I don't think this is even accurate; Africa has multiple species of elephant, for example, some of which until very recently practically overlapped, such as the Knysna elephants, and multiple rhino species, even with human habitat fragmentation).
  • From the comments on part six: it's possible that nesting behaviour led to reduced species ranges. We know a lot of extant nesting species return to the same areas for centuries, if sauropods did the same thing then it would reduce their potential geographic area and drive allopatric evolution. Cool point.
  • Also an interesting discussion around the nutritional value of wood. Today, most wood is "digested" by ants/termites and fungi, but there is evidence that these groups were much less effective (or absent entirely) in the Mesozoic. Whilst we know of fossil cockroaches and beetles that clearly digested wood, there may have been more available energy in bark than we credit palaeoecosystems with; hadrosaur coprolites also verify that at least some species of dinosaur did occasionally eat wood. Secondarily, we fail to account for the fact that humans burn wood routinely and have done for a long time. Apparently, if you include the energy we use in wood fires, we actually fall close to a megaherbivore in terms of biomass use.
  • Part 7
  • Were Mesozoic plants poor energy reserves? Cycads are, sure, but there were plenty of other plant groups around. Research has shown that fossil conifers, ginkgos, horsetails, and ferns were all highly nutritious; in fact, certain monkey-puzzles and conifers likely matched extant grass groups for energy value. We also often forget about the sheer volume of plant life even in modern-day fern meadows, such as bracken downs in the UK. Plus, sauropods (like most megafauna) likely had a "quantity over quality" feeding strategy combined with long, drawn-out digestion periods. Also, the sauropods clearly existed, even if they were all one taxa they would still eat the same amount of food... (okay, so lumping species would reduce the viable population size, but still there was clearly a lot of them kicking about).
  • Part 8
  • Basically, questioning the experts is rude. They are experts. Their theories have been tested by other experts. To date, no major flaws have been found.
As an FYI Part 8 also contains Darren's own summaries, which provide more useful specifics than my notes.

📆 30 May 2020  | 🔗

  • Natural World
  • dinosaurs
  • sauropod
  • Morrison Formation
  • Jurassic
  • North America
  • taxonomy
  • giraffe
  • megafauna
  • brontothere
  • ontogeny
  • ontogenetic morphing hypothesis
  • indricothere
  • rhino
  • elephant
  • palaeoclimate
  • palaeontology
  • geology
  • palaeobotany
  • palaeoecology
  • hadrosaur
  • Mesozoic
  • bark
  • cycad
  • fern
  • horsetail
  • conifer
  • biomass 

GenC | Seth Godin

I dislike generations. So does Seth. But he makes a good point that right now we're living through something unprecedented, on multiple fronts. So don't think of Generation C as the people born within an arbitrary time period, but rather everyone that was alive before the outbreak that is still alive after the outbreak:

Generation C was inaugurated with the events created by Covid-19, and it is defined by a new form of connection.

Inaugurated is important. COVID-19 is the catalyst; in turn, that has fundamentally changed a lot about our society, from work to social structures. How much reverts in the future is unknowable. The way we connect with one another is morphing.

And if Covid-19 and Connection are the first two C’s, the third one is going to be Carbon.

Because that's what will come next. And we need to be considering that fact. But there is hope. There are signs we're beginning to think less about the next 24 hours and more about the next 24 years, as Seth puts it. We have a chance to dig our way out of the current mess without worsening the future one:

GenC may be too wise for that. And they may be connected enough to speak up and overrule the baby boomers.

The layers of the web | Jeremy Keith

Vague but exciting...

The three words that spawned the world wide web as we know it; the response from Tim Berners-Lee's supervisor to Tim's initial proposal. Jeremy's talk dives into the history of how the web came to be, including insight into his trip to CERN for the web's 30th birthday, before taking a look at why it has achieved longevity and how you can think about the web in layers to understand that success. Assorted notes:

  • Turing didn't actually know about Babbage and Lovelace's work;
  • Without Turing and the other codebreakers, who knows what would have happened, but the war would likely have gone on a bit longer. That's important for many reasons, but for computing it means that the 1945 publication of Vannevar Bush's As We May Think which describes a hypothetical device that could be used to connect data together known as the memex;
  • In the same year, Douglas Engelbart is drafted into the US Navy, though because the war is over he isn't put on active duty, hence how he reads As We May Think which begins his own thought processes about computers, resulting in his creation of both hypertext and the concept of a computer mouse:
I don't know why we call it a mouse. Sometimes I apologies for it, but it started that way and we never did change it.
  • The Whole Earth Catalog by Stewart Brand is a form of pre-Internet Wikipedia, a collection of all the things you might want to know in order to rebuild society in a commune or for off-grid living. He also said:
Computers are the new LSD.
  • Brand also created the Long Now foundation, an organisation that focuses on long-term thinking. For example, they are building a clock within a mountain in Texas that will tell the time accurately for 10,000 years;
  • His work with that foundation let him to begin abstracting concepts into "pace layers", an idea that most concepts can be broken down into fairly clean layers that build on each other and change at different rates, with the outermost layers being the least stationery:
Fast gets all of the attention, but slow gets all of the power.
  • If you map the web into pace layers, the structure becomes roughly: TCP/IP ➡ HTTP ➡ URLs ➡ HTML ➡ CSS ➡ JavaScript ecosystem (not the language specifically, but everything else). When you map the web like this, the rapid iteration of JS doesn't just make sense, it's a benefit. It gets to experiment and the stuff that sticks, the stuff that becomes permanent, moves down the stack and becomes absorbed into lower layers. Good examples of this are image rollers (now :hover) or form validation (required in HTML);
I now don't feel so bad about feeling overwhelmed by all the constant change in the JavaScript ecosystem because I feel like it's kind of its job to be overwhelming, it's where change and iteration happens quickly.
  • Of course, these layers also map well to the considerations of the web: URLs are most important, HTML is next etc. That means you can build in layers too (notably not mentioning progressive enhancement);
  • When thinking in layers, it is perhaps better to ask "how well does it fail?" instead of "how well does it work?" when considering how to go about building things; the web fails well, but not if it's all JS;
  • Service workers slightly mess with this layered model by allowing a website to work without the foundational layers of, well, the internet;
  • A really simple example of a service worker is providing a customised offline page, like a custom 404 page – that can be really useful – but of course you can do much more, like having "save for offline" buttons;
If you took a word processing file made today and tried to open it in a 30-year old word processor? Good luck with that. And yet the web has this unbroken line.

What a great talk!

📆 29 May 2020  | 🔗

  • Frontend
  • The World Wide Web
  • web
  • history
  • computing
  • Charles Babbage
  • Ada Lovelace
  • Alan Turing
  • Tim Berners-Lee
  • CERN
  • memex
  • Vannevar Bush
  • Douglas Engelbart
  • mouse
  • Stewart Brand
  • Long Now Foundation
  • Wikipedia
  • long-term
  • pace layers
  • quote
  • service worker
  • HTTP
  • HTML
  • CSS
  • JavaScript
  • URL
  • offline 

How Edge is becoming the best browser for PWAs | Samuele Dassatti

I still have my reservations over the whole Edge-Chromium combination but it has enabled the Edge team to begin taking a leading stance on certain topics, and it looks like PWAs are one they're looking at in detail. It makes sense to me, given how lacklustre use of the Windows App store still is, but regardless of motivation it's a real positive for Windows users and the web. New features include:

  • Customisable title bars (think Home, View, etc.);
  • Native file system access (that's huge!);
  • App badges (those little notification number icons we're all used to from phones; nice but hardly a hard requirement, though could be a neater API than push notifications are currently);
  • Quick entry to the Windows Store (unsurprising and not where I hope PWAs will ultimately flourish, but it's still nice to see).

I'm particularly hopeful that these efforts are baked back into Chromium (evidence suggests they will be) so that all related browsers benefit as well.

📆 29 May 2020  | 🔗

  • Frontend
  • PWA
  • Chromium
  • Edge
  • feature
  • apps
  • API
  • badges
  • title bar
  • file system
  • app store 

Micro-interactions for powerful design | Cloud Four

A useful and well-written overview of micro-interactions and how they can take a design from good to great. Includes some excellent examples of animated buttons, swipe interactions, and more from CodePen.

There is no HTTP code for censorship (but perhaps there should be) | edent

Should there be an HTTP error code for censorship? Quite probably and I agree with Terence that 403 (forbidden) is a misleading response. I really like his various proposals and the format he uses is actually a decent quick overview of the HTTP response header categorisation (1xx, 2xx, etc.) as well. Personally, if the 450 response is widely accepted and considered a standard for parental controls then I really, really love 451. It's a great reference and a useful response header. However, I do agree with a lot of the comments that it doesn't feel like censorship should be bracketed in with the 4xx category. It also looks like the proposal has been rejected or is possibly just stalled.

New Zealand bird identification | New Zealand Birds Online

A frankly excellent website for identifying bird species, particularly useful if you're like me and trying to do so years after having seen them 😁 It's a really neat interface that makes narrowing down species pretty simple, though their filtering sometimes goes a bit haywire and it would be great to be able to have a few more photos for some species (there is a bias towards more colourful/dynamic poses, rather than simple identification patterns, juveniles, or instances where one gender has a dull colouration).

Made By Me, But Made Possible By:

CMS:

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.