Ce que j'ai appris en fixant une ligne de CSS dans un projet open source

En parcourant la documentation Svelte sur iPhone, j'ai trouvé une erreur d'interface utilisateur évidente. Il n'y avait rien de mal avec le bouton de remplacement. J'ai toujours voulu contribuer à des projets open source et je pense que c'est une solution rapide et facile. Il s'avère que c'est plus que simplement changer une ligne de code CSS.

La copie, le débogage et la création d'un environnement local sont à la fois amusantes, difficiles et très importantes.

question

J'ai ouvert l'outil de développeur de navigateur et j'ai pensé que je verrais le même problème dans la vue du téléphone. Cependant, l'erreur a disparu. Maintenant, c'est un problème CSS très délicat.

? Récolte

Si vous utilisez Chrome comme navigateur sur iOS, vous utilisez toujours le moteur de rendu de Safari. Extrait de Wikipedia:

Chrome utilise iOS WebKit - qui est le propre moteur et composants de rendu mobile d'Apple pour son navigateur Safari - il ne peut donc pas utiliser le propre moteur JavaScript V8 de Google.

Caniuse soutient également ceci, qui fournit les instructions suivantes sur IPS Safari:

Il est clair maintenant pourquoi le problème n'est pas apparu sur ma machine, mais il est apparu sur mon téléphone. Différents moteurs de rendu!

Reproduire le problème localement

J'ai téléchargé le projet et je l'ai exécuté localement. Je confirme que c'est toujours un problème en exécutant du code local sur l'émulateur ainsi que mon iPhone réel. Safari sur MacOS fournit un moyen facile d'ouvrir des outils de développement pour chaque instance.

Cela offre le même accès à la console que dans le navigateur, mais fonctionne avec iOS Safari. Je ne mens pas, l'expérience du développeur d'Apple est géniale (voir ce que j'ai fait ??).

Je suis maintenant capable de reproduire ce problème localement.

? Récolte

Après avoir téléchargé le référentiel Svelte et en regardant un code, j'ai remarqué que l'interface utilisateur et le SVG ont été introduits via un package appelé @ sveltejs / site-kit. Ok, maintenant j'ai besoin de la version locale de mon kit de site pour être tiré sur Svelte / Site afin que je puisse voir les modifications et déboguer le problème.

J'ai besoin de pointer du Node_Modules dans Svelte's Package.json à ma copie locale-kit de site. Cela ressemble à un lien symbolique. Après avoir recherché la documentation sans beaucoup de résultats, j'ai cherché sur Google et trébuché sur NPM-Link. Cela me montre ce que je fais!

Je peux maintenant apporter des modifications locales au kit de site et voir qu'ils se reflètent dans le projet Svelte.

Résoudre le problème

Sérieusement, changez simplement une ligne de code:

 <code>border: transparent;</code>

Mais trouver l'emplacement où cette ligne de code doit être placée n'est pas aussi simple que vous le pensez. Il y a un point difficile pour la carte source du projet, qui montre que ce CSS provient du composant Nav.Svelte, et en fait il provient d'un autre fichier. Ce sera un autre excellent moyen de contribuer au projet!

Ensuite, vous recherchez et apprenez que cela est en cours de traitement et vous en apprendrez également plus sur la façon dont cela se fait. Tout a l'air super sur le mobile et le bureau maintenant.

revoir

Il s'agissait initialement d'un simple changement de code à une seule ligne, mais cela s'est transformé en voyage. Je devais:

• Exécuter des projets et des entrepôts des composants
• Comprendre les liens du système
• Contribuer une documentation pour les liens de kit de site
• Renseignez-vous sur les différents moteurs de rendu de navigateur
• Apprenez à émuler le navigateur de safari iOS
• Apprenez à accéder à son débogueur
• Trouver le problème lorsque la carte source ne fonctionne pas correctement
• (Final) résoudre le problème

Lorsque vous le faites vous-même, vous ne traitez généralement pas de tels problèmes, ou vous devez construire un système important et complexe qui nécessite de construire un modèle mental et un apprentissage. Vous ne pouvez pas apprendre du mainteneur. Plus important encore, vous ne verrez pas tous les efforts consacrés à la construction d'un produit technologique populaire.

Lorsque j'ai soumis cette idée à CSS-Tricks, Chris a déclaré qu'il avait récemment eu une situation similaire. L'apprentissage difficile est un apprentissage durable. Étreindre et lutter.

Ne s'arrête jamais

J'ai une autre question du projet Svelte et maintenant j'apprends CSSStylesheet parce qu'il y a une autre question (je pense) sur la façon dont Safari gère les animations de l'abri dans StyleManager.ts. De cette façon, mon étude a continué à avancer sur un chemin que je n'avais jamais pris dans mon travail quotidien.

Lorsque quelque chose se bloque, profitez du processus d'apprentissage du système. Vous obtiendrez des informations précieuses sur les raisons pour lesquelles la chose s'effondre et ce qui peut être fait pour le réparer. C'est l'un des grands avantages de la contribution à des projets open source et pourquoi je vous encourage à le faire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!