কোড হিসাবে উপস্থাপনা, বা কেন আমি আর পাওয়ারপয়েন্ট ব্যবহার করি না

আমি মনে করি আমি আমার আইটি ক্যারিয়ারে সহকর্মীদের, ক্লায়েন্টদের এবং জনসাধারণের কাছে কয়েক ডজন উপস্থাপনা দিয়েছি। অনেক বছর ধরে, পাওয়ারপয়েন্ট একটি স্লাইড উত্পাদন সরঞ্জাম হিসাবে আমার জন্য একটি প্রাকৃতিক এবং নির্ভরযোগ্য পছন্দ। কিন্তু এ বছর অবস্থার গুণগত পরিবর্তন হয়েছে। ফেব্রুয়ারি থেকে মে পর্যন্ত, আমি পাঁচটি সম্মেলনে বক্তৃতা করার সুযোগ পেয়েছি এবং প্রতিবেদনের স্লাইডগুলি অল্প সময়ের মধ্যে প্রস্তুত করতে হয়েছিল, তবে উচ্চ মানের সাথে। স্লাইডের ভিজ্যুয়াল ডিজাইন সম্পর্কিত কাজের সেই অংশটি অন্য লোকেদের কাছে অর্পণ করার বিষয়ে প্রশ্ন উঠেছে। আমি একবার একজন ডিজাইনারের সাথে কাজ করার চেষ্টা করেছিলাম, মেইলে .pptx ফাইল পাঠাচ্ছিলাম, কিন্তু কাজটি বিশৃঙ্খলায় পরিণত হয়েছিল: কেউ জানত না যে স্লাইডের কোন সংস্করণটি "নতুন" এবং পাওয়ারপয়েন্টের পার্থক্যের কারণে লেআউটটি "চলছে" আমাদের মেশিনে সংস্করণ এবং ফন্ট। এবং আমি নতুন কিছু চেষ্টা করার সিদ্ধান্ত নিয়েছে। আমি এটি চেষ্টা করেছি, এবং তারপর থেকে আমি পাওয়ারপয়েন্টে ফিরে যাওয়ার কথা ভাবিনি।

আমরা কি চাই

প্রায় দেড় বছর আগে, আমাদের কোম্পানি একই সমস্যার সম্মুখীন হয়ে প্রজেক্ট ডকুমেন্টেশন তৈরি করতে Word ব্যবহার করা বন্ধ করে দেয়: যদিও Word একটি ছোট ডকুমেন্ট টাইপ করার জন্য ভাল, ভলিউম বাড়ার সাথে সাথে সহযোগিতার সাথে সমস্যা দেখা দেয় এবং উচ্চ মানের এবং একীভূত নকশা। আমাদের পছন্দ উপর পড়ে AsciiDoctor, এবং আমরা এই পছন্দে আনন্দ করতে কখনই থামি না, তবে এটি একটি পৃথক নিবন্ধের বিষয়। প্রায় একই সময়ে, আমরা "কোড হিসাবে সবকিছু" এর একটি DevOps নীতির কার্যকারিতা শিখেছি, তাই উপস্থাপনা স্লাইড তৈরির জন্য নতুন প্রযুক্তির প্রয়োজনীয়তার পছন্দটি বেশ সুস্পষ্ট ছিল:

1. উপস্থাপনাটি একটি মার্কআপ ভাষায় একটি প্লেইন টেক্সট ফাইল হতে হবে।
2. আমাদের স্লাইডগুলি উন্নয়ন প্রকল্প সম্পর্কে, তাই বহিরাগত সিস্টেমগুলিকে অবলম্বন না করে মার্কআপটি সন্নিবেশ করা সহজ করা উচিত
   • সিনট্যাক্স হাইলাইটিং সহ কোড টুকরা,
   • তীর দ্বারা সংযুক্ত জ্যামিতিক আকারের আকারে সাধারণ ডায়াগ্রাম,
   • UML ডায়াগ্রাম, ফ্লোচার্ট এবং আরও অনেক কিছু।
3. উপস্থাপনা খসড়া একটি সংস্করণ নিয়ন্ত্রণ সিস্টেম সংরক্ষণ করা আবশ্যক.
4. সমাপ্ত স্লাইডের বৈধতা এবং সমাবেশ একটি CI সিস্টেমে করা উচিত।

আজ, মার্কআপ ভাষায় স্লাইড তৈরি করার জন্য দুটি মৌলিক বিকল্প রয়েছে: প্যাকেজ বিমার LaTeX এর জন্য বা HTML/CSS ব্যবহার করে স্লাইড তৈরি করার জন্য ফ্রেমওয়ার্কগুলির মধ্যে একটি (প্রকাশ করুন, মন্তব্য, deck.js এবং আরও অনেক কিছু).

যদিও আমার আত্মা LaTeX-এ নিহিত, আমার মন নির্দেশ করেছিল যে এমন একটি সমাধানের পছন্দ যা আমি একমাত্র ব্যবহার করব না এমন একটি সমাধানের পাশে থাকা উচিত যা মানুষের বৃহত্তর বৃত্তের কাছে পরিচিত। সবাই LaTeX জানে না, এবং যদি আপনার দৈনন্দিন অনুশীলন বৈজ্ঞানিক নিবন্ধ লেখার সাথে সম্পর্কিত না হয়, তাহলে এই সিস্টেমের বিশাল, জটিল জগতে নিজেকে নিমজ্জিত করার সময় আপনার কাছে নেই।

যাইহোক, এইচটিএমএল/সিএসএস-এর আয়ত্ত ঠিক একটি বিস্তৃত দক্ষতা নয়: আমি, উদাহরণস্বরূপ, এতে সম্পূর্ণ দক্ষ নই। সৌভাগ্যবশত, ইতিমধ্যে পরিচিত AsciiDoctor উদ্ধারে আসে: একটি রূপান্তরকারী asciidoctor-revealjs আপনাকে 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();
----

ফল

একটি বক্তৃতার প্রস্তুতির জন্য, কোড ডেমোগুলি বারবার সংশোধন এবং উন্নতির মধ্য দিয়ে যায়, তাই একটি স্লাইডে সরাসরি "কাঁচা কোড" কপি এবং পেস্ট করার ক্ষমতা অমূল্য, সিনট্যাক্স হাইলাইট করার বিষয়ে চিন্তা না করে ডেমোটি আপ টু ডেট আছে তা নিশ্চিত করে৷

শিরোনাম, ইলাস্ট্রেশন এবং টেক্সট (স্লাইডে লেআউট কক্ষে করা হয় AsciiDoctor টেবিল):

== 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 — একটি ভাষা যা আপনাকে শীর্ষবিন্দু এবং তাদের মধ্যে সংযোগের বর্ণনার উপর ভিত্তি করে গ্রাফ ডায়াগ্রাম বর্ণনা করতে দেয়। 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-এর সাথে সংহত আরেকটি সিস্টেম উদ্ধার করতে আসতে পারে, প্ল্যান্টইউএমএল. আমার সহকর্মী নিকোলাই পটাশনিকভ প্ল্যান্টইউএমএলের ব্যাপক ক্ষমতা সম্পর্কে লিখেছেন পৃথক পোস্ট.

উপস্থাপনা প্রকল্পটিকে একটি সংস্করণ নিয়ন্ত্রণ ব্যবস্থায় সংরক্ষিত কোডে পরিণত করার ফলে উপস্থাপনায় যৌথ কাজ সংগঠিত করা সম্ভব হয়, প্রথমত, বিষয়বস্তু এবং নকশা তৈরির কাজগুলি আলাদা করা। RevealJS-এ স্লাইডের ডিজাইন (ফন্ট, ব্যাকগ্রাউন্ড, ইন্ডেন্ট) CSS ব্যবহার করে বর্ণনা করা হয়েছে। CSS এর সাথে আমার ব্যক্তিগত দক্ষতা সবচেয়ে ভালোভাবে প্রকাশ করে এই জিআইএফ - কিন্তু এটা ভীতিকর নয় যখন এমন লোক আছে যারা আমার চেয়ে অনেক বেশি দক্ষতার সাথে এবং দ্রুত CSS নিয়ে কাজ করে। ফলস্বরূপ, এটি দেখা যাচ্ছে যে একটি উপস্থাপনার জন্য দ্রুত সময়সীমার সাথে, আমরা গিট-এর মাধ্যমে একই সাথে বিভিন্ন ফাইলে কাজ করতে পারি এবং মেইলে .pptx ফাইল পাঠানোর সময় এমন সহযোগিতার গতি বিকাশ করতে পারি যা অসম্ভব।

স্লাইড সহ একটি HTML পৃষ্ঠা তৈরি করা

