[Welcoming] Add screenshots or GIFs to open pull requests to illustrate new features

[jywarren]

As part of our ongoing work to welcome newcomers, this will help them get started in a codebase they may not be familiar with! 🔍 🕵️

With so many new contributors (yay! 🙌) we need help reviewing newly submitted code! One way to help is to download someone's code and take a screenshot to confirm it works.

(see more issues like this here)

Find a pull request by a newcomer

Browse through this list to find pull requests: https://github.com/publiclab/plots2/pulls

If it's by a new contributor, you should see a message from WelcomeBot, like this!

Install their code

One way to help is to try installing it by downloading the code from someone else's pull request and starting it up on your own computer 💻 ⚡️

Usually you can see their branch name just below the title, to the far right:

Be sure you start on your own main branch and that it's in sync with the version at https://github.com/publiclab/plots2 (or whatever the main repository is) -- run git pull https://github.com/publiclab/plots2 master to fetch the latest updates.

Then, open a new branch with the same branch name as the PR; for the above example, that's @milaaraujo's update-api-docs branch. So the command would be:

git checkout -b update-api-docs (this makes the branch)
git pull https://github.com/milaaraujo/plots2 update-api-docs (this fetches @milaaraujo's new contributions)

Now you've got @milaaraujo's proposed code!

Try out the feature

Now, try out the feature the PR describes. If it isn't clear what's new, ask the PR author what URL to try and what to look for, in a comment; and be friendly! 😄 🎉

If you can see it, respond with a comment telling whether it worked, and congratulate the author if it does!

If it doesn't work, be encouraging and ask questions.

Take a screenshot

Here's what'll be REALLY helpful. For features where there should be a visually verifiable change, take a screenshot! 📸 and post it in the PR to show what you see!

For some features, you may want to try it out at 2 different page widths in case it gets squashed weirdly on "smartphone-sized" screens.

Make a GIF

For interactive features, like hover effects, autocompletion, or progress bars and such, or to demonstrate changing the screen width, you can use different programs to make an animated GIF and upload that into the pull request. That's super helpful, and also fun! 🎥 🐎

You can use these programs to make the Gif:

• https://github.com/phw/peek (Linux)
• https://www.cockos.com/licecap/ (Mac OS and Windows)

That's it! If you have questions, please ask them here and we can help!

[vikul1234]

All os have some default screenshot tools, these tools help to take a screenshot of your desired area and edit or highlight the snapshot easily. Just use a shortcut key.

You can use these programs to click a screenshot:

gnome-screenshot (Linux)
snipping tool (Windows)