From f197f2c5046a87581251a7505ae153fb8b1bdc2b Mon Sep 17 00:00:00 2001 From: jamesdanielwhitford <70632508+jamesdanielwhitford@users.noreply.github.com> Date: Wed, 18 May 2022 13:58:40 +0200 Subject: [PATCH 1/4] Update keyboard shortcuts --- tutorials/10-productivity-hacks.md | 42 +++++++++++++++--------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/tutorials/10-productivity-hacks.md b/tutorials/10-productivity-hacks.md index 152dd7a2..20072224 100644 --- a/tutorials/10-productivity-hacks.md +++ b/tutorials/10-productivity-hacks.md @@ -10,25 +10,28 @@ Specifically, you'll see how to: Similarly to learning to touch type, there is often a steep *learning curve* when you start to use advanced code editing features. They might even substantially slow you down at first, but once you master them you'll soar past the limits of what you could achieve without these aids. +*Note:* This documentation demonstrates Windows shortcuts. So, if using a Mac, make use of the `cmd` key instead of the `ctrl` key, and make use of the `option` key instead of the `alt` key. + ## Using the global command palette -If you hit `Ctrl+K` (`Cmd+K` on MacOS) you'll see the following modal pop up, which lets you navigate through different parts of Replit at lightning speed using only your keyboard. If you have a lot of files, it's often useful to open them like this rather than scrolling through the directory structure in the files pane (the `find` option searches through files by their *name* while the `search` option searches through files by their *contents*.) +If you hit`Ctrl+.` you'll see the following modal pop up, which lets you navigate through different parts of Replit at lightning speed using only your keyboard. If you have a lot of files, it's often useful to open them like this rather than scrolling through the directory structure in the files pane (the `find` option searches through files by their *name* while the `search` option searches through files by their *contents*.) ![**Image 1:** *Using the global command palette.*](/images/tutorials/10-productivity/10-01-global-cmd-palette.png) -The keyboard shortcut indicated to the right of each option shows how to activate that option directly without opening up the global command palette, but once it's open you can type in a part of any of the options to activate that option. For example, in our weather project app, I can type `Cmd+K` and then type `fi` (start of `find`) and press `Enter` and then type `Lo` (start of `London.txt`) and press `Enter` again to quickly open the weather log for London. -![**Image 2:** *Opening a file with the global command palette.*](/images/tutorials/10-productivity/10-02-GIF-find.gif) +## Using the code editing command palette -Of course, with only six files it might be faster to reach for my mouse, but as the find searches through all files in all directories this method can be significantly faster for larger projects. +The code command palette is similar to the global command palette, but it's specific to editing and navigating your code, allowing you to do advance find+replace procedures, jump to specific functions and more. -Opening up the multiplayer, version control, and settings panes using this method is also faster once the habit is ingrained compared to moving the mouse to the small icons on the left bar. And while pressing `Ctrl+Enter` or `Cmd+Enter` to run your code is faster than choosing "Run" from this global command ette, `Ctrl+K` is only a single shortcut to remember and it will remind you of any other shortcuts you can't recall. +To access the code command palette press `F1` or `Ctrl+Shift+P`. Note that if you're using Firefox the second option will open an incognito window instead. -## Using the code editing command palette +The keyboard shortcut indicated to the right of each option shows how to activate that option directly without opening up the global command palette, but once it's open you can type in a part of any of the options to activate that option. For example, in our weather project app, I can type `Cmd+P` and then type `fi` (start of `find`) and press `Enter` and then type `Lo` (start of `London.txt`) and press `Enter` again to quickly open the weather log for London. -The code command palette is similar to the global command palette, but it's specific to editing and navigating your code, allowing you to do advance find+replace procedures, jump to specific functions and more. +![**Image 2:** *Opening a file with the global command palette.*](/images/tutorials/10-productivity/10-02-GIF-find.gif) -To access the code command palette press `F1` or `Ctrl+Shift+P` (`cmd+shift+P` on MacOS). Note that if you're using Firefox the second option will open an incognito window instead. +Of course, with only six files it might be faster to reach for my mouse, but as the find searches through all files in all directories this method can be significantly faster for larger projects. + +Opening up the multiplayer, version control, and settings panes using this method is also faster once the habit is ingrained compared to moving the mouse to the small icons on the left bar. And while pressing `Ctrl+Enter` or `Cmd+Enter` to run your code is faster than choosing "Run" from this global command palette, `Ctrl+.` is only a single shortcut to remember and it will remind you of any other shortcuts you can't recall. You can use the shortcuts directly from the command palette by selecting the code you wish to edit and clicking on the command in the drop-down menu, or use it to refresh your memory on the keybindings associated with the shortcuts you use often. @@ -50,7 +53,7 @@ ball2 = Ball() ball3 = Ball() ``` -Instead of typing out all three lines, you can type out the first one, leave your cursor position on that line, and press `Shift+Alt+down` (`shift+option+down` on MacOS) twice. This will create two copies of the line, directly below the original one, and then you can simply change the number in the variable to account for the second two balls. +Instead of typing out all three lines, you can type out the first one, leave your cursor position on that line, and press `Shift+Alt+down` twice. This will create two copies of the line, directly below the original one, and then you can simply change the number in the variable to account for the second two balls. ![**Image 4:** *Copying the current selected line.*](/images/tutorials/10-productivity/10-04-GIF-duplicate-line-entries.gif) @@ -58,12 +61,12 @@ Instead of typing out all three lines, you can type out the first one, leave you There may be instances where you'd want to delete large chunks of code at a time (it happens to the best of us!). -Pressing `Ctrl+Shift+K` (`cmd+shift+K` on MacOS) deletes the line underneath your cursor (or if you have multiple lines selected it will delete all of them.) +Pressing `Ctrl+Shift+K` deletes the line underneath your cursor (or if you have multiple lines selected it will delete all of them.) Instead of deleting the entire line, you can also delete from your cursor up to the end of the line or from your cursor to the beginning of the line. The shortcuts for these are -* `Ctrl+Backspace` (`cmd+backspace` on MacOS) to delete backwards -* `Ctrl+K` (same on MacOS) to delete forwards +* `Backspace` to delete backwards +* `Del` (`Fn+Backspace` on MacOS) to delete forwards As an example, below you can see how we might use this to first delete one of the our `elif` blocks by doing two "delete line" operations. We then change our random speed to be constant by using a "delete to end of line" operation from the `=` sign and then typing our constant. @@ -73,15 +76,12 @@ As an example, below you can see how we might use this to first delete one of th It's also common to need to add a new line of code above or below the current one. Instead of using your mouse or arrow keys to get to the right place and then pressing `Enter`, you can instead use an "insert line" operation. -Press `Ctrl+Shift+Enter` (`cmd+shift+enter` on MacOS) to insert a blank line directly above the current one and move the cursor to the start of it (Replit will even maintain the current level of indentation for you). - -![**Image 6:** *Inserting lines.*](/images/tutorials/10-productivity/10-06-GIF-insert-blank-lines.gif) ## Indenting and dedenting lines When writing Python, you probably pay more attention to whitespace (spaces or tabs) than in other langauges, which use braces to handle logic. You're probably used to indenting and dedenting using `Tab` and `Shift+Tab`, which requires you to first place the cursor at the start of the line. -Instead you can use `Ctrl+]` (`cmd+]` on MacOS) to indent and dedent the line no matter where your cursor is. For example, if you need to fix the indentation in the following code, you can +Instead you can use `Ctrl+]` to indent and use `Ctrl+[` dedent the line no matter where your cursor is. For example, if you need to fix the indentation in the following code, you can * put your cursor on the `for` line * press `Ctrl+]` * press `down` @@ -96,17 +96,17 @@ Now your code's indentation will be fixed. Sometimes you need to move a block of code up or down in the file. For example, our `update()` function uses our `move()` function, but `move()` is only defined later. For readability, it's good to try ensure that your functions only call functions that have already been defined further up (assuming that someone else is reading the code top down, they will remember the `move()` function's definition before seeing it used). -Instead of cutting and pasting a block, you can shunt it by pressing `Alt+up` or `Alt+down` (`option+up` and `option+down` on MacOS). As with the others, this works on the line under your cursor or a larger selection. +Instead of cutting and pasting a block, you can shunt it by pressing `Alt+up` or `Alt+down`. As with the others, this works on the line under your cursor or a larger selection. ![**Image 8:** *Moving the current line selection.*](/images/tutorials/10-productivity/10-08-GIF-moving-blocks-code.gif) ## Adding cursors -Sometimes it's useful to make exactly the same changes in multiple places at once. For example, we might want to rename our `speed` attribute to `velocity`. Put your cursor anywhere on the word that you want to change and press `Ctrl+D` (`cmd+D` on MacOS). Repeatedly press `Ctrl+D` to select matching words individually, each with their own cursor. Now you can apply edits and they will appear at each selection, as below. +Sometimes it's useful to make exactly the same changes in multiple places at once. For example, we might want to rename our `speed` attribute to `velocity`. Put your cursor anywhere on the word that you want to change and press `Ctrl+D`. Repeatedly press `Ctrl+D` to select matching words individually, each with their own cursor. Now you can apply edits and they will appear at each selection, as below. ![**Image 9:** *Adding cursors to multiple instances of the same selection.*](/images/tutorials/10-productivity/10-09-GIF-adding-cursors.gif) -If you want multiple cursors on consecutive lines, press `Ctrl+Alt+up` or `Ctrl+Alt+down` (`cmd+option+up` and `cmd+option+down` on MacOs). For example, if we want a square game we could change both width and height to be `1000` simultaneously as follows. +If you want multiple cursors on consecutive lines, press `Ctrl+Alt` and use your mouse to select areas to add a new cursor. For example, if we want a square game we could change both width and height to be `1000` simultaneously as follows. ![**Image 10:** *Adding cursors to multiple lines.*](/images/tutorials/10-productivity/10-10-GIF-consecutive-cursors.gif) @@ -114,13 +114,13 @@ If you want multiple cursors on consecutive lines, press `Ctrl+Alt+up` or `Ctrl+ Sometimes, especially in larger projects, you'll call a function or instantiate an object far from where that function or object is defined (either thousands of lines away in the same file, or in a different file altogether). -If you're reading a piece of code that calls a function and you want to quickly see what that function actually does, you can use the **go to definition** keybinding (`F12` or `cmd+F12` on MacOS). This will jump to the definition of the function or class selected. The **peek definition** has a similar functionality, but instead of jumping to the definition, it opens in a separate modal. For example, below, the cursor is on the instantiation of `Ball()` and we can quickly see how this class is defined. +If you're reading a piece of code that calls a function and you want to quickly see what that function actually does, you can use the **go to definition** keybinding `Ctrl+F12`. This will jump to the definition of the function or class selected. The **peek definition** has a similar functionality, but instead of jumping to the definition, it opens in a separate modal. For example, below, the cursor is on the instantiation of `Ball()` and we can quickly see how this class is defined. ![**Image 11:** *Peeking the definition.*](/images/tutorials/10-productivity/10-11-GIF-peek-definition.gif) The **go to line** operation (`Ctrl+G`) allows you to navigate to a line by giving its line number. This is useful to track down the source of those error messages that tell you what line had an issue, or if you're on a call with someone who says "I'm looking at line 23" and you can quickly jump to the same place. -Finally, you can open a specific file by searching for a part of the name by pressing `Ctrl+P` (`cmd+P` on MacOS), which can be quicker than scrolling through the files pane if you have a lot of files. +Finally, you can open a specific file by searching for a part of the name by pressing `Ctrl+P`, which can be quicker than scrolling through the files pane if you have a lot of files. ![**Image 12:** *Opening existing files.*](/images/tutorials/10-productivity/10-12-GIF-open-files.gif) From fcb77bb808e21c3f4c065edf90d1d96cdd5bb06f Mon Sep 17 00:00:00 2001 From: jamesdanielwhitford <70632508+jamesdanielwhitford@users.noreply.github.com> Date: Wed, 18 May 2022 14:38:44 +0200 Subject: [PATCH 2/4] Move point about file directory to the code editing command pallete @sixhobbits Here I made changes to the point you made regarding the searching of the file directory from the index page. I just moved that point tot be within the code editing palette. --- tutorials/10-productivity-hacks.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/tutorials/10-productivity-hacks.md b/tutorials/10-productivity-hacks.md index 20072224..1500393f 100644 --- a/tutorials/10-productivity-hacks.md +++ b/tutorials/10-productivity-hacks.md @@ -14,7 +14,7 @@ Similarly to learning to touch type, there is often a steep *learning curve* whe ## Using the global command palette -If you hit`Ctrl+.` you'll see the following modal pop up, which lets you navigate through different parts of Replit at lightning speed using only your keyboard. If you have a lot of files, it's often useful to open them like this rather than scrolling through the directory structure in the files pane (the `find` option searches through files by their *name* while the `search` option searches through files by their *contents*.) +If you hit`Ctrl+.` you'll see the following modal pop up, which lets you navigate through different parts of Replit at lightning speed using only your keyboard. ![**Image 1:** *Using the global command palette.*](/images/tutorials/10-productivity/10-01-global-cmd-palette.png) @@ -25,7 +25,10 @@ The code command palette is similar to the global command palette, but it's spec To access the code command palette press `F1` or `Ctrl+Shift+P`. Note that if you're using Firefox the second option will open an incognito window instead. -The keyboard shortcut indicated to the right of each option shows how to activate that option directly without opening up the global command palette, but once it's open you can type in a part of any of the options to activate that option. For example, in our weather project app, I can type `Cmd+P` and then type `fi` (start of `find`) and press `Enter` and then type `Lo` (start of `London.txt`) and press `Enter` again to quickly open the weather log for London. + +The keyboard shortcut indicated to the right of each option shows how to activate that option directly without opening up the global command palette, but once it's open you can type in a part of any of the options to activate that option. + +If you have a lot of files, it's often useful to open them like this rather than scrolling through the directory structure in the files pane (the `find` option searches through files by their *name* while the `search` option searches through files by their *contents*.) For example, in our weather project app, I can type `Cmd+P` and then type `fi` (start of `find`) and press `Enter` and then type `Lo` (start of `London.txt`) and press `Enter` again to quickly open the weather log for London. ![**Image 2:** *Opening a file with the global command palette.*](/images/tutorials/10-productivity/10-02-GIF-find.gif) From 555fe75db4ebc5d29e8035af316390dec8ce8f3e Mon Sep 17 00:00:00 2001 From: jamesdanielwhitford <70632508+jamesdanielwhitford@users.noreply.github.com> Date: Wed, 18 May 2022 14:41:21 +0200 Subject: [PATCH 3/4] Add cmd+k for global palette for Mac --- tutorials/10-productivity-hacks.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/tutorials/10-productivity-hacks.md b/tutorials/10-productivity-hacks.md index 1500393f..3ac9b62d 100644 --- a/tutorials/10-productivity-hacks.md +++ b/tutorials/10-productivity-hacks.md @@ -14,7 +14,7 @@ Similarly to learning to touch type, there is often a steep *learning curve* whe ## Using the global command palette -If you hit`Ctrl+.` you'll see the following modal pop up, which lets you navigate through different parts of Replit at lightning speed using only your keyboard. +If you hit `Ctrl+.` (additionally `Cmd+K` on MacOS) you'll see the following modal pop up, which lets you navigate through different parts of Replit at lightning speed using only your keyboard. ![**Image 1:** *Using the global command palette.*](/images/tutorials/10-productivity/10-01-global-cmd-palette.png) @@ -25,7 +25,6 @@ The code command palette is similar to the global command palette, but it's spec To access the code command palette press `F1` or `Ctrl+Shift+P`. Note that if you're using Firefox the second option will open an incognito window instead. - The keyboard shortcut indicated to the right of each option shows how to activate that option directly without opening up the global command palette, but once it's open you can type in a part of any of the options to activate that option. If you have a lot of files, it's often useful to open them like this rather than scrolling through the directory structure in the files pane (the `find` option searches through files by their *name* while the `search` option searches through files by their *contents*.) For example, in our weather project app, I can type `Cmd+P` and then type `fi` (start of `find`) and press `Enter` and then type `Lo` (start of `London.txt`) and press `Enter` again to quickly open the weather log for London. From 151c9fce20701e3035ffa5447e64919a42178c85 Mon Sep 17 00:00:00 2001 From: worktheclock <85885287+worktheclock@users.noreply.github.com> Date: Mon, 23 May 2022 14:51:41 +0200 Subject: [PATCH 4/4] Productivity hacks language edit --- tutorials/10-productivity-hacks.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tutorials/10-productivity-hacks.md b/tutorials/10-productivity-hacks.md index 3ac9b62d..dff05357 100644 --- a/tutorials/10-productivity-hacks.md +++ b/tutorials/10-productivity-hacks.md @@ -10,7 +10,7 @@ Specifically, you'll see how to: Similarly to learning to touch type, there is often a steep *learning curve* when you start to use advanced code editing features. They might even substantially slow you down at first, but once you master them you'll soar past the limits of what you could achieve without these aids. -*Note:* This documentation demonstrates Windows shortcuts. So, if using a Mac, make use of the `cmd` key instead of the `ctrl` key, and make use of the `option` key instead of the `alt` key. +*Note:* This documentation demonstrates Windows shortcuts. If you're using a Mac, use the `cmd` key instead of the `ctrl` key, and the `option` key instead of the `alt` key. ## Using the global command palette @@ -31,7 +31,7 @@ If you have a lot of files, it's often useful to open them like this rather than ![**Image 2:** *Opening a file with the global command palette.*](/images/tutorials/10-productivity/10-02-GIF-find.gif) -Of course, with only six files it might be faster to reach for my mouse, but as the find searches through all files in all directories this method can be significantly faster for larger projects. +Of course, with only six files it might be faster to reach for your mouse, but as the find searches through all files in all directories this method can be significantly faster for larger projects. Opening up the multiplayer, version control, and settings panes using this method is also faster once the habit is ingrained compared to moving the mouse to the small icons on the left bar. And while pressing `Ctrl+Enter` or `Cmd+Enter` to run your code is faster than choosing "Run" from this global command palette, `Ctrl+.` is only a single shortcut to remember and it will remind you of any other shortcuts you can't recall.