Initial commit

slides.md

@@ -0,0 +1,477 @@
+title: YunoHost - An essential building block to decentralize internet
+class: animation-fade
+layout: true
+
+---
+
+class: impact
+
+.center[
+![](./img/ynh_logo_black_300dpi.png)
+]
+
+## The operating system
+## to build the decentralized Internet
+
+*Aleks - on behalf of the YunoHost project*
+
+---
+
+.center[
+<br>
+# **Surveillance Capitalism**
+### [GAFAM et al.]
+<br>
+<br>
+# **Global Surveillance Madness**
+### [FVEY et al.]
+]
+
+---
+
+class: full
+
+.center[
+![](img/theywantoursouls.png)
+]
+
+---
+
+.center[
+# <red>**The Evil Cloud**</red>
+
+![](img/surveillancecapitalism.png)
+]
+
+---
+
+<br>
+
+.center[
+<small>
+### concrete,<br>
+### straightfoward,<br>
+### **not-just-for-nerds**,<br>
+### scalable,
+### long-term<br>
+</small>
+## **alternatives?**
+]
+
+---
+
+.center[
+<br>
+<br>
+### **If Google disappeared tomorrow,**
+<br>
+### **How would we** 
+### **build <emph>the decentralized internet</emph> ?**
+]
+
+---
+
+.center[
+# FOSS services / social media
+
+![](img/foss.png)
+]
+
+---
+
+class: full
+
+.center[
+![](img/libreplatforms.jpg)
+]
+
+---
+
+class: img-560
+
+.center[
+### Framasoft's De-google-ify campaign
+
+![](img/degoogleify.gif)
+]
+
+---
+
+.center[
+<!--
+<video width="auto" height="600" autoplay loop>
+  <source src="img/framasoft.mp4" type="video/mp4">
+Your browser does not support the video tag.
+</video>
+-->
+
+![](img/framasoft_services.png)
+]
+
+---
+
+.center[
+# But #1
+### The point is <emph>**decentralization!**</emph>
+
+![](img/chatons_librehosters.png)
+]
+
+- **make it easy** to replicate Framasoft's model
+- **spread it** into a variety of local entities (CHATONS, LibreHosters)
+
+---
+
+.center[
+# But #2
+### What about <emph>**emails**</emph> and <emph>**file storage**</emph>
+
+<br>
+Complex, expensive,<br>
+not easy for small-scale third parties
+<br>
+<br>
+
+But what if you had<br>
+**your own server**<br>
+<small>and data on your own drives</small>
+]
+
+---
+
+.center[
+<br>
+<br>
+<br>
+# We have personal computers
+# Why not <emph>**personal servers**</emph>
+]
+
+---
+
+.center[
+# Server administration is <red>**madness**</red>
+
+![](img/onedoesnotsimply.png)
+
+time sinkhole<br>
+complicated as hell
+
+# But <emph>**does it has to be?**</emph> 
+]
+
+---
+
+class: bigblack
+
+.center[
+<br>
+# What's at stake
+
+**<emph>We *won't*</emph>** get rid of surveillance capitalism<br>
+ **<emph>if only a tech elite</emph><br>
+**can deploy and** <emph>maintain servers</emph>**
+]
+
+---
+
+.center[
+<br>
+![](img/yunohost.jpg)
+
+# "The Ubuntu of self-hosting"
+]
+
+
+
+---
+
+.center[
+# Buy a machine 
+]
+
+.col-6[
+.center[
+### At home
+![](img/raspberrypi.jpg)
+
+![](img/oldcomputer.jpg)
+]
+]
+
+.col-6[
+.center[
+### In a datacenter
+<br>
+<br>
+![](img/vps.png)
+]
+]
+
+---
+
+.center[
+# Install YunoHost
+]
+
+.col-6[
+.center[
+### Pre-installed images
+
+![](img/preinstalled.png)
+]
+]
+
+.col-6[
+.center[
+### On top of
+
+![](img/debian.png)
+
+`curl install.yunohost.org `
+
+`| bash` ... ;-)
+]
+]
+
+---
+
+.center[
+# Web admin interface
+
+![](img/admin.png)
+]
+
+---
+
+.center[
+# Install apps ... in a few clicks !
+
+<!--
+<video width="auto" height="600" autoplay loop>
+  <source src="img/apps.mp4" type="video/mp4">
+Your browser does not support the video tag.
+</video>
+-->
+
+![](img/apps.png)
+]
+
+---
+
+.center[
+# Give access to your friends
+
+<!--
+<video width="auto" height="600" autoplay loop>
+  <source src="img/sso.mp4" type="video/mp4">
+</video>
+-->
+
+![](img/user_panel.png)
+]
+
+---
+
+.center[
+<br>
+<br>
+<br>
+<br>
+# Live demo
+
+you can try it yourself on:<br>
+demo.yunohost.org !
+]
+
+---
+
+### In just ~ 30 min / 1h !
+
+- Buy a VPS (or power on your board)
+- Install YunoHost
+- Choose a domain and admin password
+- Create a first user
+- Install apps, Let's Encrypt certificate ...
+- Send emails
+
+
+---
+
+# Project status
+
+- **~3000 instances** with happy users ;)
+- Vivid community !
+- **~10 regular contributors** (100% volunteers)
+- More than **100 working apps** !
+
+**<emph>Current goals</emph>**
+- smooth the UX, increase robustness
+- expand the user base (especially outside the French bubble ;-))
+- get funding / grants for sustainability
+
+---
+
+.center[
+# Happy users !
+
+![](img/testimonies.png)
+]
+
+---
+
+# Help us !
+
+- Deploy a YunoHost for yourself ;)
+- Tell your friends, **organize install parties**
+- **Give us feedback on the UX**
+- Report issues, test apps and beta releases
+- Improve doc and translations
+
+... and if you know how to code:
+
+- Front-end (HTML / CSS / JS)
+- App packaging (bash)
+- Core (python, general sysadmin knowledge, security, ...)
+
+---
+
+.center[
+# Conclusion / summary
+
+If we have the ambition<br>
+to **fight surveillance capitalism**<br>
+we *must* <br>
+reduce the technical and human cost<br>
+of server administration.<br>
+
+### **YunoHost shows that it can be done**
+
+... yet there's still so much to do!<br>
+For this, **we need your help** ;-)
+]
+
+---
+
+class: impact
+
+### Thank you <3 !
+
+![](img/selfhostingfreedom.jpg)
+
+---
+
+---
+
+
+class: impact
+
+## Moar stuff I have no time to talk about
+
+---
+
+# Contact info
+
+- <small>(In person during FOSDEM!)</small>
+- **Mastodon**: `cybre.space/@aleks`
+- **GitHub**: `github.com/alexAubin`
+- **Matrix**: `@Alekswag:matrix.org`
+
+Find the YunoHost team on :
+
+- **IRC**: `#yunohost` and `#yunohost-dev` on `irc.freenode.org`
+- **Matrix**: `#freenode_#yunohost:matrix.org`
+- **Forum**: `forum.yunohost.org`
+- **Mastodon**: `mastodon.social/@yunohost`
+
+
+---
+
+.center[
+# Naming
+
+« Y U No Host »
+
+![](img/dude_yunohost.jpg)
+]
+
+---
+
+.center[
+# Naming (2)
+
+alternatively: « You (K)now Host »
+
+<br>
+
+![](img/iknowselfhosting.png)
+]
+
+---
+
+# Features overview
+
+- ![](img/icon-debian.png) **Debian**-based (stable, robust, well-known)
+- ![](img/icon-tools.png) Simple & clean **web administration interface**
+- ![](img/icon-package.png) Install **apps** in just a few clicks & questions
+- ![](img/icon-users.png) ![](img/icon-door.png) **Multi-users** with single sign-on (SSO) portal
+- ![](img/icon-mail.png) ![](img/icon-messaging.png) **Email** and instant messaging (XMPP) out of the box
+- ![](img/icon-medic.png) **Backups** (and restore!)
+- **Let's Encrypt** integration
+- Firewall, fail2ban, ...
+- Lots of other stuff for things to just work
+
+---
+
+.center[
+**YunoHost ecosystem**
+![](img/ecosystem.png)
+]
+
+---
+
+# Remote backup
+
+.center[
+![](img/remotebackup.png)
+]
+
+- Still work in progress
+- Based on Borg Backup
+- Remote, deduplicated, encrypted
+
+---
+
+# Friend to friend
+
+.center[
+![](img/f2f.png)
+]
+
+- Still thinking about it
+- Easily add "friend" server
+- Enable service such as monitoring (server up ? DNS conf ? ports forwarding ?)
+
+---
+
+# App C.I. / quality control
+
+.center[
+![](img/appci.png)
+]
+
+---
+
+# Internet cube
+
+.center[
+![](img/brique2.png)
+![](img/neutribox.png)
+]
+
+- Plug-and-play
+- Pre-installed with YunoHost
+- VPN from the FFDN
+- Wifi hostpot transparently going through the VPN
+
+

template/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>{{title}}</title>
+  {{{style}}}
+  <script src="remark.min.js"></script>  
+  <script>
+    function create() {
+      return remark.create({
+        {{{source}}},
+        ratio: '16:9',
+        highlightLines: true,
+        countIncrementalSlides: false,
+        highlightStyle: 'github'
+      });
+    }
+  </script>
+</head>
+<body onload="slideshow = create()">
+</body>
+</html>

template/style.scss

@@ -0,0 +1,274 @@
+// Theme
+// ---------------------------------------------------------------------------
+
+/*
+$primary          : #3FC1F5;
+$primary-bg       : #111;
+$secondary        : #40F040;
+$tertiary         : #D5D5D5;
+$light            : #FFF;
+$dark             : #222;
+$text-dark        : $dark; 
+$text-light       : $light;
+$code-background  : #111;
+*/
+
+$primary          : #0070d0;
+$primary-bg       : #ffffff;
+$primary-dark     : #10A0ff;
+$secondary        : #10D010;
+$secondary-dark   : #F0F000;
+$tertiary         : #454545;
+$light            : #222;
+$dark             : #FFF;
+$text-dark        : #DADADA; 
+$text-light       : $light;
+$code-background  : #F8F8D8;
+
+
+$overlay          : transparentize(#000, .5);
+$margin           : 15px;
+$iframe-scale     : 1.5;
+
+
+$font-size        : 32px;
+$font-size-impact : 120px;
+$font             : Open Sans, Helvetica, Arial, sans-serif;
+$font-title       : Open Sans, Helvetica, Arial, sans-serif;
+$font-fixed       : Hack, monospace;
+
+// CSS Base
+// ---------------------------------------------------------------------------
+
+* { box-sizing: border-box; }
+body { font-family: $font; }
+h1, h2, h3, h4, h5, h6 {
+  margin: 0 0 $margin 0;
+  font-family: $font-title;
+}
+h1 { color: $primary; }
+h2 { color: $secondary; }
+h3 { color: $tertiary; }
+li { margin-bottom: .25em; };
+pre, code {
+  text-align: left;
+  font-family: $font-fixed;
+  color: $light;
+  background: $code-background;
+  padding: 0.1em;
+}
+a, a:visited, a:hover, a:active { color: $text-dark; }
+img { vertical-align: inherit; }
+blockquote {
+  border-left: 8px solid;
+  padding-left: .5em;
+  color: $tertiary;
+  text-align: left;
+  margin: 1em 0;
+  & > p { margin: 0; }
+}
+
+
+// Remark base
+// ---------------------------------------------------------------------------
+
+.remark-code { font-size: .9em; padding: 0;  background: $code-background
+!important; }
+.remark-container { background: $dark; }
+.remark-slide-scaler { box-shadow: none; }
+.remark-notes { font-size: 1.5em; }
+
+.remark-slide-content {
+  background-color: $dark;
+  font-size: $font-size;
+  padding: 1em 2em;
+  color: $text-light;
+  background-size: cover;
+}
+
+.remark-slide-number {
+  color: $text-light;
+  right: 1em;
+  opacity: .6;
+  font-size: 0.8em;
+  z-index: 2;
+  .no-counter & { display: none; }
+}
+
+// Additions
+.impact {
+  background-color: $primary-bg;
+  vertical-align: middle;
+  text-align: center;
+  &, h1, h2 { color: $text-light; }
+  h1 { font-size: $font-size-impact; }
+}
+
+emph { color: $secondary; }
+red { color: #ff3030; }
+
+.nopaddingtop {
+  padding: 0px;
+  p { margin-top: 0px; padding-top: 0px; }
+}
+
+.bigblack {
+  font-size: 40px;
+  background-color: #111;
+  color: $dark;
+  h1 { color: $primary-dark; font-size: 100px; }
+  emph { color: $secondary-dark; }
+}
+
+.img-560 {
+   img { height: 560px; }
+}
+
+.full {
+  background-color: $primary-bg;
+  vertical-align: middle;
+  text-align: center;
+  padding: 0px;
+  p { padding-top: 0px; }
+  img { position: absolute; 
+        top: 50%;
+        left: 50%;
+        width: 1400px;
+        height: 800px;
+        margin-top: -400px; /* Half the height */
+        margin-left: -700px; /* Half the width */
+  }
+}
+/*
+.full {
+  &, h1, h2 { color: $text-light; }
+  &iframe {
+    height: calc(#{100%/$iframe-scale} - 1.2em);
+    width: 100%/$iframe-scale;
+    transform: scale($iframe-scale);
+    transform-origin: 0 0;
+    border: 0;
+  }
+}
+*/
+
+.bottom-bar {
+  background-color: $primary;
+  color: $text-light;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  font-size: 20px;
+  padding: .8em;
+  text-align: left;
+  z-index: 1;
+  p { margin: 0;}
+  .impact &, .full & { display: none; }
+}
+
+
+// Utilities
+// ---------------------------------------------------------------------------
+
+// Positioning
+.side-layer {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  padding: 0 2em;
+}
+.middle { &, & img, & span { vertical-align: middle; } };
+.top { vertical-align: top; };
+.bottom { vertical-align: bottom; };
+.inline-block {
+  p, ul, ol, blockquote {
+    display: inline-block;
+    text-align: left;
+  }
+}
+.no-margin { &, & > p, & > pre, & > ul, & > ol { margin: 0; } }
+.no-padding { padding: 0; }
+.space-left { padding-left: 1em; }
+.space-right { padding-right: 1em; }
+
+// Images
+.responsive > img { width: 100%; height: auto; };
+.contain { background-size: contain; };
+.overlay { box-shadow: inset 0 0 0 9999px $overlay; }
+
+// Text
+.left { text-align: left; }
+.right { text-align: right; }
+.center { text-align: center; }
+.justify { text-align: justify; }
+.primary { color: $primary; }
+.alt { color: $secondary; };
+.em { color: $tertiary; };
+.thin { font-weight: 200; }
+.huge { font-size: 2em; }
+.big { font-size: 1.5em; }
+.small { font-size: .8em; }
+.dark-bg { background-color: $dark; }
+.alt-bg { background-color: $secondary; };
+
+// Simple 12-columns grid system
+.row {
+  width: 100%;
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+  &.table { display: table; };
+  &.table [class^="col-"] {
+    float: none;
+    display: table-cell;
+    vertical-align: inherit;
+  }
+}
+
+[class^="col-"] {
+  float: left;
+  &.inline-block {
+    float: none;
+    display: inline-block;
+  }
+}
+
+@for $i from 1 through 12 {
+  .col-#{$i} {width: 100% / 12 * $i; }
+}
+
+// Animations
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.animation-fade {
+  animation-duration: 300ms;
+  animation-fill-mode: both;
+  animation-timing-function: ease-out;
+  .remark-visible & { animation-name: fadeIn; }
+}
+
+
+// Fix PDF print with chrome
+// ---------------------------------------------------------------------------
+
+@page {
+  // 908px 681px for 4/3 slides
+  size: 1210px 681px;
+  margin: 0;
+}
+
+@media print {
+  .remark-slide-scaler {
+    width: 100% !important;
+    height: 100% !important;
+    transform: scale(1) !important;
+    top: 0 !important;
+    left: 0 !important;
+  }
+}