Prezantasyon kòm kòd, oswa Poukisa mwen pa sèvi ak Powerpoint ankò

Prezantasyon kòm kòd, oswa Poukisa mwen pa sèvi ak Powerpoint ankò

Mwen panse mwen te bay plizyè douzèn prezantasyon bay kòlèg, kliyan, ak pale an piblik nan karyè IT mwen an. Pou anpil ane, Powerpoint te yon chwa natirèl ak serye pou mwen kòm yon zouti pwodiksyon glise. Men, ane sa a sitiyasyon an chanje kalitatif. Soti nan mwa fevriye rive me, mwen te gen opòtinite pou m pale nan senk konferans, e diapositives pou rapò yo te dwe prepare nan yon ti tan, men ak kalite siperyè. Kesyon an te leve sou delege pati sa a nan travay la konsènan konsepsyon vizyèl nan glisad yo bay lòt moun. Yon fwa mwen te eseye travay ak yon designer, voye fichye .pptx pa lapòs, men travay la te tounen dezòd: pèsonn pa t 'konnen ki vèsyon glisad yo te "dernye a", ak layout la te "deplase" akòz diferans lan nan Powerpoint. vèsyon ak polis sou machin nou yo. Apre sa, mwen deside eseye yon bagay nouvo. Mwen te eseye li, e depi lè sa a mwen pa te panse sou retounen nan Powerpoint.

Kisa nou vle

Apeprè yon ane edmi de sa, konpayi nou an te sispann sèvi ak Word pou kreye dokiman pwojè, li te rankontre menm pwoblèm yo: byenke Word se yon bon bagay pou sezisman yon ti dokiman, kòm volim nan ap grandi, difikilte leve ak kolaborasyon ak jwenn bon jan kalite ak. konsepsyon inifye. Chwa nou te tonbe sou Ascii Doktè, epi nou pa janm sispann kontan nan chwa sa a, men sa a se yon sijè pou yon atik separe. Anviwon menm tan an, nou te aprann efikasite youn nan prensip DevOps yo nan "tout bagay kòm kòd", kidonk chwa pou kondisyon pou nouvo teknoloji a pou kreye diapositives prezantasyon yo te byen evidan:

  1. Prezantasyon an dwe yon dosye tèks klè nan yon langaj maketing.
  2. Slides nou yo se sou pwojè devlopman, kidonk maketing la ta dwe fè li fasil insert, san yo pa recourir nan sistèm ekstèn
    • fragman kòd ak sentaks en,
    • dyagram senp nan fòm fòm jewometrik ki konekte pa flèch,
    • Dyagram UML, organigram ak plis ankò.
  3. Bouyon prezantasyon an dwe estoke nan yon sistèm kontwòl vèsyon.
  4. Validasyon ak asanble glisad fini yo ta dwe fè nan yon sistèm CI.

Jodi a, gen de opsyon debaz pou kreye diapositives nan lang maketing: pake pwojektè pou LaTeX oswa youn nan kad yo pou kreye glisad lè l sèvi avèk HTML/CSS (RevelasyonJS, Remak, deck.js ak anpil lòt).

Malgre ke nanm mwen kouche nan LaTeX, lide m 'dikte ke chwa a nan yon solisyon ke mwen pa ta dwe sèl la itilize ta dwe sou bò a nan yon solisyon abitye nan yon sèk pi laj nan moun. Se pa tout moun ki konnen LaTeX, epi si pratik chak jou ou a pa gen rapò ak ekri atik syantifik, Lè sa a, ou pa gen anpil chans pou w gen tan plonje tèt ou nan mond lan gwo, konplike nan sistèm sa a.

Sepandan, metriz HTML/CSS se pa egzakteman yon ladrès toupatou: mwen, pou egzanp, mwen byen lwen pa konplètman konpetan nan li. Erezman, AsciiDoctor ki deja abitye vin pote l sekou: yon konvètisè asciidoctor-revealjs pèmèt ou kreye glisad RevealJS lè l sèvi avèk markeup AsciiDoctor. Epi li fasil pou aprann epi aksesib pou tout moun!

Ki jan yo kode glisad yo

Pou konprann sans nan kodaj glisad sou AsciiDoctor, fason ki pi fasil la se bay egzanp espesifik. Sa yo tout soti nan diapositives aktyèl mwen te fè pou prezantasyon konferans mwen an ane sa a.

Yon glisad ki gen yon tit ak yon lis atik ki ouvri youn apre lòt:

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

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

Rezilta

Prezantasyon kòm kòd, oswa Poukisa mwen pa sèvi ak Powerpoint ankò

Tèt ak fragment kòd sous ak sentaks en:

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

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

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

Rezilta

Prezantasyon kòm kòd, oswa Poukisa mwen pa sèvi ak Powerpoint ankò

