Practice WOD: PlayResponsiveKamanu

Before starting this WOD, you should have completed the Twitter Bootstrap practice WOD called “ResponsiveKamanu”.

In addition, you’ll need to understand the basics of incorporating image files into your Play applications, which can be summarized as follows:

• Place image files into the public/images directory.
• Within a *.scala.html file, reference an image called foo.jpg in the public/images directory using reverse routing: @routes.Assets.at(“images/foo.jpg”)
• With a CSS file such as main.css, reference the same image using a relative path: ‘../images/foo.jpg’

Instructions

1. Start your timer.
2. Create a Play application called PlayResponsiveKamanu by downloading the play-bootstrap-template repository, then renaming the directory, the Eclipse project, and the Play project to “PlayResponsiveKamanu”. (Note that you’ll edit the build.sdt file to change the Play project name; see this screencast for details.)
3. Enable Checkstyle on your project. If there are any errors or warnings, remove them.
4. Edit the application so that the page displayed is the same as the one you created in the ResponsiveKamanu practice WOD. You should:
   • Copy the images into the public/images directory.
   • Copy the CSS in the style.css file to the public/stylesheets/main.css file.
   • Edit the title to be “Play Responsive Kamanu”.
   • Edit the main.scala.html file to provide the same navbar styling and contents.
   • Edit the index.scala.html file to provide the same home page content.

Your web application should display the following page:

And a page related to a specific browser should look like this:

Note that the navbar highlights the active page.

When finished, stop your timer, and record how many minutes it took you to complete the WOD.

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

Demonstration

Once you’ve finished doing the WOD a single 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 might be 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:

• Delete your old project 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.