 Courses from Jorge Vergara

Changing the default styles of Ionic components can be a bit tricky since the components all use the shadow DOM, meaning we can't write CSS that targets the components inside the shadow DOM directly.

Ionic has custom CSS variables in each component that allows us a lot of customization, and when those aren't enough, they expose CSS parts of the underlying HTML elements that form Ionic components.

For the case of a button you can target the underlying HTML `<button>` tag:

```css
ion-button {
  &::part(native) {
    // This CSS affects the <button> tag.
  }
}
```

Use Native CSS Parts to Access the Shadow DOM in an Ionic Component

Working with the Shadow DOM can be tricky as it scopes styles so normal CSS classes can't target the elements within. In this tip you'll learn a few approaches to styling elements that are within the Shadow DOM.

When you work with observables in Angular, your templates can get a bit messy because you find yourself passing the `async` pipe everywhere and then need to keep track of it.

You can see in this template that we have a lot of `async` pipes and we need to keep track of them.

```html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      {{ title$ | async }}
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <p>
    I'm {{ name$ | async }} and I'm a {{ role$ | async }}, this is a random list of Pokemon:
  </p>
  <ion-list lines="none" class="ion-no-padding ion-no-margin">

    <ion-item *ngFor="let pokemon of (pokemon# | async)">
      <ion-label>
        {{ pokemon.name }}
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>
```

We can clean our template up a bit by using a view model in your template We'll do this by combining all the observables in your class into one single observable.

```typescript
// home.page.ts
export class HomePage {
  private readonly http = inject(HttpClient);

  readonly title$ = of('Combining Observables');
  readonly name$ = of('Jorge Vergara');
  readonly role$ = of('Software Developer');

  readonly pokemon$ = this.http.get<PokeResponse>('https://pokeapi.co/api/v2/pokemon').pipe(
    map(response => response.results)
  )

  // add this observable to combine all the observables into one
  readonly vm$ = combineLatest([this.title$, this.name$, this.role$, this.pokemon$]).pipe(
    map(([title, name, role, pokemon]) => ({title, name, role, pokemon}))
  )
}
```

Now back in our view we can move everything into an ng container and reference the view model.

```html
<ng-container xngIf="vm$ | async as vm">
  <ion-header [translucent]="true">
    <ion-toolbar>
      <ion-title>
        {{ vm.title }}
      </ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content class="ion-padding">
    <p>
      I'm {{ vm.name }} and I'm a {{ vm.role }}, this is a random list of Pokemon:
    </p>

    <ion-list lines="none" class="ion-no-padding ion-no-margin">
      <ion-item *ngFor="1let pokemon of vm.pokemon">
        <ion-label>
          {{ pokemon.name}}
        </ion-label>
      </ion-item>
    </ion-list>
  </ion-content>
</ng-container>
```

 Simplify Angular Templates that Use Observables with View Models

 Learn how to use view models in your Angular templates to handle multiple observables in a cleaner and more organized way, reducing the need for multiple async pipes.

A common issue when working with Angular components is forgetting to pass all of the inputs that the component needs.

Angular 16 introduced some checks for us to help us with this issue.

I can go into any of my component and say declare required inputs.

```javascript
export class PersonComponent {
  @Input({ required: true }) person: string = 'Default Person';
}
```

Now when this component is used anywhere, angular will error out if the input is not provided.

Avoid Unexpected Errors in Angular 16 with Required Attributes

Improve the reliability of your Angular components by leveraging required inputs and eliminating the chance of omitting critical data.

Bite-size video tutorials for badass web developers.

egghead

Use native CSS parts to access the shadow DOM in an Ionic component

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Get started building web applications with Angular and Firebase.

In this course, you'll learn how to set up and use Firebase in your Angular applications using the AngularFire library.

We choose the AngularFire library because it is an official library created by the Firebase and Angular teams to work better with Angular.

It helps you by wrapping everything into observables and helps update zones. 

By the end of this course, you'll be able to build web applications using Cloud Firestore as your database, Firebase Authentication as your Auth system, Cloud Storage to save files, and Firebase Hosting to deploy your applications to the web.

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Build Full Stack Web Applications with Angular and Firebase

firebase

The last step we'll take is to make our application public.

We'll use the Angular CLI to generate a production build of our application, and then we'll use the Firebase CLI to deploy our application to Firebase hosting servers.

Firebase hosting is a great choice for us because Firebase Hosting will incorporate the services that we use in the app by default.


Deploy an Angular Web Application Powered by Firebase to Firebase Hosting

We want to secure our file storage so not just anyone can upload files to our Cloud Firestore.

We'll go through Cloud Storage Security rules to add rules and restrictions to our bucket server-side. You'll notice that the default rules for storage are the same as the database in that they are open to anyone for 30 days.

There are a few restrictions that we will implement:
    - Only allowing authenticated users to upload files.
    - Restrict the size of the files we want to upload.
    - Restrict the type of files we want to upload. (__i.e: only accept images or pdfs__)


Restrict File Uploading to Firebase Cloud Firestore with Cloud Storage Security Rules

Users can now see that files are attached to tasks but they can't do much with that. We need to let users be able to download the files so we'll do that in this lesson. 

We'll create a button for users to download the files they have in their tasks. We take a JavaScript first approach here by creating an anchor tag and adding all of the properties we need to allow for a download.


Download Files from Firebase Cloud Storage in Angular

Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.

ionic

Now that file uploading works, we want to actually show that a task has files associated with it. To do this we will need to update the task object with a file property that we'll push files too.

In this lesson, we'll use Cloud Storage methods like getDownloadUrl() to get the file's download URL from our bucket.

Then we'll add that file's information to our task and persist it in the database to show the list of files in a task to the user.

While we do this, you'll see how we can easily add a spinner when files are being uploaded using Ionic loadingController.


Save and Display Tasks Files Utilizing Firebase Cloud Storage getDownloadUrl

We want our users to have more power by uploading and downloading files to the tasks they create.

In this lesson, we'll start creating the functionality that will allow our users to upload files. I went ahead and created the UI and click handler for this feature so we can focus on the actual file uploading.

We'll use the browser's `<input type="file">` to select files from our device and then we'll use Cloud Storage methods to upload the file to our storage bucket.


Upload Files to Firebase Cloud Storage with AngularFire storage uploadBytes

Our Security Rules are getting repetitive with all the logic that we've copy and pasted for the several actions we currently have.

In this lesson, we'll go through our security rules and extract the duplicated rules into functions that we can call.

With this approach, we can eliminate the copy/pasting and make our functions a bit more readable.


Refactor Firebase Security Rules to Use Functions for Easier Reading

Currently our Firebase Security Rules aren't as secure as they could be. When it comes to tasks, we are comparing the request's user on the task to the requests auth id. If someone intercepted this request and changed the ids here they could get away with it.

In this lesson, we'll go through our security rules and create a different set of security rules depending on the action the user is performing. For tasks specifically we will check the documents user id against the request user id.

We'll take things a step further as well and write different rules if a user is trying to create, delete, or update a task document.


Break Up Firebase Security Rules Into Different Actions Depending on Operation Performed

All the security we've added to our application has been client side. In a production app this isn't enough, we want to add security to our database directly.

We'll start securing our application's database with Firestore Security Rules.

We'll write security rules to prevent unauthenticated users from accessing our database, and then we'll add extra rules so that only a document's owner can access that document.


Secure your Firestore Data with Security Rules

Now that tasks are actually associated with a user in our database, we want to only show a user their own tasks.

To do this we'll revisit our task list and make some changes to use the `query()` and `where()` methods to filter our list before we get it from the database.

We'll learn how to pass our user's ID to a query and fetch only the tasks that belong to that user. Because Firebase uses Observables, you'll also see how we handle and change observables in Angular.


Query and Filter Documents from Firestore by userId with query()

Now that we have users in our application, we need to start associating them with tasks that are created. We'll revisit our task object and add our currently logged-in user's ID to our task object so that we can show users only their tasks. This is done through the Firebase Auth module.

Store the User's ID in the Task Documents That are Saved in Firestore

User authentication has been implemented but you'll notice if you navigate to any route in the app you are free to do so whether you're logged in or not. Let's fix this.

`@angular/fire` gives us a feature that is prepared to handle protected routes: the authentication guard.

We'll add that guard to our routing module to protect our tasks page, and redirect unauthenticated users to the login page.


Show Protected Pages only to Authenticated Users with AngularFire Authentication Guard

A scenario you will inevitably run into is users needing to reset their passwords for security reasons or they lost and forgot their password.

We'll learn how to send our users an email to reset their passwords, after we send the email, we'll display a notification alert with ionic alertController to the user and redirect them to the login page.


Send a Password Reset Email Using Firebase Authentication with sendPasswordResetEmail

We'll learn how to create new users/let users sign up in Firebase using our application. The Firebase auth store gives us `createUserWithEmailAndPassword` that will create a user and return a `userCredential` for us to store in our database.

We'll also learn how our database and authentication system aren't connected by default and we'll create a user profile document in the Firestore database. The process here will be very similar to how we created the tasks collection.


Create New Users in Firebase Authentication and Store within the Database

In our application, we have a login page but it currently doesn't do anything. We need to let users login, and after successful login, we'll redirect them to the tasks page.

To do this, we'll inject the AngularFire Auth dependency and call `signInWithEmailAndPassword` when the user clicks the login button. 


Sign in Users to Your Application with AngularFire Auth

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.

Any app of a decent size has event flows and messages being passed around. At a certain point it becomes complicated to explain it through prose and you want to turn towards diagrams. Now setting aside the time to create diagrams that accurately describe what's happening in your codebase can be quite time consuming. Luckily, with today's AI tools, we can now just do basic walkthroughs with rough recordings over codebase dictating what's going on along the way and then upload that to tools like AI Studio and then ask it to generate diagrams in a text-based format such as Mermaid that will then generate the flowcharts and diagrams for us. So this video walks us through this process of recording a rough video, uploading it to AI Studio and then asking AI Studio to generate the proper Mermaid diagram syntax.

Generate Mermaid Flow Chart Diagrams with Gemini 2.0 from Rough Screen Recordings

I'm a diehard Karabiner user and anytime I start doing something repetitively I always move it into my Karabiner configuration. Sometimes I'll fall into scenarios where I want to trigger a command, but I also want to know if that command succeeded or failed. Since Karabiner can trigger any command, setting up the command is fairly straightforward, but knowing whether it succeeded or failed became much more difficult. Luckily for me there is a package called terminal-notifier that you can install from homebrew and you can pipe the output of your command to terminal-notifier. And have a seamless way of triggering your keyboard shortcut which runs a command and you can be notified of the results.

Use Karabiner to Trigger a Terminal Command and Get Notified of the Results

There are a lot of scenarios when inspecting a site in Chrome where you don't want any click events to fire and you don't want any scripts to run. Or maybe something is animating in and out of the page and you want to capture it at a certain moment. This is a great use case for pausing script execution, which is kind of using the debugger manually by going into the Chrome DevTools and the Sources tab and clicking the pause button to essentially pause the entire page. This will give you a chance to inspect any of the elements and styles you want to inspect. And you don't have to worry about fire and click events or anything that might interrupt your investigation into the elements and styles that you want to find.

Pause Script Execution in Chrome to Easily Inspect Elements

Gemini 2.0 has a context window of a million tokens, and this means that you can upload hundreds of files and allow it to inspect and analyze massive refactors across entire code bases. 

This lesson demonstrates concatenating an entire code base into a single file and then uploading it to AI Studio. Once within AI Studio, we ask it to find the types of tasks that it can evaluate for us. Then we select one of the tasks and ask it to generate instructions for that task. Once those instructions are complete, we then turn them over to Windsurf's Cascade agent, and we allow Windsurf's Cascade to do all of the work for us as we sit back, relax, and let the AI do our jobs.

Jorge Vergara

Search Results

Use Native CSS Parts to Access the Shadow DOM in an Ionic Component

Simplify Angular Templates that Use Observables with View Models

Avoid Unexpected Errors in Angular 16 with Required Attributes

Use native CSS parts to access the shadow DOM in an Ionic component

Simplify Angular Templates that Use Observables with View Models

Avoid Unexpected Errors in Angular 16 with Required Attributes

Build Full Stack Web Applications with Angular and Firebase

Deploy an Angular Web Application Powered by Firebase to Firebase Hosting

Restrict File Uploading to Firebase Cloud Firestore with Cloud Storage Security Rules

Download Files from Firebase Cloud Storage in Angular

Save and Display Tasks Files Utilizing Firebase Cloud Storage getDownloadUrl

Upload Files to Firebase Cloud Storage with AngularFire storage uploadBytes

Refactor Firebase Security Rules to Use Functions for Easier Reading

Break Up Firebase Security Rules Into Different Actions Depending on Operation Performed

Secure your Firestore Data with Security Rules

Query and Filter Documents from Firestore by userId with query()

Store the User's ID in the Task Documents That are Saved in Firestore

Show Protected Pages only to Authenticated Users with AngularFire Authentication Guard

Send a Password Reset Email Using Firebase Authentication with sendPasswordResetEmail

Create New Users in Firebase Authentication and Store within the Database

Sign in Users to Your Application with AngularFire Auth