script ដែលខ្ញុំគួរសរសេរមុនគេ

នៅថ្ងៃទី ២៩ ខែតុលា ខ្ញុំបានបង្កើតគេហទំព័រនេះក្នុងមួយថ្ងៃ ជាមួយ Claude។ ការងារនីមួយៗមាន thread ផ្ទាល់ខ្លួន៖ ទំព័រអំពីខ្ញុំ ទស្សន៍ទ្រនិចក្រដាស ទំព័រគម្រោង និងការបកប្រែជាភាសាខ្មែរ និងអេស្ប៉ាញ។ ដល់ពេលល្ងាច pull request ចំនួន ៣៣ ត្រូវបាន merge រួចហើយ។

នៅចុងថ្ងៃ ខ្ញុំបានសុំឱ្យ Claude អានគ្រប់ thread ឡើងវិញ ហើយរកការងារតូចៗដែលចេះតែវិលមកវិញ។ មានច្រើនណាស់ ហើយស្ទើរតែគ្មានមួយណាត្រូវបានកត់ទុកនៅកន្លែងដែល thread ក្រោយៗអាចយកមកប្រើវិញបានទេ។

ការងារដដែលៗនៅគ្រប់ thread

គេហទំព័រនេះមានច្បាប់មួយដែលធ្វើឱ្យវាមើលទៅដូចទំព័រសៀវភៅកត់ត្រារបស់ខ្ញុំ៖ អក្សរគ្រប់បន្ទាត់ស្ថិតនៅលើបន្ទាត់ក្រដាស ដែលនៅឃ្លាតពីគ្នា 32px។ មុន pull request ដែលរៀបចំវា មានតែ ៧២ ក្នុងចំណោម ១៥០២ បន្ទាត់អក្សរប៉ុណ្ណោះ ដែលស្ថិតលើបន្ទាត់ក្រដាស។ thread ដែលជួសជុលវាបានសរសេរ script វាស់ផ្ទាល់ខ្លួន ពិនិត្យ ១៦ ទំព័រ ក្នុងទទឹងអេក្រង់ ៦ ហើយបន្ទាប់មក script នោះក៏បាត់ទៅជាមួយ session។

thread នីមួយៗបន្ទាប់ពីនោះ ត្រូវបង្ហាញថាវាមិនបានរុញអ្វីចេញពីបន្ទាត់ទេ ហើយម្នាក់ៗធ្វើវាតាមរបៀបផ្សេងៗគ្នា។ ខ្លះដំណើរការការត្រួតពិនិត្យមួយបន្ទាត់ពី AGENTS.md។ ខ្លះមើលរូបថតអេក្រង់។ ទោះយ៉ាងណា bug នៅតែរួចខ្លួន៖

• ស្លាកស្ទីគ័រលើកាតអត្ថបទ បាំងកាលបរិច្ឆេទនៅខាងក្រោម។ ខ្ញុំឃើញវាដោយខ្លួនឯង នៅលើទំព័រដើមភាសាខ្មែរ ក្នុងរបៀបងងឹត។
• ចំនួន like នៅឃ្លាតពីបន្ទាត់របស់វា 12px ហើយក្បាលទំព័ររំកិលទៅចំហៀង នៅលើទូរស័ព្ទ 320px។ ការពិនិត្យកូដបានចាប់បានទាំងពីរ។
• កាត «ធ្វើការជាមួយខ្ញុំ» ថ្មីមួយ បានរុញបាតទំព័រចេញពីបន្ទាត់របស់វា នៅពេល branch ពីរជួបគ្នា។

ការងារផ្សេងទៀតក៏ដូចគ្នា។ ទំព័រនីមួយៗត្រូវការរូបថតអេក្រង់ជាបីភាសា ភ្លឺ និងងងឹត លើកុំព្យូទ័រ និងទូរស័ព្ទ៖ ១២ សន្លឹកក្នុងមួយទំព័រ រៀបចំដោយដៃរាល់ដង។ pull request នីមួយៗត្រូវការតំណ preview និងកម្រិតហានិភ័យ ដែលសរសេរដោយដៃ។ ភ្នាក់ងារ AI មិនអាចឮសំឡេងដែលពួកវាបន្ថែមទេ ដូច្នេះពួកវាសុំឱ្យខ្ញុំស្ដាប់ដោយត្រចៀក។

