PlayWithMagic – Reflections on Milestone 3

homePageDesktop

PlayWithMagic.org fosters an online community around an online tool that allows amateur magicians to post renditions of well-known routines and get feedback from their peers as well as professionals.

PlayWithMagic.org also allows magicians to post their routines as sets. Once the set has been posted, PlayWithMagic.org will automatically process the saved set and suggest improvements to refine the set based on the venue, type of magic performed, and duration of the set.

PlayWithMagic.org also allows other magicians in the community to comment on the sets that magicians have created to suggest additions and refinements to the sets that have been created by amateur magicians on the website.

This PlayWithMagic.org milestone brings together Authentication, Tests, and Image Uploads. We are edging closer and closer to a project that can be distributed to other developers to update and refine our initial product.

  • The deployed instance can be found at https://www.playwithmagic.org (as of 5/5/2015 at 8:54pm we are working on a few issues with our last merge)
  • PlayWithMagic.org can be accessed on Github here.

Project management is the process and activity of planning, organizing, motivating, and controlling resources, procedures and protocols to achieve specific goals in scientific or daily problems.

The primary challenge of project management is to achieve all of the project goals and objectives while honoring the preconceived constraints. The primary constraints are scope, time, quality and budget. The secondary — and more ambitious — challenge is to optimize the allocation of necessary inputs and integrate them to meet pre-defined objectives.

– Wikipedia.org

The time constraint on this project was palpable. Our frequent meetings on Skype have, by far, been the best way the PlayWithMagic.org team has communicated. Being able to meet on Skype has really allowed us to keep the momentum going.

Here’s a video I put together of our tests running on PlayWithMagic.org:

I really would have liked to be able to code while we are all coding online but I found that I do my best coding when I have complete silence (or classical music).

Working with talented and driven developers is making me a better developer. Having standing weekly meetings has worked well. I never feel like we’re at a loss for which direction to go. When I have a question about the tools  we are using or the code that we are building I am confident that one of my collaborators will have an answer.

Having finally fixed the bug that didn’t attribute my commits, my commits are finally showing up in the Github graph so my contributions are noted.

In the final milestone I’d like to see our “secret sauce” (Set Style Checker) implemented and providing constructive feedback to our community of amateur magicians.

At this point I feel like we’ve built a beautiful building, but it’s empty inside. It’s got air conditioning, it’s locked down with round-the-clock security, and it has a fresh coat of paint. But we are still waiting for the tenants to move in and start building cool things, having cool experiences, making friends, networking, and stepping up their magical game.

A list of my programming deficiencies

This week I watched the 2015 Pycon conference keynote by Jacob Kaplan-Moss, director of security at Heroku and one of the core contributors to Django. He admitted on stage in front of a large audience that he was a mediocre programmer. Shocking. Cue the uncomfortable silence 6 minutes in.

I hadn’t planned to write this post when I saw the Pycon Keynote. What made me interested in posting this list of deficiencies was a video I watched today with world renowned chefs René Redzepi and Jiro Ono (Of “Jiro Dreams of Sushi” fame).

The discussion between René, a cooking padawan, and Jiro, a culinary jedi, made my ears tingle. And something clicked. René asks Jiro for advice and he gets plenty.

From that struggle you can be bold and improve. – Jiro Ono

With that in mind I decided to make a list of my deficiencies in Computer Science.

In no particular order they are:

  • Cryptography
  • C Pointers
  • Design Patterns
  • Artificial Intelligence
  • Discrete Mathematics
  • Functional Programming

This is my pursuit for life. What is the pathway to mastery? The trail is in front of me. The milestones are clear. The stepping stones, not so much. The time is not assured. The first step’s been identifying the potholes. The next step is finding goals.

How did you finally learn C pointers? What methods of learning computer science have worked best for you? How many times have you left computer science and come back?

Reflections on Model Design

crowsfoot_notationI am a visual learner. I have a difficult time taking in concepts and removing the qualities of the teaching from the lesson itself. I believe this comes from a focus on sound quality that I’ve been developing for over 20 years as a musician. The extra signals that sometimes come across when someone is explaining something to me causes me to focus on the wrong signals and to mangle the points in the argument or the lesson. I’ll have to ask for them to repeat themselves or close my eyes to visualize what they just said, shutting out all the extra signals.

When I work with code I have to write out the concepts. I learned a very interesting way of making problems more easy to solve or new concepts easier to digest. I write them out in this list form. Then I use indentation to visually cluster important concepts together. This has worked for me the past. However, during this week’s 2 WODs my indentation learning method did not serve me well.

The first WOD this week asked me to create an Entity Relationship model for a library. Here’s what the original specification looked like:

Screen Shot 2015-04-14 at 12.43.01 PM

