aboutsummaryrefslogtreecommitdiff
path: root/slides
diff options
context:
space:
mode:
authorMitja Felicijan <mitja.felicijan@gmail.com>2018-09-23 22:43:26 +0200
committerMitja Felicijan <mitja.felicijan@gmail.com>2018-09-23 22:43:26 +0200
commit6a98c802fd7400510b2469ccb9315f5d31c7155a (patch)
treec6d3c9f6e9d941e53ce50c2cedd44b91e82b8480 /slides
parent90e49e8658c551646dd889a65952ac945d5aba05 (diff)
downloadmitjafelicijan.com-6a98c802fd7400510b2469ccb9315f5d31c7155a.tar.gz
content update
Diffstat (limited to 'slides')
-rw-r--r--slides/.jsbeautifyrc51
-rw-r--r--slides/.jshintignore9
-rw-r--r--slides/.jshintrc9
-rw-r--r--slides/example/index.html84
-rw-r--r--slides/example/slides.md94
-rw-r--r--slides/index.html39
-rw-r--r--slides/math/index.html114
-rw-r--r--slides/math/slides.md109
-rw-r--r--slides/presentations/example/default.pug131
-rw-r--r--slides/presentations/example/meta.json3
-rw-r--r--slides/vendor/slides.css190
-rw-r--r--slides/vendor/slides.js112
12 files changed, 544 insertions, 401 deletions
diff --git a/slides/.jsbeautifyrc b/slides/.jsbeautifyrc
new file mode 100644
index 0000000..5d90dea
--- /dev/null
+++ b/slides/.jsbeautifyrc
@@ -0,0 +1,51 @@
1{
2 "html": {
3 "allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg", "dust", "njk"],
4 "brace_style": "collapse",
5 "end_with_newline": true,
6 "indent_char": " ",
7 "indent_handlebars": true,
8 "indent_inner_html": true,
9 "indent_scripts": "keep",
10 "indent_size": 4,
11 "indent_with_tabs": true,
12 "max_preserve_newlines": 10,
13 "preserve_newlines": true,
14 "unformatted": ["a", "span", "img", "code", "pre", "sub", "sup", "em", "strong", "b", "i", "u", "strike", "big", "small", "pre", "h1", "h2", "h3", "h4", "h5", "h6", "hr"],
15 "wrap_line_length": 0
16 },
17 "css": {
18 "allowed_file_extensions": ["css", "scss", "sass", "less"],
19 "end_with_newline": true,
20 "indent_char": " ",
21 "indent_size": 4,
22 "indent_with_tabs": true,
23 "newline_between_rules": true,
24 "selector_separator": " ",
25 "selector_separator_newline": true,
26 "preserve_newlines": false,
27 "max_preserve_newlines": 10
28 },
29 "js": {
30 "allowed_file_extensions": ["js", "json", "jshintrc", "jsbeautifyrc"],
31 "brace_style": "collapse",
32 "break_chained_methods": false,
33 "e4x": true,
34 "end_with_newline": true,
35 "indent_char": " ",
36 "indent_level": 0,
37 "indent_size": 4,
38 "indent_with_tabs": true,
39 "jslint_happy": false,
40 "keep_array_indentation": true,
41 "keep_function_indentation": true,
42 "max_preserve_newlines": 0,
43 "preserve_newlines": true,
44 "space_after_anon_function": false,
45 "space_before_conditional": true,
46 "space_in_empty_paren": false,
47 "space_in_paren": false,
48 "unescape_strings": false,
49 "wrap_line_length": 0
50 }
51}
diff --git a/slides/.jshintignore b/slides/.jshintignore
new file mode 100644
index 0000000..4d662aa
--- /dev/null
+++ b/slides/.jshintignore
@@ -0,0 +1,9 @@
1node_modules
2bower_components
3lib/external
4vendor
5help
6steal
7funcunit
8**/*.min.js
9**/production.js
diff --git a/slides/.jshintrc b/slides/.jshintrc
new file mode 100644
index 0000000..7c84ea6
--- /dev/null
+++ b/slides/.jshintrc
@@ -0,0 +1,9 @@
1{
2 "strict": false,
3 "esversion": 6,
4 "curly": true,
5 "noempty": true,
6 "trailing": true,
7 "white": false,
8 "evil": true
9}
diff --git a/slides/example/index.html b/slides/example/index.html
deleted file mode 100644
index 586794f..0000000
--- a/slides/example/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
1<!doctype html>
2<html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6 <title>Title</title>
7 <link rel="icon" type="image/gif" href="/assets/avatar.gif?ver=20180803">
8 </head>
9
10 <body>
11
12 <script src="//cdnjs.cloudflare.com/ajax/libs/remark/0.14.0/remark.min.js"></script>
13 <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML&delayStartupUntil=configured"></script>
14
15 <script>
16 MathJax.Hub.Config({
17 //displayAlign: 'left',
18 extensions: ['tex2jax.js'],
19 jax: ['input/TeX', 'output/SVG'],
20 tex2jax: {
21 skipTags: ['script', 'noscript', 'style', 'textarea', 'code'],
22 inlineMath: [
23 ['$', '$'],
24 ["\\(", "\\)"]
25 ],
26 displayMath: [
27 ['$$', '$$'],
28 ["\\[", "\\]"]
29 ],
30 }
31 });
32 MathJax.Hub.Configured();
33
34 let slideshow = remark.create({
35 sourceUrl: 'slides.md',
36 ratio: '16:9',
37 mouseWheel: false,
38 });
39
40 </script>
41
42 <style>
43 * {
44 box-shadow: none !important;
45 }
46
47 .remark-container {
48 background-color: #fff !important;
49 }
50
51 table {
52 width: 100%;
53 border-collapse: collapse;
54 border-spacing: 0;
55 }
56
57 table,
58 table td,
59 table th {
60 border: 3px solid #f0f0f0;
61 text-align: left;
62 padding: 10px;
63 }
64
65 img[src$="md-center"] {
66 display: block;
67 margin: 0 auto;
68 }
69
70 img[src$="md-left"] {
71 display: block;
72 margin: 0 auto;
73 }
74
75 img[src$="md-right"] {
76 display: block;
77 margin: 0 auto;
78 }
79
80 </style>
81
82 </body>
83
84</html>
diff --git a/slides/example/slides.md b/slides/example/slides.md
deleted file mode 100644
index 457ba12..0000000
--- a/slides/example/slides.md
+++ /dev/null
@@ -1,94 +0,0 @@
1layout: true
2---
3
4## Test online slideshow
5
6Couple of example slides to test
7
8![alt text](https://media.giphy.com/media/i9qmSfLuXXcXK/giphy.gif)
9
10
11---
12
13## Math
14
15$$ \large{ \mathbb{R}^2 ∈ \vec{a} \bar{a} } $$
16$$ \large{ e^{i\pi} + 1 = 0 } $$
17$$ \large{ x = {-b \pm \sqrt{b^2-4ac} \over 2a} } $$
18
19
20$$ e^{i\pi} + 1 = 0 $$
21
22$$ \large{ \sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6} } $$
23
24$$ \large{ ABCDEFGHIJKLMNOPQRSTUVXYZ } $$
25
26---
27
28## Image
29
30![alt text](https://media.giphy.com/media/4d0nGeMweD49q/giphy.gif?style=md-center)
31
32
33---
34
35## Lists
36
37- Couple of example slides to test
38- Couple of example slides to test
39- Couple of example slides to test
40
41---
42
43## JSON example
44
45Some code examples.
46
47```json
48{
49 "short_name": "MF",
50 "name": "Mitja Felicijan",
51 "author": "Mitja Felicijan",
52 "icons": [{
53 "src": "/assets/avatar.png",
54 "sizes": "512x512",
55 "type": "image/png"
56 }],
57 "start_url": "/",
58 "display": "fullscreen",
59 "theme_color": "#000000",
60 "background_color": "#000000"
61}
62```
63
64---
65
66## Python example
67
68Some code examples.
69
70```python
71@app.route("{}".format(args["path"]), method=["GET"])
72def route_default():
73 with open("static/index.html", "r") as fp:
74 data = str(fp.read())
75 data = data.replace("$$path$$", args["path"])
76 data = data.replace("$$cache$$", CACHE_VER)
77 data = data.replace("$$db$$", str(args["redis_database"]))
78 return data
79```
80
81---
82
83## Tables
84
85| URL | Num of requests | Transfered | Finish | DOMContentLoaded | Load |
86| ------------- | --------------- | ---------- | ------- | ---------------- | ------ |
87| cnn.com | 134 | 3.22 MB | 4.7 s | 575 ms | 3.60 s |
88| youtube.com | 61 | 1.8 MB | 5.13 s | 1.78 s | 1.97 |
89| wikipedia.com | 11 | 64.5 KB | 642 ms | 531 ms | 573 ms |
90| reddit.com | 177 | 12.9 MB | 7.65 MB | 2.03 s | 3.74 s |
91| amamzon.com | 278 | 8.0 MB | 5.20 s | 1.15s | 2.99 s |
92| twitter.com | 2'2 | 5.1 MB | 23.48 s | 3.20 s | 4.55 s |
93| twitch.tv | 177 | 4.4 MB | 5.08 s | 579 ms | 798 ms |
94| microsoft.com | 77 | 1.1 MB | 3.96 s | 1.01 s | 1.26 s |
diff --git a/slides/index.html b/slides/index.html
new file mode 100644
index 0000000..e3a3fac
--- /dev/null
+++ b/slides/index.html
@@ -0,0 +1,39 @@
1<!DOCTYPE html>
2<html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title></title>
9 </head>
10
11 <body>
12
13 <div class="wrapper">
14 <main></main>
15 <nav></nav>
16 </div>
17
18 <script>
19
20
21 </script>
22
23 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.min.css">
24 <link rel="stylesheet" href="vendor/slides.css">
25
26 <script src="//cdnjs.cloudflare.com/ajax/libs/jade/1.11.0/jade.min.js"></script>
27 <script src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML&delayStartupUntil=configured"></script>
28
29 <script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>
30 <script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-python.min.js"></script>
31 <script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-c.min.js"></script>
32 <script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-go.min.js"></script>
33 <script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-sql.min.js"></script>
34
35 <script src="vendor/slides.js"></script>
36
37 </body>
38
39</html>
diff --git a/slides/math/index.html b/slides/math/index.html
deleted file mode 100644
index 3f28112..0000000
--- a/slides/math/index.html
+++ /dev/null
@@ -1,114 +0,0 @@
1<!doctype html>
2<html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6 <title>Title</title>
7 <link rel="icon" type="image/gif" href="/assets/avatar.gif?ver=20180803">
8 </head>
9
10 <body>
11
12 <script src="//cdnjs.cloudflare.com/ajax/libs/remark/0.14.0/remark.min.js"></script>
13 <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML&delayStartupUntil=configured"></script>
14
15 <script>
16 MathJax.Hub.Config({
17 //displayAlign: 'left',
18 extensions: ['tex2jax.js'],
19 jax: ['input/TeX', 'output/SVG'],
20 tex2jax: {
21 skipTags: ['script', 'noscript', 'style', 'textarea', 'code'],
22 inlineMath: [
23 ['$', '$'],
24 ["\\(", "\\)"]
25 ],
26 displayMath: [
27 ['$$', '$$'],
28 ["\\[", "\\]"]
29 ],
30 }
31 });
32 MathJax.Hub.Configured();
33
34 let slideshow = remark.create({
35 sourceUrl: 'slides.md',
36 ratio: '16:9',
37 mouseWheel: false,
38 });
39
40 </script>
41
42 <style>
43 * {
44 box-shadow: none !important;
45 }
46
47 .remark-container {
48 background-color: #fff !important;
49 }
50
51 table {
52 width: 100%;
53 border-collapse: collapse;
54 border-spacing: 0;
55 }
56
57 table,
58 table td,
59 table th {
60 border: 3px solid #f0f0f0;
61 text-align: left;
62 padding: 10px;
63 }
64
65 img[src$="md-center"] {
66 display: block;
67 margin: 0 auto;
68 }
69
70 img[src$="md-left"] {
71 display: block;
72 margin: 0 auto;
73 }
74
75 img[src$="md-right"] {
76 display: block;
77 margin: 0 auto;
78 }
79
80 img[src$="img350"] {
81 height: 350px;
82 }
83
84 img[src$="img300"] {
85 height: 300px;
86 }
87
88 li {
89 line-height: 200%;
90 }
91
92 h1 {
93 margin-bottom: 150px;
94 }
95
96 h1,
97 h2 {
98 margin-top: 0;
99 }
100
101 h3 {
102 text-align: center;
103 margin-top: 150px;
104 }
105
106 h4 {
107 text-align: center;
108 }
109
110 </style>
111
112 </body>
113
114</html>
diff --git a/slides/math/slides.md b/slides/math/slides.md
deleted file mode 100644
index 8f82b6d..0000000
--- a/slides/math/slides.md
+++ /dev/null
@@ -1,109 +0,0 @@
1layout: true
2---
3
4# Why understanding of basic math is imporant for computer programing
5
6September 21, 2018
7
8[@mitjafelicijan](https://twitter.com/mitjafelicijan)
9
10---
11
12### "We Cannot Solve Our Problems With The Same Thinking We Used When We Created Them."
13
14#### — Albert Einstein
15
16---
17
18## How we usually find solutions and why this is problematic?
19
20- We search for code example instead of algorithms.
21- We copy and paste and do testing on trial&error principle.
22- We don't take enough time to properly understand problem we a re trying to solve.
23- Brute force solutions we make are usually not optimized
24
25---
26
27## Math is horrible and I don't need it!
28
29- Well, YES :) Math can be horrible but also beautiful to implement.
30- Disregarding math is disregarding thousands of years of knowledge.
31- Math is not only for scientists.
32- Good algorithm is as optimized as your code is when you are done with it.
33- Math is the search for patterns and anti-patterns in natural universe and making these findings into tools accessible to ordinary people.
34
35---
36
37## Coordinate Geometry
38
39A coordinate geometry is a branch of geometry where the position of the points on the plane is defined with the help of an ordered pair of numbers also known as coordinates.
40
41![image](https://www.onlinemathlearning.com/image-files/xcoordinate-geometry-formula.png.pagespeed.ic.cqp4Ryqey8.png)
42
43---
44
45## Distance formula
46
47![](https://s3.amazonaws.com/ck12bg.ck12.org/curriculum/108383/thumb_540_50.jpg)
48
49---
50
51## Linear Algebra
52
53Linear algebra is the branch of mathematics concerning linear equations such as. linear functions such as. and their representations through matrices and vector spaces.
54
55![image](https://thumbs.gfycat.com/VeneratedSpitefulFrilledlizard-size_restricted.gif)
56
57- [Graphical Linear Algebra](https://graphicallinearalgebra.net/)
58- [Linear Relations](https://graphicallinearalgebra.net/2015/12/26/27-linear-relations/)
59- [Diagrams in charts](https://graphicallinearalgebra.files.wordpress.com/2015/11/ih.gif)
60
61---
62
63## Vectors and spaces
64
65- Space vector also called linear vector
66- Vector = magnitude + direction
67- Example: velocity vector (5kmh/west)
68
69![](https://i.ytimg.com/vi/0oSe9vx-W54/maxresdefault.jpg?img350)
70
71---
72
73## Shortest path problem
74
75In graph theory, the shortest path problem is the problem of finding a path between two vertices (or nodes) in a graph such that the sum of the weights of its constituent edges is minimized.
76
77Shortest path (A, C, E, D, F) between vertices A and F in the weighted directed graph
78
79![](https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Shortest_path_with_direct_weights.svg/250px-Shortest_path_with_direct_weights.svg.png)
80![](http://new.gctm-resources.org/migrating/658-00.png)
81
82[Wiki: Shortest path problem](https://en.wikipedia.org/wiki/Shortest_path_problem)
83
84---
85
86## Dijkstra's shortest path algorithm
87
88![](https://upload.wikimedia.org/wikipedia/commons/5/57/Dijkstra_Animation.gif)
89![](https://upload.wikimedia.org/wikipedia/commons/2/23/Dijkstras_progress_animation.gif)
90
91![](https://cdn-images-1.medium.com/max/735/0*OiVoLu09VJp-oHwJ.png?img300)
92![](https://www.mathworks.com/matlabcentral/mlc-downloads/downloads/submissions/20025/versions/3/screenshot.jpg?img300)
93
94---
95
96## HTML5 Canvas
97
98- [HTML5 Canvas : Matrix Transforms](https://www.w3resource.com/html5-canvas/html5-canvas-matrix-transforms.php)
99- [Visualizing linear algebra using the html5
100canvas: matrices and quaternions](http://archives.math.utk.edu/ICTCM/VOL28/A007/paper.pdf)
101- [Matrix rain animation using HTML5 canvas and javascript](https://codepen.io/riazxrazor/pen/Gjomdp)
102- [Convoluton matrix](https://www.phpied.com/canvas-pixels-2-convolution-matrix/)
103
104---
105
106## Going further
107
108- [Basic Linear Algebra for Deep Learning](https://towardsdatascience.com/linear-algebra-for-deep-learning-f21d7e7d7f23)
109- [Deep learning book](https://www.deeplearningbook.org/contents/linear_algebra.html)
diff --git a/slides/presentations/example/default.pug b/slides/presentations/example/default.pug
new file mode 100644
index 0000000..67174cd
--- /dev/null
+++ b/slides/presentations/example/default.pug
@@ -0,0 +1,131 @@
1section
2 h1 Why understanding of basic math is imporant for computer programing
3 p September 21, 2018
4 a(href="https://twitter.com/mitjafelicijan") @mitjafelicijan
5
6
7
8section.center
9 q We Cannot Solve Our Problems With The Same Thinking We Used When We Created Them.
10 footer — Albert Einstein
11
12
13
14section
15 h2 How we usually find solutions and why this is problematic?
16
17 ul
18 li We search for code example instead of algorithms.
19 li We copy and paste and do testing on trial&error principle.
20 li We don't take enough time to properly understand problem we a re trying to solve.
21 li Brute force solutions we make are usually not optimized
22
23
24
25section
26 h2 Basic linear algebra
27
28 pre
29 code.language-css
30 | body {
31 | background: black;
32 | }
33
34 pre
35 code.language-javascript
36 | $(document).ready(function() {
37 | $('pre code').each(function(i, block) {
38 | hljs.highlightBlock(block);
39 | });
40 | });
41
42 hr
43 figcaption.right Step 1: Finding nearest point
44
45 $$ \large{ \mathbb{R}^2 ∈ \vec{a} \bar{a} } $$
46 $$ \large{ e^{i\pi} + 1 = 0 } $$
47 $$ \large{ x = {-b \pm \sqrt{b^2-4ac} \over 2a} } $$
48
49 hr
50 figcaption.right Step 2: Finding nearest point
51
52 pre
53 code.language-python
54 | fruits = ["apple", "banana", "cherry"]
55 | for x in fruits:
56 | if x == "banana":
57 | break
58 | print(x)
59
60 hr
61 figcaption.right Finding nearest point
62
63 $$ \large{ \mathbb{R}^2 ∈ \vec{a} \bar{a} } $$
64 $$ \large{ e^{i\pi} + 1 = 0 } $$
65 $$ \large{ x = {-b \pm \sqrt{b^2-4ac} \over 2a} } $$
66
67 hr
68 figcaption.right Finding nearest point
69
70 pre
71 code.language-c
72 | #include <stdio.h>
73 | int main () {
74 | for( ; ; ) {
75 | printf("This loop will run forever.\n");
76 | }
77 | return 0;
78 | }
79
80 hr
81 figcaption.right Finding nearest point
82
83 pre
84 code.language-python
85 | fruits = ["apple", "banana", "cherry"]
86 | for x in fruits:
87 | if x == "banana":
88 | break
89 | print(x)
90
91 hr
92 figcaption.right Finding nearest point
93
94 pre
95 code.language-sql
96 | SELECT `CustomerName`, `City` FROM `Customers`;
97
98 hr
99 figcaption.right Finding nearest point
100
101 pre
102 code.language-go
103 | package main
104 | import "fmt"
105 | func main() {
106 | sum := 0
107 | for i := 0; i < 10; i++ {
108 | sum += i
109 | }
110 | fmt.Println(sum)
111 | }
112
113 hr
114 figcaption.right Finding nearest point
115
116 pre
117 code.language-javascript
118 | $(document).ready(function() {
119 | $('pre code').each(function(i, block) {
120 | hljs.highlightBlock(block);
121 | });
122 | });
123
124 hr
125 figcaption.right Finding nearest point
126
127 pre
128 code.language-css
129 | body {
130 | background: black;
131 | }
diff --git a/slides/presentations/example/meta.json b/slides/presentations/example/meta.json
new file mode 100644
index 0000000..c670b2f
--- /dev/null
+++ b/slides/presentations/example/meta.json
@@ -0,0 +1,3 @@
1{
2 "title": "Example presentation"
3}
diff --git a/slides/vendor/slides.css b/slides/vendor/slides.css
new file mode 100644
index 0000000..d2e7f46
--- /dev/null
+++ b/slides/vendor/slides.css
@@ -0,0 +1,190 @@
1@charset "utf-8";
2@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&subset=latin-ext");
3
4* {
5 box-sizing: border-box;
6 background-color: transparent;
7 margin: 0;
8 padding: 0;
9 border: 0;
10 outline: none;
11 text-decoration: none;
12 position: relative;
13 box-shadow: none;
14 -moz-osx-font-smoothing: grayscale !important;
15 text-rendering: optimizeLegibility !important;
16 -webkit-font-smoothing: antialiased !important;
17}
18
19body {
20 font-family: "Roboto", sans-serif;
21 color: #222;
22 font-size: 24px;
23 margin: 0;
24 padding: 0;
25 line-height: 270%;
26 font-weight: 400;
27 color: #111;
28}
29
30.wrapper {
31 overflow: auto;
32}
33
34a {
35 color: crimson;
36 font-weight: 500;
37}
38
39table {
40 border-collapse: collapse;
41 border-spacing: 0;
42}
43
44section {
45 padding: 70px 100px;
46}
47
48nav {
49 position: fixed;
50 right: 40px;
51 bottom: 20px;
52 font-size: 80%;
53 font-weight: 500;
54}
55
56figcaption {
57 color: #888;
58 font-size: 80%;
59 margin: 0;
60 padding: 0;
61 line-height: 0;
62 font-weight: 600;
63}
64
65hr {
66 border-top: 3px solid #eee;
67 margin: 50px 0 40px 0;
68}
69
70ul,
71ol {
72 margin-left: 30px;
73}
74
75ol {
76 list-style-type: lower-roman;
77}
78
79h1,
80h2,
81h3,
82h4,
83h5,
84h6 {
85 margin: 0 0 50px 0;
86 font-weight: 700;
87 display: block;
88 color: #000;
89}
90
91h1 {
92 font-size: 300%;
93 margin-bottom: 100px;
94 line-height: 130%;
95}
96
97h2 {
98 font-size: 200%;
99}
100
101h3 {
102 font-size: 160%;
103}
104
105h4 {
106 font-size: 140%;
107}
108
109h5 {
110 font-size: 120%;
111}
112
113h6 {
114 font-size: 100%;
115}
116
117p {
118 display: block;
119 margin: 15px auto;
120 line-height: 160%;
121 color: inherit;
122}
123
124q {
125 display: inline-block;
126 font-size: 200%;
127 font-weight: 500;
128 padding: 100px 0 30px 0;
129}
130
131/* aligments */
132.left {
133 text-align: left;
134}
135
136.right {
137 text-align: right;
138}
139
140.center {
141 text-align: center;
142 margin-left: auto;
143 margin-right: auto;
144}
145
146.top {
147 vertical-align: top;
148}
149
150.middle {
151 vertical-align: middle;
152}
153
154.bottom {
155 vertical-align: bottom;
156}
157
158.full-width {
159 width: 100%;
160}
161
162/* other */
163.hide {
164 display: none;
165}
166
167.show {
168 display: block;
169}
170
171/* presentation mode */
172.wrapper:-webkit-full-screen {
173 width: 100%;
174 height: 100%;
175 background: #fff;
176 padding: 50px;
177 font-size: 28px;
178 line-height: 250%;
179}
180
181/* prism line numbers */
182pre[class*=language-] {
183 display: block;
184 background: #fff;
185 padding: 0;
186 margin-bottom: 20px;
187 font-family: 'Courier New', Courier, monospace;
188 font-size: 100%;
189 font-weight: 600;
190}
diff --git a/slides/vendor/slides.js b/slides/vendor/slides.js
new file mode 100644
index 0000000..a909352
--- /dev/null
+++ b/slides/vendor/slides.js
@@ -0,0 +1,112 @@
1window.addEventListener('load', function(evt) {
2
3 let main = document.querySelector('main');
4 let nav = document.querySelector('nav');
5 let wrapper = document.querySelector('div.wrapper');
6 let hash = window.location.hash.slice(1, window.location.hash.length);
7
8 if (hash.length == 0) {
9 main.innerHTML = '<h1>No presentation selected!</h1>';
10 } else {
11
12 fetch(`presentations/${hash}/default.pug`).then(function(response) {
13 response.text().then(function(template) {
14 if (response.status == 200) {
15 main.innerHTML = jade.render(template, {});
16 initSlideshow();
17 } else {
18 main.innerHTML = '<section><h3>Presentation does not exists!</h3></section>';
19 }
20 }).catch(function(error) {
21 console.log(error);
22 });
23 });
24
25 fetch(`presentations/${hash}/meta.json`).then(function(response) {
26 response.json().then(function(data) {
27 document.title = data.title;
28 }).catch(function(error) {
29 console.log(error);
30 });
31 });
32
33 }
34
35 function initSlideshow() {
36
37 // mathjax formulas
38 MathJax.Hub.Config({
39 //displayAlign: 'left',
40 extensions: ['tex2jax.js'],
41 jax: ['input/TeX', 'output/SVG'],
42 tex2jax: {
43 skipTags: ['script', 'noscript', 'style', 'textarea', 'code'],
44 inlineMath: [
45 ['$', '$'],
46 ["\\(", "\\)"]
47 ],
48 displayMath: [
49 ['$$', '$$'],
50 ["\\[", "\\]"]
51 ],
52 }
53 });
54 MathJax.Hub.Configured();
55
56 // syntax highlighting
57 Prism.highlightAll();
58
59 // initializes slides
60 function showSlide(slides, op) {
61 let tmpIdx = currentIdx + op;
62 if (tmpIdx >= 0 && tmpIdx < slides.length) {
63 slides.forEach(function(slide) {
64 slide.classList.add('hide');
65 });
66 slides[tmpIdx].classList.remove('hide');
67 nav.innerHTML = `${tmpIdx+1} / ${slides.length}`;
68 currentIdx = tmpIdx;
69 }
70 }
71
72 let slides = document.querySelectorAll('section');
73 let currentIdx = 0;
74 showSlide(slides, currentIdx);
75
76 document.addEventListener('keydown', function(evt) {
77 switch (evt.code) {
78 case 'ArrowRight':
79 {
80 showSlide(slides, 1);
81 break;
82 }
83 case 'ArrowLeft':
84 {
85 showSlide(slides, -1);
86 break;
87 }
88 case 'KeyF':
89 {
90 if (wrapper.requestFullscreen) {
91 wrapper.requestFullscreen();
92 } else if (wrapper.mozRequestFullScreen) {
93 wrapper.mozRequestFullScreen();
94 } else if (wrapper.webkitRequestFullscreen) {
95 wrapper.webkitRequestFullscreen();
96 } else if (wrapper.msRequestFullscreen) {
97 wrapper.msRequestFullscreen();
98 }
99 break;
100 }
101 }
102 }, false);
103
104
105 //var elem = document.getElementById("myvideo");
106 //if (elem.requestFullscreen) {
107 // elem.requestFullscreen();
108 //}
109
110 }
111
112}, false);
generated by cgit v1.2.3 (git 2.46.0) at 2026-05-01 02:53:35 +0000