First fill

VSCode.md

@@ -0,0 +1,248 @@
+---
+marp: true
+title: Visual Studio Code for WSL
+author: P.Y. Barriat
+description: How to use VSCode with WSL
+backgroundImage: url('assets/back.png')
+_backgroundImage: url('assets/garde.png')
+footer: 01/06/2023 | Visual Studio Code for WSL | PY Barriat
+_footer: ""
+paginate: true
+_paginate: false
+math: true
+---
+
+Visual Studio Code for WSL<!--fit-->
+===
+
+https://gogs.elic.ucl.ac.be/pbarriat/learning-vscode
+
+![h:250](assets/WSL2.png)![h:250](assets/logo_vscode.png)
+
+**Pierre-Yves Barriat**
+ELIC Training Sessions `June 13th, 2023`
+
+---
+
+# What is WSL :question:
+
+**Windows Subsystem for Linux** (WSL) allows you to leverage the benefits of Linux package management and command line tools to streamline your development workflow. This is particularly useful for web developers and **data scientists**
+
+![h:200](assets/WSL1.png)
+
+The easiest way to access your Ubuntu development environment in WSL is using **Visual Studio Code** via the built in *Remote extension*
+
+---
+
+# What is Visual Studio Code :question:
+
+**Visual Studio Code** (VS Code) is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux.
+
+It has a rich ecosystem of extensions for languages (such as C++, Fortran, Java, Python, etc) and runtimes (Git, Jupyter, etc)
+
+VSC is one of the most popular and powerful text editors used by software engineers today 
+> free, open-source and [available](https://code.visualstudio.com/download) for macOS, Windows and Linux :+1:
+
+---
+
+# WSL on a Windows UCLouvain PC
+
+Linux from CII interface is **overkill** 
+> based on Virtualbox: heavy workload :fearful:
+
+No auto process (yet) to install WSL from UCLouvain IT support
+
+You must install WSL by your own with the **Administrator access** from CII interface
+
+**Don't worry**: just follow the guideline below... :muscle:
+
+---
+
+![h:600](assets/CII.png)
+
+---
+
+## Windows required features
+
+1. From CII interface, ask for an **Admin access**
+
+2. Open a **Powershell terminal** in **Administrator mode**
+
+3. Copy paste this line and press *Enter*
+
+```sh
+dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
+```
+
+4. Copy paste this line and press *Enter*
+
+```sh
+dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
+```
+5. Restart your computer
+
+---
+
+## Install WSL2
+
+1. From CII interface, ask for an **Admin access**
+
+2. Download the **WSL2 update** and install it (double click on the file)
+
+   https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi
+
+3. Open a **Powershell terminal** in **Administrator mode**
+
+4. Copy paste this line and press *Enter*
+
+```sh
+wsl --set-default-version 2
+```
+
+---
+
+## Install Ubuntu 22.04 from Microsft Store
+
+![h:500](assets/ubuntu_wsl.png)
+
+---
+
+## First configuration of Ubuntu
+
+(Open Ubuntu) and choose a login/password
+
+![h:250](assets/ubuntu_terminal.png)
+
+In the Ubuntu terminal do
+
+```bash
+sudo apt update
+
+sudo apt upgrade
+```
+
+---
+
+# VS Code 
+
+You can install Visual Studio Code from the web link [here](https://code.visualstudio.com/download)
+
+> during installation, under the **Additional Tasks step**, ensure the **Add to PATH** option is checked
+
+![h:350](assets/vscode_install.png)
+
+---
+
+Open VS Code and install **WSL for VS Code**
+
+![h:525](assets/vscode_wsl.png)
+
+---
+
+Connect to WSL using a **distro** (Ubuntu 22.04) 
+
+![h:525](assets/vscode_distro.png)
+
+---
+
+Install extensions for **"WSL: Ubuntu 22.04"**
+
+- Python
+- Jupyter
+
+![h:400](assets/vscode_extensions.png)
+
+---
+
+# Jupyter Notebook in VS Code
+
+Create a new Juyter Notebook
+
+![h:200](assets/new_ipynb.png)
+
+Fill the first cell
+
+```python
+import numpy as np
+```
+
+---
+
+Try to run the cell
+
+> you must choose a Python environment first : Python 3.6 and **Install**
+>
+> ![h:100](assets/vscode_pyenv.png)
+> ![h:150](assets/vscode_kernel.png)
+
+But... :boom:
+
+![h:100](assets/vscode_nopip.png)
+
+---
+
+So open your first **WSL terminal** in VS Code
+
+![h:300](assets/vscode_terminal.png)
+
+In this **Linux** terminal, do
+
+```bash
+sudo apt install python3-pip
+```
+
+---
+
+Try again to run the cell !
+
+But now... :boom:
+
+![h:450](assets/vscode_missing.png)
+
+---
+
+In your **Linux** terminal, install the missing Python extension ... 
+
+```bash
+pip instal numpy
+```
+
+![h:350](assets/vscode_add_ext.png)
+
+... and run the cell again: great, it's OK now :smiley:
+
+---
+
+## Let's try a full notebook example
+
+First clone this **Git repository**
+
+```bash
+git clone https://gogs.elic.ucl.ac.be/pbarriat/learning-vscode
+```
+
+> You don't already know what's Git :question:
+> Shame on you ! :confounded:
+>
+> **It's not to late**: take a look here
+> https://gogs.elic.ucl.ac.be/TECLIM/Git_Training
+
+Now open the file `example.ipynb`
+
+---
+
+The first cell implies you must install some requirements
+
+To run this example, install the extensions below
+
+```bash
+pip install netCDF4
+sudo apt install libgeos-dev libgdal-dev
+pip install cartopy
+```
+
+Now, try to run all the cells of this notebook :exclamation:
+
+---
+
+# Visual Studio Code for WSL :speech_balloon:

assets/marp.config.js

@@ -0,0 +1,5 @@
+const marpKrokiPlugin = require('./kroki-plugin')
+
+module.exports = {
+  engine: ({ marp }) => marp.use(marpKrokiPlugin)
+}

assets/tum.css

@@ -0,0 +1,55 @@
+/* @theme tum */
+
+@import 'default';
+
+section {
+  /*background-color: #fff;
+  color: #000;
+  background-image: url('images/TUM_Logo_blau_rgb_s.svg');
+  background-repeat: no-repeat;
+  background-position: right 40px top 40px;
+  background-size: 8%;*/
+}
+
+section.lead {
+  /*background-image: url('images/TUM_Uhrenturm.png');
+  background-position: right;
+  background-size: 45%;*/
+}
+
+section h1,
+section h2 {
+  color: #1f315c;
+}
+section a {
+  color: #5fb2e6;
+}
+section footer,
+section::after {
+  color: #9cb7d4;
+}
+
+section.invert {
+  background-color: #003359;
+  color: #fff;
+  /*background-image: url('images/TUM_Logo_weiss_rgb_s.svg');*/
+}
+
+section.lead.invert {
+  /*background-image: url('images/TUM_Uhrenturm_w.png');*/
+}
+
+section.invert h1,
+section.invert footer,
+section.invert::after {
+  color: #fff;
+}
+
+section.invert a {
+  color: #e37222;
+}
+
+/* Add "Page" prefix and total page number */
+section::after {
+  content: attr(data-marpit-pagination) ' / ' attr(data-marpit-pagination-total);
+}

compile.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+#
+# PY Barriat, June 2023
+#
+# Download and install marp (MarkDown slides extension) from here:
+# https://github.com/marp-team/marp-cli/releases
+#
+
+marp --allow-local-files --theme ./assets/tum.css VSCode.md -o VSCode.pdf
+marp --template bespoke --bespoke.progress --allow-local-files --theme ./assets/tum.css VSCode.md -o VSCode.html