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

Restuta

/*  Sometimes it's pretty easy to run ito troubles with React ES6 components.
    Consider the following code: */

class EventStub extends Component {
  componentDidMount() {
    window.addEventListener('resize', this.onResize.bind(this)); //notice .bind
  }
  
  componentWillUnmount() {
    window.removeEventListener('resize', this.onResize.bind(this));

nikgraf

Rich text editing with DraftJS Plugins

Earlier this year Facebook open sourced its React based rich text editing framework Draft.js. At Facebook it powers status updates, comments & notes. Others used it to build editors matching Medium’s experience.

Together with a whole team of open source contributors I built a plugin architecture on top of Draft.js. In this talk I walk you through the existing plugins and show how you can build your own feature-rich text editor for the web with only a handful lines of code. 🤓

DraftJS Plugins

HenrikJoreteg

// what if this was something browsers just gave us?
const { vdom } = document;

// this is same idea as React.createElement
// or any of the other similar appraoches
const newVirtualDom = vdom('div', {className: 'some-class'}, [
  vdom('p', null, 'hi')
])

// if preferred, someone could easily use JSX and precompile it

ebidel

<!-- 
Complete feature detection for ES modules. Covers:

1. Static import: import * from './foo.js';
2. Dynamic import(): import('./foo.js').then(module => {...});

Demo: http://jsbin.com/tilisaledu/1/edit?html,output

Thanks to @_gsathya, @kevincennis, @rauschma, @malyw for the help.
-->

davo

/**
 *  @module		FigmaLiveEmbed
 *	@author		Davo Galavotti
 *  @version	0.1
 *
 *	Based on Youtube code component by Jan Van Boghout
 */

import * as React from 'react'
import { Frame, FramerEvent, Animatable, PropertyControls, ControlType } from 'framer'