This simple script will take a picture of a whiteboard and use parts of the ImageMagick library with sane defaults to clean it up tremendously.
The script is here:
#!/bin/bash
convert "$1" -morphology Convolve DoG:15,100,0 -negate -normalize -blur 0x1 -channel RBG -level 60%,91%,0.1 "$2"
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
| import PropTypes from 'prop-types' | |
| import React from 'react' | |
| import Fieldset from 'part:@sanity/components/fieldsets/default' | |
| import {setIfMissing} from 'part:@sanity/form-builder/patch-event' | |
| // FormBuilderInput automatically generates fields from a schema | |
| import {FormBuilderInput} from 'part:@sanity/form-builder' | |
| // a Higher Order Component that passes document values as props | |
| import {withDocument} from 'part:@sanity/form-builder' | |
| class CustomObjectInput extends React.PureComponent { |
| import { useState, useEffect } from 'react'; | |
| import client from 'braintree-web/client'; | |
| import hostedFields from 'braintree-web/hosted-fields'; | |
| const fieldsInnerStyles = { | |
| input: { | |
| 'font-size': '14px', | |
| }, | |
| 'input.invalid': { | |
| color: 'red', |