<commit_before>// Import React
import React, { Component } from 'react';

// Import Spectacle Core tags
import {
    Appear,
  //BlockQuote,
  //Cite,
    CodePane,
    Deck,
    Fit,
    Fill,
    Heading,
    Image,
    Layout,
  //Link,
    ListItem,
    List,
  //Markdown,
  //Quote,
    Slide,
    Spectacle,
    Text
} from 'spectacle';

import Album from '../components/album';

// Require CSS
require('normalize.css');
require('spectacle/lib/themes/default/index.css');

// Import theme
import createTheme from 'spectacle/lib/themes/default';
import preloader from 'spectacle/lib/utils/preloader';

const theme = createTheme({
    primary : '#40e1ff',
    secondary : 'black',
    tertiary : 'white'
}, {
    primary: 'Helvetica'
});

const pacmanColor = '#247BA0';
theme.screen.progress.pacman.point.borderColor = pacmanColor;
theme.screen.progress.pacman.pacmanTop.background = pacmanColor;
theme.screen.progress.pacman.pacmanBottom.background = pacmanColor;

const images = {
    logo : require('../assets/react-logo-1000-transparent.png'),
    aaron : require('../assets/aaron.png'),
    synapse : require('../assets/synapse.svg'),
    facebook : require('../assets/facebook.png'),
    superFast : require('../assets/super-fast.jpg'),
    sucks : require('../assets/sucks.jpg'),
    flux : require('../assets/flux.png')
};
preloader(images);

export default class Presentation extends Component {
    render() {
        return (
            <Spectacle theme = {theme}>
                <Deck transition = {['zoom', 'slide']} transitionDuration={500}>

                    <Slide transition = {['zoom']} bgColor = "white">
                        <Layout>
                            <Fit>
                                <Image src={images.logo.replace('/', '')} height="250px" />
                            </Fit>
                            <Heading size={1} lineHeight={1} textColor="black" textAlign="center" fit margin = "20px 0 0 0">
                                React
                            </Heading>
                        </Layout>
                        <Heading size={1} fit caps textColor="primary">
                            A javascript library for building user interfaces
                        </Heading>
                        <Text margin = "200px 0 10px 0">A Presentation by Aaron Bruce</Text>
                        <Text>github.com/spruce-bruce</Text>
                        <Text>@TerribleAaron</Text>
                    </Slide>

                    <Slide notes = {"Mention PHP and React meetups"} transition = {['slide']}>
                        <Image src={images.aaron.replace('/', '')} fit display="block" height="500px" />
                        <Text margin="30px 0 0 0">synapsestudios.com</Text>
                    </Slide>

                    <Slide transition = {['slide']} bgColor="secondary" textColor="primary">
                        <Layout>
                            <Fit>
                                <Image src={images.facebook.replace('/', '')} height="100px" />
                            </Fit>
                            <Heading margin = "25px 0 0 20px" fit>Created by Facebook</Heading>
                        </Layout>
                        <List margin="150px 0 0 0">
                            <Appear>
                                <ListItem margin="0 0 20px 0">Reusable User Interface</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Super Fast</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Data Model : Easy to reason about</ListItem>
                            </Appear>

                        </List>
                    </Slide>

                    <Slide transition = {['slide']} bgColor="tertiary" textColor="secondary" align="flex-start flex-start">
                        <Text size={1} textAlign="left" margin="0 0 50px 0">Reusable</Text>
                        <Heading size={2} textColor="secondary" textAlign="left" margin="100px 0 0 0">Components</Heading>

                        <List margin="100px 0 0 0">
                            <Appear>
                                <ListItem margin="0 0 20px 0">Plain javascript objects (extends Component)</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">With a catch... JSX</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Reusable - Props</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Stateful</ListItem>
                            </Appear>
                        </List>
                    </Slide>

                    <Slide
                        transition = {['slide']}
                        bgColor="tertiary"
                        textColor="secondary"
                        align="flex-start flex-start"
                        notes="Render method
JSX"
                    >
                        <Text size={1} textAlign="left" margin="0 0 50px 0">Reusable : Components</Text>
                        <CodePane
                            lang="jsx"
                            source = {require('raw!../code/component.code')}
                            margin = "100px 0 0 0"
                        />

                        <Album
                            style = {{marginTop: 50}}
                            img = "https://i.scdn.co/image/912394b1b5a4ddee064db7dc6b53b9eac42a1314"
                            artist = "Darlingside"
                            albumName = "Birds Say"
                        />
                    </Slide>

                    <Slide transition = {['slide']} bgColor="tertiary" textColor="secondary" align="flex-start flex-start">
                        <Text size={1} textAlign="left" margin="0 0 50px 0">Reusable : Components</Text>
                        <Fill>
                            <CodePane
                                lang="jsx"
                                source = {require('raw!../code/multi-component.code')}
                                margin = "100px 0 0 0"
                            />
                        </Fill>
                        <Fit>

                                <Album
                                    style = {{marginTop: 20}}
                                    img = "https://i.scdn.co/image/912394b1b5a4ddee064db7dc6b53b9eac42a1314"
                                    artist = "Darlingside"
                                    albumName = "Birds Say"
                                />
                                <Album
                                    style = {{marginTop: 20}}
                                    img = "https://i.scdn.co/image/912394b1b5a4ddee064db7dc6b53b9eac42a1314"
                                    artist = "Darlingside"
                                    albumName = "Birds Say"
                                />

                        </Fit>
                    </Slide>

                    <Slide
                        transition = {['slide']}
                        bgColor="tertiary"
                        textColor="secondary"
                        align="flex-start flex-start"
                    >
                        <Text size={1} textAlign="left" margin="0 0 50px 0">Reusable : Components</Text>
                        <CodePane
                            lang="jsx"
                            source = {require('raw!../code/component-props.code')}
                            margin = "100px 0 0 0"
                        />

                        <Album
                            style = {{marginTop: 50}}
                            img = "https://i.scdn.co/image/912394b1b5a4ddee064db7dc6b53b9eac42a1314"
                            artist = "Darlingside"
                            albumName = "Birds Say"
                        />
                    </Slide>

                    <Slide
                        transition = {['slide']}
                        bgColor="tertiary"
                        textColor="secondary"
                        align="flex-start flex-start"
                        notes="Render is called when props are updated"
                    >
                        <Text size={1} textAlign="left" margin="0 0 100px 0">Reusable : Components</Text>
                        <Layout>
                            <Fill>
                                <CodePane
                                    lang="jsx"
                                    source = {require('raw!../code/multi-component-props.code')}
                                    margin = "0 0 0 0"
                                />
                            </Fill>
                            <Fit>

                                    <Album
                                        style = {{marginTop: 20}}
                                        img = "https://i.scdn.co/image/912394b1b5a4ddee064db7dc6b53b9eac42a1314"
                                        artist = "Darlingside"
                                        albumName = "Birds Say"
                                    />
                                    <Album
                                        style = {{marginTop: 20}}
                                        img = "https://i.scdn.co/image/0e1dc4ebdc74b8166137c9322a2eccfbadd624b0"
                                        artist = "Darlingside"
                                        albumName = "Pilot Machines"
                                    />

                            </Fit>
                        </Layout>
                    </Slide>

                    <Slide
                        transition = {['slide']}
                        bgColor="tertiary"
                        textColor="secondary"
                        align="flex-start flex-start"
                        notes="All the code for rendering this component is in one place"
                    >
                        <Text size={1} textAlign="left" margin="0 0 50px 0">Reusable : Components</Text>
                        <Layout>
                            <Fill>
                                <CodePane
                                    lang="jsx"
                                    source = {require('raw!../code/component-state.code')}
                                    margin = "0 0 0 0"
                                />
                            </Fill>

                            <Fit>
                                <Album
                                    style = {{marginTop: 50}}
                                    img = "https://i.scdn.co/image/912394b1b5a4ddee064db7dc6b53b9eac42a1314"
                                    artist = "Darlingside"
                                    albumName = "Birds Say"
                                />
                            </Fit>
                        </Layout>
                    </Slide>

                    <Slide transition = {['slide']}>
                        <Heading>Look at the real component</Heading>
                    </Slide>

                    <Slide transition = {['slide']} bgColor="secondary" textColor="primary">
                        <Heading margin="0 0 40px 0" textColor="primary">Performance</Heading>
                        <Appear><Image src={images.superFast.replace('/', '')} height="400px" /></Appear>
                        <Text textColor="primary">React is Super Fast!</Text>
                    </Slide>

                    <Slide
                        transition = {['slide']}
                        notes="Legacy DOM : js first released in netscape
Intermediate DOM was platform specific
W3C standardized in 1998"
                        bgColor="tertiary"
                        textColor="secondary"
                    >
                        <Heading textColor="secondary">A little history:</Heading>
                        <Text textSize="80" textColor="primary">The DOM</Text>
                        <List margin="100px 0 0 0">
                            <Appear>
                                <ListItem margin="0 0 20px 0">1995 : Legacy DOM</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">1997 : Intermediate DOM</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">1998 : Standardization, DOM Level 1</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">2000 : getElementById(), DOM Level 2</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">2004 : Current version, DOM Level 3</ListItem>
                            </Appear>

                        </List>
                    </Slide>

                    <Slide transition = {['slide']} bgColor="tertiary" textColor="secondary">
                        <Heading margin="0 0 40px 0" textColor="secondary">The DOM Sucks!</Heading>
                        <Image src={images.sucks.replace('/', '')} height="250px" />
                    </Slide>

                    <Slide
                        transition = {['slide']}
                        bgColor="secondary"
                        textColor="primary"
                        notes="React creates an in-memory data structure cache, computes the resulting differences, and then updates the browser's displayed DOM efficiently"
                    >
                        <Heading textColor="primary">The Virtual DOM</Heading>
                    </Slide>

                    <Slide transition = {['slide']}>
                        <Heading fit>Performance</Heading>
                        <Text>Only render when you have to</Text>
                    </Slide>

                    <Slide transition = {['slide']} bgColor="tertiary" textColor="primary">
                        <Heading fit textColor="secondary">shouldComponentUpdate()</Heading>
                        <List margin="100px 0 0 0">
                            <ListItem margin="0 0 20px 0">PureRenderMixin</ListItem>
                            <ListItem margin="0 0 20px 0">shallowCompare()</ListItem>
                        </List>
                    </Slide>

                    <Slide
                        transition = {['slide']}
                        bgColor="secondary"
                        textColor="primary"
                    >
                        <Heading textColor="primary">DEMO</Heading>
                    </Slide>

                    <Slide transition = {['slide']}>
                        <Heading fit>Data Model</Heading>
                        <Text>Easy to reason about</Text>
                        <List>
                            <Appear>
                                <ListItem margin="0 0 20px 0">State & Props</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Flux</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Redux</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Relay</ListItem>
                            </Appear>
                        </List>
                    </Slide>

                    <Slide transition = {['slide']} bgColor="tertiary" textColor="primary">
                        <Heading textColor="primary">Flux</Heading>
                        <Image src={images.flux.replace('/', '')} height="250px" />
                    </Slide>

                    <Slide
                        transition = {['slide']}
                        bgColor="secondary"
                        textColor="primary"
                    >
                        <Heading textColor="primary">Redux</Heading>
                        <List>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Super popular! We use this at Synapse!</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Introduces single application store</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Reducers, middleware, dev tools</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Life is awesome!</ListItem>
                            </Appear>

                        </List>
                    </Slide>

                    <Slide transition = {['slide']} bgColor="tertiary" textColor="primary">
                        <Heading textColor="primary">Relay</Heading>
                    </Slide>

                    <Slide
                        transition = {['slide']}
                        bgColor="secondary"
                        textColor="primary"
                    >
                        <Heading textColor="primary">More Demos</Heading>
                    </Slide>

                </Deck>
            </Spectacle>
        );
    }
}
<commit_msg>add info to relay slide<commit_after>// Import React
import React, { Component } from 'react';

