Skip to content

Commit 0555a6b

Browse files
julesvanriejulesvanrie
committed
Streamline jupyter setup and checks
Improve heading levels Add backticks in ES version Fix Windows Jupyter redirect Jupyter gets its own chapter again
1 parent 7090531 commit 0555a6b

15 files changed

+133
-121
lines changed

‎_partials/es/nbextensions.md

+6-58
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,12 @@
1-
## Mejora `jupyter` notebook y chequeo
2-
3-
### CSS personalizado
1+
## Mejora Jupyter Notebook
42

53
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.
64

7-
Abre `custom/custom.css` en el directorio config:
8-
```bash
9-
cd $(jupyter --config-dir)
10-
mkdir -p custom
11-
touch custom/custom.css
12-
<CODE_EDITOR_CMD> custom/custom.css
13-
```
14-
Edita `custom.css` con la siguiente información:
15-
16-
```css
17-
summary {
18-
cursor: pointer;
19-
display:list-item;
20-
}
21-
summary::marker {
22-
font-size: 1em;
23-
}
24-
```
25-
26-
Puedes cerrar <CODE_EDITOR>.
27-
28-
### Chequeo de `jupyter`
29-
30-
Reinicia tu terminal:
31-
32-
```bash
33-
exec zsh
34-
```
35-
36-
Ahora verifica que puedas iniciar un servidor de notebook en tu máquina:
5+
Ejecuta las siguientes líneas para crear una hoja de estilos `custom.css` en tu directorio de configuración de Jupyter:
376

387
```bash
39-
jupyter notebook
8+
LOCATION=$(jupyter --config-dir)/custom
9+
SOURCE=https://raw.githubusercontent.com/lewagon/data-setup/refs/heads/master/specs/jupyter/custom.css
10+
mkdir -p $LOCATION
11+
curl $SOURCE > $LOCATION/custom.css
4012
```
41-
42-
Tu navegador web debería abrir en una ventana `jupyter`:
43-
44-
![jupyter.png](images/jupyter.png)
45-
46-
Haz clic en `New`:
47-
48-
![jupyter_new.png](images/jupyter_new.png)
49-
50-
Debería abrirse una pestaña en un nuevo notebook:
51-
52-
![jupyter_notebook.png](images/jupyter_notebook.png)
53-
54-
### Chequeo de `nbextensions`
55-
56-
Haz una revisión de las `jupyter notebooks nbextensions`. Haz clic en `Nbextensions`:
57-
58-
![jupyter_nbextensions.png](images/jupyter_nbextensions.png)
59-
60-
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:
61-
62-
![nbextensions.png](images/nbextensions.png)
63-
64-
Puedes cerrar tu navegador web y luego cerrar el servidor jupyter con `CTRL` + `C`.

‎_partials/es/pip.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
## Paquetes de Python
1+
### Paquetes de Python
22

33
Ahora que tenemos el ambiente virtual de `lewagon` adecuado, es hora de instalarle algunos paquetes.
44

‎_partials/es/python_checkup.md

+27-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
### Chqueo de la configuración de Python
1+
## Chequeo de la configuración de Python
2+
3+
### Chequeo de Python y packages
4+
5+
Reinicia tu terminal:
6+
7+
```bash
8+
cd ~/code && exec zsh
9+
```
210

311
Verifica tu versión de Python con los siguientes comandos:
412
```bash
@@ -15,17 +23,33 @@ Ahora ejecuta el siguiente comando para verificar que puedas cargar estos paquet
1523
python -c "$(curl -fsSL <PIP_LOADER_URL>)"
1624
```
1725

18-
Asegúrate de que puedas usar Jupyter:
26+
### Chequeo de Jupyter
27+
28+
Ahora verifica que puedas iniciar un servidor de notebook en tu máquina:
1929

2030
```bash
2131
jupyter notebook
2232
```
2333

