Egghead Instructor Andrew Van Slaars

Andrew Van Slaars

Full stack developer, currently focused on building applications with JavaScript. I love learning new libraries, languages and tools and I'm passionate about sharing the things I learn with others.



Unlock all of Andrew's PRO Lessons
click for instant access!

Browse Andrew Van Slaars's lessons.

showing 55 lessons...

Update State in React with Ramda's Evolve

Update Component State in React With Ramda Lenses

Understand Function Composition By Building Compose and ComposeAll Utility Functions

Get Deeply Nested Properties Safely with Ramda's path and pathOr Functions

Create a Reusable Mapping Function with Ramda's Map

Convert a Promise.all Result to an Object with Ramda's zip and zipObj

Create a Query String from an Object using Ramda's toPairs function

Filter an Array Based on Multiple Predicates with Ramda's allPass Function

Convert Object Methods into Composable Functions with Ramda

Sort an Array of Objects by Multiple Fields with Ramda's sortWith

Refactor a Promise Chain to Function Composition using Ramda

Refactor to a Point Free Function with Ramda's useWith Function

Debug Function Compositions with Ramda's Tap Function

Get a List of Unique Values From Nested Arrays with Ramda

Create an Array From a Seed Value with Ramda's unfold

Handle Errors in Ramda Pipelines with tryCatch

Refactor to Point Free Functions with Ramda using compose and converge

Load Data From a Server with fetch

P

Delete Data on the Server with fetch

P

Update data on the Server with fetch

P

Show Temporary Messages in a React Application

P

Save Data to the Server with fetch

P

Build a Link Component to Navigate to Routes in React

P

Keep Application State in Sync with Browser History

P

Use React Context to Manage Application State Through Routes

P

Update React Application State from Form Input

P

Filter Data on Property Values

P

Create a Pipe Function to Enable Function Composition

P

Pass Data To Event Handlers with Partial Function Application

P

Prevent Empty Form Values with Conditional Submit Handlers

P

Update Data in a List without Mutations

P

Synchronize React UI and State with Controlled Components

P

Remove Items from a List without Mutations

P

Use ES2016 Property Initializer Syntax in ES6 classes

P

Refactor React Components to be Stateless Functional Components

P

Add Data to a List without Mutations

P

Validate Component Input with Prop Types in React

P

Create a Stateless Functional Component for an Input Form

P

Render a React UI Based on Initial State

Render a React UI with JSX

Bootstrap a React Application through the CLI with Create React App

Convert a QueryString to an Object using Function Composition in Ramda

Declaratively Map Data Transformations to Object Properties Using Ramda evolve

Select a Subset of Properties from a Collection of Objects in Ramda

Curry and Uncurry Functions with Ramda

Handle Branching Logic with Ramda's Conditional Functions

Create & Deploy a Universal React App using Zeit Next

Pick and Omit Properties from Objects Using Ramda

Declaratively Map Predicates to Object Properties Using Ramda where

Use Now alias for custom sub-domains

react tutorial about Update State in React with Ramda's Evolve

Update State in React with Ramda's Evolve

4:29 react

In this lesson we'll take a stateful React component and look at how we can refactor our setState calls to use an updater function and then leverage Ramda's evolve function to make our updater function a reusable utility that isn't tied to the React API.

react tutorial about Update Component State in React With Ramda Lenses

Update Component State in React With Ramda Lenses

4:37 react

In this lesson, we'll refactor a React component to use Ramda lenses to update our component state. We'll create a lens to focus on the property we want to target and use over to apply the existing state value to a utility function and we'll get back a new state that will be reflected in our rendered UI.

js tutorial about Understand Function Composition By Building Compose and ComposeAll Utility Functions

Understand Function Composition By Building Compose and ComposeAll Utility Functions

6:14 js

Function composition allows us to build up powerful functions from smaller, more focused functions. In this lesson we'll demystify how function composition works by building our own compose and composeAll functions.

js tutorial about Get Deeply Nested Properties Safely with Ramda's path and pathOr Functions

