แนะนำวิธีการเริ่มพัฒนา Responsive เว็บไซต์ด้วย WordPress ฉบับหัวขโมย

ต้องออกตัวก่อนเลยว่าเหมาะสำหรับคนขี้เกียจมากกว่ามืออาชีพนะครับ ผมแค่อยากแชร์วิธีการขึ้นโปรเจ็คใหม่แบบคลีนๆ เริ่มตั้งแต่เซ็ต WordPress เลย แต่ผมจะไม่เขียนวิธีติดตั้งนะครับ ขอเริ่มตั้งแต่ติดตั้งเสร็จแล้วได้ธีมที่เราจะใช้มาเลยแล้วกัน อันนี้ผมเริ่มจาก Twenty Twenty One เลย ทำไมถึงเลือก Twenty Twenty One? เหตุผลหลักๆเลยคือมันเป็นธีมที่วางโครงสร้างที่จำเป็นมาแบบครบถ้วนแล้วนั่นแหละครับ ครบถ้วนยังไงบ้าง ในมุมมองของผมคือมันมี Sass มาให้ในตัว มี breakpoint สำหรับเช็คขนาดหน้าจอต่างๆมาให้เกือบครบครัน(ผมใช้คำว่าเกือบเพราะมันไม่ได้ใส่จอใหญ่ๆมาให้ ผมไปขโมยมาจาก Bootstrap Breakpoint อีกทีนึงสำหรับจอ 1400px ขึ้นไป วิธีเพิ่มขนาดหน้าจอผมเพิ่มยังไง? ในไฟล์ breakepoints.scss มันจะมีการประกาศช่วงความกว้างของจอแต่ละขนาดอยู่ ผมก็แค่ลอกมาจากจอที่มันเรียกว่า wide สำหรับขนาด 1024px ผมก็แค่เรียกมันว่า wider สำหรับจอ 1400px ขึ้นไป แค่นั้นเอง แล้วมันเรียกใช้งานยังไง? ก่อนอื่นเรามาดูในไฟล์ style หลักมันก่อนดีกว่า ว่ามันเรียกจากไฟล์ไหน ซึ่งผมเฉลยเลยแล้วกันว่าไอ้ไฟล์ style.css ของธีมนี้ มัน compile มาจากไฟล์… Continue reading แนะนำวิธีการเริ่มพัฒนา Responsive เว็บไซต์ด้วย WordPress ฉบับหัวขโมย

Visibility hidden กับ Display none ต่างกันยังไง

คำถามคลาสสิคเกี่ยวกับ CSS จริงๆ เวลาสัมภาษณ์งานเกี่ยวกับ Front-end มักจะโดนถามตลอด คงเพราะเค้าต้องการวัดความรู้พื้นฐานแหละ ผมคิดว่างั้น Visibility มีสองแบบก็คือ visible กับ hidden ง่ายก็คือซ่อนไว้กับแสดงนั่นแหละ ยกตัวอย่างเช่น ปุ่มนึงในหน้าเว็บ ถ้าซ่อนก็ใส่ visibiility:hidden ถ้าแสดงก็ใส่ visibility:visible แค่นั้นเอง ความต่างของ Visibility hidden กับ display none ความต่างคือ display:none จะไม่มีการจองพื้นที่ในหน้าเว็บไว้ให้สิ่งที่เซ็ตค่าเป็น display:none แต่ visibility:hidden จะจองพื้นที่บนหน้าเว็บไว้สำหรับ element นั้น แค่ซ่อนมันไว้เฉยๆ แค่นั้นเองครับ ไม่มีอะไรซับซ้อน ผมแค่อยากเขียนเป็นโน้ตแปะไว้เฉยๆ

Published
Categorized as CSS

ใช้งานไอค่อนในเว็บไซต์จาก Font Awesome

Font Awesome คืออะไร? ขอเกริ่นก่อนเลยแล้วกันครับว่ามันคือไอค่อนต่างที่เราใช้กันบนเว็บไซต์นั่นแหละ และข้อดีคือมันเป็น Vector icon แล้วไอ้เจ้า Vector icon นี่มันคืออะไรหว่า จริงๆมันก็คือ icon ที่ขยายยังไงก็ไม่แตกนั่นแหละครับ คมชัด กริ๊บเหมือนเดิม ไม่ว่าจะขยายให้ใหญ่ขนาดไหนก็ตาม นั่นคือข้อดีของมัน ทำไมถึงต้องใช้ Font Awesome? ปกติเวลาผมรับงานออกแบบมาจากดีไซน์เนอร์เค้ามักจะส่งไฟล์พวก PSD หรือไม่ก็ XD มาให้ ซึ่งในนั้นมันจะมีไอค่อนต่างๆอยู่มากมาย(มั้งนะ) พอเราจะนำมันมาใส่ในหน้าเว็บงี้ เรามีทางเลือกอยู่ 2 ทาง ทางแรกคือขอให้ดีไซน์เนอร์เค้า export มันออกมาให้ หรือทำเองครับ ก็คือจิ้มบน layer ในไฟล์ดีไซน์แล้ว export ออกมาเอง ซึ่งผมก็ไม่ได้ขยันอะไรขนาดนั้น แต่ก็ไม่ได้ชอบรอขนาดนั้นอีกนั่นแหละ เผื่อฝั่งดีไซน์เนอร์เค้าไม่ว่างทำให้ เราก็ต้องรอเค้าอยู่ดี ทางเลือกของเราก็เลยต้องเป็นเลือกใช้งาน Font Awesome ซึ่งมันมีไอค่อนส่วนใหญ่ให้เลือกใช้อยู่แล้ว เรียกว่าครบถ้วนเลยแหละ ไม่ใช่ว่ามันมีแค่ Font Awesome นะครับ มีหลายตัวให้เลือกใช้ แค่ตัวนี้เป็นตัวที่คุ้นเคยกันดี… Continue reading ใช้งานไอค่อนในเว็บไซต์จาก Font Awesome