From 6a98c802fd7400510b2469ccb9315f5d31c7155a Mon Sep 17 00:00:00 2001 From: Mitja Felicijan Date: Sun, 23 Sep 2018 22:43:26 +0200 Subject: content update --- slides/.jsbeautifyrc | 51 +++++++++ slides/.jshintignore | 9 ++ slides/.jshintrc | 9 ++ slides/example/index.html | 84 -------------- slides/example/slides.md | 94 --------------- slides/index.html | 39 +++++++ slides/math/index.html | 114 ------------------- slides/math/slides.md | 109 ------------------ slides/presentations/example/default.pug | 131 +++++++++++++++++++++ slides/presentations/example/meta.json | 3 + slides/vendor/slides.css | 190 +++++++++++++++++++++++++++++++ slides/vendor/slides.js | 112 ++++++++++++++++++ 12 files changed, 544 insertions(+), 401 deletions(-) create mode 100644 slides/.jsbeautifyrc create mode 100644 slides/.jshintignore create mode 100644 slides/.jshintrc delete mode 100644 slides/example/index.html delete mode 100644 slides/example/slides.md create mode 100644 slides/index.html delete mode 100644 slides/math/index.html delete mode 100644 slides/math/slides.md create mode 100644 slides/presentations/example/default.pug create mode 100644 slides/presentations/example/meta.json create mode 100644 slides/vendor/slides.css create mode 100644 slides/vendor/slides.js (limited to 'slides') diff --git a/slides/.jsbeautifyrc b/slides/.jsbeautifyrc new file mode 100644 index 0000000..5d90dea --- /dev/null +++ b/slides/.jsbeautifyrc @@ -0,0 +1,51 @@ +{ + "html": { + "allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg", "dust", "njk"], + "brace_style": "collapse", + "end_with_newline": true, + "indent_char": " ", + "indent_handlebars": true, + "indent_inner_html": true, + "indent_scripts": "keep", + "indent_size": 4, + "indent_with_tabs": true, + "max_preserve_newlines": 10, + "preserve_newlines": true, + "unformatted": ["a", "span", "img", "code", "pre", "sub", "sup", "em", "strong", "b", "i", "u", "strike", "big", "small", "pre", "h1", "h2", "h3", "h4", "h5", "h6", "hr"], + "wrap_line_length": 0 + }, + "css": { + "allowed_file_extensions": ["css", "scss", "sass", "less"], + "end_with_newline": true, + "indent_char": " ", + "indent_size": 4, + "indent_with_tabs": true, + "newline_between_rules": true, + "selector_separator": " ", + "selector_separator_newline": true, + "preserve_newlines": false, + "max_preserve_newlines": 10 + }, + "js": { + "allowed_file_extensions": ["js", "json", "jshintrc", "jsbeautifyrc"], + "brace_style": "collapse", + "break_chained_methods": false, + "e4x": true, + "end_with_newline": true, + "indent_char": " ", + "indent_level": 0, + "indent_size": 4, + "indent_with_tabs": true, + "jslint_happy": false, + "keep_array_indentation": true, + "keep_function_indentation": true, + "max_preserve_newlines": 0, + "preserve_newlines": true, + "space_after_anon_function": false, + "space_before_conditional": true, + "space_in_empty_paren": false, + "space_in_paren": false, + "unescape_strings": false, + "wrap_line_length": 0 + } +} diff --git a/slides/.jshintignore b/slides/.jshintignore new file mode 100644 index 0000000..4d662aa --- /dev/null +++ b/slides/.jshintignore @@ -0,0 +1,9 @@ +node_modules +bower_components +lib/external +vendor +help +steal +funcunit +**/*.min.js +**/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 @@ +{ + "strict": false, + "esversion": 6, + "curly": true, + "noempty": true, + "trailing": true, + "white": false, + "evil": true +} 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 @@ - - - - - - Title - - - - - - - - - - - - - - - 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 @@ -layout: true ---- - -## Test online slideshow - -Couple of example slides to test - -![alt text](https://media.giphy.com/media/i9qmSfLuXXcXK/giphy.gif) - - ---- - -## Math - -$$ \large{ \mathbb{R}^2 ∈ \vec{a} \bar{a} } $$ -$$ \large{ e^{i\pi} + 1 = 0 } $$ -$$ \large{ x = {-b \pm \sqrt{b^2-4ac} \over 2a} } $$ - - -$$ e^{i\pi} + 1 = 0 $$ - -$$ \large{ \sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6} } $$ - -$$ \large{ ABCDEFGHIJKLMNOPQRSTUVXYZ } $$ - ---- - -## Image - -![alt text](https://media.giphy.com/media/4d0nGeMweD49q/giphy.gif?style=md-center) - - ---- - -## Lists - -- Couple of example slides to test -- Couple of example slides to test -- Couple of example slides to test - ---- - -## JSON example - -Some code examples. - -```json -{ - "short_name": "MF", - "name": "Mitja Felicijan", - "author": "Mitja Felicijan", - "icons": [{ - "src": "/assets/avatar.png", - "sizes": "512x512", - "type": "image/png" - }], - "start_url": "/", - "display": "fullscreen", - "theme_color": "#000000", - "background_color": "#000000" -} -``` - ---- - -## Python example - -Some code examples. - -```python -@app.route("{}".format(args["path"]), method=["GET"]) -def route_default(): - with open("static/index.html", "r") as fp: - data = str(fp.read()) - data = data.replace("$$path$$", args["path"]) - data = data.replace("$$cache$$", CACHE_VER) - data = data.replace("$$db$$", str(args["redis_database"])) - return data -``` - ---- - -## Tables - -| URL | Num of requests | Transfered | Finish | DOMContentLoaded | Load | -| ------------- | --------------- | ---------- | ------- | ---------------- | ------ | -| cnn.com | 134 | 3.22 MB | 4.7 s | 575 ms | 3.60 s | -| youtube.com | 61 | 1.8 MB | 5.13 s | 1.78 s | 1.97 | -| wikipedia.com | 11 | 64.5 KB | 642 ms | 531 ms | 573 ms | -| reddit.com | 177 | 12.9 MB | 7.65 MB | 2.03 s | 3.74 s | -| amamzon.com | 278 | 8.0 MB | 5.20 s | 1.15s | 2.99 s | -| twitter.com | 2'2 | 5.1 MB | 23.48 s | 3.20 s | 4.55 s | -| twitch.tv | 177 | 4.4 MB | 5.08 s | 579 ms | 798 ms | -| 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 @@ + + + + + + + + + + + + +

