Lern and Yarn
Lerna and Yarn

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
└── packages
1 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 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
Create a Windows 10 or later install disk with Boot Camp Assistant

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:


React

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.

Photo by Nubelson Fernandes on Unsplash

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:

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…


Man spotting a barbell back squat
Photo by Alora Griffiths on Unsplash

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…


Photo by Chris Ried on Unsplash

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.


Git branch in code editor
Photo by Yancy Min on Unsplash

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


YouTube:

CodeSandbox:

Class

Rendering initial state:

Updating state:

Class state property must be an object since setState takes an object of state variables to update.

Function

Rendering initial state:

Updating state:

remarkablemark

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