Blag

Manuel Matuzovic has an excellent write-up of his modern HTML boilerplate.

I really enjoy reading these back-to-the-basics type posts because I almost always learn about some new feature that I wasn't aware of before. This post was no exception. In particular there's a lot to know about icons and image previews that I now want to integrate into all of my projects.

Shout out to Lea Verou for sharing Node.isConnected. I've had a few cases where I've needed to determine if a node is in the DOM. I've usually written something along the lines of:

const inDOM = (node) => {
  for (let n = node; n; n = n.parentNode) {
    if (n === document) {
      return true;
    }
  }
  return false;
};

Having a native property for this will be helpful.

This is an excellent overview of using the Web Animation API.

I meant to share this a month ago when I first saw it, but it came up again recently when I was making some animation improvements to a website I've been working on, so there's no time like the present.

I made some minor changes to the animateTo function included in the video for my own purposes, so the snippet I use is along the lines of:

function animateTo(element, keyframes, options) {
  let cleanup = () => {};
  return new Promise((resolve, reject) => {
    try {
      const animation = element.animate(keyframes, {
        ...options,
        fill: "both",
        signal: undefined,
      });

      const finish = () => {
        try {
          animation.commitStyles();
          animation.cancel();
          resolve();
        } catch (e) {
          // handle browsers that don't support `Animation.prototype.commitStyles`
          reject(e);
        }
      };
      animation.addEventListener("finish", finish);

      // While the animation is not exposed through `animateTo`,
      // animations can still be cancelled via the `signal` option,
      // or when accessed from `Element.prototype.getAnimations`
      const cancel = () => reject();
      animation.addEventListener("cancel", cancel);

      // Add support for AbortController
      const signal = options.signal;
      const abort = () => animation.cancel();
      if (signal) {
        signal.addEventListener("abort", abort);
      }

      cleanup = () => {
        animation.removeEventListener("finish", finish);
        animation.removeEventListener("cancel", cancel);
        if (signal) {
          signal.removeEventListener("abort", abort);
        }
      };
    } catch (e) {
      // handle older browsers that don't have `Element.prototype.animate`
      reject(e);
    }
  }).finally(cleanup);
}

I meant to share this a couple months ago when I first read it. It's an excellent breakdown of some of the differences between software engineer levels and the type of work expected.

As a tangent, Bonnie Eisenman uses the following roles for the various different levels:

• junior
• midlevel
• senior
• staff

I like that Bonnie chose to label the various levels numerically. I prefer to use numeric levels when possible, as it helps to avoid some bias when someone switches to tech late in their career and takes on a "junior" role. Unfortunately there's no real standard for numeric levels.

My preferred labels are along the lines of:

• level 0: intern/co-op
• level 1: junior
• level 2: midlevel
• level 3: senior
• level 4: staff

Anyway, go read Bonnie's post.

Alex's "Do not get arrested challenge 2020" is the best thing I've read all week.

Somewhere around:

I called at least 30 phone numbers, to say nothing of The Emails. If you laid all the people I contacted end to end along the equator, they would die, and you would be arrested.

I laughed so hard I nearly fell out of my chair.