+ +

+ + + + + + + + + + + + + + + + + + + + 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 @@ - - - - - - Title - - - - - - - - - - - - - - - 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 @@ -layout: true ---- - -# Why understanding of basic math is imporant for computer programing - -September 21, 2018 - -[@mitjafelicijan](https://twitter.com/mitjafelicijan) - ---- - -### "We Cannot Solve Our Problems With The Same Thinking We Used When We Created Them." - -#### — Albert Einstein - ---- - -## How we usually find solutions and why this is problematic? - -- We search for code example instead of algorithms. -- We copy and paste and do testing on trial&error principle. -- We don't take enough time to properly understand problem we a re trying to solve. -- Brute force solutions we make are usually not optimized - ---- - -## Math is horrible and I don't need it! - -- Well, YES :) Math can be horrible but also beautiful to implement. -- Disregarding math is disregarding thousands of years of knowledge. -- Math is not only for scientists. -- Good algorithm is as optimized as your code is when you are done with it. -- Math is the search for patterns and anti-patterns in natural universe and making these findings into tools accessible to ordinary people. - ---- - -## Coordinate Geometry - -A 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. - -![image](https://www.onlinemathlearning.com/image-files/xcoordinate-geometry-formula.png.pagespeed.ic.cqp4Ryqey8.png) - ---- - -## Distance formula - -![](https://s3.amazonaws.com/ck12bg.ck12.org/curriculum/108383/thumb_540_50.jpg) - ---- - -## Linear Algebra - -Linear algebra is the branch of mathematics concerning linear equations such as. linear functions such as. and their representations through matrices and vector spaces. - -![image](https://thumbs.gfycat.com/VeneratedSpitefulFrilledlizard-size_restricted.gif) - -- [Graphical Linear Algebra](https://graphicallinearalgebra.net/) -- [Linear Relations](https://graphicallinearalgebra.net/2015/12/26/27-linear-relations/) -- [Diagrams in charts](https://graphicallinearalgebra.files.wordpress.com/2015/11/ih.gif) - ---- - -## Vectors and spaces - -- Space vector also called linear vector -- Vector = magnitude + direction -- Example: velocity vector (5kmh/west) - -![](https://i.ytimg.com/vi/0oSe9vx-W54/maxresdefault.jpg?img350) - ---- - -## Shortest path problem - -In 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. - -Shortest path (A, C, E, D, F) between vertices A and F in the weighted directed graph - -![](https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Shortest_path_with_direct_weights.svg/250px-Shortest_path_with_direct_weights.svg.png) -![](http://new.gctm-resources.org/migrating/658-00.png) - -[Wiki: Shortest path problem](https://en.wikipedia.org/wiki/Shortest_path_problem) - ---- - -## Dijkstra's shortest path algorithm - -![](https://upload.wikimedia.org/wikipedia/commons/5/57/Dijkstra_Animation.gif) -![](https://upload.wikimedia.org/wikipedia/commons/2/23/Dijkstras_progress_animation.gif) - -![](https://cdn-images-1.medium.com/max/735/0*OiVoLu09VJp-oHwJ.png?img300) -![](https://www.mathworks.com/matlabcentral/mlc-downloads/downloads/submissions/20025/versions/3/screenshot.jpg?img300) - ---- - -## HTML5 Canvas - -- [HTML5 Canvas : Matrix Transforms](https://www.w3resource.com/html5-canvas/html5-canvas-matrix-transforms.php) -- [Visualizing linear algebra using the html5 -canvas: matrices and quaternions](http://archives.math.utk.edu/ICTCM/VOL28/A007/paper.pdf) -- [Matrix rain animation using HTML5 canvas and javascript](https://codepen.io/riazxrazor/pen/Gjomdp) -- [Convoluton matrix](https://www.phpied.com/canvas-pixels-2-convolution-matrix/) - ---- - -## Going further - -- [Basic Linear Algebra for Deep Learning](https://towardsdatascience.com/linear-algebra-for-deep-learning-f21d7e7d7f23) -- [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 @@ +section + h1 Why understanding of basic math is imporant for computer programing + p September 21, 2018 + a(href="https://twitter.com/mitjafelicijan") @mitjafelicijan + + + +section.center + q We Cannot Solve Our Problems With The Same Thinking We Used When We Created Them. + footer — Albert Einstein + + + +section + h2 How we usually find solutions and why this is problematic? + + ul + li We search for code example instead of algorithms. + li We copy and paste and do testing on trial&error principle. + li We don't take enough time to properly understand problem we a re trying to solve. + li Brute force solutions we make are usually not optimized + + + +section + h2 Basic linear algebra + + pre + code.language-css + | body { + | background: black; + | } + + pre + code.language-javascript + | $(document).ready(function() { + | $('pre code').each(function(i, block) { + | hljs.highlightBlock(block); + | }); + | }); + + hr + figcaption.right Step 1: Finding nearest point + + $$ \large{ \mathbb{R}^2 ∈ \vec{a} \bar{a} } $$ + $$ \large{ e^{i\pi} + 1 = 0 } $$ + $$ \large{ x = {-b \pm \sqrt{b^2-4ac} \over 2a} } $$ + + hr + figcaption.right Step 2: Finding nearest point + + pre + code.language-python + | fruits = ["apple", "banana", "cherry"] + | for x in fruits: + | if x == "banana": + | break + | print(x) + + hr + figcaption.right Finding nearest point + + $$ \large{ \mathbb{R}^2 ∈ \vec{a} \bar{a} } $$ + $$ \large{ e^{i\pi} + 1 = 0 } $$ + $$ \large{ x = {-b \pm \sqrt{b^2-4ac} \over 2a} } $$ + + hr + figcaption.right Finding nearest point + + pre + code.language-c + | #include + | int main () { + | for( ; ; ) { + | printf("This loop will run forever.\n"); + | } + | return 0; + | } + + hr + figcaption.right Finding nearest point + + pre + code.language-python + | fruits = ["apple", "banana", "cherry"] + | for x in fruits: + | if x == "banana": + | break + | print(x) + + hr + figcaption.right Finding nearest point + + pre + code.language-sql + | SELECT `CustomerName`, `City` FROM `Customers`; + + hr + figcaption.right Finding nearest point + + pre + code.language-go + | package main + | import "fmt" + | func main() { + | sum := 0 + | for i := 0; i < 10; i++ { + | sum += i + | } + | fmt.Println(sum) + | } + + hr + figcaption.right Finding nearest point + + pre + code.language-javascript + | $(document).ready(function() { + | $('pre code').each(function(i, block) { + | hljs.highlightBlock(block); + | }); + | }); + + hr + figcaption.right Finding nearest point + + pre + code.language-css + | body { + | background: black; + | } 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 @@ +{ + "title": "Example presentation" +} 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 @@ +@charset "utf-8"; +@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&subset=latin-ext"); + +* { + box-sizing: border-box; + background-color: transparent; + margin: 0; + padding: 0; + border: 0; + outline: none; + text-decoration: none; + position: relative; + box-shadow: none; + -moz-osx-font-smoothing: grayscale !important; + text-rendering: optimizeLegibility !important; + -webkit-font-smoothing: antialiased !important; +} + +body { + font-family: "Roboto", sans-serif; + color: #222; + font-size: 24px; + margin: 0; + padding: 0; + line-height: 270%; + font-weight: 400; + color: #111; +} + +.wrapper { + overflow: auto; +} + +a { + color: crimson; + font-weight: 500; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +section { + padding: 70px 100px; +} + +nav { + position: fixed; + right: 40px; + bottom: 20px; + font-size: 80%; + font-weight: 500; +} + +figcaption { + color: #888; + font-size: 80%; + margin: 0; + padding: 0; + line-height: 0; + font-weight: 600; +} + +hr { + border-top: 3px solid #eee; + margin: 50px 0 40px 0; +} + +ul, +ol { + margin-left: 30px; +} + +ol { + list-style-type: lower-roman; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0 0 50px 0; + font-weight: 700; + display: block; + color: #000; +} + +h1 { + font-size: 300%; + margin-bottom: 100px; + line-height: 130%; +} + +h2 { + font-size: 200%; +} + +h3 { + font-size: 160%; +} + +h4 { + font-size: 140%; +} + +h5 { + font-size: 120%; +} + +h6 { + font-size: 100%; +} + +p { + display: block; + margin: 15px auto; + line-height: 160%; + color: inherit; +} + +q { + display: inline-block; + font-size: 200%; + font-weight: 500; + padding: 100px 0 30px 0; +} + +/* aligments */ +.left { + text-align: left; +} + +.right { + text-align: right; +} + +.center { + text-align: center; + margin-left: auto; + margin-right: auto; +} + +.top { + vertical-align: top; +} + +.middle { + vertical-align: middle; +} + +.bottom { + vertical-align: bottom; +} + +.full-width { + width: 100%; +} + +/* other */ +.hide { + display: none; +} + +.show { + display: block; +} + +/* presentation mode */ +.wrapper:-webkit-full-screen { + width: 100%; + height: 100%; + background: #fff; + padding: 50px; + font-size: 28px; + line-height: 250%; +} + +/* prism line numbers */ +pre[class*=language-] { + display: block; + background: #fff; + padding: 0; + margin-bottom: 20px; + font-family: 'Courier New', Courier, monospace; + font-size: 100%; + font-weight: 600; +} 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 @@ +window.addEventListener('load', function(evt) { + + let main = document.querySelector('main'); + let nav = document.querySelector('nav'); + let wrapper = document.querySelector('div.wrapper'); + let hash = window.location.hash.slice(1, window.location.hash.length); + + if (hash.length == 0) { + main.innerHTML = '

