Skip to content

Commit

Permalink
Streamline jupyter setup and checks
Browse files Browse the repository at this point in the history
  • Loading branch information
julesvanrie committed Mar 7, 2025
1 parent 756a487 commit 5e783fd
Show file tree
Hide file tree
Showing 8 changed files with 114 additions and 111 deletions.
64 changes: 6 additions & 58 deletions _partials/es/nbextensions.md
Original file line number Diff line number Diff line change
@@ -1,64 +1,12 @@
## Mejora `jupyter` notebook y chequeo

### CSS personalizado
## Mejora `jupyter` notebook

Mejora la visualización del [elemento `details` para revelación de información](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) en tus notebooks.

Abre `custom/custom.css` en el directorio config:
```bash
cd $(jupyter --config-dir)
mkdir -p custom
touch custom/custom.css
<CODE_EDITOR_CMD> custom/custom.css
```
Edita `custom.css` con la siguiente información:

```css
summary {
cursor: pointer;
display:list-item;
}
summary::marker {
font-size: 1em;
}
```

Puedes cerrar <CODE_EDITOR>.

### Chequeo de `jupyter`

Reinicia tu terminal:

```bash
exec zsh
```

Ahora verifica que puedas iniciar un servidor de notebook en tu máquina:
Ejecuta las siguientes líneas para crear una hoja de estilos `custom.css` en tu directorio de configuración de Jupyter:

```bash
jupyter notebook
LOCATION=$(jupyter --config-dir)/custom
SOURCE=https://raw.githubusercontent.com/lewagon/data-setup/refs/heads/master/specs/jupyter/custom.css
mkdir -p $LOCATION
curl $SOURCE > $LOCATION/custom.css
```

Tu navegador web debería abrir en una ventana `jupyter`:

![jupyter.png](images/jupyter.png)

Haz clic en `New`:

![jupyter_new.png](images/jupyter_new.png)

Debería abrirse una pestaña en un nuevo notebook:

![jupyter_notebook.png](images/jupyter_notebook.png)

### Chequeo de `nbextensions`

Haz una revisión de las `jupyter notebooks nbextensions`. Haz clic en `Nbextensions`:

![jupyter_nbextensions.png](images/jupyter_nbextensions.png)

Deselecciona _"disable configuration for nbextensions without explicit compatibility"_. Esto significa deshabilitar la configuración de nbextensions sin compatibilidad explícita. Luego verifica que _al menos_ las `nbextensions` marcadas en rojo estén habilitadas:

![nbextensions.png](images/nbextensions.png)

Puedes cerrar tu navegador web y luego cerrar el servidor jupyter con `CTRL` + `C`.
24 changes: 22 additions & 2 deletions _partials/es/python_checkup.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
### Chqueo de la configuración de Python

Reinicia tu terminal:

```bash
cd ~/code && exec zsh
```

Verifica tu versión de Python con los siguientes comandos:
```bash
zsh -c "$(curl -fsSL <PYTHON_CHECKER_URL>)" <PYTHON_VERSION>
Expand All @@ -15,17 +21,31 @@ Ahora ejecuta el siguiente comando para verificar que puedas cargar estos paquet
python -c "$(curl -fsSL <PIP_LOADER_URL>)"
```

Asegúrate de que puedas usar Jupyter:
Ahora verifica que puedas iniciar un servidor de notebook en tu máquina:

```bash
jupyter notebook
```

Y abre un notebook `Python 3`.
Tu navegador web debería abrir en una ventana `jupyter`:

![jupyter.png](images/jupyter.png)

Haz clic en `New` y, en el menú desplegable, selecciona Python 3 (ipykernel):

![jupyter_new.png](images/jupyter_new.png)

Debería abrirse una pestaña en un nuevo notebook:

![jupyter_notebook.png](images/jupyter_notebook.png)

Asegúrate de que estés usando la versión correcta de python en el notebook. Abre una celda y ejecuta lo siguiente:
``` python
import sys; sys.version
```

Debería mostrar <PYTHON_VERSION> seguido de algunos detalles adicionales. Si no es así, consulta con un TA.

Puedes cerrar tu navegador web y luego cerrar el servidor jupyter con `CTRL` + `C`.

