by Frevation | Oct 29, 2021 | blog, Web Development
หลังจากครั้งที่แล้ว เราได้ลองใช้ MongoDB Charts ไปแล้ว จะเห็นว่าบางข้อมูล เราไม่ได้ต้องการมากขนาดนั้น เราเพียงต้องการแค่บางส่วนของข้อมูล ซึ่งวิธีการนั้นก็คือการ query ข้อมูลที่เราต้องการ ในที่นี้เราจะมาทำการ query ข้อมูลผ่านการ aggregation ซึ่งทาง Atlas...
by Frevation | Oct 29, 2021 | blog, Web Development
ไฟล์ภาพ .webp เป็นไฟล์ภาพที่ถูกบีบอัดให้มีขนาดเล็กลงโดยไม่เสียคุณภาพของภาพ ไฟล์ .webp จะมีขนาดเล็กกว่า JPG อยู่ประมาณ 30% และสามารถทำให้รองรับรูปภาพ transparent ได้ โดยหากรองรับรูปภาพแบบ transparent จะทำให้ขนาดของไฟล์ใหญ่ขึ้นประมาณ 22%...
by Frevation | Oct 14, 2021 | blog, Web Development
ในการเพิ่มรูปภาพลงไปในหน้าเว็บไซต์ของเราด้วย HTML จะใช้ tag ที่มีชื่อว่า <img> และมีการส่งพารามิเตอร์ชื่อว่า src เข้าไปใน tag เช่น <img src=”elva-fairy-800w.jpg” alt=”Elva dressed as a fairy”> แต่รู้หรือไม่ว่า...
by Frevation | Oct 8, 2021 | blog, Web Development
ปกติแล้วการเขียนเว็บไซต์โดยการใช้ React ย่อมมีการ set route ไปยัง component ต่าง ๆ ที่อยู่ในไฟล์อื่น และในขณะเดียวกัน ในแต่ละ component ก็อาจจะมีการเรียกใช้ component หรือ library ต่าง ๆ มากขึ้น ส่งผลให้เมื่อ app มีขนาดใหญ่ เว็บของเราจะโหลดช้า...
by Frevation | Oct 8, 2021 | blog, Web Development
Next js เป็น open-source React framework ซึ่งต่างจาก react ตรงที่ next js เป็นการใช้ server side rendering และยังสามารถทำเว็ปไซต์ได้ทั้งแบบ static และ dynamic ซึ่งข้อดีของการเป็น server side rendering คือ ช่วยในเรื่อง SEO หรือ search engine optimization เพราะถ้าทำการ...
by Frevation | Sep 28, 2021 | blog, Web Development
Google lighthouse เป็นส่วนขยายใน browser Google Chrome ที่สามารถวัดประสิทธิภาพของหน้าเว็บไซต์ออกมาเป็นคะแนน และยังบอกรายละเอียดของจุดบกพร่องของเว็บไซต์ที่ควรปรับปรุงอีกด้วย ส่วนขยายนี้ถือเป็นอีกหนึ่งตัวช่วยที่จะชี้วัดได้ว่า...