jakub-g

Beware of <script async defer> blocking HTML "load" event

2015.10.07 t

On the importance of simulated latency testing, and bulletproofing your page from the third-party JS load failures

TL;DR

KittyGiraudel

import React from 'react';
import MyCoolTextarea from '../MyCoolTextarea';
import MyCoolCounter from '../MyCoolCounter';

const MyCoolComponent = React.createClass({

  // Define a method on the parent component describing what should happen when
  // the textarea gets updated. At this point, the only thing needed is to store
  // the length of the textarea’s content in a state on the parent component.
  //

JeffreyWay

syntax enable
colorscheme desert




"-------------General Settings--------------"
set backspace=indent,eol,start                                          "Make backspace behave like every other editor.
let mapleader = ',' 						    	"The default leader is \, but a comma is much better.
set number								"Let's activate line numbers.

kulakowka

import React, { Component } from 'react'
import Firebase from 'firebase'
import ReactFireMixin from 'reactfire'
import reactMixin from 'react-mixin'

const ref = new Firebase('https://<APPNAME>.firebaseio.com/users')

class UsersList extends Component {
  constructor (props, context) {
    super(props, context)

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 => {

evansiroky

import React from 'react'

export default class Icon extends React.Component {

  render () {
    const {type, className} = this.props
    return (
      <i 
        className={`fa fa-${type} fa-fw ${className}`}
        {...this.props}

michalchudziak

const ComponentWithSavePost = graphql(savePostMutation, {
  props: ({ mutate }) => ({
    savePost: (title, body) => mutate({ variables: { title, body } }),
  }),
})(Component);

NilsvN

Red Science:

0eNqdmttu6zYQRf9Fz1YhXhX7Vw4OCkVhE6K6QZLbBkH+vcqxnTQNHc/ik2Gb3kOtGc6F8Etx3x3DNMdhLQ4vRWzHYSkOP16KJT4OTff22fo8heJQxDX0xa4Ymv7t3dLGMLShnJr2z1IVr7siDg/hn+KgXn/uijCscY3hpPTrzfPvw7G/D/O24F2jWZbQ33dxeCz7pn2KQyj1ZmEal+3H4/BmexMs613xvL3ozcYc2jglzX8xo9/N/NEsa7nOzbBM47yW96FbE1bsyYrZrDzEzc7pO5tQNlDZJJV9Qtl+Vj5uROfHedxer2nrtPbu4rTxuE7HNcXHQTdUWV7wn58oDkuY1+2LL/LpB9EJyZpCMjcYxeEKorvPlpapi2ty8+fY0b+52z7es+hx4uBR1btyHx7isS9Dt62fY1tOYxe+SvuLdEpMsW3W4tOjPg5mN24h99RsDnz4JjLKMwIlQGCk4XYR1bfjTVnI9XLgdRKsy8seSkDW56U8iXSdJ60F0ndin+nkfpM++zhlS990Xdk1/XQ16SQdpelxet9dSgweJyN+Uq2zlAWO0bDOyaNJ26wcmHaTk4aPk+/P0xLjk1QFJUbXWXlW386FWnyu6u8Cdy9V8d+omCqv51Os2TAKpv/q9vkymeVKUK2MESWpcy5Ng7VZ1USQV0xenaoE7XNemZIo0yqlUzSSyrRISSJrn9WBwzNhK+nOLw5MidCZ7aQFZwVLj5oYtTVw//4r6jiPQ/kYmrn8+ymELvkANqdiCgLb0sN4ykGCbtz6LGVB+2DzWkZBZbN3WcrJOcfupTPeOcGJZjxXZSUiwZDnYCNZKrGyztqzIBKcgZ10dd1fzsIckXx+/XZHtcbufEH1/ye7+xhmz7bacWjnsIZfp/7Kcs2WK7S8QquZNtu4lErNINYMYs0g1ghijSDWCGKNIHoG0TOInkH0CKJHED2C6BFExyA6BtExiA5BdAiiQxAdgmgZRMsgWgbRIogWQbQIokUQDYNoGETDI

ecavalcanti

import React, { Component } from 'react'
import { AppRegistry, View, Text, TextInput, StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native'

export default class App extends Component {
  state = {
    loading: false
  }

  renderLoading() {
    if (this.state.loading) {

klimashkin

'padding-line-between-statements': [2,
  // Always require blank lines after directive (like 'use-strict'), except between directives
  {blankLine: 'always', prev: 'directive', next: '*'},
  {blankLine: 'any',    prev: 'directive', next: 'directive'},
  // Always require blank lines after import, except between imports
  {blankLine: 'always', prev: 'import', next: '*'},
  {blankLine: 'any',    prev: 'import', next: 'import'},
  // Always require blank lines before and after every sequence of variable declarations and export
  {blankLine: 'always', prev: '*', next: ['const', 'let', 'var', 'export']},
  {blankLine: 'always', prev: ['const', 'let', 'var', 'export'], next: '*'},