Dwitter - รวมเดโม JavaScript 140 ตัวอักษร

 (beta.dwitter.net)
8 คะแนน โดย GN⁺ 2026-01-11 | 2 ความคิดเห็น | แชร์ทาง WhatsApp
  • Dwitter เป็นแพลตฟอร์มที่ให้คุณสร้างและแชร์เดโมภาพด้วยโค้ด JavaScript ภายใน 140 ตัวอักษร
  • แต่ละโพสต์เรียกว่า 'dweet' และจะแสดงกราฟิกแอนิเมชันที่รันได้ทันทีพร้อมกับโค้ด
  • ผู้ใช้สามารถโต้ตอบกันผ่านคอมเมนต์, รีมิกซ์, แฮชแท็ก ทำให้เกิดการดัดแปลงและสร้างสรรค์ต่อยอดจากโค้ดอย่างคึกคัก
  • สามารถสำรวจคอนเทนต์ยอดนิยมได้ด้วยเกณฑ์การจัดเรียงหลากหลาย เช่น hot, new, top (สัปดาห์/เดือน/ปี/ทั้งหมด)
  • เป็นพื้นที่ทดลองการเขียนโปรแกรมเชิงสร้างสรรค์ที่สร้างเอฟเฟ็กต์ภาพซับซ้อนด้วยโค้ดสั้นมาก

ภาพรวมของ Dwitter.net

  • Dwitter.net เป็นเว็บแพลตฟอร์มสำหรับสร้างเดโมภาพด้วยโค้ด JavaScript ที่จำกัดไว้ 140 ตัวอักษร
    • เดโมแต่ละชิ้นเรียกว่า 'dweet' และสร้างกราฟิกแอนิเมชันที่รันทันทีในเบราว์เซอร์
    • ผู้ใช้สามารถล็อกอินเพื่อเขียน dweet ใหม่ หรือ**รีมิกซ์(remix)**ผลงานที่มีอยู่แล้วได้
  • เว็บไซต์มีเกณฑ์การจัดเรียงหลายแบบ เช่น hot, new, top (สัปดาห์/เดือน/ปี/ทั้งหมด) เพื่อสำรวจคอนเทนต์ยอดนิยม
  • dweet แต่ละรายการมีฟังก์ชันแชร์, เต็มหน้าจอ, รายงาน, คอมเมนต์ให้ใช้งาน

ตัวอย่าง dweet เด่น

  • “Bubble universe colour expansion” ได้รับการยกย่องเรื่องสีสันหลากหลายและเอฟเฟ็กต์ภาพที่ชัดเจน
    • ในคอมเมนต์มีתגובותอย่าง “A whole universe!”
  • “Ants! 🐜” เป็นผลงานที่ถ่ายทอดฝูงมดด้วยโค้ดสั้น ๆ และได้รับคำชมอย่าง “god level dweetage!”
  • “Trees, shadows, hills.” เป็นแอนิเมชันที่บรรยายต้นไม้ เงา และเนินเขา พร้อมเสียงชื่นชมว่า “Amazing stuff!”
  • “Flight Over Destroyed City ✈️” สร้างฉากการบินเหนือเมืองที่ถูกทำลาย
    • ในคอมเมนต์มีเสียงตอบรับเชิงขำขันอย่าง “i love the smell of sulfur and uranium in the morning” ตามมา
  • “Solar Orbit ☀️🌘” สร้างวงโคจรของดาวเคราะห์ภายใน 140 ไบต์ และทำให้ผู้ชมทึ่งกับคำพูดว่า “How did you fit a whole planetary system in 140 BYTES OF JAVASCRIPT!?!?”

กิจกรรมชุมชนและวัฒนธรรมรีมิกซ์

  • dweet แต่ละชิ้นสามารถรีมิกซ์ต่อจากโค้ดของผู้ใช้อื่นได้ โดยมีการระบุลิงก์ต้นฉบับไว้อย่างชัดเจน
  • ในคอมเมนต์มีทั้งฟีดแบ็กเชิงเทคนิค ความเห็นหลังรับชม และมุกตลกผสมกัน จนเกิดบรรยากาศชุมชนที่คึกคัก
  • ผ่านฟังก์ชันแฮชแท็ก ผู้ใช้สามารถสำรวจตามหัวข้ออย่าง #space, #galaxy, #lighting, #scene ได้

