Update docs

joone · Mar 25, 2024 · 3954cd1 · 3954cd1
1 parent f656fa5
commit 3954cd1
Show file tree

Hide file tree

Showing 22 changed files with 341 additions and 10 deletions.
diff --git a/docs/early_computing_code_writing/images/image1.png b/docs/early_computing_code_writing/images/image1.png
diff --git a/docs/early_computing_code_writing/images/image10.png b/docs/early_computing_code_writing/images/image10.png
diff --git a/docs/early_computing_code_writing/images/image2.png b/docs/early_computing_code_writing/images/image2.png
diff --git a/docs/early_computing_code_writing/images/image3.png b/docs/early_computing_code_writing/images/image3.png
diff --git a/docs/early_computing_code_writing/images/image4.png b/docs/early_computing_code_writing/images/image4.png
diff --git a/docs/early_computing_code_writing/images/image5.png b/docs/early_computing_code_writing/images/image5.png
diff --git a/docs/early_computing_code_writing/images/image6.png b/docs/early_computing_code_writing/images/image6.png
diff --git a/docs/early_computing_code_writing/images/image7.png b/docs/early_computing_code_writing/images/image7.png
diff --git a/docs/early_computing_code_writing/images/image8.png b/docs/early_computing_code_writing/images/image8.png
diff --git a/docs/early_computing_code_writing/images/image9.png b/docs/early_computing_code_writing/images/image9.png
diff --git a/docs/early_computing_code_writing/index.html b/docs/early_computing_code_writing/index.html
@@ -0,0 +1,93 @@
+
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="When computers were first introduced commercially, how did people write code for computers? ..." />
+        <link rel="stylesheet" href="../assets/styles/fonts.css">
+        <link rel="stylesheet" href="../assets/styles/main.css">
+        <title>4. how did people write code in the early days of computing?</title>
+    </head>
+    <body>
+        <div class="content">
+            <header>
+                <div class="main">
+                  <a href="..">F/OSS Comics</a>
+                </div>
+                <nav>
+                  <a href="/">Home</a>
+                  <a href="/posts.html">All posts</a>
+                  <a href="/about.html">About</a>
+                  <a href="/tags">Tags</a>
+                </nav>
+            </header>
+            <main>
+              <article>
+                  <div class="title">
+                    <h1 class="title">4. how did people write code in the early days of computing?</h1>
+                    <div class="meta">Posted on Fri Dec 02 2022</div>
+                  </div>
+                  <section class="body">
+                    <p>When computers were first introduced commercially, how did people write code for computers? In fact, there was no software similar to what we have today. All functionalities were implemented as functional units in circuits. <a href="https://www.google.com/url?q=https://en.wikipedia.org/wiki/ENIAC&sa=D&source=editors&ust=1711341049446228&usg=AOvVaw1U3PAikMJQ4EVmb6eoN9Vx">ENIAC</a> was also able to run various programs by wiring each functional unit and used punch cards as a storage device[1].</p>
+<p><img src="images/image1.png" alt=""></p>
+<p>&quot;This is a computer for arithmetic operations&quot;<br>“That is a computer for breaking German ciphers”<br>&quot;Can I make a computer for ballistics calculation?&quot;<br>&quot;How many relays and vacuum tubes are needed for this?&quot;</p>
+<p>Actual computer programming has been possible since stored-program computers such as <a href="https://www.google.com/url?q=https://en.wikipedia.org/wiki/EDVAC&sa=D&source=editors&ust=1711341049446627&usg=AOvVaw3pMUWABzhb9DKjhtPgWrv4">EDVAC</a> and <a href="https://www.google.com/url?q=https://en.wikipedia.org/wiki/EDSAC&sa=D&source=editors&ust=1711341049446706&usg=AOvVaw03bTFDRy_oM4UqUERJ4eid">EDSAC</a>  were introduced in 1949. Basically, the program can be executed after it is loaded into memory.</p>
+<p>A program is made up of instructions that the machine can understand, which is called <a href="https://www.google.com/url?q=https://en.wikipedia.org/wiki/Machine_code&sa=D&source=editors&ust=1711341049446910&usg=AOvVaw2LREp4FAYRvZ4sx5KOwirP">machine code</a>. The machine language is difficult for humans to understand because it consists only of binary numbers such as 0 and 1.</p>
+<p><img src="images/image2.png" alt=""></p>
+<p>So, that’s why assembly language was born in the early age of computer programming. For example,  the users wrote executable code on EDSAC using an assembly language called Initial Orders. This is an example of an assembly language used in EDSAC [2].</p>
+<p><img src="images/image9.png" alt="">Operation code, unused, mnemonic, meaning</p>
+<p>All machine language instructions used in EDSAC are composed of 17 bits. The first column is the operation code, and the second column, 1 bit, is not used. Third column is the operand, representing the address. The last bit indicates whether the current instruction is 17 bits or 35 bits.</p>
+<p>What does mnemonic, TOS, mean? It means that it loads the value of the accumulator A into m[0]  and then initializes the accumulator A. The second command H is that it loads the multiplier register R with the data in m[2].</p>
+<p>As you can see, machine code is just binary code so it’s difficult for humans to easily understand and remember it. Therefore, assembly language is used to represent each low-level instruction or opcode with mnemonics. When assembly language is converted into machine code, we call it assembling</p>
+<p><img src="images/image3.png" alt=""></p>
+<p>    Assembly language               == Assembling == &gt;       machine code</p>
+<p>In the early days, assembling was done by hand, so the term, hand assembling, was used. Assembly language has been around since the 1950s. The early programmers must know how to use assembly language because there was no high-level language at the time.</p>
+<p> If there is no assembly tool, you still have to assemble assembly code manually by looking at the mnemonic conversion table. <img src="images/image7.png" alt=""></p>
+<p>“I’m writing code”</p>
+<p>However, keyboards and monitors did not become commercially available until the 1960s. The first computer with a monitor and keyboard was Multics, which was jointly developed by Bell Labs and MIT in 1964 [3], and in the 1970s, most computers had a terminal with a screen and keyboard. Then, how could programmers write code and check the results without a monitor and keyboard in the 1960s.<img src="images/image6.png" alt=""></p>
+<p>“Finally, I got a computer with a keyboard and a monitor”</p>
+<p>Early programmers used punched cards to write code. Punch cards were originally used for data storage from the late 19th century, and were used by the US Census Bureau for census purposes. It is easy to understand if you think of the current <a href="https://www.google.com/url?q=https://en.wikipedia.org/wiki/Optical_mark_recognition&sa=D&source=editors&ust=1711341049448063&usg=AOvVaw06E8KEgdfN-gcEH_ZHA4k6">OMR</a> sheet to mark answers.</p>
+<p>IBM had developed a punch card system at the time and was supplying the system worldwide so  the punch card was well used as an essential part of early programming.</p>
+<p><img src="images/image8.png" alt=""></p>
+<p>Punch card for Fortran programming</p>
+<p>For example, the early programmers used punch cards as a development tool. First, the programmer wrote assembly code on paper. Then they debugged by running the code in their minds. When they were convinced that there were no more errors in their code. Finally, the code was hand assembled into machine code and they filled out machine code line by line onto a punch card.</p>
+<p><img src="images/image10.png" alt=""></p>
+<p>“I need to write the code on the punch card”</p>
+<p>Programmers took the punch card to the operator of the computer room.The operator put the punch card into the punch card reader and the computer was able to execute the code loaded from the punch card reader. In reality, the programmer had to wait in line to hand the punch card to the operator and wait a long time until they received the execution result. If there is something wrong with the result, they had to do the same things over and over to get the result they wanted.</p>
+<p>:<img src="images/image4.png" alt="img\_0677"></p>
+<p>“Can you take a look at my code?”<br>“Next person”</p>
+<p>The interesting thing is that just copying a punch card is the same as copying a program, so it was possible to copy programs by writing at the time.</p>
+<p><img src="images/image5.png" alt=""></p>
+<p>References</p>
+<p>[1]<a href="https://www.google.com/url?q=http://www.seas.upenn.edu/about-seas/eniac/operation.php&sa=D&source=editors&ust=1711341049448995&usg=AOvVaw0BHU8ev95qzJaELbALWKEy"> </a><a href="https://www.google.com/url?q=http://www.seas.upenn.edu/about-seas/eniac/operation.php&sa=D&source=editors&ust=1711341049449083&usg=AOvVaw3FNZCUKQ4S0YeVR4y-PWmd">Celebrating Penn Engineering History: ENIAC</a></p>
+<p>[2]<a href="https://www.google.com/url?q=http://www.cl.cam.ac.uk/~mr10/edsacposter.pdf&sa=D&source=editors&ust=1711341049449201&usg=AOvVaw2F4lPidyA7el2cMmFV2Bvz"> </a><a href="https://www.google.com/url?q=http://www.cl.cam.ac.uk/~mr10/edsacposter.pdf&sa=D&source=editors&ust=1711341049449284&usg=AOvVaw2Z1G4Sb_ZZSenso4R17UcN">EDSAC Initial Orders and Squares Program</a></p>
+<p>[3]<a href="https://www.google.com/url?q=http://theinventors.org/library/inventors/blcomputer_keyboard.htm&sa=D&source=editors&ust=1711341049449414&usg=AOvVaw2Iz9W0ONG1RE7OAP0rzZb0"> </a><a href="https://www.google.com/url?q=http://theinventors.org/library/inventors/blcomputer_keyboard.htm&sa=D&source=editors&ust=1711341049449495&usg=AOvVaw2T5tu2AaG6b-5u4L7NkQAK">History of the Computer Keyboard</a></p>
+<p><a href="https://www.google.com/url?q=http://theinventors.org/library/inventors/blcomputer_keyboard.htm&sa=D&source=editors&ust=1711341049449651&usg=AOvVaw2yA0Dh5oHclZuct_4PDzJu"></a></p>
+
+                  </section>
+              </article>
+              <div class="comments">
+                <script src="https://utteranc.es/client.js"
+                            repo="joone/fosscomics"
+                            issue-term="pathname"
+                            theme="github-light"
+                            crossorigin="anonymous"
+                            async>
+                </script>
+              </div>
+            </main>
+
+            <footer>
+              <div style="display:flex">
+                <a class="soc" href="https://github.com/joone/fosscomics" rel="me" title="GitHub"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a>
+                <a class="border"></a><a class="soc" href="https://twitter.com/fosscomics/" rel="me" title="Twitter"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg></a>
+                <a class="border"></a>
+              </div>
+              <div class="footer-info">
+                © 2024 Joone Hur |  <a href="https://github.com/joone/archie">Archie Theme</a> | Built with <a href="https://github.com/joone/fosscomics">fosscomics</a>
+              </div>
+            </footer>
+        </div>
+    </body>
+</html>
diff --git a/docs/era_of_commercial_computers/index.html b/docs/era_of_commercial_computers/index.html
@@ -62,12 +62,12 @@ <h1 class="title">3. The Era of Commercial Computers</h1>
 <p>In 1953, IBM introduced the <a href="https://www.google.com/url?q=https://en.wikipedia.org/wiki/IBM_650&sa=D&source=editors&ust=1711339501390963&usg=AOvVaw2isEoSoA573GD7rY_dXnyO">IBM 650</a> computer, the first mass-produced computer. This computer used magnetic drums to store programs, which provided a faster access time than <a href="https://www.google.com/url?q=https://en.wikipedia.org/wiki/Drum_memory&sa=D&source=editors&ust=1711339501391117&usg=AOvVaw1HnxBxJKUboCAl5GKwPc8V">drum-based storage devices</a>. This model was relatively inexpensive and became popular in universities, so many students started to learn computer programming with this machine.</p>
 <p><img src="images/image5.png" alt=""></p>
 <p>Donald Knuth: “I also started computer programming with IBM 650 for the first time.”</p>
