liuliangsir

What forces layout / reflow

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.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

liuliangsir

import React from "react";

const scaleWidth = 500;
const scaleHeight = 500;

function draw(canvas, scaleX, scaleY) {
    const context = canvas.getContext("2d");
    context.scale(scaleX, scaleY);
    context.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);

liuliangsir

Charles Proxy Map Remote over HTTP or HTTPS

The Map Remote tool changes the request location, per the configured mappings, so that the response is transparently served from the new location as if that was the original request.

HTTP

Using this feature for http resources does't require anything else apart from just configuring your Map Remote entry.

Always make sure you are clearing your cache before you test. Even if Charles is configured properly you might not see the changes unless the browser gets the resource again from the server and not for its local cache.

liuliangsir

javascript:(function(){
  allowCopyAndPaste = function(e){
  e.stopImmediatePropagation();
  return true;
  };
  document.addEventListener('copy', allowCopyAndPaste, true);
  document.addEventListener('paste', allowCopyAndPaste, true);
  document.addEventListener('onpaste', allowCopyAndPaste, true);
})(); 

liuliangsir

People

:bowtie:	😄 :smile:	😆 :laughing:
😊 :blush:	😃 :smiley:	☺️ :relaxed:
😏 :smirk:	😍 :heart_eyes:	😘 :kissing_heart:
😚 :kissing_closed_eyes:	😳 :flushed:	😌 :relieved:
😆 :satisfied:	😁 :grin:	😉 :wink:
😜 :stuck_out_tongue_winking_eye:	😝 :stuck_out_tongue_closed_eyes:	😀 :grinning:
😗 :kissing:	😙 :kissing_smiling_eyes:	😛 :stuck_out_tongue:

liuliangsir

# Pulled from https://stackoverflow.com/questions/18641864/git-bash-shell-fails-to-create-symbolic-links
# https://stackoverflow.com/users/124119/camilo-martin

# Detect windows (assumes we are in 'msysgit' or similar).
windows() { [[ -n "$WINDIR" ]]; }

# Cross-platform symlink function. 
#  With one parameter, it will check whether the parameter is a symlink. 
#  With two parameters, it will create a symlink to a file or directory,
#   with syntax: link $linkname $target

liuliangsir

Steps to publish a npm package to beta that won't be available via latest and won't auto install on ncu updates etc

1. Ensure any compile is run npm run dist etc
2. Modify version in package.json to the following format (match with existing verion numbers etc) "version": "0.1.120-beta.1" where beta.x is the number of those betas
3. Publish to npm npm publish --tag beta

There are two options for install:

• Always install beta with npm install packagename@beta
• Install specific version with npm install package@0.1.120-beta.1

liuliangsir

git clone --recursive https://github.com/WebAssembly/wabt
cd wabt

make
make clang-debug
make gcc-i686-release
make clang-debug-lsan
make gcc-debug-no-re2c

chmod +x bin/

liuliangsir

Minimal example making webpack and wasm/Emscripten work together.

Build instructions:

• Clone this gist
• npm install
• npm start
• Open http://localhost:8080
• Look at console

liuliangsir

Minimal example making webpack and wasm/Emscripten work together.

Build instructions:

• Clone this gist
• npm install
• npm start
• Open http://localhost:8080
• Look at console