My working space at time of pandemic

From h:40 Marp Presenter to h:40 Visual Studio Code (🆚)
My cruise ⛵️ to increase my productivity.


Carmine Spagnuolo, PhD

h:150

w:650 center

First of all

How to build this presentation?

I was looking for a tool to quickly ⏩ write my presentation.

Marp: Markdown presentation ecosystem

🔗 https://github.com/marp-team/marp

👀

![bg right:33% 50%](https://avatars1.githubusercontent.com/u/20685754?v=4)

History of Marp

Features

  • 📝 Write slide deck with plain Markdown (CommonMark)

  • 🏭 Built on Marpit framework: A brand-new skinny framework for creating slide deck

  • ⚙️ Marp Core: Easy to start using the core engine and built-in themes via npm

  • Following content ©️ Gist marp.md with some changing.

  • What are Gists? We will see 🙈

    • Spoiler ⚠️ ➡️ Gists are a great way to share your work.

How to write slides?

Split pages by horizontal ruler (e.g. ---). It's very simple.

# Slide 1

foobar

---

# Slide 2

foobar

Directives

Marp has extended syntax called "Directives" to support creating beautiful slides.

Insert at front-matter to the top of Markdown:

---
theme: default
---

or HTML comment anywhere:

<!-- theme: default -->

https://marpit.marp.app/directives

Global directives

  • theme: Choose a theme
  • size: Choose the slide size from 16:9 and 4:3 (except Marpit framework)
  • headingDivider: instruct to divide slide pages at before of specified heading levels

⬇️ 🙄 is YAML syntax.

---
theme: gaia
size: 4:3
---

Marp can use built-in themes in Marp Core: default, gaia, and uncover.

Local directives

These are the setting value per slide.

  • paginate: show pagination by set true.
  • header: specify the contents for header.
  • footer: specify the contents for footer.
  • class: set HTML class for current slide.
  • color: set text color.
  • backgroundColor: Set background color.

Spot directives

Local directives apply to ** the current page and all the following pages**.

They can apply to a page by using underscore prefix such as _class.

Example

This page is using the invert color scheme defined in Marp built-in theme.

<!-- _class: invert -->

Image syntax

You can resize image size and apply filters through the keywords: width (w), height (h), and filter CSS keywords.

![width:100px height:100px](image.png)

![blur sepia:50%](filters.png)

Please refer resizing image syntax and a list of CSS filters.

w:100px h:100px w:100 h:100 blur sepia:50%

Background image

You can set a background image for a slide by using bg keyword.

![bg opacity](https://yhatt-marp-cli-example.netlify.com/assets/gradient.jpg)

Multiple backgrounds (Marpit's advanced backgrounds)

Marp can use multiple background images.

![bg blur:3px](https://fakeimg.pl/800x600/fff/ccc/?text=A)
![bg blur:3px](https://fakeimg.pl/800x600/eee/ccc/?text=B)
![bg blur:3px](https://fakeimg.pl/800x600/ddd/ccc/?text=C)

It can also change alignment direction by including vertical keyword.

Split background

Marp can use Deckset style split background(s).

Make a space for background by bg + left / right keywords.

![bg right](image.jpg)

Fragmented list

Marp will parse a list with asterisk marker as the fragmented list for appearing contents one by one. (Only for exported HTML by Marp CLI / Marp for VS Code)

# Bullet list

- One
- Two
- Three

---

# Fragmented list

* One
* Two
* Three

Math typesetting (only for Marp Core)

KaTeX math typesetting such as ax2+bc+cax^2+bc+c can use with Pandoc's math syntax.

Ixx=∫∫Ry2f(x,y)⋅dydxI_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx 

$ax^2+bc+c$

$$I_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx$$

🙄 Yes it will work also in 🆚

Auto-scaling (only for Marp Core)

Several built-in themes are supported auto-scaling for code blocks and math typesettings.

Too long code block will be scaled-down automatically. ------------>

Too long code block will be scaled-down automatically. ------------------------>

Too long code block will be scaled-down automatically. ------------------------------------------------>
Auto-fitting header (only for Marp Core)
is available by annotating <!--fit--> in headings.

## <!--fit--> Auto-fitting header (only for Marp Core)

Theme CSS

Marp uses <section> as the container of each slide. And others are same as styling for plain Markdown. The customized theme can use in Marp CLI and Marp for VS Code.

/* @theme your-theme */

@import 'default';

section {/* Specify slide size */ 
    width: 960px; height: 720px;
}
h1 { 
    font-size: 30px; color: #c33; 
}

Tweak style in Markdown

<style> tag in Markdown will work in the context of theme CSS.

---
theme: default
---
<style>
section {
  background: yellow;
}
</style>
Re-painted yellow background, ha-ha.

You can also add custom styling by class like section.custom-class { ... }.

Scoped style

If you want one-shot styling for current page, you can use <style scoped>.

<style scoped>
a {
  color: green;
}
</style>

![Green link!](https://marp.app/)

TRICKS 🎳

If you want the title fitting your current page your current page layout, you can use <!--fit-->. 
# Enjoy writing slides! :v: <!--fit-->
# Now it's time to setup code 🆚 <!--fit-->

or including images in your file, you can use Base64 coding with image ref 🔗 Medium Story.

Here's an image:

![][image_ref_a32ff4ads]

More text here...
...

[image_ref_a32ff4ads]: data:image/png;base64,iVBORw0KGgoAAAANSUhEke02C1MyA29UWKgPA...RS12D==

Marple.js

  • Marp ➕ Multiplexer = Marple
  • 🛑 I didn't find a way to easily synchonize slides among a set of client.
  • My fun 😍 solution:
    • h:60 a micro-framework per Node.js
    • h:60 enables real-time, bidirectional and event-based communication.
    • h:60 JavaScript Task Runner. In one word: automation.

It's time to move in another alternative dimension!

http://isiswork00.di.unisa.it:3000/client

🆙 👀 🎭

Enjoy writing your slides! ✌️

Now it's time to code 💻

w:400 center

Suppose we have the following MPI C code 

#include <stdio.h>
#include <mpi.h>
#include <string.h>
static const char NERD[5] =  {0xF0, 0x9F, 0xA4, 0x93, '\0'};
static const char WORLD[5] =  {0xF0, 0x9F, 0x8C, 0x8D, '\0'};
static const char SLEEP[5] =  {	0xF0, 0x9F, 0x98, 0xB4, '\0'};
#define 🤓 {MPI_Init(NULL, NULL);  int world_rank; MPI_Comm_rank(MPI_COMM_WORLD, &world_rank); printf("I am the %s with rank %d ",NERD, world_rank);}
#define 🌍 ({int s; MPI_Comm_size(MPI_COMM_WORLD, &s); printf("of MPI %s of size %d ", WORLD, s);});
#define 😴 {printf("Goodbye %s\n",SLEEP);MPI_Finalize();return 0;}
#define P(x) printf(x)
#define I P("\a"); // \a means alert (beep or flash)
#define am P("\a");
#define the P("\a");
#define with P("\a");
#define rank P("\a");
#define size P("\a");
#define 🤔 {P("\a");};
#define of P("\a");
#define MPI P("\a");
#define Goodbye P("\a");
int main()
{  
	I am the 🤓 with rank 🤔 of MPI 🌍 of size 🤔 Goodbye 😴;
}

What does the following code do? .... sure it's works!

We know that ...

setting our (many)

local development

environments

is super-boring

😢

💡 slide 5

  • What are Gists? We will see 🙈
    • Spoiler ⚠️ ➡️ Gists are a great way to share your work.

With gists, you can share single files, parts of files, and full applications with other people. Directories can't be shared. You can access your gists at http(s)://[hostname]/gist, or http(s)://gist.[hostname] if subdomains are enabled.
✅ GitHub Help

What You Can Do With h:50 ?

  1. Write Text Anonymously
  2. Track Changes like a Wiki (support versioning on files)
  3. Publish Gists in Rich Text
  4. Gist as a Writing Platform (WordPress, Medium, and many others support Gist)
  5. Host Single Page Websites on Gist (using bl.ocks.org)
  1. Maintain a Task List
- [x] Pick the flowers
- [ ] Call John 9303032332
- [x] Cancel cable subscription
- [ ] Book the flight tickets
  1. Embed Gists in Web Pages
<script src="https://gist.github.com/spagnuolocarmine/60a5f8c065f9577c25a6717681bd84d1.js"></script>
  1. Measure the Traffic with Google Analytics and GABecon
![Analytics](https://ga-beacon.appspot.com/UA-XXXXX-X/gist-id?pixel)
  1. 🤚 share this presentation source

Now it's time

to setup 🆚

in 🔟 👣

1️⃣ Use Gists to store files

  • We start creating a new Gist file for this presentation.
  • Install and Configure: Gist Extension 🆙

w:1100

>Create New Gist

>Enter the file name

>Enter the description

>Setting access Public or Private

1️⃣ Use Gists to store files (2)


w:400

Ready to go-ahead 🆒

  • 2️⃣ Using Marp presenter h:50.
  • 😱 We also need Markdown 3️⃣.
  • 🆚 helps us:
    • Marketplace
    • Also integrated in the 🆚 control bar (on the left) h:50

To be continued ... after a short comments about 🆚 code

h:100 h:100 h:100 h:100

It is Microsoft product built with Electron 🤔

  • 👍 the same company of a famous operating system Windows.
    • 😠 does not provide Bourne Again Shell, but a Power something.
    • Today ➡️ Windows Subsystem for Linux (WSL) is a compatibility layer for running Linux binary executables.
    • Maybe, you should know it also for the famous blue mantra screen 💙.

To be continued ... after a short comments about 🆚 code

  • Electron

    • Build cross-platform desktop apps with JavaScript, HTML, and CSS

    • Made by GitHub with more than 1000 application on the official store.
  • Microsoft bought GitHub Inc. on June 4, 2018, for $7.5 billion in stock.
  • It just erased all that I said!
  • I ❤️ the Redmond' Micro-Soft Company

Super easy customization e.g. MPI Task

  • Add task.json to .vscode folder.
{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "shell",
            "label": "MPI compile active file (mpicc)",
            "command": "docker run -it --mount src=\"$(pwd)\",
            target=/home,type=bind 
            spagnuolocarmine/docker-mpi:latest mpicc -g /home/${fileBasename} -o /home/${fileBasenameNoExtension}",
            "presentation": {
                "reveal": "always"
            },
            "problemMatcher": [
                "$eslint-compact"
            ]
        },
...

Super easy customization e.g. MPI Task (2) 


        {
            "type": "shell",
            "label": "MPI run active file (mpicc && mpirun)",
            "command": "docker run -it --mount src=\"$(pwd)\",
            target=/home,type=bind
            spagnuolocarmine/docker-mpi:latest mpirun --allow-run-as-root -np 4 /home/${fileBasenameNoExtension}",
            "dependsOn": [
                "MPI compile active file (mpicc)"
            ],
            "presentation": {
                "reveal": "always"
            },
            "problemMatcher": [
                "$eslint-compact"
            ]
        }
    ]
}









>markdown









>marp

4️⃣ Wait! 😅

Before starting to install extensions we need some tool to save our 🆚 configuration.

  • h:50 ➕ h:80 Setting Synch

  • Or use Setting Sync for VS Code Insiders

    • Get the latest release each day!
    • At time of this presentation the following release hash for OSX: fb4223ebdd2e09a7ebf7a1db6b31718252ff2f5cc27f87e206fc8075362bdf1d

Setting Synch

Use your GitHub account token and Gist.

  1. Settings File - Keybinding File
  2. Launch File - Snippets Folder - Workspaces Folder
  3. VSCode Extensions & Extensions Configurations
  • Configuration: will be opened automatically on code start.
  • Upload key: Shift + Alt (Option) + U
  • Download key: Shift + Alt (Option) + U

Important (fun) setting 🌈 5️⃣

Customize your 🆚 colors 😍

  • vscodethemes.com

  • I use 🦇 Dracula

  • w:100 w:100

  • Available also for Atom, Alfred, Emacs, Highlight.js, Hyper, iTerm, JetBrains, Pygments, Slack, Sublime Text, TextMate, Terminal.app, Vim, Xcode, Zsh

Important (fun) setting 🌈 5️⃣

Customize your 🆚 icons 📝 📁 📂 🗂 🗒 📋

-vscode-icons h:50

w:800

Off-topic

👑 How to make your Markdown (GitHub) README more attractive?

  1. Add Table of content 👉
  1. Add custom Badge 🔥 h:50 Badgen h:40
  • h:30 h:30 h:30 h:30 h:30 h:30 h:30

Let's code

Let's code 6️⃣

Let's code 6️⃣

  • Align your code by colon(:), assignment(=,+=,-=,*=,/=) and arrow(=>). It has additional support for comma-first coding style and trailing comment.
  • better-align v1.1.6

Let's code 6️⃣

  • The Better Comments extension will help you create more human-friendly comments in your code.
  • better-comments v2.0.5

Let's code 6️⃣

Let's code 6️⃣

Let's code 6️⃣

Let's code 6️⃣

  • A basic spell checker that works well with camelCase code.
  • Not all language accept camelCase e.g. Julia.
  • code-spell-checker v1.8.0

Let's code 6️⃣

  • ErrorLens enhances Visual Studio Code's inbuilt diagnostic highlighting.
  • errorlens v3.1.1
    w:1200

h:50 7️⃣

h:50 7️⃣

h:50 7️⃣

w:600

h:50 8️⃣

h:50 8️⃣

  • This extension lets you use any remote machine with a SSH server as your development environment.
  • remote-ssh v0.51.0

h:50 8️⃣

  • This extension lets you use any remote machine with a SSH server as your development environment.
  • remote-ssh-edit v0.51.0
  • This extension complements the Remote - SSH extension with syntax colorization, keyword intellisense, and simple snippets when editing SSH configuration files.

h:50 8️⃣

  • The Docker extension makes it easy to build, manage and deploy containerized applications from Visual Studio Code.
  • vscode-docker v1.1.0

h:50 8️⃣

h:50 8️⃣

h:50 9️⃣

h:50 9️⃣

h:50 🔟

h:50 🔟

h:50 🔟

h:50 🔟

h:50 🔟

  • Display CPU frequency, usage, memory consumption, and battery percentage remaining within the 🆚 status bar.
  • resmon v1.0.7

h:50 🔟

h:50 🔟

h:50 🔟

h:50 🔟

  • Quickly save screenshots of your code.
  • Copy screenshots to your clipboard.
  • Draw over your screenshot.
  • Upload your image online.
  • screenify-vscode 0.0.4

h:50 🔟

h:50 🔟

h:50 🔟

  • Show your upcoming events from your Google calendar in a tree view inside. It also allows simple events to be created, modified, and deleted.
  • calendar 0.0.13

h:50 🔟

h:50 🔟







Also...

code alone!

h:50 🔟

  • Allow you to join one or more "spaces", and begin discovering, communicating and collaborating with other developers in real-time.
  • vsls-contrib/spaces v0.1.48
  • Join space: isislab

Last Long Story Short

  • Furnish your h:40 as your 🏠
  • 🍎 OS: iTerm2 + Oh My Zsh + Solarized color scheme + Source Code Pro Powerline + Font Awesome + Powerlevel10k
  • h:50 popular 🐚 ➕➕

Last Long Story Short

>Marp: Export Slide Deck...

>myworkingspace.html

$git commit -m 
"Here! My presentation is finished. Questions?"

$git push origin master

echo 'Thank your attention!'
Thank your attention!

h:30 h:30 h:30 h:30