From 856afe14985a1b489f51b99b5b9ab32fe564bf0e Mon Sep 17 00:00:00 2001 From: Ponggun Date: Mon, 22 Jul 2024 21:44:55 +0700 Subject: [PATCH 1/2] Initiate web guideline --- .vitepress/config.mts | 104 ++++++++++++++++++ .vscode/tasks.json | 17 +++ index.md | 3 + paths/sourcecodecontrol/index.md | 15 +++ paths/sourcecodecontrol/scm/scm.md | 1 + paths/web-guideline/backend/backend.md | 1 + .../cloudcomputing/cloudcomputing.md | 1 + paths/web-guideline/community/community.md | 1 + paths/web-guideline/database/database.md | 1 + paths/web-guideline/deployment/deployment.md | 1 + paths/web-guideline/frontend/frontend.md | 1 + paths/web-guideline/index.md | 71 +----------- paths/web-guideline/intro/english.md | 18 +++ .../intro/images/web-guideline-01.jpg | Bin 0 -> 824488 bytes .../intro/images/web-guideline-02.jpg | Bin 0 -> 276325 bytes .../intro/images/web-guideline-03.png | Bin 0 -> 1674539 bytes .../intro/images/web-guideline-04.png | Bin 0 -> 511774 bytes .../intro/images/web-guideline-05.png | Bin 0 -> 1262107 bytes .../intro/images/web-guideline-06.png | Bin 0 -> 430073 bytes .../intro/images/web-guideline-07.png | Bin 0 -> 2307402 bytes .../intro/images/web-guideline-08.png | Bin 0 -> 484063 bytes .../intro/images/web-guideline-09.png | Bin 0 -> 265540 bytes .../intro/images/web-guideline-10.jpg | Bin 0 -> 572271 bytes .../intro/images/web-guideline-11.jpeg | Bin 0 -> 148297 bytes .../intro/images/web-guideline-12.jpeg | Bin 0 -> 241489 bytes .../intro/images/web-guideline-13.jpeg | Bin 0 -> 120658 bytes .../intro/images/web-guideline-14.png | Bin 0 -> 1088061 bytes paths/web-guideline/intro/intro.md | 30 +++++ paths/web-guideline/intro/learningpath.md | 44 ++++++++ paths/web-guideline/intro/setupgear.md | 18 +++ paths/web-guideline/intro/softwareengineer.md | 15 +++ paths/web-guideline/scm/scm.md | 1 + paths/web-guideline/ssh/ssh.md | 1 + 33 files changed, 277 insertions(+), 67 deletions(-) create mode 100644 .vscode/tasks.json create mode 100644 paths/sourcecodecontrol/index.md create mode 100644 paths/sourcecodecontrol/scm/scm.md create mode 100644 paths/web-guideline/backend/backend.md create mode 100644 paths/web-guideline/cloudcomputing/cloudcomputing.md create mode 100644 paths/web-guideline/community/community.md create mode 100644 paths/web-guideline/database/database.md create mode 100644 paths/web-guideline/deployment/deployment.md create mode 100644 paths/web-guideline/frontend/frontend.md create mode 100644 paths/web-guideline/intro/english.md create mode 100644 paths/web-guideline/intro/images/web-guideline-01.jpg create mode 100644 paths/web-guideline/intro/images/web-guideline-02.jpg create mode 100644 paths/web-guideline/intro/images/web-guideline-03.png create mode 100644 paths/web-guideline/intro/images/web-guideline-04.png create mode 100644 paths/web-guideline/intro/images/web-guideline-05.png create mode 100644 paths/web-guideline/intro/images/web-guideline-06.png create mode 100644 paths/web-guideline/intro/images/web-guideline-07.png create mode 100644 paths/web-guideline/intro/images/web-guideline-08.png create mode 100644 paths/web-guideline/intro/images/web-guideline-09.png create mode 100644 paths/web-guideline/intro/images/web-guideline-10.jpg create mode 100644 paths/web-guideline/intro/images/web-guideline-11.jpeg create mode 100644 paths/web-guideline/intro/images/web-guideline-12.jpeg create mode 100644 paths/web-guideline/intro/images/web-guideline-13.jpeg create mode 100644 paths/web-guideline/intro/images/web-guideline-14.png create mode 100644 paths/web-guideline/intro/intro.md create mode 100644 paths/web-guideline/intro/learningpath.md create mode 100644 paths/web-guideline/intro/setupgear.md create mode 100644 paths/web-guideline/intro/softwareengineer.md create mode 100644 paths/web-guideline/scm/scm.md create mode 100644 paths/web-guideline/ssh/ssh.md diff --git a/.vitepress/config.mts b/.vitepress/config.mts index 791a7a6..8a38a4f 100644 --- a/.vitepress/config.mts +++ b/.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,106 @@ 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: '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' }, + ] + } + ] + } + ] } \ No newline at end of file diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 0000000..44694bd --- /dev/null +++ b/.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" + } + ] +} \ No newline at end of file diff --git a/index.md b/index.md index b151e7c..30e1cb5 100644 --- a/index.md +++ b/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 diff --git a/paths/sourcecodecontrol/index.md b/paths/sourcecodecontrol/index.md new file mode 100644 index 0000000..a3c7278 --- /dev/null +++ b/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 ใดๆ โปรดแจ้งให้ผมทราบครับ \ No newline at end of file diff --git a/paths/sourcecodecontrol/scm/scm.md b/paths/sourcecodecontrol/scm/scm.md new file mode 100644 index 0000000..a580cd0 --- /dev/null +++ b/paths/sourcecodecontrol/scm/scm.md @@ -0,0 +1 @@ +# Source Control Management \ No newline at end of file diff --git a/paths/web-guideline/backend/backend.md b/paths/web-guideline/backend/backend.md new file mode 100644 index 0000000..63d8931 --- /dev/null +++ b/paths/web-guideline/backend/backend.md @@ -0,0 +1 @@ +# Backend End Web Development \ No newline at end of file diff --git a/paths/web-guideline/cloudcomputing/cloudcomputing.md b/paths/web-guideline/cloudcomputing/cloudcomputing.md new file mode 100644 index 0000000..838d0e7 --- /dev/null +++ b/paths/web-guideline/cloudcomputing/cloudcomputing.md @@ -0,0 +1 @@ +# Cloud Computing \ No newline at end of file diff --git a/paths/web-guideline/community/community.md b/paths/web-guideline/community/community.md new file mode 100644 index 0000000..810d91c --- /dev/null +++ b/paths/web-guideline/community/community.md @@ -0,0 +1 @@ +# SSH \ No newline at end of file diff --git a/paths/web-guideline/database/database.md b/paths/web-guideline/database/database.md new file mode 100644 index 0000000..ff5dcc7 --- /dev/null +++ b/paths/web-guideline/database/database.md @@ -0,0 +1 @@ +# Database Development \ No newline at end of file diff --git a/paths/web-guideline/deployment/deployment.md b/paths/web-guideline/deployment/deployment.md new file mode 100644 index 0000000..7a9e3e0 --- /dev/null +++ b/paths/web-guideline/deployment/deployment.md @@ -0,0 +1 @@ +# Deployment \ No newline at end of file diff --git a/paths/web-guideline/frontend/frontend.md b/paths/web-guideline/frontend/frontend.md new file mode 100644 index 0000000..9133731 --- /dev/null +++ b/paths/web-guideline/frontend/frontend.md @@ -0,0 +1 @@ +# Front End Web Development \ No newline at end of file diff --git a/paths/web-guideline/index.md b/paths/web-guideline/index.md index a8ffddf..56e66a2 100644 --- a/paths/web-guideline/index.md +++ b/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 เช่น ``, ``, ``, `` -- **Tags and Elements:** แนะนำแท็กพื้นฐาน เช่น `

`, `

`, ``, `` - -**3.2. Adding Styles with CSS** - -- **Inline Styles:** การใช้สไตล์แบบ inline -- **Internal Stylesheets:** การใช้ `