Tags: em

A Web Component UI library for people who love HTML | Go Make Things

I’m obviously biased, but I like the sound of what Chris is doing to create a library of HTML web components.

Hiding elements that require JavaScript without JavaScript :: dade

This is clever: putting CSS inside a noscript element to hide anything that requires JavaScript.

GeoCities Time Machine!

Fun!

But also …never forget, never forgive.

A pragmatic browser support strategy | Go Make Things

1. Basic functionality should work on any device that can access the web.
2. Extras and flourishes are treated as progressive enhancements for modern devices.
3. The UI can look different and even clunky on older devices and browsers, as long as it doesn’t break rule #1.

Elizabeth Goodspeed on why graphic designers can’t stop joking about hating their jobs

We trained people to care deeply and then funnelled them into environments that reward detachment. ​​And the longer you stick around, the more disorienting the gap becomes – especially as you rise in seniority. You start doing less actual design and more yapping: pitching to stakeholders, writing brand strategy decks, performing taste. Less craft, more optics; less idealism, more cynicism.

My favourite bit of the archive on this site is the link that says “on this day”. It’s of no interest to anyone except me, but I love going through this little time tunnel.

Using that link this month gives me a flashback to March five years ago when The Situation was unfolding.

I remember the build-up at the end of February. We were in Galway for a birthday weekend getaway. One morning in the hotel I saw the papers were running a story that seemed so Irish to me: because of this emerging virus, people were no longer to give the “sign of peace” at mass (that’s the bit where you awkwardly shake hands with the people around you). I chuckled. Nervously.

Then we were leaving Ireland, in the taxi to the airport in Dublin the radio was on. A medical professional was urging the cancellation of the St. Patrick’s Day parade because a grand total of 2 or 3 people in the country had this virus. The DJ reacted with incredulity. It sounded like a pretty far-fetched idea to me too, because St. Patrick’s Day was just over two weeks away.

The St. Patrick’s Day parade was cancelled.

Throughout The Situation I was keeping track of things in Ireland. It was like seeing an A/B test unfolding. Everything that England was doing wrong, Ireland was doing the opposite. It wasn’t quite New Zealand, but they put scientists front and centre of their decision-making precision. Whereas here, policy was driven by wishful thinking.

I was writing about it all here on my website. I also started recording a tune every day for 200 days. Here’s the first one. See how fresh-faced I am? I decided to stop shaving during lockdown. After six weeks, I looked like this.

But to really recall what that time was like, I recommend reading Jessica’s account of 2020. The first entry is called A Journal of the Plague Week and it was published five years ago. The final entry was A Journal of the Plague Week 52 a year later.

Cool native HTML elements you should already be using · Harrison Broadbent

dialog, details, datalist, progress, optgroup, and more:

If this article helps just a single developer avoid an unnecessary Javascript dependency, I’ll be happy. Native HTML can handle plenty of features that people typically jump straight to JS for (or otherwise over-complicate).

Ten years ago today I coined the shorthand “js;dr” for “JavaScript required; Didn’t Read”. - Tantek

Practice Progressive Enhancement.

Build first and foremost with forgiving technologies, declarative technologies, and forward and backward compatible coding techniques.

All content should be readable without scripting.

If it’s worth building on the web, it’s worth building it robustly, and building it to last.

MS Edge Explainers/Performance Control Of Embedded Content / explainer.md at main · MicrosoftEdge/MSEdgeExplainers

I like the look of this proposal that would allow authors to have more control over network priorities for third-party iframes—I’ve already documented how I had to use a third-party library to fix this problem on the Salter Cane site.

I really like Brad’s new project, Cold Album Drumming:

Brad Frost plays drums to the albums he knows intimately, but has never drummed to before. Cover to cover. No warm-up. No prep. Totally cold. What could possibly go wrong?

I got a kick out of watching him play along to Radiohead’s In Rainbows and The Decemberist’s The Crane Wife.

I was really into The Decemberists in the first decade of the 21st Century. I remember seeing them in a long-gone Brighton venue more than twenty years ago.

But I kind of stopped paying attention to them after they released The Hazards Of Love. Not because I didn’t like that album. Quite the opposite. I love that album. I think in my mind I kind of thought “That’s it, they’ve done it, they can go home now.”

It’s exactly the kind of album I should not like. It’s a concept album. A folk-rock opera.

When I was growing up, concept albums were the antithesis of cool. Prog rock was like an insult.