-<p>Professor Donald Knuth, widely known for his book series, “T<a href="https://www.google.com/url?q=https://en.wikipedia.org/wiki/The_Art_of_Computer_Programming&sa=D&source=editors&ust=1711339501391677&usg=AOvVaw2RoJgnA1TmIYqghmctSqKX">he Art of Computer Programming</a>,” first learned computer programming with the IBM 650 [2]. After this, a number of companies began to make commercial computers In the 1950s, and software engineers first made their appearance.</p>
-<p>References:</p>
-<ul>
-<li>[1] https://en.wikipedia.org/wiki/John_Mauchly</li>
-<li>[2] <a href="https://www.google.com/url?q=http://www.catonmat.net/blog/donald-knuths-first-computer&sa=D&source=editors&ust=1711339501392299&usg=AOvVaw3eyYrusgw9QKNRyKxMnkrj">http://www.catonmat.net/blog/donald-knuths-first-computer</a>/</li>
-</ul>
+<p>Professor Donald Knuth, widely known for his book series, “T<a href="https://en.wikipedia.org/wiki/The_Art_of_Computer_Programming">he Art of Computer Programming</a>,” first learned computer programming with the IBM 650 [2]. After this, a number of companies began to make commercial computers In the 1950s, and software engineers first made their appearance.</p>
+<h2>References</h2>
+<ol>
+<li>John Mauchly, <a href="https://en.wikipedia.org/wiki/John_Mauchly">wikipedia</a></li>
+<li>Donald Knuth&#39;s First Computer, <a href="http://www.catonmat.net/blog/donald-knuths-first-computer">blog</a></li>
+</ol>
 
                   </section>
               </article>

