Skip to main content

Journal

Shoelace: a forward-thinking library of web components

I’m interested by Shoelace’s MO as a collection of pre-rolled, customisable web components. The idea is that it lets individuals and teams start building with web components – components that are web-native, framework-agnostic and portable – way more quickly.

I guess it’s a kind of Bootstrap for web components? I’m interested to see how well it’s done, how customisable the components are, and how useful it is in real life. Or if nothing else, I’m interested to see how they built their components!

It’s definitely an interesting idea.

Component specifications, by Nathan Curtis

Nathan on how complex components require comprehensive specifications rather than ill-advised assumptions, and how Figma can be used to guide engineers to reliably build such components.

I’m still amazed when designers schlep together a few pictures, publish a configurable Figma component, point their developer counterparts at the main component and say “Use Figma’s inspect tool.”

Things have changed. Components are more complicated. Designers are delivering to many different developers. Accessibility has risen to the fore. For design systems that scale, teams are finding it necessary to write down all the details again.

Ben Lomond, bagged

Had a great day with Mark and Alan on Saturday climbing Ben Lomond. Although I’m not much of a hill-walker I reckon that’s the third Munro I have bagged.

We were staying overnight at our friend Jim’s family cabin at Rowardennan and it was a short walk from there to the mountain. The start is steep and the weather progressively worsened until the rain was horizontal, but nonetheless we reached the summit (3200 feet above sea level) in around two hours then skipped back down in just one more hour. We were pretty proud of ourselves to complete the walk in just over three hours!

After that we enjoyed steak pie, fish and chips and victory pints at the Rowardennan hotel. A perfect day.

Mind you, over the last couple of days I’ve been feeling pain in muscles I didn’t know existed!

Lately… (08-04-2023)

I’ve been:

  • reading The Islander by Chris Blackwell and Paul Morley
  • watching Oppenheimer on the big screen and The Bear on TV
  • listening to 1982 by A Certain Ratio and Matt Wilde’s Hello World
  • out to see Moorcroft at the Tron and thinking about it ever since
  • enjoying collaborating and socialising with teammates in the office but not loving the commute
  • at one wedding (Lou and Tom) and one funeral (Aunt Elsie)
  • losing sleep while Rudy goes through a night-whines phase
  • starting to re-find some form at table tennis training
  • wanting to write regular posts like this – this is the test run!

Specs and standards

Something Adrian Roselli said recently has stuck with me. The gist was that when developers need definitive guidance they shouldn’t treat MDN as gospel, but rather refer to the proper specifications for web standards.

Note: this post is a work in progress. I’ll refine it over time.

Use z-index only when necessary

There’s a great section on Source order and layers in Every Layout’s Imposter layout. It’s a reminder that when needing to layer one element on top of the other you should:

  1. favour a modern layout approach such as CSS Grid over absolute positioning; and
  2. not apply z-index unless it’s necessary.

which elements appear over which is, by default, a question of source order. That is: if two elements share the same space, the one that appears above the other will be the one that comes last in the source.

z-index is only necessary where you want to layer positioned elements irrespective of their source order. It’s another kind of override, and should be avoided wherever possible.

An arms race of escalating z-index values is often cited as one of those irritating but necessary things you have to deal with using CSS. I rarely have z-index problems, because I rarely use positioning, and I’m mindful of source order when I do.

To delete something, use a form rather than a link

In web-based products from e-commerce stores to email clients to accounting software you often find index pages where each item in a list (or row in a table) has a Delete option. This is often coded as a link… but it shouldn’t be.

I liked this comment by Rails developer Dan where he advises a fellow Rails developer that to create his Delete control he should use a form rather than a link, via Rails’s button_to method.

External Link Bookmark Note Entry Search