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

gaearon

function mapValues(obj, fn) {
  return Object.keys(obj).reduce((result, key) => {
    result[key] = fn(obj[key], key);
    return result;
  }, {});
}

function pick(obj, fn) {
  return Object.keys(obj).reduce((result, key) => {
    if (fn(obj[key])) {

rauchg

require-from-twitter

Since Twitter doesn't have an edit button, it's a suitable host for JavaScript modules.

How to use

Source tweet: https://twitter.com/rauchg/status/712799807073419264

const leftPad = await requireFromTwitter('712799807073419264');

paulirish

tell application "Google Chrome"
	
	set tab_list to every tab in the front window
	
	repeat with the_tab in tab_list
		set the_url to the URL of the_tab
		tell application "Safari" to open location the_url
	end repeat
	
end tell

neoeinstein

module Auth0
  ( AuthenticationState(..), AuthenticationError, AuthenticationResult
  
  , Options, defaultOpts
  
  , LoggedInUser, UserProfile, Token
  
  , showLock, showLockSignal
  , mapResult
  ) where

emiloberg

import React from 'react';
import { Sector, Cell, PieChart, Pie } from 'recharts';

const GaugeChart = () => {
        const width = 500;
        const chartValue = 180;
        const colorData = [{
                value: 40, // Meaning span is 0 to 40
                color: '#663399'
            }, {

a0viedo

I wrote a bunch of utility helpers for graphing data with pie charts, bar charts, scatter plots and histograms.

It reutilices many examples from [d3.org][d3.org], so many that I lost track of them all. I have only tested on d3's v3.

• Bar charts:
  • Properties like width, height, X and Y axis domains, X and Y axis transforms, tips and margins can be passed through a configuration object
  • tips
  • helper to update graph from new data through animations
  • opt-in interpolation
• Pie charts:

getify

Parens And Performance

Years ago, some smart folks that worked on JS engines realized that not all JS that's loaded into a page/app initially is needed right away. They implemented JIT to optimize this situation.

JIT means Just-In-Time, which means essentially that the engine can defer processing (parsing, compiling) certain parts of a JS program until a later time, for example when the function in question is actually needed. This deferral means the engine is freer to spend the important cycles right now on the code that's going to run right now. This is a really good thing for JS performance.

Some time later, some JS engine devs realized that they needed to get some hints from the code as to which functions would run right away, and which ones wouldn't. In technical speak, these hints are called heuristics.

So they realized that one very common pattern for knowing that a function was going to run right away is if the first character before the function keyword was a (, because that usually m

elmasse

 sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

adamseckel

import styled from 'emotion/react';
import {css} from 'emotion';

const justifyMap = {
  start: 'flex-start',
  end: 'flex-end',
  'space-between': 'space-between',
  'space-around': 'space-around'
};