<commit_before><!DOCTYPE html>
<html lang="en">
<head>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>Problem Solving</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">

  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css">
  <!-- <link rel="stylesheet" href="/home/dev/workspace/oliver-jk-redding.github.io/styles/main.css"> -->
  <link rel="stylesheet" href="/../styles/main.css">

  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="images/favicon.png">

</head>

<body>

  <!-- Primary Page Layout
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <header class="section">
    <div class="container">
      <nav class="row  menu">
        <div class="four columns">
          <h5 class="name"><a href="http://oliver-jk-redding.github.io">oliver-jk-redding</a></h5>   
        </div>
        <ul>          
          <li class="two columns">
            <a href="#">Projects<span class="arrow">&#9660;</span></a>
            <ul class="sub-menu">
              <li class="u-cf"> 
                <a style="padding-top: 10px;" href="../javascript-racer/index.html">Javascript Racer</a>   
              </li>              
            </ul> 
          </li>
          <li class="two columns">
            <a href="#">Blogs<span class="arrow">&#9660;</span></a>
            <ul class="sub-menu">
              <li class="u-cf"> 
                <a style="padding-top: 10px;" href="c1-reflection-blog.html">Shereef's Fireside Chat</a>   
              </li>
              <li class="u-cf"> 
                <a href="c1-time-and-habits-blog.html">Time and Habits</a> 
              </li>
              <li class="u-cf"> 
                <a href="c2-emotional-intelligence.html">Emotional Intelligence</a>   
              </li>
              <li class="u-cf"> 
                <a href="t2-html-css-dom-p1.html">HTML, CSS & DOM</a>   
              </li>
              <li class="u-cf"> 
                <a href="t2-html-css-dom-p2.html">HTML, CSS & DOM 2</a>   
              </li>
              <li class="u-cf"> 
                <a href="t3-design-to-web-blog.html">Design to Web</a>       
              </li>
              <li class="u-cf"> 
                <a href="c3-meditation-process.html">Meditation Process</a>   
              </li>
              <li class="u-cf"> 
                <a href="t4-javascript-basics.html">Javascript Basics</a>   
              </li>
              <li class="u-cf"> 
                <a href="c4-daily-mindfulness.html">Daily Mindfulness</a>   
              </li>
              <li class="u-cf"> 
                <a href="c5-self-confidence.html">Self Confidence</a>   
              </li>
              <li class="u-cf"> 
                <a href="t5-problem-solving.html">Problem Solving</a>   
              </li>
            </ul> 
          </li>
          <li class="two columns">
            <a href="#">Contact</a>
          </li>
          <li class="two columns">
            <a href="#">About Me</a>
          </li>
        </ul>
      </nav>
    </div>
  </header>

  <section class="section">
    <div class="container">
      <div class="row">
        <div class="one-third column">
          <ul class="side-menu">
              <li class="u-cf"> 
                <a style="padding-top: 10px;" href="c1-reflection-blog.html">Shereef's Fireside Chat</a>   
              </li>
              <li class="u-cf"> 
                <a href="c1-time-and-habits-blog.html">Time and Habits</a> 
              </li>
              <li class="u-cf"> 
                <a href="c2-emotional-intelligence.html">Emotional Intelligence</a>   
              </li>
              <li class="u-cf"> 
                <a href="t2-html-css-dom-p1.html">HTML, CSS & DOM</a>   
              </li>
              <li class="u-cf"> 
                <a href="t2-html-css-dom-p2.html">HTML, CSS & DOM 2</a>   
              </li>
              <li class="u-cf"> 
                <a href="t3-design-to-web-blog.html">Design to Web</a>       
              </li>
              <li class="u-cf"> 
                <a href="c3-meditation-process.html">Meditation Process</a>   
              </li>
              <li class="u-cf"> 
                <a href="t4-javascript-basics.html">Javascript Basics</a>   
              </li>
              <li class="u-cf"> 
                <a href="c4-daily-mindfulness.html">Daily Mindfulness</a>   
              </li>
              <li class="u-cf"> 
                <a href="c5-self-confidence.html">Self Confidence</a>   
              </li>
              <li class="u-cf"> 
                <a href="t5-problem-solving.html">Problem Solving</a>   
              </li>
            </ul> 
        </div>
        <div class="two-thirds column  text-box">
          <h1 class="text">Problem Solving</h1>
          <h5 class="text">14 February 2016</h5>
          <h2 class="text">Overcoming Problems in Code</h2>      
          <p class="text">
            During the coding of my racing game I encountered a number of problems with my code. I find problems can usually fall into two main categories:
          </p>
          <ul class="side-menu" style="font-size:0.5rem;">
            <li>
              <strong>Syntax errors:</strong> These are problems in the actual grammar of your code e.g. putting a semi-colon in the wrong place or forgetting to use a capital letter. These errors can actually make the code unreadable for your computer, stopping the whole website from working, but are usually easy to solve.
            </li>
            <li>
              <strong>Logic errors:</strong> These are problems to do with the output of your code. The code might be grammatically correct and make sense to the computer, but the code produces an outcome different to the one you were expecting. This is usually because you wrote the code to achieve a particular outcome, but didn't follow through the logic properly and so the outcome is actually different to what you prepared for. These can be harder to detect and fix.
            </li>
          </ul>
          <p>
            If I encounter an error in my code, the first thing I do is look for error messages in the console. This can resolve the issue quickly as the console will usually show the line of code it is getting stuck on and tell you which line in the document it is. This can be particularly effective for solving syntax errors, for example finding that extra closing bracket you forgot to delete. It can also solve some logic errors, for example it might be that a particular variable has been undefined and the console can quickly identify which variable that is.
          </p>
          <p>
            If that doesn't solve it, things can take a bit longer. It's time to isolate the problem. I add console.log() statements at various key points throughout the code to check that the program is reaching a desired section of code and that the values are as expected. A console.log() statement is a line of code that tells the program to print a specified output. This is especially useful with condition statements. Sometimes if a condition looks like it is being met, but the action in that condition is not happening, it can be useful to stick in a console.log() statement to see if the problem is with the action code or the condition code. If the console.log() statement fails to fire, then I know the problem is with the condition, etc.
          </p>
          <p>
            Console.log statements can also be useful to check variables have the expected values. I might think a particular variable has the value '6' but in fact it has a value of '0'. Console.log() statements can quickly identify such problems.
          </p>
          <p>
            Another trick is to 'comment' sections of more complex code and try running the program with more simplified code. E.g. if I can't get a function like checkKeyPressed() to fire off another complex function, updatePlayerPosition(), I need to know if the problem is with the checkKeyPressed() function or the updatePlayerPosition() function. So I will 'comment' or deactivate the checkKeyPressed() function and write a simpler version that instead of firing another function, does nothing more complicated than logging the key pressed to the console. Depending on the result I will know in which function the problem lies.
          </p>
          <p>
            Sometimes the problem lies just with me not knowing the right code in which case I will comb google, w3schools, stackoverflow, and other useful sites to look for the right code or the correct way to implement that code. I'll often steal lines of code from these sites and paste it into my own code then modify it to suit my needs.
          </p>
          <p>
            In a nutshell that's what I do. I have learned that working on a tired brain doesn't help either. The other night I was up until 1am trying to solve a problem which was as simple as writing 'keyCode' with a capital 'C' instead of a little 'c'.
          </p><commit_msg>test font size2<commit_after><!DOCTYPE html>
