ตัวแปร CSS หนึ่งตัว, การรีวิวห้ารอบ, และ Swift Toolchain ที่โกหก

"ทำให้โอเวอร์เลย์โปร่งแสง" คืองานประเภทที่ฟังดูเหมือนแค่สไลเดอร์กับ CSS opacity สักตัว GeekBye v2.0.7 ปล่อยผลลัพธ์ที่ผู้ใช้เห็นออกมาแบบนั้นเป๊ะ — "light mode" ปรับได้หนึ่งตัวที่ให้คุณมองทะลุพาเนลของผู้ช่วยไปเห็นสิ่งที่อยู่ข้างหลังได้ แต่ส่วนที่น่าสนใจของการปล่อยเวอร์ชันนี้ไม่ใช่ตัวฟีเจอร์ มันคือการรีวิวห้ารอบกว่าจะทำถูก และเรื่องเล่าสมรภูมิเกี่ยวกับไบนารีที่คอมไพล์แล้วซึ่งเปลี่ยนขนาด เพราะเอกสารของเราเองโกหกผู้รีวิว

วิธีที่ถูกต้องในการทำให้ทั้ง UI โปร่งแสง

เวอร์ชันที่ไร้เดียงสาของงานนี้คือโปรยค่า opacity ไปทั่วทุกคอมโพเนนต์พาเนลแล้วถือว่าจบ นั่นคือกับดักการบำรุงรักษา: ค่าฮาร์ดโค้ดเป็นสิบ ๆ ค่าที่จะเลื่อนหลุดจากกันทันทีที่มีใครไปแตะตัวใดตัวหนึ่ง

แทนที่จะเป็นแบบนั้น v2.0.7 ใช้ CSS utility ที่ใช้ร่วมกันตัวเดียว บวกกับ token แยกตามพื้นผิว มีคลาส overlay-surface ตัวเดียวที่คำนวณพื้นหลังของพาเนลจาก custom property สองตัว: ค่า opacity พื้นฐาน ที่แต่ละพื้นผิวประกาศสำหรับตัวเอง (แถบควบคุม, แชท, บับเบิลบันทึกการถอดเสียง, บล็อกโค้ด และอื่น ๆ ต่างก็เลือกของตัวเอง) และ ตัวคูณ alpha แบบโกลบอลที่ผูกอยู่กับ root ของโอเวอร์เลย์ และแทนค่าสไลเดอร์ที่ผู้ใช้ตั้งไว้ ทุกพื้นผิวอ่านตัวคูณเดียวกัน แต่ละพื้นผิวคงคาแรกเตอร์ของตัวเองไว้ สำคัญที่สุดคือมีเพียง พื้นหลังของพาเนล เท่านั้นที่ปรับขนาด — ข้อความ, ไอคอน และ backdrop-blur ยังคงเรนเดอร์เต็มที่ ดังนั้น "โปร่งแสง" จึงไม่เคยหมายถึง "อ่านไม่ออก"

การตัดสินใจสองอย่างในดีไซน์นั้นควรถูกพูดถึง เพราะมันคือความต่างระหว่างฟีเจอร์ที่ช่วยจริงกับฟีเจอร์ที่สร้างตั๋วซัพพอร์ต:

• ค่าเริ่มต้นคือทึบเต็มร้อย ค่า opacity ถูกปล่อยที่ 100% — ไม่ทำอะไรเลย โอเวอร์เลย์ของใครก็ไม่จู่ ๆ กลายเป็นทะลุมองเห็นตอนอัปเดต ความโปร่งแสงอยู่ตรงนั้นเมื่อคุณเอื้อมไปหา และล่องหนจนกว่าคุณจะเรียกใช้
• การตั้งค่าถูกตรวจสอบเชิงป้องกัน มีแหล่งความจริงเดียวสำหรับค่าต่ำสุด, สูงสุด, ค่าเริ่มต้น และสเต็ป และมีตัว normalizer ที่คอยกันกรณีค่าว่าง/หายไป นั่นสำคัญเพราะกับดักของ JavaScript: Number(null) มีค่าเป็น 0 ดังนั้นการตั้งค่าที่หายไปแล้วถูกแปลงค่าแบบไร้เดียงสาจะดีดโอเวอร์เลย์ไปยังสถานะที่ โปร่งใสที่สุด แทนที่จะเป็นค่าเริ่มต้น ตัว normalizer จับสิ่งนั้นได้ก่อนที่มันจะเกิดขึ้น

ลากสไลเดอร์ แล้วทั้งโอเวอร์เลย์จะเปลี่ยนโทนสีสด ๆ กลางการบันทึก เพราะทุกพื้นผิวสมัครรับการตั้งค่าเดียวกัน ไม่ต้องรีสตาร์ท ไม่ต้องรีโหลด

สิ่งที่การรีวิวจับได้ (และการทดสอบบนจอเดียวไม่มีวันจับได้)

นี่คือจุดที่ "ตัวแปร CSS ตัวเดียว" หยุดเป็นเรื่องง่าย บั๊กสามตัวโผล่ขึ้นมาในการรีวิว และสองในนั้นคือบทเรียนเดียวกันที่สวมหมวกคนละใบ