Get Deeply Nested Properties Safely with Ramda's path and pathOr Functions

4:03 js

In this lesson we'll see how Ramda's path and pathOr functions can be used to safely access a deeply nested property from an object while avoiding the dreaded checks for undefined at each new property in the desired path.

js tutorial about Create a Reusable Mapping Function with Ramda's Map

Create a Reusable Mapping Function with Ramda's Map

3:52 js

Using the map method of an array is a great way to create new data from an existing array in an immutable way and without writing any loops. The problem is that you need to call it on an existing array instance. In the lesson we'll see how to build our own reusable map utility function using manual currying and then we'll replace it with Ramda's map.

js tutorial about Convert a Promise.all Result to an Object with Ramda's zip and zipObj

Convert a Promise.all Result to an Object with Ramda's zip and zipObj

3:11 js

In this lesson, we'll use Promise.all to get an array that contains the resolved values from multiple promises. Then we'll see how we can use Ramda to convert that array of values into a single object using zip with fromPairs. Then we'll refactor to use zipObj.

js tutorial about Create a Query String from an Object using Ramda's toPairs function

Create a Query String from an Object using Ramda's toPairs function

2:24 js

In this lesson, we'll use Ramda's toPairs function, along with map, join, concat and compose to create a reusable function that will convert an object to a querystring.

js tutorial about Filter an Array Based on Multiple Predicates with Ramda's allPass Function

Filter an Array Based on Multiple Predicates with Ramda's allPass Function

2:24 js

In this lesson, we'll filter a list of objects based on multiple conditions and we'll use Ramda's allPass function to create a joint predicate from multiple, individual predicate functions.

js tutorial about Convert Object Methods into Composable Functions with Ramda

Convert Object Methods into Composable Functions with Ramda

4:44 js

In this lesson, we'll look at how we can use Ramda's invoker and constructN functions to take methods of an object and turn them into reusable utility functions that are curried and accept their object as the last argument. We'll convert a dot-chained string of jQuery methods and create a composed function that can be applied to multiple elements.

js tutorial about Sort an Array of Objects by Multiple Fields with Ramda's sortWith

Sort an Array of Objects by Multiple Fields with Ramda's sortWith

1:58 js

Sorting an array of objects by multiple fields can be tricky. Even worse, the code can be tough to follow and making changes in the future is complicated by conditional logic in the sorting function. In this lesson we'll see how to simplify this using Ramda's sortWith along with ascending and descending. We'll sort an array of objects by multiple fields and the code will be readable and dead simple to change.

js tutorial about Refactor a Promise Chain to Function Composition using Ramda

Refactor a Promise Chain to Function Composition using Ramda

8:37 js

Promise chains can be a powerful way to handle a series of transformations to the results of an async call. In some cases, additional promises are required along the way. In cases where there are no new promises, function composition can reduce the number of dot chained thens you need. In this lesson, we'll look at how to take a promise chain, and reduce it down with function composition.

js tutorial about Refactor to a Point Free Function with Ramda's useWith Function

Refactor to a Point Free Function with Ramda's useWith Function

3:41 js

Naming things is hard and arguments in generic utility functions are no exception. Making functions "tacit" or "point free" removes the need for the extra parameter names and can make your code cleaner and more succinct. In this lesson, we'll create a normal, "pointed" function and then use ramda's useWith function to refactor our way to point-free bliss.

js tutorial about Debug Function Compositions with Ramda's Tap Function

Debug Function Compositions with Ramda's Tap Function

2:48 js

Functional composition is a great way to write declarative code that reads well. But sometimes, you need to get insight into what's happening at different steps in your composition. This is where tap comes in. With tap, we can run code that generates side-effects, like logging to the console, and our data will continue to be passed along, untouched.

js tutorial about Get a List of Unique Values From Nested Arrays with Ramda

Get a List of Unique Values From Nested Arrays with Ramda

5:55 js

