Learn Angularfire, Babel and Chai

firebase

There are 2 different ways to get a document's ID when using `@angular/fire`.

You can add the parameter `{ idField: 'id' }` to your collection when using the `collectionData()` observable.

You can also use the observable `collectionChanges()` and access the internal metadata of the document to manually get the ID and add it to the resulting object.

Code sample: https://github.com/javebratt/angularfire-idField

Access a Firebase Document's ID Even when It's Not Stored in the Document with angularfire

AngularFire is the officially supported AngularJS binding for Firebase. Firebase is a backend service that provides data storage, file storage, authentication, and static website hosting for your Angular app.

angularfire

You'll learn the 2 Observables that Firebase Authentication provides to subscribe to the authentication state of your application, `authState` and `user`.

You'll see how they both return the same `User` object from Firebase Authentication.

And you'll learn that the difference is that `authState` triggers when the user logs in, or logs out of the application, while `user` is called both of those times, and also is called when Firebase refreshes the user's authentication token.

As a personal guideline, if I need to do an operation when the user's token is refreshed (_for example, update a 3rd party service_) I'll use `user`, if not, I'll default to `authState`.

Choose Between authState or user to Subscribe to Firebase Authentication State Changes

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

We take the opengraph image we wrote in codesandbox and copy it into our serverless function. We use Rollup to compile the component into an IIFE (immediately invoked function expression) that can run in our headless browser environment and cover a wide set of rollup plugins that we need for compatibility. We end the lesson having successfully screenshot our opengraph react component from our Netlify Function

**Note**:  Due to Netlify changing their handling, the path in `fs.readFileSync` is affected. Update to:
```js
const script = fs.readFileSync(path.resolve(__dirname, "image.js"), "utf-8");
```

Compiling a React to an IIFE with Rollup to execute and render in a headless browser

Babel has support for the latest version of JavaScript through syntax transformers. These plugins allow you to use new syntax, right now without waiting for browser support.

babel

In this lesson, we'll configure webpack to use the Babel loader for our JavaScript files, allowing us to transpile our source files and generate a bundle for deploying our application.

Configure webpack to Load JavaScript Files through Babel with babel-loader

Converting all of our modern JavaScript into ES5 compatible syntax is a great way to use modern features while targeting older browsers. What happens when the browsers natively support these language features? Then it no longer makes sense to transform that code or to include polyfills that will go unused. In this lesson, we’ll add the `@babel/polyfill` package and configure `babel-preset-env`

Target specific browsers with babel-preset-env and the babel pollyfill

We transpile our JavaScript code so we can use modern language features, even if browser support isn't quite where we need it to be. This includes proposed features that aren't yet part of the official language specification. In this lesson, we'll see how we can support the proposed class property syntax for JavaScript with a Babel plugin.

Support Proposed JavaScript Features with Babel Plugins

One approach to building high performance applications with `webpack` is to take advantage of code-splitting to only load the needed JavaScript on initial load and asynchronously load additional JavaScript bundles when needed. In this lesson, we'll create add some code-splitting to our placeholder application and configure our project to support the dynamic `import()` syntax.

Asynchronously Load webpack Bundles through Code-splitting and React Suspense

In this lesson, we'll add React and ReactDOM to our project and create an entry point for the React application. We'll also configure Babel with the React preset so Babel can transpile our JSX into JavaScript that will run in a browser.

Configure babel for React with preset-react

In this lesson, we’ll install Babel and use it from the terminal to see how it can take JavaScript that uses modern language features and output JavaScript that will run in down-level browsers.

Transform Modern JavaScript Features with Babel

Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework.

chai

In this lesson, you will learn how to verify your API server is returning HTTP 400 responses when clients submit incorrect data. Returning HTTP 400 ensures that your clients are notified of the incorrect usage. Testing for them ensures your API returns errors instead of incorrect responses when supplied with incorrect data.

Test for HTTP 400 responses with Mocha and Chai

