Kaizen Today I Learned by Ville Säävuori

Posts tagged javascript

Typing Firebase Database Queries With TypeScript

Document databases like Firebase work great with JavaScript but they can get really messy really fast if you’re not very strict with your data models. TypeScript is the perfect companion here and luckily the Firebase database functions can be easily typed in a way that will help you to keep your data consistent.

· Read the full article →

Narrowing unknown type in TypeScript

Type narrowing is one of the most useful and powerful features of TypeScript. Sometimes, however, it can be a bit too complicated. Consider this simple function that uses Firebase: export const useSignOut = async () => { try { const auth = getAuth() await signOut(auth) } catch (err: any) { alert(err.

· Read the full article →

Optimize vue-devtools performance

Vue devtools is a must-have tool for Vue development but the default settings might hurt your app performance. Current vue-devtools (v6.0.12 at the time of writing) has two tabs: Inspector and Timeline. The Timeline tab has both Component events and Performance calculations on by default which might severily the performance of your app if it happens to send mouse events or other events that happen frequently.

· Read the full article →

Adding Simple Search to Hugo

I’ve beeen looking for search options for static sites for a while now and haven’t found anything I’d really like. I wanted to test out buildinga native Web Component with Vue and Vite but in the end I decided to use native Vue component instead. You can test the end result on the homepage.

· Read the full article →

Weeknotes 2022/2 - Chores, and the colors / faker incident

The problem with projects with NPM dependencies is the ridiculously fast pace the packages keep updating. JavaScript / Node world has an unique way of creating and depending on tiny community packages and the number of dependencies even in a small project can be enormous. Using automated services like Dependabot only takes you so far, you just need to keep weeding the projects manually from time to time.

· Read the full article →

My Recommended JS/TS Packages - Alleviate Choice Paralysis

One of the challenges of the JS ecosystem is the outrageous number of available packages. This is a continuously maintained list of useful and preferred JavaScript/TypeScript packages that I have personally worked with. A recommended package on this list has to have: Good documentation Healthy maintenance status Modern codebase (ie. support for treeshaking etc.

· Read the full article →

TIP: Hiding and Showing Admin Links

Publicly visible links to site admin/staff functionality is bad practice that is surprisingly common even today. Besides being harmful security-wise, it’s also bad for usability as it adds unnecessary navigation possibilities to non-admin users. Thing is, it’s also very easy to fix. Here’s an oneliner that I’ve used in many projects:

· Read the full article →

Creating Custom Ckeditor5 Builds

I don’t quite understand how some problems that feel very commonplace and like they would obviously be solved by browsers a long time ago are still in very much flux and unsolved in 2021. One of those things is basic image handling in WYSIWYG editors. By basic image handling I mean aligning, resizing, and uploading.

· Read the full article →