<html lang="en">
<head>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>Problem Solving</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">

  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css">
  <!-- <link rel="stylesheet" href="/home/dev/workspace/oliver-jk-redding.github.io/styles/main.css"> -->
  <link rel="stylesheet" href="/../styles/main.css">

  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="images/favicon.png">

</head>

<body>

  <!-- Primary Page Layout
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <header class="section">
    <div class="container">
      <nav class="row  menu">
        <div class="four columns">
          <h5 class="name"><a href="http://oliver-jk-redding.github.io">oliver-jk-redding</a></h5>   
        </div>
        <ul>          
          <li class="two columns">
            <a href="#">Projects<span class="arrow">&#9660;</span></a>
            <ul class="sub-menu">
              <li class="u-cf"> 
                <a style="padding-top: 10px;" href="../javascript-racer/index.html">Javascript Racer</a>   
              </li>              
            </ul> 
          </li>
          <li class="two columns">
            <a href="#">Blogs<span class="arrow">&#9660;</span></a>
            <ul class="sub-menu">
              <li class="u-cf"> 
                <a style="padding-top: 10px;" href="c1-reflection-blog.html">Shereef's Fireside Chat</a>   
              </li>
              <li class="u-cf"> 
                <a href="c1-time-and-habits-blog.html">Time and Habits</a> 
              </li>
              <li class="u-cf"> 
                <a href="c2-emotional-intelligence.html">Emotional Intelligence</a>   
              </li>
              <li class="u-cf"> 
                <a href="t2-html-css-dom-p1.html">HTML, CSS & DOM</a>   
              </li>
              <li class="u-cf"> 
                <a href="t2-html-css-dom-p2.html">HTML, CSS & DOM 2</a>   
              </li>
              <li class="u-cf"> 
                <a href="t3-design-to-web-blog.html">Design to Web</a>       
              </li>
              <li class="u-cf"> 
                <a href="c3-meditation-process.html">Meditation Process</a>   
              </li>
              <li class="u-cf"> 
                <a href="t4-javascript-basics.html">Javascript Basics</a>   
              </li>
              <li class="u-cf"> 
                <a href="c4-daily-mindfulness.html">Daily Mindfulness</a>   
              </li>
              <li class="u-cf"> 
                <a href="c5-self-confidence.html">Self Confidence</a>   
              </li>
              <li class="u-cf"> 
                <a href="t5-problem-solving.html">Problem Solving</a>   
              </li>
            </ul> 
          </li>
          <li class="two columns">
            <a href="#">Contact</a>
          </li>
          <li class="two columns">
            <a href="#">About Me</a>
          </li>
        </ul>
      </nav>
    </div>
  </header>

  <section class="section">
    <div class="container">
      <div class="row">
        <div class="one-third column">
          <ul class="side-menu">
              <li class="u-cf"> 
                <a style="padding-top: 10px;" href="c1-reflection-blog.html">Shereef's Fireside Chat</a>   
              </li>
              <li class="u-cf"> 
                <a href="c1-time-and-habits-blog.html">Time and Habits</a> 
              </li>
              <li class="u-cf"> 
                <a href="c2-emotional-intelligence.html">Emotional Intelligence</a>   
              </li>
              <li class="u-cf"> 
                <a href="t2-html-css-dom-p1.html">HTML, CSS & DOM</a>   
              </li>
              <li class="u-cf"> 
                <a href="t2-html-css-dom-p2.html">HTML, CSS & DOM 2</a>   
              </li>
              <li class="u-cf"> 
                <a href="t3-design-to-web-blog.html">Design to Web</a>       
              </li>
              <li class="u-cf"> 
                <a href="c3-meditation-process.html">Meditation Process</a>   
              </li>
              <li class="u-cf"> 
                <a href="t4-javascript-basics.html">Javascript Basics</a>   
              </li>
              <li class="u-cf"> 
                <a href="c4-daily-mindfulness.html">Daily Mindfulness</a>   
              </li>
              <li class="u-cf"> 
                <a href="c5-self-confidence.html">Self Confidence</a>   
              </li>
              <li class="u-cf"> 
                <a href="t5-problem-solving.html">Problem Solving</a>   
              </li>
            </ul> 
        </div>
        <div class="two-thirds column  text-box">
          <h1 class="text">Problem Solving</h1>
          <h5 class="text">14 February 2016</h5>
          <h2 class="text">Overcoming Problems in Code</h2>      
          <p class="text">
            During the coding of my racing game I encountered a number of problems with my code. I find problems can usually fall into two main categories:
          </p>
          <ul class="side-menu" style="font-size:1rem;">
            <li>
              <strong>Syntax errors:</strong> These are problems in the actual grammar of your code e.g. putting a semi-colon in the wrong place or forgetting to use a capital letter. These errors can actually make the code unreadable for your computer, stopping the whole website from working, but are usually easy to solve.
            </li>
            <li>
              <strong>Logic errors:</strong> These are problems to do with the output of your code. The code might be grammatically correct and make sense to the computer, but the code produces an outcome different to the one you were expecting. This is usually because you wrote the code to achieve a particular outcome, but didn't follow through the logic properly and so the outcome is actually different to what you prepared for. These can be harder to detect and fix.
            </li>
          </ul>
          <p>
            If I encounter an error in my code, the first thing I do is look for error messages in the console. This can resolve the issue quickly as the console will usually show the line of code it is getting stuck on and tell you which line in the document it is. This can be particularly effective for solving syntax errors, for example finding that extra closing bracket you forgot to delete. It can also solve some logic errors, for example it might be that a particular variable has been undefined and the console can quickly identify which variable that is.
          </p>
          <p>
            If that doesn't solve it, things can take a bit longer. It's time to isolate the problem. I add console.log() statements at various key points throughout the code to check that the program is reaching a desired section of code and that the values are as expected. A console.log() statement is a line of code that tells the program to print a specified output. This is especially useful with condition statements. Sometimes if a condition looks like it is being met, but the action in that condition is not happening, it can be useful to stick in a console.log() statement to see if the problem is with the action code or the condition code. If the console.log() statement fails to fire, then I know the problem is with the condition, etc.
          </p>
          <p>
            Console.log statements can also be useful to check variables have the expected values. I might think a particular variable has the value '6' but in fact it has a value of '0'. Console.log() statements can quickly identify such problems.
          </p>
          <p>
            Another trick is to 'comment' sections of more complex code and try running the program with more simplified code. E.g. if I can't get a function like checkKeyPressed() to fire off another complex function, updatePlayerPosition(), I need to know if the problem is with the checkKeyPressed() function or the updatePlayerPosition() function. So I will 'comment' or deactivate the checkKeyPressed() function and write a simpler version that instead of firing another function, does nothing more complicated than logging the key pressed to the console. Depending on the result I will know in which function the problem lies.
          </p>
          <p>
            Sometimes the problem lies just with me not knowing the right code in which case I will comb google, w3schools, stackoverflow, and other useful sites to look for the right code or the correct way to implement that code. I'll often steal lines of code from these sites and paste it into my own code then modify it to suit my needs.
          </p>
          <p>
            In a nutshell that's what I do. I have learned that working on a tired brain doesn't help either. The other night I was up until 1am trying to solve a problem which was as simple as writing 'keyCode' with a capital 'C' instead of a little 'c'.
          </p>
{'fraction_non_alphanumeric': 0.1477307811052794, 'fraction_numerical': 0.008130081300813009, 'mean_word_length': 2.0790557667934095, 'pattern_counts': {'":': 0, '<': 387, '<?xml version=': 0, '>': 387, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6690947', 'n_tokens_mistral': 6027, 'n_tokens_neox': 5228, 'n_words': 1901}