Nan preparasyon pou yon diskou, Demo kòd sibi revizyon repete ak amelyorasyon, kidonk kapasite nan byen vit kopye ak kole "kòd la anvan tout koreksyon" dirèkteman nan yon glisad se anpil valè, asire ke Demo a se ajou san yo pa enkyete sou sentaks en.

Tit, ilistrasyon ak tèks (dispozisyon sou glisad la fèt nan selil yo AsciiDoctor tab):

== Kafka Streams in Action

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

Rezilta

Prezantasyon kòm kòd, oswa Poukisa mwen pa sèvi ak Powerpoint ankò

Pafwa yon tit pa nesesè, epi pou ilistre pwen ou jis bezwen yon imaj plen ekran:

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

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

Rezilta

Prezantasyon kòm kòd, oswa Poukisa mwen pa sèvi ak Powerpoint ankò

Souvan yon lide bezwen sipòte pa yon dyagram senp, nan fòm "kare ki konekte pa flèch." Erezman, AsciiDoctor entegre ak sistèm lan Graphviz — yon langaj ki pèmèt ou dekri dyagram graf ki baze sou deskripsyon somè ak koneksyon ant yo. Graphviz pran yon koub aprantisaj, men dapre egzanp yo bay yo, li trè fasil fè! Men sa li sanble:

== Пишем “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;}
}
-----

Rezilta

Prezantasyon kòm kòd, oswa Poukisa mwen pa sèvi ak Powerpoint ankò

Nan ka a lè li nesesè modifye tit la sou figi a, chanje direksyon flèch la, elatriye, sa ka fè dirèkteman nan kòd la prezantasyon, olye pou yo rdesine foto a yon kote ak reinsert li nan glise a. Sa a siyifikativman ogmante vitès la nan travay sou glisad.

Yon egzanp ki pi konplike:

== Невоспроизводимая сборка
[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;}
}
-----

Rezilta

Prezantasyon kòm kòd, oswa Poukisa mwen pa sèvi ak Powerpoint ankò

By wout la, li pratik fè eksperyans ak Graphviz ak debug imaj sou paj la Graphviz sou entènèt.

Finalman, si ou bezwen mete yon organigram, dyagram klas oswa lòt dyagram ofisyèl nan yon glise, Lè sa a, yon lòt sistèm entegre ak AsciiDoctor ka vin sekou, PlantUML. Kolèg mwen Nikolai Potashnikov te ekri sou kapasite yo anpil nan PlantUML pòs separe.

Vire pwojè prezantasyon an nan kòd ki estoke sou yon sistèm kontwòl vèsyon fè li posib yo òganize travay ansanm sou prezantasyon an, premye a tout, separe travay yo nan kreye kontni ak konsepsyon. Yo dekri konsepsyon glisad yo (polis, orijin, endentasyon) nan RevealJS lè l sèvi avèk CSS. Konpetans pèsonèl mwen ak CSS pi byen transmèt pa gif sa a - men li pa fè pè lè gen moun ki travay ak CSS pi plis ladrès ak pi vit pase mwen. Kòm yon rezilta, li sanble ke ak yon dat limit rapidman apwoche pou yon prezantasyon, nou ka travay sou diferan dosye ansanm atravè Git epi devlope yon vitès nan kolaborasyon ki enposib lè yo voye dosye .pptx pa lapòs.

Bati yon paj HTML ak glisad

Sous tèks yo se gwo, men ki jan ou konpile yo nan prezantasyon an tèt li?

AsciiDoctor se yon pwojè ki ekri nan Ruby, e gen plizyè fason pou kouri li. Premyèman, ou ka enstale lang Ruby epi kouri asciidoctor dirèkteman, ki se pwobableman bagay ki pi pre devlopè Ruby.

Si ou pa vle dezòd ak enstale Ruby, ou ka itilize imaj la docker asciidoctor/docker-asciiidoctor, nan ki, lè yo te lanse, ou ka konekte katab la ak sous pwojè yo atravè VOLUME epi jwenn rezilta a nan yon kote yo bay.

Opsyon mwen te chwazi a ka sanble yon ti jan inatandi, men li se pi bon an pou mwen kòm yon pwomotè Java. Li pa mande pou enstalasyon Ruby oswa Docker, men pèmèt ou jenere glisad lè l sèvi avèk yon script Maven.

Pwen an se ke pwojè a JRuby - Aplikasyon Java lang Ruby a tèlman bon ke li pèmèt ou kouri prèske tout bagay ki te kreye pou Ruby nan yon machin Java, epi kouri AsciiDoctor se youn nan itilizasyon ki pi komen nan JRuby.

