Workspace Widget

Explore the ins and outs of the Workspace widget.

Overview

In our previous lesson, we discussed different widgets provided by the Educative for the projects. Each widget comes with its pros and cons. This lesson will focus more on the Workspace widget due to its consistent performance, persistence storage capabilities, and lease time (i.e., about 60 minutes). In a project, the Workspace widget’s editor view is as follows:

Press + to interact
Workspace widget's editor view in a project
Workspace widget's editor view in a project

In its default mode, when we preview it from the “PREVIEW” button on the top-right corner of the platform, this is how it will appear on our screen:

Press + to interact
Workspace's default view
Workspace's default view

As annotated above in its default mode, workspace has a left panel with the project title, task title, and task description covered in our previous lessons. At the same time, we have the Workspace on the right panel. Let’s explore it.

Press + to interact
Explore workspace
Explore workspace

The /usercode directory

As annotated above, choosing a workspace environment for our project provides us with a /usecode directory. It’s the directory where an author can save code or related files for their learners. If a learner interacts with such files, those interactions (changes, if any) will be preserved until the learner reverts them or reset the workspace (more on it in an upcoming lesson).

Other options

Whereas there are some other options available in the workspace environment like:

  • Allow terminals
  • Allow browsers
  • Allow GUI
  • Hide editor
  • Hide app URL

These can be explored once we are in the editor’s mode of the project, like shown below:

Press + to interact
Available options for workspace environment
Available options for workspace environment

For a detailed explanation of the Docker in Workspace, refer to either of the lessons under the category of Types of Projects, e.g., Jupyter-based Projects.

Before moving onward, let’s get a glimpse of the view when we enable the rest of the available options as follows:

Press + to interact
Workspace allow terminals or browsers
Workspace allow terminals or browsers

As shown above, when we check the specified boxes and preview by clicking the “PREVIEW” button on the right-upper corner of the platform, this is how it will appear on our screen:

Press + to interact
Workspace's preview mode after checking the browser boxes
Workspace's preview mode after checking the browser boxes

Now you can connect to the terminal by typing “CTRL + `”, so that you have both a Browser and a Terminal along with the code editor.

Press + to interact
Workspace's preview mode with a terminal and a browser
Workspace's preview mode with a terminal and a browser