Aku rumangsa wis menehi puluhan presentasi kanggo kolega, klien, lan pamicara umum ing karir IT. Wis pirang-pirang taun, Powerpoint wis dadi pilihan alami lan dipercaya kanggo aku minangka alat produksi slide. Nanging ing taun iki kahanan wis diganti qualitatively. Saka Februari nganti Mei, aku duwe kesempatan kanggo ngomong ing limang konferensi, lan slide kanggo laporan kudu disiapake ing wektu sing cendhak, nanging kanthi kualitas dhuwur. Pitakonan muncul babagan delegasi bagean saka karya kasebut babagan desain visual slide menyang wong liya. Aku tau nyoba nggarap desainer, ngirim file .pptx liwat mail, nanging karya dadi kekacauan: ora ana sing ngerti versi slide sing "paling anyar", lan tata letak "obah" amarga bedane ing Powerpoint. versi lan fonts ing mesin kita. Lan aku mutusake kanggo nyoba sing anyar. Aku nyoba, lan wiwit iku aku wis ora mikir bab bali menyang Powerpoint.
Apa sing dikarepake
Kira-kira setengah taun kepungkur, perusahaan kita mandheg nggunakake Word kanggo nggawe dokumentasi proyek, amarga nemoni masalah sing padha: sanajan Word apik kanggo ngetik dokumen cilik, amarga volume mundhak, kesulitan muncul kanthi kolaborasi lan entuk kualitas lan desain manunggal. Pilihan kita tiba ing , lan kita ora bakal mandheg bungah ing pilihan iki, nanging iki minangka topik kanggo artikel sing kapisah. Ing wektu sing padha, kita sinau efektifitas salah sawijining prinsip DevOps "kabeh minangka kode", saengga pilihan syarat kanggo teknologi anyar kanggo nggawe slide presentasi cukup jelas:
- Presentasi kudu file teks biasa ing basa markup.
- Slide kita babagan proyek pangembangan, mula markup kudu gampang dilebokake, tanpa nggunakake sistem eksternal
- fragmen kode kanthi nyorot sintaks,
- diagram prasaja ing wangun geometris disambungake dening panah,
- diagram UML, diagram alur lan liya-liyane.
- Draf presentasi kudu disimpen ing sistem kontrol versi.
- Validasi lan perakitan slide rampung kudu ditindakake ing sistem CI.
Saiki, ana rong pilihan dhasar kanggo nggawe slide ing basa markup: paket kanggo LaTeX utawa salah sawijining kerangka kanggo nggawe slide nggunakake HTML/CSS (, , lan akeh liyane).
Senajan nyawaku dumunung ing LaTeX, pikiranku ndhikte yen pilihan solusi sing ora mung aku gunakake kudu ana ing sisih solusi sing akrab karo wong sing luwih akeh. Ora saben wong ngerti LaTeX, lan yen praktik saben dina ora ana hubungane karo nulis artikel ilmiah, mula sampeyan ora bakal duwe wektu kanggo nyemplungake dhewe ing jagad gedhe lan rumit saka sistem iki.
Nanging, penguasaan HTML/CSS ora persis minangka katrampilan sing nyebar: Aku, umpamane, adoh saka pakaryan kasebut. Begjanipun, AsciiDoctor sing wis akrab teka kanggo ngluwari: konverter ngidini sampeyan nggawe slide RevealJS nggunakake markup AsciiDoctor. Lan gampang sinau lan bisa diakses kabeh wong!
Cara nggawe kode slide
Kanggo mangerteni inti saka slide coding ing AsciiDoctor, cara paling gampang yaiku menehi conto tartamtu. Iki kabeh saka slide nyata sing digawe kanggo presentasi konferensi taun iki.
Slide kanthi judhul lan dhaptar item sing mbukak siji-sijine:
== ΠΠ°ΡΠ΅ΠΌ Π½Π°ΠΌ Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* ΠΠΎΠ΄ ΠΊΠ°ΠΏΠΎΡΠΎΠΌ:
** ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ offset commit
** Π Π΅Π±Π°Π»Π°Π½ΡΠΈΡΠΎΠ²ΠΊΠ°
** ΠΠ½ΡΡΡΠ΅Π½Π½Π΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ²
** ΠΠ΅Π³ΠΊΠΎΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅asil
Header lan cuplikan kode sumber kanthi nyorot sintaks:
== Kafka Streams API: ΠΎΠ±ΡΠ°Ρ ΡΡΡΡΠΊΡΡΡΠ° KStreams-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ
[source,java]
----
StreamsConfig config = ...;
//ΠΠ΄Π΅ΡΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π²ΡΡΠΊΠΈΠ΅ ΠΎΠΏΡΠΈΠΈ
Topology topology = new StreamsBuilder()
//ΠΠ΄Π΅ΡΡ ΡΡΡΠΎΠΈΠΌ ΡΠΎΠΏΠΎΠ»ΠΎΠ³ΠΈΡ
....build();
----asil
Kanggo nyiapake dhiskusi, demo kode ngalami revisi lan perbaikan sing bola-bali, saΓ©ngga kemampuan kanggo nyalin lan nempel "kode mentah" kanthi cepet menyang slide ora ana regane, kanggo mesthekake yen demo kasebut up-to-date tanpa kuwatir babagan nyorot sintaksis.
Judhul, ilustrasi lan teks (tata letak ing slide rampung ing sel ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
βKafka Streams in Actionβ, November 2018
* ΠΡΠΈΠΌΠ΅ΡΡ ΠΊΠΎΠ΄Π° Π΄Π»Ρ Kafka 1.0
|===asil
Kadhangkala judhul ora dibutuhake, lan kanggo nggambarake titik sampeyan mung butuh gambar layar wutuh:
[%notitle]
== ΠΠΈΡΡ Π² Π»Π΅Π³Π°ΡΠΈ Π½Π΅Π»Π΅Π³ΠΊΠΎ
image::swampman.jpg[canvas, size=cover]asil
Asring gagasan perlu didhukung dening diagram prasaja, ing wangun "kotak sing disambungake dening panah." Untunge, AsciiDoctor terintegrasi karo sistem kasebut β basa sing ngidini sampeyan njlΓ¨ntrΓ¨hakΓ© diagram grafik adhedhasar gambaran saka vertex lan sambungan antarane wong-wong mau. Graphviz njupuk kurva learning, nanging adhedhasar conto sing kasedhiya, iku cukup gampang kanggo nindakake! Iki katon kaya:
== ΠΠΈΡΠ΅ΠΌ β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;}
}
-----asil
Ing kasus nalika perlu kanggo ngowahi caption ing tokoh, ngganti arah panah, etc., iki bisa rampung langsung ing kode presentation, tinimbang redrawing gambar nang endi wae lan reinserting menyang geser. Iki kanthi signifikan nambah kacepetan nggarap slide.
Conto sing luwih rumit:
== ΠΠ΅Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΠΌΠ°Ρ ΡΠ±ΠΎΡΠΊΠ°
[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;}
}
-----asil
Miturut cara, iku trep kanggo eksprimen karo Graphviz lan debug gambar ing kaca .
Pungkasan, yen sampeyan kudu nglebokake flowchart, diagram kelas utawa diagram standar liyane menyang slide, banjur sistem liyane sing terintegrasi karo AsciiDoctor bisa nylametake, . Kolegaku Nikolai Potashnikov nulis babagan kemampuan ekstensif PlantUML .
Nguripake proyek presentasi dadi kode sing disimpen ing sistem kontrol versi ndadekake bisa ngatur karya bareng ing presentasi, pisanan kabeh, kanggo misahake tugas nggawe konten lan desain. Desain slide (font, latar mburi, indentasi) ing RevealJS diterangake nganggo CSS. Katrampilan pribadiku nganggo CSS paling apik dikirimake - nanging ora medeni nalika ana wong sing nggarap CSS luwih dexterously lan luwih cepet saka kula. AkibatΓ©, ternyata kanthi tenggat wektu kanggo presentasi kanthi cepet, kita bisa nggarap file sing beda-beda kanthi bebarengan liwat Git lan ngembangake kacepetan kolaborasi sing ora mungkin nalika ngirim file .pptx liwat surat.
Nggawe kaca HTML nganggo slide
Sumber teks biasa apik banget, nanging kepiye carane sampeyan ngumpulake menyang presentasi kasebut?
AsciiDoctor minangka proyek sing ditulis ing Ruby, lan ana sawetara cara kanggo mbukak. Pisanan, sampeyan bisa nginstal basa Ruby lan mbukak asciidoctor langsung, sing mbokmenawa paling cedhak karo pangembang Ruby.
Yen sampeyan ora pengin kekacoan karo nginstal Ruby, sampeyan bisa nggunakake gambar docker , menyang ngendi, nalika diluncurake, sampeyan bisa nyambungake folder kasebut karo sumber proyek liwat VOLUME lan entuk asil ing lokasi tartamtu.
Opsi sing dakpilih bisa uga katon ora dikarepke, nanging sing paling trep kanggo aku minangka pangembang Jawa. Ora mbutuhake instalasi Ruby utawa docker, nanging ngidini sampeyan ngasilake slide nggunakake skrip Maven.
Intine yaiku proyek kasebut - Implementasine Jawa saka basa Ruby apik banget sing ngijini sampeyan kanggo mbukak meh kabeh digawe kanggo Ruby ing mesin Jawa, lan mlaku AsciiDoctor iku salah siji saka nggunakake paling umum saka JRuby.
kasedhiyan ngijini sampeyan kanggo ngumpulake dokumentasi AsciiDoctor sing bagΓ©an saka project Jawa (sing aktif digunakake). Ing wektu sing padha, AsciiDoctor lan JRuby diundhuh kanthi otomatis dening Maven, lan AsciiDoctor mlaku ing lingkungan JRuby: ora perlu nginstal apa-apa ing mesin! (Paket ora kalebu graphviz, sing dibutuhake yen sampeyan pengin nggunakake grafis GraphViz utawa PlantUML.) Cukup selehake file .adoc ing folder src/main/asciidoc/. Kene ngumpulake minger karo diagram.
Ngonversi slide menyang PDF
Senajan versi HTML saka slide cukup mandhiri, nanging isih kudu duwe versi PDF saka slide kasebut. Kaping pisanan, kedadeyan yen ing sawetara konferensi sing ora menehi speaker kesempatan kanggo nyambungake laptop dhewe, dheweke mbutuhake slide "kanthi ketat ing format pptx utawa pdf," tanpa ngarep-arep manawa uga ana ing HTML. Kapindho, luwih becik ngirim para panitia versi slide sing ora diowahi kaya sing ditampilake ing laporan kasebut, ing format PDF kanggo publikasi file ing bahan konferensi.
Untunge, sarana Node.js nangani tugas iki. , dibangun ing basis - sistem otomatis kanggo ngatur browser Chrome. Sampeyan bisa ngowahi presentasi RevealJS dadi PDF kanthi prentah
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Loro trik nalika ngluncurake decktape, sing kudu ditindakake liwat nyoba lan kesalahan:
-
resolusi liwat parameter
-skudu ditemtokake kanthi wates kaping pindho, yen ora ana masalah karo asil konversi -
ing URL saka versi HTML saka presentation sampeyan kudu pass parameter
?fragments=true, sing bakal nggawe kaca PDF sing kapisah kanggo saben status penengah slide sampeyan (contone, limang kaca kanggo limang titik peluru yen ditampilake siji-sijine). Iki bakal ngidini sampeyan nggunakake PDF kasebut dhewe minangka presentasi sajrone laporan.
DΓ©wan lan nerbitake otomatis ing web
Iku trep nalika minger dikompilasi kanthi otomatis nalika owah-owahan digawe kanggo sistem kontrol versi, lan malah luwih trep nalika minger otomatis nyawiji dikirim ing Internet kanggo panggunaan umum. Geser saka Internet bisa gampang "diputer" ing ngarep pamirsa saka mesin apa wae sing disambungake menyang Internet lan proyektor.
Amarga kita nggunakake GitHub ing karya kita, pilihan alami sistem CI yaiku , lan kanggo hosting presentasi siap-digawe - . Ide ing github.io yaiku konten statis sing dikirim menyang cabang gh-pages proyek sampeyan ing GitHub, kasedhiya ing <Π²Π°ΡΠ΅ ΠΈΠΌΡ>.gihub.io/<Π²Π°Ρ ΠΏΡΠΎΠ΅ΠΊΡ>.
Rampung file konfigurasi TravisCI, kalebu kompilasi versi HTML saka kaca nggunakake Maven, ngowahi menyang PDF nggunakake decktape, lan ngunggah asil menyang thread gh-pages kanggo publikasi ing github.io, katon kaya .
Kanggo mbangun proyek kasebut ing sisih TravisCI, sampeyan kudu ngatur variabel lingkungan
GH_REF- Nilai kaya github.com/inponomarev/csa-hbGH_TOKEN- Token akses GitHub. Sampeyan bisa entuk saka GitHub ing setelan profil, Setelan Pangembang -> Token Akses Pribadi. Yen sampeyan ngunggah presentasi menyang repositori umum, banjur kanggo token iki cukup kanggo nemtokake tingkat akses mung "Akses repositori umum".GH_USER_EMAIL/GH_USER_NAME- jeneng / pasangan email atas jenenge push kanggo thread bakal digawa metugh-pages.
Mangkono, saben kode presentasi ing GitHub ngasilake slide kanthi otomatis dibangun maneh ing format HTML lan PDF lan diunggah maneh menyang github.io. (Mesthi wae, sampeyan mung kudu ngunggah menyang github.io presentasi kasebut sing pungkasane pengin digawe umum.)
Conto proyek
Pungkasan, ana pranala menyang sawetara conto proyek presentasi kanthi skrip Maven sing disesuaikan lan konfigurasi CI kanggo Travis-CI, sing bisa dikloning lan digunakake nalika nggawe proyek presentasi sampeyan dhewe:
-
(wicaraku kanggo JPoint 2019)
-
(laporanku kanggo Heisenbug 2019)
Sugeng Powerpoint! Aku ora mikir aku bakal butuh sampeyan kanggo presentasi teknis :)
Source: www.habr.com