JupyterLab and notebook interface

Objectives

  • Learn to navigate JupyterLab user interface.

  • Discuss integrated development environments.

  • Get an overview of useful keyboard shortcuts.

  • Learn about command/edit modes and markdown/code cells.

Instructor note

  • 15 min teaching

  • 0 min exercises

JupyterLab is the next-generation user interface for Jupyter Notebooks and is intended to replace the conventional interface. It is a highly modular and customizable interface.

How to start JupyterLab

Let’s have a look at how it works. We go to terminal, and type:

$ mkdir jupyterlab-demo
$ cd jupyterlab-demo
$ jupyter-lab

Components: the big picture

Components of a Jupyter notebook

Components of a Jupyter notebook.

Cells

  • Markdown cells contain formatted text written in Markdown

  • Code cells contain code to be interpreted by the kernel (Python, R, Julia, Octave/Matlab…)

Markdown cells

## Second level heading

This cell contains simple
[markdown](https://daringfireball.net/projects/markdown/syntax), a simple language for writing text that can be automatically converted to other formats, e.g. HTML, LaTeX or any of a number of others.

**Bold**, *italics*, **_combined_**, ~~strikethrough~~, `inline code`.

* bullet points

or

1. numbered
3. lists

**Equations:**
inline $e^{i\pi} + 1 = 0$
or on new line
$$e^{i\pi} + 1 = 0$$

Images:

![Jupyter logo](https://jupyter.org/assets/homepage/main-logo.svg)

Links:
[One of many markdown cheat-sheets](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#emphasis)

Code cells

# a code cell can run statements of code.
# when you run this cell, the output is sent
# from the web page to a back-end process, run
# and the results are displayed to you
print("hello world")

Command and edit modes

  • To add contents to a cell, you need to enter edit mode by pressing Enter or double-clicking on a cell

  • To navigate between cells, create new cells, etc., you need to enter command mode by pressing Escape key or executing the current cell.

Keyboard shortcuts

Some shortcuts only work in Command or Edit mode. It can also happen that these shortcuts interfere with browser shortcuts.

Cell shortcuts

Shortcut

Effect

Enter

Enter Edit mode

Escape or Ctrl-m

Enter Command mode

Ctrl-Enter

Run the cell

Shift-Enter

Run the cell and select the cell below

Alt-Enter

Run the cell and insert a new cell below

m and y

Toggle between Markdown and Code cells

d-d

Delete a cell

z

Undo deleting

a/b

Insert cells above/below current cell

x/c/v

Cut/copy/paste cells

Up/Down or k/j

Select previous/next cells

Notebook shortcuts

Shortcut

Effect

Ctrl(⌘)-s

Save notebook

Shift-Ctrl(⌘)-s

Save notebook as

Ctrl-q

Close notebook

Ctrl(⌘)-b

Toggle left-hand menu

Shift-Ctrl(⌘)-c

Open command palette

Shift-Ctrl(⌘)-d

Toggle single-document mode

Tools for writing, testing and debugging code

What tools do you use for writing, testing, and debugging code?

Some people prefer terminal-based text editors for writing code (e.g. Vi/Vim, Nano, Emacs, etc.).

Others prefer integrated development environments (IDEs), which can bring “everything” one needs for productive programming to one’s fingertips.a

Yet others prefer code editors, which are light-weight IDEs.

Terminal editor

  • Good command line skills are needed for effectively using terminal editors

  • Continue using Emacs and Vim, if you are already proficient

  • Supports multiple programming languages

IDE

  • If you are working with large code bases, then you should definitely checkout the IDE suitable for your programming language

  • IDEs offer rich support for Debugging and Code refactoring

  • Focused on a single language

Code editor

  • If you use multiple programming languages then code editors offer good support

  • Both IDE and code editors share common features such as code completion, hints, highlighting sections of code

  • Supports multiple programming languages