Added alt text to photos on Learn Debugging Tutorial

Author: katlich112358

src/templates/pages/learn/debugging.hbs

@@ -14,7 +14,7 @@ slug: learn/
       <div class="attribution">
         This tutorial was made by the Education Working Group, during the p5.js contributor conference at the Frank-Ratchye Studio for Creative Inquiry, Carnegie Mellon University in May of 2015. The contributors to this tutorial include <a href="http://huah.net/jason/">Jason Alderman</a>, <a href="http://tegabrain.com/">Tega Brain</a>, <a href="http://taeyoonchoi.com/">Taeyoon Choi</a> and <a href="http://luisaph.com/">Luisa Pereira</a>.
       </div>
-      <img src="{{assets}}/learn/debugging/0-0.jpg" alt="" />
+      <img src="{{assets}}/learn/debugging/0-0.jpg" alt="Black and white illustration containing the text 'a field guide to debugging!'"/>
 
       <p>
         This is a field guide for debugging for everyone—whether you are beginning to code or whether you have been coding for a long time, this guide breaks down the mysterious process of solving problems.
@@ -26,15 +26,15 @@ slug: learn/
         <p>
           A bug is a gap between what you think your system is doing, and what it is actually doing. <a target="_blank"
           href="https://vimeo.com/channels/debugging" >Clay Shirky aptly describes </a>a bug as "the moment when there is both a technical problem with your code as well as a problem with your mental picture of what is happening in your code." </p>
-          <img src="{{assets}}/learn/debugging/0-1.jpg" alt="" />
+          <img src="{{assets}}/learn/debugging/0-1.jpg" alt="Two-panel black-and-white comic. First panel contains a person pointing at a mouse with the text, 'You think you moved the mouse to the circle.' Second panel contains a computer with a hand pointing to a mouse with the text, 'But the computer is actually giving instructions to move the mouse away from the circle.'" />
         </p>
 
         <p>You think you are telling the computer one thing, but it is doing something else. It may also be crashing or throwing errors. In order to close the gap, you must investigate. </p>
         <p>When you are working on a project, you may play many different roles. You are an architect when designing and planning your program, an engineer when you are developing it. Then you will be an explorer, discovering the problems and errors and testing it in all the situations in which it needs to run. You are trying to find out where it might break. Finally, when debugging you are a detective, trying to figure out how and why things broke.</p>
-        <img class="small" src="{{assets}}/learn/debugging/0-3.png" alt="" />
-        <img class="small" src="{{assets}}/learn/debugging/0-4.png" alt="" />
-        <img class="small" src="{{assets}}/learn/debugging/0-5.png" alt="" />
-        <img class="small" src="{{assets}}/learn/debugging/0-6.png" alt="" />
+        <img class="small" src="{{assets}}/learn/debugging/0-3.png" alt="Illustration of an architect with a blueprint for a house looking at an open plot of land." />
+        <img class="small" src="{{assets}}/learn/debugging/0-4.png" alt="Illustration of an engineer lowering a roof onto a house." />
+        <img class="small" src="{{assets}}/learn/debugging/0-5.png" alt="Illustration of a person being surprised when the door to a house falls to the ground." />
+        <img class="small" src="{{assets}}/learn/debugging/0-6.png" alt="Illustration of a detective with a magnifying glass examining the house." />
 
         <p>So how can you become a good detective and debug your program? Here are the ten steps that can help you become a good code sleuth. </p>
       </div>
@@ -45,36 +45,36 @@ slug: learn/
         <p>When you encounter a bug that you do not know how to solve, stop, pause and take a deep breath. Stand up, say hi to the dog, take a walk or if it's late go get some sleep. When you are frustrated, tired and upset, you are not in a good frame of mind to learn or solve a  problem.</p>
         <p>To find your errors you will need to change perspectives and become the detective. The goal is to find out what the program IS doing, rather than why it's not doing what it's supposed to. We need to get the computer to show us what it's doing.</p>
         <p>The clues are in the values of variables and flow of program.</p>
-        <img class="small_center" src="{{assets}}/learn/debugging/1-0.jpg" alt="" />
+        <img class="small_center" src="{{assets}}/learn/debugging/1-0.jpg" alt="Illustration of a person with binoculars, with a speech bubble above their containing a fluctuating chart line." />
       </div>
 
       <h3 class="start-element tutorial-btn" id="problem">2. Observe the problem </h3>
       <div class="info">
         <p>Walk someone through the issue even if they themselves do not know how to program. If no one is around, draft an email explaining what you have done and breaking down what the problem is.</p>
