 Courses from Damon Bauer

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

The more generic you can make your Stimulus controllers, the better.

We'll explore how to put more control in the hands of the consumer of your Stimulus controller by providing a data attribute configure a controller (and a fallback, in case an attribute isn't provided).

We'll also look at how we can make your code "open for extension, but closed for modification" (part of [SOLID](https://en.wikipedia.org/wiki/SOLID)). We'll refactor a ternary operator to use an object literal lookup. This will help make a method "do one thing" (bordering on "single responsibility principle", the S in SOLID).

Make A Stimulus Controller More Configurable & Extendable

What happens when an input value format doesn't _exactly_ match the the format of the data to filter by?

In this lesson, we'll explore the problem of using `input type="date"` to filter down a collection of elements with a `date` field using Stimulus.

To solve this problem, we'll introduce a tiny date utility library, [`dayjs`](https://day.js.org/), to get both date formats the same so the collection can be filtered.

Filter Transformed Data In A Stimulus Controller Action

In this lesson, we'll add various inputs that allow a user to filter a collection of data using different sets of data to search through.

We'll take advantage of Stimulus `targets` to make it simple to find _which_ collection the user wants to search for. Stimulus also provides a nice way to get **all** `targets` of a certain name as an array. We'll take a look at how that makes life easy when need to iterate over a collection of DOM nodes.

Filter Various Collections Using Stimulus Targets

In this lesson, we'll explore what it takes to connect a user input event to a Stimulus controller method, using a Stimulus `action`. In doing so, we'll be able to filter down a collection of DOM elements, grouped by a Stimulus `target`, to show relevant filtered content to the user as they type.

We'll also learn about some incredibly useful JavaScript features, including `Array.from`, `String.includes`, and a little known feature of `classList.toggle`. Once you get down to the actual Stimulus controller code, it's "just JavaScript"!

Connect An Event To a Stimulus Controller Action

In this lesson, we'll take an existing HTML structure and connect it to a Stimulus controller. We'll also look at adding an "action" to a form input as well as setting an element as a "target" to connect all the dots to make a Stimulus controller functional.

Connect A Stimulus Controller To Existing HTML

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

Using the `react-intl` `FormattedMessage` component, we’ll learn how to render content conditionally in our messages based on a number provided as a prop. 
 
You’ll also learn the syntax necessary to render strings using a plural string matcher.

Render Content Based on a Number using react-intl FormattedMessage

In some cases, you might need to pass a string from your intl `messages.js` file as a prop to a component. Instead of using `react-intl` components (which generate markup), we’ll use the `injectIntl` higher order component provided by `react-intl`. This will provide just the string we’re looking for, make the prop simpler,  and avoid creating unnecessary DOM elements.

We’ll also use props passed to the component from the Higher Order Component to clean up some redundant code.

Use a react-intl Higher Order Component to format messages and get current locale

In this lesson, we’ll look at writing test assertions for react-intl output. We'll add the necessary dependencies, then we’ll use `Jest` snapshots to get assertions written quickly. Then, we’ll use `enzyme` API methods to traverse the DOM and write assertions about specific pieces of `react-intl` data.

