Fragment: Opportunities for Using vscode.dev (Hosted VS Code in the Browser) in Distance Education

Although browser accessible versions of VS Code have been available for some time, for example in the form of cdr/code-server or as a Jupyter server-proxied application, there is now an “official” hosted in-browser VS Code editing enviorment in the form of vscode.dev [announcement: vscode.dev(!)].

My personal opionion is that this could be useful for open distance education, at least in situations where users have access to a network connection, not least because it provides a reasonable balance between who provides what resource (storage, bandwidth, compute).

To begin with, the editor provides integration with a local file system, allowing you to open and save files to your own desktop. (If the local filesystem support does not work for some reason, you can also upload/download files.) This means that students can keep work on files stored on their own desktop, albeit at the requirement of having a network connection to access the online vscode.dev environment.

Even though VS Code is perhaps best known as a code development environment, it can also be used as a text editor for editing and previewing markdown documents. Whilst the full range of VS Code extensions that support rich media markdown authoring are not currently available (in many cases, this will only be a matter of time…), some of the extensions are already available, such as the Markdown Preview Mermaid Support extension.

This extension lets you use fenced code blocks for describing mermaid.js diagrams that can be previewed in the editor:

Being able to generate Javascript rendered diagrams from text in markdown documents is now quite a widely recognised pattern (for example, here’s a recipe for creating IPython magics to pipe diagram code to javascript renderers). That said, it’s perhaps not widely adopted in institutionally provided authoring systems that tend to lag behind the feature offerings of contemporary authoring environments by several years.

Admittedly, the VS Code user interface is rather complicated, and not just for novice users, although it is possible to customise the view somewhat.

Exploring different editor configuration views would probably be worth exploring in terms of how different layouts may be suited to different sorts of workflow.

As well as editing and previewing rendered markdown documents, we can also edit and execute HTML+Javascript+CSS applications (as you might expect) and Python code (which you might not expect).

In-browser code execution support for Python code is provided by the joyceerhl.vscode-pyodide extension [repo], a WASM powered environment that bundles a scipy stack.

Usefully for education purposes, the pyodide Python environment is available as a code execution environment for Jupyter notebooks, which can also be edited in the vscode.dev environment:

This means we can run Jupyter notebooks with a Python kernel purely within the browser without the need for a local or remote Python environment. But it does mean you need a browser that’s powerful enough to run the pyodide environment. And a network connection to access the vscode.dev environment.

The ms-toolsai.jupyter-renderers extension is also supported, which means rich outputs can be rendered inline in edited and executed Jupyter notebooks:

Some of the backend renderers may not be preinstalled as part of the default pyodide environment. However, additional Python packages can be installed using micropip. For example:

import micropip
await micropip.install("plotly")

To prove it works, here’s an example of a notebook that installs the plotly package and then renders a rich plotly chart output, inline, in the browser:

If it’s anyhting like jupyterlite, there may be some issues trying to read in data files into pandas. If so, some of the tricks in ouseful_jupyterlite_utils might help…

For files opened from a local filesystem, edits will be saved back to the file system. But what about users who are working across several machines? In this case, it might make sense to edit files against an online file source. Once again, vscode.dev provides one possible solution, this time in the form of its integration with Github: simply add a path to one of your github repos (for example, https://vscode.dev/github/USERNAME/REPONAME/) and you will be prompted to grant permissions to the application:

Once in, you will be able to open, edit, and commit back changes to files contained in the repository:

This means that a user can edit, preview, and potentially run files stored in one of their Github repositories (public or private) from vscode.dev. Once again, a network connection is required, but this time the editor and the storage are both provided remotely, with editing and code execution, for example using pyodide, provided in the browser.

In addition, using Github automation, committed changes can be acted upon automatically, for example using a jupyter-book publishing Github Action.

From this briefest of plays, I can see myself starting to edit and check simple code execution using vscode.dev opened over a Github repo.

Of course, at least two big questions arise:

  • what user interface layout(s) will best support users for different sorts of workflow (we don’t want to bewilder users or scare them away by the complexity of the UI);
  • how would course materials need tuning to make them useable in a VS Code environment.

In terms of distance education use, the overhead of requiring a network connection is offset by removing the need to install any software locally, or provide a remote code execution service. Networked file persistence is available via a (free) Github account. In order to run code in browser, for example Python code using the pyodide environment, loading the environment may take some time (I’m not sure if it gets cached in the browser to remove the requirment for repeatedly downloading it? Similalry any additionally installed packages?); the pyodide environment also requires a reasonably powerful and recent browser in order to work smoothly.

Author: Tony Hirst

I'm a Senior Lecturer at The Open University, with an interest in #opendata policy and practice, as well as general web tinkering...

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: