Skip to main content

react-scripts and npm audit

Written by michael

Running the npx script create-react-app installs the react-scripts module when it does its work, but the various scripts therein often have one or more vulnerabilities in them, according to npm audit. This is a bit distracting, because you would normally never want to see any warnings or errors from an audit, especially when you haven’t even written any code.

People regularly report these problems to the create-react-app developers, but it turns out to be unnecessary in most cases. The developers close most of the reports, with the following explanation.

The npm audit tool runs over all of the installed npm modules that you have, but it really only needs to be run against the code that would run in production, not all of the npm modules. It’s not really a denial-of-service vulnerability, for example, if a module only executes when you occasionally run it during development on your machine. The react-scripts is just such a module of scripts, and it should be excluded from both production dependencies and production audits.

For the first, in your package.json file, move react-scripts from the dependencies section to a new section called devDependencies:

"devDependencies" : {
    "react-scripts" : "4.0.3"
}

Then, when you run your audit, specify the –production option:

npm audit --production

Hopefully, if you’re running a modern version of the modules, your audit should be clean after these changes.

dailygrind, Uncategorized, utilities

Windows Pointer Schemes

Written by michael

As increasing numbers of applications provide the dark mode color scheme that I prefer, I have sometimes found that the standard black pointer caret can become nearly invisible against a dark background. I’ve gone crazy looking for color overrides in those applications with no success, but I recently found a mention somewhere about changing the pointer scheme in Windows to use icons that are more compatible with dark colors.

For every Windows box I have ever used, I have used the default mouse pointer and caret options. It never even occurred to me that there might be other icon sets, called schemes, that you could use instead.

Sure enough, if you open the Mouse Properties dialog in Windows, and select the Pointers tab, you will see a bunch of alternative pointer schemes. Some of these, notably the Windows Black variants, work really well on dark backgrounds. They do this by surrounding the black pointers and carets with an outline of white. When you are over a standard white background, you simply see the the black cursor. But, over a dark background, the white clearly stands out. My problem has been solved!

dailygrind, Uncategorized

Getting Back to React

Written by michael

After a year or so away from my first big React lesson, I decided I wanted to try diving back in again. I took pretty good notes the first time around, and figured I could get back up to speed pretty quick. I was mostly wrong.

It wasn’t React’s fault, though. It was purely a function of a year passing and technology moving forward.

The web hosting where I kept some of my notes got moved to a new server, and something broke the images beyond the common permissions fix. WordPress doesn’t output any helpful debugging info about why it can’t show its images (Devs, you should always output something when you hit internal errors…), so it took me a while to get everything back up and running (URLs and WP subdirs are a bit tricky to sort out, so I cloned the site with Softaculous to a subdir, deleted the original site, cloned the clone back to the original URL, and then deleted the first clone – worked a trick!)

Meanwhile, the new server also meant I had to learn the new DirectAdmin client that replaced the venerable cPanel client. A couple of tickets were needed with my hosting provider to add back settings that had fallen through the cracks during the migration.

Then I had to figure out dumb things – things that the curse of knowledge had made me overlook in my earlier note taking. For example, where I had put the source code. How I started up Visual Studio Code.

The worst though, was getting npm updated and running again. As you can imagine, there were a lot of pretty out of date modules, some so much so that there were very significant problems running the updates. The dependency calculations bogged down into spinning with no progress, and I started getting errors about lock files. I finally had to resort to obliterating my node_modules directory and reinstalling from scratch.

Fortunately, that also took care of the complaints GitHub’s Dependabot, another of the year’s tech introductions, was making about a few of the module versions in my package.json file.

Finally, I’m starting in on a new React course – not because the old one was bad, but because it’s already somewhat out of date with the state of React, for example that some of the lifecycle methods became unsafe, and caused me some problems in my sample app.

It just goes to show in neon lights how very fast software development keeps moving and how you can’t let your attention wander for a minute.

dailygrind, philosophy

Forgetting

Written by michael

It’s amazing how easy it is to forget the things you just learned. After working on my online React class, I had a couple weeks away from it and I could barely remember how to start things, even after taking pretty good notes. Actually, it’s a good lesson to me that I wrote so much down, or I would have nearly needed to start over from scratch.

