Egghead Instructor Joe Maddalone

Joe Maddalone

Joe is a father of five, lives in Chicago, works as a freelance web developer, shares coding tutorials on egghead.io, and codes for fun when not for work.



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

Browse Joe Maddalone's lessons.

showing 121 lessons...

Deploy a GraphQL dev playground with graphql-up

Render Catch-All Routes with React Router v4 using the Switch Component

P

Understand the Difference Between the React Router v4 Router Types

P

Redirect to Another Page with React Router v4

P

Intercept Route Changes with React Router v4 Prompt Component

P

Render Nested Routes with React Router v4

P

Render Multiple Components for the Same Route in React Router v4

P

Conditionally Render a React Router v4 Route with the Switch Component

P

Create Basic Routes with the React Router v4 BrowserRouter

P

Use URL Parameters with React Router v4

P

Use Regular Expressions with Routes with React Router v4

P

Parse Query Parameters in React Router v4

P

Use the React Router v4 Link Component for Navigation Between Routes

P

Style a Link that is Active with NavLink in React Router v4

P

Run the React Router v4 Examples with Create React App

P

Use React.cloneElement to Extend Functionality of Children Components

Understand React.Children Utilities

Targeting Elements with CSS Attribute Selectors

Using CSS Combinators to Identify Siblings and Descendants in CSS

P

CSS :target Selector

P

React Router: Named Components

P

React Router: Nested Routes

P

React Router: Redirect

P

React Router: setRouteWillLeaveHook

P

React Router: IndexRoute

P

React Router: Router, Route, and Link

React Router: Querystring Parameters

P

React Router: hashHistory vs browserHistory

P

React Router: Development Environment Setup

P

React Router: Route Parameters

P

React Router: activeStyle & activeClassName

P

Find patterns at the start and end of lines with line anchors in regular expressions

P

Use backreferences in regular expressions

P

Use regular expression word boundaries

P

Use lookaheads in regular expressions

P

Create capture groups in regular expressions

P

Use shorthand regular expression character classes

P

Use character classes in regular expressions

P

Use regular expressions to find repeated patterns

P

Find plain text patterns using regular expressions

P

Get started with regular expressions in javascript

Iterate over a Collection with Polymer's dom-repeate

P

Execute Custom Events in Polymer

P

Create Event Listeners in Polymer Elements

P

Observe Property Changes on a Custom Polymer Element

P

Data Bind Two Polymer Elements

P

Understand Declared Property Basics in Polymer

P

Extend Native HTML Elements with Polymer

P

Use Lifecycle Callbacks On Custom Polymer Elements

P

Style Custom Elements in Polymer

P
otherjs tutorial about Deploy a GraphQL dev playground with graphql-up

Deploy a GraphQL dev playground with graphql-up

5:51 otherjs

In this lesson we'll use a simple GraphQL IDL schema to deploy and explore a fully functional GraphQL service in minutes with graphql-up.

react tutorial about Render Catch-All Routes with React Router v4 using the Switch Component

Render Catch-All Routes with React Router v4 using the Switch Component

1:24 react PRO

There are many cases where we will need a catch-all route in our web applications. This can include 404-style routes when nothing is match or other use cases where where we receive an invalid route in React Router v4.

react tutorial about Understand the Difference Between the React Router v4 Router Types

Understand the Difference Between the React Router v4 Router Types

6:25 react PRO

React Router introduces several different router types that are useful for various environments where routing is typically needed. The BrowserRouter, NativeRouter, StaticRouter, HashRouter, and MemoryRouter are all available to suit your needs and requirements. Understanding when and why to use the variety of routers is an important part of understanding React Router v4.

react tutorial about Redirect to Another Page with React Router v4

Redirect to Another Page with React Router v4

3:50 react PRO

Overriding a browser's current location without breaking the back button or causing an infinite redirect can be tricky sometimes. In this lesson we'll learn how React Router v4 allows us to easily achieve a redirect without getting bogged down in browser history.

react tutorial about Intercept Route Changes with React Router v4 Prompt Component

Intercept Route Changes with React Router v4 Prompt Component

2:18 react PRO

If a user has entered some input, or the current Route is in a “dirty” state and we want to confirm that data will be lost, React Router v4 provides a Prompt component to interrupt the Route transition and ask the user a question.

react tutorial about Render Nested Routes with React Router v4

Render Nested Routes with React Router v4

2:17 react PRO

With React Router v4 the entire library is built as a series of React components. That means that creating nested Routes is as simple as creating any other nested element in your application.

react tutorial about Render Multiple Components for the Same Route in React Router v4

Render Multiple Components for the Same Route in React Router v4

2:43 react PRO

React Router v4 allows us to render Routes as components wherever we like in our components. This can provide some interesting use cases for creating dynamic routes on our applications.

react tutorial about Conditionally Render a React Router v4 Route with the Switch Component

Conditionally Render a React Router v4 Route with the Switch Component

1:15 react PRO

We often want to render a Route conditionally within our application. In React Router v4, the Route components match the current route inclusively so a “stack” of Routes will all be processed. To render a single Route exclusively we can wrap them in the Switch component to render the first Route that matches our current URL.

