Small Wins - A Seamless Bug Fix

earlman — Fri, 04 Mar 2022 21:08:32 +0000

So I was having an issue where my app wouldn't load once the user logged in.

The new "Timeline View" in Vuex Dev Tools was a huge help in dialing-in on where the problem was. I've been using it all week and it's incredibly well-built.

I initially thought that the route was being loaded before the AppConfig and UserConfig had a chance to be pulled from firebase. Looking at the code, I realized that I wasn't even pulling them from Firebase at all 😅 More specifically, I pulled the config in on the initial page load, but not when the user logged in.

I really love the first time I'm able to implement a piece of knowledge seamlessly. In this case, it was the Promise.all function. In this case, I wait for both fetchAppConfig and fetchUserConfig to load before updating the router:

note: ToastError and ToastNotifications are just wrappers for Buefy component

I also made sure to notify the user before calling the promises. It could take a second to load the database and it might confuse users if there's no response on the page to clicking "Log In" button.

Final solution looks and feels great 😊

TIL: `font-weight: 1 999;` is a thing

earlman — Fri, 04 Feb 2022 18:47:36 +0000

There's no way anybody uses variable fonts without just setting:

@font-face { 
   font-weight: 1 999; 
}

...right? It's the same .woff2 file in the end so it seems like it should be the same performance. Otherwise, you gotta do the @font-face rules for every single declaration:

@font-face { 
   font-weight: 200; 
}
@font-face { 
   font-weight: 400; 
}
//...etc

Just learned that the 1 999 syntax existed today in a tiny section on a blog post on Digital Ocean. There's some better examples on there. Seems useful 😝

DEV Community: earlman

Small Wins - A Seamless Bug Fix

TIL: `font-weight: 1 999;` is a thing