<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en"><generator uri="https://jekyllrb.com/" version="4.4.1">Jekyll</generator><link href="https://sivochka.com/feed.xml" rel="self" type="application/atom+xml" /><link href="https://sivochka.com/" rel="alternate" type="text/html" hreflang="en" /><updated>2026-09-14T10:05:41+00:00</updated><id>https://sivochka.com/feed.xml</id><title type="html">Figarist — Indie Game Dev, Wear OS &amp;amp; Tech Educator</title><subtitle>Personal hub of Sivochka Ihor (Figarist). Indie game developer specializing in Wear OS, computer science teacher, and retro tech enthusiast. Building tiny worlds for tiny screens.</subtitle><author><name>Sivochka Ihor</name></author><entry xml:lang="uk"><title type="html">Ультимативний Технічний Лонгрід: Jekyll Spaceship + Hub Architecture</title><link href="https://sivochka.com/blog/jekyll-spaceship-hub-architecture/" rel="alternate" type="text/html" title="Ультимативний Технічний Лонгрід: Jekyll Spaceship + Hub Architecture" /><published>2026-03-01T09:15:00+00:00</published><updated>2026-03-05T22:00:00+00:00</updated><id>https://sivochka.com/blog/jekyll-spaceship-hub-architecture-uk</id><content type="html" xml:base="https://sivochka.com/blog/jekyll-spaceship-hub-architecture/"><![CDATA[<p>Створення якісного технічного контенту вимагає не лише гарного тексту, а й потужних інструментів візуалізації. У цьому детальному огляді ми зануримося у можливості плагіна <code class="language-plaintext highlighter-rouge">jekyll-spaceship</code>, інтегрованого у нашу дизайн-систему <strong>Hub Architecture</strong>.</p>

<p>Це не просто тест — це демонстрація того, як сучасний інді-розробник може створювати документацію та уроки нового рівня.</p>

<hr />

<h2 id="1-майстерність-роботи-з-таблицями">1. Майстерність Роботи з Таблицями</h2>

<p>Таблиці — це хребет технічної документації. Завдяки <code class="language-plaintext highlighter-rouge">jekyll-spaceship</code>, ми тепер можемо створювати складні структури, які раніше потребували чистого HTML.</p>

<h3 id="складні-обєднання-rowspan--colspan">Складні Об’єднання (Rowspan &amp; Colspan)</h3>

<p>Ось таблиця енергетичного балансу клітини, що демонструє вертикальне та горизонтальне об’єднання:</p>

<table>
  <thead>
    <tr>
      <th style="text-align: center">Етап дихання</th>
      <th style="text-align: center">Проміжні продукти</th>
      <th style="text-align: center">Вихід АТФ (ATP)</th>
      <th> </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="text-align: center">Гліколіз</td>
      <td style="text-align: center">2 ATP</td>
      <td style="text-align: center"> </td>
      <td> </td>
    </tr>
    <tr>
      <td style="text-align: center">^^</td>
      <td style="text-align: center">2 NADH</td>
      <td style="text-align: center">3–5 ATP</td>
      <td> </td>
    </tr>
    <tr>
      <td style="text-align: center">Окиснення пірувату</td>
      <td style="text-align: center">2 NADH</td>
      <td style="text-align: center">5 ATP</td>
      <td> </td>
    </tr>
    <tr>
      <td style="text-align: center">Цикл Кребса</td>
      <td style="text-align: center">2 ATP</td>
      <td style="text-align: center"> </td>
      <td> </td>
    </tr>
    <tr>
      <td style="text-align: center">^^</td>
      <td style="text-align: center">6 NADH</td>
      <td style="text-align: center">15 ATP</td>
      <td> </td>
    </tr>
    <tr>
      <td style="text-align: center">^^</td>
      <td style="text-align: center">2 FADH</td>
      <td style="text-align: center">3 ATP</td>
      <td> </td>
    </tr>
    <tr>
      <td style="text-align: center">**Загальний підсумок**</td>
      <td style="text-align: center">**30–32 ATP**</td>
      <td style="text-align: center"> </td>
      <td> </td>
    </tr>
  </tbody>
</table>

<h3 id="багаторядковий-текст-у-комірках">Багаторядковий текст у комірках</h3>

<p>Іноді опис параметра не вміщується в один рядок. Символ <code class="language-plaintext highlighter-rouge">\</code> в кінці рядка дозволяє продовжити його:</p>

<p>| Параметр         | Значення | Опис                                                            |
| :————— | :——- | :————————————————————– |
| **Render Scale** | <code class="language-plaintext highlighter-rouge">1.0x</code>   | Визначає базову роздільну здатність рендерингу для основного \<br />
кадру. Зменшення цього значення покращить продуктивність на <br />
мобільних пристроях, але розмиє картинку. |
| **Post-Processing** | <code class="language-plaintext highlighter-rouge">ACES</code> | Використовує Academy Color Encoding System для <br />
кінематографічного вигляду гри. |</p>

<h3 id="беззаголовкові-таблиці-шаховий-вигляд">Беззаголовкові таблиці (Шаховий вигляд)</h3>

<p>Для Bento-карток іноді заголовок таблиці просто не потрібен. Наприклад, для візуалізації сітки чи карти:</p>

<table>
  <tbody>
    <tr>
      <td>♜</td>
      <td> </td>
      <td>♝</td>
      <td>♛</td>
      <td>♚</td>
      <td>♝</td>
      <td>♞</td>
      <td>♜</td>
    </tr>
    <tr>
      <td> </td>
      <td>♟</td>
      <td>♟</td>
      <td>♟</td>
      <td> </td>
      <td>♟</td>
      <td>♟</td>
      <td>♟</td>
    </tr>
    <tr>
      <td>♟</td>
      <td> </td>
      <td>♞</td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td>♗</td>
      <td> </td>
      <td> </td>
      <td>♟</td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td>♙</td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td>♘</td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td>♙</td>
      <td>♙</td>
      <td>♙</td>
      <td>♙</td>
      <td> </td>
      <td>♙</td>
      <td>♙</td>
      <td>♙</td>
    </tr>
    <tr>
      <td>♖</td>
      <td>♘</td>
      <td>♗</td>
      <td>♕</td>
      <td>♔</td>
      <td> </td>
      <td> </td>
      <td>♖</td>
    </tr>
  </tbody>
</table>

<hr />

<h2 id="2-математика-для-геймдева-mathjax">2. Математика для Геймдева (MathJax)</h2>

<p>Якщо ви пишете про Unity та шейдери, вам не обійтися без математики. Ми підтримуємо синтаксис LaTeX.</p>

<h3 id="рівняння-рендерингу">Рівняння рендерингу</h3>

<p>Використовуйте одиничний символ долара для інлайнової математики: $L_o(p, \omega_o) = L_e(p, \omega_o) + \int_{\Omega} f_r(p, \omega_i, \omega_o) L_i(p, \omega_i) (n \cdot \omega_i) d\omega_i$.</p>

<p>А для важливих формул використовуйте подвійні долари:</p>

<p>$$
E = mc^2
$$</p>

<p>Або щось складніше — як <strong>Нормальний Розподіл</strong>:</p>

<p>$$
f(x | \mu, \sigma^2) = \frac{1}{\sqrt{2\pi\sigma^2}} e^{-\frac{(x-\mu)^2}{2\sigma^2}}
$$</p>

<hr />

<h2 id="3-просунута-діаграмістика-mermaid">3. Просунута Діаграмістика (Mermaid)</h2>

<p>Візуалізація архітектури в реальному часі без використання PNG-зображень.</p>

<h3 id="стейт-машина-персонажа">Стейт-машина персонажа</h3>

<p>Для Unity розробки це критично:</p>

<pre><code class="language-mermaid">stateDiagram-v2
    [*] --&gt; Idle
    Idle --&gt; Walking: Move Input
    Walking --&gt; Idle: Stop
    Walking --&gt; Jumping: Space Bar
    Jumping --&gt; Landing: Velocity &lt; 0
    Landing --&gt; Idle: Touched Ground
</code></pre>

<h3 id="діаграма-ганта-план-розробки">Діаграма Ганта (План Розробки)</h3>

<p>Планування релізу Wear OS додатка:</p>

<pre><code class="language-mermaid">gantt
    title Розробка Wear OS Циферблата
    dateFormat  YYYY-MM-DD
    section Дизайн
    Прототипування в Figma   :a1, 2026-03-01, 7d
    Робота з активами (UI)   :after a1, 5d
    section Код
    Налаштування Watch Face Studio :2026-03-08, 10d
    Інтеграція датчиків серця      : 12d
    section Тести
    Бета-тест на Galaxy Watch      : 5d
</code></pre>

<h3 id="класова-діаграма">Класова Діаграма</h3>

<pre><code class="language-mermaid">classDiagram
    class PlayerController {
        +float speed
        +Jump()
        +Move()
    }
    class InputManager {
        +GetMovement()
    }
    PlayerController --&gt; InputManager : uses
</code></pre>

<hr />

<h2 id="4-мультимедійний-екосистемний-досвід">4. Мультимедійний Екосистемний Досвід</h2>

<p>Забули як вставляти відео? Просто вставте лінк в блок зображення!</p>

<h3 id="youtube-навчальні-відео">YouTube (Навчальні відео)</h3>

<p><img src="https://www.youtube.com/watch?v=Ptk_1Dc2iPY" alt="" /></p>

<h3 id="spotify-для-фонового-настрою">Spotify (Для фонового настрою)</h3>

<p><img src="https://open.spotify.com/track/4Dg5moVCTqxAb7Wr8Dq2T5" alt="" /></p>

<hr />

<h2 id="5-поліфіли-та-емодзі">5. Поліфіли та Емодзі</h2>

<p>Списки тепер автоматично обробляються правильно, навіть якщо ми хочемо екранувати їх:</p>

<p>⁣1. Перший пункт (фактично 1) <br />
⁣3. Другий пункт (фактично 3)</p>

<p>А емодзі стали частиною тексту: я обожнюю цей плагін :rocket:! Ми додали підтримку GitHub-flavored емодзі, тому вони завантажуються з надійного CDN.</p>

<hr />

<h2 id="6-гібридний-html-та-bento-специфіка">6. Гібридний HTML та Bento Специфіка</h2>

<p>Коли стандартного Markdown замало, ми використовуємо HTML з Markdown всередині завдяки <code class="language-plaintext highlighter-rouge">&lt;script type="text/markdown"&gt;</code>.</p>

<div class="banner--translation-warning">
  💡 **Важливо:** Ви можете комбінувати складні Grid-структури з Markdown контентом. Це дозволяє створювати унікальні Bento-лейаути, де кожна комірка — це окремий технічний блок.
</div>

<hr />

<h2 id="7-тестування-копіювання-коду-copy-button">7. Тестування Копіювання Коду (Copy Button)</h2>

<p>Наші блоки коду тепер мають автоматичну кнопку копіювання. Спробуйте скопіювати цей C# скрипт для Unity:</p>

<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">using</span> <span class="nn">UnityEngine</span><span class="p">;</span>

<span class="c1">// Ультимативний тест копіювання коду</span>
<span class="k">public</span> <span class="k">class</span> <span class="nc">CopyTest</span> <span class="p">:</span> <span class="n">MonoBehaviour</span>
<span class="p">{</span>
    <span class="p">[</span><span class="n">SerializeField</span><span class="p">]</span> <span class="k">private</span> <span class="kt">string</span> <span class="n">message</span> <span class="p">=</span> <span class="s">"Код скопійовано успішно! 🚀"</span><span class="p">;</span>

    <span class="k">void</span> <span class="nf">Start</span><span class="p">()</span>
    <span class="p">{</span>
        <span class="n">Debug</span><span class="p">.</span><span class="nf">Log</span><span class="p">(</span><span class="n">message</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>

<p>Ця функція працює завдяки нашому Vanilla JS в <code class="language-plaintext highlighter-rouge">script.js</code> (§7) і ідеально вписується в Hub Architecture.</p>

<hr />

<h2 id="8-тестування-роздільної-здатності-зображень-responsive-images">8. Тестування роздільної здатності зображень (Responsive Images)</h2>

<p>Для перевірки оптимізації та рендерингу на різних пристроях ми додаємо зображення у різних форматах (1K, 2K, 4K). Завдяки <code class="language-plaintext highlighter-rouge">jekyll-webp</code>, ці зображення будуть автоматично оптимізовані в майбутньому (якщо ми їх збережемо локально), а поки використовуємо тестові плейсхолдери.</p>

<h3 id="1k-зображення-1920x1080">1K Зображення (1920x1080)</h3>

<p><img src="/assets/images/1k.webp" alt="Test Image 1K" /></p>

<h3 id="2k-зображення-2560x1440">2K Зображення (2560x1440)</h3>

<p><img src="/assets/images/2k.webp" alt="Test Image 2K" /></p>

<h3 id="4k-зображення-3840x2160">4K Зображення (3840x2160)</h3>

<p><img src="/assets/images/4k.webp" alt="Test Image 4K" /></p>

<hr />

<h2 id="висновок">Висновок</h2>

<p>Це був довгий шлях до ідеальної інтеграції. Тепер наш блог — це справжній “космічний корабель” (Spaceship) для технічного контенту. Ми поєднали <strong>Vanilla CSS</strong>, <strong>Liquid</strong> та потужність <strong>Spaceship</strong>, не пожертвувавши швидкістю завантаження (адже Mermaid та MathJax завантажуються лише там, де вони потрібні).</p>

<p><strong>Вперед до нових висот розробки!</strong> 🎮✨</p>]]></content><author><name>Sivochka Ihor</name></author><category term="gamedev" /><category term="jekyll" /><category term="spaceship" /><category term="unity" /><category term="mermaid" /><category term="mathjax" /><summary type="html"><![CDATA[Глибоке занурення в можливості jekyll-spaceship для технічного блогу на Unity: Mermaid, MathJax, складні таблиці та медіа-контент.]]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://sivochka.com/assets/images/default-social-card.webp" /><media:content medium="image" url="https://sivochka.com/assets/images/default-social-card.webp" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry xml:lang="en"><title type="html">Teaching Students Programming Fundamentals with Minecraft and Python</title><link href="https://sivochka.com/blog/minecraft-python/" rel="alternate" type="text/html" title="Teaching Students Programming Fundamentals with Minecraft and Python" /><published>2026-02-26T08:15:00+00:00</published><updated>2026-09-14T10:05:20+00:00</updated><id>https://sivochka.com/blog/minecraft-python-en</id><content type="html" xml:base="https://sivochka.com/blog/minecraft-python/"><![CDATA[<p>For modern youth, learning programming languages is becoming increasingly relevant for both future employment and creative expression. Fostering a genuine interest in computing early on is essential, and games offer an engaging gateway.</p>

<p>While online interactive platforms like Scratch, CodeMonkey, Tynker, or CodeCombat introduce fundamental logic, teenagers thrive when educational tools intersect directly with immersive gameplay. Minecraft stands out as a premier sandbox environment with rich educational capabilities that integrate seamlessly into computer science curricula.</p>

<p>Minecraft is an open sandbox without a predefined linear plot, providing an infinite virtual canvas where learners build, modify, and interact with peers. Today, Minecraft is deployed as an educational platform in thousands of schools worldwide—across the United States, Finland, Sweden, Australia, and Ukraine. Students explore navigation, architectural modeling, 3D coordinate geometry, chemistry, and algorithmic problem-solving.</p>

<p>Combining play with guided technical exercises allows students to grasp complex computer science concepts intuitively and enthusiastically. Practical programming challenges written in Python for Minecraft provide accessible, tangible results in real time.</p>

<h3 id="the-3-dimensional-minecraft-coordinate-space">The 3-Dimensional Minecraft Coordinate Space</h3>

<p>First released in 2008, Minecraft lets players manipulate block components within a dynamic 3D voxel world. Each block represents approximately a 1m × 1m × 1m cube located at coordinates <code class="language-plaintext highlighter-rouge">(x, y, z)</code>:</p>
<ul>
  <li><code class="language-plaintext highlighter-rouge">x</code> and <code class="language-plaintext highlighter-rouge">z</code> determine horizontal East/West and North/South axes.</li>
  <li><code class="language-plaintext highlighter-rouge">y</code> represents vertical elevation.</li>
</ul>

<p>Understanding this 3D coordinate system is foundational for robotic motion, game development, and architectural modeling.</p>

<h3 id="python-and-the-minecraft-pi-edition-api">Python and the Minecraft Pi Edition API</h3>

<p>In 2013, the Raspberry Pi edition of Minecraft introduced a built-in Python client API, unlocking direct interaction between external code scripts and the live game environment.</p>

<p>The core API client exposes the primary <code class="language-plaintext highlighter-rouge">Minecraft</code> class, with modules addressing <code class="language-plaintext highlighter-rouge">Player</code>, <code class="language-plaintext highlighter-rouge">Camera</code>, <code class="language-plaintext highlighter-rouge">Entities</code>, and <code class="language-plaintext highlighter-rouge">Events</code>:</p>

<ul>
  <li>Posting real-time messages to the in-game chat log</li>
  <li>Polling the player’s exact real-time coordinates</li>
  <li>Teleporting entities and manipulating position vectors</li>
  <li>Querying block IDs at target coordinates</li>
  <li>Instantiating, modifying, and destroying voxels algorithmically</li>
</ul>

<p>Here is a minimal script sending a greeting directly to the in-game chat:</p>

<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kn">import</span> <span class="nn">mcpi.minecraft</span> <span class="k">as</span> <span class="n">minecraft</span>

<span class="n">mc</span> <span class="o">=</span> <span class="n">minecraft</span><span class="p">.</span><span class="n">Minecraft</span><span class="p">.</span><span class="n">create</span><span class="p">()</span>
<span class="n">mc</span><span class="p">.</span><span class="n">postToChat</span><span class="p">(</span><span class="s">"Hello, World!"</span><span class="p">)</span>
</code></pre></div></div>

<h3 id="extending-capabilities-minecraftstuff-and-the-3d-turtle">Extending Capabilities: minecraftstuff and the 3D Turtle</h3>

<p>Python’s open ecosystem enables developers to build helper libraries that abstract repetitive tasks or introduce advanced paradigms.</p>

<p>The <code class="language-plaintext highlighter-rouge">minecraftstuff</code> package provides drawing primitives, transformation utilities (rotation, translation), and an implementation of <strong>Minecraft Turtle</strong>. Unlike classical 2D Python turtle graphics, the Minecraft Turtle can navigate and extrude geometry across all three physical dimensions.</p>

<p>For instance, generating a 3D spiral spring in-game using procedural mathematics and the turtle pitch command (<code class="language-plaintext highlighter-rouge">turtle.up</code>):</p>

<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kn">from</span> <span class="nn">mcpi.minecraft</span> <span class="kn">import</span> <span class="n">Minecraft</span>
<span class="kn">from</span> <span class="nn">mcpi</span> <span class="kn">import</span> <span class="n">block</span>
<span class="kn">from</span> <span class="nn">minecraftstuff</span> <span class="kn">import</span> <span class="n">MinecraftTurtle</span>

<span class="n">mc</span> <span class="o">=</span> <span class="n">Minecraft</span><span class="p">.</span><span class="n">create</span><span class="p">()</span>
<span class="n">pos</span> <span class="o">=</span> <span class="n">mc</span><span class="p">.</span><span class="n">player</span><span class="p">.</span><span class="n">getPos</span><span class="p">()</span>
<span class="n">turtle</span> <span class="o">=</span> <span class="n">MinecraftTurtle</span><span class="p">(</span><span class="n">mc</span><span class="p">,</span> <span class="n">pos</span><span class="p">)</span>

<span class="c1"># Set wool block material with color modifier
</span><span class="n">turtle</span><span class="p">.</span><span class="n">penblock</span><span class="p">(</span><span class="n">block</span><span class="p">.</span><span class="n">WOOL</span><span class="p">.</span><span class="nb">id</span><span class="p">,</span> <span class="mi">11</span><span class="p">)</span>
<span class="n">turtle</span><span class="p">.</span><span class="n">speed</span><span class="p">(</span><span class="mi">10</span><span class="p">)</span>
<span class="n">turtle</span><span class="p">.</span><span class="n">up</span><span class="p">(</span><span class="mi">5</span><span class="p">)</span>

<span class="k">for</span> <span class="n">step</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">1000</span><span class="p">):</span>
    <span class="n">turtle</span><span class="p">.</span><span class="n">forward</span><span class="p">(</span><span class="mi">2</span><span class="p">)</span>
    <span class="n">turtle</span><span class="p">.</span><span class="n">right</span><span class="p">(</span><span class="mi">10</span><span class="p">)</span>
</code></pre></div></div>

<h3 id="educational-takeaways">Educational Takeaways</h3>

<p>Leveraging real-time game engines for computer science education maintains high student motivation. It bridges abstract algorithmic concepts with immediate visual feedback, encourages experimental debugging, and builds confidence in developing independent software.</p>]]></content><author><name>Sivochka Ihor</name></author><category term="education" /><category term="python" /><category term="minecraft" /><category term="education" /><category term="coding" /><summary type="html"><![CDATA[How to use Minecraft Pi Edition and Python to teach school students foundational programming and 3D spatial thinking.]]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://sivochka.com/assets/images/default-social-card.webp" /><media:content medium="image" url="https://sivochka.com/assets/images/default-social-card.webp" xmlns:media="http://search.yahoo.com/mrss/" /></entry></feed>