diff --git a/docs/index.html b/docs/index.html
@@ -26,6 +26,10 @@
                 <p>Comics about Free and Open Source Software</p>
               </div>
                 <section class="list-item">
+                    <h1><a href="./early_computing_code_writing">4. how did people write code in the early days of computing?</a></h1>
+                        <time>Fri Dec 02 2022</time>
+                      <div class="description">When computers were first introduced commercially, how did people write code for computers? ...</div>
+                    </section><section class="list-item">
                     <h1><a href="./era_of_commercial_computers">3. The Era of Commercial Computers</a></h1>
                         <time>Mon Jun 24 2019</time>
                       <div class="description">The computer was developed in earnest during World War II and was mainly used for military purposes..</div>

diff --git a/docs/posts.html b/docs/posts.html
@@ -23,6 +23,9 @@
               <h1 class="page-title">All posts</h1>
               <ul class="posts">
                 <li class="post">
+                    <a href="./early_computing_code_writing">4. how did people write code in the early days of computing?</a><span class="meta">
+                        Fri Dec 02 2022</span>
+                    </li><li class="post">
                     <a href="./era_of_commercial_computers">3. The Era of Commercial Computers</a><span class="meta">
                         Mon Jun 24 2019</span>
                     </li><li class="post">

diff --git a/docs/tags/Assembly_language/index.html b/docs/tags/Assembly_language/index.html
@@ -0,0 +1,43 @@
+
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="Comics about Free and Open Source Software" />
+        <link rel="stylesheet" href="../../assets/styles/fonts.css">
+        <link rel="stylesheet" href="../../assets/styles/main.css">
+        <title>F/OSS Comics</title>
+    </head>
+    <body>
+        <div class="content">
+            <header>
+                <div class="main">F/OSS Comics</div>
+                <nav>
+                  <a href="/">Home</a>
+                  <a href="/posts.html">All posts</a>
+                  <a href="/about.html">About</a>
+                  <a href="/tags">Tags</a>
+                </nav>
+            </header>
+              <h1 class="page-title">Entries tagged - "Assembly language"</h1>
+              <ul class="posts">
+
+                <li class="post">
+                    <a href="/early_computing_code_writing">4. how did people write code in the early days of computing?</a><span class="meta">
+                        Fri Dec 02 2022</span>
+                    </li>
+              </ul>
+            <footer>
+              <div style="display:flex">
+                <a class="soc" href="https://github.com/joone/fosscomics" rel="me" title="GitHub"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a>
+                <a class="border"></a><a class="soc" href="https://twitter.com/fosscomics/" rel="me" title="Twitter"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg></a>
+                <a class="border"></a>
+              </div>
+              <div class="footer-info">
+                © 2024 Joone Hur |  <a href="https://github.com/joone/archie">Archie Theme</a> | Built with <a href="https://github.com/joone/fosscomics">fosscomics</a>
+              </div>
+            </footer>
+        </div>
+    </body>
+</html>
diff --git a/docs/tags/EDSAC/index.html b/docs/tags/EDSAC/index.html
@@ -24,6 +24,9 @@ <h1 class="page-title">Entries tagged - "EDSAC"</h1>
               <ul class="posts">
 
                 <li class="post">
+                    <a href="/early_computing_code_writing">4. how did people write code in the early days of computing?</a><span class="meta">
+                        Fri Dec 02 2022</span>
+                    </li><li class="post">
                     <a href="/alan_turing_von_neumann">2. Alan Turing and Von Neumann</a><span class="meta">
                         Tue May 28 2019</span>
                     </li>