til

today i learned

collection of things i learn "today", revised & expand sometime not today.

2023/12/14

it is not possible to query by db/id in logseq

use block/uuid instead
read more

2023/12/11

dynamic import astro component

const {default: Component} = await import(`../d/${name}.astro`)
---
<Component/>

2023/11/28

back/forward cache

https://web.dev/articles/bfcache

2023/11/23

resetting suspense with keys

using <Suspend> causing trouble for old router of next.js
specifying key outside of suspense boundaries help reseting it and things magically work again
react suck
https://react.dev/reference/react/Suspense#resetting-suspense-boundaries-on-navigation

2023/11/22

narrowing with includes and is

TODO should try and document this
- expands and something
- satisfies, is, T extends Interface, etc..
- step by step to create pseudo translation utils
- support autocompletion with typescript

2023/11/20

free as in free beer is different than free as in free speech

https://opensource.stackexchange.com/questions/620/what-is-the-difference-between-free-as-in-beer-and-free-as-in-speech

2023/11/19

popover is native to the web now

readmore: https://developer.chrome.com/blog/introducing-popover-api/

2023/11/16

disable modal clicking outside using onPointerDownOutSide={e=>e.preventDefault()}

read more: https://github.com/radix-ui/primitives/discussions/1997

2023/11/15

there’s a processing fee at least 1.1% for online transaction like steam, spotify, aliexpress

1% of the amount + 10% VAT of that 1%

2023/11/11

MAYA rule

abbreviate for “Most Advance. Yet Accessible”

2023/11/09

vite eval the whole file when import, so import things using vite before init vite is not recommend

such as bundle both astro:integration and astro components into single index.ts file

2023/11/07

deploying by webhook using cloudflare and apple shortcut

2023/11/04

reverse lookup attribute in pull

https://docs.datomic.com/pro/query/pull.html#reverse-lookup
useful to perform nested query to find children of parent in the search

2023/04/10

use process.cwd() to get current directory

2023/04/08

how to rotate a vector

{{video https://www.youtube.com/watch?v=7j5yW5QDC2U}}

2023/04/06

scaling canvas properly

https://devlog.disco.zone/2016/07/22/canvas-scaling/
use ctx.translate(0.5, 0.5) to avoid 0.5px line at border

2023/04/03

show scrollbar options

before
after

2023/04/02

scroll anchoring with css

https://css-tricks.com/books/greatest-css-tricks/pin-scrolling-to-bottom/

prevent content from expanding grid items

https://stackoverflow.com/questions/43311943/prevent-content-from-expanding-grid-items

2023/03/30

use (not template) to exclude template from queries

2022/09/13

tab vs space

use tab always
- can always use tabstop, tabsize to change the content
- ways easier to read
- example
  - a codebase with 2 space as 1 tab can not convert to 4 space or 8 space
  - but with tab, things can change easily, plus accessibility

2022/06/30

how bezier curves work

https://twitter.com/DanHollick/status/1458498461167280130

how svg path works

https://twitter.com/DanHollick/status/1542176615139921921

2022/06/29

reset responsive to default

https://apple.stackexchaange.com/questions/288008/how-do-i-reset-to-default-window-sizes-in-macos-safaris-responsive-design-mode#:~:text=The%20responsive%20design%20mode%20can,plist%20.

2022/06/03

punctuation of parenthesis

When writing in English (not a programming language or math), the rule is: put a space before the opening parenthesis, and either a space or a punctuation mark after the closing parenthesis.

2022/05/09

monitor events with chrome dev tools

https://developer.chrome.com/blog/quickly-monitor-events-from-the-console-panel-2/ #devtools #debug

everything is pretty if it have enough pixel

https://wiki.archlinux.org/title/Font_configuration
font hinting is not needed when your screen have over 300dpi or ppi
- that’s why kindle e-ink only need 300ppi
https://www.sven.de/dpi/ calculating dpi

2022/05/03

border radius can do something like this

https://9elements.com/blog/css-border-radius/

2022/05/01

json stringify and parse

empty string is not a valid JSON, hence JSON.parse("") will throw error
- https://stackoverflow.com/questions/30621802/why-does-json-parse-fail-with-the-empty-string

2022/04/23

getStaticProps getStaticPaths can not be re-export like NextPage as it would break nextjs’s treeshaking

https://nextjs.org/docs/messages/module-not-found#the-module-youre-trying-to-import-uses-nodejs-specific-modules

rewrite vs redirect

rewrite only happen on server, the client or the browser don’t know about this
redirect happen in both server and client
- reflected on the url bar in the browser
- issue some http/status code like 301, 302, 307, etc,…

2022/04/09

only need /api folder to serve api function in node

2022/04/06

form attribute

form attribute to an id in <form> tag
form attribute for form field
useful for design parentless form

2022/03/30

colocation in react

Place code as close to where it’s relevant as possible
https://kentcdodds.com/blog/colocation

2022/03/03

inspect block data in logseq

:view (fn [result] (for [r result] [:pre (pprint r)]))

2022/02/23

yup validation for simple object, simple form

export const validate = async (
  data: PromoCreateCode,
): Promise<boolean | Error> => {
  try {
    await schema.validate(data, {
      abortEarly: false,
    });
    return true;
  } catch (errors) {
    return {
      errors: errors.inner.reduce(
        (allErrors: Error, currentError: ValidationError) => ({
          ...allErrors,
          [currentError.path as string]: {
            type: currentError.type ?? 'validation',
            message: currentError.message,
          },
        }),
        {},
      ),
    };
  }
};

readmore:
- https://github.com/jquense/yup#validationerrorerrors-string—arraystring-value-any-path-string
- https://react-hook-form.com/advanced-usage/#ErrorMessages
this small snippet will aggregate error into its object path and emit message and type for the schema.
yup context and condition validation #yup
- https://github.com/jquense/yup#schemawhenkeys-string—string-builder-object—values-any-schema—schema-schema

2022/02/22

timedate-local

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local
work with system locale
- AM/PM according to system clock

safely remove a key, set it to undefined

do not use delete to delete field
JSON.stringify will not serialized undefined field