react tutorial about Create Basic Routes with the React Router v4 BrowserRouter

Create Basic Routes with the React Router v4 BrowserRouter

6:08 react PRO

React Router 4 has several routers built in for different purposes. The primary one you will use for building web applications is the BrowserRouter. In this lesson you will import the BrowserRouter and create some basic Route components.

react tutorial about Use URL Parameters with React Router v4

Use URL Parameters with React Router v4

2:36 react PRO

URLs can be looked at as the gateway to our data, and carry a lot of information that we want to use as context so that the user can return to a particular resource or application state. One way to achieve this is through the use of URL parameters that include important data right in the URL of the route that gets matched in React Router v4.

react tutorial about Use Regular Expressions with Routes with React Router v4

Use Regular Expressions with Routes with React Router v4

1:52 react PRO

We can use regular expressions to more precisely define the paths to our routes in React Router v4.

react tutorial about Parse Query Parameters in React Router v4

Parse Query Parameters in React Router v4

3:08 react PRO

React Router v4 ignores query parameters entirely. That means that it is up to you to parse them so that you can use that additional information as required. There are several strategies for doing this that we will look at.

react tutorial about Use the React Router v4 Link Component for Navigation Between Routes

Use the React Router v4 Link Component for Navigation Between Routes

2:01 react PRO

If you’ve created several Routes within your application, you will also want to be able to navigate between them. React Router supplies a Link component that you will use to make this happen.

react tutorial about Style a Link that is Active with NavLink in React Router v4

Style a Link that is Active with NavLink in React Router v4

3:50 react PRO

We often need to be able to apply style to navigation links based on the current route. In React Router v4 you can easily accomplish this with the NavLink component. In this lesson, we will step through three ways to accomplish styling links through the use of an active class with the NavLink component.

react tutorial about Run the React Router v4 Examples with Create React App

Run the React Router v4 Examples with Create React App

2:15 react PRO

React Router v4 doesn’t require a lot of configuration to run. The core examples will run out of the box with Create React App. In this lesson, you will create an application and get React Router v4 up and running.

react tutorial about Use React.cloneElement to Extend Functionality of Children Components

Use React.cloneElement to Extend Functionality of Children Components

2:14 react

We can utilize React.cloneElement in order to create new components with extended data or functionality.

react tutorial about Understand React.Children Utilities

Understand React.Children Utilities

2:40 react

The data contained in this.props.children is not always what you might expect. React provides React.children to allow for a more consistent development experience.

css tutorial about Targeting Elements with CSS Attribute Selectors

Targeting Elements with CSS Attribute Selectors

5:00 css

Beyond classes and IDs CSS also provides selectors to target element based on their attributes. In this lesson we'll look at selecting elements based on attributes and using CSS modifiers to identify variations of those values

css tutorial about Using CSS Combinators to Identify Siblings and Descendants in CSS

Using CSS Combinators to Identify Siblings and Descendants in CSS

4:37 css PRO

CSS combinators allows us to reference the DOM relationship between two or more elements in CSS.

css tutorial about CSS :target Selector

CSS :target Selector

1:52 css PRO

The :target selector allows us to interact with a fragment identifier, or hash, in our URL from CSS.

react tutorial about React Router: Named Components

React Router: Named Components

2:28 react PRO

In this lesson we'll learn how to render multiple component children from a single route.

react tutorial about React Router: Nested Routes

React Router: Nested Routes

2:08 react PRO

Since react-router routes are components, creating nested routes is as simple as making one route a child of another in JSX. In this lesson we'll explore nesting routes and accessing the children of parent routes.

react tutorial about React Router: Redirect

React Router: Redirect

1:25 react PRO

The Redirect component in react-router does exactly what it sounds like. It allows us to redirect from from one route to another.

react tutorial about React Router: setRouteWillLeaveHook

React Router: setRouteWillLeaveHook

3:29 react PRO

setRouteWillLeaveHook provides a method for us to intercept a route change before leaving the current route.

react tutorial about React Router: IndexRoute

React Router: IndexRoute

1:55 react PRO

IndexRoute allows us to define a default child component to be rendered at a specific route when no other sub-route is available.

react tutorial about React Router: Router, Route, and Link

React Router: Router, Route, and Link

2:54 react

In this lesson we'll take our first look at the most common components available to us in react-router; Router, Route, and Link.

react tutorial about React Router: Querystring Parameters

React Router: Querystring Parameters

2:22 react PRO

In this lesson we'll extract props for our component from a querystring in the route url.

react tutorial about React Router: hashHistory vs browserHistory

React Router: hashHistory vs browserHistory

1:39 react PRO

In this lesson we'll look at hashHistory which uses a hash hack to track our route changes vs browserHistory which delivers clean urls, but requires server work to implement

react tutorial about React Router: Development Environment Setup

React Router: Development Environment Setup

4:43 react PRO

In this lesson we'll install our dependencies and setup a simple build process for converting our ES6 into ES5 using Babel and Webpack for the rest of the react-router lessons.

react tutorial about React Router: Route Parameters

