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 Assistant:

1. Insert the USB stick to your computer or laptop
2. Launch Boot Camp Assistant from Applications > Utilities or Spotlight search
3. Select Create a Windows 10 or later install disk

4. Ensure the Windows ISO image and destination USB drive are correct before clicking Continue

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 react-redux

Or with Yarn:

$ yarn add @reduxjs/toolkit @types/react-redux react-redux

Slice

Create the slice:

Store

Create the store:

Provider

Make the store available to all nested components with <Provider>:

Component

Create the component:

The UI is integrated with Redux with hooks.

Not typing the callback function in useSelector will throw…

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. Since my job is to assess their actions, behaviors, and work in an objective manner, they understand that I’m trying to point out their strengths and weaknesses. As as result, they take my feedback with an open mind and use it to get better.

Direct

I want my directs to be…

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
│   └── file.js
└── test
    └── file.test.js

Import

Colocated tests simplifies import paths:

// src/file.test.js
const file = require('./file');

Compared to non-colocation:

// test/file.test.js
const file = require('../test/file');

For small projects, non-colocation is manageable. But for larger projects, the import paths can get unwieldly:

const file = require('../../../test/dir/subdir/file');

Refactor

For colocated tests…

YouTube:

CodeSandbox:

Motivation

Why use Context to handle React state? The same reason you use Redux to manage your application store. If your components talk to one another and lifting state becomes cumbersome, then Context is a native way to deal with your application state.

Prerequisites

We will be refactoring <App>—which uses local state—to use Context:

As you can see, there’s a counter with 2 buttons that increments or decrements the count.

Provider

Create <Provider> and set prop value to 0:

Render <Provider> as the top-level component in index.js:

Get the Provider value with useContext in <App>:

useReducer

…