Saya rasa saya telah memberikan berpuluh-puluh pembentangan kepada rakan sekerja, pelanggan dan pengucapan awam dalam kerjaya IT saya. Selama bertahun-tahun, Powerpoint telah menjadi pilihan semula jadi dan boleh dipercayai untuk saya sebagai alat pengeluaran slaid. Tetapi tahun ini keadaan telah berubah secara kualitatif. Dari Februari hingga Mei, saya berpeluang bercakap di lima persidangan, dan slaid untuk laporan itu perlu disediakan dalam masa yang singkat, tetapi dengan kualiti yang tinggi. Timbul persoalan mengenai mewakilkan bahagian kerja itu mengenai reka bentuk visual slaid kepada orang lain. Saya pernah cuba bekerja dengan pereka bentuk, menghantar fail .pptx melalui mel, tetapi kerja itu bertukar menjadi huru-hara: tiada siapa yang tahu versi slaid yang mana "terbaru", dan reka letak "bergerak" disebabkan perbezaan dalam Powerpoint versi dan fon pada mesin kami. Dan saya memutuskan untuk mencuba sesuatu yang baru. Saya mencubanya, dan sejak itu saya tidak terfikir untuk kembali ke Powerpoint.
Apa yang kita mahu
Kira-kira setahun setengah yang lalu, syarikat kami berhenti menggunakan Word untuk membuat dokumentasi projek, setelah menghadapi masalah yang sama: walaupun Word bagus untuk menaip dokumen kecil, apabila volumnya bertambah, kesukaran timbul dengan kerjasama dan mendapatkan kualiti tinggi dan reka bentuk bersatu. Pilihan kami jatuh pada , dan kami tidak pernah berhenti bergembira dengan pilihan ini, tetapi ini adalah topik untuk artikel yang berasingan. Pada masa yang sama, kami mempelajari keberkesanan salah satu prinsip DevOps "semuanya sebagai kod", jadi pilihan keperluan untuk teknologi baharu untuk mencipta slaid pembentangan agak jelas:
- Pembentangan mestilah fail teks biasa dalam bahasa penanda.
- Slaid kami adalah mengenai projek pembangunan, jadi markup harus memudahkan untuk dimasukkan, tanpa menggunakan sistem luaran
- serpihan kod dengan penyerlahan sintaks,
- rajah ringkas dalam bentuk bentuk geometri yang disambungkan dengan anak panah,
- Gambar rajah UML, carta alir dan banyak lagi.
- Draf pembentangan mesti disimpan dalam sistem kawalan versi.
- Pengesahan dan pemasangan slaid siap hendaklah dilakukan dalam sistem CI.
Hari ini, terdapat dua pilihan asas untuk membuat slaid dalam bahasa penanda: pakej untuk LaTeX atau salah satu rangka kerja untuk mencipta slaid menggunakan HTML/CSS (, , dan lain-lain lagi).
Walaupun jiwa saya terletak pada LaTeX, fikiran saya menentukan bahawa pilihan penyelesaian yang bukan saya satu-satunya yang akan gunakan haruslah berpihak kepada penyelesaian yang biasa digunakan oleh masyarakat yang lebih luas. Tidak semua orang tahu LaTeX, dan jika amalan harian anda tidak berkaitan dengan menulis artikel saintifik, maka anda tidak mungkin mempunyai masa untuk melibatkan diri dalam dunia yang besar dan rumit sistem ini.
Walau bagaimanapun, penguasaan HTML/CSS bukanlah kemahiran yang meluas: Saya, sebagai contoh, jauh dari mahir sepenuhnya. Nasib baik, AsciiDoctor yang sudah biasa datang untuk menyelamatkan: penukar membolehkan anda membuat slaid RevealJS menggunakan markup AsciiDoctor. Dan ia mudah dipelajari dan boleh diakses oleh semua orang!
Cara membuat kod slaid
Untuk memahami intipati slaid pengekodan pada AsciiDoctor, cara paling mudah adalah dengan memberikan contoh khusus. Ini semua daripada slaid sebenar yang saya buat untuk pembentangan persidangan saya tahun ini.
Slaid dengan tajuk dan senarai dalam item membuka satu demi satu:
== ΠΠ°ΡΠ΅ΠΌ Π½Π°ΠΌ Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* ΠΠΎΠ΄ ΠΊΠ°ΠΏΠΎΡΠΎΠΌ:
** ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ offset commit
** Π Π΅Π±Π°Π»Π°Π½ΡΠΈΡΠΎΠ²ΠΊΠ°
** ΠΠ½ΡΡΡΠ΅Π½Π½Π΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ²
** ΠΠ΅Π³ΠΊΠΎΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅Keputusan
Pengepala dan coretan kod sumber dengan penyerlahan sintaks:
== Kafka Streams API: ΠΎΠ±ΡΠ°Ρ ΡΡΡΡΠΊΡΡΡΠ° KStreams-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ
[source,java]
----
StreamsConfig config = ...;
//ΠΠ΄Π΅ΡΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π²ΡΡΠΊΠΈΠ΅ ΠΎΠΏΡΠΈΠΈ
Topology topology = new StreamsBuilder()
//ΠΠ΄Π΅ΡΡ ΡΡΡΠΎΠΈΠΌ ΡΠΎΠΏΠΎΠ»ΠΎΠ³ΠΈΡ
....build();
----Keputusan
Sebagai persediaan untuk ceramah, demo kod menjalani semakan dan penambahbaikan berulang, jadi keupayaan untuk menyalin dan menampal "kod mentah" dengan cepat terus ke dalam slaid adalah tidak ternilai, memastikan demo itu dikemas kini tanpa perlu risau tentang penyerlahan sintaks.
Tajuk, ilustrasi dan teks (susun atur pada slaid dilakukan dalam sel ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
βKafka Streams in Actionβ, November 2018
* ΠΡΠΈΠΌΠ΅ΡΡ ΠΊΠΎΠ΄Π° Π΄Π»Ρ Kafka 1.0
|===Keputusan
Kadangkala tajuk tidak diperlukan, dan untuk menggambarkan maksud anda, anda hanya memerlukan imej skrin penuh:
[%notitle]
== ΠΠΈΡΡ Π² Π»Π΅Π³Π°ΡΠΈ Π½Π΅Π»Π΅Π³ΠΊΠΎ
image::swampman.jpg[canvas, size=cover]Keputusan
Selalunya idea perlu disokong oleh gambar rajah mudah, dalam bentuk "petak yang disambungkan dengan anak panah." Nasib baik, AsciiDoctor disepadukan dengan sistem β bahasa yang membolehkan anda menerangkan gambar rajah graf berdasarkan perihalan bucu dan sambungan di antara mereka. Graphviz mengambil keluk pembelajaran, tetapi berdasarkan contoh yang diberikan, ia agak mudah untuk dilakukan! Inilah rupanya:
== ΠΠΈΡΠ΅ΠΌ β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;}
}
-----Keputusan
Dalam kes apabila perlu untuk mengedit kapsyen pada rajah, menukar arah anak panah, dsb., ini boleh dilakukan secara langsung dalam kod persembahan, bukannya melukis semula gambar di suatu tempat dan memasukkannya semula ke dalam slaid. Ini meningkatkan kelajuan kerja pada slaid dengan ketara.
Contoh yang lebih 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;}
}
-----Keputusan
Ngomong-ngomong, adalah mudah untuk bereksperimen dengan Graphviz dan nyahpepijat imej pada halaman .
Akhir sekali, jika anda perlu memasukkan carta alir, rajah kelas atau rajah piawai lain ke dalam slaid, maka sistem lain yang disepadukan dengan AsciiDoctor boleh datang untuk menyelamatkan, . Rakan sekerja saya Nikolai Potashnikov menulis tentang keupayaan luas PlantUML .
Mengubah projek pembentangan menjadi kod yang disimpan pada sistem kawalan versi memungkinkan untuk mengatur kerja bersama pada pembentangan, pertama sekali, untuk memisahkan tugas mencipta kandungan dan reka bentuk. Reka bentuk slaid (fon, latar belakang, inden) dalam RevealJS diterangkan menggunakan CSS. Kemahiran peribadi saya dengan CSS paling baik disampaikan oleh - tetapi ia tidak menakutkan apabila ada orang yang bekerja dengan CSS dengan lebih cekap dan lebih pantas daripada saya. Akibatnya, ternyata dengan tarikh akhir yang semakin hampir untuk pembentangan, kami boleh mengusahakan fail berbeza secara serentak melalui Git dan membangunkan kelajuan kerjasama yang mustahil apabila menghantar fail .pptx melalui mel.
Membina halaman HTML dengan slaid
Sumber teks biasa bagus, tetapi bagaimana anda menyusunnya ke dalam pembentangan itu sendiri?
AsciiDoctor ialah projek yang ditulis dalam Ruby, dan terdapat beberapa cara untuk menjalankannya. Mula-mula, anda boleh memasang bahasa Ruby dan menjalankan asciidoctor secara langsung, yang mungkin merupakan perkara yang paling dekat dengan pembangun Ruby.
Jika anda tidak mahu bersusah payah memasang Ruby, anda boleh menggunakan imej docker , di mana, apabila dilancarkan, anda boleh menyambungkan folder dengan sumber projek melalui VOLUME dan mendapatkan hasilnya di lokasi tertentu.
Pilihan yang saya pilih mungkin kelihatan agak tidak dijangka, tetapi ia adalah yang paling mudah untuk saya sebagai pembangun Java. Ia tidak memerlukan pemasangan Ruby atau docker, tetapi membolehkan anda menjana slaid menggunakan skrip Maven.
Intinya ialah projek itu - Pelaksanaan Java bagi bahasa Ruby sangat baik sehingga membolehkan anda menjalankan hampir semua perkara yang dicipta untuk Ruby dalam mesin Java, dan menjalankan AsciiDoctor ialah salah satu penggunaan JRuby yang paling biasa.
ketersediaan membolehkan anda mengumpul dokumentasi AsciiDoctor yang merupakan sebahagian daripada projek Java (yang kami gunakan secara aktif). Pada masa yang sama, AsciiDoctor dan JRuby dimuat turun secara automatik oleh Maven, dan AsciiDoctor berjalan dalam persekitaran JRuby: tidak perlu memasang apa-apa pada mesin! (Tidak termasuk pakej graphviz, yang diperlukan jika anda ingin menggunakan grafik GraphViz atau PlantUML.) Hanya letakkan fail .adoc anda dalam folder src/main/asciidoc/. Berikut mengumpul slaid dengan gambar rajah.
Tukar slaid kepada PDF
Walaupun versi HTML slaid agak mencukupi, ia masih perlu untuk mempunyai versi PDF slaid. Pertama, ia berlaku bahawa pada beberapa persidangan yang tidak memberikan penceramah peluang untuk menyambungkan komputer ribanya sendiri, mereka memerlukan slaid "secara ketat dalam format pptx atau pdf," tanpa mengharapkan ia juga dalam HTML. Kedua, adalah cara yang baik untuk menghantar kepada penganjur versi slaid anda yang belum diedit seperti yang ditunjukkan pada laporan, dalam format PDF untuk penerbitan fail dalam bahan persidangan.
Nasib baik, utiliti Node.js mengendalikan tugas ini. , dibina atas dasar β sistem automasi untuk mengurus penyemak imbas Chrome. Anda boleh menukar persembahan RevealJS kepada PDF dengan arahan
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Dua helah semasa melancarkan pita pelekat, yang perlu kami hasilkan melalui percubaan dan kesilapan:
-
resolusi melalui parameter
-smesti dinyatakan dengan margin dua kali ganda, jika tidak, mungkin terdapat masalah dengan hasil penukaran -
dalam URL versi HTML pembentangan anda perlu lulus parameter
?fragments=true, yang akan membuat halaman PDF yang berasingan untuk setiap keadaan perantaraan slaid anda (contohnya, lima halaman untuk lima titik peluru jika ia ditunjukkan satu demi satu). Ini akan membolehkan anda menggunakan PDF sedemikian sendiri sebagai pembentangan semasa laporan.
Pemasangan dan penerbitan automatik di web
Ia mudah apabila slaid disusun secara automatik apabila perubahan dibuat pada sistem kawalan versi, dan lebih mudah apabila slaid yang disusun secara automatik disiarkan di Internet untuk kegunaan awam. Slaid daripada Internet boleh "dimainkan" dengan mudah di hadapan khalayak daripada mana-mana mesin yang disambungkan ke Internet dan projektor.
Oleh kerana kami menggunakan GitHub dalam kerja kami, pilihan semula jadi sistem CI ialah , dan untuk menganjurkan pembentangan sedia - . Idea di sebalik github.io ialah sebarang kandungan statik disiarkan ke cawangan gh-pages projek anda di GitHub, tersedia di <Π²Π°ΡΠ΅ ΠΈΠΌΡ>.gihub.io/<Π²Π°Ρ ΠΏΡΠΎΠ΅ΠΊΡ>.
Lengkapkan fail konfigurasi TravisCI, termasuk menyusun versi HTML halaman menggunakan Maven, menukar kepada PDF menggunakan decktape dan memuat naik hasil ke urutan gh-pages untuk penerbitan di github.io, kelihatan seperti .
Untuk membina projek sedemikian di sebelah TravisCI, anda perlu mengkonfigurasi pembolehubah persekitaran
GH_REFβ nilai seperti github.com/inponomarev/csa-hbGH_TOKENβ Token akses GitHub. Anda boleh mendapatkannya daripada GitHub dalam tetapan profil anda, Tetapan Pembangun -> Token Akses Peribadi. Jika anda memuat naik pembentangan ke repositori awam, maka untuk token ini sudah cukup untuk menentukan satu-satunya tahap akses "Akses repositori awam".GH_USER_EMAIL/GH_USER_NAMEβ pasangan nama/e-mel bagi pihak yang menolak ke utas akan dilakukangh-pages.
Oleh itu, setiap komit kod pembentangan pada GitHub menyebabkan slaid dibina semula secara automatik dalam format HTML dan PDF dan dimuat naik semula ke github.io. (Sudah tentu, anda hanya perlu memuat naik ke github.io pembentangan yang akhirnya anda mahu umumkan.)
Contoh projek
Akhir sekali, berikut ialah pautan kepada beberapa contoh projek pembentangan dengan skrip Maven tersuai dan konfigurasi CI untuk Travis-CI, yang boleh diklon dan digunakan semasa membuat projek pembentangan anda sendiri:
-
(ceramah saya untuk JPoint 2019)
-
(laporan saya untuk Heisenbug 2019)
Selamat tinggal Powerpoint! Saya tidak fikir saya akan memerlukan anda untuk pembentangan teknikal :)
Sumber: www.habr.com