Fundamentals of Rendering Data as an SVG Line with D3 and scaleLinear


In this lesson we'll start by using d3-scale to build up a scaleLinear for both our x and y data points to allow them to map and extrapolate our data correctly to renderable points. Then we'll use line from d3-shape to build out our path. We'll supply it with different sets of data and explore how range can effect how our data renders. Finally we'll show off using curveStep to see how it changes our graph rendering.

How to Create an Optional Dynamic Validation Schema based on a Value with the Yup Validation Library


In this lesson we'll show how to setup a nested validation structure using the yup library. We'll then use the yup.lazy method to evaluate the value at runtime and adjust our validation schema. We'll make our nested validation optional only if our optionalObject actually exists.

How to use a setState Updater Function with a Reducer Pattern


In this lesson we'll show how to create an updater function. We'll also dive into how to separate your state management logic into a separate reducer function much like how Redux operates. It will receive an action with a type, and any data and update state accordingly.

Make a Beautiful Interactive Bitcoin Price Chart with React, D3, and VX


In this lesson we'll walk through building an interactive bitcoin price chart. We'll use React combined with VX to render our chart and tooltips. D3 will power all of the data processing to ensure everything is rendered where it should be. We'll also walk through explaining what scales, ranges, domains and bisectors are and how to use them.

Create a Youtube Video Page with Animated Video Drag to Corner in React Native

React Native

Youtube has a unique video playing experience. It allows you to drag a video to the corner of the screen which continues to play. You can then navigate through the site and select other videos. Additionally if you want to drag it back up you can drag back to the video you were viewing.

Build a Map with Custom Animated Markers and Region Focus when Content is Scrolled in React Native

React Native

We'll build out a map with react-native-maps and custom animated map makers. We'll construct an a scroll view that when scrolled will animate the marker that it is associated with. Once scrolling has stopped we will animate the map region and focus on the marker we are looking at.

We'll use a single Animated.Value and use and explain interpolate in depth. We'll also show how to use extrapolate: "clamp" to lock our outputRange values.

Build a Reusable Scroll List Component with Animated scrollTo in React


We'll show how to build a reusable ScrollView and ScrollElement component without adding any additional DOM elements. We'll take advantage of React.cloneElement, React.Children.only,findDOMNode, and context to build a registry of scrollable elements in the list. Then we'll use ref on the ScrollView to expose a way to animate to any item at any scroll position in the list.

Create a Dynamic Animated Notification in React Native

React Native

We'll explore how to use various Animated apis including Animated.timing, Animated.parallel, Animated.sequence, setValue, and Animated.delay to build a notification that fades and slides in and out.

We'll learn about using a ref and the measure function to get the dimensions of a particular view. Additionally we'll show how to use the measure function in conjunction with the componentDidUpdate callback on setState.

We'll explain using translateY and to move views around performantly.

Using Functions as Children and Render Props in React Components


We'll explore the concept behind child function components and how to add dynamic return values and hiding state management inside the component. Then we'll explore how to setup functional render props that allow for complex components with simple APIs. Finally we'll show how these 2 concepts can compose together like any other React component.

Disable the Yellow Box in React Native

React Native

The Yellow warning box in React Native can be both helpful and annoying. There are many errors that can be ignored but end up blocking necessary pieces of the application.The Yellow warning box in React Native can be both helpful and annoying. There are many errors that can be ignored but end up blocking necessary pieces of the application.