// Import Spectacle Core tags
import {
    Appear,
  //BlockQuote,
  //Cite,
    CodePane,
    Deck,
    Fit,
    Fill,
    Heading,
    Image,
    Layout,
  //Link,
    ListItem,
    List,
  //Markdown,
  //Quote,
    Slide,
    Spectacle,
    Text
} from 'spectacle';

import Album from '../components/album';

// Require CSS
require('normalize.css');
require('spectacle/lib/themes/default/index.css');

// Import theme
import createTheme from 'spectacle/lib/themes/default';
import preloader from 'spectacle/lib/utils/preloader';

const theme = createTheme({
    primary : '#40e1ff',
    secondary : 'black',
    tertiary : 'white'
}, {
    primary: 'Helvetica'
});

const pacmanColor = '#247BA0';
theme.screen.progress.pacman.point.borderColor = pacmanColor;
theme.screen.progress.pacman.pacmanTop.background = pacmanColor;
theme.screen.progress.pacman.pacmanBottom.background = pacmanColor;

const images = {
    logo : require('../assets/react-logo-1000-transparent.png'),
    aaron : require('../assets/aaron.png'),
    synapse : require('../assets/synapse.svg'),
    facebook : require('../assets/facebook.png'),
    superFast : require('../assets/super-fast.jpg'),
    sucks : require('../assets/sucks.jpg'),
    flux : require('../assets/flux.png')
};
preloader(images);

