Recently I wanted to programmatically distort an image into an isosceles trapezoid using JavaScript to get a simple 3D perspective effect. This might seem like a simple task but when you only have 2D rotate and skew transforms, there isn’t a straightforward way to make such a transform.

One option might be to use the 3D transforms of WebGL in a browser, but that’s a really heavy solution and there currently aren’t any WebGL canvas libraries for Node.JS. It would be better if we could use just a 2D canvas drawing context.

So how can we accomplish this without 3D transforms? Read on to find out!

With Node.js 13.7.0 we finally have a standard way to make dual-packages which support both ESM and CJS with backwards compatibility with older Node.js versions, via conditional exports.

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?

Recently I published a new open-source webpack loader named smart-source-map-loader to enable Webpack to load the source maps from existing compiled code. Now you might be thinking, there’s already a loader for that, what makes this alternative “smart”?

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?

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.

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.

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?

Today I have released AMD define factory patcher webpack loader as open source and available on NPM. It is a webpack loader aimed at solving a problem that some AMD-based JavaScript libraries have developed which renders them incompatible with webpack.

My latest open source contribution to the world is jquery-ajaxreadystate, a jQuery plugin which adds a new AJAX function with readystatechange capabilities, available for download on GitHub, NPM, and Bower.