เขียน 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

กำหนด Element ให้แสดงข้อความไม่เกินจำนวนบรรทัดที่กำหนด

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

สำหรับข้อความภาษาอังกฤษอาจจะไม่มีปัญหาเท่าไหร่นัก  เพราะเราสามารถใช้ substr() ในการตัดให้เหลือจำนวนตัวอักษรพอดีกับจำนวนบรรทัดที่เราต้องการได้  แต่ภาษาไทยมันไม่เป็นเช่นนั้น  เพราะ substr() มันก็นับสระและวรรณยุกต์เป็นตัวอักษรตัวหนึ่งเหมือนกัน

ทางแก้ของเราคือเราจะใช้การกำหนด line-height,  height และ overflow เข้าช่วยครับ

Read More

รู้จักกับ Inspector เครื่องมือช่วยคนทำเว็บ

Inspector (บางคนก็เรียก Debugger หรือ Developer Tools) เป็นเครื่องมือที่ช่วยให้เราสามารถดูและแก้ไข element ต่างๆ บนหน้าเว็บและดูผลลัพธ์ได้ทันที (แต่จะเป็นการแก้ไขชั่วคราว  รีเฟรชหน้าเว็บก็หาย  เหมาะกับการลองแก้เว็บ  ก่อนจะเอาไปลงไฟล์จริงๆ)  รวมทั้งใช้ตรวจสอบโค๊ดที่ผิดพลาดต่างๆ  การดูค่าของตัวแปรและวัตถุของจาวาสคริปท์   และยังมีฟีเจอร์อำนวยความสะดวกต่างๆ สำหรับคนทำเว็บอีกมากมาย

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

Inspector ในแต่ละเบราเซอร์

ปกติแล้วในแต่ละเบราเซอร์  ก็มักจะแถม Inspector ของตัวเองมาให้ใช้งานด้วยเช่นกัน (หรือถ้าเป็นเบราเซอร์ที่ใช้พื้นฐานมาจาก Chromium ก็จะแถม Developer tools ของ Chrome มาให้ใช้งาน)

Read More

พื้นฐานการทำเว็บแบบ Responsive

Responsive design คือการทำเว็บให้โค๊ดเพียงชุดเดียว  สามารถใช้ได้กับจอหลายๆ ขนาด  เช่นจอคอมพิวเตอร์  จอแท็บเล็ต  หรือจอโน๊ตบุค  ซึ่งการทำเว็บแบบ responsive นั้น  มักจะใช้สำหรับแก้ปัญหาการทำเว็บเวอร์ชันมือถือ  ที่มักจะมีฟีเจอร์เป็นรองเว็บหลักอยู่เสมอๆ  เนื่องจากเว็บ responsive นั้น  ฟีเจอร์ต่างๆ บนเว็บจะยังอยู่ “ค่อนข้างครบ” แต่จะถูกจัดเรียงใหม่ให้เหมาะสมกับขนาดจอนั่นเอง  ต่างจากการทำเว็บเวอร์ชันมือถือแยก  ที่ฟีเจอร์ต่างๆ มักจะตามมาไม่ครบนั่นเองครับ

Media Query หัวใจสำคัญของ Responsive

สิ่งแรกที่ผู้อ่านควรจะรู้จัก  นั่นคือ media query ใน CSS  เพราะมันถือเป็นหัวใจสำคัญของ responsive เลยทีเดียว  ซึ่งเจ้า media query นี้  จะช่วยให้เราตรวจสอบเกี่ยวกับการแสดงผลของอุปกรณ์ที่เปิดเว็บเราอยู่ได้ครับ  เช่นตรวจสอบความกว้าง  ความสูง  ตรวจสอบการเอียงเครื่อง (แนวตั้งหรือแนวนอน) ตรวจสอบอัตราส่วนจอภาพ   ตรวจสอบจำนวนสี  หรือใช้ตรวจสอบมุมมองสำหรับพิมพ์ก็ได้เช่นกัน

Read More

จัดหน้าเนื้อหา HTML ตอนที่ 2

เมื่อวานเขียนเรื่องการจัดหน้าเนื้อหา HTML ตอนแรกไป และมีการตอบรับอย่างล้นหลามมากๆ เรียกได้ว่าคอมเมนต์ถล่มทลาย (ที่ถล่มจริงๆแล้วคือสแปมครับ Akismet จัดการ discard ทิ้งไปเรียบร้อย จากคนนีั่ไม่มีเลย Orz)

แต่เอาเถอะ ไหนๆก็เขียนแล้ว ก็จะสานต่อให้เสร็จในช่วงที่ยังมีไฟอยู่

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

ก่อนอื่น ให้เปิดดูเนื้อหาที่มีการใส่แท็กต่างๆเพื่อจัดเนื้อหาเอาไว้แล้ว ได้ที่ example02.html ครับ

Read More