Today I Learned

I sometimes put stringified JSON and has bunch of env variable keys. It’s hard to know when there’s an issue within the env value unless we really understand the whole env vars we define and where its used beneath the app.

Astro v5 has env validator built in. t3-env lib also serves this purpose. It’s also possible to write custom validator and run it as custom script.

I look for seamless validation on my vite app and glad that there’s a vite plugin for it: @julr/vite-plugin-validate-env. It runs on dev & build time only and support zod.

We can remove the logs using the clean command:

biome clean

References:

• https://biomejs.dev/guides/integrate-in-editor/#daemon-logs
• https://x.com/birch_js/status/1835305326083772641

More info

References:

• https://x.com/nextjs/status/1783508313113800930
• https://code.visualstudio.com/docs/getstarted/userinterface#_customize-tab-labels
• https://code.visualstudio.com/updates/v1_88#_custom-labels-for-open-editors

Expo has different behavior on how it loads env variables on dev server, EAS Build, and EAS Updates

More info

import * as React from 'react';

type SomeComponentProps = {
  description: React.ReactNode;
}

const ComponentProps = ({ description }: SomeComponentProps) => {
  if (React.isValidElement(description)) {
    return description;
  }

  return (<Paragraph>{description}</Paragraph>);
}

References: https://react.dev/reference/react/isValidElement

We can define multiple function declarations to define different signatures (parameters/return types) and TypeScript will infer the right signature based on call arguments.

Some gotchas:

• Implementation should narrow types based on overload
• Order matters: put most specific overloads first

Use Cases:

• Reusable functions with different types
• Library functions mimicking overloads
• Gradual typing - multiple signatures

Example:

// Overloads
function getString(opts: { fallback: string }): string;
function getString(opts: {}): string | undefined;

// Implementation
function getString(opts: {}): string | undefined {
  // ...
}

// Usage
const str1 = getString({ fallback: 'hello' }); // string
const str2 = getString({}); // string | undefined

References: TypeScript Handbook

There’s a way to easily clean up pnpm store, especially for unreferenced packages.

pnpm store prune

References: https://pnpm.io/cli/store#prune

I used to manually define how to resolve import through vite config resolve even though I already define path mapping in tsconfig.json. By using this plugin, it will read the tsconfig path mapping.

References: https://www.npmjs.com/package/vite-tsconfig-paths

I was looking for how to improve my vite react project by showing type-check or lint error like CRA’s error overlay. Then I found a plugin called vite-plugin-checker. The configuration is pretty straightforward.

References: https://vite-plugin-checker.netlify.app/

I sometimes got stuck when doing validations through refine or superRefine. Turns out refine and superRefine checking is run after there’s no more invalid type error on the base schema. It’s kinda expected but idk why is this not documented well.

[Android OS] FlutterShark able to detect and list down which app being installed in device are built using flutter. It will give these informations:

• Flutter SDK version
• Dart SDK version
• Packages being used

JavaScript has built-in function called sctructuredClone which able to deep clone objects.

References: https://www.builder.io/blog/structured-clone

One of the quirks that remain apparent in apps built using flutter is when you scroll inside the app using two fingers. It will scrolls twice as fast.

References: https://github.com/flutter/flutter/issues/11884

Try to take screenshot inside the app when opening a long vertical pages (list pages etc). If there are no scroll option when taking the screenshot, highly possible its built using flutter.

https://twitter.com/agstnsnathaniel/status/1475856375863398402