🥳แบ่งปันฟามรู้

สำหรับคนที่อยากแบ่งปันประสบการณ์ที่อัดแน่นอยู่เต็มพุงให้เหล่าผองเพื่อนแมวน้ำ สามารถช่วยลงบทความให้กับสลัดผักได้แย้วนะ ส่วนแมวน้ำที่พึ่งหัดเดินก็สามารถเข้ามาช่วยได้นะ อย่างน้อยก็เป็นการฝึกทำ Code Review ที่เดี๋ยวก็จะได้เจอตอนทำงานแน่นวล 😆

ภาพจาก Microsoft Copilot

---

🎯ต้องรู้อะไรบ้าง?

เนื้อหาทั้งหมดของเว็บสลัดผักถูกเขียนด้วย Markdown เกือบทั้งหมดเลย ดังนั้นเพียงแค่เพื่อนๆรู้สึกอยากแบ่งปัน ก็สามารถบรรเลงถ่ายทอดความรู้ที่อัดในพุงออกมาได้เบย ส่วนของที่ต้องติดตั้งเพิ่มก็จะมี Visual Studio Code, Git และ Node.js ที่เหล่าขาเดฟต้องได้ใช้อยู่ทุกวี่วันนั่นเอง

ตัวเว็บสลัดผักทั้งเว็บจะอยู่ใน Github ทั้งหมดเลย ดังนั้นก็ clone ลงเครื่องด้วยคำสั่งด้านล่าง

git clone https://github.com/saladpuk/edu.git

ถัดมาก็ลองเปิดเล่นที่เครื่องตัวเองได้จากการรัน 2 คำสั่งด้านล่าง ซึ่งหลังจากรันแล้วรอซักครู่ใหญ่ๆหน้าเว็บ http://localhost:3000 ขึ้นมาให้เองงับ (จะใช้ pnpm ก็ได้เช่นกันนะจ๊ะ😘)

npm install
npm start

(จิ้มอย่างแผ่วเบา) เพื่อดูลิงค์ในการติดตั้ง

• Git - เป็นเครื่องมือในการจัดการโค้ดให้เป็นระบบ สามารถควบคุมเวอร์ชันต่างๆได้ดั่งใจนึก
• Node.js - เป็นเครื่องมือในการจัดการ package ต่างๆในการพัฒนาโปรแกรม
• Visual Studio Code - เป็นเครื่องมือในการเขียนพัฒนาโปรแกรมที่ได้รับความนิยมมากๆของโลก

📁โครงสร้างของเว็บ

บทความต่างๆของเว็บสลัดผักมีโครงสร้างที่เข้าใจง่ายมาก เพียงแค่ดูจาก URL ที่แสดงอยู่ก็จะรู้ได้เลยว่าไฟล์ของบทความนั้นๆถูกเก็บไว้ที่ไหน เช่น หน้าที่เพื่อนๆกำลังอ่านอยู่นี้จะมีลิงค์เป็น docs/contribute/creator ซึ่งก็หมายความว่า ถ้าจะแก้ไขเนื้อหาของหน้านี้ ก็ให้เข้าไปดูที่ไฟล์ docs/contribute/creator.md นั่นเอง

ตัวเว็บสลัดผักนั้นจะแบ่งประเภทบทความเป็น 2 ชนิดนั่นคือ ฟามรู้ และ บ่นไปวันๆ โดยมีความต่างกันคือ

1. ฟามรู้ จะจัดเรียงบทความแยกตามประเภทของเนื้อหา เช่น คอร์สภาษา C#, DevOps ฯลฯ ซึ่งสามารถดูประเภทได้ตาม Roadmap ที่หน้าหลักของเว็บสลัดผัก ซึ่งไฟล์ทั้งหมดจะอยู่ในโฟเดอร์ docs

2. บ่นไปวันๆ จะเป็นบทความที่เกี่ยวกับประสบการณ์ในการทำงาน ข้อคิด บทเรียน หรืออะไรก็ตามแต่ที่ ดช.แมวน้ำ อยากจะบ่น ฮ่าๆ ส่วนไฟล์ของเนื้อหาประเภทนี้จะอยู่ในโฟเดอร์ blog

   📁Root
   ├── 📁docs  // ฟามรู้
   └── 📁blog  // บ่นไปวันๆ

😋คันมืออยากเริ่มละทำไง?

ถ้าได้อ่าน ข้อตกลงร่วมกัน และ สามารถเขียน Markdown ได้เรียบร้อยแล้วก็สามารถส่ง PR มาได้เลยจร้า ส่วนขั้นตอน ดช.แมวน้ำ ขอแยกเป็น 2 แบบตามด้านล่างนี้น๊ะ

1. การเพิ่มเนื้อหาฟามรู้ใหม่ๆ หรือ แก้บทความที่มีอยู่แย้ว จะเป็นไปตามพิธีด้านล่างนี้

จิ้มตรงนี้เพื่อดูวิธีการทำ Fork & PR

การส่ง PR (Pull Request) เป็นท่าพื้นฐานที่ Community/Open-source projects ต่างๆทั่วโลกใช้ในการส่งงานกัน ซึ่งเพื่อนๆสามารถลองทำตามขั้นตอนด้านล่างนี้ เพื่อเริ่มต้นในการช่วยเหลือสลัดผักได้เบยฮ๊าฟ ลองหาคำผิดเล็กๆน้อยๆแก้แล้วส่งมาก็ได้ 🥰

1. เข้าไปที่ https://github.com/saladpuk/edu (จิ้มลิงค์ได้เยย)
2. ที่ด้านบนขวากดปุ่ม Fork
3. ทำการ Clone โปรเจคที่เพิ่ง Fork มาลงเครื่อง
4. เริ่มบรรเลงเนื้อหาต่างๆที่ต้องการได้เยย
5. เมื่อทำจนพอใจแล้วก็ Commit และ Push ขึ้น Github ของตัวเอง
6. กลับไปที่ Github ดูที่ด้านบนซ้าย ให้กดปุ่ม Pull Request พร้อมสรุปรายละเอียดสั้นๆลงไปใน PR message แล้วกดส่ง
7. รอ ดช.แมวน้ำ ทำการตรวจสอบ ... หากไม่มีปัญหาใดๆ PR ตัวนั้นๆก็จะถูกรวมเข้าไปในเว็บสลัดผักเยย เย่ 🥳
8. หาก ดช.แมวน้ำ ตรวจแล้วมีประเด็น ก็จะ comment ตอบกลับใน PR นั้นๆ แล้วป๋มก็รอเพื่อนๆแก้ไขตามหรือตอบกลับมากั๊ฟป๋ม ... จนกว่าจะเรียบร้อยก็จะถูกรวมเข้าไปในเว็บสลัดผักเยย

2. กรณีเพื่อนๆต้องการที่จะ เสนอไอเดีย หรือ แจ้งปัญหา จะเป็นไปตามพิธีด้านล่างนี้

จิ้มตรงนี้เพื่อดูวิธีสร้าง Github Issue

การสร้าง Issue เป็นท่าพื้นฐานที่ Community/Open-source projects ต่างๆทั่วโลกใช้ในการแจ้งปัญหา หรือ เสนอไอเดียใหกับผู้ดูแลโครงการนั้นๆ ซึ่งเพื่อนสามารถลองทำตามขั้นตอนด้านล่างนี้เพื่อเสนอแนวคิดใหม่ๆ หรือแจ้งปัญหาที่พบเจอได้เยยงับ 🥰

1. เข้าไปที่ https://github.com/saladpuk/edu/issues
2. ที่ด้านขวามือกดปุ่ม New issue
3. ทำการใส่รายละเอียดต่างๆที่ต้องการแจ้งลงไป แล้วก็กดปุ่ม Submit new issue เพื่อทำการส่ง Issue
4. รอ ดช.แมวน้ำ ทำการตรวจสอบ ... หากไม่มีปัญหาใดๆ Issue นั้นก็จะถูกเปลี่ยนสถานะไปตามความเหมาะสม เช่น รับเรื่อง, รอพิจารณา, ดำเนินการแล้ว ฯลฯ
   • ในระหว่างนี้เพื่อนๆแมวน้ำคนอื่นอาจจะมาแวะเวียนมาช่วยถาม/ช่วยตอบ ดังนั้นอย่าลืมตอบกลับเพื่อนๆแมวน้ำนะจ๊ะ

note

ลูกเล่นต่างๆที่ช่วยให้เว็บสลัดผักดูไม่จืดชื่นเกินไป สามารถดูได้จากหัวข้อ 🧸ของเล่นในสลัดผัก ด้านล่างนะฮั๊ฟ

tip

เขียนไม่เก่ง คิดคำไม่ออก กลัวเขียนแล้วอ่านไม่รู้เรื่อง ไม่ต้องห่วงน้าาา เพราะ ดช.แมวน้ำ และผองเพื่อนจะช่วยจัดการเกลาให้งับ (แม้ว่ากระป๋มยังงูๆปลาๆอยู่เช่นกันก็ตามฮ่าๆ) คิดซะว่าเป็นการฝึก เพราะทักษะการสื่อสารก็เป็นเรืองที่สำคัญไม่แพ้การเขียนโค้ดเลยนะจ๊ะ 🥰

danger

หากเป็นการแก้คำผิด เพิ่มเนื้อหาเล็กๆน้อยๆ หรือ เขียนบทความใหม่ที่อยู่ใน Roadmap ของสลัดผักอยู่แล้วส่วนใหญ่ก็จะผ่านไม่มีปัญหาอะไร แต่ถ้าเป็น เนื้อหาที่ไม่ได้อยู่ใน Roadmap อันนี้อยากให้ทักคุยกันใน Github Issue ก่อน จะเป็นพระคุณมากๆเลยขอรับ 🙇

😅พึ่งหัดแต่ก็อยากช่วยนะ

จริงๆแค่ช่วยแก้ไขคำผิดที่เจอกระป๋มก็น้ำตาปริ่มแล้วกั๊ฟ (แมวน้ำหัดเรียนภาษามนุษย์ก็ยากงี้แหละ🥲) ส่วนสำหรับมือใหม่จริงๆป๋มแนะนำให้เรียนรู้ภาษา Markdown ไว้แต่เนิ่นๆ จะช่วยให้ชีวิตเราสบายขึ้นเยอะครับ ดังนั้นลองมาหัดกันเรียนกันจากตรงด้านล่างได้เบยครัช

🐣Markdown 101

ภาษา Markdown จริงๆมันง่ายแบบฝุดๆ เพราะมันเป็นการเขียนข้อความธรรมดาๆ แต่แค่ใส่อักษรพิเศษเพิ่มเข้าไปนิดโหน่ย ก็จะทำให้ข้อความธรรมดาของเรา ไม่ธรรมดา ดังนั้นลองมาเล่นกันเยย

1. เปิด Visual Studio Code ขึ้นมาแล้วสร้างไฟล์ใหม่ โดยกดที่่เมนู File > New Text File

2. ทำการกำหนดว่าเราจะทำงานกับ Markdown โดยกดที่เมนู View > Command Palette... แล้วพิมพ์ Change Language Mode แล้วกด Enter แล้วให้เลือก Markdown

3. ทำการแยกหน้าจอเป็นสองส่วนเพื่อดูผลลัพท์ของ Markdown โดยกดที่เมนู View > Editor Layout > Split Right

4. ทำการสั่งให้หน้าจอแสดงผลเป็น Markdown โดยกดที่เมนู View > Command Palette... แล้วพิมพ์ Markdown: Open Preview แล้วกด Enter

