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

 

 

 


Índice
  1. La cuestión
  2. Reproducir el problema localmente
  3. Resolviendo el problema
  4. rebobinemos
  5. Nunca dejes de aprender

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.






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. ¿Cómo se hace el tamaño máximo de fuente en CSS?
  2. Cambiar el tamaño de los valores en pasos en CSS
  3. ¿Qué hace “revertir” en CSS?
  4. CSS4 es una mala idea

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

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

La cuestiónReproducir el problema localmenteResolviendo el problemarebobinemosNunca dejes de aprenderTal vez te puede interesar:Índice

programar

es

https://pseint.es/static/images/programar-lo-que-aprendera-a-arreglar-una-linea-de-css-en-un-proyecto-de-codigo-abierto-1665-0.jpg

2024-06-13

 

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

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences