Checking to see if an npm package is tree shake-able (is-esm)

Sometimes on a project I need to know if an npm package is tree shake-able. The is-esm utility checks to see if the package contains a distribution with ECMAScript module and outputs.

To run it: `npx is-esm PACKAGE_NAME`

ex: `npx is-esm @angular/core`

Minko Gechev originally posted this method on Twitter. At least that is where I found it. 🙂 I’m posting it here so I know where I can look for this method later.

Journal the Day – April 12, 2020

Blades in the Dark custom map snippet

Whelp, didn’t make it a habit, unless you count seven months between posts.

Work has been pretty heavy since that post. My current client is averaging 50 hours a week of work.

I’m currently working on several projects outside of work in the spare time I have, but also to keep me sane outside of work.

Standing Desktop

I picked up the frame for a sitting/standing desk since I work remotely and find myself sitting far too much. Some days I get in less than 500 steps according to the tracking stuff I use. Far far too few.

When I say a frame, I mean just that. I am in the middle of crafting a desktop for it out of shagbark hickory. I had looked into buying a top with the desk as well as buying a butcher block style top from a big box store, but neither really appealed to me and the price was pretty high for some of the options that had mdf at their core.

Since I enjoy woodworking and have never used rough lumber I decided to create my own desktop. It’s been an adventure. I found an arborist in my area that had just the last year started selling lumber and was lucky that he was willing to open for me just as the first Covid-19 social distancing measures went into place.

I picked up several slabs of 8/4 shagbark hickory and have planed them down, cut them to rough size, and am almost ready to glue them up into the desktop. Right now I am having trouble getting them to join, since I don’t own a jointer. I’m currently waiting for the glue to dry on a jig I hope will work with the tablesaw to give me true and straight edges. We’ll see.

Gaming Maps

I’m also working on a challenging coding project, since it uses technologies I know about but haven’t yet needed to learn myself. It’s a gaming mapping project that I hope to release to the world at some point.

Right now, I am able to take in a high resolution map image, cut it up, and have a user be able to see the map, zoom in and out, and look at markers on it, similar to Google Maps.

The next steps will be to take this prototype and fit it to a back end, so that a gaming group could upload their own map, add markers, notes, and be able to have those notes link to a wiki-like set of pages to manage a campaign.

I haven’t done much back end coding in my career given that I have specialized in UI development. I’ve chosen NestJS as the back end since it is very similar to Angular, I am hoping that this will mean that I have less of a learning curve and more time to just create.

I haven’t chosen a database to store the data yet. I am considering MongoDB or Contentful. Both of which I am not familiar with, so I’m going to need to research what the best option for me is. Since I am going with a Node back end, I’ll eventually need to dig into how to host it. Right now with static data, I can host it here, but once I implement the NestJS back end, I’ll need to host that somewhere else.

Here’s a prototype of what I am working on now with a map of Duskvol from Blades in the Dark. All of the data is hard-coded at the time of this writing. Feel free to click around and see the different marker text and the information about the polygons.

That’s all for now!

Publishing an Angular library with assets

In the current Angular CLI (Angular 8 at the time of this writing) the tooling for libraries is really good except for one area, assets. Unlike when you build a project for production, building a library does not package assets like you might expect.

tl;dr – the boiled down steps

  1. Build the library
    • This article uses the vanilla AngularCLI
  2. Copy the assets to the dist folder of the built project
    • I use npm scripts with pre/post prefixes
  3. Optional – publish as npm package
  4. Update the project to import the assets
  5. Done

Building the Library with Assets

Under the covers of the Angular CLI, library projects uses ng-packagr to bundle up the code for the library for distribution. ng-packagr is almost the same as the packaging that the CLI uses for app projects but it has some crucial differences in how it does it’s packaging, such as it doesn’t bundle in assets such as fonts, images, and scss files.

There are cases where you need this functionality though and if the Angular CLI doesn’t give it to you, what do you do? Right now, you need to post-process the package so that you include the assets.

In a past project I have used CPX for file copy/globbing but it doesn’t work on all systems. (I work on a Pixelbook and I failed to get it working properly.) I know there are many other npm modules that allow for file copying, this was the one that seemed the most stable, however it also doesn’t seem to be maintained currently. Basically, I’d use it again if I needed it but I would look for other options first. ( CPX – )

This isn’t about what tools to use, so for this example I’ve used a simple shell script to illustrate what you need to do in order to package up assets.

No matter what you use to copy the files over, you need to have it as part of your build process. I prefer a stripped down build system that is easily understandable. To do this, I use npm scripts and the ability to use pre and post prefixes on steps to make them easily understood.

   "scripts": {
     // Sample build script
     "build-lib": "ng build lib-with-assets",
     "postbuild-lib": "./"

Including Styles from a Library

To include style paths more cleanly for scss imports, you can take advantage of the stylePreprocessorOptions setting in the Angular CLI. If you are using scss for your styling, this will allow you to do @import statements with just the file name and not the entire path to the dist directory or the node_modules directory if you published as an npm repo.

        "stylePreprocessorOptions": {
          "includePaths": [

If you have published as an npm module, then I don’t believe you will need to do this step and instead can use the ~ at the front of the package name to import, since the CLI knows that SCSS @imports with a tilde come from node_modules.

This is the basics of getting set up and by no means covers every situation. If you have additional information or questions, I would love to get your feedback.

Sample Repository

I created a sample repository as a test bed for exporting assets as part of the library project. You can find it over on GitHub.

References: (Since we stand on the shoulders of giants to see further.)

We all do what we can…

(I wrote this post way back in 2015 but never actually published it. I’m publishing it now even though it could use a few edits.)

I was listening to the Oddfellows Local episode of Jared Axelrod’s Voice of Free Planet X today, and while listening to his voice actors tell the story he had written I was reminded of something I learned long ago, and he touches on in his story.

In Oddfellows Local, the reporter interviews some of the members of the vigilante super group, and also a member of the premier super hero group on Earth. Now, before I lose you with talking about superheroes, for those of you who aren’t into that, it’s the story that actually grabbed me and not the capes and tights.

See, many years ago I was made aware of something that you, dear reader, may already know as well. There are layers of things in this world. We are all people, but some of us are more influential, wealthier, or just luckier than others. (To some extent we make our own luck but that’s not always the case.)

In that, we all deal with our own layer of problems, our own issues. We deal with what we can. In the course of our lives, we move between these layers, usually up, but sometimes down (assuming up is better, but really it’s often just bigger). As a kid, we play on the playground and with our friends, but as we grow, we change how we play. We wouldn’t consider going back to the playground, and if we did, we would be the ones out of place.

Jared’s story highlights that. I don’t know if he did it intentionally, but if he did he did it really well, showing the reader and not telling them. The Oddfellows are doing what they can as costumed vigilantes, sticking up for the people of Clarkville. While the superheroes of the Society of Saviors are protecting the Earth from all sorts of other threats, both on planet and off.

We all deal with what we can, but sometimes can reach higher, if only for a little while.