And here’s what it looked like after I cut it up into sections and created my own indentations to show the relationship between the words with my method of indentation:

Hamilton Library, 
	students and faculty 
		take out books on loan. 
	student or faculty member 
		can be loaned up to five books at a time. 
	Several copies of the same book 
		exist for those in high demand. 
	Borrowers
		make reservations when all copies of a book are out on loan.

	Information to be stored includes: 
		to whom a book is loaned; 
		the date a book is loaned; 
		the ISBN number, 
		title
		author of a book
		the student or faculty member reserving a book
		date reserved.

The Library staff needs to be able to do the following:

    Check whether a book being returned has been reserved;
    Check which borrower has a particular book out on loan;
    Check which books are out on loan to a particular borrow;
    Check whether a copy of a particular title is loaned out or not.
    Check which reservation should receive the newly turned in book.
    The history of loans for a book.
    The history of reservations for a book.

I did the same indentation format for the second WOD. Here’s what it looked like originally:

Screen Shot 2015-04-14 at 12.47.32 PM

And here’s what I came up with once I had cut it up into visual sections:

Car rental domain model

A car rental company called RentAJunker 
	keeps a number of offices 
	variety of cities 
		locations within each city. 

Each location maintains a 
	number of cars and trucks. 

The car types include: 
	Economy, 
	Standard, and 
	Van. 

Truck types include 
	Box Trucks 
	Cargo Vans.

RentAJunker maintains a 
	list of all their customers. 

When a customer first rents a vehicle, 
	the company records the customer name, 
	address, 
	phone number. 

A customer is usually identified by their phone number.

A customer 
	can reserve a vehicle 
		for specific days, 
	can rent a vehicle, 
	or return the vehicle that she/he has rented. 

To make a reservation, a customer 
	provides the location, 
	the type of the vehicle 
	and the day and time 
		for which she/he would like to pick up 
		and return the vehicle. 

When a customer returns a vehicle 
	the clerk enters the date, 
	the time, 
	the odometer reading and 
	whether the gas tank is full.

WOD Results

ER Diagram for the library:

ERD Library-1

ER Diagram for the Car Rental Company:

ERD_CarRental-1

  • I finished the first WOD in 14 minutes 5 seconds.
  • I finished the second WOD in 18 minutes and 4 seconds on the first try.

Lessons Learned this week

Getting relationships by examining the relationships between unconnected entities is a big change in how I think about modeling with ERDs. For example the customer does not need to have a relationship with a specific vehicle. And the reservation does not have to be with a specific car because the relationship can be gleaned from the office’s relationship with the car. I will be watching out for hidden models such as the Copy entity in the first WOD and the need to model the VehicleType for the second WOD.

Now that I know that my indentation modeling scheme is not flawless. I will have to try new methods to learn concepts more quickly. If you have any suggestions on how you learn computer science material. Please contact me.

Reflections on Group Work for Milestone 1

Screen Shot 2015-04-12 at 8.02.52 PMThis week I was AFK in the Grand Canyon. I stayed in touch with my collaborators by checking my text messages for updates on the project and followed the updates that were being made online via the GitHub issues.

Before I left for the Grand Canyon I was assigned the task of transitioning the routines section of our mock up website to our Play Framework Application. I used the Play Framework applications we had created in class to learn how to transfer the simple mock up version of the site to a functioning in-memory database with forms and backing classes that functioned.

I ran into a few problems when I committed my changes and merged them back into the milestone-1 branch. I had to do some clean up. Now when I push changes, I always sync both branches with the repository before merging them. This has resulted in less surprises and a cleaner process.

I returned from the Grand Canyon to review the updates that had been made to the system. I tested the system on mobile devices. I found about 7 bugs and posted them as issues on GitHub with screenshots showing the bugs.

Play With Magic is an online repository of magic routines.

The most valuable part of this milestone was to seed the application with real information. We created an application that allows users to create, read, update, and delete routines and sets. The three components of the application are:

  • Users
  • Routines
  • Sets

The initial mock up of the application showed what our application would look like. Mark, Patrick, and I met many times over Skype with professional magicians Lee Asher and Wayne Houchin. Lee talked about how much he wanted to be able to learn more about magicians’ interests and influences. Wayne advised us to focus on the energy that a magician’s set is meant to create.

After Mark, Patrick, and I met to discuss the new things we had learned. I was guilty of wanting to pivot the application somewhat to support mentorship on the website. But I was happy that we were able to focus on completing milestone-1 by sticking to our initial goals.

Once we had these in the in-memory database functioning properly we started seeding the Routines database with professional routines we found on the following websites:

This first milestone showcases the basic functionality of the website. Our group came up with the initial idea of creating a website that allows magicians to create sets. As we talked to professional magicians many new ideas for the application came up.

