Skip to main content

12 posts tagged with "js"

View All Tags

เมื่อต้องสร้างกราฟ Vital Signs ฉบับตามใจผู้ใช้ "จะเอาแบบนี้" แต่เหนื่อยคนทำ (ระบบ EMR)

· 5 min read

Intro

สวัสดีครับ บทความนี้น่าจะเป็นบทความแรกที่เล่าเกี่ยวกับงานที่ทำอยู่ที่ทำงาน ซึ่งเป็นช่วงที่ได้รับ Assigned ให้ทำระบบ EMR

EMR ถ้าจะให้อธิบายง่าย ๆ สั้น ๆ คือระบบที่เป็นเหมือนแฟ้มประวัติการรักษาคนไข้ ซึ่งภายในก็จะประกอบได้วยหลายส่วน (Sections) เช่น ผล Labs, Xray, Med Orders, Vital Signs Chart และอื่น ๆ ขอไม่ลงรายละเอียดลึก

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

สวัสดีปี 2024 ปีที่เดือนกุมภาพันธ์มี 29 วัน และทั้งปีมี 366 วันทำไมถึงเป็นอย่างนั้น ?

· 5 min read

Intro

สวัสดีปี 2024 นี่เป็นบทความแรกของปี และปีนี้ก็เป็นปี Leap year ที่จะเกิดขึ้นทุก ๆ 4 ปี ซึ่งภาษาไทยเรียก "ปีอธิกสุรทิน" [อะ-ทิก-กะ-สุ-ระ-ทิน] ที่มีวันทั้งหมด 366 วัน เพราะเดือนกุมภาพันธ์มีการเพิ่ม 1 วันเป็น 29 วัน

Tailwind CSS เทคนิคและแนวปฏิบัติแบบ Best Practices

· 5 min read

Intro

สวัสดีครับ บทความนี้จะพูดถึง Tailwind CSS สำหรับคนที่เคยใช้งานมาแล้ว เนื่องจากเทคโนโลยีที่ได้ใช้งานบ่อยใช้เยอะช่วงนี้ พอใช้เรียนรู้และใช้งานแบบ Basic มาได้สักพัก ก็ไปค้นหาข้อมูลที่คนอื่น ๆ เขาเขียนและนำนำไว้เพื่อดูเทคนิค (Tips) และแนวปฏิบัติที่ดีที่สุด (Best Practices) ทำให้เจอข้อมูลที่น่าสนใจหลายอย่าง

บทความนี้จึงเป็นการรวบรวมและประเด็นที่น่าสนใจที่ค้นพบ และโน้ต ๆ ไว้อ่าน 🚀

เจาะลึกความลับ References ใน Shallow, Deep, Shadow Copies ใน JavaScript (ตอนที่ 2)

· One min read

Intro

จากตอนที่ 1 เจาะลึกความลับ Shallow และ Deep Copies ใน JavaScript เกิดความสงสัยต่อเรื่องการเก็บ Reference Address ทำให้ตั้งสมมุติฐานว่า ถ้ามีการใช้ Pointer ร่วมกันก็ แสดงว่าก็ส่งผลถึงความเร็ว ประสิทธิภาพ และการใช้ Memory ซึ่งถ้าเราสมมุติว่ามีโค้ดแบบนี้

เจาะลึกความลับ Shallow และ Deep Copies ใน JavaScript (ตอนที่ 1)

· 10 min read

Intro

สวัสดีครับ บทความนี้มีหัวข้อเกี่ยวกับ เจาะลึกความลับ Shallow และ Deep copies ใน JavaScript ที่ผมได้พยายามอ่านและรวบรวมความเข้าใจเขียนเป็นบทความไว้ โดยมีรายละเอียดความคล้าย และความแตกต่างกันพอสมควร ซึ่งบทความมี 2 ตอนดังนี้

ในบทความนี้คุณจะได้เรียนรู้เกี่ยวกับความแตกต่างระหว่าง deep และ shallow copies ใน JavaScript ทำไมเราจึงควรใช้วิธีสร้างแบบใด และเมื่อใดควรใช้อย่างใด เพื่อหลีกเลี่ยงปัญหาที่อาจเกิดขึ้นที่เราอาจจะเข้าใจผิด เพราะความไม่รู้ และเรื่องประสิทธิภาพ

Imgur

เพิ่มประสิทธิภาพลดขนาด App bundle size ด้วย Dynamically Importing กับ React.lazy

· 5 min read

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 เท่านั้น หรือก็จากเงื่อนไขบางอย่าง ตัวอย่างดังนี้

Throttling คืออะไร แตกต่างกับ Debouncing อย่างไร (ตอนจบ)

· 3 min read

Intro

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

Debouncing คืออะไร ?

· 4 min read

Intro

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

สรุปเนื้อหาสำหรับ React ของปี 2022

· 9 min read

Intro

บทความสรุป React cheatsheet นี้จะเป็นการอธิบายเกี่ยวกับ React พื้นฐานเนื้อหาอย่างย่อเพื่อทำความเข้าใจ React อย่างรวดเร็ว และให้คุณเห็นภาพรวมของแนวคิด React ทั้งหมดที่คุณต้องรู้ในปี 2022 มาเริ่มกันเลย!

วิธีทำ Web scraping ดูดข้อมูลจากเว็บอื่นมาใช้ประโยชน์ง่าย ๆ ด้วย Cheerio

· 5 min read

Intro

สวัสดีครับ บทความนี้จะพาทำ Web scraping คือการดูดข้อมูลหรือดึงข้อมูลจาก URL หรือเว็บไชต์อื่น ๆ เพื่อเอาข้อมูลเหล่านั้นมาใช้ประโยชน์ โดยจะมี 2 ขั้นตอนคือ

  1. การดึงข้อมูลหน้าเว็บทั้งหมด
  2. การสกัดเอาเฉพาะข้อมูลที่ต้องการ