202509-202511

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	# threshold converts the image into a black-and-white image, acts as a cutoff point, deciding which pixels become part of the white edges and which pixels are ignored (turned black). magick out.png -edge 1 -threshold 6% edges.png

    • morphology applies various morphological transformations to an img,

      1 2 3 4

      # Dilate expands the white shapes, making a shape bigger magick edges.png -morphology Dilate Disk:3 output.png # Thinning removes pixels in a way that reduces the size of features in the image while preserving the general shape 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, コンピュータの言葉を日本語に変えたら、外来語が多くて、本当に嫌になります