Archives

บนความนี้จะเป็นนำเอาแผนที่ประเทศไทย มาแสดงผลการเลือกตั้ง โดยข้อมูลจะเอามาจาก https://vote66.workpointtoday.com/ บางส่วนแต่ตัดทอนออกและทำในรูปแบบ html,css,js แบบง่ายๆเพื่อทำความเข้าใจหลักการใช้งาน svg(Scalable Vector Graphics) คร่าวๆ

บทความการเขียน php เชื่อมต่อ Payment Gateway ขอ 2C2P เพื่อ ทำระบบชำระเงินผ่านบัตรเครดิต

บทความนี้จะนำเสนอการสร้าง  Animation ฟองน้ำ ในหน้าเว็บไซต์ และ สร้างปุ่มควบคุมการหยุดและเล่น เนื่องจากในการทำเว็บที่มีการใส่ Animation สำหรับอุปกรณ์ ที่มีความเร็วก็คงไม่มีปัญหาแต่ถ้าอุปกรณ์ช้าหรืออยากประหยัดพลังงาน คงไม่ดีนักที่จะเปิดเว็บที่มี Animation มากๆ ซึ่งใน Css จึงได้เพิ่ม prefers-reduced-motion media query เข้ามาเพื่อให้ควบคุมการเล่น

ธนาคารกสิกรมีการอัพเดทระบบ payment gateway ใหม่ไม่แน่ใจว่าช่วงไหน ในคู่มือคือ 17/04/2019 ซึ่งก็ไม่มีตัวอย่างของ php มีแต่ java กับ บอกวิธีการทำงานการส่งค่าและรับค่าต่างๆ ซึ่งในระบบใหม่นี้ สามารถชำระเงินได้ ทั้งแบบ ตัดบัตร และ qr code ซึ่งก็ช่วยให้การจ่ายเงินสำหรับลูกค้าในเว็บไซต์สะดวกขึ้น

คำสั่ง Border-Radius ใน css นั้นเป็นคำสั่งสำหรับกำหนดขอบรูปร่าง Element นั้นๆ ให้ขอข้างมีความโค้งเป็นวงกลม โดยจะใส่ค่าตามรูปด้านล่าง จะเป็นการใส่ค่าเดียว ที่ 30% ซึ่งอาจะใช้เป็น px ก็ได้ (ถ้าจะให้เป็นวงกลมใส่ 50%) หรือเราสามารถใส่ 4 ค่าก็ได้ เพื่อให้เป็นวงกลมรูปร่างแปลกตา

ก่อนอื่นเรามารู้จัก css variables คือ การสร้างตัวแปรใน css เพื่อใช้แทนค่าใน selector อื่นๆ ประโยชน์ก็คือสามารถเปลี่ยนข้อมูลในตัวแปลทีเดียว ก็จะเปลี่ยนทั้งหมด

มาทำความรู้จักกับ framework7 ซึ่งเป็น framework เป็น front end ทำ application ในมือถือ ทั้ง ios และ android ซึ่งมี component ต่างๆมากมาย และนอกจากใช้ js ปกติแล้วยังสามารถใช้ควบคู่กับ vue

google page speed insights เป็นเครื่องมือที่ใช้สำหรับตรวจสอบความเร็วเว็บไวต์ ซึ่งจะมี api ที่เปิดไว้ โดยไม่ต้องใส่ api key (ไม่แน่ใจถ้าคนใช้มากๆอาจจะปิดในอนาคต) ซึ่งเราสามารถเรียก api ได้ด้วย url อย่างง่ายๆ และจะได้ข้อมูลของเว็บไซต์นั้น รวมทั้ง รูปภาพ

ในรูปภาพที่เราถ่านในปัจจุบันจะมี ข้อมูลต่างๆฝังอยู่ด้วยเช่น วันเวลา กล้องที่ใช้ โลเคชั่นและอื่นๆอีกมากมาย เรียกว่า Exif ซึ่งเป็น metadata วันนี้ผมจึงลองใช้ หา lib js สำหรับอ่านค่าข้อมูล exif มาชื่อว่า exif-js  เพื่ออ่านค่าและนำค่า Location มาทำการใส่ใน google map

เนื่องจากมีความสงสัยว่า JavaScript นั้นสามารถ capture vdo และ สามารถสร้างไฟล์ gif animation ได้หรือไม่ จึงไปศึกษาหาข้อมูลมาดู สรุปคือสามารถทำได้ จึงมาลองเขียนเป็นโปรแกรมแบบง่ายๆเพื่อศึกษาและเขียนบทความเก็บไว้เผื่อมีงานทำเว็บที่ต้องใช้ในอนาคต