5. ลองก๊อปข้อความด้านล่างนี้ไปวางใน Visual Studio Code แล้วดูผลลัพท์ที่แสดงอยู่ในหน้า Preview นะ

   # ทักทาย
   ![img](https://saladpukstorage.z23.web.core.windows.net/img/saladpuk200.png)  
   สวัสดีผมชื่อ **ดช.แมวน้ำ** ซึ่งกระป๋มมี ~~พุงพลุ้ย~~ กล้ามท้องอันสวยงาม
   
   > _NOTE:_  
   > หากชอบเว็บสลัดผักก็ฝากกดติดตามใน Facebook ด้วยนะครับ [โดยสามารถจิ้มที่ตรงนี้ได้เบย](https://www.facebook.com/mr.saladpuk/)
   (จิ้มอย่างแผ่วเบา) เพื่อดูผลลัพท์

   ทักทาย

   
   สวัสดีผมชื่อ ดช.แมวน้ำ ซึ่งกระป๋มมี พุงพลุ้ย กล้ามท้องอันสวยงาม

   NOTE:
   หากชอบเว็บสลัดผักก็ฝากกดติดตามใน Facebook ด้วยนะครับ โดยสามารถจิ้มที่ตรงนี้ได้เบย

เห็นมะไม่ได้ยากเยย แค่เติมตัวอักษรพิเศษเข้าไปก็บู้มมมมละ ซึ่งเพื่อนๆสามารถลองไปศึกษาต่อได้จากเว็บนี้เลยงับ Markdown Guide

🧸ของเล่นในสลัดผัก

เบื้องหลังเว็บสลัดผักจริงๆคือ Docusaurus ซึ่งช่วยให้เราสามารถเขียน document ได้ง่ายขึ้น รองรับ React และมีความสามารถอื่นๆอีกมากมาย ซึ่งโดยเบื้องต้น ดช.แมวน้ำ ได้ปรับแต่งไว้เบื้องต้นแล้ว โดยมีลูกเล่นต่างๆตามนี้

note

หากเพื่อนๆเห็นว่า features ไหนมีประโยชน์ อยากเอาเข้ามา ก็สามารถส่งเข้ามาที่ Github Issue หรือ PR มาได้เลยนะครับ 😍

🔹FontAwesome

ช่วยทำให้เรามีไอคอนสวยๆไปใส่ในบทความได้ เช่น โดยสามารเลือกไอคอนได้จากเว็บหลัก fontawesome.com ได้เลย

🔹Admonitions

ช่วยให้เรามีกล่องข้อความหลากหลายรูปแบบ

note

เอาไว้ใส่ โน๊ต ต่างๆ

tip

เอาไว้ใส่ เกร็ดความรู้ ต่างๆ

info

เอาไว้ใส่ รายละเอียดเพิ่มเติม ต่างๆ

warning

เอาไว้ แจ้งเตือนข้อควรระวัง ต่างๆ

danger

เอาไว้ แจ้งเตือนกรณ์ให้ระวังมากๆๆ ต่างๆ

พิมพ์ ชื่อหัวข้อ ได้เองในรูปแบบ Markdown syntax ได้ด้วย!

ข้อความที่อยู่ในกล่องข้อความนี้จะเป็นข้อความที่เราต้องการให้เห็นเป็นพิเศษ

🔹Mermaid

ช่วยทำให้เราเขียน Diagrams แบบต่างๆได้ง่ายขึ้น รายละเอียดการเขียนสามารถดูได้จากเว็บหลัก Mermaid.js

🔹Tabs

ช่วยให้เราสามารถสร้างหมวดในการแสดงผลได้

คำสั่งในการคัดลอก

Windows

กดปุ่ม Ctrl + C เพื่อทำการคัดลอก

macOS

กดปุ่ม Command + C เพื่อทำการคัดลอก

คำสั่งในการวางสิ่งที่คัดลอกไว้

Windows

กดปุ่ม Ctrl + V เพื่อทำการวาง

macOS

กดปุ่ม Command + V เพื่อทำการวาง

🔹Summary

ใช้ในการซ่อนเนื้อหาที่ยาวๆ

จิ้มมาเยย เพื่อดูเนื้อหาที่ซ่อนไว้!

อุ๊ตะ เห็นแล้วซินะ

ไม่ให้ดูหรอก มีอะไรซ่อนอยู่น้าาา

แบร่👻

🔹Custom Components

เป็น Component ที่สร้างขึ้นมาใช้งานเอง เช่น การทำไฮไลท์

กำหนดสีเองได้ หรือจะเป็นสีที่กำหนดตายตัวไว้แล้ว แดง เขียว น้ำเงิน เทา

🔹Quiz

ใช้ในการสร้างคำถามแบบง่ายๆ

🤔My Quiz Title

Option 1Option 2Option 3Option 4

🔹Code Blocks

การแสดงผลโค้ดแบบต่างๆ

สามารถแสดงชื่อไฟล์ได้

Demo.cs

int a = 3;

ใส่เลขบรรทัดได้

int a = 3;
int b = 5;
int c = 7;

ทำไฮไลท์บรรทัดได้

int a = 3;
int b = 5;
int c = 7;
int d = 9;
int e = 11;
int f = 13;

ทำไฮไลท์สีได้

Console.WriteLine("Red");
Console.WriteLine("Green");
Console.WriteLine("Blue");
Console.WriteLine("Orange");
Console.WriteLine("Line 1");
Console.WriteLine("Line 2");
Console.WriteLine("Line 3");
Console.WriteLine("Line 4");

รวมทุกแบบ

Program.cs

int a = 3;
int b = 5;
int c = 7;
int d = 9;
int e = 11;
int f = 13;

🔹Import Markdown

ใช้สำหรับ import บทความอื่นๆเข้ามาใส่ในบทความนี้ เช่น ตัวอย่างด้านล่าง

สวัสดีค๊าฟ ข้อความนี้มาจากไฟล์ _sample.md ในโฟลเดอร์ contribute นะฮ๊าฟ

แม้ว่าป๋มจะถูก import ไปแสดงผลที่บทความอื่นๆ แต่ความสามารถทุกก็สามารถทำงานได้ปรกติดีนะ