 Courses from Dave Ceddia

Bash is a Unix shell and command language written by Brian Fox for the GNU Project as a free software replacement for the Bourne shell. Bash is a command processor that typically runs in a text window, where the user types commands that cause actions. Bash can also read and execute commands from a file, called a shell script.

bash

When you have a bunch of files that include numbers, and you need to re-number them -- maybe because you added a new one in the middle -- the `rename` command is a quick way to get it done. In this lesson you'll learn how to use `rename` with the "counter" feature to automatically re-number some files.

Use the rename Command to Re-number a Series of Files

A Unix command used to search files for the occurrence of a string of characters that matches a specified pattern.

grep

When you have a bunch of text to sift through, standard Unix command line utilities like `grep`, `sed`, `awk`, `cut`, `sort`, and `uniq` can help extract the information you want. For example, with a git log for a project, you might want to group commits by day in order to see which days you're most productive, or find out how many commits you made last year. In this lesson, you'll learn how to combine these commands with the pipe operator to extract this data from git logs.

Analyze Git Logs with the Command Line

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

Your page is showing high CPU usage and spinning up your laptop fan, but nothing is visibly happening. What is it doing, and why is it so slow?

This lesson is a real-world performance diagnosis of this very page, right here on egghead. Two infinite (but hidden) animations were causing CPU usage to spike, and Chrome's Task Manager and Performance tools helped uncover the elements causing the problem. You'll see how to use the profiler to record a snapshot, and learn a trick for discovering animations running in the background.

Diagnose a Slow Page Using Developer Tools

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

A single Root component responsible for disparate data like current user, language setting, and theme will become messy and hard to work with. One way to fix this is to move related logic and data into a class, along with a Context Provider to get the data out. In this lesson we’ll group the logic and data for login, and use Context to pass it throughout the app.

Hide the Implementation Details of a Context Provider

You may come upon a case where you have a generic component that *can* consume a Context, but doesn’t require that Context in order to work. On the flip side, you may want to validate that a component is *always* used inside a required parent Context. In this lesson we’ll see how to set a default value on a Provider and access that default in the Consumer, as well as how to validate that a Consumer is used correctly, by checking the value it receives and throwing an error if it is missing.

Use a React Context Consumer Outside of the Matching Provider

A common kind of “global” data is a toast or popup notification that appears in the corner of the app when some event happens. Allowing a deeply-nested component to surface a notification using props can be painful, but Context makes it much easier. In this lesson we’ll see how to dispatch a notification from a deeply-nested component and display it at the root level.

Use React Context to Display Notifications

React 16.6 introduced the ability to consume data from context without using the Consumer component directly. This helps to cut down on unnecessary nesting in your components’ JSX, making them easier to read. In this lesson we’ll see how to replace a Consumer by using the contextType property.

Use contextType to Consume Context in a React Class Without a Consumer

React Hooks introduced a number of useful functions, one of which is useContext. It allows you to consume a Context in a function component without using a Consumer directly. This helps to cut down on unnecessary nesting in your components’ JSX, making them easier to read. In this lesson we’ll see how to replace a Consumer with the useContext hook.

Use the useContext Hook to Consume Context in Function Components

Consuming a Context in a component can make it tricky to test, because it requires an invisible Provider outside the scope of the component being tested. In this lesson you’ll learn how to test a component that uses a Context Consumer.

Test a Component That Uses a React Context Consumer

Providing a Context from a component can make it tricky to test, because it requires that you use a matching Consumer in your tests. In this lesson you’ll learn how to test a component that uses a Context Provider.

Test a Component That Uses a React Context Provider

One tripping point with Context is that it will automatically re-render the subtree under a Provider whenever that Provider’s value changes, which can lead to performance problems if you aren’t careful. In this lesson you’ll learn what to watch out for, and a simple trick for avoiding unnecessary re-renders to keep your app running smoothly. You'll also learn how to use React.memo to optimize individual function components.

Performantly Render a Large List of Items with React Context

Passing data deep through a React app usually involves tedious passing of props or a complex solution like Redux. Here you’ll learn how to simplify an app that’s currently passing data with props by refactoring it to use React’s Context API.

Avoid passing props deeply by using React Context

A Context Provider can only accept a single value, but it can be of any type. When you need to pass multiple values through Context, group them into an object. Here we’ll learn how to pass data along with a callback function for updating the data, so that children will be able to update their parents.

Pass Data With a Callback Through React Context

When you have two unrelated kinds of data such as a current user and a currently-selected email, it’s common for some parts of the app to need the user and some other parts of the app to need the email. One way to do this is to create multiple Contexts, each with its own Provider and Consumer, and use each one to distribute one kind of data to the slices of the app that need it. In this lesson we’ll pass user data and email data to separate subtrees using two separate Contexts.

Use Multiple React Context Providers in the Same App

State management is tough. It's probably one of the hardest parts about front end development, and there are a *lot* of different ways to solve it.

Plain React state is easy to start with, but threading props through a deep component tree gets painful. Redux is a popular solution, but it comes with complexity and a pretty steep learning curve, and turns out to be overkill for many projects.

React Context strikes a nice balance. It's built into React, it's easy to set up, and it makes it simple to pass props deeply through your app. Context is actually what Redux uses under the hood to pass data around!

In this course we’ll build a simple email client. You’ll learn how to manage user login and logout using Context, and how to group related data and logic using simple wrapper components. We’ll also cover practical applications like using Context to display notifications, how to optimize performance with Context, and how to test the components that use it.

Introduction to React Context for State Management 

In many cases, teams reach for Redux as the de facto choice for state management. But sometimes, Redux is overkill. In those cases, the React Context API might suit your needs perfectly.

In this course, we’ll build a simple email client using the React Context API to pass data throughout the app. You’ll learn how to create a context, how to pass data deeply through an app without manually passing props all over the place, and how to group related data and logic using simple wrapper components. We’ll also cover practical applications like using Context to display and manage notifications, how to maximize performance with Context, and how to test the components that use it to ensure your app is working properly.

React Context for State Management

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

When you want to do a partial commit with git, but you can't "split" a hunk to just the lines you want to commit, you can *manually* edit a hunk in order to commit just a few lines of a larger change. This lesson covers how to manually edit a hunk in git, and how to fix errors like "Your edited hunk does not apply", "patch failed", or "patch does not apply".

Partially Commit a File with Git by Splitting It Manually

Threading props down through a bunch of components that don't care about them is not only sad, but it also tightly couples those components to their locations in the hierarchy.

React 16.3's Context API makes it possible to pass props down multiple levels *invisibly, behind the scenes*, and gives you new ways to organize your data.

This lesson covers how to take a React app with multi-level "prop drilling" and refactor it to use the Context API. We also cover how to create a context provider component to contain related state, and keep it abstracted away from other parts of the app.

Pass Props Through Multiple Levels With React's Context API

Create React App is great, but it's hard to customize. If you want to add support for SASS/SCSS, react-intl, or any custom Webpack plugins, there's no official way to do that without ejecting.

This lesson shows you how to use the react-app-rewired library to customize CRA and its Webpack config *without* ejecting. Learn how to set up your rewire config and add the sass-loader so that your create-react-app project will support SCSS.

Customize Create React App (CRA) without ejecting using react-app-rewired

Make an HTML table more readable on mobile devices by using the ::before pseudo-element. We add labels to each cell, so they appear like cards when the table is viewed on smaller screens. The ::before content is set using a data-label attribute for each cell to enhance mobile viewability without horizontal scrolling.



Create a mobile friendly table with the before pseudo-element

Learn to use CSS ::before pseudo-element for mobile-friendly HTML tables. Add labels to cells for enhanced readability on mobile, avoiding horizontal scroll.

Any app of a decent size has event flows and messages being passed around. At a certain point it becomes complicated to explain it through prose and you want to turn towards diagrams. Now setting aside the time to create diagrams that accurately describe what's happening in your codebase can be quite time consuming. Luckily, with today's AI tools, we can now just do basic walkthroughs with rough recordings over codebase dictating what's going on along the way and then upload that to tools like AI Studio and then ask it to generate diagrams in a text-based format such as Mermaid that will then generate the flowcharts and diagrams for us. So this video walks us through this process of recording a rough video, uploading it to AI Studio and then asking AI Studio to generate the proper Mermaid diagram syntax.

