Jason Brown

51 Flips | 1 Magazine | @CodeDaily | Keep up with Jason Brown on Flipboard, a place to see the stories, photos, and updates that matter to you. Flipboard creates a personalized magazine full of everything, from world news to life’s great moments. Download Flipboard for free and search for “Jason Brown”

Custom Handling the Android Back Button with React Navigation

Intro<p>The Android back button adds an additional navigation option that is crucial to manage when developing an application. Commonly a button is …

JavaScript

Create an Instagram Press-and-Hold Image Preview Modal with Gesture Actions in React Native

Introduction<p>Instagram has a cool feature when you are looking at the grid view. When you press and hold on any of the images it will show you a quick …

Create an Interactive Line Graph with a Hover Dual Line Highlight using VX and D3

In this lesson we'll take a look at how to render a basic line graph using D3, and VX. We'll move on to analyzing how to add some interactivity that …

Create a Line Graph with Hovering to Render a Dual Line Highlight using VX and D3

Intro<p>We'll be using VX to abstract away a little bit of the tedious work that D3 makes us do.<p>We're going to be building a graph that displays prices, …

Create a Form Wizard with Data Loss Prevention using Formik and React Router

Intro<p>When dealing with forms there comes a time when you need multiple pages. With this comes state across pages, validation and preventing users …

Use matchPath to Match Nested Route Paths in Parent Routes with React-Router

In this lesson we'll use the matchPath function exported by react-router to find active nested routes inside of a parent component. This technique …

JavaScript

Create a ProtectedRoute for Logged In Users with Route, Redirect, and a Render Prop in React Router

In this lesson we'll create a protected route just for logged in users. We'll combine a Route with a render prop and use a loggedIn prop to determine …

JavaScript

Create a Modal Route with Link and Nav State in React Router

In this lesson we'll show how the Link component to prop can receive an object. This allows us to pass state to the route. With the nav state we …

JavaScript

Use matchPath to Match Nested Route Paths in Parent Routes with React-Router

Intro<p>There may be a time in your application when you need to compare the previous route id to the current route id to load data or respond in some …

JavaScript

Create a ProtectedRoute for Logged In Users with Route, Redirect, and a Render Prop in React Router

Intro<p>With the increasing proliferation of single page apps that control routing, as well as utilize non-cookie methods of authentication there is an …

Create a Modal Route with Link and Nav State in React Router

Intro<p>A common pattern on Facebook and other applications is to show pictures in a gallery, this gallery may be an interactive modal. However if the …

Prevent Navigation with the React Router Prompt Component When Data is Being Edited

Intro<p>Data loss prevention is a UX feature that should be present on all web apps that have longer form user input data. There are many times when a …

Create Nested Tab Routes with Dynamic Paths with React-Router

In this lesson we'll use the match.path value passed in by React Router to setup dynamic routes for Tabs. This will allow us to setup dynamic tabs …

Create Nested Tab Routes with Dynamic Paths with React-Router

Intro<p>A common pattern in most web applications is hiding unnecessary data behind tabs. However in defining these tabs you should make the data …

Add Interactivity to a Line Graph using scaleLinear.invert to Find a Data Point to Highlight on Mouse Move

Intro<p>Rendering data is only half the battle. To create a more engaging visualization we need to turn mouse movement/touches back into data so users …

Fundamentals of Rendering Data as an SVG Bar Graph with D3 and scaleBand

Intro<p>Bar graphs are one of the foundations of the graphing world. We'll walk through how to take data, transform it using scaleBand and scaleLinear …

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

Intro<p>Visualizations can be intimidating. We'll be focusing on the fundamentals. Nothing crazy, just drawing a line. We'll explain everything that …

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

Intro<p>Yup is a JavaScript object schema validator and object parser inspired by Joi ( a validator for node). It has many powerful features like async …

How to use a setState Updater Function with a Reducer Pattern

Setup<p>First off, check out the Live Demo so you know what we're building.<p>Our basic setup is a simple incrementer/decrementer. We have a value in …

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

Intro<p>Interactive charts can seem intimidating. They were for me, and some still are but after spending time diving into them for work I've learned …

Understanding setState in componentDidMount to Measure Elements Without Transient UI State

In this lesson we'll explore using setState to synchronously update in componentDidMount. This allows for us to use getBoundingClientRect or other …

Use Yarn Workspaces to Share Code with a create-react-app and create-react-native-app in a Monorepo

In this lesson we'll use yarn and yarn workspaces to create a monorepo that includes a web creat-react-app, a react-native app, and shared code. …

Contain an Animation within the Screen Dimensions in React Native

In this lesson we'll use the screen Dimensions and anAnimated.ValueXY to create an animated element that when animated is contained within the screen …

Creating a React Native Animated Number Ticker

18:32<p>In this course we'll dive into creating an Animated Number Ticker. We'll learn about hiding elements using overflow: "hidden". How to abstract …

How to Detect Touch Inactivity with a PanResponder in React Native

In this lesson we'll use the onMoveShouldSetPanResponderCapture from PanResponder to register touches with out stealing touches from other …

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

Intro<p>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 …

React Native Animation Fundamentals

25:13<p>In this course we will learn and demonstrate the basic concepts of the React Native Animated API. We'll use Animated calls like timing and …

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

Intro<p>Maps alone can be difficult to deal with, however when adding additional content, and animated interactions they become a more powerful and …

Build a Reusable Scroll View Component with Animated scrollTo Abilities 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 …