The Fellowship of the Spec

TC39 is talking JavaScript decorators (again)

Decorate all the things

Later this month, The Fellowship of the Spec (TC39) is set to discuss a new Stage 2 proposal for decorators for JavaScript classes. If you’re not familiar, Decorators are a proposal for extending JavaScript classes.

Wait, haven’t I heard this song before? You definitely have. The TC gang have been discussing different iterations of JavaScript decorators on and off for 5 years now. Naturally, some developers got tired of waiting, so they went ahead and incorporated them into various JS frameworks and libraries (looking at you, MobX). Babel 7, TypeScript, and Angular all feature decorators that are based on previously-rejected TC39 proposals, everythingisfine.gif.

So what’s different this time? This latest proposal is simpler and more limited in scope than previous versions of decorators. According to the proposal’s README, these decorators will “always simply wrap what they are decorating, rather than performing other transformations.” In theory, this should make it easier to avoid overusing decorators and abstracting away too much of your codebase (a common complaint when using decorators in TypeScript and other frameworks).

The bottom line

It seems likely that some form of decorators will be added to the ECMAScript standard in the near future, if only to provide greater consistency throughout the JavaScript ecosystem. Some developers will hate that because they’ve had bad experiences with decorators in the past, and others will welcome it after years of polyfilling waiting. Regardless of which side you fall on, just remember this sage advice.

---

Playwright releases a major, minor update

Another playwright interested in headless execution

To test or not to test… that is (always) the question. Playwright released v1.4 last week, and despite no major breaking changes, this was a pretty big update for Microsoft’s popular Node.js testing library thanks to the addition of three new, highly-requested features. Here’s the breakdown:

1. A new playwright-cli: Playwright’s new CLI lets you record user interactions to generate Playwright scripts, emulate devices and color schemes, generate page screenshots, open pages in Chromium, Firefox, and Safari and more. This should help you to more easily generate E2E test scripts as you click through.

2. Video screencasts: This experimental new feature allows you to record videos of your scripts to inspect headless executions on any browser and any platform in both headful and headless modes.

3. New client/server wire protocol: A new wire protocol for Python, C#, and other language bindings that will provide greater support for those wanting to use Playwright in non-Node environments.

The bottom line

When some of the founding members of the Puppeteer team moved over to Microsoft last year and launched Playwright, it was easy to see the similarities between the two libraries. Some developers even dubbed Playwright the “cross-browser Puppeteer”, since that was Playwright’s only real distinguishing feature. But the new features and functionality in this latest release should help Playwright to differentiate itself among the many other testing and browser automation tools out there.

---

Cool bits

1. radioactive-state is a new React state management library that is “deeply reactive” and high performing. Here’s a must-watch introduction on the library.

2. Jake Archibald wrote an in-depth article on the new AVIF image format that produces a high quality image at 1/4 the size of JPEG and 1/2 the size of WebP. AVIF will make a great addition to our “Pokemon or Image Format” game.

3. Souparno made a beginner-friendly tutorial on building a snake game from scratch in JavaScript.

4. Charles wrote about tophatting in React Native at Shopify. “Tophatting” refers to saying “M’lday” while tipping your fedora manually testing your coworker’s changes before approving their PR.

5. Marko wrote a great guide to working with JavaScript media queries.

6. Holly wrote about the 5 most annoying website features she faces as a blind person every single day. It’s a well-written reminder about the importance of accessibility and empathy for users.

7. Stuart gave a virtual conference talk on why you don’t need “all that JavaScript”. As someone whose livelihood depends on that not being the case, I’ll have to say I disagree, Stu.

8. Tooltip Sequence is a simple, step-by-step tooltip helper you can use to walk users through the features on your web app. It would be great if someone could implement this on the IRS’s website.

---

🔥 Tip - Get the current URL in JavaScript

function getCurrentURL () {
  return window.location.href
}

// Example
const url = getCurrentURL()

url // https://ui.dev/get-current-url-javascript/

Simple enough. If you’re using JavaScript in the browser you can get the full current URL by using window.location.href. I think it’s also worth noting that window.location has a bunch of different properties on it that may be of use to you as well.

Let’s assume this is the current URL we’re on

https://ui.dev/get-current-url-javascript/?comments=false

These are all the properties that window.location gives us.

const {
  host, hostname, href, origin, pathname, port, protocol, search
} = window.location

host // "ui.dev"
hostname // "ui"
href // "https://ui.dev/get-current-url-javascript/?comments=false"
origin // "https://ui.dev"
pathname // "/get-current-url-javascript/""
port // ""
protocol // "https:"
search // "?comments=false"

---