Една CSS променлива, пет кръга ревю и един Swift toolchain, който излъга

„Направи overlay-а полупрозрачен" е онзи вид задача, който звучи като плъзгач и CSS свойство opacity. GeekBye v2.0.7 достави точно този видим за потребителя резултат — един регулируем „светъл режим", който ти позволява да виждаш през панелите на асистента онова, което е зад тях. Но интересната част от това издание не е функцията. Това са петте кръга ревю, които бяха нужни, за да излезе както трябва, и една военна история за компилиран бинарен файл, който смени размера си, защото собствената ни документация излъга един ревюиращ.

Правилният начин да направиш цял интерфейс полупрозрачен

Наивната версия на това е да поръсиш стойност за непрозрачност из всеки компонент-панел и да обявиш работата за свършена. Това е капан за поддръжка: дузина зашити стойности, които се разминават в мига, в който някой докосне една от тях.

Вместо това v2.0.7 използва едно споделено CSS помощно средство и токен за всяка повърхност. Има един клас overlay-surface, който изчислява фона на панела от две персонализирани свойства: базова непрозрачност, която всяка повърхност декларира за себе си (лентата за управление, чатът, балончетата за транскрипция, кодовите блокове и така нататък всеки избира своята), и глобален множител на алфа, който стои на корена на overlay-а и представлява настройката на плъзгача на потребителя. Всяка повърхност чете същия множител; всяка запазва собствения си характер. Ключово е, че се мащабира само фонът на панела — текстът, иконите и backdrop-blur остават напълно рендирани, така че „полупрозрачно" никога не значи „нечетимо."

Две решения в този дизайн заслужават да бъдат откроени, защото са разликата между функция, която помага, и такава, която генерира тикети за поддръжка:

• По подразбиране е напълно непрозрачно. Настройката за непрозрачност се доставя на 100% — no-op. Overlay-ът на никого не стана внезапно прозрачен при обновяване; полупрозрачността е там, когато посегнеш към нея, и невидима дотогава.
• Настройката е валидирана защитно. Има един източник на истина за min, max, стойността по подразбиране и стъпката, плюс нормализатор, който пази празния/липсващия случай. Това има значение заради един JavaScript капан: Number(null) е 0, така че липсваща настройка, наивно преобразувана, би заковала overlay-а в най-прозрачното му състояние вместо в стойността по подразбиране. Нормализаторът улавя това, преди да може да се случи.

Дръпни плъзгача и целият overlay се пре-оцветява на живо, посред запис, защото всяка повърхност е абонирана за същата настройка. Без рестарт, без презареждане.

Какво улови ревюто (а тест на един монитор никога не би уловил)

Тук „една CSS променлива" престана да бъде просто. Три бъга изплуваха в ревюто, а два от тях са същият урок с различни шапки.

Панел, който не искаше да избледнее. Overlay-ът с клавишни съкращения остана упорито плътен, докато всичко останало ставаше полупрозрачно. Причината: той се рендира извън DOM поддървото, което носи променливата за непрозрачност, така че никога не наследи стойността, каскадираща надолу от корена на overlay-а. CSS персонализираните свойства се наследяват през DOM дървото — и ако един възел всъщност не е наследник на мястото, където задаваш променливата, той тихо получава нищо. Поправката беше да зададем променливата локално и на този панел.

Hover оттенък, който изчезна. Бутоните Fn/Assist изгубиха своето циан hover сияние. Помощното средство за полупрозрачност задаваше фона с !important (то трябва да победи стойностите по подразбиране на повърхността), а това прегази hover: фоновия оттенък на същия елемент. Сблъсък на специфичност. Поправката беше да направим hover оттенъка също толкова емфатичен, за да може да си върне победата при hover.

И двете са същата основна истина: каскадата на CSS променлива е истинска граница на коректност, а не детайл от стилизирането. Наследяването и специфичността решават дали стойността ти изобщо достига до елемента, и нито едното не се появява в скрийншот, докато не е грешно.

Еднаква непрозрачност, различен вид. Най-финият: лентата за запис и лентата в покой бяха зададени на идентична базова непрозрачност и все пак изглеждаха видимо различно. Защо? Хапчето за запис използваше по-тежък backdrop-blur, а силен blur върху тъмен фон осреднява към по-тъмен резултат — така еднаква алфа произведе неравномерен вид. Имаше и слаба рамка там, където лентата в покой имаше ярък ръб с градиентен пръстен. Поправката съгласува нивото на blur и пръстена. Урокът остана: еднаква алфа не е еднакъв вид, щом blur влезе в картината. Полупрозрачността е система от взаимодействащи ефекти, а не едно число.

Бинарният файл, който смени размера си, защото документите излъгаха

Сега военната история, и тя е любимият ми вид — онази, в която инструментариумът и документите не са съгласни, а един внимателен ревюиращ попада в кръстосания огън.

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. Каскадата на CSS променлива е граница на коректност. Два от трите бъга в ревюто се свеждаха до променлива, която не се наследи, и !important, който прегази hover състояние. Ако една стойност трябва да достигне до елемент чрез наследяване или да победи чрез специфичност, този път е логика — проверявай го като логика, не като стилизиране.
2. Еднакви параметри могат да дадат нееднакви резултати. Лентата за запис и лентата в покой споделяха непрозрачност и все пак изглеждаха различно, защото различен blur промени изхода. Когато обединяваш визуална система върху едно число, провери дали другите променливи около всяка повърхност не променят тихо какво значи това число.
3. Когато документите и налагането не са съгласни, поправи разминаването — не само симптома. Бъгът не беше лош бинарен файл; беше документ, който посочваше грешния toolchain, и скрипт за налагане, който казваше друго. Прекомпилирането на бинарния файл лекува симптома. Да накараш всеки източник на истина да се съгласи е истинската поправка, защото и следващият ревюиращ ще се довери на документите.

GeekBye v2.0.7 достави еднородната полупрозрачност, с всички гранични случаи преминали през ревю и оправени документи на toolchain. Това е последното от изданията с „тих занаят" преди спринта за надеждност, който последва. За основата под него виж какво всъщност изисква една версия 2 (v2.0.0); за сестринското издание с полиране, спокоен софтуер: поправката на трепкането и чипът за режим на отговор (v2.0.3 + v2.0.5); а за това как overlay-ът остава скрит при разговор, как да останеш невидим по време на споделяне на екран.