-        <img class="med_center" src="{{assets}}/learn/debugging/2-1.png" alt="" />
+        <img class="med_center" src="{{assets}}/learn/debugging/2-1.png" alt="Illustration of a person typing their programming issue on a computer." />
         <p>You probably won't need to actually send this email as often the act of writing it will help you to locate and identify what you need to do next. Some programmers have even been known to explain their problem to a friendly inanimate object like a rubber ducky.</p>
-        <img class="med_center" src="{{assets}}/learn/debugging/2-2.png" alt="" />
+        <img class="med_center" src="{{assets}}/learn/debugging/2-2.png" alt="Illustration of a person verbalizing their programming issue to a rubber duck." />
         <p>
           This is also a good time to add comments to your code that tell you exactly what each of your functions is doing.
           Some coders also print out their code (or a section of it) and go through it line by line, tracing the path of variables and making notes.
         </p>
-        <img class="med_center" src="{{assets}}/learn/debugging/2-3.jpg" alt="" />
+        <img class="med_center" src="{{assets}}/learn/debugging/2-3.jpg" alt="Illustration of a person reviewing code printed on sheets of paper." />
       </div>
 
       <h3 class="start-element tutorial-btn" id="start">3. Before you start... </h3>
       <div class="info">
         <p>Before doing anything,  save a copy of your code that you can go back to.  While debugging you are likely to introduce other problems, break things or accidentally delete good work.</p>
-        <img class="med_center" src="{{assets}}/learn/debugging/3-1.png" alt="" />
+        <img class="med_center" src="{{assets}}/learn/debugging/3-1.png" alt="Illustration of a person exchanging save files from a safe." />
         <p>You don't want to make bigger bugs in the process of debugging.</p>
-        <img class="small_center" src="{{assets}}/learn/debugging/3-2.png" alt="" />
+        <img class="small_center" src="{{assets}}/learn/debugging/3-2.png" alt="Illustration of a bug saying 'Hello!' hiding behind a present." />
         <p>If you make a mistake or your problem gets more worse, you can always UNDO or revert back to your saved file.</p>
-        <img class="med_center" src="{{assets}}/learn/debugging/3-3.jpg" alt="" />
+        <img class="med_center" src="{{assets}}/learn/debugging/3-3.jpg" alt="Illustration of a confused person looking at an empty plot of land." />
         <p>You can try version control such as <a href="http://github.com">GitHub</a>.</p>
-        <img src="{{assets}}/learn/debugging/3-4.png" alt="" />
+        <img src="{{assets}}/learn/debugging/3-4.png" alt="Illustration of the text 'You can use git version control if you are a wizard!'" />
         <p>Write a list of what you are trying, so you can keep track of what still needs to be checked. Be  methodical, it will save you a lot of time in the long run.</p>
         <p>
           Only ever change one thing at a time.
-          <img class="med_right" src="{{assets}}/learn/debugging/3-5.jpg" alt="" />
+          <img class="med_right" src="{{assets}}/learn/debugging/3-5.jpg" alt="Illustration of two people, one turning switches off and on and the other examining a series of lights connected to the switches." />
           As you debug, you will be turning parts of your code on and off.
           Every time you make a change, test your program. If you make multiple changes before testing, you will not know which change has what effect and are likely to break things further.
         </p>
@@ -90,36 +90,36 @@ slug: learn/
           <li>Are there any typos in your paths?</li>
           <li>Check your server? etc.</li>
         </ul>
-        <img src="{{assets}}/learn/debugging/4-1.png" alt="" />
-        <img src="{{assets}}/learn/debugging/4-2.png" alt="" />
-        <img src="{{assets}}/learn/debugging/4-3.png" alt="" />
+        <img src="{{assets}}/learn/debugging/4-1.png" alt="Two-panel comic strip. First panel contains a person saying, 'Why isn't my robot bringing me lemonade?' Second panel contains a person and a robot, the perseon saying, 'Oh. It's because I forgot to attach the left arm!' Text beneath the comic strip saying 'check your file dependencies.'" />
+        <img src="{{assets}}/learn/debugging/4-2.png" alt="Two-panel comic strip. First panel contains a person on the phone saying, 'Why isn't my robot bringing me lemonade?' Second panel contains person and a robot, the person saying, 'Oh. It's because I was calling its office phone and not its mobile number!' Text beneath the comic strip saying 'Are you testing the right file?'" />
+        <img src="{{assets}}/learn/debugging/4-3.png" alt="Two-panel comic strip. First panel contains a person with a remote controller saying, 'Why isn't my robot bringing me lemonade?' Second panel contains a robot, a person drinking lemonade, and a person with a remote controller saying 'Oh. It's because I was accidentally telling Erica's robot to deliver lemonade!' Text beneath the comic strip saying 'Are you editing/saving the correct file?'" />
       </div>
 
       <h3 class="start-element tutorial-btn" id="blackboxes">5. Black boxes</h3>
       <div class="info">
         <p>A black box describes any part of your system you do not understand the inner workings of. For example, a library or perhaps a function that you have not written for yourself. Systematically take out each black box one-by-one and run your program. This will help to see if these parts of the program contain the error.</p>
