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 |