Final Grades and Analysis

I emailed the final grades yesterday. I'm excited that more than half the class received A's. They managed to build a sophisticated webapp, and in the process learn the basics of:

HTML, CSS, app engine API (Datastore, webapp, Jinja, BlobStore, URL Fetch, Image), Python, JavaScript, jQuery, DOM, AJAX, canvas, etc, etc.

The main challenge in teaching this class is that it is simply impossible to cover all the details of all the technologies involved in lecture: 1000 hours of lecture would not be enough. Thus, all I can do is provide an overview of how the new technologies work and then give the students a weekly homework that uses those technologies. Once they hit a wall trying to use the technology they can come back to me with their problem.

One-on-One Friday Classes

Of course, many times the problem they have has nothing to do with the technology at hand. For example, a homework on using the Datastore might not work because the student does not know that None != "" in Python (or, any one a million other bits of knowledge).

This is partly why I set up Friday classes to be an exclusive one-on-one session between the students and me, where they can ask me any questions about the project and I will debug it for them. I was also always available via email, IM, and SMS, and several students took advantage of this opportunity.

Attendance to the Friday one-on-one sessions was very low, around 25%, usually the same few students. The no-shows included some that did well in the class, and some that did not. Some od the no-shows were actually very active via email/IM/SMS, which is probably a better way to get help (except that I go to sleep and wake up much earlier than most students).

So, I think Friday classes worked out OK, but next time I will be taking attendance. Sometimes, you gotta cajole people into doing what is good for them.

Github

This was also the first time I required the use of git+github. The students had to push their weekly homeworks to github so I could grade them.

I was a bit worried that they would get lost with the complexities of eclipse+egit+github, but after having a lecture and making a video on it, and helping them get it all installed it worked out very well. I used the simplest possible workflow: just commit to master and push to github when done. That is, all they had to understand was Team->Commit and Team->Push.

Still, there were a couple of students who had problems with their repos up until the end. I think because they were (accidentally?) using git commands they did not understand.

Also, most of the students were still just making one big commit just before turning in the weekly homework, even after constant reminders in class that they should be committing after each bit of functionality is implemented. But, I expected this. The same thing happens when I force students to use source control in 492.

Github really shined in helping me provide email/IM help to the students. Many times a student would email me saying that their program did not work. I could then just tell them to push it to github where I could see it all and figure out what was wrong. If needed, I could pull it and run it on my laptop. This is especially useful because most programmers at this stage suffer from what I call premature certainty, where they are sure the bug is in part X of the code, and will email you just that part of the code because that is where the bug is, when in reality the bug is in some other part of the program.

Project Complexity

The previous time I taught this class nearly all the students complained that it required too much programming. This time, I asked the students to do even more programming than last time. This is not because I enjoy their pain (I do) but simply because the contents of this class are guided by real-world demands, not students' desire for an easy A. Still, students did better. I think this is due mostly to self-selection. Last time there were still a few students that thought that building a webapp was just 'some HTML stuff'. Most students now know that building a webapp requires lots of programming (I think, because of that facebook movie) so most were ready to put in the time.


The amount of knowledge required to build modern webapps grows every year. Some things get easier to do, but this just results in a raising of the bar so more sophisticated webapps become the norm. This year I decided not to require the students to use backbone.js, or some other MVC framework, or to create persistent connections to the server, or use Memcache, or SASS, or build a responsive website, etc. But I will probably include some of those technologies next time simply because they will be the norm in webapp development by then. I am also hoping to use node.js instead of the appengine, if someone makes it easy to deploy and manage node.js applications. Can't wait!

Your GitHub Repo is Yours Forever

The friendly people at github like what you have been doing. So, they offered to let you keep your github repo for this class as long as you like. That is, I will not be deleting these repos at the end of the semester and they will persist indefinitely.

Of course, I recommend that you make it public at some point so you can use it as part of your resume. You can make the repo public in the 'Admin' tab.

Webapp Project

I talked a bit about the following opportunity in class earlier in the Semester:

This project will be to build a website and service for students, professors and other scholars. A significant problem in some parts of academia is that important announcements are made via a variety of electronic media platforms and are rarely machine-sortable by keyword or announcement type. One announcement might come out over a list serve and be a job announcement (here’s an example), while another is a Call For Papers over an RSS feed (here’s a HASTAC announcement – they use RSS), while a third could be the table of contents of a new book, sent to the emails of particular people. In this project, students will build a website which will aggregate announcements from across the disciplines of History and English from numerous social media platforms. Users should be able to select specific criteria of announcements they want to receive, for instance job announcements, Calls For Papers, etc., or announcements with certain key words in them. The website should process the language in the pool of all announcements it has collected for keywords specified by users. Ideally, the website would itself offer users multiple possibilities for receiving this information – over Twitter, Facebook, an RSS feed, email, in digest form, etc. I envision that the user basis for this would begin small – say about 10-20 users in the first month, but could grow quite rapidly to many thousands or more within 6 months. There is a golden opportunity here to provide a far better means of information-distribution than currently exist.

Student on the project would work in collaboration with Dr. Colin Wilder and staff at the Center for Digital Humanities at USC. If the project turns out well, students might be able to continue working at CDH in the summer or fall 2013 as well on other projects.

There is no funding for this project, but you could do it as a 498 class this Spring (we could even count it as a 500-level elective for your degree) with me as the faculty advisor. It would look great on your resume, much better and an easy class, and it could lead to further employment (ask Mike Helms about that).

Email me if you are interested.

PubSub on Wednesday

On Wednesday, for our last lecture of the semester, we will have another guest lecturer. Jonathan Mayhak will be talking about messaging queues. Specifically, using the pubsub design pattern to decouple metric tracking code on the web server from the database.

