glennreyes

.email {
    text-decoration: none;
}

.email:hover {
    text-decoration: underline;
}

.email:before {
    content:">>";

glennreyes

Enable tab completion for JSX with Emmet in Atom

This guide assumes you have the emmet and language-babel packages already installed in Atom

1. Open the keymap.cson file by clicking on Atom -> Keymap… in the menu bar
2. Add these lines of code to your keymap:

'atom-text-editor[data-grammar~="jsx"]:not([mini])':

glennreyes

Progressive Webapps

Application Shell

• Progressive rendering
  • Don't show a blank screen
• Progressive enhancement

Strategies

• Server-side HTML
• React

glennreyes

const customMedia = require('./postcss/customMedia');
const customProperties = require('./postcss/customProperties');

module.exports = {
  ...
  plugins: [
    postcss: () => [
      postcss: () => [
        cssnext({ features: { customMedia, customProperties } }),
      ],

glennreyes

Docs

• https://webpack.github.io/docs/code-splitting.html
• https://gist.github.com/sokra/27b24881210b56bbaff7#code-splitting-with-es6

Examples

• https://github.com/webpack/webpack/tree/master/examples/code-splitting
• https://gist.github.com/acdlite/a68433004f9d6b4cbc83b5cc3990c194 (RRv4)

Blogs

• http://jonathancreamer.com/webpack-code-splitting-with-es6-and-babel-6/

glennreyes

/* @flow */
/* eslint-disable global-require, no-console */

import React from 'react';
import { render } from 'react-dom';
import Redbox from 'redbox-react';


const clearConsole = () => {
  if (typeof console.clear === 'function') {

glennreyes

Keybase proof

I hereby claim:

• I am glennreyes on github.
• I am glennreyes (https://keybase.io/glennreyes) on keybase.
• I have a public key whose fingerprint is B921 FD09 9BB6 AB54 93ED D30E E798 7280 C8EF E5AB

To claim this, I am signing this object:

glennreyes

lerna exec --concurrency 1 --scope package -- now -t $ZEIT_TOKEN

glennreyes

Leveraging code-splitting in React apps

Why consider code split?

• Imagine regular 3G connection on mobile devices
• Seconds until first meaningful paint?
• Mobile trend

How?

• Explain import();
• Example import();

glennreyes

# Creates a favicon.ico with ImageMagick
convert favicon.png -define icon:auto-resize=256,192,128,64,48,32,16 favicon.ico