createElement function

Development/HTML/CSS.md

@@ -973,6 +973,7 @@ Examples:
 ## Pseudo classes
 
 input:not([type="radio"])
+h1[data-testid="jest-test-product-name"]
 
 :active
 :any-link

Development/JavaScript/JavaScript client.md

@@ -1370,6 +1370,22 @@ sessionStorage vs localStorage: sessionStorage is cleared when the page session
 	var html = '<h1 id="title">Some Title</h1><span style="display:inline-block width=100px">Some arbitrary text</span>'
 	appendHtml(document.body, html) // "body" has two more children - h1 and span.
 
+### createElement
+
+	function createElement (elementType, props, children) {
+		const element = document.createElement(elementType)
+		for (const prop in props) {
+			if (prop === 'style') {
+				Object.keys(props.style).forEach(function (styleName) { element.style[styleName] = props.style[styleName] })
+			} else if (props[prop] !== null) {
+				element[prop] = props[prop]
+			}
+		}
+		if (children) {
+			children.forEach(function (node) { element.appendChild(node) })
+		}
+		return element
+	}
 
 ### Events
 
@@ -1390,6 +1406,29 @@ sessionStorage vs localStorage: sessionStorage is cleared when the page session
 	element.addEventListener('change', myFunction)
 	element.removeEventListener('change', myFunction) // no myFunction = remove all
 
+#### Page events
+
+Loading a page, in order:
+
+1. readystatechange
+2. load
+3. pageshow
+
+Back button:
+
+1. popstate
+
+MutationObserver (for SPA’s):
+
+	const observer = new MutationObserver((mutationsList, observer) => {
+		for (const mutation of mutationsList) {
+			console.log('mutation:', mutation.type, mutation.target)
+		}
+	})
+	observer.observe(document.querySelector('body'), { childList: true, subtree: true, attributes: true })
+	// When done:
+	observer.disconnect()
+
 #### preventDefault vs. stopPropagation
 
 	event.preventDefault() // prevents the default action the browser makes on that event.

Development/JavaScript/TypeScript.md

@@ -30,6 +30,7 @@ Compile:
 - enum
 - Array: `Array<string>` same as `string[]`. `let list: number[] = [1, 2, 3]`
 - object: not number, string, boolean, bigint, symbol, null, or undefined.
+- function: `() => void`
 - symbol
 - void
 - any / unknown
@@ -44,7 +45,8 @@ Compile:
     enum Color { Red, Green, Blue }
     let c: Color = Color.Green
 
-    enum LetterNumbers { A = 1, B = 2, C = 3 }
+    enum LetterNumber { A = 1, B = 2, C = 3 }
+    let n: LetterNumber = LetterNumber.B
 
 ### tuple
 
@@ -102,7 +104,7 @@ Function in interface:
 
     interface MenuPopoverProps {
       open: boolean;
-      onClose: () => void;
+      onClose: (event: React.SyntheticEvent) => void;
       anchorEl: HTMLFormElement;
     }
 
@@ -181,12 +183,32 @@ With `type`-definition:
 
 ### Important React types
 
+- component: React.FunctionComponent (alias React.FC)
+- component return value: React.ReactElement
 - element/children: React.ReactNode (not JSX.Element)
-- React.ReactElement
-- React.FunctionComponent alias React.FC
-- event: React.SyntheticEvent
+- event: React.SyntheticEvent, React.ChangeEvent: (event: React.SyntheticEvent) => void
 - event.target: Element or HTMLInputElement
 
+Custom HTMLElementEvent:
+
+    interface HTMLSimpleElementEvent {
+      target: {
+        name: string
+        type?: string
+        value?: string
+        checked?: boolean
+      }
+    }
+
+https://stackoverflow.com/a/42066698
+Usage: `event: HTMLElementEvent<HTMLTextAreaElement>`
+
+    type HTMLElementEvent<T extends HTMLElement> = Event & {
+      target: T; 
+      // probably you might want to add the currentTarget as well
+      // currentTarget: T;
+    }
+
 useState:
 
     const [productInfo, setProductInfo] = useState<ProductInfo>({ sku: '', name: ''})