TutorialsScreensCourses
Code Daily
Learn modern JavaScript for the web and mobile.
Jason Brown
Unit Test Token Verification for Auth0 using Jest and mock-jwks

Testing authentication can be difficult, especially with many 3rd party providers like Auth0. We'll show how to use Jest and mock-jwks to test out your authentication to create fast unit tests with out hacks.

JestRead more ⇨
Jason Brown
Create a Multi-Step Animated Modal Depending on User Actions in React Native

Animations can be used to effectively communicate a users action. However many times the reverse animation is used for both a close, or success. We can do better, and we'll walk through how to use Animated to create 2 different animations with a single animated value.

Jason Brown
Calibra Main Screen
Jason Brown
Create GraphQL Enums with Hasura Enum Tables

We'll tackle setting up user types by creating a users_types table with a value text primary key. We'll add the users type as a foreign key to our new table. Finally we'll insert values as a SQL query and track it as a migration.

Jason Brown
Sticky Header with Highlighting Sections on Scroll

We'll use position: sticky to lock our sticky header to the content container that it's in when the user scrolls. Using a useEffect hook we can monitor the scroll position and determine if the user is looking at a section of our content. If they are we can update a useState hook to highlight it in our nav bar. Finally we'll add a scroll to section feature as well.

Jason Brown
Create an Animated Circular Progress Indicator to Track Article Read Percentage in React

We'll build a circular progress button to show how far a user has read an article. The techniques will rely on stroke-dasharray and stroke-dashoffset. Using the useLayoutEffect hook and useRef hook we will measure our article height dynamically and calculate progress based upon the scroll position. We'll show how to dynamically calculate all necessary values to render our progress circle exactly where we want it.

Jason Brown
Create a Query Param Login Modal Route with React Router

Routes are some times better served as a modal. If you have a modal (like a login modal) that needs to be routeable and appear on all pages you may need to use query params. Will explore how to render a route all the time and use query params to control when it's content renders

Home