Reflections on Group Work

When I was growing up I wanted to be either a magician or an inventor. With computers I get to do both. I’m excited to announce that I’m working on a new open source project called PlayWithMagic with two very capable software engineers Patrick Karjala and Mark Nelson.

We’re creating a web app that allows magicians to share and remix their routines. Users can create their own sets “automagically.”

Mark’s hosting our site on his Rasberry Pi server.

“Good programs aren’t written or built, they’re grown.” – Mike Muuss

How did you divide up the work?

This week we got together 4 times to discuss our initial ideas. We split up the mock up work and reconvened in a few days. Once we had mocked up the pages we researched our service by meeting with professional magician, Lee Asher, on Skype. Mark worked on the README for the project. Patrick worked on the homepage, the user login on the navigation bar, and I created pages to display the user’s profile, a page to show the routine, and the pages to create a new user and a new routine.

This slideshow requires JavaScript.

How did you coordinate development?

Before we met each of us came up with a list of questions and updates. When we met we set an agenda. The conversations were smooth and we were able to agree on what features to pursue.

We talked about the goal endlessly.

Github allowed us to keep up with each other’s progress. This helped to ensure that issues were taken care of. We used the issue tracker to determine what we wanted to focus on next. We talked for a while about the application. Then we mentioned some of the things that you have to consider at the beginning of any web project. There have to be log ins and user profiles. And we planned around our idea. Like a bottom up approach. I wrote up a bunch of user case scenarios. And Mark and Patrick drew up data models and program flows.

This slideshow requires JavaScript.

Once I knew what I was responsible for, I added them to github as issues and assigned them to myself.  I did all of my mockup coding over the course of 6 hours, from 7:41pm to 2:30am. Then I pushed all my changes to our repo on github and watched something on Netflix before I went to sleep. Looking at this gif and it looks funny. But the funny thing is, I can care so much about something that I can lose myself for 6 hours refining the code to make it beautiful and refined.

Was the group experience a positive one?

The group work was profoundly positive. We get along as a group and we all get our work done quickly. We communicate well and let each other explain our ideas completely before going forward. When we met at Patrick’s workplace for one of our meetings. He taught me and Mark how to use LESS.

This slideshow requires JavaScript.

What should your group change in order to work more effectively during the remainder of the semester?

We’re hitting all the goals. Issues are divided evenly. And the project is moving so fast that we are literally at the edge of our understanding. We’re adding form validation and database support as soon as we learn how it’s applied in the Play Application framework. We are right on track to get this application finished on time.

Reflections on MVC

images.duckduckgo.comMVC is a design pattern that allows coders to keep unrelated portions of their code separated into logical chunks so that the implementation remains as loosely coupled as possible. We use MVC to make our designs scalable, reusable, and clean.

This week was really rough.

There were so many things to incorporate into my understanding of the Play Framework. The CRUD update WOD was by far the most difficult. Toward the end of the week I was kind of wondering what I was doing as I was doing it.

I understand, on a very basic level, how MVC works, but getting good with doing it by default and in some kind of flow state seems impossible at this point.

I understand the concepts we covered this week but the break-neck speed of the material is daunting. I need to plan for more time to focus on redoing the final two WODs. Adding a model that allows for persistent data across the application is encouraging. I’m proud of myself for sticking with a persistent bug I encountered. I checked my code line by line 3 times and still my application would not retain form data. Only after restarting my computer, taking a walk around campus, and running ‘activator clean’ did my form data finally start working.

The concepts at this point are falling into place extremely slowly.

I’m anticipating more time with the material will make the concepts much clearer. Surprisingly, I am not daunted by Scala expressions intermixed with HTML and Java code. Maybe it’s because I’ve been using Objective-C for 5 years and I’m used to the overabundance of brackets.

This slideshow requires JavaScript.

Digits Mockup

I am consistently amazed by how beautiful my web applications are now that I am using Twitter Bootstrap.

The integration of fonts, and solidly positioned (don’t forget responsive) divs makes me happy. During this WOD I quickly set up a bootstrap application and added a ‘zebra type’ form. Just last year, I remember coding my web forms in PHP and having to check the modulus of the returned content from the database to determine which row to shade off-color. I love Twitter Bootstrap.

I did not finish this WOD the first time through because I spent a lot of time with Bootswatch picking out my favorite theme. I did learn how to include my theme dynamically with a relative stylesheet. I have that code saved for later when I want to swap out the standard twitter bootstrap CSS with a customized theme from Bootswatch.

  • First try: DNF at 39 min 35 sec
  • Second try: AV at 21 min 16 sec

Digits Form