In this lesson, we will use Chai's request method to test our Node application's API responses.
By the end of this lesson, you will know how to:
- install the prerequisites to use mocha and chai in your application
- test for HTTP status response codes
- test for a string of text on a page
- test for a json response and validate the properties of the object
- write tests that not only verify the response of your application, but the behavior as well


Test Node RESTful API with Mocha and Chai

Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.

mocha

Writing great ES6 style Promises for Node.js is only half the battle. Your great modules must include tests as well to ensure future iterations don't break them. In this lesson, I show you a simple ES6 Promise in Node.js, then walk you through creating tests in Mocha using chai and chai-as-promised to test both resolve and reject methods.

Testing ES6 Promises in Node.js using Mocha and Chai

What is already a nice workflow using Gulp, Browserify, Watchify & Browsersync to enable auto rebuilds & live browser reloading can be further improved by adding Babelify. A simple wrapper around the popular transpiler Babel, Babelify can ‘transform’ source files as they pass through our stream to enable certain Javascript features not yet available in the Browser or Node. We end the lesson by looking at how to generate & extract sourcemaps using `exorcist`.

Gulp and Browserify - Adding Babel & Source Maps

Now that you've got everything set up with mocha and chai, it's time to actually write tests. In this lesson you'll learn how to use `describe` and `it` to outline your tests and make sure you don't break your library in the future.

Unit Testing with Mocha and Chai

Every dependable library needs to have tests to ensure that you don't push accidental bugs. In this lesson, see how you can set up mocha and chai to start testing your library.

Setting up Unit Testing with Mocha and Chai

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Firebase provides a real-time syncing backend for your AngularJS applications in very few lines of code. In this lesson, you'll learn how to get started integrating it into your app.

Get Started with Firebase and AngularFire

<p>Henry Zhu is currently a steward for Babel, and today he'll be discussing the management and lifestyle side of working on an open source project full-time.</p><p>The financial side to open source is interesting. Henry talks about where he gets his money and how he can be financially independent while still working on open source full time. Most of the money comes from donations through Open Collective and Patreon. A lot of the donations come from users, but corporations do donate as well. Henry also discusses the stability of it, and how the NPR model of asking for donations can lead to uncertainty about the next month.</p><p>Henry says he's enjoying the management and marketing side of being a steward about as much as he enjoys coding. It's a side that people don't often think about with open source. This side of it includes a lot of marketing and interacting with the greater community, as well as the other maintainers and contributors to babel.</p><p>How does Henry handle all this responsibility when there is no one above him telling him when to take a break, or when to go on vacation? Henry and Joel talk about having a positive "selfishness", and taking care of yourself so that the project can prosper. If you want to be doing it for years you have to make sure that you don't burn out.</p><hr /><h3>Transcript</h3><p><a href="https://egghead.simplecast.com/episodes/henry-zhu/transcript">"Henry Zhu, Maintainer of Babel" Transcript</a></p><h3>Resources:</h3><ul><li><a href="https://babeljs.io/">Babel</a></li><li><a href="https://www.amazon.com/Power-Habit-What-Life-Business/dp/081298160X">The Power of Habit</a></li><li><a href="https://www.amazon.com/You-Are-What-Love-Spiritual/dp/158743380X">You Are What You Love</a></li><li><a href="https://www.tinyhabits.com/">Tiny Habits</a></li><li><a href="https://kaidavis.com/articles/">Kai Davis</a></li></ul><h3>Henry Zhu:</h3><ul><li><a href="https://twitter.com/left_pad?lang=en">Twitter</a></li><li><a href="https://www.henryzoo.com/">Website</a></li><li><a href="https://github.com/hzoo">Github</a></li><li><a href="https://www.patreon.com/henryzhu">Patreon</a></li><li><a href="https://opencollective.com/babel#">Open Collective</a></li></ul><h3>Joel Hooks:</h3><ul><li><a href="https://twitter.com/jhooks">Twitter</a></li><li><a href="https://joelhooks.com/">Website</a></li></ul>


Today, Henry Zhu, the lead maintainer of Babel, discusses what it's like to work on a large and important open source project. Henry gets into how Babel receives funding, how corporations are involved in open source, stewardship of an open source project, mental and physical health, and not compromising his values.  

Henry Zhu, Maintainer of Babel

While much focus in AI has been on optimizing input and generating concise outputs, a new model in Google's AI Studio dramatically expands output possibilities with a capacity of 65,000 tokens. This represents a significant shift, opening doors to new application scenarios, especially for developers and creators. This lesson explores a practical and immediately useful scenario: leveraging this large output capability within Google's AI Studio to generate extensive sample datasets for your projects. Whether you are developing a new application, building a resource, or require robust datasets for testing and validation, this model offers a powerful solution. We'll demonstrate how to move beyond the constraints of short responses and utilize the full potential of large output models to generate the data volume and variety you need, enhancing your development workflow through Google's AI Studio.

AI Studio's New 65k Output Opens Exciting Possibilities

This lesson explores how to use Cursor to generate and maintain English specifications as a form of living documentation. Learn how these automatically created documents can serve as a consistent and up-to-date representation of your code's behavior. The video highlights how reviewing and refining these English specifications can help ensure that code modifications align with the intended purpose and that documentation accurately reflects the current codebase, promoting better long-term code maintainability and clarity.

Here's the "english-spec.md" used in the video:

```markdown
> You are an AI specialized in analyzing source code and producing structured, plain-English representations of its functionality.  
>  
> **Your Task**:  
> 1. Read and interpret the code I provide.  
> 2. Produce a technical, English-only summary of what the code does.  
> 3. Use headings and bullet points to clearly outline the roles of each function, class, variable, or important logic block.  
> 4. **Do not include any actual code** in your final output. Instead, translate the code’s content into an English explanation (like a specification or documentation).  
> 5. Keep the explanation concise but thorough. Focus on explaining the purpose, process, and relationships between functions or modules in the code.  

**User Prompt to the AI**:

> **Instruction**: Convert the following code into a single file of pure English text that outlines exactly what each part of the code does. Use bullet points, headings, and descriptive language. Do not show any code—only explain how the code behaves. This is intended to serve as a human-readable spec or “translation” of the code.  
>  
> **Code**:  
> ~~~  
> [PASTE YOUR CODE HERE]  
> ~~~  

**Example Input/Output #1**:

- **Example Code (Input):**
  ~~~js
  // example1.js
  const greetUser = (userName) => {
    const greeting = `Hello, ${userName}!`;
    console.log(greeting);
  };

  greetUser("Alice");
  ~~~

- **Example Explanation (Output)**:
  ~~~
  # Overview
  - This file defines a single function which greets a user by name and prints a message to the console.
  
  # Function: greetUser
  - Accepts one parameter (`userName`).
  - Constructs a greeting string that combines static text with the `userName`.
  - Outputs the greeting using `console.log`.

  # Behavior Flow
  - The function is called with the argument "Alice".
  - Upon invocation, "Hello, Alice!" is logged to the console.

  # Key Points
  - Shows how to create a greeting with a dynamic name.
  - Demonstrates basic string interpolation and console logging.
  ~~~

**Example Input/Output #2**:

- **Example Code (Input):**
  ~~~py
  # example2.py
  class Calculator:
      def __init__(self, initial=0):
          self.value = initial
      
      def add(self, amount):
          self.value += amount
      
      def subtract(self, amount):
          self.value -= amount
      
      def get_value(self):
          return self.value

  calc = Calculator(10)
  calc.add(5)
  calc.subtract(3)
  result = calc.get_value()
  print(result)
  ~~~

- **Example Explanation (Output):**
  ~~~
  # Overview
  - This file defines a `Calculator` class that keeps track of an internal numerical value and provides methods to modify it.
  
  # Class: Calculator
  - **Constructor** (`__init__`):
    - Accepts an optional initial value (default is 0).
    - Stores the initial value in a `value` property.
  - **Method: add**:
    - Takes an `amount` and increments the internal `value` by that amount.
  - **Method: subtract**:
    - Takes an `amount` and decrements the internal `value` by that amount.
  - **Method: get_value**:
    - Returns the current internal `value`.
  
  # Behavior Flow
  - An instance of `Calculator` is created with an initial value of 10.
  - The `add` method is called with 5, raising the value to 15.
  - The `subtract` method is called with 3, lowering the value to 12.
  - The `get_value` method is called to retrieve the current value (12).
  - The result (12) is printed to the console.

  # Key Points
  - Demonstrates basic OOP with a class that manages state.
  - Showcases constructor, addition, subtraction, and retrieval of a stored value.
  ~~~  

---

## Final Prompt

Below is a full, combined version of the prompt you can provide to an AI to guide it in generating the English-only, bullet-pointed explanation. Feel free to modify or adapt this as needed:

~~~
You are an AI specialized in analyzing source code and producing structured, plain-English representations of its functionality.

Your Task:
1. Read and interpret the code I provide.
2. Produce a technical, English-only summary of what the code does.
3. Use headings (e.g. # Overview, # Functions, # Classes, # Behavior Flow) and bullet points.
4. Do not include any code in your final output—only explain how the code behaves.
5. Keep it concise but thorough, focusing on purpose, process, and relationships between functions or modules.

Below are some examples of how code might be transformed into an English-only explanation:

Example Input:
-------------------
~~~js
// example1.js
const greetUser = (userName) => {
  const greeting = `Hello, ${userName}!`;
  console.log(greeting);
};

greetUser("Alice");
~~~
Example Output:
-------------------
# Overview
- This file defines a single function which greets a user by name and prints a message to the console.

# Function: greetUser
- Accepts one parameter (`userName`).
- Constructs a greeting string that combines static text with the `userName`.
- Outputs the greeting using `console.log`.

# Behavior Flow
- The function is called with the argument "Alice".
- Upon invocation, "Hello, Alice!" is logged to the console.

# Key Points
- Shows how to create a greeting with a dynamic name.
- Demonstrates basic string interpolation and console logging.


Example Input:
-------------------
~~~py
# example2.py
class Calculator:
    def __init__(self, initial=0):
        self.value = initial
    
    def add(self, amount):
        self.value += amount
    
    def subtract(self, amount):
        self.value -= amount
    
    def get_value(self):
        return self.value

calc = Calculator(10)
calc.add(5)
calc.subtract(3)
result = calc.get_value()
print(result)
~~~
Example Output:
-------------------
# Overview
- This file defines a `Calculator` class that keeps track of an internal numerical value and provides methods to modify it.

# Class: Calculator
- **Constructor** (`__init__`):
  - Accepts an optional initial value (default is 0).
  - Stores the initial value in a `value` property.
- **Method: add**:
  - Takes an `amount` and increments the internal `value` by that amount.
- **Method: subtract**:
  - Takes an `amount` and decrements the internal `value` by that amount.
- **Method: get_value**:
  - Returns the current internal `value`.

# Behavior Flow
- An instance of `Calculator` is created with an initial value of 10.
- The `add` method is called with 5, raising the value to 15.
- The `subtract` method is called with 3, lowering the value to 12.
- The `get_value` method is called to retrieve the current value (12).
- The result (12) is printed to the console.

# Key Points
- Demonstrates basic OOP with a class that manages state.
- Showcases constructor, addition, subtraction, and retrieval of a stored value.

---

**Now**: Please apply the same conversion process to the following code. Convert it into a plain-English document that describes what the code does in detail, using bullet points and headings. Create the document next to the original with the filename as `${fileName}.md`. Do not include any source code in the output—only the explanation:

[INSERT YOUR CODE HERE]
```

Programming in English with Cursor

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.