 Courses from Erik Aybar

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

Optimistic UI updates come with challenges that can vary for every use case. In our scenario of “liking a tweet”, one challenge that we face is preventing doubly updating and reverting state in the event of the user clicking “like” in rapid succession. In the case of a request failure our current solution results in the false impression that the tweet was successfully liked. 

One solution that fits our use case is to simply raise and lower a boolean flag to indicate whether a like tweet request is pending or not and short circuit our `onClickLike` method to "do nothing" if a request is already pending. Since we don’t require this information in our render method or on component state, we can simplify this further by making use of a class instance property to store this value.

Prevent Doubly Updating and Reverting State in React

React's setState accepts an [updater function](https://reactjs.org/docs/react-component.html#setstate) that given current state returns new state. To better define and manage our setState usages, we can extract our inlined setState function to a setState updater factory. This enables us to give it a descriptive name, define required arguments, and ease future reuse, refactoring and composition for updating component state in our application.

Refactor Inlined React setState Function to a setState Updater Factory

We'll add a method to our [class-based React component](https://reactjs.org/docs/react-component.html) and immediately update state _before_ firing off our request. Using a [setState updater function](https://reactjs.org/docs/react-component.html#setstate), we will update component state based on previous state and toggle the "liked" status of a tweet upon the user clicking the heart icon. We will simultaneously increment or decrement the target tweet's `likes` property and appropriately add or remove the `tweetId` from the `likedTweets` array.

Optimistically Update Multiple Values in State Using React's setState

Our initial, simplified approach may be fine for many scenarios, but is not the most robust solution. By simply taking a snapshot of current state (our list of items) and restoring it after a failure, we’ve left the potential for inconsistent state due to the fact that between taking the snapshot and failure, the user could have performed additional actions.

One solution is to, instead of taking a snapshot of our entire list of items, take a snapshot of the target item and use that upon failure to more precisely restore the individual item to state. This eliminates the possibility of incorrectly restoring items to state which have been successfully deleted.

Restore Target Items in React State for Improved Optimistic UI Updates

