Gitpod: Show productivity tips in the splash screen

[jankeromnes]

I have two problems when using Gitpod:

1. When I click on a Gitpod button, I have to watch a splash screen for a short while (because the IDE takes some time to be ready)
2. There are many neat productivity tricks and features in Gitpod that I'm not aware of (because I'm a new user, or I haven't read the docs / the code / watched videos, etc like for example typing F1 or using gp open)

I see an opportunity to address both problems: Showing productivity tips in the splash screen. That way, every time I wait for the IDE to load, I potentially learn something new that will save my time later.

This is something that Cloud9 IDE already does:

https://github.com/c9/core/blob/e9490da4e721915df42d1c468ea7c98f879fbb11/plugins/c9.vfs.standalone/www/ide.html#L47-L72

To illustrate with an example, one day I discovered the Cloud9 tip about renaming variables with Ctrl-Alt-R, and I instantly loved it and adopted that feature, which saves me a ton of time since then.

Ideal Gitpod features for such a tip could be:

• [x] Typing F2 to rename a symbol (this feature was my favorite discovery in Cloud9 IDE)
• [x] Typing F1 to fork a repository (I absolutely didn't know F1 existed until you told me about it in a bug report. Some of its features aren't even exposed in the context menus, so I was missing out on them)
• [x] Using gp open to open a file in the IDE (same thing; I used to hunt for particular files using the file tree)
• [ ] Using z to jump around faster in the repository (if you install https://github.com/rupa/z which is amazing)
• [ ] Using rg or fd to find things (same, if you install https://github.com/BurntSushi/ripgrep and https://github.com/sharkdp/fd)
• ... any other feature that users don't know about but could be a huge time saver

[jankeromnes]

Hi Gitpod friends, what are some keyboard shortcuts / commands / quick workflows that you love and that save you a lot of time & effort when you use Gitpod?

For me it was discovering about F1 + 'fork' and F2 to rename symbols.

If you have some time, I'd love your opinions: @AlexTugarev @sr229 @svenefftinge @akosyakov @spoenemann @geropl @32leaves @meysholdt @jbicker @JanKoehnlein 😊

P.S. I have this provisional list, which I'll try to update with your suggestions:

Serious stuff:

• Hold Option+Shift to select code vertically.
• Press Cmd+P to search for any file by name.
• Press Ctrl+` to open a new Terminal.
• Press Cmd+/ to quickly comment out code.
• Press Ctrl+- to jump to the previous Editor location.
• Press F1 and type 'fork' to quickly fork a GitHub repository.
• To rename a variable, highlight it then press F2.
• To take a snapshot of your workspace, click on your avatar (top right).
• To invite a friend for pair programming, click on your avatar (top right).
• To share a code snippet, right-click on selected code then use 'Open in GitHub'.
• Run 'gp open README.md' to open a file from the Terminal.
• Run 'gp init' to create a .gitpod.yml for your project.
• Run 'gp url 8080' to show a Preview URL.
• Questions? Join our community on Spectrum.
• Questions? Check out docs.gitpod.io.
• Please submit bugs or feature requests on GitHub.

Fun stuff?

• Powering up flux capacitor

• Reticulating splines

  (Also, feel free to comment about the wording, e.g. I'm not sure the word "quickly" is necessary?)

[svenefftinge]

For shortcuts we need to have them OS dependent.

[jankeromnes]

We could also mention that you can prefix any GitHub URL with gitpod.io# to create a new workspace (it seems that many users still don't really know that you can do that).

[sr229]

Hey, we could also add some easter eggs and funny loading lines while we're at it, I mean, Cloud9 IDE does it!

[svenefftinge]

Hey, we could also add some easter eggs and funny loading lines while we're at it, I mean, Cloud9 IDE does it!

Suggestions are very welcome!

[jankeromnes]

A few more great suggestions from Sven:

• "Questions? Join our community on Spectrum."
• "Navigate to the previously shown editor with Ctrl+-."
• "Questions? Check our documentation."
• "Found a bug or have a feature request? Submit it here."
• "Init a .gitpod.yml using the cli: gp init."

Regarding the last one, I already had it as "Run gp init to configure Gitpod for your project."... any preference?

[jankeromnes]

Maybe we could also mention the gitpod.io# URL prefix? I think it's a really cool / underrated feature.

[svenefftinge]

We need to make sure that everybody understands the gitpod.io# prefix. Just showing it from time to time in the productivity tips doesn't seem good enough to me.

[jankeromnes]

I agree, it's not the full answer. But maybe it can be part of the answer?

[sr229]

We can do something like this:

Did you know you that every GitHub project can be a Gitpod workspace? Simply add gitpod.io# at the beginning of each GitHub link. Read the Documentation to find out more!

what do you think @jankeromnes @svenefftinge

[jankeromnes]

Great phrasing, thanks! 🙂 Sven also had an interesting suggestion that we mention the URL prefix in the same message where we suggest installing the WebExtension, that way new users can learn about both options.

Maybe users who already have the WebExtension and created a few workspaces already know about the prefix, and don't need to be reminded? I'm not quite sure.

[sr229]

that would be great actually! @jankeromnes, since showing that tip might be redundant, but might be helpful if they're working on machines that can't install the extension.

[jankeromnes]

Another really cool "hidden" feature: right-click on selected lines in Editor and click "Open in GitHub".

[spoenemann]

• alt + shift + C: collapse all side panels (i.e. maximize editor)

[jankeromnes]

* `alt + shift + C`: collapse all side panels (i.e. maximize editor)

Oh wow, that does sound useful! Do you know if there is a similar feature for the Terminal? (I greatly miss the "maximize terminal" button of Cloud9 IDE).

[spoenemann]

AFAIK there is no command/keybinding for that. But if you put the terminal into the main area (i.e. the dock panel containing the editors), you can use the same command as above to maximize it.

[jankeromnes]

Maybe also something along the lines of Run 'python3 -m http.server 8000' to easily serve static content?

I know that there is also the HTML live-preview, but it has certain limitations (e.g. not able to open it in a new tab), to which a one-line static server could be a nice workaround.

[sr229]

I think people are not aware of the gp CLI for port forwarding, I think we should cover them as well.

[jankeromnes]

gp forward-port was originally in the list, but I removed it, since it's already mentioned in the prompt that appears when you start something on a localhost-bound port. Do you still think that we should also mention it in the splash screen?

[sr229]

yep, not everytime Gitpod can automatically forward the ports

[jankeromnes]

@ChristinFrohne, @jbicker, @svenefftinge and I implemented productivity tips in the loading screen, and we're just about to release it this afternoon! 🎉 🤞

It should look something like this:

Amazing team work! And many thanks for all the cool ideas in this issue. 💯

[ChristinFrohne]

Looks great!!
I just wanted to check, if the URL of the box still changes with your actual URL (as that's not the case on the screenshot) and on Firefox the white box is not displayed at all. Is that an other typical Firefox thing?
I didn't manage to open this screen in Chrome another time

[jankeromnes]

Which white box is not being displayed? (Note: This is a Firefox screenshot.)

[ChristinFrohne]

oh sorry, I just talked with Jan B. he explained it to me. My mistake

[svenefftinge]

Let's push the release to Monday morning. :-)