-
Notifications
You must be signed in to change notification settings - Fork 0
/
slides.html
359 lines (342 loc) · 21.4 KB
/
slides.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="pandoc">
<meta name="author" content="Igor Khorlo">
<title>Documentation as a Code</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="reveal.js/css/reveal.css">
<style type="text/css">
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
</style>
<style type="text/css">
a.sourceLine { display: inline-block; line-height: 1.25; }
a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
a.sourceLine:empty { height: 1.2em; position: absolute; }
.sourceCode { overflow: visible; }
code.sourceCode { white-space: pre; position: relative; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
code.sourceCode { white-space: pre-wrap; }
a.sourceLine { text-indent: -1em; padding-left: 1em; }
}
pre.numberSource a.sourceLine
{ position: relative; }
pre.numberSource a.sourceLine:empty
{ position: absolute; }
pre.numberSource a.sourceLine::before
{ content: attr(data-line-number);
position: absolute; left: -5em; text-align: right; vertical-align: baseline;
border: none; pointer-events: all;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
color: #aaaaaa;
}
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
div.sourceCode
{ }
@media screen {
a.sourceLine::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>
<link rel="stylesheet" href="reveal.js/css/theme/white.css" id="theme">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'reveal.js/css/print/pdf.css' : 'reveal.js/css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="reveal.js/lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<div class="slides">
<section id="title-slide">
<h1 class="title">Documentation <br> as a Code</h1>
<p class="author">Igor Khorlo <img data-src="assets/logo.svg" style="background:none; border:none; box-shadow:none; vertical-align: middle;" width="200" /></p>
<p class="date">June 28, 2018 <br> PhUSE SDE <br>📍 Basel, Switzerland</p>
</section>
<section><section id="the-problem" class="title-slide slide level1"><h1>The problem</h1></section><section id="why-do-we-need-documentation" class="slide level2">
<h2>Why do we need documentation?</h2>
<ul>
<li class="fragment">Standardize software usage</li>
<li class="fragment">Help users to get started</li>
<li class="fragment">Documents processes</li>
</ul>
</section><section id="how-do-you-manage-documentation" class="slide level2">
<h2>How do you manage documentation?</h2>
<ul>
<li class="fragment">Do you use Microsoft Word?</li>
<li class="fragment">CMS?</li>
<li class="fragment">Sharepoint?</li>
</ul>
</section><section id="section" class="slide level2" style="text-align:left;">
<h2></h2>
<p><strong>Right way</strong></p>
<ul>
<li class="fragment">Semantically maintain styles across a document</li>
</ul>
<p><strong>Wrong way</strong></p>
<ul>
<li class="fragment">Arial, 16pt, bold</li>
<li class="fragment">Times New Roman, 11pt</li>
</ul>
</section><section id="disadvantages-of-wysiwyg-approach" class="slide level2">
<h2>Disadvantages of <a href="https://en.wikipedia.org/wiki/WYSIWYG">WYSIWYG</a> approach</h2>
<ul>
<li class="fragment">Keeping content and styling together.</li>
<li class="fragment">Hard to review changes over many versions (track changes).</li>
<li class="fragment">Hard to maintain several formats at once: HTML, DOCX, PDF, etc.</li>
<li class="fragment">Very hard to collaborate.</li>
<li class="fragment">Hard to automate.</li>
</ul>
</section></section>
<section><section id="approach" class="title-slide slide level1"><h1>Approach</h1></section><section id="separation-of-concerns" class="slide level2">
<h2><a href="#" onclick="document.getElementById('theme').setAttribute('href','reveal.js/css/theme/black.css'); return false;">Separation</a> of <a href="#" onclick="document.getElementById('theme').setAttribute('href','reveal.js/css/theme/white.css'); return false;">concerns</a></h2>
<p><img data-src="assets/separation-of-concerns.svg" style="background:none; border:none; box-shadow:none;" width="1000" /></p>
<!--
digraph G {
subgraph cluster_0 {
style=filled;
color=lightgrey;
node [style=filled,color=white];
pdf; docx; html; etc;
}
content -> render
styling -> render
render -> pdf
render -> docx
render -> html
render -> etc
}
-->
</section><section class="slide level2">
<p><a href="http:https://www.writethedocs.org/"><img data-src="assets/write-the-docs.png" style="width:75.0%" /></a></p>
</section><section class="slide level2">
<div class="sourceCode" id="cb1"><pre class="sourceCode rst"><code class="sourceCode rest"><a class="sourceLine" id="cb1-1" data-line-number="1">Welcome to our community!</a>
<a class="sourceLine" id="cb1-2" data-line-number="2">=========================</a>
<a class="sourceLine" id="cb1-3" data-line-number="3"></a>
<a class="sourceLine" id="cb1-4" data-line-number="4">**Write the Docs** is a global community of people who care about documentation. Our primary gathering places are:</a>
<a class="sourceLine" id="cb1-5" data-line-number="5"></a>
<a class="sourceLine" id="cb1-6" data-line-number="6">* <span class="kw">:doc:</span><span class="dv">`Our slack network </slack>`</span> with thousands of members</a>
<a class="sourceLine" id="cb1-7" data-line-number="7">* <span class="kw">:doc:</span><span class="dv">`Conferences </conf/index>`</span> on 3 continents</a>
<a class="sourceLine" id="cb1-8" data-line-number="8">* <span class="kw">:doc:</span><span class="dv">`Local meetups </meetups/index>`</span> in over 30 cities</a>
<a class="sourceLine" id="cb1-9" data-line-number="9"></a>
<a class="sourceLine" id="cb1-10" data-line-number="10">We consider everyone who cares about communication, documentation, and</a>
<a class="sourceLine" id="cb1-11" data-line-number="11">their users to be a member of our community. This can be programmers,</a>
<a class="sourceLine" id="cb1-12" data-line-number="12">tech writers, developer advocates, customer support, marketers, and anyone else who wants</a>
<a class="sourceLine" id="cb1-13" data-line-number="13">people to have great experiences with software.</a>
<a class="sourceLine" id="cb1-14" data-line-number="14"></a>
<a class="sourceLine" id="cb1-15" data-line-number="15">Our conferences create a time and a place for the global community of</a>
<a class="sourceLine" id="cb1-16" data-line-number="16"><span class="kw">:doc:</span><span class="dv">`documentarians`</span> to share information, discuss ideas, and work together</a>
<a class="sourceLine" id="cb1-17" data-line-number="17">to improve the **art and science of documentation**.</a></code></pre></div>
</section><section class="slide level2">
<div class="sourceCode" id="cb2"><pre class="sourceCode rst"><code class="sourceCode rest"><a class="sourceLine" id="cb2-1" data-line-number="1">You can<span class="ot"> `join our Slack <http:https://slack.writethedocs.org/>`_</span> if you aren't already a member.</a>
<a class="sourceLine" id="cb2-2" data-line-number="2"></a>
<a class="sourceLine" id="cb2-3" data-line-number="3"><span class="dt">.. note:: </span>Feel free to send a Pull Request to update<span class="ot"> `this page`_</span>, if you want to include other channels.</a>
<a class="sourceLine" id="cb2-4" data-line-number="4"></a>
<a class="sourceLine" id="cb2-5" data-line-number="5"><span class="dt">.. _this page: </span>https://github.com/writethedocs/www/blob/master/docs/slack.rst</a>
<a class="sourceLine" id="cb2-6" data-line-number="6"></a>
<a class="sourceLine" id="cb2-7" data-line-number="7">Default channels</a>
<a class="sourceLine" id="cb2-8" data-line-number="8">----------------</a>
<a class="sourceLine" id="cb2-9" data-line-number="9"></a>
<a class="sourceLine" id="cb2-10" data-line-number="10">Everyone who joins the Slack will be added to these channels:</a>
<a class="sourceLine" id="cb2-11" data-line-number="11"></a>
<a class="sourceLine" id="cb2-12" data-line-number="12">* **#general** - The main channel for documentation related conversation and questions.</a>
<a class="sourceLine" id="cb2-13" data-line-number="13">* **#watercooler** - For talking about things that are off-topic. Get to know folks other interests that aren't around documentation :)</a>
<a class="sourceLine" id="cb2-14" data-line-number="14">* **#jobs-posts-only** - Posting or asking for jobs.</a>
<a class="sourceLine" id="cb2-15" data-line-number="15">* **#wtd-conferences** - Questions and other thoughts around the <span class="kw">:doc:</span><span class="dv">`/conf/index`</span>.</a>
<a class="sourceLine" id="cb2-16" data-line-number="16">* **#meetups** - Questions and other thoughts about our <span class="kw">:doc:</span><span class="dv">`/meetups/index`</span>.</a>
<a class="sourceLine" id="cb2-17" data-line-number="17">* **#intros** - Introduce yourself! Let people know you're here, and why you care about docs :)</a></code></pre></div>
</section><section class="slide level2">
<p><a href="https://sassoftware.github.io/sas_kernel/overview.html"><img data-src="assets/sas-kernel-docs.png" style="width:90.0%" /></a></p>
</section><section class="slide level2">
<div class="sourceCode" id="cb3"><pre class="sourceCode rst"><code class="sourceCode rest"><a class="sourceLine" id="cb3-1" data-line-number="1">######################</a>
<a class="sourceLine" id="cb3-2" data-line-number="2">Overview of SAS kernel</a>
<a class="sourceLine" id="cb3-3" data-line-number="3">######################</a>
<a class="sourceLine" id="cb3-4" data-line-number="4"><span class="co">.. I used http:https://documentation-style-guide-sphinx.readthedocs.io/en/latest/style-guide.html</span></a>
<a class="sourceLine" id="cb3-5" data-line-number="5"></a>
<a class="sourceLine" id="cb3-6" data-line-number="6"></a>
<a class="sourceLine" id="cb3-7" data-line-number="7">*************</a>
<a class="sourceLine" id="cb3-8" data-line-number="8">What is this?</a>
<a class="sourceLine" id="cb3-9" data-line-number="9">*************</a>
<a class="sourceLine" id="cb3-10" data-line-number="10"></a>
<a class="sourceLine" id="cb3-11" data-line-number="11">A SAS kernel for<span class="ot"> `Jupyter Notebooks <http:https://www.jupyter.org>`_</span>. Jupyter Notebooks</a>
<a class="sourceLine" id="cb3-12" data-line-number="12">are capable of running programs in a variety of programming languages and it is</a>
<a class="sourceLine" id="cb3-13" data-line-number="13">the kernel that enables this ability. The SAS kernel enables Jupyter Notebook to</a>
<a class="sourceLine" id="cb3-14" data-line-number="14">provide the following programming experience:</a></code></pre></div>
</section><section class="slide level2">
<div class="sourceCode" id="cb4"><pre class="sourceCode rst"><code class="sourceCode rest"><a class="sourceLine" id="cb4-1" data-line-number="1">******************</a>
<a class="sourceLine" id="cb4-2" data-line-number="2">Load data into SAS</a>
<a class="sourceLine" id="cb4-3" data-line-number="3">******************</a>
<a class="sourceLine" id="cb4-4" data-line-number="4"></a>
<a class="sourceLine" id="cb4-5" data-line-number="5">The FILENAME statement is used to specify an external file. The</a>
<a class="sourceLine" id="cb4-6" data-line-number="6">IMPORT procedure can read data from a variety of external file formats.</a>
<a class="sourceLine" id="cb4-7" data-line-number="7"></a>
<a class="sourceLine" id="cb4-8" data-line-number="8"><span class="dt">.. code-block:: none</span></a>
<a class="sourceLine" id="cb4-9" data-line-number="9"></a>
<a class="sourceLine" id="cb4-10" data-line-number="10"><span class="dt"> filename x "./HR_comma_sep.csv";</span></a>
<a class="sourceLine" id="cb4-11" data-line-number="11"><span class="dt"> proc import datafile=x out=_csv dbms=csv replace; run;</span></a></code></pre></div>
</section><section class="slide level2">
<div class="sourceCode" id="cb5"><pre class="sourceCode rst"><code class="sourceCode rest"><a class="sourceLine" id="cb5-1" data-line-number="1">Plot a heatmap that shows the relationship between employee</a>
<a class="sourceLine" id="cb5-2" data-line-number="2">satisfaction and the last evaluation.</a>
<a class="sourceLine" id="cb5-3" data-line-number="3"></a>
<a class="sourceLine" id="cb5-4" data-line-number="4"><span class="dt">.. code-block:: none</span></a>
<a class="sourceLine" id="cb5-5" data-line-number="5"></a>
<a class="sourceLine" id="cb5-6" data-line-number="6"><span class="dt"> proc sgplot data=work._csv;</span></a>
<a class="sourceLine" id="cb5-7" data-line-number="7"><span class="dt"> heatmap x=last_evaluation y=satisfaction_level;</span></a>
<a class="sourceLine" id="cb5-8" data-line-number="8"> run;</a>
<a class="sourceLine" id="cb5-9" data-line-number="9"></a>
<a class="sourceLine" id="cb5-10" data-line-number="10"><span class="dt">.. image:: </span>./images/heatmap_satisfaction_evaluation.png</a>
<a class="sourceLine" id="cb5-11" data-line-number="11"> <span class="fu">:scale:</span> 60 %</a>
<a class="sourceLine" id="cb5-12" data-line-number="12"> <span class="fu">:alt:</span> Heatmap of employee statisfaction and evaluation.</a></code></pre></div>
</section><section class="slide level2">
<p><a href="https://sassoftware.github.io/sas_kernel/install.html#windows-install-assuming-sas-already-installed"><img data-src="assets/markup-compare-rendered.png" style="width:35.0%" /></a></p>
<div class="columns">
<div class="column" style="width:50%;">
<p><img data-src="assets/markup-compare-left.png" /></p>
</div><div class="column" style="width:50%;">
<p><img data-src="assets/markup-compare-right.png" /></p>
</div>
</div>
</section><section id="markup-languages" class="slide level2">
<h2>Markup languages</h2>
<ul>
<li class="fragment">Markdown</li>
<li class="fragment">reStructuredText</li>
<li class="fragment">Asciidoc</li>
</ul>
</section><section id="generators" class="slide level2">
<h2>Generators</h2>
<ul>
<li class="fragment"><a href="http:https://www.sphinx-doc.org/en/master/">sphinx</a></li>
<li class="fragment"><a href="http:https://pandoc.org/index.html">pandoc</a></li>
<li class="fragment"><a href="http:https://www.methods.co.nz/asciidoc/">AsciiDoc</a></li>
<li class="fragment"><a href="https://dotnet.github.io/docfx/">DocFX</a> — <a href="https://eventstore.org/docs/server/users-and-access-control-lists/index.html?tabs=tabid-1%2Ctabid-3%2Ctabid-5#example">example</a>, <a href="https://github.com/EventStore/docs.geteventstore.com/blob/master/server/users-and-access-control-lists.md">src</a></li>
<li class="fragment"><a href="https://jekyllrb.com/">Jekyll</a></li>
<li class="fragment"><a href="https://docusaurus.io/">Docusaurus</a></li>
<li class="fragment">google for <a href="http:https://lmgtfy.com/?q=static+site+generators+documentation">static site generators documentation</a></li>
</ul>
</section></section>
<section><section id="benefits" class="title-slide slide level1"><h1>Benefits</h1></section><section class="slide level2">
<ul>
<li class="fragment">text editors (like <a href="https://www.sublimetext.com/">Sublime Text</a>, <a href="https://en.wikipedia.org/wiki/Vim_(text_editor)">Vim</a>, <a href="https://en.wikipedia.org/wiki/Emacs">Emacs</a>, <a href="https://atom.io/">Atom</a>, <a href="https://code.visualstudio.com/">Visual Studio Code</a>, <a href="http:https://brackets.io/">Brackets</a>)</li>
<li class="fragment">version control systems (<a href="https://git-scm.com/">Git</a>, <a href="https://subversion.apache.org/">Subversion</a>, <a href="https://en.wikipedia.org/wiki/Mercurial">Mercurial</a>)</li>
<li class="fragment">automation via Continuous Integration/Continuous Deployment
<ul>
<li class="fragment">spellcheck</li>
<li class="fragment">post/pre processing</li>
</ul></li>
</ul>
</section><section id="vcs-blame" class="slide level2">
<h2><a href="https://gitlab.com/gitlab-com/www-gitlab-com/blame/master/source/handbook/git-page-update/index.html.md">VCS Blame</a></h2>
<p><img data-src="assets/vcs-blame.png" style="width:80.0%" /></p>
</section><section id="pull-requests" class="slide level2">
<h2><a href="https://gitlab.com/gitlab-com/www-gitlab-com/merge_requests/12541/diffs?view=inline">Pull requests</a></h2>
<p><img data-src="assets/pull-request.png" /></p>
</section></section>
<section><section id="real-world-examples" class="title-slide slide level1"><h1>Real world examples</h1></section><section id="gitlab" class="slide level2">
<h2><a href="https://about.gitlab.com/">GitLab</a> <!-- {data-background="assets/gitlab-main.gif"} --></h2>
<p><img data-src="assets/gitlab-main.gif" style="width:90.0%" /></p>
</section><section id="gitlab-handbook" class="slide level2">
<h2><a href="https://about.gitlab.com/handbook/">GitLab Handbook</a></h2>
<p><img data-src="assets/gitlab-handbook.png" style="width:80.0%" /></p>
</section><section id="amazon-aws-s3-docs" class="slide level2">
<h2><a href="https://docs.aws.amazon.com/AmazonS3/latest/gsg/OpeningAnObject.html">Amazon AWS S3 docs</a></h2>
<p><img data-src="assets/amazon-s3-docs.png" /></p>
</section></section>
<section><section id="the-end" class="title-slide slide level1"><h1>The end</h1></section><section id="contact-info" class="slide level2">
<h2>Contact info</h2>
<p>Igor Khorlo</p>
<p><a href="https://www.syneoshealth.com/"><img data-src="assets/logo.svg" style="background:none; border:none; box-shadow:none;" width="300" /></a></p>
<p><a href="https://www.linkedin.com/in/igor-khorlo-4546129a/" class="uri">https://www.linkedin.com/in/igor-khorlo-4546129a/</a></p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
<aside class="notes">
<p>General advise – You will have to spend some time to get used to it, but it will worth it in the end.</p>
</aside>
</section></section>
</div>
</div>
<script src="reveal.js/lib/js/head.min.js"></script>
<script src="reveal.js/js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
// Push each slide change to the browser history
history: true,
// Transition style
transition: 'fade', // none/fade/slide/convex/concave/zoom
math: {
mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js',
config: 'TeX-AMS_HTML-full',
tex2jax: {
inlineMath: [['\\(','\\)']],
displayMath: [['\\[','\\]']],
balanceBraces: true,
processEscapes: false,
processRefs: true,
processEnvironments: true,
preview: 'TeX',
skipTags: ['script','noscript','style','textarea','pre','code'],
ignoreClass: 'tex2jax_ignore',
processClass: 'tex2jax_process'
},
},
// Optional reveal.js plugins
dependencies: [
{ src: 'reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'reveal.js/plugin/zoom-js/zoom.js', async: true },
{ src: 'reveal.js/plugin/math/math.js', async: true },
{ src: 'reveal.js/plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>