English subtitles

← Finding Diffs Between Larger Files - How to Use Git and GitHub

Get Embed Code
5 Languages

Showing Revision 3 created 05/25/2016 by Udacity Robot.

  1. You just found the differences between these two files by hand and
  2. it worked all right.
  3. But it probably seemed pretty tedious and the files were also small.
  4. What if you had files with hundreds or even thousands of lines?
  5. Let's take a look at what we could do in that case.
  6. Now, let's take a look at a program that require's a bit more code.
  7. This is a game called Asteroids and I know this text is a little hard to read,
  8. but it says press space to start.
  9. Some of you may recognize that this is a classic arcade game that has been
  10. ported so you can play it in the browser.
  11. You press the left and
  12. right arrow keys to turn the ship, up to fire the engine, and space to shoot.
  13. Props to Doug McGuiness for creating this game.
  14. If you want to play it yourself,
  15. there's a link to it on Doug's website in the instructor notes.
  16. But right now, we're going to be focusing on finding a bug in its code.
  17. The code for this game is in JavaScript.
  18. But don't worry, you won't need to know JavaScript to complete the exercise.
  19. I thought using space to fire the engine might be more intuitive to me, so
  20. I changed the controls for the game to use space instead of up arrow.
  21. Then I needed a different way to shoot, so
  22. I decided to use enter instead of space for that.
  23. But when I tried the game out,
  24. the engines didn't work at all anymore, I couldn't move.
  25. I think I made a typo, but I'm not sure where.
  26. Most of the code for this game,
  27. including the codes that maps keys to actions, is in a file called game.js.
  28. Now, this file contains over a thousand lines.
  29. It would be way too time consuming to go through this entire file,
  30. comparing the new version to the old version.
  31. Fortunately, there are a bunch of tools that can automatically find
  32. differences between files.
  33. If you're using Windows,
  34. you have a tool in the command prompt called FC, which stands for file compare.
  35. If you're using Mac or Linux, then FC is a different unrelated command, but
  36. you have a built-in tool, called Diff, you can use, which stands for difference.
  37. I'll demonstrate using these tools to compare the HTML you
  38. just compared manually in the previous exercise.
  39. Then I'll ask you to go through the same process to
  40. find the differences in game.js.
  41. On Windows, I'll open the command prompt first.
  42. By the way, if you'd prefer to use git bash to complete this exercise, then,
  43. you can follow the instructions for the Mac and
  44. Linux students that are coming in a minute.
  45. But for now,
  46. I'm going to show how to complete the exercise in the command prompt.
  47. So first, I'll need to change to the directory that has my files in it.
  48. So I'll type cd Downloads.
  49. Since I downloaded my files to the downloads folder.
  50. Now I'll enter the command FC favorite-app-old.html favorite-app.html.
  51. So, to the FC or File Compare Program, I passed two files,
  52. the first one that I want to compare, and the second.
  53. Now, when I hit enter, I can see that
  54. I'm comparing the files Favorite-app-old.html and FAVORITE-APP.HTML.
  55. So, each of these two sections are showing different parts of the file.
  56. So here, you can see that favorite-app-old.html href style-1.css, and
  57. FAVORITE-AP.HTML href style-!.css.
  58. Then down here, you can see the next section that changed,
  59. which was the description.
  60. Some description here changed to the fun fact.
  61. Did you know that sunflowers were used to remove toxins from
  62. a pond after the Chernobyl disaster?
  63. Sections that didn't change aren't shown,
  64. since we're only trying to focus on the differences here.
  65. On Mac or Linux, I'll open the terminal, navigate to where the files are,
  66. then enter the command diff -u favorite-app-old.html favorite-app.html.
  67. The -u option stands for
  68. unified diff format and it will make the output a little easier to read.
  69. Now, I'll go ahead and hit Enter.
  70. The output format here is a little bit different than for FC.
  71. I'll scroll back up.
  72. And first, you can see that there were some lines at the top.
  73. And you don't really need to worry about these lines.
  74. They're just showing you that you're comparing favorite-app-old.html,
  75. to favorite-app.html.
  76. Ones with no plus or minus sign next to them like these haven't changed.
  77. That is they existed in both the old version of the file and the new version.
  78. Lines with a minus sign were removed.
  79. That is they existed in the old version, but not the new version.
  80. And lines with a plus sign were added, so vice versa.
  81. Now I'll scroll back down.
  82. And here's the style sheet change that you found earlier.
  83. And here's the description change.
  84. Now, go ahead and download the filesgameold.js and gamenew.js from
  85. the downloadable section and compare them using either FC or Diff.
  86. Your files will probably be downloaded to the downloads folder, so
  87. you can navigate there by using CD downloads, just like I did.
  88. What word contains a typo in the version of game.js but not in the old version?
  89. Once you found the word, enter it in this box.
  90. Use the correct spelling for the word.