প্লেইন টেক্সট উত্সগুলি দুর্দান্ত, তবে আপনি কীভাবে সেগুলি উপস্থাপনার মধ্যেই সংকলন করবেন?

AsciiDoctor রুবিতে লেখা একটি প্রকল্প, এবং এটি চালানোর বিভিন্ন উপায় রয়েছে। প্রথমত, আপনি রুবি ভাষা ইনস্টল করতে পারেন এবং সরাসরি asciidoctor চালাতে পারেন, যা সম্ভবত রুবি ডেভেলপারদের নিকটতম জিনিস।

আপনি যদি রুবি ইনস্টল করার সাথে ঝামেলা করতে না চান তবে আপনি ডকার ইমেজটি ব্যবহার করতে পারেন asciidoctor/docker-asciidoctor, যেটিতে, চালু হলে, আপনি ভলিউমের মাধ্যমে প্রোজেক্ট উত্সের সাথে ফোল্ডারটিকে সংযুক্ত করতে পারেন এবং একটি প্রদত্ত অবস্থানে ফলাফল পেতে পারেন৷

আমি যে বিকল্পটি বেছে নিয়েছি তা কিছুটা অপ্রত্যাশিত বলে মনে হতে পারে তবে এটি জাভা বিকাশকারী হিসাবে আমার পক্ষে সবচেয়ে সুবিধাজনক। এটির জন্য রুবি বা ডকার ইনস্টল করার প্রয়োজন নেই, তবে আপনাকে ম্যাভেন স্ক্রিপ্ট ব্যবহার করে স্লাইড তৈরি করতে দেয়।

মোদ্দা কথা হল প্রজেক্ট জেআরবি - রুবি ভাষার জাভা ইমপ্লিমেন্টেশন এতই ভালো যে এটি আপনাকে জাভা মেশিনে রুবির জন্য তৈরি প্রায় সব কিছু চালাতে দেয় এবং AsciiDoctor চালানো JRuby-এর সবচেয়ে সাধারণ ব্যবহারগুলির মধ্যে একটি।

উপস্থিতি asciidoctor-maven-প্লাগইন আপনাকে AsciiDoctor ডকুমেন্টেশন সংগ্রহ করতে দেয় যা একটি জাভা প্রকল্পের অংশ (যা আমরা সক্রিয়ভাবে ব্যবহার করি)। একই সময়ে, AsciiDoctor এবং JRuby Maven দ্বারা স্বয়ংক্রিয়ভাবে ডাউনলোড করা হয়, এবং AsciiDoctor JRuby পরিবেশে চলে: মেশিনে কিছু ইনস্টল করার প্রয়োজন নেই! (প্যাকেজ বাদে graphviz, যা প্রয়োজন যদি আপনি GraphViz বা PlantUML গ্রাফিক্স ব্যবহার করতে চান।) শুধু আপনার .adoc ফাইলগুলিকে একটি ফোল্ডারে রাখুন src/main/asciidoc/। এখানে পমনিকের উদাহরণডায়াগ্রাম সহ স্লাইড সংগ্রহ করা।

স্লাইডগুলিকে PDF এ রূপান্তর করুন

যদিও স্লাইডগুলির এইচটিএমএল সংস্করণটি যথেষ্ট স্বয়ংসম্পূর্ণ, তবুও স্লাইডগুলির একটি পিডিএফ সংস্করণ থাকা আবশ্যক৷ প্রথমত, এটি ঘটে যে কিছু কনফারেন্সে যেগুলি স্পিকারকে তার নিজস্ব ল্যাপটপ সংযোগ করার সুযোগ প্রদান করে না, তাদের স্লাইডগুলির প্রয়োজন হয় "কঠোরভাবে pptx বা pdf ফরম্যাটে", আশা না করে যে সেগুলি HTML-এও রয়েছে৷ দ্বিতীয়ত, সম্মেলন সামগ্রীতে ফাইল প্রকাশের জন্য পিডিএফ ফরম্যাটে আপনার স্লাইডগুলির একটি অসম্পাদিত সংস্করণ যা প্রতিবেদনে দেখানো হয়েছে সেভাবে আয়োজকদের পাঠানো ভালো।

সৌভাগ্যবশত, 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 ব্যবহার করার অনুমতি দেবে।

ওয়েবে স্বয়ংক্রিয় সমাবেশ এবং প্রকাশনা

