Links from the past few weeks (Oct 30, 2022)

List of links, articles, and other resources you might find interesting from the past few weeks.

JavaScript

ECMAScript proposal: Decorators

JavaScript will soon have a new feature: decorators. The committee moved the proposal to stage 3.

The proposal defines decorators as functions called on classes, class elements, or other JavaScript syntax forms during definition. … Decorators let you metaprogram and add functionality to a value, without fundamentally changing its external behavior. Decorators for ES6 classes

What does it mean?

One example that made it much clearer for me was the one for class methods:

function logged(value, { kind, name }) {
  if (kind === "method") {
    return function (...args) {
      console.log(`starting ${name} with arguments ${args.join(", ")}`);
      const ret = value.call(this, ...args);
      console.log(`ending ${name}`);
      return ret;
    };
  }
}

class C {
  @logged
  m(arg) {}
}

new C().m(1);
// starting m with arguments 1
// ending m

This example roughly “desugars“ to:

class C {
  m(arg) {}
}

C.prototype.m =
  logged(C.prototype.m, {
    kind: "method",
    name: "m",
    static: false,
    private: false,
  }) ?? C.prototype.m;

Decorators for ES6 classes

ECMAScript proposal: Type annotations

Likewise, somebody prepared an interesting proposal for type annotations.

If realized, you could run programs written in TypeScript, Flow, and other static typing supersets of JavaScript with no need for transpilation. ECMAScript proposal: Type annotations

HTML

Description list versus unordered list with headings

Turns out, HTML supports description lists (otherwise called definition lists), and you should sometimes use them instead of unordered lists. They’re more suitable for things like listing post titles and their descriptions.

For example, you shouldn’t write this:

<h2>Posts</h2>
<ul>
  <li>
    <h3><a href="/posts/article-1/">Article 1</a></h3>
    <p>This summarizes article 1.</p>
  </li>
  <li>
    <h3><a href="/posts/article-2/">Article 2</a></h3>
    <p>This summarizes article 2.</p>
  </li>
</ul>

Instead, do this:

<h2>Posts</h2>
<dl>
  <dt><a href="/posts/article-1/">Article 1</a></dt>
  <dd>This summarizes article 1.</dd>
  <dt><a href="/posts/article-2/">Article 2</a></dt>
  <dd>This summarizes article 2.</dd>
</dl>

To understand why:

WHATWG or W3C?

When you search through HTML specifications, you might stumble upon two organizations: WHATWG and W3C.

Which one should you listen to?

WHATWG. WHATWG describes the browser implementation. W3C was more theoretical.

Furthermore, W3C and WHATWG signed an agreement to work together on a single version of HTML and DOM, agreeing that WHATWG will maintain the HTML and DOM Living Standards.

David Baron from Mozilla also says to prefer WHATWG:

When the W3C’s and WHATWG’s HTML specifications differ, we tend to follow the WHATWG one.

Before the srcset, there was a dynamic image resizing

You can serve responsive images using the srcset attribute. But what were people doing before?

You can read up on two solutions I’ve found:

CSS

What CSS units to prefer

It depends on what you want to do. See an excellent summary from Reddit user Tontonsb.

Furthermore, to go into more detail explaining why you shouldn’t settle with px unit, check out The surprising truth about pixels and accessibility.

CSS hyphenation

Did you know that websites can use hyphens? Find out more in All you need to know about hyphenation in CSS.

System font stack

You don’t always have to bother with loading custom fonts. A lot of people find regular system fonts great, and the text will still look beautiful.

For instance, see a perfect list of system fonts: System font stack.

Empathetic animations

Don’t do animations because you can. Use them to help the users understand what’s going on. More details in Empathetic animations.

Security

Make sure you send correct security headers

A lot of websites have improperly set security headers, or they didn’t set them at all. Test your site with observatory.mozilla.org to find the possible deficiencies. Another excellent alternative is securityheaders.com.