Merge pull request #7 from ThaiProgrammer/dev.ponggun.web.guideline

Dev.ponggun.web.guideline

.vitepress/config.mts

@@ -17,6 +17,8 @@ export default defineConfig({
         '/paths/java': { base: '/paths/java/', items: sidebarJava()},
         '/paths/azure': { base: '/paths/azure/', items: sidebarAzure()},
         '/paths/cloud-computing': { base: '/paths/cloud-computing/', items: sidebarCloudComputing()},
+        '/paths/web-guideline': { base: '/paths/web-guideline/', items: sidebarWebGuideline()},
+        '/paths/sourcecodecontrol': { base: '/paths/sourcecodecontrol/', items: sidebarSourceCodeControl()},
     },
     socialLinks: [
       { icon: 'github', link: 'https://github.com/ThaiProgrammer/tpa-path' }
@@ -176,4 +178,110 @@ function sidebarCloudComputing(): DefaultTheme.SidebarItem[] {
       ]
     }
   ]
+}
+function sidebarWebGuideline(): DefaultTheme.SidebarItem[] {
+  return [
+    {
+      text: 'Web Development Guideline',
+      items: [
+        { 
+          text: 'Introduction', 
+          collapsed: true,
+          base: '/paths/web-guideline/intro/',
+          items: [
+            { text: 'ทำเว็บต้องรู้อะไรบ้าง', link: 'intro' },
+            { text: 'ภาษาอังกฤษ', link: 'english' },
+            { text: 'เตรียมเครื่องให้พร้อม', link: 'setupgear' },
+            { text: 'Learning Path', link: 'learningpath' },
+            { text: 'Software Engineer', link: 'softwareengineer' },
+            { text: 'Salary Report', link: 'devreport' },
+            { text: 'พิมพ์สัมผัส', link: 'typing' },
+            { text: 'Problem Solving', link: 'problemsolving' },
+            { text: 'Soft Skills', link: 'softskill' },
+          ]
+        },
+        { 
+          text: 'Front End', 
+          collapsed: true,
+          base: '/paths/web-guideline/frontend/',
+          items: [
+            { text: 'Front End', link: 'frontend' },
+          ]
+        },
+        { 
+          text: 'Backend End', 
+          collapsed: true,
+          base: '/paths/web-guideline/backend/',
+          items: [
+            { text: 'Back End', link: 'backend' },
+          ]
+        },
+        { 
+          text: 'Database', 
+          collapsed: true,
+          base: '/paths/web-guideline/database/',
+          items: [
+            { text: 'Database', link: 'database' },
+          ]
+        },
+        { 
+          text: 'Source Code Control', 
+          collapsed: true,
+          base: '/paths/web-guideline/scm/',
+          items: [
+            { text: 'Source Code Control', link: 'scm' },
+          ]
+        },
+        { 
+          text: 'Deployment', 
+          collapsed: true,
+          base: '/paths/web-guideline/deployment/',
+          items: [
+            { text: 'Deployment', link: 'deployment' },
+          ]
+        },
+        { 
+          text: 'Cloud Computing', 
+          collapsed: true,
+          base: '/paths/web-guideline/cloudcomputing/',
+          items: [
+            { text: 'Cloud Computing', link: 'cloudcomputing' },
+          ]
+        },
+        { 
+          text: 'SSH', 
+          collapsed: true,
+          base: '/paths/web-guideline/ssh/',
+          items: [
+            { text: 'SSH', link: 'ssh' },
+          ]
+        },
+        { 
+          text: 'Community', 
+          collapsed: true,
+          base: '/paths/web-guideline/community/',
+          items: [
+            { text: 'Community', link: 'community' },
+          ]
+        }
+      ]
+    }
+  ]
+}
+function sidebarSourceCodeControl(): DefaultTheme.SidebarItem[] {
+  return [
+    {
+      text: 'Source Code Control',
+      items: [
+        { 
+          text: 'Source Control Management', 
+          collapsed: true,
+          base: '/paths/sourcecodecontrol/scm/',
+          items: [
+            { text: 'Source Control Management', link: 'scm' },
+          ]
+        }
+      ]
+    }
+  ]
 }

.vscode/tasks.json

@@ -0,0 +1,17 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "Install VitePress",
+            "type": "shell",
+            "command": "npm add -D vitepress"
+        },
+        {
+            "label": "Run VitePress",
+            "type": "shell",
+            "command": "npm run docs:dev"
+        }
+    ]
+}

index.md

@@ -23,6 +23,9 @@ features:
   - title: Web Development Guideline
     details: รวบรวมเนื้อหาที่คิดว่าเป็นประโยชน์ให้เห็นภาพกว้างในการเข้ามาทำงานในสาย Web Developers
     link: /paths/web-guideline
+  - title: Source Code Control
+    details: แนวทางการดูแลและควบคุม Source Code ที่เราทำงานกันเป็นทีมได้อย่างมีประสิทธิภาพครับ
+    link: /paths/sourcecodecontrol 
   - title: ASP.Net Core
     details: ขั้นตอนแนะนำในการเตรียมความพร้อมเพื่อพัฒนา Website ด้วย ASP.NET Core ในปี 2024
     link: /paths/aspnet-core

paths/sourcecodecontrol/index.md

@@ -0,0 +1,15 @@
+# Source Control Management
+
+Source Control Management (SCM) หรือที่เรียกกันว่า Version Control System (VCS) เป็นระบบที่ใช้ในการติดตามและจัดการการเปลี่ยนแปลงของซอฟต์แวร์หรือไฟล์เอกสารในโปรเจกต์หนึ่งๆ โดยมีวัตถุประสงค์หลักๆ ดังนี้:
+
+1. **การติดตามการเปลี่ยนแปลง**: SCM จะเก็บประวัติของการเปลี่ยนแปลงทั้งหมดที่เกิดขึ้นกับไฟล์ในโปรเจกต์ ตั้งแต่การเพิ่มไฟล์ใหม่ การแก้ไขไฟล์เดิม ไปจนถึงการลบไฟล์ ซึ่งจะช่วยให้เราสามารถดูได้ว่าใครทำการเปลี่ยนแปลงอะไร เมื่อไหร่ และทำไม
+
+2. **การจัดการเวอร์ชัน**: SCM สามารถจัดการหลายๆ เวอร์ชันของโปรเจกต์ได้อย่างมีประสิทธิภาพ โดยสามารถสร้าง branch หรือ fork เพื่อให้การพัฒนาสามารถทำได้พร้อมๆ กันโดยไม่กระทบกับเวอร์ชันหลักของโปรเจกต์
+
+3. **การร่วมมือกันในทีม**: SCM ช่วยให้การทำงานร่วมกันในทีมเป็นไปได้อย่างราบรื่น ไม่ว่าจะเป็นการรวมการเปลี่ยนแปลงจากหลายๆ คนเข้าด้วยกัน (merge) หรือการแก้ไขความขัดแย้งที่เกิดขึ้นเมื่อมีการเปลี่ยนแปลงไฟล์เดียวกันพร้อมๆ กัน (conflict resolution)
+
+4. **การสำรองข้อมูลและการกู้คืน**: SCM ช่วยในการสำรองข้อมูลโดยอัตโนมัติ และสามารถย้อนกลับไปยังเวอร์ชันก่อนหน้าได้อย่างง่ายดายเมื่อเกิดข้อผิดพลาดหรือปัญหาในเวอร์ชันปัจจุบัน
+
+เครื่องมือ SCM ที่ได้รับความนิยมและใช้งานอย่างแพร่หลาย ได้แก่ Git, Subversion (SVN), Mercurial และ Perforce โดยเฉพาะ Git เป็นที่นิยมมากที่สุดในปัจจุบันเนื่องจากความยืดหยุ่นและความสามารถในการจัดการกับโปรเจกต์ขนาดใหญ่ได้อย่างมีประสิทธิภาพ
+
+หากคุณต้องการข้อมูลเพิ่มเติมหรือมีคำถามเกี่ยวกับเครื่องมือ SCM ใดๆ โปรดแจ้งให้ผมทราบครับ

paths/sourcecodecontrol/scm/scm.md

@@ -0,0 +1 @@
+# Source Control Management

paths/web-guideline/backend/backend.md

@@ -0,0 +1 @@
+# Backend End Web Development

paths/web-guideline/cloudcomputing/cloudcomputing.md

@@ -0,0 +1 @@
+# Cloud Computing

paths/web-guideline/community/community.md

@@ -0,0 +1 @@
+# SSH

paths/web-guideline/database/database.md

@@ -0,0 +1 @@
+# Database Development

paths/web-guideline/deployment/deployment.md

@@ -0,0 +1 @@
+# Deployment

paths/web-guideline/frontend/frontend.md

@@ -0,0 +1 @@
+# Front End Web Development

paths/web-guideline/index.md

@@ -5,72 +5,9 @@ description: Guideline สำหรับแนะนำน้องๆนัก
 ---
 
 # Web Development Guideline
-Guideline สำหรับแนะนำน้องๆนักศึกษาฝึกงานนะคร้าบ (จริงๆแอบมีแนะนำวิธีการทำงานและสายงาน Software Engineer ด้วยครับผม)
+เนื้อหานี้จะเกี่ยวข้องกับการแนะนำภาพรวมในสายงานของ Web Development นะครับ 
+โดยจะแนะนำภาพรวมกว้างๆพร้อมตัวอย่าง ให้ผู้อ่านได้ศึกษาแบบเป็นลำดับขั้น
 
-เนื้อหาที่เกี่ยวข้องคร่าวๆนะครับ
+เนื้อหาในบทความจะมีการแนะนำไปยังหัวข้ออื่นๆที่อยู่ในเว็ปไซต์นี้ครับ รวมถึงแนะนำแหล่งเรียนรู้ภายนอก ทั้งภาษาไทยและภาษาอังกฤษด้วยครับ
 
-## 1. Introduction to Web Development
-
-**1.1. What is Web Development?**
-
-- **Definition:** Web development คือ กระบวนการสร้างและดูแลเว็บไซต์หรือเว็บแอปพลิเคชัน
-- **Types of Web Development:**
-    - **Front-end Development:** การพัฒนาในส่วนที่ผู้ใช้สามารถเห็นและโต้ตอบได้
-    - **Back-end Development:** การพัฒนาส่วนที่ทำงานอยู่เบื้องหลัง
-    - **Full-stack Development:** การพัฒนาทั้ง front-end และ back-end
-
-**1.2. Key Concepts and Technologies**
-
-- **HTML (Hypertext Markup Language):** ภาษามาร์กอัปพื้นฐานสำหรับการสร้างหน้าเว็บ
-- **CSS (Cascading Style Sheets):** ภาษาที่ใช้สำหรับจัดรูปแบบและสไตล์ของหน้าเว็บ
-- **JavaScript:** ภาษาสคริปต์ที่ใช้สำหรับการเพิ่มฟังก์ชันการทำงานให้กับหน้าเว็บ
-- **Frameworks and Libraries:** เช่น React, Angular, Vue.js สำหรับ front-end และ Node.js, Express สำหรับ back-end
-
-## 2. Setting Up Your Development Environment
-
-**2.1. Tools and Software**
-
-- **Code Editors:** เช่น Visual Studio Code, Sublime Text
-- **Version Control Systems:** เช่น Git, GitHub
-- **Package Managers:** เช่น npm, yarn
-
-**2.2. Setting Up a Local Development Server**
-
-- **Using Node.js:** การติดตั้งและใช้งาน Node.js สำหรับการรันเซิร์ฟเวอร์
-- **Localhost and Ports:** การตั้งค่า localhost และการใช้พอร์ต
-
-## 3. Building Your First Web Page
-
-**3.1. Creating an HTML File**
-
-- **Basic Structure:** อธิบายโครงสร้างพื้นฐานของ HTML เช่น `<!DOCTYPE html>`, `<html>`, `<head>`, `<body>`
-- **Tags and Elements:** แนะนำแท็กพื้นฐาน เช่น `<h1>`, `<p>`, `<a>`, `<img>`
-
-**3.2. Adding Styles with CSS**
-
-- **Inline Styles:** การใช้สไตล์แบบ inline
-- **Internal Stylesheets:** การใช้ `<style>` ภายใน `<head>`
-- **External Stylesheets:** การเชื่อมต่อไฟล์ CSS ภายนอก
-
-**3.3. Adding Interactivity with JavaScript**
-
-- **Basic Syntax:** แนะนำพื้นฐานของ JavaScript เช่นตัวแปร, ฟังก์ชัน, การใช้งาน DOM
-- **Event Handling:** การจัดการเหตุการณ์ เช่นคลิก, hover
-
-## 4. Introduction to Software Engineering
-
-**4.1. Overview of Software Engineering**
-
-- **Definition and Importance:** การอธิบายว่า Software Engineering คืออะไร และสำคัญอย่างไร
-- **Software Development Life Cycle (SDLC):** อธิบายขั้นตอนต่าง ๆ ในการพัฒนาซอฟต์แวร์
-
-**4.2. Career Path in Software Engineering**
-
-- **Roles and Responsibilities:** อธิบายหน้าที่และความรับผิดชอบในแต่ละตำแหน่ง เช่น Front-end Developer, Back-end Developer, Full-stack Developer, DevOps Engineer
-- **Skills and Qualifications:** ทักษะที่จำเป็นสำหรับแต่ละตำแหน่ง
-
-**4.3. Tips for Aspiring Software Engineers**
-
-- **Continuous Learning:** การเรียนรู้ตลอดชีวิตในสายงานนี้
-- **Networking:** การสร้างเครือข่ายกับผู้เชี่ยวชาญในวงการ
-- **Building a Portfolio:** การสร้างผลงานเพื่อแสดงทักษะและประสบการณ์
+ทีมงานคาดหวังว่าเนื้อหาในบทเรียนนี้จะช่วยให้ผู้อ่านมองเห็นแนวทางในการพัฒนาต้นเองเพื่อเป็น Web Developer นะครับ

paths/web-guideline/intro/devreport.md

@@ -0,0 +1,15 @@
+# Developer SALARY Report
+
+มีรายงานนึงที่ผมอยากแนะนำมากๆเลยครับเกี่ยวกับ Salary Report ในสายงานนี้ครับ 
+
+จัดทำโดยบริษัท [Talance](https://www.facebook.com/techtalance) ร่วมกับสมาคมโปรแกรมเมอร์ไทยครับ 
+
+ทำให้เห็น Insight ที่น่าสนใจว่าปัจจุบันนิยมเขียนโปรแกรมด้วยภาษาอะไรกันครับ
+
+![](./images/web-guideline-21.png)
+
+Download ที่ได้ที่ [talance.tech/developer-salary-report-2023/](https://www.talance.tech/developer-salary-report-2023/)
+
+![](./images/web-guideline-22.png)
+
+Download ที่ได้ที่ [talance.tech/developer-salary-report-2023/](https://www.talance.tech/developer-salary-report-2023/)