Presentatioun als Code, oder Firwat ech net méi Powerpoint benotzen

Presentatioun als Code, oder Firwat ech net méi Powerpoint benotzen

Ech mengen, ech hunn Dosende vu Presentatiounen u Kollegen, Clienten, an ëffentleche Spriecher a menger IT Carrière gemaach. Fir vill Jore war Powerpoint eng natierlech an zouverlässeg Wiel fir mech als Rutschproduktiounsinstrument. Mä dëst Joer huet sech d'Situatioun qualitativ geännert. Vu Februar bis Mee hat ech d'Méiglechkeet op fënnef Konferenzen ze schwätzen, an d'Rapporte fir d'Rapporte hu missen a kuerzer Zäit, awer mat héijer Qualitéit virbereet ginn. D'Fro stellt sech iwwer deen Deel vun der Aarbecht iwwer de visuellen Design vun de Rutschen un aner Leit ze delegéieren. Ech hunn eng Kéier probéiert mat engem Designer ze schaffen, .pptx Dateien per Mail ze schécken, awer d'Aarbecht huet zu Chaos verwandelt: Keen wousst wéi eng Versioun vun de Rutschen déi "Neist" war, an de Layout war "beweegt" wéinst dem Ënnerscheed am Powerpoint Versiounen a Schrëften op eise Maschinnen. An ech hu beschloss eppes Neies ze probéieren. Ech hunn et probéiert, an zënterhier hunn ech net dru geduecht fir zréck op Powerpoint ze goen.

Wat wëlle mir

Virun ongeféier engem Joer an en halleft huet eis Firma gestoppt mat Word ze benotzen fir Projetsdokumentatioun ze kreéieren, nodeems se déiselwecht Probleemer begéint hunn: obwuel Word gutt ass fir e klengt Dokument ze tippen, wéi de Volume wiisst, entstinn Schwieregkeeten mat Zesummenaarbecht an Erhalen vun héichqualitativen an vereenegt Design. Eise Choix ass gefall AsciiDoctor, a mir stoppen ni op dës Wiel ze freeën, awer dëst ass en Thema fir en separaten Artikel. Ëm déiselwecht Zäit hu mir d'Effizienz vun engem vun den DevOps Prinzipien vun "Alles als Code" geléiert, sou datt d'Wiel vun Ufuerderunge fir déi nei Technologie fir Presentatioun Rutschen ze kreéieren ganz offensichtlech war:

  1. D'Presentatioun muss eng einfach Textdatei an enger Markupsprooch sinn.
  2. Eis Rutschen handelen iwwer Entwécklungsprojeten, sou datt d'Markup soll et einfach maachen ze setzen, ouni op extern Systemer zeréckzegoen
    • Code Fragmenter mat Syntax Highlight,
    • einfach Diagrammer a Form vu geometreschen Formen mat Pfeile verbonnen,
    • UML Diagrammer, Flowcharts a méi.
  3. D'Presentatiounsentwécklung muss an engem Versiounskontrollsystem gespäichert ginn.
  4. Validatioun an Assemblée vun fäerdeg Rutschen soll an engem CI System gemaach ginn.

Haut ginn et zwou Basisoptiounen fir Rutschen an Markupsproochen ze kreéieren: Package Projektor fir LaTeX oder ee vun de Kaderen fir Rutschen mat HTML/CSS ze kreéieren (RevealJS, Remarque, deck.js a vill anerer).

Och wann meng Séil am LaTeX läit, huet mäi Geescht diktéiert datt d'Wiel vun enger Léisung, déi ech net deen eenzege benotzt, sollt op der Säit vun enger Léisung sinn, déi e méi breede Krees vu Leit vertraut ass. Net jidderee weess LaTeX, a wann Är alldeeglech Praxis net mat wëssenschaftlechen Artikelen Zesummenhang ass, da sidd Dir onwahrscheinlech Zäit ze hunn fir Iech an déi rieseg, komplizéiert Welt vun dësem System z'entdecken.

Wéi och ëmmer, d'Meeschterung vun HTML / CSS ass net genee eng verbreet Fäegkeet: Ech sinn zum Beispill wäit vun der vollstänneg beherrscht. Glécklecherweis kënnt de scho vertraut AsciiDoctor zur Rettung: e Konverter asciidoctor-revealjs erlaabt Iech RevealJS Rutschen mat AsciiDoctor Markup ze kreéieren. An et ass einfach ze léieren an zougänglech fir jiddereen!

Wéi Code Rutschen

Fir d'Essenz vu Kodéierungsrutschen op AsciiDoctor ze verstoen, ass deen einfachste Wee fir spezifesch Beispiller ze ginn. Dëst sinn all vun aktuellen Rutschen, déi ech fir meng Konferenzpresentatiounen dëst Joer gemaach hunn.

Eng Rutsch mat engem Titel an enger Lëscht an Elementer déi een nom aneren opmaachen:

== Зачем нам Streams API?

[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабирование

Resultat

Presentatioun als Code, oder Firwat ech net méi Powerpoint benotzen

Header a Quellcode Snippet mat Syntax Highlight:

== Kafka Streams API: общая структура KStreams-приложения

[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции

Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----

Resultat

Presentatioun als Code, oder Firwat ech net méi Powerpoint benotzen

An der Virbereedung fir e Gespréich, ënnerleien Code Demos widderholl Versiounen a Verbesserungen, sou datt d'Fäegkeet fir de "raw Code" séier an e Rutsch ze kopéieren an ze pechen ass wäertvoll, a garantéiert datt d'Demo aktuell ass ouni sech Suergen iwwer Syntax Highlight.

Titel, Illustratioun an Text (Layout op der Rutsch gëtt an Zellen gemaach AsciiDoctor Dëscher):

== Kafka Streams in Action

[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===

Resultat

Presentatioun als Code, oder Firwat ech net méi Powerpoint benotzen

Heiansdo ass en Titel net néideg, a fir Äre Punkt ze illustréieren brauch Dir just e Vollbildschierm:

[%notitle]
== Жить в легаси нелегко

image::swampman.jpg[canvas, size=cover]

Resultat

Presentatioun als Code, oder Firwat ech net méi Powerpoint benotzen

Dacks muss eng Iddi vun engem einfachen Diagramm ënnerstëtzt ginn, a Form vun "Plaze verbonne mat Pfeile." Glécklecherweis ass AsciiDoctor mam System integréiert Grafviz - eng Sprooch déi Iech erlaabt Grafikdiagrammer ze beschreiwen baséiert op der Beschreiwung vun de Wirbelen a Verbindungen tëscht hinnen. Graphviz hëlt eng Léierkurve, awer baséiert op de geliwwerte Beispiller ass et zimlech einfach ze maachen! Dëst ass wéi et ausgesäit:

== Пишем “Bet Totalling App”

Какова сумма выплат по сделанным ставкам, если сыграет исход?

[graphviz, "counting-topology.png"]
-----
digraph G {
graph [ dpi = 150 ];
rankdir="LR";
node [fontsize=18; shape="circle"; fixedsize="true"; width="1.1"];
Store [shape="cylinder"; label="Local Store"; fixedsize="true"; width="1.5"]
Source -> MapVal -> Sum -> Sink
Sum -> Store [dir=both; label=" n "]
{rank = same; Store; Sum;}
}
-----

Resultat

Presentatioun als Code, oder Firwat ech net méi Powerpoint benotzen

Am Fall wou et néideg ass d'Ënnerschrëft op der Figur z'änneren, d'Richtung vum Pfeil z'änneren, asw. Dëst erhéicht d'Vitesse vun der Aarbecht op Rutschen wesentlech.

E méi komplizéiert Beispill:

== Невоспроизводимая сборка
[graphviz, "unstable-update.png"]
-----
digraph G {
  rankdir="LR";
  graph [ dpi = 150 ];
  u -> r0;
  u[shape=plaintext; label="linter updaten+ 13 warnings"]
  r0[shape=point, width = 0]
  r1 -> r0[ arrowhead = none, label="master branch" ];
  r0-> r2 [];   b1 -> b4;  r1->b1
  r1[label="150nwarnings"]
  b1[label="± 0nwarnings"]
  b4[label="± 0nwarnings"]
  b4->r2
  r2[label="163nwarnings", color="red", xlabel=<<font color="red">merge blocked</font>>]
  {rank = same; u; r0; b4;}
}
-----

Resultat

Presentatioun als Code, oder Firwat ech net méi Powerpoint benotzen

Iwwregens ass et bequem mat Graphviz ze experimentéieren an Biller op der Säit ze debuggen Graphviz online.

Schlussendlech, wann Dir e Flowchart, Klassendiagramm oder en anert standardiséierte Diagramm an eng Rutsch braucht, da kann en anere System integréiert mat AsciiDoctor zur Rettung kommen, PlantUML. Mäi Kolleg Nikolai Potashnikov huet iwwer déi extensiv Fäegkeeten vun PlantUML geschriwwen separat Post.

D'Presentatiounsprojet an de Code, deen op engem Versiounskontrollsystem gespäichert gëtt, mécht et méiglech eng gemeinsam Aarbecht op der Presentatioun ze organiséieren, fir d'éischt d'Aufgaben fir Inhalter an Design ze trennen. Den Design vu Rutschen (Schrëften, Hannergrënn, Abriecher) am RevealJS gëtt mat CSS beschriwwen. Meng perséinlech Fäegkeet mat CSS ass am beschte vermëttelt dëser gif - awer et ass net grujeleg wann et Leit sinn déi mat CSS vill méi dexterously a méi séier schaffen wéi ech. Als Resultat stellt et sech eraus datt mat enger séier unzegräifend Deadline fir eng Presentatioun kënne mir op verschiddene Dateien gläichzäiteg iwwer Git schaffen an eng Geschwindegkeet vun der Zesummenaarbecht entwéckelen déi onméiglech ass wann Dir .pptx Dateien per Mail schécken.

Bauen eng HTML Säit mat Rutschen

Einfach Textquellen si super, awer wéi kompiléiert Dir se an d'Presentatioun selwer?

AsciiDoctor ass e Projet am Ruby geschriwwen, an et gi verschidde Weeër fir et ze lafen. Als éischt kënnt Dir d'Ruby Sprooch installéieren an asciidoctor direkt lafen, wat wahrscheinlech déi nootste Saach fir Ruby Entwéckler ass.

Wann Dir net mat der Installatioun vun Ruby wëllt messen, kënnt Dir den Docker-Bild benotzen asciidoctor / docker-asciidoctor, an deem Dir, wann Dir lancéiert, den Dossier mat de Projetquellen iwwer VOLUME verbënnt an d'Resultat op enger bestëmmter Plaz kritt.

D'Optioun déi ech gewielt hunn kann e bëssen onerwaart schéngen, awer et ass déi bequemste fir mech als Java Entwéckler. Et erfuerdert keng Installatioun vu Ruby oder Docker, awer erlaabt Iech Rutschen mat engem Maven Skript ze generéieren.

De Punkt ass, datt de Projet JRuby - D'Java Implementatioun vun der Ruby Sprooch ass sou gutt datt et Iech erlaabt bal alles ze lafen wat fir Ruby an enger Java Maschinn erstallt ass, an AsciiDoctor ze lafen ass ee vun den allgemengste Gebrauch vu JRuby.

Disponibilitéit asciidoctor-maven-plugin erlaabt Iech AsciiDoctor Dokumentatioun ze sammelen déi Deel vun engem Java Projet ass (dee mir aktiv benotzen). Zur selwechter Zäit ginn AsciiDoctor a JRuby automatesch vu Maven erofgelueden, an AsciiDoctor leeft am JRuby Ëmfeld: et ass net néideg eppes op der Maschinn z'installéieren! (ausser Package graphviz, déi néideg ass wann Dir GraphViz oder PlantUML Grafike benotze wëllt.) Einfach Är .adoc Dateien an engem Dossier setzen. src/main/asciidoc/An. Hei Beispill vun engem PomnikRutschen mat Diagrammer sammelen.

Konvertéiert Rutschen op PDF

Och wann d'HTML Versioun vun de Rutschen zimlech selbststänneg ass, ass et nach ëmmer néideg eng PDF Versioun vun de Rutschen ze hunn. Als éischt geschitt et datt op e puer Konferenzen, déi dem Spriecher net d'Méiglechkeet ubidden, säin eegene Laptop ze verbannen, erfuerdert Rutschen "streng am pptx- oder pdf-Format", ouni ze erwaarden datt se och an HTML sinn. Zweetens ass et eng gutt Form fir den Organisateuren eng onverännert Versioun vun Äre Rutschen ze schécken wéi se am Bericht gewise goufen, am PDF Format fir d'Publikatioun vun der Datei an de Konferenzmaterialien.

Glécklecherweis handelt den Node.js Utility dës Aufgab. decktape, op der Basis gebaut Marionette - Automatisatiounssystemer fir de Chrome Browser ze managen. Dir kënnt RevealJS Presentatioun op PDF konvertéieren mam Kommando

node decktape.js -s 3200x1800 --slides 1-500 
  reveal "file:///index.html?fragments=true" slides.pdf  

Zwee Tricken beim Start vun Decktape, déi mir duerch Versuch a Feeler musse kommen:

  • Resolutioun iwwer Parameter -s muss mat enger zweefach Marge spezifizéiert ginn, soss kann et Problemer mat der Konversioun Resultater ginn

  • an der URL vun der HTML Versioun vun der Presentatioun musst Dir e Parameter passéieren ?fragments=true, déi eng separat PDF Säit fir all Zwëschenzoustand vun Ärem Rutsch erstellt (zum Beispill fënnef Säite fir fënnef Kugelpunkte wa se een nom aneren ugewise ginn). Dëst erlaabt Iech esou en PDF eleng als Presentatioun während engem Bericht ze benotzen.

Automatesch Versammlung a Verëffentlechung um Web

Et ass praktesch wann Rutschen automatesch kompiléiert ginn wann Ännerungen am Versiounskontrollsystem gemaach ginn, an nach méi praktesch wann automatesch kompiléiert Rutschen um Internet fir ëffentlech Notzung gepost ginn. Rutschen aus dem Internet kënne ganz einfach virun engem Publikum "gespillt" ginn vun all Maschinn verbonne mat dem Internet an engem Projektor.

Well mir GitHub an eiser Aarbecht benotzen, ass déi natierlech Wiel vun engem CI System Travis CI, a fir fäerdege Presentatiounen ze hosten - github.io. D'Iddi hannert github.io ass datt all statesche Inhalt op eng Branche gepost gëtt gh-pages vun Ärem Projet op GitHub, gëtt op <ваше имя>.gihub.io/<ваш проект>.

Komplett TravisCI Konfiguratiounsdatei, inklusiv d'Kompilatioun vun der HTML Versioun vun der Säit mat Maven, Konvertéierung op PDF mat Decktape, an Eroplueden vun de Resultater an e Fuedem gh-pages fir Publikatioun op github.io, ausgesäit sou.

Fir esou e Projet op der TravisCI Säit ze bauen, musst Dir Ëmweltvariablen konfiguréieren

  • GH_REF - Wäert wéi github.com/inponomarev/csa-hb
  • GH_TOKEN - GitHub Zougang Token. Dir kënnt et vu GitHub an Äre Profilastellungen kréien, Entwéckler Astellungen -> Perséinlech Zougang Tokens. Wann Dir eng Presentatioun an en ëffentleche Repository eropluet, dann ass et fir dësen Token genuch fir den eenzegen Zougangsniveau "Zougang zu ëffentleche Repositories" ze spezifizéieren.
  • GH_USER_EMAIL / GH_USER_NAME — Numm/E-Mail-Paar am Numm vun deem de Push op de Fuedem duerchgefouert gëtt gh-pages.

Also, all Verpflichtung vum Presentatiounscode op GitHub resultéiert datt d'Rutschen automatesch an HTML an PDF Formater opgebaut ginn an nei op github.io eropgeluede ginn. (Natierlech sollt Dir nëmmen déi Presentatiounen op github.io eropluede, déi Dir schlussendlech ëffentlech wëllt maachen.)

Beispiller vu Projeten

Endlech, hei sinn Linken op e puer Beispiller vu Presentatiounsprojeten mat personaliséierte Maven Scripten an CI Konfiguratioun fir Travis-CI, déi kënne gekloont ginn a benotzt ginn wann Dir Är eege Presentatiounsprojeten erstellt:

Äddi Powerpoint! Ech denken net datt ech dech jeemools fir technesch Presentatiounen brauch :)

Source: will.com

Setzt e Commentaire