Generate Mermaid Flow Chart Diagrams with Gemini 2.0 from Rough Screen Recordings

I'm a diehard Karabiner user and anytime I start doing something repetitively I always move it into my Karabiner configuration. Sometimes I'll fall into scenarios where I want to trigger a command, but I also want to know if that command succeeded or failed. Since Karabiner can trigger any command, setting up the command is fairly straightforward, but knowing whether it succeeded or failed became much more difficult. Luckily for me there is a package called terminal-notifier that you can install from homebrew and you can pipe the output of your command to terminal-notifier. And have a seamless way of triggering your keyboard shortcut which runs a command and you can be notified of the results.

Use Karabiner to Trigger a Terminal Command and Get Notified of the Results

There are a lot of scenarios when inspecting a site in Chrome where you don't want any click events to fire and you don't want any scripts to run. Or maybe something is animating in and out of the page and you want to capture it at a certain moment. This is a great use case for pausing script execution, which is kind of using the debugger manually by going into the Chrome DevTools and the Sources tab and clicking the pause button to essentially pause the entire page. This will give you a chance to inspect any of the elements and styles you want to inspect. And you don't have to worry about fire and click events or anything that might interrupt your investigation into the elements and styles that you want to find.

Pause Script Execution in Chrome to Easily Inspect Elements

Gemini 2.0 has a context window of a million tokens, and this means that you can upload hundreds of files and allow it to inspect and analyze massive refactors across entire code bases. 

This lesson demonstrates concatenating an entire code base into a single file and then uploading it to AI Studio. Once within AI Studio, we ask it to find the types of tasks that it can evaluate for us. Then we select one of the tasks and ask it to generate instructions for that task. Once those instructions are complete, we then turn them over to Windsurf's Cascade agent, and we allow Windsurf's Cascade to do all of the work for us as we sit back, relax, and let the AI do our jobs.

Use Gemini 2.0 to Create Agent Instructions to Refactor an Entire Codebase

Learn how to display custom components in a [Tanstack Table cell](https://tanstack.com/table/latest/docs/guide/cells), including how to render capitalized text, apply conditional styling with class helper functions, and format dates using the `Intl` API for readable display. 

`flexRender` allows you to utilize the `cell` callback method in your column definitions. Tanstack table will call this function to render the custom component you defined.

Render Custom JSX in a Tanstack Table cell

Use tanstack table flexRender method to render custom components in a table component. Capitalize letters, apply conditional styling, and render dates with Intl

I'm extremely excited for the potential of AI watching your screen while you work. I decided to take Google's AI Studio for a spin, which just introduced a feature called "Stream Realtime", which allows AI Studio to observe your screen and listen to your microphone while you work.

This video is my initial attempt to try and coach AI Studio through the process of building a site from a reference site, essentially trying to build egghead.io from a Next.js starter template. And we'll explore the various attempts we make and what works and what doesn't.

Let AI Watch Your Screen: Build Next.js Pages with AIStudio's Stream Realtime


[Shadcn](https://ui.shadcn.com/docs) is a popular component library that allows you to install components into your codebase.

Learn how to install the [Table component](https://ui.shadcn.com/docs/components/table) and use that presentational component with [Tanstack table](https://tanstack.com/table/latest).


Display Tabular Data in React with Tanstack Table

Build a dynamic table component in React using shadcn component library and tanstack react table.

TypeScript's satisfies operator finally clicked for me when I realized it's almost always used for specific implementations of configuration objects. So this lesson walks you through the naive approaches I've taken before and how to solve them using the satisfies operator. After this, satisfies will be another tool in your belt in TypeScript. To clean up all the TypeScript code you have around configuration.

TypeScript's "satisfies" for Configuration

Windsurf and Cursor are both able to take an image and then use an agent to build out what it sees in that image. This lesson is going to compare Windsurf and Cursor by uploading the same image to both and giving them the same prompt. Comparing not only the results, but also the steps that they take to get there. We'll also try uploading additional images throughout the process to see what they do as far as revising along the way and improving the site as they go along. 

Dave Ceddia

Search Results