Thinking of contributing to Penpot core but not sure where to start? Weāve made a curated selection of enhancements to help you with that. We believe that these tasks should be a great way to get started with Penpot development and quickly become an active contributor.
How to start
If you decide to start working on one contribution, please tell us so we can help you. We are willing to provide guidance, context and all the information needed. You can do it the way you are most comfortable with, but leaving a reply at this post seems the best option, so that the conversation can help others.
Also, you can find contribution guidelines at the Core code contributions guide.
The list
Hereās the list of enhancements. These are all GitHub issues labeled with the tag contributions-welcome.
9 Likes
Wow huge work AndyĀ”Ā”Ā” It will be great if a lot of people help usĀ”Ā”Ā” 
1 Like
Hi Penpot team,
I would really try to help (so far I contributed only once), but I canāt find specific area. Iām living on the edge of design and frontend disciplines ā which meanās Iām mostly responsible for the quality of frontend implementation and consistency across the all product. I love improving accessibility, designing CSS architecture (and working with CSS in general) and building design system (in both - design tools and Front-End). If you find this skill useful, please feel free to contact me and I could pick out areas for improvement. Or if you feel that there is something for me, I would like to help. Good luck!
2 Likes
Is there a way for designers to contribute? I would be interested in help but not certain how. Cheers and good luck!
1 Like
Hi there!!! Thank you so much for your interest.
Here you have a post about design contributions
Let us know if you need anything else.
1 Like
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:
- As for CSS improvements, itās: readability, maintainability, extensibility - such code cannot be maintained long-term without growing.
- 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.
- 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
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
For some reason, now it works and I can see login screen 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
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 ) 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
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!
