rauschma

Cheat sheet: JavaScript Array methods

Deriving a new Array from an existing Array:

['■','●','▲'].slice(1, 3)          ⟼ ['●','▲']
['■','●','■'].filter(x => x==='■') ⟼ ['■','■']
    ['▲','●'].map(x => x+x)        ⟼ ['▲▲','●●']
    ['▲','●'].flatMap(x => [x,x])  ⟼ ['▲','▲','●','●']

gaearon

// from/to: { left, top, width, height, shape: 'circle' | 'rect' }
function CurvedArrow({ from, to }) {
  function curvedHorizontal(x1, y1, x2, y2) {
    function pos(t) {
      let mx = x1 + (x2 - x1) / 2;
      let p1 = {x: x1, y: y1};
      let p2 = {x: mx, y: y1};
      let p3 = {x: mx, y: y2};
      let p4 = {x: x2, y: y2};
      return {

mgechev

<link rel="shortcut icon" width=32px>
<canvas style="display: none" id="loader" width="16" height="16"></canvas>

<script>
class Loader {
  constructor(link, canvas) {
    this.link = link;
    this.canvas = canvas;
    this.context = canvas.getContext('2d');
    this.context.lineWidth = 2;

shanselman

{
    "$schema": "https://aka.ms/terminal-profiles-schema",
    "copyOnSelect": false,
    "defaultProfile": "{574e775e-4f2a-5b96-ac1e-a2962a402336}",
    // Add custom keybindings to this array.
    // To unbind a key combination from your defaults.json, set the command to "unbound".
    // To learn more about keybindings, visit https://aka.ms/terminal-keybindings
    "keybindings": 
    [
        // Copy and paste are bound to Ctrl+Shift+C and Ctrl+Shift+V in your defaults.json.

jesstelford

Read Shape Up by basecamp on a kindle / reMarkable / eReader

Basecamp's new book Shape Up is now available online (https://basecamp.com/shapeup) to read page-by-page.

There is a .pdf version, but that's not the best format for Kindle / other eReaders. Instead, we can convert the page-by-page into an eReader friendly format.

Part 1: Convert to a single page

NOTE: This has only been tested on Chrome

bvaughn

React recently introduced an experimental profiler API. This page gives instructions on how to use this API in a production release of your app.

Table of Contents

• Profiling in production
  • Create React App
  • Webpack 4

Profiling in production

React DOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small additional overhead it is opt-in for production mode. This gist explains how to opt-in.

clemmy

Render 1	Render 2	State Preserved?
<>...</>	<>{[...]}</>	yes (in any level)
<><>...</></>	<>...</>	no
[...]	[[...]]	no
[<>...</>]*	[...]	no
[<>...</>]*	<>...</>	no
[<>...</>]*	<>[...]</>	no
[<>...</>]*	[[...]]	yes
[&lt;&gt;...&gt;]*	&lt;&gt;&lt;&gt;...&gt;&gt;	yes

augbog

Free O'Reilly books and convenient script to just download them.

Thanks /u/FallenAege/ and /u/ShPavel/ from this Reddit post

How to use:

1. Take the download.sh file and put it into a directory where you want the files to be saved.
2. cd into the directory and make sure that it has executable permissions (chmod +x download.sh should do it)
3. Run ./download.sh and wee there it goes. Also if you do not want all the files, just simply comment the ones you do not want.

fhfaa

import System;
import System.Windows.Forms;
import Fiddler;

// INTRODUCTION
//
// Well, hello there!
//
// Don't be scared! :-)
//

paulirish

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