diff --git a/Development/HTML/CSS.md b/Development/HTML/CSS.md
index 0803068..e801e36 100644
--- a/Development/HTML/CSS.md
+++ b/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
diff --git a/Development/JavaScript/JavaScript client.md b/Development/JavaScript/JavaScript client.md
index bd6a6f5..757a06f 100755
--- a/Development/JavaScript/JavaScript client.md
+++ b/Development/JavaScript/JavaScript client.md
@@ -1370,6 +1370,22 @@ sessionStorage vs localStorage: sessionStorage is cleared when the page session
var html = '
Some Title
Some arbitrary text'
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.
diff --git a/Development/JavaScript/TypeScript.md b/Development/JavaScript/TypeScript.md
index 3d77f78..4b50f27 100644
--- a/Development/JavaScript/TypeScript.md
+++ b/Development/JavaScript/TypeScript.md
@@ -30,6 +30,7 @@ Compile:
- enum
- Array: `Array` 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`
+
+ type HTMLElementEvent = Event & {
+ target: T;
+ // probably you might want to add the currentTarget as well
+ // currentTarget: T;
+ }
+
useState:
const [productInfo, setProductInfo] = useState({ sku: '', name: ''})