diff --git a/_partials/es/nbextensions.md b/_partials/es/nbextensions.md index efc837a..be18bba 100644 --- a/_partials/es/nbextensions.md +++ b/_partials/es/nbextensions.md @@ -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 - 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 . - -### 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`. diff --git a/_partials/es/python_checkup.md b/_partials/es/python_checkup.md index d50805b..ce95b00 100644 --- a/_partials/es/python_checkup.md +++ b/_partials/es/python_checkup.md @@ -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 )" @@ -15,17 +21,31 @@ Ahora ejecuta el siguiente comando para verificar que puedas cargar estos paquet python -c "$(curl -fsSL )" ``` -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 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. diff --git a/_partials/nbextensions.md b/_partials/nbextensions.md index c662101..970c4cd 100644 --- a/_partials/nbextensions.md +++ b/_partials/nbextensions.md @@ -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 - 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 . - -### `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`. diff --git a/_partials/python_checkup.md b/_partials/python_checkup.md index 363c219..c1a86dc 100644 --- a/_partials/python_checkup.md +++ b/_partials/python_checkup.md @@ -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 )" @@ -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 `` 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. diff --git a/images/jupyter.png b/images/jupyter.png index 3a79359..92bba1b 100644 Binary files a/images/jupyter.png and b/images/jupyter.png differ diff --git a/images/jupyter_new.png b/images/jupyter_new.png index 0ab91c3..33147bd 100644 Binary files a/images/jupyter_new.png and b/images/jupyter_new.png differ diff --git a/images/jupyter_notebook.png b/images/jupyter_notebook.png index ab50d5e..6c20c99 100644 Binary files a/images/jupyter_notebook.png and b/images/jupyter_notebook.png differ diff --git a/specs/jupyter/custom.css b/specs/jupyter/custom.css new file mode 100644 index 0000000..4c50be1 --- /dev/null +++ b/specs/jupyter/custom.css @@ -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 */ +}