They say it takes approximately 66 days to form a habit, or repeating something about 50 times. Need to work on this stuff more often.

dailygrind

Setup for Learning React

Written by michael

All these instructions are for Windows 10.

  1. Download and install Visual Studio Code from Microsoft.
  2. Download and install node.js
  3. Download and install git-scm (this will also install git-bash)
  4. I’ll be using Chrome as my browser, so go to the Chrome store and install react developer tools and redux developer tools. Once installed, they will show up under Chrome’s developer tools (ctrl-shift-I).
  5. Set up SSH on Github and your Windows git-bash shell. See this post for instructions.
  6. Run VSC from within the SSH environment inside git-bash. The first time you run it, install the following extensions:
  7. Open the source code management (SCM) mode in VSC (Ctrl-Shift-G) and connect the VSC project to the repo’s clone URL and then select a location for the local repo. I chose to put all my repos under ~\Documents\src\git\heteromeles
  8. To start the Live Server extension, find the HTML file you want it to start serving, right click it, and choose the Open with Live Server options. This will open Chrome and/or a new tab and serve the file on localhost.
  9. Edit your HTML and JS files as needed – every time you save, the changes will automatically mirror live onto the opened tab.
  10. From git-bash shell:
    1. If first time, set up create-react-app from git-bash
      1. npm –version to make sure npm is installed
      2. npm install -g create-react-app to install
    2. Run create-react-app <appname> and the app will be created in directory ~/<appname>
    3. cd ~/<appname> to go to the created app
    4. code . to start up VSC for the app
    5. npm start will then start the app in the browser
dailygrind

Connecting Visual Studio to Github

Written by michael

I learned in the past, that it is always best to connect workspaces to source control, even for experiments and learning projects. Sometimes it’s because you’ve screwed something up terribly and you need to retreat to a last known good; sometimes it’s because you want to continue on a machine that’s different from the one you were working on earlier.

So, before I started learning react/redux (or anything else), I wanted to get my IDE connected up to Github, where I keep my source code. I’ve done this plenty of times on Linux and Mac (which is basically Linux), but never had to do it on Windows. Turns out it is a bit rough, but possible.

I am using Visual Studio Code (VSC) as my IDE for this kind of work for now. That comes out of the box with a git SCM extension, but the extension does not support using SSH AuthN to a remote server like Github. I prefer to use SSH because that’s what I know and use on other OSes. To get that to work with VSC, I first start a git-bash shell from Git for Windows, whose SSH environment is configured following the instructions in a gist from github user bsara. I then simply start the VSC executable from the shell using the command code so it inherits the SSH environment and can work with Github.

Apart from the small annoyance of having to start a shell to start VSC, this seems to work great and I am now happily interacting with my Github account directly from VSC.

dailygrind, git

Learning at O’Reilly

Written by michael

As a very long time member of the ACM, I’ve learned there are a few perks that come with it. The best, in my opinion, is the Learning Center, which provides ACM members with complimentary access to a number of useful resources, including the full content at O’Reilly Learning (formerly, Safari Books).

For the price of an ACM membership (currently $99) you can get access a resource that normally costs 5x that (currently $499).

dailygrind

Viral Motivation

Written by michael

At work, we have transitioned to everyone working from home, both to protect employee health and to comply with the coronavirus quarantine orders currently in effect in California. I work from home a day a week anyway, so this has not been nearly as big a transition for me as for many of my coworkers. I still have a work week just like always, I just get up a little later than normal because I don’t have to commute. Daily life doesn’t seem quite so different to me in the current situation (modulo finding food and paper products…)

Nevertheless, reading so many articles and posts about people taking up new hobbies or getting round to long neglected projects to fill up their now copious spare time brought me round this morning to thinking about reviving my outside-of-work programming habits and learning.

Now feels like a great time to dive into the front end web tech that’s always been my main coding blind spot.

At the same time, I realize that I need to dust off and re-energize the various modern artifacts of a programmer – namely my code repos (GitHub) and my tech blog (this site).

I’ve done a bang up job at work creating and regularly updating similar artifacts at work, so here’s hoping I can do something similar IRL.

dailygrind