 Courses from Yoni Weisbrod

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

This lesson delves into the different ways in which variables and functions are hoisted in Javascript. Note that everything is hoisted but they're not all hoisted in the same way.

**Function declarations** are completely hoisted, so that you can always reference a function declaration before it's defined.

Variables declared with **var** are also hoisted, and their values are initialized to `undefined`. **let** and **const**, on the other hand, are hoisted, but they don't receive any initial value. This causes an area in the code where the interpreter is familiar with the variable, but it has not yet been initialized - known as the **Temporal Dead Zone** (or **TDZ**).

Understand hoisting in Javascript

One of the fundamental aspects of Javascript is variable scope, and in this lesson we'll dive into how variable scope works when defining variables with `var`, `let`, or `const`.

The three main takeaways are:

1. Inner scope can always read values defined in an outer parent scope.

2. Outer scope **cannot** read values defined in an inner scope (except when defined with `var`).

3. The `var` scope-bleed issue can be overcome using immediately-invoked function expressions (IIFEs).

Use var, let, and const to Control Variable Scope in JavaScript

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

Recoil offers several hooks to use for consuming state in React, and this lesson looks at how to choose which hook to use, and what happens when you don't use the right hook (hint: **extra renders**).

The three basic RecoilJS hooks are:

1. `useRecoilState`, which is great for reading and writing state,
2. `useRecoilValue`, ideal for reading state, and
3. `useSetRecoilState`, the primary candidate when you just need to write state.

Choose the Right Hook for Your Recoil State

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

In this lesson, we'll get up and running with React Native while installing the extension for MacOS. For current instructions, head over to the React Native for MacOS documentation site, which will point you in the direction of the latest version: https://microsoft.github.io/react-native-windows/docs/rnm-getting-started.

To run your new Mac application, run `npx react-native run-macos`. The first time you run this, it will take quite a while because project dependencies are being installed, but subsequent runs will go much quicker.

Create a new React Native for MacOS application

When consuming asynchronous selectors in Recoil, you're going to need to tell React what to render while the API is fetching its data. 

One way to solve this issue is by setting a fallback value using React `Suspense`. But there's another option that gives you fine-grained control, and that's by preventing the selectors from returning a promise in the first place.

In this lesson we're going to have our selectors return Recoil's `Loadable` object, which always contains the current selector value (`contents`) and what state the selector is in (`state`). By consuming this with the `useRecoilValueLoadable` hook rather than the regular `useRecoilValue` hook, we can manually define whatever we want React to render in each of the 3 states: `hasError`, `hasValue`, and `loading`.

Handle Recoil Asynchronous Selectors using Loadables in React

Selectors are great for automatically triggering API calls with Recoil because they are automatically run as soon as any dependencies are updated, and because selectors are shared across your application.

Be aware that Recoil will cache your selector values, so asynchronous selectors are best utilized when the data is not meant to change throughout the life-cycle of an application. Fetching a user's avatar would be a good use case.

When writing asynchronous selectors, one thing to keep in mind is that React must always know what to render - even while your data is being fetched. One solution for this is to use Suspense, a React component that allows you to supply a fallback value to render until your data returns. In this lesson, we'll look at how to call APIs inside selectors and handle situations where selectors return promises.

Use Recoil Selectors to Make API Calls in React

In this lesson, we're going to learn how to create Recoil selectors that accept arguments. These are made possible using the `selectorFamily` utility function.

We'll start with an existing application that uses a regular `selector` to display a sorted array of Todo items, and then we'll refactor it so that we're able to supply the sort type (`ascending` or `descending`) in the React component itself.

For more information on `selectorFamily`, have a look at the official RecoilJS docs: https://recoiljs.org/docs/api-reference/utils/selectorFamily


Use selectorFamily to take arguments in your Recoil selectors

Learn how to set state in Recoil using the `useRecoilState` hook. 

Sound familiar? It should, because it works very similarly to React's built-in `useState` hook (the functional component equivalent of `setState`).

In this lesson, we'll practice removing and adding items from an array that we keep in state using a Recoil atom. We'll create new immutable functions, and then call our setter functions in order to update the state.

Update Recoil State in React using useRecoilState

In this lesson, we'll dive right into creating custom functions for Google Sheets. Guess what? All you need is JavaScript! 

We'll talk about how to create custom functions, how to call them, and how to declare in which cells your data will be presented using the Google Sheets two-dimensional array syntax.

Create Custom JavaScript Functions for Google Sheets

In this lesson, we're going to show how RecoilJS selectors are used to display computed data in React. While atoms are the go-to state objects in Recoil, selectors are the ideal choice when data can be computed based on existing state - like displaying the price of a restaurant order. And your selector output always remains up to date - just subscribe to it using one of the RecoilJS hooks.

Display Computed Data Using Recoil Selectors in React

Next.JS works with any CSS-in-JS solution, including Styled Components. But to get it working with Next.JS's server-side rendering, you'll need to do some configuration.

In this lesson I go through the steps required to get it working properly, including adding `babel-plugin-styled-components` to your project and overriding the `Document` page to inject your styles into the `<Head>` of the page.

For reference, please see Styled Components' [guide to SSR](https://www.styled-components.com/docs/advanced#server-side-rendering), and the Next.JS [sample repository for Styled Components](https://github.com/zeit/next.js/tree/master/examples/with-styled-components).

Add Styled Components to a Next.JS Project

The nulliish coalescing operator (`??`) allows us to be more explicit when setting object defaults. It allows us to ensure that only values that are "nullish" (either null or undefined) cause the default value to be taken, rather than anything that evaluates to false.

It's a safer way to operate.

Please note: This feature is still making its way through the TC39 proposal process. To use it in your project today, you can enable it using [Babel's Nullish Coalescing plugin](https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator).

Use the Nullish Coalescing Operator to Set Object Defaults

Optional Chaining provides a safe way to handle situations where you don't know whether specific properties exist on a given object. Rather than resorting to long conditional logic or nested ternaries, optional chaining is a concise way to only access properties if they exist - and if they don't, to return undefined rather than throw an error.

Please note: This feature is still making its way through the TC39 proposal process. To use it in your project today, you can enable it using [Babel's Optional Chaining plugin](https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining).

Use Optional Chaining to Safely Handle Objects with Unknown Properties

Speed up your Sublime Text workflow by creating snippets out of boilerplate code. Sublime Text snippets are smart, configurable, and prevent repetitive typing.

Use Sublime Text Snippets to Avoid Repetitive Typing

In this free collection on Facebook's new state management library, we'll get started using Recoil in our React applications and then delve into various common use cases that we may encounter in the field.

We'll start with the basics of state management in Recoil: the Atoms and Selectors. Then we'll dive further into the Selector API, an important part of the library. Along the way we'll learn different strategies for handling synchronous and asynchronous Selectors.

Manage React State with Recoil


Using Cursor Chat, you can easily reference an entire directory of files and ask it to generate anything based on those files. This opens up the possibility of using your current code as a reference guide to create new code that follows existing patterns. With this approach, the result can be a polished prompt you can use with any AI to generate consistent and reliable output.

Focus less on crafting the perfect prompt upfront - what matters most is testing and iterating based on the AI's responses. The more results you see from the prompt, the more you can reinforce the good results and prune out the bad results until your prompt is polished enough that you can rely on the prompt to give you consistent quality results.


Create AI Prompts Based on a Directory of Files


With Cursor's "Composer" feature, you can select and entire directory and make changes to every file. This video walks through the process of selecting a folder and refactoring all the files from JavaScript to TypeScript. It also demonstrates other tips around generating terminal commands and customizing your main Cursor "Rules for AI".


Run an AI Refactor on Every File in a Directory with Cursor


This lesson breaks down the concept of asynchronous iterators and generators in JavaScript. Using the Node.js glob function as a practical example, you'll learn how Array.fromAsync facilitates the creation of arrays from asynchronous iterables and how generators can improve performance in file processing tasks.

Efficient File Processing in Node.js with Async Generators and Array.fromAsync

Learn the concept of asynchronous iterators and generators in JavaScript and Node.js Array.fromAsync


With the introduction of Svelte 5, the Svelte team has created a CLI, `sv`, that unifies all the tasks that previously spread across a handful of CLIS (create, add plugins, and migrate).

This lesson will create a Svelte project using the new `sv` CLI and build a counter component to showcase the new `$state`, `$derived`, and `$effect` runes that ship with the new version.



Get Started with Svelte 5 using the sv CLI

You'll create a SvelteKit project using the sv CLI and build a counter component showcasing Svelte $state, $derived, and $effect runes.



pnpm ships with a streamlined, easy way of managing Node.js versions for youself and your team. This video demonstrates why pnpm uses a specific version of Node.js, how to configure it globally, and how to set up your project so that anyone who is running your project will automatically use the same version of Node.js even if that version of Node.js is not installed.


use pnpm as a Node.js version manager

How you build with Angular has changed quite a lot over the years.

For example, the `inject` function was introduced in version 14 but you might still be familiar with Angular's constructor injection.

Similarly, structural directives like `ngif` or `ngfor` have been replaced with `@if` and `@for` blocks since version 17 and beyond.

These are patterns that need to be adjusted if you want to stay up-to-date with the latest Angular has to provide.

Luckily, Angular gives you great tools in the form of a migration CLI for supporting your migration efforts as you incrementally update your App from older version features and patterns. 

When you're done with this course you'll know how to target specific features, folders, and files to migrate to the latest Angular version.

You'll learn how to 'migrate':
- Structural directives with control flow syntax
- Constructor dependency inject to inject function
- Make components standalone
- Lazy load routes
- Input/Output decorators to signal-based API


Angular Migrations in Practice

Migrate old Angular patterns for version 18 and beyond

When we import assets in React components outside of the `public` folder that Nitro reads for assets by default when running the development server we need to tell Nitro how to find them with the `devProxy` configuration option.

```typescript
export default defineNitroConfig({
  renderer: './renderer.ts',
  devProxy: {
    '/app/assets': 'http://localhost:5173/app/assets'
  }
})
```

This is ultimately inadequate in scenarios where you want to import assets arbitrarily and have them "just work" but works in a pinch.



Use devProxy in Nitro Config to Serve Static Imported Assets in Dev Mode via Vite

Learn how to use devProxy in Nitro Config with Vite to serve static assets in React components in dev mode.

Start with a basic Vite React TypeScript app and enhance it for production use by integrating Nitro as the server. 

This requires a custom Vite plugin for nitro as well as a custom renderer and manually creating Nitro config.

The other way to approach this would be to add Vite to a Nitro app instead. Same basic result.

The [Nitro config reference](https://nitro.unjs.io/config) is a great read of you'd like to explore more options.


Configure a Vite React TypeScript Application on a Basic Nitro Server

Configure a Vite React TypeScript app by integrating Nitro for production, using custom plugins, renderers, and configs.

Quick Get Started style introduction to Vite using `pnpm create vite` with the React TypeScript template.

See [more in the official docs](https://vite.dev/guide/).

Create a Vite App with the React TypeScript Preset

Quick guide to start a Vite app using React TypeScript template with pnpm.

Over the years, your application have grown huge. Sometimes, really HUGE.

Many developers have contributed to the codebase. One day they pushed one coding style, a different one another day. Sometimes even different patterns and solutions for similar problems.

You want to keep your codebase consistent. In the Angular ecosystem, there were well established patterns for doing things the right way ™️. But the old solutions are being challenged by signal-based approach.

Eventually, you ask yourself the key question: **Should you integrate with the NEW solutions or stick to the battle-tested ones, but already considered LEGACY**?

That's a very good question indeed. Don't rush with architectural decisions 🤓.

## First, think of what problems you want to solve by introducing the change.

Do you have 1k LoC Angular components? Maybe even 2k? Do you and your team enjoy working with these? 😏

Where does the **domain logic and state management code** belong to - do you have a clear guidance on which code should be put where? Have you spot that different devs implement similar features in totally different ways?

Do you keep on asking the same questions over and over again: **whether this certain piece of code** should be **imperative** (plain old object properties and variables) or **reactive** (streams)? It'd be nice to keep all thinga reactive, but more often than not, it introduces complexity.

## Second, think of long-term consequences.

You are going to have more than one way to **manage the state**. But is that really an issue? If your codebase is modular, separate modules should not depend on each other in any way. Inner abstractions of one should be invisible to the other, etc.

You are going to introduce a **new tool**. On one hand, you need to learn it, and so does your team. But on the other hand, it's a breathe of fresh air. And it's useful to question the way you've been doing things so far. Maybe there's a more effective way?

You are going to embrace signal-based APIs. And that means taking taking advantage of Zoneless Angular. This means using all modern Angular APIs. And you know that signals are the future. Why would you want to stick to the **less performant, less type-safe, less flexible and, objectively, less effective solutions**?

## Finally, plan your INCREMENTAL integration.

INCREMENTAL is the absolute keyword here. You don't want to tell your PM you need to stop delivering features because of a refactor.

Actually, there's no need for a "refactor". Just pick the first new feature to be implemented. Or pick the one that needs to be extended.

NGRX Signal Store allows you to create both very simple & small stores, as well as bigger ones. **Composition** is the key here.

**Start simple**.

Create a `withState` section with the signals that hold the state. That's already reactive. And relatively simple.

```ts
const initialState: CartState = {
  items: ...,
  rebate: ...,
}

export const CartStore = signalStore(
  withState(initialState)
);
```

Create a `withMethods` section to provide ways to change the state:

```ts
export const CartStore = signalStore(
  ...
  withMethods((store) => ({
    addItem(item: ShoppingItem): void {
      patchState(store, (state) => ({ items: [ ...state.items, item ] }));
    },
    ...
);
```

Create a `withComputed` section to provide all derived computations:

```ts
export const CartStore = signalStore(
  ...
  withComputed(({ items }) => ({
    totalPrice: computed(() => items().reduce(...))
    ...
);
```

**Start simple**.

Now you can (literally) **`inject` this code into your existing solution**. All you need is to inject your brand new NGRX Signal Store implementation into a component, or a service:

```ts
@Injectable()
class ExistingBigService {
  cartStore = inject(CartStore)
  //...  
}
```

and that's it! What's beatiful is that NGRX Signal Store should remain an implementation details (of a component, service, etc). It **shouldn't leak outside to the entire application unintentionally**. Small NGRX Signal Stores help us to **keep logic more modular**.

Don't hesitate - give NGRX Signal Store a try! Start with the [_**Scalable Signals Angular Architecture with NGRX Signal Store**_](https://egghead.io/courses/scalable-signals-angular-architecture-with-ngrx-signal-store-a33abd39) course now!

Integrating NGRX Signal Store with an existing Angular application

Integrate NGRX Signal Store into your Angular app incrementally for modular, reactive state management. Improve consistency and performance with modern APIs.

Yoni Weisbrod

Search Results