March 2022 update

Development/Go.md

@@ -71,9 +71,9 @@ You define your `module my_app` in `go.mod`, then you can reference subfolders e
 
 	const earthsGravity = 9.80665
 
-### Structs/Collections
+### Structs/Collections/Interfaces
 
-	type album struct {
+	type Album struct {
 	    ID     string  `json:"id"`
 	    Title  string  `json:"title"`
 	    Artist string  `json:"artist"`
@@ -87,6 +87,13 @@ You define your `module my_app` in `go.mod`, then you can reference subfolders e
 	    {ID: "3", Title: "Sarah Vaughan and Clifford Brown", Artist: "Sarah Vaughan", Price: 39.99},
 	}
 
+	type AlbumInterface interface {
+	    ID     string
+	    Title  string
+	    Artist string
+	    Price  float64
+	}
+
 ### Private and public
 
 	privateFunction
@@ -132,7 +139,7 @@ https://gobyexample.com/command-line-flags
 
 ### HTTP server
 
-package main
+	package main
 
 	import (
 		"fmt"
@@ -141,9 +148,8 @@ package main
 
 	func main() {
 	    http.HandleFunc("/hello-world", func(w http.ResponseWriter, r *http.Request){
-	        fmt.Fprintf(w, "Hello world")
+	        fmt.Fprintf(w, "Hello world") // or: fmt.Fprint(w, myFunction())
 	    })
-
 	    http.ListenAndServe(":80", nil)
 	}
 

Development/HTML/CSS.md

@@ -545,7 +545,8 @@ Code:
 ### Word wrap and whitespace
 
   white-space: nowrap; /* never wrap */
-  white-space: pre-wrap; /* for 'code' */
+  white-space: break-spaces;
+  white-space: pre/pre-wrap; /* for 'code' */
   word-wrap: break-word; /* break words that overflow their container */
   word-break: break-all; /* breaks all words at the end of a line */
   overflow-wrap: break-word;
@@ -970,10 +971,21 @@ Examples:
       animation-delay: -2s;
     }
 
+## Children and Siblings
+
+Children:
+
+    .parent > .child
+
+Siblings on same level:
+
+    .first-sibling + .next-sibling
+
 ## Pseudo classes
 
 input:not([type="radio"])
-h1[data-testid="jest-test-product-name"]
+button[data-testid]
+button[data-testid="jest-test-product-name"]
 
 :active
 :any-link

Development/HTML/HTML.md

@@ -278,6 +278,8 @@ input[type="radio"] {
 
 ## HTML5 Semantic Tags
 
+https://www.w3schools.com/tags/
+
 <main>
 <nav>
 <section>

Development/JavaScript/JavaScript client.md

@@ -1108,11 +1108,12 @@ http://www.w3schools.com/jsref/jsref_obj_array.asp
 Use dayjs instead (smaller):
 
 		import dayjs from 'dayjs'
+		dayjs(myDate).format('YYYY-MM-DD')
+		dayjs().subtract(2, 'day').format('ddd, YYYY-MM-DD HH:mm:ss')
+
 		import relativeTime from 'dayjs/plugin/relativeTime'
 		dayjs.extend(relativeTime)
-
 		dayjs(myDate).fromNow()
-		dayjs().subtract(2, 'day').format('ddd, YYYY-MM-DD HH:mm:ss')
 
 Moment.js
 
@@ -1345,8 +1346,9 @@ sessionStorage vs localStorage: sessionStorage is cleared when the page session
 	item.replaceChild(newNode, container.childNodes[0])
 	container.removeChild(container.childNodes[0])
 
-	document.querySelectorAll('.my-class img').forEach(e => e.style.border = '1px solid red')
+	// Simple scraper:
 	document.querySelectorAll('h3').forEach(e => console.log(e.innerText))
+	document.querySelectorAll('.my-class img').forEach(e => e.style.border = '1px solid red')
 
   function toggleClass (event, className) {
     const { target } = event
@@ -1503,8 +1505,8 @@ Tip: event handlers on `document` for move/end:
 
 	const domain = await window.fetch(url).then(res => res.json()) // or res.text() for HTML
 
-	const userResponse = await window.fetch(`${API_URL}/api/users/${user}`)
-	const userJson = await userResponse.json() // or text(), arrayBuffer(), blob(), formData()
+	const userResponse = await window.fetch(userUrl)
+	const userJson = await userResponse.json() // or text(), blob(), arrayBuffer(), formData()
 
 	await window.fetch(`${config.appUrl}api/domains`, {
 		method: 'POST',
@@ -1870,6 +1872,7 @@ https://www.sitepoint.com/lodash-features-replace-es6/
 
 	// Optional chaining
 	const value = a?.[b]?.['myKey']?.c
+	(event) => handleInputChange?.(event)
 
 	// pick
 	const { a, c } = abcObject

Development/JavaScript/React.md

@@ -165,7 +165,11 @@ https://reactjs.org/docs/hooks-overview.html
 
 - `useMemo`: return value
 - `useCallback`: return function
-- `useEffect` + `useState`: if need async/await
+- `useEffect` + `useState`: if need async/await:
+
+    const [stateValue, setStateValue] = useState()
+    const getStateValue = async () => setStateValue(await somethingAsync())
+    useEffect(() => getStateValue(), [])
 
 #### useRef
 

Development/JavaScript/TypeScript.md

@@ -29,16 +29,16 @@ Compile:
 - tuple
 - 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`
+- object: see also `Record<string, string>`. Not number, string, boolean, bigint, symbol, null, or undefined.
+- function: `(param: string) => void`
 - symbol
 - void
 - any / unknown
 - null / undefined
 - never
 - Date
-- Combined: Human & Customer
-- Or: string | null
+- AND/Combined: Human & Customer
+- OR: string | null
 
 ### enum
 
@@ -129,6 +129,26 @@ Function in interface:
 
 ## Patterns
 
+### Combining types
+
+    interface RentalInputs extends ProductVariant, Customer, Rental {}
+    type RentalInputs = ProductVariant & Customer & Rental
+
+    interface RentalFieldsProps {
+      inputs: ProductVariant & Customer & Rental
+    }
+
+### Partial/optional
+
+    export const AppContext = React.createContext<Partial<ContextProps>>({})
+
+### Interface as Array
+
+    interface MyArrayInterface {
+      0: number,
+      1: (startValue: number) => void
+    }
+
 ### Cast with 'as'
 
     const elementRef = useRef() as React.MutableRefObject<HTMLButtonElement>
@@ -186,7 +206,10 @@ With `type`-definition:
 - component: React.FunctionComponent (alias React.FC)
 - component return value: React.ReactElement
 - element/children: React.ReactNode (not JSX.Element)
-- event: React.SyntheticEvent, React.ChangeEvent: (event: React.SyntheticEvent) => void
+- event:
+  - React.SyntheticEvent
+  - React.MouseEventHandler<HTMLImageElement>
+  - React.ChangeEvent: (event: React.SyntheticEvent) => void
 - event.target: Element or HTMLInputElement
 
 Custom HTMLElementEvent:

Development/Regular Expressions.md

@@ -43,8 +43,13 @@ Domain from URL - https://regex101.com/r/MOIFTy/3
 
 	/^(?:https?:)?(?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:\/\n]+)/igm
 
-Find all links EXCLUDING "screen:"
+Find all links in an HTML file:
 
+	/(?:ht|f)tps?:\/\/[-a-zA-Z0-9.]+\.[a-zA-Z]{2,3}(\/[^"<]*)?/g
+
+Find all HREF links – EXCLUDING "screen:"
+
+	/href="(.*?)"/g
 	/href="((?!screen:).+)"/g
 
 

Operating Systems/Unix Linux Bash.md

@@ -95,7 +95,8 @@ List all except a pattern:
 
 ### Download a file
 
-	wget https://server.com/myfile
+	wget https://server.com/myfile.txt
+	curl -o myfile.txt https://server.com/myfile.txt
 
 ### Pretty file tree
 
@@ -612,3 +613,19 @@ Use `d *` to delete all.
 #### launchd
 
 https://www.launchd.info/
+
+## Security
+
+### SSH
+
+Create:
+
+	ssh-keygen -t rsa -b 4096 -C "[email protected]"
+	ssh-keygen -t ed25519 -C "[email protected]"
+
+NOTE: ssh-keygen will ask for a filename, so no risk of overwriting your old key.
+
+Connect:
+
+	ssh -i keyfile target_machine
+	ssh -i ~/.ssh/filnamn

Tools/Google Sheets and Excel.md

@@ -84,6 +84,9 @@ Random string
 
 ---------- DATE & TIME ----------
 
+Format date as text:
+=TEXT(D26+1, "YYYY-MM-DD")
+
 =ROUND((NOW()-DATE(1970,1,1))*86400)
 =ROUND((NOW()-DATE(1970,1,1))*86400000-7205600)