เขียน HTML เร็วฟ้าผ่าด้วย Emmet

jirayu on November 10, 2017

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

วันนี้จะพาไปรู้จักกับ Emmet กันครับ

Emmet คืออะไร

ถ้าจะให้พูดกันสั้นๆ Emmet นั้นคือการเขียน HTML ด้วยคำสั่งลักษณะเดียวกับ CSS Selector ครับ  ตัวอย่างเช่นเราพิมพ์คำสั่งดังนี้

div.container>div.row>div.col

จากนั้นเรากด tab บรู้ม! มันก็จะแปลงออกมาเป็นโค้ด HTML แบบนี้ให้ในทันที

<div class="container">
	<div class="row">
		<div class="col"></div>
	</div>
</div>

ง่ายมั้ยล่ะ?

Read More

รู้จักกับ HTTP Request ประเภท PUT และ DELETE

jirayu on December 12, 2015

คนทำเว็บที่ได้ไปยุ่งกับการเขียน HTTP Request (ซึ่งมักจะได้ไปยุ่งกับตอนได้เขียนเว็บเชื่อมกับ API ของอะไรสักอย่าง) คงเคยเห็นเมธ็อดหลักๆทั้ง 4 ประเภท  คือ GET POST PUT และ DELETE แต่เรามักจะได้ใช้กันแค่ GET และ POST เท่านั้น  แต่เรากลับไม่ค่อยได้ใช้ PUT และ DELETE กันเลย

GET และ POST

โดยทั่วไปเรามักจะได้ทำงานกับ GET และ POST เท่านั้น  โดย GET จะเป็นการส่ง URL ร้องขอข้อมูลไปตรงๆ  เช่น

GET http://application.api/user/10012

หรือการส่งไปพร้อมกับคิวรี่สตริงใน URL เช่น

GET http://application.api/search/?keyword=camera

ส่วน POST จะเป็นการส่งข้อมูลกลับไปหาแหล่งข้อมูลที่มีอยู่แล้ว  เช่น

POST http://application.api/user/create

โดยมันจะส่งข้อมูลชุดหนึ่งแนบไปด้วย  อย่างในกรณีตัวอย่างนี้คือจะส่งข้อมูลสำหรับให้สร้าง User ใหม่ไปด้วยนั่นเอง

Read More

การเขียน Widget สำหรับ WordPress

jirayu on May 9, 2015

Widget โดยนิยามแล้วมันคือกล่องเล็กๆ ที่ไว้สำหรับแสดงข้อมูลเพิ่มเติมบน Sidebar (เช่นโพสต์ล่าสุด, กล่องค้นหา, รายการแท็ก, ฯลฯ) ซึ่งตัว WordPress เองก็ได้เตรียมวิดเจ็ตเอาไว้ให้เราจำนวนหนึ่ง  และปลั๊กอินหลายๆ ตัวก็มาพร้อมกับวิดเจ็ตด้วยเช่นกัน  แต่โดยปกติแล้ววิดเจ็ตเหล่านี้มักจะปรับแต่งอะไรได้ไม่มากนายนัก  ทำให้บางครั้งก็ค่อนข้างลำบากในการเอามาใส่ให้เข้ากับเว็บที่ทำอยู่

เนื่องจากงานสองสามงานล่าสุดที่ผมทำนั้นมีการต้องเข้าไปเขียน Widget เพิ่มเติมด้วย (เว็บ TechSauce) โดยเหตุหลักๆ คือวิดเจ็ตที่มากับ WordPress เองนั้นมันหน้าตาไม่เข้ากับ Design นั่นแหละ  ดังนั้นไหนๆ ก็ไหนๆ เอามาลงบล็อกเลยแล้วกัน

คลาสขยาย WP_Widget

Widget ใน WordPress นั้นจะเขียนขึ้นมาในลักษณะ OOP โดยขยายจากคลาส WP_Widget อีกต่อครับ   อ้ออย่าเพิ่งกลัวกับ OOP ครับ  ไม่ยากหรอก   เขียน Widget นี่มันแค่เขียนฟังก์ชันหน้าตา  ฟังก์ชันกล่องตั้งค่า  ฟังก์ชันเซฟค่า  แล้วก็ครอบมันด้วยคลาสโง่ๆ อันนึงแค่นั้นเอง (จริงๆ มันเขียนเป็น Procedural ได้ … แต่ผมไม่เคยเขียนวิดเจ็ตเป็น Procedural ครับ :v ) ไปลองดูโครงสร้างกัน

Read More

[อัพเดท] ผมว่านะ พวกคุณควรเลิกใช้ AppServ ได้แล้วล่ะ

jirayu on December 7, 2014

AppServ ออกเวอร์ชันใหม่แล้วจ้า!!

AppServ ออกรุ่นใหม่แยกเป็น 2 รุ่นครับ  คือรุ่น PHP 5.6 และรุ่น PHP 7.0 ทั้งสองเวอร์ชันมาพร้อมกับ MySQL 5.7 และ Apache 2.4 ครับ

ใครที่ยังเป็นแฟนๆ AppServ อยู่  สามารถเข้าไปดาวน์โหลดได้ในเว็บหลัก AppServNetwork.com ได้เลยครับ (จะเปิดให้โหลดในวันที่ 8 มกราคมนะครับ)

AppServ จัดได้ว่าเป็น WAMP Stack ที่ “โคตรนิยม” ในหมู่คนไทย  นิยมขนาดว่าแม้ว่ามันจะหยุดพัฒนาไปแล้วประมาณ 5 ปี คนไทยก็ยังใช้กันอยู่จนถึงทุกวันนี้ (ตายยากน้องๆ Windows XP เลยนะเนี่ย)  คือในช่วงสามสี่ปีที่แล้วมันก็ยังโอเคนะครับ  ยังพอจะใช้กันได้แบบไม่มีปัญหา  แต่ปัจจุบันด้วยความเก่าของมัน  ทำให้หลายๆ คนเจอปัญหาเมื่อเอาเว็บไปลงใน Production กันแล้วครับ

ปัญหาหลักๆ ที่มักจะเจอกันคือปัญหาของเวอร์ชัน PHP ครับ ในขณะที่ซอฟต์แวร์ตัวอื่นใน AppServ ดูไม่ค่อยจะเป็นปัญหาเท่าไหร่ (ถ้าไม่ได้มักง่ายขนาดเอา AppServ ไปทำ Production Server นะ)

PHP 5.2 ปัญหาสำคัญใน AppServ

AppServ หยุดพัฒนาไปเมื่อปี 2009 และเวอร์ชันสุดท้ายของ AppServ มันมาพร้อมกับ PHP 5.2 ที่เลิกซัพพอร์ตไปตั้งแต่ปี 2011 ครับ  ในขณะที่โฮสต์ส่วนใหญ่ที่เปิดให้บริการอยู่ตอนนี้  เท่าที่ผมทราบคือจะใช้ PHP 5.3 กันเป็นหลัก (5.3 ก็เพิ่งหมดซัพพอร์ตไปเมื่อเดือนสิงหาคมที่ผ่านมาครับ  คิดว่าโฮสต์หลายที่น่าจะไล่อัพเกรดเป็น 5.4 หรือ 5.5 กันอยู่)

อ้อ มันมีรุ่นที่มากับ PHP6-Dev ด้วย  อันน่าช่างหัวมันครับ PHP6 โดนฝังกลบไปแล้ว (แถมมันก็เป็น build เมื่อปี 2009 นั่นแหละ) Major รุ่นถัดไปจะเป็น PHP7 ครับ

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

Read More

แก้ปัญหา meta_compare ทำงานไม่ถูกต้องใน WordPress

jirayu on November 29, 2013

ใน WordPress เราสามารถสั่ง Query โพสต์ออกมาตามค่าใน custom field ได้ (หรือชื่อในเชิงเทคนิคคือ Post Meta) ด้วยการเพิ่มอาร์กิวเมนต์ meta_query ลงไปในขั้นตอนการคิวรี่  อย่างนี้

$args = array(
	'post_type' => "mytype",
	'meta_query' => array(
		array(
			'key' => "mymeta",
			'value' => "myvalue",
			'compare' => "="
		)
	)
);

$myQuery = new WP_Query($args);

ซึ่งตามตัวอย่างข้างบน  จะเป็นการสั่งคิวรี่โพสต์จากโพสต์ไทป์ mytype โดยจะดึงจากโพสต์ที่มีค่า mymeta เท่ากับ myvalue

การคิวรี่นี้จะไม่เกิดปัญหาใดๆ ตราบใดที่เป็นการคิวรี่ตาม string ธรรมดา  แต่เมื่อใดก็ตามที่ต้องการเปรียบเทียบในลักษณะอื่นที่นอกเหนือจากข้อความธรรมดา (เช่นตัวเลข  หรือวันที่) การคิวรี่ด้วย meta compare ธรรมดาแบบนี้จะมีปัญหาทันที  เนื่องจากตัว WordPress จะมอง custom field เป็น string ธรรมดาๆ เป็นค่าปริยาย

Read More