Categories
Diary

วิธีการสร้างไฟล์ Excel ด้วย SheetJS

การส่งออกไฟล์ในรูปแบบ Excel เดิมถ้าจะเอาวิธีแบบง่าย ๆ เลยคือการส่งออกไฟล์ในรูปแบบ CSV ที่เป็นไฟล์ข้อความที่แบ่งข้อมูลระหว่างคอลัมภ์ด้วยการใช้ตัวอักษรคอมมา (,) เพื่อแบ่งข้อมูล โดยการส่งออกไฟล์ในลักษณะนี้เราส่งออกไฟล์ได้ด้วยการพิมพ์คำสั่ง

Categories
Diary

Pyodide – แนะนำการเริ่มต้นใช้งาน และการพล็อตกราฟเพื่อแสดงบนหน้าเว็บ

Python เป็นภาษาคอมพิวเตอร์ภาษาหนึ่งที่ได้รับความนิยมภาษาหนึ่ง โดยภาษานี้เป็นภาษา General-purpose ท่เน้นการอ่านตัวโค้ดได้ง่าย รวมถึงง่ายต่อการเรียนรู้ ภาษานี้ปกติจะไม่ได้ออกแบบเพื่อการทำงานบนหน้าเว็บไซต์แบบจาวาสคริป อย่างไรก็ดีมีทีมงานกลุ่มหนึ่งใน Mozilla ที่พัฒนาตึวโค้ด CPython ให้ทำงานอยู่บน Webassembly ที่ออกแบบมาให้รันตัวโค้ดที่ได้รับการคอมไพล์บนหน้าเว็บไซต์

เมื่อตัวโค้ดได้รับการคอมไพล์ให้อยู่บน Webassembly แล้ว ตัวโค้ดที่เขียนในรูปแบบภาษา Python จะเข้าถึง Web APIs ทั้งหลายแหล่ที่อยู่บนเว็บเบราวเซอร์ได้นั่นเอง

Categories
Diary

เขียนโค้ดจาวาสคริปเพื่อเช็คว่าใช้งาน MetaMask อยู่หรือไม่

Web3 (ที่ไม่ใช่ Web 3.0 ตามที่คุณ Tim Berners-Lee กล่าวไว้) เป็นเว็บไซต์รูปแบบหนึ่งที่อยู่บนบล็อคเชนที่นำหลักการ Decentralization และหลักการ Token-based economics ตัวอย่างเช่นคริปโต โดย Web3 ที่พบได้ และบางคนก็ใช้ก็ตัวอย่างเช่น DeFi แบบ Pancakeswap หรืออื่น ๆ

อย่างไรก็ดี เวลาที่เปิดใช้งานเว็บแนวนี้เราก็ต้องเช็คก่อนครับว่ามีกระเป๋าตังคริปโต (ที่ได้ยินบ่อยก็เป็น MetaMask) หรือไม่ ถ้ามี เราก็เปิดให้เชื่อมกับกระเป๋าตังสำหรับใช้ทำธุรกรรม Smart Contract หรืออื่น ๆ ต่อได้เลย แต่ถ้าไม่มีก็ให้เว็บแจ้งว่าไม่มี

Categories
Diary

การเขียนโค้ดเพื่อใช้งาน GraphQL โดยไม่ใช้ไลบรารี

เวลาที่ส่งข้อมูลระหว่าง Client และ Server ผ่านทางจาวาสคริปโดยเรียกใช้งานผ่านทาง AJAX ปกติ เราจะส่งข้อมูลโดยวิธี POST ผ่านการพิมพ์โค้ดตามด้านล่างนี้ (ในตัวอย่างจะใช้ XMLHttpRequest แต่จะใช้ Fetch, Axios หรืออื่น ๆ ก็ได้ เพราะได้ผลเหมือนกัน)

Categories
Diary

วิธีการเลือก parent element ด้วย JavaScript

ปกติเวลาที่เราเลือก element ด้วยภาษาจาวาสคริป เราจะใช้คำสั่งที่รู้จักกันอย่าง

document.getElementById("id");
document.document.getElementsByClassName("class name");
document.document.getElementsByName("name");
document.document.getElementsByTagName("tag name");

หรือเลือก element โดยการใช้ CSS Selector ด้วยคำสั่งที่รู้จักอย่าง

document.querySelector("selector");
parent_element.querySelector("selector");
document.querySelectorAll("selector");
parent_element.querySelectorAll("selector");

คำสั่งเหล่านี้ะคืนค่า element ที่เราเลือกไว้ ไม่ว่าจะเป็น element เดียว หรือ element ทั้งหมดที่เราพบในหน้าเว็บเพจนั้น ๆ อย่างไรก็ดีเราต้องการเลือก parent element จาก element ที่อยู่ภายใน จุดนี้เราจะทำได้อย่างไร?

Categories
Diary

ใช้ HTTPOnly Cookies บน Node.js ด้วย Express สำหรับ Access Token

เดิมทีเวลาที่เราใช้งานเพื่อเข้าสู่ระบบ เราจะเขียนโค้ดเพื่อขอ Access Token จากเซิร์ฟเวอร์แล้วนำมาเก็บไว้บน Client เพื่อนำมาใช้งานระบบที่จำเป็น โดยในบทความบนเว็บที่เกี่ยวกับการทำระบบ Authentication โดยใช้ไลบรารี Apollo GraphQL นั้น เราจะเก็บข้อมูล Access Token ที่สร้างขึ้นไว้บน LocalStorage เพื่อนำมาใช้งานต่อครับ

อย่างไรก็ดี การเก็บข้อมูลไว้ในนี้ก็มีปัญหาเรื่องความปลอดภัย ในบทความนี้จะแนะนำวิธีการเก็บข้อมูล Access Token ที่ปลอดภัยกว่าการเก็บบน LocalStorage ครับ

Categories
Diary

Enter Programming – จากเรียนแพทย์เข้ามาเขียนโปรแกรมได้ยังไง?

บทความนี้เราเขียนเสริมจากที่พูดในคาบของอ. advisor ที่สอนให้ในวิชาเลือกของรพ.ริมน้ำที่เกี่ยวกับการเรียน AI สำหรับทางการแพทย์

ช่วงแรก ก่อนเข้าเรียนหมอ

ตอนแรกก่อนเข้าเรียนหมอเรียนภาษา C มาก่อน เรียนเองและเรียนจากค่ายสอวน. คอม (ที่เคยไปถึงโอลิมปิกระดับชาติแล้วได้เหรียญทองแดง) ฝึกตั้งแต่พื้นฐาน, Data Structure & Algorithms และแก้โจทย์ปัญหาบ้างผ่านทางเว็บในสมัยนั้นก็มีเว็บ programming.in.th (ที่ตอนนี้มีหลายเว็บแล้ว เช่น Leetcode)

Categories
Diary

Hello World ใน Python, JS และ C++

Hello World เป็นโปรแกรมที่เขียนขึ้นมาเพื่อแสดงผลหน้าจอว่า “Hello World” ซึ่งเป็นสิ่งที่พบได้ในทุกภาษา และมีไว้แสดงลักษณะการเขียนในภาษาเขียนโปรแกรมนั้น ๆ (Syntax) นอกเหนือจากนี้แล้วการเขียนโปรแกรมนี้ขึ้นมามีหน้าที่ทดสอบว่า เราติดตั้งแล้วสามารถใช้งานตัว Compiler หรือตัว Interpreter ว่าทำงานได้ปกติหรือไม่

ต่อมา เราเขียนทวิตหนึ่งไป แล้วแมสมาพอดี มีโควทหนึ่งในทวิตว่าสนใจที่จะเขียน Hello World เราเลยแสดงให้เห็นว่า การเขียนในภาษาไพทอน จาวาสคริป และ C++ เป็นอย่างไรครับ

Categories
Diary

การใช้ Spread Operator ในภาษาไพทอน

Spread Operator เป็นตัวช่วยให้เราเขียนโค้ดในภาษาจาวาสคริปได้สะดวกขึ้นหลังจากการเปิดให้ใช้ตั้งแต่ ES6 เป็นต้นมา สัญลักษณ์นี้อนุญาตให้เรากระจายข้อมูลใน Array, String, Object ออกมาเป็นตัวแปรเดี่ยว ๆ เพื่อนำไปใช้งานในฟังก์ชัน หรือนำไปใช้สร้าง Array, Object ใหม่ เป็นต้น ตามนิยามของ Mozilla Developer Network ได้ตามนี้

Spread syntax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.นิยามของ Spread syntax จากเว็บ MDN

Categories
Diary

นำแอพที่ใช้ ElectronJS ไปใช้งานบน Surface Pro X

เขียนต่อจากโพสก่อนที่พูดถึงเรื่องแอพที่ใช้ คราวนี้มาพูดถึงการพอร์ตแอพเพื่อนำมาใช้งานบน Surface Pro X ครับ ซึ่งที่เคยทำแล้วทำได้ก็คือคอมไพล์โปรแกรมที่ใช้ไลบรารี Electron ที่อนุญาตให้เราเขียนเว็บแล้วเอามารันบน Desktop ได้เลย

แต่ทีนี้ปัญหาของโปรแกรมที่ให้ดาวน์โหลดก็คือ ตัวโปรแกรมรองรับสถาปัตยกรรม x86 ที่ใช้ 32-bit หรือ 64-bit แต่ไม่ได้เปิดให้ดาวน์โหลดใช้งานสำหรับ ARM64 ยกเว้นบางโปรแกรมตัวอย่างเช่น Visual Studio Code, MS Team เป็นต้น

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

Allow All
Manage Consent Preferences Save