For the process of updating forms to use the Play Framework I created a list for myself in TextEdit on my desktop. The four steps to update web forms from HTML to the Play Framework are as follows:

  1. Create a backing class for form.
  2. Make view dynamic.
  3. Handle form in controller.
  4. Add POST request to routes.

I’m not quite at the point of translating this list to code but it helps to know the list or have a crib sheet to make the updates faster and faster. I will continue working to commit these words to memory. Even more to work through this process and immediately be able to code it up fast.

I did not finish this WOD within the time allotted. Before I attempted the WOD again, I reviewed the Play Form Screencast and took notes on exactly what was updated and in what order. I am learning that the order of the updates matters. Not only do I get code completion in IntelliJ if I do the updates in a particular order, but wear grooves where my feet have gone before. I can code faster if I code in the same manner over and over.

  • First try: DNF at 43 min 55 sec
  • Second try: AV at 23 min 14 sec

Digits Form Validation

The form validation WOD was my favorite this week. Everything with form validation is straightforward. I understand it and I was able to complete this WOD on the first try. As with the first WOD this week, I am just amazed by Twitter Bootstrap. The ability to style up the forms themselves to show the status of the input is beautiful in its simplicity and calm presentation.

  • First try: Rx in 17 min 33 sec

Digits Model

I did not feel as prepared for this module as I did for the previous WODs this week. I did not feel that the screencasts that led up to this WOD made the application possible. Perhaps I missed some of the supplemental information in the readings.

I had a very hard time conceptualizing the updates I was making in this WOD. I will have to redo this WOD many more times to first get the understanding of the material, then many more times to get the fluidity needed to complete it in under 18 minutes.

  • First try: DNF in 28 min 50 sec
  • Second try: DNF in 32 min 14 sec (Could not complete this WOD on my own. Had to rely on the screencast.)

Digits CRUD

I tried my best to do this WOD on my own the first time but I did not feel prepared for the material. I believe that I need to devote more time to reading the supplemental material. Rather than rely on the screencasts leading up to the WODs I should have devoted more time to finding supplemental material.

This practice WOD had me going all over the application to update the file with a file. I understood the updates we were making but the dependencies within the code to sustain the updates was jarring. I feel very off balance with the material in this practice WOD. I am planning to get up early tomorrow and get in as many redos with this practice WOD as possible before class.

  • First try: DNF in 1 hour 15 min 7 seconds

Lingering Questions

What’s the best way to handle authentication inside of a Play Framework application? Patrick found a third-party framework called SecureSocial that handles authentication. I haven’t had a chance to look into it deeply. But from my research online, there are a number of simple tweaks we can do the application to require simple page-based authentication.

I want to find something that has as few dependencies as possible. I also want to find something that is easy to upgrade. I feel that the PlayWithMagic code we are working on will be used in the future by Mark and I want to be sure that it ages well.

Reflections on Web Application Frameworks

playEl Dorado, the “mystical city of gold,” never existed. The Fountain of Youth was a joke. But people talked like it was true.

Things that sound too good to be true usually are. That’s why I was skeptical when I heard about Play.

First, if you’re not acquainted with the latest Web Application Framework, Play is a “lightweight, stateless, web-friendly architecture.”

The Play Framework combines HTML, Javascript, CSS, and databases into a single stack. I love it. But I’m hesitant to sing its praises too soon. I haven’t even interacted with its database. I’m hoping it’s a flat file database. If it performs like the rest of the Play Framework I may become a true believer. More interaction with the framework is necessary.

Progressively moving toward web authoring singularity

This week I completed four WODs. I wasn’t able to finish all of them in before my timer went off. There were a few things that did not work the first time through that I will list out as I go through all of them. You need to write out references to static elements like images and css files with routes. I was not used to this.

Integration and Application tests validate the code. Play enables me to check the validity of the code by running tests to ensure that everything’s working as it should.

The WODs I worked on this week used the following technologies:

WODs I worked on this week

Clean Play Java

For this WOD I downloaded the Play Framework and compiled a new project on my computer. I ran the code, ran the unit tests, and started up a local instance of a Play-Java application on my computer. Once I set up a new repo on GitHub I accidentally created a .gitignore file and the Play Framework did not like that I had created my own .gitignore file and the IntelliJ would not allow me to push my changes to my repo. It was confused by the two .gitignore files in my directory. I ended up created the repo from scratch and I did not set a .gitignore file in Github.

  • DNF on the first try in 1 hour and 12 minutes.
  • Finished on the second try in 14 minutes and 36 seconds.

Play Bootstrap Browser History