export default class Presentation extends Component {
    render() {
        return (
            <Spectacle theme = {theme}>
                <Deck transition = {['zoom', 'slide']} transitionDuration={500}>

                    <Slide transition = {['zoom']} bgColor = "white">
                        <Layout>
                            <Fit>
                                <Image src={images.logo.replace('/', '')} height="250px" />
                            </Fit>
                            <Heading size={1} lineHeight={1} textColor="black" textAlign="center" fit margin = "20px 0 0 0">
                                React
                            </Heading>
                        </Layout>
                        <Heading size={1} fit caps textColor="primary">
                            A javascript library for building user interfaces
                        </Heading>
                        <Text margin = "200px 0 10px 0">A Presentation by Aaron Bruce</Text>
                        <Text>github.com/spruce-bruce</Text>
                        <Text>@TerribleAaron</Text>
                    </Slide>

                    <Slide notes = {"Mention PHP and React meetups"} transition = {['slide']}>
                        <Image src={images.aaron.replace('/', '')} fit display="block" height="500px" />
                        <Text margin="30px 0 0 0">synapsestudios.com</Text>
                    </Slide>

                    <Slide transition = {['slide']} bgColor="secondary" textColor="primary">
                        <Layout>
                            <Fit>
                                <Image src={images.facebook.replace('/', '')} height="100px" />
                            </Fit>
                            <Heading margin = "25px 0 0 20px" fit>Created by Facebook</Heading>
                        </Layout>
                        <List margin="150px 0 0 0">
                            <Appear>
                                <ListItem margin="0 0 20px 0">Reusable User Interface</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Super Fast</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Data Model : Easy to reason about</ListItem>
                            </Appear>

                        </List>
                    </Slide>

                    <Slide transition = {['slide']} bgColor="tertiary" textColor="secondary" align="flex-start flex-start">
                        <Text size={1} textAlign="left" margin="0 0 50px 0">Reusable</Text>
                        <Heading size={2} textColor="secondary" textAlign="left" margin="100px 0 0 0">Components</Heading>

                        <List margin="100px 0 0 0">
                            <Appear>
                                <ListItem margin="0 0 20px 0">Plain javascript objects (extends Component)</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">With a catch... JSX</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Reusable - Props</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Stateful</ListItem>
                            </Appear>
                        </List>
                    </Slide>

                    <Slide
                        transition = {['slide']}
                        bgColor="tertiary"
                        textColor="secondary"
                        align="flex-start flex-start"
                        notes="Render method
JSX"
                    >
                        <Text size={1} textAlign="left" margin="0 0 50px 0">Reusable : Components</Text>
                        <CodePane
                            lang="jsx"
                            source = {require('raw!../code/component.code')}
                            margin = "100px 0 0 0"
                        />

                        <Album
                            style = {{marginTop: 50}}
                            img = "https://i.scdn.co/image/912394b1b5a4ddee064db7dc6b53b9eac42a1314"
                            artist = "Darlingside"
                            albumName = "Birds Say"
                        />
                    </Slide>

                    <Slide transition = {['slide']} bgColor="tertiary" textColor="secondary" align="flex-start flex-start">
                        <Text size={1} textAlign="left" margin="0 0 50px 0">Reusable : Components</Text>
                        <Fill>
                            <CodePane
                                lang="jsx"
                                source = {require('raw!../code/multi-component.code')}
                                margin = "100px 0 0 0"
                            />
                        </Fill>
                        <Fit>

                                <Album
                                    style = {{marginTop: 20}}
                                    img = "https://i.scdn.co/image/912394b1b5a4ddee064db7dc6b53b9eac42a1314"
                                    artist = "Darlingside"
                                    albumName = "Birds Say"
                                />
                                <Album
                                    style = {{marginTop: 20}}
                                    img = "https://i.scdn.co/image/912394b1b5a4ddee064db7dc6b53b9eac42a1314"
                                    artist = "Darlingside"
                                    albumName = "Birds Say"
                                />

                        </Fit>
                    </Slide>

                    <Slide
                        transition = {['slide']}
                        bgColor="tertiary"
                        textColor="secondary"
                        align="flex-start flex-start"
                    >
                        <Text size={1} textAlign="left" margin="0 0 50px 0">Reusable : Components</Text>
                        <CodePane
                            lang="jsx"
                            source = {require('raw!../code/component-props.code')}
                            margin = "100px 0 0 0"
                        />

                        <Album
                            style = {{marginTop: 50}}
                            img = "https://i.scdn.co/image/912394b1b5a4ddee064db7dc6b53b9eac42a1314"
                            artist = "Darlingside"
                            albumName = "Birds Say"
                        />
                    </Slide>

                    <Slide
                        transition = {['slide']}
                        bgColor="tertiary"
                        textColor="secondary"
                        align="flex-start flex-start"
                        notes="Render is called when props are updated"
                    >
                        <Text size={1} textAlign="left" margin="0 0 100px 0">Reusable : Components</Text>
                        <Layout>
                            <Fill>
                                <CodePane
                                    lang="jsx"
                                    source = {require('raw!../code/multi-component-props.code')}
                                    margin = "0 0 0 0"
                                />
                            </Fill>
                            <Fit>

                                    <Album
                                        style = {{marginTop: 20}}
                                        img = "https://i.scdn.co/image/912394b1b5a4ddee064db7dc6b53b9eac42a1314"
                                        artist = "Darlingside"
                                        albumName = "Birds Say"
                                    />
                                    <Album
                                        style = {{marginTop: 20}}
                                        img = "https://i.scdn.co/image/0e1dc4ebdc74b8166137c9322a2eccfbadd624b0"
                                        artist = "Darlingside"
                                        albumName = "Pilot Machines"
                                    />

                            </Fit>
                        </Layout>
                    </Slide>

                    <Slide
                        transition = {['slide']}
                        bgColor="tertiary"
                        textColor="secondary"
                        align="flex-start flex-start"
                        notes="All the code for rendering this component is in one place"
                    >
                        <Text size={1} textAlign="left" margin="0 0 50px 0">Reusable : Components</Text>
                        <Layout>
                            <Fill>
                                <CodePane
                                    lang="jsx"
                                    source = {require('raw!../code/component-state.code')}
                                    margin = "0 0 0 0"
                                />
                            </Fill>

                            <Fit>
                                <Album
                                    style = {{marginTop: 50}}
                                    img = "https://i.scdn.co/image/912394b1b5a4ddee064db7dc6b53b9eac42a1314"
                                    artist = "Darlingside"
                                    albumName = "Birds Say"
                                />
                            </Fit>
                        </Layout>
                    </Slide>

                    <Slide transition = {['slide']}>
                        <Heading>Look at the real component</Heading>
                    </Slide>

                    <Slide transition = {['slide']} bgColor="secondary" textColor="primary">
                        <Heading margin="0 0 40px 0" textColor="primary">Performance</Heading>
                        <Appear><Image src={images.superFast.replace('/', '')} height="400px" /></Appear>
                        <Text textColor="primary">React is Super Fast!</Text>
                    </Slide>

                    <Slide
                        transition = {['slide']}
                        notes="Legacy DOM : js first released in netscape
Intermediate DOM was platform specific
W3C standardized in 1998"
                        bgColor="tertiary"
                        textColor="secondary"
                    >
                        <Heading textColor="secondary">A little history:</Heading>
                        <Text textSize="80" textColor="primary">The DOM</Text>
                        <List margin="100px 0 0 0">
                            <Appear>
                                <ListItem margin="0 0 20px 0">1995 : Legacy DOM</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">1997 : Intermediate DOM</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">1998 : Standardization, DOM Level 1</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">2000 : getElementById(), DOM Level 2</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">2004 : Current version, DOM Level 3</ListItem>
                            </Appear>

                        </List>
                    </Slide>

                    <Slide transition = {['slide']} bgColor="tertiary" textColor="secondary">
                        <Heading margin="0 0 40px 0" textColor="secondary">The DOM Sucks!</Heading>
                        <Image src={images.sucks.replace('/', '')} height="250px" />
                    </Slide>

                    <Slide
                        transition = {['slide']}
                        bgColor="secondary"
                        textColor="primary"
                        notes="React creates an in-memory data structure cache, computes the resulting differences, and then updates the browser's displayed DOM efficiently"
                    >
                        <Heading textColor="primary">The Virtual DOM</Heading>
                    </Slide>

                    <Slide transition = {['slide']}>
                        <Heading fit>Performance</Heading>
                        <Text>Only render when you have to</Text>
                    </Slide>

                    <Slide transition = {['slide']} bgColor="tertiary" textColor="primary">
                        <Heading fit textColor="secondary">shouldComponentUpdate()</Heading>
                        <List margin="100px 0 0 0">
                            <ListItem margin="0 0 20px 0">PureRenderMixin</ListItem>
                            <ListItem margin="0 0 20px 0">shallowCompare()</ListItem>
                        </List>
                    </Slide>

                    <Slide
                        transition = {['slide']}
                        bgColor="secondary"
                        textColor="primary"
                    >
                        <Heading textColor="primary">DEMO</Heading>
                    </Slide>

                    <Slide transition = {['slide']}>
                        <Heading fit>Data Model</Heading>
                        <Text>Easy to reason about</Text>
                        <List>
                            <Appear>
                                <ListItem margin="0 0 20px 0">State & Props</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Flux</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Redux</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Relay</ListItem>
                            </Appear>
                        </List>
                    </Slide>

                    <Slide transition = {['slide']} bgColor="tertiary" textColor="primary">
                        <Heading textColor="primary">Flux</Heading>
                        <Image src={images.flux.replace('/', '')} height="250px" />
                    </Slide>

                    <Slide
                        transition = {['slide']}
                        bgColor="secondary"
                        textColor="primary"
                    >
                        <Heading textColor="primary">Redux</Heading>
                        <List>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Super popular! We use this at Synapse!</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Introduces single application store</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Reducers, middleware, dev tools</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Life is awesome!</ListItem>
                            </Appear>

                        </List>
                    </Slide>

                    <Slide transition = {['slide']} bgColor="tertiary" textColor="primary">
                        <Heading textColor="primary">Relay</Heading>
                        <List>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Single application state, like redux</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Components declare the data they're interested in</ListItem>
                            </Appear>
                            <Appear>
                                <ListItem margin="0 0 20px 0">Relay handles communication with the server (GraphQL)</ListItem>
                            </Appear>
                        </List>
                    </Slide>

                    <Slide
                        transition = {['slide']}
                        bgColor="secondary"
                        textColor="primary"
                    >
                        <Heading textColor="primary">More Demos</Heading>
                    </Slide>

                </Deck>
            </Spectacle>
        );
    }
}
<|endoftext|>


<commit_before>'use strict';

// MODULES //

var fs = require( 'fs' );

// MAIN //

/**
* Asynchronously reads the contents of a directory.
*
* @param {(string|Buffer)} path - directory path
* @param {Function} clbk - callback to invoke after reading directory contents
*
* @example
* function onRead( error, data ) {
*     if ( error ) {
*         console.error( error );
*     } else {
*         console.log( data );
*     }
* }
* readDir( __dirname, onRead );
*/
function readDir() {
	var args;
	var i;
	args = new Array( arguments.length );
	for ( i = 0; i < args.length; i++ ) {
		args[ i ] = arguments[ i ];
	}
	fs.readdir.apply( null, args );
} // end FUNCTION readDir()

// EXPORTS //

module.exports = readDir;

<commit_msg>Remove trailing newlines<commit_after>'use strict';

// MODULES //

var fs = require( 'fs' );

// MAIN //

/**
* Asynchronously reads the contents of a directory.
*
* @param {(string|Buffer)} path - directory path
* @param {Function} clbk - callback to invoke after reading directory contents
*
* @example
* function onRead( error, data ) {
*     if ( error ) {
*         console.error( error );
*     } else {
*         console.log( data );
*     }
* }
* readDir( __dirname, onRead );
*/
function readDir() {
	var args;
	var i;
	args = new Array( arguments.length );
	for ( i = 0; i < args.length; i++ ) {
		args[ i ] = arguments[ i ];
	}
	fs.readdir.apply( null, args );
} // end FUNCTION readDir()

// EXPORTS //

module.exports = readDir;
<|endoftext|>


<commit_before>// Import React
import React from "react";

// Import Spectacle Core tags
import {
  Appear, BlockQuote, Cite, Deck, Heading, Layout, Fill, ListItem, List, Quote, Slide,
  Text, Table, TableHeaderItem, TableItem, TableRow
} from "spectacle";

import FontAwesome from 'react-fontawesome';

import Caseify from './Components/Caseify.jsx';

// Import image preloader util
import preloader from "spectacle/lib/utils/preloader";

// Import theme
import createTheme from "spectacle/lib/themes/default";

// Require CSS
require("normalize.css");
require("spectacle/lib/themes/default/index.css");

const images = {
  city: require("../assets/city.jpg"),
  kat: require("../assets/kat.png"),
  logo: require("../assets/formidable-logo.svg"),
  markdown: require("../assets/markdown.png"),
  yo: require("../assets/foto_presentacion.jpg")
};

preloader(images);

const theme = createTheme({
  primary: "white",
  secondary: "#1F2022",
  tertiary: "#03A9FC",
  quartenary: "#CECECE"
}, {
  primary: "Montserrat",
  secondary: "Helvetica"
});

