drumnickydrum

# Install pyenv, to manage Python versions
brew update
brew install pyenv
echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zshrc
echo 'command -v pyenv >/dev/null || export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(pyenv init -)"' >> ~/.zshrc

# Install the supported version of Python, as defined in .python-version
pyenv install

drumnickydrum

// Andrew Burgess, YouTube
// https://www.youtube.com/watch?v=Yvhad4zdPqI

export class Deferred<T, E = unknown> {
  promise: Promise<T>;
  resolve: (value: T) => void = () => null;
  reject: (reason?: E) => void = () => null;
  
  constructor() {
    this.promise = new Promise({resolve, reject} => {

drumnickydrum

From Reactive Patterns for RxJS with Angular Chapter 7: Transforming Streams

Operator	Use Case
concatMap	If the order is important and you need to process operations in sequence while waiting for completion.
mergeMap	If the order is not important and you need to process operations in parallel to enhance performance.
switchMap	If you need to put a cancellation logic to release resources and take always the most recent information.
exhaustMap	To ignore new observables while the current one is still ongoing.

drumnickydrum

https://v12.angular.io/guide/comparing-observables#cheat-sheet

OPERATION	OBSERVABLE	PROMISE
Creation	new Observable((observer) => { observer.next(123); });	new Promise((resolve, reject) => { resolve(123); });
Transform	obs.pipe(map((value) => value * 2));	promise.then((value) => value * 2);
Subscribe	sub = obs.subscribe((value) => { console.log(value) });	promise.then((value) => { console.log(value); });
Unsubscribe	sub.unsubscribe();	Implied by promise resolution.

drumnickydrum

Angular Docs: Rx Library | Operators

import { of } from 'rxjs';
import { filter, map } from 'rxjs/operators';

const squareOdd = of(1, 2, 3, 4, 5)
  .pipe(
    filter(n => n % 2 !== 0),
 map(n => n * n)

drumnickydrum

// https://beta.reactjs.org/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback

// in the function body
const itemsRef = useRef(null);

function getMap() {
  if (!itemsRef.current) {
    // Initialize the Map on first usage.
    itemsRef.current = new Map();
  }

drumnickydrum

https://beta.reactjs.org/learn/passing-data-deeply-with-context#before-you-use-context

Before you use context

Context is very tempting to use! However, this also means it’s too easy to overuse it. Just because you need to pass some props several levels deep doesn’t mean you should put that information into context.

Here’s a few alternatives you should consider before using context:

1. Start by passing props. If your components are not trivial, it’s not unusual to pass a dozen props down through a dozen components. It may feel like a slog, but it makes it very clear which components use which data! The person maintaining your code will be glad you’ve made the data flow explicit with props.
2. Extract components and pass JSX as children to them. If you pass some data through many layers of intermediate components that don’t use that data (and only pass it further down), this often means that you forgot to extract some components along the way. For example, maybe you pass data props like `posts

drumnickydrum

https://beta.reactjs.org/learn/rendering-lists#rules-of-keys

Rules of keys

• Keys must be unique among siblings. However, it’s okay to use the same keys for JSX nodes in different arrays.
• Keys must not change or that defeats their purpose! Don’t generate them while rendering.

Pitfall

You might be tempted to use an item’s index in the array as its key. In fact, that’s what React will use if you don’t specify a key at all. But the order in which you render items will change over time if an item is inserted, deleted, or if the array gets reordered. Index as a key often leads to subtle and confusing bugs.

Similarly, do not generate keys on the fly, e.g. with key={Math.random()}. This will cause keys to never match up between renders, leading to all your components and DOM being recreated every time. Not only is this slow, but it will also lose any user input inside the list items. Instead, use a stable ID based on the data.

drumnickydrum

https://beta.reactjs.org/learn/your-first-component#nesting-and-organizing-components

Components can render other components, but you must never nest their definitions:

export default function Gallery() {
  // 🔴 Never define a component inside another component!
  function Profile() {
    // ...
  }
 // ...

drumnickydrum

https://beta.reactjs.org/learn/editor-setup#:~:text=If%20your%20ESLint,your%20continuous%20integration.

If your ESLint preset has formatting rules, they may conflict with Prettier. We recommend to disable all formatting rules in your ESLint preset using eslint-config-prettier so that ESLint is only used for catching logical mistakes. If you want to enforce that files are formatted before a pull request is merged, use prettier --check for your continuous integration.