Workspace Setup
As developers we always want to work smarter and make the most of the tools provided for us. I have noticed most devs have a set up that looks something like this
But what happens when these kind of set ups are not available to us? How do we make the most of the tools provided for us and still be productive?
Javascript Console
When we first were introduced to Javascript, we were also introduced to the built in console that comes with most web browsers.
Access The Console
1.To access the console right click on the screen.
2.Select Inspect or the Dev tools option to bring up the console.
One of the first things we notice is that the console shares the screen with our web page. The console can also be moved around the screen through the settings. Where you keep your console is personal preference.
This lead me to start thinking about how this can be applied to our day to day coding experiences.
VS Code
VS Code offers a lot of different shortcuts to makes things very easy for us. I'm going to be highlighting the three that I have used most frequently since starting this new challenge. Below is a list of short cuts that you may find useful to help you in your coding journey.
Shortcuts for Mac
Shortcuts for Windows
The features listed below can all be toggled on/off to help us maximize our screen space and productivity without a secondary monitor.
I have removed the mini map from my screen and have word wrap toggled on. These features can be toggled on/off through the Command Pallet.
Sidebar
When we first open up a lab in VS Code we see a screen like this.
By using Ctrl/Command + B we can hide the sidebar to give us more space to code.
Split Screen
Another useful feature is splitting the screen to avoid going back and forth to your web browser for instructions. Combined with the hiding the sidebar. We can begin to see how we can be more productive with everything right in front of us.
By using Ctrl/Command + \ we can open a file in a side by side view.
Just like our console in JavaScript the screen can also be split top to bottom. It's personal preference.
To split screen top to bottom:
- Select View
- Editors Layout
- Select which way you want to split the screen.
We can also split the screen in half between our browser and text editor as well. One of the advantages this approach is having the ability to switch between tabs in our browser.
The Terminal
For our terminal were going to look at a couple of different options. Similar to our text editor we can split our terminal in two which is extremely helpful when running a ruby on rails server.
We start with our terminal at the bottom of our screen.
By using Ctrl/Command + J we can toggle our terminal on/off screen until we need to run a test or enter into a console to test our code.
Just like in our text editor Ctrl/Command + \ will also split our terminal into two: one side for testing our code and the other for running our server.
Another option I have notice from watching other devs is using the external terminal. In this set up it is easy to go between the text editor and the terminal and everything is still on one screen.
I hope these tips help you to stay productive. If you have any tips or advice please share them in the comments below.
Good Luck on your journey and happy coding 🧑🏾💻👩💻👨🏻💻👩🏾💻
Top comments (1)
If you have to use a Mac, I can recommend rectangle (based on spectacle). It lets you do window management things you can do in most other systems, like using hotkeys to position a floating window to the left or right side of the screen. It's pretty easy, it's free, and it goes a long way to making the UI more friendly.