Category: Software

Resolving modules in JavaScript ESM

In JavaScript ES modules we can’t rely on CommonJS-style module resolution to add extensions to our import statements. Even Node.js has recently dropped automatic extension resolution in an effort to be more compatible with the ESM specification. Bare imports for Node modules is still possible, but as a side-effect dual-modules are no longer possible, except via deep-imports (import foo from 'bar/module.mjs';).

Obviously nobody wants to write these out manually, but this presents some new challenges for transpilers, which unfortunately no transpilers have yet tried to solve.

So what can we do about this?

How to get the real require function in Node.js, when using a bundler

Recently I wanted to create a JavaScript module that would use the zlib module in Node, and fallback on pako in browsers. Seems simple enough, but actually proved somewhat difficult. Browser bundlers rewrite the CommonJS require function and by default shim the Node built-in zlib module with a less-performant pseudo-asynchronous pure-JS implementation. So how can we accomplish this you ask?

Adding a needed feature to Node.js's zlib module

Necessity is the mother of pull requests, so that’s what I did.

As you may know, Node.js is the JavaScript web server. As such, one of the necessary features for it to have is a zlib compression and decompression module. That module is actually pretty neat. It features both a syncronous and an asyncronous API backed by native-code which makes it much more efficient than JavaScript-based alternative.

flshm released

It’s not every day you get to release a freelance project as open source, but in this case I’m pleased to be able to release flshm as open source on GitHub.

This project was developed for a client who wanted to add some new features to an existing Flash-based project, but was running into some limitations due to the sand-boxing features which are even present when publishing a desktop application.

Making a Firefox Dev Tools Add-On Look Native

UPDATE: This is now obsolete, with the adoption of WebExtensions.

Now that Firefox has built-in developer tools, it makes sense for developer add-ons integrate with them. MDN has some examples on creating a developer tools panel, but the examples do not look anything like the built-in tools, and do not offer any information on how to do so.

wheellistener - Cross-browser wheel event listener

If you ever wanted to use scroll events in your web app, you’ve probably found what a mess it is. I know I did when I was developing the theme used on this website. There are snippets out there to try to resolve legacy browser issues, but all of them are half-baked and missing basic functionality such as proper feature-detection and the ability to remove an event listener. All of these issues seems simple, but are actually quite complex to implement properly, and without memory leaks.

We can do better! That’s why I created this library.

webpack and jQuery: Include only the parts you need

Recently I decided to try out webpack as a replacement for Browserify, and it didn’t disappoint! Out-of-the-box, webpack even support’s AMD, so RequireJS-based libraries can be used as-is. This got me thinking, jQuery switched to RequireJS a while back for their source code and build process, so I questioned:

Could webpack be used to load individual jQuery modules?