Lo que aprenderá a arreglar una línea de CSS en un proyecto de código abierto

Estaba explorando los documentos de Svelte en mi iPhone y encontré un error de interfaz de usuario a todo volumen. La muesca en la perilla REPL estaba totalmente fuera de control. Siempre busco contribuir al código abierto y pensé que sería una solución rápida y sencilla. Resulta que había mucho más que simplemente cambiar una línea de CSS.

Replicar, depurar y configurar el entorno local fue interesante, difícil y significativo.

La cuestión

Abrí DevTools de mi navegador y pensé que vería el mismo problema en la vista del teléfono. Pero el error no estaba ahí. Ahora bien, este es un problema de CSS realmente complicado.

? Que aprendiste

Si estás usando Chrome en iOS como navegador, todavía estás usando el renderizador de Safari. De Wikipedia:

Chrome utiliza iOS WebKit, que es el motor y los componentes de renderizado móvil de Apple, desarrollados para su navegador Safari, por lo que no puede utilizar el motor JavaScript V8 de Google.

Esto está respaldado por caniuse, que proporciona esta nota en iPS Safari:

Ahora está claro por qué el problema no apareció en mi máquina pero sí en mi teléfono. ¡Diferentes motores de renderizado!

Reproducir el problema localmente

Derribé el proyecto y lo ejecuté localmente. Confirmé que todavía había un problema al ejecutar el código local en un simulador y también en mi iPhone real. Safari en macOS tiene una manera fácil de abrir instancias de DevTools de cada uno.

Esto proporciona acceso a una consola tal como lo haría en el navegador pero para iOS Safari. No voy a mentir, la experiencia de desarrollador de Apple es de primer nivel (¿ves lo que hice allí? ).

Ahora puedo reproducir el problema localmente.

? Que aprendiste

Después de abrir el repositorio de Svelte y mirar un poco el código, noté que la interfaz de usuario y los SVG se estaban incorporando a través de un paquete llamado @sveltejs/site-kit. Genial, ahora necesito acceder a mi versión local del kit del sitio svelte/sitepara poder ver los cambios y depurar el problema.

Necesitaba señalar node_modulesen Svelte's package.jsonmi copia local de site-kit. Esto sonaba como un enlace simbólico. Después de revisar los documentos sin mucha suerte, busqué en Google y me topé con npm-link. ¡Eso me dejó ver lo que estaba haciendo!

Ahora puedo realizar cambios locales site-kity verlos reflejados en el proyecto Svelte.

Resolviendo el problema

En serio, todo lo que esto necesitaba era un cambio de una línea:

border: transparent;

Pero localizar dónde debería ir esa línea no fue tan sencillo como se podría pensar. Los mapas de origen en el proyecto todavía son un poco toscos y muestran este CSS proveniente del Nav.sveltecomponente cuando en realidad proviene de otro archivo. ¡Esa sería otra excelente manera de contribuir al proyecto!

Luego buscas y descubres que esto se está manejando y aprendes un poco más sobre cómo se hace. Ahora todo se ve genial en dispositivos móviles y de escritorio.

rebobinemos

Lo que comenzó como un cambio rápido de una sola línea se convirtió en una especie de viaje. Tuve que:

• Ejecute los repositorios de proyectos y componentes.
• Más información sobre la vinculación del sistema
• Contribuir con documentación sobre el revestimiento al kit del sitio.
• Obtenga más información sobre los diferentes renderizadores del navegador
• Aprenda a emular un navegador Safari de iOS
• Aprenda cómo obtener acceso a su depurador
• Encuentre el problema cuando los mapas de origen no funcionaban correctamente
• Solucione el problema (¡por fin!)

Al trabajar solo, normalmente no puedes lidiar con problemas como este, ni tienes un sistema grande y complejo del que necesitas construir un modelo mental y aprender. No puedes aprender de los mantenedores. Lo más importante es que no se ve todo el arduo trabajo que implica crear un producto técnico popular.

Cuando envié esta idea a CSS-Tricks. Chris dijo que recientemente había lidiado con una situación similar. El aprendizaje difícil es un aprendizaje duradero. Abraza la lucha.

Nunca dejes de aprender

Tomé otro problema del proyecto Svelte y ahora estoy aprendiendo sobre CSSStyleSheet porque hay otro problema (creo) con la forma en que Safari maneja las animaciones de fotogramas clave dentro de stylemanager.ts. Y así el aprendizaje continúa por caminos que nunca habría recorrido en mi trabajo diario.

Cuando algo se estropea, disfrute el viaje de aprender el sistema. Obtendrá información valiosa sobre por qué se rompió y qué se puede hacer para solucionarlo. Ese es uno de los increíbles beneficios de contribuir a proyectos de código abierto y por eso te animo a que hagas lo mismo.