Project Jupyter: Code Snippets
Project Jupyter is an opensource company that provides free software for interactive computing across all programming languages.
Objective:
As UI/UX lead, research, prototype, and execute a design for the Jupyter Notebook Code Snippets extension.
Problem Statement:
Typing in the same code blocks over and over again is frustrating and time consuming. There isn't an easy to find starter or copied code. There needs to be an easier way to use code snippets.
Focus:
UI/UX research, Wireframing/Prototyping
Toolkit:
Figma, Github, Jupyter Notebooks
Role:
UI/UX lead
In collaboration with:
Solution
With this extension, you can insert code cells into notebooks while preserving the cell structure by dragging and dropping. Or, you can copy code into your clipboard and paste it into any JupyterLab workspace. The extension gives users the ability to easily save, search for, and edit snippets.
↓
Creating and Saving Code Snippets
From Scratch: Manually create new snippets by clicking the "+" button in the snippets panel.
Using Existing Code: Select entire code cells or highlight pieces of code and right click to save a snippet.
Search and Filter for Snippets
Find snippets easily by using the search bar or filter by tags.
Inserting Snippets
Drag and Drop: Drag and drop snippets into your notebook.
Using “…”: Use the "..." button to insert snippets into your notebook where your cursor is placed.
Editing Snippets
Easily make edits to your snippets with the "edit code snippet" function.