TutorialsCourses
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.

ReactRead more ⇨
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

React RouterWatch ⇨
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

React RouterRead more ⇨
Jason Brown
Create a Modal Route with React Router

Often times there is a route that is better served as a modal. You want to be able to link to it and still render the page behind it. With React Router this can be accomplished. We'll dive into rendering a route with a route that renders as a modal.

React RouterRead more ⇨
Jason Brown
Markdown Syntax Highlighting with PrismJS using Unified, Remark, and Rehype

We'll explore how to use Unified, Remark, Rehype, and PrismJS to create markdown code that is capable of being syntax highlighted. The generated code will be React elements instead of a string of HTML. This adds in the security benefits of React when it comes to rendering untrusted markdown content.

Jason Brown
Query GPS Coordinates within a Radius using KnexJS, Postgres and the PostGIS Extension

In this lesson we'll show how to enable the PostGIS extension on RDS. We'll then walk through using Knex to create a table to store gps coordinates. Then we'll construct queries for saving, updating, and querying for coordinates within a radius. Finally we'll use knex-postgis plugin for Knex to generate queries from helper functions.

Jason Brown
Add Undo Abilities to any Application Easily with Immer and React

Undo capabilities can be complicated to add to any application. We'll dive into how we can use the Immer library to lend us a hand in managing our state and making undo easy.

Jason Brown
How to use jest-emotion and react-testing-library to Test Emotion Component Styling

There are times where an animation can only be achieved by a component always being rendered. This could drive important business logic, however there may not be an easy way to test this when paired with a CSS-in-JS library like Emotion. We'll use jest-emotion to add in new matchers to Jest and combined with react-testing-library we'll be able to test our components are rendering the correct styling.

Jason Brown
Creating a Reusable Window Event Listener Hook with useEffect and useCallback

In this lesson we'll dive into issues with creating class components for reusable logic. Then we'll convert the logic to take advantage of hooks. We'll step through each pitfall that could be encountered and how to solve them. We'll end up with a perfect solution and understanding for how to combine multiple hooks like useEffect and useCallback.

« Previous
1 of 15
Home