ใช้โปรแกรมอะไรเขียนเว็บไซต์ ?

การเขียนเว็บไซต์ คือการเขียนโค้ดโปรแกรมภาษาต่างๆ ไม่ว่าจะเป็นการเขียนโค้ดภาษา HTML, CSS, JavaScript, PHP หรือภาษาใดๆ ก็ตาม

ดังนั้นโปรแกรมที่จะขาดไปไม่ได้เลยสำหรับการเขียนเว็บไซต์ คือ โปรแกรมประเภท Code Editor หรือโปรแกรมสำหรับแก้ไขโค้ดนั่นเอง

โปรแกรมประเภท Code Editor คืออะไร ?

โปรแกรมประเภท Code Editor คือโปรแกรมที่ถูกออกแบบมาเพื่อการเขียนโค้ดโดยเฉพาะ หรือจะเรียกว่าเป็น Text Editor (โปรแกรมแก้ไขข้อความ) สำหรับการเขียนโค้ดก็ได้ และความสามารถหลักๆ ของโปรแกรมประเภทนี้ได้แก่

Syntax Highlighting

Syntax Highlighting คือ ความสามารถในการทำไฮไลต์โค้ดโปรแกรม เพื่อให้ส่วนต่างๆ ของโค้ดมีสีสันที่สวยงาม และง่ายต่อการจำแนก ว่าส่วนไหนคืออะไร เช่น ช่วยจำแนกว่าส่วนไหนคือ ฟังก์ชั่น, ชื่อตัวแปร, หรือ ชนิดข้อมูล ฯลฯ

Code Completion

Code Completion คือ ความสามารถในการช่วยเราเติมโค้ด เช่น กรณีที่เรากำลังเขียนภาษา JavaScript แล้วเราพิมพ์ว่า document.q ตัวโปรแกรมก็จะคาดเดา และแนะนำสิ่งที่โปรแกรมคิดว่าเรากำลังจะพิมพ์มาให้เราเลือก เช่น document.querySelector() เป็นต้น

โปรแกรมประเภท Code Editor มีโปรแกรมอะไรบ้าง ?

รายชื่อโปรแกรมที่ต่อไปนี้ เป็นโปรแกรมที่ผมคิดว่ามีคุณภาพมากพอที่สมควรแก่การแนะนำ ซึ่งแต่ละโปรแกรมสามารถใช้แทนกันได้ และให้ประสบการณ์การใช้งานที่ใกล้เคียงกัน

  1. Visual Studio Code – free + open source (พัฒนาโดย Microsoft ผู้พัฒนา Windows)
  2. Atom – free + open source
  3. Brackets – free + open source (พัฒนาโดย Adobe ผู้พัฒนา Photoshop)
  4. Sublime Text – ทดลองใช้ฟรีไม่จำกัดเวลา หรือจะซื้อ license เพื่อสนับสนุนผู้พัฒนาก็ได้

เลือกใช้ Code Editor ตัวไหนดี ?

จริงๆ แล้วเราสามารถเลือกใช้โปรแกรม Code Editor ตัวไหนก็ได้ เพราะโปรแกรมเหล่านั้นเป็นเพียงเครื่องมือที่เราสามารถเปลี่ยนไปมาได้ทุกเมื่อ แต่สำหรับผม ผมจะมีหลักการเลือกดังนี้ครับ

  1. เลือกโปรแกรมฟรี เพราะช่วยประหยัดค่าใช้จ่าย (ส่วนโปรแกรมไหนที่คิดว่าซื้อแล้วคุ้ม ก็ควรซื้อครับ)
  2. เลือกโปรแกรมโอเพนซอร์ซ เพราะความเปิดกว้าง ความโปร่งใส และความยั่งยืน
  3. เลือกโปรแกรมที่เป็นที่นิยมสูงๆ เพราะความนิยมจะช่วยให้เรามั่นใจได้ระดับหนึ่งว่าโปรแกรมนั้นดีจริงๆ และโปรแกรมที่ได้รับความนิยมสูงๆ มักจะมีชุมชนผู้ใช้งานที่แข็งแรงมากอีกด้วย
  4. เลือกโปรแกรมที่รองรับหลายระบบปฏิบัติการ เพราะผมไม่ได้ใช้งานแค่ระบบปฏิบัติการเดียว เมื่ออยู่บ้านผมใช้ Linux ส่วนที่ทำงานผมใช้ Windows ดังนั้นคงจะไม่สะดวกเท่าไหร่ หากต้องคอยปรับตัวในทุกๆ วัน เมื่อบน Linux ผมใช้โปรแกรมหนึ่ง ส่วนบน Windows ผมต้องปรับตัวไปใช้อีกโปรแกรมหนึ่ง
  5. เลือกโปรแกรมที่คุณพอใจมากที่สุด เพราะโปรแกรมส่วนใหญ่ จะมีความสามารถคล้ายๆ กัน บ้างก็มีจุดแข็งที่อีกโปรแกรมไม่มี บ้างก็มีจุดอ่อนที่ขัดใจเหลือเกิน สุดท้ายคุณก็ต้องเลือกโปรแกรมที่คุณพอใจมากที่สุดนั่นเอง (คือต้องทดลองใช้หลายๆ โปรแกรมในช่วงแรก)

แล้วผู้เขียนใช้โปรแกรมตัวไหน ?

ในช่วงแรกๆ ผมทดลองใช้ทั้ง Brackets และ Atom ท้ายที่สุดผมก็เลือกใช้ Atom เป็นโปรแกรมหลักนานอยู่หลายปี อาจจะเป็นเพราะผมชอบเลย์เอาท์ของ Atom ที่ดูสบายตา ประสบการณ์การใช้งานที่เรียบง่าย และในช่วงนั้นดูเหมือน Atom จะเป็นที่นิยมมากกว่า Brackets

ช่วงปี 2019 ผมทดลองใช้ Visual Studio Code อยู่พักหนึ่งแต่ก็เลิกใช้ไปเพราะรู้สึกว่าเลย์เอาท์ไม่สบายตา และไม่เรียบง่าย ส่วนในปี 2020 ผมกลับมาทดลองใช้อีกครั้งพร้อมกับการค้นพบวิธีปรับหน้าตาโปรแกรมให้สบายตา และเรียบง่ายใกล้เคียง Atom

สุดท้ายผมก็ได้เปลี่ยนมาใช้ Visual Studio Code ที่สบายตาขึ้น บวกกับเหตุผลที่ว่า Visual Studio Code แทบจะพร้อมสำหรับงานเขียนเว็บไซต์ในทันทีหลังติดตั้งโปรแกรม โดยที่ไม่ต้องตั้งค่าอะไรเพิ่มเติมเลย (จริงๆ แล้วผมก็ยังชอบ Atom อยู่นะ แค่อาจจะต้องตั้งค่าเยอะหน่อย เพื่อให้ความสามารถใกล้เคียงกับ Visual Studio Code หลังติดตั้งเสร็จใหม่ๆ)

สรุป

โดยปกติแล้วการเขียนเว็บไซต์ หรือการเขียนโปรแกรมประเภทอื่นๆ ก็ตาม จะใช้โปรแกรมประเภท Code Editor ในการเขียนครับ แต่การจะเลือกใช้ Code Editor ตัวไหน อันนี้ก็แล้วแต่ความชอบส่วนบุคคล ซึ่งเราก็ไม่จำเป็นต้องยึดติดกับมันมาก เราสามารถเปลี่ยนโปรแกรมที่ใช้ไปมาได้ทุกเมื่อครับ

แบ่งปันสิ่งนี้บน

อยากเขียนเว็บไซต์ เริ่มยังไงดี ?

TL;DR

คำแนะนำของผม ในการเริ่มต้นเขียนเว็บไซต์ให้เป็น คือ การเริ่มลงมือปฏิบัติอย่างจริงจัง อย่ารอให้ตัวเองขยัน หรืออย่ารอให้มีอารมณ์ปฏิบัติ การปฏิบัติที่ว่านี้ก็คือการฝึกเขียนเว็บไซต์ด้วยภาษา HTML, CSS และ JavaScript ซึ่งเป็นพื้นฐานที่สุดสำหรับการเขียนเว็บไซต์ครับ

1. ทำความรู้จักกับภาษาที่ใช้เขียนเว็บไซต์ซะก่อน

เว็บไซต์โดยทั่วไป จะถูกสร้างบนพื้นฐานของภาษาคอมพิวเตอร์ดังต่อไปนี้

  1. HTML (Hypertext Markup Language) คือ ภาษาที่ใช้บอกถึงเนื้อหา และโครงสร้างของหน้าเว็บไซต์ ว่าหน้าเว็บไซต์ประกอบไปด้วยอะไรบ้าง เช่น มีข้อความ, รูปภาพ, ลิงค์, เมนู, ฟอร์มรับข้อมูล หรือปุ่มกด อยู่ตรงไหนบ้าง
  2. CSS (Cascading Style Sheets) คือ ภาษาที่ใช้ตกแต่งหน้าเว็บไซต์ให้มีความสวยงาม เช่น กำหนดสี, รูปภาพพื้นหลัง, เส้นขอบ และระยะห่างของแต่ละองค์ประกอบ เป็นต้น นอกจากนี้ยังใส่ลูกเล่นให้กับเว็บไซต์ได้อีกด้วย เช่น เมื่อเลื่อนเมาส์ไปอยู่เหนือเมนู แล้วเมนูเปลี่ยนสีเป็นต้น
  3. JavaScript (เขียนย่อว่า JS) คือ ภาษาที่ช่วยให้หน้าเว็บไซต์สามารถโต้ตอบกับผู้ใช้งานได้ เช่น เมื่อคลิกปุ่ม แล้วจะมีป๊อปอัพเมนูปรากฏขึ้นมาเป็นต้น

อย่างน้อยที่สุดเว็บไซต์ 1 เว็บไซต์จะต้องประกอบไปด้วยภาษา HTML, ส่วน CSS ถ้าเว็บไซต์นั้นไม่ได้ต้องการความสวยงามมากก็อาจจะไม่ต้องใช้, สุดท้าย JavaScript ถ้าเว็บไซต์นั้นไม่จำเป็นต้องมีการโต้ตอบกับผู้ใช้งานก็อาจจะไม่จำเป็นต้องใช้เช่นกัน แต่โดยทั่วไปแทบหาไม่ได้เลย ที่เว็บไซต์หนึ่งๆ จะใช้ไม่ครบทั้ง 3 ภาษา

นอกเหนือจากภาษา HTML, CSS และ JavaScript ซึ่งเป็นฝั่ง front-end ที่ทำงานบนเว็บเบราเซอร์ ก็ยังมีฝั่ง back-end ที่ทำงานบนเว็บเซิร์ฟเวอร์ อย่างเช่น PHP หรือภาษาอื่นๆ อยู่อีก แต่ผมขอละไว้ก่อน เพราะบทความนี้เป็นเพียงแค่จุดเริ่มต้นเท่านั้น

หมายเหตุ : JavaScript เป็นคนละภาษากับภาษา Java นะครับ

2. ลงมือปฏิบัติ

ถ้าเราเอาแต่หาคำตอบว่าจะเริ่มยังไง แล้วเราไม่เริ่มมันสักที มันก็จะไม่ได้เริ่มครับ ผมแนะนำให้ลงมือปฏิบัติตามขั้นตอนในบทความนี้ไปด้วยครับ เป็นขั้นตอนการสร้างหน้าเว็บไซต์อย่างง่าย ไม่กี่ขั้นตอน ให้คิดซะว่านี่เป็นโอกาสที่ดี ที่คุณจะได้เริ่มต้นกับการเขียนเว็บไซต์ครับ

ผมจะใช้ระบบปฏิบัติการ Windows ในการอธิบายนะครับ ส่วนคนที่ใช้ระบบปฏิบัติการอื่นๆ เช่น Linux หรือ macOS ก็ไม่น่าจะมีปัญหาอะไร ขอแค่คุณรู้จักกับโปรแกรมประเภทเดียวกันนี้ในระบบปฏิบัติการที่คุณใช้ก็พอครับ นั่นคือ

  1. โปรแกรมเว็บเบราเซอร์ (Web Browser) เช่น Chrome, Firefox, Edge, Safari
  2. โปรแกรมแก้ไขข้อความ (Text Editor) เช่น Notepad หรือโปรแกรมแก้ไขโค้ด (Code Editor) เช่น VSCode, Atom, Brackets

คุณจะใช้โปรแกรมไหนก็ได้ แล้วแต่สะดวก แต่ในบทความนี้ผมจะใช้โปรแกรม Notepad และ Edge เพราะว่ามีให้ใช้บน Windows อยู่แล้ว โดยที่ไม่ต้องติดตั้งเพิ่มเติมครับ ส่วนในบทความถัดๆ ไป ผมจะใช้ Editor ตัวอื่นๆ ที่ถูกออกแบบมาเพื่อการเขียนโปรแกรมโดยเฉพาะครับ นั่นคือโปรแกรมประเภท Code Editor นั่นเอง

เอาละเริ่มปฏิบัติ !

1. เปิดโปรแกรม Notepad ขึ้นมา

2. พิมพ์โค้ด HTML ต่อไปนี้ลงไปที่โปรแกรม Notepad หรือจะคัดลอกไปวางเลยก็ได้ครับ

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>เว็บไซต์แรกของฉัน</title>
</head>
<body>
  สวัสดีครับ/ค่ะ นี่คือ เว็บไซต์แรกของฉัน
</body>
</html> 

3. บันทึกไฟล์โดยคลิกที่เมนู File > Save As… และบันทึกไฟล์เป็นชื่อ first.html และในกรณีนี้ผมเลือกบันทึกไฟล์ไว้ที่ Desktop ครับ

4. เปิดดูไฟล์ first.html ที่เราเพิ่งสร้าง ด้วยการดับเบิ้ลคลิก หรือคลิกขวาที่ไฟล์ แล้วเลือก Open with ตามด้วยเลือก Web Browser ที่คุณต้องการ

จากนั้น Web Browser ก็จะแสดงผลหน้าเว็บไซต์ first.html ที่คุณเพิ่งสร้างตามภาพด้านล่าง

ไม่ยากเลยใช่ไหมครับ กับการเริ่มต้นเขียนเว็บไซต์ครั้งแรก

อธิบายสิ่งที่เพิ่งปฏิบัติกันไป

สิ่งที่คุณได้ปฏิบัติไปเมื่อสักครู่ คือการเขียนโค้ดภาษา HTML ครับ ซึ่งโค้ดดังกล่าวยังไม่ได้รวมภาษา CSS และ JavaScript เข้าไป และผมจะขออธิบายโค้ด HTML เมื่อสักครู่แบบง่ายๆ ดังนี้

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>**************</title>
</head>
<body>
  **************
</body>
</html> 

โค้ดส่วนที่นอกเหนือจากเครื่องหมาย * เปรียบเสมือนรูปแบบมาตรฐานที่ทุกเว็บไซต์ต้องมี (จำแบบนี้ไปก่อนครับ) และส่วนที่คุณจะต้องแก้ไขคือส่วนที่ผมทำเครื่องหมาย * ไว้ นั่นคือส่วนของแท็ก title และแท็ก body ครับ

แท็ก title คือ ส่วนที่เป็นชื่อของหน้าเว็บไซต์ครับ ซึ่งจะแสดงอยู่ที่ด้านบนสุดของ Web Browser ดังรูปผลลัพธ์ที่เราเพิ่งเห็นกันไป

ส่วนแท็ก body คือ ส่วนเนื้อหาเว็บไซต์ครับ เราจะระบุเนื้อหาของเว็บไซต์ อันได้แก่ ข้อความ, รูปภาพ, ลิงค์, เมนู, ฟอร์มรับข้อมูล และ ปุ่มกด กันที่นี่ครับ หรือก็คือโค้ดส่วนใหญ่เราจะเขียนกันที่นี่นั่นเองครับ

หมายเหตุ:

  • แบบนี้เรียกว่าแท็ก (tag) : <tagname> หรือ </tagname>
  • แบบนี้เรียกว่าแท็กเปิด (opening tag) : <tagname>
  • แบบนี้เรียกว่าแท็กปิด (closing tag) : </tagname>

ข้อความส่งท้าย

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

ผมจะพยายามเขียนบทความที่ต่อเนื่องกับบทความนี้ และบทความที่เกี่ยวข้องกับการเขียนเว็บไซต์ออกมาเรื่อยๆ ดังนั้นหากคุณชอบบทความแนวนี้ก็สามารถกดติดตาม Facebook แฟนเพจกันไว้ได้ครับ

สุดท้ายนี้ ผมขอขอบคุณทุกท่านที่ตั้งใจอ่านกันจนจบครับ แล้วเจอกันใหม่ในบทความหน้าครับ สวัสดีครับ 🙂

ข้อมูลเพิ่มเติม

แบ่งปันสิ่งนี้บน

วิธีติดตั้ง Docker บน Ubuntu

Docker ปัจจุบันมี 2 Edition คือ Docker CE (Community Edition) และ Docker EE (Enterprise Edition) โดยความแตกต่างของทั้ง 2 Edition นี้ คือ

  1. Docker CE = Docker ตัวเดิม เวอร์ชั่นฟรี (แค่เปลี่ยนชื่อ)
  2. Docker EE = Docker ตัวใหม่ เวอร์ชั่นเสียเงิน

โดยในบทความนี้จะสอนติดตั้ง Docker CE หรือ Docker เวอร์ชั่นฟรีบน Ubuntu กันครับ

Ubuntu เวอร์ชั่นที่สามารถติดตั้ง Docker CE ได้

  • Ubuntu 64-bit เวอร์ชั่น 16.04 / 18.04 / 18.10

ขั้นตอนการติดตั้ง Docker CE

ติดตั้ง package ที่ทำให้ apt สามารถใช้งาน repository ผ่าน HTTPS ได้

sudo apt-get install \
    apt-transport-https \
    ca-certificates \
    curl \
    gnupg-agent \
    software-properties-common

เพิ่ม GPG key ของ Docker

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

เพิ่ม repository ของ Docker

sudo add-apt-repository \
   "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
   $(lsb_release -cs) \
   stable"

ทำให้ apt รู้จัก package จาก repository ที่เราเพิ่งเพิ่มเข้าไปใหม่

sudo apt-get update

ติดตั้ง Docker CE

sudo apt-get install -y docker-ce docker-ce-cli containerd.io

เสร็จแล้วครับ ตอนนี้คุณก็สามารถเริ่มต้นใช้งาน Docker ได้แล้ว !

ขั้นตอนการติดตั้ง docker-compose

เช็คเลขเวอร์ชั่นของ docker-compose ตัวล่าสุดจาก GitHub

