Digging into CSS variables at runtime

I’ve had a need to be able to see how multiple CSS variables are computed at runtime. I’m dealing with interactions between SCSS and CSS variables so I needed to know what was happening. There are a few ways to do this in Chrome Dev Tools.

One way is in the Styles inspector, you can see the various definitions of the variable as values are assigned to it.

Another way is using the Computed inspector with the Show All checkbox checked. This will show all of the variables.

Both methods can use the Filter box to narrow down what you are looking at.

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: https://support.google.com/pixelbook/answer/9031351?hl=en&ref_topic=9146794

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”: https://code.visualstudio.com/docs/setup/linux#_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: https://code.visualstudio.com/download

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: https://www.jetbrains.com/idea/download/#section=linux
  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: https://www.jetbrains.com/help/idea/installation-guide.html
    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: https://www.scootersoftware.com/download.php?zz=kb_linux_install

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.

On a positive note…

Reviewing the last several posts, it would appear that for a few months that I have been in the doldrums of despair. While that is partly true, it is not where I have spent the majority of my time.

At work, I’ve been working on several projects dealing with online video, digital publishing, and helping out a team re-architecting several systems within a client’s structure. In other words, work has me busy and it’s been the good kind of interesting.

If you’ve been paying attention to the weather in the mid-western United States, then you can guess that I have been mostly indoors during the record cold and snows this year. It’s put my woodworking, and anything in the garage on hold, almost everything.

Earlier I had a picture of a cat resting in the partly assembled shelves of a bookcase I build last year. That cat, Angel, is kind of the neighborhood cat, and since her original owners didn’t take her in anymore, we’ve had her wintering in the garage. She’s quite happy there, but a little stir crazy like all of us since she can’t go outside. She’s even gotten into the house a few times, and while our dog likes her, the cats in the house, one of which is a daughter of her’s, definitely do not like sharing the house with the newcomer.

I’ve been working on a talk about Grunt, a task running utility that I use at work to reduce the redundant things I do (building, running tests on code, and making deployments). I’ve applied to give a talk at Chicago Code Camp in a few months, and plan to give the talk before then to the people at work.

I was planning on going to the Game Developers Conference (GDC) this year, but that doesn’t seem to be in the cards given the current focus of projects at work. Though I should be seeing Jim Van Verth next month, and he will be speaking there. He is wicked smart, and now works at Google. Sometimes I hope by being in the room with him that I get better at my own math skills.

So until it warms up outside, I plan on continuing the inside hobbies. Oh, I’ve also played far to many games while stuck inside this winter, finishing Batman Arkham Asylum, Arkham City, Tomb Raider, and playing many levels of Orcs Must Die 2 with Erin (my wife). When it warms up, the workshop will be aired out, and I can continue on the secret project. Until then, I am endeavoring to not distract myself from writing and editing the writing I have done. It’s a losing battle right now, but I hope for at least a Pyrrhic victory over my procrastination.

Erin hasn’t seen the Avengers movie yet, and I am making sure that she is fixing that gap in her knowledge now. So until next time, stay warm.

Life, it’s never dull.

[Warning: This is an update post, and may ramble a bit. Carry on!]

Things at the tail end of this year have certainly been interesting. Interesting times indeed, in all of the senses of the word.

You’ve read hear about some of the things that have gone on, and if you haven’t I invite you to take a look. I can wait.

Back? Good.

In addition to family health issues, building a deck, participating in HoNoToGroABeMo, and the normal things like work, raising kids, etc. I’ve been pretty busy. I’ve been working on my Secret Project, though much less of that lately. I’ve built a 3D printer, the PrintrBot Simple, and it’s printing nicely now. I’ve also been researching Machine Learning and Adaptive Bitrate Streaming, trying to see how the former can work with and for the latter.

Over this last week, things continued to be interesting.

On Monday, I was told that my new MacBook Pro had arrived and on Tuesday I had it in my hot little hands. I’ve been working with it and my Windows desktop off and on since then. I will have a post soon about the reasons why I switched to a Mac from Windows, and how my switch has gone so far. A teaser: It’s going pretty well, with the normal bumps of getting used to the different places for the things I normally use.

Tuesday night, I found a fairly heavy package sitting on the kitchen counter when I got home. I have been expecting my Kickstarter order of my FATE Core and FATE Accelerated books (along with a few others) to come in soon, but this package was far too heavy and large for a few books. What could it be?

To my great surprise, I found that the 3D printer parts for the Eventorbot had arrived! It had been over a year since I backed that Kickstarter, and given that the creator had disappeared for nearly three months, I had resigned myself to never seeing it. The creator had a bout of depression, and in my opinion, was overwhelmed to an extent that he stopped communicating. Which unfortunately made the problem worse.

So now I have parts for a second printer. So what will I do with it?

Well, I’ve written a book on 3D printing, I enjoy learning the technology, so I’m diving into it deeper by putting out a 3D printing show. My friend and former co-producer on The Game Master Show, will be joining me as I delve into the current events of the 3D printing industry, and tackle subjects both beginners and experts of the subjects can learn from.

Is that all? Nope!

Tuesday evening, Erin called me with news about her father. He’s doing much better, still not great, but he’s sitting up, eating, and has a positive attitude. The ICU nurse let Erin sneak the girls in to visit, and he really perked up when he saw them, vowing to get better and get out of the hospital so that he could be with them more.

So after a very interesting several months, more good things than bad are starting to happen. I’d like to take credit for planning it, for navigating my way through the storm, but I can’t. I tried my best to make my own luck, but it wasn’t all me. It was a combination of people, of supporters, of genuine luck (that’s what you call it when you can’t pin down the butterfly that caused the events).

So the light is shining. The deck is nearly done. My beard does itch (go donate!). It’s a good time right now, just in time for Thanksgiving and Christmas, and the start of new year just after.

Life. It’s never dull unless you let it be.

%d bloggers like this: