{% extends "cacsremoteservice/views/layouts/master.html" %}

{% block site-nav %}
{% include "cacsremoteservice/views/partials/site-nav.html" with active="tutorials" %}
{% endblock %}

<!-- IMPORTANT!
     To embed youtube videos, you need to use "Embed" link, not the main youtube video link.
     See https://support.google.com/youtube/answer/171780?hl=en -->

{% block main-container %}
<div id="main">
  <div id="page-body" class="tutorials-view">
    <h1>CodeScene Tutorials</h1>
    <p class="lead text-muted">
      Get more out of CodeScene by learning from the people behind the tool.
    </p>

    <div class="tutorial">
      <h2>4 key factors behind high-performing software development</h2>
      <p>
        Learn how to use CodeScene to identify high risk code and improve the code health of your codebase.
        Work with CodeScene's 4 Factor Model to understand how your organization writes code.
      </p>
      <div class="codescene-video">
        <iframe width="560" height="315"
          src="https://www.youtube.com/embed/fBFjDTOq5qI"
          title="YouTube video player"
          frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen>
        </iframe>
      </div>
    </div>

    <div class="tutorial">
      <h2>Tutorial: Visualize and measure the Code Health of your system</h2>
      <p>
        The impact of code quality depends on context. This tutorial presents a novel approach to visualize code quality via CodeScene so that – at a quick glance – we can:
        <ul>
          <li>identify any problematic modules</li>
          <li>rank their relevance</li>
          <li>tell how deep the code quality issues go</li>
        </ul>
      </p>
      <div class="codescene-video">
        <iframe width="560" height="315"
          src="https://www.youtube.com/embed/64clVEIniu4"
          title="YouTube video player"
          frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen>
        </iframe>
      </div>
    </div>

    <div class="tutorial">
      <h2>Tutorial: Prioritizing Technical Debt with Hotspots</h2>
      <p>
        Technical debt and code quality issues cost time, money, and missed deadlines.
        That’s why it’s vital to know when you can safely move ahead and implement new features
        as well as when you might have to take a step back and improve what’s already there.
        It’s a hard balance.
        A hotspot analysis helps you stay on top of it and communicate when to tip that scale.
        This tutorial explains how to interpret the hotspot analysis in CodeScene.
      </p>
      <div class="codescene-video">
        <iframe width="560" height="315"
          src="https://www.youtube.com/embed/-9Zcawg9_fE"
          title="YouTube video player"
          frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen>
        </iframe>
      </div>
    </div>

    <div class="tutorial">
      <h2>Tutorial: Automated Code Reviews with CodeScene's Pull Request integration</h2>
      <p>
        CodeScene integrates with pull requests to provide feedback and detect code quality issues via an automated code review.
        It's a popular integration that helps development teams by serving as a quality gate and early feedback loop.
        This video explains how to enable the integration and how it works.
      </p>
      <div class="codescene-video">
        <iframe width="560" height="315"
          src="https://www.youtube.com/embed/59bJbAySlSA"
          title="YouTube video player"
          frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen>
        </iframe>
      </div>
    </div>

    <div class="tutorial">
      <h2>Tutorial: CodeScene's Active Authors</h2>
      <p>
        In this tutorial we will explain CodeScene's license model based on the concept of active authors.
      </p>
      <div class="codescene-video">
        <iframe width="560" height="315"
          src="https://www.youtube.com/embed/ftNKfvDDsgo"
          title="YouTube video player"
          frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen>
        </iframe>
      </div>
    </div>

    <div class="tutorial">
      <h2>Tutorial: Configuration of PM integration</h2>
      <p>
        CodeScene provides an optional PM integration to Jira, Trello, GitHub Issues, Azure DevOps. 
        You use labels and/or issue types to distinguish different kinds of work (e.g. Bugs, Features).
        When present, CodeScene’s PM integration let you measure:
        <ul>
          <li>Accumulated costs per hotspot and sub-system</li>
          <li>Trends by work type, such as “Planned” versus “Unplanned” work</li>
        </ul>
      </p>
      <div class="codescene-video">
        <iframe width="560" height="315"
          src="https://www.youtube.com/embed/g3XU57Bh7R4"
          title="YouTube video player"
          frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen>
        </iframe>
      </div>
    </div>

  </div>
</div>
{% endblock %}