¡Listo! Ya tienes un virtual env de python completo con todos los paquetes tercerizados que necesitarás en el bootcamp.
56 changes: 7 additions & 49 deletions _partials/nbextensions.md
Original file line number Diff line number Diff line change
@@ -1,54 +1,12 @@
## `jupyter` notebook tweaking and check up
## `jupyter` notebook tweaking

### Custom CSS
Let's improve the display of the [`details` disclosure elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) in your notebooks.

Improve the display of the [`details` disclosure elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) in your notebooks.
Run the following lines to create a `custom.css` stylesheet in your Jupyter config directory:

Open `custom/custom.css` in the config directory:
```bash
cd $(jupyter --config-dir)
mkdir -p custom
touch custom/custom.css
<CODE_EDITOR_CMD> custom/custom.css
LOCATION=$(jupyter --config-dir)/custom
SOURCE=https://raw.githubusercontent.com/lewagon/data-setup/refs/heads/master/specs/jupyter/custom.css
mkdir -p $LOCATION
curl $SOURCE > $LOCATION/custom.css
```
Edit `custom.css` with:

```css
summary {
cursor: pointer;
display:list-item;
}
summary::marker {
font-size: 1em;
}
```

You can close <CODE_EDITOR>.

### `jupyter` check up

Let's reset your terminal:

```bash
exec zsh
```

Now, check you can launch a notebook server on your machine:

```bash
jupyter notebook
```

Your web browser should open on a `jupyter` window:

![jupyter.png](images/jupyter.png)

Click on `New`:

![jupyter_new.png](images/jupyter_new.png)

A tab should open on a new notebook:

![jupyter_notebook.png](images/jupyter_notebook.png)

You can close your web browser then terminate the jupyter server with `CTRL` + `C`.
24 changes: 22 additions & 2 deletions _partials/python_checkup.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
### Python setup check up

Let's reset your terminal:

```bash
cd ~/code && exec zsh
```

Check your Python version with the following commands:
```bash
zsh -c "$(curl -fsSL <PYTHON_CHECKER_URL>)" <PYTHON_VERSION>
Expand All @@ -21,11 +27,25 @@ Make sure you can run Jupyter:
jupyter notebook
```

And open a `Python 3` notebook.
Your web browser should open on a `jupyter` window:

![jupyter.png](images/jupyter.png)

Click on `New` and in the dropdown menu select `Python 3 (ipykernel)`:

Make sure that you are running the correct python version in the notebook. Open a cell and run :
![jupyter_new.png](images/jupyter_new.png)

A tab should open on a new notebook:

![jupyter_notebook.png](images/jupyter_notebook.png)

Make sure that you are running the correct python version in the notebook. Open a cell and run:
``` python
import sys; sys.version
```

It should output `<PYTHON_VERSION>` followed by some more details. If not, check with a TA.

You can close your web browser then terminate the jupyter server with `CTRL` + `C`.

Here you have it! A complete python virtual env with all the third-party packages you'll need for the whole bootcamp.
Binary file modified images/jupyter.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/jupyter_new.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/jupyter_notebook.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
57 changes: 57 additions & 0 deletions specs/jupyter/custom.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
/* Custom CSS for Jupyter Notebook
Should go into ~/.jupyter/custom/custom.css
Only impacts the Jupyter Notebook interface, not VS Code for example
*/


/* Prettify disclosure elements used for hints and solutions
- Use same color as cell editor background
- Add padding and margin to make it look like a card
- Make the summary element bold
- Add a marker to the summary element
*/

details {
padding: 5px 10px 5px;
margin-bottom: 1em;
}

details[open]{
}

body[data-jp-theme-light=true] details {
background-color: var(--jp-cell-editor-background);
}

body[data-jp-theme-light=false] details {
background-color: var(--jp-cell-editor-background);
}

summary {
cursor: pointer;
display: list-item;
font-weight: bold;
background-color: var(--jp-cell-editor-background);
}

summary::marker {
font-size: 1em;
}

details > p {
margin-top: 5px !important;
margin-bottom: 0 !important;
}

/* Reference for future use
*/

body[data-jp-theme-light=true] .jp-InputArea-editor {
/* To change code and markdown input cells in light mode */
}

body[data-jp-theme-light=false] .jp-InputArea-editor {
/* To change code and markdown input cells in dark mode */
}

0 comments on commit 5e783fd

Please sign in to comment.