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 106 lessons...

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

Javascript Regular Expressions: Match the Start and End of a Line

P

Javascript Regular Expressions: Match the Same String Twice

P

Javascript Regular Expressions: Find the Start and End of Whole Words

P

Javascript Regular Expressions: Find a String that Precedes Another String

P

Javascript Regular Expressions: Find Groups of Characters

P

Javascript Regular Expressions: Use Shorthand to Find Common Sets of Characters

P

Javascript Regular Expressions: Find Sets of Characters

P

Javascript Regular Expressions: Find Repeated Patterns

P

Javascript Regular Expressions: Find Plain Text Patterns

P

Javascript Regular Expressions: Introduction

Polymer Custom Elements: dom-repeat

P

Polymer Custom Elements: Custom Events

P

Polymer Custom Elements: Event Listeners

P

Polymer Custom Elements: Property Change Observers

P

Polymer Custom Elements: Data Binding

P

Polymer Custom Elements: Declared Property Basics

P

Polymer Custom Elements: Extend Native HTML Elements

P

Polymer Custom Elements: Lifecycle Callbacks

P

Polymer Custom Elements: Styling

P

Polymer Custom Elements: Introduction

Compose React Component Behavior with Higher Order Components

Use create-react-app to Setup a Simple React App

Flux Architecture: Dumb Stores

P

Flux Architecture: Component Wrap Up

P

Flux Architecture: Routing with react-router 1.0

P

Flux Architecture: Project Organization

P

Flux Architecture: Higher-Order Components

P

Flux Architecture: Components/Views

P

Flux Architecture: Application Store

P

Flux Architecture: Application Actions

P

Flux Architecture: Application Dispatcher

P

Flux Architecture: Overview and Project Setup

Flexbox Fundamentals

React-Motion: TransitionSpring Basics

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 Javascript Regular Expressions: Match the Start and End of a Line

Javascript Regular Expressions: Match the Start and End of a Line

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 Javascript Regular Expressions: Match the Same String Twice

Javascript Regular Expressions: Match the Same String Twice

3:31 js PRO

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

js tutorial about Javascript Regular Expressions: Find the Start and End of Whole Words

Javascript Regular Expressions: Find the Start and End of Whole Words

2:18 js PRO

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

js tutorial about Javascript Regular Expressions: Find a String that Precedes Another String

Javascript Regular Expressions: Find a String that Precedes Another String

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 Javascript Regular Expressions: Find Groups of Characters

Javascript Regular Expressions: Find Groups of Characters

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 Javascript Regular Expressions: Use Shorthand to Find Common Sets of Characters

Javascript Regular Expressions: Use Shorthand to Find Common Sets of Characters

1:42 js PRO

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

js tutorial about Javascript Regular Expressions: Find Sets of Characters

Javascript Regular Expressions: Find Sets of Characters

2:41 js PRO

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

js tutorial about Javascript Regular Expressions: Find Repeated Patterns

Javascript Regular Expressions: 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 Javascript Regular Expressions: Find Plain Text Patterns

Javascript Regular Expressions: Find Plain Text Patterns

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 Javascript Regular Expressions: Introduction

Javascript Regular Expressions: Introduction

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 Polymer Custom Elements: dom-repeat

Polymer Custom Elements: dom-repeat

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 Polymer Custom Elements: Custom Events

Polymer Custom Elements: Custom Events

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 Polymer Custom Elements: Event Listeners

Polymer Custom Elements: Event Listeners

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 Polymer Custom Elements: Property Change Observers

Polymer Custom Elements: Property Change Observers

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 Polymer Custom Elements: Data Binding

Polymer Custom Elements: Data Binding

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 Polymer Custom Elements: Declared Property Basics

Polymer Custom Elements: Declared Property Basics

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 Polymer Custom Elements: Extend Native HTML Elements

Polymer Custom Elements: Extend Native HTML Elements

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 Polymer Custom Elements: Lifecycle Callbacks

Polymer Custom Elements: Lifecycle Callbacks

5:49 js PRO

In this lesson we'll look at the lifecycle callbacks available to us in Polymer and how to use each one.

js tutorial about Polymer Custom Elements: Styling

Polymer Custom Elements: Styling

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.

js tutorial about Polymer Custom Elements: Introduction

Polymer Custom Elements: Introduction

4:20 js

In this lesson we'll install Polymer and explore creating our first custom element

react tutorial about Compose React Component Behavior with Higher Order Components

Compose React Component Behavior with Higher Order Components

4:05 react

Higher order components will allow you to apply behaviors to multiple React components. This can be done by passing the state and any functions into components as props.

react tutorial about Use create-react-app to Setup a Simple React App

Use create-react-app to Setup a Simple React App

3:14 react

React requires some initial setup before we can get going with the app. In this lesson, we will use create-react-app to do this initial setup for us.

react tutorial about Flux Architecture: Dumb Stores

Flux Architecture: Dumb Stores

2:03 react PRO

In this lesson we'll simplify future development by reducing the logic contained in our application's store.

react tutorial about Flux Architecture: Component Wrap Up

Flux Architecture: Component Wrap Up

6:09 react PRO

Using our established architecture we'll make short work of a few remaining tasks to meet our application requirements.

react tutorial about Flux Architecture: Routing with react-router 1.0

Flux Architecture: Routing with react-router 1.0

6:00 react PRO

In this lesson we'll introduce routing into our application using react-router 1.0

react tutorial about Flux Architecture: Project Organization

Flux Architecture: Project Organization

2:38 react PRO

In this lesson we'll organize our components by feature.

react tutorial about Flux Architecture: Higher-Order Components

Flux Architecture: Higher-Order Components

5:29 react PRO

In this lesson we'll shift the responsibility of managing the state of our application over to a higher-order component rather than having each component managing it's own state.

react tutorial about Flux Architecture: Components/Views

Flux Architecture: Components/Views

9:11 react PRO

In this lesson we'll create our initial components using the architecture we've built so far.

react tutorial about Flux Architecture: Application Store

Flux Architecture: Application Store

5:56 react PRO

In this lesson we'll create our Flux application's store which will manage the state of our application.

react tutorial about Flux Architecture: Application Actions

Flux Architecture: Application Actions

3:25 react PRO

In this lesson we'll build our actions which will be sent to our dispatcher.

react tutorial about Flux Architecture: Application Dispatcher

Flux Architecture: Application Dispatcher

1:55 react PRO

In this lesson we'll create a very simple application dispatcher utilizing the open source flux dispatcher from Facebook.

react tutorial about Flux Architecture: Overview and Project Setup

Flux Architecture: Overview and Project Setup

6:56 react

In this lesson we'll look at an overview of how Flux works, setup our application structure and tools, and create our first component.

css tutorial about Flexbox Fundamentals

Flexbox Fundamentals

9:55 css

In this lesson we'll look at all of the properties available to us with the CSS3 Flexible Box, or flexbox.

react tutorial about React-Motion: TransitionSpring Basics

React-Motion: TransitionSpring Basics

2:59 react

In this lesson we'll look at how to animate the adding and removing of components using React-Motion's TransitionSpring and how it differs from a standard Spring component.

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