এটি সুবিধাজনক যখন স্লাইডগুলি স্বয়ংক্রিয়ভাবে সংকলিত হয় যখন সংস্করণ নিয়ন্ত্রণ ব্যবস্থায় পরিবর্তন করা হয়, এবং আরও বেশি সুবিধাজনক যখন স্বয়ংক্রিয়ভাবে সংকলিত স্লাইডগুলি সর্বজনীন ব্যবহারের জন্য ইন্টারনেটে পোস্ট করা হয়৷ ইন্টারনেট থেকে স্লাইডগুলি ইন্টারনেটের সাথে সংযুক্ত যেকোন মেশিন এবং একটি প্রজেক্টর থেকে দর্শকদের সামনে সহজেই "বাজানো" যেতে পারে।

যেহেতু আমরা আমাদের কাজে গিটহাব ব্যবহার করি, তাই একটি সিআই সিস্টেমের স্বাভাবিক পছন্দ TravisCI, এবং রেডিমেড উপস্থাপনা হোস্ট করার জন্য - github.io. github.io এর পিছনে ধারণা হল যে কোনও স্ট্যাটিক সামগ্রী একটি শাখায় পোস্ট করা হয় gh-pages GitHub-এ আপনার প্রকল্পের, এখানে উপলব্ধ হয় <ваше имя>.gihub.io/<ваш проект>.

সম্পূর্ণ ট্র্যাভিসসিআই কনফিগারেশন ফাইল, যার মধ্যে মাভেন ব্যবহার করে পৃষ্ঠার এইচটিএমএল সংস্করণ কম্পাইল করা, ডেকটেপ ব্যবহার করে পিডিএফে রূপান্তর করা এবং ফলাফলগুলি একটি থ্রেডে আপলোড করা সহ gh-pages github.io-তে প্রকাশনার জন্য, মনে হচ্ছে সুতরাং.

TravisCI পাশে এই ধরনের একটি প্রকল্প তৈরি করতে, আপনাকে পরিবেশের ভেরিয়েবলগুলি কনফিগার করতে হবে

• GH_REF — মান যেমন github.com/inponomarev/csa-hb
• GH_TOKEN - গিটহাব অ্যাক্সেস টোকেন। আপনি এটি আপনার প্রোফাইল সেটিংস, বিকাশকারী সেটিংস -> ব্যক্তিগত অ্যাক্সেস টোকেনগুলিতে গিটহাব থেকে পেতে পারেন৷ আপনি যদি একটি পাবলিক রিপোজিটরিতে একটি উপস্থাপনা আপলোড করেন, তবে এই টোকেনের জন্য এটি শুধুমাত্র "সর্বজনীন সংগ্রহস্থল অ্যাক্সেস করুন" অ্যাক্সেস স্তর নির্দিষ্ট করা যথেষ্ট।
• GH_USER_EMAIL / GH_USER_NAME — নাম/ইমেল জোড়া যার পক্ষে থ্রেডে পুশ করা হবে gh-pages.

এইভাবে, GitHub-এ প্রেজেন্টেশন কোডের প্রতিটি কমিটের ফলে স্লাইডগুলি স্বয়ংক্রিয়ভাবে এইচটিএমএল এবং পিডিএফ ফর্ম্যাটে পুনর্নির্মাণ করা হয় এবং github.io-তে পুনরায় আপলোড করা হয়। (অবশ্যই, আপনাকে শুধুমাত্র সেই উপস্থাপনাগুলি github.io-তে আপলোড করতে হবে যা আপনি শেষ পর্যন্ত সর্বজনীন করতে চান।)

প্রকল্পের উদাহরণ

অবশেষে, এখানে কাস্টমাইজড মাভেন স্ক্রিপ্ট এবং ট্রাভিস-সিআই-এর জন্য সিআই কনফিগারেশন সহ উপস্থাপনা প্রকল্পের কয়েকটি উদাহরণের লিঙ্ক রয়েছে, যা আপনার নিজস্ব উপস্থাপনা প্রকল্পগুলি তৈরি করার সময় ক্লোন করা এবং ব্যবহার করা যেতে পারে:

• https://github.com/inponomarev/kstreams-examples (JPoint 2019 এর জন্য আমার কথা)

• https://github.com/inponomarev/csa-hb (হাইজেনবাগ 2019 এর জন্য আমার প্রতিবেদন)

বিদায় পাওয়ারপয়েন্ট! আমি মনে করি না প্রযুক্তিগত উপস্থাপনাগুলির জন্য আমার আপনার প্রয়োজন হবে :)

উত্স: www.habr.com