Andris Sīlis andris-silis

Electron Apps Causing System-Wide Lag on Tahoe

This script detects apps with not yet updated versions of Electron.

Repo: https://github.com/tkafka/detect-electron-apps-on-mac

See:

Use Raspberry Pi and Pi Cam for Prusa Connect

Made this for my PRUSA MINI with a Raspberry Pi Zero 2W and a Raspi Cam v1.3

Based on the great instructions from Nunos and Joltcans

Instructions

macOS Internals

Understand your Mac and iPhone more deeply by tracing the evolution of Mac OS X from prelease to Swift. John Siracusa delivers the details.

Starting Points

How to use this gist

You've got two main options:

⚠️ Warning: this document is out of date.

For the most recent webpack5 instructions see MIGRATION.md.

Storybook experimental Webpack 5 support

Storybook 6.2 includes experimental Webpack 5 support. Webpack 5 brings a variety of performance improvements, as well as exciting new features like module federation. Here's a quick guide to get you going.

Intro

Advanced memoization and effects in React

Memoization is a somewhat fraught topic in the React world, meaning that it's easy to go wrong with it, for example, by [making memo() do nothing][memo-pitfall] by passing in children to a component. The general advice is to avoid memoization until the profiler tells you to optimize, but not all use cases are general, and even in the general use case you can find tricky nuances.

Discussing this topic requires some groundwork about the technical terms, and I'm placing these in once place so that it's easy to skim and skip over:

Memoization means caching the output based on the input; in the case of functions, it means caching the return value based on the arguments.
Values and references are unfortunately overloaded terms that can refer to the low-level implementation details of assignments in a language like C++, for example, or to memory

React recently introduced an experimental profiler API. This page gives instructions on how to use this API in a production release of your app.

Table of Contents

Profiling in production
- Create React App
- Webpack 4

Profiling in production

React DOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small additional overhead it is opt-in for production mode. This gist explains how to opt-in.


	// when T is any\|unknown, Y is returned, otherwise N
	type IsAnyUnknown<T, Y, N> = unknown extends T ? Y : N;

	// when T is never, Y is returned, otherwise N
	type IsNever<T, Y = true, N = false> = [T] extends [never] ? Y : N;

	// when T is a tuple, Y is returned, otherwise N
	// valid tuples = [string], [string, boolean],
	// invalid tuples = [], string[], (string \| number)[]

	PLEASE CHECK THIS REPO WITH THE EXAMPLES THAT YOU CAN RUN:
	https://github.com/apieceofbart/async-testing-with-jest-fake-timers-and-promises

	// Let's say you have a function that does some async operation inside setTimeout (think of polling for data)

	function runInterval(callback, interval = 1000) {
	setInterval(async () => {
	const results = await Promise.resolve(42) // this might fetch some data from server
	callback(results)
	}, interval)

	const timing = store => next => action => {
	performance.mark(`${action.type}_start`);
	let result = next(action);
	performance.mark(`${action.type}_end`);
	performance.measure(
	`${action.type}`,
	`${action.type}_start`,
	`${action.type}_end`
	);
	return result;

	function increment(props, state) {
	return {
	value: state.value + props.step,
	};
	}

	function decrement(props, state) {
	return {
	value: state.value - props.step,
	};