ភ្នាក់ងារ AI នឹងបង្កើតឧបករណ៍ប្រើហើយចោលឡើងវិញ រាល់ពេលដែលអ្នកសុំ ដោយមិនត្អូញត្អែរ។ ប៉ុន្តែការបង្កើតម្ដងៗ ពិនិត្យរបស់ខុសគ្នាបន្តិចបន្តួច ហើយគ្មានមួយណានៅរស់រានបន្ទាប់ពី session បញ្ចប់ទេ។

script បី

ដូច្នេះ ការងារបីដែលញឹកញាប់ជាងគេ ឥឡូវជា script នៅក្នុង repository ហើយ AGENTS.md ប្រាប់ភ្នាក់ងារ AI គ្រប់រូបឱ្យដំណើរការវា។

វាស់អក្សរធៀបនឹងបន្ទាត់

bun run lines build គេហទំព័រ បម្រើវា បើកទំព័រនីមួយៗក្នុង Chromium ក្នុងទទឹងអេក្រង់ ៥ ហើយវាស់អក្សរគ្រប់បន្ទាត់ធៀបនឹងបន្ទាត់ក្រដាស។

bun run lines                # every page, at 320, 375, 768, 1024 and 1280px
bun run lines --quick        # only 320 and 1280px
bun run lines /about/ --dark

វាវាស់បន្ទាត់មួយ ដូចរបៀបដែល script ជំនួសរបស់ទំព័រខ្លួនឯងតម្រង់វា។ អក្សរចាប់ផ្ដើមនៅកម្ពស់ ascent របស់ពុម្ពអក្សរ ពីលើ baseline របស់វា ហើយបន្ទាត់ក្រដាសស្ថិតនៅចុះក្រោម 22px រៀងរាល់ 32px ពីកំពូលទំព័រ៖

for (const rect of range.getClientRects()) {
  if (rect.width < 1 || rect.height < 1) continue;
  const baseline = rect.top + scrollY + up;
  let miss = (((baseline - rules.top) % rules.gap) + rules.gap) % rules.gap;
  if (miss > rules.gap / 2) miss -= rules.gap;
  const line: Line = {
    text: node.textContent!.trim().replace(/\s+/g, ' ').slice(0, 60),
    where: where(parent),
    miss: Math.round(miss * 10) / 10,
    baseline,
    box: {
      x: rect.left + scrollX,
      y: rect.top + scrollY,
      width: rect.width,
      height: rect.height,
    },
  };
  // …count the line…
  if (Math.abs(miss) > tolerance) result.off.push(line);
  // …then look for a sticker on top of it.
}

វាក៏ធ្វើឱ្យទំព័របរាជ័យ នៅពេលស្ទីគ័របាំងអក្សរមួយបន្ទាត់ ដែលជា bug នៃកាតអត្ថបទនោះ។ ខ្ញុំបានដាក់គម្លាតចាស់ត្រឡប់មកវិញដើម្បីសាកល្បង ហើយវាបានប្រាប់ឈ្មោះកាលបរិច្ឆេទ និងស្ទីគ័រដែលនៅពីលើវា។

លើកដំបូងដែលខ្ញុំដំណើរការវាលើគេហទំព័រពិត វាបានរកឃើញ bug មួយដែលគ្មាននរណាម្នាក់ធ្លាប់ឃើញ។ នៅលើទំព័រអំពីខ្ញុំ ចំណងជើងអត្ថបទនៅលើកាត «របៀបដែលខ្ញុំធ្វើការ» ស្ថិតនៅក្រោមបន្ទាត់របស់វា 2px។ អក្សរសរសេរដៃធំជាងអក្សរនៅជុំវិញ ដូច្នេះវារុញបន្ទាត់ទាំងមូលចុះក្រោម៖

✗ /about/ at 375px
  +2px off  "How I'd do pull request review today"  (… > cite.font-hand.text-xl)

បញ្ហានីមួយៗក៏មានរូបពង្រីកផងដែរ ដោយបន្ទាត់ក្រដាសគូរជាពណ៌ខៀវ និង baseline របស់អក្សរជាពណ៌ក្រហម។ ពេលរាប់បញ្ចូលរបៀបងងឹតផង ការដំណើរការពេញលេញមួយវាស់ជាង ១០០០០ បន្ទាត់ លើគ្រប់ទំព័រនៃគេហទំព័រ ក្នុងរយៈពេលប្រហែល ៤០ វិនាទី។

