Code Contributions welcome! 🙌

[ondrejkonec]

Hi @Eva_Marco, Since I don’t know yet what is the best way, where I can offer my help, I’m trying this thread. I have feeling that this post can be interesting for you and maybe for @myfunnyandy

I already wrote few lines above this post so I think I don’t need to introduce myself again But what is important is, that my job is designing interactions and interfaces for web based apps, but sometimes I miss writing code. I dare say that I have a deep knowledge of CSS and I would like to continue to apply and develop this skill in future, so I’m offering my help.

Few days ago, I applied new web page styles and fixed few bugs on Penpot help page and I will continue with responsible versions and so. But the reason why I write this comment is, that I’m thinking about bigger initiatives:

What
I’d like to start improving your CSS code in a few areas (very general, I’ll be more specific if the offer fits your goals and you see value in it):

• CSS architecture and structure (Reason: This is something that can help improve developing experience for another contributors and also can avoid CSS bloat and another issues like need of use !important, nesting, high specificity and inheritance issues, consistency, CSS file size, performance etc.)
  This is important mainly for a long term projects, where you expect adding more and more features and still want to be consistent
• Add naming convention and components structure (Reason: Right now, code is hard to read, has no structure and consist a lot of duplications. It also helps another contributors get oriented quickly and this will improve CSS component structure that can reduce tons of lines )
• Create design foundations CSS that can be used everywhere in the UI - colors (what you have), typography, sizes, spacing etc. (Reason: You have something, but it can be improved by adding token systems and so, you can create for example app light mode very easily)
• Performance improvements (Reason: When using slower connection, page performance is not great. It can be done by reducing DOM elements, improving CSS selectors, reduce the scope and complexity of style calculations etc.)
• Accessibility improvements (Maybe there is room and space for improvements, but it has to be discussed with a designer. So for now nothing specific).

Why
I have a lot of experience with this areas and my current job don’t allow me to improve my skills. I don’t want to lose the overview, so I would like to start gradually improving the interface of the Penpot app, which I like as a product.

There are several reasons why you should debe improved, but let me describe 3 of them:

1. As for CSS improvements, it’s: readability, maintainability, extensibility - such code cannot be maintained long-term without growing.
2. As for Performance, it’s obvious there. You never know where people are working with your application from and what kind of connection they have. The application should be light enough on the frontend.
3. As for Accessibility, it’s: 1 in 12 men and 1 in 200 women are color blind so chances are pretty high that many people who use your app have color blindness. This is especially important for designers since app have several issues related to accessibility

Analyze
I have done the analysis and I have the data which I would always publish after some time. The goal should be to improve these numbers and have a clear view that it was meaningful. There are examples:
CSS overview - size 379 Kb

Specificity

Colors

Performance

How
I can focus on one specific area (e.g. reduce duplicit effort on component X) and make small changes regularly and iteratively. When it’s done, I can share some data to see how impactful it was. What do you think about this idea?

Ondřej