React app using create-react-app: webpack and CSS opacity 1% issue

This seems like such an obscure and weirdly random issue, but I’ve come across this issue 3 times now in the past few years.

I’m working on my React frontend app for Sudoku puzzles (which is related to many other past personal projects, which I’ve posted about here).

I have a nested set of grids representing the cells of the puzzle. To support ‘pencil marks’ when working on solving a puzzle, each cell has an overlaid 3×3 grid that displays the grid of current pencil marks. To display this I’m using an opacity of 40% to display them slightly greyed out. See the top left cell here with opacity:40%

Running locally this works as expected. When built and deployed and loaded from a remote server however, the logic for clicking and entering pencil marks works exactly the same, but nothing is displaying in the grid – here I’ve entered a pencil mark of 1 in row 2, col 1:

The HTML clearly shows a value of 1 but nothing is being displayed. If you look at the CSS on the right you’ll see opacity:1%, which is why the value is not visible, but that’s a difficult difference to find when comparing local vs deployed.

This is a known issue with create-react-app based React apps and a specific webpack plugin that optimizes CSS, discussed here.

Instead of using a % value for the opacity, change it to a decimal fraction of 1 instead, so instead of 40% use 0.4.

Jest Mocks with ES Modules

Jest’s support for mocks with CommonJS modules works great, they’re easy to use and it works great, as per the docs.

With ES Modules on the other hand, the docs are vague, and after spending several hours trying to get them to work with code I needed to test and not having any success, I spent a few more hours getting it to work with even the simplest example code.

This current issue describes multiple approaches which others have had varying success with, but there’s one tip mentioned that I can confirm is key to getting the mocks to work with ES modules and this is currently not mentioned in the docs (at least when I last looked) – you must await the import for the module you are mocking. This needs to be combined with the following:

  1. jest.unstable_mockModule() need to be called at the top level, and must be before the import for the module you are mocking
  2. You must await the import

To explain the last point, you must use this:

const { example2WithModule } = await import(‘./example.js’);

and not this:

import { example2WithModule } from ‘./example.js’;

Here’s an example of my working usage of jest.unstable_mockModule():

jest.unstable_mockModule('./example-module.js', () => ({
    exampleFunctionFromModule: jest.fn(
        () => {
            return 'mocked return!';
        }
    )
}));

Installing ArcaOS (OS/2) on modern PC hardware (Asus X570 mobo with a Ryzen 5 CPU) – booting and installing from USB flashdrive

My AMD Ryzen 5 PC is hanging when booting the ArcaOS installer from a USB DVD drive, so I’ve moved on to trying a bootable USB flash instead. I’m following the steps here.

The install guide says to use:

\dfsanwin.exe -q run aosboot.dfs

… to create the USB, but this is prompting me to write to disk 1 which is my Windows 10 SSD. Dis 4 is showing up as my USB stick, so I ran it with

\dfsanwin.exe run aosboot.dfs 4

After initializing the USB the installer tells you to copy the .iso to the ARC-ISO dir:

Eject stick, reinsert, copy ArcaOS ISO to the ARCA_ISO directory on the stick as 'ARCAINST.ISO' to boot from it

Note that the .iso I have from my download is named ArcaOS-5.0.7.iso, so after copying it to the ARCA_ISO dir I also renamed is to ARCAINST.ISO to match the instructions.

Now I’m going for the reboot.

… and it wouldn’t boot. I couldn’t work out why it wouldn’t boot from the stick, I think I tried creating a couple more times with different USB sticks but every time the same issue, the PC just wouldn’t see the stick and boot from it.

(Thanks to https://spongebob.gavinr.com/ for the SpongeBob Time Card generator!)

At this point I gave up and a few months passed before I decided to look more into why it wouldn’t boot. I know this PC will boot from a USB because that’s how I installed Windows 10 on it in the first place.

First I got side-tracked reading the FAQs and discussions about ArcaOS support for USB2.0 standards compliant controllers, and that attempting to use USB3.0/3.1 controllers and ports may have varied results. My Ryzen PC has a Asus X570 board with a mix of 3.0 and 3.1 USB ports. At one point I got it to boot from an ISO burned to a CDROM, but then it would hang on the installer where the graphical installer was loaded, so I suspected it was the USB3.0 lack of support.

Next I started reading more about how to configure the boot menu in the Asus BIOS and troubleshoot boot issues from USB devices. In short, the recommendation were to change the following in the BIOS settings:

  • disable Secure Boot
  • disable Fast Boot
  • change UEFI boot support to legacy spport

I couldn’t find how to disable Secure Boot since I think it’s required by Windows 10 that I have on another SSD, but this combination of options allowed a successful boot from the USB stick prepared earlier with the ArcaOS installer on it:

Successful boot of the installer!

Yes, graphical installer!

I bought and installed a cheap 1TB SATA SSD specifically for this install, since I have Windows 10 on the m2 SSDs. I partitioned a 40GB partition for the ArcaOS install:

I know the major selling point of ArcaOS is driver support for modern hardware, but it was eye opening to see this is action, detecting the Ethernet support on the motherboard and selecting a driver automatically:

Success! ArcaOS installed directly on modern hardware!

For those interested, here’s a quick summary of my hardware:

  • Asus X570 mobo with Ryzen 5 cpu
  • 32GB RAM
  • installed to a 40GB partition on a SATA SSD (there are other m2 SSDs on the mobo already with Windows 10)
  • Nvidia 3060 gpu

That’s some pretty hefty hardware for an operating system who’s last release/update was 21 years ago!

Installing a mouse driver in DOS 6.22

DOS didn’t originally come with mouse drivers. mouse.com or similarly came on a disk with your Microsoft PS/2 mouse or similar.

If you’re looking for a current mouse driver for DOS on old PCs or running in a VM, I just found an open source project CuteMouse recommended and it works great with DOS 6.22 running under UTM/QEMU