แนะนำวิธีการเริ่มพัฒนา 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