This article goes over how to set up a Lerna monorepo with Yarn workspaces.

Lerna

Create a new Lerna monorepo with lerna init:

$ npx lerna init

Initialized Lerna files should look like:

$ tree
.
├── lerna.json
├── package.json
└── packages1 directory, 2 files

Optional: To enable independent versioning mode in lerna.json:

Yarn

Enable Yarn workspaces in package.json:

Then add npmClient and useWorkspaces to lerna.json:

Now when you run yarn install, Yarn bootstraps and hoists node modules to the project root directory:

$ yarn

This means that devDependencies shared across packages can be saved to the project root package.json:

$ yarn add --dev eslint -W

Resources

Check out the example repository lerna-template.

This article was originally published on remarkablemark.org on September 18, 2021.

This article goes over how to create a bootable Windows USB stick on macOS.

Requirements

You’ll need a(n):

• USB flash/stick drive with at least 5GB of space
• Apple laptop or computer running macOS
• Windows ISO file (software download)

Create Bootable USB

Write the Windows ISO file to the USB stick with Apple’s Boot Camp…

This article goes over how to generate a SHA-256 hexadecimal hash using Node.js and JavaScript in the browser.

Node.js

To generate a SHA-256 hash in Node.js using crypto:

Usage:

Replit demo:

Browser

To generate a SHA-256 hash in the browser using SubtleCrypto:

Or written in async/await:

Usage:

This article goes over the React useEffect hook lifecycle:

• Mount
• Update
• Unmount

Prerequisites

Import useEffect:

import { useEffect } from 'react';

Mount

Component did mount:

useEffect(() => {
  console.log('mount');
}, []);

Update

Component did update:

useEffect(() => {
  console.log('update');
});

Component did update on data change:

useEffect(() => {
  console.log('update on data change');
}, [data]);

Component will unmount or did update on data change:

useEffect(() => {
  return () => {
    console.log('update on data change or unmount');
  };
}, [data]);

Unmount

Component will unmount:

useEffect(() => {
  return () => {
    console.log('unmount');
  };
}, []);

This article was originally published on remarkablemark.org on August 22, 2021.

This article goes over how to add Redux to a React TypeScript app.

Video

Watch YouTube video:

Demo

CodeSandbox demo:

Prerequisites

Given an app bootstrapped by Create React App:

$ npx create-react-app my-app --template typescript && cd my-app

Install

Install the dependencies:

• @reduxjs/toolkit
• @types/react-redux
• react-redux

With npm:

$ npm install @reduxjs/toolkit @types/react-redux…

I expect my direct reports to be…

• Coachable
• Direct
• Committed

Coachable

Coachability is a key trait I look for in people. It’s a core indicator whether someone’s going to grow slightly or immensely.

Coachable people are receptive to feedback. They understand that feedback is constructive and intended to help them grow…

To achieve clean code, programmers should value:

• Simplicity over complexity
• Clarity over obfuscation
• Being dumb over being clever

Clean code allows others to understand how it works. This improves:

• Readability (shared mental models)
• Maintainability
• Quality (confidence that it does what it’s supposed to do and not cause bugs)

If you’re given a choice between (1) code that’s prematurely optimized but hard to read and (2) code that’s less performant but easier to understand, you should prefer the latter over the former. Developers will thank you.

This article was originally published on remarkablemark.org on May 20, 2021.

Colocating tests is putting your test next to its file.

Why colocate tests? Because colocating provides:

• Better visibility
• Simpler mental models
• Less context switching

Layout

Example of a directory structure containing colocated tests:

.
└── src
    ├── file.js
    └── file.test.js

Example of a directory structure containing non-colocated tests:

.
├── src
│…