Day: May 23, 2022

  • DevToys รวมเครื่องมือใช้บ่อยของโปรแกรมเมอร์

    cheerasak.s

    เคยมั้ยครับ

    ได้ข้อมูลรูปแบบ JSON มาอยากจัดรูปแบบให้อ่านได้ง่าย (ค้น google หาเว็บจัดรูปแบบ)

    อยาก Decode JWT ออกมาดูก่อนเริ่มเขียนโปรแกรมอ่านค่า (ค้น google หาเว็บ Decode)

    อยากทดสอบ Regex ที่เขียนว่าถูกต้องหรือไม่ (ค้น google หาเว็บทดสอบ)

    ฯลฯ

    https://devtoys.app/

    DevToys คือ ซอฟแวร์ที่รวมเอา Utility ที่เหล่า Dev ใช้งานบ่อยๆเอาไว้ที่เดียวกัน ในรูปแบบ Windows App ทำให้สะดวกต่อการเรียกใช้งานมากครับ และที่สำคัญฟรี เพราะพัฒนาขึ้นโดย Community ของ Dev ที่ทำงานบนระบบปฏิบัติการ Windows แล้วรู้สึกว่าขาดสิ่งอำนวยความสะดวกเหล่านี้ (แนวคิดคล้ายๆกับ PowerToys ชื่อยังล้อกันมาด้วย)

    โดยโปรแกรมนี้ก็จะมีเมนูที่แบ่งหมวดหมู่แยกไว้ตามแต่ละประเภท ดังรูป

    เมื่อเราคลิกเข้าไปในแต่ละเมนู ก็จะมี UI ที่เรียบง่าย สามารถเข้าใจวิธีการใช้งานได้ทันที

    ตัวอย่างการใช้งาน

  • แก้ปัญหาการเรียกใช้ font ผ่าน css แล้วเกิด error Access to font at has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

    sirapat.s

    เนื่องด้วยทางทีมงานต้องการใช้ font ผ่าน css ที่อยู่คนละที่ โดยต้องการให้ไปเรียกที่เดียวเพื่อการจัดการง่าย แต่ปัญหาก็เกิดขึ้น เพราะทางต้นทางมีการ block ไม่ให้เข้าถึง วันนี้จึงมีแนวทางการแก้ปัญหาดังนี้

    ขั้นตอนที่ 1 ไปตั้งค่าไฟล์ font ที่ต้องการ โดยในที่นี้ เป็น folder fonts โดยไปที่ IIS เลือก folder ที่ต้องการ จากนั้นเลือกเมนู “HTTP Response Headers” จากนั้น กด “Add” ดังรูป

    ขั้นตอนที่ 2 เพิ่ม Name: Access-Control-Allow-Origin และ Value: * ดังรูป

    ขั้นตอนที่ 3 ผลลัพธ์จากการเพิ่ม Name: Access-Control-Allow-Origin และ Value: * ดังรูป

    ขั้นตอนที่ 4 เพิ่ม Name: Access-Control-Allow-Origin และ Value: * ที่ไฟล์ font.css ด้วยเหมือนกัน

    ขั้นตอนที่ 5 ปรับแก้การเรียกใช้ css โดยใช้ SRI Hash Generator ผ่าน SRI Hash Generator

    ขั้นตอนที่ 6 เวบไซต์ปลายทางก็จะสามารถเรียกใช้ font จาก เวบไซต์ต้นทาง ดังรูป

    หวังว่าจะเป็นประโยชน์ให้กับคนที่มีปัญหาแบบเดียวกันนี้นะคะ

    ที่มา