til

2024/07/17

force refresh hook with a single line react

const [refreshKey, refresh] = useReducer(()=> Date.now(), 0)

sometime you just want to force refresh things

2024/07/02

merge pdf with preview on macos pdfmacos

Open PDF in Preview. This is the default viewer for iOS. If yours does not automatically open with this app, right-click on the PDF file, then select Open With > Preview.
Enable Thumbnails sidebar. If no sidebar appears on the left side of your document, then select View > Thumbnails or press Option + Command + 2 to enable it.
Indicate where to insert a secondary PDF file. Within the Thumbnails sidebar, select the page where you want to insert another PDF document.
Insert file to merge. On the toolbar, select Edit > Insert > Page from file. From the dialog box, select your file. The secondary PDF will now merge with the first.
Save the merged document. Select File, then Export as PDF. In the dialog box, rename the new document and press Save.
from: https://www.adobe.com/acrobat/hub/merge-pdf-files-on-a-mac.html
- fishy tactic to make user create account, fuck u adobe, fuck u.

2024/06/18

desoldering header pin

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

2024/06/10

Record<string, unknown> is not assignable to Interface typescript

should put a playground in here

get client bounding rect by using inverse matrix cssgraphic

2024/03/11

you should always xcode-select --install everytime you update macos macosnetworking

otherwise it will break most of the app i usually use
git disappear usually a good indication some thing went wrong

2024/01/15

rotoscoping means tracing over real life animation for more realistic result artanimation

https://en.wikipedia.org/wiki/Rotoscoping

2023/12/25

viewport meta tag html

https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#minimum-scale
instead provide a scrollbar to scroll around, this tell browser to shrunk down to fit into mobile space
no-scale usually get frowned upon. and safari actually ignore that to always allow user to zoom.
- https://github.com/w3c/html/issues/602

wifi in public doesn’t work most likely because it run out of ip addresses networking

https://twitter.com/ErrataRob/status/1739132876732674539

fractional indexing for real time sequences multiplayer

2023/12/14

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

use block/uuid instead
read more

2023/12/11

dynamic import astro component astro

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

2023/11/28

back/forward cache browserweb

https://web.dev/articles/bfcache

2023/11/23

resetting suspense with keys reactssr

https://react.dev/reference/react/Suspense#resetting-suspense-boundaries-on-navigation
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

2023/11/22

narrowing with includes and is typescript

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

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 uihtml

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

2023/11/16

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

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 finance

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

2023/11/11

MAYA rule design

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 viteastro

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 cloudflare

2023/11/04

reverse lookup attribute in pull dataloglogseq

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 node.js

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 macos

before
after

2023/04/02

scroll anchoring with css css

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

prevent content from expanding grid items css

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

2023/03/30

use (not template) to exclude template from queries logseq

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 svg path works svg

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

how bezier curves work mathcsssvg

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

2022/06/29

reset responsive to default safari

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 typography

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

everything is pretty if it have enough pixel typographydpi

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

monitor events with chrome dev tools devtools

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

2022/05/03

border radius can do something like this css

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

2022/05/01

json stringify and parse jsonjavascript

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 next.js

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
- issue some http/status code like 301, 302, 307, etc,…
- reflected on the url bar in the browser

2022/04/09

only need /api folder to serve api function in node next.js

2022/04/06

form attribute formhtmlweb

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

2022/03/30

colocation in react 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 logseq

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

2022/02/23

yup validation for simple object, simple form object-validationyup

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,
          },
        }),
        {},
      ),
    };
  }
};

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

2022/02/22

safely remove a key, set it to undefined javascriptjson

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

timedate-local html

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

today i learned