tomhodgins

/* Useful Tests for JS-powered Styling */

/* ELEMENT QUERIES */

// Width-based tests
el => el.offsetWidth < 500  // less than 500px wide
el => el.offsetWidth <= 500 // less or equal to 500px wide
el => el.offsetWidth == 500 // 500px wide
el => el.offsetWidth >= 500 // greater or equal to 500px wide
el => el.offsetWidth > 500  // greater than 500px wide

ryanflorence

import React from "react"
import { Machine } from "xstate"

const createMachineComponent = chart => Comp => {
  const machine = Machine(chart)

  return class Machine extends React.Component {
    state = {
      state: machine.getInitialState()
    }

ryanflorence

import React from 'react'
import { Machine } from 'xstate'

const createMachineComponent = chart => Comp => {
  const machine = Machine(chart)

  return class extends React.Component {
    state = {
      state: machine.getInitialState(),
      data: {}

acdlite

Demo: Coordinating async React with non-React views

tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.

A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.

But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.

How do we solve this with React?

okonet

Please 🌟 this gist to vote for this proposal!

Make linting great again!

No other topic in software development probably has so much controversy as linting.

With a wrong workflow linting can be really a pain and will slow you and your team down. With a proper setup, though, it can save you hours of manual work reformatting the code and reducing the code-review overhead.

kitten

With styled-components into the future

Preprocessing is dead, long live preprocessing!

This is a CFP for ReactiveConf 2017's open call for Lightning talks. If you'd like to see this talk become a reality, please ⭐ star this gist. #ReactiveConf

conorhastings

/* this lacks subscribe behavior or ability to dispatch from outside of component tree but that is generally not neccesary */
class State extends React.Component {
  constructor(props) {
    super(props); 
    this.state = YOUR_INITIAL_STATE;
  }
  reducer = (action, state, props) => {...newState};
  /* setState takes an object of new state as first arg or a function of props and state that returns new state 
   * which we will use here
   * we pass dispatch around and use it similarly to redux dispatch

AmeliaBR

SVG <text>: Tips & Tricks

Notes for a presentation by Amelia Bellamy-Royds
SVG Summit, 15 February 2017

I've set up a CodePen as a scratchpad for the live-coding bits. Don't expect anything there to stay there long; fork the pen if you want to save the code & look at it later.

What is it?

rofrol

Elm best practices

Style guide

• http://package.elm-lang.org/help/design-guidelines
• http://elm-lang.org/docs/style-guide
• https://github.com/NoRedInk/elm-style-guide
• https://gist.github.com/laszlopandy/c3bf56b6f87f71303c9f
• https://github.com/ohanhi/elm-style-guide

srdjan

100+ different js counter apps...