DEV Community: Peter Klingelhofer

An Introduction to Data Visualization with VX and D3

Peter Klingelhofer — Sun, 20 Sep 2020 20:10:15 +0000

Introduction

It's important to be able to represent and display data in a way that is both aesthetic and responsive to user interaction. D3 has been a staple for data visualization in JavaScript for the past few years. VX is a library that utilizes D3 and builds upon that. Today, we'll go through how to make a simple bar graph, and then pursue something a little more advanced, called a 'sunburst', which resembles a layered pie chart, but is responsive to the user's mouse hover.

Basic BarGraph with VX

First, we'll try a BarGraph from VX's Getting Started Tutorial.

import React from 'react';
import { letterFrequency } from '@visx/mock-data';
import { Group } from '@visx/group';
import { Bar } from '@visx/shape';
import { scaleLinear, scaleBand } from '@visx/scale';

const data = letterFrequency;

const width = 500;
const height = 500;
const margin = { top: 20, bottom: 20, left: 20, right: 20 };

const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;

// We'll make some helpers to get at the data we want
const x = (d) => d.letter;
const y = (d) => +d.frequency * 100;

// And then scale the graph by our data
const xScale = scaleBand({
  range: [0, xMax],
  round: true,
  domain: data.map(x),
  padding: 0.4,
});
const yScale = scaleLinear({
  range: [yMax, 0],
  round: true,
  domain: [0, Math.max(...data.map(y))],
});

// Compose together the scale and accessor functions to get point functions
const compose = (scale, accessor) => (data) => scale(accessor(data));
const xPoint = compose(xScale, x);
const yPoint = compose(yScale, y);

// Finally we'll embed it all in an SVG
export default function BarGraph(props) {
  return (
    <svg width={width} height={height}>
      {data.map((d, i) => {
        const barHeight = yMax - yPoint(d);
        return (
          <Group key={`bar-${i}`}>
            <Bar
              x={xPoint(d)}
              y={yMax - barHeight}
              height={barHeight}
              width={xScale.bandwidth()}
              fill="#fc2e1c"
            />
          </Group>
        );
      })}
    </svg>
  );
}

Which looks like:

Super basic, but loads quickly and looks pretty clean!

D3 Basic Sunburst

Use the code below in conjunction with the files from D3 Sunburst Component,
I will be showing the loadDataAsArray.html example here:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sequences sunburst</title>
        <link rel="stylesheet" type="text/css" href="../sunburst.css"/>
        <link rel="stylesheet" type="text/css" href="./examples.css"/>
        <script src="../node_modules/d3/d3.min.js" type="text/javascript"></script>
        <script src="../sunburst.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="main">
            <div id="sunburst-breadcrumbs"></div>
            <div id="sunburst-chart">
                <div id="sunburst-description"></div>
            </div>
        </div>
        <div id="sidebar">
            <input type="checkbox" id="togglelegend"> Legend<br/>
            <div id="sunburst-legend" style="visibility: hidden;"></div>
        </div>

        <script type="text/javascript">
            (function() {
                var sunburst = new Sunburst({
                    colors: {
                        "home": "#5687d1",
                        "product": "#7b615c",
                        "search": "#de783b",
                        "account": "#6ab975",
                        "other": "#a173d1",
                        "end": "#bbbbbb"
                    }
                });
                sunburst.setData([
                    ["account-account-account",22781],
                    ["account-account-end",3311],
                    ["account-account-home",906],
                    ["account-account-other",1156],
                    ["account-account-product",5969],
                    ["account-account-search",692],
                    ["account-end",7059],
                    ["account-home-account",396],
                    ["account-home-end",316],
                    ["account-home-home",226],
                    ["account-home-other",87],
                    ["account-home-product",613],
                    ["account-home-search",245],
                    ["account-other-account",446],
                    ["account-other-end",229],
                    ["account-other-home",91],
                    ["account-other-other",804],
                    ["account-other-product",776],
                    ["account-other-search",48],
                    ["account-product-account",3892],
                    ["account-product-end",3250],
                    ["account-product-home",531],
                    ["account-product-other",252],
                    ["account-product-product",4876],
                    ["account-product-search",476],
                    ["account-search-account",521],
                    ["account-search-end",39],
                    ["account-search-home",7],
                    ["account-search-other",8],
                    ["account-search-product",536],
                    ["account-search-search",219]
                ]);
            })();
        </script>

    </body>
</html>

No mouseover

Mouse in center

Mouse in intermediate layer

Mouse in outermost layer

Conclusion

Short and sweet, but you get the idea - with D3 and VX, you can be up and running visualizing data in no time! For further reading, I recommend checking out FreeCodeCamp's Getting Started with D3 and React Tutorial. After that, and if you think you're ready for the big leagues, Amelia Wattenberger's React and D3 walkthrough is utterly brilliant, I highly recommend it. Finally, for a better idea of both the breadth and depth that D3 has to offer, check out D3's Example Gallery on ObservableHQ.

Machine Learning with TensorFlow.js in Expo React Native

Peter Klingelhofer — Mon, 14 Sep 2020 02:05:27 +0000

Introduction

Machine learning is the study of computer algorithms that improve automatically through experience. TensorFlow was created by the Google Brain team, and was released for free and open-source under the Apache 2.0 license in 2015. TensorFlow.js lets users develop machine learning models in JavaScript, and use machine learning directly in the browser or in Node.js.

In TensorFlow, tensors are a central unit of data, consisting of an array of one or more dimensions. Tensors have a rank, consisting of its dimensions, shape, consisting of the size of each dimension, and dtype, the data type of the tensor.

We can conduct a number of operations on tensors. Here's an example of a simple square() mathematical operation:

const x = tf.tensor([1, 2, 3, 4]);
const y = x.square();   // equivalent to tf.square(x)

We can also affect how tensors are retained in memory. We can use dispose() to delete a tensor:

const t = tf.tensor([
        [1, 2], 
        [3, 4],
      ]);
a.dispose();  //delete tensor

Object Detection

Let's set up tensorflow/tfjs-react-native. First, will explore the object detection package in this machine-learning GitHub repository for tfjs.

First, we set the necessary onload functions and states. Loading TensorFlow is async, and will take a few seconds, so we use await:

  async componentDidMount() {
    await tf.ready(); // preparing TensorFlow
    this.setState({ isTfReady: true });

    // this.model = await mobilenet.load(); // preparing MobileNet model
    this.model = await cocossd.load(); // preparing COCO-SSD model
    this.setState({ isModelReady: true });

    this.getPermissionAsync(); // get permission for accessing camera on mobile device
  }

