---
title: Slides Templates (simple)
tags: Templates, Talk
description: View the slide with "Slide Mode".
type: slide
slideOptions:
# Minutes alloted for a slide. Enable timer (in minutes)
allottedMinutes: 5
# Vertical centering of slides
center: true
# Display controls in the bottom right corner
controls: true
# Set default timing of 2 minutes per slide
defaultTiming: 120
# The display mode that will be used to show slides
display: 'block'
# Flags if the presentation is running in an embedded mode,
# i.e. contained within a limited portion of the screen
embedded: false
# Turns fragments on and off globally
fragments: true
# Flags if we should show a help overlay when the questionmark
# key is pressed
help: true
# Push each slide change to the browser history
history: false
# Loop the presentation
loop: false
# Enable keyboard shortcuts for navigation
keyboard: true
# Enable the slide overview mode
overview: true
# Number of pixels to move the parallax background per slide
# - Calculated automatically unless specified
# - Set to 0 to disable movement along an axis
parallaxBackgroundHorizontal: null
parallaxBackgroundVertical: null
# parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'
# Display a presentation progress bar
progress: true
# Change the presentation direction to be RTL
rtl: false
# Randomizes the order of slides each time the presentation loads
shuffle: false
# Display the page number of the current slide
slideNumber: false
# Themes
theme: simple # White background, black text, blue links
#solarized Cream-colored background, dark green text, blue links
#blood Dark background, thick white text, red links
#moon Dark blue background, thick grey text, blue links
# Enables touch navigation on devices with touch input
touch: true
# Transition style
transition: 'slide' # none/fade/slide/convex/concave/zoom

# Enable spotlight mode
spotlight:
enabled: true

# Flags if speaker notes should be visible to all viewers
showNotes: false

# Global override for autolaying embedded media (video/audio/iframe)
# - null: Media will only autoplay if data-autoplay is present
# - true: All media will autoplay, regardless of individual setting
# - false: No media will autoplay, regardless of individual setting
autoPlayMedia: null

# Number of milliseconds between automatically proceeding to the
# next slide, disabled when set to 0, this value can be overwritten
# by using a data-autoslide attribute on your slides
autoSlide: 0

# Stop auto-sliding after user input
autoSlideStoppable: true

# Use this method for navigation when auto-sliding
autoSlideMethod: Reveal.navigateNext

# Enable slide navigation via mouse wheel
mouseWheel: false

# Hides the address bar on mobile devices
hideAddressBar: true

# Opens links in an iframe preview overlay
previewLinks: false

# Transition speed
transitionSpeed: 'default' # default/fast/slow

# Transition style for full page slide backgrounds
backgroundTransition: 'fade' # none/fade/slide/convex/concave/zoom

# Number of slides away from the current that are visible
viewDistance: 3

# Parallax background image
parallaxBackgroundImage: '' # e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"

# Parallax background size
parallaxBackgroundSize: '' # CSS syntax, e.g. "2100px 900px"

---

# Slides Templates (simple)

<!-- Put the link to this slide here so people can follow -->
slide: https://hackmd.io/p/template-Talk-slide

---

We have a collaborative session

please prepare laptop or smartphone to join!

---

## Who am I?

- Front-end developer
- VSCode :heart:
- I use tabs. :cat:

---

### 70% of our users are developers. Developers :heart: GitHub.

---

<!-- .slide: data-background="https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg" -->
#### testslide

---

{%youtube E8Nj7RwXf0s %}

---

### Usage flow

---

digraph {
  compound=true
  rankdir=RL

  graph [ fontname="Source Sans Pro", fontsize=20 ];
  node [ fontname="Source Sans Pro", fontsize=18];
  edge [ fontname="Source Sans Pro", fontsize=12 ];


  subgraph core {
    c [label="Hackmd-it \ncore"] [shape=box]
  }
  
  c -> sync [ltail=session lhead=session]

  subgraph cluster1 {
     concentrate=true
    a [label="Text source\nGithub, Gitlab, ..."] [shape=box]
    b [label="HackMD Editor"] [shape=box]
    sync [label="sync" shape=plaintext ]
    b -> sync  [dir="both"]
    sync -> a [dir="both"]
    label="An edit session"
  }
}

---

### Architecture of extension

---


---

## Content script

- Bind with each page
- Manipulate DOM
- Add event listeners
- Isolated JavaScript environment
- It doesn't break things

---

# :fork_and_knife:

---

<style>
code.blue {
color: #337AB7 !important;
}
code.orange {
color: #F7A004 !important;
}
</style>

- <code class="orange">onMessage('event')</code>: Register event listener
- <code class="blue">sendMessage('event')</code>: Trigger event

---

# :bulb:

---

- Dead simple API
- Only cares about application logic

---

import * as Channeru from 'channeru'

// setup channel in different page environment, once
const channel = Channeru.create()

---

// in background script
const fakeLogin = async () => true

channel.answer('isLogin', async () => {
  return await fakeLogin()
})

<br>

// in inject script
const isLogin = await channel.callBackground('isLogin')
console.log(isLogin) //-> true

---

# :100: :muscle: :tada:

---

### Wrap up

- Cross envornment commnication
- A small library to solve messaging pain
- TypeScript Rocks :tada:

---

### Thank you! :sheep:

You can find me on

- GitHub
- Twitter
- or email me