A crucial part of implementing optimistic UI updates is properly handling failure cases. In the event of a request failing, we must revert the state which we’ve already updated since we assumed success at the time of user interaction. Thanks to the simplicity and power of [setState()](https://reactjs.org/docs/react-component.html#setstate) combined with Javascript's [lexical scoping and closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures), we can accomplish this relatively easily in React.

Revert State On Request Failure using React setState and Closures

The term "optimistic UI update" refers to the approach of immediately updating UI to reflect user actions rather than waiting for a success response from a server. This also requires reverting state in the event of a failure. A real-word example of optimistic UI updates in action is liking and unliking a tweet on Twitter. You can see this yourself by going to Twitter on their desktop web client, opening your devtools, enabling "Offline" in the "Network" panel, and liking a tweet.

In this video, we'll compare the look and feel of non-optimistic UI updates with their optimistic equivalent and introduce the liking and unliking a tweet example we'll be building.

Optimistically Update UI for a Snappier User Experience

A brief overview of the course to give you a preview and feel for what we'll be learning and working towards.

Course Overview: Optimistic UI Updates in React

Most of the applications we use day to day have optimistic UI updates sprinkled throughout them if you look close enough. One familiar example we'll examine and use as an example throughout this course is liking and unliking a tweet on Twitter. In this video, we'll take a peek under the hood of https://twitter.com/ using [Google Chrome's DevTools Network panel](https://developers.google.com/web/tools/chrome-devtools/network-performance/reference). We'll mimic a slow 3g network to slow things down and get a feel for exactly when the optimistic UI updates are occurring and when the UI state is reverted upon failure.

Examine Real World Optimistic UI Updates

No matter what type of app you’re building, you're going to need to fetch data, display it to a user, and enable the user to interact with and update that data. This interaction and updating phase is often asynchronous by nature which presents you, the developer, an opportunity to provide a range of different experiences depending on the scenario.

In some instances, you can leverage what is known as optimistic UI updates for an improved, snappier user experience compared to a traditional “loading/waiting” experience. They aren’t suited for every use case, but selectively making use of optimistic UI updates throughout your application can have a significant impact on the quality of user experience for relatively little cost and complexity!

In this course, we’ll walk through implementing optimistic UI updates in the real world example of liking and unliking a tweet. We'll use React's built-in state and make use of extracting setState updater functions to help manage and better define our setState usages. 

Optimistic UI Updates in React

In this video, we'll walk through accomplishing the common UI task of client-side pagination in React. We'll implement a render prop component to encapsulate the chunking/windowing logic of a large array of items that will provide our render prop function with the correct items for the current page. Our `Paginate` render prop component will not have any opinion or knowledge relating to UI and will only be responsible for providing our render prop function with the relevant data that it needs to render the current items along with our pagination.

Related reading from the React docs: [Use Render Props for Cross-Cutting Concerns](https://reactjs.org/docs/render-props.html#use-render-props-for-cross-cutting-concerns)

Create a Paginate Component Using Render Props in React

In this lesson we will add state to our component to indicate whether we are loading to the user. We will "begin loading" before submitting our request to an API and then set "end loading" once the request is complete using [Promise.prototype.then](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) and [`setState()`](https://reactjs.org/docs/react-component.html#setstate). This gives users a better experience than being left hanging wondering if their action of clicking the button had any effect. Now they will at least have some indication that work is being done while the request is in progress.

Add a loading indicator to UI for request in progress using setState()

In this lesson we will refactor an existing UI update from a typical _loading_ approach to an _optimistic UI update_ approach to give our users a faster, more snappy experience. Instead of displaying a "loading" UI to our users while our request is in progress, we will immediately update the UI and account for reverting state and displaying an error in the event of a failure. We can accomplish this relatively easily in React, thanks to the simplicity and power of [`setState()`](https://reactjs.org/docs/react-component.html#setstate) combined with making use of Javascript's [lexical scoping and closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures).

Optimistic UI update in React using setState()

In this lesson we will account for errors encountered during a failed requests and display a helpful error message to the user. We will add a `catch()` handler ([Promise.prototype.catch](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch)) to our request's promise where we will add an error message to component state and set our loading state to false. We'll add an error message to our app that will only display once an error has occurred using [conditional rendering](https://reactjs.org/docs/conditional-rendering.html).

Handle a rejected promise and display error to user using setState()

In this lesson we will look at updating state in React based on the successful resolution of a promise making use of [Promise.prototype.then](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then). We will perform a user action such as clicking a button to delete an item and fire off a request to our API. Once our request is complete, we will update our [component state](https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class) based on current state using [`setState()` with an updater function](https://reactjs.org/docs/react-component.html#setstate) and remove the target item from the list with [Array.prototype.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter).

Update state asynchronously in React using Promise and setState()

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

In this video, we take a quick look at refactoring usages of [Array.prototype.concat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) to make use of the [ES6 array spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator). For example, we can refactor towards simple append and prepend statements such as `[...array, value]` or `[value, ...array]` or combine multiple spread operations to achieve insert via `[...leftSide, value, ...rightSide]`.

Bonus tip: `[...someArray]` can be used to quickly make a shallow copy of an array to avoid mutation for many common array operations.


Refactor Array concat() Operations to Use the ES6 Spread Operator

In this video we'll learn how to perform common add and remove array operations such as append, prepend, insert, and remove. We'll look at the dangers of mutation that can be caused by using mutative array methods such as [Array.prototype.push](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) and learn how to instead leverage non-mutative array methods such as [Array.prototype.concat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) and [Array.prototype.slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) when working with arrays.

Add and Remove Array Items with JavaScript concat() and slice() to Avoid Mutation

By making use of [closures and lexical scope](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures), we can achieve "private" properties by returning objects with methods from a factory function. By defining our desired "private" variables within our factory function and accessing these variables from within our returned object's methods we create a closure and maintain unique, separate references to our "private" variables.

"Private" Variables with Closures and Factory Functions

Lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js.

webstorm

In this lesson, we'll walk through installing a custom color scheme into our [WebStorm](https://www.jetbrains.com/webstorm/) IDE. Dayle Rees's [daylerees/colour-schemes](https://github.com/daylerees/colour-schemes/blob/master/jetbrains/peacocks-in-space.icls) has a great collection of themes ready to install in different formats for various editors.

For this example, we will install the [Peacocks In Space](https://github.com/daylerees/colour-schemes/blob/master/jetbrains/peacocks-in-space.icls) theme into an OS X [WebStorm 11 EAP](https://confluence.jetbrains.com/display/WI/WebStorm+EAP) installation. _Note: This process will be very similar (or identical) for previous versions of WebStorm and other editors in the [JetBrain's family of editors](https://www.jetbrains.com/)._

WebStorm - Installing Custom Color Schemes (dayleress/colour-schemes)

Immutable.js provides many Persistent Immutable data structures including: List, Stack, Map, OrderedMap, Set, OrderedSet and Record.

immutable

By utilizing immutable data structures, we can write code that is easier to reason about, avoid mutation-related bugs, reduce complexity, and even gain some performance benefits along the way.

Before diving too far into Facebook's [Immutable.js](https://facebook.github.io/immutable-js/) library, let's take a moment to examine some of the pains and obstacles that mutable data structures present. 

We'll take a brief glimpse at putting the Immutable "List" data structure to work by example. We will convert our usage of Javascript's native `Array` to use [Immutable.List](https://facebook.github.io/immutable-js/docs/#/List) in order to address a mutation-related "bug" caused by multiple objects "sharing" a mutable structure (array) by reference.

Immutable.js: Introduction - Easing the Pains of Mutability

ES6 (ES2015) introduces a [standardized module format](http://babeljs.io/docs/learn-es2015/#modules) to Javascript. We'll take a look at the various forms of defining and importing modules. Using [Webpack](http://webpack.github.io/) to bundle up our modules and [Babel](http://babeljs.io/) to transpile our ES6 into ES5, we'll put this new module syntax to work within our project. Then we'll examine how to import 3rd party packages from npm, importing [lodash](https://lodash.com/) with the `_` underscore alias using the ES6 module syntax.

ES6 Modules (ES2015) - Import and Export

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.

This lesson will show you 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).


Create a Table Component with Shadcn and 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. 

Windsurf Cascade vs. Cursor Composer Agent: Build a Site from an Image

In this lesson, you'll discover how to style View Transitions using CSS pseudo-selectors to create custom animation effects. We'll transform the default cross-fade into a smooth slide transition by targeting the ::view-transition-old and ::view-transition-new pseudo-elements. You'll learn how these powerful selectors give you precise control over your transition animations, allowing you to create more engaging and personalized user experiences with just a few lines of CSS.

Customize View Transitions with CSS Using view-transition-old and view-transition-new

In this lesson, you'll learn how to implement smooth state transitions in your web applications using the browser's built-in View Transitions API. We'll create a simple example that demonstrates how to animate between different text states with just a few lines of code - no external libraries required. This powerful native API makes it easy to add professional-looking transitions to your user interface, enhancing the user experience with minimal effort.

Create Smooth UI Transitions with the Native View Transitions API

I've been using Cursor for a very long time and their "Agent" feature in Composer is fairly new, so I'm still getting used to it. But since Windsurf recently got onto the stage with their Cascade agent, they've slowly been gaining the mind share on the UX for coding agents. I decided to put them to the test by putting Windsurf and Cursor on the exact same screen side by side trying to accomplish the same task and to see which workflow I would prefer. I've been a diehard Cursor user for over a year now, so it's going to take a lot for me to switch to a different IDE. But I just have to say, even from this simple demo, Windsurf is looking pretty nice.

This lesson is just going to walk through creating a CLI using both tools to print out inspirational quotes and to explore how they approach the step-by-step of installing packages and running commands and setting up all the files we need to get this running.

Windsurf Cascade vs. Cursor Composer Agent Side-by-Side Comparison

This TypeScript tutorial explains how to use generics, allowing for different types to be passed as arguments. It discusses the use of shorthand syntax in generics and illustrates with examples. This method is useful for library creation, providing type safety and control to the user.

```typescript
interface PhotoMetadata<T> {
  title: string;
  takenAt: Date;
  customData: T;
}

// Function that processes a photo with custom metadata
function processPhoto<T>(photo: PhotoMetadata<T>): {
  processedTitle: string;
  daysSinceCapture: number;
  customDataSummary: T;
} {
  const today = new Date();
  const daysSinceCapture = Math.floor(
    (today.getTime() - photo.takenAt.getTime()) / (1000 * 60 * 60 * 24)
  );

  return {
    processedTitle: photo.title.toUpperCase(),
    daysSinceCapture,
    customDataSummary: photo.customData
  };
}

// Example usage with different custom data shapes
type CameraSettings = {
  iso: number;
  aperture: string;
  shutterSpeed: string;
}

type LocationData = {
  latitude: number;
  longitude: number;
  locationName: string;
}

// Using with camera settings
const photoWithCamera: PhotoMetadata<CameraSettings> = {
  title: "Sunset at beach",
  takenAt: new Date('2024-01-15'),
  customData: {
    iso: 100,
    aperture: "f/2.8",
    shutterSpeed: "1/1000"
  }
};

// Using with location data
const photoWithLocation: PhotoMetadata<LocationData> = {
  title: "Mountain vista",
  takenAt: new Date('2024-02-01'),
  customData: {
    latitude: 45.5231,
    longitude: -122.6765,
    locationName: "Mount Hood"
  }
};

const processedCameraPhoto = processPhoto(photoWithCamera);
const processedLocationPhoto = processPhoto(photoWithLocation);

processedCameraPhoto.customDataSummary.iso
processedLocationPhoto.customDataSummary.longitude

```

Basic Explanation of Typescript Generics

A very basic explanation of generic function arguments

I've been using Cursor as my primary editor for over a year now, but recently I've heard wonderful things about Windsurf AI Agent features. I decided to record myself building out something I've always wanted to make, but never made the time for.

In this lesson, I demonstrate how to leverage Windsurf's powerful agent process to create a fun word-guessing game inspired by Heads Up. Watch as I build an interactive application featuring category selection and word navigation, complete with data hosting on GitHub Gists and deployment to GitHub Pages - all in under 30 minutes (before editing the lesson down to 12 minutes)!

What makes this project particularly exciting is how Windsurf eliminates the typical friction points of development. While this game was always on my project wishlist, the overhead of setup, configuration, and deployment made it hard to justify the time investment. Windsurf's agent process handles all these pain points seamlessly, from managing URLs to orchestrating deployment.

This lesson perfectly showcases how AI agents can help developers bring their backlog of project ideas to life, transforming what would typically be time-consuming tasks into efficient, enjoyable development experiences.

Build a Word Game with Windsurf's Cascade AI Agent



Discover how to harness the power of Cursor IDE's Composer Agent feature to optimize your code. In this lesson, you'll witness an AI agent doing all the work to generate test suites, implement performance benchmarks, and create optimized function variations - all without writing a single line of code. You'll learn how to validate performance improvements through data-driven benchmarking, ensuring that optimizations are backed by concrete metrics rather than speculation. This hands-on demonstration showcases a groundbreaking approach to automated function development that combines the precision of test-driven development with the efficiency of AI-powered optimization.


Erik Aybar

Search Results