Skip to main content

18 posts tagged with "web"

View All Tags

Faster Playwright Install on Ubuntu

I noticed recently that running frontend Playwright tests on macOS via GitHub Actions is noticeably faster than on Ubuntu. This is because macOS ships with more browser dependencies out of the box, whereas the base Ubuntu image needs to install them all every run, which takes time. But Playwright has an image with these dependencies already installed! In the end it saves about 30 seconds on Ubuntu.

SoundSource freezing

I can't use macOS anymore without SoundSource. However, it frequently freezes, hangs, crashes, etc. This requires a not-too-lengthy but still annoying manual flow of opening up Activity Monitor to force kill it, then opening it again. So I made it easier and automated.

Iframe Garbage Collection

When you have an iframe loading an intense amount of content (like an entire video game, in the case of https://playfeed.io), and you need you need to reuse that iframe, you need to force the iframe to free up its memory usage so the browser will garbage collect it.

Frontend Bundling

Frontend bundling is a process by which your frontend source code, typically spread across multiple files, gets squished and transformed into few files, often just one file. This post will cover some basics around bundling.

ESM vs CJS

There are currently two main module formats in the JavaScript ecosystem: ECMAScript Modules (ESM) and CommonJS (CJS). CJS was first, but ESM is now the JavaScript standard and is the future. The main difference between the two is how they import files.

Npm Q&A

Npm is a package manager for JavaScript projects. What this means is that it enables easy installation of packages (published to the public registry, https://www.npmjs.com, or private registries) while also installing nested dependencies between packages. I received a bunch of questions about npm, and here are the answers! Note that I haven't looked at implementation details or any specs on how npm works, these answers are merely based on my observations after nearly a decade of using npm.

What's in import.meta?

If you look at the import.meta docs on MDN you'll notice that it says:

The spec doesn't specify any properties to be defined on it, but hosts usually implement the following properties: [url, resolve]

So what is actually in there? MDN is correct in saying url and resolve are usually (always) implemented, but each run-time also sticks some other stuff in there. From my own testing, below are the values that exist for each major runtime.