-
I wish you could store
<Map>
s in Firestore without converting to/from an Object. I also wish that AngularFire implementedwithConverter()
. #firebase #angular -
Just picked up an MDN Plus subscription. developer.mozilla.org/en-US/plu…
-
Branding and Type-Tagging
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, 2022and 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.
-
Patterns App - Regex Tool for the Mac
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!
-
Empty functions.config() in Firebase Functions
After upgrading
firebase-admin
,firebase-functions
, andtypescript
and making some changes in my cloud functions to accomodate stricter types inexpress
, I had one last nagging problem. When runningfirebase serve
the functions would not load properly becausefunctions.config()
was returning an empty object. This was confusing because we make sure to create the.runtimeconfig.json
file whenever we runnpm start
(which creates the file and then runsfirebase 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 runningnpm list -depth=0
to see what the actual version offirebase-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. 🍾 🎉 -
How to possibly fix your npm globally installed binary not being found
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.
-
Using Pick<T,K> in TypeScript
I used
Pick<T,K>
for the first time today in TypeScript. I had been usingPartial<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 whatPick<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. -
Returning Observable objects from combineLatest()
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 theasync
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 usingcombineLatest()
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 theasync
pipe (<div *ngIf="cousePageData$ | async as cousePageData>
) and you would have to accessuser
andcourse
using the index on the array (cousePageData[0]
andcousePageData[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
andmap
to return the results ofcombineLatest()
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 accessuser
andcourse
using the property name on the object (cousePageData.user
andcousePageData.course
).Yay for less obsfucation! Let me know if you have any other ideas regarding this!
subscribe via RSS