0921

• vibe coding, coding with a good vibe, where you’re not stressing about bugs or edge cases too much but rather enjoying the problem-solving process

• trying use mcp tool and playwright to guide llm to write a page and refine the style of page until the page machs the design picture

  • It’s a long and pretty complex workflow. it works best for pages with a simple style or ones that closely follow UI frameworks.
  • work terribly for custom pages. modules like claude-3.7, chatgpt-5 are must blind rebatos, they are really struggle to identify details like color/border/shadow, and sometimes can’t even detect them at all

• Node versions older than 15 do not work on apple silicon machines (ARM) because ARM architecture is not supported.

  • temporary setting: arch -x86_64 zsh // a zsh shell under Intel (x86_64) architecture emulation

0931

• using imagemargick to process img for friendly llm img analysis
  • add a grid layer for better size measurement, but still not accurate, with about a 2px deviation
  • imagemagick
    • resize the image to match the design size
      • the user’s image could be a screenshot or downloaded from the design platform, so the dimensions might not match the design size exactly.

        1	magick input.png -resize 1030 input1030.png

    • to convert an image to linear grayscale

      1	magick in.png -colorspace LinearGray out.png

    • applies an edge detection filter

      1 2	magick out.png -edge 1 -threshold 6% edges.png

    • morphology applies various morphological transformations to an img,

      1 2 3 4

      magick edges.png -morphology Dilate Disk:3 output.png morphology + Thinning = reduce unnecessary pixels

1008

• got a new board that’s more flexible, and surprisingly it can stay stable. it looks pretty, goes well with my red shoes. it’s very very smooth, and i can feel graceful for the first time

• 恍惚, a dazed feeling, a sense of dreaminess, a state of mild trance or detachment

• display omit for multiple lines

  1 2 3 4

  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;

• drag an image from another web page or an app, not a local file:

  • The dataTransfer.files will be empty (because the browser can’t expose file data for security reasons).
  • use getData to get the url, e.dataTransfer.getData(‘text/uri-list’);

1116

• kelly criterion

  • b: represents the ratio of profit to your stake if you win.

    • If b is large (you win a lot when you win), Kelly will tell you to bet more.
    • If b is small (low reward), Kelly will tell you to bet less.

  • p: probability of winning

  • q: probability of losing, 1 - p

    kelly criterion = (bp - q) / b * captial
    for example:

    • p: 0.6, q: 0.4, b: 1, kelly criterion is 0.2
    • captial: $100, bet $20 at each time.
      • if win, captial becomes $120 and the invest capital is $24 at the next time.
      • if lose, captial becomes $80 and the invest capital is $16 at the next time.

• css relative color

  • it makes easy to generate relative colors, like darker / lighter

    Hue (°)	Color
    0°	Red
    60°	Yellow
    120°	Green
    240°	Blue
    300°	Purple

  • color-mix(in srgb, color1, color2 percentage), color module, color1, color2 the percentage of mix level
  • hsl, hue/staturation/lightness, hsl(from red calc(h + 90) c h)
  • lch, lightness / chroma / hue, lch(from red calc(h + 90) c h)
    -hsl is calculated from pure RGB. whereas hcl fixs uniformity issues of hue / chroma / lightness. if a single color component is changed, hcl will produces a smoother visual transition
    • staturation vs chroms, staturation is compared with pure gray. while chrome is compared to a neutral gray of the same lightness
  • OKLCH, the human vision 2.0 of hcl
  • xyz, red/green, brightness, blue/green

1123

• the three views
• obsession with perfection
• 1117, 間違ったパスワードを入力したら、カードがロックさまでした
  • たら, conditional form, “after i did …”, slightly different from ので/から
• 1118, キャッシュカードと身分証を持ってくるのを忘れたので、お金を借りなければなりません
  • 持ってくる => 持って + くる => hold + come => to bring (something here)
  • みぶんしょう
• 1119, やっぱり、銀行の窓口でカードを解除しました
  • まどくち
  • かいじょ
• 1120, 明るくて晴れた、とても気持ちのいい日です
• 1121, コンピュータの言葉を日本語に変えたら、外来語が多くて、本当に嫌になります
• 1123, 巻く
  • 髪が巻かれました. my hair got curled, passive form
  • 髪を巻いてもらいました. i got my hair curled

1130

• 1124, 顔認証の画面を見て笑ってしまう。なんかバカで可愛かった
  • かおにんしょう、がめん
  • バカ, silly or dumb, and comes not from english
• 1125, 人と人の格差は思ったより大きいです
  • かくさ
• 1126, 新しいスポーツインナーがちょっときつい、でも、けっこうかわいい
• 1127, 蒸しパンを食べたいてす
  • むす
• 1128, ノードパソウコンを持たなければいけないから、重くてスケートボードに乗れない
  • のる => のられる => 乗れる(omit ら) => ない形
  • スケートボードする
• 1129, 友達と飲んで、雰囲気がとてもいいです
  • ふんいき
• 1130, 今日は具合が悪くて、体がだるくて不快だ
  • ぐあい
  • からだ

0803

• learn from deepwiki-open code and go though rag process
• CAT-TV

0810-0817

• develop a mcp serve to migrate project from a inner-bundle framework to vite
• learn playwright, and trigger it in that mcp serve for testing
  • i‘v learned much about mcp server and playwright. there should be a blog to record this. but the company project is closely involved
  • i guess the test part powered by playwright can be separated out

0824

• working and working
• CAT-TV
• the weather is being annoying this week. like the weather is running on a loop task set by God, ten minutes of rain and then finish, and few hours later start again. God : oh, just wanna keep the ground wet, isn’t that nice? you’re welcome!🙃🙃🙃

0829

• zustand
• playwright actions
• CAT-TV