DOCKER_COMPOSE_VER=$(curl -s https://github.com/docker/compose/tags | grep "release" | grep -v rc | grep -oP "\d{1,2}\.\d{1,2}\.\d{1,2}" | head -n1)

ดาวน์โหลด docker-compose โดยอิงจากเลขเวอร์ชั่นที่ได้มาจากคำสั่งก่อนหน้า

sudo curl -L "https://github.com/docker/compose/releases/download/$DOCKER_COMPOSE_VER/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

ทำให้ไฟล์ docker-compose ที่โหลดมาสามารถ execute ได้

sudo chmod +x /usr/local/bin/docker-compose

ข้อมูลเพิ่มเติม

แบ่งปันสิ่งนี้บน

วิธี ADD / COPY Hidden File ขณะ Build Docker Image

ปัญหา

เมื่อเราใช้คำสั่ง ADD หรือ COPY ใน Dockerfile เพื่อคัดลอก Hidden File (ไฟล์ในระบบ Linux ที่ชื่อขึ้นต้นด้วยจุด .) ไปยัง Docker Image ในขณะที่เรา Build Image

ถ้าเราใช้รูปแบบคำสั่งเป็น

ADD <src>... <dest>

หรือ

COPY <src>... <dest>

เราอาจจะพบข้อผิดพลาดดังนี้

lstat destdir/.filename: no such file or directory

วิธีแก้ไข

เพื่อหลีกเลี่ยงข้อผิดพลาดดังกล่าว แนะนำให้ใช้คำสั่ง ADD และ COPY ในอีกรูปแบบหนึ่ง ดังนี้

ADD ["<src>",... "<dest>"]

หรือ

COPY ["<src>",... "<dest>"]

ซึ่งโดยส่วนตัวแล้ว ผมคิดว่ารูปแบบนี้น่าใช้กว่ารูปแบบแรก เพราะนอกจากจะใช้คัดลอก Hidden File ได้แล้ว ก็ยังสามารถใช้รูปแบบนี้คัดลอกไฟล์ที่มี Whitespace (เว้นวรรค) ได้ด้วย

ข้อมูลเพิ่มเติม

แบ่งปันสิ่งนี้บน

วิธี save docker image เป็นไฟล์ .tar.gz

เมื่อคุณ save docker image โดยใช้คำสั่ง “docker save” คุณจะได้ไฟล์ออกมาเป็น .tar (tar archive)

docker save image_name > image_name.tar

คำสั่งนี้เป็นแค่คำสั่งที่รวมให้ docker image ซึ่งประกอบไปด้วยไฟล์หลายๆ ไฟล์ออกมาเป็นไฟล์ๆ เดียว แต่ยังไม่ได้ผ่านกระบวนการบีบอัดไฟล์ จึงทำให้ขนาดไฟล์ยังมีขนาดที่ข้อนข้างใหญ่ครับ (แต่ถ้าใครคิดว่าขนาดไฟล์ไม่ใช่ปัญหา ก็ใช้คำสั่งนี้ไปก็ได้ครับ)

วิธี save docker image เป็นไฟล์ .tar.gz

คุณสามารถ save docker image ให้ไฟล์ที่ออกมามีขนาดเล็กลงกว่าเดิมได้ โดยการบีบอัดด้วย gzip โดยใช้คำสั่งด่านล่างนี้ครับ

docker save image_name | gzip > image_name.tar.gz

นอกจากนี้คุณยังสามารถบีบอัดไฟล์ด้วย xz หรือ bzip2 ได้อีกด้วย

เช่น คำสั่งด้านล่างนี้ สำหรับ save docker image เป็น .tar.xz

docker save image_name | xz > image_name.tar.xz

หรือ คำสั่งด้านล่างนี้ สำหรับ save docker image เป็น .tar.bz2

docker save image_name | bzip2 > image_name.tar.bz2

วิธี load docker image จากไฟล์ .tar.gz

ข้อความจากเว็บไซต์ docker

The tarball may be compressed with gzip, bzip, or xz

หมายความว่า คุณสามารถ load docker image จากไฟล์ที่ถูกบีบอัดด้วย gzip, bzip หรือ xz ก็ย่อมได้

ดังนั้นคุณสามารถใช้คำสั่ง “docker load” แบบธรรมดาๆ ได้เลย โดยไม่จำเป็นต้องใส่ option เพิ่มเติมใดๆ เลย เช่น

docker load -i image_name.tar.gz

หรือ

docker load -i image_name.tar.bz2

หรือ

docker load -i image_name.tar.xz

ข้อมูลเพิ่มเติม

แบ่งปันสิ่งนี้บน