มาเริ่ม Export PDF แบบง่ายๆกัน ถ้าใครเคยทำด้วย PHP มาก็คงจะพอรู้จัก FPDF ลักษณะคล้ายกันมากครับ แต่จะไม่ง่ายขนาด MPDF ที่สามารถทำโดยใช้ HTML ได้

เริ่มต้นด้วยการเซ็ตหน้ากระดาษ เช่น A4 และย่อหน้าแต่ละข้างของกระดาษไป 45

ถ้าต้องการใส่ password ก่อนที่จะเปิดไฟล์ PDF สามารถทำได้อย่างง่ายๆเลยครับ

userPassword คือ รหัสผ่านที่ต้องการใช้เปิด PDFownerPassword คือ รหัสผ่านนี้มีไว้เพื่อ permissionsprinting คือ อนุญาตให้พิมพ์หรือไม่ โดยระบุ “lowResolution” การพิมพ์ที่ด้อยคุณภาพ หรือ “highResolution” การพิมพ์ด้วยความละเอียดสูงmodifyingคือ อนุญาตให้แก้ไขไฟล์หรือไม่copying คือ อนุญาตให้คัดลอกข้อความหรือกราฟิกหรือไม่annotating คือ ไม่ว่าจะใส่คำอธิบายประกอบ อนุญาตให้กรอกแบบฟอร์มfillingForms คือ อนุญาตให้กรอกแบบฟอร์มและลงนามหรือไม่contentAccessibility คือ อนุญาตให้คัดลอกข้อความสำหรับการเข้าถึงหรือไม่documentAssembly คือ อนุญาตให้ประกอบเอกสารหรือไม

ถ้าเราต้อง Export โดยมีวิธีกำหนดตั้งชื่อไฟล์ได้ ดังนี้

ใครที่อยากใช้ Font ภาษาไทย หรือ ภาษาอื่นๆ สามารถกำหนด Path ของ Font ในโปรเจคของเราได้โดย registerFont ก่อน และตั้งชื่อเพื่อนำมาเรียกใช้

สามารถนำมาเรียกใช้ได้ดังนี้

สามารถใส่ข้อความได้แบบนี้ หรือถ้าจะกำหนด ลงเป็น แกน x, y สามารถกำหนดได้แบบนี้เลย

--

--

How to reduce bundle file (Js.) with Import Cost !

วิธีนี้เป็นทริคเล็กๆน้อยๆ สำหรับคนที่ยังไม่ทราบ วิธีนี้จะช่วยคุม Performance และลดขนาดของไฟล์ลงได้อย่างง่ายดาย

How to reduce bundle file (Js.) with Import Cost !
How to reduce bundle file (Js.) with Import Cost !

ขั้นตอนแรกติดตั้ง Extension ใน VS CODE ที่ชื่อว่า Import Cost มันจะช่วยให้เราสามารถดูขนาดของไฟล์ที่เราทำการ Import มาได้

--

--

Lodash VS Pure javascript แบบไหนทำงานเร็วกว่ากัน ?

ถ้าใครเคยใช้ Functional Programming อาจจะเคยเห็น lodash หรือ underscore ผ่านตา หรือเคยใช้งานมาก่อน หลักๆแล้วบทความนี้จะมาคุยกันเรื่อง Speed Performance บางฟังก์ชัน Support ES5 บางฟังก์ชัน Support ES6 นะครับ

  1. Find

จากผลลัพธ์จะเห็นได้ว่า Find Native เร็วกว่า Find ของ Lodash

_.find lodash vs find native
_.find lodash vs find native

--

--

รอบนี้เรามาแนวลัดไปเลยนะครับ ส่วนคำอธิบายผมจะแปะไว้เป็น Knowledge ด้านล่างนะครับ

how to create mysql with docker

เริ่มต้นลง Docker กันก่อนนะครับ

ถ้าใน Window หรือ Mac ก็โหลดได้ที่หน้าเว็บเลยนะครับ Download Docker

