What I Learned by Fixing One Line of CSS in an Open Source Project

While browsing Svelte documentation on iPhone, I found an obvious UI error. There was nothing wrong with the REPL knob. I've always wanted to contribute to open source projects and I think it's a quick and easy fix. It turns out that it's more than just changing a line of CSS code.

Copying, debugging, and setting up a local environment is both fun, difficult and of great significance.

question

I opened the browser developer tool and thought I would see the same problem in the phone view. However, the error disappeared. Now this is a very tricky CSS problem.

? Harvest

If you are using Chrome as your browser on iOS, you are still using Safari's rendering engine. Excerpted from Wikipedia:

Chrome uses iOS WebKit—which is Apple’s own mobile rendering engine and components for its Safari browser—so it can’t use Google’s own V8 JavaScript engine.

Caniuse also backs up this, which provides the following instructions on iPS Safari:

It's clear now why the problem didn't appear on my machine, but it appeared on my phone. Different rendering engines!

Reproduce the problem locally

I downloaded the project and ran it locally. I confirm that it is still a problem by running local code on the emulator as well as my actual iPhone. Safari on macOS provides an easy way to open developer tools for each instance.

This provides the same console access as in the browser, but works with iOS Safari. I'm not lying, Apple's developer experience is great (see what I did??).

I'm now able to reproduce this problem locally.

? Harvest

After downloading the Svelte repository and looking at some code, I noticed that the UI and SVG were introduced through a package called @sveltejs/site-kit. OK, now I need my site kit local version to be pulled into svelte/site so that I can see the changes and debug the problem.

I need to point node_modules in Svelte's package.json to my site-kit local copy. This sounds like a symbolic link. After looking up the documentation without much results, I searched on Google and stumbled upon npm-link. This shows me what I'm doing!

I can now make local changes to the site-kit and see that they are reflected in the Svelte project.

Solve the problem

Seriously, just change one line of code:

 <code>border: transparent;</code>

But finding the location where this line of code should be placed is not as simple as you think. There is some rough spot for the project's source map, which shows that this CSS comes from the Nav.svelte component, and in fact it comes from another file. This will be another great way to contribute to the project!

Then you search around and learn that this is being processed and you will also learn more about how it is done. Everything looks great on mobile and desktop now.

review

It was initially just a simple single-line code change, but it turned into a journey. I had to:

• Run projects and component warehouses
• Understand the system links
• Contribute documentation for site-kit links
• Learn about different browser rendering engines
• Learn how to emulate iOS Safari browser
• Learn how to access its debugger
• Finding the problem when the source map is not working properly
• (Final) Fix the issue

When you do it yourself, you usually don't deal with such problems, or you need to build a large and complex system that requires building a mental model and learning. You can't learn from the maintainer. Most importantly, you won't see all the effort put into building a popular tech product.

When I submitted this idea to CSS-Tricks, Chris said he had had a similar situation recently. Hard learning is lasting learning. Hug and struggle.

Never stop

I've got another question from the Svelte project and now I'm learning CSSStyleSheet because there's another question (I think) about how Safari handles keyframe animations in stylemanager.ts. In this way, my study continued to move forward along a path I had never taken in my daily work.

When something crashes, enjoy the process of learning the system. You will gain valuable insights on why the thing collapses and what can be done to fix it. This is one of the great benefits of contributing to open source projects and why I encourage you to do so.

The above is the detailed content of What I Learned by Fixing One Line of CSS in an Open Source Project. For more information, please follow other related articles on the PHP Chinese website!