Би мэдээллийн технологийн карьертаа хамт олон, үйлчлүүлэгчиддээ олон арван илтгэл тавьж, илтгэл тавьсан гэж боддог. Олон жилийн турш Powerpoint бол слайд үйлдвэрлэх хэрэгслийн хувьд миний хувьд байгалийн бөгөөд найдвартай сонголт байсан. Харин энэ жил байдал чанарын хувьд өөрчлөгдсөн. XNUMX-р сараас XNUMX-р сар хүртэл би таван чуулганд үг хэлэх боломж олдсон бөгөөд илтгэлүүдийн слайдыг богино хугацаанд, гэхдээ чанартай бэлтгэх шаардлагатай байв. Слайдуудын визуал дизайнтай холбоотой ажлын тэр хэсгийг бусад хүмүүст шилжүүлэх тухай асуулт гарч ирэв. Би нэг удаа дизайнертай ажиллахыг оролдсон бөгөөд .pptx файлуудыг шуудангаар илгээсэн боловч ажил эмх замбараагүй болж хувирав: слайдын аль хувилбар нь "хамгийн шинэ" болохыг хэн ч мэдэхгүй, Powerpoint-ийн ялгаанаас болж байршил нь "хөдөлж" байв. Манай машин дээрх хувилбарууд болон фонтууд . Тэгээд би шинэ зүйл туршиж үзэхээр шийдсэн. Би үүнийг туршиж үзсэн бөгөөд түүнээс хойш би Powerpoint руу буцаж очих талаар огт бодоогүй.
Бид юу хүсч байна
Ойролцоогоор жил хагасын өмнө манай компани Word программыг төслийн баримт бичгийг үүсгэхээ больсон бөгөөд ижил асуудалтай тулгарсан: Word програм нь жижиг баримт бичгийг бичихэд тохиромжтой боловч хэмжээ нэмэгдэхийн хэрээр хамтран ажиллах, өндөр чанартай, чанартай материал олж авахад бэрхшээлтэй тулгардаг. нэгдсэн загвар. Бидний сонголт унав , мөн бид энэ сонголтдоо баярлахаа больдоггүй, гэхдээ энэ бол тусдаа өгүүллийн сэдэв юм. Ойролцоогоор бид DevOps-ийн "бүх зүйл код" гэсэн зарчмуудын нэгний үр нөлөөг олж мэдсэн тул танилцуулгын слайд үүсгэх шинэ технологид тавигдах шаардлагуудыг сонгох нь маш тодорхой байв.
- Үзүүлэн нь тэмдэглэгээний хэл дээрх энгийн текст файл байх ёстой.
- Манай слайдууд нь хөгжлийн төслүүдийн тухай байдаг тул тэмдэглэгээ нь гадны системд хандахгүйгээр оруулахад хялбар байх ёстой.
- синтакс тодруулсан кодын хэсгүүд,
- сумаар холбогдсон геометрийн хэлбэрийн энгийн диаграммууд,
- UML диаграмм, урсгал диаграмм болон бусад.
- Танилцуулгын ноорог хувилбарын хяналтын системд хадгалагдах ёстой.
- Дууссан слайдыг баталгаажуулах, угсрах ажлыг CI системээр хийх ёстой.
Өнөөдөр тэмдэглэгээний хэлээр слайд үүсгэх хоёр үндсэн сонголт байдаг: багц LaTeX эсвэл HTML/CSS ашиглан слайд үүсгэх хүрээнүүдийн аль нэгэнд зориулсан (, , болон бусад олон).
Хэдийгээр миний сэтгэл LaTeX-д оршдог ч би цорын ганц ашиглахгүй шийдлийг сонгох нь илүү өргөн хүрээний хүмүүст танил болсон шийдлийн талд байх ёстой гэж миний оюун ухаан зааж өгсөн. LaTeX-ийг хүн бүр мэддэггүй бөгөөд хэрэв таны өдөр тутмын дасгал нь шинжлэх ухааны нийтлэл бичихтэй холбоогүй бол энэ системийн асар том, ээдрээтэй ертөнцөд өөрийгөө дүрэх цаг гарах нь юу л бол.
Гэсэн хэдий ч HTML/CSS-ийг эзэмших нь тийм ч өргөн тархсан чадвар биш юм: Жишээ нь, би энэ талаар бүрэн эзэмшсэн байхаас хол байна. Аз болоход аль хэдийн танил болсон AsciiDoctor аврах ажилд ирдэг: хөрвүүлэгч AsciiDoctor тэмдэглэгээг ашиглан RevealJS слайд үүсгэх боломжийг танд олгоно. Мөн сурахад хялбар бөгөөд хүн бүрт хүртээмжтэй!
Слайдыг хэрхэн кодлох вэ
AsciiDoctor дээр слайд кодлохын мөн чанарыг ойлгохын тулд тодорхой жишээ өгөх нь хамгийн хялбар арга юм. Эдгээр нь энэ жил миний бага хурлын илтгэлүүдэд зориулж хийсэн бодит слайдуудаас юм.
Ар араасаа нээгдэж буй зүйлсийн гарчиг, жагсаалт бүхий слайд:
== Зачем нам Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабированиеүр дүн
Синтакс тодруулсан толгой хэсэг болон эх кодын хэсэг:
== Kafka Streams API: общая структура KStreams-приложения
[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции
Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----үр дүн
Илтгэлд бэлтгэхийн тулд кодын үзүүлэнгүүд удаа дараалан засварлаж, сайжруулдаг тул "түүхий код"-ыг слайд руу шууд хуулж, буулгах чадвар нь үнэлж баршгүй ач холбогдолтой бөгөөд энэ нь синтаксийг онцлон тэмдэглэхэд санаа зовохгүйгээр үзүүлэнг шинэчлэх боломжийг олгодог.
Гарчиг, дүрслэл, текст (слайд дээрх байрлалыг нүднүүдэд хийдэг ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===үр дүн
Заримдаа гарчиг шаардлагагүй бөгөөд санаагаа илэрхийлэхийн тулд танд бүрэн дэлгэцийн зураг хэрэгтэй болно.
[%notitle]
== Жить в легаси нелегко
image::swampman.jpg[canvas, size=cover]үр дүн
Ихэнхдээ санааг "сумаар холбосон дөрвөлжин" хэлбэрээр энгийн схемээр дэмжих шаардлагатай байдаг. Аз болоход AsciiDoctor нь системтэй нэгдсэн — оройн цэгүүд болон тэдгээрийн хоорондын холболтын тайлбар дээр үндэслэн график диаграммыг дүрслэх боломжийг олгодог хэл. Graphviz сурах муруй авдаг, гэхдээ өгсөн жишээн дээр үндэслэн үүнийг хийхэд маш хялбар! Энэ нь иймэрхүү харагдаж байна:
== Пишем “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;}
}
-----үр дүн
Зурган дээрх тайлбарыг засах, сумны чиглэлийг өөрчлөх гэх мэт шаардлагатай тохиолдолд зургийг хаа нэг газар дахин зурж, слайд руу дахин оруулахын оронд шууд танилцуулгын кодоор хийж болно. Энэ нь слайд дээр ажиллах хурдыг ихээхэн нэмэгдүүлдэг.
Илүү төвөгтэй жишээ:
== Невоспроизводимая сборка
[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;}
}
-----үр дүн
Дашрамд хэлэхэд, Графвизтэй туршилт хийж, хуудсан дээрх зургуудыг дибаг хийх нь тохиромжтой .
Эцэст нь, хэрэв та слайдад урсгал диаграмм, ангиллын диаграмм эсвэл бусад стандартчилсан диаграммыг оруулах шаардлагатай бол AsciiDoctor-тэй нэгдсэн өөр систем аврах ажилд ирж болно. . Миний хамтран зүтгэгч Николай Поташников PlantUML-ийн өргөн боломжуудын талаар бичсэн .
Танилцуулгын төслийг хувилбарын хяналтын системд хадгалагдсан код болгон хувиргаснаар танилцуулга дээр хамтарсан ажлыг зохион байгуулах, юуны түрүүнд контент, дизайн үүсгэх ажлыг салгах боломжтой болно. RevealJS дахь слайдуудын дизайныг (фонт, дэвсгэр, догол) CSS ашиглан тайлбарласан. Миний CSS-ийн хувийн ур чадварыг хамгийн сайн дамжуулдаг - гэхдээ CSS-тэй надаас илүү хурдан, хурдан ажилладаг хүмүүс байгаа нь аймаар биш юм. Үүний үр дүнд илтгэл тавих эцсийн хугацаа ойртож байгаа энэ үед бид Git-ээр дамжуулан өөр өөр файлууд дээр нэгэн зэрэг ажиллаж, .pptx файлыг шуудангаар илгээхэд боломжгүй хамтын ажиллагааны хурдыг хөгжүүлэх боломжтой болж байна.
Слайд бүхий HTML хуудас бүтээх
Энгийн текстийн эх сурвалжууд маш сайн, гэхдээ та тэдгээрийг хэрхэн танилцуулгад нэгтгэх вэ?
AsciiDoctor бол Ruby хэл дээр бичигдсэн төсөл бөгөөд үүнийг хэрэгжүүлэх хэд хэдэн арга байдаг. Эхлээд та Ruby хэлийг суулгаж, asciidoctor-г шууд ажиллуулж болно, энэ нь Ruby хөгжүүлэгчдэд хамгийн ойр байж магадгүй юм.
Хэрэв та Ruby-г суулгахад саад болохгүй бол докерын дүрсийг ашиглаж болно , үүнийг эхлүүлэх үед та VOLUME-ээр фолдерыг төслийн эх сурвалжтай холбож, тухайн байршилд үр дүнг авах боломжтой.
Миний сонгосон сонголт санаанд оромгүй мэт санагдаж магадгүй ч энэ нь Java хөгжүүлэгчийн хувьд миний хувьд хамгийн тохиромжтой сонголт юм. Энэ нь Ruby эсвэл docker суулгах шаардлагагүй боловч Maven скрипт ашиглан слайд үүсгэх боломжийг танд олгоно.
Гол нь төсөл - Ruby хэлний Java хэрэгжилт нь маш сайн тул Ruby-д зориулж бүтээсэн бараг бүх зүйлийг Java машин дээр ажиллуулах боломжийг олгодог бөгөөд AsciiDoctor ажиллуулах нь JRuby-н хамгийн түгээмэл хэрэглээний нэг юм.
тушаал Java төслийн нэг хэсэг болох AsciiDoctor баримт бичгийг цуглуулах боломжийг танд олгоно (бидний идэвхтэй ашигладаг). Үүний зэрэгцээ AsciiDoctor болон JRuby-г Maven автоматаар татаж авдаг бөгөөд AsciiDoctor нь JRuby орчинд ажилладаг: машин дээр юу ч суулгах шаардлагагүй! (Багцаас бусад graphviz, Хэрэв та GraphViz эсвэл PlantUML график ашиглахыг хүсвэл хэрэгтэй болно.) .adoc файлуудаа хавтсанд хийнэ үү. src/main/asciidoc/Байна. Энд байна диаграмм бүхий слайд цуглуулах.
Слайдуудыг PDF болгон хөрвүүлэх
Хэдийгээр слайдуудын HTML хувилбар нь өөрөө хангалттай боловч слайдуудын PDF хувилбартай байх шаардлагатай хэвээр байна. Нэгдүгээрт, чанга яригчийг өөрийн зөөврийн компьютертэй холбох боломжийг олгодоггүй зарим хурал дээр тэд HTML хэл дээр байгаа гэж хүлээлгүйгээр слайдыг "яг pptx эсвэл pdf форматаар" шаарддаг. Хоёрдугаарт, илтгэл дээр үзүүлсэн слайдынхаа засварлагдаагүй хувилбарыг PDF хэлбэрээр хурлын материалд нийтлэх зорилгоор зохион байгуулагчдад илгээх нь зүйтэй.
Аз болоход Node.js хэрэгсэл энэ ажлыг гүйцэтгэдэг. , үндсэн дээр баригдсан — Chrome хөтчийг удирдах автоматжуулалтын системүүд. Та RevealJS үзүүлэнг тушаалаар PDF болгон хөрвүүлэх боломжтой
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Туршилт, алдааны явцад бидний бодож олох ёстой байсан скэйп бичлэгийг эхлүүлэх хоёр заль мэх:
-
параметрээр дамжуулан нарийвчлал
-sхоёр дахин зөрүүтэй байх ёстой, эс тэгвээс хөрвүүлэлтийн үр дүнд асуудал гарч болзошгүй -
Үзүүлэнгийн HTML хувилбарын URL дээр та параметр оруулах шаардлагатай
?fragments=true, энэ нь таны слайдын завсрын төлөв бүрт тусдаа PDF хуудас үүсгэх болно (жишээлбэл, нэг нэгээр нь харуулсан бол таван сумтай таван хуудас). Энэ нь танд ийм PDF файлыг тайлангийн үеэр танилцуулга болгон ашиглах боломжийг олгоно.
Автомат угсрах, вэб дээр нийтлэх
Хувилбарын хяналтын системд өөрчлөлт оруулах үед слайдуудыг автоматаар эмхэтгэх нь тохиромжтой бөгөөд автоматаар хөрвүүлсэн слайдыг олон нийтийн хэрэгцээнд зориулан интернетэд байршуулах нь илүү тохиромжтой. Интернетийн слайдыг интернетэд холбогдсон ямар ч машин, проектороос үзэгчдийн өмнө хялбархан "тоглох" боломжтой.
Бид ажилдаа GitHub ашигладаг болохоор CI системийн байгалийн сонголт , мөн бэлэн танилцуулга зохион байгуулахад зориулагдсан - . Github.io-ийн цаад санаа нь аливаа статик контентыг салбар руу байршуулах явдал юм gh-pages GitHub дээрх таны төслийн талаар эндээс үзэх боломжтой <ваше имя>.gihub.io/<ваш проект>.
Maven ашиглан хуудасны HTML хувилбарыг эмхэтгэх, decktape ашиглан PDF рүү хөрвүүлэх, үр дүнг хэлхээнд байршуулах зэрэг TravisCI тохиргооны файлыг гүйцээнэ үү. gh-pages github.io дээр нийтлэхийн тулд иймэрхүү харагдаж байна .
TravisCI тал дээр ийм төслийг бүтээхийн тулд орчны хувьсагчдыг тохируулах хэрэгтэй
GH_REF- github.com/inponomarev/csa-hb шиг үнэ цэнэGH_TOKEN— GitHub хандалтын токен. Та үүнийг GitHub-аас өөрийн профайлын тохиргоо, Хөгжүүлэгчийн тохиргоо -> Хувийн хандалтын токенуудаас авах боломжтой. Хэрэв та олон нийтийн мэдээллийн санд үзүүлэн байршуулах юм бол энэ тэмдгийн хувьд "Нийтийн хадгалах газарт хандах" цорын ганц хандалтын түвшинг зааж өгөхөд хангалттай.GH_USER_EMAIL/GH_USER_NAME— нэр/и-мэйл хосын нэрийн өмнөөс утас руу түлхэх болноgh-pages.
Тиймээс GitHub дээрх танилцуулгын код бүрийг HTML болон PDF форматаар автоматаар сэргээж, github.io-д дахин байршуулдаг. (Мэдээжийн хэрэг, та эцсийн дүндээ нийтэд ил болгохыг хүссэн үзүүлэнгээ github.io-д байршуулах хэрэгтэй.)
Төслийн жишээ
Эцэст нь, Travis-CI-д зориулсан Maven скрипт болон CI тохиргоо бүхий танилцуулгын төслүүдийн хэд хэдэн жишээнүүдийн холбоосыг энд оруулав.
-
(JPoint 2019-д зориулсан миний яриа)
-
(Миний Heisenbug 2019-ийн тайлан)
Баяртай Powerpoint! Би чамайг техникийн танилцуулгад хэзээ ч хэрэггүй гэж бодож байна :)
Эх сурвалж: www.habr.com