พาเนลที่ไม่ยอมจาง โอเวอร์เลย์คีย์บอร์ดช็อตคัตยังคงทึบดื้อ ๆ ในขณะที่ทุกอย่างอื่นกลายเป็นโปร่งแสง สาเหตุคือ: มันเรนเดอร์ นอก DOM subtree ที่พาตัวแปร opacity ไปด้วย ดังนั้นมันจึงไม่เคย inherit ค่าที่ไหลลงมาจาก root ของโอเวอร์เลย์ CSS custom property จะ inherit ผ่าน DOM tree — และถ้าโหนดไม่ได้เป็นลูกหลานของจุดที่คุณตั้งตัวแปรจริง ๆ มันก็จะไม่ได้อะไรเลยแบบเงียบ ๆ การแก้คือตั้งตัวแปรในระดับ local บนพาเนลนั้นด้วย

สีไล่โทนตอน hover ที่หายไป ปุ่ม Fn/Assist สูญเสียแสงเรืองสีฟ้าตอน hover ไป CSS utility สำหรับความโปร่งแสงตั้งพื้นหลังด้วย !important (มันต้องชนะค่าเริ่มต้นของพื้นผิว) และนั่นก็บดขยี้สีไล่โทนพื้นหลัง hover: บนอิลิเมนต์เดียวกัน การชนกันของ specificity การแก้คือทำให้สีตอน hover เน้นหนักเท่ากัน เพื่อให้มันชนะกลับได้ตอน hover

ทั้งสองเรื่องคือความจริงพื้นฐานเดียวกัน: การ cascade ของตัวแปร CSS คือขอบเขตความถูกต้องจริง ๆ ไม่ใช่รายละเอียดของการจัดสไตล์ การ inherit และ specificity ตัดสินว่าค่าของคุณจะไปถึงอิลิเมนต์หรือไม่ และทั้งสองอย่างจะไม่โผล่ในสกรีนช็อตจนกว่ามันจะผิด

opacity เท่ากัน หน้าตาต่างกัน อันที่แนบเนียนที่สุด: แถบบันทึกกับแถบไอเดิลถูกตั้งค่า opacity พื้นฐานให้ เหมือนกันเป๊ะ แต่ก็ยังดูต่างกันอย่างเห็นได้ชัด ทำไม? เม็ดแคปซูลบันทึกใช้ backdrop-blur ที่หนักกว่า และการเบลอแรง ๆ ทับบนพื้นหลังมืดจะเฉลี่ยไปทางผลลัพธ์ที่มืดกว่า — ดังนั้น alpha ที่เท่ากันจึงให้หน้าตาที่ไม่เท่ากัน มันยังมีเส้นขอบจาง ๆ ตรงที่แถบไอเดิลมีขอบวงแหวนไล่โทนสว่าง การแก้คือจับคู่ระดับเบลอและวงแหวนให้ตรงกัน บทเรียนติดแน่น: alpha เท่ากันไม่ใช่หน้าตาเท่ากันเมื่อการเบลอเข้ามาในภาพ ความโปร่งแสงคือระบบของเอฟเฟกต์ที่โต้ตอบกัน ไม่ใช่ตัวเลขตัวเดียว

ไบนารีที่เปลี่ยนขนาดเพราะเอกสารโกหก

ทีนี้ถึงเรื่องเล่าสมรภูมิ และมันคือประเภทที่ผมชอบที่สุด — ประเภทที่เครื่องมือกับเอกสารขัดแย้งกัน แล้วผู้รีวิวที่รอบคอบก็โดนลูกหลงในสงคราม

GeekBye ปล่อยไบนารี Swift ที่คอมไพล์ไว้ล่วงหน้าบางตัว (ตัวช่วยเนทีฟสำหรับสิ่งอย่างการตรวจจับการประชุม) เพราะไบนารีที่คอมไพล์แล้วถูกเช็คอินเข้ารีโป นักพัฒนาทุกคนต้องคอมไพล์มันด้วยเวอร์ชัน Swift เดียวกันเป๊ะ — toolchain ต่างกันจะให้ไบต์ต่างกันจากซอร์สโค้ดเดียวกัน และนั่นจะหมายถึงคอนฟลิกต์ git ผีทุกครั้งที่มีใครบิลด์ใหม่ ดังนั้นจึงมีสคริปต์ที่บังคับใช้เวอร์ชันหนึ่งโดยเฉพาะ: Swift 6.3.x ตรวจสอบตอนบิลด์

ระหว่างการรีวิวการปล่อยเวอร์ชันนี้ ผู้รีวิวชี้ว่าไบนารีตัวหนึ่งควรถูกบิลด์ใหม่ให้ตรงกับ "toolchain ที่รีโปกำหนด" นักพัฒนาก็ทำแบบนั้นเป๊ะ — และขนาดของไบนารีเปลี่ยนจาก 89,184 ไบต์ เป็น 88,512 ข้อความคอมมิตถึงกับบอกว่าเป็นการ "กู้คืนเอาต์พุตที่ไบต์เสถียร" ด้วยการบิลด์ใหม่ด้วย Swift 6.2.1 ซึ่งเป็น "toolchain ที่รีโปกำหนด"

ยกเว้นว่า 6.2.1 เป็นเวอร์ชันที่ผิด สคริปต์บังคับใช้ตอนบิลด์ต้องการ 6.3.x ปัญหาคือ เอกสารที่เป็นร้อยแก้ว — README และคู่มือผู้ร่วมพัฒนา — ยังบอก 6.2.1 อยู่ในหลายจุด ดังนั้นผู้รีวิวที่ใส่ใจและนักพัฒนาที่ใส่ใจ ทั้งคู่พยายามทำสิ่งที่ถูกต้อง กลับเดินตามเอกสารตรงดิ่งเข้าสู่การคอมมิตอาร์ติแฟกต์ที่สคริปต์บังคับใช้มีไว้เพื่อปฏิเสธพอดี ไบนารี 6.2.1 ในรีโป 6.3.x คือการเลื่อนหลุดชนิดที่จะทำให้การบิลด์สะอาดของนักพัฒนาคนอื่นทุกคนพัง

คอมมิตถัดมาแก้มัน — และการแก้นั่นแหละคือประเด็น มันไม่ได้แค่บิลด์ไบนารีกลับไปเป็นรูปแบบ 6.3.x (ขนาดกลับคืนเป็น 89,184 กลับมาที่จุดเริ่มต้นเป๊ะ) มันยัง แก้การอ้างอิง "6.2.1" ที่ค้างเก่าในเอกสาร เพื่อไม่ให้กับดักถูกลั่นไกได้อีก ไบนารีกลับไปกลับมา 672 ไบต์ในสองคอมมิต และบั๊กจริง ๆ ไม่เคยเป็นเรื่องของไบนารีเลย มันเป็นเรื่องที่แหล่งความจริงสองแหล่ง — สคริปต์บังคับใช้และเอกสารที่เขียนไว้ — ขัดแย้งกัน และมนุษย์เชื่อผิดแหล่ง

สามสิ่งที่การปล่อยเวอร์ชันนี้สอน

1. การ cascade ของตัวแปร CSS คือขอบเขตความถูกต้อง สองในสามบั๊กที่รีวิวได้มาลงเอยที่ตัวแปรที่ไม่ inherit และ !important ที่ทับสถานะ hover ถ้าค่าต้องไปถึงอิลิเมนต์ผ่านการ inherit หรือต้องชนะผ่าน specificity เส้นทางนั้นคือตรรกะ — จงตรวจสอบมันแบบตรรกะ ไม่ใช่แบบการจัดสไตล์
2. พารามิเตอร์ที่เท่ากันสามารถให้ผลลัพธ์ที่ไม่เท่ากัน แถบบันทึกกับแถบไอเดิลใช้ opacity ร่วมกันแต่ก็ยังดูต่างกัน เพราะการเบลอที่ต่างกันเปลี่ยนผลลัพธ์ เมื่อคุณรวมระบบภาพให้เป็นตัวเลขเดียว จงตรวจว่าตัวแปร อื่น ๆ รอบแต่ละพื้นผิวไม่ได้แอบเปลี่ยนความหมายของตัวเลขนั้น
3. เมื่อเอกสารกับการบังคับใช้ขัดแย้งกัน จงแก้ความขัดแย้ง — ไม่ใช่แค่อาการ บั๊กไม่ใช่ไบนารีที่แย่ มันคือเอกสารที่ตั้งชื่อ toolchain ผิดและสคริปต์บังคับใช้ที่บอกอีกอย่าง การบิลด์ไบนารีใหม่คือการรักษาอาการ การทำให้ทุกแหล่งความจริงตรงกันคือการแก้ที่แท้จริง เพราะผู้รีวิวคนถัดไปก็จะเชื่อเอกสารเช่นกัน

GeekBye v2.0.7 ปล่อยความโปร่งแสงที่สม่ำเสมอ รีวิวเคสขอบทุกอันครบ และปรับเอกสาร toolchain ให้ตรงเรียบร้อย มันคือการปล่อยเวอร์ชัน "งานฝีมือเงียบ ๆ" ครั้งสุดท้ายก่อนสปรินต์ด้านความน่าเชื่อถือที่ตามมา สำหรับฐานรากที่อยู่ข้างใต้มัน ดูเวอร์ชัน 2 จริง ๆ แล้วต้องแลกด้วยอะไร (v2.0.0); สำหรับการปล่อยเวอร์ชันขัดเงาพี่น้องกัน ดูซอฟต์แวร์ที่สงบ: การแก้อาการกระพริบและชิปโหมดตอบ (v2.0.3 + v2.0.5); และสำหรับวิธีที่โอเวอร์เลย์ยังคงซ่อนอยู่ระหว่างการโทร ดูวิธีล่องหนระหว่างการแชร์หน้าจอ