sec-pro-environment.ptx

<?xml version="1.0" encoding="UTF-8"?>

<!--*****************************************
This is part of Basic Programming
Copyright (C) 2024
Phạm Công Vinh
See the file COPYING for copying conditions.
******************************************-->

<section xml:id="sec-pro-environment" xmlns:xi="http://www.w3.org/2001/XInclude">
  <title>Our Programming Environment</title>
  <idx><h>Programming environments</h></idx>

  <objectives>
    <ul>
      <li>Learn to use the basic components of our programming environment.</li>
    </ul>
  </objectives>
  
  <p>
    To code, you need a suitable working environment. Programmers would most likely not code in Word the text editor, would they? Instead, they'd use a <term>code editor and compiler</term>.
  </p>

  <p>
    <idx><h>Programming environments</h><h>version 1</h></idx>
    In the online version of the article, our code editor and compiler is as follows:
  </p>

  <aside>
    <title>Try It Out</title>
    <p>
      <ol>
        <li>
          Run the code.
        </li>
        <li>
          Change the code however you'd like and run it again.
        </li>
      </ol>
    </p>
  </aside>

  <sage language="python">
    <input>
      a = 3
      b = 5
      print(a + b)
    </input>
  </sage>
  <problem>
    <pre>
      8
    </pre>
  </problem>
  <investigation>
    <idx><h>Code examples</h><h>programming environment 1</h></idx>
    <idx><h>Functions</h><h>print()</h></idx>
    <p></p>
    <p>
      The command <c>print()</c> has a simple job<mdash></mdash>putting data, which is located in between the parentheses, into the terminal. Here, that data is the outcome of <c>a + b</c>.
    </p>
  </investigation>

  <p>
    <idx><h>Overviews</h><h>of programming environment</h></idx>
    The environment above has these components:

    <ol>
      <li>
        <p>
          <term>Cell / Editor</term><mdash />Where code is written. In the online version, you can modify and experiment with the code.
        </p>
      </li>
      <li>
        <p>
          <term><q>Run Code</q> Button</term> (Online)<mdash />Press to execute the code.
        </p>
      </li>
      <li>
        <p>
          <term>Terminal</term> (Online)<mdash />Where output and errors, if any, are shown when running the code.
        </p>
      </li>
      <li>
        <p>
          <term>Output</term><mdash />Where <term>static</term> output is shown. It's mostly intended for the hard copy or PDF, but online users can also benefit, for example, when code servers are down for some reason.
        </p>
      </li>
      <li>
        <p>
          <term>Explanation</term><mdash />Where an explanation for the code example is given.
        </p>
      </li>
    </ol>
  </p>

  <p>
    <idx><h>Programming environments</h><h>version 2</h></idx>
    A slightly different version of the code cell is as follows:
  </p>

  <program language="python" interactive="activecode">
    <input>
      a = 3
      b = 5
      print(a + b)
    </input>
  </program>
  <problem>
    <pre>
      8
    </pre>
  </problem>
  <investigation>
    <idx><h>Code examples</h><h>programming environment 2</h></idx>
    <p>Same as above.</p>
  </investigation>

  <p>
    This runs similarly, but it also provides additional functionality. The slider allows you to work on code through repeated edit-compile-test cycles. There is also a <q>CodeLens</q> button, which activates a steppable program similar to a debugger, meaning you can watch output, variables, and other data change line by line (or statement by statement).
  </p>

  <p>
    Actually, it has another minor advantage. Refer to <xref ref="appendix-playground" text="title"/> if you're interested.
  </p>

  <insight>
    <idx><h>Insights</h><h>which programming environment</h></idx>
    <p>
      Depending on the concept, the better-suited version to demonstrate it is chosen.
    </p>
  </insight>

  <aside>
    <title>Topic(s) you might be interested in:</title>
    <p>
      <ul>
        <li>
          <p>
            <idx><h>Links</h><h>2023 survey on popular IDE</h></idx>
            <url href="https://survey.stackoverflow.co/2023/#section-most-popular-technologies-integrated-development-environment" visual="survey.stackoverflow.co/2023/#section-most-popular-technologies-integrated-development-environment">stackoverflow's 2023 survey on the most popular IDE</url>
          </p>
        </li>
      </ul>
    </p>
  </aside>

  <note>
    <idx><h>Notes</h><h>on updating code</h></idx>
    <p>
      If you update the code in a cell and re-run it, new output will be shown only in the terminal. The static output section retains the outcomes of the original code.
    </p>
  </note>

  <p>
    In this article, our environment is limited to those components for the sake of <term>simplicity</term>. Sophisticated environments have many more features helping experienced programmers to create, but for beginners they are unnecessary. Besides, their installation can be quite complicated, thus discouraging you from actually learning programming.
  </p>

  <p>
    All provided code examples can be run directly or copy-pasted and run in code cells provided in the <xref ref="appendix-playground" text="title"/>. They can also be compiled and run in external coding environments, but this article will not instruct you in that.
  </p>

  <note>
    <idx><h>Notes</h><h>on continuation code</h></idx>
    <p>
      Code cells can be a <term>continuation</term> of previous cell(s). This feature helps make some examples shorter and their explanations easier to follow. 
    </p>
  </note>

  <convention>
    <idx><h>Conventions</h><h>of continuation code</h></idx>
    <p>
      If a code cell extends another, its first line is as follows:
    </p>
  </convention>

  <sage language="python">
    <input>
      # ... 

      print(a - b)
    </input>
  </sage>
  <problem>
    <pre>
      -2
    </pre>
  </problem>

  <investigation>
    <idx><h>Code examples</h><h>continuation code</h></idx>
    <p></p>
    <p>
      Why does <c>a - b</c> result in <c>-2</c>? If you take another look at the first cell, you can see that <c>a = 3</c> and <c>b = 5</c>. So, this cell is a continuation of the first one.
    </p>
  </investigation>
    
  <note>
    <idx><h>Notes</h><h>on unexpected results</h></idx>
    <p>
      If you run a cell starting with <c># ...</c> and unexpected results or errors show up, then it's likely you haven't run the preceding cell(s).
    </p>
  </note>

  <p>
    <cd>
    </cd>
  </p>

  <exploration>
    <title>Basic Programming <mdash /> Part 2: Our Programming Environment</title>
    <idx><h>Videos</h><h>part 02</h></idx>

    <video youtube="NemW37QtxsI"/>
      
  </exploration>

</section>