Launch HN: Haystack (YC S24) – เทคโนโลยีสำหรับแสดงภาพและแก้ไขโค้ดบนแคนวาสไร้ขอบเขต

 (github.com/haystackeditor)
2 คะแนน โดย GN⁺ 2024-09-27 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • Haystack Editor เป็นผลิตภัณฑ์ที่ผสานความเรียบง่ายของ code editor เข้ากับ canvas UI เพื่อให้เข้าใจโค้ดได้ง่ายในภาพรวม และพัฒนาร่วมกับชุมชนใน repository นี้
  • repository นี้เปิดเผยไม่เพียงโค้ดและ issue แต่ยังรวมถึง roadmap ด้วย และ source code เผยแพร่ภายใต้ PolyForm Strict License 1.0.0
  • distribution ของผลิตภัณฑ์เป็นรูปแบบที่ต่อยอดจาก repository นี้พร้อมการปรับแต่งเฉพาะบางอย่าง และเผยแพร่ภายใต้ terms of service แยกต่างหาก
  • ตัวอย่างฟีเจอร์ ได้แก่ Canvas Workspaces, Explorer View, Keyboard Navigation, Generate Function และครอบคลุมการช่วยแก้ไข·สำรวจ·ทำความเข้าใจโค้ดแบบครบถ้วน รวมถึงการ debug แบบเบา ๆ, โมเดลส่วนขยาย และการเชื่อมรวมกับเครื่องมือเดิมแบบเบา ๆ
  • Haystack อัปเดตทุกสัปดาห์ด้วยฟีเจอร์ใหม่และการแก้บั๊ก และดาวน์โหลดได้สำหรับ Windows, macOS, Linux

บทบาทของ repository Haystack Editor

  • repository นี้เป็นพื้นที่ที่ Haystack Software ใช้พัฒนาผลิตภัณฑ์ Haystack Editor ร่วมกับชุมชน
  • นอกจากงานด้านโค้ดและ issue แล้ว ยังเปิดเผย roadmap ด้วย
  • source code เผยแพร่ภายใต้ PolyForm Strict License 1.0.0

ผลิตภัณฑ์ Haystack Editor

  • Haystack Editor เป็น distribution ของ repository Haystack Editor และมีการปรับแต่งเฉพาะบางอย่างรวมอยู่ด้วย
  • distribution นี้เผยแพร่ภายใต้ terms of service แยกต่างหาก
  • ผลิตภัณฑ์ผสานความเรียบง่ายของ code editor เข้ากับ canvas UI เพื่อให้เข้าใจโค้ดได้ง่ายในภาพรวม
  • ขอบเขตการรองรับรวมถึงสิ่งต่อไปนี้
    • การแก้ไขโค้ด แบบครบถ้วน
    • การสำรวจโค้ด
    • การช่วยทำความเข้าใจโค้ด
    • การ debug แบบเบา ๆ
    • โมเดลส่วนขยายที่สมบูรณ์
    • การเชื่อมรวมกับเครื่องมือเดิมแบบเบา ๆ
  • Haystack อัปเดตทุกสัปดาห์ด้วยฟีเจอร์ใหม่และการแก้บั๊ก
  • สามารถดาวน์โหลดเวอร์ชันสำหรับ Windows, macOS, Linux ได้จาก เว็บไซต์ Haystack

ตัวอย่างฟีเจอร์

  • มีฟีเจอร์ Canvas Workspaces
  • มีฟีเจอร์ Explorer View
  • มีฟีเจอร์ Keyboard Navigation
  • มีฟีเจอร์ Generate Function

ช่องทางการมีส่วนร่วมและให้ข้อเสนอแนะ

  • มีหลายวิธีในการเข้าร่วมโปรเจกต์
  • หากต้องการมีส่วนร่วมโดยตรงกับ codebase ให้ดูเอกสาร How to Contribute
    • วิธี build และรันจาก source
    • workflow การพัฒนา รวมถึงการ debug และการรัน test
    • การส่ง PR
    • การหา issue ที่จะทำ
  • ช่องทาง feedback มีดังนี้

