292 lines
24 KiB
HTML
292 lines
24 KiB
HTML
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="author" content="Mariano Bernaldo <m.bernaldo.de.quiros@umcg.nl>"><title>: Introduction to (sane) programming</title><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" name="viewport"><link href="node_modules/reveal.js/css/reveal.css" rel="stylesheet"><link rel="stylesheet" href="css/sky.css" id="theme"><!--This CSS is generated by the Asciidoctor-Reveal.js converter to further integrate AsciiDoc's existing semantic with Reveal.js--><style type="text/css">.reveal div.right {
|
|
float: right;
|
|
}
|
|
|
|
/* callouts */
|
|
.conum[data-value] {display:inline-block;color:#fff!important;background-color:rgba(50,150,50,.8);-webkit-border-radius:100px;border-radius:100px;text-align:center;font-size:.75em;width:1.67em;height:1.67em;line-height:1.67em;font-family:"Open Sans","DejaVu Sans",sans-serif;font-style:normal;font-weight:bold}
|
|
.conum[data-value] *{color:#fff!important}
|
|
.conum[data-value]+b{display:none}
|
|
.conum[data-value]:after{content:attr(data-value)}
|
|
pre .conum[data-value]{position:relative;top:-.125em}
|
|
b.conum *{color:inherit!important}
|
|
.conum:not([data-value]):empty{display:none}</style><link rel="stylesheet" href="./fonts/fontawesome/css/all.css"><link href="css/atom-one-light.css" rel="stylesheet"><script>var link = document.createElement( 'link' );
|
|
link.rel = 'stylesheet';
|
|
link.type = 'text/css';
|
|
link.href = window.location.search.match( /print-pdf/gi ) ? "node_modules/reveal.js/css/print/pdf.css" : "node_modules/reveal.js/css/print/paper.css";
|
|
document.getElementsByTagName( 'head' )[0].appendChild( link );</script><!--[if lt IE 9]><script src="node_modules/reveal.js/lib/js/html5shiv.js"></script><![endif]--><link rel="stylesheet" href="css/presentation.css"></head><body><div class="reveal"><div class="slides"><section class="title" data-state="title"><h1></h1><h2>Introduction to (sane) programming</h2><div class="preamble"><aside class="notes"></aside></div><p class="author"><small>Mariano Bernaldo <m.bernaldo.de.quiros@umcg.nl></small></p></section>
|
|
<section><div class="ulist"><ul><li class="fragment"><p>Tools</p></li><li class="fragment"><p>Software engineering</p></li><li class="fragment"><p>Clean code</p></li><li class="fragment"><p>Working with notebooks</p></li></ul></div></section>
|
|
<section><section id="_tools"><h2>Tools</h2></section><section id="_tools_process"><h2>Tools >>>> Process</h2></section><section><div class="ulist"><ul><li class="fragment"><p>Repetitive work is boring…​</p></li><li class="fragment"><p>…​and prone to errors</p></li><li class="fragment"><p>Why should I work, when I can make my computer do it for me?</p></li></ul></div></section><section><div class="imageblock" style=""><img src="images/nap.jpg" alt="nap"></div></section><section id="_version_control_systems"><h2>Version control systems</h2><div class="ulist"><ul><li class="fragment"><p>Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later.</p></li></ul></div></section><section id="_why"><h2>Why?</h2><div class="ulist"><ul><li class="fragment"><p>Revert files back to a previous state</p></li><li class="fragment"><p>"Freeze" important versions of a document</p></li><li class="fragment"><p>Compare changes over time</p></li><li class="fragment"><p>Track progress of a project</p></li><li class="fragment"><p>See who modified something, and when</p></li></ul></div></section><section id="_modern_version_control_systems"><h2>Modern version control systems</h2><div class="ulist"><ul><li class="fragment"><p>Remote backup of files</p></li><li class="fragment"><p>Powerful tool for collaboration</p></li></ul></div></section><section id="_git"><h2>GIT</h2><div class="ulist"><ul><li class="fragment"><p>Currently the most used</p></li><li class="fragment"><p>Free and open source</p></li><li class="fragment"><p>Distributed</p></li><li class="fragment"><p>Powerful and flexible</p></li><li class="fragment"><p>Learning curve can be steep</p></li></ul></div></section><section id="_installation"><h2>Installation</h2><div class="paragraph"><p><a href="https://git-scm.com/download" class="bare">https://git-scm.com/download</a></p></div>
|
|
<div class="paragraph"><p>Package managers are heavily recommended!
|
|
anaconda, chocolatey, homebrew…​</p></div></section><section id="_but_what_is_it"><h2>but, what is it?</h2><div class="imageblock" style=""><img src="images/architecture.png" alt="architecture"></div></section><section id="_how_to_use_git"><h2>How to use GIT</h2><div class="ulist"><ul><li class="fragment"><p>register at the remote git server</p><div class="ulist"><ul><li><p><a href="https://git.webhosting.rug.nl/" class="bare">https://git.webhosting.rug.nl/</a></p></li></ul></div></li><li class="fragment"><p>create repository</p></li><li class="fragment"><p>add participants <em>ssh public keys</em></p></li><li class="fragment"><p>clone the repository in your machine</p></li></ul></div></section><section id="_workflow"><h2>workflow</h2><div class="imageblock" style=""><img src="images/git_workflow.jpg" alt="git workflow"></div></section><section><div class="admonitionblock important"><table><tr><td class="icon"><i class="fa fa-exclamation-circle" title="Important"></i></td><td class="content">You <strong>WILL</strong> regret not using version control</td></tr></table></div></section><section id="_other_tools"><h2>Other tools</h2><div class="ulist"><ul><li class="fragment"><p>Integrated Development Environments</p></li><li class="fragment"><p>Debuggers</p></li><li class="fragment"><p>Libraries</p></li><li class="fragment"><p>Reference sites: stack overflow, rosettacode, kaggle…​</p></li></ul></div></section><section><div class="imageblock" style=""><img src="images/github-stack-overflow-y-code-my-code-44625886.png" alt="github stack overflow y code my code 44625886"></div></section><section id="_scripting_languages"><h2>Scripting languages</h2></section><section id="_do_it_once_do_it_right"><h2>Do it once, do it right</h2><div class="paragraph fragment"><p>(and never do it again)</p></div>
|
|
<div class="paragraph fragment"><p><span class="image"><img src="images/geeks-and-repetitive-tasks.png" alt="geeks and repetitive tasks"></span></p></div></section><section><div class="paragraph"><p><a href="https://automatetheboringstuff.com/" class="bare">https://automatetheboringstuff.com/</a></p></div>
|
|
<div class="imageblock" style=""><img src="images/Automate_coversmall_0.png" alt="Automate coversmall 0"></div></section></section>
|
|
<section><section id="_software_engineering"><h2>Software engineering</h2><div class="imageblock" style=""><img src="images/dam.jpg" alt="dam"></div></section><section><div class="imageblock" style=""><img src="images/dam_building.jpg" alt="dam building"></div></section><section id="_the_development_cycle"><h2>the development cycle</h2><div class="imageblock" style=""><img src="images/waterfall.png" alt="waterfall"></div></section><section id="_it_didnt_work"><h2>it didn’t work…​</h2><div class="imageblock" style=""><img src="images/building_software.png" alt="building software"></div></section><section><div class="ulist"><ul><li class="fragment"><p>Software is complex!</p></li><li class="fragment"><p>Requirements are often fuzzy</p></li><li class="fragment"><p>Cost of changes is low</p></li><li class="fragment"><p>Every project is a new project*</p></li></ul></div></section><section id="_the_agile_manifesto_2001"><h2>The agile manifesto (2001)</h2><div class="ulist"><ul><li><p>adaptive planning</p></li><li><p>evolutionary development</p></li><li><p>early delivery</p></li><li><p>continuous improvement</p></li><li><p>flexible responses to change.</p></li></ul></div>
|
|
<div class="paragraph"><p><a href="http://agilemanifesto.org/" class="bare">http://agilemanifesto.org/</a></p></div></section><section><div class="imageblock" style=""><img src="images/Waterfall-Vs-Agile.png" alt="Waterfall Vs Agile"></div></section><section id="_advantages"><h2>advantages</h2><div class="imageblock" style=""><img src="images/advantages.jpg" alt="advantages"></div></section><section id="_industry_is_learning"><h2>industry is learning</h2><div class="imageblock fragment" style=""><img src="images/spaceX.png" alt="spaceX"></div></section><section id="_what_does_this_mean_for_you"><h2>what does this mean for you?</h2><div class="ulist"><ul><li class="fragment"><p>Get a working prototype ASAP</p></li><li class="fragment"><p>Keep adding features and improving from there</p></li><li class="fragment"><p>Communicate! if possible, ask for input every (few) iterations</p></li></ul></div></section><section id="_fast_and_dirty"><h2>Fast and dirty?</h2><div class="imageblock fragment" style=""><img src="images/1_SS50ADXE37izs9i4-myfZg.png" alt="1 SS50ADXE37izs9i4 myfZg"></div></section></section>
|
|
<section><section id="_clean_code"><h2>Clean code</h2></section><section><div class="imageblock" style=""><img src="images/clean_code.jpg" alt="clean code"></div></section><section id="_what_is_good_code"><h2>what is good code?</h2><div class="imageblock fragment" style=""><img src="images/wtfm.jpg" alt="wtfm"></div></section><section id="_good_code"><h2>good code</h2><div class="ulist"><ul><li class="fragment"><p>It works</p></li><li class="fragment"><p>Is easy to understand</p></li><li class="fragment"><p>Is easy to change</p></li></ul></div></section><section id="_bad_code_code_smells"><h2>Bad code: code smells</h2><div class="ulist"><ul><li class="fragment"><p>Duplicated code</p></li><li class="fragment"><p>Unnecessary complexity</p></li><li class="fragment"><p>A single change needs to be applied in many places at the same time.</p></li><li class="fragment"><p>Methods do too many things</p></li><li class="fragment"><p>Too many nested if / loops</p></li><li class="fragment"><p>Too many parameters</p></li><li class="fragment"><p>…​</p></li></ul></div></section><section id="_how_to_improve_code_quality"><h2>How to improve code quality?</h2><div class="quoteblock fragment"><blockquote>Refactoring is the process of changing a software system in such a way that it does not alter the function of the code yet improves its internal structure.</blockquote><div class="attribution"><cite>Refactoring: Improving the Design of Existing Code (1999)</cite><br>— Martin Fowler</div></div></section><section id="_kiss"><h2>KISS</h2><div class="paragraph fragment"><p>Keep it Simple, Stupid</p></div></section><section id="_avoid_code_duplication"><h2>Avoid code duplication</h2><div class="imageblock" style=""><img src="images/dont-repeat-yourself.jpg" alt="dont repeat yourself"></div></section><section><div class="ulist"><ul><li><p>Probably the most common and worst mistake in programming</p></li><li><p>Avoid at all cost!</p></li></ul></div></section><section id="_refactoring_code_duplication"><h2>refactoring code duplication</h2><pre class="highlight listingblock fragment source col2"><code data-noescape>def f1():
|
|
# read file
|
|
...
|
|
# use complex method to calculate a
|
|
|
|
def f2():
|
|
# read file
|
|
...
|
|
# use complex method to calculate b</code></pre>
|
|
<pre class="highlight listingblock fragment source col2"><code data-noescape>def read_file()
|
|
def complex_method()
|
|
|
|
def f1():
|
|
read_file()
|
|
complex_method(a)
|
|
|
|
def f2():
|
|
read_file()
|
|
complex_method(b)</code></pre></section><section><pre class="highlight listingblock source col2"><code data-noescape>def f1():
|
|
# read file
|
|
...
|
|
# calculate a
|
|
|
|
def f2():
|
|
# read file
|
|
...
|
|
# calculate b
|
|
|
|
def higher_function()
|
|
if (condition)
|
|
f1()
|
|
else
|
|
f2()</code></pre>
|
|
<pre class="highlight listingblock fragment source col2"><code data-noescape>def read_file()
|
|
def complex_method()
|
|
|
|
def higher_function()
|
|
read_file()
|
|
if (condition)
|
|
complex_method(a)
|
|
else
|
|
complex_method(b)</code></pre></section><section id="_a_special_case"><h2>A special case</h2><pre class="highlight listingblock fragment source col2"><code data-noescape>def f1():
|
|
# same code
|
|
...
|
|
# method 1
|
|
...
|
|
# same code
|
|
|
|
def f2():
|
|
# same code
|
|
...
|
|
# method 2
|
|
...
|
|
# same code</code></pre>
|
|
<pre class="highlight listingblock fragment source col2"><code data-noescape>def method_1():
|
|
...
|
|
def method_2():
|
|
...
|
|
|
|
#functions are just another type of objects!
|
|
def f(in_method):
|
|
# same code
|
|
...
|
|
in_method()
|
|
...
|
|
# same code
|
|
|
|
def higher_function():
|
|
f(method_1)
|
|
f(method_2)</code></pre></section><section id="_each_function_should_do_one_thing"><h2>Each function should do one thing</h2><div class="paragraph fragment"><p>“The first rule of functions is that they should be small. The second rule of functions is that they should be smaller than that”</p></div></section><section id="_size_is_not_everything"><h2>size is not everything!</h2><pre class="highlight listingblock source col2"><code data-noescape>def function_1():
|
|
# code here
|
|
return function_2(results_1)
|
|
|
|
def function_2(input_2):
|
|
# code here
|
|
return function_3(results_2)
|
|
|
|
def function_3(input_3):
|
|
# code here
|
|
return function_4(results_3)
|
|
|
|
def function_4(input_4):
|
|
# code here
|
|
return results_4</code></pre>
|
|
<pre class="highlight listingblock fragment source col2"><code data-noescape>def main_function():
|
|
results_1 = function_1()
|
|
results_2 = function_2(results_1)
|
|
results_3 = function_3(results_2)
|
|
return function_4(results_3)</code></pre></section><section id="_use_comments"><h2>Use comments</h2><div class="paragraph fragment"><p><strong>Proper</strong> use of commenting can</p></div>
|
|
<div class="ulist"><ul><li class="fragment"><p>make code maintenance much easier</p></li><li class="fragment"><p>help finding bugs faster</p></li><li class="fragment"><p>make your code more readable to other people</p></li><li class="fragment"><p>make your code more readable to yourself (in six months)</p></li></ul></div></section><section id="_dont_over_comment_your_code"><h2>Don’t over-comment your code</h2><div class="ulist"><ul><li class="fragment"><p>comments are a necessary evil</p></li><li class="fragment"><p>comments cover up naming failures</p></li><li class="fragment"><p>comments must evolve with code</p></li></ul></div></section><section id="_when_and_how_to_write_comments"><h2>when and how to write comments</h2><div class="ulist"><ul><li class="fragment"><p><strong>Always try to explain yourself in code.</strong></p></li><li class="fragment"><p>Don’t be redundant.</p></li><li class="fragment"><p>Use them in complex expressions.</p></li><li class="fragment"><p>Use as explanation of intent.</p></li><li class="fragment"><p>Use as clarification of code.</p></li><li class="fragment"><p>Use as warning of consequences.</p></li><li class="fragment"><p>Don’t comment out code: remove it (and use version control)</p></li></ul></div></section><section id="_naming_conventions"><h2>Naming Conventions</h2><div class="ulist"><ul><li class="fragment"><p>Use names that are easy to understand.</p></li><li class="fragment"><p>Format them consistently.</p></li><li class="fragment"><p>Names must help understanding what a piece of code does.</p></li><li class="fragment"><p>Avoid single variable names.</p></li></ul></div></section><section id="_example_replacing_comments_with_good_naming"><h2>example: replacing comments with good naming</h2><pre class="highlight listingblock fragment source col2"><code data-noescape># This function calculates prices, compares to sales
|
|
# promotions, checks if prices are valid,
|
|
# then send an email of promotion to user
|
|
def doSomeThings():
|
|
|
|
# Calculate prices
|
|
...
|
|
...
|
|
# Compare prices with sales promotions
|
|
...
|
|
...
|
|
# Check if calculated prices are valid
|
|
...
|
|
...
|
|
# Send promotions to users
|
|
...
|
|
...</code></pre>
|
|
<pre class="highlight listingblock fragment source col2"><code data-noescape>def sendPromotionEmailToUsers():
|
|
calculatePrices();
|
|
comparePricesWithSalesPromotions();
|
|
checkIfCalculatedPricesAreValid();
|
|
sendPromotionEmail();</code></pre></section><section id="_keep_a_consistent_format"><h2>keep a consistent format</h2><div class="openblock fragment col2"><div class="content"><div class="ulist"><ul><li class="fragment"><p>useCamelCase</p></li><li class="fragment"><p>OrPascalCase</p></li><li class="fragment"><p>or_snake_case</p></li><li class="fragment"><p>or-kebab-case</p></li><li class="fragment"><p>But not all of them together</p></li></ul></div></div></div>
|
|
<pre class="highlight listingblock fragment source col2"><code data-noescape>def my_function():
|
|
print("Hello in a function")
|
|
|
|
def myFunction():
|
|
print("Ey, I'm a different function")
|
|
|
|
def my-Function():
|
|
print("I'm yet another function, good luck choosing the right one")
|
|
|
|
def my_FunctionIs-A-Terrible_mess():
|
|
print("Imagine how things turn when you have several thousand lines of code...")</code></pre></section><section><div class="paragraph"><p>Some languages (ex. python) have a "standard" <span class="jep"><a href="https://www.python.org/dev/peps/pep-0008">pep 08</a></span> format, check it out!</p></div></section></section>
|
|
<section><section id="_working_with_notebooks"><h2>Working with notebooks</h2></section><section><div class="paragraph"><p>Notebooks are a powerful tool for scientific programming</p></div>
|
|
<div class="ulist"><ul><li><p>Lets you keep a detailed record of your work</p></li><li><p>Everything is in one place</p></li><li><p>Allows interactive code and data exploration</p></li><li><p>Easy to share</p></li></ul></div></section><section id="_how_to_work_with_notebooks"><h2>how to work with notebooks?</h2><div class="ulist"><ul><li class="fragment"><p><strong>Plot everything</strong></p></li><li class="fragment"><p>Write detailed explanations of what you do, and why</p><div class="ulist"><ul><li><p>Unless you have a very specific kind of reader, explain also "well known" methods</p></li><li><p>Btw, learn Markdown</p></li></ul></div></li><li class="fragment"><p>Keep your notebooks reasonably short</p></li><li class="fragment"><p>Create different notebooks for different aims</p></li><li class="fragment"><p>Refactoring usually means taking the code and putting it auxiliary files</p></li></ul></div></section><section id="_guided_example_machine_learning_workflow"><h2>Guided example: Machine learning workflow</h2><div class="imageblock" style=""><img src="images/xl23h24nc.jpg" alt="xl23h24nc"></div>
|
|
<script src="./live.js"></script>
|
|
|
|
<!-- hide "verbatim" sections if URL contains "terse"-Keyword -->
|
|
<script>
|
|
if (!window.location.search.match(/bonus/gi)) {
|
|
var sections = document.getElementsByTagName('section');
|
|
for (var i = sections.length-1; i > -1; --i) {
|
|
console.log(sections[i].classList);
|
|
if (sections[i].classList.contains("bonuscontent")) {
|
|
sections[i].remove();
|
|
}
|
|
}
|
|
}
|
|
</script></section></section></div></div><script src="node_modules/reveal.js/lib/js/head.min.js"></script><script src="node_modules/reveal.js/js/reveal.js"></script><script>Array.prototype.slice.call(document.querySelectorAll('.slides section')).forEach(function(slide) {
|
|
if (slide.getAttribute('data-background-color')) return;
|
|
// user needs to explicitly say he wants CSS color to override otherwise we might break custom css or theme (#226)
|
|
if (!(slide.classList.contains('canvas') || slide.classList.contains('background'))) return;
|
|
var bgColor = getComputedStyle(slide).backgroundColor;
|
|
if (bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent') {
|
|
slide.setAttribute('data-background-color', bgColor);
|
|
slide.style.backgroundColor = 'transparent';
|
|
}
|
|
})
|
|
|
|
// See https://github.com/hakimel/reveal.js#configuration for a full list of configuration options
|
|
Reveal.initialize({
|
|
// Display presentation control arrows
|
|
controls: true,
|
|
// Help the user learn the controls by providing hints, for example by
|
|
// bouncing the down arrow when they first encounter a vertical slide
|
|
controlsTutorial: true,
|
|
// Determines where controls appear, "edges" or "bottom-right"
|
|
controlsLayout: 'edges',
|
|
// Visibility rule for backwards navigation arrows; "faded", "hidden"
|
|
// or "visible"
|
|
controlsBackArrows: 'faded',
|
|
// Display a presentation progress bar
|
|
progress: true,
|
|
// Display the page number of the current slide
|
|
slideNumber: 'c/t',
|
|
// Control which views the slide number displays on
|
|
showSlideNumber: 'speaker',
|
|
// Push each slide change to the browser history
|
|
history: true,
|
|
// Enable keyboard shortcuts for navigation
|
|
keyboard: true,
|
|
// Enable the slide overview mode
|
|
overview: true,
|
|
// Vertical centering of slides
|
|
center: true,
|
|
// Enables touch navigation on devices with touch input
|
|
touch: true,
|
|
// Loop the presentation
|
|
loop: false,
|
|
// Change the presentation direction to be RTL
|
|
rtl: false,
|
|
// Randomizes the order of slides each time the presentation loads
|
|
shuffle: false,
|
|
// Turns fragments on and off globally
|
|
fragments: true,
|
|
// Flags whether to include the current fragment in the URL,
|
|
// so that reloading brings you to the same fragment position
|
|
fragmentInURL: true,
|
|
// Flags if the presentation is running in an embedded mode,
|
|
// i.e. contained within a limited portion of the screen
|
|
embedded: false,
|
|
// Flags if we should show a help overlay when the questionmark
|
|
// key is pressed
|
|
help: 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: true,
|
|
// 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,
|
|
// Specify the average time in seconds that you think you will spend
|
|
// presenting each slide. This is used to show a pacing timer in the
|
|
// speaker view
|
|
defaultTiming: 42,
|
|
// Enable slide navigation via mouse wheel
|
|
mouseWheel: false,
|
|
// Hides the address bar on mobile devices
|
|
hideAddressBar: true,
|
|
// Opens links in an iframe preview overlay
|
|
// Add `data-preview-link` and `data-preview-link="false"` to customise each link
|
|
// individually
|
|
previewLinks: false,
|
|
// Transition style (e.g., none, fade, slide, convex, concave, zoom)
|
|
transition: 'slide',
|
|
// Transition speed (e.g., default, fast, slow)
|
|
transitionSpeed: 'default',
|
|
// Transition style for full page slide backgrounds (e.g., none, fade, slide, convex, concave, zoom)
|
|
backgroundTransition: 'fade',
|
|
// Number of slides away from the current that are visible
|
|
viewDistance: 5,
|
|
// Parallax background image (e.g., "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'")
|
|
parallaxBackgroundImage: 'images/backgrounds/Abstract.jpg',
|
|
// Parallax background size in CSS syntax (e.g., "2100px 900px")
|
|
parallaxBackgroundSize: '1600px 1600px',
|
|
// 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,
|
|
// The display mode that will be used to show slides
|
|
display: 'block',
|
|
|
|
// The "normal" size of the presentation, aspect ratio will be preserved
|
|
// when the presentation is scaled to fit different resolutions. Can be
|
|
// specified using percentage units.
|
|
width: 1408,
|
|
height: 792,
|
|
|
|
// Factor of the display size that should remain empty around the content
|
|
margin: 0.15,
|
|
|
|
// Bounds for smallest/largest possible scale to apply to content
|
|
minScale: 0.2,
|
|
maxScale: 1.5,
|
|
|
|
// Optional libraries used to extend on reveal.js
|
|
dependencies: [
|
|
{ src: 'node_modules/reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
|
|
{ src: 'node_modules/reveal.js/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
|
|
{ src: 'node_modules/reveal.js/plugin/zoom-js/zoom.js', async: true },
|
|
{ src: 'node_modules/reveal.js/plugin/notes/notes.js', async: true },
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
});</script></body></html> |