วิธีที่คำแนะนำในการพัฒนาเว็บที่ทันสมัยช่วยปรับปรุงฐานของโค้ดให้ทันสมัย และเหตุผลที่คุณควรทำเช่นนั้น

การพัฒนาเว็บส่วนใหญ่ไม่ได้เริ่มจากศูนย์ ซึ่งเกิดขึ้นในฐานของโค้ดที่มีอยู่ซึ่งสะสมวิธีแก้ปัญหาชั่วคราวแบบเดิม, Polyfill และยูทิลิตี JavaScript (การปรับขนาดอัตโนมัติ, แฮ็กการจัดรูปแบบช่องทำเครื่องหมายที่กำหนดเอง, Listener scrollHeight) สำหรับสิ่งที่เบราว์เซอร์จัดการโดยค่าเริ่มต้นอยู่แล้ว แต่ปัญหาคือ โค้ดเก่าจะไม่หยุดทำงาน ซึ่งก็ใช้งานได้ดี จึงไม่มีใครรายงานข้อบกพร่อง นอกจากนี้ การเปลี่ยนโครงสร้างภายในโค้ดที่ใช้งานได้อยู่ (แม้ว่าจะเป็นโค้ดเก่า) ก็ต้องอาศัยความเชื่อมั่นด้วยเช่นกัน นักพัฒนาแอปจึงลังเลที่จะดำเนินการดังกล่าว ซึ่งเป็นเรื่องที่เข้าใจได้

ในทางกลับกัน การไม่เปลี่ยนโครงสร้างภายในโค้ดเก่าเพื่อใช้ฟีเจอร์เว็บสมัยใหม่จะส่งผลต่อขนาดแพ็กเกจ ความสามารถในการตอบสนองของหน้าเว็บ และการช่วยเหลือพิเศษโดยที่คุณไม่รู้ตัว ที่แย่ไปกว่านั้นคือเมื่อคุณใช้เอเจนต์การเขียนโค้ดในโปรเจ็กต์เหล่านี้ เอเจนต์จะคัดลอกรูปแบบการเขียนโค้ดในปี 2015 ที่อยู่รอบๆ พร้อมกับรูปแบบที่ล้าสมัยจากข้อมูลฝึกฝน

เมื่อคุณสร้างสิ่งใหม่ คำแนะนำในการพัฒนาเว็บที่ทันสมัยจะนำทาง Agent ไปยังฟีเจอร์Baselineที่ทันสมัย สำหรับโค้ดที่มีอยู่ คำแนะนำในการพัฒนาเว็บที่ทันสมัย 1.0 จะเพิ่มเวิร์กโฟลว์การปรับปรุงให้ทันสมัยซึ่งจะสแกนโปรเจ็กต์เพื่อหารูปแบบเดิมและช่วยให้ Agent อัปเกรดรูปแบบเหล่านั้น

สิ่งที่เวิร์กโฟลว์การปรับปรุงให้ทันสมัยทำ