For this WOD, I created a website that simple fetched a repository that had been created earlier. This repository creates a Play application and integrates Bootstrap. I added this repo as an upstream master and merged the repo with mine. I compiled and ran the code with Activator and the application loaded on at localhost:9000 on my machine. Then I ran the code through CheckStyle to make sure it passed all of the tests.

  • Finished on the first try in 26 minutes and 23 seconds.
  • Finished on the second try in 21 minutes and 4 seconds.

Multi-Page Play Bootstrap Browser history

For this WOD I updated my Play Bootstrap Browser History project. Instead of serving all of the content on a single page, I updated the code and split the content from the index page onto multiple separate pages. I updated the navigation to point to the new pages and wrote some unit tests to ensure that the new pages were being rendered by the Play Framework properly. Once I finished updating the file, updated the routes, and wrote the unit tests I tested out the application and it worked wonderfully.

  • Finished on the first try in 14 minutes 23 seconds.
  • Finished on the second try in 7 minutes and 37 seconds.

Play Responsive Kamanu

This WOD was very much like the previous WOD. The only difference in this WOD was that I had to update the navigation in the header. This one took much longer than I expected because I did not heed the advice to update the image files in the Play Application Framework to look for images along the route. Once I learned that I needed to update the file paths in the play application with relative computed locations I was able to update my code and complete the WOD successfully on the second time through. This one was basically updating the Twitter Bootstrap navigation bar with custom images and formatting.

  • DNF on the first try in 30 minutes and 11 seconds.
  • Finished on the second try in 12 minutes and 10 seconds.

Things I learned this week:

  • Command + Alt + L is to refactor the code. (Make sure optimize imports is checked so it can be taken care of too.)
  • Command + Alt + Shift + I, type CheckStyle. Click Enter.
  • Click on File Inspector to select the file to move. Press F6 to move the file into a package.

Lingering questions

  • How does not having compiled pages affect SEO?
  • How does security work in this framework?
  • How do we sanitize our input?
  • How do we add e-commerce to a Play application?
  • Are there special requirements to look for when finding a hosting service for a play application?

Reflections on Twitter Bootstrap 3.0

twitterBootstrapAsk anyone who’s been working with HTML and CSS since the late nineties about vertically aligning content with CSS. And they’ll tell you it has always been quite a challenge on one browser. Getting consistent results on many different browsers was nearly impossible. That’s why I was so excited to try out Twitter Bootstrap.

This framework is a god send.

Having to have the ability to center-align things is fantastic. The ability to programmatically create buttons is also fantastic. I used to spend hours and hours tracking down an implementation that I liked. Then I would have to research it and find out how it was made by either looking at the code or by finding a tutorial online. Now I can just import the framework and use the CSS classes right out of the box to create a three columned layout that automatically scales to different screen resolutions.

I’m also happy to start adopting this framework because it is open source. There is no possibility of it going out of date as browsers change over time. There is a huge community of developers working on updating Twitter Bootstrap.

I like that I don’t have to worry about browser specific implementations. Twitter Bootstrap is really easy to use. And I’m going to start using it professionally with my installation of WordPress. I used it to easily mock up a quick survey intro page for work. I am looking forward to using this technology to create a carousel that shows not only pictures but videos too.

Summary of WOD experiences

Bootstrap browser history – This exercise was my first experience using Bootstrap. We created a simple website on the history of surfing. A simple website with four floating divs that held the images and names of four famous surfers. Then we applied Bootstrap and suddenly all the old CSS was not necessary. It still pays to know CSS, but with Bootstrap setting up responsive columns is ridiculously easy.

  • I completed this WOD in 25 minutes and 56 seconds.

Responsive Kamanu – During this exercise I recreated the Kamanu Composites website with Bootstrap. The navigation was easy to update with Bootstrap. And I was also able to style the site with an easy starter design from Bootswatch. I laid out the basic elements of the site I and it looked like something from 1999. Then I added Bootstrap and Bootswatch and the navigation came to life.

  • I completed this WOD in 40 minutes and 22 seconds.

Responsive Castle High School – I updated the Castle High School website to take advantage of the responsive design that comes with Bootstrap. This was the first time I’ve seen a class applied to a div to make it hide itself when the page is resized. Now that I have finished these three experiences with Bootstrap that is simply no going back. Bootstrap gives me confidence to build a site and not worry about how it looks on specific browsers at specific sizes. I can code up a site and be content that it will look beautiful and consistent on any device running any browser.

  • I completed this WOD in 33 minutes and 55 seconds.

Most helpful tool for debugging CSS

The most helpful tool in finding out why certain CSS rules were not being applied was Firebug for Firefox. I got stuck for a good 10 minutes trying to update the color of the navigation bar in CSS. Once I inspected the navigation element with Firebug I was able to determine that the color was being set but the gradiated image was being applied over the background color. Once I removed the gradient the background color shone through.