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

อุปสรรคใหญ่ของคนเขียน 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

คนทำเว็บที่ได้ไปยุ่งกับการเขียน 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

ใช้ Laravel Homestead เป็น Dev Environment

หลังๆ มานี้เทคโนโลยีการทำเว็บมันพัฒนากันเร็วมากครับ  เมื่อก่อนเรามีแค่ PHP, ASP.NET, และ Java เป็นหลักในการทำเว็บ  แต่ทุกวันนี้มีให้เลือกมากขึ้นเพียบ  ทั้ง Ruby, Python, Go, หรือ Node.js

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

ด้วยเหตุนี้มันเลยมีเทคโนโลยีหลายๆ ตัวเข้ามาช่วยกันพื้นที่สำหรับการพัฒนาออกจากคอมปกติ  ซึ่งมักจะใช้ Virtual Machine กันเป็นหลัก  เช่น Docker หรือ Vagrant

Read More

เว็บเซิร์ฟเวอร์ Apache vs Nginx

หลังๆ มานี้เว็บเซิร์ฟเวอร์ Nginx เริ่มได้รับความนิยมมากขึ้นเรื่อยๆ (และเห็นบทความ Apache vs Nginx ออกมาเรื่อยๆ) เนื่องมาจากความเร็วและการที่มันสามารถรับการเชื่อมต่อจำนวนมหาศาลได้เป็นอย่างดี  ดังนั้นในบางสถานการณ์เราคงเริ่มตั้งคำถามกันแล้วว่าจะเลือกใช้ Apache หรือ Nginx ในการทำเว็บไซต์ดี?

Apache vs Nginx

Apache นั้นครองตลาดมาก่อน  โดยเริ่มพัฒนาตั้งแต่ในปี 1995 ทำให้มีเอกสารและชุมชนขนาดใหญ่มากที่คอยช่วยเหลือเวลาเกิดปัญหา  รวมทั้งเว็บไซต์และ CMS จำนวนมากออกแบบมาโดยอิงกับ Apache เป็นหลัก

ในปี 2002 นั้น Nginx ได้ถือกำเนิดขึ้นมา  โดยมีเป้าหมายในการแก้ไขปัญหาการเชื่อมต่อพร้อมกันจำนวนมากๆ (หลักหมื่นคอนเคอร์เรนท์) ซึ่งเริ่มมีปัญหาขึ้นเนื่องจากการเติบโตของอินเตอร์เน็ต

Read More

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

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

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

คลาสขยาย WP_Widget

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

Read More