E51: Meteor Bootstrap Browser History, Part 2

For this experience, you will continue to get comfortable creating your own Meteor applications using the meteor-application-template.

In this experience we will build upon the last practice WOD by adding pages and routing.

Prelude

Before beginning this WOD, you must have completed the Meteor Bootstrap Browser History experience.

You must also be familiar with meteor-application-template. For this WOD, review the use of routing to provide multiple pages.

The WOD

For this WOD, you will modify your meteor-browser-history application so that information about each browser appears on its own page. When done, the home page of the application will look like this:

Each of the browser history pages will look similar to this:

Ready? Let’s begin:

1. Start your timer.

2. Create a branch of your local meteor-browser-history repository called multipage-1.

3. Create a new directory in app/client/templates called “browsers”.

4. Inside this directory, create a template file called InternetExplorer.html. Create a template called InternetExplorer and put your Internet Explorer history text in this template.

5. Update app/lib/router/Router.js to contain a new route called “InternetExplorer”, with the url “internetexplorer”, that routes to the template “InternetExplorer”.

6. Update the navbar with a link labelled “Internet Explorer” that retrieves this page. You might want to refer to the original Header.html file to see the pathFor syntax.

7. Manually test your navbar link and see that the page is retrieved successfully.

8. Repeat steps 4-7 to add pages and navbar links for Chrome and Firefox.

9. Add a link in the navbar to the Home page.

10. Delete the text for the browser histories from the home page.

11. Check to see that all links work and the pages display correctly.

12. Commit your branch and sync it to GitHub.

13. Check to make sure your repo at GitHub now contains the updated code.

14. Stop your timer and record your time. Be sure to record it, because you will need your WOD time data when you write your technical essay.

Rx: <17 min Av: 17-20 min Sd: 20-25 min DNF: 25+ min

Important note: Once again, this practice WOD does not fully “update” your repo to be compliant with our coding standards. For example:

• I do not require you to make the README file compliant.
• I do not require you to run JSHint.
• There is code in the meteor-browser-history repo (such as the “Stuff” collection) that is unrelated to bootstrap-browser-history.

The goal for this WOD is not to create a compliant repo, but to help you begin to acquire skill with adapting the meteor-application-template to your own needs.

Demonstration

Once you’ve finished trying the WOD for the first time, watch me do it:

Standard WOD Caveats

You’ll learn significantly less from watching me solve the WOD if you haven’t attempted the WOD yourself first.

While it’s an achievement to finish the WOD no matter how long it takes, you might experience “diminishing returns” if you work longer than the DNF time. Thus, it is usually strategic to stop working at the DNF time and watch my solution.

After watching my solution, I recommend that you repeat the WOD if you have not achieved at least Av performance. If so, be sure to:

• Start a new branch off master to hold the new attempt, or else delete your prior attempt so you cannot refer to it;
• Don’t look at my screencast while you WOD; and
• Reset your timer.

Feel free to keep trying until you make Rx if that’s of interest to you.

Submission instructions

To be completed by the time and date indicated on the Schedule page.