export default class Presentation extends React.Component {
  render() {
    return (
      <Deck transition={["slide"]} transitionDuration={500} theme={theme}>
        <Slide bgColor="primary">
					<Heading size={1} fit lineHeight={1} textColor="secondary">RESTful APIs</Heading>
					<Text margin="10px 0 0" textColor="tertiary" size={6} bold>Buenas prácticas</Text>
				</Slide>

        <Slide bgColor="black">
					<Heading size={1} caps fit textColor="primary" textFont="primary">Quién soy?</Heading>
          <List textColor="primary">
					  <Appear><ListItem textColor="primary">Juan Manuel Cruz</ListItem></Appear>
            <Appear><ListItem textColor="primary">Estudiante</ListItem></Appear>
            <Appear><ListItem textColor="primary">Desarrollador</ListItem></Appear>
            <Appear><ListItem textColor="primary">Autodidacta</ListItem></Appear>
            <Appear><ListItem textColor="primary">Hacker</ListItem></Appear>
					</List>
					<Appear><Text textColor="tertiary"><FontAwesome name="twitter" size="lg"/> wroughtbywind</Text></Appear>
          <Appear><Text textColor="primary"><FontAwesome name="github" size="lg"/> Malows</Text></Appear>
				</Slide>

        <Slide bgColor="primary">
          <Heading size={3} fit lineHeight={1} textColor="secondary">¿Por qué usar APIs RESTful?</Heading>
          <List>
            <Appear><Text margin="30px 10px" textColor="tertiary" size={6}>Proque son geniales</Text></Appear>
            <Appear><Text margin="30px 10px" textColor="tertiary" size={6}>
              {"Porque la carga de transferencia en aplicaciones web isomorfas se hace solo al principio. Luego de la carga inicial solo se transfieren datos"}
            </Text></Appear>
          </List>
        </Slide>

        <Slide>
          <Heading size={1} lineHeight={1} textColor="secondary">{"???"}</Heading>
        </Slide>

        <Slide>
          <Heading size={3} lineHeight={1} textColor="secondary">{"¿Qué son?"}</Heading>

            <Quote textSize={36} lineHeight={1} textColor="secondary">
              Un conjunto de protocolos y estándares que sirven para intercambiar datos entre aplicaciones
            </Quote>

              Wikipedia

          <Appear>
            <Text size={6}>Es una aplicación que se encarga de brindar información o otras aplicaciones</Text>
          </Appear>
        </Slide>

        <Slide>
          <Heading size={3} lineHeight={2} textColor="secondary">¿Qué tiene de bueno?</Heading>
          <Appear>
            <Text size={6}>
              Me permite acceder a datos de los cuales puedo o no ser dueño y
              consumirlos con aplicaciones de manera sencilla
            </Text>
          </Appear>
          <Appear><Text size={6} margin="1em 0">Por ejemplo</Text></Appear>
          <Appear>
            <List>
              <ListItem>El precio de divisas extranjeras</ListItem>
              <ListItem>Datos climatológicos</ListItem>
              <ListItem>Información de perfiles públicos</ListItem>
              <ListItem>Datos estatales públicos</ListItem>
            </List>
          </Appear>
        </Slide>

        <Slide>
          <Heading size={3} lineHeight={2} textColor="secondary">{"¿Qué más?"}</Heading>
          <Appear><Text size={6} margin="30px 0">Desacoplar dependecias estructurales y unificar la existencia de los datos</Text></Appear>
          <Appear>
            <Text size={6} margin="30px 0" textColor="tertiary" bold>
              Puedo tener todos los datos en una sola API, y tener una app web, una mobile y una de escritorio.
              Y que todas las aplicaciones usen los datos de la API, sin tener que tenerlos almacenados en
              lugares diferentes, repetidos o preocuparme de su sincronización
            </Text>
          </Appear>
        </Slide>

        <Slide>
          <Heading size={3}>Cosas a tener en cuenta en todo momento de su desarrollo</Heading>
          <List>
            <ListItem size={5}>DRY</ListItem>
            <ListItem size={5}>Tiempo de desarrollo por app menor</ListItem>
            <ListItem size={5}>Reducción en la transferencia de datos</ListItem>
            <ListItem size={5}>Cacheable</ListItem>
            <ListItem size={5}>Mayor tiempo total de desarrollo en app pequeñas</ListItem>
          </List>
        </Slide>

        <Slide>
          <Heading size={3} textColor="secondary">Nociones generales</Heading>
          <List>
            <Appear><ListItem>Funcionamiento</ListItem></Appear>
            <Appear><ListItem>Estética</ListItem></Appear>
            <Appear><ListItem>Seguridad</ListItem></Appear>
            <Appear><ListItem>Flexibilidad</ListItem></Appear>
          </List>
        </Slide>

        <Slide>
          <Text margin="2em 0">Toda pieza de software debería ser tan buena como su documentación</Text>
          <Text margin="2em 0">Si nuestro software no esta bien documentado, es menos probable que sea utilizado</Text>
        </Slide>

        <Slide>
          <Heading size={2}>Funcionamiento</Heading>
        </Slide>

        <Slide>
          <Heading size={3}>I'm the resources buisness</Heading>
          <Text>Todo tipo de respuestas es llamado recurso, aún si es un error. Y todo recurso debe ser devuelto, sea cual sea la dirección solicitada</Text>
        </Slide>

        <Slide bgColor="tertiary">

            <TableRow>
              <TableHeaderItem>Acción</TableHeaderItem>
              <TableHeaderItem>Verbo</TableHeaderItem>
              <TableHeaderItem>Ruta</TableHeaderItem>
            </TableRow>
            <Appear>
              <TableRow>
                <TableItem>Listar</TableItem>
                <Appear><TableItem>GET</TableItem></Appear>
                <Appear><TableItem>...com/recursos/articulos</TableItem></Appear>
              </TableRow>
            </Appear>
            <Appear>
              <TableRow>
                <TableItem>Crear</TableItem>
                <Appear><TableItem>POST</TableItem></Appear>
                <Appear><TableItem>...com/recursos/articulos</TableItem></Appear>
              </TableRow>
            </Appear>
            <Appear>
              <TableRow>
                <TableItem>Leer</TableItem>
                <Appear><TableItem>GET</TableItem></Appear>
                <Appear><TableItem>...com/recursos/articulos/id</TableItem></Appear>
              </TableRow>
            </Appear>
            <Appear>
              <TableRow>
                <TableItem>Editar</TableItem>
                <Appear><TableItem>PUT</TableItem></Appear>
                <Appear><TableItem>...com/recursos/articulos/id</TableItem></Appear>
              </TableRow>
            </Appear>
            <Appear>
              <TableRow>
                <TableItem>Borrar</TableItem>
                <Appear><TableItem>DELETE</TableItem></Appear>
                <Appear><TableItem>...com/recursos/articulos/id</TableItem></Appear>
              </TableRow>
            </Appear>
            <Appear>
              <TableRow>
                <TableItem>Actualización</TableItem>
                <Appear><TableItem>PATCH</TableItem></Appear>
                <Appear><TableItem>...com/recursos/articulos/id</TableItem></Appear>
              </TableRow>
            </Appear>

        </Slide>

        <Slide>
          <Heading size={3}>URI Friendly</Heading>
          <Text>
            Como trabajamos con distintas URIs para navegar nuestra API,
            deben ser claras y no quedar duda alguna del funcionamiento asociado
            a la URI para que se pueda consumir facilmente la API
          </Text>
        </Slide>

        <Slide>
          <Heading size={3}>Otros verbos HTTP?</Heading>

            <TableRow>
              <TableHeaderItem>Verbo</TableHeaderItem>
              <TableHeaderItem></TableHeaderItem>
            </TableRow>
            <TableRow>
              <TableItem>OPTIONS</TableItem>
              <TableItem>Devuelvo los metodos HTTP que puedo usar a la URL asociada</TableItem>
            </TableRow>
            <TableRow>
              <TableItem>PURGE</TableItem>
              <TableItem>Flush de caché sobre los recursos apuntados</TableItem>
            </TableRow>

        </Slide>

        <Slide>
          <Heading size={1}>FIN</Heading>
        </Slide>
      </Deck>
    );
  }
}
<commit_msg>Diapo 18 Y si no es CRUD + mods<commit_after>// Import React
import React from "react";

// Import Spectacle Core tags
import {
  Appear, BlockQuote, Cite, Deck, Heading, Layout, Fill, ListItem, List, Quote, Slide,
  Text, Table, TableHeaderItem, TableItem, TableRow
} from "spectacle";

import FontAwesome from 'react-fontawesome';

import Caseify from './Components/Caseify.jsx';

// Import image preloader util
import preloader from "spectacle/lib/utils/preloader";

// Import theme
import createTheme from "spectacle/lib/themes/default";

// Require CSS
require("normalize.css");
require("spectacle/lib/themes/default/index.css");

const images = {
  city: require("../assets/city.jpg"),
  kat: require("../assets/kat.png"),
  logo: require("../assets/formidable-logo.svg"),
  markdown: require("../assets/markdown.png"),
  yo: require("../assets/foto_presentacion.jpg")
};

preloader(images);

const theme = createTheme({
  primary: "white",
  secondary: "#1F2022",
  tertiary: "#03A9FC",
  quartenary: "#CECECE"
}, {
  primary: "Montserrat",
  secondary: "Helvetica"
});

export default class Presentation extends React.Component {
  render() {
    return (
      <Deck transition={["slide"]} transitionDuration={500} theme={theme}>
        <Slide bgColor="primary">
					<Heading size={1} fit lineHeight={1} textColor="secondary">RESTful APIs</Heading>
					<Text margin="10px 0 0" textColor="tertiary" size={6} bold>Buenas prácticas</Text>
				</Slide>

        <Slide bgColor="black">
					<Heading size={1} caps fit textColor="primary" textFont="primary">Quién soy?</Heading>
          <List textColor="primary">
					  <Appear><ListItem textColor="primary">Juan Manuel Cruz</ListItem></Appear>
            <Appear><ListItem textColor="primary">Estudiante</ListItem></Appear>
            <Appear><ListItem textColor="primary">Desarrollador</ListItem></Appear>
            <Appear><ListItem textColor="primary">Autodidacta</ListItem></Appear>
            <Appear><ListItem textColor="primary">Hacker</ListItem></Appear>
					</List>
					<Appear><Text textColor="tertiary"><FontAwesome name="twitter" size="lg"/> wroughtbywind</Text></Appear>
          <Appear><Text textColor="primary"><FontAwesome name="github" size="lg"/> Malows</Text></Appear>
				</Slide>

        <Slide bgColor="primary">
          <Heading size={3} fit lineHeight={1} textColor="secondary">¿Por qué usar APIs RESTful?</Heading>
          <List>
            <Appear><Text margin="30px 10px" textColor="tertiary" size={6}>Proque son geniales</Text></Appear>
            <Appear><Text margin="30px 10px" textColor="tertiary" size={6}>
              {"Porque la carga de transferencia en aplicaciones web isomorfas se hace solo al principio. Luego de la carga inicial solo se transfieren datos"}
            </Text></Appear>
          </List>
        </Slide>

        <Slide>
          <Heading size={1} lineHeight={1} textColor="secondary">{"???"}</Heading>
        </Slide>

        <Slide>
          <Heading size={3} lineHeight={1} textColor="secondary">{"¿Qué son?"}</Heading>

            <Quote textSize={36} lineHeight={1} textColor="secondary">
              Un conjunto de protocolos y estándares que sirven para intercambiar datos entre aplicaciones
            </Quote>

              Wikipedia

          <Appear>
            <Text size={6}>Es una aplicación que se encarga de brindar información o otras aplicaciones</Text>
          </Appear>
        </Slide>

        <Slide>
          <Heading size={3} lineHeight={2} textColor="secondary">¿Qué tiene de bueno?</Heading>
          <Appear>
            <Text size={6}>
              Me permite acceder a datos de los cuales puedo o no ser dueño y
              consumirlos con aplicaciones de manera sencilla
            </Text>
          </Appear>
          <Appear><Text size={6} margin="1em 0">Por ejemplo</Text></Appear>
          <Appear>
            <List>
              <ListItem>El precio de divisas extranjeras</ListItem>
              <ListItem>Datos climatológicos</ListItem>
              <ListItem>Información de perfiles públicos</ListItem>
              <ListItem>Datos estatales públicos</ListItem>
            </List>
          </Appear>
        </Slide>

        <Slide>
          <Heading size={3} lineHeight={2} textColor="secondary">{"¿Qué más?"}</Heading>
          <Appear><Text size={6} margin="30px 0">Desacoplar dependecias estructurales y unificar la existencia de los datos</Text></Appear>
          <Appear>
            <Text size={6} margin="30px 0" textColor="tertiary" bold>
              Puedo tener todos los datos en una sola API, y tener una app web, una mobile y una de escritorio.
              Y que todas las aplicaciones usen los datos de la API, sin tener que tenerlos almacenados en
              lugares diferentes, repetidos o preocuparme de su sincronización
            </Text>
          </Appear>
        </Slide>

        <Slide>
          <Heading size={3}>Cosas a tener en cuenta en todo momento de su desarrollo</Heading>
          <List>
            <ListItem size={5}>DRY</ListItem>
            <ListItem size={5}>Tiempo de desarrollo por app menor</ListItem>
            <ListItem size={5}>Reducción en la transferencia de datos</ListItem>
            <ListItem size={5}>Cacheable</ListItem>
            <ListItem size={5}>Mayor tiempo total de desarrollo en app pequeñas</ListItem>
          </List>
        </Slide>

        <Slide>
          <Heading size={3} textColor="secondary">Nociones generales</Heading>
          <List>
            <Appear><ListItem>Funcionamiento</ListItem></Appear>
            <Appear><ListItem>Estética</ListItem></Appear>
            <Appear><ListItem>Seguridad</ListItem></Appear>
            <Appear><ListItem>Flexibilidad</ListItem></Appear>
          </List>
        </Slide>

        <Slide>
          <Text margin="2em 0">Toda pieza de software debería ser tan buena como su documentación</Text>
          <Text margin="2em 0">Si nuestro software no esta bien documentado, es menos probable que sea utilizado</Text>
        </Slide>

        <Slide>
          <Heading size={2}>Funcionamiento</Heading>
        </Slide>

        <Slide>
          <Heading size={3}>I'm the resources buisness</Heading>
          <Text>Todo tipo de respuestas es llamado recurso, aún si es un error. Y todo recurso debe ser devuelto, sea cual sea la dirección solicitada</Text>
        </Slide>

        <Slide bgColor="tertiary">

            <TableRow>
              <TableHeaderItem>Acción</TableHeaderItem>
              <TableHeaderItem>Verbo</TableHeaderItem>
              <TableHeaderItem>Ruta</TableHeaderItem>
            </TableRow>
            <Appear>
              <TableRow>
                <TableItem>Crear</TableItem>
                <Appear><TableItem>POST</TableItem></Appear>
                <Appear><TableItem>...com/recursos/articulos</TableItem></Appear>
              </TableRow>
            </Appear>
            <Appear>
              <TableRow>
                <TableItem>Leer</TableItem>
                <Appear><TableItem>GET</TableItem></Appear>
                <Appear><TableItem>...com/recursos/articulos/id</TableItem></Appear>
              </TableRow>
            </Appear>
            <Appear>
              <TableRow>
                <TableItem>Editar</TableItem>
                <Appear><TableItem>PUT</TableItem></Appear>
                <Appear><TableItem>...com/recursos/articulos/id</TableItem></Appear>
              </TableRow>
            </Appear>
            <Appear>
              <TableRow>
                <TableItem>Borrar</TableItem>
                <Appear><TableItem>DELETE</TableItem></Appear>
                <Appear><TableItem>...com/recursos/articulos/id</TableItem></Appear>
              </TableRow>
            </Appear>

        </Slide>

        <Slide bgColor="tertiary">

            <TableRow>
              <TableHeaderItem>Acción</TableHeaderItem>
              <TableHeaderItem>Verbo</TableHeaderItem>
              <TableHeaderItem>Ruta</TableHeaderItem>
            </TableRow>
            <Appear>
              <TableRow>
                <TableItem>Listar</TableItem>
                <Appear><TableItem>GET</TableItem></Appear>
                <Appear><TableItem>...com/recursos/articulos</TableItem></Appear>
              </TableRow>
            </Appear>
            <Appear>
              <TableRow>
                <TableItem>Actualización</TableItem>
                <Appear><TableItem>PATCH</TableItem></Appear>
                <Appear><TableItem>...com/recursos/articulos/id</TableItem></Appear>
              </TableRow>
            </Appear>

        </Slide>

        <Slide>
          <Heading size={3}>URI Friendly</Heading>
          <Text>
            Como trabajamos con distintas URIs para navegar nuestra API,
            deben ser claras y no quedar duda alguna del funcionamiento asociado
            a la URI para que se pueda consumir facilmente la API
          </Text>
        </Slide>

        <Slide>
          <Heading size={3}>Otros verbos HTTP?</Heading>
          <List>
            <ListItem>OPTIONS</ListItem>
            <ListItem>PURGE</ListItem>
          </List>
          <Appear>
            <Text>
              Options nos devuelve que métodos HTTP podemos llamar en la dirección que apuntamos
            </Text>
          </Appear>
          <Appear>
            <Text>
              Pruge no es un método estandar, se usa para sistemas de caché, elimina
              los archivos de chaché que podamos tener al recurso asociado y fuerza
              una creación de nuevos archivos de caché
            </Text>
          </Appear>
        </Slide>

        <Slide bgColor="tertiary">
          <Heading size={3}>Y si no es CRUD?</Heading>
          <Appear>
            <Text>
              Intento restructurar la acción y tratarla como un parámetro
            </Text>
          </Appear>
          <Appear>
            <Text textColor="primary">
              GET ...com/recursos/articulos?filter=nuevos
            </Text>
          </Appear>
          <Appear>
            <Text textColor="primary">
              POST ...twitter.com/friendships/create.json?user_id=####&follow=true
            </Text>
          </Appear>
          <Appear>
            <Text>Tratar la acción como un sub-recurso</Text>
          </Appear>
          <Appear>
            <Text textColor="primary">
              PUT ...gists/:id/star
            </Text>
          </Appear>
          <Appear>
            <Text textColor="primary">
              DELETE ...gists/:id/unstar
            </Text>
          </Appear>
        </Slide>

        <Slide bgColor="tertiary">
          <Heading size={3}>Y si no es CRUD?</Heading>
          <Text>
            Si aún no nos convence el resultado, el método es muy complejo o los
            parámetros lo vuelven poco legible
          </Text>
          <Appear>
            <Text>Dejarlo como esta es lo más sano</Text>
          </Appear>
          <Appear>
            <Text textColor="primary">.../search</Text>
          </Appear>
        </Slide>

        <Slide>
          <Heading size={1}>FIN</Heading>
        </Slide>
      </Deck>
    );
  }
}
<|endoftext|>


<commit_before>import React from "react";
import { render } from "react-dom";

import {
  Appear, BlockQuote, Cite, CodePane, Deck, Fill,
  Heading, Image, Layout, Link, ListItem, List, Markdown, Quote, Slide, Spectacle, Text
} from "src";

import preloader from "src/utils/preloader";

require("normalize.css");
require("src/themes/default/index.css");

const slideTransition = ['spin', 'zoom'];
const images = {
  javascript: require("assets/javascript.jpg"),
  javascript2: require("assets/javascript2.jpg"),
  logo: require("assets/logo.png"),
  kanban: require("assets/kanban.gif"),
  moduleCounts: require("assets/module_counts.png"),
  redmonk: require("assets/redmonk.png"),
  jobs: require("assets/jobs.png"),
  jobTitles: require("assets/jobTitles.png"),
  jackie: require("assets/jackie.png"),
  indieBundle: require("assets/indiebundle.png"),
  markdown: require("assets/markdown.png"),
  github: require("assets/github.png"),
  covers: require("assets/covers.jpg"),
  openClosed: require("assets/open_closed.jpg")
};

preloader([images.moduleCounts, images.redmonk, images.jobs]);

render(
  <Spectacle>
    <Deck transition={slideTransition} transitionDuration={500}>
      <Slide transition={["zoom"]} bgColor="primary">
        <Heading size={1} fit caps lineHeight={1} textColor="black">
          How to write a book and
        </Heading>
        <Heading size={1} fit>
          SurviveJS it
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="tertiary">
        <Heading caps fit size={1} textColor="primary">
          JavaScript Usage on Sites
        </Heading>
        <Markdown>
          {`
* 2011 - 38.2%
* 2013 - 60.4%
* 2015 - 70.5%
* Source: [W3Techs](http://w3techs.com/technologies/history_overview/javascript_library/all/y)
          `}
        </Markdown>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary"
        notes="

Popular

Same goes for AltJS

">
        <Layout>
          <Link href="http://redmonk.com/jgovernor/2015/07/31/programming-language-rankings-summer-2015/">
            <Image src={images.redmonk.replace("/", "")} />
          </Link>
        </Layout>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary"
        notes="

Amazing growth rate.

At this rate bigger than others combined.

">
        <Heading size={1} textColor="tertiary">
          Module Counts
        </Heading>
        <Layout>
          <Image src={images.moduleCounts.replace("/", "")} padding="20px" />
        </Layout>
        <Layout>
          <Text>
            <Link href="http://www.modulecounts.com/">modulecounts.com</Link>
          </Text>
        </Layout>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary"
        notes="

Angular dominates the work market.

Early signs of React.

">
        <Heading size={1} textColor="tertiary">
          Job Trends
        </Heading>
        <Layout>
          <Image src={images.jobs.replace("/", "")} padding="20px" />
        </Layout>
        <Layout>
          <Text>
            <Link href="http://www.indeed.com/jobtrends?q=Angularjs%2C+React.js%2C+Knockout%2C+Backbone.js&l=">Indeed</Link>
          </Text>
        </Layout>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary"
        notes="

Also job titles change.

Increasing demand for full stack developers.

">
        <Heading size={1} textColor="tertiary">
          Job Trends II
        </Heading>
        <Layout>
          <Image src={images.jobTitles.replace("/", "")} padding="20px" />
        </Layout>
        <Layout>
          <Text>
            <Link href="http://www.indeed.com/jobanalytics/jobtrends?q=frontend%2C+backend%2C+full+stack&l=">Indeed</Link>
          </Text>
        </Layout>
      </Slide>

      <Slide transition={slideTransition} bgColor="black">

          <Quote>Average salary of a React developer in SF - $153k</Quote>
          <Link href="http://www.indeed.com/salary?q1=React+Js+Front+End+Engineer&l1=San+Francisco%2C+CA">Indeed</Link>

      </Slide>

      <Slide transition={slideTransition} bgColor="black">

          <Quote>Always bet on JS!</Quote>
          Brendan Eich

      </Slide>

      <Slide transition={slideTransition} bgColor="black" notes="">
        <Image src={images.javascript.replace("/", "")} margin="0px auto 40px" height="650px"/>
      </Slide>

      <Slide transition={slideTransition} bgColor="black" notes="">
        <Image src={images.jackie.replace("/", "")} margin="0px auto 40px" height="381px"/>
      </Slide>

      <Slide transition={slideTransition} bgColor="black" notes="">
        <Image src={images.javascript2.replace("/", "")} margin="0px auto 40px" height="650px"/>
      </Slide>

      <Slide transition={slideTransition} bgColor="white" notes="">
        <Image src={images.logo.replace("/", "")} margin="0px auto 40px" height="566px"/>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary">
        <Heading size={1} fit lineHeight={1} textColor="black">
          SurviveJS
        </Heading>
        <Heading size={1} fit>
          Webpack and React
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="black" notes="">
        <Image src={images.kanban.replace("/", "")} margin="0px auto 40px" height="279px"/>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary">
        <Heading size={1} fit>
          Technology
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary" notes="">
        <Image src={images.markdown.replace("/", "")} margin="0px auto 40px" height="127px"/>
      </Slide>

      <Slide transition={slideTransition} bgColor="tertiary" notes="">
        <Image src={images.github.replace("/", "")} margin="0px auto 40px" height="209px"/>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary">

      </Slide>

      <Slide transition={slideTransition} bgColor="primary">

      </Slide>

      <Slide transition={slideTransition} bgColor="primary">
        <Heading size={1} fit>
          Process
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="tertiary">
        <Heading caps size={1} textColor="primary">
          Drivers
        </Heading>
        <Markdown>
          {`
* Passion, interest in topic
* Community (readers, collaborators, my editor)
* Money (validates product, allows to continue)
          `}
        </Markdown>
      </Slide>

      <Slide transition={slideTransition} bgColor="tertiary">
        <Heading caps size={1} textColor="primary">
          Release Process
        </Heading>
        <Markdown>
          {`
* Modeled after open source software development
* Fast, light releases (weekly first, monthly now)
* 1.0.0, 1.1.0, ..., 1.9.7, 1.9.10
* Release notes through the blog
* Continuous improvement based on feedback
          `}
        </Markdown>
      </Slide>

      <Slide transition={slideTransition} bgColor="tertiary" notes="">
        <Image src={images.covers.replace("/", "")} margin="0px auto 40px" height="600px"/>
      </Slide>

      <Slide transition={slideTransition} bgColor="tertiary">
        <Heading caps fit size={1} textColor="primary">
          Process Results
        </Heading>
        <Markdown>
          {`
* Higher quality than I could have ever reached on my own
* 223+ pages, 42k+ words, 15 chapters
* 600+ readers at Leanpub
* Thousands outside (60k+ visitors per month)
* Tens of contributors (GitHub issues, Disqus, direct feedback, Gitter, ...)
          `}
        </Markdown>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary">
        <Heading size={1} fit>
          Marketing
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary">

      </Slide>

      <Slide transition={slideTransition} bgColor="tertiary">
        <Heading caps fit size={1} textColor="primary">
          Marketing Channels
        </Heading>
        <Markdown>
          {`
* [GitHub](https://github.com/survivejs/webpack_react) - 1708 commits, 23+ contributors, 206 closed issues, 634 stars, 110 forks
* [Twitter](https://twitter.com/survivejs) - 700+ followers
* [Leanpub](https://leanpub.com/survivejs_webpack_react) - 600+ readers, featured 4 times, amongst weekly bestsellers
* MailChimp - ~200 subscribers
* Guest posts
          `}
        </Markdown>
      </Slide>

      <Slide transition={slideTransition} bgColor="tertiary">
        <Heading caps fit size={1} textColor="primary">
          Marketing Results
        </Heading>
        <Markdown>
          {`
* [Alexa](http://www.alexa.com/siteinfo/survivejs.com) - Top 300k
* [SimilarWeb](http://www.similarweb.com/website/survivejs.com) - Estimated traffic, 60k+ visits per month
* Estimated PageRank: 3 - Aiming for 4
* [Blog](http://survivejs.com/blog/) - 20+ posts, 9 interviews
* [Gitter](https://gitter.im/survivejs/webpack_react) - ~140 people
* [Reactiflux](http://www.reactiflux.com/) - Thousands of people
          `}
        </Markdown>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary">
        <Heading size={1} fit>
          Sales
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="tertiary">
        <Heading caps fit size={1} textColor="primary">
          From Zero to $10k
        </Heading>
        <Markdown>
          {`
* Started selling at April
* First, free "sale" on 11th
* First paid one on 12th, $8.5
* Hit $1k around July → [Crisis of faith](http://survivejs.com/blog/the-story-so-far/)
* Currently sales hover around $100 per day
* Gradually raised price level to $19.99 per book
* $10k total sales in sight. Not much but not little either.
          `}
        </Markdown>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary">
        <Heading size={1} fit>
          1$ == ~0.5€
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary">
        <Heading size={1} fit>
          Business Models
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgImage={images.openClosed.replace("/", "")} bgDarken={0.5}>
        <Layout>
          <Fill>
            <Heading size={4} caps textColor="secondary" bgColor="white" margin={10}>
              Open
            </Heading>
            <Markdown style={{color: "white"}}>
          {`
* Easier to market
* Easier to collaborate
* Harder to monetize
          `}
            </Markdown>
          </Fill>
          <Fill>
            <Heading size={4} caps textColor="secondary" bgColor="white" margin={10}>
              Closed
            </Heading>
            <Markdown style={{color: "white"}}>
          {`
* Harder to market
* Harder to collaborate
* Easier to monetize
          `}
            </Markdown>
          </Fill>
        </Layout>
      </Slide>

      <Slide transition={slideTransition} bgColor="secondary">
        <Heading size={1} fit>
          Open + Closed = Open Source++
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="secondary">
        <Heading size={1} fit>
          Upsell
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary">
        <Heading size={1} fit>
          What next?
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="secondary">
        <Heading size={1} fit>
          Amazon (CreateSpace), iBooks, ???
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="secondary">
        <Heading size={1} fit>
          More content
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="secondary">
        <Heading size={1} fit>
          Webpack/React Cookbook Reimagined
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="secondary">
        <Heading size={1} fit>
          jster.net 2.0
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="secondary">
        <Heading size={1} fit>
          Antwar 1.0
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="black" notes="">
        <Link href="http://www.reactindiebundle.com/">
          <Image src={images.indieBundle.replace("/", "")} margin="0px auto 40px" height="600px"/>
        </Link>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary">
        <Heading caps fit size={1} textColor="tertiary">
          Questions?
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="tertiary">
        <Heading size={1} caps fit textColor="primary">
          Made with sisu in Finland by
        </Heading>
        <Link href="https://twitter.com/bebraw">
          <Heading caps fit size={2} textColor="secondary">
            Juho Vepsäläinen
          </Heading>
        </Link>
      </Slide>
    </Deck>
  </Spectacle>
, document.getElementById("root"));
<commit_msg>Add lessons learned<commit_after>import React from "react";
import { render } from "react-dom";

