บันทึกการเปลี่ยนแปลง

การสุ่มผลลัพธ์

• สุ่มก่อนที่วงล้อจะหมุน การหมุนแต่ละครั้งจะเลือกผู้ชนะผ่าน crypto.getRandomValues ด้วยวิธี rejection sampling จากนั้นแอนิเมชันจะหมุนมุ่งตรงไปยังรายการนั้น การออกแรงปัดมากขึ้นเพียงแค่ทำให้วงล้อหมุนนานขึ้น แต่ไม่มีทางเปลี่ยนผลลัพธ์ได้
• หน้าความยุติธรรมและความโปร่งใส ตัวอัลกอริทึมคือเนื้อหาหลักของหน้านี้ โค้ดที่แสดงบนหน้าเว็บคือโค้ดชุดเดียวกับที่ทำงานจริง
• ค่าน้ำหนักและรายการซ้ำ ค่าน้ำหนักของแต่ละรายการคือสัดส่วนในการสุ่ม ซึ่งแสดงผลเป็นเปอร์เซ็นต์โอกาสชนะที่แท้จริง สองรายการที่มีข้อความเหมือนกันจะยังคงเป็นสองรายการแยกกัน โดยระบบจะแจ้งจำนวนรายการที่ซ้ำกันแทนที่จะแอบรวมเข้าด้วยกัน

ตัววงล้อ

• หน้าเว็บสิบสองรูปแบบ แต่ละหน้าเปิดมาพร้อมกับวงล้อที่มีข้อมูลพร้อมใช้งาน และแต่ละหน้าจะมีตัวควบคุมเฉพาะตัวที่หน้าอื่นไม่มี เช่น ช่วงตัวเลข ตัวอักษร การแบ่งทีม รายชื่อนักเรียน และบันทึกประวัติการสุ่ม
• ลากแล้วปล่อย ความเร็วในการปล่อยมือจะกลายเป็นรอบหมุนพิเศษ การกดระหว่างที่วงล้อกำลังหมุนจะช่วยหยุดเร็วขึ้น สามารถกด Space หรือ Enter เพื่อหมุนได้ทันทีโดยไม่ต้องคอยเลื่อนหาปุ่ม
• ระบบเสียงและการตอบสนอง เสียงติ๊กตามจังหวะที่เข็มผ่านเส้นแบ่ง เสียงเมื่อวงล้อหยุดหมุน เสียงนับถอยหลังที่สามารถกดยกเลิกได้ และระบบสั่นบนสมาร์ตโฟน แต่ละฟังก์ชันสามารถเปิด-ปิดแยกกันได้ พร้อมบอกสถานะการทำงานชัดเจน
• โหมดนำเสนอ ซ่อนตัวควบคุมรองลงไป ขยายวงล้อให้ใหญ่เกิน 70% ของด้านที่สั้นกว่าของหน้าจอ และแสดงผลลัพธ์บนแผงความเปรียบต่างสูงที่มองเห็นได้ชัดเจนทั่วทั้งห้อง
• รูปแบบการสุ่มเพิ่มเติมอีก 2 แบบ แถบหมุนแบบสล็อตและแถบเปิดการ์ด สำหรับกรณีที่วงกลมอาจไม่ใช่รูปแบบการแสดงผลที่ตอบโจทย์

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

• ลิงก์สำหรับแชร์คือภาพถ่ายสถานะ ณ ขณะนั้น (Snapshot) ข้อมูลวงล้อจะถูกเข้ารหัสลงใน URL โดยตรง ลิงก์จึงไม่มีวันหมดอายุ และการแก้ไขวงล้อในภายหลังจะไม่ส่งผลกระทบต่อสิ่งที่เพื่อนร่วมงานของคุณเปิดดู
• บันทึกวงล้อ ประวัติการหมุน และชุดค่าน้ำหนักที่ตั้งไว้ ทั้งหมดเก็บอยู่ในเบราว์เซอร์นี้ และสามารถส่งออกเป็นไฟล์เพื่อนำไปใช้บนอุปกรณ์อื่นได้ เนื่องจากไม่มีระบบบัญชี ไฟล์นี้จึงเป็นวิธีเดียวในการถ่ายโอนข้อมูลระหว่างเครื่อง

เบื้องหลังการทำงาน

