Local environment and help offering

Hi team!

I have 2 topics I would like to discuss.

  1. Is there any way how I can run Penpot app (for e.g. using Docker what works for me) locally where I can debug changes in code? By this I mean if there is some approach like when I run Penpot help, where I can see every change in code when running locally.

  2. I saw that you have new Penpot site. Do you plan update also help center based on new designs? I’m offering you my coding experience so if you plan to change your Help site with same visual designs as Penpot site, I can code your Help center based on that.

I can do it without prepared designs (using your design foundations), but I’m not sure if this is something you would like to do. If this approach is also welcome, I can create changes based on your new Penpot site. Feel free to contact me - or can I be more active?

Ondřej

Thanks for the offering Ondřej.

About the first one. Yes, of course. If you clone the repository of Penpot you can run ./manage.sh run-devenv and a development environment using docker containers will be up and running. The terminal it will open is a Tmux with 4 windows: 0- gulp 1- frontend 2-exporter 3-backend. So if you’re doing frontend development just change with “Ctrl+b 1” and you will see the compilation results.

We’ve got that documented here: 3.3. Dev environment

You can see me doing it in a video i recorded some time ago: Challenges of developing a tool for designers - YouTube (I start the environment around 11:50)

1 Like

About the topic 2. At the Help Center we will update the illustrations for the categories (user guide, faqs, etc) probably today. Nothing else is in our minds, as the rest of the look & feel (colors and typography) is still in line with the new web aesthetics.

If you have more specific proposals to update the Help Center we’d love to know about them and the reasons behind so we can have a clear idea before coding anything.

Thanks for the offering!

1 Like

Thank you for your reply. I somehow missed this part in documentation and I think that there is only one way how to run app locally using Docker or Elestio.

Anyway, I have some issues. When I use “docker compose -p penpot -f docker-compose.yaml up -d”, app is running smoothly. When I tried approach with “./manage.sh run-devenv” nothing is happening and I can’t figure out where the problem is. Do you think that you can take a look on the video and tell me, if there is something wrong (note that there is long building process, you can skip it)?

What is interesting is that I can watch CSS changes, just can’t run it in browser for some reason:

Thank you for your help @alotor !

Thank you for reply @myfunnyandy. What I meant is changing for example color shades based on your main page, swap typography setting (line-heights, letter spacing, sizes, weights etc.) and font family (Source Sans Pro vs. Work Sans), small graphic details like border radiuses, button sizes etc.

There is an example and if you like this idea, I can prepare changes and post prev/update version next to each other.

I’m not sure if it’s your goal, but I have experience in this, so I thought I could take it on.

Ondřej

1 Like

Much clearer now, thaks for the explanation. I’ve discussed this with the design team and as long as changes are constrained to look & feel following the aesthetics of the new website and maintain content and structure we will feel confortable with your approach.

So yes, please go ahead preparing those changes, we’d love to see them.

1 Like

I was thinking about these changes:
General:

  1. Change font typeface to “Work Sans”
  2. Created new color palette from Penpot page
  3. Change paragraphs <p> and lists <li> font size to 16px from 17.6px according to website

Homepage:

  1. Change heading <h1> size and settings
  2. Change primary button settings - radius, size, leading, inner spacing (padding), motion effects and transitions - 1:1 w/ Penpot site)
  3. Added new gray palette from Penpot site (I kept old one) and applied to (border, header, inputs, texts color)
  4. Search input update: larger radius, border color, icon color and vertical alignment, inner padding, placeholder typography settings (kerning, indented from the left side)
  5. Menu - font size change to 16px, font weight changed to Medium (500) - everything according to Penpot web, Added blu effect according to Penpot page
  6. Cards (User guide, FAQ’s etc.) - changed border, inner spacing, description text darker gray from new palette, removed green border and shadow effect on hover (it’s softer then on Penpot page, because here it looks little bit aggressive)
  7. Advice tag in Card (WIP) - try different approach, that fit more to rest of the page and does not look like buggy button. Please feel free to advice any changes here - it’s a bigger change.
  8. Github section - change font size from 17.6 to 16px, changed dashed top/bottom borders color to new gray medium
  9. Pre footer - changed dashed border color

Page detail

  1. Changed font size for leading intro text from 24px to 20px (because Work Sans have different propositions)
  2. Polish typography settings (maily paragraph spacing because of new font)
  3. Intro section cards (e.g. Quick Start, Interface) - align to the grid (see screenshot below)

And few more changes, that I will describe on PR if you agree. There you can see screenshot and video from updated version. Feel free to comment anything that you think should be changed. There is more things to improve (mobile version, heading settings in articles etc.) but I would like to start with this and confirm, if it add value for you.

There is screenshot and video from Homepage and detail:

Video (not sure if this approach is useful and you can focus on details), it’s better to run docs and compare it in browser.

Please, let me know, if it was useful for you and if I can prepare PR for you.

1 Like

Great and subtle job @ondrejkonec and great summary too. Having a reasoned, comprehensive list of changes helps us a lot to be able to accept them.

About the “WIP” tag, I like the new approach. Funny thing is that I was thinking on removing it as the purpose of it seems to be outdated. We’ve launched this documentation with very few information and we felt that this was neccessary to indicate that we kwen that a lot of content were still missing, and the situation is more than a bit different now.

About the search box, have you tried to write something there? It displays a list with the predicted results that had suffered some missalingments in the past. It might worth to check it this time.

Please go ahead with the PR, we’d love to publish those changes.

Thanks @myfunnyandy and I hope it help.

Talking about WIP tag - do you want to remove it right now? I can do it on already existing pull request.

This PR is already here https://github.com/penpot/penpot-docs/pull/132 and feel free to ask for more help.

I did not check (even did not know that there is search list) so I’ll check this item and add commit if need.

I will also create one more PR in few days with mobile version improvements (mostly bugs) so I’ll mention you in the comment. What do you think?

I’m happy to help.

Ondřej

As it no longer serves its initial purpose you can remove the WIP tag. If it’s any inconvenience for you we can do it ourselves, of course.

Don’t worry about the search list, we’ll check that case when reviewing the PR. And I’ll be happy to keep discussing you more proposals. The Help Center has a lot of room for improvements at smaller/mobile sizes, so bugfixing sounds great.

I’m happy you’re happy to help :slight_smile:

1 Like

I think what I can do for searchbox right now is that I can change list height according to list items. I think that is better experience even it’s just a detail.

Current version:

What do you think @myfunnyandy ?

1 Like

Adapting the container size to its content at dropdowns it’s a common best practice so that’s definitely better.

Allright. I update my branch with this fix + I already removed the tag “WIP” from User guide.

1 Like

@ondrejkonec the changes are already published at https://help.penpot.app and look great. Thanks!

2 Likes

Thanks @myfunnyandy for publishing my changes, I appreciate that! And it really works great IMHO :slight_smile:

2 Likes

Just letting you know, that I figure out how to run the app. Thank you for you help!

1 Like