xavxyz

const engine = new Engine({
  engineConfig: {
    apiKey: ENGINE_API_KEY,
    logging: {
      level: 'DEBUG'   // Engine Proxy logging level
    }
  },
  graphqlPort: process.env.PORT
  endpoint: '/graphql',                 
});

xavxyz

// a stateless non-terminating link to make operations aware of the current user token
const authLink = new ApolloLink((operation, forward) => {
  const token = localStorage.getItem('AUTH_TOKEN');

  operation.setContext(() => ({
    headers: {
      authorization: token ? `JWT ${token}` : null,
    },
  }));

xavxyz

this.props.subscribeToMore({
  // a graphql document (`subscriptions 
  document: LIST_SUBSCRIPTION_UPDATE,
  // how to update the cache when new data comes from the subscriptions
  updateQuery: (prev, { subscriptionData }) => {
    const { placeUpdated } = subscriptionData;
    
    if (!placeUpdated) {
      return prev;
    }

xavxyz

// define a way to connect to the external GraphQL API
const link = new HttpLink({
  uri: 'https://external-api.com/graphql',
  fetch,
});

// create a remote schema from the external GraphQL API
const remoteSchema = makeRemoteExecutableSchema({
  schema: await introspectSchema(link),
  link,

xavxyz

// client
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { MeteorAccountsLink } from 'apollo-link-meteor-accounts';

const httpLink = new HttpLink({ uri: Meteor.absoluteUrl('graphql') });

const authLink = new MeteorAccountsLink();

xavxyz

Animation as a Function of Data by Xavier Cazalot

Abstract

Our design & development process is founded on our application's domain model. It rules the data involved in the UI we are building and it helps for providing great user experiences. What if animations were baked in the process as part of a whole? This is what this talk is about!

---

Description

Overview

xavxyz

import React from "react";
import Header from "./Header";
import Order from "./Order";
import Inventory from "./Inventory";
import Fish from "./Fish";
import samples from "../sample-fishes";
import base from "../base";

class App extends React.Component {
  constructor() {

xavxyz

:root {
  --ease-in-quad: cubic-bezier(.55, .085, .68, .53);
  --ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
  --ease-in-quart: cubic-bezier(.895, .03, .685, .22);
  --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
  --ease-in-expo: cubic-bezier(.95, .05, .795, .035);
  --ease-in-circ: cubic-bezier(.6, .04, .98, .335);

  --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);

xavxyz

import initStoryshots from '@storybook/addon-storyshots';
import { shallow } from 'enzyme';
import toJSON from 'enzyme-to-json';
import 'jest-styled-components';

import { ThemeProvider } from 'styled-components';

initStoryshots({
  test: ({ story, context }) => {
    const storyElement = story.render(context);

xavxyz

import React from 'react';
import { StyleSheet } from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Autocomplete from 'react-native-autocomplete-select';
import { colors } from '../../lib/theme';
import { input as inputActions } from '../../store/actions';

const Input = ({
  inputValue,