In this lesson, we'll grab arrays of values from other arrays, resulting in a nested array. From there, we'll look at multiple ways to flatten the array structure using composition with map and unnest and then refactoring to use chain, AKA flatMap. Finally, we'll add Ramda's uniq function to remove duplicate values.

js tutorial about Create an Array From a Seed Value with Ramda's unfold

Create an Array From a Seed Value with Ramda's unfold

3:05 js

In this lesson we'll look at how you can use Ramda's unfold function to generate a list of values based on an initial seed.

js tutorial about Handle Errors in Ramda Pipelines with tryCatch

Handle Errors in Ramda Pipelines with tryCatch

2:32 js

Handling your logic with composable functions makes your code declarative, leading to code that's easy to read and easy to test. Breaking that up to wrap some risky function in a try/catch block introduces imperative code and makes it harder to maintain that declarative approach. With Ramda's tryCatch function, you can handle errors right in the middle of a composition and leave your code clean and functional. We'll also see how you can use propOr to avoid common "cannot find X of undefined" errors.

js tutorial about Refactor to Point Free Functions with Ramda using compose and converge

Refactor to Point Free Functions with Ramda using compose and converge

3:33 js

In this lesson we'll take some existing code and refactor it using some functions from the Ramda library, most notably, compose and converge. When we're done, we'll have taken a function with a couple of local variables and parameter references and converted it into more streamlined "point-free" or "tacit" functions.

react tutorial about Load Data From a Server with fetch

Load Data From a Server with fetch

4:19 react PRO

We’ll fire up json-server so we can run our application against a server. We’ll take advantage of the fetch polyfill provided by create-react-app and leverage the componentDidMount lifecycle event to load our initial todo list. We’ll also add an error message to our UI in the case that the server is unavailable.

react tutorial about Delete Data on the Server with fetch

Delete Data on the Server with fetch

1:35 react PRO

We’ll use fetch to delete items on the server when the client triggers a removal, and update the UI with a success message once the delete operation on the server has succeeded.

react tutorial about Update data on the Server with fetch

Update data on the Server with fetch

3:09 react PRO

We’ll use fetch and refactor our client-side task completion logic to send an update to the server, and update the UI with a success message once the save has completed successfully.

react tutorial about Show Temporary Messages in a React Application

Show Temporary Messages in a React Application

2:41 react PRO

We’ll add a message object to the application state and use that message to conditionally show a message component. We’ll also use a setTimeout to update our state and hide the message after a specified period of time.

react tutorial about Save Data to the Server with fetch

Save Data to the Server with fetch

2:30 react PRO

We’ll cover posting new data to the server using fetch and the POST http method. We’ll also update the UI with a success message once the save has completed successfully.

react tutorial about Build a Link Component to Navigate to Routes in React

Build a Link Component to Navigate to Routes in React

6:32 react PRO

In this lesson, we’ll create a Link component that manipulates the browser’s address bar using the history API’s pushState method.

react tutorial about Keep Application State in Sync with Browser History

Keep Application State in Sync with Browser History

1:43 react PRO

Using pushState and passing route data via context allows our application to respond to route changes made from Link components, but using the back and forward buttons in the browser doesn’t update the application state as we would expect. In this lesson, we’ll add event handling to our Router component to handle history popState events so routing behavior is maintained for the back and forward buttons.

react tutorial about Use React Context to Manage Application State Through Routes

Use React Context to Manage Application State Through Routes

7:51 react PRO

We’ll create a Router component that will wrap our application and manage all URL related state. We’ll see how we can use React’s built in context mechanism to pass data and functions between components without having to pass props all the way down through the component tree.

react tutorial about Update React Application State from Form Input

Update React Application State from Form Input

4:07 react PRO

We’ll add a handler to the form so we can take new input and use it to update the application state. We’ll append new items to the list with the AddTodo function and replace the todos list in state. We’ll also clear out our form so it can accept new todos.

react tutorial about Filter Data on Property Values

Filter Data on Property Values

3:28 react PRO

We want to be able to show only items in a certain status so in this lesson, we’ll add a flag to indicate which items to show, and create a function to filter the todos based on that value. We’ll take advantage of route based state to control the filtering behavior.

