E47: Discover Meteor

For this experience, you should buy the Discover Meteor Book for $29 (you only need the “Main Sequence” edition).

Please resist the temptation to skip buying this book. For the price of a pizza, you will have access to an up-to-date, authoritative reference guide and tutorial on Meteor with significantly more detail than is present in other Meteor tutorials. Because Meteor has evolved significantly in the past year, much of the information available by googling is out of date, and it takes an experienced Meteor user to understand what recommendations to follow and what recommendations to ignore.

Prelude

Go through the same basic steps from the E45: Simple ToDos to set up IntelliJ, GitHub, and Meteor correctly:

• Create a GitHub repo called microscope, and clone to your local computer.
• In a different directory, invoke meteor create microscope.
• Copy the microscope files and the .meteor directory into your github repo.
• Test that Meteor runs correctly within your GitHub repo.
• Add the class standard gitignore.
• Create an IntelliJ IDEA project called polling in your GitHub directory.
• Commit your repo to GitHub to “checkpoint” this setup.

Now, login to the Discover Meteor site and start working through the tutorial, beginning with the Getting started section. Stop when you get to Chapter 5 (Routing)—we’ll cover Routing next week.

You can skip the “Deployment” sidebar.

Do all the editing in IntelliJ. Take your time and try to understand the code: don’t just copy-and-paste without thinking!

Once you have finished the tutorial up to Chapter 5, you are ready for the practice WOD!

The WOD

For this practice WOD, you will add a simple form to the Microscope application so that the user can add entries. Here’s what your app should look like after you finish:

Ready? Let’s begin.

1. Start your timer.

2. Create a branch called “add-entry-1”.

3. Review the poll-form.html and poll-form.js code from your E46 polling app. You’ll need to write something similar.

4. Use Chrome Developer Tools to inspect the CSS for the Microscope item entries. You’ll need to use the same nested <div> structure to get the same look for your form.

5. Code up two files, post_form.html and post_form.js to hold your form code.

6. Update main.html to call your postForm template.

7. Informally test your code to see that you can add items to the list.

8. It would be nice to have the form clear after adding an entry. To do this, have your form submit event handler take a second parameter called “template”, then call it as follows at the end of your handler:

   template.find("form").reset();
   

9. Commit your branch to GitHub.

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

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.

Important hint: you will need this code base for this week’s WOD, so be sure to finish it.