 Courses from Jafar Husain

RxJS is a library for composing asynchronous and event-based programs by using observable sequences. 


rxjs

In this lesson we solidify our understanding of how to flatten collections. This is perhaps the most important skill when learning to program without loops. We will try our hand at flattening not just a two dimensional collection, but a three-dimensional collection. Later on it will become clear how these skills relate to asynchronous programming.

Advanced Flattening

***Note: Some of the RxJS syntax used in this course is outdated, but the concepts taught on arrays, async, and observables are still reliable and applicable.***

Async programming may seem daunting. How can we write programs that accept user input, run animations, and send server requests over the same period? How do we keep the code clear and concise? How do we gracefully propagate and handle asynchronous errors? How can we avoid memory leaks caused by dangling event handlers? JavaScript's loops and try/catch keywords are no help - they only work on synchronous functions.

Here's the good news: Asynchronous programming is much easier than it seems. The key is to think differently about events. It is possible to build most asynchronous programs using a handful of simple functions. We will learn why most JavaScript developers approach asynchronous programming the wrong way, and how to avoid these common mistakes. 

Asynchronous Programming: The End of The Loop

Armed with the `map` and `concatAll` functions, we can create fairly complex interactions in a simple way. We will use Observable to create a simple drag and drop example with basic DOM elements.

Simple drag and drop with Observables

Like an array, Observable has a map method that allows us to transform a sequence into a new Observable.

Using the map method with Observable

In this lesson we will get introduced to the `Observable` type. An Observable is a 'collection that arrives over time'. Observables can be used to model events, asynchronous requests, and animations. Observables can also be transformed, combined, and consumed using the Array methods we learned in the previous lessons. We can write powerful and expressive asynchronous programs using the few simple methods we've learned so far.

Introducing the Observable

In addition to flat Arrays, programmers must often deal with nested Arrays. For example let's say we have an Array of stock exchanges, each of which is represented by an array of all the stocks listed on that exchange. If we were looking for a stock that matched a certain criteria, we would first need to loop through all of the exchanges, and then all of the stocks within. 

In these situations, most developers would nest two loops. However in this lesson we will write a new Array function `concatAll` which will automatically flatten nested arrays buy one dimension. This will remove the need to ever use a nested loop to flatten a nested array.

Create an Array concatAll method

Both `map` and `filter` do not modify the array. Instead they return a new array of the results. Because both `map` and `filter` return Arrays, we can chain these functions together to build complex array transformations with very little code. Finally we can consume the newly created array using `forEach`. In this lesson, we will learn how to build nontrivial programs without using any loops at all.

Chaining the Array map and filter methods

One very common operation in programming is to iterate through an Array's contents, apply a test function to each item, and create a new array containing only those items the passed the test. For example, let's say you wanted to loop through an array of stocks and select only those with the price larger than a certain value. In this lesson we will demonstrate how to use the Array's `filter` method to easily perform this operation with less code than a loop would require.

The Array filter method

One very common operation in programming is to iterate through an Array's contents, apply a function to each item, and create a new array containing the results. For example, let's say you wanted to loop through an array of stock objects and select only the name for display on screen. In this lesson we will demonstrate how to use the Array's `map` method to easily perform this operation with less code than a loop would require.

The Array map method

Most JavaScript developers are familiar with the `for` loop. One of the most common uses of the `for` loop is to iterate through the items in an array. In this lesson, we will learn how to replace the `for` loop with the Array's `forEach` method - and shorten your code in the process.

The Array forEach method

If you ever want to see data represented in a certain way, such as a chart or a graph, to better understand what's going on in the world, you can use AI's to grab the most recent data and then convert it into any visual format you want. This is enabled in AI studio with Gemini through what's called grounding from web search, structured output formatting data, and code execution, which can run Python and generate charts. This lesson is going to walk you through the challenges of using grounding, especially when working with numbers which need to be accurate. How you can use image recognition and convert that to structured output. And then the challenges of using code execution. Especially when AI's are confident that the code ran even though the code failed. At the end, we still get to generating a chart through the online editor and then we take it also to set up in Cursor in a local environment where we can run all the way through YOLO mode and just click around some buttons and get our chart.

Generate Charts from Current Events with Gemini's Structured Output and Code Execution

Warning: AI's make mistakes. Some of them can be _very_ costly. Terminal have access to your most private information, especially if you're using a "work computer". Please proceed with extreme caution!

Cursor's new "YOLO" feature It allows you to enter an AI prompt and then just sit back and watch as an AI will run terminal commands automatically. The AI will automatically install packages, automatically start and stop dev servers, and even check the output of the terminal commands to run subsequent terminal commands and attempt to fix them.

Traditionally, this is some of the most critical, but also some of the most boring work that a developer has to do, especially when it comes to memorizing all of the various syntax and all of their various commands that you need to know. In larger projects, it's even really easy to forget which commands are even available. So handing all this work over to an AI is a natural step in the evolution of development. But again, please be extremely cautious with these features as there are a million ways that everything could go terribly, horribly wrong.

AI YOLO - Sit Back and Watch Cursor Automatically Run Terminal Commands

GitIngest (https://gitingest.com/) is an awesome tool that allows you to batch together files from a GitHub repo in order to use them with AI tools. This lesson walks through use Git Ingest against a repository that's too large for an AI, so it configures options to narrow down to only the files that you need for your task. Then we'll use Gemini's latest Flash 2.0 model to generate a new project based on the examples we grabbed from the GitHub repo.

Use Gemini to Analyze a GitHub Repo with GitIngest

Manage column visibility in tables using [Tanstack Table](https://tanstack.com/table/v8/docs/guide/columns). Toggle each column's visibility with checkboxes, set some as non-hideable, or hide them by default. Adjust properties in the table code to control displayed columns. 

Install [Shadcn's Switch](https://ui.shadcn.com/docs/components/switch) component to render nice looking switches instead of plain html check boxes.


Hide and Show Columns with Tanstack Table

Learn to hide and show columns in an HTML table with Tanstack Table. Render switch components with shadcn. 

When comparing two visually similar websites, it can often be challenging to precisely identify the subtle differences between them. To facilitate a rapid analysis of these discrepancies, a practical technique involves leveraging Chrome's integrated developer tools to capture full-page screenshots of each site. Subsequently, these screenshots can be uploaded to a platform like AI Studio. There, the AI can analyze the images and generate a report detailing the variations. This entire process, leveraging a few quick shortcuts, can be completed in under a minute, delivering a comprehensive breakdown of the differences for efficient comparison and analysis.

Quickly Compare Two Sites Using AI Studio with Chrome Full Page Screenshots

It's fairly trivial to create a React project, but there's always a big hurdle between creating it locally and making it shareable so that someone else can run it. This lesson walks you through the process of automating creating a React project locally, creating the repository where it's going to be hosted, and creating shareable links where it can be run so that you can quickly and easily create single one-off demos and shoot them over to your friends and coworkers for sharing your code ideas in a working environment.


```bash
share-react-project() {
  if [[ -z "$1" ]]; then
    echo "Usage: share-react-project <project_name>"
    return 1
  fi

  local project_name="$1"
  local github_username=$(gh api /user --jq '.login')

  echo "Creating Vite project: $project_name"
  pnpm create vite "$project_name" --template react

  cd "$project_name"

  echo "Initializing Git repository"
  git init

  echo "Adding all files to Git"
  git add .

  echo "Creating initial commit"
  git commit -m "Initial commit"

  local codesandbox_link="https://codesandbox.io/p/github/${github_username}/${project_name}"

  echo "Adding CodeSandbox link to README.md"
  echo "" >> README.md
  echo "## CodeSandbox" >> README.md
  echo "[![Open in CodeSandbox](https://assets.codesandbox.io/github/button-edit-blue.svg)](${codesandbox_link})" >> README.md

  echo "Adding README.md to Git"
  git add README.md

  echo "Committing README.md changes"
  git commit -m "Add CodeSandbox link"

  echo "Creating GitHub repository: $github_username/$project_name"
  gh repo create "$github_username/$project_name" --public

  echo "Pushing to remote 'origin'"
  git push -u origin main

  echo "Project '$project_name' created successfully!"
  echo "GitHub repository: https://github.com/$github_username/$project_name"
  echo "CodeSandbox link: $codesandbox_link"
}
```

Automate Creating a Local React Project, GitHub Repository, and Live Hosted Demo in a Single Command

[Verdaccio](https://verdaccio.org/) is a fully featured NPM registry that you can run locally on your machine. It’s a great tool for testing your release process, running end-to-end tests, and simulating real-world scenarios like deploying packages, installing them, and verifying functionality as an end user would.

Nx includes a [generator](https://nx.dev/features/generate-code) that simplifies setting up Verdaccio. To configure it, run:

```shell
npx nx g @nx/js:setup-verdaccio   
```

This command installs the necessary NPM packages and creates a `project.json` file with a `local-registry` target. To start the local registry, open a new terminal window and run:

```shell
npx nx local-registry
```

This will:
- Launch the Verdaccio registry.
- Configure NPM to point to the local Verdaccio server at `http://localhost:4873`.

> **Note:** A `project.json` file provides an advanced way to define scripts, offering more flexibility than a traditional `package.json` for managing complex targets.

Setup local Verdaccio server to release NPM packages

Learn how to spin up a local NPM registry powered by Verdaccio to test deploy your NPM packages.

In TypeScript, developers often begin by defining the structure of their data using type definitions or interfaces, which is a powerful way to ensure type safety. However, as applications grow and become more complex, simply defining the shape of an object might not be enough to guarantee its consistent creation and behavior throughout the codebase. This often leads to situations where objects that are intended to be of a certain "type" might be missing crucial properties or have incorrect data, which can be difficult to track down and debug.

This lesson tackles the question of when and why to move beyond basic type definitions and embrace classes in TypeScript. It demonstrates how classes provide a more robust mechanism for defining object structure, enforcing type constraints, and ensuring consistent object creation. By establishing a clear blueprint for objects, classes not only improve compile-time type safety but also offer runtime benefits and better code organization, ultimately helping developers avoid common pitfalls associated with loosely structured objects in larger TypeScript projects.

Stop Avoiding Classes in TypeScript

Karabiner isn't only for your keyboard. It can also hijack your mouse buttons and enable them to be similar to layers on your keyboard, where holding down a mouse button can allow you to tap keys on your keyboard to trigger commands and macros that can completely revolutionize your workflows. For example, you can hold down the right mouse button and tap on R to go to references in VS Code. Or hold down the right mouse button and tap the left mouse button to chop up videos and Screenflow.

This completely unlocks a whole new world of possibilities and use cases for your mouse as you can hover your mouse over anywhere on the page. And just tapping keys on your keyboard allows you to trigger mouse actions, to trigger keyboard actions, or to trigger macros and applications and terminal commands. and anything that your imagination can come up with. 

Karabiner: Rethinking Right-Click as a Macro Command Center

Make an HTML table more readable on mobile devices by using the ::before pseudo-element. We add labels to each cell, so they appear like cards when the table is viewed on smaller screens. The ::before content is set using a data-label attribute for each cell to enhance mobile viewability without horizontal scrolling.



Create a mobile friendly table with the before pseudo-element

Learn to use CSS ::before pseudo-element for mobile-friendly HTML tables. Add labels to cells for enhanced readability on mobile, avoiding horizontal scroll.

Jafar Husain

Search Results