 Resources from Will Johnson in 2024

An easy to implement, adaptable authentication and authorization platform which basically makes your login box awesome.



auth0

Secure React User Authentication with Auth0

Auth0 Actions are serverless developer tools you can use to customize Auth0.

Actions allow developers to extend Auth0 beyond what it can do out of the box by adding logic to login, user registration, password changes, and other events.
You can quickly solve complex identity problems without hosting your own environment, and worrying about performance, maintenance, and security. Your code is stored and runs on infrastructure owned and maintained by Auth0.

Actions are JavaScript functions that run as part of a flow.  Action integrations can be installed in the Dashboard, or Actions can be written directly in the Dashboard’s JavaScript code editor.

With the  drag-and-drop flow editor, you can visually arrange Actions to build custom identity flows. You don’t have to rewrite your code to reorder and reconfigure functions.

Follow along with Will Johnson as you download a sample application configured with Auth0, then write code for several Actions.

Some examples of Actions you can create:

- Block access from certain counties with an Action from the Auth0 marketplace. 
- Use an npm package and secrets to send a Slack message.
- Redirect users to an a URL after login and back to Auth0 

This course will give you a solid foundation to start developing your own Actions.


Custom Authentication Flows for Modern Applications with Auth0 Actions

## Intro

Animations do more than just look good. They can draw the user's attention to important information or let them know they can interact with certain elements.

You can use them to smooth transitions and bring your applications to life. It makes you stand out from the usual wall of text that you see on most applications. 

But here is the issue, animations can get complicated. You have to have a good understanding of how CSS works but it takes hours of studying before you can even start trying to animate.

Framer Motion solves this for you and Will Johnson will show you how. 

## The Project

![homepage gif for showing code](https://res.cloudinary.com/dg3gyk0gu/video/upload/q_100/e_loop/v1642099022/course-resources/animate-react-apps-with-framer-motion-aa83f52c/will-johnson-gif.gif)

In this course, you’ll iteratively add animation to a fully-styled shopping list app that’s built-in React.

You’ll see how Framer works out of the box, and learn just how customizable it is. Throughout the course, Will demonstrates animation through changing size, direction, and even appearance.

It has smart defaults that handle making the animations smooth and performant. Automatically animating layout changes. It does so much for you it almost feels like you're cheating.

You’ll even see how to animate the path of an SVG making it draw the path for your image. 

## Gain these Skills

Will gives you the knowledge of how to incorporate Framer Motion into any React application. You will be able to customize your animations to do whatever it is you want/need and show your users what items on your app are interactable. You’ll be able to take your static application and make it interactive.  

## Prerequisites

There are no prerequisites for this course. The application we are working on is already built for you so you just have to be able to follow along with Will as he integrates Framer Motion into the app. 

## What’s Next?

If you are further interested in learning about animating your applications, [Spring Animation in React with React Spring](https://egghead.io/courses/spring-animation-in-react-with-react-spring-7bb9) is a great place to learn! Christian Nwamba will teach you the skills to begin using the react-spring library and add animation to your React components.

If you are interested in more courses by Will Johnson, he has a mini-course on how to [Create A Blog With Jekyll](https://egghead.io/courses/create-a-blog-with-jekyll-151a). Will shows you how to download, install Jekyll plugins, and create blog posts.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Animate React Apps with Framer Motion

Cascading Style Sheets bring order and beauty to our applications.

In this lesson, we'll use the `hover` pseudo class to conditionally style a button when the mouse hovers on the button. 

In this case, we'll use the scale CSS transform to change a button size on hover. Then we will add a transition to the transform to make the animation more natural looking.

Animate a Button on Hover with a CSS transform

Rails is a web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern.

rails

If you make a mistake when naming your database column, and have data that you want to keep unchanged. You can use the change method with the rename_column definition in your migrations files to update a single column name in your database.

Rename A Database Column with Ruby on Rails Active Record Migrations

If you want to give the users the ability to follow or become friends with each other. Rails lets you create a join table in your database and have it reference the user database table. 

You can use Active Record to associate the new table with User table by using the `class_name` method

Create Active Record Self-Referential Relationships In Ruby on Rails

When you create a User model with Devise using the command `rails generate devise User`. Devise will create  default columns in the database for your User model. To add your own columns for your users you can create a new Rails migration and add any columns you want for your users.

Add Custom Fields to a Devise User Model with a Ruby on Rails Migration

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

JavaScript Destructuring assignment syntax allows you access properties from objects and name them like variables

Extract properties from JavaScript Object Destructuring

You can use array destructing to access values like string and functions and give them names your prefer without using bracket notation.

Use JavaScript Array Destructing to Name Array Indexes 

Learn how fast you can get smooth animations into your React project with Framer Motion

Up & Running with Framer Motion

Animate SVG paths by adding the `motion.` prefix to SVG paths.

Animate SVG Paths with Framer Motion

Framer Motion provides helper props like `whileHover` & `whileTap`, that will temporarily animate a component to a visual state when that gesture is happening.



Create Micro Interactions with Framer Motion Gesture Props

The `custom` prop let's you create dynamic variant values to animate each component differently.

.

Create Dynamic Animation Values with Framer Motion for Different Elements with Custom

Use the `layoutId` prop to automatically animate layout changes across, and between, multiple components. 

Animate Elements When Their Layout Changes with Framer Motion layoutId

`AnimatePresence` allows components to animate when they're removed from the React tree. Once the elements are wrapped in `AnimatePresence` you get access to the exit prop which animate the element when it is removed.

Animate Elements Removed from the DOM with Framer Motion Animate Presence 

Variants allow you to create custom animations in an object outside of your component. You can also add any name you want to make your code even more declarative  

Clean Up Your Components with Framer Motion Variants

The value's you pass to the animate prop don't have to just be a single value. You can actually animate through multiple states with Keyframes. You'll do this by passing an array of values to the animate property and Framer Motion will animate through each value.

These Keyframes can be customized with the transition prop just like any other animation.




Animate through Multiple States with Framer Motion Keyframes

Framer Motion has defaults for how animations will looks. All you have to do is say how you want the motion component to end up in the `animate` prop. The `transition` prop allow you to override there defaults and let you define your own animations

Customize Animations with the Transition Prop using Framer Motion

Add the `initial` prop to a motion component to tell Framer what state you want the element to be in when the page first loads. It will animate from that state to the state you declared in the `animate` prop.

Use Framer Motion initial Prop to Define the Beginning State of Animations

Add the `animate` prop to any motion component to tell Framer Motion what state you want your component to end up in when the animation is complete

Control Animations with Framer Motion's Animate Prop

Install Framer Motion using npm. Import `motion` to convert and HTML or SVG element to a motion component and get access to all of Framer Motion's declarative animation props

Topics

Instructors

Content Type

Will Johnson