You have to remember just how tribal music was back in the ’70s and ’80s. In my school, I remember the divide between the kind of people who listened to The Cure and The Smiths versus the kind of people who listened to Prince or Queen. Before that you had the the mods and the rockers, which in hindsight makes no sense—how are The Who and The Jam not rockers?

Looking back now, it’s ridiculous. I get the impression that for most people growing up in the last few decades, those kind of distinctions have been erased. People’s musical intake is smeared across all types and time periods. That is a good thing.

Anyway, a folky prog-rock opera like The Hazards Of Love is exactly the kind of thing that past me would’ve hated. Present me adores it. Maybe it’s because it’s got that folky angle. I suspect Colin Meloy listened to a lot of Horslips—heck, The Decemberists even did their own mini version of The Táin.

Speaking of mythic Irish language epics, I really like John Spillane’s Fíorusice:

Fíoruisce - The Legend of the Lough is a three-act Gaelic folk opera composed by Irish artist John Spillane. It is a macaronic or bilingual work. The work is an imagined re-Gaelicization of the Victorian Cork fairytale Fior-usga collected by Thomas Crofton Croker in the 1800’s and published in his book Fairy Legends and Traditions of the South of Ireland (1828). The story is a surreal tale culminating in a drowned kingdom, which as lore tells us, becomes The Lough in Cork city as we know it today. They say, you can see the tops of the underworld towers on a clear day and hear the music of their big party on Midsummer’s night.

Yup, it’s another concept album. And funnily enough, past me was not a fan of John Spillane either.

I first heard him when he was part of a trad band called Nomos in Cork in the early ’90s (the bódhran player’s mother was friends with my mother). I really liked their tunes but I thought the songs were kind of twee.

Over the years, the more of his songs I heard, the more I understood that John Spillane was just being completely open and honest. Past me thought that was twee. Present me really respects it. In fact, I genuinely love his songs like Johnny Don’t Go To Ballincollig and All The Ways You Wander.

And then there’s Passage West. It’s a masterpiece. I might be biased because Passage West is the next town over from Cobh, where I grew up.

So yeah, Fíorusice is something that past me would’ve disdained:

1. a concept album by
2. John Spillane in
3. the Irish language.

Present me is into all three.

It’s Bandcamp Friday today. I think I know what I’m going to get.

Through Lines 247 | Scott Boms

I miss being excited by technology. I wish I could see a way out of the endless hype cycles that continue to elicit little more than cynicism from me. The version of technology that we’re mostly being sold today has almost nothing to do with improving lives, but instead stuffing the pockets of those who already need for nothing. It’s not making us smarter. It’s not helping heal a damaged planet. It’s not making us happier or more generous towards each other. And it’s entrenched in everything — meaning a momentous challenge to re-wire or meticulously disconnect. I’m slowly finding my own ways of breaking free to regain a sense of self and purpose.

mirisuzanne/track-list: Enhance a list of audio tracks with playlist controls

This is very nice HTML web component by Miriam, progressively enhancing an ordered list of audio elements.

The Shape of a Mars Mission (Idle Words)

You can think of flying to Mars like one of those art films where the director has to shoot the movie in a single take. Even if no scene is especially challenging, the requirement that everything go right sequentially, with no way to pause or reshoot, means that even small risks become unacceptable in the aggregate.

AI is Stifling Tech Adoption | Vale.Rocks

Want to use all those great features that have been in landing in browsers over the past year or two? View transitions! Scroll-driven animations! So much more!

Well, your coding co-pilot is not going to going to be of any help.

Large language models, especially those on the scale of many of the most accessible, popular hosted options, take humongous datasets and long periods to train. By the time everything has been scraped and a dataset has been built, the set is on some level already obsolete. Then, before a model can reach the hands of consumers, time must be taken to train and evaluate it, and then even more to finally deploy it.

Once it has finally released, it usually remains stagnant in terms of having its knowledge updated. This creates an AI knowledge gap. A period between the present and AI’s training cutoff. This gap creates a time between when a new technology emerges and when AI systems can effectively support user needs regarding its adoption, meaning that models will not be able to service users requesting assistance with new technologies, thus disincentivising their use.

So we get this instead:

I’ve anecdotally noticed that many AI tools have a ‘preference’ for React and Tailwind when asked to tackle a web-based task, or even to create any app involving an interface at all.

We Live Like Royalty and Don’t Know It — The New Atlantis

Strong Deb Chachra vibes in this ongoing series by Charles C. Mann:

he great European cathedrals were built over generations by thousands of people and sustained entire communities. Similarly, the electric grid, the public-water supply, the food-distribution network, and the public-health system took the collective labor of thousands of people over many decades. They are the cathedrals of our secular era. They are high among the great accomplishments of our civilization. But they don’t inspire bestselling novels or blockbuster films. No poets celebrate the sewage treatment plants that prevent them from dying of dysentery. Like almost everyone else, they rarely note the existence of the systems around them, let alone understand how they work.

UI Pace Layers - Jim Nielsen’s Blog

Every UI control you roll yourself is a liability. You have to design it, test it, ship it, document it, debug it, maintain it — the list goes on.

It makes you wonder why we insist on rolling (or styling) our own common UI controls so often. Perhaps we’d be better off asking: What are the fewest amount of components we have to build to deliver value to our users?

With the release of a new Salter Cane album I figured it was high time to update the design of the band’s website.

Here’s the old version for reference. As you can see, there’s a connection there in some of the design language. Even so, I decided to start completely from scratch.

I opened up a text editor and started writing HTML by hand. Same for the CSS. No templates. No build tools. No pipeline. Nothing. It was a blast!

And lest you think that sounds like a wasteful way of working, I pretty much had the website done in half a day.

Partly that’s because you can do so much with so little in CSS these days. Custom properties for colours, spacing, and fluid typography (thanks to Utopia). Logical properties. View transitions. None of this takes much time at all.

Because I was using custom properties, it was a breeze to add a dark mode with prefers-color-scheme. I think I might like the dark version more than the default.

The final stylesheet is pretty short. I didn’t bother with any resets. Browsers are pretty consistent with their default styles nowadays. As long as you’ve got some sensible settings on your body element, the cascade will take care of a lot.

There’s one little CSS trick I think is pretty clever…

The background image is this image. As you can see, it’s a rectangle that’s wider than it is tall. But the web pages are rectangles that are taller than they are wide.

So how I should I position the background image? Centred? Anchored to the top? Anchored to the bottom?

If you open up the website in Chrome (or Safari Technical Preview), you’ll see that the background image is anchored to the top. But if you scroll down you’ll see that the background image is now anchored to the bottom. The background position has changed somehow.

This isn’t just on the home page. On any page, no matter how tall it is, the background image is anchored to the top when the top of the document is in the viewport, and it’s anchored to the bottom when you reach the bottom of the document.

In the past, this kind of thing might’ve been possible with some clever JavaScript that measured the height of the document and updated the background position every time a scroll event is triggered.

But I didn’t need any JavaScript. This is a scroll-driven animation made with just a few lines of CSS.

@keyframes parallax {
    from {
        background-position: top center;
    }
    to {
        background-position: bottom center;
    }
}
@media (prefers-reduced-motion: no-preference) {
        html {
            animation: parallax auto ease;
            animation-timeline: scroll();
        }
    }
}

This works as a nice bit of progressive enhancement: by default the background image stays anchored to the top of the viewport, which is fine.

Once the site was ready, I spent a bit more time sweating some details, like the responsive images on the home page.

But the biggest performance challenge wasn’t something I had direct control over. There’s a Spotify embed on the home page. Ain’t no party like a third party.

I could put loading="lazy" on the iframe but in this case, it’s pretty close to the top of document so it’s still going to start loading at the same time as some of my first-party assets.

I decided to try a little JavaScript library called “lazysizes”. Normally this would ring alarm bells for me: solving a problem with third-party code by adding …more third-party code. But in this case, it really did the trick. The library is loading asynchronously (so it doesn’t interfere with the more important assets) and only then does it start populating the iframe.

This made a huge difference. The core web vitals went from being abysmal to being perfect.

I’m pretty pleased with how the new website turned out.

Build for the Web, Build on the Web, Build with the Web – Web Performance and Site Speed Consultant

If I was only able to give one bit of advice to any company: iterate quickly on a slow-moving platform.

Excellent advice from Harry (who first cast his pearls before the swine of LinkedIn but I talked him ‘round to posting this on his own site).

1. Opt into web platform features incrementally
2. Embrace progressive enhancement to build fast, reliable applications that adapt to your customers’ context
3. Write code that leans into the browser, not away from it

I’m not against front-end frameworks, and, believe me, I’m not naive enough to believe that the only thing a front-end framework provides is soft navigations, but if you’re going to use one, I shouldn’t be able to smell it.

una.im | Updates to the customizable select API

It’s great to see the evolution of HTML happening in response to real use-cases—the turbo-charging of the select element just gets better and better!

Prescriptive and Descriptive Information Architectures | Jorge Arango

Interesting—this is exactly the same framing I used to talk about design systems a few years ago.