Skip to content
Merged
Show file tree
Hide file tree
Changes from 19 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions 03-vocabulary.md
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,14 @@ These tools work in an **agentic loop**: they plan an action, use a tool to exec
Examples include Cursor, Claude Code, and Cline.
Unlike chat-based or autocomplete AI, agentic tools act like a team member with tools — they don't just suggest, they do.

Good first issue
: A GitHub label that identifies issues suitable for newcomers to a project or to open source in general.
The concept emerged from the "first-timers-only" movement, popularized by developers like Scott Hanselman and Kent C. Dodds, to create approachable pathways into open source contribution.
These issues are typically well-scoped bugs or minor enhancements with clear requirements, making them ideal starting points for new contributors.
Projects use variations like "beginner-friendly," "easy-fix," or "low-hanging fruit."
By marking issues this way, maintainers signal that their project welcomes beginners, helping grow their community while inviting people who might otherwise feel excluded from open source.
Resources: [goodfirstissue.dev](https://goodfirstissue.dev/), [GitHub's guide](https://opensource.guide/building-community/), [How to Create Good Good-First-Issues](https://blogs.vmware.com/opensource/2019/10/16/open-source-good-first-issues/), [Finding Good First Issues](https://community.codenewbie.org/bdougie/finding-good-first-issues-33a6).

LLM token
: In the context of {term}`LLMs <LLM>`, a token is a unit of text (roughly 3-4 characters or ~0.75 words in English) that the model processes.
API providers charge based on the number of tokens consumed—both input tokens (text sent to the model) and output tokens (text generated by the model).
Expand Down
4 changes: 2 additions & 2 deletions 04-materials/01-exploring-extensions.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@

It's not just an interface for working with Notebooks.
The Notebook interface has been around since 2011, and in 2018,
JupyterLab was introduced to provide a more comprehensive environment, like an operating
system, for interactive computation.
JupyterLab was introduced as an extensible IDE (Integrated Development Environment)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure how I feel about changing from an operating system metaphor to an IDE metaphor. I think "operating system" may be a more familiar concept to most? I'm OK with this if you feel strongly, though :)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was my suggestion. I was going for correctness. You could call it all sorts of things like "framework" or whatever, but I thing IDE is rightest. VSCode is a "code editor" and pycharm is an "IDE" according to their docs.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the operating system metaphor needs quite a bit more context and explanation, since when people think "operating system" they think things like Windows, macos, linux - which on the surface is very different than JupyterLab.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The docs say: "JupyterLab is a highly extensible, feature-rich notebook authoring application and editing environment, and is a part of Project Jupyter, a large umbrella project centered around the goal of providing tools (and standards) for interactive computing with computational notebooks."

Notably it avoids "IDE" or "operating system". But hey, I'm happy to say "IDE" to quickly get the point across to people familiar with the term.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense, thanks for your thoughts all :D

for interactive computation.


## [The JupyterLab interface](https://jupyterlab.readthedocs.io/en/latest/user/interface.html)
Expand Down
6 changes: 3 additions & 3 deletions 04-materials/02-anatomy-of-extensions.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ This tutorial is inspired by many prior works.
* Structure the activities around in person teaching and exercises
:::


(anatomy-setup)=
## 🛠️ Setup

Before we get started, we need to set up:
Expand Down Expand Up @@ -197,7 +197,7 @@ Our extension will:

🚀 Let's build it together from scratch.


(anatomy-exercise-a)=
## 🏋️ Exercise A (15 minutes): Extension creation and development loop

### 🔧 Create a new extension from the [official template](https://github.com/jupyterlab/extension-template)
Expand Down Expand Up @@ -363,7 +363,7 @@ git push -u origin main

### 🔧 Do a complete development loop

0. Close the JupyterLab server with `Ctrl+C`.
0. Close the JupyterLab server. You can use the shutdown menu item in the JupyterLab itself (File → Shut Down), which is more reliable, or use `Ctrl+C` in the terminal where the server is running.

1. Make any change to the codebase.
For example, alter the text in a `console.log()` message.
Expand Down
2 changes: 1 addition & 1 deletion 04-materials/03-debugging.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# 🐞 4 - Debugging: What to do when things go wrong?
# 🐞 3 - Debugging: What to do when things go wrong?

:::{tip} Outcome
By the end of this module, we'll have looked into JupyterLab extension development errors in both the terminal and browser console, and used the browser console functionalities to gather information that will help us resolve our errors.
Expand Down
2 changes: 1 addition & 1 deletion 04-materials/04-show-and-tell.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# 🪩 3 - Show & tell
# 🪩 4 - Show & tell

:::{hint} Learning objectives
* Discover advanced applications for JupyterLab extensions
Expand Down
67 changes: 43 additions & 24 deletions 04-materials/06-working-on-your-own.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ All paths are valuable! Pick what excites you most.
Before diving into your chosen path, make sure you have:

- A clear goal (extension idea or GitHub issue to work on)
- Development environment ready (if building new: follow [Setup](02-anatomy-of-extensions.md#-setup) and [Exercise A](02-anatomy-of-extensions.md#-exercise-a-15-minutes-extension-creation-and-development-loop))
- Development environment ready (if building new: follow [Setup](02-anatomy-of-extensions.md#anatomy-setup) and [Exercise A](02-anatomy-of-extensions.md#anatomy-exercise-a))
- Access to [JupyterLab API docs](https://jupyterlab.readthedocs.io/en/latest/api/) and [Extension Examples](https://github.com/jupyterlab/extension-examples)

## 🔨 Path 1: Build your own extension from scratch
Expand All @@ -40,10 +40,10 @@ Create something entirely new using the extension template, AI assistance, and t

Follow these sections from chapter 2 to start a new extension from a template:

1. [🛠️ Setup](02-anatomy-of-extensions.md#-setup) - Set up your environment, Git, and GitHub repository
2. [🏋️ Exercise A: Extension creation and development loop](02-anatomy-of-extensions.md#-exercise-a-15-minutes-extension-creation-and-development-loop) - Create your extension from the template and test the development loop
1. [🛠️ Setup](02-anatomy-of-extensions.md#anatomy-setup) - Set up your environment, Git, and GitHub repository
2. [🏋️ Exercise A: Extension creation and development loop](02-anatomy-of-extensions.md#anatomy-exercise-a) - Create your extension from the template and test the development loop

Once you have your extension set up and working, return here to choose an inspiration project below.
Once you have your extension set up and working, proceed to work on your extension idea or return here to find inspiration below.

### 💫 Inspiration

Expand Down Expand Up @@ -81,13 +81,14 @@ To customize:
Make the confetti more colorful and add a sound effect when it triggers.
```

**Verified Setup**:
- ✅ macOS 15.7, Claude Code (Claude Sonnet 4.5)
- ✅ `conda` environment: Python 3.13, Node.js 22, JupyterLab
- 📹 [Watch the demo](https://www.loom.com/share/2afabea0184045fa868271f9ab0ca083)
**Setup**:
- Tool: Claude Code
- Model: Claude Sonnet 4.5

<div style="position: relative; padding-bottom: 62.5%; height: 0;"><iframe src="https://www.loom.com/embed/2afabea0184045fa868271f9ab0ca083" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>

:::{tip}
This is a perfect first project - it's self-contained, purely visual, and you'll immediately see if it works. It teaches you about JupyterLab's status bar API without backend complexity.
This is an ideal first project - it's self-contained, purely visual, and you'll immediately see if it works. It teaches you about JupyterLab's status bar API without backend complexity.
:::

#### 🎨 Custom theme extension
Expand All @@ -101,6 +102,17 @@ This is a perfect first project - it's self-contained, purely visual, and you'll
Create a theme based on [your favorite movie/show/game/aesthetic]
```

:::{tip} Better Results with Color Planning
For better results, ask the LLM to plan the color palette first:
```
Create a theme based on [your theme]. First, suggest a UI color palette
of 6 colors (background, foreground, accent, etc.) that match this theme,
then implement the theme using those colors.
```

This explicit request for a color palette triggers more thoughtful planning before implementation!
:::

**Example**:
```
Create a theme based on Netflix show KPop Demon Hunters
Expand All @@ -110,7 +122,7 @@ Create a theme based on Netflix show KPop Demon Hunters
- A new theme appears in Settings → Theme menu
- Theme includes custom colors matching your chosen aesthetic
- JupyterLab interface reflects the theme's visual style
- Theme can be toggled on/off
- Theme can be toggled on/off in Settings → Theme menu

**What to watch for**:

Expand Down Expand Up @@ -144,10 +156,16 @@ Use [specific colors] for accent elements.
- Consider color palettes - extract 3-5 main colors from your chosen image (AI can help you with it!)
- Free image sources: Unsplash, Pexels, Wallhaven

**Setup**:
- Tool: Cursor
- Model: Claude Sonnet 4.5

<div style="position: relative; padding-bottom: 62.5%; height: 0;"><iframe src="https://www.loom.com/embed/eff02e3cbc63430983f9448719bfa83c" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>

:::{tip}
This is a perfect creative project! You get immediate visual feedback, can personalize your JupyterLab environment, and learn how JupyterLab's theming system works. Plus, you'll have a custom theme you actually want to use daily.
This is a solid creative project! You get immediate visual feedback, can personalize your JupyterLab environment, and learn how JupyterLab's theming system works. Plus, you'll have a custom theme you actually want to use daily.

Themes are also great conversation starters - share your theme with other workshop participants!
Themes are also good conversation starters - share your theme with other workshop participants!
:::

#### 📊 CPU monitor widget
Expand Down Expand Up @@ -193,14 +211,14 @@ Add a graph that shows CPU usage over the last 60 seconds,
and highlight in red when usage is above 80%.
```

**Verified setup**:
- ✅ macOS 15.7, Cursor (Claude Sonnet 4.5 MAX)
- ✅ `conda` environment: Python 3.13, Node.js 22, JupyterLab
- ⚠️ Temperature data gracefully handled as N/A on macOS (expected)
- 📹 [Watch the demo](https://www.loom.com/share/9f6d11d537a94a30af7559fd4d80eea2)
**Setup**:
- Tool: Cursor
- Model: Claude Sonnet 4.5 MAX

<div style="position: relative; padding-bottom: 62.5%; height: 0;"><iframe src="https://www.loom.com/embed/9f6d11d537a94a30af7559fd4d80eea2" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>

:::{tip}
This teaches you the full stack: backend API design, frontend-backend communication, error handling, and periodic updates. It's a perfect template for any monitoring or dashboard extension.
This teaches you the full stack: backend API design, frontend-backend communication, error handling, and periodic updates. It's an excellent template for any monitoring or dashboard extension.
:::

### 🌟 More extension ideas
Expand All @@ -214,9 +232,9 @@ Pick an idea that matches your comfort level and interests:
4. **Pomodoro timer**: Status bar timer for focused work sessions with notifications

#### 🚦 Intermediate (frontend + server)
1. **File size analyzer**: Scan workspace directory and show largest files/folders
2. **Git status widget**: Display current branch, uncommitted changes count
3. **Environment inspector**: Show installed packages and Python version
1. **File size analyzer**: Scan workspace directory and show largest files/folders. Bonus goal: Add a treemap visualization (like [WinDirStat](https://windirstat.net/)) to visually represent file sizes
2. **Git status widget**: Display current branch, uncommitted changes count in the status bar
3. **Environment inspector**: Show installed packages and Python version in the sidebar
4. **Todo list with persistence**: Sidebar panel that saves tasks to disk

#### 🎯 Advanced
Expand Down Expand Up @@ -248,7 +266,7 @@ Contributing to established extensions is a great way to learn real-world patter
See our [Show & Tell session](04-show-and-tell.md) for a curated list of popular JupyterLab extensions and inspiration on projects to contribute to.

#### 🐛 Beginner-friendly JupyterLab core
Want to contribute to JupyterLab itself? Here are good first issues:
Want to contribute to JupyterLab itself? Here are {term}`good first issues <good first issue>`:

**JupyterLab Core:**
- [Good First Issues](https://github.com/jupyterlab/jupyterlab/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22)
Expand All @@ -259,11 +277,10 @@ Want to contribute to JupyterLab itself? Here are good first issues:

### ✅ Check the project needs
**Check the project board or GitHub Issues** for:
- {term}`"Good first issue" <good first issue>` labels
- Feature requests that align with your interests
- Bug reports you can reproduce
- Documentation improvements

**Browse recent issues** and look for:
- Questions you can answer
- Problems you've encountered yourself
- Features you wish existed
Expand Down Expand Up @@ -292,6 +309,7 @@ Want to contribute to JupyterLab itself? Here are good first issues:

3. **Make your changes**:
- Start small - fix one thing at a time
- Make small commits for each "thing"
- Follow the project's code style
- Add or update tests if applicable
- Update documentation
Expand Down Expand Up @@ -351,6 +369,7 @@ Before opening a PR, verify:
- Commit messages are clear and descriptive
- PR description explains what and why
- You've read and followed CONTRIBUTING.md
- Remove unused or unreachable code ("dead code") and unused artifacts (imports, variables, files, commented-out code)
- Tests pass in CI/CD (after opening PR)

### 🔧 When contributing gets stuck
Expand Down