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.

Development on a Pixelbook?!?

I’ve started on a strange journey, one I didn’t think was possible before. I don’t even know if it is possible now, though I have started on it. I’m attempting to do all of my development work and teaching Angular on a Pixelbook.

I’m not the first to start this journey, but I haven’t found a lot of coherent documentation about it, so I want to write what I have learned down for those that might go after me.

Relatively recently, using Linux on a Pixelbook got a lot easier. Using linux means that many of the tools that I use (node, npm, the Angular CLI, NX, and others) will just work. The other tools, like an IDE, graphical Git interface, diff tools, and others, I wasn’t so sure of. Turns out, most of them just work too, it’s like working on a Mac a few years ago, before I made my ill fated switch to Windows for a while. (Corner me at a conference or ask me in the comments and I’ll unpack that last sentence about Mac and Windows for you.)

Setting up Linux

It’s a lot easier than it used to be. You essentially just turn it on in your Pixelbook settings. It may work with newer Chromebooks, but I don’t have one of those to test with. The full instructions are here, along with troubleshooting steps:

Don’t forget to occasionally check for Linux updates with sudo apt-get update && sudo apt-get dist-upgrade. I don’t know if there is an automated way to do this, so let me know if anyone finds one.

The flavor of Linux the Pixelbook uses is Debian. So far, anything I have used that supports a Debian install has worked out of the box.

The File System

The files Linux has access to is in a different area than the normal Chrome OS file system. Chrome OS has a nice way of copying files over from one to the other though. So if you download something from your browser it is a simple copy away from being able to be used in your Linux partition.

If you open up the Files folder on Chrome OS, you’ll see a list of files in Chrome OS but also in the left hand nav you will see a Linux Files folder. Dragging and dropping into that file structure will copy over the files into Linux for you.

Linux Terminal

I pinned the Linux terminal to my Shelf, but you can easily get to it by going to the Launcher and the Linux apps folder.

I do wish it had tab support but right now if you want more than one terminal, you have to launch a new window. Makes for a cluttered desktop right now, so check out the Virtual Desktops section below to help minimize it.

Installing Linux Apps

Each Linux app will have a slightly different install process, but I have found that following the instructions for each of them has succeeded. Remember, the flavor of Linux the Pixelbook uses is Debian, which is a pretty common flavor of Linux and thus well supported.

I’ll list the instructions for the tools that I currently use here.


I didn’t document the way to install VSCode when I installed it, but I believe I used the instructions here for the “Debian and Ubuntu based distributions”:

If you are a Linux guru, which I am not, you can also directly download VSCode from the installers page:

The VSCode auto update seems to work fine, but I haven’t used it much since installing Idea. There is an update section on the link listed above, so it it doesn’t update properly you should check there.

Launch VSCode (two ways):

  • terminal: just type code into the terminal
  • Launcher: Go to the “Linux apps” folder and click on the icon

IntelliJ Idea

It took me a while to get Idea running, mainly due to conflicting/old documentation on the Pixelbook Linux container. Here is what I finally did. If you have a streamlined method for installing it, please let me know in the comments. I’ll update it here and give you credit.

  1. Download the tar.gz:
  2. Copy the tar.gz into the Linux files folder. I made a special “Installers” folder just for packages like these.
  3. Follow the Linux instructions for a Standalone Install on this page:
    1. Summary: sudo tar -xzf ideaIU.tar.gz -C /opt
    2. Do not extract the tarball over an existing installation to avoid conflicts. Always extract it to a clean directory.
  4. I created an alias in my .bash_aliases so I could just type idea in the terminal to run it.

Caveat: Updating Idea

I haven’t yet successfully updated my version of Idea using the automatic update process. I’ll update this post when I successfully update.

I suspect that doing the install steps with the new tar.gz version would work fine, but I’m going to try and keep searching for something less manual.

Launch Idea (two ways):

  • terminal:
  • Launcher: Go to the “Linux apps” folder and click on the penguin icon with “IntelliJ Idea…”

Beyond Compare (file diff tool that I cannot rave enough about)

I used the Terminal Install instructions for Debian here, it was super simple:

Launch Beyond Compare (two ways):

  • terminal: bcompare
  • Launcher: Go to the “Linux apps” folder and click on it’s icon


Nope! No Linux version. I use both Idea’s and VSCode’s built in Git tools and the command line.

I hear GitKraken is good, but I have yet to try it.

The “Shelf”

I’ve made my life easier by pinning my most used apps to the Chrome OS Shelf. It’s a simple thing so I’m not going belabor the point. Just two finger click on the app’s icon and select “Pin to shelf”.

My App is Super Tiny and Unusable! Help!

Apps on the Pixelbook don’t always know how to display themselves. It took me a month to find out the best way to run applications so that the menus weren’t super small or had weird layouts. Turns out the solution was simple: Use High Density/Use Low Density.

Before you launch an app that you are having issues with, do a two finger click on it’s launch icon. This only shows up when the icon is in the shelf, not on the icons in the Launcher! Which is why it took me forever (in development time) to find it. The menu that comes up should have an option that says Use low density. Selecting this and then launching the app will tell the app to use it’s low screen density settings, and everything should now look normal.

If you ever need to go back, just do the same two finger click and select Use high density. You’ll be back to the default app view. I have not found any apps, so far, that were not fixed by selecting the low density setting.

Launching apps from the terminal will often launch them in high density mode. If you two finger tap on the icon in the shelf, you can relaunch it in low density mode.

We’ve got our apps installed and now they are readable/usable. So far, so good!

Virtual Desktops

I have it already/I don’t have it!

In the last month or so, the Chrome OS team rolled out Virtual Desktops! Unfortunately, it may not be automatically turned on for you. To see if it is, you can click the Overview key ( []|| ). In the upper right corner of the screen you should see a button + New Desk. If not, then you can do the following:

  1. Make sure your OS is updated
    1. Check again after the update
    2. If you still don’t see the button, continue
  2. Open Chrome
  3. Enter chrome://flags into the URL
  4. You should see under the Experiments Enable Virtual Desks
    1. Enable it via the dropdown
  5. Restart your machine

After that, you should see the new button and can add new virtual desktops!

Switching Between

There aren’t any keyboard, or worse yet, trackpad shortcuts to switch between desktops right now. The Chrome OS developers do have it listed as something to be added, so hopefully soon.

In the mean time, to switch between desktops there are a few things you can do. These are in order of how often I use them.

  • Swipe up with four fingers to bring up the Overview and click on the desktop you want. I list this first because I use it most out of habit, but the next one is more efficient.
  • Click on the app in the Shelf
    • This one is usually the most efficient for me, however if I have multiples of the same app open on different desktops, then it isn’t and I go back to the swipe gesture.
  • alt-tab – This will switch between app windows and switches desktops as a side effect. I discovered this by accident today and is as close to a shortcut to switching desktops as I have found so far.
  • Hit the Overview ( []|| ) button and click on the desktop you want.

Other Resources

I’ll post other resources as I find them here. I found that googling “X for Linux” and “X linux installer” got me much of the way there.

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.)

Body and Mind Hacking (An experience with physical therapy and conferences.)

ng-conf 2015 logoSo recently I went to the excellent ng-conf in Salt Lake City, Utah. Going to conferences has always been something that I have enjoyed to one degree or another, and ng-conf was no different. The people have a passion for what they do, and how they do it. Except for one person, which I will relate later.

Going to ng-conf opened my eyes, again, as to why I am a developer and why I love what I do. Sometimes what is needed to take a look at yourself and your condition is to do something different for a while, and the conference did that for me. It allowed me to think about the work I am doing and see the architecture I develop through the eyes of the presenters and the people I met at the conference. This fresh perspective is something I will take back with me to my team, and I sincerely hope that I can give them at least a fraction of the energy and insight I gained from going.

Meeting other developers and talking with them in a positive manner is a great way to learn new things, introspect the things you are doing, and to come up with better solutions for things that have been pain points in the past. Doing this is similar to my experiences with physical therapy that I have had recently. (See that segue there? As smooth and soft as a gravel driveway.)

I’ve had back pain for years, many people do. You wouldn’t see commercials about it, billboards, internet ads, and all manner of snake oil offering ways to cure it if it wasn’t a big problem today (at least in the United States). I’ve lived with it, done some exercises, gone to a gym and hired a physical trainer for a while to see if I could solve it. Inevitably, it comes back, and recently the pain has been one that has been more localized than what I was used to, at times preventing me from standing up out of a chair or picking up things from the floor. Sounds bad, right? You would think I was eighty, but I’m not, not for a while yet anyway.

The situation was intollerable, and I want it gone. (I’m not out of complete pain yet, but I am working on it.) So I did the sensible thing, I talked with my doctor. I had talked with my doctor before about the pain, so he knew it was a recurring issue, and he listened as I described the slightly newer kind of pain I was in. He gave me some possible areas the pain could be coming from, and some of the options I had in treatment. I love my doctor, because he’s both a person, and a knowledgeable medical practitioner, and has intelligent and reasonable discussions with me about my care.

So after talking it over with him, we both knew I didn’t want something more invasive like surgery, or even imaging, which I had done a few years back. Physical therapy sounded the best, and the main reason I chose it is the same reason I enjoy going to conferences. It gives me perspective on myself, shows me things that are part of me yet I am not aware of myself, the invisible things that you don’t see without someone else holding up a mirror and showing them to you.

I wanted physical therapy because I wanted to know what was wrong, but more importantly, have the knowledge to how I could continue to improve and prevent a relapse like had happened before. To get a set of exercises and life changes that could make my pain go away. (My daughter likes to jump up and hug me, which I love, but at the wrong time can murder my back.)

You remember that guy I mentioned earlier? The one that wasn’t passionate about being at ng-conf? I said I would talk about him later, now is later. During one of the first parts of the first day of the conference, I sat down in the audience to listen to the talks. I was enjoying them, listening to them with an open mind and thinking of how at least the concepts of the code being talked about could help my own work, even if the library or code couldn’t be used directly. Inevitably, the man would scoff, or shake his head, or utter a ‘yeah right’ as a point would come up or some new innovation was presented.

It was distracting, but it was even more concerning for me. After all, this man had come to this conference, I assume willingly, and was here to participate right? I have seen developers, people, like him before. I can only assume what his life was like up until I met him, but to me it seemed he was usually under pressure, dealt with timelines, unreasonable expectations, or broken promises. I felt sorry for him, and I also realized, that I have been like him at points in my past. Points I didn’t realize at the time that I had the power within me to change.

Coming back to my physical therapy. Up until I spoke with my doctor, I dealt with my pain. I said to myself that going to the doctor was too much trouble, hassle, he couldn’t do any thing for me, all manner of fleeting excuses that was me telling myself that I could just live with it and be lazy by not having to leave the house on an errand. I was like that man, complaining about the pain, but not actually doing anything about it.

Eventually, the incidents of pain became too much, and I realized that treating the problem now was going to be a lot easier than treating it when I was eighty. Not to mention that I would have many years of pain if I waited that long to treat it. I want my kids to be able to jump on me, and to be a superhero for them. It was that decision that changed me from the man complaining about things, into someone who was taking control over their own body.

I love hacking. I’m a programmer, woodworker, writer, electronics enthusiast, you name it. If it has a puzzle involved, I am all for diving in to solve it.

I decided, and this is important, I had the presence of mind to decide to look at my physical therapy as a puzzle. My back pain is something that I can solve. I need help, information, on how to hack my back, and so I looked for good resources, my doctor, and my physical therapist. That mindset has made a world of difference. I am hacking my back, and I’m getting results.

Where am I going with this rambling tale? I’m sure that I haven’t been entirely clear on my point, in fact, there are several points inside my narrative, so let me see if I can tease them out for you.

  • If something pains you, do something about it. Gather information you need, and solve that puzzle.
  • Be self-aware. If you don’t look at yourself, you won’t see places you can make change, only feel the pain of the things that are wrong.
  • Get a mirror to help you see. If something is paining you, code, your body, your relationships, anything, then find something or someone to help you get a perspective on it.
  • We only live the one life we have, so why suffer, in any way, to just get through it. Make it the best life you can live. Will you fail at things? Sure. There’s information there, learn from it, and then use that to go at it again.
  • Be critical, but not closed minded. Look at new things with a critical eye and you will always find some grain of knowledge that you can tease out of it that can help you on your journey.

This was written just after the closing of ng-conf 2015. I’m riding a pretty good high of energy and excitement from the things that I learned over the last two days. I’ve also got a head swimming with thoughts and ideas, which accounts for some of the excited ramble above. I hope to organize my thoughts more over the next few days, but I also hope not to lose any of the excitement, the passion, that I have absorbed.

If I do, then you can expect more articles from me here, and I will make the effort to have them be a more focused version of my enthusiasm.

%d bloggers like this: