Blog

Wara (Baby Thor) Wangtrakoon

Wara (Baby Thor) Wangtrakoon

What interests you about technology and software development?
I studied software engineering when I was a student at university, but it wasn’t something that I became really interested in until I started working with Pronto. Since I’ve been here, I’ve had the opportunity to work with my team who are experts in their fields, and it has increased my interest and awareness in learning more about software development significantly.

สร้าง Project Template แบบง่ายๆ ด้วย Cookiecutter

July 25th, 2016
สร้าง Project Template แบบง่ายๆ ด้วย Cookiecutter

Cookiecutter สามารถช่วยทำให้การสร้าง project template เป็นเรื่องง่าย ตัว template engine ที่ใช้คือ Jinja2 หน้าตาของ templating language จะเหมือนที่ใช้ใน Django แต่ Cookiecutter ไม่ได้จำกัดการใช้งานแค่กับ Python project เท่านั้น ยังใช้กับงานกับ project ภาษาอะไรก็ได้

WordPress PHP Coding Standards

ก่อนอ่านโพสต์นี้ อยากให้อ่าน WordPress Coding Standards สำคัญไฉน? ก่อน

WordPress ถูกพัฒนาด้วยภาษา PHP แต่ว่าโค้ดสไตล์อาจจะต่างกับสำนักอื่นบ้าง แล้วก็อาจจะดูคล้ายๆ กับ Pear Standards บ้าง เราควรจะยึดอย่างใดอย่างหนึ่งเท่านั้น เพื่อให้โค้ดสไตล์ทั้งโปรเจคไปในทิศทางเดียวกัน 🙂 มาดูกันว่ามีอะไรบ้าง (more…)

สร้าง Environment เพื่อใช้ Unit Test ในการพัฒนา WordPress Theme

July 6th, 2016

ในการพัฒนา WordPress Theme หรือซอฟต์แวร์อื่นๆ ก่อนที่จะเปิดให้ผู้ใช้เข้ามาใช้งาน ระบบของเราจะต้องผ่านการทดสอบก่อน ทีนี้การทดสอบนั้นอาจจะแบ่งแยกย่อยมาได้ 2 แบบใหญ่ๆ คือแบบ Manual นั่นคือ Developer/Tester จะมานั่งจิ้มๆ แล้วหาว่าตรงไหนพังหรือไม่พัง แล้วไล่จิ้มตามรายการที่เราลิสต์ไว้ และแบบ Automated หรือแบบที่ Developer/Tester สั่งรันสคริปโป้งเดียวแล้วนั่งจิบเบียร์ดูผลการรัน

แน่นอน ใครๆ ก็อยากทำแบบที่ 2 ทั้งสบาย ทั้งเร็ว ทั้งลดความเสี่ยงที่เราจะพลาดบางจุดไป (แต่ก็ไม่ได้หมายความว่า Manual Test ไม่จำเป็นนะ งานบางอย่างเราก็ต้องใช้ Manual Test อยู่) ดังนั้นโพสต์นี้จะมาเริ่มต้นสร้าง Environment เบื้องต้นสำหรับการเขียน Automated Test แบบหนึ่งที่เรียกว่า Unit Test ในการพัฒนา WordPress Theme กัน

เริ่มต้น สิ่งที่เราต้องเตรียมมี 2 อย่างหลักๆ ไม่รวมพวกฐานข้อมูล หรือพวกเว็บเซิฟเวอร์ คือ

PHPUnit
WordPress Tests

ขอไม่กล่าวถึงวิธีลง PHPUnit บนเครื่องตัวเอง สามารถอ่านวิธีลงได้ในเว็บนั้นอยู่แล้ว แต่ถ้ามีข้อสงสัย ก็สามารถทิ้งคำถามไว้ได้ครับ 😉

เอาละ วิธีลง WordPress Tests ก็ง่ายมาก ใช้โปรแกรม Subversion โหลดโค้ดลงมาไว้บนเครื่องตามคำสั่งข้างล่างนี้
svn checkout http://core.

WordPress HTML Coding Standards

July 6th, 2016

ภาษา HTML ก็มี standard เหมือนกันนะ ลองอ่านเหตุผลว่าทำไมถึงต้องควรทำตาม standard ในโพสต์ WordPress Coding Standards สำคัญไฉน? ดู สำหรับ HTML ซึ่งเป็นโค้ดที่ค่อนข้างจะเปิดเผย ใครจะดูก็ได้ ดังนั้นเวลาที่คนอื่นเค้า view source เล่น หรือเรา view source เอง หรือเราทำเทมเพลตเอาไว้แสดงข้อมูล โค้ดจะได้ดูสะอาดตา สวยงาม และที่สำคัญ เราหาข้อบกพร่องได้ง่าย

