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.