Play With Magic could be updated to allow amateur magicians to request help with their routines and sets from professional magicians.

Meeting on Skype versus meeting in person has been very productive. Meeting in person and coordinating a physical location to meet was problematic. Meeting on Skype, on audio, has worked out well and provided us with a way to meet and ask questions to clarify the goals of the project. I found that tagging issues and assigning them on Github made the process of keeping our tasks manageable.

I would like to focus on the look of the website for the next milestone. We also need to focus on linking the related routines that each magician has created. For milestone 1 we focused on creating the CRUD capabilities for Users, Routines, and Sets. I’m happy we were able to create the system to add and edit new content for the site. I would like to focus on making the materials in our routines reusable. Tagging capabilities will also allow us to provide search functionality for our users.

Reflections on Testing and Templates

When I was a kid, my mom sewed all of our shorts. I remember looking at the patterns that she cut out from McCall’s pattern books and laid them out on the fabric. I used to enjoy going to the fabric shop and running my fingers over the different swaths of fabric. I could close my eyes and from the feel of the fabric on my finger tips I could almost tell what it was made from: cotton, rayon, etc.

Metaphors work really well for me. They help me relate the concepts in computer science to real world, tangible things. Once I can map a concept in computer science to a real thing that I can feel and touch I can create a complete mental model in my head.

If I can see a Scala template as a McCall’s pattern for making clothes, I can see it and understand it and get more fluidity with the material.

I would like to get as good at knowing the feel of Play Framework Templates. So much that I am able to write out things and know how the process goes from parts to a full whole.

I took a different approach this week. I am noticing a common thread in my WODs. That I get caught up in understanding all the small details and why things are the way they are and that keeps me from finishing things.

I understand that I can work on things and I have to get over my procrastination. That is a new thing to learn this week. I got into it and just dove straight into the WOD videos. Then once I had completed the WOD with the instructor I circled back and watched the videos over. I looped them in my apartment to study up on the concepts.

Digits Test

During this WOD I learned how to automate testing of my pages. In the past when I’ve coded up pages and put them online I’ve had to click through the forms myself and see if the forms submitted or if there were errors in the processing. With integration testing in play, I can actually code the behaviors that the user would do and have the computer automate the test and actually perform a significant function. I wish there were something like this for PHP.

  • First try: AV in 30 min 20 seconds.

Digits Text Template

In computer science there is a concept called DRY. DRY stands for Don’t Repeat Yourself. Another great feature of Play is the ability to swap out components by creating templates. These reusable pieces of code can be created once and used all over the application an infinite number of times.

The best part of reusable code is that if it needs to be updated you just need to update that single instance of code and it will be updated across the entire web application.

The specific thing I learned in this WOD was how to update the variable at the top of the Scala page to map it to a specific Play component. When I compiled my project the first time I got a ton of errors and did not know why. Then I looked at the top of the time and realized I had not imported the bootstrap3 library.

  • First try: 14 min 30 seconds.

Digits Selection

It was good to finally start working with different types of form variables. In this WOD I added a play template form drop down box. This WOD taught me how to specifically target a form field and inspect it with firebug in Firefox. This allowed me to figure out exactly which class/id pertained to this form field so I could call it programmatically.

  • First try: DNF 1 hour 23 min 40 seconds.

Digits Custom Template

The purpose of this WOD was to combine a series of templates into a single template to display a text input and a drop down on a single row in a form. The best thing about this WOD was the ability to set form attributes inside of a row without having to specify the number of characters the form would accept so that the form would extend itself in a visually appealing manner. The combination of Play and Bootstrap makes forms look beautiful.

  • First try: 15 min 30 seconds.

Digits Init

This WOD taught me how to seed the in-memory database with content. I liked this WOD because it set up a very easy way to set global variables in the application. Although the WOD did not instruct us to do specific routines upon the end of the application, I was glad to see that there were programmatic hooks to enable behaviors to be triggered at the start and end of the application. Play seems extremely robust. I am excited to use the features I learned this week in our PlayWithMagic application.

  • First try: 9 min 32 seconds.

Lessons Learned

Two times already, I have merged my changes into the master branch without setting a commit on my branch in the code and when I merged it back into master, the updates have been lost. This happened when I finished the last WOD and the custom Scala template I create to contain both the telephone number and the telephone type in one Scala template were wiped out by the merge.

This is good to learn because I would hate to see this affecting the work done by my project peers. I like that I have an open source project that I can point to. I have open source experience now!

Github network graph of this week’s WODs

Screen Shot 2015-03-31 at 11.36.47 AM

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. http://www.youtube.com/watch?v=LGNAfBQwz4M 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 Contact.java file with a ContactDB.java 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.