I wish you could store <Map>s in Firestore without converting to/from an Object. I also wish that AngularFire implemented withConverter(). #firebase #angular

Just picked up an MDN Plus subscription. developer.mozilla.org/en-US/plu…

I ran across this Tweet

“Typescript is silly because it just gets turned back into typeless code when you hit compile” oh man do I have some upsetting news about C++ for you

— Jules Glegg 🏳️‍⚧️ (@heyjulesfern) March 16, 2022

and started reading the comments and ran across the idea of branding in Typescript. I did a quick search to learn more and found this interesting write up on branding and type tagging.

I am sure I have posted about this app before but it requires mentioning it again. I could not imagine writing regualr expressions without using the Patterns app on the Mac. It allows you to test your regex in an editor and see a cheat sheet. When you are done, you can get export the regex code for your language. I highly recommend it!

krillapps.com/patterns/

After upgrading firebase-admin, firebase-functions, and typescript and making some changes in my cloud functions to accomodate stricter types in express, I had one last nagging problem. When running firebase serve the functions would not load properly because functions.config() was returning an empty object. This was confusing because we make sure to create the .runtimeconfig.json file whenever we run npm start (which creates the file and then runs firebase serve). After several hours of digging around trying to figure out why this was happening I gave up for the day … or so I thought. I came back to this problem after laying in bed and came across a comment left 6 hours ago that got me pointed in the right direction. After running npm list -depth=0 to see what the actual version of firebase-tools I was using (@7.16.2). I upgraded my Angular app and my Firebase functions app.

npm install --save-dev firebase-tools@latest

This brought firebase-tools to version @8.2.0 and everything started working again. 🍾 🎉

This line in my ~/.npmrc file has been killing my sanity for longer than I want to admit.

prefix=/Users/myusername/.nvm/versions/node/v10.0.0

If your globally installed npm binaries are not being found it could be because somehow you have a prefix set like the one above. I’m using nvm and I could not figure this out. All I had to do was delete this line and my binaries were finally installing in to the correct directory. I slayed the beast just now thanks to this handy issue comment.

I used Pick<T,K> for the first time today in TypeScript. I had been using Partial<T> for a while to allow some properties of a class/interface to be used in other places in my application. After doing a lot more reading on TypeScript lately I decided to find a way to grab specific properties from a class/interface and lo and behold that’s what Pick<T,K> is for. I was going to do a write up on how I am using it but I found a post that sums it up quite nicely.

In trying to use more Reactive patterns in Angular I have been using the combineLatest() RxJs method to combine several Observables into one Observable and using the async pipe to use the data in the template. This ensures that all of the data is available in the template by using *ngIf. One thing I did not like about using combineLatest() is that it returns an array of results back based on the array of Observables you handed to it. This made accessing this data in the template look messy and made it harder to understand what data you were accessing.

cousePageData$: Observable<[User, Course]>;
const user$ = getCurrentUser(); // get the current user
const course$ = getCourse(courseId); // get course by course id
this.cousePageData$ = combineLatest([user$, course$]);

In the template this would result in array([ user, course ]) as a result of using the async pipe (<div *ngIf="cousePageData$ | async as cousePageData>) and you would have to access user and course using the index on the array (cousePageData[0] and cousePageData[1]). As you can see, this obfuscates what data is actually being accessed at this indexes.

So I set out this morning to get this cleaned up in our repository and found a pretty easy solution in RxJs, using pipe and map to return the results of combineLatest() as an object.

cousePageData$: Observable<{user: User; Course: Course;}>;
const user$ = getCurrentUser(); // get the current user
const course$ = getCourse(courseId); // get course by course id
const cousePageData$ = combineLatest([user$, course$]).pipe(map(([user, course]) => ({ user, course })));

In the template this would result in object({user: userData, course: courseData }) as a result of using the same async pipe and you can now access user and course using the property name on the object (cousePageData.user and cousePageData.course).

Yay for less obsfucation! Let me know if you have any other ideas regarding this!