Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
June 29, 2020 06:50 am GMT

Learning To Be A Mouse-Less Web Developer

After using PC for so many years with a mouse or trackpad, we so used to point and click everything we want on the screen so fast and concise. Drag and drop, left-click, right-click, scroll the web page up and down with mouse wheel.

There are some arguments in the web development community mention that writing code without a mouse could be faster.

I'm curious to try it out. My target is to focus 90% on using the keyboard. I don't think we can 100% avoid using a mouse in a graphic user interface (GUI) environment, especially when we want to check the navigation link, button and form.

I will try my best to use the keyboard shortcut, terminal and command line in VS Code. Then document my learning to be a mouse free developer (Ops, it's should be a mouse-less developer).

I not sure I can get used to it or not. What I pretty sure is my coding speed will decrease dramatically.

If you could also share how you code without using a mouse would be much appreciated. Let's learn together.

Below are the keyboard shortcut and navigation I learned so far, I'll continuously update this article when I learn something new.

--First Few Days--

I use mouse unconsciously, and I always have to remind myself not to use it.

--Change Cursor Colour--

I change my cursor colour to yellow. So, I can see it easily.

--Open a file--

Method 1: Use Go To File

I often toggle the sidebar off with Ctrl + B. I navigate from file to file with Ctrl + E (you can also use Ctrl + P) then search the keyword of the filename and press Enter to open a file.

Example:-
Your filename is how-to-build-a-website-with-gatsbyjs.md, you can type gatsbyjs or build a website, VS Code will filter and show you every file match your search.

Method 2: Use Breadcrumbs
Ctrl + Shift + . (full stop) to focus your current breadcrumbs folder.
Use Ctrl + right/left arrow to navigate between folder.
Use up/down arrow to navigate between the file.
Press Enter to open the file.

--Navigate between editor and explorer--

I seldom navigate folder and file this way. I share this method with people who might find it useful.

Method 1

Ctrl + Shift + E to focus on the explorer and Ctrl + Shift + E again to focus back to the editor.

  • Use the up/down arrow to navigate between the file or folder.
  • Use the left arrow to go up one directory, and right arrow to go inside a directory.
  • Press Enter to open a file.

Method 2

Ctrl + 0 (Zero) (not working in number pad) to focus on explorer, Ctrl + 1 (not working in number pad) to focus back to the editor

  • Use the up/down arrow to navigate between the file or folder.
  • Use the left arrow to go up one directory, and right arrow to go inside a directory.
  • Press Enter to open a file.

--Navigate between the editor's tab--

Method 1
I use Ctrl + PgUp to focus on the previous tab and Ctrl + PgDn to focus on the next tab.

Method 2
You can use Ctrl + Tab to focus on the next tab or Ctrl + Shift + Tab to focus on the previous tab.

--Close a tab--

  • Ctrl + W to close the current tab

--Delete entire line--

Method 1

Press Backspace deletes one character to the left

Method 2

Press Delete on the keyboard delete one character to the right

--Delete a word--

  • Ctrl + D to select a word (whether you are in front, back or within the word), press Delete in the keyboard to remove the word.
  • Place your cursor at the end of the word you want to delete, then Ctrl + Backspace to delete the word.
  • Place your cursor in front of the word, and then Ctrl + Delete to delete the word.

--Insert a new line--

  • Ctrl + Enter to move my cursor to a new line (go down 1 line).Ctrl + Shift + Enter to push existing line down and add a new line.

--Moving cursor in the editor--

(Sorry for including this basic)

  • The right arrow moves one character to the right
  • The left arrow moves one character to the left
  • The up arrow moves the cursor up one line
  • The down arrow moves the cursor down one line

--Moving cursor by word--

  • Ctrl + right arrow moves the cursor to the end of a word
  • Ctrl + left arrow move the cursor to the beginning of a word

--Moving cursor by section--

  • Home in the keyboard move cursor to the beginning of a line
  • End in the keyboard move cursor to the end of a line
  • Ctrl + Home move the cursor to the beginning of the page
  • Ctrl + End move the cursor to the end of the page
  • PgUp moves the cursor to the top of the editor.
  • PgDn moves the cursor to the bottom of the editor.

I use it to scroll editor sometime.

--Select a word--

Method 1

Ctrl + D to select a word

Method 2

  • Ctrl + Shift + Right Arrow to select a word toward the right
  • Ctrl + Shift + Left Arrow to select a word toward the left

--Move and select a word--

  • Ctrl + Shift + right arrow move the cursor and select the word toward the right.
  • Ctrl + Shift + left arrow move the cursor and select the word toward left.

--Scroll the editor--

  • Ctrl + up arrow to scroll one line up.
  • Ctrl + down arrow to scroll one line down.

I use it to adjust the editor view.

--Open the Terminal inside VS Code--

Ctrl + `(backtick) toggle terminal panel on & off

--Open Terminal side by side--

Ctrl + shift + 5 to open second terminal

--Open an external Terminal--

If you always forget to stop the development server before closing the VS Code.

Use Ctrl + Shift + C to open an external terminal

if you want to change external terminal, Open VS Code setting and search External: Windows Exec

--Show All Command--

Method 1

Ctrl + Shift + P to see all commands

Method 2

I prefer pressing F1 to see all commands

I want to continue writing, but dev.to fenced block syntax highlighting is not working.

Below is the result I get:-

`html

I'm a button

`

I not sure how to fix it, could anyone give me some hint or guide me to fix it?

(I end up putting 4 back-tick above and 3 back-tick below to make the fenced block syntax highlight work.

`

<div>  <article>    <a>I'm a button</a>  </article></div>

Dev.to's team, what is happening?

I'll continue...

--Emmet--

<div>  <article>    <a>I'm a button</a>  </article></div>

Remove Tag
I want to remove the article tag.

  1. Place the cursor inside the tag until the beginning and the ending tag is glowing.
  2. Press F1
  3. Type remove tag
  4. Press Enter

Alt Text

Update Tag
Same concept above

Wrap with Abbreviation

I want to wrap the word "link" with an anchor tag.

<p>Please check out this link</p>
  1. Put the cursor in front the word "link"
  2. Ctrl + D to select the word
  3. Press F1 and type wrapAlt Text
  4. Type "a" and press Enter

Hi, Do you have any similar tips could share with me?


Original Link: https://dev.to/ansonlowzf/learning-to-be-a-mouse-less-web-developer-7em

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To