 Resources from Sam Selikoff in 2024

Vercel's data-fetching library SWR features a client-side cache. Learn how to use the mutate hook to manipulate this cache in order to optimistically update your UI without waiting for a response from the network.

Learn more about SWR here: https://github.com/zeit/swr

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

Create an Optimistic UI in React with SWR

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs. 

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

tailwind

Craft Scalable, Custom-Made Interfaces with Tailwind CSS

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

The Optional Chaining Operator, `?.`, can be used as a simple way to check if a variable has a _nullish_ value (`null` or `undefined`). Instead of littering your app with checks like `data && data.movies`, you can write `data?.movies` instead.

Check out the [Optional chaining MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) to read more about the new operator.

Use the Optional Chaining Operator to Simplify Checking for Nullish Values

Mirage JS lets you mock out production APIs directly alongside your frontend React code. You can tweak the data or force a network request to hang, so you can quickly design different states of your application. In this way Mirage lets you build every state of your UI regardless of the state of your production API.

Check out [Mirage's React quickstart here](https://miragejs.com/quickstarts/react/develop-a-component).

Mock an API for Local Development in React with Mirage JS

We can use the `mutate()` hook again to update our client-side cache using the canonical ID from the server response.

Update SWR's Cache with a Server-side Response

When building optimistic UIs, it's import to indicate to the user when network activity is taking place, in case there's an error or they're ready to close your app. Optimistic UIs also tend to introduce more concurrency to your application, which can making tracking the saving state more difficult. Learn how to use a simple counter to keep track of any pending requests that are currently in flight.

Visually Indicate That a Background Save is Taking Place in an Optimistic UI with React

Error handling in Optimistic UIs can be complex, since changes have already been made to the client-side cache by the time the server responds with an error. Let's look at one approach to dealing with errors in our todo app: removing our temporary todo from the list, and putting the data back into the New Todo field to help avoid losing the user's data.

Revert Optimistic UI Updates when the Server Errors

Tailwind comes with pre-built, single-purpose CSS classes called utility classes that you use to style your application. If you’ve never used a utility-first approach before, you’ll be surprised at just how far you can get building a completely custom UI using only Tailwind’s defaults.

In this lesson we’ll style a message component from Discord. You’ll see how Tailwind lets us tweak our design directly from our template, all without having to write a single line of CSS ourselves. Because Tailwind’s utility classes live right alongside our markup, we won’t need to come up with any new naming patterns or conventions to keep our styling code maintainable.

This co-location of styles and markup is one of the biggest benefits of Tailwind, since it lets teams decide for themselves how best to break up their UIs – and their Tailwind styling code simply comes along for the ride.

Intro to Styling Custom UIs with Tailwind Utility Classes

Use Tailwind's responsive prefixes to apply specific classes only at certain breakpoints. Learn about two approaches for adjusting your UI for different screen sizes – sprinkling responsive prefixes on existing templates, or creating new chunks of markup to use at specific screen widths.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-21-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-21-end)

Using Responsive Design to Hide the Desktop Navigation

Let's round out our clone by replacing all static links with the mock data file, making sure the navigation works at every step.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-20-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-20-end)

Dynamically Generating the Server and Channel Navs

Add the @tailwindcss/forms plugin to ensure input fields are easily styleable using Tailwind's utility classes. Add the search bar and customize the placeholder to match Discord's UI.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-18-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-18-end)

Styling the Search Box Using the Forms Plugin

Learn how to use the flexbox-shrink utility to choose which parts of our multi-column layout shrink or expand to accommodate the available space. Use the truncate utility to add ellipses when the channel description is too long.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-17-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-17-end)

Building the Channel Header with Flexbox Shrink and Truncating Text

Use some simple React state to toggle categories open and closed. Filter out channels based on their unread and closed state. Use Tailwind's transform and transition utilities to animate a category's arrow to the right.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-16-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-16-end)

Building Collapsible Categories with Rotating Arrow Icons

Learn how to use a simple variable to improve the readability of our code when styling more than two states. Add an unread indicator to the new inactive and unread state. Use the active prefix to style the channel links for the active CSS pseudostate.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-15-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-15-end)

Using a State Variable to Add Unread States to the Channel Nav

Use nested dynamic router segments along with the Next.js Link Component to tie our channel links to new URLs. Learn why you should separate out UI states in order to avoid CSS conflicts.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-14-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-14-end)

Styling the Active Channel Link with a New Dynamic URL Segment

See how to dynamically generate our lists of channels using a React component and Tailwind's spacing utilities, and learn how this is often enough to reduce any duplication we have in our templates.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-13-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-13-end)

Identifying Repeated Patterns while Dynamically Generating the Channel List

Learn how to use the space, padding, and margin utilities to properly layout a list of items while styling the channel list. Use the group and hover utilities to add interactivity.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-12-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-12-end)

Styling the Channel List and Controlling Layout

To build the server header, we'll override Tailwind's default shadows with three values from Discord's design system. We'll also use the JIT compiler's bracket syntax to get a pixel-perfect match with Discord's UI. Arbitrary values are a powerful way to break out of your design system's values while still being able to use Tailwind's APIs directly in your HTML.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-11-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-11-end)

Building the Server Header using Arbitrary Values from the JIT Compiler

Reusing our custom server selector will result in lots of duplicate markup. Tailwind doesn't attempt to solve this duplication problem on its own, but instead encourages us to use whatever tools for code reuse we already have at our disposal. Let's make a NavLink React component to make our custom treatment easy to reuse and change.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-10-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-10-end)

Solving the Duplication Problem with Components

Let's build the active server indicator (the final piece of our server buttons) using an absolutely positioned div alongside Tailwind's position utilities. We'll then learn how to use Groups to affect the styling of the indicator when hovering over the ancestor link. Finally, we'll use the scale and translate utilities to add the final bit of polish and match Discord's UI.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-09-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-09-end)


Building the Active Server Indicator using Group and Transform Utilities

Tailwind has no built-in APIs for conditionally applying styles. Instead, it encourages you to embrace whatever framework you're already using to conditionally add or remove utilities for different states of your application.

We can do this in our Next.js application by creating a second URL and page, and refactoring our server navigation to persist across every page of our app. Now we can use the [useRouter](https://nextjs.org/docs/api-reference/next/router#userouter) hook from Next.js to determine which URL is active and use that to apply different styles to our navigation links.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-08-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-08-end)


Topics

Instructors

Content Type

Sam Selikoff