ถ้าพอนึกออกว่าทำไมเราถึงควรทำแล้ว เรามาเริ่มดูกันเลย..
Validation
ทุกหน้า HTML ควรจะต้องผ่าน W3C Validator เพื่อให้มั่นใจได้ว่าโค้ดเราเขียนตรงตามมาตรฐานที่เค้าวางไว้
Self-closing Elements
ทุกแท็กจะต้องมีแท็กปิดของมันตลอด แต่บางแท็กที่เป็น self-closing จะไม่มีแท็กปิด อย่างเช่นแท็ก br ให้เราใส่ / ไว้ และเว้นวรรคไว้หน้า / นั้น 1 ครั้ง เช่น
<br />
W3C ก็ว่าไว้อย่างนั้นเช่นกัน
Attributes และ Tags
พวก attribute ทั้งหลาย จะต้องเขียนด้วยตัวพิมพ์เล็กทั้งหมด ค่าพวกนี้มีจุดประสงค์ให้เครื่องคอมพิวเตอร์อ่านเป็นหลัก แต่ว่าถ้าตรงไหนที่จะให้คนอ่าน ก็ให้ใช้ตัวพิมพ์ใหญ่ได้ตามความเหมาะสม เช่น
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<a href="http://example.

WordPress CSS Coding Standards

มาถึงตา CSS Coding Standards บ้างล่ะ ถ้ายังนึกไม่ออกว่าทำไมต้องทำตาม Coding Standards ลองอ่าน WordPress Coding Standards สำคัญไฉน? ก่อนเนอะ
Structure
การ indent ก็จะเหมือนกับของ PHP แต่ละ section ควรจะเว้นสัก 2 บรรทัด แต่ละบล็อกใน section ก็ควรจะเว้นสัก 1 บรรทัด แล้วก็แต่ละ selector ควรจะอยู่ในบรรทัดของใครของมัน คู่ pair ของ property กับ value ก็ควรจะอยู่บรรทัดเดียวกัน จัดให้สวยๆ ในลักษณะนี้
#selector-1,
#selector-2,
#selector-3 {
background: #fff;
color: #000;
}
Selectors
การตั้งชื่อ selector ก็ควรจะเป็นตัวเล็กหมด ถ้ามีหลายคำก็ให้แบ่งด้วย hyphen ( - ) ซึ่งก็ควรตั้งชื่อให้สื่อความหมายเล็กน้อย จะได้พอมองออกว่า element ไหน จะมี style เป็นอย่างไร  แล้วก็บางทีอย่าพยายามใช้เกินความจำเป็น อย่างเช่น div.

WordPress Coding Standards สำคัญไฉน?

July 6th, 2016

Coding Standards มักจะเป็นสิ่งโปรแกรมเมอร์ส่วนใหญ่มองข้ามความสำคัญของมันไป ต่างคนก็ต่างความคิด ต่างสไตล์ แต่ลองนึกดู ถ้าจับโปรแกรมเมอร์พวกนี้มาทำงานโปรเจคเดียวกัน เขียนโค้ดร่วมกัน อะไรจะเกิดขึ้น? โดยส่วนตัวคิดว่า

ไม่มีใครอยากจะอ่านโค้ดของใคร
ไม่มีใครอยากจะแก้โค้ดของใคร ใครเขียนคนนั้นแก้เอง
ไม่มีใครไม่อารมณ์เสียเวลาอ่านโค้ดของคนอื่น
ฯลฯ

นั่นแหละ การเขียนโค้ดที่ดี ต้องเขียนให้คนอ่าน ไม่ใช่ให้คอมพิวเตอร์อ่าน
“Programs are meant to be read by humans and only incidentally for computers to execute.

PHP, WordPress เรามา BDD ด้วย Behat และ Mink

July 6th, 2016

BDD คืออะไรไม่ขอกล่าวถึง !!

แต่วันนี้ผมอยากจะแนำนำให้รู้จักกับ Behat ซึ่งมันคือ BDD Tool สำหรับเหล่า PHP Developer

และก็ยังมี Mink ซึ่งคือ Web acceptance testing framework ที่มาช่วยให้เราสะดวกและง่ายขึ้น

Selenium ซึ่งคือ automates browsers

โดยวันนี้จะแนะนำการใช้ Behat + Mink + Selenium + Ant เพื่อจะสั่งรันแบบ Cross Browsers แบบ Parallel

เริ่มด้วยการติดตั้ง Ant
brew install https://raw.

Watchr ช่วยให้ TDD บน wordpress สนุกขึ้นอีก 100 เท่า

TDD คืออะไรไม่ขอกล่าว (แต่บอกไว้เลยมันทำให้การเขียน code ผมสนุกเว่อร์)

จนอยู่มาวันนึงได้เห็น Kamar ที่เอามาช่วย watch สำหรับการเขียน TDD บน Angular ก็แอบติดใจ ... เพราะมันสนุกและน่าสนใจมาก

เลยนั่งหาข้อมูลเพื่อจะนำมันมาเล่นกับ wordpress บ้างก็เลยได้ไปเจอกับ Watchr และ Growl

เริ่มด้วย Install Watchr

$ sudo gem install watchr
Successfully installed watchr-0.7
1 gem installed
Installing ri documentation for watchr-0.7...
Installing RDoc documentation for watchr-0.7...

หรือ

$ git clone git://github.

ส่อง Database ของ WordPress Navigation Menus Setting

WordPress จะมีส่วน (Appearance → Menus) ซึ่งเป็นที่ที่ใช้ตั้งค่า navigation menus โดยเมนูจะดึงมาจาก Pages และ Posts ที่ถูกสร้างขึ้นใน WordPress Site วิธีการสร้างและใช้งาน Navigation Menus จะไม่ลงรายละเอียด แต่จะพาไปดูว่า WordPress มีการจัดเก็บ Navigation Menus ใน Database อย่างไร

(more…)