Es domÄju, ka savÄ IT karjerÄ esmu sniedzis desmitiem prezentÄciju kolÄÄ£iem, klientiem un publiski uzstÄjies. Jau daudzus gadus Powerpoint man ir bijusi dabiska un uzticama izvÄle kÄ priekÅ”metstikliÅu izgatavoÅ”anas rÄ«ks. TaÄu Å”ogad situÄcija ir kvalitatÄ«vi mainÄ«jusies. No februÄra lÄ«dz maijam man bija iespÄja uzstÄties piecÄs konferencÄs, un referÄtu slaidi bija jÄsagatavo Ä«sÄ laikÄ, bet kvalitatÄ«vi. RadÄs jautÄjums par slaidu vizuÄlÄ noformÄjuma darba daļas deleÄ£ÄÅ”anu citiem. Reiz mÄÄ£inÄju strÄdÄt ar dizaineru, sÅ«tot .pptx failus pa pastu, taÄu darbs izvÄrtÄs haosÄ: neviens nezinÄja, kura slaidu versija ir ājaunÄkÄā, un izkÄrtojums ākustÄjÄsā Powerpoint atŔķirÄ«bu dÄļ. versijas un fonti mÅ«su iekÄrtÄs. Un es nolÄmu izmÄÄ£inÄt kaut ko jaunu. Es to izmÄÄ£inÄju, un kopÅ” tÄ laika neesmu domÄjis atgriezties pie Powerpoint.
Ko mÄs gribam
ApmÄram pirms pusotra gada mÅ«su uzÅÄmums pÄrtrauca lietot Word projektu dokumentÄcijas veidoÅ”anai, saskÄroties ar tÄm paÅ”Äm problÄmÄm: lai gan Word ir piemÄrots neliela dokumenta ierakstÄ«Å”anai, pieaugot apjomam, rodas grÅ«tÄ«bas sadarboties un iegÅ«t augstas kvalitÄtes un vienots dizains. MÅ«su izvÄle krita , un mÄs nebeidzam priecÄties par Å”o izvÄli, taÄu Ŕī ir atseviŔķa raksta tÄma. Aptuveni tajÄ paÅ”Ä laikÄ mÄs uzzinÄjÄm par viena no DevOps principiem āviss kÄ kodsā efektivitÄti, tÄpÄc prasÄ«bu izvÄle jaunajai prezentÄcijas slaidu veidoÅ”anas tehnoloÄ£ijai bija diezgan acÄ«mredzama:
- PrezentÄcijai ir jÄbÅ«t vienkÄrÅ”a teksta failam iezÄ«mÄÅ”anas valodÄ.
- MÅ«su slaidi ir par izstrÄdes projektiem, tÄpÄc marÄ·Äjumam vajadzÄtu atvieglot ievietoÅ”anu, neizmantojot ÄrÄjÄs sistÄmas
- koda fragmenti ar sintakses izcelŔanu,
- vienkÄrÅ”as diagrammas Ä£eometrisku formu veidÄ, kas savienotas ar bultiÅÄm,
- UML diagrammas, blokshÄmas un daudz kas cits.
- PrezentÄcijas melnraksts ir jÄsaglabÄ versiju kontroles sistÄmÄ.
- Gatavo priekÅ”metstikliÅu validÄcija un montÄža jÄveic CI sistÄmÄ.
MÅ«sdienÄs slaidu izveidei iezÄ«mÄÅ”anas valodÄs ir divas pamata iespÄjas: pakotne par LaTeX vai kÄdu no ietvariem slaidu izveidei, izmantojot HTML/CSS (, , un daudzi citi).
Lai gan mana dvÄsele slÄpjas LaTeX, mans prÄts noteica, ka izvÄlei risinÄjumam, kuru es nebÅ«tu vienÄ«gais, ir jÄbÅ«t plaÅ”Äkam cilvÄku lokam pazÄ«stama risinÄjuma pusÄ. Ne visi zina LaTeX, un, ja jÅ«su ikdienas prakse nav saistÄ«ta ar zinÄtnisku rakstu rakstÄ«Å”anu, tad diez vai jums bÅ«s laiks iegremdÄties Ŕīs sistÄmas milzÄ«gajÄ, sarežģītajÄ pasaulÄ.
TomÄr HTML/CSS pÄrzinÄÅ”ana nav gluži plaÅ”i izplatÄ«ta prasme: es, piemÄram, ne tuvu nepÄrzinu to. Par laimi, palÄ«gÄ nÄk jau pazÄ«stamais AsciiDoctor: pÄrveidotÄjs ļauj izveidot RevealJS slaidus, izmantojot AsciiDoctor marÄ·Äjumu. Un tas ir viegli apgÅ«stams un pieejams ikvienam!
KÄ kodÄt slaidus
Lai saprastu AsciiDoctor slaidu kodÄÅ”anas bÅ«tÄ«bu, vienkÄrÅ”Äkais veids ir sniegt konkrÄtus piemÄrus. Tie visi ir no faktiskajiem slaidiem, ko veidoju savÄm Ŕī gada konferences prezentÄcijÄm.
Slaids ar nosaukumu un sarakstu elementos, kas tiek atvÄrti viens pÄc otra:
== ŠŠ°ŃŠµŠ¼ Š½Š°Š¼ Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* ŠŠ¾Š“ ŠŗŠ°ŠæŠ¾ŃŠ¾Š¼:
** ŠŠ²ŃŠ¾Š¼Š°ŃŠøŃŠµŃŠŗŠøŠ¹ offset commit
** Š ŠµŠ±Š°Š»Š°Š½ŃŠøŃŠ¾Š²ŠŗŠ°
** ŠŠ½ŃŃŃŠµŠ½Š½ŠµŠµ ŃŠ¾ŃŃŠ¾ŃŠ½ŠøŠµ Š¾Š±ŃŠ°Š±Š¾ŃŃŠøŠŗŠ¾Š²
** ŠŠµŠ³ŠŗŠ¾Šµ Š¼Š°ŃŃŃŠ°Š±ŠøŃŠ¾Š²Š°Š½ŠøŠµPiedzÄ«vojiet efektÄ«vu rezultÄtu spÄku
Galvene un avota koda fragments ar sintakses izcelŔanu:
== Kafka Streams API: Š¾Š±ŃŠ°Ń ŃŃŃŃŠŗŃŃŃŠ° KStreams-ŠæŃŠøŠ»Š¾Š¶ŠµŠ½ŠøŃ
[source,java]
----
StreamsConfig config = ...;
//ŠŠ“ŠµŃŃ ŃŃŃŠ°Š½Š°Š²Š»ŠøŠ²Š°ŠµŠ¼ Š²ŃŃŠŗŠøŠµ Š¾ŠæŃŠøŠø
Topology topology = new StreamsBuilder()
//ŠŠ“ŠµŃŃ ŃŃŃŠ¾ŠøŠ¼ ŃŠ¾ŠæŠ¾Š»Š¾Š³ŠøŃ
....build();
----PiedzÄ«vojiet efektÄ«vu rezultÄtu spÄku
Gatavojoties runai, koda demonstrÄcijas tiek atkÄrtoti pÄrskatÄ«tas un uzlabotas, tÄpÄc iespÄja Ätri kopÄt un ielÄ«mÄt āneapstrÄdÄto koduā tieÅ”i slaidÄ ir nenovÄrtÄjama, nodroÅ”inot, ka demonstrÄcija ir atjauninÄta, neuztraucoties par sintakses izcelÅ”anu.
Virsraksts, ilustrÄcija un teksts (izkÄrtojums slaidÄ tiek veikts ŔūnÄs ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
āKafka Streams in Actionā, November 2018
* ŠŃŠøŠ¼ŠµŃŃ ŠŗŠ¾Š“Š° Š“Š»Ń Kafka 1.0
|===PiedzÄ«vojiet efektÄ«vu rezultÄtu spÄku
Dažreiz virsraksts nav nepiecieÅ”ams, un, lai ilustrÄtu savu viedokli, jums vienkÄrÅ”i nepiecieÅ”ams pilnekrÄna attÄls:
[%notitle]
== ŠŠøŃŃ Š² Š»ŠµŠ³Š°ŃŠø Š½ŠµŠ»ŠµŠ³ŠŗŠ¾
image::swampman.jpg[canvas, size=cover]PiedzÄ«vojiet efektÄ«vu rezultÄtu spÄku
Bieži vien ideja ir jÄatbalsta ar vienkÄrÅ”u diagrammu, kas izpaužas kÄ ākvadrÄti, kas savienoti ar bultiÅÄmā. Par laimi, AsciiDoctor ir integrÄts sistÄmÄ ā valoda, kas ļauj aprakstÄ«t grafu diagrammas, pamatojoties uz virsotÅu un savienojumu starp tÄm aprakstu. Graphviz Åem mÄcÄ«Å”anÄs lÄ«kni, taÄu, pamatojoties uz sniegtajiem piemÄriem, tas ir diezgan vienkÄrÅ”i izdarÄms! Tas izskatÄs Å”Ädi:
== ŠŠøŃŠµŠ¼ ā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;}
}
-----PiedzÄ«vojiet efektÄ«vu rezultÄtu spÄku
GadÄ«jumÄ, ja ir nepiecieÅ”ams rediÄ£Ät attÄla parakstu, mainÄ«t bultiÅas virzienu utt., To var izdarÄ«t tieÅ”i prezentÄcijas kodÄ, nevis kaut kur pÄrzÄ«mÄt attÄlu un ievietot to slaidÄ. Tas ievÄrojami palielina darba Ätrumu ar slaidiem.
SarežģītÄks piemÄrs:
== ŠŠµŠ²Š¾ŃŠæŃŠ¾ŠøŠ·Š²Š¾Š“ŠøŠ¼Š°Ń ŃŠ±Š¾ŃŠŗŠ°
[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;}
}
-----PiedzÄ«vojiet efektÄ«vu rezultÄtu spÄku
Starp citu, ir Ärti eksperimentÄt ar Graphviz un atkļūdot attÄlus lapÄ .
Visbeidzot, ja slaidÄ ir jÄievieto blokshÄma, klaÅ”u diagramma vai cita standartizÄta diagramma, tad palÄ«gÄ var nÄkt cita sistÄma, kas integrÄta ar AsciiDoctor, . Mans kolÄÄ£is Nikolajs PotaÅ”Åikovs rakstÄ«ja par PlantUML plaÅ”ajÄm iespÄjÄm .
PrezentÄcijas projekta pÄrvÄrÅ”ana par kodu, kas glabÄjas versiju kontroles sistÄmÄ, ļauj organizÄt kopÄ«gu darbu pie prezentÄcijas, pirmkÄrt, nodalÄ«t satura veidoÅ”anas un dizaina uzdevumus. Slaidu dizains (fonti, foni, atkÄpes) programmÄ RevealJS ir aprakstÄ«ts, izmantojot CSS. Manas personÄ«gÄs prasmes ar CSS vislabÄk atspoguļo - bet tas nav biedÄjoÅ”i, ja ir cilvÄki, kas ar CSS strÄdÄ daudz veiklÄk un ÄtrÄk nekÄ es. RezultÄtÄ izrÄdÄs, ka strauji tuvojoties prezentÄcijas termiÅam, caur Git varam vienlaicÄ«gi strÄdÄt pie dažÄdiem failiem un attÄ«stÄ«t tÄdu sadarbÄ«bas Ätrumu, kÄds nav iespÄjams, sÅ«tot .pptx failus pa pastu.
HTML lapas izveide ar slaidiem
VienkÄrÅ”a teksta avoti ir lieliski, bet kÄ tos apkopot paÅ”Ä prezentÄcijÄ?
AsciiDoctor ir Ruby valodÄ rakstÄ«ts projekts, un ir vairÄki veidi, kÄ to palaist. PirmkÄrt, jÅ«s varat instalÄt Ruby valodu un tieÅ”i palaist asciidoctor, kas, iespÄjams, ir vistuvÄk Ruby izstrÄdÄtÄjiem.
Ja nevÄlaties sajaukt ar Ruby instalÄÅ”anu, varat izmantot doka attÄlu , kurÄ, palaižot, caur VOLUME var savienot mapi ar projekta avotiem un iegÅ«t rezultÄtu noteiktÄ vietÄ.
Manis izvÄlÄtais variants var Ŕķist nedaudz negaidÄ«ts, taÄu man kÄ Java izstrÄdÄtÄjam tÄ ir visÄrtÄkÄ. Tam nav nepiecieÅ”ama Ruby vai docker instalÄÅ”ana, taÄu tÄ Ä¼auj Ä£enerÄt slaidus, izmantojot Maven skriptu.
Lieta tÄda, ka projekts - Ruby valodas Java ievieÅ”ana ir tik laba, ka tÄ Ä¼auj Java maŔīnÄ palaist gandrÄ«z visu, kas ir izveidots Ruby, un AsciiDoctor palaiÅ”ana ir viens no visizplatÄ«tÄkajiem JRuby lietojumiem.
pieejamÄ«ba ļauj apkopot AsciiDoctor dokumentÄciju, kas ir daļa no Java projekta (ko mÄs aktÄ«vi izmantojam). TajÄ paÅ”Ä laikÄ Maven automÄtiski lejupielÄdÄ AsciiDoctor un JRuby, un AsciiDoctor darbojas JRuby vidÄ: maŔīnÄ nekas nav jÄinstalÄ! (IzÅemot iepakojumu graphviz, kas ir nepiecieÅ”ams, ja vÄlaties izmantot GraphViz vai PlantUML grafiku.) VienkÄrÅ”i ievietojiet savus .adoc failus mapÄ src/main/asciidoc/. Å eit slaidu vÄkÅ”ana ar diagrammÄm.
KonvertÄjiet slaidus uz PDF
Lai gan slaidu HTML versija ir diezgan paÅ”pietiekama, tomÄr ir nepiecieÅ”ama slaidu PDF versija. PirmkÄrt, gadÄs, ka dažÄs konferencÄs, kurÄs runÄtÄjam netiek nodroÅ”inÄta iespÄja pieslÄgt savu klÄpjdatoru, ir nepiecieÅ”ami slaidi āstingri pptx vai pdf formÄtÄā, negaidot, ka tie ir arÄ« HTML formÄtÄ. OtrkÄrt, ir laba forma nosÅ«tÄ«t organizatoriem savu slaidu nerediÄ£Ätu versiju, kÄ tie tika parÄdÄ«ti ziÅojumÄ, PDF formÄtÄ faila publicÄÅ”anai konferences materiÄlos.
Par laimi, ar Å”o uzdevumu tiek galÄ utilÄ«ta Node.js. , bÅ«vÄta uz bÄzes ā automatizÄcijas sistÄmas pÄrlÅ«ka Chrome pÄrvaldÄ«Å”anai. Ar komandu RevealJS prezentÄciju var pÄrvÄrst PDF formÄtÄ
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Divi triki, palaižot klÄja lenti, kas mums bija jÄizdomÄ, izmantojot izmÄÄ£inÄjumus un kļūdas:
-
izŔķirtspÄja, izmantojot parametru
-sjÄnorÄda ar divkÄrÅ”u rezervi, pretÄjÄ gadÄ«jumÄ var rasties problÄmas ar konvertÄÅ”anas rezultÄtiem -
prezentÄcijas HTML versijas URL ir jÄnodod parametrs
?fragments=true, kas izveidos atseviŔķu PDF lapu katram jÅ«su slaida starpstÄvoklim (piemÄram, piecas lappuses pieciem aizzÄ«mju punktiem, ja tie tiek rÄdÄ«ti viens pÄc otra). Tas ļaus jums izmantot Å”Ädu PDF failu kÄ prezentÄciju atskaites laikÄ.
AutomÄtiska montÄža un publicÄÅ”ana tÄ«meklÄ«
Tas ir Ärti, ja slaidi tiek apkopoti automÄtiski, kad tiek veiktas izmaiÅas versiju kontroles sistÄmÄ, un vÄl ÄrtÄk, kad automÄtiski apkopoti slaidi tiek ievietoti internetÄ publiskai lietoÅ”anai. Slaidus no interneta var viegli āatskaÅotā auditorijas priekÅ”Ä no jebkuras iekÄrtas, kas ir savienotas ar internetu, un projektora.
TÄ kÄ mÄs savÄ darbÄ izmantojam GitHub, CI sistÄmas dabiskÄ izvÄle ir , un gatavu prezentÄciju rÄ«koÅ”anai - . Github.io ideja ir tÄda, ka jebkurÅ” statisks saturs tiek ievietots filiÄlÄ gh-pages no jÅ«su projekta GitHub, kļūst pieejams vietnÄ <Š²Š°ŃŠµ ŠøŠ¼Ń>.gihub.io/<Š²Š°Ń ŠæŃŠ¾ŠµŠŗŃ>.
Pabeigt TravisCI konfigurÄcijas failu, tostarp lapas HTML versijas apkopoÅ”anu, izmantojot Maven, konvertÄÅ”anu uz PDF, izmantojot decktape, un rezultÄtu augÅ”upielÄdi pavedienÄ gh-pages publicÄÅ”anai vietnÄ github.io, izskatÄs .
Lai izveidotu Å”Ädu projektu TravisCI pusÄ, jums ir jÄkonfigurÄ vides mainÄ«gie
GH_REFā vÄrtÄ«ba, piemÄram, github.com/inponomarev/csa-hbGH_TOKENā GitHub piekļuves pilnvara. Varat to iegÅ«t no GitHub sava profila iestatÄ«jumos, IzstrÄdÄtÄja iestatÄ«jumi -> PersoniskÄs piekļuves pilnvaras. Ja augÅ”upielÄdÄjat prezentÄciju publiskajÄ repozitorijÄ, Å”im marÄ·ierim pietiek norÄdÄ«t vienÄ«go piekļuves lÄ«meni āPiekļuve publiskajiem repozitorijiemā.GH_USER_EMAIL/GH_USER_NAMEā vÄrds/e-pasta pÄris, kura vÄrdÄ tiks veikta nosÅ«tÄ«Å”ana uz pavedienugh-pages.
TÄdÄjÄdi katra prezentÄcijas koda ievieÅ”ana vietnÄ GitHub noved pie tÄ, ka slaidi tiek automÄtiski pÄrbÅ«vÄti HTML un PDF formÄtos un atkÄrtoti augÅ”upielÄdÄti vietnÄ github.io. (Protams, vietnÄ github.io vajadzÄtu augÅ”upielÄdÄt tikai tÄs prezentÄcijas, kuras galu galÄ vÄlaties publiskot.)
Projektu piemÄri
Visbeidzot, Å”eit ir saites uz dažiem prezentÄcijas projektu piemÄriem ar pielÄgotiem Maven skriptiem un CI konfigurÄciju Travis-CI, ko var klonÄt un izmantot, veidojot savus prezentÄcijas projektus:
-
(mana runa par JPoint 2019)
-
(mans ziÅojums par Heisenbug 2019)
Ardievu Powerpoint! Es nedomÄju, ka man kÄdreiz bÅ«si vajadzÄ«gs tehniskajÄm prezentÄcijÄm :)
Avots: www.habr.com