คุณลักษณะทางเทคนิค

  • โค้ดส่วนใหญ่ถูกบีบอัดในรูปแบบ eval(unescape(escape...)) และพยายามสร้างเอฟเฟ็กต์ภาพให้ได้มากที่สุดภายใต้ข้อจำกัด 140 ตัวอักษร
  • ภายในโค้ดจะเน้นการใช้Canvas API เพื่อแสดงรูปทรง สี และการเคลื่อนไหว
  • dweet แต่ละชิ้นจะแสดงความยาวโค้ดไว้ด้วย (เช่น “// 136/140”) ทำให้เทคนิคการปรับแต่งและการบีบอัดเป็นองค์ประกอบสำคัญ

พื้นที่ทดลองของการเขียนโปรแกรมเชิงสร้างสรรค์

  • Dwitter เป็นรูปแบบที่ผสานcode golf กับศิลปะเชิงภาพเข้าด้วยกัน และกระตุ้นให้เกิดการแข่งขันด้านความคิดสร้างสรรค์ระหว่างนักพัฒนา
  • กระบวนการสร้างผลลัพธ์ภาพที่ซับซ้อนจากโค้ดเรียบง่ายถูกมองว่าเป็นสุนทรียศาสตร์ของการเขียนโปรแกรม
  • แพลตฟอร์มนี้ทำหน้าที่เป็นพื้นที่ทดลองที่สำรวจเส้นแบ่งระหว่างการแสดงออกทางศิลปะกับการบีบอัดเชิงเทคนิค

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

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

 
roxie 2026-02-27

น่าทึ่งจริงๆ
 
GN⁺ 2026-01-11
ความคิดเห็นจาก Hacker News
  • ดีใจที่ได้เห็นสิ่งนี้บน HN :D
    ขอโทษที่ทำให้ต้องรีบูตเซิร์ฟเวอร์ชั่วคราว ตอนที่เคยเกิดเรื่องแบบนี้ครั้งก่อน ผมได้บทเรียนเลยไปปรับขนาด DigitalOcean droplet แล้ว
  • มันเจ๋งก็จริง แต่ถ้าจำกัดด้วยจำนวนตัวอักษร ก็จะเกิดเมตาเกมของการใช้ อักขระยูนิโค้ดหลายไบต์ เพื่อบีบอัดอักขระ ASCII
    ตัวอย่างเช่น รูปแบบอย่าง eval(unescape(escape\<<97 wide characters>>`.replace(/u../g,'')))` ที่ใช้ยูนิโค้ด 97 ตัวเพื่อกู้คืนเป็น ASCII 194 ตัว
    ผมเลยอยากให้มีข้อตกลงแบบบทสนทนาระหว่าง Ford Prefect กับ Mr Prosser ที่ว่า “ถือว่าใส่ 194 ตัวอักษรลงใน 140 ตัวแล้วก็แสดงมันไปเถอะ”
    ตรรกะก็คล้ายกับข้อจำกัด 4096 ไบต์ของ demoparty ที่ในทางปฏิบัติก็คือบีบอัดไฟล์ 12~20KB ให้พอดีด้วย Crinkler
    • ฟรอนต์เอนด์เบต้า beta.dwitter.net/top มีสวิตช์ “compressed” ให้ดูได้ตามแบบที่ต้องการ
    • อีกวิธีคือจำกัดตาม ไบต์ของ UTF-8 ตรง ๆ (เช่น 140 ไบต์)
    • 140 ไบต์เทียบได้ประมาณอักขระ ASCII 160 ตัว ถ้าไม่นับอักขระควบคุมก็ไปได้ถึง 170 ตัว
    • น่าจะเป็นคอมเมนต์ที่มีคนมาตอบมากที่สุดเท่าที่ผมเคยเห็นบน HN เลย :-)
    • ดีใจที่เจอคนที่จับ HHG(Hitchhiker’s Guide) reference ได้
  • ฤดูหนาวนี้ Dwitter จะครบรอบ 10 ปี
    ผมไปขุดบทสัมภาษณ์เก่ามา เจอว่าน่าสนใจดี: บทสัมภาษณ์บน Medium
    เวทมนตร์ที่แท้จริงอยู่ที่ ชุมชน: ชุมชน Discord
  • ผมรวบรวม สเก็ตช์เชิงกำเนิด ที่ทำใน Dwitter ภายใน 140 ตัวอักษรไว้
    • Fractals
    • Chaos
    • Attractors
    • Spiral Art
    • Fireworks
    • Procedural Scenes
    • Wavelets
    • Top Dweets
    • คุณเป็นหนึ่งใน ดาวเด่น ของ dwitter.net อย่างไม่ต้องสงสัย ผมเลื่อนดู dweetscroll ทุกคืนแทน doomscroll และความคิดสร้างสรรค์ของคุณสร้างแรงบันดาลใจให้มาก
  • เมื่อก่อนผมเคยลงแข่งเล็ก ๆ ใน Authotokey edition ของ Dwitter แล้วชนะด้วยแอนิเมชันเฟือง
    แอนิเมชัน GIF
    รายละเอียดดูได้ใน โพสต์บนฟอรัม Autohotkey
  • พอเห็นเว็บไซต์แบบ Dwitter ก็ทำให้ผมกลับมามีศรัทธาใน ความคิดสร้างสรรค์ของมนุษย์ อีกครั้ง
    ยิ่งมีข้อจำกัด ความหลากหลายก็ยิ่งระเบิดออกมา ทั้งภาพลวงตา ประโยคสั้น ๆ และการทดลองที่พุ่งไปในทิศทางไม่คาดคิด
    ข้อจำกัดช่วยบังคับให้โฟกัส และทำให้ต้นทุนของความล้มเหลวต่ำลงจนกล้าทดลองมากขึ้น
    แพลตฟอร์มส่วนใหญ่มักพยายามขยายความคิดสร้างสรรค์ด้วยการเพิ่มฟีเจอร์ แต่กลับทำให้ซับซ้อนขึ้น
    ผมนึกถึงกฎที่ว่า ข้อจำกัดสร้างความสนุก อยู่บ่อย ๆ
    เลยสงสัยว่ามีตอนไหนบ้างที่ข้อจำกัดทำให้ผลลัพธ์ดีขึ้น และตอนไหนที่มันให้ความรู้สึกเหมือนเป็นเรื่องสมมติ
  • ตอนช่วงแรก ๆ ของ Twitter ผมเคยหมกมุ่นกับ code golf 140 ไบต์ มาก
    ประสบการณ์นั้นเปลี่ยน วิธีคิดเรื่องโค้ด ของผมไปแบบสิ้นเชิง
    ในคอมมูนิตี้เล็ก ๆ เราแชร์เทคนิคประหยัดไบต์กัน พร้อมสร้างทุกอย่างตั้งแต่ Mandelbrot renderer ไปจนถึง Sudoku solver
    ผ่านไป 10 ปี ผมถึงกับช็อกตอนเจอ ตัว implementation UUID ที่ตัวเองเคยเขียนไว้ใน codebase ของบริษัท
    ลิงก์ที่เกี่ยวข้อง: วิดีโอ YouTube, Byte-saving techniques, UUID gist
  • วันนี้เพิ่งรู้ว่า: 
    js_func`string`
    นี่เป็นไวยากรณ์ JS ที่ใช้ได้จริง โดย js_func จะถูกเรียกเป็น tagged template literal
    ต่อไปผมคงได้ลองใช้ console.log\weeee`` แล้ว
    • บางไลบรารีใช้ไวยากรณ์นี้เพื่อรองรับ ไวยากรณ์คล้าย JSX โดยไม่ต้องมี build step
      ตัวอย่าง: htm, lit.dev
    • เมื่อไม่นานมานี้ผมก็ใช้ฟีเจอร์นี้ใน ตัวสร้างภาพในโค้ด ของตัวเอง
      ผมเก็บข้อมูล SVG ขนาดเล็กไว้ในอินไลน์โค้ด แล้วทำ sampler ขนาด 13KB ได้
      ลิงก์ตัวอย่าง
    • ตอนนี้ผมเพิ่งเข้าใจว่าทำไมไวยากรณ์นี้ถึงถูกใช้ใน เทมเพลต SQL และ GraphQL
      ตัวอย่าง: 
      sql`SELECT * FROM users WHERE id = ${userId}`
gql`query GetUser { user(id: ${userId}) { name email } }`
  • ผมชอบ Dwitter แต่ก็อยากให้บล็อกการใช้ eval
    แทนที่จะเป็นแบบนั้น น่าจะเพิ่ม ชอร์ตคัต ให้มากขึ้น เช่น s หมายถึง Math.sign แต่จริง ๆ ยังขยายได้อีก
    • แพลตฟอร์มแบบนี้ต้องมีอยู่ก่อน คนถึงจะหาวิธี “แหก” กติกาได้
      ถ้าไปเปลี่ยนทีหลัง ก็จะเสีย เป้าหมายตายตัว ไปและเสน่ห์ลดลง
      beta.dwitter.net ปรับปรุงการเข้าถึงในแง่การเข้ารหัส แต่ยังคงเป้าหมายตายตัวไว้
      ข้อยกเว้นอย่าง Math.sin หรือ CSS color encoder ถูกเพิ่มเข้ามาด้วยเหตุผลเชิงปฏิบัติ
      ใน Dwitter 2 ก็เคยมีการคุยกันเรื่องใส่ อักขระที่กำหนดไว้ล่วงหน้า เพิ่มขึ้น เพื่อให้ผู้ใช้ขยายเองได้
      สุดท้ายสิ่งสำคัญคือ ความคิดสร้างสรรค์ แม้จะบิดกติกา แต่นั่นเองก็เป็นการกระทำที่สร้างสรรค์
    • ถ้าเปลี่ยนระบบคะแนนให้คิดตาม ไบต์ของ UTF-8 ก็จะแก้ปัญหา eval ได้จากราก
      ยังอาจบีบอัดข้อมูลด้วย string literal ได้ แต่การบีบอัดโค้ดทั้งก้อนจะลดลง
    • ผมใช้ dwitter.net มานาน และพอใจกับการอนุญาตให้ใช้ eval กฎก็คือกฎ (หรือไม่มีกฎเลย)
  • ตัวอย่างที่เกี่ยวข้อง: