Tek Bir CSS Değişkeni, Beş Tur İnceleme ve Yalan Söyleyen Bir Swift Toolchain’i

"Overlay’i yarı saydam yap" görevi, kulağa bir kaydırıcı ile bir CSS opacity özelliği gibi gelen türden bir iştir. GeekBye v2.0.7 tam olarak bu kullanıcıya dönük sonucu sundu — asistanın panellerinin arkasındaki her neyse onu görmenizi sağlayan, tek ve ayarlanabilir bir "açık mod". Ama bu sürümün ilginç kısmı özelliğin kendisi değil. Doğru yapmak için gereken beş tur inceleme ve kendi belgelerimiz bir incelemeciye yalan söylediği için boyutu değişen, derlenmiş bir binary hakkındaki savaş hikayesi.

Bütün bir arayüzü yarı saydam yapmanın doğru yolu

Bunun naif versiyonu, her panel bileşenine bir opaklık değeri serpiştirip işi bitmiş saymaktır. Bu bir bakım tuzağıdır: biri ötekine dokunduğu an birbirinden uzaklaşan bir düzine sabit kodlanmış değer.

Bunun yerine v2.0.7, tek bir paylaşılan CSS yardımcı sınıfı ve yüzey bazlı bir token kullanıyor. Bir panelin arka planını iki custom property’den hesaplayan tek bir overlay-surface sınıfı var: her yüzeyin kendisi için tanımladığı bir temel opaklık (kontrol çubuğu, sohbet, transkript baloncukları, kod blokları vb. her biri kendininkini seçer) ve overlay kökünde taşınan, kullanıcının kaydırıcı ayarını temsil eden global bir alfa çarpanı. Her yüzey aynı çarpanı okur; her biri kendi karakterini korur. Kritik olan şu: yalnızca panel arka planı ölçeklenir — metin, ikonlar ve backdrop-blur tam olarak işlenmiş kalır, dolayısıyla "yarı saydam" asla "okunamaz" anlamına gelmez.

Bu tasarımdaki iki karar, üzerinde durmaya değer çünkü bunlar bir özelliğin yardımcı olması ile destek talepleri üretmesi arasındaki farkı yaratır:

• Varsayılan tamamen opaktır. Opaklık ayarı %100 olarak gelir — bir işlem yapmaz. Güncelleme sonrası kimsenin overlay’i birdenbire saydamlaşmadı; yarı saydamlık ona uzandığınızda oradadır ve o ana dek görünmezdir.
• Ayar savunmacı biçimde doğrulanır. Min, max, varsayılan ve adım için tek bir gerçek kaynağı vardır ve boş/eksik durumu koruyan bir normalizer bulunur. Bu önemlidir çünkü bir JavaScript tuzağı var: Number(null) 0’dır, dolayısıyla eksik bir ayar naif biçimde zorlanırsa overlay’i varsayılanı yerine en saydam durumuna sabitler. Normalizer bunu, gerçekleşmeden önce yakalar.

Kaydırıcıyı sürükleyin ve tüm overlay canlı olarak, kayıt ortasında yeniden renklenir, çünkü her yüzey aynı ayara abonedir. Yeniden başlatma yok, yeniden yükleme yok.

İncelemenin yakaladığı şeyler (ve tek monitörlü bir testin asla yakalayamayacağı)

İşte "tek bir CSS değişkeni" burada basit olmayı bıraktı. İncelemede üç hata ortaya çıktı ve ikisi aynı dersin farklı kılıklara bürünmüş halidir.

Solmayı reddeden bir panel. Klavye kısayolları overlay’i, her şey yarı saydamlaşırken inatla katı kaldı. Sebep: opaklık değişkenini taşıyan DOM alt ağacının dışında işlendiği için, overlay kökünden aşağı akan değeri asla miras almadı. CSS custom property’leri DOM ağacı boyunca miras alınır — ve bir düğüm değişkeni ayarladığınız yerin gerçekten bir alt öğesi değilse, sessizce hiçbir şey almaz. Çözüm, değişkeni o panele de yerel olarak ayarlamaktı.

Kaybolan bir hover tonu. Fn/Assist düğmeleri camgöbeği hover parıltısını kaybetti. Yarı saydamlık yardımcı sınıfı arka planı !important ile ayarlıyordu (yüzey varsayılanlarına karşı kazanmak zorunda) ve bu, aynı öğedeki hover: arka plan tonunu ezip geçti. Özgüllük çatışması. Çözüm, hover tonunu eşit derecede vurgulu yaparak hover sırasında geri kazanabilmesini sağlamaktı.

Bunların ikisi de aynı temel gerçeğin ifadesidir: bir CSS değişkeni cascade’i gerçek bir doğruluk sınırıdır, bir stil detayı değil. Miras alma ve özgüllük, değerinizin öğeye ulaşıp ulaşmadığına karar verir ve hiçbiri, yanlış gidene dek bir ekran görüntüsünde belli olmaz.

Aynı opaklık, farklı görünüm. En incesi: kayıt çubuğu ve boştaki çubuk aynı temel opaklığa ayarlanmıştı ve yine de gözle görülür şekilde farklı görünüyorlardı. Neden? Kayıt hapı daha ağır bir backdrop-blur kullanıyordu ve koyu bir arka plan üzerindeki güçlü bir blur, sonucu daha koyuya doğru ortalar — dolayısıyla eşit alfa, eşit olmayan görünüm üretti. Ayrıca boştaki çubukta parlak bir gradyan halka kenarı varken bunda soluk bir kenarlık vardı. Çözüm, blur seviyesini ve halkayı eşleştirdi. Ders akılda kaldı: blur devreye girdiğinde eşit alfa eşit görünüm değildir. Yarı saydamlık, tek bir sayı değil, etkileşen etkilerden oluşan bir sistemdir.

Belgeler yalan söylediği için boyutu değişen binary

Şimdi savaş hikayesi ve bu benim en sevdiğim türden — araçlarla belgelerin anlaşamadığı ve dikkatli bir incelemecinin çapraz ateşte kaldığı türden.

GeekBye bazı önceden derlenmiş Swift binary’leri gönderir (toplantı algılama gibi şeyler için yerel yardımcılar). Derlenmiş bir binary depoya commit edildiği için, her geliştirici onu tam olarak aynı Swift sürümüyle derlemek zorundadır — farklı toolchain’ler aynı kaynaktan farklı baytlar üretir ve bu, biri her yeniden derlediğinde hayalet bir git çakışması anlamına gelir. Bu yüzden belirli bir sürümü zorunlu kılan bir betik var: Swift 6.3.x, derleme sırasında denetleniyor.

Bu sürümün incelemesi sırasında bir incelemeci, bir binary’nin "deponun zorunlu kıldığı toolchain" ile eşleşmesi için yeniden derlenmesi gerektiğini işaretledi. Geliştirici tam olarak bunu yaptı — ve binary’nin boyutu 89,184 bayttan 88,512 bayta değişti. Commit mesajı bile bunun Swift 6.2.1, yani "deponun zorunlu kıldığı toolchain" ile yeniden derlenerek "bayt kararlı çıktıyı geri getirdiğini" söylüyordu.

Ama 6.2.1 yanlış sürümdü. Derleme denetim betiği 6.3.x gerektiriyordu. Sorun şuydu: düz metin belgeler — README ve katkıcı kılavuzu — birkaç yerde hâlâ 6.2.1 diyordu. Yani vicdanlı bir incelemeci ve vicdanlı bir geliştirici, ikisi de doğru olanı yapmaya çalışırken, belgeleri izleyerek tam olarak denetim betiğinin reddetmek için var olduğu artefaktı commit etmeye gittiler. 6.3.x deposunda bir 6.2.1 binary’si, diğer her geliştiricinin temiz yeniden derlemesini bozacak tam olarak o sapmadır.

Sonraki commit bunu düzeltti — ve asıl mesele bu düzeltme. Sadece binary’yi 6.3.x biçimine geri derlemekle kalmadı (boyut 89,184’e geri getirildi, tam başladığı yere). Ayrıca belgelerdeki eskimiş "6.2.1" referanslarını düzeltti ki tuzak bir daha kurulamasın. Binary iki commit boyunca 672 bayt gidip geldi ve asıl hata hiçbir zaman binary değildi. İki gerçek kaynağının — denetim betiği ile yazılı belgelerin — anlaşamaması ve bir insanın yanlış olana güvenmesiydi.

Bu sürümün öğrettiği üç şey

1. Bir CSS değişkeni cascade’i bir doğruluk sınırıdır. Üç inceleme hatasının ikisi, miras alınmayan bir değişkene ve bir hover durumunu ezen bir !important’a dayanıyordu. Bir değerin bir öğeye miras yoluyla ulaşması ya da özgüllük yoluyla kazanması gerekiyorsa, o yol mantıktır — onu stil gibi değil, mantık gibi doğrulayın.
2. Eşit parametreler eşit olmayan sonuçlar üretebilir. Kayıt çubuğu ve boştaki çubuk bir opaklığı paylaştı ve yine de farklı göründü çünkü farklı bir blur sonucu değiştirdi. Bir görsel sistemi tek bir sayı üzerinde birleştirdiğinizde, her yüzeyin etrafındaki diğer değişkenlerin o sayının anlamını sessizce değiştirmediğini kontrol edin.
3. Belgeler ile denetim anlaşmadığında, sadece belirtiyi değil, anlaşmazlığı düzeltin. Hata kötü bir binary değildi; yanlış toolchain’i belirten bir belge ile aksini söyleyen bir denetim betiğiydi. Binary’yi yeniden derlemek belirtiyi tedavi eder. Her gerçek kaynağını uyumlu hale getirmek asıl çözümdür, çünkü bir sonraki incelemeci de belgelere güvenecek.

GeekBye v2.0.7, tüm sınır durumları incelenmiş ve toolchain belgeleri düzeltilmiş olarak tekdüze yarı saydamlığı sundu. Ardından gelen güvenilirlik sprinti öncesindeki "sessiz zanaat" sürümlerinin sonuncusu. Altındaki temel için bkz. bir versiyon 2 gerçekte neye mal olur (v2.0.0); kardeş cila sürümü için sakin yazılım: titreşim düzeltmesi ve yanıt modu çipi (v2.0.3 + v2.0.5); ve overlay’in bir görüşme sırasında nasıl gizli kaldığı için ekran paylaşımı sırasında görünmez kalma.