Consolidate identical 'Developer Tools' and 'Deploying your Sites' pages with insert

tjgrathwell · tjgrathwell · commit fa380b097ba6 · 2015-02-07T21:58:27.000-08:00
diff --git a/sites/en/frontend/_developer_tools.step b/sites/en/frontend/_developer_tools.step
@@ -1,25 +1,25 @@
 goals do
-  goal "Get oriented with your browser's dev tools. They're a great jumping-off point for continuing to build your HTML, CSS, and JavaScript knowledge."
-  tip "The screenshots below are specific to the Chrome web browser, which is available for Mac and PC and has great developer tools. But if you're partial to another browser, there's usually a similar set of tools you can use."
+  goal "Get oriented with your browser's developer tools. They're a great jumping-off point for continuing to build your HTML, CSS, and JavaScript knowledge."
+  tip "The screenshots below are specific to the Chrome web browser, which is available for Mac, PC, and Linux and has great developer tools. But if you're partial to another browser, there's usually a similar set of tools you can use."
 end
 
 steps do
-  
+
   step do
     message <<-MARKDOWN
-      First, you've got to turn on your dev tools. They're hidden by default.
+      First, you've got to turn on your developer tools. They're hidden by default.
 
-      <img src='http://github.com/img/devtools.png'>
+      <img src='http://github.com/frontend/img/devtools.png'>
 
       In Chrome, you can do this by clicking _View > Developer > Developer Tools_.
     MARKDOWN
   end
-  
+
   step do
     message <<-MARKDOWN
       Click on the 'Elements' button to check out your HTML.
 
-      <img src='http://github.com/img/devtools_elements.png'>
+      <img src='http://github.com/frontend/img/devtools_elements.png'>
 
       Clicking on an HTML tag in the elements panel will highlight that element in the browser window. It's a great tool for debugging styling problems. On the right side of the panel, you'll even get a list of styles that are being applied to that element.
     MARKDOWN
@@ -30,7 +30,7 @@ steps do
     message <<-MARKDOWN
       In the 'Network' panel, you can see what other files and resources your HTML page is loading.
 
-      <img src='http://github.com/img/devtools_network.png'>
+      <img src='http://github.com/frontend/img/devtools_network.png'>
 
       If you click on a file name, you can take a look at the contents of that file. This panel is a great place for debugging script linking or loading issues. (You can see HTTP headers and request params here too, with a little digging.)
     MARKDOWN
@@ -40,30 +40,28 @@ steps do
     message <<-MARKDOWN
       The 'Console' is the JavaScript developer's secret weapon. It lets you run JavaScript by typing it in directly &mdash; and it runs your scripts _in the context of your page_, so you can interact directly with objects and functions you've defined. It's helpful for debugging and experimenting.
 
-      <img src='http://github.com/img/devtools_console.png'>
+      <img src='http://github.com/frontend/img/devtools_console.png'>
     MARKDOWN
   end
-  
+
   step do
     message <<-MARKDOWN
       The 'Sources' panel is another JavaScript pro tool. If you're used to working with an IDE that has a debugger, you'll be able to use many of the same techniques (like breakpoints, stack traces, and watch expressions) right here in the browser.
 
-      <img src='http://github.com/img/devtools_script.png'>
+      <img src='http://github.com/frontend/img/devtools_script.png'>
     MARKDOWN
   end
 end
-  
+
 explanation do
 
   message <<-MARKDOWN
 
-## Keep Learning with Dev Tools
+## Keep Learning with Developer Tools
 
-With good browser dev tools, you can pick apart every website you visit. If you see cool
+With good browser developer tools, you can pick apart every website you visit. If you see cool
 CSS styles or JavaScript animations, you can always look under the hood and figure out how
 they're done. It's a great way to keep learning as a front end developer.
 
   MARKDOWN
 end
