รวมบทความและบันทึกต่างๆ

บทความต่างๆที่เกิดจากการทำงานในฐานะนักพัฒนาเว็บไซต์ผมรวมไว้ที่นี่ เพื่อเป็นบันทึกส่วนตัวและแบ่งปันวิธีการแก้ปัญหาที่ผมเจอในชีวิตการทำงาน

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

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

Read More

เรียนไปจดไป: MongoDB

บทความนี้เป็นการจดโน้ตในการเรียนคอร์ส MongoDB ส่วนตัวจาก LinkedIn Learning ชื่อ Learning MongoDB ผมจดไว้เตือนความจำเฉยๆ กันลืม มาเริ่มจดกันเลยดีกว่า อันแรกก็สะดุดเลย หาตัว mongoimport.exe ไม่เจอ อยู่ไหนเนี่ย ลง MongoDB ไม่ได้ให้ Tools มาด้วย ต้องดาวน์โหลดแยกจากลิงค์ MongoDB Database Tools

Read More

การ deploy React Project ขึ้น Github Pages

Github Pages คืออะไร? ในมุมมองของผมมันก็คือโฮสต์ฟรีที่เอาไว้เก็บเว็บที่ build จาก React ผมนั่นแหละ(สำหรับบทความนี้น่ะนะ) ซึ่งมันสะดวกมากๆ เพราะเราแค่ตั้งค่านิดหน่อยแล้ว push code ขึ้น Github ปกติ แค่นี้เราก็ได้เว็บไซต์ที่ออนไลน์พร้อมใช้งานแล้ว โดยเฉพาะเว็บไซต์ทั่วๆไปที่ไม่ได้ใช้ฟังก์ชันอะไรมากมาย บอกเลยว่า Github Pages ก็เหลือเฟือแล้ว ตั้งค่าไฟล์ package.json สำหรับการ deploy

Read More

เริ่มต้นพัฒนาเว็บแอ็พด้วย React ต้องทำยังไงบ้าง

บทความนี้ไม่มีอะไรมากครับ ผมแค่อยากมาเขียนไว้กันลืมเฉยๆ เป็นขั้นตอนการเริ่มโปรเจ็คจากการสร้างแอ็พเริ่มต้นจาก create-react-app แล้ว deploy ขึ้นไปบนโฮสฟรีอย่าง Heroku เพื่อทดสอบว่ามันเวิร์ครึเปล่าเท่านั้นเองจริงๆ ก่อนอื่นที่เราต้องมีในเครื่องเลยก็คือ Node js ครับ โหลดจากหน้าเว็บหลักแล้วติดตั้งให้เรียบร้อย ที่เราใช้บ่อยก็คือคำสั่ง npm โน่นนี่นั่นนั่นแหละ ลงเสร็จแล้วก็ลองเช็คดูครับว่ามันเวิร์คมั้ยด้วยคำสั่งด้านล่างนี้ด้วย Command Prompt หรือ Terminal ใน VS Code

Read More

การเช็คขนาดหน้าจอสำหรับทำ Responsive Website (หรือการใช้งาน Css Media Query ในภาษาที่นักพัฒนาเว็บไซต์เรียกกัน)

อันนี้ผมอิงจากของ Bootstrap ตัวล่าสุดนะครับ เลือกเอาแล้วแต่ถนัดว่าจะเอาจากเล็กไปใหญ่ หรือใหญ่ลงมาเล็กตามความถนัดได้เลย ความต่างของการเขียนจากเล็กไปใหญ่คือ mobile first กับ large screen size first ครับ อันแรกคือจอเล็กมาก่อน อย่างหลังคือจอใหญ่มาก่อน ก็คือแบบแรกเช็คจาก Min-width แบบหลังเช็คจาก Max-width หรือจะเช็คเป็นช่วงๆก็ได้ เช็คจาก min-with นี้ ถึง

Read More

การจัดการ On Click element ต่างๆในหน้าเว็บที่ถูกใส่เข้ามาด้วย jQuery

ปกติเวลาคลิ๊ก element ต่างๆเช่นปุ่มหรืออะไรต่างๆเราจะ select ด้วยโค้ดด้านล่างนี้ แต่สำหรับ element ที่เราแทรกเข้าไปด้วย jQuery หลังจากโหลดเพจเสร็จแล้ว เราต้องเขียนโค้ดแบบด้านล่างนี้เพื่อจัดการกับการคลิ๊กแทน

Read More