-        <img class="med_left" src="{{assets}}/learn/debugging/5-1.jpg" alt="" />
-        <img class="med_right" src="{{assets}}/learn/debugging/5-2.png" alt="" />
+        <img class="med_left" src="{{assets}}/learn/debugging/5-1.jpg" alt="Illustration of two people examining two boxes." />
+        <img class="med_right" src="{{assets}}/learn/debugging/5-2.png" alt="Illustration of one person snipping the string connecting one box to two others." />
       </div>
 
       <h3 class="start-element tutorial-btn" id="reporting">6. Add error reporting</h3>
       <div class="info">
         <p>
-          <img class="med_right" src="{{assets}}/learn/debugging/6-1.png" alt="" />
+          <img class="med_right" src="{{assets}}/learn/debugging/6-1.png" alt="Illustration of a car facing a road, with one person at one of the road's exits." />
           Error reporting is how your program tells you what it is doing.
           p5.js comes with some built-in error reporting that will tell you if you have made specific syntax errors.
         </p>
 
         <p>
           It is also useful to add in your own error reporting using the console.log() function.
-          <img class="med_right" src="{{assets}}/learn/debugging/6-2.png" alt="" />
+          <img class="med_right" src="{{assets}}/learn/debugging/6-2.png" alt="Illustration of a car navigating a road and reaching one of its exits." />
           To check your program flow, add in console.log() statements to the parts of your code.
           Then when you look at your console you can see the order that things happen and where you encounter problems.
         </p>
 
         <p>
           It is also useful to add in console.log()s to print out values of variables so that you can see what they are doing.
-          <img class="med_center" src="{{assets}}/learn/debugging/6-3.jpg" alt="" />
+          <img class="med_center" src="{{assets}}/learn/debugging/6-3.jpg" alt="Illustration of a person examining a console log." />
         </p>
       </div>
 
@@ -136,14 +136,14 @@ slug: learn/
           <li>First chapter of Bocoup's and Rebecca Murphey's interactive textbook, <a href="http://jqfundamentals.com/chapter/javascript-basics">jQuery Fundamentals</a>.</li>
           <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">  Mozilla's JavaScript Guide</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference ">JavaScript Reference </a>(this is really helpful for finding all of the built-in methods for, say a String).</li>
         </ul>
-        <img class="med_center" src="{{assets}}/learn/debugging/7-1.jpg" alt="" />
+        <img class="med_center" src="{{assets}}/learn/debugging/7-1.jpg" alt="Illustration of four people conversing." />
       </div>
 
       <h3 class="start-element tutorial-btn" id="people">8. Ask people </h3>
       <div class="info">
         <p>
           Still not working?
-          <img class="med_right" src="{{assets}}/learn/debugging/8-0.jpg" alt="" />
+          <img class="med_right" src="{{assets}}/learn/debugging/8-0.jpg" alt="Illustration of two people collaborating while working on computers." />
           You can also ask people for help! They might be delighted to help you.
         </p>
         <p>
@@ -163,7 +163,7 @@ slug: learn/
           </li>
         </ul>
         <p>ALSO: start with small problems! Do one thing at a time. It's ok to make smaller sketches to test one thing (draw a star! check twitter!) and then voltron them together into a bigger sketch (draw a star that turns red when you have a notification on twitter!)</p>
-        <img class="med_center" src="{{assets}}/learn/debugging/9-1.jpg" alt="" />
+        <img class="med_center" src="{{assets}}/learn/debugging/9-1.jpg" alt="Illustration of a person having a conversation with an anthropomorphized computer." />
       </div>
 
       <h3 class="start-element tutorial-btn" id="resources">10. More resources </h3>