socker210

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

socker210

/**
 * @see https://github.com/react-bootstrap/react-bootstrap/blob/master/src/createChainedFunction.tsx
 */
function createChainedFunction(...funcs) {
  return funcs
    .filter(f => f !== null)
    .reduce((acc, f) => {
      if (typeof f !== 'function') {
        throw new Error('Invalid type')
      }

socker210

Problem

I have two Github accounts: oanhnn (personal) and superman (for work). I want to use both accounts on same computer (without typing password everytime, when doing git push or pull).

Solution

Use ssh keys and define host aliases in ssh config file (each alias for an account).

How to?

1. Generate ssh key pairs for accounts and add them to GitHub accounts.

socker210

git config --global core.editor "code --wait"

socker210

{
	"compilerOptions": {
		"skipLibCheck": true,
		"isolatedModules": true,
		"lib": ["DOM"],
		"target": "ES2018",
		"noEmit": true,
		"strict": true,
		"alwaysStrict": true,
		"noImplicitAny": true,

socker210

# Folders
node_modules/
dist/
public/

# Files
**/*.json
**/*.md
**/*.html
**/*.sass

socker210

import React from 'react';
import type { Story, Meta } from '../storybook';
import { Button, ButtonProps } from './button';

export default {
  title: 'React/Button',
  component: Button,
  argTypes: {
    children: { name: 'label', control: 'text' },
  },

socker210

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 6,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
    tsconfigRootDir: __dirname,
    project: 'tsconfig.json',

socker210

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

// MIT license

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];

socker210

// Simulate a call to Dropbox or other service that can
// return an image as an ArrayBuffer.
var xhr = new XMLHttpRequest();

// Use JSFiddle logo as a sample image to avoid complicating
// this example with cross-domain issues.
xhr.open( "GET", "http://fiddle.jshell.net/img/logo.png", true );

// Ask for the result as an ArrayBuffer.
xhr.responseType = "arraybuffer";