บทความนี้มาแบ่งปัน เครื่องมือที่ใช้ทำงานพัฒนาเว็บไซต์ ที่ได้เก็บรวบรวมรายการ Software รวมถึง Resources ต่างๆ ที่ใช้ในการทำงานเป็นประจำ แต่ก็มีบางตัวที่ไม่ได้เกี่ยวข้องโดยตรงแต่ใส่เข้ามาด้วยเพราะน่าจะมีประโยชน์ ตามรายการดังนี้ครับ

เมื่อใช้ Node.js พัฒนาโปรเจ็คหลายชิ้นงาน หรือทำงานร่วมกับผู้อื่น ปัญหาที่มักจะพบเจอคือเวอร์ชั่นของ Node.js ไม่ตรงกัน ทำให้ไม่สามารถรันโปรเจ็คขึ้นมาได้ วิธีแก้อาจจะใช้ Docker หรือไม่ก็ใช้ NVM ซึ่งคือบทความในวันนี้

โดยปกติ Web Application ที่ต้องมีระบบ Login ย่อมต้องมีการใช้งาน Cookies ในการเก็บค่าต่างๆ เพื่อให้รู้ว่ามีการ Login ไปแล้ว เช่น Token หรือ Session เลยทำให้ Cookies นั้นสามารถเป็นเป้าหมายในการโจมตีเพื่อขโมยข้อมูล ไว้ไป เช่น อาจจะเอาไปปลอมแปลงเป็น User เพื่อ Login เข้าใช้งานอีกตัวตนนึง เป็นต้น โดยวิธีการโจมตีช่องโหว่ที่นิยมคือ

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

วิธีใช้ CSS กำหนดลักษณะของ Scrollbar เช่น สี ความกว้าง ซึ่งปัจจุบันโปรแกรม Browsers ส่วนใหญ่ Support เกือบทั้งหมดแล้ว (อ้างอิง Caniuse) โดยมีการกำหนดคุณสมบัติตามตัวอย่างดังนี้

เนื่องจากมีบางโปรเจ็คถูก spam bot มาเยี่ยมเยียนบ่อย เลยคิดว่าหา Captcha มาติดเพิ่มเติมจะดีกว่า เลยมาจบที่แพ็กเกจที่ชื่อว่า No CAPTCHA reCAPTCHA ดูแล้วใช้งานไม่ยากนัก มาดูวิธีติดตั้งและใช้งานเบื้องต้นกันเลยครับกันเลยครับ

การแสดงข้อความออกมาบน console ใน browser นั้นเป็นของที่ต้องใช้บ่อยสำหรับนักพัฒนาที่ใช้ Javascript เพื่อทำการ Debug สิ่งต่างๆออกมานั่นเอง ซึ่งโดยปกติตัวผมเองก็มักจะใช้แค่ console.log อย่างเดียว

NPM คืออะไร สำหรับการพัฒนา Application บน Node.js คำสั่ง npm มีส่วนสำคัญมากสำหรับเรา เพราะ npm มันคือ package manger command หรือตัวที่เราใช้ในการ ติดตั้ง อัพเดท ลบ หรือจัดการแพ็กเกจหรือโมดูลต่างๆ ที่เกี่ยวข้องกับ Node.js โดยเรามาดูคำสั่ง npm เบื้องต้นที่ใช้งานกันบ่อยๆ ครับ

โดยปกติในการสร้างเว็บไซต์เรามักจะมีการกำหนดข้อมูลส่วนกลางที่ต้องใช้ซ้ำ อาทิเช่น ชื่อเว็บไซต์, Url เริ่มต้น หรือข้อมูลพวก เบอร์โทร อีเมล์ ชื่อลิงค์ไปยังแฟนเพจ ทีนี้ถ้ามีหลายหน้าเกิดต้องเปลี่ยนข้อมูล เราก็ต้องไปเปลี่ยนทุกหน้า ซึ่งอาจจะแก้ไขไม่ครบได้ มาดูวิธีการกันครับ

พอดีมีทำระบบเล็กๆ ใช้ LINE notify แจ้งเตือนพนักงานภายในบริษัท เลยมาบันทึกวิธีทำไว้ โดยลักษณะการทำงานก็คือใช้ PHP ยิงเข้า API ของ LINE เพื่อส่งข้อความเข้า Group LINE ที่เราสร้างขึ้น เพื่อไม่ให้เป็นการเสียเวลามาเริ่มกันเลย

Gatsby.js คือ Modern site generator ตัวช่วยสร้างเว็บแบบ Static ของฝั่ง React ที่ทำง่ายอย่างรวดเร็ว ประโยชน์ที่ได้รับคือ สนับสนุน SEO, Progressive Web Application เพราะด้วยที่เป็น Static site มีแค่ HTML/CSS/Javascript จึงเอาไปรันที่ไหนก็ได้ เดี๋ยวเรามาลองติดตั้งครับ

ปัจจุบันผมเขียน React อยู่แต่มีข้อเสียอยู่จุดนึง คือมันไม่สนับสนุน SEO มากนัก ซึ่งมันจะต้องใช้การทำ Server-side rendering (SSR) คือไปพ่น HTML ฝั่ง Server เพื่อให้ Bot มันไต่เว็บเพื่อเก็บมา Index นั่นเอง ซึ่งถ้าเป็น React คงต้อง config ต่างๆมากมายกว่าจะได้ออกมา