แนะนำ HN: HTMX Playground ที่สร้างบนเบราว์เซอร์ 100%

 (lassebomh.github.io)
6 คะแนน โดย GN⁺ 2024-01-09 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

HTMX Playground

  • HTMX Playground เป็นเครื่องมือสำหรับลองเล่นในสภาพแวดล้อมโค้ดแซนด์บ็อกซ์แบบง่ายโดยใช้ HTMX
  • ใช้งานได้ทันทีโดยไม่ต้องตั้งค่าเพิ่มเติม และสามารถดูตัวอย่างที่นำมาจากตัวอย่างต้นฉบับของ htmx.org ได้
  • สามารถเขียนโค้ดในเบราว์เซอร์ได้ในสภาพแวดล้อมที่คล้ายแบ็กเอนด์ โดยกำหนด endpoint ใน server.js และเรนเดอร์เทมเพลตของตัวเองได้
  • รัน mock server ที่คอยดักจับ request ที่ออกจาก HTMX พร้อมมอบการจัดการ request และ template engine ที่คุ้นเคยสำหรับผู้ที่ใช้ Django
  • โปรเจ็กต์นี้ไม่ได้จำกัดอยู่แค่ HTMX เท่านั้น จึงสามารถทดลองใช้ไลบรารีอื่น ๆ ได้อย่างอิสระ

การบันทึกและแชร์

  • กดปุ่ม "Copy as JSON" ที่มุมขวาบนเพื่อคัดลอกในรูปแบบ JSON ได้
  • อัปโหลดเนื้อหาที่คัดลอกไปยัง Gist แล้วใส่ raw URL ใน "Load Playground" จากนั้น URL ของหน้านั้นจะอัปเดตเพื่อให้แชร์ได้
  • โค้ดสามารถใช้งานได้บน GitHub เช่นกัน

ข้อควรระวัง

  • ไม่มีฟีเจอร์นำทางระหว่างหน้า
  • รองรับมือถืออย่างจำกัด
  • server.js สามารถมี state ได้ แต่ถ้าอัปเดต state ใน view on.get("/") การอัปเดตนั้นอาจหายไปได้ เพราะระหว่างการโหลดหน้าเริ่มต้นจะมีการดึงข้อมูลผ่าน iframe แยกต่างหาก

ไลบรารีที่ใช้

  • Svelte
  • Ace (code editor)
  • PollyJS (mock server)
  • Nunjucks (template engine)

GN⁺ ความเห็น

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

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-01-09
ความคิดเห็นบน Hacker News

  • คำขอบคุณจากผู้สร้าง htmx

    • ผู้สร้าง htmx: มีข้อความขอบคุณจากผู้สร้าง htmx โดยกล่าวว่ารู้สึกมีกำลังใจมากที่โปรเจ็กต์ของตนได้รับความสนใจและมีผู้ใช้งาน

  • ความกังวลและคำถามเกี่ยวกับการใช้ htmx

    • ความกังวลเรื่องกลุ่มนักพัฒนา: ผู้ใช้รายหนึ่งเคยพิจารณาใช้ htmx แต่รู้สึกว่ากลุ่มนักพัฒนาที่ใช้มีขนาดเล็ก จึงอาจทำให้การจ้างงานยากลำบาก โดยแชร์ประสบการณ์ว่าการจ้างนักพัฒนา frontend ที่เชี่ยวชาญเฟรมเวิร์กเฉพาะทางนั้นง่ายกว่าการหานักพัฒนา full-stack ที่เชี่ยวชาญจริง นักพัฒนามักไม่อยากจัดการโค้ดที่ซับซ้อน และไม่ต้องการให้ backend developer กลายเป็นคอขวด จึงถามว่า htmx รับรู้ปัญหาเหล่านี้หรือไม่ และมีแนวทางแก้อย่างไร

  • ข้อกังวลเกี่ยวกับ htmx และการรองรับแอปมือถือ

    • การรองรับแอปมือถือ: ผู้ใช้รายหนึ่งบอกว่าชอบแนวคิดของ htmx และเริ่มอ่านหนังสือที่เกี่ยวข้องแล้ว แต่ก็กังวลว่าเมื่อจำเป็นต้องรองรับแอปมือถือ จะต้องเขียนทั้ง frontend และ backend ใหม่ครั้งใหญ่ แม้จะรู้จัก hyperview.org แต่ก็บอกว่าแอป react-native ไม่เหมาะกับกรณีใช้งานที่ตนสนใจ

  • ความเห็นเกี่ยวกับการเลือกเอดิเตอร์และการแสดงข้อผิดพลาด

    • เอดิเตอร์และการแสดงข้อผิดพลาด: ผู้ใช้คนหนึ่งชี้ว่าการรองรับมือถือมีข้อจำกัด และยืนยันว่าควรใช้ Monaco Editor แทน Ace Editor อย่างไรก็ตาม มีคำอธิบายว่าใช้ Ace เพราะ Monaco ตั้งใจไม่ให้ทำงานบนมือถือ พร้อมแนบลิงก์ GitHub issue เพื่อยืนยันข้อมูลนี้

  • แชร์ประสบการณ์ใช้ htmx ร่วมกับ Django

    • การใช้ htmx กับ Django: ผู้ใช้รายหนึ่งบอกว่ากำลังใช้ maplibre, Django และ htmx ร่วมกัน และมีแผนจะโพสต์ตัวอย่างเพื่อแบ่งปันกับคนอื่น

  • ประสบการณ์และฟีดแบ็กจากการใช้ htmx

    • การใช้ htmx และฟีดแบ็ก: ผู้ใช้รายหนึ่งบอกว่าเคยใช้ htmx ในงานและมันทำงานได้ดี และมีแผนจะใช้ต่อไป แต่อาจทำเวอร์ชันที่ใช้ PHP ด้วย นอกจากนี้ยังแชร์ว่าบางครั้งงานที่ทำหายไปเมื่อวาง JSON ลงในช่องโหลด URL และยังมีปัญหาไม่สามารถล้าง network request browser ได้ ซึ่งได้มีการขอฟีเจอร์ไว้แล้ว

  • คำถามเกี่ยวกับการรองรับทางเทคนิค

    • รองรับ ActiveX หรือไม่: ผู้ใช้รายหนึ่งถามว่า htmx รองรับ ActiveX หรือไม่

  • คอมเมนต์เชิงเสียดสีเกี่ยวกับการเลือกเครื่องมือพัฒนา

    • ใช้ Svelte หรือเปล่า: ผู้ใช้รายหนึ่งถามว่า htmx ถูกสร้างด้วย Svelte หรือไม่ พร้อมแซวว่าพวกเคร่ง MPA (Multi-Page Application) อยู่ที่ไหน และอยากรู้ว่าพวกเขาจะมีปฏิกิริยาอย่างไร

  • ความสนใจเกี่ยวกับการพัฒนาแอปออฟไลน์

    • การพัฒนาแอปออฟไลน์: ผู้ใช้รายหนึ่งสงสัยว่ามีใครสร้างแอปออฟไลน์ด้วย htmx และ HTML ผ่านรูปแบบ request-response แล้วกำหนด virtual server ไว้ภายใน service worker หรือไม่

  • ชี้คำผิดในคำอธิบายเว็บไซต์

    • ชี้คำผิด: ผู้ใช้รายหนึ่งชี้ว่าคำอธิบายบนหน้าแรกของเว็บไซต์มีคำสะกดผิด โดยบอกว่า "intersepts" ควรแก้เป็น "intercepts"