ថតរូបអេក្រង់

bun run shots ថតទំព័រនីមួយៗដែលអ្នកដាក់ឈ្មោះ ជាភាសាអង់គ្លេស ខ្មែរ និងអេស្ប៉ាញ ភ្លឺ និងងងឹត ក្នុងទទឹង 1280 និង 375px។ បន្ទាប់មកវារៀបរូបទាំងនោះលើសន្លឹកមួយ សម្រាប់ទំព័រនីមួយៗ និងទំហំអេក្រង់នីមួយៗ ដូច្នេះ pull request មួយអាចបង្ហាញរូបទាំង ៦ ក្នុងរូបភាពតែមួយ ជំនួសឱ្យឯកសារ ៦។

bun run shots /about/ --before main --mark 'cite.font-hand' --note 'back on its rule' --widths 1280,375 --publish

--before main build branch main នៅក្បែរ branch របស់អ្នក ហើយដាក់ទំព័រចាស់ និងថ្មីនៅក្បែរគ្នា។ --publish push សន្លឹកទាំងនោះទៅ branch ដែលរក្សារូបថតអេក្រង់ ហើយបោះពុម្ព Markdown សម្រាប់បិទភ្ជាប់ក្នុង pull request។

ខ្ញុំក៏ចង់ឱ្យភស្តុតាងចង្អុលទៅអ្វីដែលបានផ្លាស់ប្ដូរដែរ។ --mark ទទួល CSS selector៖ វាគូសស៊ុមជុំវិញធាតុនោះក្នុងរូបថតនីមួយៗ គូរព្រួញចង្អុលទៅវា ជាមួយកំណត់ចំណាំពី --note ហើយដាក់រូបពង្រីករបស់វានៅខាងលើសន្លឹក ទាំងមុន និងក្រោយ។

វាបើកទំព័រភាសាខ្មែរ និងអេស្ប៉ាញ តាមអាសយដ្ឋានផ្ទាល់របស់វា។ ទំព័រដើមជ្រើសរើសភាសាសម្រាប់អ្នកទស្សនាម្នាក់ៗ ហើយវាចាត់ទុក browser គ្មានផ្ទៃបង្ហាញជា bot ដូច្នេះភ្នាក់ងារ AI ដែលបើកតែទំព័រដើម តែងតែទទួលបានភាសាអង់គ្លេស។

រៀបចំ pull request

bun run pr check ដំណើរការអ្វីៗទាំងអស់ដែលត្រូវតែជាប់ មុនពេល push៖ ឈ្មោះ branch សារ commit ទម្រង់កូដ ការពិនិត្យប្រភេទ build និងការវាស់បន្ទាត់រហ័សមួយ។ bun run pr body បំពេញគំរូ pull request ជាមួយតំណ preview និងកម្រិតហានិភ័យដែលបានស្នើ។

