Trys Mudford's Blog

Better max-width queries

Thu, 24 Jul 2025 00:00:00 +0000

A friend shared this tip the other day and it was too useful not to reshare. If you’re a mobile-up kind of developer, it’s easy to forget that max-width media queries are “less than or equal to” by default. It can play havoc with your nice round numbers:

@media (min-width: 60em) {
  /* above and including 60em */
}

@media (max-width: 59.9375em) {
  /* below 60em, but not including 60em exactly */
}

If you want to tidy that up, and continue to support <= Safari 16.3, you can use a query like this:

@media (max-width: 60em) and (not (width: 60em)) {
  /* below 60em, but not including 60em exactly */
}

However, if you’re bought into range queries, it all becomes much, much simpler:

@media (width < 60em) {}

Only show the first letter

Thu, 16 May 2019 16:00:00 +0000

Time for another tiny lesson! We’re working with a third-party Vue datepicker, and there was a design decision to only show the first letter of the weekdays above the calendar. The datepicker let us specify those values via props. All plain sailing, or so we thought.

The problem? The library assumes you’ll be passing unique values, and it uses them as the :key property in a loop. Single letter days lead to T and S collisions and Vue throws a warning for duplicate keys. We also couldn’t change that logic without forking the plugin, nor add additional markup to the output.

The solution was to use full weekdays, and hide all but the first letter with CSS. Here’s how:

.datepicker thead {
  font-size: 0;
}

.datepicker thead ::first-letter {
  font-size: 1rem;
}

Monday	Tuesday	Wednesday	Thursday	Friday	Saturday	Sunday
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

Fancy Slack metadata

Thu, 02 May 2019 17:00:00 +0000

Here’s a tiny lesson on generating those fancy extra bits of metadata shown below a link in Slack.

Officially they are labels for Twitter, but I’ve never seen them used by the social network. You add them with the following meta tags:

<meta name="twitter:label1" value="Posted in" />
<meta name="twitter:data1" value="Web" />
<meta name="twitter:label2" value="Reading time" />
<meta name="twitter:data2" value="10 minutes" />

For an added Hugo bonus, here’s how I generate the blog tags on my site:

{{- if (.IsPage) and eq .Section "blog" -}}
<meta name="twitter:label1" value="Posted in" />
<meta name="twitter:data1" value="{{ .Params.categories }}" />
<meta name="twitter:label2" value="Reading time" />
<meta name="twitter:data2" value="{{ .ReadingTime }} minute{{ if not (eq .ReadingTime 1) }}s{{ end }}" />
{{- end -}}