import {
  Appear, BlockQuote, Cite, CodePane, Deck, Fill,
  Heading, Image, Layout, Link, ListItem, List, Markdown, Quote, Slide, Spectacle, Text
} from "src";

import preloader from "src/utils/preloader";

require("normalize.css");
require("src/themes/default/index.css");

const slideTransition = ['spin', 'zoom'];
const images = {
  javascript: require("assets/javascript.jpg"),
  javascript2: require("assets/javascript2.jpg"),
  logo: require("assets/logo.png"),
  kanban: require("assets/kanban.gif"),
  moduleCounts: require("assets/module_counts.png"),
  redmonk: require("assets/redmonk.png"),
  jobs: require("assets/jobs.png"),
  jobTitles: require("assets/jobTitles.png"),
  jackie: require("assets/jackie.png"),
  indieBundle: require("assets/indiebundle.png"),
  markdown: require("assets/markdown.png"),
  github: require("assets/github.png"),
  covers: require("assets/covers.jpg"),
  openClosed: require("assets/open_closed.jpg")
};

preloader([images.moduleCounts, images.redmonk, images.jobs]);

render(
  <Spectacle>
    <Deck transition={slideTransition} transitionDuration={500}>
      <Slide transition={["zoom"]} bgColor="primary">
        <Heading size={1} fit caps lineHeight={1} textColor="black">
          How to write a book and
        </Heading>
        <Heading size={1} fit>
          SurviveJS it
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="tertiary">
        <Heading caps fit size={1} textColor="primary">
          JavaScript Usage on Sites
        </Heading>
        <Markdown>
          {`
* 2011 - 38.2%
* 2013 - 60.4%
* 2015 - 70.5%
* Source: [W3Techs](http://w3techs.com/technologies/history_overview/javascript_library/all/y)
          `}
        </Markdown>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary"
        notes="

Popular

Same goes for AltJS

">
        <Layout>
          <Link href="http://redmonk.com/jgovernor/2015/07/31/programming-language-rankings-summer-2015/">
            <Image src={images.redmonk.replace("/", "")} />
          </Link>
        </Layout>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary"
        notes="

Amazing growth rate.

At this rate bigger than others combined.

">
        <Heading size={1} textColor="tertiary">
          Module Counts
        </Heading>
        <Layout>
          <Image src={images.moduleCounts.replace("/", "")} padding="20px" />
        </Layout>
        <Layout>
          <Text>
            <Link href="http://www.modulecounts.com/">modulecounts.com</Link>
          </Text>
        </Layout>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary"
        notes="

Angular dominates the work market.

Early signs of React.

">
        <Heading size={1} textColor="tertiary">
          Job Trends
        </Heading>
        <Layout>
          <Image src={images.jobs.replace("/", "")} padding="20px" />
        </Layout>
        <Layout>
          <Text>
            <Link href="http://www.indeed.com/jobtrends?q=Angularjs%2C+React.js%2C+Knockout%2C+Backbone.js&l=">Indeed</Link>
          </Text>
        </Layout>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary"
        notes="

Also job titles change.

Increasing demand for full stack developers.

">
        <Heading size={1} textColor="tertiary">
          Job Trends II
        </Heading>
        <Layout>
          <Image src={images.jobTitles.replace("/", "")} padding="20px" />
        </Layout>
        <Layout>
          <Text>
            <Link href="http://www.indeed.com/jobanalytics/jobtrends?q=frontend%2C+backend%2C+full+stack&l=">Indeed</Link>
          </Text>
        </Layout>
      </Slide>

      <Slide transition={slideTransition} bgColor="black">

          <Quote>Average salary of a React developer in SF - $153k</Quote>
          <Link href="http://www.indeed.com/salary?q1=React+Js+Front+End+Engineer&l1=San+Francisco%2C+CA">Indeed</Link>

      </Slide>

      <Slide transition={slideTransition} bgColor="black">

          <Quote>Always bet on JS!</Quote>
          Brendan Eich

      </Slide>

      <Slide transition={slideTransition} bgColor="black" notes="">
        <Image src={images.javascript.replace("/", "")} margin="0px auto 40px" height="650px"/>
      </Slide>

      <Slide transition={slideTransition} bgColor="black" notes="">
        <Image src={images.jackie.replace("/", "")} margin="0px auto 40px" height="381px"/>
      </Slide>

      <Slide transition={slideTransition} bgColor="black" notes="">
        <Image src={images.javascript2.replace("/", "")} margin="0px auto 40px" height="650px"/>
      </Slide>

      <Slide transition={slideTransition} bgColor="white" notes="">
        <Image src={images.logo.replace("/", "")} margin="0px auto 40px" height="566px"/>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary">
        <Heading size={1} fit lineHeight={1} textColor="black">
          SurviveJS
        </Heading>
        <Heading size={1} fit>
          Webpack and React
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="black" notes="">
        <Image src={images.kanban.replace("/", "")} margin="0px auto 40px" height="279px"/>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary">
        <Heading size={1} caps fit>
          Technology
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary" notes="">
        <Image src={images.markdown.replace("/", "")} margin="0px auto 40px" height="127px"/>
      </Slide>

      <Slide transition={slideTransition} bgColor="tertiary" notes="">
        <Image src={images.github.replace("/", "")} margin="0px auto 40px" height="209px"/>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary">

      </Slide>

      <Slide transition={slideTransition} bgColor="primary">

      </Slide>

      <Slide transition={slideTransition} bgColor="primary">
        <Heading size={1} caps fit>
          Process
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="tertiary">
        <Heading caps size={1} textColor="primary">
          Drivers
        </Heading>
        <Markdown>
          {`
* Passion, interest in topic
* Community (readers, collaborators, my editor)
* Money (validates product, allows to continue)
          `}
        </Markdown>
      </Slide>

      <Slide transition={slideTransition} bgColor="tertiary">
        <Heading caps size={1} textColor="primary">
          Release Process
        </Heading>
        <Markdown>
          {`
* Modeled after open source software development
* Fast, light releases (weekly first, monthly now)
* 1.0.0, 1.1.0, ..., 1.9.7, 1.9.10
* Release notes through the blog
* Continuous improvement based on feedback
          `}
        </Markdown>
      </Slide>

      <Slide transition={slideTransition} bgColor="tertiary" notes="">
        <Image src={images.covers.replace("/", "")} margin="0px auto 40px" height="600px"/>
      </Slide>

      <Slide transition={slideTransition} bgColor="tertiary">
        <Heading caps fit size={1} textColor="primary">
          Process Results
        </Heading>
        <Markdown>
          {`
* Higher quality than I could have ever reached on my own
* 223+ pages, 42k+ words, 15 chapters
* 600+ readers at Leanpub
* Thousands outside (60k+ visitors per month)
* Tens of contributors (GitHub issues, Disqus, direct feedback, Gitter, ...)
          `}
        </Markdown>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary">
        <Heading size={1} caps fit>
          Marketing
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary">

      </Slide>

      <Slide transition={slideTransition} bgColor="tertiary">
        <Heading caps fit size={1} textColor="primary">
          Marketing Channels
        </Heading>
        <Markdown>
          {`
* [GitHub](https://github.com/survivejs/webpack_react) - 1708 commits, 23+ contributors, 206 closed issues, 634 stars, 110 forks
* [Twitter](https://twitter.com/survivejs) - 700+ followers
* [Leanpub](https://leanpub.com/survivejs_webpack_react) - 600+ readers, featured 4 times, amongst weekly bestsellers
* MailChimp - ~200 subscribers
* Guest posts
          `}
        </Markdown>
      </Slide>

      <Slide transition={slideTransition} bgColor="tertiary">
        <Heading caps fit size={1} textColor="primary">
          Marketing Results
        </Heading>
        <Markdown>
          {`
* [Alexa](http://www.alexa.com/siteinfo/survivejs.com) - Top 300k
* [SimilarWeb](http://www.similarweb.com/website/survivejs.com) - Estimated traffic, 60k+ visits per month
* Estimated PageRank: 3 - Aiming for 4
* [Blog](http://survivejs.com/blog/) - 20+ posts, 9 interviews
* [Gitter](https://gitter.im/survivejs/webpack_react) - ~140 people
* [Reactiflux](http://www.reactiflux.com/) - Thousands of people
          `}
        </Markdown>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary">
        <Heading size={1} caps fit>
          Sales
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="tertiary">
        <Heading caps fit size={1} textColor="primary">
          From Zero to $10k
        </Heading>
        <Markdown>
          {`
* Started selling at April
* First, free "sale" on 11th
* First paid one on 12th, $8.5
* Hit $1k around July → [Crisis of faith](http://survivejs.com/blog/the-story-so-far/)
* Currently sales hover around $100 per day
* Gradually raised price level to $19.99 per book
* $10k total sales in sight. Not much but not little either.
          `}
        </Markdown>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary">
        <Heading size={1} fit>
          1$ == ~0.5€
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary">
        <Heading size={1} caps fit>
          Business Models
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgImage={images.openClosed.replace("/", "")} bgDarken={0.5}>
        <Layout>
          <Fill>
            <Heading size={4} caps textColor="secondary" bgColor="white" margin={10}>
              Open
            </Heading>
            <Markdown style={{color: "white"}}>
          {`
* Easier to market
* Easier to collaborate
* Harder to monetize
          `}
            </Markdown>
          </Fill>
          <Fill>
            <Heading size={4} caps textColor="secondary" bgColor="white" margin={10}>
              Closed
            </Heading>
            <Markdown style={{color: "white"}}>
          {`
* Harder to market
* Harder to collaborate
* Easier to monetize
          `}
            </Markdown>
          </Fill>
        </Layout>
      </Slide>

      <Slide transition={slideTransition} bgColor="secondary">
        <Heading size={1} fit>
          Open + Closed = Open Source++
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="secondary">
        <Heading size={1} fit>
          Upsell
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary">
        <Heading size={1} caps fit>
          Lessons learned
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="secondary">
        <Heading size={1} fit>
          Writing books is hard work
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="secondary">
        <Heading size={1} fit>
          Marketing and selling even harder
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="secondary">
        <Heading size={1} fit>
          Focus on delivering value straight from the start
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="secondary">
        <Heading size={1} fit>
          Small bets over big ones
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="secondary">
        <Heading size={1} fit>
          Persistency pays off (eventually)
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="secondary">
        <Heading size={1} fit>
          Luck is made
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary">
        <Heading size={1} caps fit>
          What next?
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="secondary">
        <Heading size={1} fit>
          Amazon (CreateSpace), iBooks, ???
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="secondary">
        <Heading size={1} fit>
          More content
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="secondary">
        <Heading size={1} fit>
          Webpack/React Cookbook Reimagined
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="secondary">
        <Heading size={1} fit>
          jster.net 2.0
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="secondary">
        <Heading size={1} fit>
          Antwar 1.0
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="black" notes="">
        <Link href="http://www.reactindiebundle.com/">
          <Image src={images.indieBundle.replace("/", "")} margin="0px auto 40px" height="600px"/>
        </Link>
      </Slide>

      <Slide transition={slideTransition} bgColor="primary">
        <Heading caps fit size={1} textColor="tertiary">
          Questions?
        </Heading>
      </Slide>

      <Slide transition={slideTransition} bgColor="tertiary">
        <Heading size={1} caps fit textColor="primary">
          Made with sisu in Finland by
        </Heading>
        <Link href="https://twitter.com/bebraw">
          <Heading caps fit size={2} textColor="secondary">
            Juho Vepsäläinen
          </Heading>
        </Link>
      </Slide>
    </Deck>
  </Spectacle>
, document.getElementById("root"));
<|endoftext|>


