บั๊กของ WordPress ที่ส่งผลเฉพาะกับผู้ใช้ถนัดซ้าย

 (shkspr.mobi)
1 คะแนน โดย GN⁺ 4 시간 전 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • บนอุปกรณ์มือถือมีปัญหาที่ กล่องตอบกลับคอมเมนต์ เปิดขึ้นมาอย่างกะทันหันระหว่างเลื่อนหน้าจอ และผู้ดูแลเว็บไซต์ที่เลื่อนด้วยนิ้วโป้งขวาไม่สามารถทำให้ปัญหาเกิดซ้ำได้
  • สาเหตุมาจากลิงก์ reply ทางฝั่งซ้ายของหน้าและการจัดการ touchstart ของ WordPress ซึ่งการเลื่อนด้วยนิ้วโป้งซ้ายอาจนำไปสู่การแตะลิงก์โดยไม่ตั้งใจได้
  • บั๊กนี้เคยถูกรายงานไว้แล้วใน WordPress Trac เมื่อ 7 ปีก่อน และโค้ดที่เกี่ยวข้องถูกเพิ่มเข้าไปในรีโพซิทอรีพัฒนา WordPress ตั้งแต่ปี 2017
  • ในอดีตจำเป็นต้องมีการ หลีกเลี่ยงดีเลย์ 300ms เพื่อแยกความต่างระหว่างการแตะกับการซูมด้วยการแตะสองครั้ง แต่จากบทความของ Chrome ในปี 2013 และข้อมูลของ FastClick ในปี 2015 ก็ถือเป็นปัญหาที่ล้าสมัยไปแล้ว
  • การแก้ไขทำโดย ลบโค้ดไม่กี่บรรทัด ออกจาก WordPress และมุ่งลดพฤติกรรมตอบกลับคอมเมนต์ที่ไม่พึงประสงค์ระหว่างการเลื่อนบนมือถือ

การปรับแต่งบล็อกและ JavaScript ของคอมเมนต์

  • มีการใช้ การปรับแต่งแบบกำหนดเอง หลายอย่างบน WordPress ที่ติดตั้งแบบพื้นฐาน เพื่อรีดประสิทธิภาพของบล็อกให้มากที่สุด
  • ลดการใช้ JavaScript ลงให้เหลือน้อยที่สุด และจัดให้ฟังก์ชันต่าง ๆ ทำงานได้แม้ไม่มี JavaScript
  • อย่างไรก็ตาม บางฟังก์ชันก็ยังได้ประโยชน์จาก JavaScript และตัวอย่างที่เห็นชัดที่สุดคือ ระบบคอมเมนต์

ปัญหาที่ปรากฏเฉพาะตอนเลื่อนด้วยมือซ้าย

  • ผู้อ่านรายหนึ่งแจ้งบั๊กของเว็บไซต์ โดยระหว่างเลื่อนหน้า กล่องคอมเมนต์ จะโผล่ขึ้นมาอย่างกะทันหันและรบกวนการใช้งาน
  • ผู้ดูแลเว็บไซต์เองก็เลื่อนหน้าอยู่บ่อยครั้ง แต่ใช้เพียงนิ้วโป้งขวา จึงไม่เคยพบปัญหาเดียวกัน
  • ผู้ใช้ที่รายงานบั๊กเลื่อนด้วยมือซ้าย และลิงก์ reply ที่เป็นต้นเหตุก็อยู่ทางซ้ายของหน้า
  • เหตุการณ์ทัชที่ไม่ค่อยปรากฏเมื่อเลื่อนด้วยนิ้วโป้งขวา อาจเกิดขึ้นโดยไม่ตั้งใจได้เมื่อเลื่อนด้วยนิ้วโป้งซ้าย

การจัดการ touchstart ของ WordPress

  • ปัญหานี้เคยถูก รายงานใน WordPress Trac เมื่อ 7 ปีก่อน
  • ในปี 2017 นักพัฒนา WordPress ได้ เพิ่ม touchstart listener ให้กับการคลิกลิงก์
  • เบราว์เซอร์ในอดีตไม่สามารถแยกได้อย่างแน่ชัดว่าเหตุการณ์ทัชคือจุดเริ่มต้นของการคลิก หรือเป็นจุดเริ่มต้นของการซูมด้วยการแตะสองครั้ง
  • วิธีที่ให้เหตุการณ์ทำงานก่อนเมื่อมีการทัชบนลิงก์ สามารถมองได้ว่าเป็นการจัดการเพื่อหลีกเลี่ยง ดีเลย์ 300ms ในเวลานั้น

ปัญหาดีเลย์ 300ms ที่หมดไปแล้ว

  • ดีเลย์ 300ms เวลาการแตะไม่ใช่ปัญหาที่ต้องจัดการด้วยวิธีแบบเดิมมานานแล้ว
  • บทความในบล็อกนักพัฒนา Chrome ปี 2013 กล่าวถึงการหายไปของปัญหาดีเลย์ดังกล่าว
  • แม้อ้างอิงตาม ข้อมูลของ FastClick ปี 2015 ปัญหานี้ก็ไม่ใช่ประเด็นหลักที่ต้องแก้อีกต่อไปแล้ว
  • ดังนั้นจึงไม่ชัดเจนว่าทำไมในปี 2017 จึงมีการเพิ่มโค้ดในลักษณะที่ไปรบกวนผู้ใช้ที่เลื่อนด้วยมือซ้าย

วิธีแก้ไขและผลที่คาดหวัง

  • หลังจากมีการรายงานบั๊กไป 7 ปี ก็มีการคอมมิต PR แก้ไขของ WordPress
  • การแก้ไขนี้ไม่ใช่การเปลี่ยนแปลงที่ซับซ้อน แต่เป็นการ ลบโค้ดไม่กี่บรรทัด ออกจาก WordPress
  • การเปลี่ยนแปลงนี้อาจช่วยลดปัญหาที่ลิงก์ reply ทำงานโดยไม่ตั้งใจระหว่างการเลื่อนบนมือถือ จนทำให้กล่องตอบกลับคอมเมนต์เปิดขึ้นมา
  • ไม่มีฟีเจอร์จำกัดการเข้าถึงตามความถนัดมืออย่าง <meta handed="right"> และการเปลี่ยนแปลงครั้งนี้มุ่งป้องกันเหตุการณ์ทัชที่ไม่พึงประสงค์

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

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

 
GN⁺ 4 시간 전
ความคิดเห็นจาก Lobste.rs

  • มีหลายอย่างในโลกนี้ที่ออกแบบโดยยึด คนถนัดขวา เป็นหลักมากเกินไป แม้แต่ข้อความโฆษณาบนปากกา ก็มักวางทิศทางให้อ่านได้เมื่อถือด้วยมือขวา
    แต่ถึงอย่างนั้น การใช้ชีวิตเป็นคนถนัดซ้ายก็เหมือนมีฟีเจอร์บล็อกโฆษณาติดตัวมาตามธรรมชาติอยู่บ้าง

    • โอ้โห เพิ่งรู้เดี๋ยวนี้เองว่าตัวหนังสือบนปากกาหรือดินสอถูกจัดวางไว้ให้ อ่านได้ตอนถืออยู่ และเพิ่งรู้ด้วยว่าถ้าจับแบบคนถนัดซ้าย มันจะกลับหัวตลอด
    • พยายามนึกถึงปากกาที่ตรงกับคำอธิบายนั้นแล้วแต่นึกไม่ออก ถึงขั้นไปหารูปปากกาดูแล้วก็ยังไม่ค่อยเข้าใจ มีแค่อันเดียวที่ดูใกล้เคียง เลยนึกถึง ปากการะดับพรีเมียม ด้ามหนึ่งที่อาจตรงเงื่อนไขก็ได้

  • “sinister disposition” นี่ตลกดี จำได้เลยว่าวันที่ได้รู้ว่า sinister กับ dexterous (dexter) แปลตรงตัวว่า ‘ซ้าย’ กับ ‘ขวา’ ตามลำดับ
    ปรากฏการณ์ทางวัฒนธรรมที่ว่า ออกนอกบรรทัดฐาน → ชั่วร้าย ซึ่งเรายังคงแบกรับกันอยู่ทุกวันนี้ ยังน่าสนใจเสมอ

    • ถนัดซ้ายอย่างแรงมาก แต่กับบางอย่างที่ทำได้ทั้งสองมือ ปกติจะปฏิเสธคำว่า “ambi-dexterous” แล้วเรียกตัวเองว่า omni-sinisterous แทน
    • ในหลายภาษากลุ่ม อินโด-ยูโรเปียน คำที่แปลว่า “ขวา” มีรากศัพท์ร่วมกัน แต่คำว่า “ซ้าย” ไม่เป็นเช่นนั้น [1]
      น่าจะเป็นเพราะคำดั้งเดิมที่หมายถึงซ้ายกลายเป็นคำต้องห้าม แล้วถูกแทนที่ด้วยคำใหม่ จากนั้นคำใหม่นั้นก็กลายเป็นคำต้องห้ามอีก วนซ้ำไปเรื่อย ๆ
      [1]: https://reddit.com/r/asklinguistics/…

  • ปกติคนเราถือมือถือด้วย มือข้างที่ถนัด เท่านั้นหรือเปล่า? ผมถนัดซ้าย แต่ใช้มือถือด้วยสองมือแทบจะสุ่ม ๆ พอ ๆ กัน และนึกว่าทุกคนก็เป็นแบบนั้น

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

  • น่าสนใจที่งานอื่นแทบทั้งหมดทำด้วยมือขวา แต่กับมือถือกลับเอนเอียงไปทาง ถือและใช้ด้วยมือซ้าย
    ไม่แน่ใจว่าทำไม แต่คงเพราะใส่มือถือไว้ในกระเป๋าซ้าย ส่วนกระเป๋าสตางค์กับกุญแจไว้ทางขวา การใช้กุญแจและหยิบกระเป๋าสตางค์สะดวกกว่าถ้าใช้มือที่ถนัด สงสัยเหมือนกันว่าผมแปลกหรือเปล่า

    • ผมก็ทำแบบนั้นเป๊ะ และเหตุผลก็อันนั้นเลย มือถืออยู่ในกระเป๋าซ้าย พอหยิบออกมาก็อยู่ใน มือซ้าย ตามธรรมชาติ
      สุดท้ายการเลื่อนหน้าจอหรืองานพื้นฐานก็ทำด้วยมือซ้าย แต่เวลาพิมพ์ข้อความยาว ๆ มักจะถือด้วยมือซ้ายแล้วใช้มือขวาปัดพิมพ์

  • การใช้ touchstart ตรงนั้นผิดตั้งแต่แรกแล้ว
    เมาส์ ทัช และ pointer ควรถูก activate ตอนปล่อย ไม่ใช่ตอนกดลง แต่จุดที่เริ่มกดต้องอยู่บน element เดียวกัน ส่วนอีเวนต์คีย์บอร์ดจะ activate ตอน keydown ไม่ใช่ keyup อย่างไรก็ตาม กรณีที่ปุ่มทำงานด้วย Space แปลกตรงที่เป็น keyup และไม่เหมือนเมาส์ตรงที่ไม่สนใจด้วยว่า keydown เกิดบน element ไหน
    สามารถลองความเป็นไปได้ต่าง ๆ ด้วยอะไรแบบ data:text/html,<button onclick=this.textContent=Math.random()>One</button><button onclick=this.textContent=Math.random()>Two</button> ได้
    การเตรียม activate ที่ touchstart เช่น เริ่มดึงข้อมูลจากเซิร์ฟเวอร์ล่วงหน้าถ้าจำเป็น น่าจะโอเค แต่การ สั่งให้ทำงานจริง ยังไม่ควรเกิดขึ้น ทว่า element.addEventListener( 'touchstart', clickEvent ); จัดการตรงนี้ผิดพอดี

  • ไม่เข้าใจว่าเรื่องนี้เกี่ยวอะไรกับ คนถนัดซ้าย
    เป็นพฤติกรรมเฉพาะของทัชแพดที่คนใช้เมาส์เลยไม่รู้หรือเปล่า?

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