disponiblite asciidoctor-maven-plugin pèmèt ou kolekte dokiman AsciiDoctor ki fè pati yon pwojè Java (ki nou itilize aktivman). An menm tan an, AsciiDoctor ak JRuby yo telechaje otomatikman pa Maven, ak AsciiDoctor kouri nan anviwònman an JRuby: pa gen okenn bezwen enstale anyen sou machin nan! (Eksepte pake graphviz, ki nesesè si ou vle itilize grafik GraphViz oswa PlantUML.) Senpleman mete fichye .adoc ou yo nan yon katab src/main/asciidoc/. Isit la egzanp yon pomnikkolekte glisad ak dyagram.

Konvèti glisad an PDF

Malgre ke vèsyon HTML nan glisad yo se byen endepandan, li toujou nesesè yo gen yon vèsyon PDF nan glisad yo. Premyèman, li rive ke nan kèk konferans ki pa bay oratè a ak opòtinite pou konekte pwòp laptop li, yo mande pou glisad "fè egzateman nan fòma pptx oswa pdf," san yo pa atann ke yo tou nan HTML. Dezyèmman, li se yon bon fòm voye òganizatè yo yon vèsyon ki pa modifye nan diapositives ou yo jan yo te montre yo nan rapò a, nan fòma PDF pou piblikasyon fichye a nan materyèl konferans yo.

Erezman, sèvis piblik Node.js okipe travay sa a. decktape, bati sou baz la Puppetè — sistèm automatisation pou jere navigatè Chrome a. Ou ka konvèti prezantasyon RevealJS an PDF ak lòd la

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

De ke trik nouvèl lè lanse decktape, ke nou te vini ak nan esè ak erè:

  • rezolisyon atravè paramèt -s dwe espesifye ak yon maj de fwa, otreman ka gen pwoblèm ak rezilta yo konvèsyon

  • nan URL la nan vèsyon an HTML nan prezantasyon an ou bezwen pase yon paramèt ?fragments=true, ki pral kreye yon paj PDF separe pou chak eta entèmedyè nan glisad ou a (pa egzanp, senk paj pou senk pwen si yo montre yo youn apre lòt). Sa a pral pèmèt ou sèvi ak yon PDF konsa poukont li kòm yon prezantasyon pandan yon rapò.

Asanble otomatik ak pibliye sou entènèt la

Li pratik lè glisad yo konpile otomatikman lè chanjman yo te fè nan sistèm kontwòl vèsyon an, e menm pi pratik lè glisad otomatikman konpile yo afiche sou entènèt la pou itilizasyon piblik. Slides soti nan entènèt la ka fasil "jwe" devan yon odyans soti nan nenpòt machin ki konekte ak entènèt la ak yon pwojektè.

Depi nou itilize GitHub nan travay nou an, chwa natirèl yon sistèm CI se TravisCI, ak pou òganize prezantasyon ki pare yo - github.io. Lide ki dèyè github.io se ke nenpòt kontni estatik afiche nan yon branch gh-pages nan pwojè ou sou GitHub, vin disponib nan <ваше имя>.gihub.io/<ваш проект>.

Ranpli dosye konfigirasyon TravisCI, ki gen ladan konpile vèsyon HTML paj la lè l sèvi avèk Maven, konvèti an PDF lè l sèvi avèk decktape, ak telechaje rezilta yo nan yon fil. gh-pages pou piblikasyon sou github.io, sanble se konsa.

Pou konstwi yon pwojè konsa sou bò TravisCI, ou bezwen configure variables anviwònman

  • GH_REF — valè tankou github.com/inponomarev/csa-hb
  • GH_TOKEN — Siy aksè GitHub. Ou ka jwenn li nan GitHub nan anviwònman pwofil ou a, Anviwònman Developer -> Tokens Aksè Pèsonèl. Si ou telechaje yon prezantasyon nan yon depo piblik, Lè sa a, pou siy sa a li ase pou presize sèlman nivo aksè "Aksè depo piblik yo".
  • GH_USER_EMAIL / GH_USER_NAME — pè non/imel sou non ki pral pouse nan fil la dwe te pote soti gh-pages.

Se konsa, chak komèt nan kòd prezantasyon an sou GitHub rezilta nan glisad yo otomatikman rebati nan fòma HTML ak PDF ak re-uploaded nan github.io. (Natirèlman, ou ta dwe sèlman telechaje sou github.io prezantasyon sa yo ke ou finalman vle fè piblik la.)

Egzanp pwojè yo

Finalman, isit la se lyen ki mennen nan yon koup nan egzanp pwojè prezantasyon ak script Maven Customized ak konfigirasyon CI pou Travis-CI, ki ka klonaj epi itilize lè w ap kreye pwòp pwojè prezantasyon ou:

Orevwa Powerpoint! Mwen pa panse mwen pral janm bezwen ou pou prezantasyon teknik :)

Sous: www.habr.com

Add nouvo kòmantè