react tutorial about Create a Pipe Function to Enable Function Composition

Create a Pipe Function to Enable Function Composition

7:13 react PRO

In this lesson, we’ll refactor a series of function calls into a functional pipeline, making the code more declarative and removing the need for intermediate variables. Rather than reaching for a utility library, we’ll start by building our own pipe function to gain a clear understanding of how left-to-right function composition is accomplished in JavaScript.

react tutorial about Pass Data To Event Handlers with Partial Function Application

Pass Data To Event Handlers with Partial Function Application

8:39 react PRO

In this lesson we’ll see how to pass an item’s id value in an event handler and get the state to reflect our change. We’ll also create a helper function that allows us to use partial function application to clean up the event handler code and make it more “functional”

react tutorial about Prevent Empty Form Values with Conditional Submit Handlers

Prevent Empty Form Values with Conditional Submit Handlers

5:37 react PRO

We’ll take advantage of the controlled nature of the todo input and the first class nature of javascript functions to dynamically assign the form submission handler. An empty todo will trigger a submission handler that is only concerned with handling an error state, and when the input is valid, the form will use the standard submit handler.

react tutorial about Update Data in a List without Mutations

Update Data in a List without Mutations

7:10 react PRO

We’ll build small, focused functions to select an object from a list, apply updates to an object and replace an item in a list, avoid mutations to those objects along the way by returning new items that reflect our changes. We’ll verify this behavior by following a test driven approach using Jest.

react tutorial about Synchronize React UI and State with Controlled Components

Synchronize React UI and State with Controlled Components

3:41 react PRO

We’ll make the input field a “controlled component” by reacting to each change of the input and capturing it in the component state. Following this model gives us assurance that the UI is always a representation of the current application state.

react tutorial about Remove Items from a List without Mutations

Remove Items from a List without Mutations

5:31 react PRO

In this lesson, we’ll add the ability to remove items from our list. We’ll add some css to show a delete link while hovered over an item and handle a click event from the component to remove the corresponding item from the list by its id.

react tutorial about Use ES2016 Property Initializer Syntax in ES6 classes

Use ES2016 Property Initializer Syntax in ES6 classes

2:26 react PRO

Create react app provides support for es2016 property initializer syntax out of the box. In this lesson, we’ll refactor the App component to use property initializers and look at the advantages of this syntax.

react tutorial about Refactor React Components to be Stateless Functional Components

Refactor React Components to be Stateless Functional Components

6:42 react PRO

We’ll continue the refactoring effort and break the remaining pieces of the application into their own stateless functional components and see how components can be used within other components.

react tutorial about Add Data to a List without Mutations

Add Data to a List without Mutations

5:17 react PRO

In this lesson, we’ll create a utility function to add items to a list, avoiding mutation by returning a new array. We’ll verify this behavior by creating unit tests with Jest.

react tutorial about Validate Component Input with Prop Types in React

Validate Component Input with Prop Types in React

5:11 react PRO

React gives us a mechanism called PropTypes to ensure that the property values passed into components are of the correct type. By ensuring the correct data is passed to our components, we can avoid potential bugs and more confidently share components with a team or as open source libraries.

react tutorial about Create a Stateless Functional Component for an Input Form

Create a Stateless Functional Component for an Input Form

3:37 react PRO

We’ll refactor our existing code, making the todo form a separate component. We’ll pass values from the App container into the new component via props. We’ll look at the differences between state and props in React and see how state can be passed down to other components as props.

react tutorial about Render a React UI Based on Initial State

Render a React UI Based on Initial State

5:15 react

We’ll define a simple state object in the constructor of the App Component class. Once the state has been defined, we’ll replace the static elements in our rendered output with values from the component’s state. We’ll move from static items to an array, seeing how we can use functions like map to render our UI.

react tutorial about Render a React UI with JSX

Render a React UI with JSX

2:48 react

We’ll dive right into JSX by rendering a static version of what our application will look like. We’ll cover the basic syntax of JSX and point out where it differs from html.

react tutorial about Bootstrap a React Application through the CLI with Create React App

Bootstrap a React Application through the CLI with Create React App

4:19 react

We’ll go from an empty directory to a solid foundation for an application by running a single command. The create-react-app tool handles all of the complicated setup for us so we can focus on building our application.

js tutorial about Convert a QueryString to an Object using Function Composition in Ramda

Convert a QueryString to an Object using Function Composition in Ramda

2:13 js

In this lesson we'll use a handful of Ramda's utility functions to take a queryString full of name/value pairs and covert it into a JavaScript object so we can access those properties in a more useful way. Along the way, we'll build up a composition and look at the tail, split, map and fromPairs functions, along with the crucial compose function.

js tutorial about Declaratively Map Data Transformations to Object Properties Using Ramda evolve

Declaratively Map Data Transformations to Object Properties Using Ramda evolve

2:44 js

We don't always control the data we need in our applications, and that means we often find ourselves massaging and transforming our data. In this lesson, we'll learn how to transform objects in a declarative way using ramda's evolve function.

js tutorial about Select a Subset of Properties from a Collection of Objects in Ramda

Select a Subset of Properties from a Collection of Objects in Ramda

2:59 js

In this lesson we'll take an array of objects and map it to a new array where each object is a subset of the original. We'll look at multiple ways to accomplish this, refactoring our code into a simple and easy to read function using Ramda's map, pick and project functions.

js tutorial about Curry and Uncurry Functions with Ramda

Curry and Uncurry Functions with Ramda

3:39 js

Most of the functions offered by the ramda library are curried by default. Functions you've created or that you've pulled in from another library may not be curried. Ramda's curry and curryN functions allow you to take a non-curried function and use it as a curried functions. In the case where you have a manually curried function and you want to just call it like a normal function, you can use uncurryN to get back a function that accepts all of the arguments at once.

js tutorial about Handle Branching  Logic with Ramda's Conditional Functions

Handle Branching Logic with Ramda's Conditional Functions

5:30 js

When you want to build your logic with small, composable functions you need a functional way to handle conditional logic. You could wrap ternary expressions and if/else statements in functions, handling all of the concerns around data mutation yourself, or you could leverage the conditional functions supplied by Ramda. In this lesson, we'll cover several of Ramda's conditional functions: ifElse, unless, when and cond

react tutorial about Create & Deploy a Universal React App using Zeit Next

Create & Deploy a Universal React App using Zeit Next

6:11 react

In this lesson, we'll use next to create a universal React application with no configuration. We'll create page components that will render on the server if accessed directly, but function as you would expect in the client. We'll use the routing capabilities included with next to create links between the components using pushState and we'll incorporate our own React component. Finally, we'll deploy the application to now with a simple command in the terminal.

js tutorial about Pick and Omit Properties from Objects Using Ramda

Pick and Omit Properties from Objects Using Ramda

5:39 js

Sometimes you just need a subset of an object. In this lesson, we'll cover how you can accomplish this using Ramda's pick and omit functions, as well as the pickAll and pickBy variants of pick.

js tutorial about Declaratively Map Predicates to Object Properties Using Ramda where

Declaratively Map Predicates to Object Properties Using Ramda where

2:34 js

Sometimes you need to filter an array of objects or perform other conditional logic based on a combination of factors. Ramda's where function gives you a concise way to declaratively map individual predicates to object properties, that when combined, cover the various facets of your conditions. In this lesson, we'll look at how this powerful function can be used for scenarios requiring a complex predicate function.

node tutorial about Use Now alias for custom sub-domains

Use Now alias for custom sub-domains

2:50 node

Now is a great way to deploy your node application, but the generated URLs aren't memorable or easily remembered. With Now's alias command, you can fix that. In this video lesson we'll cover how to add an alias to a deployment, giving you a custom *.now.sh subdomain, how to create an alias using your own custom domain name, how to list your aliases and finally how to remove an alias if you no longer want it.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?