The main difference between the two pages is the method of sending messages. Recieving messages is the same in both.
Send messages to iframe using iframeEl.contentWindow.postMessage
Recieve messages using window.addEventListener('message')
#!/bin/bash | |
sha256Hash() { | |
local output=$(printf "$1" | shasum -a 256) | |
echo "${output%% *}" | |
} | |
hex256() { | |
printf "$(printf "$1" | od -A n -t x1 | sed -E -e 's/[ \t\n]*//g' | tr -d '\n')\n" | |
} |
#!/bin/sh | |
# VPN.sh | |
###### SETUP ####### | |
# You need to setup and be able to connect to you VPN at least once | |
# Change these variables for your setup | |
# You can export your VPN_PWD into .bash_profile (.zprofile if you are using zsh) so it won't be exposed in the command | |
# In .bash_profile or .zprofile insert lines |
export default yup.object().test('bothFieldsCannotBeEmpty', 'Both fields cannot be empty', values => { | |
const { matchingInclusionRule, matchingExclusionRule } = values; | |
return ( | |
!!matchingInclusionRule || | |
!!matchingExclusionRule || | |
new yup.ValidationError(`Inclusion Rule & Exclusion Rule cannot be left both empty.`, null, 'matchingInclusionRule') | |
); | |
}); |
export const generateNoise = (scale = 0.01, resolution = 1024) => { | |
let currentScale = scale; | |
let currentResolution = resolution >= 2 ? resolution : 2; | |
const randomArray = Array(currentResolution) | |
.fill(0) | |
.map(() => Math.random()); | |
return { | |
noiseAt: pos => { | |
const currentSeed = scale * pos; | |
const frag = currentSeed % 1; |
export const sendForgotPasswordEmail = email => { | |
return axios | |
.put(forgotPasswordResetUrl, { email, isForgotPasswordEmail: true, deactivate: true }, { customSuccessMessage: '' }) | |
.then(response => { | |
return response; | |
}) | |
.catch(error => { | |
throw error; | |
}); | |
}; |
// Convert Image to binary to arrayBuffer to clipboard (not work) | |
var canvasDataUrl = ((document.getElementsByClassName("canvasjs-chart-canvas"))[0]).toDataURL("image/png"); | |
fetch(canvasDataUrl) | |
.then(res => res.arrayBuffer()) | |
.then(arrayBuffer => { | |
const uint8Array = new Uint8Array(arrayBuffer); | |
document.addEventListener('copy', function(e) { | |
var str = ''; | |
uint8Array.forEach(function(d) { |
React Components:
Use PureComponent
instead of Component
.
For stateless Components, wrap them with React.memo()
or Recompose.pure()
.
Break big Components into pieces, wrap static pieces (part that doesn't use props or state) with React.memo
or Recompose.pure
, it shall avoid re-render as much as possible.
Only Layout Components and Page Components are aware of store from Redux.
.parent-div { | |
display: table; | |
} | |
.child-div { | |
display:block; /* Have to be block */ | |
height: 100%; | |
} |
git push origin `git subtree split --prefix dist master`:gh-pages --force |