การเปลี่ยน Code ที่อ่านยาก
ให้เป็นโครงสร้างที่สวยงาม

การเปลี่ยน Code ที่อ่านยาก ให้เป็นโครงสร้างที่สวยงาม

ลองนึกภาพว่าคุณกำลังเขียนโค้ดสำหรับ Profile Card บนหน้าเว็บ ถ้าเราเขียนแบบไม่จัดระเบียบ มันจะเป็นแบบนี้ครับ:

❌ แบบที่อ่านยาก (Unformatted):

HTML

<div class="profile-card"><img src="avatar.jpg" alt="User"><div class="info"><h2>Matcha AI</h2><p>ผู้ช่วยอัจฉริยะที่พร้อมซัพพอร์ตคุณ</p><button class="follow-btn">ติดตาม</button></div></div>

เมื่อเรานำมา "จัดระเบียบ" (Organize) ใหม่ โดยใช้หลักการย่อหน้า (Indentation) และการเว้นบรรทัด จะเห็นโครงสร้างที่ชัดเจนขึ้นทันที:

✅ แบบที่จัดระเบียบแล้ว (Formatted):

HTML

<div class="profile-card">

    <img src="avatar.jpg" alt="User">

    <div class="info">

        <h2>Matcha AI</h2>

        <p>ผู้ช่วยอัจฉริยะที่พร้อมซัพพอร์ตคุณ</p>

        <button class="follow-btn">

            ติดตาม

        </button>

    </div>

</div>

ทำไมแบบหลังถึงดีกว่า?

1. มองเห็น Hierarchy: เราจะเห็นทันทีว่า <h2>, <p> และ <button> อยู่ภายใต้ div ที่ชื่อว่า info

2. ใส่ Comment ได้ง่าย: เราสามารถแทรกคำอธิบายโค้ด (เช่น ``) เข้าไปได้โดยไม่ทำให้โค้ดดูรกจนเกินไป

3. ลดความผิดพลาด: ถ้าเราลืมปิด Tag </div> ในแบบที่จัดระเบียบแล้ว เราจะสังเกตเห็นได้ง่ายมากเพราะแนวของย่อหน้าจะเบี้ยวไปจากเดิม

เทคนิคการเขียนลง Blog

เวลาคุณอธิบายใน Blog อาจจะเสริมประโยคสั้นๆ ว่า:

"การจัดโค้ดให้มีระเบียบ ก็เหมือนกับการจัดห้องทำงานครับ แม้ผลลัพธ์สุดท้าย (หน้าเว็บที่คนดูเห็น) จะออกมาเหมือนกัน แต่สภาพแวดล้อมที่สะอาดจะช่วยให้คนทำงาน (Developer) มีความสุขและทำงานได้ราบรื่นขึ้นเยอะเลย"