Code Contributions welcome! šŸ™Œ

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 :slight_smile: 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

2 Likes

Hello @ondrejkonec :slight_smile:
I only can say WOOOW, Iā€™ve seen all this problems, and Iā€™m in the same page as you.
I would love to be able to fix all these problems, but making new features, fixing accessibility issues and refactoring parts of code doesnā€™t give us time for everything.
Any help in this area is more than welcome.
We can create some User Stories about these topics so you can start helping with them.
Letā€™s ask @myfunnyandy what he thinks about it.

1 Like

Your approach is great @ondrejkonec. Like @Eva_Marco mentioned, a CSS revamp (arquitecture, nomenclature, and so on) is something that we want to do and the reason we hadnā€™t done it yet is our tight prioritization.

I think starting with small work units that have value by themselves so we can merge them reducing the chance of conflicts with the on going work is the best way to proceed here. Everything youā€™ve listed above is valuable, so I invite you to pick a task that you feel youā€™d enjoy and we start from there.

As this is a topic with enough relevance and potential continuity I suggest to continue the discussion elsewhere so it does not get mixed with other conversations about about contributions. It could be a brand new Community post or GitHub, whatever you feel more confortable with.

Thanks!

2 Likes

Hi @Eva_Marco, glad to hear that Iā€™m in the same page as you too. I definitely agree that itā€™s not possible to do both at the same time - thatā€™s why Iā€™m happy to help.

if it suits you, I would always create a topic and start working on it and gradually send PRs. Iā€™ll try to make the first one today.

I have problem with running Penpot app with local env where I can see changes. What is your approach please? Maybe you can help me with that.

What works for me is docker compose -p penpot -f docker-compose.yaml up -d, but there I can debug my code. I wrote about this issue also in this thread. The thing is, that I tried the approach that explained me @alotor using ./manage.sh run-devenv, but I can see only blank screen.

What is you approach, please? Maybe it will work for me as well. And thanks for the permission to improve!

Ondřej

Hello @ondrejkonec I also use what @alotor said to you, and then I open this url ā€œhttp://localhost:3449/#/auth/loginā€ where the login should be. If that not happen tell us if you have any errors on some of the TMUX screens, or the black screen is on TMUX?

Thank you @myfunnyandy for your interest and letā€™s do it. I will analyze data and you will see reports from me every time when we we put some initiative live - do you think it make sense?

As this is a topic with enough relevance and potential continuity I suggest to continue the discussion elsewhere so it does not get mixed with other conversations about about contributions. It could be a brand new Community post or GitHub, whatever you feel more confortable with.

I would leave it up to you, I have no preferences, rather that the communication suits those who should comment on the topics. Do you have any idea?

Thanks for the trust and Iā€™ll pick first topic/task and begin :slight_smile:

For some reason, now it works and I can see login screen :slight_smile: Not sure what was the issue, but for now it works (I think that maybe updating. I canā€™t login with my usersname/password that I use, so when I will be available login, Iā€™ll let you know.

Maybe do you have any idea, if there are differencies with this approach and Docker run ( docker compose -p penpot -f docker-compose.yaml up -d)? If I should create new account?

Sorry for this question, Iā€™m still not so much familiar how this accounts works when using local version.

This DDBB is totally different of the production, thatā€™s why your login does not work. Create a new account and use ā€œhttp://localhost:1080/ā€ to activate it.

1 Like

Thanks Eva, it works so I think Iā€™m ready with local env :slight_smile:

1 Like

Yeah, I think it makes a lot of sense, It will be great to evaluate the impact of the initiatives.

About how to continue the discussion, I think it would be best to create a new post at the Community to deal with this topic specifically and openly, as it might be of interest other community members. Being the ā€œinitiative instigatorā€, could you please create it? A bare minimal intro including a reference to the original proposal would be enough.

Thanks!

Great, I will keep in mind these data and I will post them when there will be something interesting.

I would probably divide it into several larger topics (unification of declarations, reduction of selectors, creation of unified variables, code organization and structure, implementation of naming conventions, etc.), where the entire discussion will take place. Would that make sense?

Or itā€™s better to create just one big topic? I think that the most discussion will be about individual PRs so maybe itā€™s not necessary.

And what is the best place, where can I add this topic? Contribution?

Yes, one new topic under the category Contribution will be fine.

I tried short intro here (but Iā€™m really not sure what content should be :slight_smile: ) Please, feel free to comment my post if there is something you would like to add / remove / update.

It is already perfect, letā€™s continue the converstation there :slight_smile:

1 Like

Hello @Eva_Marco App is running, but I noticed that there is no auto reload when I make changes, right? Iā€™m just making sure thereā€™s no way to turn it on somehow.

Thanks!

Hello @ondrejkonec:
Our backend has not hot reload, you must stop the tmux window with ctrl+c and start it again (usually copy the command with arrow up)
Our fronted has hot reload, if you change something of css con clojure script it usually reloads automatically. You can look at tmux windows 0 and 1 to check if everything is up and running.

Thanks! I was thinking about frontend. Since I can see changes there, Penpot app is not refreshing and I have to press refresh button in browser to see changes. Is it as it supposed to be? Thanks!


My Tmux looks like this, it keeps watch main open.
My collegues are telling me that your problem can come from your file system or your OS.
Can you give me this info of your setup?
Letā€™s see what we can do.

1 Like

Thank you @Eva_Marco for your patience. I donā€™t know why, but app is now refreshing for unknown reason. Next time, Iā€™ll wait at least few hours before I write a post, because this is the second time this has happened. For unknown reason, it works at the moment.

Maybe itā€™s different, because of my OS (MacOS Ventura 13.0, with M1 chip) using default terminal or VSCode terminal.

Thanks again Eva.

Okkk no problem.
Let us know if you have any issue. :smiley:

1 Like