DEV Community: M. Andrew Darts

Keeping up with http state in Angular

M. Andrew Darts — Tue, 28 Feb 2023 17:07:00 +0000

Keeping up with the state of HTTP requests can be difficult and feel like too much work sometimes. Is it fetching for the first time? Is it fetching more? Is there an error? To give the user a nice experience, we should think about these things. Knowing if we are in the initial request for data can tell us to show a specific loading screen like skeleton screens. Loading more data could tell us we just need to show a small loading indicator. Knowing we have an error can tell us we need to let the user try again. Preparing for these different cases really makes it easier for us. Creating a standard structure for these states will also help us in keeping it consistent across our app. We are going to look at a simple example you could use to know the state of your requests and keep it consistent using RxJS in Angular. By creating a reusable pipe, we can reuse this across any requests. Keeping it in one place will also help add new states in the future without updating all instances.

Define the state of our request

First, let's think about which states we want to track during our request. We will start by tracking the loading and error states. We can create an interface for this. We shouldn't forget the data we are loading, so we will add a data property. The interface will look similar to this:

interface HttpState {
  loading: boolean;
  error: Error | null;
  data: any;
}

This looks good, but we do want the ability to specify a type for our data. We can achieve this by passing a type into the interface.

interface HttpState<T> {
  loading: boolean;
  error: Error | null;
  data: T;
}

If you are not familiar with this syntax, think of HttpState as a function and <T> as an argument. We can pass in a type to set data. If you want to take a closer look at this, check out https://www.youtube.com/watch?v=dLPgQRbVquo. This guy is a TypeScript wizard!

Now that we have the structure of our HTTP state, let's create an observable that follows. We are going to fetch some Pokémon from https://pokeapi.co/api/v2/pokemon.

Creating our observable

The simplest approach we could take is creating an observable that returns the structure of our interface.

this.http.get('https://pokeapi.co/api/v2/pokemon')
  .pipe(
    map((data) => ({ loading: false, data, error: null }))
  )

Now we are fetching our data and mapping it to our HttpState interface. There is one issue: we won't have any state until our request is finished. We also need our loading property to start off as true. RxJS has an operator just for this called startWith.

this.http.get('https://pokeapi.co/api/v2/pokemon')
  .pipe(
    map((data) => ({ loading: false, data, error: null })),
    startWith({loading: true, error: null, data: null}),
  )

Using the startWith operator will give us an initial value for our HttpState. Before the request finishes, our state will be {loading: true, data: null, error: null}. After the request finishes, our state will be {loading: false, data: ...data, error: null}. This is exactly what we want. There is one last thing: we need to handle the errors. Believe it or not, Rxjs has another operator to suit our needs. The catchError operator will be called if an error occurs in the observable. Using the catchError operator, we will be able to handle the error and return a new observable. Returning the new observable will give us the ability to continue without breaking the observable.

this.http.get('https://pokeapi.co/api/v2/pokemon')
  .pipe(
    map((data: T) => ({ loading: false, data, error: null })),
    catchError((error) => of({ loading: false, error, data: null })),
    startWith({loading: true, error: null, data: null}),
  )

Let's run through this line we added. We are using the catchError pipe to catch any errors in the request. The coolest part of the catchError pipe is that we can return a new observable so we don't break our stream. We are using of to create a new observable with an object that follows our HttpState interface. All we need to do is set our error property to the error that was thrown.

Putting it all together

Let's put this to use. We will be fetching some Pokémon from the https://pokeapi.co/ API and creating a component to show the different states of our request.

@Component({
  selector: 'app-pokemon',
  template: `
    <ng-container *ngIf="results$ | async as results">
      <div *ngIf="results.loading">Loading...</div>

       <div *ngIf="results.error">{{ results.error.message }}</div>

       <ul *ngIf="!results.loading && !results.error">
         <li *ngFor="let pokemon of results.data">{{ pokemon.name }}</li>
       </ul>
    </ng-container>
  `,
})
export class PokemonComponent {
    results$ = this.http.get<Pokedex>('https://pokeapi.co/api/v2/pokemon')
    .pipe(
        map((data: T) => ({ loading: false, data, error: null })),
        catchError((error) => of({ loading: false, error, data: null })),
        startWith({loading: true, error: null, data: null}),
    )

  constructor(private http: HttpClient) {}
}

export interface Pokedex {
    count:    number;
    next:     string;
    previous: null;
    results:  Result[];
}

export interface Result {
    name: string;
    url:  string;
}

In our template, we are accessing the HTTP state to display in the UI.

Telling the user we are loading some data.

<div *ngIf="results.loading">Loading...</div>

We can show our error message.

<div *ngIf="results.error">{{ results.error.message }}</div>

Display our results.

<ul *ngIf="!results.loading && !results.error">
  <li *ngFor="let pokemon of results.data">{{ pokemon.name }}</li>
</ul>

One step further

Since we want to use HttpState in other parts of our app, we don't want to write the map, catchError, and startWith pipes every time. Pipes in RxJS are a way to contain manipulations we want to apply to observables. Let's create one operator we can use anywhere we want to implement this HTTP state pattern. A pipe in RxJS is just a function that returns an observable. We don't want to create a new observable; we simply want to add some operators to the existing observable.

export function withHttpState<T>() {
  return (o: Observable<any>): Observable<HttpState<T>> =>
    o.pipe(
      map((data: T) => ({ loading: false, data })),
      catchError((error) => of({ loading: false, error })),
      startWith({ loading: true })
    );
}

this.http.get<Pokedex>('https://pokeapi.co/api/v2/pokemon')
    .pipe(withHttpState<Pokedex>())

Conclusion

UI is important. HTTP requests can sometimes be difficult to keep up with. Creating a consistent mechanism to track the state is always a win. In just a few lines, we can keep up with the state of our requests so we can reflect it in the UI or handle it as we see fit. RxJS is a powerful library but can be very intimidating at times. Hopefully, this example will make some things clearer and spark some ideas for different ways of using it to solve issues in your projects.

Thanks for reading!

Setup different profiles in VsCode

M. Andrew Darts — Fri, 20 Jan 2023 21:20:46 +0000

A few months ago I made a promise to myself to get back to teaching web development. I mainly teach beginners in HTML, CSS and JS. I love seeing their eyes light up when they create something and see it come to life for the first time. I find the best way to help is by live coding with them. However, I've had some issues with fancy VS Code extensions getting in the way, which can be distracting for both myself and the students. I've been looking into ways to have a stripped-down version of VS Code with no extensions or settings apart from the default. This way, I can mimic the student's environment when working with them. In my digging I came across VS Code profiles.

How do profiles work in VsCode?

If you're familiar with VS Code, you have probably used the CLI. The CLI takes some additional arguments that can help configure where settings and extensions will live. Looking into the documentation here https://code.visualstudio.com/docs/editor/command-line#_advanced-cli-options, you'll find two arguments that will do just this. The --extensions-dir <dir> and --user-data-dir <dir> arguments. The first argument tells VS Code where to install and keep extensions, while the second tells it where to store user data, such as editor settings. A common use of the VS Code CLI is to open a specific folder, ex. code ~/projects/js-app. We can add the arguments mentioned above to tell VS Code to reference specific directories when opening.

First let's create a directory to hold our profiles.

mkdir ~/code-profiles

Now let's create a directory for a teaching profile.

mkdir ~/code-profiles/teaching

We have our directories created let's tell VS Code to use them.

code --extensions-dir ~/code-profiles/teaching/exts --user-data-dir ~/code-profiles/teaching/data

Now you should see a fresh instance VS Code. You can change settings and update it just as you would any other time. Your settings and extensions will be saved to that profile. You can safely switch between your default and profile.

Let's make an alias for that command, it's pretty long!

alias teach="code --extensions-dir ~/code-profiles/teaching/exts --user-data-dir ~/code-profiles/teaching/data"

And that's it! You have a separate profile setup. You can add more profiles by adding more folders in the ~/code-profiles folder and specifying them.

One last thing, I added a quick alias for reseting my teaching profile. I do this so each class I can reset and start from scratch since we do install some specific extensions and it's nice to do that with the students.

alias teach-clean="rm -rf ~/code-profiles/teaching/exts && rm -rf ~/code_profiles/teaching/data"

This setup was a game changer for me and I hope you find it useful, thanks for reading!

So, your friends hate Typescript. Using Typescript without using Typescript.

M. Andrew Darts — Tue, 28 Jan 2020 14:47:22 +0000

It's fine. You like to know what is going on in your codebase. Your friends, on the other hand, are more like cowboys. Enough trying to convince them to replace that .js with a .ts. Let's try a new approach. Let's use the power of Typescript in Javascript.

First we install Typescript.

npm i --save-dev typescript

Now we need a config file for the Typescript compiler, luckily they give you a command to create an initial config file.

npx typescript --init

This will by default create a .tsconfig.json
Quickly! change that filename to .jsconfig.json before any of your friends see it.

Before we start digging into the syntax for using TS in JS we need to update this .jsconfig file.

{
...
   "checkJs": true, /* Report errors in .js files. */
...
}

We Can See The Light!

Now we can use the Typescript compiler will parse our .js files. This will give all the power of type checking. Heads up, you will not be able to use standard Typescript definitions. You will need to use specific comments, doc blocks. Here is a quick example of a function that takes in 2 strings and returns another string.

/**
 * This returns the full name.
 *
 * @param {string} first
 * @param {string} last
 * @returns string
 */
function getFullName(first, last) {
    return `${first} ${last}`;
}

Now we have type checking! You can see below we are getting an error in our editor.

Cheat Sheet

Typing a single variable.

/**
 * @type string
 */
const yarn = "yarn";

Typing an object

/**
 * @type {{ a: string }}
 */
const thing = {a: 'thing'};

Types from a module or library

/**
 * @type {import("axios").AxiosResponse<any> }
 */
let response;

Define an alias to be used

/**
 * @typedef {Object} User
 * @property {number} id
 * @property {string} name
 * @property {string} email
 */

/**
 * @type {User}
 */
let user;

Toggle checking

These should be placed at the top of the file.

// @ts-check
// @ts-nocheck

This will ignore the next line of code.

// @ts-ignore

I found this to be extremely useful. I love Typescript but understand devs who don't want to go all in. I feel this is a good middle ground to get started with little overhead. This also enforces documenting your code. The fact that you have to use doc blocks for this could be the extra push you and your team needs to add descriptions for further documentation.

Here is the Typescript docs on this topic https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html

Thanks for the read!

Intl Formatting Numbers in Javascript

M. Andrew Darts — Thu, 12 Dec 2019 15:16:07 +0000

Formatting numbers is key to many applications. This may seem like a small task to an experienced developer, but the thought of having to write these for every application I start is disheartening. Well, anyways, enough with my rant. Let's look for a library to knock this out so we can move on. We need a solution that handles percentages, currency, and many languages. Hmm? What if there was an API in the browser?

Using Intl.NumberFormat

The Intl.NumberFormat API can handle percentages, decimals, currencies and locale. Let's check it out.

Adding commas where needed

Intl.NumberFormat().format(40000); // 40,000

Need support for Spanish?

Intl.NumberFormat('es').format(40000); // 40.000

Currency is a tricky one.

Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD"
}).format(40000); // $40,000.00

Currency Again, Spanish?

Intl.NumberFormat("es", {
  style: "currency",
  currency: "USD"
}).format(40000); // 40.000,00 US$

Other Examples

I'll keep this short and sweet. I encourage you, next time you reach for a library to solve a problem, look to the platform first!

References

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat
Browser Support: https://caniuse.com/#search=NumberFormat

CSS Only Modal using target

M. Andrew Darts — Tue, 03 Dec 2019 07:07:53 +0000

Modals are everywhere

Modals are a staple in all web apps and sites. How many times have you pulled for a Javascript library for modals. Or worse, implemented your own. Probably every project you have ever done. I have recently taken the approach of only using Javascript when completely necessary. This has pushed me to explore CSS in a new way. If you need a modal in your web project it is 100% achievable with just CSS. Let's see how!

Target Pseudo Selector

You may be familiar with pseudo selectors like :before, :after, :checked, & :nth-child(n). These are super useful for every day use. There is one pseudo selector you may not be aware of. The way :target works is if the location hash matches an element it will trigger the :target pseudo selector on that element. For instance, if my url is mysite.com#article the element with the id #article will trigger the :target pseudo selector. This may seem very simple, because it is! Let your imagination go with it. There are many things you can build with this knowledge, with no Javascript.

Pro Tip

This :target pseudo selector supports CSS animations and transitions.
This means you can easily animate between states, this gives you quite a bit of power!

Below is an example of an animating modal with just CSS.

Vanilla change detection with Proxies in Javascript

M. Andrew Darts — Fri, 24 May 2019 16:12:11 +0000

In a smaller project with just a little interactivity you may want to keep up with a bit of state. If you have worked with Redux, MobX, NGRX or any other state management library your first inclination may be to use what you are familiar with. Let's be cheap and look to the platform and see what tools we can use to get this done without a library.

Proxies

Proxies are somewhat a new concept in Javascript. Proxies simply provide a way to enhance an object, some examples are listeners, dynamic properties and validation. Quick example.


const person = { firstName: "Luke", lastName: "Skywalker" };


const personHandler = {
  set: function(obj, prop, value) {
   console.log(`${prop} changed from ${obj[prop]} to ${value}`);
   obj[prop] = value;
   return true;
  }
};


const personProxy = new Proxy(person, personHandler);

personProxy.firstName = "Not Luke";
// console.logs "firstName changed from Luke to Not Luke";

In just 10 lines of code we have implemented a simple proxy that logs the changes of an object.

One small step

Let's take this a step further. Say we want to keep up with a list of notes. These notes will need to be rendered on the page. We need a simple way to update the notes array and those changes be reflected to the page without thinking. If we think about it the data is the source of truth and the rendering is a side effect. That being said let's create a Proxy factory that will take in an object to observe and an array of functions to run when the object changes.

export const observer = (obj, ...listeners) => {
  return new Proxy(obj, {
    set: function(obj, prop, value) {
      listeners.forEach(fn => fn({...obj, [prop]: value}, obj));
      obj[prop] = value;
      return true;
    }
  })
}

What is this ☝️?
This is a factory function that will create proxies and run some functions when it changes. How do I use this?

const notesObserver = observer(
 { notes: [{ text: "Do something." }] }, 
 renderNotes,
 logChanges
);

function renderNotes(notes) {
  // render notes here...
}

function logChanges(notes, oldNotes) {
  console.log(notes, oldNotes);
}

Below is a working example. As the web platform grows things will only get more exciting! Think of all the cool things that could be done with Proxies. Would love to hear thoughts and ideas!

Here is an example of the notes app working with Proxies.