• เปลี่ยนระบบเรนเดอร์มาใช้ Canvas หน้าวาดของวงล้อจะถูกวาดเพียงครั้งเดียวเมื่อมีการเปลี่ยนแปลงข้อมูล และการหมุนจะใช้การ transform บนอิลิเมนต์ ดังนั้นการหมุนจึงไม่กินทรัพยากรในการวาดใหม่ทีละเฟรม ข้อความของแต่ละรายการจะถูกเก็บเป็นรายการจริงที่ซ่อนอยู่ข้างๆ เพราะ Canvas เป็นเพียงพิกเซลภาพ แต่โปรแกรมอ่านหน้าจอ (Screen Reader) จำเป็นต้องมีข้อความจริงสำหรับอ่านออกเสียง
• รองรับการตั้งค่าลดการเคลื่อนไหว (Reduced Motion) เมื่อเปิดใช้งาน prefers-reduced-motion: reduce ระบบจะข้ามแอนิเมชันการหมุนและแสดงผลลัพธ์ในทันที ซึ่งจากการสำรวจคู่แข่งทั้งสามรายพบว่าไม่มีรายใดรองรับส่วนนี้เลย
• การประกาศผลลัพธ์ที่เข้าถึงได้ ผลลัพธ์จะแสดงใน Live Region เป็นข้อความที่สามารถเลือกคัดลอกได้ ไม่ใช่แค่พิกเซลที่วาดลงบนวงล้อ

TossWheel เริ่มต้นจากการเป็นเทมเพลตสำหรับ SaaS และงานส่วนใหญ่ในวันนี้คือการตัดสิ่งที่ไม่จำเป็นออกไป

สิ่งที่ถูกนำออก

• ระบบบัญชี แดชบอร์ด หน้าผู้ดูแลระบบ และการตั้งค่า ไม่มีสิ่งใดที่ต้องเข้าสู่ระบบ และไม่มีฟีเจอร์ใดซ่อนอยู่หลังการล็อกอิน เราจึงลบส่วนเหล่านี้ออกไปทั้งหมดแทนที่จะแค่ปิดการทำงาน เพราะการปิด feature flag ไว้ก็ยังคงมีโค้ดส่วนนั้นถูกส่งไปด้วยอยู่ดี
• ฐานข้อมูล ที่จัดเก็บออบเจกต์ และแคชแบบ key-value ตอนนี้ Worker ไม่มีการผูกข้อมูล (bindings) ใดๆ ทั้งสิ้น รายการข้อมูลจะอยู่ภายในเบราว์เซอร์ของคุณ และวงล้อที่แชร์จะถูกส่งผ่านลิงก์โดยตรง
• ระบบชำระเงิน จดหมายข่าว และระบบ AI ต่างๆ ทั้งหมดนี้ไม่มีความจำเป็นสำหรับเว็บไซต์นี้

สิ่งที่ตัดสินใจเลือก

• ทิศทาง A: "รูปแบบเครื่องมือ" (The Instrument) เราได้สร้างตัวต้นแบบที่มีความสมจริงสูงขึ้นมา 3 แบบ และเลือกมา 1 แบบ: วงล้ออยู่ทางซ้าย รายการอยู่ด้านข้าง ปุ่มสั่งการอยู่ใต้วงล้อ และให้วงล้อเป็นวัตถุที่มีสีสันเพียงชิ้นเดียวบนหน้าเว็บ
• การตั้งค่าก่อนเปิดตัวอย่างเป็นทางการ ทุกการตอบกลับจากเซิร์ฟเวอร์จะติดแท็ก noindex ไว้จนกว่ารายการตรวจสอบก่อนเปิดตัวจะเสร็จสมบูรณ์ เพื่อป้องกันไม่ให้หน้าที่ยังไม่เสร็จถูกนำไปจัดทำดัชนีการค้นหา แล้วต้องมาขอยกเลิกในภายหลัง

เหตุผลที่บันทึกเรื่องนี้ไว้

การนำระบบฐานข้อมูลหรือระบบล็อกอินกลับมาใช้ใหม่ในภายหลังถือเป็นการเปลี่ยนแปลงระดับผลิตภัณฑ์ ไม่ใช่แค่รายละเอียดปลีกย่อยของการพัฒนา ข้อจำกัดเหล่านี้คือเหตุผลที่ทำให้วงล้อของที่นี่ไม่ต้องใช้บัญชีผู้ใช้ และไม่มีการเก็บสำเนารายการของคุณไว้เลย