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!

I’ve always felt like when it comes to using icons in CSS, we can do better than font icons and sprite sheets. Wouldn’t it be better if we could just specify the icons we want to use in our SASS directly, and have them inlined when compiled?

With the native SASS compiler there aren’t really any options to extend the functionality, but with the newer Dart SASS compiler, we can specify our own custom functions for use in our SASS code right in our webpack configuration. Those functions could be used to generate SVG data URI’s in the resulting CSS.

When I was developing my updated website, I decided to do just that with Material Design Icons, and take it to the next level by adding rotation and scaling options. This post is about how I accomplished all that.

One of the features on my new website is it now honors your browser’s color scheme preferences using the new prefers-color-scheme media query. With more operating systems adopting dark modes, this is a nice new feature that I hope more website will implement.

I recognize that a responsive color scheme might not be for everyone at this point and not all browsers currently support this media query, so an override switch is also a good idea. Read on for how I implemented this feature.

After almost 7 years it’s time for a change. I now present the rebooted alexomara.com now with a bolder and cleaner interface which respects your preference for light and dark mode using the new CSS prefers-color-scheme feature. There’s even a little toggle switch you can use to switch themes (I prefer dark mode myself).

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.