For convenience, many npm based development tools instruct users to install globally. It makes sense if the tool is used to initiate/create a project, but many such modules are also used with an existing projects. These should installed as local (project) dependencies, which have several advantages:

  • The version in use is managed alongside other dependencies, keeping the team on the same page. This is especially important for build tools, used to produce a release. Following this practice could improve the reproducibility of builds, which in turn makes deployment and troubleshooting easier and more reliable.
  • The number of steps needed for…

Don’t wait—be proactive about personal security or likely regret it later.

As an ever increasing share of our lives are becoming digital the risk to our personal data is growing. The sites and applications we use do their best (hopefully) to secure our data, but at least part of the burden lies on us. One, if not the most, important part of which is our login credentials.

Apart from 2-factor authentication (which relatively few sites support) the best way I know to meet this burden is to use a password manager. Out of concern I posted about this and found…


In React helper-ordered components 💪🏼 I wrote about using higher-order components to aid development of React apps. Two examples were covered: logging props and renders. Since publishing that post I have put together these and a few more utilities into an npm module, published under the name rhocs.

At present there are 4 utilities. Each of them logs something whenever the wrapped components props change. Note that not every re-render will cause a log event—internal state changes will cause the component to re-render but does not cause the component to receive new props.

changedProps

Logs the props of a component that…


Higher-order components are great. All of the benefits of mixins, without the headaches. I also find them helpful for quick and dirty debugging, troubleshooting, and performance analysis. Let’s explore a few examples of using helper-order components to make your job a little easier.

A perfect match with stateless functions 💍

Higher-order components are particularly helpful for quickly checking behavior of components that are stateless functions, because they can be easily added without changing the function itself (like changing to a class).

Say you have a CoolButton:

import React from “react”:
import { Button } from “somewhere”;
const CoolButton = props => (
<Button cool="true" {...props} />
);

Update 2021–06–24

A new version of this library is available. The method previously used to detect print state was deprecated, so it now uses beforeprint and afterprint events on window, which appears to work well.

The latest version is intended to be used as a hook:

const Component = (props) => {
const printing = useDetectPrint();
const color = printing ? "blue" : "red";
...
};

For more details please refer to the repository and examples therein.

Original Article

The standard advice to detect and handle print formatting for your web app is to use media queries. This works (and should be used) for…


How to create builds targeting multiple environments

Update: create-react-app 1.0.0 added built-in support for configuration files targeting the three pre-defined environments (development, test, and production), and 1.1.0 additionally adds support for variable expansion. I’ve added a section to the end of this article (see: Built-in support) summarizing the changes and limitations.

If you’re using an older version of react-scripts, have not used environment configuration yet, or have more than three environments to build for, you may wish to read the entire article.

Environment variables

React imports environment variables that are defined in a .env file at the root of the project. Skip to Environment Configuration if you’re already familiar…


Like most adult learners of Japanese I started with books aimed at adult learners, which are filled with translations of Japanese to English. They did a great job but aren’t meant to fill in many nuances of the actual meaning of the translated words. To fill in these nuances, as early as possible I started using native resources (or close to native resources) to look up and learn. I want to share a few of those resources with you.

例解小学国語辞典第五版

This iPhone app doesn’t have the best design, but does provide short, simple, and easy to understand definitions of Japanese words…


It’s a conjunction used to express a chronological sequence of events:

お風呂に入った。それから、寝た。
I took a bath. Then I went to bed.

The order of events is inferred by the order they appear. I took a bath. Then I went to bed. As such “then”, “and then,” or “after that” are common translations. As is so often the case, however, the translation fails to capture the true and full meaning.

Consider the following example conversation from 中級へのとびら (page 9) in which そらから is used in the sense of “additionally” and does not necessarily imply sequential order:

モニカ:そうですか。昔話はどんな内容が多いんですか。
森田:その地方の名所や地名や名物に関係ある話が多いですね。それから伝統的な行事とかも。

Monica: I see…


I’m using create-react-app lately, in an effort to simplify. Until now I’ve been using custom npm scripts, but it’s getting complicated. Create-react-app is very limited, but embracing constraints can be liberating so I decided to give it a try. I encourage you to try it too, and to stick with it as long as possible.

Sometimes you really do want to do something unsupported. You could eject and thus have total control, but I suggest you avoid this unless absolutely necessary. Create-react-app will continue to improve and you lose the ability to upgrade if you eject. There is also the…


Today I made the mistake of saying「性が短い」. Big deal? Don’t do this unless you want to be laughed at 😂😂😂.

The correct adjective is 低い as in 性が低い. Both adjectives mean short, but only the 低い applies to height. I made this mistake because 短い is the first word I learned for ‘short.’ Once you’ve made an association it’s quite difficult to break it a sentence spoken on-the-fly.

That’s one trouble with learning a language by translating to your mother tongue, as most adults do. The overlap in meaning is often imperfect, but we don’t know where the border is…

Drew Goodwin

The audience is us.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store