<commit_before>'use strict';

var fs   = require('fs');
var pako = require('../index.js');

var data = new Uint8Array(fs.readFileSync(__dirname +'/samples/lorem_1mb.txt'));

for (var i=0; i<50; i++) {
  pako.deflate(data, { level: 6 });
}
<commit_msg>updated profiling stub<commit_after>'use strict';

var fs   = require('fs');
var pako = require('../index.js');

var data = new Uint8Array(fs.readFileSync(__dirname +'/samples/lorem_1mb.txt'));

var deflated = pako.deflate(data, { level: 6 });

for (var i=0; i<200; i++) {
  pako.inflate(deflated);
}
<|endoftext|>


<commit_before>import configuration from 'torii/configuration';
import { lookup } from 'torii/lib/container-utils';

export default {
  name: 'torii-walk-providers',
  initialize: function(applicationInstance){
    // Walk all configured providers and eagerly instantiate
    // them. This gives providers with initialization side effects
    // like facebook-connect a chance to load up assets.
    for (var key in  configuration.providers) {
      if (configuration.providers.hasOwnProperty(key)) {
        lookup(applicationInstance.container, 'torii-provider:'+key);
      }
    }

  }
};
<commit_msg>2.1 Tweak<commit_after>import configuration from 'torii/configuration';
import { lookup } from 'torii/lib/container-utils';

export default {
  name: 'torii-walk-providers',
  initialize: function(applicationInstance){
    // Walk all configured providers and eagerly instantiate
    // them. This gives providers with initialization side effects
    // like facebook-connect a chance to load up assets.
    for (var key in  configuration.providers) {
      if (configuration.providers.hasOwnProperty(key)) {
        lookup(applicationInstance, 'torii-provider:'+key);
      }
    }

  }
};
<|endoftext|>


<commit_before>'use strict';

let co      = require('co');
let Heroku  = require('heroku-client');
let h       = require('./');

function heroku (context) {
  if (!context.auth.password) {
    return 'set `needsApp: true` on the command';
  }
  let opts = {
    debug:  context.debug,
    token:  context.auth.password,
  };
  if (context.secondFactor) {
    opts.headers = {'Heroku-Two-Factor-Code': context.secondFactor};
  }
  return new Heroku(opts);
}

module.exports = function command (options, fn) {
  return function (context) {
    if (typeof options === 'function') {
      fn = options;
      options = {};
    }
    process.chdir(context.cwd);
    let handleErr = h.errorHandler({logPath: context.herokuDir+'/error.log'});
    let run = function () {
      co.wrap(fn)(context, heroku(context))
      .catch(function (err) {
        if (err && err.body && err.body.id === 'two_factor') {
          h.prompt('Two-factor code', {mask: true})
          .then(function (secondFactor) {
            if (options.preauth) {
              return h.preauth(context.app, heroku(context), secondFactor);
            } else {
              context.secondFactor = secondFactor;
            }
          })
          .then(run)
          .catch(handleErr);
          return;
        }
        throw err;
      }).catch(handleErr);
    };
    run();
  };
};
<commit_msg>support http proxy<commit_after>'use strict';

let co      = require('co');
let Heroku  = require('heroku-client');
let h       = require('./');
let url     = require('url');

function heroku (context) {
  if (!context.auth.password) {
    return 'set `needsApp: true` on the command';
  }
  let opts = {
    debug:  context.debug,
    token:  context.auth.password,
  };
  if (context.secondFactor) {
    opts.headers = {'Heroku-Two-Factor-Code': context.secondFactor};
  }
  return new Heroku(opts);
}

function setupHttpProxy() {
  if (!process.env.HTTPS_PROXY) { return; }
  let proxy = url.parse(process.env.HTTPS_PROXY);
  process.env.HEROKU_HTTP_PROXY_HOST = proxy.hostname;
  process.env.HEROKU_HTTP_PROXY_PORT = proxy.port;
}

module.exports = function command (options, fn) {
  return function (context) {
    if (typeof options === 'function') {
      fn = options;
      options = {};
    }
    process.chdir(context.cwd);
    setupHttpProxy();
    let handleErr = h.errorHandler({logPath: context.herokuDir+'/error.log'});
    let run = function () {
      co.wrap(fn)(context, heroku(context))
      .catch(function (err) {
        if (err && err.body && err.body.id === 'two_factor') {
          h.prompt('Two-factor code', {mask: true})
          .then(function (secondFactor) {
            if (options.preauth) {
              return h.preauth(context.app, heroku(context), secondFactor);
            } else {
              context.secondFactor = secondFactor;
            }
          })
          .then(run)
          .catch(handleErr);
          return;
        }
        throw err;
      }).catch(handleErr);
    };
    run();
  };
};
<|endoftext|>