const HIGH = [
  /^worker\//,
  /^wrangler\.(jsonc?|toml)$/,
  /^\.github\/workflows\//,
];
// Agent instructions change how every later change gets made.
const MEDIUM = [/^\.claude\//, /^AGENTS\.md$/];
const LOW = [
  /^src\/content\//,
  /^src\/assets\/articles\//,
  /^src\/i18n\/ui\.ts$/,
  /^docs\//,
  /\.md$/,
];

កម្រិតហានិភ័យកំណត់ដោយផ្លូវឯកសារដែលការផ្លាស់ប្ដូរប៉ះពាល់ ដូចក្នុង របៀបដែលខ្ញុំពិនិត្យ pull request៖ កម្រិតខ្ពស់ជាងគេឈ្នះ។ script មិនអាចដឹងថាពេលណាការផ្លាស់ប្ដូរបន្ថែមការចូលគណនីថ្មី ឬការភ្ជាប់ជាមួយសេវាខាងក្រៅទេ ដូច្នេះវាប្រាប់ពីរឿងនេះ ហើយការសម្រេចចិត្តនោះនៅតែជារបស់អ្នកសរសេរ។

អ្វីដែលខ្ញុំបានរៀនពេលបង្កើតវា

បិទអ្វីដែលអ្នកមិនពិនិត្យ

កំណែដំបូងចំណាយពេលជាងមួយនាទីសម្រាប់ការបើកទំព័រ ៨០ ដង។ ផ្នែកដែលយឺត គឺ avatar 3D។ Chromium គ្មានផ្ទៃបង្ហាញគូរ WebGL ដោយ software ដូច្នេះរូបភាពនីមួយៗលើទំព័រដែលមាន avatar ចំណាយពេលជិតមួយវិនាទី។ ការវាស់បន្ទាត់មិនត្រូវការ avatar ទេ ត្រូវការតែស៊ុមរបស់វា ដូច្នេះឥឡូវវាចាប់ផ្ដើម Chromium ដោយបិទ 3D ហើយទំព័រនីមួយៗចំណាយពេលកន្លះវិនាទី ជំនួសឱ្យបួនវិនាទីកន្លះ។

export async function launch({ webgl = true } = {}): Promise<Browser> {
  try {
    return await chromium.launch({ args: webgl ? [] : ['--disable-3d-apis'] });

script ថតរូបអេក្រង់ទុក 3D ឱ្យបើក ព្រោះនៅទីនោះ avatar គឺជាចំណុចសំខាន់។

ក្លែងធ្វើអ្វីដែលមិនមាន

ប៊ូតុង like ត្រូវការ Worker របស់ Cloudflare ដែលដំណើរការតែនៅ production ប៉ុណ្ណោះ ដូច្នេះនៅលើ build ក្នុងម៉ាស៊ីន វាត្រូវបានលាក់។ ពីមុន thread នានាក្លែងចម្លើយរបស់វាដោយដៃ ម្នាក់ៗខុសគ្នាបន្តិច។ ឥឡូវ server តូចរបស់ script ឆ្លើយជាមួយចំនួនក្លែងក្លាយដដែលរាល់ដង ហើយប៊ូតុងនោះបង្ហាញក្នុងរូបថតអេក្រង់ទាំងអស់។

bug ដែលរួចខ្លួន ក្លាយជាការត្រួតពិនិត្យ

ក្នុងអត្ថបទរបស់ខ្ញុំអំពី pull request ខ្ញុំបាននិយាយថា នៅពេល bug មួយរួចផុតពីការពិនិត្យ ការជួសជុលគួរតែបន្ថែមអ្វីដែលអាចចាប់វាបាន។ ស្ទីគ័រដែលបាំងកាលបរិច្ឆេទ ឥឡូវជាការត្រួតពិនិត្យដែលបរាជ័យ មិនមែនជាអ្វីដែលខ្ញុំចៃដន្យឃើញក្នុងរូបថតអេក្រង់ទៀតទេ។ ទំព័រណាដែលរំកិលទៅចំហៀងក៏ដូចគ្នាដែរ។

ឥឡូវនេះ ភ្នាក់ងារ AI ក៏អនុវត្តតាមច្បាប់ដូចគ្នាដែរ។ ក្បែរ script ទាំងនោះ មាន skill មួយដែលនាំភ្នាក់ងារពី branch ថ្មី រហូតដល់ pull request ដែលបានបើក ហើយជំហានចុងក្រោយរបស់វាសួរថា តើការផ្លាស់ប្ដូរនេះបានបង្រៀនអ្វីខ្លះ។ bug ដែលរួចផុតពីការត្រួតពិនិត្យ ក្លាយជាការត្រួតពិនិត្យថ្មី។ បញ្ហាដែលធ្វើឱ្យត្រូវសាកម្ដងទៀត ក្លាយជាមេរៀនមួយបន្ទាត់នៅក្នុង skill ហើយនៅពេលដែល script មួយដោះស្រាយវាបានហើយ មេរៀននោះត្រូវលុបចេញ។ រាល់ការកែប្រែ skill ចូលមកក្នុង pull request តែមួយជាមួយកូដ ដូច្នេះខ្ញុំពិនិត្យវាដូចពិនិត្យកូដដែរ។

នៅមានការងារប្រាំមួយទៀតក្នុងបញ្ជី ដូចជារង់ចាំឱ្យ preview build ឡើងវិញ មុននឹងនិយាយថាវារួចរាល់ និងការពិនិត្យសំឡេង សម្រាប់ត្រចៀកដែលមិននៅទីនោះ។ ពួកវានឹងមកម្ដងមួយៗ នៅពេលដែលពួកវារំខានខ្ញុំគ្រប់គ្រាន់ហើយ។

តើភ្នាក់ងារ AI របស់អ្នក ចេះតែបង្កើតអ្វីឡើងវិញពីសូន្យ?