ส่วน Ubuntu ใช้ Command ดูเพิ่มเติม

sudo apt-get updatesudo apt-get install docker docker-engine docker.io containerd runc

วิธีการสร้างมีทั้ง Dockerfile หรือ Docker-compose ไฟล์ ตัวอย่างที่ผมจะยกขึ้นมาเป็น docker-compose.yml นะครับ

สร้างด้วย Docker-compose

สามารถเปลี่ยน container_name หรือ user and password ที่ตั้งเองได้เลยนะครับ หรืออยากใช้ mysql version ไหนก็สามารถ ค้นหาได้ที่ https://hub.docker.com/ เลือก version ที่มีนะครับ หรือจะสร้าง Registry เพื่อไว้ใช้เองก็ได้ครับ

docker-compose.yml
#พิมคำสั่ง 
docker-compose up -d
#หรือ
sudo docker-compose up -d
#สร้างใหม่
docker-compose up -d --build

เสร็จแล้ว ง่ายมากเลยใช่ไหมครับ ทีนี้ก็สามารถนำ Tools อย่างเช่น MYSQL Workbench ไปต่อ Port 8001 ได้เลยครับ ใครที่อยากเปลี่ยน 8001 เป็น 3306 ก็เปลี่ยนที่ Port เป็น 3306:3306 ได้เลยครับ

Knowledge
https://docs.docker.com/engine/reference/commandline/docker/

https://docs.docker.com/get-docker/

https://docs.docker.com/engine/install/ubuntu/

--

--

Optional chaining คืออะไร ? (เครื่องหมาย คำถาม และ จุด)

เป็น operator ที่จะช่วยทำการเช็ค object ที่เราต้องการอ่าน ว่ามีค่าหรือไม่มี ถ้าไม่มีก็จะ return เป็น undefined ให้เราแทนที่จะ ERROR

สามารถใช้กับ Param, Array, Function ได้หลากหลายแบบ เช่น

obj.val?.prop
obj.val?.[expr]
obj.arr?.[index]
obj.func?.(args)
ตัวอย่าง การใช้ Optional chaining (?.)
ตัวอย่าง การใช้ Optional chaining (?.)

ตามตัวอย่าง ไม่สามารถใช้ user.town.street เพราะว่า user.town เป็น undefined จึงใช้ ?. มาคั่นเพื่อให้บอกว่า street มีค่าหรือไม่

ถ้าไม่ — ให้ return undefined

ถ้ามี — ค่าให้ return value ของ street ออกไป

รูปแบบที่แท้จริงของ ?. ก่อนจะแปลงมันจะเป็นอะไร ?

 const nestedProp = obj.first && obj.first.second;

เป็น

const nestedProp = obj.first?.second;

ดูมันสั้นลงเลยใช่ไหมครับ อ่านง่ายขึ้นด้วย

ข้อควรระวัง

จะไม่สามารถใช้ใส่ค่าได้ เช่น

let object = {};
object?.property = 1;
// Uncaught SyntaxError: Invalid left-hand side in assignment

สามารถดูได้ว่า Optional chaining (?.) Support Browser อะไรบ้างได้ที่ https://caniuse.com/

--

--

ใน VS CODE ก็มีการเพิ่ม Function ของ JSDoc เข้ามา ถ้าใครที่ไม่ขึ้นแนะนำให้อัพเดต Version หรือ Install extension เพิ่มก็ได้นะครับ ใช้ได้ทั้ง ไฟล์ js และ ts เลยนะครับ

มันจะสามารถช่วยให้คนในทีมเข้าใจการทำงานของโค้ดได้ง่ายขึ้น เข้าใจประเภทของ Parameter ว่ารับมาเป็นแบบไหน ต้องส่งรูปแบบชนิดอะไรไปบ้าง

jsdoc
ตัวอย่างรูปแบบการตั้ง Type ของ JSDoc

ตัวอย่างที่เป็น Object. VSCODE จะขึ้น Autocomplete มาให้อัตโนมัติ

--

--