No presentation selected!

'; + } else { + + fetch(`presentations/${hash}/default.pug`).then(function(response) { + response.text().then(function(template) { + if (response.status == 200) { + main.innerHTML = jade.render(template, {}); + initSlideshow(); + } else { + main.innerHTML = '

Presentation does not exists!

'; + } + }).catch(function(error) { + console.log(error); + }); + }); + + fetch(`presentations/${hash}/meta.json`).then(function(response) { + response.json().then(function(data) { + document.title = data.title; + }).catch(function(error) { + console.log(error); + }); + }); + + } + + function initSlideshow() { + + // mathjax formulas + MathJax.Hub.Config({ + //displayAlign: 'left', + extensions: ['tex2jax.js'], + jax: ['input/TeX', 'output/SVG'], + tex2jax: { + skipTags: ['script', 'noscript', 'style', 'textarea', 'code'], + inlineMath: [ + ['$', '$'], + ["\$", "\$"] + ], + displayMath: [ + ['$$', '$$'], + ["\\[", "\\]"] + ], + } + }); + MathJax.Hub.Configured(); + + // syntax highlighting + Prism.highlightAll(); + + // initializes slides + function showSlide(slides, op) { + let tmpIdx = currentIdx + op; + if (tmpIdx >= 0 && tmpIdx < slides.length) { + slides.forEach(function(slide) { + slide.classList.add('hide'); + }); + slides[tmpIdx].classList.remove('hide'); + nav.innerHTML = `${tmpIdx+1} / ${slides.length}`; + currentIdx = tmpIdx; + } + } + + let slides = document.querySelectorAll('section'); + let currentIdx = 0; + showSlide(slides, currentIdx); + + document.addEventListener('keydown', function(evt) { + switch (evt.code) { + case 'ArrowRight': + { + showSlide(slides, 1); + break; + } + case 'ArrowLeft': + { + showSlide(slides, -1); + break; + } + case 'KeyF': + { + if (wrapper.requestFullscreen) { + wrapper.requestFullscreen(); + } else if (wrapper.mozRequestFullScreen) { + wrapper.mozRequestFullScreen(); + } else if (wrapper.webkitRequestFullscreen) { + wrapper.webkitRequestFullscreen(); + } else if (wrapper.msRequestFullscreen) { + wrapper.msRequestFullscreen(); + } + break; + } + } + }, false); + + + //var elem = document.getElementById("myvideo"); + //if (elem.requestFullscreen) { + // elem.requestFullscreen(); + //} + + } + +}, false); -- cgit v1.2.3