-
-next_step 'add_starter_files'
diff --git a/sites/en/frontend/developer_tools.step b/sites/en/frontend/developer_tools.step
@@ -0,0 +1,3 @@
+insert '_developer_tools'
+
+next_step 'add_starter_files'
diff --git a/sites/en/javascript-to-do-list-with-react/deploying_your_site.step b/sites/en/javascript-to-do-list-with-react/deploying_your_site.step
@@ -1,60 +1,3 @@
-message <<-MARKDOWN
-### Goal
-
-<!-- Lesson 14 - Putting Your Game Online -->
-
-Hosting your list requires you to make the HTML, JavaScript and CSS files
-available over the Internet.
-
-There are three hosting options, depending on how much of a challenge you are looking
-for:
-
-* Use a static site hosting service
-* Use git and Github Pages
-* Roll your own with a hosting provider
-
-### Using a Static Site Hosting Service
-
-If you are brand new to hosting websites, you may want to use a static site
-hosting service. These allow you to upload a zip file of html, css and
-javascript and have a working website. An easy one is
-[Forge](https://getforge.com/).
-
-1. Sign up for Forge
-2. Zip your `IntermediateTodoList-master` directory
-3. Drag it into the forge website
-
-Now you have a fully functioning list hosted online! Share the link
-with your friends and family and wow them with your skills!
-
-### Using Git and Github Pages
-
-If you like with git and github, take a stab at setting up your site
-with [Github Pages](http://pages.github.com/). The easiest thing to do is:
-cd .
-1. From the terminal, `cd` into your `IntermediateTodoList-master` directory
-1. Turn it into a git repository by running `git init`
-1. Checkout a branch called `gh-pages`
-1. Commit all the files
-1. Create a remote repository on github for the game.
-1. Follow their instructions for adding the github remote to your existing repo
-1. Follow the instructions on [Github Pages](http://pages.github.com) for
-   setting up a project site from scratch.
-1. Make the `gh-pages` the default branch
-1. Push it on up!
-
-### Rolling Your Own Hosting With a Cloud Provider
-
-If you secretly are an unix admin who floats in the cloud; consider
-using Amazon
-[S3](http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html) or
-[Rackspace Cloud
-Files](http://www.rackspace.com/knowledge_center/article/use-cloud-files-to-serve-static-content-for-websites)
-
-Both of these services are designed to serve up static files without needing to
-pay for a virtual server. This makes your monthly hosting bill for even large,
-high traffic sites incredibly cheap.
-MARKDOWN
-
+insert '../javascript-to-do-list/_deploying_your_site'
 
 next_step "next_steps"
diff --git a/sites/en/javascript-to-do-list-with-react/developer_tools.step b/sites/en/javascript-to-do-list-with-react/developer_tools.step
@@ -1,72 +1,3 @@
-goals do
-  goal "Get oriented with your browser's developer tools. They're a great jumping-off point for continuing to build your HTML, CSS, and JavaScript knowledge."
-  tip "The screenshots below are specific to the Chrome web browser, which is available for Mac, PC, and Linux and has great developer tools. But if you're partial to another browser, there's usually a similar set of tools you can use."
-end
-
-steps do
-
-  step do
-    message <<-MARKDOWN
-      First, you've got to turn on your developer tools. They're hidden by default.
-
-      <img src='http://github.com/frontend/img/devtools.png'>
-
-      In Chrome, you can do this by clicking _View > Developer > Developer Tools_.
-    MARKDOWN
-  end
-
-  step do
-    message <<-MARKDOWN
-      Click on the 'Elements' button to check out your HTML.
-
-      <img src='http://github.com/frontend/img/devtools_elements.png'>
-
-      Clicking on an HTML tag in the elements panel will highlight that element in the browser window. It's a great tool for debugging styling problems. On the right side of the panel, you'll even get a list of styles that are being applied to that element.
-    MARKDOWN
-    tip "Chrome's Elements panel will update to match the state of your DOM as you modify it with JavaScript. Some elements panels don't do this &mdash; they just show what the HTML looked like on page load."
-  end
-
-  step do
-    message <<-MARKDOWN
-      In the 'Network' panel, you can see what other files and resources your HTML page is loading.
-
-      <img src='http://github.com/frontend/img/devtools_network.png'>
-
-      If you click on a file name, you can take a look at the contents of that file. This panel is a great place for debugging script linking or loading issues. (You can see HTTP headers and request params here too, with a little digging.)
-    MARKDOWN
-  end
-
-  step do
-    message <<-MARKDOWN
-      The 'Console' is the JavaScript developer's secret weapon. It lets you run JavaScript by typing it in directly &mdash; and it runs your scripts _in the context of your page_, so you can interact directly with objects and functions you've defined. It's helpful for debugging and experimenting.
-
-      <img src='http://github.com/frontend/img/devtools_console.png'>
-    MARKDOWN
-  end
-
-  step do
-    message <<-MARKDOWN
-      The 'Sources' panel is another JavaScript pro tool. If you're used to working with an IDE that has a debugger, you'll be able to use many of the same techniques (like breakpoints, stack traces, and watch expressions) right here in the browser.
-
-      <img src='http://github.com/frontend/img/devtools_script.png'>
-    MARKDOWN
-  end
-end
-
-explanation do
-
-  message <<-MARKDOWN
-
-## Keep Learning with Developer Tools
-
-With good browser developer tools, you can pick apart every website you visit. If you see cool
-CSS styles or JavaScript animations, you can always look under the hood and figure out how
-they're done. It's a great way to keep learning as a front end developer.
-
-Next, we'll put our knowledge of developer tools to use as we learn how clients and servers work
-in a modern web application.
-
-  MARKDOWN
-end
+insert '../frontend/_developer_tools'
 
 next_step 'creating_a_list'
diff --git a/sites/en/javascript-to-do-list/_deploying_your_site.md b/sites/en/javascript-to-do-list/_deploying_your_site.md
@@ -0,0 +1,54 @@
+### Goal
+
+Hosting your list requires you to make the HTML, JavaScript and CSS files
+available over the Internet.
+
+There are three hosting options, depending on how much of a challenge you are looking
+for:
+
+* Use a static site hosting service
+* Use git and Github Pages
+* Roll your own with a hosting provider
+
+### Using a Static Site Hosting Service
+
+If you are brand new to hosting websites, you may want to use a static site
+hosting service. These allow you to upload a zip file of html, css and
+javascript and have a working website. An easy one is
+[Forge](https://getforge.com/).
+
+1. Sign up for Forge
+2. Zip your project directory
+3. Drag it into the Forge website
+
+Now you have a fully functioning list hosted online! Share the link
+with your friends and family and wow them with your skills!
+
+### Using Git and Github Pages
+
+If you like with git and github, take a stab at setting up your site
+with [Github Pages](http://pages.github.com/). The easiest thing to do is:
+cd .
+
+1. From the terminal, `cd` into your project directory
+1. Turn it into a git repository by running `git init`
+1. Checkout a branch called `gh-pages`
+1. Commit all the files
+1. Create a remote repository on github for the game.
+1. Follow their instructions for adding the github remote to your existing repo
+1. Follow the instructions on [Github Pages](http://pages.github.com) for
+   setting up a project site from scratch.
+1. Make the `gh-pages` the default branch
+1. Push it on up!
+
+### Rolling Your Own Hosting With a Cloud Provider
+
+If you secretly are an unix admin who floats in the cloud; consider
+using Amazon
+[S3](http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html) or
+[Rackspace Cloud
+Files](http://www.rackspace.com/knowledge_center/article/use-cloud-files-to-serve-static-content-for-websites)
+
+Both of these services are designed to serve up static files without needing to
+pay for a virtual server. This makes your monthly hosting bill for even large,
+high traffic sites incredibly cheap.
diff --git a/sites/en/javascript-to-do-list/deploying_your_site.step b/sites/en/javascript-to-do-list/deploying_your_site.step
@@ -1,61 +1,3 @@
-message <<-MARKDOWN
-### Goal
-
-<!-- Lesson 14 - Putting Your Game Online -->
-
-Hosting your list requires you to make the HTML, JavaScript and CSS files
-available over the Internet.
-
-There are three hosting options, depending on how much of a challenge you are looking
-for:
-
-* Use a static site hosting service
-* Use git and Github Pages
-* Roll your own with a hosting provider
-
-### Using a Static Site Hosting Service
-
-If you are brand new to hosting websites, you may want to use a static site
-hosting service. These allow you to upload a zip file of html, css and
-javascript and have a working website. An easy one is
-[Forge](https://getforge.com/).
-
-1. Sign up for Forge
-2. Zip your `IntermediateTodoList-master` directory
-3. Drag it into the Forge website
-
-Now you have a fully functioning list hosted online! Share the link
-with your friends and family and wow them with your skills!
-
-### Using Git and Github Pages
-
-If you like with git and github, take a stab at setting up your site
-with [Github Pages](http://pages.github.com/). The easiest thing to do is:
-cd .
-
-1. From the terminal, `cd` into your `IntermediateTodoList-master` directory
-1. Turn it into a git repository by running `git init`
-1. Checkout a branch called `gh-pages`
-1. Commit all the files
-1. Create a remote repository on github for the game.
-1. Follow their instructions for adding the github remote to your existing repo
-1. Follow the instructions on [Github Pages](http://pages.github.com) for
-   setting up a project site from scratch.
-1. Make the `gh-pages` the default branch
-1. Push it on up!
-
-### Rolling Your Own Hosting With a Cloud Provider
-
-If you secretly are an unix admin who floats in the cloud; consider
-using Amazon
-[S3](http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html) or
-[Rackspace Cloud
-Files](http://www.rackspace.com/knowledge_center/article/use-cloud-files-to-serve-static-content-for-websites)
-
-Both of these services are designed to serve up static files without needing to
-pay for a virtual server. This makes your monthly hosting bill for even large,
-high traffic sites incredibly cheap.
-MARKDOWN
-
+insert '_deploying_your_site'
 
 next_step "next_steps"
diff --git a/sites/en/javascript-to-do-list/developer_tools.step b/sites/en/javascript-to-do-list/developer_tools.step

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+insert '_developer_tools'`
	`2`	`+`
	`3`	`+next_step 'add_starter_files'`