_Note:_ This lesson uses a modified version of an "intl-enzyme" helper utility from the `react-intl` documentation. You can [find the modified file here](https://github.com/damonbauer/egghead-bookshelf/blob/lesson10-testing/src/intl-enzyme.js).

Write tests for react-intl output using enzyme and Jest

Some browsers, such as `Safari < 10` & `IE < 11`, do not support the JavaScript Internationalization API, which `react-intl` depends on. In order to support these browsers, we’ll conditionally include an Intl polyfill using webpack `require.ensure`. 
This ensures only browsers that need the polyfill incur the extra load.

Use Webpack to Conditionally Include an Intl Polyfill for Older Browsers

Learn how to use `react-intl` to set dynamic values into your language messages.
We’ll also learn how to pass in those values by using a `values`  prop in the `react-intl` `FormattedMessage` component. 
 
We'll also take a look at how to pass values with markup and still get all the benefits of translation.

Render Content with Placeholders using react-intl FormattedMessage

In this lesson, we’ll use the `react-intl` `FormattedHTMLMessage` component to display text with dynamic values along with other HTML elements to create emphasis on a piece of text.

_Note_: `FormattedHTMLMessage` should be used sparingly because `react-intl` cannot intelligently update the component by re-rendering only pieces that have changed. Instead, it has to re-render the entire component. If possible, use a `FormattedMessage` component instead, and wrap that component with HTML markup.

Render Content with Markup Using react-intl FormattedHTMLMessage

Using the `react-intl` `FormattedDate` and `FormattedTime` components, we’ll render a JavaScript Date into both a date string and a time string in different language formats.

Format Date and Time Using react-intl FormattedDate and FormattedTime

Given a date, we’ll use the `react-intl` `FormattedRelative` component to render a date in a human readable format, such as “2 days ago”, in various languages.

We'll also see how to set the frequency of this component's rendering to make our app update the text in real-time.

Format a Date Relative to the Current Date Using react-intl FormattedRelative

Using a `react-intl` `FormattedNumber` component, we'll pass a Number and a few additional props in order to render the correct separator and currency symbols for different languages.

Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber

We’ll install `react-intl`, then add it to the mounting point of our React app.

Then, we’ll use `react-intl` helpers to load locales in our app, including English, Spanish and French and choose which locale data to load based on the user's browser language.

We’ll also set up and include messages files for each language, which hold all of the translated strings for our app.

Install and Configure the Entry Point of react-intl

In this lesson, we’ll replace hard coded strings with text from the user’s locale data, using the `react-intl` `FormattedMessage` component.

We'll also discuss the structure of the `messages` file, as well as use [this utility from the `react-intl` documentation](https://github.com/yahoo/react-intl/wiki/Upgrade-Guide#flatten-messages-object) in order to keep our `messages` structured nicely.

Convert a Hard Coded String using react-intl FormattedMessage

HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

html

In this lesson, we’ll learn how to embed an SVG sprite into markup and reference it throughout the page using the SVG “use” tag and fragment identifiers.

This has become the standard way of displaying SVG icons because of the ability to dynamically style individual parts (especially interaction states). Also, because the SVG is just markup embedded on the page, it creates no extra HTTP requests. However, the block of SVG needs repeating on every page where icons are used.

Embed SVG Directly In Markup with the “Use” Tag

Cascading Style Sheets bring order and beauty to our applications.

In this lesson, you’ll learn how to create interactive and multi-colored SVG icons using only CSS. You’ll also see how the same familiar rules of inheritance and specificity apply when working with SVG. We’ll style icons on hover, change their size and style individual parts of an icon.

When implementing SVG icons with the `use` tag, the browser renders the SVG inside something called the "shadow dom". Unfortunately, most browsers do not support accessing child elements of the shadow dom via CSS. In order to target elements inside a `use` tag, such as a `path`, you can target it at the global CSS level, like so:

```
path#rain {
/* styles */
}
```


Instead of:

```
.Icon--umbrella path#rain {
  /* styles */
}
```

Style an SVG Icon with CSS

Since an SVG is really just an image, it can be included on a page just like any other image, using an `img` tag. This is simple to implement, easy to resize and has the benefit of being cacheable.

There are a couple downsides to this approach, however. You can’t modify the SVG attributes such as fill or stroke; once the icon is included, there isn’t much you can do to change its appearance. Also, each icon you include creates an HTTP request, potentially impacting page load speed.

If you’re looking for an easy way to implement just a couple of icons that don’t need to change, this is a viable option.

Include an SVG with an Image Tag

Learn how to set an SVG as the background image of an element. Background images can be resized by changing the `width` and `height` of the element containing background image, so it’s easy to create multiple sizes of the same icon. 

However, each background image creates an HTTP request, so be aware of your page load speed. With this approach, you are unable to change attributes on the SVG such as fill or stroke.

If you want the ability to display icons at different sizes and don’t need to change their appearance or their interaction styles (such as on `:hover`), this could be a good option for you.

Add an SVG as a Background Image

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files.

svgo

In this lesson, we’ll explore the process of combining all of your SVG icons into one SVG sprite, to be included directly into markup. We’ll use the command line, along with the `svgo` and `svg-sprite-generator` npm packages to automate the process of compressing the SVGs and creating the sprite.

_Note:_ This lesson assumes you have `npm` installed.

Combine Multiple SVGs into an SVG Sprite

In this lesson, you'll learn how to enhance the accuracy of components generated by Cursor Composer by aligning your project's package.json with Cursor's rules. We'll guide you through extracting the list of installed packages from your package.json and incorporating them into your .cursorrules file, along with brief descriptions of their functionalities. By providing Cursor with this contextual information, you'll enable it to generate components that are more precise and functional on the first attempt. The lesson includes demonstrations of component generation both with and without these enhancements, highlighting the improvements in accuracy and efficiency.

Boost Cursor Composer Accuracy: Integrating package.json with Cursor Rules

Speed up your bug-fixing process dramatically with Cursors Composer. Take a warning from your logs, search for relevant terms, then seamlessly import both the warning and search results into Composer. Add documentation and apply fixes to all search results in one go. This streamlined workflow resolves multiple issues rapidly, saving valuable development time.

Batch Fix Every File in Search Results with Cursor's Composer

 We map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the table. This allows us to add more columns to our pokemon table.

Fetch and display row details with Promise.all in Tanstack Table

map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the tanstack table

Create a custom hook to fetch remote data by passing a promise to the React 19 `use` hook. Then render this data in Tanstack Table by memoizing the results and passing them to `useReactTable`.

Render remote data in a Tanstack Table with React 19's use hook and a promise

Create a custom hook using React 19’s use to fetch data with a promise. Render it in a Tanstack Table by memoizing and using useReactTable.

You know when you're deep in the code trenches and need someone to challenge your assumptions? That's exactly what this is about.

Instead of waiting for someone to poke holes in your master plan, you can paste that strategy straight into AI Studio and let it pressure test your ideas. We're talking about using this tool to validate everything from your feature proposals to your ambitious refactoring strategies.

The real magic happens when you hit that microphone button. Now you're in a real-time verbal sparring match. It's like rubber duck debugging but the duck actually pushes back and makes you defend every architectural decision you've made.

Here's the workflow:
1. Drop your master plan into the system instructions
2. Tell the AI to challenge every assumption
3. Hit that mic and defend your choices like you mean it
4. Watch your plan either emerge stronger or get rightfully dismantled

This approach is perfect when you're:
- Stuck in your own head with a complex problem
- Need to validate if your approach holds water
- Want to catch edge cases before they catch you
- Looking for opportunities you might have missed because you're too close to the code

It's like having a senior dev on call 24/7, ready to challenge your ideas and push you to think deeper about your solutions.

Now go forth and get your ideas challenged. Your projects will thank you for it.


An Uncomfortable and Challenging Conversation with AI Studio

In this lesson, you'll learn how to effectively brainstorm your project ideas before working with AI agents. We'll cover:

1. The importance of having a clear plan before starting work with AI agents
2. Using traditional brainstorming techniques to gather your thoughts
3. Leveraging video recording to capture your brainstorming session
4. How to review and analyze websites for inspiration
5. Documenting likes, dislikes, and potential features for your project
6. Using AI tools (like AI Studio) to organize and process your recorded brainstorming session

The lesson emphasizes a modern approach to brainstorming that combines traditional techniques with video recording, making it easier to later process your ideas through AI tools. This method helps ensure that no ideas are lost and that your thoughts can be effectively organized by AI for future reference.

How to Brainstorm Your Project Features to Prepare for AI Agents

fast-check allows us to create composite generators that suit our testing needs. We'll generate two numbers to create a point simulating an X and Y and assert that the distance should always be greater than or equal to 0.

Generate composite objects with fast-check fc.record

Just using fast-check by itself can make you tests verbose and tough to read. Lucky for us there are many integrations with fast-check such as the `@fast-check/jest` package that will help remove some boilerplate from our test.

Tidy up your test with @fast-check/jest

Many people share .cursorrules files, but trying to craft your own from scratch is a huge pain. Instead, this lesson shows you how to grab ALL community-created .cursorrules files to build a custom rule set for your projects. We'll use Gitingest and Google AI Studio to gather these examples and generate an awesome starting point customized to your specific project.

Generate Custom .cursorrules for Your Project Based on Community Examples

The GitHub CLI allows you to search issues and filter on different criteria like amount of comments. This allows you to search for real-world situations and pains/solutions people have using different technology. 

With the GitHub CLI in hand we'll drop 100s of issues as context in Googles AI Studio and have Gemini determine the 10 most frequently asked questions. This will give us a sense of how people use a library and where people get hung up.