Request permissions for camera roll access:

  getPermissionAsync = async () => {
    if (Constants.platform.ios) {
      const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
      if (status !== 'granted') {
        alert('Please grant camera roll permission for this project!');
      }
    }
  };

Here we transfer the path to an image found on the phone when a user selects a photo from their camera roll using jpeg.decode:

  imageToTensor(rawImageData) {
    const TO_UINT8ARRAY = true;
    const { width, height, data } = jpeg.decode(rawImageData, TO_UINT8ARRAY);
    // Drop the alpha channel info for mobilenet
    const buffer = new Uint8Array(width * height * 3);
    let offset = 0; // offset into original data
    for (let i = 0; i < buffer.length; i += 3) {
      buffer[i] = data[offset];
      buffer[i + 1] = data[offset + 1];
      buffer[i + 2] = data[offset + 2];
      offset += 4;
    }
    return tf.tensor3d(buffer, [height, width, 3]);
  }

Now, we analyze the image using the COCO-SSD tensor model.

  detectObjects = async () => {
    try {
      const imageAssetPath = Image.resolveAssetSource(this.state.image);
      const response = await fetch(imageAssetPath.uri, {}, { isBinary: true });
      const rawImageData = await response.arrayBuffer();
      const imageTensor = this.imageToTensor(rawImageData);
      const predictions = await this.model.detect(imageTensor);
      this.setState({ predictions: predictions });
      console.log('----------- predictions: ', predictions);
    } catch (error) {
      console.log('Exception Error: ', error);
    }
};

Here we set up the function to open the picture selection screen on the phone:

  selectImage = async () => {
    try {
      let response = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.All,
        allowsEditing: true,
        aspect: [4, 3],
      });
      if (!response.cancelled) {
        const source = { uri: response.uri };
        this.setState({ image: source });
        this.detectObjects();
      }
    } catch (error) {
      console.log(error);
    }
  };

For this image, the COCO-SSD model predicted two objects at different probabilities. The Bbox is also provided, which is the [x, y, width, height] of the detected object. Here we predicted cat as high probability and bottle for medium probability.

Image Classification

With much the same react-native code, we can use MobileNet's model, which has been trained specifically for image classification.

Here we predicted various types of ferrets at low probability and balloon with very low probability.

Conclusion

Tensorflow.js is a powerful asset to add to your react-native toolkit. For more, try out some of the pre-trained models for marchine learning. Or try the Getting Started tutorial for TensorFlow.js.

An Introduction to React Native Maps in Expo with TypeScript

Peter Klingelhofer — Sun, 06 Sep 2020 03:01:17 +0000

Introduction

Expo is a fast an easy way to get started creating mobile apps with React Native, and all without needing MacOS to test on your iPhone. Used in conjunction with react-native-maps, you can have an interactive Map up and running on a phone in no time.

Getting Started with Expo

First, install Expo globally with npm i expo -g. Then, use expo init to create an Expo project! Name your project, and then select "tabs (TypeScript)" under Managed workflow. Name your app.

Then run expo init, install the Expo app on your mobile device, open camera, and scan the QR code you see in the terminal or web browser that opens up. You should see the template load up with two clickable tabs at the bottom.

Your First Map

Now run expo install react-native-maps. This will install the latest react-native-maps along with any dependencies for the current SDK (38.0 at the time of writing this blog post).

Now replace TabOnScreen.tsx with the following:

// TabOnScreen.tsx
import React, { useState } from 'react';
import { StyleSheet, Dimensions } from 'react-native';

import { View } from '../components/Themed';
import MapView from 'react-native-maps';

const { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LATITUDE = 29.9990674;
const LONGITUDE = -90.0852767;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

export default function TabOneScreen({ provider }) {
  const [region, setRegion] = useState({
    latitude: LATITUDE,    // initial location latitude
    longitude: LONGITUDE,  // initial location longitude
    latitudeDelta: LATITUDE_DELTA,
    longitudeDelta: LONGITUDE_DELTA,
  });
  return (
    <View style={styles.container}>
      <MapView
        provider={provider}
        style={styles.map}
        initialRegion={region}
        zoomTapEnabled={false}
      ></MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

Here we created a simple MapView component from react-native-maps.

Maps with Markers and Custom Callouts

Now for an example with multiple different types of InfoWindows that pop up on Markers with information referring to that specific marker. In react-native-maps, these are referred to as Callouts.

This will demonstrate three different types of Callouts that we can use with our Markers. Here, we have buttons to show and hide the Callout for the last selected Marker, and an overlay with just some explanatory text as well.

First, create new file called CustomCallouts.ts and place the code from here into it.

Then, in TabTwoScreen.tsx, place the following code below:

// TabTwoScreen.tsx
import React, { useState } from 'react';
import { StyleSheet, Dimensions, TouchableOpacity, Alert } from 'react-native';

import { Text, View } from '../components/Themed';
import MapView, { Marker, Callout, CalloutSubview } from 'react-native-maps';
import CustomCallout from './CustomCallout';

const { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LATITUDE = 29.9990674;
const LONGITUDE = -90.0852767;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const SPACE = 0.01;

export default function TabTwoScreen({provider}) {
  const [count, setCount] = useState(0);
  const [region, setRegion] = useState({
    latitude: LATITUDE,
    longitude: LONGITUDE,
    latitudeDelta: LATITUDE_DELTA,
    longitudeDelta: LONGITUDE_DELTA,
  });
  const [markers, setMarkers] = useState([
    {
      coordinate: {
        latitude: LATITUDE + SPACE,
        longitude: LONGITUDE + SPACE,
      },
    },
    {
      coordinate: {
        latitude: LATITUDE + SPACE,
        longitude: LONGITUDE - SPACE,
      },
    },
    {
      coordinate: {
        latitude: LATITUDE,
        longitude: LONGITUDE,
      },
    },
    {
      coordinate: {
        latitude: LATITUDE,
        longitude: LONGITUDE - SPACE / 2,
      },
    },
  ]);

  const [markerRefs, setMarkerRefs] = useState([
    {
      ref: null,
    },
    {
      ref: null,
    },
    {
      ref: null,
    },
    {
      ref: null,
    },
  ]);

  const show = () => {
    markerRefs[0].ref.showCallout();
  };

  const hide = () => {
    markerRefs[0].ref.showCallout();
  };

  return (
    <View style={styles.container}>
      <MapView
        provider={provider}
        style={styles.map}
        initialRegion={region}
        zoomTapEnabled={false}
      >
        <Marker
          ref={(ref) => {
            let updateRef = markerRefs;
            updateRef[0].ref = ref;
            setMarkerRefs(updateRef);
          }}
          coordinate={markers[0].coordinate}
          title="This is a native view"
          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation"
        />
        <Marker coordinate={markers[1].coordinate}>
          <Callout style={styles.plainView}>
            <View>
              <Text>This is a plain view</Text>
            </View>
          </Callout>
        </Marker>
        <Marker
          coordinate={markers[2].coordinate}
          calloutOffset={{ x: -8, y: 28 }}
          calloutAnchor={{ x: 0.5, y: 0.4 }}
          ref={(ref) => {
            let updateRef = markerRefs;
            updateRef[1].ref = ref;
            setMarkerRefs(updateRef);
          }}
        >
          <Callout
            alphaHitTest
            tooltip
            onPress={(e) => {
              if (
                e.nativeEvent.action === 'marker-inside-overlay-press' ||
                e.nativeEvent.action === 'callout-inside-press'
              ) {
                return;
              }

              Alert.alert('callout pressed');
            }}
            style={styles.customView}
          >
            <CustomCallout>
              <Text>{`This is a custom callout bubble view ${count}`}</Text>
              <CalloutSubview
                onPress={() => {
                  setCount(count + 1);
                }}
                style={[styles.calloutButton]}
              >
                <Text>Click me</Text>
              </CalloutSubview>
            </CustomCallout>
          </Callout>
        </Marker>
        <Marker
          ref={(ref) => {
            let updateRef = markerRefs;
            updateRef[3].ref = ref;
            setMarkerRefs(updateRef);
          }}
          coordinate={markers[3].coordinate}
          title="You can also open this callout"
          description="by pressing on transparent area of custom callout"
        />
      </MapView>
      <View style={styles.buttonContainer}>
        <View style={styles.bubble}>
          <Text>Tap on markers to see different callouts</Text>
        </View>
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          onPress={() => show()}
          style={[styles.bubble, styles.button]}
        >
          <Text>Show</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => hide()}
          style={[styles.bubble, styles.button]}
        >
          <Text>Hide</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  customView: {
    width: 140,
    height: 140,
  },
  plainView: {
    width: 60,
  },
  container: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
  bubble: {
    flex: 1,
    backgroundColor: 'rgba(255,255,255,0.7)',
    paddingHorizontal: 18,
    paddingVertical: 12,
    borderRadius: 20,
  },
  latlng: {
    width: 200,
    alignItems: 'stretch',
  },
  button: {
    width: 80,
    paddingHorizontal: 12,
    alignItems: 'center',
    marginHorizontal: 10,
  },
  buttonContainer: {
    flexDirection: 'row',
    marginVertical: 20,
    backgroundColor: 'transparent',
  },
  calloutButton: {
    width: 'auto',
    backgroundColor: 'rgba(255,255,255,0.7)',
    paddingHorizontal: 6,
    paddingVertical: 6,
    borderRadius: 12,
    alignItems: 'center',
    marginHorizontal: 10,
    marginVertical: 10,
  },
});

The first kind of Callout just has a simple Title and Description.

The second Callout uses the plain format, and only has a description, and has a darker pop-up window.

Third, we have a CustomCallout with a clickable button, and a default value of 0. Let's observe what happens on button-click.

Ah, the magic of useState! On press, the counter increments up by 1, and the value is now 1.

And the same thing happens when we press the button again, the total is now 2.

Conclusion

For further exploration with Markers in react-native-maps, I recommend adding an image tag to your Marker, as is done with this example. react-native-maps is super responsive in Expo, and adding maps to your app is an easy way to impress. For further reading, check out the react-native-maps documentation. Additionally, for further inspiration, look through the folder of examples on GitHub.

An Introduction to Augmented Reality with Viro

Peter Klingelhofer — Sun, 30 Aug 2020 17:52:17 +0000

Introduction

Augmented Reality (AR) is a tech used to superimpose computer-generated images on a user's view of the real world, providing a composite view. This can be viewable on a simple phone screen (think Pokemon Go) or with smart phone based Virtual Reality headsets.

Since Expo's AR component is deprecated, Viro Media have taken charge as one of the fastest, easiest ways to get augmented reality up and running on your iOS or Android device. Their documentation is impressively detailed and helpful.

Setup

If you're in OSX:

brew install node
brew install watchman

If you're in Linux:

apt-get install node
apt-get install watchman

For all distributions:

npm install -g react-native-cli
npm install -g react-viro-cli
react-viro init ViroSample --verbose
cd ViroSample
npm start

Now within the /js/HelloWorldSceneAR.js file, change line 38 so that "Hello World!" is a message of your choosing:

  _onInitialized(state, reason) {
    if (state == ViroConstants.TRACKING_NORMAL) {
      this.setState({
        text : "Happy Birthday" // was "Hello World"
      });
    } else if (state == ViroConstants.TRACKING_NONE) {
      // Handle loss of tracking
    }
  }

Then get the iOS Viro Media App or the Android Viro Media App
Open the Viro Media App, and press the icon in the top left, and then press "Enter Testbed". Scroll up in your Terminal to find your ngrok url, enter that into the text field, and press Go. You should see your message displayed on the scene!

3D Objects

Now that you've seen the message displayed on your phone, download this file, unzip it, and place it in your /ViroSample/js/ folder.

Now, replace the contents of your HelloWorldSceneAR.js with this code from the docs:

'use strict';

import React, { Component } from 'react';
import {StyleSheet} from 'react-native';
import {
  ViroARScene,
  ViroText,
  ViroMaterials,
  ViroBox,
  Viro3DObject,
  ViroAmbientLight,
  ViroSpotLight,
  ViroARPlaneSelector,
  ViroNode,
  ViroAnimations,
} from 'react-viro';
const createReactClass = require('create-react-class');
const HelloWorldSceneAR = createReactClass({
  getInitialState() {
    return {
      text : "Initializing AR..."
    };
  },

  render: function() {
    return (
      <ViroARScene onTrackingInitialized={()=>{this.setState({text : "Happy Birthday"})}}> // Again, change this text to your desired message
        <ViroText text={this.state.text} scale={[.1, .1, .1]} height={1} width={4} position={[0, .5, -1]} style={styles.helloWorldTextStyle} />

        <ViroAmbientLight color={"#aaaaaa"} />
        <ViroSpotLight innerAngle={5} outerAngle={90} direction={[0,-1,-.2]} position={[0, 3, 1]} color="#ffffff" castsShadow={true} />

          <Viro3DObject
            source={require('./res/emoji_smile/emoji_smile.vrx')}
            position={[0, 0, -1]}
            scale={[.2, .2, .2]}
            type="VRX"
            dragType="FixedDistance" onDrag={()=>{}} // allows user to drag 3D object around with finger
          />

      </ViroARScene>
    );
  },
});

const styles = StyleSheet.create({
  helloWorldTextStyle: {
    fontFamily: 'Arial',
    fontSize: 50,
    color: '#ffffff',
    textAlignVertical: 'center',
    textAlign: 'center',
  },
});

module.exports = HelloWorldSceneAR;

You should see a 3D smiley face beneath your message, like so:

Plane Detection

Now, on line 38, add

<ViroARPlaneSelector />

and reload. Save and reload test bed. You should see multiple planes detected as you move your device over different flat surfaces:

Now, replace

jsx <ViroARPlaneSelector />

with

<ViroARPlaneSelector>
  <Viro3DObject
    source={require('./res/emoji_smile/emoji_smile.vrx')}
    position={[0, .1, 0]}
    scale={[.2, .2, .2]}
    type="VRX"
    dragType="FixedDistance" onDrag={()=>{}} />
</ViroARPlaneSelector>

Save, and load up another test bed. Now, when you tap a plane with your finger, all planes should disappear and a 3D object should be generated on the plane that was tapped.

Now replace

<ViroARPlaneSelector>
  <Viro3DObject
    source={require('./res/emoji_smile/emoji_smile.vrx')}
    position={[0, .1, 0]}
    scale={[.2, .2, .2]}
    type="VRX"
    dragType="FixedDistance" onDrag={()=>{}} />
</ViroARPlaneSelector>

with

        <ViroNode
          position={[0, 0, -1]}
          dragType="FixedToWorld"
          onDrag={() => {}}
        >
          <Viro3DObject
            source={require('./res/emoji_smile/emoji_smile.vrx')}
            position={[0, 0.1, 0]}
            scale={[0.2, 0.2, 0.2]}
            type="VRX"
          />
        </ViroNode>

Save, and load up another test bed. Note how dragging a 3D object around moves along detected places/surfaces.

Particles

Now, let's add particles!

First, download the particles res.zip file, unzip it, and add the unzipped contents to your /ViroSample/js/res/.

Now, replace the code in HelloWorldSceneAR.js with the following:

'use strict';

import React, { Component } from 'react';
import {StyleSheet} from 'react-native';
import PropTypes from 'prop-types';

import {
  ViroSceneNavigator,
  ViroARScene,
  ViroNode,
  ViroAmbientLight,
  ViroDirectionalLight,
  ViroText,
  ViroAnimations,
  ViroParticleEmitter,
  Viro3DObject,
} from 'react-viro';

'use strict';
const createReactClass = require('create-react-class');
const MainScene = createReactClass({

  getInitialState() {
    return {
    };
  },

  render: function() {
    return (
     <ViroARScene>
      <ViroAmbientLight color={"#aaaaaa"} />
      <ViroDirectionalLight color="#ffffff" direction={[0,-1,-.2]}/>

      <ViroNode position={[0,-.5,-1]} scale={[.5,.5,.5]} dragType="FixedToWorld" onDrag={()=>{}}>
         <Viro3DObject
           source={require('./res/object_bday_cake/object_bday_cake.vrx')}
           type="VRX"
         />

         <ViroNode position={[0.18,.67,0.004]} scale={[.4,.4,.4]}>
             <ViroParticleEmitter
               duration={1200}
               visible={true}
               run={true}
               loop={true}
               fixedToEmitter={false}

               image={{
                 source:require("./res/particle_fire.png"),
                 height:0.3,
                 width:0.3,
                 bloomThreshold:0.0
               }}

               spawnBehavior={{
                 particleLifetime:[500,500],
                 emissionRatePerSecond:[30, 40],
                 maxParticles:800
               }}

               particleAppearance={{
                 opacity:{
                   initialRange:[0.2, 0.2],
                   factor:"time",
                   interpolation:[
                     {endValue:0.2, interval:[0,200]},
                     {endValue:0.0, interval:[200,500]},
                   ]
                 },
                 scale:{
                   initialRange:[[1,1,1], [1,1,1]],
                   factor:"time",
                   interpolation:[
                     {endValue:[0,0,0], interval:[150,500]},
                   ]
                 },

               }}

               particlePhysics={{
                 velocity:{initialRange:[[0,.3,0], [0,.5,0]]}
               }}
             />
          </ViroNode>
        </ViroNode>
     </ViroARScene>
    );
  },
});

module.exports = MainScene;

Save, run npm start oncemore, re-open your new test bed, and voila! You will see a birthday cake with an animated flame at the top of the candle.

Now, let's add animated smoke to an object. Once more, replace the code in HelloWorldSceneAR.js with the following:

'use strict';

import React, { Component } from 'react';
import {StyleSheet} from 'react-native';
import PropTypes from 'prop-types';

import {
  ViroSceneNavigator,
  ViroARScene,
  ViroNode,
  ViroAmbientLight,
  ViroDirectionalLight,
  ViroText,
  ViroAnimations,
  ViroParticleEmitter,
  Viro3DObject,
} from 'react-viro';

'use strict';
const createReactClass = require('create-react-class');
const MainScene = createReactClass({

  getInitialState() {
    return {
    };
  },

  render: function() {
    return (
     <ViroARScene>
      <ViroAmbientLight color={"#aaaaaa"} />
      <ViroDirectionalLight color="#ffffff" direction={[0,-1,-.2]}/>

      <ViroNode position={[0, 0, -2]} scale={[.5, .5, .5]} dragType="FixedToWorld" onDrag={()=>{}}>
        <Viro3DObject
          source={require('./res/emoji_angry_anim/emoji_angry_anim.vrx')}
          resources={[require('./res/emoji_angry_anim/emoji_angry_diffuse.png'),
                      require('./res/emoji_angry_anim/emoji_angry_normal.png'),
                      require('./res/emoji_angry_anim/emoji_angry_specular.png')]}
          type="VRX"
          animation={{name:"02", run:true, loop:true,}}
          />
          <ViroParticleEmitter
              position={[-.6, 0, .2]}
              scale={[.4, .2, .2]}
              duration={1100}
              delay={1100}
              visible={true}
              run={true}
              loop={true}
              fixedToEmitter={true}

              image={{
                source:require("./res/particle_smoke.png"),
                height:1,
                width:1,
              }}

              spawnBehavior={{
                particleLifetime:[500,500],
                emissionRatePerSecond:[200,200],
                maxParticles:200,
                spawnVolume:{
                  shape:"box",
                  params:[.7, .1, .1],
                  spawnOnSurface:false
                },
              }}

              particleAppearance={{
                opacity:{
                  initialRange:[0.0, 0.0],
                  interpolation:[
                    {endValue:0.4, interval:[0,200]},
                    {endValue:0.0, interval:[900,1500]}
                  ]
                },
              }}

              particlePhysics={{
                velocity:{initialRange:[[-2,2,0], [-2,-2,0]]},
                acceleration:{initialRange:[[0,0,0], [0,0,0]]}
              }}
          />

          <ViroParticleEmitter
              position={[.6, 0, .2]}
              scale={[.4, .2, .2]}
              duration={1100}
              delay={1100}
              visible={true}
              run={true}
              loop={true}
              fixedToEmitter={true}

              image={{
                source:require("./res/particle_smoke.png"),
                height:1,
                width:1,
              }}

              spawnBehavior={{
                particleLifetime:[500,500],
                emissionRatePerSecond:[200,200],
                maxParticles:200,
                spawnVolume:{
                  shape:"box",
                  params:[.7, .1, .1],
                  spawnOnSurface:false
                },
              }}

              particleAppearance={{
                opacity:{
                  initialRange:[0.0, 0.0],
                  interpolation:[
                    {endValue:0.4, interval:[0,200]},
                    {endValue:0.0, interval:[900,1500]}
                  ]
                },
              }}
              particlePhysics={{
                velocity:{initialRange:[[2,2,0], [2,-2,0]]},
                acceleration:{initialRange:[[0,0,0], [0,0,0]]}
              }}
          />
      </ViroNode>
     </ViroARScene>
    );
  },
});

module.exports = MainScene;

Tweaking Parameters

Save, run npm start, and you should see an angry smiley face with smoke coming out of its ears intermittently.

Now, let's mess with a few settings. On line 88, if we change the scale parameter from its initial value of [.4, .2, .2] to [.8, .4, .4], we can achieve more smoke coming out of the right side than the left:

If we change the duration parameter on line 89, using a value of 2200 instead of 1100, the smoke on the right side will be emitted for double the duration of the left side, so now they both are emitted at the same time, the right lasts twice as long as the left, and the left starts again just as the right stops. Then, when the left stops, the right starts. Thus, they alternate between being emitted concurrently and starting another emission as the other side ceases.

Now, on line 104, change emissionRatePerSecond:[200,200], to emissionRatePerSecond:[800,800], and on line 105, change maxParticles:200, to maxParticles:800,. Now, the smoke coming out of the right side is significantly thicker and more filled in than that of the left: four times as many particles!

Now, on line 97, let's change source:require("./res/particle_smoke.png"), to source:require("./res/particles_flame.png"),. You will now see particles more reminiscent of fire coming out of the right side, whereas the left side remains smokey.

If you want to change the left side, just change the parameters within the <ViroParticleEmitter></ViroParticleEmitter> tags above, between lines 43-84.

Conclusion

ViroReact is a fast an easy way to set up AR on your smart phone. Today we went through initial setup, displaying text, displaying 3D objects, displaying particles, and changing the way the particles behave. For further customization, I recommend playing around with the image files in the /res folder with a photo editor such as Adobe Photoshop. For added creative inspiration, try adding portals to your AR project.

An Introduction to Google Maps in JavaScript

Peter Klingelhofer — Sat, 22 Aug 2020 01:19:30 +0000

Introduction

Google Maps is a powerful tool you can easily add to your JavaScript skillset. Here, we will display Markers on a Google Map centered over New Orleans. Then, we will ask the user for their location, and if the user provides it, re-centers the map over their location. Finally, we will display multiple markers near each other as a cluster. When clicked, the map zooms into the area where those three markers are located.

Creating Markers on a Google Map

Thankfully, Google has made displaying a Marker in Google Maps quite simple. In a map initialization function, declare an object with the coordinates of the Marker you desire.

Create a new constant called map, instantiate a new Google Maps map with a specified zoom parameter (an integer between 5 and 15), and a center key supplied with the coordinates object you created above.

Then create a third constant called marker with a position key again supplied with the coordinates object you created above, a map key with the map created above, (map: map can be shortened to map now with ES6 syntax), and a title key with a string with a Marker title of your choosing.

function initMap() {
  const coordinates = {lat: 30.0326996, lng: -90.1627533};

  const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: coordinates
  });

  const marker = new google.maps.Marker({
    position: coordinates,
    map,
    title: 'Welcome to New Orleans!'
  });
}

You can read more about Markers in Google Maps here.

Geolocation

Asking for a user's location is quite simple as well. Here we use the navigator.geolocation.getCurrentPosition function and destructure out latitude and longtiude from position.coords. We then set the userLocation state of the React Functional Component, so that the map will move to the userLocation.

   navigator.geolocation.getCurrentPosition((position) => {
      const { latitude, longitude } = position.coords;
      setUserLocation({ lat: latitude, lng: longitude });
    });

Marker Clustering

Sometimes, when there are a lot of Markers in a single area and the user is zoomed out, Markers can start to get pretty cluttered depending on the data type you're representing.

First, after initializing the map with new google.maps.Map, set the zoom and center as we did above. Create a constant for the labels, and a constant for the markers. Map the locations, returning new google.maps.Marker which takes an object as a parameter with key position, supply it location, and a key label, supply it labels[i % labels.length].

Then, create a constant called markerCluster and initialize the Marker Clusterer with new MarkerClusterer with parameters map, marker, and an object with the imagePath. Below that, declare

      const locations = [
        {lat: 30.0326996, lng: -90.1627533},
        {lat: 30.0426996, lng: -90.2627533},
        {lat: 30.0526996, lng: -90.3627533},
      ]

      function initMap() {
        const map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: {lat: 30.0326996, lng: -90.1627533}
        });

        const labels = '123456789';

        const markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });

        const markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }

Read more here about Marker Clustering here.

Conclusion

For more reading, the documentation for Google Maps in JavaScript is quite comprehensive. We went through creating Markers, using Geolocation, and performing Marker Clustering. Google Maps can be a robust asset to incorporate into your project.

Introducing React Router

Peter Klingelhofer — Sat, 25 Jul 2020 14:13:10 +0000

Introduction

Historically on the web, you would navigate to different pages and the location of the current page would be in the location bar of the browser. The back and forward buttons would work as expected.

These days, in single-page apps, the above features don't really work quite the same. Everything that occurs in modern single-page apps happens on one page - behind the scenes, JavaScript changes the UI and facilitates functionality in the background. When this is the case, we need a routing solution for the back and forward buttons to function as intended. Routing is what determines "how an application responds to a client request to a particular endpoint", according to the Express documentation.

While Backbone for example has routing built in, React does not. Thankfully, there is a community-based solution that is utilized by PayPal, Vimeo, and Uber: React Router.

Key Concept: Adding the Router

You'll probably recognize the navigation bar, it's usually at the top or left side of a website, and allows users to easily browse the different sections of a website.

A potential sitemap for a website (with local links) might be represented as follows:

// Home
http://localhost:8000/

// Products
http://localhost:8000/#/products

// Blog
http://localhost:8000/#/blog

