developit

dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	right: auto;
	padding: 30px;
	transform: perspective(500px) translate(-50%, -50%);
	background: linear-gradient(to bottom, #FFF, #F4F4F4) #FFF;
	border: none;
	border-radius: 3px;

developit

state-machine-component

A tiny (265 byte) utility to create state machine components using two pure functions.

🔥 JSFiddle Demo

Usage

The API is a single function that accepts 2 pure functions as arguments:

fdaciuk

'use strict'

class ExtractText {
  constructor (options) {
    this.options = options
    this.filterFunction = this.getFilterFunction(options)
    this.emit = this.emit.bind(this)
  }

  getFilterFunction (options) {

Sneezry

var canvas = document.getElementsByTagName('canvas')[0];
var context = canvas.getContext('2d');
var runner = new Runner();
var insight = 280;
runner.restart();
var keeper = setInterval(function() {
    if (!runner || !runner.onKeyDown) {
        clearInterval(keeper);
        return;
    }

geoffreydhuyvetters

What is React Fiber? And how can I try it out today?

what?

React Fiber is an ongoing reimplementation of React's core algorithm. It is the culmination of over two years of research by the React team.

• Andrew Clark: What's Next for React — ReactNext 2016
• React Fiber Architecture

why?

rondy

FWIW: I (@rondy) am not the creator of the content shared here, which is an excerpt from Edmond Lau's book. I simply copied and pasted it from another location and saved it as a personal note, before it gained popularity on news.ycombinator.com. Unfortunately, I cannot recall the exact origin of the original source, nor was I able to find the author's name, so I am can't provide the appropriate credits.

---

Effective Engineer - Notes

• By Edmond Lau
• Highly Recommended 👍
• http://www.theeffectiveengineer.com/

What's an Effective Engineer?

threepointone

[based on a true story]

So. Your friend's about to teach you how to make a website. Great!

You make a file, and you save it as 'index.html'. Why it's called 'index' isn't really explained to you, but whatever.

You type the following.

hello world

MicheleBertoli

import React, { PropTypes } from 'react'

const Describe = ({ title, children }) => (
  <div>
    <h1>{title}</h1>
    <ul>{children}</ul>
  </div>
)

Describe.propTypes = {

acdlite

// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
function asyncComponent(getComponent) {
  return class AsyncComponent extends React.Component {
    static Component = null;
    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then(Component => {

tj

let rows = {}

export default function(props = [], state = []) {
  return function(target) {
    const proto = Object.create(target.prototype)

    proto.shouldComponentUpdate = function(newProps, newState) {
      let id = (this._update_id = this._update_id || Math.random())