Today I Learned

VSCode Custom Label

customize display label for editor tabs and even quick search

May 1, 2024


Expo Env Load Behavior

Dev server, EAS Build, and EAS Updates

April 30, 2024

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

More info


React isValidElement

to check whether a value is React Element

February 6, 2024

ts
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


TypeScript: Function Overloads

specify a function that can be called in different ways and multiple return type

November 15, 2023

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:

ts
// 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


PNPM Store Prune

Removes unreferenced packages from the store.

October 25, 2023

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

bash
pnpm store prune

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


vite-tsconfig-paths

resolve imports using TypeScript's path mapping.

October 11, 2023

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


vite-plugin-checker

Add type checking and linting support for vite

September 5, 2023

vite-plugin-checker preview

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/


Zod refine or superRefine check

refine and superRefine check run after there's no invalid type error anymore in the base schema.

July 28, 2023

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.


FlutterShark

How to Detect if an App is Built Using Flutter

February 1, 2023

[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: structuredClone

Modern way to deep clone objects in JavaScript

January 19, 2023

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

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


Flutter: Two Finger Scroll

How to Detect if an App is Built Using Flutter

April 1, 2022

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


Flutter: Scrolling Screenshot

How to Detect if an App is Built Using Flutter

December 28, 2021

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/sozonome/status/1475856375863398402