// Catalog
http://localhost:8000/#/catalog

// Sign-Up
http://localhost:8000/#/signup

// 404 Error Page
http://localhost:8000/#/error

Routes are endpoints that can be accessed via the location bar in the browser. Each section of the website will have a route set up via the router. To get things up and running you'll need to install the React Router and React Router DOM, like so (feel free to remove the @experimental from the end of these commands if you don't want the bleeding edge latest):

npm install react-router@experimental 
npm install react-router-dom@experimental

Key Concept: Exporting Components and Adding Links

We can add links to each page in the navigation bar and export a component for each page in a single javascript file, like so:

import React from "react";

export function Home() {
  return (
    <div>
      <h2>[Home Page]</h2>
      <nav>
        <Link to="products">Products</Link>
        <Link to="blog">Blog</Link>
        <Link to="catalog">Catalog</Link>
        <Link to="signup">Sign-Up</Link>
      </nav>
    </div>
  );
}

export function Products() {
  return (
    <div>
      <h2>[Products]</h2>
    </div>
  );
}

export function Blog() {
  return (
    <div>
      <h2>[Blog]</h2>
    </div>
  );
}

export function Catalog() {
  return (
    <div>
      <h2>[Catalog]</h2>
    </div>
  );
}

export function SignUp() {
  return (
    <div>
      <h2>[SignUp]</h2>
    </div>
  );
}