See you then!

Building Chrome Extensions

Here are Jarrell's slides from today's talk:

Backbone on Monday

Brad's talk about Backbone.js which was supposed to be last Monday, will now be this next Monday in class. So, be there! or be....boneless?

Final Grades

I will be dropping the lowest grade from your homeworks, before calculating your final grade. More than half the class already has an average higher than 90 so, math tells us, they can not do anything for the last homework and still get an A.

Regardless, I hope all of you put some effort into this last homework. You should make your app your own: distinct from all the other pinboards. Then you can put it in your own public github repo and it will become part of your online resume, because more and more nowadays github is your resume (HN discussion, resume generator).

HW12: The Last One

For this homework you will finish up your pinboard project in any way you want, as long as the work involved is roughly the same (or more, if you want) as the other weekly projects. There is a lot left to learn about building webapps, more than we can cover in this class, so pick one thing that you are interested in.

Here are some possibilities:

1. Let the users save their pins, or boards, to their google drive, dropbox, evernote, skydrive, etc. Pick a service that you like, read their API, and integrate into your pinboard. The integration could be as simple as saving the pin and its caption.
2. Expand on our current canvas board by letting the user draw on it, or put frames (which you provide) around selected pictures, or write text messages in the canvas.
3. Allow people to comment on pins.
4. Re-write your JavaScript code using backbone.js, or some other JavaScript MVC framework.

Or, something else? email me your idea. As long as it is roughly the same amount of work, I will approve it.

This homework is due Friday, December 7 @9am.

Make sure you explain all your new features in your README.

Invited Talks

I have arranged for a few speakers to come and talk to us about some topics relevant to webapp development. Note that attendance to these lectures is mandatory. I am also making them open to the public so if you know of someone who is interested, invite them along.

Backbone.js

On Monday, November 26, Brad Dunbar will talk about Backbone.js.

Brad is an alumnus of our department. He is a front-end engineer. He currently works at Pathable Inc. writing javascript (and coffeescript) and I does a lot of open source work for Backbone and Underscore.

Building rich, model-centric, event-driven web apps using EF, Razor & open source

On Wednesday, November 28. Jamie Thomas

In this interactive walk-through, we will create a custom application from scratch using proven Microsoft tools and technologies and a healthy dose of new approaches to software development. This session will demonstrate how easy it can be to create rich single page applications and robust client experiences while still leveraging .NET languages and tools to define the bulk of the business logic and processes (not just a tangled mess of JavaScript). While this will be a high-level demonstration, it still show how to handle hard-core problems like symmetric client and server-side template rendering, complex custom validation and event-driven model manipulation using both client and server-side rules. Though the problems solved will be hard, the solutions demonstrated will be both elegant and easy to understand.

Jamie Thomas is the Director of Software Development at VC3, an IT and software services company, headquartered here in downtown Columbia, in the IT-ology building.

Building Chrome Extensions

On Friday, November 30. Jarrell Waggoner, will show us how to build an extension for the Chrome browser.

Jarrell Waggoner is a PhD student in our department. He implemented the nonpartisan me which received some attention.

HW11: Resizing Images in Canvas

For this homework you will write code to allow users to change the size of their pins in the canvas view of the board, as well as position (which you did before). The new widths and heights in the canvas are stored in the server the moment the user unclicks (mouseup) the pin. The GUI consists of circles on the three corners of the pin which the user can use to re-size the pin, as demonstrated in the video:


There are also a few more requirements:

1. You must implement a Vector class with add and subtract operations. I want you to practice using JavaScript inheritance. Also, being able to add and subtract vectors will make your code much much simple. Specifically, when a user clicks and moves inside a pin, I want you to move the pin as thought the user grabbed it at that point. You cannot move the top-left of the pin to where the user clicked, as we did in the previous homework. This is all much easier to do if you think/code with vectors. I'll explain more in class.
2. You cannot use any third-party libraries. There are many libraries out there that do this, and more. You cannot use them, or anything else besides jQuery.

As always, when you are done push your code to your public github repo, by Monday, 26 November @9am: the Monday after Thanksgiving.

JavaScript Programming Job

I wrote this interactive quiz webapp some time ago and now they want me to add some features to it. First thing, add a keypad to it so it can be used from an iPad (without having to pull up its virtual keyboard).

They cannot pay for now, so you would be doing it just for the experience (or, for class credit, we can talk about that). But, they are applying for grant support so you might get paid to work on it in the future.

So, let me know if you are interested.

HW10: URL Fetch, Blobs, and Images APIs

So far in your app the images added to the pins have remained at the original host. All you have been doing is adding img tags whose src attribute points to the original image. For this homework you will change your webapp so that it downloads the images from the host server to your server, stores them as blobs in your database, calculates their original width and height, and then serves these images from your server.

That is, GET /pin/123.jpg now returns the actual image (a jpeg file, you can assume that all images added are jpegs for this homework) of the pin 123. You would have added that image to your datastore when the user initially did a POST /pin to add the pin.

Also, you must store in your datastore the width and height (in pixels) of the original image. You will be using these numbers in the next homework.

Required Reading

In order to do this you will need to use a couple of new service from the app engine:

The URL Fetch API allows your python code (server) to issue GET requests to other servers. This is what you will use to fetch the images from the other servers.

Once you have the image you can simply use the BlobProperty type to store it in your database. This article on Serving Dynamic Images gives you step by step instructions on how to store and then serve images in the app engine.

Finally, you need to store the width and height of the image. In order to determine those number you will need to use the Images API. These are a set of python calls that let you get information about and manipulate images.

As usual, push it to your github repo by Monday, November 12 @9am.