Remake all screenshots

[sstevens2]

We have several issues with the current screenshots:

• various sizes/resolutions
• different usernames
• extensions showing (gitpod)
• whitespace in screenshots makes it hard to differentiate the screenshots and the surrounding lesson text

After the two pilot workshops and when the lessons have become more stable we need to remake all the screenshots and standardize them.

[sstevens2]

See #95 and #51 for more info

[unode]

For adding borders in a somewhat automated way, using the convert command from ImageMagick:

convert original.png -bordercolor '#d7d7db' -compose Copy -border 5 original_with_border.png

[tobyhodges]

As suggested by @maxim-belkin in the issue thread on the lesson template repository we can add a border to specific images/screenshots by providing the CSS right after the image is embedded:

![Blank new repository page](../fig/blank_new_repo.png){: style="border: solid 1px #d7d7db; background: #eee;" width="600px" }

I have tested locally and can confirm this works. It's also the way we can specify the width of the image without resorting to HTML img tags. It will be good to add the border to screenshots in the lesson while this issue is being addressed.

[unode]

For a more pleasing look, we could perhaps also consider a drop-shadow effect.
https://www.w3schools.com/css/tryit.asp?filename=trycss3_box-shadow5

If the second suggestion (using a CSS class) also works (didn't test yet) that's certainly more maintainable.

[tobyhodges]

If the second suggestion (using a CSS class) also works (didn't test yet) that's certainly more maintainable.

Indeed. I'm rustling up a PR to add the class to the lesson template. I agree that the drop shadow looks nicer, so I'll go for that.

(If you're interested to learn more, read more about these inline attribute lists (IALS) in kramdown.)

[tobyhodges]

Just noticed some of the screenshots in the GitHub Pages episode show gh-pages as the target branch for Pages builds. So these definitely need updating when this issue is addressed...

[tobyhodges]

carpentries/styles#514 was just merged, so (once we merge the upstream changes) we can apply drop shadow to images by applying the .image-with-shadow class.

[sstevens2]

Think this might need to wait again until we finish some other changes to the lesson. Still want to fill in the screenshots where there are FIXME's but want to wait to redo the rest.

[unode]

Recording some ideas discussed today.
To avoid having screenshots with different authors and repository owners.

1. We can create a jekyll-pages-novice-example repository in carpentries-incubator or another organization we are all part of.
2. We can modify git.user.email to [email protected] or another The Carpentries email and git.user.name to "The Carpentries". Would work for changes done locally but not for changes done via GitHub (see 3.).
3. Alternatively we could create an account that we share (for changes via GitHub) but @sstevens2 mentioned we could be breaching GitHub's ToS while doing this.

@tobyhodges Regarding 1. would this be acceptable use of the incubator org? Regarding 3. has this or any form of it ever been raised centrally with The Carpentries?

[unode]

#247 includes .image-with-shadow @tobyhodges mentioned above. 🎉

While working on #186 I found the "Responsive view" mode in Firefox to be quite convenient to have fixed dimensions and resolution for screenshots. It even includes a handy "Take a screenshot of the viewport" button on the top-right corner of the screen. You can enable this mode with Ctrl+Shift+M or Cmd+Opt+M on MacOS.

The mode is also available in Chrome, but you need to have the developer tools open for it to work. You need F12 and then you can hit Ctrl+Shift+M.

I found that 1200x1000 for viewport screenshots works well. Narrower sizes and you end up with tablet or phone-like views. Wider and you end up with a decent amount of unused screen space.

[anenadic]

Only one FIXME screenshot left now in the "Arrays"/"Loops and Collections" episode.

[tobyhodges]

Addressed in #255