โปรเจกต์ที่เกี่ยวข้องและส่วนขยายที่ bundle มาให้

  • คอมโพเนนต์หลักและส่วนขยายหลายรายการของ Haystack อยู่ใน repository แยกบน GitHub
  • ตัวอย่างเช่น node debug adapter และ mono debug adapter เป็น repository แยกจากกัน
  • อีกตัวอย่างหนึ่งคือ Pixi repository
  • Haystack มี ส่วนขยายในตัว หลายรายการอยู่ในโฟลเดอร์ extensions
    • มี grammar และ snippet สำหรับหลายภาษา
    • ส่วนขยายที่ให้การรองรับภาษาขั้นสูง เช่น code completion หรือ Go to Definition ใช้ suffix language-features
    • ตัวอย่างเช่น ส่วนขยาย json ให้การลงสี JSON และส่วนขยาย json-language-features ให้การรองรับภาษาขั้นสูงสำหรับ JSON

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

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

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

  • ไอเดียนี้ยอดเยี่ยมมา หลายสิบปีแล้ว หวังว่า Haystack จะประสบความสำเร็จเหมือนกับความพยายามก่อนหน้านี้หลาย ๆ ครั้ง และการลงมือทำช่วงแรกก็ดูมีแวว
    แต่ก็น่าจะมีอุปสรรคมากมาย เช่น การทำความเข้าใจ caller/callee ที่ยาก หรือความชอบด้าน UX ที่ต่างกันไปตามนักพัฒนาแต่ละคน ผมคิดมาตลอดว่ามันอาจทรงพลังกว่านี้ในสภาพแวดล้อมที่มีพื้นที่กว้างกว่าหน้าจอ 2D มาก เช่น เฮดเซ็ต VR

    • ชอบไอเดีย โลก Haystack VR มาก น่าเสียดายที่ซอฟต์แวร์ VR ยังอยู่ในสภาพไม่มั่นคงเพราะปัจจัยทางชีววิทยา แต่เชื่อว่าสักวันหนึ่งมันจะเป็นอนาคต

  • เจ๋งมาก ลองจินตนาการว่า codebase ทั้งหมดขององค์กรถูกแมปแบบนี้ และมองเห็นข้าม เฟรมเวิร์กและภาษา หลายแบบ
    ไม่แน่ใจว่าผมพลาดในวิดีโอไปหรือว่ายังทำไม่ได้ แต่การเชื่อมโหนดเองคงเป็นงานมือเยอะเกินไป ถ้ามีบ็อตง่าย ๆ ที่รันในโฟลเดอร์ repository แล้วทำ visualization ให้อัตโนมัติได้ก็คงดี เพิ่มไว้ในรายการที่สนใจแล้ว
    ถ้าเป็นผมจะเล็ง องค์กรขนาดใหญ่หรือกลุ่ม IT ของเทศบาล/หน่วยงานท้องถิ่น ที่กำลังทำหรือวางแผน digital transformation เพราะพวกเขาต้องการการนำทางและการทำความเข้าใจความหมายระหว่างงาน legacy กับงานใหม่
    ถ้าไปได้สวย ภายในหนึ่งปี Salesforce อาจเข้ามาหาได้ ดูเหมือนจะเข้ากับวิสัยทัศน์และชุดผลิตภัณฑ์ของพวกเขาไม่น้อย

    • ชอบคอนเซปต์ที่เห็นในวิดีโอ แต่ผมอยากเห็นแบบที่ใหญ่ขึ้น มีหน้าต่างมากขึ้น และทุกอย่างเชื่อมต่อกัน
      ไม่รู้ว่าถึงตอนนั้นจะใช้งานจริงได้แค่ไหน แต่คงน่าสนุกถ้าได้ลอง เหมือน UML diagram ของทั้ง codebase ที่มีลูกศรเป็นพัน ๆ เส้น
      แบบนั้นก็จะบอกเพื่อนร่วมงานได้ว่าไฟล์ที่ต้องแก้อยู่ตรงมุมขวาบนสักที่ และ diff ของ Git ก็เห็นเป็นภาพ ทำให้ซูมดูส่วนที่เปลี่ยนไปตรงโน้นตรงนี้ได้
    • ถ้าไล่ตามไฟล์หรือสัญลักษณ์ การเชื่อมต่อจะถูก เพิ่มให้อัตโนมัติ ไม่แน่ใจว่านี่คือสิ่งที่หมายถึงหรือเปล่า แต่เราพยายามให้ “flow” แก่ผู้ใช้ตามคำถามภาษาธรรมชาติ
      เช่น จัดการคำถามอย่าง “ตั้งแต่ตอนคลิกปุ่ม subscribe ด้วยเมาส์ไปจนถึง backend เกิดอะไรขึ้นบ้าง”
    • ถ้าสามารถ “เชื่อม” ไปถึง API call ที่ไปยัง service ต่าง ๆ ได้ก็น่าสนใจ

  • สงสัยว่าโปรเจกต์นี้ได้รับแรงบันดาลใจจาก Light Table หรือไม่
    ในแง่ feature request อยากให้ขยาย visualization ให้ไกลกว่า 2D ระบบที่ซับซ้อนจริง ๆ มักเป็นกราฟที่ประณีต หรือพูดให้ดีคือเหมือนก้อนด้ายพันกัน จากประสบการณ์ที่ผ่านมา การทำ visualization บนระนาบ 2D อย่างเดียวไม่พอ
    ถ้ามีอะไรอย่าง การแสดงผลทรงกลมซ้อนศูนย์กลาง โดยชั้นนอกเป็น boundary service และชั้นในเป็น core/domain service ก็คงดี

    • หลายคนพูดถึง Light Table แต่เราเพิ่งรู้จักหลังจากเปิดตัวไปแล้ว
      น่าสนใจที่พูดถึงมุมมองที่ ใกล้เคียง 3D มากขึ้น เราเคยคิดไอเดียนี้ไว้ แต่การทำให้ดีในแบบที่ผู้ใช้เข้าใจได้ยากจริง ๆ ถึงอย่างนั้นมันก็อยู่ในวิสัยทัศน์อนาคตแน่นอน
      แก้ไข: ลบการคาดเดาเกี่ยวกับ Light Table เพราะไม่เป็นความจริง
    • นอกจาก Light Table ในยุค 2010s แล้ว หวังว่าคงรู้จัก Oberon ช่วงปลายยุค 1980s ด้วย Oberon ก็มีฟีเจอร์วางโค้ดบนแคนวาสแบบไร้ขอบเขตเช่นกัน

  • ขอถามนอกเรื่องใหญ่หน่อย มี open-source infinite canvas ที่พอใช้เป็นตัวหลักได้ไหม? กำลังทำเกมการ์ดอยู่และต้องการ infinite canvas แบบ multiplayer ถ้ามีคำแนะนำก็ดีมาก

    • ไม่แน่ใจว่า tldraw จะตรงไหม เราใช้ Pixi JS ซึ่งรวมฟีเจอร์กราฟิกไว้ด้วย
    • https://retejs.org
    • https://reactflow.dev/

  • ถ้าเป็น VSCode extension ผมน่าจะลองใช้ อยากลองนะ แต่ช่วงนี้ใช้ชีวิตอยู่ใน Cursor

    • ดูเหมือนเป็นปัญหาที่ใหญ่ขึ้นเรื่อย ๆ

  • สงสัยว่าทำไมถึงทำเป็น extension ไม่ได้ ไอเดียดีมาก และผมนึกภาพมันอยู่ในแท็บของพื้นที่ editor ได้อย่างสมบูรณ์แบบ
    แบบนั้นจะมีแท็บ Haystack ได้หลายแท็บด้วย ทำให้การสลับบริบทง่ายขึ้นมาก ถึงจะอิงกับ VSCode แต่การต้องติดตั้ง IDE อีกตัวก็รู้สึกเสียดายนิดหน่อย ยังไงก็ขอให้ทำต่อไปให้ดี

    • VS Code extension มีข้อจำกัดค่อนข้างมาก แม้จะเปลี่ยน renderer ของแท็บ editor ได้ แต่การทำให้องค์ประกอบหลายอย่างในอินเทอร์เฟซแบบ custom ถูกปฏิบัติเป็นแท็บ editor ชั้นหนึ่งในทั้งสภาพแวดล้อมและ ecosystem ของ extension นั้นแทบจะยากมาก ถ้าไม่ตามหลังมากเกินไป การ fork ก็เป็นทางเลือกที่สมเหตุสมผล
    • เข้าใจความอึดอัดนั้น อย่างที่บอกในคอมเมนต์อื่น การทำ Haystack ให้ดีพอในรูปแบบ extension ค่อนข้างยาก แต่สุดท้ายก็มีแผนจะสำรวจเส้นทางนั้นเช่นกัน
    • ถ้า extension มีข้อจำกัด ทางเลี่ยงที่ดีก็น่าจะเป็น ฟังก์ชันเปิด/ปิด canvas view ผู้ใช้น่าจะอยากสลับไปมาระหว่าง canvas กับมุมมอง VSCode มาตรฐาน และถ้าทำได้ใน Haystack ก็ไม่ต้องติดตั้งทั้งสองอย่าง

  • นึกถึง สภาพแวดล้อม Kansas ของภาษาโปรแกรม Self มีวิดีโอที่ Sun ทำไว้ในปี 1995
    https://www.youtube.com/watch?v=Ox5P7QyL774
    หลังจากวิดีโอนี้ มีฟีเจอร์ค้นหาที่น่าสนใจยิ่งขึ้นถูกเพิ่มเข้ามา

  • ดีมาก แทบจะเหมือนกระบวนการที่ผมทำเวลาอ่าน codebase ใหญ่ ๆ แต่สะอาดและเป็นระเบียบกว่ามาก
    ปกติจะเปิด terminal ห้าหกหน้าต่างที่ชี้ไปยัง source file หลายไฟล์ แล้วพยายามสร้างแผนที่ในหัว สุดท้ายก็พอจับทางได้ แต่มันเป็นกระบวนการที่เหนื่อย เครื่องมือแบบนี้น่าจะช่วยได้มหาศาล ที่เหลือก็แค่จับคู่กับ จอ ultrawide เท่านั้น

  • น่าจะช่วยได้เพราะลดสิ่งที่ต้องเก็บไว้ในหัว แต่ UI ตอนนี้ พึ่งพาเมาส์ มากเกินไป อยากให้ทำ shortcut และทำให้หน้าต่าง “tiling” เหมือน window manager อย่าง dwm จะได้ไม่ต้องปรับขนาดหน้าต่างเอง

    • จริง ๆ แล้วเราพยายามให้สำรวจ canvas ด้วย คีย์บอร์ด ได้มากที่สุด มีรายการ key binding อยู่ที่ปุ่ม “Keybindings and Help” มุมขวาล่าง
      ส่วนเรื่องการปรับขนาดเอง เรากำลังลองทำ tiling ภายใน viewport อยู่ ถ้าบอกได้ว่าอะไรทำให้ต้องปรับขนาด เราน่าจะปรับแก้ได้

  • ดูเหมือนเป็นแนวทางที่สะดวกให้ developer กางและแมปโค้ดบนพื้นที่สองมิติ ซึ่งคล้ายกับ method of loci[1] โดย developer เข้ารหัสชิ้นส่วนโค้ดและการเชื่อมโยงในเชิงพื้นที่อย่างละเอียด เพื่อเสริมความจำและเพิ่มความเข้าใจ
    ดังนั้นขอเสนออย่างกล้าว่าให้เพิ่มตัวเลือก pattern พื้นหลังที่ไม่รบกวนแต่ให้ข้อมูลเล็กน้อย ผมไม่มี pattern เฉพาะเจาะจง แต่ถ้าพื้นหลังเป็นแผนที่โลก ผู้ใช้อาจจำตำแหน่งที่ต้องการหาได้เร็วขึ้นและรู้ตำแหน่งตัวเองได้เร็วขึ้นด้วย
    ในแนวคิดเดียวกัน ก็น่าพิจารณาให้ผู้ใช้กำหนดสีขอบแท็บเอง หรือเพิ่ม noise ที่แตกต่างกันในแต่ละแท็บได้ โดยให้ noise จางลงตามระดับการซูมและระยะห่างจากศูนย์กลาง viewport
    https://en.wikipedia.org/wiki/Method_of_loci

    • เรามีแผนจะเพิ่ม minimap เพื่อช่วยให้ผู้ใช้จับทิศทางได้
      ไอเดียการใช้ความต่างของสีแบบบาง ๆ หรือเสียงก็น่าสนใจ จะลองคิดดู