บันทึกนักพัฒนา: บันทึกเนื้อหาทางเทคนิคเป็น Markdown แบบโค้ดก่อน

คุณกำลัง debug ตอนตี 2 คุณเจอคำตอบบน Stack Overflow คุณต้องการบล็อกโค้ด คำอธิบาย และไม่มีอะไรอื่น ไม่ใช่ความคิดเห็น “ฉันก็เหมือนกัน” 47 ข้อ ไม่ใช่โฆษณาในแถบด้านข้าง ไม่ใช่การ์รูเซลคำถามที่เกี่ยวข้อง

เทมเพลต Developer ของ Save ลบทุกอย่างยกเว้นสิ่งที่นักพัฒนาต้องการจริงๆ: โค้ด การอ้างอิง API และบริบททางเทคนิค

ปัญหาการอ่านเนื้อหาของนักพัฒนา

เนื้อหาทางเทคนิคออนไลน์ถูกฝังอยู่ใต้เสียงรบกวน:

• Stack Overflow — คำตอบล้อมรอบด้วยโหวต ความคิดเห็น โฆษณา
• เอกสาร — โค้ดสำคัญฝังอยู่ในย่อหน้าคำอธิบาย
• บทเรียนบล็อก — “ก่อนอื่น ขอบอกก่อนว่าทำไมฉันถึงรัก JavaScript…”
• GitHub READMEs — ตัวอย่างโค้ดที่คุณต้องการอยู่บรรทัดที่ 400
• การอ้างอิง API — ตารางที่มีประโยชน์ซ่อนอยู่ท่ามกลางกำแพงข้อความ

เทมเพลต Developer ทำงานอย่างไร

เทมเพลต Developer ของ Save ให้ผลลัพธ์ในรูปแบบโค้ดก่อนพร้อมห้าส่วน:

1. TL;DR — โซลูชันในประโยคเดียว
2. ภาพรวม — บริบททางเทคนิคโดยไม่มีส่วนเกิน
3. ตัวอย่างโค้ด — ทุกบล็อกโค้ดที่เก็บรักษาไว้อย่างแม่นยำ
4. การอ้างอิง API — ตารางพร้อมเมธอด พารามิเตอร์ ประเภทที่ส่งคืน
5. หมายเหตุ — กรณีขอบ ปัญหา พฤติกรรมเฉพาะเวอร์ชัน

บล็อกโค้ดทั้งหมดถูกเก็บรักษาด้วยเครื่องหมายการเน้นไวยากรณ์ ศัพท์เทคนิคยังคงอยู่ ภาษาการตลาดถูกลบออก

ตัวอย่างผลลัพธ์

จากหน้าเอกสาร Next.js เกี่ยวกับ Server Actions:

## TL;DR

Server Actions คือฟังก์ชัน async ที่ทำงานบนเซิร์ฟเวอร์
กำหนดด้วย directive 'use server' เรียกใช้ได้โดยตรงจาก
Client Components

## ภาพรวม

Server Actions ขจัดความจำเป็นในการใช้ API routes ในสถานการณ์
mutation ส่วนใหญ่ ผสานกับระบบ caching และ revalidation ของ Next.js
ใช้ได้เฉพาะใน App Router เท่านั้น

## ตัวอย่างโค้ด

### Server Action พื้นฐาน

\`\`\`typescript
'use server'

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string
  await db.posts.create({ data: { title } })
  revalidatePath('/posts')
}
\`\`\`

### การใช้ใน Client Component

\`\`\`typescript
'use client'

import { createPost } from './actions'

export function PostForm() {
  return (
    <form action={createPost}>
      <input name="title" />
      <button type="submit">สร้าง</button>
    </form>
  )
}
\`\`\`

## การอ้างอิง API

| ฟังก์ชัน | พารามิเตอร์ | ส่งคืน |
|---------|-----------|--------|
| revalidatePath | path: string | void |
| revalidateTag | tag: string | void |
| redirect | url: string | never |
| cookies() | ไม่มี | ReadonlyRequestCookies |

## หมายเหตุ

- Server Actions ต้องเป็นฟังก์ชัน async
- directive 'use server' สามารถอยู่ในระดับฟังก์ชันหรือไฟล์
- ขนาด request body สูงสุด: 1MB โดยค่าเริ่มต้น
- ทำงานกับ progressive enhancement (ไม่ต้องใช้ JS)
- ไม่สามารถกำหนดในไฟล์ Client Component ได้

กรณีการใช้งานที่เหมาะสมที่สุด

การบันทึกคำตอบ Stack Overflow

รับคำตอบที่ยอมรับพร้อมบล็อกโค้ดโดยไม่มีความยุ่งเหยิงของ UI เหมาะสำหรับการสร้างห้องสมุดอ้างอิงโค้ดส่วนตัว

ภาพรวมของเอกสาร

บันทึกหน้าเอกสารก่อนที่จะเปลี่ยนแปลง API ที่กำหนดเวอร์ชัน ฟีเจอร์ที่เลิกใช้ คู่มือการย้ายโอน — เก็บสำเนาในเครื่อง

การดึงบทเรียน

บันทึกบทเรียนการเขียนโค้ดที่ย่อลงเหลือเพียงขั้นตอนและโค้ดที่จำเป็น ไม่มีประวัติผู้เขียน ไม่มีการเติม SEO

การรวบรวมการอ้างอิง API

สร้างกระดาษโกง API ส่วนตัวโดยบันทึกหน้าอ้างอิงในรูปแบบนักพัฒนา ผลลัพธ์ตารางพร้อมใช้งานทันที

บริบทการรีวิวโค้ด

บันทึกเอกสารที่เกี่ยวข้องเมื่อรีวิวโค้ดที่ไม่คุ้นเคย แบ่งปันการอ้างอิงในรูปแบบนักพัฒนาในความคิดเห็น PR

วิธีตั้งค่า

1. ติดตั้ง Save จาก Chrome Web Store (ฟรี)
2. เปิดการตั้งค่า และเลือก “Developer 💻”
3. เยี่ยมชมหน้าทางเทคนิคใดก็ได้ — เอกสาร Stack Overflow บทเรียน
4. คลิก Save — Markdown แบบโค้ดก่อนทันที
5. เก็บใน vault — Obsidian, บันทึก VS Code, GitHub wiki

สร้างโดยนักพัฒนา สำหรับนักพัฒนา

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

เทมเพลต Developer ของ Save ให้ Markdown แบบโค้ดก่อนจากหน้าทางเทคนิคใดก็ได้ สะอาด มีโครงสร้าง พร้อมใช้งาน

ลอง Save ฟรีบน Chrome Web Store