24-
Y abre un notebook `Python 3`.
34+
Tu navegador web debería abrir en una ventana `jupyter`:
35+
36+
![jupyter.png](images/jupyter.png)
37+
38+
Haz clic en `New` y, en el menú desplegable, selecciona Python 3 (ipykernel):
39+
40+
![jupyter_new.png](images/jupyter_new.png)
41+
42+
Debería abrirse una pestaña en un nuevo notebook:
43+
44+
![jupyter_notebook.png](images/jupyter_notebook.png)
2545

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

51+
Debería mostrar `<PYTHON_VERSION>` seguido de algunos detalles adicionales. Si no es así, consulta con un TA.
52+
53+
Puedes cerrar tu navegador web y luego cerrar el servidor jupyter con `CTRL` + `C`.
54+
3155
¡Listo! Ya tienes un virtual env de python completo con todos los paquetes tercerizados que necesitarás en el bootcamp.

‎_partials/es/virtualenv.md

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
Antes de instalar paquetes de Python, aislaremos la configuración del Bootcamp en un entorno virtual **dedicado**. Usaremos un plugin `pyenv` llamado [`pyenv-virtualenv`](https://github.com/pyenv/pyenv-virtualenv).
44

5+
### Instala un virtualenv
6+
57
Primero instala este plugin:
68

79
```bash

‎_partials/es/win_jupyter.md

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
2-
## Configuración de Jupyter Notebook para abrirlo en tu navegador
1+
### Configuración de Jupyter Notebook para abrirlo en tu navegador
32

43
Genera el archivo de configuración para **Jupyter Notebook**...
54

‎_partials/nbextensions.md

+7-49
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,12 @@
1-
## `jupyter` notebook tweaking and check up
1+
## Jupyter Notebook tweaking
22

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

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

7-
Open `custom/custom.css` in the config directory:
87
```bash
9-
cd $(jupyter --config-dir)
10-
mkdir -p custom
11-
touch custom/custom.css
12-
<CODE_EDITOR_CMD> custom/custom.css
8+
LOCATION=$(jupyter --config-dir)/custom
9+
SOURCE=https://raw.githubusercontent.com/lewagon/data-setup/refs/heads/master/specs/jupyter/custom.css
10+
mkdir -p $LOCATION
11+
curl $SOURCE > $LOCATION/custom.css
1312
```
14-
Edit `custom.css` with:
15-
16-
```css
17-
summary {
18-
cursor: pointer;
19-
display:list-item;
20-
}
21-
summary::marker {
22-
font-size: 1em;
23-
}
24-
```
25-
26-
You can close <CODE_EDITOR>.
27-
28-
### `jupyter` check up
29-
30-
Let's reset your terminal:
31-
32-
```bash
33-
exec zsh
34-
```
35-
36-
Now, check you can launch a notebook server on your machine:
37-
38-
```bash
39-
jupyter notebook
40-
```
41-
42-
Your web browser should open on a `jupyter` window:
43-
44-
![jupyter.png](images/jupyter.png)
45-
46-
Click on `New`:
47-
48-
![jupyter_new.png](images/jupyter_new.png)
49-
50-
A tab should open on a new notebook:
51-
52-
![jupyter_notebook.png](images/jupyter_notebook.png)
53-
54-
You can close your web browser then terminate the jupyter server with `CTRL` + `C`.

‎_partials/pip.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
## Python packages
1+
### Python packages
22

33
Now that we have a pristine `lewagon` virtual environment, it's time to install some packages in it.
44

‎_partials/python_checkup.md

+27-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
### Python setup check up
1+
## Python setup check
2+
3+
### Python and packages check
4+
5+
Let's reset your terminal:
6+
7+
```bash
8+
cd ~/code && exec zsh
9+
```
210

311
Check your Python version with the following commands:
412
```bash
@@ -15,17 +23,33 @@ Now run the following command to check if you can load these packages:
1523
python -c "$(curl -fsSL <PIP_LOADER_URL>)"
1624
```
1725

26+
### Jupyter check
27+
1828
Make sure you can run Jupyter:
1929

2030
```bash
2131
jupyter notebook
2232
```
2333

24-
And open a `Python 3` notebook.
34+
Your web browser should open on a `jupyter` window:
35+
36+
![jupyter.png](images/jupyter.png)
2537

26-
Make sure that you are running the correct python version in the notebook. Open a cell and run :
38+
Click on `New` and in the dropdown menu select `Python 3 (ipykernel)`:
39+
40+
![jupyter_new.png](images/jupyter_new.png)
41+
42+
A tab should open on a new notebook:
43+
44+
![jupyter_notebook.png](images/jupyter_notebook.png)
45+
46+
Make sure that you are running the correct python version in the notebook. Open a cell and run:
2747
``` python
2848
import sys; sys.version
2949
```
3050

51+
It should output `<PYTHON_VERSION>` followed by some more details. If not, check with a TA.
52+
53+
You can close your web browser then terminate the jupyter server with `CTRL` + `C`.
54+
3155
Here you have it! A complete python virtual env with all the third-party packages you'll need for the whole bootcamp.

‎_partials/virtualenv.md

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
Before we start installing relevant Python packages, we will isolate the setup for the Bootcamp into a **dedicated** virtual environment. We will use a `pyenv` plugin called [`pyenv-virtualenv`](https://github.com/pyenv/pyenv-virtualenv).
44

5+
### Setup a virtualenv
6+
57
First let's install this plugin:
68

79
```bash

‎_partials/win_jupyter.md

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11

2-
## Configuring Jupyter Notebook to open in your browser
2+
### Configuring Jupyter Notebook to open in your browser
33

44
Let's generate the configuration file for **Jupyter Notebook**...
55

66
``` bash
77
jupyter notebook --generate-config
88
```
99

10-
⚠️ Please copy the path returned by the previous command.
11-
1210
We will now edit the generated Jupyter configuration file:
1311

1412
``` bash

‎build.rb

+1-1
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,8 @@
8080
ubuntu_python
8181
virtualenv
8282
pip
83-
win_jupyter
8483
nbextensions
84+
win_jupyter
8585
python_checkup
8686
dbeaver
8787
setup/windows_settings

‎images/jupyter.png

-30 KB
Loading

‎images/jupyter_new.png

-1.72 KB
Loading

‎images/jupyter_notebook.png

-34.6 KB
Loading

‎specs/jupyter/custom.css

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/* Custom CSS for Jupyter Notebook
2+
3+
Should go into ~/.jupyter/custom/custom.css
4+
5+
Only impacts the Jupyter Notebook interface, not VS Code for example
6+
*/
7+
8+
9+
/* Prettify disclosure elements used for hints and solutions
10+
- Use same color as cell editor background
11+
- Add padding and margin to make it look like a card
12+
- Make the summary element bold
13+
- Add a marker to the summary element
14+
*/
15+
16+
details {
17+
padding: 5px 10px 5px;
18+
margin-bottom: 1em;
19+
}
20+
21+
details[open]{
22+
}
23+
24+
body[data-jp-theme-light=true] details {
25+
background-color: var(--jp-cell-editor-background);
26+
}
27+
28+
body[data-jp-theme-light=false] details {
29+
background-color: var(--jp-cell-editor-background);
30+
}
31+
32+
summary {
33+
cursor: pointer;
34+
display: list-item;
35+
font-weight: bold;
36+
background-color: var(--jp-cell-editor-background);
37+
}
38+
39+
summary::marker {
40+
font-size: 1em;
41+
}
42+
43+
details > p {
44+
margin-top: 5px !important;
45+
margin-bottom: 0 !important;
46+
}
47+
48+
/* Reference for future use
49+
*/
50+
51+
body[data-jp-theme-light=true] .jp-InputArea-editor {
52+
/* To change code and markdown input cells in light mode */
53+
}
54+
55+
body[data-jp-theme-light=false] .jp-InputArea-editor {
56+
/* To change code and markdown input cells in dark mode */
57+
}

0 commit comments

Comments
 (0)