Was ich gelernt habe, indem ich eine Zeile CSS in einem Open-Source-Projekt korrigiert habe

Ich habe mir die Svelte-Dokumentation auf meinem iPhone angesehen und bin auf einen auffälligen UI-Bug gestoßen. Die Kerbe in der REPL-Regler war völlig daneben. Ich bin immer auf der Suche nach Möglichkeiten, zu Open Source beizutragen, und dachte, dies wäre eine schnelle und einfache Korrektur. Es stellte sich heraus, dass viel mehr dahintersteckte, als nur eine Zeile CSS zu ändern.

Die Reproduktion, das Debugging und die Einrichtung der lokalen Umgebung waren interessant, schwierig und bedeutungsvoll.

Das Problem

Ich öffnete die Browser-Entwicklertools und dachte, ich würde dasselbe Problem in der Handyansicht sehen. Aber der Fehler war nicht da. *Jetzt* ist das ein wirklich kniffliges CSS-Problem.

Das Problem lokal reproduzieren

Ich habe das Projekt heruntergeladen und lokal ausgeführt. Ich habe bestätigt, dass es immer noch ein Problem war, indem ich den lokalen Code sowohl in einem Simulator als auch auf meinem tatsächlichen iPhone ausgeführt habe. Safari unter macOS bietet eine einfache Möglichkeit, von jeder dieser Instanzen Entwicklertools zu öffnen.

Dies bietet Zugriff auf eine Konsole, genau wie im Browser, aber für iOS Safari. Ich werde nicht lügen, Apples Entwicklererfahrung ist erstklassig (sehen Sie, was ich da gemacht habe? 😬).

Ich kann das Problem jetzt lokal reproduzieren.

Das Problem lösen

Ernsthaft, all das erforderte nur eine Ein-Zeilen-Änderung.

border: transparent;

Aber die Stelle zu finden, wo diese eine Zeile hingehört, war nicht so einfach, wie man denken könnte. Source Maps des Projekts sind noch etwas holprig und zeigen an, dass dieser CSS-Code aus der Nav.svelte-Komponente stammt, obwohl er eigentlich aus einer anderen Datei kam. Das wäre eine weitere großartige Möglichkeit, zum Projekt beizutragen!

Dann recherchiert man ein wenig und erfährt, dass dies behandelt wird und man lernt etwas mehr darüber, wie es gemacht wird. Alles sieht jetzt sowohl auf Mobilgeräten als auch auf Desktops großartig aus.

Lassen Sie uns zurückspulen

Was als schnelle Ein-Zeilen-Änderung begann, wurde zu einer kleinen Reise. Ich musste

• Die Projekt- und Komponenten-Repositorys ausführen
• Etwas über Systemverknüpfung lernen
• Dokumentation über die Verknüpfung von Site-Kit beitragen
• Etwas über verschiedene Browser-Renderer lernen
• Lernen, wie man einen iOS-Safari-Browser emuliert
• Lernen, wie man auf seinen Debugger zugreift
• Das Problem finden, als die Quellcodes nicht korrekt funktionierten
• Das Problem lösen (endlich!)

Wenn man alleine arbeitet, beschäftigt man sich normalerweise nicht mit solchen Problemen oder hat ein großes komplexes System, von dem man sich ein mentales Modell erstellen und lernen muss. Man lernt nicht von den Maintainern. Am wichtigsten ist, dass man die ganze harte Arbeit, die in den Aufbau eines beliebten technischen Produkts fließt, nicht sieht.

Als ich diese Idee bei CSS-Tricks einreichte. Chris sagte, er habe sich kürzlich mit einer ähnlichen Situation beschäftigt. **Schwieriges Lernen ist dauerhaftes Lernen.** Nehmen Sie den Kampf an.

Niemals aufhören zu lernen

Ich habe mir ein weiteres Problem aus dem Svelte-Projekt vorgenommen und lerne jetzt etwas über CSSStyleSheet, da es ein weiteres Problem (glaube ich) mit der Behandlung von Keyframe-Animationen durch Safari in stylemanager.ts gibt. Und so geht das Lernen auf Wegen weiter, die ich in meiner täglichen Arbeit nie eingeschlagen hätte.

Wenn etwas kaputt geht, genießen Sie die Reise des Lernens des Systems. Sie werden wertvolle Einblicke gewinnen, warum dieses Ding kaputt gegangen ist und was getan werden kann, um es zu reparieren. Das ist einer der großartigen Vorteile der Mitarbeit an Open-Source-Projekten und warum ich Sie ermutigen würde, dasselbe zu tun.