React Router: Route Parameters

2:20 react PRO

A router library is no good if we have to hardcode every single route in our application. In this lesson we look at how to access variables in our routes and pass them into our components.

react tutorial about React Router: activeStyle & activeClassName

React Router: activeStyle & activeClassName

1:03 react PRO

react-router provides two props for setting a specific style on a Link component whose path matches our current route. activeStyle allows for an inline style while activeClassName allows for an class defined in an external stylesheet.

js tutorial about Find patterns at the start and end of lines with line anchors in regular expressions

Find patterns at the start and end of lines with line anchors in regular expressions

3:19 js PRO

We can identify the start and end of a line using Line Anchors. When dealing with multiple line matches we can utilize the multiline regular expression flag.

js tutorial about Use backreferences in regular expressions

Use backreferences in regular expressions

3:31 js PRO

Regular Expression Backreferences provide us a method to match a previously captured pattern a second time.

js tutorial about Use regular expression word boundaries

Use regular expression word boundaries

2:18 js PRO

Regular Expression Word Boundaries allow to perform "whole word only" searches within our source string.

js tutorial about Use lookaheads in regular expressions

Use lookaheads in regular expressions

1:27 js PRO

Lookaheads allow us to match a pattern followed by another pattern without including the second pattern in our match.

js tutorial about Create capture groups in regular expressions

Create capture groups in regular expressions

4:35 js PRO

In this lesson we'll capture groups of characters we wish to match, use quantifiers with those groups, and use references to those groups in String.prototype.replace.

js tutorial about Use shorthand regular expression character classes

Use shorthand regular expression character classes

1:42 js PRO

In this lesson we'll learn shorthands for common character classes as well as their negated forms.

js tutorial about Use character classes in regular expressions

Use character classes in regular expressions

2:41 js PRO

Regular Expression Character Classes define a group of characters we can use in conjunction with quantifiers.

js tutorial about Use regular expressions to find repeated patterns

Use regular expressions to find repeated patterns

3:53 js PRO

Regular Expression Quantifiers allow us to identify a repeating sequence of characters of minimum and maximum lengths. In this lesson we'll use Regular Expression Quantifiers to match repeated patterns, common Quantifier patterns, and using shorthand for those common Quantifier patterns.

js tutorial about Find plain text patterns using regular expressions

Find plain text patterns using regular expressions

2:29 js PRO

The simplest use of Regular Expressions is to find a plain text pattern. In this lesson we'll look at at finding plain text patterns as well as using the metacharacter "." and how to escape a metacharacter.

js tutorial about Get started with regular expressions in javascript

Get started with regular expressions in javascript

6:00 js

In this lesson we'll learn two ways to construct a Regular Expression in Javascript, explore the methods available to us directly from the RegExp constructor, use Regular Expressions with String.prototype methods, and build a simple regex highlighter.

js tutorial about Iterate over a Collection with Polymer's dom-repeate

Iterate over a Collection with Polymer's dom-repeate

2:49 js PRO

In this lesson we'll use the "dom-repeat" helper method in our custom element to iterate over a collection and use the built in model instantiation to update items in our collection.

js tutorial about Execute Custom Events in Polymer

Execute Custom Events in Polymer

3:08 js PRO

We can utilize the "fire" method from within our custom element to execute a custom event. In this lesson we'll create a custom event and pass useful data along with the event to the consumer of our element.

js tutorial about Create Event Listeners in Polymer Elements

Create Event Listeners in Polymer Elements

1:32 js PRO

In this lesson we'll look at creating event listeners in our custom element using the listeners object as well as annotated event listeners.

js tutorial about Observe Property Changes on a Custom Polymer Element

Observe Property Changes on a Custom Polymer Element

1:57 js PRO

Custom element property changes can be observed by specifying an observer method which will be executed whenever a change occurs and receive both the new value and old value.

js tutorial about Data Bind Two Polymer Elements

Data Bind Two Polymer Elements

5:12 js PRO

Polymer provides us a variety of data-binding configurations. In this lesson we'll look at configuring Two-way, One-way-down and One-way-up data binding.

js tutorial about Understand Declared Property Basics in Polymer

Understand Declared Property Basics in Polymer

4:31 js PRO

We can declare properties on our custom element which serve as a public api configurable by any user from markup.

js tutorial about Extend Native HTML Elements with Polymer

Extend Native HTML Elements with Polymer

3:11 js PRO

Polymer allows us to extend a native HTML elements UI or functionality. In this lesson we'll use a button as our custom element basis and add new UI and functionality to it that can be added to any button in our application.

js tutorial about Use Lifecycle Callbacks On Custom Polymer Elements

Use Lifecycle Callbacks On Custom Polymer Elements

5:49 js PRO

In this lesson we'll look at the lifecycle callbacks (Created, Ready, Attached, Detached, and attributeChanged) available to us in Polymer and how to use each one.

js tutorial about Style Custom Elements in Polymer

Style Custom Elements in Polymer

5:55 js PRO

In this lesson we'll look at how to isolate the style of our custom element, use the ":host" selector, and create css variables in order to theme our element.

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