เมื่อคุณขอให้ Agent ปรับปรุงโปรเจ็กต์ให้ทันสมัย (หรือโดยการเรียกใช้คำสั่ง legacy-scan โดยตรง) ระบบจะทำงานดังนี้

  • การสแกนในเครื่องแบบเชิงกำหนด: HTML, CSS, JavaScript/TypeScript, คอมโพเนนต์เฉพาะเฟรมเวิร์ก และไฟล์ package.json จะได้รับการสแกนอย่างรวดเร็วด้วย Abstract Syntax Tree (AST), DOM และโปรแกรมแยกวิเคราะห์ CSS ในเครื่องโดยไม่มีการเรียก LLM หรือค่าใช้จ่ายโทเค็น
  • แคตตาล็อกกฎเดิม: เครื่องมือสแกนที่แจ้งว่ามีสิ่งต่างๆ มากเกินไปในการเรียกใช้ทุกครั้งจะถูกละเว้น เราทดสอบกฎที่เป็นไปได้ในที่เก็บโอเพนซอร์สประมาณ 45,000 แห่งซึ่งแบ่งออกเป็น 2 ส่วน โดยเขียนและปรับแต่งกฎในส่วนการเขียนกฎ และให้คะแนนในส่วนที่เก็บไว้ซึ่งไม่เคยเห็นมาก่อน เราทิ้งกฎที่เป็นไปได้มากกว่าที่เก็บไว้ โดยข้ามฟีเจอร์ที่ไม่มีโค้ดเดิมที่เทียบเท่า และเลิกใช้การสลับเฉพาะไวยากรณ์ที่ไม่มีผลลัพธ์จริง (เช่น การเขียนตัวเลือกพี่น้อง + หรือ ~ ที่ใช้งานได้ใหม่เป็น :has()) หากต้องการจัดส่งโดยค่าเริ่มต้น กฎต้องมีความแม่นยำของ Matcher แบบคงที่อย่างน้อย 80% และความแม่นยำหลังการตรวจสอบ 90% ในโค้ดที่ไม่เคยเห็น
  • การกรองผลบวกลวงตามบริบท: การจับคู่กฎทุกรายการมาพร้อมกับเกณฑ์การให้คะแนน keepWhen/dropWhen ที่ชัดเจน ซึ่งจะบอกให้ Agent ประเมินโค้ดโดยรอบ และทิ้งการสำรองข้อมูลโดยเจตนา, CSS @supports Guard หรือสิ่งที่คล้ายกันก่อนที่จะนำเสนอสิ่งที่พบ
  • กำหนดขอบเขตเป็นรูปแบบเดิมที่มีความเชื่อมั่นสูง (และเพิ่มขึ้นเรื่อยๆ): legacy-scan จะตรวจสอบชุดย่อยของคู่มือประมาณ 200 รายการ (ประมาณ 20%) ซึ่งสามารถตรวจพบโค้ดเดิมได้อย่างแน่นอนโดยไม่มีผลบวกลวง และเรากำลังขยายความครอบคลุมดังกล่าวเมื่อเวลาผ่านไป สำหรับแคตตาล็อกที่เหลือ ตัวแทนจะค้นหาและดึงข้อมูลคู่มือขณะที่คุณสร้าง

วิธีเรียกใช้เวิร์กโฟลว์การปรับปรุงให้ทันสมัย

การปรับปรุงโค้ดให้ทันสมัยด้วยคำแนะนำในการพัฒนาเว็บที่ทันสมัยต้องใช้เวอร์ชัน 1.0 ขึ้นไป ติดตั้งหรืออัปเดตด้วย npm หรือมาร์เก็ตเพลสปลั๊กอินของ Agent โดยทำดังนี้

# Install Modern Web Guidance 1.0 in your project
npx modern-web-guidance@latest install

# Or update an existing installation
npx modern-web-guidance@latest update

เนื่องจากเวิร์กโฟลว์การปรับปรุงให้ทันสมัยเป็นส่วนหนึ่งของคำจำกัดความของทักษะหลัก คุณจึงเรียกใช้เครื่องมือสแกนด้วยภาษาธรรมชาติได้โดยขอให้ Agent ตรวจสอบ "รูปแบบเดิม" หรือ "ปรับปรุงให้ทันสมัย" ในที่เก็บหรือโฟลเดอร์

หมายเหตุ: การตั้งชื่อคอมโพเนนต์เดียวจะทำการค้นหาคำแนะนำปกติแทน

ตัวอย่างต่อไปนี้คือพรอมต์ตัวอย่างเพื่อสแกนที่เก็บทั้งหมด

Modernize this repository using Modern Web Guidance. Scan our frontend files for legacy patterns, verify the findings, and propose a modernization plan before making any code edits.

นอกจากนี้ คุณยังชี้ไปยังโฟลเดอร์ที่เฉพาะเจาะจงได้ด้วย โดยทำดังนี้

Check src/components/forms for legacy web patterns that can be refactored to modern Baseline features.

แม้ว่าปัจจุบันคุณจะเรียกใช้ legacy-scan ด้วยตนเองในเทอร์มินัลได้ แต่การผสานรวมไปป์ไลน์ CI/CD แบบอัตโนมัติยังอยู่ระหว่างการพัฒนา

ตัวอย่างรูปแบบที่ระบบตรวจจับและแก้ไข

กฎที่ผ่านการรับรองจะกำหนดเป้าหมายเป็นแอนติแพตเทิร์นเดิมที่พบบ่อยใน 4 โดเมน ได้แก่ แบบฟอร์มและ UI, กล่องโต้ตอบและการควบคุม, เลย์เอาต์ CSS, การพิมพ์ และการออกแบบภาพ และความปลอดภัย ตารางต่อไปนี้แสดงตัวอย่างรูปแบบเดิมและรูปแบบใหม่ที่ใช้แทน

โดเมน ตรวจพบรูปแบบเดิม การเปลี่ยนทดแทนที่ทันสมัย
แบบฟอร์มและ UI ฮุกการปรับขนาดอัตโนมัติของ textarea scrollHeight ของ JS CSS field-sizing: content (form-fields-automatically-fit-contents)
แบบฟอร์มและ UI ป้อนแฮนเดิลการส่ง keydown ที่ไม่มีตัวป้องกัน IME if (e.isComposing || e.keyCode === 229) return; (ime-safe-enter-submit)
แบบฟอร์มและ UI :invalid CSS จัดรูปแบบอินพุตที่ไม่มีการแตะเมื่อโหลดก่อนเวลาอันควร คลาสเทียม :user-invalid และ :user-valid (validate-input-after-interaction)
แบบฟอร์มและ UI ไม่มีโทเค็น autocomplete ในแบบฟอร์มการตรวจสอบสิทธิ์และการชำระเงิน ค่า autocomplete ที่เป็นมาตรฐาน (autofill-sign-in-form, autofill-payment-form)
กล่องโต้ตอบและการควบคุม ฟังก์ชันรอคลิก e.target === dialog รายการที่ทำให้การเลือกด้วยการลากใช้งานไม่ได้ <dialog closedby="any"> พร้อมการเพิ่มประสิทธิภาพแบบต่อเนื่อง (dialog)
กล่องโต้ตอบและการควบคุม ฟังก์ชันรอคลิก addEventListener ที่จำเป็นสำหรับโฆษณาซ้อนทับ แอตทริบิวต์ popover และ popovertarget แบบประกาศ (declarative-dialog-popover-control)
เลย์เอาต์ CSS, การพิมพ์ และการออกแบบภาพ max-height: 9999px เคล็ดลับการสร้างภาพเคลื่อนไหวแบบหีบเพลง interpolate-size: allow-keywords และ calc-size() (animate-to-intrinsic-sizes)
เลย์เอาต์ CSS, การพิมพ์ และการออกแบบภาพ การสลับคลาสหลัก JS ตามสถานะย่อย ตัวเลือกเชิงสัมพันธ์ :has(:checked) / :has(:focus-visible) (child-state-based-styling)
เลย์เอาต์ CSS, การพิมพ์ และการออกแบบภาพ ทำซ้ำบล็อก @media (prefers-color-scheme: dark) บล็อกแล้ว ฟังก์ชัน CSS light-dark() (dark-mode, dark-mode-toggle)
ความปลอดภัย แท็กสคริปต์ CDN ภายนอกไม่มีความสมบูรณ์ของทรัพยากรย่อย แอตทริบิวต์ integrity และ crossorigin="anonymous" (secure-external-subresources)

ตัวอย่างการเปลี่ยนรูปแบบโค้ด

เมื่อได้รับข้อความแจ้ง เอเจนต์การเขียนโค้ดจะเปลี่ยนรูปแบบต่อต้านเดิมให้เป็นรูปแบบสมัยใหม่ได้ด้วยเวิร์กโฟลว์การปรับปรุงให้ทันสมัย ลองดูตัวอย่างต่อไปนี้

องค์ประกอบ <textarea> ที่ขยายขนาดอัตโนมัติ

JavaScript เดิมที่วัด scrollHeight ในทุกเหตุการณ์ input จะบังคับให้เกิดการจัดวางเลย์เอาต์ซ้ำๆ ซึ่งอาจทำให้เกิดปัญหาด้านประสิทธิภาพ โดยเฉพาะอย่างยิ่งกับ Interaction to Next Paint (INP) เมื่อใช้เวิร์กโฟลว์การปรับปรุงให้ทันสมัย ตัวแทนจะแก้ไขปัญหาได้ดังนี้

// Before: Imperative layout recalculation on every keystroke
textarea.addEventListener('input', () => {
  textarea.style.height = 'auto';
  textarea.style.height = `${textarea.scrollHeight}px`;
});

คุณไม่จำเป็นต้องใช้ JavaScript สำหรับการดำเนินการนี้ในปัจจุบัน เวิร์กโฟลว์การปรับปรุงจะแนะนำให้ตัวแทนแทนที่ด้วย CSS ดังนี้

/* After: Native declarative field sizing */
textarea {
  field-sizing: content;
  min-block-size: 3lh;
  max-block-size: 15lh;
}

ป๊อปโอเวอร์แบบประกาศ

คุณสามารถแทนที่ตรรกะโมดัลและป๊อปอัปที่กำหนดเองซึ่งใช้ Listener เหตุการณ์ JavaScript ด้วยแอตทริบิวต์ HTML มาตรฐานได้ ดังนี้

<!-- Before: a click listener that only calls showPopover() -->
<button id="openBtn">Open Menu</button>
<div id="menu" popover>Menu Content</div>
<script>
  openBtn.addEventListener('click', () => menu.showPopover());
</script>

<!-- After: declarative control, no JavaScript -->
<button popovertarget="menu">Open Menu</button>
<div id="menu" popover>Menu Content</div>

การส่งการกด Enter ที่ปลอดภัยสำหรับ IME

Listener ของแป้น Enter ที่ไม่มีการป้องกันจะทริกเกอร์การส่งข้อความก่อนเวลาอันควรเมื่อผู้ใช้พิมพ์ในตัวแก้ไขวิธีการป้อนข้อมูล (IME) ภาษาญี่ปุ่น จีน หรือเกาหลี

ตัวแทนจะเพิ่มการป้องกันสถานะการเรียบเรียงดังนี้

// Before: Fires mid-composition when confirming kanji/hanzi characters
textarea.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    sendMessage();
  }
});


// After: Accurately checks IME composition state
textarea.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    if (e.isComposing || e.keyCode === 229) return;
    sendMessage();
  }
});

วิธีการทำงาน: เวิร์กโฟลว์การปรับปรุงให้ทันสมัย 4 ขั้นตอน

การเปลี่ยนโครงสร้างภายในโค้ดที่ใช้งานได้ในแอปที่มีอยู่ต้องอาศัยความเชื่อมั่น เนื่องจากไม่มีใครต้องการให้เกิดการเลิกใช้งานโดยอัตโนมัติหรือการถดถอยเล็กน้อย นั่นเป็นเหตุผลที่ไม่มี--fix แฟล็ก: แม้แต่การปรับปรุงที่ดูเหมือนจะตรงไปตรงมาก็มักจะกลายเป็นการปรับโครงสร้างข้ามเลเยอร์ เช่น การลบ Listener JS ที่จำเป็นหรือแพ็กเกจ npm และย้ายลักษณะการทำงานไปยัง HTML และ CSS โดยมีลักษณะการทำงานที่ละเอียดอ่อนและความท้าทายในการรองรับเบราว์เซอร์

แต่เวิร์กโฟลว์การปรับปรุงจะเรียกใช้ลูป 4 ขั้นตอนกับ Agent การเขียนโค้ดแทน ดังนี้

  1. สแกน (legacy-scan): Agent จะเรียกใช้ npx modern-web-guidance legacy-scan <path> --json ซึ่งจะคัดกรองไฟล์ล่วงหน้าเพื่อหาสตริงย่อยที่เกี่ยวข้อง เพื่อให้เรียกใช้โปรแกรมแยกวิเคราะห์ AST, CSS และ HTML ในไฟล์และกฎที่เป็นไปได้เท่านั้น หากการตรวจพบมาถึงขั้นตอนนี้ แสดงว่ามีโอกาสสูง (ประมาณ 92%) ที่จะไม่ใช่ผลบวกลวง การจับคู่แต่ละรายการจะมีรายการตรวจสอบการยืนยันสำหรับตัวแทน
  2. การตรวจสอบตามบริบท (keepWhen/dropWhen): เนื่องจากเอเจนต์การเขียนโค้ดเปิดที่เก็บไว้ จึงตรวจสอบโค้ดที่อยู่รอบๆ การจับคู่แต่ละรายการเทียบกับเกณฑ์การตรวจสอบของกฎนั้น หากการอ่าน scrollHeight เป็นส่วนหนึ่งของการเลื่อนแบบเสมือนจริงแทนที่จะเป็นแฮ็ก <textarea> หรือหากการตรวจสอบ @supports ปกป้องพร็อพเพอร์ตี้อยู่แล้ว ระบบจะทิ้งผลการค้นหาโดยไม่มีการแจ้งเตือน
  3. รายงาน: Agent จะสรุปผลการค้นพบที่ได้รับการยืนยัน (โดยระบุว่า legacy-scan ครอบคลุมชุดย่อยของคู่มือที่มีกฎเชิงกำหนด รวมถึงแผนการปรับปรุงให้ทันสมัยหากคุณขอให้ตรวจสอบแผนก่อนทำการแก้ไข)
  4. การดึงข้อมูลคู่มือ การเปลี่ยนโครงสร้างภายในโค้ด และการยืนยันการทดสอบ: เมื่อได้รับคำขอให้ปรับปรุง Agent จะเรียกใช้ npx modern-web-guidance retrieve <guide-id> เพื่อดึงข้อมูลคู่มือที่เหมาะสม โดยจะดำเนินการเปลี่ยนโครงสร้างภายในโค้ดตามรูปแบบความเข้ากันได้ของ Baseline ในคู่มือ และเรียกใช้ legacy-scan <path> อีกครั้งในไฟล์ที่แก้ไขควบคู่ไปกับชุดโปรแกรมทดสอบของโปรเจ็กต์เพื่อยืนยันการแก้ไข

ลองเลย

ไม่ว่าจะเรียกใช้ legacy-scan แบบครั้งเดียวในเทอร์มินัล หรือขอให้เอเจนต์การเขียนโค้ดปรับปรุงโมดูลเก่าให้ทันสมัย เวิร์กโฟลว์การปรับปรุงให้ทันสมัยจะช่วยให้คุณชำระหนี้ทางเทคนิคของแพลตฟอร์มเว็บเดิมได้โดยไม่ต้องวุ่นวายกับ Linter แบบดั้งเดิม

ใช้คำแนะนำในการพัฒนาเว็บที่ทันสมัยร่วมกับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent เมื่อต้องการเปลี่ยนจากการปรับปรุงโค้ดแบบคงที่ให้ทันสมัยไปเป็นการตรวจสอบเบราว์เซอร์แบบเรียลไทม์ การเปรียบเทียบ และการแก้ไขข้อบกพร่อง

ขั้นตอนถัดไปและทรัพยากร