Video & Screenshot

Screenshot:

use scrot -s
 

Video screen record:
 * simplescreenrecorder

Trim / Compress video:

ffmpeg 

trim video: ffmpeg -i film.mkv  -to 01:46:58 -c:v copy -c:a copy output.mp4
compress video: ffmpeg -i input.mp4 -vcodec libx265 -crf 28 output.m

 

Auth 0

 

Configuring Auth0

Adding markers to google maps

Adding stuff to google maps

Demo code:

const coordinates = // array of lat, lng

const flightPath = new google.maps.Polyline({

path: coordinates,

geodesic: true,

strokeColor: '#73B9FF',

strokeOpacity: 1.0,

strokeWeight: 4,

icons: [{

icon: {

path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW

},

offset: '100%'

}],

map: this.theMap,

Useful links

Google maps doc on custom symbols

Post on custom google maps markers

Doing lots of things on google maps

Flexbox & centering stuff

Flexbox 

• Css to use:
• display: flex;

• Vertical align bottom:
• align-items: flex-end;

• Horizontal align middle:  
•   justify-content: center;
• 
  

A load of React Notes from my time dabbling with React

Overview of core:

this.state = stuff you can change
this.props = constants that come from the hierarchy.

Build / Flow locally:

• yarn flow src

Lost / Where is that function from:

look for: conectRedux at the bottom of the file. - go to the class mentioned there.
Generally go to the bottom of the react file.

Oops:

• Dont use alert use window.sendError
• Link tag: use 'to' not 'a'
• Every list li ul element needs a key property key={uuid} NOT key="{uuid}"
• Use button not a if it is a button.
  • Get icons from: https://material.io/resources/icons/?style=baseline
• Don't use Maps just use raw Objects instead:
  • If you do use maps: Don't use [] use .set and .get
    • https://javascript.info/map-set#object-fromentries-object-from-map
    • Map arrow functions inside html don't seem to work. Use a loop.
• If no state in a react component just use an arrow function.
• Make react handle the loading case instead of blindly defaulting to empty list:
  • if (!teamsFetch || teamsFetch.pending) return <Loading />
  • if (teamsFetch.rejected) return <Error />
  • const rawTeams = (teamsFetch && teamsFetch.fulfilled && teamsFetch.value) || []
• Use useMemo:
  • const memoisedValue = React.useMemo(() => doHeavyComputation(a, b), [a, b])
  • Must go before any returns. 

• Don't modify this.props - instead call onChange and have the parent update it.  [...this.props.mylist, new_element]

REACT:

Tests yarn add --dev jest

• yarn jest
• Jest test design: We don't tend to test the API is hit. Normally test the modals are called.

JS yarn prettify

yarn prettier --write find src | egrep jsx\\\\?$ --exclude passfort-types | grep -v passfort-types

Flow

Ignore JS Flow check add this on line before:

• // $FlowFixMe
• {/* $FlowFixMe */}

Recovering disk space

If these aren't good enough:

 

•  df -kh
•  du -d 1 -h 
•  ncdu
•  dust

Look for deleted nodes that haven't been reclaimed yet (restart to recover space):

•  lsof | grep '(deleted)'

Tuning PG

Our upgrade to Postgresql 10 went badly due to parallel queries. If Postgres 10 performance sucks then try turning off parallel queries.

This site generates a tuned pg config for you based on your system:
 https://pgtune.leopard.in.ua/#/

Attempt to configure your Wall-E database backs so they back up on a a time frequency not size frequency by tuning:  max_wal_size

PG Logging:

Things you really should turn on for your PG logs:
https://www.postgresql.org/docs/9.5/runtime-config-logging.html

log_lock_waits

* This is useful in determining if lock waits are causing poor performance.

log_statement(ddl)

* Logs statements changing the DB

log_min_duration_statement

* Causes the duration of each completed statement to be logged if the statement ran for at least the specified number of milliseconds.