In our index.js file, we'll need to render what's called the BrowserRouter:

import React from 'react';
import { render } from 'react-dom';
import App from './App';

render(
  <App />, document.getElementById('app'));

This would work for a site with a navigation bar that looks something like this:

And in app.js, we'll need to import each page:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

class App extends Component {
  render() {
    return (
    <Router>
        <div>
          <h2>Trend</h2>
          <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
          <ul className="navbar-nav mr-auto">
            <li><Link to={'/'} className="nav-link"> Home </Link></li>
            <li><Link to={'/products'} className="nav-link">Products</Link></li>
            <li><Link to={'/blog'} className="nav-link">Blog</Link></li>
            <li><Link to={'/catalog'} className="nav-link">Catalog</Link></li>
            <li><Link to={'/signup'} className="nav-link">Sign-Up</Link></li>
          </ul>
          </nav>
          <hr />
          <Switch>
              <Route exact path='/' component={Home} />
              <Route path='/products' component={Products} />
              <Route path='/blog' component={Blog} />
              <Route path='/catalog' component={Catalog} />
              <Route path='/signup' component={Signup} />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

Conclusion

The React Router can be used to enhance the functionality of your React web page's user interface. This is ideal if you want the URL in the location bar to change depending on which area of the site the user is currently viewing. This can be important, because users can then utilize bookmarks to get back to a key part of your website they want to return to, and use the back and forward buttons in their browser to navigate your website in a way that they've grown accustomed to.

Promises in JavaScript

Peter Klingelhofer — Sun, 19 Jul 2020 18:45:52 +0000

Introduction

Callbacks are functions that run after something happens or something completes. If you have to make an asynchronous request, it can either be successful or result in failure. These two possibilities in Promises are denoted by resolves or rejects parameters.

Promises help us avoid what's commonly referred to as "callback hell", wherein cascading callbacks create a pyramid shape and impossible to decipher code that's hard to scale. Promises allow us to easily chain callbacks in an intuitive way, by chaining then and using catch for errors. Promises helps to break up callbacks into methods with semantic naming.

A Simple Promise

const promise = new Promise(function (resolve, reject) {
  const a = 'apples';
  const b = 'apples';
  if (a === b) {
    resolve();
  } else {
    reject();
  }
});

promise
  .then(function () {
    console.log('success');
  })
  .catch(function () {
    console.log('error');
  });

// output => 'success'

Concepts to Know

Deferred objects are works that are not yet completed
Promise properties are placeholders. Initially, this value is unknown.
Each deferred has a promise which acts as a placeholder for the future result.

Support

All modern browsers support Promises, except for Internet Explorer 11 and previous versions.

API Request Example with Promises

Let's pretend that we have a website with multiple accounts created for people's pets. Below, we create a promise to request a made up api server a specified number of pets' user accounts. If the statusCode associated with the request is 200, that indicates that the request was successful, and that we should call resolves to utilize JSON.parse to parse the results. If we do not receive a 200 statusCode back, rejects is called, showing the user the failing statusCode.

// creating the request

const getPets = (number) => {
  new Promise((resolves, rejects) => {
    const request = new XMLHttpRequest();
    request.open("GET", `https://api.examplepet.com/?results=${number}`);
    request.onload = () => {
      if (request.status === 200) {
        resolves(JSON.parse(request.response).results);
      } else {
        rejects(Error(request.statusText));
      }
      request.onerror = (error) => rejects(error);
      request.send();
    };
  });
};

// invoking the request
getPets(20)
  .then((pets) => console.log(pets))
  .catch((error) => console.error(error));

Promise Method: done()

Normally, when chaining method calls with Promises, you can risk discarding errors without seeing them:

function promisesExampleFunction() {
  asyncFunc()
  .then(function1)
  .catch(response1)
  .then(function2);
}

If the last .then(function2); line elicits a rejection, it is never handled. We can account for this using done() like so:

function promisesExampleFunction() {
  asyncFunc()
  .then(function1)
  .catch(response1)
  .done(function2);
}

In the example above, done() can actually replace the last .then(function2);, or it can be interchangeably added after the last .then(function2) with done() receiving no arguments.

Promise Method finally()

finally() is great for performing actions regardless of whether an error occurs. It is most frequently used as a clean up method after the last then() or done() call. This can be done during page loads to show and hide the spinner, regardless of whether the above functions were successful or not - you'll want to stop the spinner if processing is no longer occurring:

spinnerShow();
fetchData()
  .then((data) => renderPage(data))
  .catch(error)
  .finally(spinnerHide);

Promisify

Promisify is an easy way to convert callback functions to a function that returns Promises. Below, we convert a callback-based function called func to return native Promises.

const promisify = require("es6-promisify");
const fs = require("fs");

const promisifiedFunc = promisify(fs.func);

promisifiedFunc("oranges.txt").then(function (fruit) {
  console.log("Fruit received:", fruit);
}).catch(function (error) {
  console.error(error);
});

Conclusion

Promises after they're called upon eventually either resolve or reject, returning a response based on what the Promise object specifies. By chaining then and using catch for errors, we can perform asynchronous functions in an intuitive way and avoid "callback hell". Promises can handle multiple async operations seamlessly, while at the same time providing superior error handling than would be possible with simple callback chaining.

Hook, Line, and Sinker: Hooks in React.js

Peter Klingelhofer — Sun, 12 Jul 2020 20:15:38 +0000

Introduction

React is a JavaScript library for building user interfaces, and is a tool used primarily for building the view layer of an application. In React, are made up of components using code to produce HTML. Respecting the separation of concerns, each component is responsible for a separate function or task.

React was created by a software engineer at Facebook named Jordan Walke, which was later incorporated into the Facebook newsfeed in 2011, used in Instagram in 2012, made open source at JSConf in 2013, and adopted by Netflix in 2015. In 2017, they fully rewrote React's internals to modernize it, and in 2019, Hooks were released, a means of sharing stateful logic between components.

Static components are React components that are not updated constantly. Stateful components are dynamic (like a counter for example) and re-render constantly.

When props or states change in React, the component tree re-renders, updating the user interface with the latest data. Typically useState is used for this rendering and re-rendering process.

Hooks - Introducing useState

For values that will change, you'll want to store said values using React state, using React hooks. Hooks allow us to link, or hook up, functionality across components. Importing React's useState hook can be done like so:

import React, { useState } from "react";

An example of a value that might change would be a numeric tally of the number of reviews a product has received.

function ReviewsCount() {
  const [reviewsCount, setReviewsCount] = useState(0);

function anotherReviewAdded() {
  setReviewsCount(lastState => lastState ++);
}

  return (
    <div>
      {reviewsCount} Reviews
      <br />
      <button onClick={anotherReviewAdded}>
        Submit Review
      </button>
    </div>
  );
}

ReactDOM.render(
  <reviewsCount />,
  document.getElementById('reviewsCount')
);

Hooks - Introducing useEffect

useEffect is an important addition to your repertoire if you aim to cause side effects, e.g do something that isn't part of the return. Say we wanted to send a message to the console.log to see if a boolean was checked.

function ConsoleBoolean() {
  const [clicked, setTrue] = useState(false);

  useEffect(() => {
    console.log(`Boolean True!`);
  });

  return (
    <>
      <input
        type="checkbox"
        value={clicked}
        onChange={() => setTrue((clicked) => !clicked)}
      />
      {clicked ? 'clicked' : 'not clicked'}
    </>
  );
}

Hooks - Introducing useContext

useContext returns a context value for the context specified. When the <MyContext.Provider> updates, the useContext hook triggers a rerender passing the latest context value. The argument useContext receives is the context object itself.

Context using the standard way:

import React from "react";

const ColorContext = React.createContext();

function App() {
  return (
    <ColorContext.Provider color={blue}>
      <div>
        <Display />
      </div>
    </ColorContext.Provider>
  );
}

function Interface() {
  return (
    <ColorContext.Consumer>
      {value => <div>The color is {color}.</div>}
    </ColorContext.Consumer>
  );
}

Context using the new useContext hook:

import React, { useContext } from 'react';

function Interface() {
  const color = useContext(NumberContext);
  return <div>The color is {color}.</div>;
}

Conclusion

React.js is one of the most widely used libraries in JavaScript today, providing a powerful means of constructing the view layer of applications. We can use hooks to have the various components in React talk to each other, and cause changes and perform functions upon changes to the state and upon user interaction. useState allows you to add state to your components, storing values that will probably change. useEffect is important to use when we need a render to cause side effects outside of just the return of the function. useContext can be used to rerender when its value changes. These hooks allow you to use state and other features without writing a class.

An Introduction to jQuery: Functionality, Animations, and Server Interaction

Peter Klingelhofer — Sun, 05 Jul 2020 23:10:30 +0000

Introduction

jQuery is an intuitive way to realize common JavaScript tasks consistently across major browsers. It makes it really easy to select elements with CSS-style selectors, animate, use event listeners, and update the DOM.

// this function lets you find elements on the page
jQuery()

// a typical shorthand used for the jQuery object is
$()

/*
this function creates a jQuery object, selecting 
all list items with a class of 'cool'
*/
$('li.cool');

// we can toggle additional classes on and off like so
$('li.cool').toggleClass('done');

jQuery's cross-browser capabilities allow users to avoid the need for writing fallback code to support older browsers.

Element Functionality

jQuery Method: .blur()

Blur events occur when an element loses focus. This event can work for all element types. An element may lose its focus by a mouse click on a different element on the page, or if the user is traversing the page with keyboard commands (such as pressing the Tab key to move to the next element).

/*
.blur( [eventData ], handler )
- eventData: data object that will be passed to the event handler
- handler: function to be executed every time the event is triggered


here we turn the color of the input field the user just left 
black, and send a message to the console
*/

$(document).ready(() => {  
  $("input").blur(function(){
    $(this).css("background-color", "#000000");   
    console.log(`Until next time, friend!`);
  });  
});

Element Animation

jQuery Method: .fadeOut()

fadeOut() fades out all matching elements from opaque to invisible

/*
.fadeOut( [duration ] [, complete ] )
- duration: (default: 400) optional number or string designating 
how long the animation takes to complete
- complete: optional callback function to call after 
animation completes


fades out all list items with a class of cool
*/
$("button").click(() => {
  $("li.cool").fadeOut();
});

.fadeOut also includes additional easing options to control the speed of the animation

/*
.fadeOut( options )
- options: object to pass additional options to the method
+ easing: (default: swing) string indicating which easing function 
to use for the transition. swing goes slow in the beginning, speeds 
up, then slows down again at the end, whereas linear has a 
constant speed throughout.
*/

$("button").click(() => {
  $("div").fadeOut(200);
});

Server Communication

jQuery Method: AJAX $.get()

The REST acronym stands for REpresentational State Transfer. REST APIs allows you to interact with servers Get requests and attempts to retrieve data from a specified server.

/*
$.get(url [, callback]);
- url: specifies the URL of the server you intend to request
- callback: optionally name a function to call if successful


here we take input from the user and request the server for a JSON 
file containing information pertaining to that user's account, and 
display it on the page
*/

$(document).ready(function(){
    $("button").click(function(){
        let username = $("#input").val();
        $.get("profile.json", {user: username} , function(data){
            $("#profile").html(data);
        });
    });
});

jQuery Method: AJAX $.post()

Submits data to a specified server.

/*
$.( url [, data ] [, success ] [, dataType ] );
- url: specifies the URL of the server you intend to send data to
- data: optionally specify data to send with the request
- callback: optionally name a function to call if successful
- dataType: the type of data expected from the server

here we ask the server the price of an item on the page
*/

$(document).ready(function(){
    $("button").click(function(){
        $.post('http://example.com/form.php, 
        {category:'client', type:'premium'},(data) => { 
        console.log(`data retrieved`);
        $("#pricetag").html(data.amount);
    });
    });
});

Using REST API, we can submit authentication keys with our AJAX requests so that the server will talk to us. Here is a more complex example using REST API headers in our postSettings object being submitted in our $.ajax call to authenticate the connection with the server


const postSettings = {
  "url": "http://server.location.com/inbox",
  "method": "POST",
  "timeout": 0,
  "headers": {
    "X-Parse-Application-id": "writeKeyid",
    "X-Parse-REST-API-Key": "writeAPIkey"
    "Content-Type": "application/json",
  },
};

$.ajax(postSettings).done(data => console.log(data));

Conclusion

jQuery is an invaluable and powerful tool for achieving otherwise cumbersome JavaScript tasks swiftly and efficiently. We can perform functionality such as blur, animations such as fadeOut, and interact with servers using jQuery AJAX methods. With browser-compatibility operating under the hood so you can focus more on creating and less on worrying about users who haven't updated their browsers in years, we can use jQuery to increase accessibility of our websites.

In closing, I highly recommend this impressively useful cheatsheet Oscarotero has put out for jQuery.

Navigating Rest Parameters and Arguments in JavaScript

Peter Klingelhofer — Sun, 28 Jun 2020 18:30:36 +0000

Introduction

Rest parameters were introduced in JavaScript ES6 in 2015. When you don't know how many input arguments will be present, the rest parameter represents however many arguments have been used as an array. Rest parameters are not given their own individual separate name in the function expression, they're denoted by a ... prefix added to a parameter following the named parameters when defined in a function expression.

The arguments object was introduced in JavaScript ES5 in 2009. The arguments object holds all arguments that have been passed to the function, regardless of if they are named when defined in the function expression or not. It is not a real array, so it will need to be converted to one before it can be manipulated with array methods.

Key Concept: The Spread Operator and Rest Parameters

Add '...' before the last parameter
All arguments following the second to last named parameter are placed in an array-like object
For example, Object.assign can be used with the spread operator. Underbar has a built in extend function that gives the first object argument the properties of each following object passed in. If you're working on a project and you don't use underbar anywhere else but need an extend function, the spread operator allows this to be done quite easily with Object.assign:

const obj1 = {1: 'a', 2: 'b'};
const obj2 = {3: 'c', 4: 'd'};
const obj3 = {5: 'a', 6: 'b'};

const spreadExtend = function (object, ...objects) {
    let obj = Object.assign(object, ...objects);
    return obj;
  }

console.log(spreadExtend(obj1, obj2, obj3));
// results in {1: a, 2: b, 3: c, 4: d, 5: a, 6: b}

Pushing with the Spread Operator We can avoid an unnecessarily nested array when pushing with the spread operator:

const integerArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const noRestParameterPushFunction = (...inputValues) => {
  const result = [];
    inputValues.forEach((element) => {
      result.push(element); // no spread operator
    });
  return result;
  }
console.log(noRestParameterPushFunction(integerArray));
// returns [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]]

const restParameterPushFunction = (...inputValues) => {
  const result = [];
    inputValues.forEach((element) => {
      result.push(...element); // spread operator
    });
  return result;
  }
console.log(restParameterPushFunction(integerArray));
// returns [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Spread syntax can make writing operations much quicker, for example:

const numbers = [90, 40, 5]
console.log(Math.min(numbers));
// returns NaN

console.log(Math.min(...numbers))
// returns 5

Key Concept: Arguments Object

All arguments passed to the function (if no parameters are specified) are contained in the arguments object
This object is technically not a real array
We can use ES6's Array.from(arguments) to turn it into an accessible array:

// Array.from(arguments) yields an array of all of the arguments
const half = x => x / 2
const double = x => x * 2
const func = function(double, half) {
  console.log(arguments)
  console.log(Array.from(arguments))
}
func(double, half, 1, 2)
/* The console.log(arguments) yields:
[Arguments] {
  '0': [Function: double],
  '1': [Function: half],
  '2': 1,
  '3': 2
}
The console.log(Array.from(arguments)) yields:
[ [Function: double], [Function: half], 1, 2 ]
*/

We can use an older method, ES5's Array.prototype.slice.call(arguments), to return a shallow copy of an array with the arguments, and specify if we only want some of the arguments:

// Array.prototype.slice.call(arguments, 2) yields an array 
// of all of the arguments after the first two
const half = x => x / 2
const double = x => x * 2
const func = function(double, half, ...args) {
  return half(args[0]) + double(args[1])
}
const ES5func = function(double, half) {
  const argumentsAfterFirstTwo = Array.prototype.slice.call(arguments, 2);
  return half(argumentsAfterFirstTwo[0]) + double(argumentsAfterFirstTwo[1])
}
console.log(func(double, half, 1, 2));
console.log(ES5func(double, half, 1, 2));

Conclusion

If you see ... as a prefix of the last function parameter, this means the rest of the arguments will be gathered into an array for use by the function. If you see ... in a function call, the spread is turning an array into a list of arguments. For functions that require a list of multiple arguments, the spread syntax can pass arrays to functions. Rest parameters are great for functions that can accept an unknown number of arguments.