Blag

I was recently looking into formatting numbers in JavaScript, and had to format a number with its ordinal suffix. That is, getting the "st" suffix for "1st", "nd" suffix for "2nd", etc. It seems like it would be easy enough to do, and because it seems so easy to do, there are many answers on Stack Overflow with many different attempts.

Most of them are variations of this logic (don't do this):

function ordinal(n) {
  switch (n % 100) {
    case 11:
    case 12:
    case 13:
      return "th";
  }
  switch (n % 10) {
    case 1:
      return "st";
    case 2:
      return "nd";
    case 3:
      return "rd";
    default:
      return "th";
  }
}

I was recently building some helper classes in TypeScript, and those classes could be called in a variety of ways.

Many functions have different signatures that are compatible, largely through optional parameters.

function example(foo: string, bar?: number, baz?: boolean) { ... }

For the helper classes I was writing, the different signatures weren't compatible, and required some branching logic in order to support the different scenarios.

Fortunately, TypeScript supports function overloading for cases where the argument types aren't necessarily compatible.

I fell down a brief rabbit hole this morning while attempting to refactor some TypeScript code.

I had some code along the lines of

if (this.foo.bar?.baz === 'example') {

that was repeated in a variety of locations.

I wanted to refactor it to

if (this.isExample) {

but one of the nuances of that refactor is that the first version includes an implicit type predicate for this.foo.bar to not be undefined, because this.foo.bar must be set for .baz to equal 'example'.

The Media Queries Level 4 specification introduced a new range syntax for media queries.

@media (480px <= width < 768px);

This is particularly useful because min-* and max-* media queries have always been inclusive of their boundary values.

A common bug that can be hard to reproduce is when pre-set media queries overlap at the boundaries.

@media (max-width: 768px) {
  .example {
    padding: 10px;
    width: 100%;
  }
}

@media (min-width: 768px) {
  .example {
    // uh oh! Both the margin and the padding will apply
    // when the browser is exactly 768px wide 😱
    margin: 15px;
    width: 200px;
  }
}

The classic solution is to make sure that the boundary values differ by 1px.

@media (max-width: 767px) {...}
@media (min-width: 768px) {...}

This works fine for units in px, but it can be problematic for values using em.

@media (max-width: 29em) {...}
@media (min-width: 30em) {...} //sizable gap

Since em units can be modified by the user by way of browser font-size settings, I've typically used 0.001 as my "epsilon" value to make sure that the em values are less than 1px apart, while still not causing an overlapping range:

@media (max-width: 29.999em) {...}
@media (min-width: 30em) {...}

Range syntax for media queries simplifies this by allowing both inclusive and exclusive bounds for min-* and max-* boundaries:

@media (width < 30em) {...}
@media (width <= 30em) {...}

Unfortunately, range media queries have almost no browser support at this time.

Fortunately, there's another way to handle exclusive bounds on media queries that does have cross-browser support. This alternative method involves two media query features.