Skip to main content

ALL Tags

Search this Blog

10 posts tagged with "best practices"

View All Tags

Kongvut Sangkla

Intro

สวัสดีครับ บทความนี้จะแชร์เทคนิคเพิ่มประสิทธิภาพในการโหลดหน้าเว็บ Apps และขนาดของ Bundle size ด้วย Dynamically Importing Components ของ React.lazy

ใน JavaScript frameworks เช่น React โดยปกติจะใช้ Statically import สำหรับการเรียก Components ซึ่งเมื่อเปิด Apps ก็จะเป็นการเรียกใช้ทันที แต่บางทีก็ไม่ได้มีความจำเป็นที่จะต้องการทันทีขนาดนั้น

Dynamically Importing จึงเป็นเทคนิคที่เข้ามาช่วยแก้ปัญหานี้เพื่อใช้ Import Components เมื่อจำเป็นต้องเรียกใช้เท่านั้น

ปัญหาของ Statically import คือการเรียกใช้ Components ทันทีโดยไม่ได้คำนึงว่าจะใช้งานหรือไม่ แต่ลองคิดดูว่า บาง Component จะ Render หลังจาก User interacts เท่านั้น หรือก็จากเงื่อนไขบางอย่าง ตัวอย่างดังนี้

Kongvut Sangkla

Intro

สวัสดีครับ จากบทความครั้งก่อนได้พูดถึง เทคนิค Debouncing โดยบทความนี้จะพูดถึงเทคนิค Throttling ที่มีความคล้ายคลึงกัน ซึ่งเป็นเทคนิคที่มีประโยชน์ช่วยเพิ่มประสิทธิภาพ Performance ได้ทั้ง Frontend App และ Backend App ที่ช่วยแก้ปัญหาการเกิด callback จำนวนมากจาก Event listeners มีรายละเอียดดังนี้

Kongvut Sangkla

Intro

สวัสดีครับ บทความนี้จะพามารู้จักกับ Debouncing โดย Debouncing เป็นเทคนิคที่มีประโยชน์ในการเพิ่มประสิทธิภาพ Performance ของ Client-side applications โดยเป็นหนึ่งเทคนิคในหลายสิ่งที่สำคัญในการพัฒนา Web App และ Software ซึ่งตามปกติโปรแกรมเมอร์จำเป็นต้องเขียนโค้ดโปรแกรมโดยคำนึง Performance เพื่อที่จะเพิ่มประสบการณ์ผู้ใช้งานที่ดี (UX) กับ Software

Kongvut Sangkla

Intro

สวัสดีครับ บทความนี้จะเขียนอธิบายแนวทางปฏิบัติที่ดีที่สุดสำหรับการเขียน Git commits โดยจะอ้างอิงกับ https://www.conventionalcommits.org/en/v1.0.0/ เป็นหลัก

เคยไหมพบปัญหาสมาชิกในทีมพัฒนาเขียน Git commits มั่ว 😄 ไม่ว่าจะเป็นรูปแบบโครงสร้างไม่ดี หรือใส่รายละเอียดไม่ดี ทำให้การเรียกดูประวัติย้อนหลังเข้าใจยาก ลองมาดูตาม Convention นี้ซึ่งมีรายละเอียดที่เข้าใจง่ายที่ช่วยให้การสื่อสารกับทีมมีความเข้าใจง่ายขึ้นได้

Kongvut Sangkla

Intro

สวัสดีครับ บทความนี้จะเป็นการบบันทึกการใช้งาน useRef createRef และ forwardRef ของ React โดย useRef และ createRef มีความคล้ายคลึงกันมากและแตกต่างกันอย่างไรมาดูกัน 🚀

Kongvut Sangkla

Intro

สวัสดีครับ บทความนี้จะแนะนำแนวทางการใช้งาน React Hooks ที่ชื่อ useMemo และ useCallback คืออะไร มีความสำคัญอย่างไร ช่วยเพิ่มประสิทธิภาพลดการ Render ของ React ที่หนักหน่วงอย่างไร ควร Refactor อย่างไร มาดูกันเลยครับ 😍

Kongvut Sangkla

Intro

ปัจจุปันการพัฒนา API หรือ Microservice เพิ่มขึ้นอย่างมีนัยสำคัญ ซึ่งมีส่วนสำคัญในการใช้แลกเปลี่ยนข้อมูล กรณีมีแอปพลิเคชันในหลายรูปแบบเช่น Web app หรือ Mobile app และ IoT โดยใช้ Restful API เป็นตัวกลางเชื่อมต่อระหว่างแต่ละอุปกรณ์ซึ่งอนุญาตให้แลกเปลี่ยนข้อมูลระหว่าง Server กับ Client โดย Server รับ Requests จาก Client และส่ง Response ข้อมูลกลับ

API

คำว่า API นั้นย่อมาจาก Application Programming Interface ซึ่ง API จะเป็นตัวกลางที่อนุญาตให้แอปพลิเคชันแลกเปลี่ยนข้อมูลผ่าน Endpoint โดย Client จะใช้ API ส่งคำร้องขอ (Request) และตอบกลับข้อมูล (Response) (คล้าย ๆ การสื่อสารระหว่าง 2 อุปกรณ์โดยมี API เป็นตัวกลาง)

Kongvut Sangkla

Intro

พอดีว่าวันก่อน ผมได้รับอีเมลจาก Stack Overflow หัวข้ออีเมลว่า "3 steps to ask a question" ก็ทำนองว่า แนวทางการตั้งคำถาม 🤔 ก็เลยลองกดอ่านดู พบว่ามีประเด็นที่น่าสนใจเลยเอามาเขียนไว้ดังนี้ครับ

Kongvut Sangkla

Intro

Laravel best practices

ที่จริงช่วงนี้เขียน Laravel มาสักพักใหญ่ ๆ แล้วด้วยความที่ส่วนใหญ่จะได้ทำโปรเจคเพียงคนเดียว ประกอบกับที่เพิ่งเข้ามาหัดใช้ Laravel ได้ไม่นาน เลยรู้สึกว่ามาตรฐานในการเขียนของตัวเองนั้นไม่ค่อยจะดีเท่าไหร่ แล้ววิธีการที่ถูกต้องมันควรเป็นแบบไหน ก็เลยลองหาข้อมูลพบว่ามีผู้เขียนบทความ Laravel Best practices ไว้ดีเลย และมีแปลเป็นหลายภาษาอ่านแล้วรู้สึกชอบ ก็เลยถือโอกาส Fork โปคเจคนั้นมาเแปลเป็นภาไทยซะเลย 🚀